Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
budgeting-list/controlbar/styles: using BEM names
Browse files Browse the repository at this point in the history
Kha committed Sep 26, 2022
1 parent f897dd7 commit c032111
Showing 3 changed files with 16 additions and 26 deletions.
6 changes: 3 additions & 3 deletions meinberlin/apps/budgeting/assets/ControlBar.jsx
Original file line number Diff line number Diff line change
@@ -71,8 +71,8 @@ export const ControlBar = props => {
<ControlBarListMapSwitch query={filterString} />
</div>
<div className="offset-lg-2 col-lg-8">
<div className="control-bar control-bar-search">
<div className="control-bar__item">
<div className="control-bar control-bar--flex">
<div className="control-bar__item control-bar__item--grow">
<ControlBarSearch
term={term}
onSearch={value => handleSearch(value)}
@@ -86,7 +86,7 @@ export const ControlBar = props => {
onSelectFilter={choice => applyFilter('ordering', choice)}
/>
)}
<div className="togglebutton">
<div className="control-bar__item">
<button
className={
expandFilters
2 changes: 1 addition & 1 deletion meinberlin/apps/budgeting/assets/ControlBarDropdown.jsx
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@ export const ControlBarDropdown = props => {
}

return (
<div className="dropdown">
<div className="dropdown control-bar__item">
<button
type="button"
className="dropdown-toggle btn btn--light btn--select"
34 changes: 12 additions & 22 deletions meinberlin/assets/scss/components/_control-bar.scss
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
.control-bar {
@include clearfix;

&-search {
&--flex {
display: block;

& > .searchinput {
& > .control-bar__item--grow {
flex: 1;
}
}

select,
.dropdown,
.searchinput,
.togglebutton,
.control-bar__item,
.btn-group__container {
display: inline-block;
vertical-align: top;
@@ -21,31 +19,33 @@

@media (min-width: $breakpoint) {
select,
.dropdown,
.searchinput,
.control-bar__item,
.btn-group__container {
margin-right: 0.5 * $spacer;
}

&-search {
&--flex {
display: flex;
}

.control-bar__item:last-child {
margin-right: 0;
}
}

@media (max-width: $breakpoint) {
> * {
// @include grid-same-width(2);
}

.dropdown,
.control-bar__item,
.btn-group__container {
display: block;
}

.dropdown-toggle,
.searchinput,
.togglebutton,
.togglebutton button {
.control-bar__item,
.control-bar__item button {
width: 100%;
max-width: none;
}
@@ -81,16 +81,6 @@
.input-group__input {
min-width: 0;
}

.control-bar-item {
margin-right: $spacer * 0.25;
display: inline-block;

&__right {
margin-right: 0;
float: right;
}
}
}

.control-bar__bottom-overlap {

0 comments on commit c032111

Please sign in to comment.