mirror of
https://github.com/maputnik/editor.git
synced 2025-12-28 09:00:02 +00:00
Use new scss syntax (#1015)
This commit is contained in:
Birk Skyum
GitHub
@@ -1,7 +1,7 @@
|
||||
@import '../styles/vars';
|
||||
@use '../styles/vars';
|
||||
|
||||
.SmallError {
|
||||
color: #E57373;
|
||||
font-size: $font-size-6;
|
||||
margin-top: $margin-2
|
||||
font-size: vars.$font-size-6;
|
||||
margin-top: vars.$margin-2
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "vars";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
|
||||
@@ -15,8 +17,8 @@
|
||||
}
|
||||
|
||||
html {
|
||||
color: $color-white;
|
||||
font-size: $font-size-5;
|
||||
color: vars.$color-white;
|
||||
font-size: vars.$font-size-5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -32,34 +34,34 @@ body {
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $font-size-6;
|
||||
margin-top: $margin-2;
|
||||
margin-bottom: $margin-2;
|
||||
color: $color-lowgray;
|
||||
font-size: vars.$font-size-6;
|
||||
margin-top: vars.$margin-2;
|
||||
margin-bottom: vars.$margin-2;
|
||||
color: vars.$color-lowgray;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-2;
|
||||
margin-bottom: $margin-3;
|
||||
font-size: vars.$font-size-2;
|
||||
margin-bottom: vars.$margin-3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-size-3;
|
||||
margin-bottom: $margin-3;
|
||||
font-size: vars.$font-size-3;
|
||||
margin-bottom: vars.$margin-3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-4;
|
||||
margin-bottom: $margin-3;
|
||||
font-size: vars.$font-size-4;
|
||||
margin-bottom: vars.$margin-3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $font-size-5;
|
||||
margin-bottom: $margin-3;
|
||||
font-size: vars.$font-size-5;
|
||||
margin-bottom: vars.$margin-3;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
@@ -68,12 +70,12 @@ textarea:focus,
|
||||
button:focus,
|
||||
.maputnik-toolbar-link:focus,
|
||||
select:focus {
|
||||
color: $color-white;
|
||||
color: vars.$color-white;
|
||||
outline: #8e8e8e auto 1px;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
color: $color-white;
|
||||
color: vars.$color-white;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "vars";
|
||||
|
||||
.CodeMirror-lint-tooltip {
|
||||
z-index: 2000 !important;
|
||||
}
|
||||
@@ -55,7 +57,7 @@
|
||||
|
||||
.cm-s-maputnik .CodeMirror-matchingbracket {
|
||||
background: hsla(223, 12%, 35%, 1);
|
||||
color: $color-white !important;
|
||||
color: vars.$color-white !important;
|
||||
}
|
||||
|
||||
.cm-s-maputnik .CodeMirror-nonmatchingbracket {
|
||||
@@ -79,7 +81,7 @@
|
||||
z-index: 99999;
|
||||
padding: 0.3em 0.5em;
|
||||
background: hsla(0, 0%, 0%, 0.3);
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
border-bottom-left-radius: 2px;
|
||||
transition: opacity 320ms ease;
|
||||
opacity: 0;
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
@use 'sass:color';
|
||||
// MAP
|
||||
.maputnik-map__container {
|
||||
background: white;
|
||||
display: flex;
|
||||
width: $layout-map-width;
|
||||
width: vars.$layout-map-width;
|
||||
|
||||
&--error {
|
||||
align-items: center;
|
||||
@@ -36,7 +39,7 @@
|
||||
&-wrapper {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
font-size: $font-size-6;
|
||||
font-size: vars.$font-size-6;
|
||||
line-height: 2;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
@@ -45,9 +48,9 @@
|
||||
|
||||
&-popup {
|
||||
display: none;
|
||||
color: $color-lowgray;
|
||||
background-color: $color-gray;
|
||||
padding: $margin-2;
|
||||
color: vars.$color-lowgray;
|
||||
background-color: vars.$color-gray;
|
||||
padding: vars.$margin-2;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
@@ -60,7 +63,7 @@
|
||||
&-button {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
background: $color-black;
|
||||
background: vars.$color-black;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
@@ -77,11 +80,11 @@
|
||||
}
|
||||
|
||||
.maputnik-doc-inline {
|
||||
color: $color-lowgray;
|
||||
background-color: $color-gray;
|
||||
padding: $margin-2;
|
||||
color: vars.$color-lowgray;
|
||||
background-color: vars.$color-gray;
|
||||
padding: vars.$margin-2;
|
||||
font-size: 12px;
|
||||
margin-top: $margin-3;
|
||||
margin-top: vars.$margin-3;
|
||||
line-height: 1.5;
|
||||
flex: 1 0;
|
||||
}
|
||||
@@ -95,10 +98,10 @@
|
||||
.maputnik-button {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
background-color: $color-midgray;
|
||||
color: $color-lowgray;
|
||||
font-size: $font-size-6;
|
||||
padding: $margin-2;
|
||||
background-color: vars.$color-midgray;
|
||||
color: vars.$color-lowgray;
|
||||
font-size: vars.$font-size-6;
|
||||
padding: vars.$margin-2;
|
||||
user-select: none;
|
||||
border-width: 0;
|
||||
border-radius: 2px;
|
||||
@@ -106,36 +109,36 @@
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: color.adjust($color-midgray, $lightness: 12%);
|
||||
color: $color-white;
|
||||
background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
|
||||
color: vars.$color-white;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: color.adjust($color-midgray, $lightness: -5%);
|
||||
color: $color-midgray;
|
||||
background-color: color.adjust(vars.$color-midgray, $lightness: -5%);
|
||||
color: vars.$color-midgray;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.maputnik-big-button {
|
||||
margin-top: $margin-3;
|
||||
margin-top: vars.$margin-3;
|
||||
display: inline-block;
|
||||
padding: $margin-3;
|
||||
font-size: $font-size-5;
|
||||
padding: vars.$margin-3;
|
||||
font-size: vars.$font-size-5;
|
||||
}
|
||||
|
||||
.maputnik-wide-button {
|
||||
padding: $margin-2 $margin-3;
|
||||
padding: vars.$margin-2 vars.$margin-3;
|
||||
}
|
||||
|
||||
.maputnik-green-button {
|
||||
background-color: $color-green;
|
||||
color: $color-black;
|
||||
background-color: vars.$color-green;
|
||||
color: vars.$color-black;
|
||||
}
|
||||
|
||||
.maputnik-white-button {
|
||||
background-color: $color-white;
|
||||
color: $color-black;
|
||||
background-color: vars.$color-white;
|
||||
color: vars.$color-black;
|
||||
}
|
||||
|
||||
.maputnik-icon-button {
|
||||
@@ -150,19 +153,19 @@
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-white;
|
||||
fill: vars.$color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// INPUT BLOCK
|
||||
.maputnik-input-block {
|
||||
margin: $margin-3;
|
||||
margin: vars.$margin-3;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-label {
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
user-select: none;
|
||||
width: 32%;
|
||||
vertical-align: top;
|
||||
@@ -170,7 +173,7 @@
|
||||
}
|
||||
|
||||
&-action {
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
user-select: none;
|
||||
width: 18%;
|
||||
vertical-align: top;
|
||||
@@ -187,7 +190,7 @@
|
||||
.maputnik-input-block-label {
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
margin-bottom: $margin-3;
|
||||
margin-bottom: vars.$margin-3;
|
||||
}
|
||||
|
||||
.maputnik-input-block-action {
|
||||
@@ -211,15 +214,15 @@
|
||||
|
||||
// SPACE HELPER
|
||||
.maputnik-space {
|
||||
@include vendor-prefix(flex-grow, 1);
|
||||
@include mixins.vendor-prefix(flex-grow, 1);
|
||||
}
|
||||
|
||||
// MESSAGE PANEL
|
||||
.maputnik-message-panel {
|
||||
padding: $margin-2;
|
||||
padding: vars.$margin-2;
|
||||
|
||||
&-error {
|
||||
color: $color-red;
|
||||
color: vars.$color-red;
|
||||
}
|
||||
|
||||
&__switch-button {
|
||||
@@ -241,7 +244,7 @@
|
||||
&__menu {
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
background: $color-black;
|
||||
background: vars.$color-black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: stretch;
|
||||
@@ -262,13 +265,13 @@
|
||||
color: #a4a4a4;
|
||||
padding: 0.4em 0.4em;
|
||||
font-size: 0.9em;
|
||||
border: solid 1px $color-red;
|
||||
border: solid 1px vars.$color-red;
|
||||
border-radius: 2px;
|
||||
margin: $margin-2 0px;
|
||||
margin: vars.$margin-2 0px;
|
||||
}
|
||||
|
||||
.maputnik-expression-editor {
|
||||
border: solid 1px $color-gray;
|
||||
border: solid 1px vars.$color-gray;
|
||||
}
|
||||
|
||||
.maputnik-input-block--wide {
|
||||
@@ -288,13 +291,13 @@
|
||||
}
|
||||
|
||||
.maputnik-expr-infobox {
|
||||
font-size: $font-size-6;
|
||||
background: $color-midgray;
|
||||
padding: $margin-2;
|
||||
font-size: vars.$font-size-6;
|
||||
background: vars.$color-midgray;
|
||||
padding: vars.$margin-2;
|
||||
border-radius: 2px;
|
||||
border-top-right-radius: 0px;
|
||||
border-top-left-radius: 0px;
|
||||
color: $color-white;
|
||||
color: vars.$color-white;
|
||||
}
|
||||
|
||||
.maputnik-expr-infobox__button {
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@use "vars";
|
||||
|
||||
.maputnik-filter-editor-wrapper {
|
||||
padding: $margin-3;
|
||||
padding: vars.$margin-3;
|
||||
overflow: hidden;
|
||||
|
||||
.maputnik-input-block {
|
||||
@@ -8,8 +10,8 @@
|
||||
}
|
||||
|
||||
.maputnik-filter-editor {
|
||||
@extend .clearfix; /* stylelint-disable-line */
|
||||
color: $color-lowgray;
|
||||
@extend .clearfix !optional; /* stylelint-disable-line */
|
||||
color: vars.$color-lowgray;
|
||||
}
|
||||
|
||||
.maputnik-filter-editor-property {
|
||||
@@ -39,7 +41,7 @@
|
||||
}
|
||||
|
||||
.maputnik-filter-editor-compound-select {
|
||||
margin-bottom: $margin-2;
|
||||
margin-bottom: vars.$margin-2;
|
||||
|
||||
.maputnik-doc-wrapper {
|
||||
width: 50%;
|
||||
@@ -52,22 +54,22 @@
|
||||
}
|
||||
|
||||
.maputnik-filter-editor-unsupported {
|
||||
color: $color-midgray;
|
||||
color: vars.$color-midgray;
|
||||
}
|
||||
|
||||
.maputnik-add-filter {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-top: $margin-3;
|
||||
margin-top: vars.$margin-3;
|
||||
}
|
||||
|
||||
.maputnik-delete-filter {
|
||||
@extend .maputnik-icon-button; /* stylelint-disable-line */
|
||||
@extend .maputnik-icon-button !optional; /* stylelint-disable-line */
|
||||
}
|
||||
|
||||
.maputnik-filter-editor-block-action {
|
||||
margin-top: $margin-2;
|
||||
margin-bottom: $margin-2;
|
||||
margin-top: vars.$margin-2;
|
||||
margin-bottom: vars.$margin-2;
|
||||
display: inline-block;
|
||||
width: 6%;
|
||||
margin-right: 1.5%;
|
||||
@@ -79,12 +81,12 @@
|
||||
}
|
||||
|
||||
.maputnik-radio-as-button {
|
||||
@extend .maputnik-button; /* stylelint-disable-line */
|
||||
@extend .maputnik-button !optional; /* stylelint-disable-line */
|
||||
|
||||
border: solid 1px transparent;
|
||||
|
||||
&:focus-within {
|
||||
border: solid 1px $color-white;
|
||||
border: solid 1px vars.$color-white;
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
@use 'sass:color';
|
||||
//INPUT
|
||||
.maputnik-input {
|
||||
@@ -5,13 +8,13 @@
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
font-size: $font-size-6;
|
||||
font-size: vars.$font-size-6;
|
||||
line-height: 2;
|
||||
padding-left: $margin-2;
|
||||
padding-right: $margin-2;
|
||||
padding-left: vars.$margin-2;
|
||||
padding-right: vars.$margin-2;
|
||||
border: none;
|
||||
background-color: $color-gray;
|
||||
color: color.adjust($color-lowgray, $lightness: 12%);
|
||||
background-color: vars.$color-gray;
|
||||
color: color.adjust(vars.$color-lowgray, $lightness: 12%);
|
||||
|
||||
&:invalid {
|
||||
border: solid 1px #B71C1C;
|
||||
@@ -20,7 +23,7 @@
|
||||
}
|
||||
|
||||
.maputnik-string {
|
||||
@extend .maputnik-input; /* stylelint-disable-line */
|
||||
@extend .maputnik-input !optional; /* stylelint-disable-line */
|
||||
|
||||
&--multi {
|
||||
resize: vertical;
|
||||
@@ -44,12 +47,12 @@
|
||||
}
|
||||
|
||||
.maputnik-number {
|
||||
@extend .maputnik-input; /* stylelint-disable-line */
|
||||
@extend .maputnik-input !optional; /* stylelint-disable-line */
|
||||
}
|
||||
|
||||
//COLOR PICKER
|
||||
.maputnik-color {
|
||||
@extend .maputnik-input; /* stylelint-disable-line */
|
||||
@extend .maputnik-input !optional; /* stylelint-disable-line */
|
||||
|
||||
height: 26px;
|
||||
}
|
||||
@@ -57,7 +60,7 @@
|
||||
.maputnik-color-wrapper {
|
||||
position: relative;
|
||||
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
}
|
||||
|
||||
.maputnik-color-swatch {
|
||||
@@ -71,7 +74,7 @@
|
||||
|
||||
.maputnik-array {
|
||||
> * {
|
||||
margin-bottom: $margin-3;
|
||||
margin-bottom: vars.$margin-3;
|
||||
}
|
||||
|
||||
.maputnik-array-block {
|
||||
@@ -96,19 +99,19 @@
|
||||
|
||||
// SELECT
|
||||
.maputnik-select {
|
||||
@extend .maputnik-input; /* stylelint-disable-line */
|
||||
@extend .maputnik-input !optional; /* stylelint-disable-line */
|
||||
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: $color-gray url("#{$icon-down-arrow}") right center no-repeat;
|
||||
color: $color-white;
|
||||
background: vars.$color-gray url("#{vars.$icon-down-arrow}") right center no-repeat;
|
||||
color: vars.$color-white;
|
||||
background-position: calc(100% - 2px) center;
|
||||
padding-right: 20px;
|
||||
|
||||
height: 24px;
|
||||
}
|
||||
[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
|
||||
@@ -116,12 +119,12 @@
|
||||
padding: 0;
|
||||
|
||||
.maputnik-button {
|
||||
margin-right: $margin-1;
|
||||
margin-right: vars.$margin-1;
|
||||
}
|
||||
}
|
||||
|
||||
.maputnik-button-selected {
|
||||
background-color: color.adjust($color-midgray, $lightness: 12%);
|
||||
background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -137,7 +140,7 @@
|
||||
outline: none;
|
||||
|
||||
&-wrapper {
|
||||
@extend .maputnik-input; /* stylelint-disable-line */
|
||||
@extend .maputnik-input !optional; /* stylelint-disable-line */
|
||||
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
@@ -154,12 +157,12 @@
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: $margin-2;
|
||||
background-color: $color-gray;
|
||||
margin-right: vars.$margin-2;
|
||||
background-color: vars.$color-gray;
|
||||
border-radius: 2px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: $color-gray;
|
||||
border-color: vars.$color-gray;
|
||||
transition: background-color 0.1s ease-out;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -185,7 +188,7 @@
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin-top: 1px;
|
||||
fill: $color-lowgray;
|
||||
fill: vars.$color-lowgray;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -198,29 +201,29 @@
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
max-height: 50%;
|
||||
background: $color-gray;
|
||||
background: vars.$color-gray;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&-menu-item {
|
||||
user-select: none;
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
cursor: default;
|
||||
padding: $margin-1;
|
||||
font-size: $font-size-6;
|
||||
padding: vars.$margin-1;
|
||||
font-size: vars.$font-size-6;
|
||||
z-index: 3;
|
||||
background: $color-gray;
|
||||
background: vars.$color-gray;
|
||||
}
|
||||
|
||||
&-menu-item-selected {
|
||||
background: $color-midgray;
|
||||
background: vars.$color-midgray;
|
||||
}
|
||||
}
|
||||
|
||||
// FONT
|
||||
.maputnik-font {
|
||||
.maputnik-autocomplete:not(:last-child) {
|
||||
margin-bottom: $margin-3;
|
||||
margin-bottom: vars.$margin-3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -236,21 +239,21 @@
|
||||
|
||||
.SpecDoc__sdk-support__table {
|
||||
width: 100%;
|
||||
margin-top: $margin-3;
|
||||
margin-top: vars.$margin-3;
|
||||
|
||||
td, th {
|
||||
border: solid 1px $color-midgray;
|
||||
border: solid 1px vars.$color-midgray;
|
||||
padding: 4px 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.SpecDoc__values li {
|
||||
margin-top: $margin-3;
|
||||
margin-top: vars.$margin-3;
|
||||
}
|
||||
|
||||
.SpecDoc__values code {
|
||||
background: $color-midgray;
|
||||
background: vars.$color-midgray;
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
@use 'sass:color';
|
||||
// LAYER LIST
|
||||
.maputnik-layer-list {
|
||||
@@ -7,9 +10,9 @@
|
||||
flex-direction: column;
|
||||
|
||||
&-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;
|
||||
|
||||
> * {
|
||||
@@ -19,8 +22,8 @@
|
||||
}
|
||||
|
||||
&-header-title {
|
||||
font-size: $font-size-5;
|
||||
color: $color-white;
|
||||
font-size: vars.$font-size-5;
|
||||
color: vars.$color-white;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
@@ -28,7 +31,7 @@
|
||||
&-container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-bottom: $margin-5;
|
||||
padding-bottom: vars.$margin-5;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@@ -47,9 +50,9 @@
|
||||
&-item {
|
||||
border: solid 1px transparent;
|
||||
font-weight: 400;
|
||||
color: $color-lowgray;
|
||||
font-size: $font-size-6;
|
||||
border-bottom-color: color.adjust($color-black, $lightness: 0.1%);
|
||||
color: vars.$color-lowgray;
|
||||
font-size: vars.$font-size-6;
|
||||
border-bottom-color: color.adjust(vars.$color-black, $lightness: 0.1%);
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
z-index: 2000;
|
||||
@@ -63,21 +66,22 @@
|
||||
transition: opacity 600ms, visibility 600ms;
|
||||
|
||||
&:focus-within {
|
||||
border: solid 1px $color-lowgray;
|
||||
border: solid 1px vars.$color-lowgray;
|
||||
}
|
||||
|
||||
@include mixins.flex-row;
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
transition-duration: 0;
|
||||
}
|
||||
|
||||
@include flex-row;
|
||||
}
|
||||
|
||||
&-icon-action {
|
||||
display: none;
|
||||
|
||||
svg {
|
||||
fill: $color-black;
|
||||
fill: vars.$color-black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,10 +92,10 @@
|
||||
height: 15px;
|
||||
|
||||
svg {
|
||||
fill: color.adjust($color-lowgray, $lightness: -20%);
|
||||
fill: color.adjust(vars.$color-lowgray, $lightness: -20%);
|
||||
|
||||
&:hover {
|
||||
fill: $color-white;
|
||||
fill: vars.$color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -102,24 +106,24 @@
|
||||
|
||||
.maputnik-layer-list-item:hover,
|
||||
.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 {
|
||||
display: block;
|
||||
|
||||
svg {
|
||||
fill: color.adjust($color-lowgray, $lightness: -0.5%);
|
||||
fill: color.adjust(vars.$color-lowgray, $lightness: -0.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.maputnik-layer-list-item--error {
|
||||
color: $color-red;
|
||||
color: vars.$color-red;
|
||||
}
|
||||
|
||||
&-item-selected {
|
||||
color: $color-white;
|
||||
color: vars.$color-white;
|
||||
}
|
||||
|
||||
&-item-collapsed {
|
||||
@@ -132,7 +136,7 @@
|
||||
}
|
||||
|
||||
&-item-group-last {
|
||||
border-bottom: 2px solid $color-gray;
|
||||
border-bottom: 2px solid vars.$color-gray;
|
||||
}
|
||||
|
||||
&-item-id {
|
||||
@@ -150,14 +154,14 @@
|
||||
|
||||
&-group-header {
|
||||
border: solid 1px transparent;
|
||||
font-size: $font-size-6;
|
||||
color: $color-lowgray;
|
||||
background-color: color.adjust($color-black, $lightness: 2%);
|
||||
font-size: vars.$font-size-6;
|
||||
color: vars.$color-lowgray;
|
||||
background-color: color.adjust(vars.$color-black, $lightness: 2%);
|
||||
user-select: none;
|
||||
padding: $margin-2;
|
||||
padding: vars.$margin-2;
|
||||
|
||||
&:focus-within {
|
||||
border: solid 1px $color-lowgray;
|
||||
border: solid 1px vars.$color-lowgray;
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -165,7 +169,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
@@ -178,25 +182,27 @@
|
||||
}
|
||||
|
||||
&-group-content {
|
||||
margin: 0 $margin-3;
|
||||
margin: 0 vars.$margin-3;
|
||||
}
|
||||
}
|
||||
|
||||
// FILTER EDITOR
|
||||
.maputnik-layer-editor-group {
|
||||
font-weight: bold;
|
||||
font-size: $font-size-5;
|
||||
background-color: color.adjust($color-black, $lightness: 2%);
|
||||
color: $color-white;
|
||||
font-size: vars.$font-size-5;
|
||||
background-color: color.adjust(vars.$color-black, $lightness: 2%);
|
||||
color: vars.$color-white;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
line-height: 20px;
|
||||
border-top: solid 1px #36383e;
|
||||
|
||||
@include mixins.flex-row;
|
||||
|
||||
&__button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: $margin-2;
|
||||
padding: vars.$margin-2;
|
||||
|
||||
&__icon {
|
||||
fill: white;
|
||||
@@ -223,17 +229,17 @@
|
||||
}
|
||||
|
||||
|
||||
@include flex-row;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: $color-gray;
|
||||
background-color: vars.$color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
// PROPERTY
|
||||
.maputnik-default-property {
|
||||
.maputnik-input-block-label {
|
||||
color: color.adjust($color-lowgray, $lightness: -20%);
|
||||
color: color.adjust(vars.$color-lowgray, $lightness: -20%);
|
||||
}
|
||||
|
||||
.maputnik-string,
|
||||
@@ -241,8 +247,8 @@
|
||||
.maputnik-color,
|
||||
.maputnik-select,
|
||||
.maputnik-checkbox-wrapper {
|
||||
background-color: color.adjust($color-gray, $lightness: -2%);
|
||||
color: color.adjust($color-lowgray, $lightness: -20%);
|
||||
background-color: color.adjust(vars.$color-gray, $lightness: -2%);
|
||||
color: color.adjust(vars.$color-lowgray, $lightness: -20%);
|
||||
}
|
||||
|
||||
.maputnik-make-zoom-function svg {
|
||||
@@ -250,18 +256,18 @@
|
||||
}
|
||||
|
||||
.maputnik-multibutton .maputnik-button {
|
||||
background-color: color.adjust($color-midgray, $lightness: -10%);
|
||||
color: color.adjust($color-lowgray, $lightness: -20%);
|
||||
background-color: color.adjust(vars.$color-midgray, $lightness: -10%);
|
||||
color: color.adjust(vars.$color-lowgray, $lightness: -20%);
|
||||
|
||||
&:hover {
|
||||
background-color: color.adjust($color-midgray, $lightness: 12%);
|
||||
color: $color-white;
|
||||
background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
|
||||
color: vars.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.maputnik-multibutton .maputnik-button-selected {
|
||||
background-color: color.adjust($color-midgray, $lightness: -2%);
|
||||
color: $color-lowgray;
|
||||
background-color: color.adjust(vars.$color-midgray, $lightness: -2%);
|
||||
color: vars.$color-lowgray;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -276,8 +282,8 @@
|
||||
&__menu {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
background: $color-black;
|
||||
border: solid 1px $color-midgray;
|
||||
background: vars.$color-black;
|
||||
border: solid 1px vars.$color-midgray;
|
||||
right: 0;
|
||||
min-width: 120px;
|
||||
}
|
||||
@@ -295,7 +301,7 @@
|
||||
.layer-header {
|
||||
display: flex;
|
||||
padding: 6px;
|
||||
background: $color-black;
|
||||
background: vars.$color-black;
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
@@ -310,7 +316,7 @@
|
||||
|
||||
// Clone of the element which is sorted
|
||||
.sortableHelper {
|
||||
font-family: $font-family;
|
||||
font-family: vars.$font-family;
|
||||
z-index: 9999;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "vars";
|
||||
|
||||
//SCROLLING
|
||||
.maputnik-scroll-container {
|
||||
overflow-x: hidden;
|
||||
@@ -11,14 +13,14 @@
|
||||
|
||||
//APP LAYOUT
|
||||
.maputnik-layout {
|
||||
font-family: $font-family;
|
||||
color: $color-white;
|
||||
font-family: vars.$font-family;
|
||||
color: vars.$color-white;
|
||||
|
||||
&-main {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: calc(100% - #{$toolbar-height + $toolbar-offset});
|
||||
top: $toolbar-height + $toolbar-offset;
|
||||
height: calc(100% - #{vars.$toolbar-height + vars.$toolbar-offset});
|
||||
top: vars.$toolbar-height + vars.$toolbar-offset;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
@@ -28,12 +30,12 @@
|
||||
|
||||
&-list {
|
||||
width: 200px;
|
||||
background-color: $color-black;
|
||||
background-color: vars.$color-black;
|
||||
}
|
||||
|
||||
&-drawer {
|
||||
width: 370px;
|
||||
background-color: $color-black;
|
||||
background-color: vars.$color-black;
|
||||
// scroll-container is position: absolute
|
||||
position: relative;
|
||||
}
|
||||
@@ -43,7 +45,7 @@
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
width: $layout-map-width;
|
||||
background-color: $color-black;
|
||||
width: vars.$layout-map-width;
|
||||
background-color: vars.$color-black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "vars";
|
||||
|
||||
//OPENLAYERS
|
||||
.maputnik-layout {
|
||||
.ol-zoom {
|
||||
@@ -39,7 +41,7 @@
|
||||
}
|
||||
|
||||
.maputnik-ol-popup {
|
||||
background: $color-black;
|
||||
background: vars.$color-black;
|
||||
|
||||
}
|
||||
|
||||
@@ -74,7 +76,7 @@
|
||||
background: #1c1f24;
|
||||
border-radius: 2px;
|
||||
padding: 6px 8px;
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
z-index: 9999;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -1,40 +1,43 @@
|
||||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
//MODAL
|
||||
.maputnik-modal {
|
||||
min-width: 350px;
|
||||
max-width: 600px;
|
||||
overflow: hidden;
|
||||
background-color: $color-black;
|
||||
background-color: vars.$color-black;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
font-family: $font-family;
|
||||
font-family: vars.$font-family;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.maputnik-modal-section {
|
||||
padding-top: $margin-3;
|
||||
padding-bottom: $margin-3;
|
||||
padding-top: vars.$margin-3;
|
||||
padding-bottom: vars.$margin-3;
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-4;
|
||||
font-size: vars.$font-size-4;
|
||||
}
|
||||
|
||||
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> */
|
||||
min-height: 0;
|
||||
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.maputnik-modal-sub-section {
|
||||
margin-top: $margin-1;
|
||||
margin-top: vars.$margin-1;
|
||||
}
|
||||
|
||||
.maputnik-modal-section--shrink {
|
||||
@@ -42,14 +45,14 @@
|
||||
}
|
||||
|
||||
.maputnik-modal-header {
|
||||
background-color: $color-gray;
|
||||
padding: $margin-3;
|
||||
background-color: vars.$color-gray;
|
||||
padding: vars.$margin-3;
|
||||
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
}
|
||||
|
||||
.maputnik-modal-header-title {
|
||||
font-size: $font-size-5;
|
||||
font-size: vars.$font-size-5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -66,18 +69,18 @@
|
||||
}
|
||||
|
||||
.maputnik-modal-content {
|
||||
padding: $margin-3;
|
||||
padding: vars.$margin-3;
|
||||
|
||||
@include flex-column;
|
||||
@include mixins.flex-column;
|
||||
}
|
||||
|
||||
.maputnik-modal-header-space {
|
||||
@extend .maputnik-space; /* stylelint-disable-line */
|
||||
@extend .maputnik-space !optional; /* stylelint-disable-line */
|
||||
}
|
||||
|
||||
//OPEN MODAL
|
||||
.maputnik-upload-button {
|
||||
@extend .maputnik-big-button; /* stylelint-disable-line */
|
||||
@extend .maputnik-big-button !optional; /* stylelint-disable-line */
|
||||
}
|
||||
|
||||
.maputnik-style-gallery-container {
|
||||
@@ -88,35 +91,35 @@
|
||||
vertical-align: top;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
background-color: $color-gray;
|
||||
background-color: vars.$color-gray;
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
font-size: $font-size-2;
|
||||
color: $color-lowgray;
|
||||
font-size: vars.$font-size-2;
|
||||
color: vars.$color-lowgray;
|
||||
}
|
||||
|
||||
.maputnik-public-style-button {
|
||||
background-color: $color-gray;
|
||||
padding: $margin-3;
|
||||
background-color: vars.$color-gray;
|
||||
padding: vars.$margin-3;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-midgray;
|
||||
background-color: vars.$color-midgray;
|
||||
}
|
||||
}
|
||||
|
||||
.maputnik-public-style-header {
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
}
|
||||
|
||||
.maputnik-public-style-thumbnail {
|
||||
display: block;
|
||||
margin-top: $margin-2;
|
||||
margin-top: vars.$margin-2;
|
||||
width: 100%;
|
||||
padding-top: calc(400 / 600 * 100%);
|
||||
background-size: cover;
|
||||
background-color: $color-midgray;
|
||||
background-color: vars.$color-midgray;
|
||||
}
|
||||
|
||||
.maputnik-add-modal {
|
||||
@@ -139,18 +142,18 @@
|
||||
}
|
||||
|
||||
.maputnik-add-layer {
|
||||
@extend .clearfix; /* stylelint-disable-line */
|
||||
@extend .clearfix !optional; /* stylelint-disable-line */
|
||||
}
|
||||
|
||||
//ADD MODAL
|
||||
.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;
|
||||
display: inline-block;
|
||||
margin-top: 3;
|
||||
margin-bottom: $margin-3;
|
||||
margin-bottom: vars.$margin-3;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -163,19 +166,19 @@
|
||||
vertical-align: top;
|
||||
margin-top: 1.5%;
|
||||
margin-right: 1.5%;
|
||||
background-color: $color-gray;
|
||||
background-color: vars.$color-gray;
|
||||
width: 48.5%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.maputnik-public-source-select {
|
||||
padding: $margin-3;
|
||||
font-size: $font-size-5;
|
||||
color: $color-lowgray;
|
||||
padding: vars.$margin-3;
|
||||
font-size: vars.$font-size-5;
|
||||
color: vars.$color-lowgray;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
}
|
||||
|
||||
.maputnik-public-source-name {
|
||||
@@ -192,24 +195,24 @@
|
||||
}
|
||||
|
||||
.maputnik-active-source-type-editor-header {
|
||||
background-color: $color-gray;
|
||||
color: $color-lowgray;
|
||||
padding: $margin-2;
|
||||
background-color: vars.$color-gray;
|
||||
color: vars.$color-lowgray;
|
||||
padding: vars.$margin-2;
|
||||
|
||||
@include flex-row;
|
||||
@include mixins.flex-row;
|
||||
}
|
||||
|
||||
.maputnik-active-source-type-editor-header-id {
|
||||
font-weight: 700;
|
||||
line-height: 2;
|
||||
font-size: $font-size-5;
|
||||
font-size: vars.$font-size-5;
|
||||
}
|
||||
|
||||
.maputnik-active-source-type-editor-content {
|
||||
border-color: $color-gray;
|
||||
border-color: vars.$color-gray;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
padding: $margin-2;
|
||||
padding: vars.$margin-2;
|
||||
|
||||
.maputnik-input-block-label {
|
||||
width: 30%;
|
||||
@@ -221,7 +224,7 @@
|
||||
}
|
||||
|
||||
.maputnik-add-source {
|
||||
@extend .clearfix; /* stylelint-disable-line */
|
||||
@extend .clearfix !optional; /* stylelint-disable-line */
|
||||
|
||||
.maputnik-input-block-label {
|
||||
width: 30%;
|
||||
@@ -233,17 +236,17 @@
|
||||
}
|
||||
|
||||
.maputnik-add-source-button {
|
||||
@extend .maputnik-big-button; /* stylelint-disable-line */
|
||||
@extend .maputnik-big-button !optional; /* stylelint-disable-line */
|
||||
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-right: $margin-3;
|
||||
margin-right: vars.$margin-3;
|
||||
float: right;
|
||||
}
|
||||
|
||||
//EXPORT MODAL
|
||||
.maputnik-export-gist {
|
||||
font-size: $font-size-6;
|
||||
font-size: vars.$font-size-6;
|
||||
|
||||
.maputnik-input-block {
|
||||
margin-left: 0;
|
||||
@@ -255,7 +258,7 @@
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -291,12 +294,12 @@
|
||||
}
|
||||
|
||||
&__shortcut {
|
||||
margin-bottom: $margin-2;
|
||||
margin-bottom: vars.$margin-2;
|
||||
}
|
||||
|
||||
dt {
|
||||
display: inline;
|
||||
margin-right: $margin-2;
|
||||
margin-right: vars.$margin-2;
|
||||
}
|
||||
|
||||
dd {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "vars";
|
||||
|
||||
.maputnik-popup-layer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -11,20 +13,20 @@
|
||||
|
||||
.maputnik-popup-layer__label {
|
||||
display: block;
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
line-height: 1.2;
|
||||
padding: $margin-2;
|
||||
padding-top: $margin-1;
|
||||
padding-bottom: $margin-1;
|
||||
padding: vars.$margin-2;
|
||||
padding-top: vars.$margin-1;
|
||||
padding-bottom: vars.$margin-1;
|
||||
}
|
||||
|
||||
.maputnik-popup-layer-id {
|
||||
padding-left: $margin-2;
|
||||
padding-right: $margin-2;
|
||||
background-color: $color-midgray;
|
||||
color: $color-white;
|
||||
padding-left: vars.$margin-2;
|
||||
padding-right: vars.$margin-2;
|
||||
background-color: vars.$color-midgray;
|
||||
color: vars.$color-white;
|
||||
}
|
||||
|
||||
.maputnik-feature-property-popup {
|
||||
@@ -32,9 +34,9 @@
|
||||
overflow-y: auto;
|
||||
.maputnik-input-block {
|
||||
margin: 0;
|
||||
margin-left: $margin-2;
|
||||
margin-right: $margin-2;
|
||||
margin-top: $margin-2;
|
||||
margin-left: vars.$margin-2;
|
||||
margin-right: vars.$margin-2;
|
||||
margin-top: vars.$margin-2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,7 +45,7 @@
|
||||
}
|
||||
|
||||
.maputnik-popup-table-cell {
|
||||
color: $color-lowgray;
|
||||
padding-left: $margin-2;
|
||||
padding-right: $margin-2;
|
||||
color: vars.$color-lowgray;
|
||||
padding-left: vars.$margin-2;
|
||||
padding-right: vars.$margin-2;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
@use "vars";
|
||||
|
||||
@use 'sass:color';
|
||||
// TOOLBAR
|
||||
.maputnik-toolbar {
|
||||
position: fixed;
|
||||
height: $toolbar-height;
|
||||
height: vars.$toolbar-height;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
top: $toolbar-offset;
|
||||
background-color: $color-black;
|
||||
top: vars.$toolbar-offset;
|
||||
background-color: vars.$color-black;
|
||||
}
|
||||
|
||||
.maputnik-toolbar-logo-container {
|
||||
@@ -20,9 +22,9 @@
|
||||
flex: 0 0 190px;
|
||||
width: 200px;
|
||||
text-align: left;
|
||||
background-color: $color-black;
|
||||
padding: $margin-2;
|
||||
height: $toolbar-height;
|
||||
background-color: vars.$color-black;
|
||||
padding: vars.$margin-2;
|
||||
height: vars.$toolbar-height;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -33,19 +35,19 @@
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
padding-right: $margin-2;
|
||||
padding-right: vars.$margin-2;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.maputnik-toolbar-link {
|
||||
vertical-align: top;
|
||||
height: $toolbar-height;
|
||||
height: vars.$toolbar-height;
|
||||
display: inline-block;
|
||||
padding: $margin-3;
|
||||
font-size: $font-size-5;
|
||||
padding: vars.$margin-3;
|
||||
font-size: vars.$font-size-5;
|
||||
cursor: pointer;
|
||||
color: $color-white;
|
||||
color: vars.$color-white;
|
||||
text-decoration: none;
|
||||
line-height: 20px;
|
||||
|
||||
@@ -54,30 +56,30 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-midgray;
|
||||
background-color: vars.$color-midgray;
|
||||
}
|
||||
}
|
||||
|
||||
.maputnik-toolbar-link--highlighted {
|
||||
line-height: 1;
|
||||
padding: $margin-2 $margin-3;
|
||||
padding: vars.$margin-2 vars.$margin-3;
|
||||
|
||||
.maputnik-toolbar-link-wrapper {
|
||||
background-color: $color-white;
|
||||
background-color: vars.$color-white;
|
||||
border-radius: 2px;
|
||||
padding: $margin-2;
|
||||
margin-top: $margin-1;
|
||||
color: $color-black;
|
||||
padding: vars.$margin-2;
|
||||
margin-top: vars.$margin-1;
|
||||
color: vars.$color-black;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-black;
|
||||
background-color: vars.$color-black;
|
||||
}
|
||||
|
||||
&:hover .maputnik-toolbar-link-wrapper {
|
||||
background-color: color.adjust($color-midgray, $lightness: 12%);
|
||||
color: $color-white;
|
||||
background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
|
||||
color: vars.$color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,31 +96,31 @@
|
||||
.maputnik-toolbar-action {
|
||||
background: inherit;
|
||||
border-width: 0;
|
||||
@extend .maputnik-toolbar-link; /* stylelint-disable-line */
|
||||
@extend .maputnik-toolbar-link !optional; /* stylelint-disable-line */
|
||||
}
|
||||
|
||||
.maputnik-toolbar-select {
|
||||
background: inherit;
|
||||
border-width: 0;
|
||||
@extend .maputnik-toolbar-link; /* stylelint-disable-line */
|
||||
@extend .maputnik-toolbar-link !optional; /* stylelint-disable-line */
|
||||
|
||||
select {
|
||||
margin: 0 6px;
|
||||
display: inline;
|
||||
width: auto;
|
||||
border: solid 1px $color-midgray;
|
||||
border: solid 1px vars.$color-midgray;
|
||||
vertical-align: inherit;
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.maputnik-icon-text {
|
||||
padding: 0 $margin-1;
|
||||
padding: 0 vars.$margin-1;
|
||||
}
|
||||
|
||||
.maputnik-icon-action {
|
||||
display: inline;
|
||||
margin: 0 $margin-1;
|
||||
margin: 0 vars.$margin-1;
|
||||
}
|
||||
|
||||
.maputnik-toolbar__inner {
|
||||
@@ -140,7 +142,7 @@
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-color: $color-black;
|
||||
background-color: vars.$color-black;
|
||||
z-index: 999;
|
||||
line-height: 40px;
|
||||
left: 0;
|
||||
@@ -149,7 +151,7 @@
|
||||
&:active,
|
||||
&:focus {
|
||||
width: 100%;
|
||||
border-color: $color-lowgray;
|
||||
border-color: vars.$color-lowgray;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
@use "vars";
|
||||
|
||||
// ZOOM FUNC
|
||||
.maputnik-make-zoom-function {
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
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
|
||||
.maputnik-zoom-spec-property {
|
||||
@extend .clearfix; /* stylelint-disable-line */
|
||||
@extend .clearfix !optional; /* stylelint-disable-line */
|
||||
}
|
||||
|
||||
.maputnik-zoom-spec-property-label {
|
||||
@@ -19,8 +21,8 @@
|
||||
}
|
||||
|
||||
.maputnik-zoom-spec-property-stop-item {
|
||||
margin-bottom: $margin-2;
|
||||
margin-top: $margin-2;
|
||||
margin-bottom: vars.$margin-2;
|
||||
margin-top: vars.$margin-2;
|
||||
}
|
||||
|
||||
.maputnik-zoom-spec-property-stop-edit {
|
||||
@@ -49,13 +51,12 @@
|
||||
padding-top: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
@extend .maputnik-icon-button; /* stylelint-disable-line */
|
||||
@extend .maputnik-icon-button !optional; /* stylelint-disable-line */
|
||||
}
|
||||
|
||||
.maputnik-add-stop {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: $margin-3;
|
||||
margin-right: vars.$margin-3;
|
||||
}
|
||||
|
||||
// DATA FUNC
|
||||
@@ -63,9 +64,9 @@
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
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 {
|
||||
@@ -86,7 +87,7 @@
|
||||
|
||||
.maputnik-doc-wrapper {
|
||||
width: 25%;
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
}
|
||||
|
||||
.maputnik-doc-wrapper:hover {
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
@import 'vars';
|
||||
@import 'mixins';
|
||||
@import 'reset';
|
||||
@import 'base';
|
||||
@import 'components';
|
||||
@import 'scrollbar';
|
||||
@import 'picker';
|
||||
@import 'toolbar';
|
||||
@import 'modal';
|
||||
@import 'export';
|
||||
@import 'layout';
|
||||
@import 'layer';
|
||||
@import 'input';
|
||||
@import 'filtereditor';
|
||||
@import 'zoomproperty';
|
||||
@import 'popup';
|
||||
@import 'map';
|
||||
@import 'codemirror';
|
||||
@import 'react-collapse';
|
||||
@use 'vars';
|
||||
@use 'mixins';
|
||||
@use 'reset';
|
||||
@use 'base';
|
||||
@use 'components';
|
||||
@use 'scrollbar';
|
||||
@use 'picker';
|
||||
@use 'toolbar';
|
||||
@use 'modal';
|
||||
@use 'export';
|
||||
@use 'layout';
|
||||
@use 'layer';
|
||||
@use 'input';
|
||||
@use 'filtereditor';
|
||||
@use 'zoomproperty';
|
||||
@use 'popup';
|
||||
@use 'map';
|
||||
@use 'codemirror';
|
||||
@use 'react-collapse';
|
||||
|
||||
.maputnik-layout {
|
||||
height: 100vh;
|
||||
@@ -29,14 +29,14 @@
|
||||
}
|
||||
|
||||
.maputnik-data-fieldset-inner {
|
||||
background: $color-black;
|
||||
border: solid 1px $color-midgray;
|
||||
background: vars.$color-black;
|
||||
border: solid 1px vars.$color-midgray;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
|
||||
// HACK: Overide
|
||||
.maputnik-input-block {
|
||||
margin: $margin-2;
|
||||
margin: vars.$margin-2;
|
||||
}
|
||||
|
||||
.maputnik-add-stop {
|
||||
@@ -49,8 +49,8 @@
|
||||
}
|
||||
|
||||
.maputnik-toolbox {
|
||||
margin: $margin-3;
|
||||
margin-top: $margin-3;
|
||||
margin: vars.$margin-3;
|
||||
margin-top: vars.$margin-3;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -58,40 +58,40 @@
|
||||
|
||||
.maputnik-data-spec-property {
|
||||
legend {
|
||||
font-size: $font-size-6;
|
||||
color: $color-lowgray;
|
||||
margin-bottom: $margin-3;
|
||||
font-size: vars.$font-size-6;
|
||||
color: vars.$color-lowgray;
|
||||
margin-bottom: vars.$margin-3;
|
||||
}
|
||||
|
||||
.maputnik-data-spec-property-group {
|
||||
margin-bottom: $margin-2;
|
||||
margin-bottom: vars.$margin-2;
|
||||
}
|
||||
}
|
||||
|
||||
.maputnik-data-spec-block {
|
||||
margin: $margin-3;
|
||||
margin: vars.$margin-3;
|
||||
}
|
||||
|
||||
.maputnik-function-stop {
|
||||
padding-left: $margin-2;
|
||||
padding-right: $margin-2;
|
||||
padding-left: vars.$margin-2;
|
||||
padding-right: vars.$margin-2;
|
||||
}
|
||||
|
||||
.maputnik-function-stop-table {
|
||||
text-align: left;
|
||||
margin-bottom: $margin-2;
|
||||
margin-bottom: vars.$margin-2;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
thead th {
|
||||
padding: $margin-1 $margin-2;
|
||||
padding: vars.$margin-1 vars.$margin-2;
|
||||
padding-left: 0;
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
}
|
||||
|
||||
td, th {
|
||||
font-size: $font-size-6;
|
||||
color: $color-white;
|
||||
font-size: vars.$font-size-6;
|
||||
color: vars.$color-white;
|
||||
|
||||
// HACK
|
||||
> * {
|
||||
@@ -102,7 +102,7 @@
|
||||
|
||||
&:not(:first-child)
|
||||
{
|
||||
padding: $margin-1;
|
||||
padding: vars.$margin-1;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
@@ -147,10 +147,10 @@
|
||||
}
|
||||
|
||||
caption {
|
||||
color: $color-lowgray;
|
||||
color: vars.$color-lowgray;
|
||||
text-align: left;
|
||||
border-top: solid 1px $color-black;
|
||||
font-size: $font-size-6;
|
||||
border-top: solid 1px vars.$color-black;
|
||||
font-size: vars.$font-size-6;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user