Skip to content

Commit

Permalink
Use new scss syntax (#1015)
Browse files Browse the repository at this point in the history
  • Loading branch information
@birkskyum
birkskyum authored Jan 21, 2025
1 parent 857cae7 commit 87cd79e
Show file tree
Hide file tree
Showing 14 changed files with 330 additions and 300 deletions.
6 changes: 3 additions & 3 deletions src/components/SmallError.scss
View file
Original file line number Diff line number Diff line change
@@ -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
}
34 changes: 18 additions & 16 deletions src/styles/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "vars";

@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
Expand All @@ -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;
}

Expand All @@ -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,
Expand All @@ -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 {
Expand Down
6 changes: 4 additions & 2 deletions src/styles/_codemirror.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "vars";

.CodeMirror-lint-tooltip {
z-index: 2000 !important;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand Down
87 changes: 45 additions & 42 deletions src/styles/_components.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -60,7 +63,7 @@
&-button {
opacity: 0;
pointer-events: none;
background: $color-black;
background: vars.$color-black;
color: white;
border: none;
padding: 4px;
Expand All @@ -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;
}
Expand All @@ -95,47 +98,47 @@
.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;
box-sizing: border-box;
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 {
Expand All @@ -150,27 +153,27 @@
}

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;
font-size: 12px;
}

&-action {
color: $color-lowgray;
color: vars.$color-lowgray;
user-select: none;
width: 18%;
vertical-align: top;
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
Loading

0 comments on commit 87cd79e

Please sign in to comment.