Merge pull request #4099 from camptocamp/scss_bootsrap_4

Scss bootsrap 4
camptocamp · Aug 7, 2018 · 78c4ceb · 78c4ceb
2 parents 57643eb + cbf48f4
commit 78c4ceb
Show file tree

Hide file tree

Showing 26 changed files with 104 additions and 70 deletions.
diff --git a/contribs/gmf/apps/desktop/index.html.ejs b/contribs/gmf/apps/desktop/index.html.ejs
@@ -20,7 +20,7 @@
       <div class="gmf-app-data-panel" ng-cloak>
         <div class="gmf-app-header">
           <div class="dropdown">
-            <a href class="btn btn-default btn-block btn-primary"
+            <a href class="btn btn-block prime"
               data-toggle="dropdown">
               <span class="fa fa-grid"></span>
               <span ng-if="mainCtrl.gmfThemeManager.modeFlush">

diff --git a/contribs/gmf/apps/desktop_alt/index.html.ejs b/contribs/gmf/apps/desktop_alt/index.html.ejs
@@ -20,7 +20,7 @@
       <div class="gmf-app-data-panel">
         <div class="gmf-app-header">
           <div class="dropdown" ng-cloak>
-            <a href class="btn btn-default btn-block btn-primary" data-toggle="dropdown">
+            <a href class="btn btn-block prime" data-toggle="dropdown">
               <span ng-if="mainCtrl.gmfThemeManager.isLoading()">
                 <span translate>Loading...</span>
               </span>

diff --git a/contribs/gmf/apps/oeedit/index.html.ejs b/contribs/gmf/apps/oeedit/index.html.ejs
@@ -19,7 +19,7 @@
       <div class="gmf-app-data-panel" ng-cloak>
         <div class="gmf-app-header">
           <div class="dropdown">
-            <a href class="btn btn-default btn-block btn-primary"
+            <a href class="btn btn-block prime"
               data-toggle="dropdown">
               <span class="fa fa-grid"></span>
               <span ng-if="mainCtrl.gmfThemeManager.modeFlush">

diff --git a/contribs/gmf/apps/oeview/index.html.ejs b/contribs/gmf/apps/oeview/index.html.ejs
@@ -19,7 +19,7 @@
       <div class="gmf-app-data-panel" ng-cloak>
         <div class="gmf-app-header">
           <div class="dropdown">
-            <a href class="btn btn-default btn-block btn-primary"
+            <a href class="btn btn-block prime"
               data-toggle="dropdown">
               <span class="fa fa-grid"></span>
               <span ng-if="mainCtrl.gmfThemeManager.modeFlush">

diff --git a/contribs/gmf/src/authentication/component.html b/contribs/gmf/src/authentication/component.html
@@ -14,7 +14,7 @@
     <div class="form-group">
       <input
           type="submit"
-          class="form-control btn btn-primary"
+          class="form-control btn prime"
           value="{{'Logout' | translate}}" />
     </div>
     <div class="form-group">
@@ -61,7 +61,7 @@
     <div class="form-group">
       <input
           type="submit"
-          class="form-control btn btn-primary"
+          class="form-control btn prime"
           value="{{'Change password' | translate}}" />
     </div>
     <div class="form-group">
@@ -132,7 +132,7 @@ <h4 class="modal-title">
     <div class="form-group">
     <input
         type="submit"
-        class="form-control btn btn-primary"
+        class="form-control btn prime"
         value="{{'Connect' | translate}}" />
     </div>
     <div ng-show="$ctrl.allowPasswordReset" class="form-group">

diff --git a/contribs/gmf/src/controllers/desktop.scss b/contribs/gmf/src/controllers/desktop.scss
@@ -2,19 +2,19 @@
  * Entry point for all styles required for the desktop application.
  */
 
-$map-tools-size: 1.88rem !default;
-$button-size: 2.50rem !default;
+$map-tools-size: 1.9rem !default;
+$button-size: 2.5rem !default;
 $left-panel-width: 20rem !default;
-$right-panel-width: 17.50rem !default;
-$topbar-height: 2.81rem !default;
+$right-panel-width: 17.5rem !default;
+$topbar-height: 2.8rem !default;
 $search-width: 8 * $map-tools-size !default;
 $padding-base-vertical: 0.31rem !default;
 $padding-base-horizontal: 0.62rem !default;
 $form-group-margin-bottom: 0.62rem !default;
