ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-10-14 15:03:49 +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
src/styles/_layer.scss
+50 -44
View File
@@ -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;
}