ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-01-07 14:00:01 +00:00
Code Issues Projects Releases Wiki Activity

Use new scss syntax (#1015)

Browse Source
This commit is contained in:
Birk Skyum
2025-01-21 22:38:05 +01:00
committed by GitHub
parent 857cae7040
commit 87cd79e86f
14 changed files with 330 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/SmallError.scss
View File

@@ -1,7 +1,7 @@
@import '../styles/vars'; @use '../styles/vars';
.SmallError { .SmallError {
color: #E57373; color: #E57373;
font-size: $font-size-6; font-size: vars.$font-size-6;
margin-top: $margin-2 margin-top: vars.$margin-2
} }

34
src/styles/_base.scss
View File

@@ -1,3 +1,5 @@
@use "vars";
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.ttf') format('truetype'); src: url('../fonts/Roboto-Regular.ttf') format('truetype');
@@ -15,8 +17,8 @@
} }
html { html {
color: $color-white; color: vars.$color-white;
font-size: $font-size-5; font-size: vars.$font-size-5;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -32,34 +34,34 @@ body {
} }
p { p {
font-size: $font-size-6; font-size: vars.$font-size-6;
margin-top: $margin-2; margin-top: vars.$margin-2;
margin-bottom: $margin-2; margin-bottom: vars.$margin-2;
color: $color-lowgray; color: vars.$color-lowgray;
line-height: 1.3; line-height: 1.3;
} }
h1 { h1 {
font-size: $font-size-2; font-size: vars.$font-size-2;
margin-bottom: $margin-3; margin-bottom: vars.$margin-3;
font-weight: bold; font-weight: bold;
} }
h2 { h2 {
font-size: $font-size-3; font-size: vars.$font-size-3;
margin-bottom: $margin-3; margin-bottom: vars.$margin-3;
font-weight: bold; font-weight: bold;
} }
h3 { h3 {
font-size: $font-size-4; font-size: vars.$font-size-4;
margin-bottom: $margin-3; margin-bottom: vars.$margin-3;
font-weight: bold; font-weight: bold;
} }
h4 { h4 {
font-size: $font-size-5; font-size: vars.$font-size-5;
margin-bottom: $margin-3; margin-bottom: vars.$margin-3;
} }
input:focus, input:focus,
@@ -68,12 +70,12 @@ textarea:focus,
button:focus, button:focus,
.maputnik-toolbar-link:focus, .maputnik-toolbar-link:focus,
select:focus { select:focus {
color: $color-white; color: vars.$color-white;
outline: #8e8e8e auto 1px; outline: #8e8e8e auto 1px;
} }
label:hover { label:hover {
color: $color-white; color: vars.$color-white;
} }
.clearfix { .clearfix {

6
src/styles/_codemirror.scss
View File

@@ -1,3 +1,5 @@
@use "vars";
.CodeMirror-lint-tooltip { .CodeMirror-lint-tooltip {
z-index: 2000 !important; z-index: 2000 !important;
} }
@@ -55,7 +57,7 @@
.cm-s-maputnik .CodeMirror-matchingbracket { .cm-s-maputnik .CodeMirror-matchingbracket {
background: hsla(223, 12%, 35%, 1); background: hsla(223, 12%, 35%, 1);
color: $color-white !important; color: vars.$color-white !important;
} }
.cm-s-maputnik .CodeMirror-nonmatchingbracket { .cm-s-maputnik .CodeMirror-nonmatchingbracket {
@@ -79,7 +81,7 @@
z-index: 99999; z-index: 99999;
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
background: hsla(0, 0%, 0%, 0.3); background: hsla(0, 0%, 0%, 0.3);
color: $color-lowgray; color: vars.$color-lowgray;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
transition: opacity 320ms ease; transition: opacity 320ms ease;
opacity: 0; opacity: 0;

87
src/styles/_components.scss
View File

@@ -1,9 +1,12 @@
@use "mixins";
@use "vars";
@use 'sass:color'; @use 'sass:color';
// MAP // MAP
.maputnik-map__container { .maputnik-map__container {
background: white; background: white;
display: flex; display: flex;
width: $layout-map-width; width: vars.$layout-map-width;
&--error { &--error {
align-items: center; align-items: center;
@@ -36,7 +39,7 @@
&-wrapper { &-wrapper {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
font-size: $font-size-6; font-size: vars.$font-size-6;
line-height: 2; line-height: 2;
user-select: none; user-select: none;
position: relative; position: relative;
@@ -45,9 +48,9 @@
&-popup { &-popup {
display: none; display: none;
color: $color-lowgray; color: vars.$color-lowgray;
background-color: $color-gray; background-color: vars.$color-gray;
padding: $margin-2; padding: vars.$margin-2;
font-size: 10px; font-size: 10px;
position: absolute; position: absolute;
top: 20px; top: 20px;
@@ -60,7 +63,7 @@
&-button { &-button {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
background: $color-black; background: vars.$color-black;
color: white; color: white;
border: none; border: none;
padding: 4px; padding: 4px;
@@ -77,11 +80,11 @@
} }
.maputnik-doc-inline { .maputnik-doc-inline {
color: $color-lowgray; color: vars.$color-lowgray;
background-color: $color-gray; background-color: vars.$color-gray;
padding: $margin-2; padding: vars.$margin-2;
font-size: 12px; font-size: 12px;
margin-top: $margin-3; margin-top: vars.$margin-3;
line-height: 1.5; line-height: 1.5;
flex: 1 0; flex: 1 0;
} }
@@ -95,10 +98,10 @@
.maputnik-button { .maputnik-button {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
background-color: $color-midgray; background-color: vars.$color-midgray;
color: $color-lowgray; color: vars.$color-lowgray;
font-size: $font-size-6; font-size: vars.$font-size-6;
padding: $margin-2; padding: vars.$margin-2;
user-select: none; user-select: none;
border-width: 0; border-width: 0;
border-radius: 2px; border-radius: 2px;
@@ -106,36 +109,36 @@
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background-color: color.adjust($color-midgray, $lightness: 12%); background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
color: $color-white; color: vars.$color-white;
} }
&:disabled { &:disabled {
background-color: color.adjust($color-midgray, $lightness: -5%); background-color: color.adjust(vars.$color-midgray, $lightness: -5%);
color: $color-midgray; color: vars.$color-midgray;
cursor: not-allowed; cursor: not-allowed;
} }
} }
.maputnik-big-button { .maputnik-big-button {
margin-top: $margin-3; margin-top: vars.$margin-3;
display: inline-block; display: inline-block;
padding: $margin-3; padding: vars.$margin-3;
font-size: $font-size-5; font-size: vars.$font-size-5;
} }
.maputnik-wide-button { .maputnik-wide-button {
padding: $margin-2 $margin-3; padding: vars.$margin-2 vars.$margin-3;
} }
.maputnik-green-button { .maputnik-green-button {
background-color: $color-green; background-color: vars.$color-green;
color: $color-black; color: vars.$color-black;
} }
.maputnik-white-button { .maputnik-white-button {
background-color: $color-white; background-color: vars.$color-white;
color: $color-black; color: vars.$color-black;
} }
.maputnik-icon-button { .maputnik-icon-button {
@@ -150,19 +153,19 @@
} }
svg { svg {
fill: $color-white; fill: vars.$color-white;
} }
} }
} }
// INPUT BLOCK // INPUT BLOCK
.maputnik-input-block { .maputnik-input-block {
margin: $margin-3; margin: vars.$margin-3;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
&-label { &-label {
color: $color-lowgray; color: vars.$color-lowgray;
user-select: none; user-select: none;
width: 32%; width: 32%;
vertical-align: top; vertical-align: top;
@@ -170,7 +173,7 @@
} }
&-action { &-action {
color: $color-lowgray; color: vars.$color-lowgray;
user-select: none; user-select: none;
width: 18%; width: 18%;
vertical-align: top; vertical-align: top;
@@ -187,7 +190,7 @@
.maputnik-input-block-label { .maputnik-input-block-label {
display: inline-block; display: inline-block;
width: 32%; width: 32%;
margin-bottom: $margin-3; margin-bottom: vars.$margin-3;
} }
.maputnik-input-block-action { .maputnik-input-block-action {
@@ -211,15 +214,15 @@
// SPACE HELPER // SPACE HELPER
.maputnik-space { .maputnik-space {
@include vendor-prefix(flex-grow, 1); @include mixins.vendor-prefix(flex-grow, 1);
} }
// MESSAGE PANEL // MESSAGE PANEL
.maputnik-message-panel { .maputnik-message-panel {
padding: $margin-2; padding: vars.$margin-2;
&-error { &-error {
color: $color-red; color: vars.$color-red;
} }
&__switch-button { &__switch-button {
@@ -241,7 +244,7 @@
&__menu { &__menu {
position: absolute; position: absolute;
z-index: 999999; z-index: 999999;
background: $color-black; background: vars.$color-black;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-content: stretch; align-content: stretch;
@@ -262,13 +265,13 @@
color: #a4a4a4; color: #a4a4a4;
padding: 0.4em 0.4em; padding: 0.4em 0.4em;
font-size: 0.9em; font-size: 0.9em;
border: solid 1px $color-red; border: solid 1px vars.$color-red;
border-radius: 2px; border-radius: 2px;
margin: $margin-2 0px; margin: vars.$margin-2 0px;
} }
.maputnik-expression-editor { .maputnik-expression-editor {
border: solid 1px $color-gray; border: solid 1px vars.$color-gray;
} }
.maputnik-input-block--wide { .maputnik-input-block--wide {
@@ -288,13 +291,13 @@
} }
.maputnik-expr-infobox { .maputnik-expr-infobox {
font-size: $font-size-6; font-size: vars.$font-size-6;
background: $color-midgray; background: vars.$color-midgray;
padding: $margin-2; padding: vars.$margin-2;
border-radius: 2px; border-radius: 2px;
border-top-right-radius: 0px; border-top-right-radius: 0px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
color: $color-white; color: vars.$color-white;
} }
.maputnik-expr-infobox__button { .maputnik-expr-infobox__button {

24
src/styles/_filtereditor.scss
View File

@@ -1,5 +1,7 @@
@use "vars";
.maputnik-filter-editor-wrapper { .maputnik-filter-editor-wrapper {
padding: $margin-3; padding: vars.$margin-3;
overflow: hidden; overflow: hidden;
.maputnik-input-block { .maputnik-input-block {
@@ -8,8 +10,8 @@
} }
.maputnik-filter-editor { .maputnik-filter-editor {
@extend .clearfix; /* stylelint-disable-line */ @extend .clearfix !optional; /* stylelint-disable-line */
color: $color-lowgray; color: vars.$color-lowgray;
} }
.maputnik-filter-editor-property { .maputnik-filter-editor-property {
@@ -39,7 +41,7 @@
} }
.maputnik-filter-editor-compound-select { .maputnik-filter-editor-compound-select {
margin-bottom: $margin-2; margin-bottom: vars.$margin-2;
.maputnik-doc-wrapper { .maputnik-doc-wrapper {
width: 50%; width: 50%;
@@ -52,22 +54,22 @@
} }
.maputnik-filter-editor-unsupported { .maputnik-filter-editor-unsupported {
color: $color-midgray; color: vars.$color-midgray;
} }
.maputnik-add-filter { .maputnik-add-filter {
display: inline-block; display: inline-block;
float: right; float: right;
margin-top: $margin-3; margin-top: vars.$margin-3;
} }
.maputnik-delete-filter { .maputnik-delete-filter {
@extend .maputnik-icon-button; /* stylelint-disable-line */ @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
} }
.maputnik-filter-editor-block-action { .maputnik-filter-editor-block-action {
margin-top: $margin-2; margin-top: vars.$margin-2;
margin-bottom: $margin-2; margin-bottom: vars.$margin-2;
display: inline-block; display: inline-block;
width: 6%; width: 6%;
margin-right: 1.5%; margin-right: 1.5%;
@@ -79,12 +81,12 @@
} }
.maputnik-radio-as-button { .maputnik-radio-as-button {
@extend .maputnik-button; /* stylelint-disable-line */ @extend .maputnik-button !optional; /* stylelint-disable-line */
border: solid 1px transparent; border: solid 1px transparent;
&:focus-within { &:focus-within {
border: solid 1px $color-white; border: solid 1px vars.$color-white;
} }
input { input {

67
src/styles/_input.scss
View File

@@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
@use 'sass:color'; @use 'sass:color';
//INPUT //INPUT
.maputnik-input { .maputnik-input {
@@ -5,13 +8,13 @@
width: 100%; width: 100%;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
font-size: $font-size-6; font-size: vars.$font-size-6;
line-height: 2; line-height: 2;
padding-left: $margin-2; padding-left: vars.$margin-2;
padding-right: $margin-2; padding-right: vars.$margin-2;
border: none; border: none;
background-color: $color-gray; background-color: vars.$color-gray;
color: color.adjust($color-lowgray, $lightness: 12%); color: color.adjust(vars.$color-lowgray, $lightness: 12%);
&:invalid { &:invalid {
border: solid 1px #B71C1C; border: solid 1px #B71C1C;
@@ -20,7 +23,7 @@
} }
.maputnik-string { .maputnik-string {
@extend .maputnik-input; /* stylelint-disable-line */ @extend .maputnik-input !optional; /* stylelint-disable-line */
&--multi { &--multi {
resize: vertical; resize: vertical;
@@ -44,12 +47,12 @@
} }
.maputnik-number { .maputnik-number {
@extend .maputnik-input; /* stylelint-disable-line */ @extend .maputnik-input !optional; /* stylelint-disable-line */
} }
//COLOR PICKER //COLOR PICKER
.maputnik-color { .maputnik-color {
@extend .maputnik-input; /* stylelint-disable-line */ @extend .maputnik-input !optional; /* stylelint-disable-line */
height: 26px; height: 26px;
} }
@@ -57,7 +60,7 @@
.maputnik-color-wrapper { .maputnik-color-wrapper {
position: relative; position: relative;
@include flex-row; @include mixins.flex-row;
} }
.maputnik-color-swatch { .maputnik-color-swatch {
@@ -71,7 +74,7 @@
.maputnik-array { .maputnik-array {
> * { > * {
margin-bottom: $margin-3; margin-bottom: vars.$margin-3;
} }
.maputnik-array-block { .maputnik-array-block {
@@ -96,19 +99,19 @@
// SELECT // SELECT
.maputnik-select { .maputnik-select {
@extend .maputnik-input; /* stylelint-disable-line */ @extend .maputnik-input !optional; /* stylelint-disable-line */
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
background: $color-gray url("#{$icon-down-arrow}") right center no-repeat; background: vars.$color-gray url("#{vars.$icon-down-arrow}") right center no-repeat;
color: $color-white; color: vars.$color-white;
background-position: calc(100% - 2px) center; background-position: calc(100% - 2px) center;
padding-right: 20px; padding-right: 20px;
height: 24px; height: 24px;
} }
[dir="rtl"] .maputnik-select { [dir="rtl"] .maputnik-select {
background: $color-gray url("#{$icon-down-arrow}") left center no-repeat; background: vars.$color-gray url("#{vars.$icon-down-arrow}") left center no-repeat;
} }
// MULTIBUTTON // MULTIBUTTON
@@ -116,12 +119,12 @@
padding: 0; padding: 0;
.maputnik-button { .maputnik-button {
margin-right: $margin-1; margin-right: vars.$margin-1;
} }
} }
.maputnik-button-selected { .maputnik-button-selected {
background-color: color.adjust($color-midgray, $lightness: 12%); background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
color: white; color: white;
} }
@@ -137,7 +140,7 @@
outline: none; outline: none;
&-wrapper { &-wrapper {
@extend .maputnik-input; /* stylelint-disable-line */ @extend .maputnik-input !optional; /* stylelint-disable-line */
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@@ -154,12 +157,12 @@
text-align: center; text-align: center;
height: 24px; height: 24px;
width: 24px; width: 24px;
margin-right: $margin-2; margin-right: vars.$margin-2;
background-color: $color-gray; background-color: vars.$color-gray;
border-radius: 2px; border-radius: 2px;
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
border-color: $color-gray; border-color: vars.$color-gray;
transition: background-color 0.1s ease-out; transition: background-color 0.1s ease-out;
position: absolute; position: absolute;
top: 0; top: 0;
@@ -185,7 +188,7 @@
width: 50%; width: 50%;
height: 50%; height: 50%;
margin-top: 1px; margin-top: 1px;
fill: $color-lowgray; fill: vars.$color-lowgray;
} }
} }
@@ -198,29 +201,29 @@
position: absolute; position: absolute;
overflow: auto; overflow: auto;
max-height: 50%; max-height: 50%;
background: $color-gray; background: vars.$color-gray;
z-index: 3; z-index: 3;
} }
&-menu-item { &-menu-item {
user-select: none; user-select: none;
color: $color-lowgray; color: vars.$color-lowgray;
cursor: default; cursor: default;
padding: $margin-1; padding: vars.$margin-1;
font-size: $font-size-6; font-size: vars.$font-size-6;
z-index: 3; z-index: 3;
background: $color-gray; background: vars.$color-gray;
} }
&-menu-item-selected { &-menu-item-selected {
background: $color-midgray; background: vars.$color-midgray;
} }
} }
// FONT // FONT
.maputnik-font { .maputnik-font {
.maputnik-autocomplete:not(:last-child) { .maputnik-autocomplete:not(:last-child) {
margin-bottom: $margin-3; margin-bottom: vars.$margin-3;
} }
} }
@@ -236,21 +239,21 @@
.SpecDoc__sdk-support__table { .SpecDoc__sdk-support__table {
width: 100%; width: 100%;
margin-top: $margin-3; margin-top: vars.$margin-3;
td, th { td, th {
border: solid 1px $color-midgray; border: solid 1px vars.$color-midgray;
padding: 4px 6px; padding: 4px 6px;
white-space: nowrap; white-space: nowrap;
} }
} }
.SpecDoc__values li { .SpecDoc__values li {
margin-top: $margin-3; margin-top: vars.$margin-3;
} }
.SpecDoc__values code { .SpecDoc__values code {
background: $color-midgray; background: vars.$color-midgray;
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
border-radius: 2px; border-radius: 2px;
} }

94
src/styles/_layer.scss
View File

@@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
@use 'sass:color'; @use 'sass:color';
// LAYER LIST // LAYER LIST
.maputnik-layer-list { .maputnik-layer-list {
@@ -7,9 +10,9 @@
flex-direction: column; flex-direction: column;
&-header { &-header {
padding: $margin-2 $margin-2 $margin-3; padding: vars.$margin-2 vars.$margin-2 vars.$margin-3;
@include flex-row; @include mixins.flex-row;
flex: 0 0; flex: 0 0;
> * { > * {
@@ -19,8 +22,8 @@
} }
&-header-title { &-header-title {
font-size: $font-size-5; font-size: vars.$font-size-5;
color: $color-white; color: vars.$color-white;
font-weight: bold; font-weight: bold;
line-height: 1.3; line-height: 1.3;
} }
@@ -28,7 +31,7 @@
&-container { &-container {
padding: 0; padding: 0;
margin: 0; margin: 0;
padding-bottom: $margin-5; padding-bottom: vars.$margin-5;
flex: 1; flex: 1;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@@ -47,9 +50,9 @@
&-item { &-item {
border: solid 1px transparent; border: solid 1px transparent;
font-weight: 400; font-weight: 400;
color: $color-lowgray; color: vars.$color-lowgray;
font-size: $font-size-6; font-size: vars.$font-size-6;
border-bottom-color: color.adjust($color-black, $lightness: 0.1%); border-bottom-color: color.adjust(vars.$color-black, $lightness: 0.1%);
user-select: none; user-select: none;
list-style: none; list-style: none;
z-index: 2000; z-index: 2000;
@@ -63,21 +66,22 @@
transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms;
&:focus-within { &:focus-within {
border: solid 1px $color-lowgray; border: solid 1px vars.$color-lowgray;
} }
@include mixins.flex-row;
@media screen and (prefers-reduced-motion: reduce) { @media screen and (prefers-reduced-motion: reduce) {
transition-duration: 0; transition-duration: 0;
} }
@include flex-row;
} }
&-icon-action { &-icon-action {
display: none; display: none;
svg { svg {
fill: $color-black; fill: vars.$color-black;
} }
} }
@@ -88,10 +92,10 @@
height: 15px; height: 15px;
svg { svg {
fill: color.adjust($color-lowgray, $lightness: -20%); fill: color.adjust(vars.$color-lowgray, $lightness: -20%);
&:hover { &:hover {
fill: $color-white; fill: vars.$color-white;
} }
} }
} }
@@ -102,24 +106,24 @@
.maputnik-layer-list-item:hover, .maputnik-layer-list-item:hover,
.maputnik-layer-list-item-selected { .maputnik-layer-list-item-selected {
background-color: color.adjust($color-black, $lightness: 2%); background-color: color.adjust(vars.$color-black, $lightness: 2%);
.maputnik-layer-list-icon-action { .maputnik-layer-list-icon-action {
display: block; display: block;
svg { svg {
fill: color.adjust($color-lowgray, $lightness: -0.5%); fill: color.adjust(vars.$color-lowgray, $lightness: -0.5%);
} }
} }
} }
.maputnik-layer-list-item--error { .maputnik-layer-list-item--error {
color: $color-red; color: vars.$color-red;
} }
&-item-selected { &-item-selected {
color: $color-white; color: vars.$color-white;
} }
&-item-collapsed { &-item-collapsed {
@@ -132,7 +136,7 @@
} }
&-item-group-last { &-item-group-last {
border-bottom: 2px solid $color-gray; border-bottom: 2px solid vars.$color-gray;
} }
&-item-id { &-item-id {
@@ -150,14 +154,14 @@
&-group-header { &-group-header {
border: solid 1px transparent; border: solid 1px transparent;
font-size: $font-size-6; font-size: vars.$font-size-6;
color: $color-lowgray; color: vars.$color-lowgray;
background-color: color.adjust($color-black, $lightness: 2%); background-color: color.adjust(vars.$color-black, $lightness: 2%);
user-select: none; user-select: none;
padding: $margin-2; padding: vars.$margin-2;
&:focus-within { &:focus-within {
border: solid 1px $color-lowgray; border: solid 1px vars.$color-lowgray;
} }
button { button {
@@ -165,7 +169,7 @@
cursor: pointer; cursor: pointer;
} }
@include flex-row; @include mixins.flex-row;
svg { svg {
width: 14px; width: 14px;
@@ -178,25 +182,27 @@
} }
&-group-content { &-group-content {
margin: 0 $margin-3; margin: 0 vars.$margin-3;
} }
} }
// FILTER EDITOR // FILTER EDITOR
.maputnik-layer-editor-group { .maputnik-layer-editor-group {
font-weight: bold; font-weight: bold;
font-size: $font-size-5; font-size: vars.$font-size-5;
background-color: color.adjust($color-black, $lightness: 2%); background-color: color.adjust(vars.$color-black, $lightness: 2%);
color: $color-white; color: vars.$color-white;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
line-height: 20px; line-height: 20px;
border-top: solid 1px #36383e; border-top: solid 1px #36383e;
@include mixins.flex-row;
&__button { &__button {
flex: 1; flex: 1;
display: flex; display: flex;
padding: $margin-2; padding: vars.$margin-2;
&__icon { &__icon {
fill: white; fill: white;
@@ -223,17 +229,17 @@
} }
@include flex-row;
&:hover { &:hover {
background-color: $color-gray; background-color: vars.$color-gray;
} }
} }
// PROPERTY // PROPERTY
.maputnik-default-property { .maputnik-default-property {
.maputnik-input-block-label { .maputnik-input-block-label {
color: color.adjust($color-lowgray, $lightness: -20%); color: color.adjust(vars.$color-lowgray, $lightness: -20%);
} }
.maputnik-string, .maputnik-string,
@@ -241,8 +247,8 @@
.maputnik-color, .maputnik-color,
.maputnik-select, .maputnik-select,
.maputnik-checkbox-wrapper { .maputnik-checkbox-wrapper {
background-color: color.adjust($color-gray, $lightness: -2%); background-color: color.adjust(vars.$color-gray, $lightness: -2%);
color: color.adjust($color-lowgray, $lightness: -20%); color: color.adjust(vars.$color-lowgray, $lightness: -20%);
} }
.maputnik-make-zoom-function svg { .maputnik-make-zoom-function svg {
@@ -250,18 +256,18 @@
} }
.maputnik-multibutton .maputnik-button { .maputnik-multibutton .maputnik-button {
background-color: color.adjust($color-midgray, $lightness: -10%); background-color: color.adjust(vars.$color-midgray, $lightness: -10%);
color: color.adjust($color-lowgray, $lightness: -20%); color: color.adjust(vars.$color-lowgray, $lightness: -20%);
&:hover { &:hover {
background-color: color.adjust($color-midgray, $lightness: 12%); background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
color: $color-white; color: vars.$color-white;
} }
} }
.maputnik-multibutton .maputnik-button-selected { .maputnik-multibutton .maputnik-button-selected {
background-color: color.adjust($color-midgray, $lightness: -2%); background-color: color.adjust(vars.$color-midgray, $lightness: -2%);
color: $color-lowgray; color: vars.$color-lowgray;
} }
} }
@@ -276,8 +282,8 @@
&__menu { &__menu {
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
background: $color-black; background: vars.$color-black;
border: solid 1px $color-midgray; border: solid 1px vars.$color-midgray;
right: 0; right: 0;
min-width: 120px; min-width: 120px;
} }
@@ -295,7 +301,7 @@
.layer-header { .layer-header {
display: flex; display: flex;
padding: 6px; padding: 6px;
background: $color-black; background: vars.$color-black;
&__title { &__title {
flex: 1; flex: 1;
@@ -310,7 +316,7 @@
// Clone of the element which is sorted // Clone of the element which is sorted
.sortableHelper { .sortableHelper {
font-family: $font-family; font-family: vars.$font-family;
z-index: 9999; z-index: 9999;
border: none; border: none;
} }

18
src/styles/_layout.scss
View File

@@ -1,3 +1,5 @@
@use "vars";
//SCROLLING //SCROLLING
.maputnik-scroll-container { .maputnik-scroll-container {
overflow-x: hidden; overflow-x: hidden;
@@ -11,14 +13,14 @@
//APP LAYOUT //APP LAYOUT
.maputnik-layout { .maputnik-layout {
font-family: $font-family; font-family: vars.$font-family;
color: $color-white; color: vars.$color-white;
&-main { &-main {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
height: calc(100% - #{$toolbar-height + $toolbar-offset}); height: calc(100% - #{vars.$toolbar-height + vars.$toolbar-offset});
top: $toolbar-height + $toolbar-offset; top: vars.$toolbar-height + vars.$toolbar-offset;
left: 0; left: 0;
right: 0; right: 0;
z-index: 3; z-index: 3;
@@ -28,12 +30,12 @@
&-list { &-list {
width: 200px; width: 200px;
background-color: $color-black; background-color: vars.$color-black;
} }
&-drawer { &-drawer {
width: 370px; width: 370px;
background-color: $color-black; background-color: vars.$color-black;
// scroll-container is position: absolute // scroll-container is position: absolute
position: relative; position: relative;
} }
@@ -43,7 +45,7 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
width: $layout-map-width; width: vars.$layout-map-width;
background-color: $color-black; background-color: vars.$color-black;
} }
} }

6
src/styles/_map.scss
View File

@@ -1,3 +1,5 @@
@use "vars";
//OPENLAYERS //OPENLAYERS
.maputnik-layout { .maputnik-layout {
.ol-zoom { .ol-zoom {
@@ -39,7 +41,7 @@
} }
.maputnik-ol-popup { .maputnik-ol-popup {
background: $color-black; background: vars.$color-black;
} }
@@ -74,7 +76,7 @@
background: #1c1f24; background: #1c1f24;
border-radius: 2px; border-radius: 2px;
padding: 6px 8px; padding: 6px 8px;
color: $color-lowgray; color: vars.$color-lowgray;
z-index: 9999; z-index: 9999;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;

99
src/styles/_modal.scss
View File

@@ -1,40 +1,43 @@
@use "mixins";
@use "vars";
//MODAL //MODAL
.maputnik-modal { .maputnik-modal {
min-width: 350px; min-width: 350px;
max-width: 600px; max-width: 600px;
overflow: hidden; overflow: hidden;
background-color: $color-black; background-color: vars.$color-black;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
z-index: 3; z-index: 3;
position: relative; position: relative;
font-family: $font-family; font-family: vars.$font-family;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 100vh; max-height: 100vh;
} }
.maputnik-modal-section { .maputnik-modal-section {
padding-top: $margin-3; padding-top: vars.$margin-3;
padding-bottom: $margin-3; padding-bottom: vars.$margin-3;
h1 { h1 {
font-size: $font-size-4; font-size: vars.$font-size-4;
} }
h2 { h2 {
font-size: $font-size-5; font-size: vars.$font-size-5;
} }
/* Bug fix: <http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox> */ /* Bug fix: <http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox> */
min-height: 0; min-height: 0;
@include flex-column; @include mixins.flex-column;
flex-shrink: 0; flex-shrink: 0;
} }
.maputnik-modal-sub-section { .maputnik-modal-sub-section {
margin-top: $margin-1; margin-top: vars.$margin-1;
} }
.maputnik-modal-section--shrink { .maputnik-modal-section--shrink {
@@ -42,14 +45,14 @@
} }
.maputnik-modal-header { .maputnik-modal-header {
background-color: $color-gray; background-color: vars.$color-gray;
padding: $margin-3; padding: vars.$margin-3;
@include flex-row; @include mixins.flex-row;
} }
.maputnik-modal-header-title { .maputnik-modal-header-title {
font-size: $font-size-5; font-size: vars.$font-size-5;
margin: 0; margin: 0;
} }
@@ -66,18 +69,18 @@
} }
.maputnik-modal-content { .maputnik-modal-content {
padding: $margin-3; padding: vars.$margin-3;
@include flex-column; @include mixins.flex-column;
} }
.maputnik-modal-header-space { .maputnik-modal-header-space {
@extend .maputnik-space; /* stylelint-disable-line */ @extend .maputnik-space !optional; /* stylelint-disable-line */
} }
//OPEN MODAL //OPEN MODAL
.maputnik-upload-button { .maputnik-upload-button {
@extend .maputnik-big-button; /* stylelint-disable-line */ @extend .maputnik-big-button !optional; /* stylelint-disable-line */
} }
.maputnik-style-gallery-container { .maputnik-style-gallery-container {
@@ -88,35 +91,35 @@
vertical-align: top; vertical-align: top;
margin-top: 10px; margin-top: 10px;
margin-right: 10px; margin-right: 10px;
background-color: $color-gray; background-color: vars.$color-gray;
display: inline-block; display: inline-block;
width: 180px; width: 180px;
font-size: $font-size-2; font-size: vars.$font-size-2;
color: $color-lowgray; color: vars.$color-lowgray;
} }
.maputnik-public-style-button { .maputnik-public-style-button {
background-color: $color-gray; background-color: vars.$color-gray;
padding: $margin-3; padding: vars.$margin-3;
display: block; display: block;
width: 100%; width: 100%;
&:hover { &:hover {
background-color: $color-midgray; background-color: vars.$color-midgray;
} }
} }
.maputnik-public-style-header { .maputnik-public-style-header {
@include flex-row; @include mixins.flex-row;
} }
.maputnik-public-style-thumbnail { .maputnik-public-style-thumbnail {
display: block; display: block;
margin-top: $margin-2; margin-top: vars.$margin-2;
width: 100%; width: 100%;
padding-top: calc(400 / 600 * 100%); padding-top: calc(400 / 600 * 100%);
background-size: cover; background-size: cover;
background-color: $color-midgray; background-color: vars.$color-midgray;
} }
.maputnik-add-modal { .maputnik-add-modal {
@@ -139,18 +142,18 @@
} }
.maputnik-add-layer { .maputnik-add-layer {
@extend .clearfix; /* stylelint-disable-line */ @extend .clearfix !optional; /* stylelint-disable-line */
} }
//ADD MODAL //ADD MODAL
.maputnik-add-layer-button { .maputnik-add-layer-button {
@extend .maputnik-big-button; /* stylelint-disable-line */ @extend .maputnik-big-button !optional; /* stylelint-disable-line */
margin-right: $margin-3; margin-right: vars.$margin-3;
float: right; float: right;
display: inline-block; display: inline-block;
margin-top: 3; margin-top: 3;
margin-bottom: $margin-3; margin-bottom: vars.$margin-3;
text-align: right; text-align: right;
} }
@@ -163,19 +166,19 @@
vertical-align: top; vertical-align: top;
margin-top: 1.5%; margin-top: 1.5%;
margin-right: 1.5%; margin-right: 1.5%;
background-color: $color-gray; background-color: vars.$color-gray;
width: 48.5%; width: 48.5%;
display: inline-block; display: inline-block;
} }
.maputnik-public-source-select { .maputnik-public-source-select {
padding: $margin-3; padding: vars.$margin-3;
font-size: $font-size-5; font-size: vars.$font-size-5;
color: $color-lowgray; color: vars.$color-lowgray;
background-color: transparent; background-color: transparent;
width: 100%; width: 100%;
@include flex-row; @include mixins.flex-row;
} }
.maputnik-public-source-name { .maputnik-public-source-name {
@@ -192,24 +195,24 @@
} }
.maputnik-active-source-type-editor-header { .maputnik-active-source-type-editor-header {
background-color: $color-gray; background-color: vars.$color-gray;
color: $color-lowgray; color: vars.$color-lowgray;
padding: $margin-2; padding: vars.$margin-2;
@include flex-row; @include mixins.flex-row;
} }
.maputnik-active-source-type-editor-header-id { .maputnik-active-source-type-editor-header-id {
font-weight: 700; font-weight: 700;
line-height: 2; line-height: 2;
font-size: $font-size-5; font-size: vars.$font-size-5;
} }
.maputnik-active-source-type-editor-content { .maputnik-active-source-type-editor-content {
border-color: $color-gray; border-color: vars.$color-gray;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
padding: $margin-2; padding: vars.$margin-2;
.maputnik-input-block-label { .maputnik-input-block-label {
width: 30%; width: 30%;
@@ -221,7 +224,7 @@
} }
.maputnik-add-source { .maputnik-add-source {
@extend .clearfix; /* stylelint-disable-line */ @extend .clearfix !optional; /* stylelint-disable-line */
.maputnik-input-block-label { .maputnik-input-block-label {
width: 30%; width: 30%;
@@ -233,17 +236,17 @@
} }
.maputnik-add-source-button { .maputnik-add-source-button {
@extend .maputnik-big-button; /* stylelint-disable-line */ @extend .maputnik-big-button !optional; /* stylelint-disable-line */
display: inline-block; display: inline-block;
margin-top: 0; margin-top: 0;
margin-right: $margin-3; margin-right: vars.$margin-3;
float: right; float: right;
} }
//EXPORT MODAL //EXPORT MODAL
.maputnik-export-gist { .maputnik-export-gist {
font-size: $font-size-6; font-size: vars.$font-size-6;
.maputnik-input-block { .maputnik-input-block {
margin-left: 0; margin-left: 0;
@@ -255,7 +258,7 @@
} }
span { span {
color: $color-lowgray; color: vars.$color-lowgray;
} }
} }
@@ -291,12 +294,12 @@
} }
&__shortcut { &__shortcut {
margin-bottom: $margin-2; margin-bottom: vars.$margin-2;
} }
dt { dt {
display: inline; display: inline;
margin-right: $margin-2; margin-right: vars.$margin-2;
} }
dd { dd {

30
src/styles/_popup.scss
View File

@@ -1,3 +1,5 @@
@use "vars";
.maputnik-popup-layer { .maputnik-popup-layer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -11,20 +13,20 @@
.maputnik-popup-layer__label { .maputnik-popup-layer__label {
display: block; display: block;
color: $color-lowgray; color: vars.$color-lowgray;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
line-height: 1.2; line-height: 1.2;
padding: $margin-2; padding: vars.$margin-2;
padding-top: $margin-1; padding-top: vars.$margin-1;
padding-bottom: $margin-1; padding-bottom: vars.$margin-1;
} }
.maputnik-popup-layer-id { .maputnik-popup-layer-id {
padding-left: $margin-2; padding-left: vars.$margin-2;
padding-right: $margin-2; padding-right: vars.$margin-2;
background-color: $color-midgray; background-color: vars.$color-midgray;
color: $color-white; color: vars.$color-white;
} }
.maputnik-feature-property-popup { .maputnik-feature-property-popup {
@@ -32,9 +34,9 @@
overflow-y: auto; overflow-y: auto;
.maputnik-input-block { .maputnik-input-block {
margin: 0; margin: 0;
margin-left: $margin-2; margin-left: vars.$margin-2;
margin-right: $margin-2; margin-right: vars.$margin-2;
margin-top: $margin-2; margin-top: vars.$margin-2;
} }
} }
@@ -43,7 +45,7 @@
} }
.maputnik-popup-table-cell { .maputnik-popup-table-cell {
color: $color-lowgray; color: vars.$color-lowgray;
padding-left: $margin-2; padding-left: vars.$margin-2;
padding-right: $margin-2; padding-right: vars.$margin-2;
} }

56
src/styles/_toolbar.scss
View File

@@ -1,13 +1,15 @@
@use "vars";
@use 'sass:color'; @use 'sass:color';
// TOOLBAR // TOOLBAR
.maputnik-toolbar { .maputnik-toolbar {
position: fixed; position: fixed;
height: $toolbar-height; height: vars.$toolbar-height;
width: 100%; width: 100%;
z-index: 100; z-index: 100;
left: 0; left: 0;
top: $toolbar-offset; top: vars.$toolbar-offset;
background-color: $color-black; background-color: vars.$color-black;
} }
.maputnik-toolbar-logo-container { .maputnik-toolbar-logo-container {
@@ -20,9 +22,9 @@
flex: 0 0 190px; flex: 0 0 190px;
width: 200px; width: 200px;
text-align: left; text-align: left;
background-color: $color-black; background-color: vars.$color-black;
padding: $margin-2; padding: vars.$margin-2;
height: $toolbar-height; height: vars.$toolbar-height;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -33,19 +35,19 @@
img { img {
width: 30px; width: 30px;
padding-right: $margin-2; padding-right: vars.$margin-2;
vertical-align: top; vertical-align: top;
} }
} }
.maputnik-toolbar-link { .maputnik-toolbar-link {
vertical-align: top; vertical-align: top;
height: $toolbar-height; height: vars.$toolbar-height;
display: inline-block; display: inline-block;
padding: $margin-3; padding: vars.$margin-3;
font-size: $font-size-5; font-size: vars.$font-size-5;
cursor: pointer; cursor: pointer;
color: $color-white; color: vars.$color-white;
text-decoration: none; text-decoration: none;
line-height: 20px; line-height: 20px;
@@ -54,30 +56,30 @@
} }
&:hover { &:hover {
background-color: $color-midgray; background-color: vars.$color-midgray;
} }
} }
.maputnik-toolbar-link--highlighted { .maputnik-toolbar-link--highlighted {
line-height: 1; line-height: 1;
padding: $margin-2 $margin-3; padding: vars.$margin-2 vars.$margin-3;
.maputnik-toolbar-link-wrapper { .maputnik-toolbar-link-wrapper {
background-color: $color-white; background-color: vars.$color-white;
border-radius: 2px; border-radius: 2px;
padding: $margin-2; padding: vars.$margin-2;
margin-top: $margin-1; margin-top: vars.$margin-1;
color: $color-black; color: vars.$color-black;
display: block; display: block;
} }
&:hover { &:hover {
background-color: $color-black; background-color: vars.$color-black;
} }
&:hover .maputnik-toolbar-link-wrapper { &:hover .maputnik-toolbar-link-wrapper {
background-color: color.adjust($color-midgray, $lightness: 12%); background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
color: $color-white; color: vars.$color-white;
} }
} }
@@ -94,31 +96,31 @@
.maputnik-toolbar-action { .maputnik-toolbar-action {
background: inherit; background: inherit;
border-width: 0; border-width: 0;
@extend .maputnik-toolbar-link; /* stylelint-disable-line */ @extend .maputnik-toolbar-link !optional; /* stylelint-disable-line */
} }
.maputnik-toolbar-select { .maputnik-toolbar-select {
background: inherit; background: inherit;
border-width: 0; border-width: 0;
@extend .maputnik-toolbar-link; /* stylelint-disable-line */ @extend .maputnik-toolbar-link !optional; /* stylelint-disable-line */
select { select {
margin: 0 6px; margin: 0 6px;
display: inline; display: inline;
width: auto; width: auto;
border: solid 1px $color-midgray; border: solid 1px vars.$color-midgray;
vertical-align: inherit; vertical-align: inherit;
margin-top: -2px; margin-top: -2px;
} }
} }
.maputnik-icon-text { .maputnik-icon-text {
padding: 0 $margin-1; padding: 0 vars.$margin-1;
} }
.maputnik-icon-action { .maputnik-icon-action {
display: inline; display: inline;
margin: 0 $margin-1; margin: 0 vars.$margin-1;
} }
.maputnik-toolbar__inner { .maputnik-toolbar__inner {
@@ -140,7 +142,7 @@
height: 100%; height: 100%;
text-align: center; text-align: center;
display: block; display: block;
background-color: $color-black; background-color: vars.$color-black;
z-index: 999; z-index: 999;
line-height: 40px; line-height: 40px;
left: 0; left: 0;
@@ -149,7 +151,7 @@
&:active, &:active,
&:focus { &:focus {
width: 100%; width: 100%;
border-color: $color-lowgray; border-color: vars.$color-lowgray;
} }
} }

23
src/styles/_zoomproperty.scss
View File

@@ -1,16 +1,18 @@
@use "vars";
// ZOOM FUNC // ZOOM FUNC
.maputnik-make-zoom-function { .maputnik-make-zoom-function {
background-color: transparent; background-color: transparent;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 0 $margin-2 0 0; padding: 0 vars.$margin-2 0 0;
@extend .maputnik-icon-button; /* stylelint-disable-line */ @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
} }
// ZOOM PROPERTY // ZOOM PROPERTY
.maputnik-zoom-spec-property { .maputnik-zoom-spec-property {
@extend .clearfix; /* stylelint-disable-line */ @extend .clearfix !optional; /* stylelint-disable-line */
} }
.maputnik-zoom-spec-property-label { .maputnik-zoom-spec-property-label {
@@ -19,8 +21,8 @@
} }
.maputnik-zoom-spec-property-stop-item { .maputnik-zoom-spec-property-stop-item {
margin-bottom: $margin-2; margin-bottom: vars.$margin-2;
margin-top: $margin-2; margin-top: vars.$margin-2;
} }
.maputnik-zoom-spec-property-stop-edit { .maputnik-zoom-spec-property-stop-edit {
@@ -49,13 +51,12 @@
padding-top: 0; padding-top: 0;
vertical-align: middle; vertical-align: middle;
@extend .maputnik-icon-button; /* stylelint-disable-line */ @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
} }
.maputnik-add-stop { .maputnik-add-stop {
display: inline-block;
float: right; float: right;
margin-right: $margin-3; margin-right: vars.$margin-3;
} }
// DATA FUNC // DATA FUNC
@@ -63,9 +64,9 @@
background-color: transparent; background-color: transparent;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 0 $margin-2 0 0; padding: 0 vars.$margin-2 0 0;
@extend .maputnik-icon-button; /* stylelint-disable-line */ @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
} }
.maputnik-data-spec-property { .maputnik-data-spec-property {
@@ -86,7 +87,7 @@
.maputnik-doc-wrapper { .maputnik-doc-wrapper {
width: 25%; width: 25%;
color: $color-lowgray; color: vars.$color-lowgray;
} }
.maputnik-doc-wrapper:hover { .maputnik-doc-wrapper:hover {

80
src/styles/index.scss
View File

@@ -1,22 +1,22 @@
@import 'vars'; @use 'vars';
@import 'mixins'; @use 'mixins';
@import 'reset'; @use 'reset';
@import 'base'; @use 'base';
@import 'components'; @use 'components';
@import 'scrollbar'; @use 'scrollbar';
@import 'picker'; @use 'picker';
@import 'toolbar'; @use 'toolbar';
@import 'modal'; @use 'modal';
@import 'export'; @use 'export';
@import 'layout'; @use 'layout';
@import 'layer'; @use 'layer';
@import 'input'; @use 'input';
@import 'filtereditor'; @use 'filtereditor';
@import 'zoomproperty'; @use 'zoomproperty';
@import 'popup'; @use 'popup';
@import 'map'; @use 'map';
@import 'codemirror'; @use 'codemirror';
@import 'react-collapse'; @use 'react-collapse';
.maputnik-layout { .maputnik-layout {
height: 100vh; height: 100vh;
@@ -29,14 +29,14 @@
} }
.maputnik-data-fieldset-inner { .maputnik-data-fieldset-inner {
background: $color-black; background: vars.$color-black;
border: solid 1px $color-midgray; border: solid 1px vars.$color-midgray;
border-radius: 2px; border-radius: 2px;
position: relative; position: relative;
// HACK: Overide // HACK: Overide
.maputnik-input-block { .maputnik-input-block {
margin: $margin-2; margin: vars.$margin-2;
} }
.maputnik-add-stop { .maputnik-add-stop {
@@ -49,8 +49,8 @@
} }
.maputnik-toolbox { .maputnik-toolbox {
margin: $margin-3; margin: vars.$margin-3;
margin-top: $margin-3; margin-top: vars.$margin-3;
text-align: right; text-align: right;
} }
@@ -58,40 +58,40 @@
.maputnik-data-spec-property { .maputnik-data-spec-property {
legend { legend {
font-size: $font-size-6; font-size: vars.$font-size-6;
color: $color-lowgray; color: vars.$color-lowgray;
margin-bottom: $margin-3; margin-bottom: vars.$margin-3;
} }
.maputnik-data-spec-property-group { .maputnik-data-spec-property-group {
margin-bottom: $margin-2; margin-bottom: vars.$margin-2;
} }
} }
.maputnik-data-spec-block { .maputnik-data-spec-block {
margin: $margin-3; margin: vars.$margin-3;
} }
.maputnik-function-stop { .maputnik-function-stop {
padding-left: $margin-2; padding-left: vars.$margin-2;
padding-right: $margin-2; padding-right: vars.$margin-2;
} }
.maputnik-function-stop-table { .maputnik-function-stop-table {
text-align: left; text-align: left;
margin-bottom: $margin-2; margin-bottom: vars.$margin-2;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
thead th { thead th {
padding: $margin-1 $margin-2; padding: vars.$margin-1 vars.$margin-2;
padding-left: 0; padding-left: 0;
color: $color-lowgray; color: vars.$color-lowgray;
} }
td, th { td, th {
font-size: $font-size-6; font-size: vars.$font-size-6;
color: $color-white; color: vars.$color-white;
// HACK // HACK
> * { > * {
@@ -102,7 +102,7 @@
&:not(:first-child) &:not(:first-child)
{ {
padding: $margin-1; padding: vars.$margin-1;
} }
&:nth-child(1) { &:nth-child(1) {
@@ -147,10 +147,10 @@
} }
caption { caption {
color: $color-lowgray; color: vars.$color-lowgray;
text-align: left; text-align: left;
border-top: solid 1px $color-black; border-top: solid 1px vars.$color-black;
font-size: $font-size-6; font-size: vars.$font-size-6;
height: 0px; height: 0px;
overflow: hidden; overflow: hidden;
} }