| 1 |
$devices: desktop, tablet, mobile; |
| 2 |
|
| 3 |
@each $device in $devices { |
| 4 |
.wpupg-responsive-#{$device} { |
| 5 |
&.wpupg-filter-container-#{$device}-hide { display: none; } |
| 6 |
|
| 7 |
// Hide toggle icons by default, show when needed. |
| 8 |
.wpupg-filter-toggle-container { |
| 9 |
display: none; |
| 10 |
} |
| 11 |
&.wpupg-filter-container-#{$device}-toggle { |
| 12 |
.wpupg-filter-label { |
| 13 |
display: flex; |
| 14 |
align-items: center; |
| 15 |
cursor: pointer; |
| 16 |
} |
| 17 |
.wpupg-filter-toggle-container { |
| 18 |
display: inline-block; |
| 19 |
margin-right: 5px;; |
| 20 |
} |
| 21 |
} |
| 22 |
|
| 23 |
&.wpupg-filter-container-#{$device}-toggle_closed { |
| 24 |
.wpupg-filter-toggle-open, |
| 25 |
.wpupg-filter { |
| 26 |
display: none; |
| 27 |
} |
| 28 |
} |
| 29 |
|
| 30 |
&.wpupg-filter-container-#{$device}-toggle_open { |
| 31 |
.wpupg-filter-toggle-closed { |
| 32 |
display: none; |
| 33 |
} |
| 34 |
} |
| 35 |
} |
| 36 |
} |
| 37 |
|
| 38 |
.wpupg-filter-toggle-container { |
| 39 |
svg { |
| 40 |
height: 0.8em; |
| 41 |
width: 0.8em; |
| 42 |
} |
| 43 |
} |
