1
0
Fork 0
mirror of https://github.com/noerw/leaflet-sidebar-v2 synced 2025-07-13 02:30:20 +02:00
leaflet-sidebar-v2/scss/leaflet-sidebar.scss
Piotr Kozak 4bb69837cf Border right sidebar, zoom panel will be not hidden when mobile. (#39)
* - zoom panel will be not hidden when mobile.
* - fix border for right-aligned
* - simplify scss
2019-08-09 13:34:41 +00:00

84 lines
2 KiB
SCSS

$sidebar-margins: 10px !default;
$sidebar-border-radius: 4px !default;
$sidebar-touch-border: 2px solid rgba(0, 0, 0, 0.2) !default;
$sidebar-shadow: 0 1px 5px rgba(0, 0, 0, 0.65) !default;
$tab-fg: #333 !default;
$tabs-bg: #fff !default;
$tab-hover-fg: #000 !default;
$tab-hover-bg: #eee !default;
$tab-active-fg: #fff !default;
$tab-active-bg: #0074d9 !default;
@import "base";
.leaflet-sidebar {
box-shadow: $sidebar-shadow;
@media (min-width: $threshold-sm) {
border-radius: $sidebar-border-radius;
&.leaflet-touch {
border: $sidebar-touch-border;
}
}
}
// move other controls aside from sidebar
.leaflet-sidebar-left {
&.leaflet-touch {
box-shadow: none;
border-right: $sidebar-touch-border;
}
& ~ .leaflet-control-container .leaflet-left {
@media (min-width: $threshold-sm) {
transition: left $sidebar-transition;
}
@media (min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
left: $width-sm + $sidebar-margins;
}
@media (min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
left: $width-md + $sidebar-margins;
}
@media (min-width: $threshold-lg) {
left: $width-lg + $sidebar-margins;
}
}
&.collapsed ~ .leaflet-control-container .leaflet-left {
left: $tab-size + $sidebar-margins;
}
}
.leaflet-sidebar-right {
&.leaflet-touch {
box-shadow: none;
border-left: $sidebar-touch-border;
}
& ~ .leaflet-control-container .leaflet-right {
@media (min-width: $threshold-sm) {
transition: right $sidebar-transition;
}
@media (min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
right: $width-sm + $sidebar-margins;
}
@media (min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
right: $width-md + $sidebar-margins;
}
@media (min-width: $threshold-lg) {
right: $width-lg + $sidebar-margins;
}
}
&.collapsed ~ .leaflet-control-container .leaflet-right {
right: $tab-size + $sidebar-margins;
}
}