-$search-results-max-height: calc(100vh - $topbar-height + $map-tools-size + (2 * $app-margin)) !default;
 
 @import '~gmf/sass/vars_only.scss';
 
+$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";
@@ -42,7 +42,6 @@ html, body {
 
 body {
   padding-top: $topbar-height;
-  font-size: 0.8rem;
 }
 
 header {
@@ -70,6 +69,16 @@ main {
   overflow: hidden;
 }
 
+.dropdown-menu > li > a {
+  color: $color;
+  padding: $input-btn-padding-y $input-btn-padding-x;
+  display: block;
+  &:hover {
+    text-decoration: none;
+    background-color: $onhover-color;
+  }
+}
+
 $footer-height: $input-height-base + 2 * $padding-base-vertical;
 
 .gmf-app-map-container {
@@ -115,7 +124,7 @@ $footer-height: $input-height-base + 2 * $padding-base-vertical;
     button.gmf-app-map-info {
       position: absolute;
       /* button is supposed to be .btn-sm */
-      bottom: $footer-height - 1;
+      bottom: $footer-height;
       border-top-left-radius: $border-radius-base;
       border-top-right-radius: $border-radius-base;
       border-bottom-left-radius: 0;
@@ -246,7 +255,7 @@ gmf-backgroundlayerselector {
 $theme-selector-columns: 2;
 .gmf-theme-selector li {
   float: left;
-  width: calc((100% - $theme-selector-columns * 2 * $half-app-margin) / $theme-selector-columns);
+  width: calc((100% - #{$theme-selector-columns} * 2 * #{$half-app-margin}) / #{$theme-selector-columns});
 }
 .gmf-backgroundlayerselector {
   margin-bottom: 0;
@@ -539,13 +548,18 @@ gmf-featurestyle {
   left: $app-margin;
 
   button {
+    background-color: $map-tools-bg-color;
     padding: $padding-small-vertical;
+    &::after {
+      display: none !important;
+    }
   }
 
   button,
   gmf-backgroundlayerselector {
     box-shadow: 0 0.37rem 0.75rem rgba(0, 0, 0, 0.175);
   }
+
 }
 
 .gmf-displayquerywindow {
@@ -565,7 +579,7 @@ $bgselector-image-size: 3.00rem;
 .gmf-app-map-messages {
   position: absolute;
   vertical-align: bottom;
-  left: calc(2 * $app-margin + $bgselector-image-size + 2 * $padding-small-vertical);
+  left: calc(2 * #{$app-margin} + #{$bgselector-image-size} + 2 * #{$padding-small-vertical});
 }
 
 

diff --git a/contribs/gmf/src/controllers/mobile-nav.scss b/contribs/gmf/src/controllers/mobile-nav.scss
@@ -204,7 +204,7 @@ nav.gmf-mobile-nav-right {
 
   .gmf-mobile-nav-slide {
     position: fixed;
-    height: calc(100% - $nav-bar-height);
+    height: calc(100% - #{$nav-bar-height});
     width: $nav-width;
     transform: translateX(100%);
     transition: transform $duration, opacity $duration;

diff --git a/contribs/gmf/src/editing/editFeatureComponent.html b/contribs/gmf/src/editing/editFeatureComponent.html
@@ -112,7 +112,7 @@ <h4 class="modal-title">
       </button>
       <button
           type="button"
-          class="btn btn-primary"
+          class="btn prime"
           data-dismiss="modal">
         {{'Cancel' | translate}}
       </button>

diff --git a/contribs/gmf/src/filters/filterselectorcomponent.html b/contribs/gmf/src/filters/filterselectorcomponent.html
@@ -97,7 +97,7 @@ <h4 class="modal-title">{{'Save filter' | translate}}</h4>
           type="button"
           ng-click="$ctrl.saveFilterSave()"
           ng-disabled="$ctrl.saveFilterName === ''"
-          class="btn btn-primary">{{'Save' | translate}}</button>
+          class="btn prime">{{'Save' | translate}}</button>
     </div>
   </ngeo-modal>
 

diff --git a/contribs/gmf/src/layertree/timeslider.scss b/contribs/gmf/src/layertree/timeslider.scss
@@ -4,7 +4,7 @@
 .gmf-time-slider {
 
   // 1.75rem come from bootstrap popover class .popover-content { padding: 0.56rem 0.87rem; }
-  min-width: calc($popover-max-width - 1.75rem);
+  min-width: calc(#{$popover-max-width} - 1.75rem);
 
   .ui-widget-content {
     border: none;

diff --git a/contribs/gmf/src/lidarprofile/lidarprofile.scss b/contribs/gmf/src/lidarprofile/lidarprofile.scss
@@ -11,7 +11,7 @@ $profile-legend-width: 9.38rem;
   display: flex;
 
   .lidarprofile {
-    width: calc(100% - $profile-legend-width);
+    width: calc(100% - #{$profile-legend-width});
     background-color: #f5f5f5;
   }
 
@@ -32,8 +32,8 @@ $profile-legend-width: 9.38rem;
     margin: $app-margin;
     padding-left: 6.25rem;
     padding-top: 6.25rem;
-    width:  calc(100% - 3.12rem - $profile-legend-width);
-    height: calc($lidarprofile-height - 3.12rem);
+    width:  calc(100% - 3.12rem - #{$profile-legend-width});
+    height: calc(#{$lidarprofile-height} - 3.12rem);
     font-size: 1.5em;
     opacity: 1;
     background: #e1f1f7;
@@ -51,7 +51,7 @@ $profile-legend-width: 9.38rem;
 }
 
 .gmf-lidarprofile-chart-active main {
-  height: calc(100% - $lidarprofile-height);
+  height: calc(100% - #{$lidarprofile-height});
 }
 
 .gmf-tooltip-measure {

diff --git a/contribs/gmf/src/permalink/shareComponent.html b/contribs/gmf/src/permalink/shareComponent.html
@@ -43,7 +43,7 @@ <h4 class="modal-title" translate>Share this map</h4>
     <div class="text-right">
       <button type="button" class="btn btn-default" data-dismiss="modal" translate>Close</button>
       <button ng-if="::$ctrl.enableEmail"
-        type="submit" class="btn btn-default btn-primary"
+        type="submit" class="btn prime"
         ng-click="$ctrl.sendShortUrl()"
         ng-disabled="!gmfShareForm.$valid"
         translate>Send

diff --git a/contribs/gmf/src/print/component.html b/contribs/gmf/src/print/component.html
@@ -191,13 +191,13 @@
 
       <button
         ng-show="$ctrl.layoutInfo.formats.png"
-        class="gmf-print-image btn btn-primary"
+        class="gmf-print-image btn primary"
         ng-disabled="$ctrl.isState('PRINTING')"
         ng-click="$ctrl.print('png')" translate>Image</button>
 
       <button
         ng-show="$ctrl.layoutInfo.formats.pdf"
-        class="gmf-print-pdf btn btn-primary"
+        class="gmf-print-pdf btn primary"
         ng-disabled="$ctrl.isState('PRINTING')"
         ng-click="$ctrl.print('pdf')" translate>PDF</button>
     </div>

diff --git a/contribs/gmf/src/profile/profile.scss b/contribs/gmf/src/profile/profile.scss
@@ -11,7 +11,7 @@ $profile-height: 12.50rem;
   display: flex;
 
   .ngeo-profile {
-    width: calc(100% - $profile-legend-width);
+    width: calc(100% - #{$profile-legend-width});
     background-color: #f5f5f5;
   }
 
@@ -37,5 +37,5 @@ $profile-height: 12.50rem;
 }
 
 .gmf-profile-chart-active main {
-  height: calc(100% - $profile-height);
+  height: calc(100% - #{$profile-height});
 }
diff --git a/contribs/gmf/src/query/grid.scss b/contribs/gmf/src/query/grid.scss
@@ -84,5 +84,5 @@ $table-height: $grid-height - $app-margin - 2 * $map-tools-size;
 }
 
 .gmf-query-grid-active main {
-  height: calc(100% - $grid-height);
+  height: calc(100% - #{$grid-height});
 }
diff --git a/contribs/gmf/src/query/window.scss b/contribs/gmf/src/query/window.scss
@@ -203,7 +203,7 @@ div.ngeo-displaywindow {
       font-size: 1.31rem;
     }
     .slide-animation {
-      height: calc(100% - ($map-tools-size + $app-margin));
+      height: calc(100% - (#{$map-tools-size} + #{$app-margin}));
     }
 
     .animation-container {
@@ -226,12 +226,12 @@ div.ngeo-displaywindow {
     /** prevent glitch for swipe animation **/
     .details table {
       .details-key {
-        min-width: calc(30vw - 2 * $app-margin);
-        max-width: calc(30vw - 2 * $app-margin);
+        min-width: calc(30vw - 2 * #{$app-margin});
+        max-width: calc(30vw - 2 * #{$app-margin});
       }
       .details-value {
-        min-width: calc(70vw - 2 * $app-margin);
-        max-width: calc(70vw - 2 * $app-margin);
+        min-width: calc(70vw - 2 * #{$app-margin});
+        max-width: calc(70vw - 2 * #{$app-margin});
       }
     }
   }

diff --git a/contribs/gmf/src/sass/base.scss b/contribs/gmf/src/sass/base.scss
@@ -27,6 +27,22 @@ a {
   display: none !important;
 }
 
+.pull-right {
+  float: right;
+}
+
+.btn.prime {
+  background-color: $brand-primary;
+  border-color: darken($brand-primary, 10%);
+  color: white;
+}
+
+.btn.btn-default {
+  background-color: $map-tools-bg-color;
+  border-color: darken($map-tools-bg-color, 20%);
+  color: $map-tools-color;
+}
+
 /**
  * The blur filter is used to avoid the loading icon to shake on firefox.
  * See: https://github.com/FortAwesome/Font-Awesome/issues/671
@@ -65,9 +81,11 @@ i, cite, em, var, address, dfn {
 .modal-content {
   border-radius: 0;
 }
+
 .modal-body, .modal-header {
   padding: 0.62rem;
 }
+
 .modal-title {
   font-weight: bold;
   font-size: inherit;

diff --git a/contribs/gmf/src/sass/fullscreenpopup.scss b/contribs/gmf/src/sass/fullscreenpopup.scss
@@ -6,10 +6,10 @@
     top: 0;
     left: auto;
     right: auto;
-    max-width: calc(100vw - 2 * $app-margin);
-    width: calc(100vw - 2 * $app-margin);
-    height: calc(100vh - 2 * $app-margin);
-    max-height: calc(100vh - 2 * $app-margin);
+    max-width: calc(100vw - 2 * #{$app-margin});
+    width: calc(100vw - 2 * #{$app-margin});
+    height: calc(100vh - 2 * #{$app-margin});
+    max-height: calc(100vh - 2 * #{$app-margin});
     margin: $app-margin;
     /* Like bootstrap modal border-radius */
     border-radius: 0.37rem;
@@ -41,14 +41,14 @@
       position: fixed;
       top: $fullscreenpopup-tablet-top;
       left: $nav-width;
-      max-width: calc(100vw - (2 * $nav-width + 2 * $app-margin));
+      max-width: calc(100vw - (2 * #{$nav-width} + 2 * #{$app-margin}));
       width: $fullscreenpopup-tablet-width;
-      max-height: calc(100vh - ($fullscreenpopup-tablet-top + $app-margin));
+      max-height: calc(100vh - (#{$fullscreenpopup-tablet-top} + #{$app-margin}));
       height: $fullscreenpopup-tablet-width + $map-tools-size;
     }
     .popover-content {
       overflow: auto;
-      height: calc(100% - 4 * $app-margin);
+      height: calc(100% - 4 * #{$app-margin});
     }
   }
 }
diff --git a/contribs/gmf/src/sass/map.scss b/contribs/gmf/src/sass/map.scss
@@ -148,6 +148,7 @@ button[ngeo-mobile-geolocation] {
   .alert-dismissable .close,
   .alert-dismissible .close {
     right: -0.31rem;
+    padding: $half-app-margin $app-margin;
     height: inherit;
   }
 }
diff --git a/contribs/gmf/src/sass/popover.scss b/contribs/gmf/src/sass/popover.scss
@@ -28,7 +28,7 @@ $popover-text-color : $color-light;
 
       i {
         margin-right: $half-app-margin;
-        max-width: calc($popover-icon-max-width - $half-app-margin);
+        max-width: calc(#{$popover-icon-max-width} - #{$half-app-margin});
       }
 
       span {
@@ -42,7 +42,7 @@ $popover-text-color : $color-light;
       input {
         margin-left: $half-app-margin;
         display: inline-block;
-        max-width: calc($popover-action-max-width - $half-app-margin);
+        max-width: calc(#{$popover-action-max-width} - #{$half-app-margin});
         /* fix issue with IE11 not sizing correctly the popover box */
         padding: 0;
       }