Merge 6040169 into 3d454b2

yext · May 27, 2021 · cc860de · cc860de
2 parents 3d454b2 + 6040169
commit cc860de
Show file tree

Hide file tree

Showing 8 changed files with 1,207 additions and 121 deletions.
diff --git a/static/package-lock.json b/static/package-lock.json
diff --git a/static/package.json b/static/package.json
@@ -44,12 +44,10 @@
     "webpack-merge": "^5.7.3"
   },
   "dependencies": {
-    "bootstrap-sass": "^3.4.1",
     "comment-json": "^3.0.2",
     "core-js": "^3.6.5",
     "css-vars-ponyfill": "^2.3.1",
     "file-system": "^2.2.2",
-    "font-awesome": "^4.7.0",
     "fs-extra": "^8.1.0",
     "iframe-resizer": "^4.1.1",
     "is-mobile": "^2.2.2",

diff --git a/static/scss/answers/_default.scss b/static/scss/answers/_default.scss
@@ -1,5 +1,4 @@
-@import "vendor";
-@import "~font-awesome/scss/variables";
+@use "sass:math";
 
 // Core variables and mixins
 @import "overlay/module";

diff --git a/static/scss/answers/collapsible-filters/sdk-filter-overrides.scss b/static/scss/answers/collapsible-filters/sdk-filter-overrides.scss
@@ -5,7 +5,7 @@
 @mixin CollapsibleFiltersOverrides {
   .Answers-container {
     @media (min-width: #{$breakpoint-expanded-filters}) {
-      width: $container-width-at-collapsed-filters-breakpoint / $breakpoint-collapsed-filters * 100%;
+      width: math.div($container-width-at-collapsed-filters-breakpoint, $breakpoint-collapsed-filters) * 100%;
     }
   }
 

diff --git a/static/scss/answers/common/util/Spacing.scss b/static/scss/answers/common/util/Spacing.scss
@@ -1,25 +1,25 @@
 @import "../variables";
 @import "set-properties";
 
-$spacing-base: $grid-gutter-width/2 !default;
+$spacing-base: math.div($grid-gutter-width, 2) !default;
 
 // see https://www.viget.com/articles/sass-with-maps
 // for explanation of why sass maps are great for stuff like spacing
 $spacing: (
   zero: 0,
-  oneFifth: $spacing-base / 5,            // 3px
-  oneThird: $spacing-base / 3,            // 5px
-  half: $spacing-base / 2,                // 7.5px
-  twoFifths: $spacing-base * (2 / 5),     // 6px
-  twoThirds: $spacing-base * (2 / 3),     // 10px
-  fourFifths: $spacing-base * (4 / 5),    // 12px
+  oneFifth: math.div($spacing-base, 5),            // 3px
+  oneThird: math.div($spacing-base, 3),            // 5px
+  half: math.div($spacing-base, 2),                // 7.5px
+  twoFifths: $spacing-base * math.div(2, 5),     // 6px
+  twoThirds: $spacing-base * math.div(2, 3),     // 10px
+  fourFifths: $spacing-base * math.div(4, 5),    // 12px
   base: $spacing-base,                    // 15px **
-  fourThirds: $spacing-base * (4 / 3),    // 20px
+  fourThirds: $spacing-base * math.div(4, 3),    // 20px
   double: $spacing-base * 2,              // 30px
-  buttonHeight: $spacing-base * (7 / 3),  // 35px
-  eightThirds: $spacing-base * (8 / 3),   // 40px
+  buttonHeight: $spacing-base * math.div(7, 3),  // 35px
+  eightThirds: $spacing-base * math.div(8, 3),   // 40px
   triple: $spacing-base * 3,              // 45px
-  tenThirds: $spacing-base * (10 / 3),    // 50px
+  tenThirds: $spacing-base * math.div(10, 3),    // 50px
   quadruple: $spacing-base * 4,           // 60px
 );
 

diff --git a/static/scss/answers/common/util/UtilityMixins.scss b/static/scss/answers/common/util/UtilityMixins.scss
@@ -126,54 +126,54 @@
 {
   margin-left: auto;
   margin-right: auto;
-  padding-left: $grid-gutter-width-xs/2;
-  padding-right: $grid-gutter-width-xs/2;
+  padding-left: math.div($grid-gutter-width-xs, 2);
+  padding-right: math.div($grid-gutter-width-xs, 2);
   width: 100%;
 
   @include bpgte(sm)
   {
     width: $container-tablet-base;
-    padding-left: $grid-gutter-width-sm/2;
-    padding-right: $grid-gutter-width-sm/2;
+    padding-left: math.div($grid-gutter-width-sm, 2);
+    padding-right: math.div($grid-gutter-width-sm, 2);
   }
 
   @include bpgte(md)
   {
     width: $container-desktop-base;
-    padding-left: $grid-gutter-width-md/2;
-    padding-right: $grid-gutter-width-md/2;
+    padding-left: math.div($grid-gutter-width-md, 2);
+    padding-right: math.div($grid-gutter-width-md, 2);
   }
 
   @include bpgte(lg)
   {
     width: $container-large-desktop-base;
-    padding-left: $grid-gutter-width-lg/2;
-    padding-right: $grid-gutter-width-lg/2;
+    padding-left: math.div($grid-gutter-width-lg, 2);
+    padding-right: math.div($grid-gutter-width-lg, 2);
   }
 }
 
 @mixin l-row
 {
   display: flex;
-  margin-left: -$grid-gutter-width-xs/2;
-  margin-right: -$grid-gutter-width-xs/2;
+  margin-left: -math.div($grid-gutter-width-xs, 2);
+  margin-right: -math.div($grid-gutter-width-xs, 2);
 
   @include bpgte(sm)
   {
-    margin-left: -$grid-gutter-width-sm/2;
-    margin-right: -$grid-gutter-width-sm/2;
+    margin-left: -math.div($grid-gutter-width-sm, 2);
+    margin-right: -math.div($grid-gutter-width-sm, 2);
   }
 
   @include bpgte(md)
   {
-    margin-left: -$grid-gutter-width-md/2;
-    margin-right: -$grid-gutter-width-md/2;
+    margin-left: -math.div($grid-gutter-width-md, 2);
+    margin-right: -math.div($grid-gutter-width-md, 2);
   }
 
   @include bpgte(lg)
   {
-    margin-left: -$grid-gutter-width-lg/2;
-    margin-right: -$grid-gutter-width-lg/2;
+    margin-left: -math.div($grid-gutter-width-lg, 2);
+    margin-right: -math.div($grid-gutter-width-lg, 2);
   }
 
   @include bplte(xs)
@@ -190,25 +190,25 @@
 @mixin l-col($num1, $num2)
 {
   width: percentage($num1/$num2);
-  padding-left: $grid-gutter-width-xs/2;
-  padding-right: $grid-gutter-width-xs/2;
+  padding-left: math.div($grid-gutter-width-xs, 2);
+  padding-right: math.div($grid-gutter-width-xs, 2);
 
   @include bp(sm,sm)
   {
-    padding-left: $grid-gutter-width-sm/2;
-    padding-right: $grid-gutter-width-sm/2;
+    padding-left: math.div($grid-gutter-width-sm, 2);
+    padding-right: math.div($grid-gutter-width-sm, 2);
   }
 
   @include bp(md,md)
   {
-    padding-left: $grid-gutter-width-md/2;
-    padding-right: $grid-gutter-width-md/2;
+    padding-left: math.div($grid-gutter-width-md, 2);
+    padding-right: math.div($grid-gutter-width-md, 2);
   }
 
   @include bpgte(lg)
   {
-    padding-left: $grid-gutter-width-lg/2;
-    padding-right: $grid-gutter-width-lg/2;
+    padding-left: math.div($grid-gutter-width-lg, 2);
+    padding-right: math.div($grid-gutter-width-lg, 2);
   }
 }
 

diff --git a/static/scss/answers/common/util/_set-properties.scss b/static/scss/answers/common/util/_set-properties.scss
@@ -14,12 +14,12 @@
     }
   }
 
-  @elseif type-of($subproperties) == 'string'
+  @else if type-of($subproperties) == 'string'
   {
     @include set-property('#{$property}-#{$subproperties}', $value);
   }
 
-  @elseif type-of($subproperties) == 'null'
+  @else if type-of($subproperties) == 'null'
   {
     @include set-property($property, $value);
   }

diff --git a/static/scss/answers/vendor.scss b/static/scss/answers/vendor.scss