More substitution in sass calc

GSGMF-418
camptocamp · Aug 7, 2018 · af3e070 · af3e070
1 parent e2eef6c
commit af3e070
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 26 deletions.
diff --git a/contribs/gmf/src/controllers/desktop.scss b/contribs/gmf/src/controllers/desktop.scss
@@ -11,10 +11,10 @@ $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";
@@ -579,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/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/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/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/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;
       }

diff --git a/contribs/gmf/src/search/search.scss b/contribs/gmf/src/search/search.scss
@@ -1,7 +1,7 @@
 @import '~gmf/sass/vars.scss';
 @import "~gmf/sass/typeahead.scss";
 
-$search-results-max-height: calc(100vh - 6 * $app-margin);
+$search-results-max-height: calc(100vh - 6 * #{$app-margin});
 
 gmf-search {
   top: $app-margin;