ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-27 16:40:00 +00:00
Code Issues Projects Releases Wiki Activity

Add layer button and increase contrast

Browse Source
This commit is contained in:
Lukas Martinelli
2017-01-11 15:48:15 +01:00
parent 3917a3e323
commit cb752c0343
6 changed files with 81 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/styles/_base.scss
View File

@@ -14,7 +14,7 @@
html {
color: $color-white;
font-size: $font-size-2;
font-size: $font-size-5;
box-sizing: border-box;
}
@@ -33,6 +33,7 @@ p {
h1 {
font-size: $font-size-2;
margin-bottom: $margin-3;
font-weight: bold;
}
h2 {

4
src/styles/_components.scss
View File

@@ -19,7 +19,6 @@
box-sizing: border-box;
font-size: $font-size-6;
line-height: 2;
color: $color-lowgray;
user-select: none;
position: relative;
vertical-align: top;
@@ -86,8 +85,8 @@
margin: $margin-3;
&-label {
display: inline-block;
color: $color-lowgray;
display: inline-block;
user-select: none;
width: 50%;
vertical-align: top;
@@ -124,3 +123,4 @@
color: $color-red;
}
}

2
src/styles/_input.scss
View File

@@ -10,7 +10,7 @@
padding-right: $margin-2;
border: none;
background-color: $color-gray;
color: $color-lowgray;
color: lighten($color-lowgray, 12);
}
.maputnik-string {

107
src/styles/_layer.scss
View File

@@ -1,61 +1,80 @@
// LAYER LIST
.maputnik-layer-list-container {
padding: 0;
margin: 0;
padding-bottom: $margin-5;
.maputnik-add-layer {
}
.maputnik-layer-list-item {
font-weight: 400;
color: $color-lowgray;
font-size: $font-size-6;
border-width: 0px 0px 1px;
border-style: solid;
border-color: lighten($color-black, 0.1);
user-select: none;
list-style: none;
z-index: 2000;
cursor: pointer;
position: relative;
padding: 5px 10px;
background-color: $color-black;
line-height: 1.3;
display: flex;
flex-direction: row;
}
.maputnik-layer-list {
&-header{
padding: $margin-2;
font-weight: bold;
font-size: $font-size-5;
color: $color-lowgray;
display: flex;
flex-direction: row;
.maputnik-icon-action svg {
fill: $color-black;
}
.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
background-color: lighten($color-black, 2);
.maputnik-icon-action svg {
fill: $color-midgray;
&:hover {
fill: $color-lowgray;
> * {
vertical-align: middle;
margin-bottom: 0;
}
}
&-container {
padding: 0;
margin: 0;
padding-bottom: $margin-5;
}
&-item {
font-weight: 400;
color: $color-lowgray;
font-size: $font-size-6;
border-width: 0px 0px 1px;
border-style: solid;
border-color: lighten($color-black, 0.1);
user-select: none;
list-style: none;
z-index: 2000;
cursor: pointer;
position: relative;
padding: 5px 10px;
background-color: $color-black;
line-height: 1.3;
display: flex;
flex-direction: row;
}
&-icon-action svg {
fill: $color-black;
}
.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
background-color: lighten($color-black, 2);
.maputnik-layer-list-icon-action svg {
fill: darken($color-lowgray, 0.5);
&:hover {
fill: $color-white;
}
}
}
&-item-selected {
color: $color-white;
}
&-item-id {
width: 115px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.maputnik-layer-list-item-selected {
color: $color-white;
}
.maputnik-layer-list-item-id {
width: 115px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// FILTER EDITOR
.maputnik-layer-editor-group {
font-weight: bold;
font-size: $font-size-5;
background-color: lighten($color-black, 2);
color: $color-lowgray;
cursor: pointer;
user-select: none;