ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-06-19 13:47:27 +00:00
Code Issues Projects Releases Wiki Activity

All important stuff is in CSS now

Browse Source
This commit is contained in:
Lukas Martinelli
2017-01-11 11:35:33 +01:00
parent 9ef24428fe
commit b51354ae1d
22 changed files with 452 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/_base.scss
+15 -3
View File
@@ -24,9 +24,10 @@ html {
p {
font-size: $font-size-6;
padding-top: $margin-2;
padding-bottom: $margin-2;
margin-top: $margin-2;
margin-bottom: $margin-2;
color: $color-lowgray;
line-height: 1.3;
}
h1 {
@@ -49,10 +50,21 @@ h4 {
margin-bottom: $margin-3;
}
input:focus {
input {
height: 24px;
}
input:focus, select:focus {
color: $color-white !important;
outline: #8e8e8e auto 1px !important;
}
label:hover {
color: $color-white;
}
.clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
src/styles/_components.scss
+12
View File
@@ -15,6 +15,10 @@
height: 100%;
width: 75%;
}
.maputnik-doc-target {
cursor: help;
}
.maputnik-doc-wrapper {
display: inline-block;
box-sizing: border-box;
@@ -52,6 +56,14 @@
margin: $margin-3;
}
.maputnik-input-block-label {
display: inline-block;
line-height: 2;
color: $color-lowgray;
user-select: none;
width: 50%;
}
.maputnik-space {
flex-grow: 1;
}
src/styles/_input.scss
+101
View File
@@ -23,6 +23,7 @@
//COLOR PICKER
.maputnik-color {
@extend .maputnik-input;
height: 26px;
}
.maputnik-color-wrapper {
position: relative;
@@ -32,3 +33,103 @@
}
.maputnik-color-picker-overlay {
}
.maputnik-checkbox-wrapper {
display: inline-block;
box-sizing: border-box;
padding: 0px;
position: relative;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.maputnik-checkbox {
position: absolute;
z-index: -1;
opacity: 0;
width: 50%;
}
.maputnik-checkbox-box {
display: inline-block;
text-align: center;
height: 24px;
width: 24px;
margin-right: $margin-2;
background-color: $color-gray;
border-radius: 2px;
border-style: solid;
border-width: 2px;
border-color: $color-gray;
transition: background-color 0.1s ease-out;
}
.maputnik-checkbox-icon {
width: 50%;
height: 50%;
margin-top: 1px;
fill: $color-lowgray;
}
.maputnik-zoom-spec-property {
@extend .clearfix;
display: block;
margin: $margin-3;
}
.maputnik-zoom-spec-property-label {
display: inline-block;
width: 41%;
}
.maputnik-zoom-spec-property-stop-item {
margin-bottom: $margin-2;
margin-top: $margin-2;
}
.maputnik-zoom-spec-property-stop-edit {
display: inline-block;
width: 7%;
margin-right: 1.5%;
> * {
width: 100%;
}
}
.maputnik-zoom-spec-property-stop-value {
display: inline-block;
width: 41.5%;
> * {
width: 100%;
}
}
.maputnik-delete-stop {
background-color: transparent;
vertical-align: top;
.maputnik-doc-wrapper {
width: auto;
}
.maputnik-doc-target {
cursor: pointer;
}
&:hover {
background-color: transparent;
svg {
fill: $color-white;
}
}
}
.maputnik-add-stop {
display: inline-block;
float: right;
margin-right: $margin-2;
}
.maputnik-select {
@extend .maputnik-input;
height: 2.15em;
width: 50%;
}
src/styles/_layer.scss
+98 -2
View File
@@ -5,6 +5,7 @@
margin: 0;
padding-bottom: $margin-5;
}
.maputnik-layer-list-item {
font-weight: 400;
color: $color-lowgray;
@@ -29,7 +30,7 @@
}
.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
background-color: lighten($color-black, 0.8);
background-color: lighten($color-black, 2);
.maputnik-icon-action svg {
fill: $color-midgray;
@@ -38,6 +39,11 @@
}
}
}
.maputnik-layer-list-item-selected {
color: $color-white;
}
.maputnik-layer-list-item-id {
width: 115px;
white-space: nowrap;
@@ -49,7 +55,8 @@
.maputnik-layer-editor-group {
font-weight: bold;
font-size: $font-size-5;
background-color: darken($color-gray, 1.5);
background-color: lighten($color-black, 2);
color: $color-lowgray;
cursor: pointer;
user-select: none;
@@ -57,18 +64,107 @@
display: flex;
flex-direction: row;
line-height: 20px;
&:hover {
background-color: $color-gray;
}
}
.maputnik-filter-editor-wrapper {
padding: $margin-3;
}
.maputnik-filter-editor-property {
display: inline-block;
width: '22%';
}
.maputnik-filter-editor-operator {
display: inline-block;
width: 19%;
margin-left: 2%;
}
.maputnik-filter-editor-args {
display: inline-block;
width: 54%;
margin-left: 2%;
}
.maputnik-make-zoom-function {
background-color: transparent;
display: inline-block;
padding-bottom: 0px;
padding-top: 0px;
&:hover {
background-color: transparent;
svg {
fill: $color-white;
}
}
}
.maputnik-filter-editor-compound-select {
margin-bottom: $margin-2;
}
.maputnik-filter-editor-unsupported {
color: $color-midgray;
}
.maputnik-filter-editor {
@extend .clearfix;
}
.maputnik-add-filter {
display: inline-block;
float: right;
margin-top: $margin-2;
}
.maputnik-delete-filter {
background-color: transparent;
&:hover {
background-color: transparent;
svg {
fill: $color-white;
}
}
}
.maputnik-filter-editor-block-action {
margin-top: $margin-2;
margin-bottom: $margin-2;
}
.maputnik-filter-editor-block-action {
display: inline-block;
width: 8%;
margin-right: 1.5%;
}
.maputnik-filter-editor-block-content {
display: inline-block;
width: 90.5%;
}
.maputnik-filter-editor-property {
display: inline-block;
width: 25%;
}
.maputnik-filter-editor-operator {
display: inline-block;
width: 17%;
.maputnik-select {
width: 100%;
}
}
.maputnik-filter-editor-args {
display: inline-block;
width: 54%;
.maputnik-string, .maputnik-number {
width: 100%;
}
}
src/styles/_modal.scss
+65
View File
@@ -90,6 +90,9 @@
max-width: 100%;
}
.maputnik-add-layer{
@extend .clearfix;
}
//ADD MODAL
.maputnik-add-layer-button {
margin-right: $margin-3;
@@ -100,3 +103,65 @@
text-align: right;
@extend .maputnik-big-button;
}
//SOURCE MODAL
.maputnik-public-source {
vertical-align: top;
margin-top: 1.5%;
margin-right: 1.5%;
background-color: $color-gray;
width: 48.5%;
display: inline-block;
}
.maputnik-public-source-select {
padding: $margin-3;
font-size: $font-size-5;
color: $color-lowgray;
display: flex;
flex-direction: row;
background-color: transparent;
}
.maputnik-public-source-name {
font-weight: 700;
}
.maputnik-public-source-id {
font-weight: 400;
}
.maputnik-active-source-type-editor {
min-width: 500px;
}
.maputnik-active-source-type-editor-header {
background-color: $color-gray;
color: $color-lowgray;
padding: $margin-2;
display: flex;
flex-direction: row;
}
.maputnik-active-source-type-editor-header-id {
font-weight: 700;
line-height: 2;
font-size: $font-size-5;
}
.maputnik-active-source-type-editor-content {
border-color: $color-gray;
border-width: 2px;
border-style: solid;
padding: $margin-2;
}
.maputnik-add-source {
@extend .clearfix;
}
.maputnik-add-source-button {
@extend .maputnik-big-button;
display: inline-block;
margin-top: 0;
margin-right: $margin-3;
float: right;
}
src/styles/_popup.scss
+28
View File
@@ -0,0 +1,28 @@
.maputnik-popup-layer {
@extend .maputnik-base ;
color: $color-lowgray;
user-select: none;
padding-left: 0;
padding-right: $margin-1;
line-height: 1.2;
padding-left: $margin-2;
padding-right: $margin-2;
}
.maputnik-popup-layer-id {
padding-left: $margin-2;
padding-right: $margin-2;
background-color: $color-midgray;
color: $color-white;
}
.maputnik-property-layer-popup {
}
.maputnik-feature-property-popup {
.maputnik-input-block {
margin: 0;
margin-left: $margin-2;
margin-top: $margin-2;
}
}
src/styles/index.scss
+1
View File
@@ -29,3 +29,4 @@ $toolbar-height: 40px;
@import 'layout';
@import 'layer';
@import 'input';
@import 'popup';