Revert "remove simple unused mixins/classes"

This reverts commit a8ce02f.
yext · May 26, 2021 · 37dad56 · 37dad56
1 parent 4afb89f
commit 37dad56
Show file tree

Hide file tree

Showing 2 changed files with 227 additions and 0 deletions.
diff --git a/static/scss/answers/common/util/UtilityLayout.scss b/static/scss/answers/common/util/UtilityLayout.scss
@@ -85,4 +85,39 @@ $splitting-points: (sm, md, lg) !default;
   {
     @include l-Split($bp, $col-gap, '.l-Split');
   }
+
+  .l-centeredColumn
+  {
+    @include l-centeredColumn;
+  }
+}
+
+.l-container
+{
+  @include l-container;
+}
+
+.l-visible-only-xs
+{
+  @include visible-only-xs;
+}
+
+.l-hidden-xs
+{
+  @include hidden-xs;
+}
+
+.l-hidden-sm
+{
+  @include hidden-sm;
+}
+
+.l-hidden-md
+{
+  @include hidden-md;
+}
+
+.l-hidden-lg
+{
+  @include hidden-lg;
 }
diff --git a/static/scss/answers/common/util/UtilityMixins.scss b/static/scss/answers/common/util/UtilityMixins.scss
@@ -122,6 +122,36 @@
   }
 }
 
+@mixin l-container
+{
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $grid-gutter-width-xs/2;
+  padding-right: $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;
+  }
+
+  @include bpgte(md)
+  {
+    width: $container-desktop-base;
+    padding-left: $grid-gutter-width-md/2;
+    padding-right: $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;
+  }
+}
+
 @mixin l-row
 {
   display: flex;
@@ -194,6 +224,13 @@
   }
 }
 
+@mixin l-centeredColumn
+{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 $names: (
   1: one,
   2: two,
@@ -242,6 +279,46 @@ $grids: (
   }
 }
 
+@mixin hidden-xs
+{
+  @include bplte(xs)
+  {
+    display: none;
+  }
+}
+
+@mixin hidden-sm
+{
+  @include bp(sm, sm)
+  {
+    display: none;
+  }
+}
+
+@mixin hidden-md
+{
+  @include bp(md, md)
+  {
+    display: none;
+  }
+}
+
+@mixin hidden-lg
+{
+  @include bpgte(lg)
+  {
+    display: none;
+  }
+}
+
+@mixin visible-only-xs
+{
+  @include bpgte(sm)
+  {
+    display: none;
+  }
+}
+
 @mixin font-sizes($font-size, $line-height: 'normal', $font-size-xs: $font-size, $line-height-xs: $line-height, $bp: sm)
 {
   font-size: $font-size-xs;
@@ -257,6 +334,69 @@ $grids: (
   }
 }
 
+@mixin word-wrap()
+{
+  word-break: break-word;
+  hyphens: auto;
+}
+
+@mixin hideBR
+{
+  br
+  {
+    content: ' ';
+
+    &::after
+    {
+      content: ', ';
+    }
+  }
+}
+
+@mixin break($pseudo:'after')
+{
+  &:#{$pseudo}
+  {
+    content: "\000A";
+    white-space: pre;
+    // fixes weird flebox edgecase where the before grows to whole line
+    display: block;
+    height: 0;
+  }
+}
+
+@mixin break-after
+{
+  @include break();
+}
+
+@mixin break-before
+{
+  @include break('before');
+}
+
+@mixin fa-icon($placement, $icon, $font-size:inherit)
+{
+  &:#{$placement}
+  {
+    content: $icon;
+    font-family: 'FontAwesome';
+    font-size: $font-size;
+
+    @content;
+  }
+}
+
+@mixin fa-icon-before($icon, $font-size:inherit)
+{
+  @include fa-icon(before, $icon, $font-size) { @content; }
+}
+
+@mixin fa-icon-after($icon, $font-size:inherit)
+{
+  @include fa-icon(after, $icon, $font-size) { @content; }
+}
+
 @mixin link($color-default, $color-visited:$color-default, $color-hover:$color-default, $color-active:$color-default)
 {
   color: $color-default;
@@ -282,6 +422,30 @@ $grids: (
   }
 }
 
+@mixin link-states($selector:'&')
+{
+  #{$selector},
+  #{$selector}:hover,
+  #{$selector}:visited,
+  #{$selector}:active,
+  #{$selector}:link
+  {
+    @content;
+  }
+}
+
+@mixin vertical-center
+{
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@mixin disable-collapse
+{
+  height: auto !important;
+  display: block;
+}
+
 @mixin sr-only()
 {
   position: absolute;
@@ -312,3 +476,31 @@ $grids: (
     clip: auto;
   }
 }
+
+@mixin reset-list
+{
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin anti-aliased
+{
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin clearfix()
+{
+  &::before,
+  &::after
+  {
+    content: " ";
+    display: table;
+  }
+
+  &::after
+  {
+    clear: both;
+  }
+}