diff --git a/scss/_leaflet.scss b/scss/_leaflet.scss deleted file mode 120000 index 047e9d7..0000000 --- a/scss/_leaflet.scss +++ /dev/null @@ -1 +0,0 @@ -../node_modules/leaflet/dist/leaflet.css \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index dc26a0a..5af40ee 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -13,9 +13,7 @@ @import 'modules/base'; @import 'modules/font/icon'; @import 'modules/loader'; -@import 'leaflet'; @import 'modules/leaflet'; -@import 'modules/leaflet-layer'; @import 'modules/table'; @import 'modules/filter'; @import 'modules/sidebar'; diff --git a/scss/modules/_button.scss b/scss/modules/_button.scss index b997f4e..34031ac 100644 --- a/scss/modules/_button.scss +++ b/scss/modules/_button.scss @@ -11,15 +11,14 @@ button { opacity: .7; outline: none; padding: 0; - transition: box-shadow .5s, color .5s; + transition: box-shadow .5s, background-color .5s, color .5s; width: 1.8em; &.active { - color: $color-primary; + box-shadow: 0 0 0 2px $color-primary; } &:hover { - background: $color-white; color: $color-primary; } diff --git a/scss/modules/_leaflet-layer.scss b/scss/modules/_leaflet-layer.scss deleted file mode 100644 index e76bc14..0000000 --- a/scss/modules/_leaflet-layer.scss +++ /dev/null @@ -1,43 +0,0 @@ -.leaflet-control-layers { - &.leaflet-control { - background: transparent; - border: 0; - border-radius: 0; - box-shadow: none; - margin: 0; - opacity: .8; - } -} - -.leaflet-control-container { - .leaflet-control-layers-toggle { - background: none; - height: auto; - width: auto; - - &::before { - color: $color-primary; - content: '\f229'; - display: inline-block; - font-family: $font-family-icons; - font-size: 2.3rem; - line-height: 1; - speak: none; - text-rendering: auto; - } - } -} - -.leaflet-control-layers-expanded { - padding: 0; -} - -.leaflet-control-layers-list { - background: transparentize($color-white, .1); - color: $color-gray-dark; - padding: 10px; - - label { - cursor: pointer; - } -} diff --git a/scss/modules/_leaflet.scss b/scss/modules/_leaflet.scss index 409dc2d..f1e778a 100644 --- a/scss/modules/_leaflet.scss +++ b/scss/modules/_leaflet.scss @@ -1,10 +1,302 @@ +.leaflet-map-pane, +.leaflet-tile, +.leaflet-marker-icon, +.leaflet-marker-shadow, +.leaflet-tile-pane, +.leaflet-tile-container, +.leaflet-overlay-pane, +.leaflet-shadow-pane, +.leaflet-marker-pane, +.leaflet-zoom-box, +.leaflet-image-layer, +.leaflet-layer { + left: 0; + position: absolute; + top: 0; +} + +.leaflet-container { + background: $color-map-background; + cursor: grab; + outline: 0; + overflow: hidden; + touch-action: none; + + a { + color: $color-primary; + } + + img { + max-width: none; + } + + .leaflet-control-attribution { + background: transparentize($color-white, .3); + margin: 0; + } + + .leaflet-control-layers-toggle { + background: none; + height: auto; + width: auto; + + &::before { + color: $color-primary; + content: '\f229'; + display: inline-block; + font-family: $font-family-icons; + font-size: 2.3rem; + line-height: 1; + speak: none; + text-rendering: auto; + } + } +} + +.leaflet-tile { + filter: inherit; + visibility: hidden; +} + +.leaflet-tile-loaded { + visibility: inherit; +} + +.leaflet-zoom-box { + height: 0; + width: 0; +} + +.leaflet-tile-pane { + z-index: 2; +} + +.leaflet-objects-pane { + z-index: 3; +} + +.leaflet-overlay-pane { + z-index: 4; +} + +.leaflet-shadow-pane { + z-index: 5; +} + +.leaflet-marker-pane { + z-index: 6; +} + +.leaflet-vml-shape { + height: 1px; + width: 1px; +} + +.leaflet-control { + clear: both; + cursor: auto; + float: left; + font-size: $font-size-map-control; + pointer-events: auto; + position: relative; + z-index: 7; +} + +.leaflet-top, +.leaflet-bottom { + pointer-events: none; + position: absolute; + z-index: 1000; +} + +.leaflet-top { + top: 0; + + .leaflet-control { + margin-top: 10px; + } +} + +.leaflet-right { + right: 0; + + .leaflet-control { + float: right; + } +} + +.leaflet-bottom { + bottom: 0; +} + +.leaflet-left { + left: 0; + + .leaflet-control { + margin-left: 10px; + } +} + +.leaflet-fade-anim { + .leaflet-tile { + opacity: 0; + transition: opacity .2s linear; + } + + .leaflet-tile-loaded { + opacity: 1; + } +} + +%no-transition { + transition: none; +} + +.leaflet-zoom-anim { + .leaflet-tile { + @extend %no-transition; + } + + .leaflet-zoom-animated { + transition: transform .25s cubic-bezier(0, 0, .25, 1); + } + + .leaflet-zoom-hide { + visibility: hidden; + } +} + +.leaflet-pan-anim { + .leaflet-tile { + @extend %no-transition; + } +} + +.leaflet-touching { + .leaflet-zoom-animated { + @extend %no-transition; + } +} + +.leaflet-clickable { + cursor: pointer; +} + +.leaflet-dragging { + .leaflet-container, + .leaflet-clickable { + cursor: move; + } +} + +.leaflet-touch { + .leaflet-control-layers, + .leaflet-bar { + background-clip: padding-box; + border: 2px solid transparentize($color-black, .8); + } + + .leaflet-control-layers-toggle { + height: 44px; + width: 44px; + } +} + +.leaflet-control-layers { + &.leaflet-control { + background: transparent; + border: 0; + border-radius: 0; + box-shadow: none; + margin: 0; + opacity: .8; + } + + label { + display: block; + } + + .leaflet-control-layers-list { + display: none; + } +} + +.leaflet-control-layers-expanded { + background: $color-white; + color: $color-gray-dark; + + .leaflet-control-layers-toggle { + display: none; + } + + .leaflet-control-layers-list { + background: transparentize($color-white, .1); + color: $color-gray-dark; + display: block; + padding: 2px 10px; + position: relative; + + label { + cursor: pointer; + } + } +} + +.leaflet-control-layers-selector { + display: none; + + + span { + display: block; + padding: 5px 0 8px 20px; + + &::before { + border: 1px solid $color-primary; + border-radius: 50%; + content: ' '; + height: 10px; + margin: 0 0 0 -18px; + position: absolute; + transition: background .3s; + width: 10px; + } + + &:hover { + &::before { + background: transparentize($color-primary, .7); + } + } + } + + &:checked { + + span { + &::before { + background: $color-primary; + } + } + } +} + +.leaflet-control-layers-separator { + border-top: 1px solid $color-gray-light; + height: 0; + margin: 5px -10px 5px -6px; +} + +.leaflet-control-attribution, +.leaflet-control-scale-line { + color: $color-gray-dark; + padding: 2px 5px 4px; +} + .leaflet-label { &.leaflet-label-right { background-color: $color-white; - border: 2px solid $color-primary; + border: 1px solid $color-primary; border-radius: 0; display: block; + font-size: $font-size-map-control; font-weight: normal; + line-height: 1.5; opacity: .8; padding: 1px 6px; position: absolute; diff --git a/scss/modules/_table.scss b/scss/modules/_table.scss index c024d7d..bb1224c 100644 --- a/scss/modules/_table.scss +++ b/scss/modules/_table.scss @@ -36,7 +36,9 @@ th { font-weight: bold; &[class*=' ion-'] { - font-size: 1.3em; + &::before { + font-size: 1.3em; + } } &.sort-header { diff --git a/scss/modules/_variables.scss b/scss/modules/_variables.scss index be19d30..6e405eb 100644 --- a/scss/modules/_variables.scss +++ b/scss/modules/_variables.scss @@ -11,11 +11,14 @@ $color-online: #1566a9 !default; $color-offline: #cf3e2a !default; $color-unseen: #d89100 !default; +$color-map-background: #f8f4f0 !default; + $font-family: Assistant, sans-serif !default; $font-family-icons: ionicons !default; $font-family-monospace: monospace !default; $font-size: 15px !default; $font-size-small: 11px !default; +$font-size-map-control: 12px !default; $button-font-size: 1.6rem !default; $button-distance: 16px !default; @@ -41,7 +44,7 @@ $sidebar-width: map-get($grid-breakpoints, xl) * .45 !default; $sidebar-width-small: map-get($grid-breakpoints, lg) * .45 !default; // En/disable box-shadows -$shadows: 1 !default; +$shadows: 0 !default; // En/disable included font $use-included-font: 1 !default; diff --git a/scss/night.scss b/scss/night.scss index 4e37f2f..b70f738 100644 --- a/scss/night.scss +++ b/scss/night.scss @@ -4,6 +4,7 @@ $color-white: #111; $color-black: #fefefe; +$color-map-background: #0d151c; html { //@import 'modules/base'; @@ -18,7 +19,7 @@ html { //@import 'leaflet'; .leaflet-container { - background: adjust-color($color-white, $blue: 10); + background: $color-map-background; } //@import 'modules/leaflet'; @@ -28,7 +29,6 @@ html { } } - //@import 'modules/leaflet-layer'; .leaflet-control-layers { &.leaflet-control { opacity: .9;