Create scss variable for the default border style

camptocamp · Sep 17, 2019 · 3c7d4d1 · 3c7d4d1
1 parent 9036cbc
commit 3c7d4d1
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 28 deletions.
diff --git a/contribs/gmf/src/controllers/desktop.scss b/contribs/gmf/src/controllers/desktop.scss
@@ -15,7 +15,6 @@ $padding-base-vertical: $half-app-margin !default;
 $padding-base-horizontal: $app-margin !default;
 $form-group-margin-bottom: $app-margin !default;
 $search-results-max-height: calc(100vh - #{$topbar-height} + #{$map-tools-size} + (2 * #{$app-margin})) !default;
-$border-color: darken($brand-primary, $standard-variation) !default;
 
 @import "~bootstrap/scss/_functions.scss";
 @import "~bootstrap/scss/_variables.scss";
@@ -108,9 +107,7 @@ $footer-height: $input-height-base + 2 * $padding-base-vertical;
   overflow: hidden;
   position: relative;
   display: block;
-  border-top-color: $btn-default-border;
-  border-top-width: 0.06rem;
-  border-top-style: solid;
+  border-top: 0.06rem solid $btn-default-border;
   .gmf-map,
   .gmf-map > div {
     position: absolute;
@@ -133,8 +130,7 @@ $footer-height: $input-height-base + 2 * $padding-base-vertical;
     margin-bottom: 0;
     /* buttons or inputs in bar are supposed to be '-sm' */
     transition: 0.2s ease-out all;
-    border: solid $border-color;
-    border-width: 0.06rem 0 0;
+    border-top: $border;
     &.gmf-app-active {
       bottom: 0;
     }
@@ -156,9 +152,8 @@ $footer-height: $input-height-base + 2 * $padding-base-vertical;
       $width: 2.50rem;
       width: $width;
       margin-left: -($width / 2);
-      border-bottom: 0;
-      border: solid $border-color;
-      border-width: 0.06rem 0.06rem 0 0.06rem;
+      border-bottom: none;
+      border: $border;
       font-weight: 900;
     }
   }
@@ -302,8 +297,8 @@ gmf-search {
   .ui-resizable-e {
     background-color: darken($brand-secondary, $standard-variation);
     border: {
-      left: 0.06rem solid $border-color;
-      right: 0.06rem solid $border-color;
+      left: $border;
+      right: $border;
     }
   }
 }
