Restructure CSS more

2025-12-27 16:40:00 +00:00 · 2017-01-11 13:34:38 +01:00
parent b51354ae1d
commit 0908856b4f
16 changed files with 343 additions and 307 deletions
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -50,13 +50,11 @@ h4 {
  margin-bottom: $margin-3;
 }

-input {
-  height: 24px;
-}
 input:focus, select:focus {
  color: $color-white !important;
  outline: #8e8e8e auto 1px !important;
 }
+
 label:hover {
  color: $color-white;
 }
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -7,6 +7,7 @@
  display: inline;
  margin-left: $margin-1;
 }
+
 .maputnik-map {
  position: fixed !important;
  top: 40px;
@@ -19,6 +20,7 @@
 .maputnik-doc-target {
  cursor: help;
 }
+
 .maputnik-doc-wrapper {
  display: inline-block;
  box-sizing: border-box;
@@ -28,8 +30,8 @@
  user-select: none;
  position: relative;
  vertical-align: top;
-  width: 50%;
 }
+
 .maputnik-button {
  cursor: pointer;
  background-color: $color-midgray;
@@ -52,16 +54,45 @@
  padding: $margin-3;
  font-size: $font-size-5;
 }
-.maputnik-input-block {
-  margin: $margin-3;
+
+.maputnik-icon-button {
+  background-color: transparent;
+  &:hover {
+    background-color: transparent;
+    svg {
+      fill: $color-white;
+    }
+  }
 }

-.maputnik-input-block-label {
-  display: inline-block;
-  line-height: 2;
-  color: $color-lowgray;
-  user-select: none;
-  width: 50%;
+.maputnik-input-block {
+  margin: $margin-3;
+
+  &-label {
+    display: inline-block;
+    color: $color-lowgray;
+    user-select: none;
+    width: 50%;
+    vertical-align: top;
+  }
+
+  &-content {
+    display: inline-block;
+    width: 50%;
+  }
+}
+
+
+.maputnik-action-block {
+  .maputnik-input-block-label {
+    display: inline-block;
+    width: 43%;
+  }
+  .maputnik-input-block-action {
+    vertical-align: top;
+    display: inline-block;
+    width: 7%;
+  }
 }

 .maputnik-space {
--- a/src/styles/_filtereditor.scss
+++ b/src/styles/_filtereditor.scss
@@ -0,0 +1,89 @@
+.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-filter-editor-compound-select {
+  margin-bottom: $margin-2;
+
+  .maputnik-doc-wrapper {
+    width: 50%;
+  }
+
+  .maputnik-select {
+    display: inline-block;
+    width: 50%;
+  }
+}
+
+.maputnik-filter-editor-unsupported {
+  color: $color-midgray;
+}
+
+.maputnik-filter-editor {
+  @extend .clearfix;
+}
+
+.maputnik-add-filter {
+  display: inline-block;
+  float: right;
+  margin-top: $margin-3;
+}
+
+.maputnik-delete-filter {
+  @extend .maputnik-icon-button;
+}
+
+.maputnik-filter-editor-block-action {
+  margin-top: $margin-2;
+  margin-bottom: $margin-2;
+}
+.maputnik-filter-editor-block-action {
+  display: inline-block;
+  width: 6%;
+  margin-right: 1.5%;
+}
+
+.maputnik-filter-editor-block-content {
+  display: inline-block;
+  width: 92.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%;
+  }
+}
+
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -1,21 +1,22 @@
-.maputnik-base {
-  display: inline-block;
+//INPUT
+.maputnik-input {
+  height: 24px;
+  width: 100%;
+  display: block;
  box-sizing: border-box;
  font-size: $font-size-6;
  line-height: 2;
  padding-left: $margin-2;
  padding-right: $margin-2;
-}
-.maputnik-input {
-  @extend .maputnik-base;
  border: none;
  background-color: $color-gray;
  color: $color-lowgray;
 }
+
 .maputnik-string {
  @extend .maputnik-input;
-  width: 50%;
 }
+
 .maputnik-number {
  @extend .maputnik-input;
 }
@@ -29,107 +30,69 @@
  position: relative;
  display: inline;
 }
+
 .maputnik-color-picker-offset {
+
 }
 .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;
+// ARRAY
+
+.maputnik-array {
+  > * {
+    margin-bottom: $margin-3;
+  }
 }

+// SELECT
+.maputnik-select {
+  @extend .maputnik-input;
+  height: 24px;
+}
+
+// CHECKBOX
 .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 {
+  &-wrapper {
+    @extend .maputnik-input;
+    padding-left: 0;
+    padding-right: 0;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
    cursor: pointer;
+    max-width: 24px;
  }

-  &:hover {
-    background-color: transparent;
-    svg {
-      fill: $color-white;
-    }
+  &-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;
+  }
+
+  &-icon {
+    width: 50%;
+    height: 50%;
+    margin-top: 1px;
+    fill: $color-lowgray;
  }
 }

-.maputnik-add-stop {
-  display: inline-block;
-  float: right;
-  margin-right: $margin-2;
+// AUTOCOMPLETE
+.maputnik-autocomplete {
 }

-.maputnik-select {
-  @extend .maputnik-input;
-  height: 2.15em;
-  width: 50%;
-}
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -1,4 +1,3 @@
-
 // LAYER LIST
 .maputnik-layer-list-container {
  padding: 0;
@@ -69,102 +68,3 @@
    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%;
-  }
-}
--- a/src/styles/_popup.scss
+++ b/src/styles/_popup.scss
@@ -1,5 +1,5 @@
 .maputnik-popup-layer {
-  @extend .maputnik-base ;
+  display: inline-block;
  color: $color-lowgray;
  user-select: none;
  padding-left: 0;
--- a/src/styles/_zoomproperty.scss
+++ b/src/styles/_zoomproperty.scss
@@ -0,0 +1,64 @@
+// ZOOM FUNC
+.maputnik-make-zoom-function {
+  background-color: transparent;
+  display: inline-block;
+  padding-bottom: 0px;
+  padding-top: 0px;
+  vertical-align: middle;
+  @extend .maputnik-icon-button;
+}
+
+// ZOOM PROPERTY
+.maputnik-zoom-spec-property {
+  @extend .clearfix;
+}
+
+.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;
+  vertical-align: top;
+  width: 16%;
+  margin-right: 3%;
+  > * {
+    width: 100%;
+  }
+}
+
+.maputnik-zoom-spec-property-stop-value {
+  display: inline-block;
+  width: 81%;
+  > * {
+    width: 100%;
+  }
+}
+
+.maputnik-delete-stop {
+  @extend .maputnik-icon-button;
+  vertical-align: top;
+
+  .maputnik-doc-wrapper {
+    width: auto;
+  }
+  .maputnik-doc-target {
+    cursor: pointer;
+  }
+}
+
+.maputnik-add-stop {
+  display: inline-block;
+  float: right;
+  margin-right: $margin-3;
+}
+
+.maputnik-zoom-spec-property .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
+  visibility: hidden;
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -29,4 +29,6 @@ $toolbar-height: 40px;
@import 'layout';
@import 'layer';
@import 'input';
+@import 'filtereditor';
+@import 'zoomproperty';
@import 'popup';