@@ -403,7 +398,7 @@ $theme-selector-columns: 2;
 
   .gmf-app-bar {
     background-color: $brand-primary;
-    border-left: 0.06rem solid $border-color;
+    border-left: $border;
 
     float: right;
     height: 100%;
@@ -428,7 +423,7 @@ $theme-selector-columns: 2;
     .btn-group-vertical {
       width: 100%;
       .btn {
-        border: 0.06rem solid $border-color;
+        border: $border;
         border-right-width: 0;
         border-left-width: 0;
 
@@ -669,7 +664,7 @@ $bgselector-image-size: 3.00rem;
  * GMF EditFeature directive
  */
 gmf-editfeature > div {
-  border-top: 0.06rem solid $border-color;
+  border-top: $border;
   margin-top: $app-margin;
   padding-top: $app-margin;
 }
@@ -679,7 +674,7 @@ gmf-editfeature > div {
  * GMF ObjectEditingTools directive
  */
 gmf-objecteditingtools {
-  border-bottom: 0.06rem solid $border-color;
+  border-bottom: $border;
   display: block;
   margin: 0 0 $app-margin 0;
   padding: 0 0 $app-margin 0;

diff --git a/contribs/gmf/src/controllers/mobile-nav.scss b/contribs/gmf/src/controllers/mobile-nav.scss
@@ -281,7 +281,7 @@ nav.gmf-mobile-nav-right {
   color: $map-tools-color;
   z-index: $above-search-index;
   height: $map-tools-size;
-  border: 0.06rem solid $border-color;
+  border: $border;
   .fa, svg {
     font-size: $icon-font-size;
   }
@@ -320,7 +320,7 @@ nav.gmf-mobile-nav-right {
 
   .gmf-mobile-nav-trigger {
     margin: 0;
-    border: solid 0.06rem $border-color;
+    border: $border;
   }
 
   .gmf-mobile-nav-right-trigger {

diff --git a/contribs/gmf/src/floor/floor.scss b/contribs/gmf/src/floor/floor.scss
@@ -10,7 +10,7 @@
     height: $map-tools-size;
     width: $map-tools-size;
     background-color: $map-tools-bg-color;
-    border: solid 0.06rem $border-color;
+    border: $border;
     color: $map-tools-color;
     &:hover {
       background-color: $map-tools-bg-color;

diff --git a/contribs/gmf/src/query/window.scss b/contribs/gmf/src/query/window.scss
@@ -32,7 +32,7 @@ div.ngeo-displaywindow {
   z-index: $above-all;
   .collapse-button {
     background-color: $nav-bg;
-    border: solid 0.06rem $border-color;
+    border: $border;
     border-bottom-width: 0;
     border-radius: $border-radius-base $border-radius-base 0 0;
     line-height: 0.5;
@@ -47,7 +47,7 @@ div.ngeo-displaywindow {
   }
   .windowcontainer {
     background-color: $nav-bg;
-    border: solid 0.06rem $border-color;
+    border: $border;
     position: relative;
     height: 100%;
     width: 100%;
@@ -131,7 +131,7 @@ div.ngeo-displaywindow {
     }
   }
   .navigate {
-    border-top: solid 0.06rem $border-color;
+    border-top: $border;
     height: $map-tools-size;
     display: flex;
     justify-content: space-between;

diff --git a/contribs/gmf/src/sass/map.scss b/contribs/gmf/src/sass/map.scss
@@ -13,7 +13,7 @@
     height: $map-tools-size;
     width: $map-tools-size;
     background-color: $map-tools-bg-color;
-    border: solid 0.06rem $border-color;
+    border: $border;
     color: $map-tools-color;
     &:hover {
       background-color: $onhover-color;
@@ -59,7 +59,7 @@
 
 button[ngeo-geolocation] {
   background-color: $map-tools-bg-color;
-  border: solid 0.06rem $border-color;
+  border: $border;
   color: $map-tools-color;
   .fa {
     font-size: $icon-font-size;

diff --git a/contribs/gmf/src/sass/swipe.scss b/contribs/gmf/src/sass/swipe.scss
@@ -23,7 +23,7 @@ ngeo-mapswipe .swipe-input {
 
   &::-webkit-slider-thumb {
     appearance: none;
-    border: 1px solid $border-color;
+    border: $border;
     cursor: pointer;
     height: 900px;
     pointer-events: auto;

diff --git a/contribs/gmf/src/sass/typeahead.scss b/contribs/gmf/src/sass/typeahead.scss
@@ -14,13 +14,13 @@
     overflow-y: auto;
     background-color: $map-tools-bg-color;
     box-shadow: $light-box-shadow;
-    border: solid 0.06rem $border-color;
+    border: $border;
 
     .tt-suggestion {
       text-align: left;
       padding: $app-margin;
       margin: 0;
-      border-bottom: solid 0.06rem $border-color;
+      border-bottom: $border;
 
       &:hover, &.tt-cursor {
         cursor: pointer;

diff --git a/contribs/gmf/src/sass/vars_only.scss b/contribs/gmf/src/sass/vars_only.scss
@@ -24,6 +24,8 @@ $input-border-focus: darken($brand-primary, $standard-variation) !default;
 $light-box-shadow: 0 0.37rem 0.75rem rgba(0, 0, 0, 0.1) !default;
 $eavy-box-shadow: 0 0.37rem 0.75rem rgba(0, 0, 0, 0.3) !default;
 $icon-font-size: 1.25rem;
+$border-color: darken($brand-primary, $standard-variation) !default;
+$border: 0.06rem solid $border-color !default;
 
 // Z-indexes
 $below-content-index: 1;

diff --git a/contribs/gmf/src/search/search.scss b/contribs/gmf/src/search/search.scss
@@ -46,7 +46,7 @@ gmf-search {
     width: $map-tools-size;
     height: $map-tools-size;
     background-color: $map-tools-bg-color;
-    border: solid 0.06rem $border-color;
+    border: $border;
     color: $map-tools-color;
     &:hover {
       background-color: $onhover-color;
@@ -56,7 +56,7 @@ gmf-search {
     box-shadow: none;
     height: 100%;
     padding: $half-app-margin $map-tools-size;
-    border: 0.06rem solid $border-color;
+    border: $border;
     &:focus {
       border-color: $border-color;
       box-shadow: none;