amotify 0.0.4 → 0.0.5

package/src/@styles/UniStyling.scss

@@ -1,996 +0,0 @@
-@use '@uniVar' as *;
-@use '@styleSet' as *;
-@use './@variables/themeColor' as themeColor;
-@mixin UniStyles($DS ) {
-  &dsp {
-    &block#{ $DS } {
-      display: block;
-    }
-    &none#{ $DS } {
-      display: none;
-    }
-    &flex#{ $DS } {
-      display: flex;
-    }
-    &grid#{ $DS } {
-      display: grid;
-    }
-    &inlineBlock#{ $DS } {
-      display: inline-block;
-    }
-    &inlineFlex#{ $DS } {
-      display: inline-flex;
-    }
-  }
-  &ovfl {
-    $dirArr : x, y;
-    @each $dir in $dirArr {
-      &-#{ $dir }- {
-        &none#{ $DS } {
-          overflow-#{ $dir }: none;
-        }
-        &auto#{ $DS } {
-          overflow-#{ $dir }: auto;
-        }
-        &hidden#{ $DS } {
-          overflow-#{ $dir }: hidden;
-        }
-        &scroll#{ $DS } {
-          overflow-#{ $dir }: scroll;
-        }
-        &visible#{ $DS } {
-          overflow-#{ $dir }: visible;
-        }
-      }
-    }
-    &none#{ $DS } {
-      overflow: none;
-    }
-    &auto#{ $DS } {
-      overflow: auto;
-    }
-    &hidden#{ $DS } {
-      overflow: hidden;
-    }
-    &scroll#{ $DS } {
-      overflow: scroll;
-    }
-    &visible#{ $DS } {
-      overflow: visible;
-    }
-  }
-  &ps {
-    &relative#{ $DS } {
-      position: relative;
-    }
-    &absolute#{ $DS } {
-      position: absolute;
-    }
-    &fixed#{ $DS } {
-      position: fixed;
-    }
-    &sticky#{ $DS } {
-      position: sticky;
-    }
-    &static#{ $DS } {
-      position: static;
-    }
-  }
-  &txalg {
-    &center#{ $DS } {
-      text-align: center;
-    }
-    &left#{ $DS } {
-      text-align: left;
-    }
-    &right#{ $DS } {
-      text-align: right;
-    }
-  }
-  &ft {
-    &cl {
-      &1#{ $DS } {
-        color: $font-color1;
-      }
-      &2#{ $DS } {
-        color: $font-color2;
-      }
-      &3#{ $DS } {
-        color: $font-color3;
-      }
-      &4#{ $DS } {
-        color: $font-color4;
-      }
-      &5#{ $DS } {
-        color: $font-color5;
-      }
-      &6#{ $DS } {
-        color: $font-color6;
-      }
-      &inherit#{ $DS } {
-        color: inherit;
-      }
-      &theme#{ $DS } {
-        color: $color-theme;
-      }
-      &posi#{ $DS } {
-        color: $color-positive;
-      }
-      &nega#{ $DS } {
-        color: $color-negative;
-      }
-      &warn#{ $DS } {
-        color: $color-warning;
-      }
-      &logo#{ $DS } {
-        color: $font-color-logoTitle;
-      }
-      &white#{ $DS } {
-        color: #fff;
-      }
-      &black#{ $DS } {
-        color: #0a0a0a;
-      }
-      &mono#{ $DS } {
-        color: $color-monoPrime;
-      }
-      &monoPrime#{ $DS } {
-        color: $color-monoPrime;
-      }
-      &monoSecond#{ $DS } {
-        color: $color-monoSecond;
-      }
-      @each $key in themeColor.$ThemeColorKeys {
-        &#{ $key }#{ $DS } {
-          color:hsl(var(--color_#{ $key }-hsl));
-        }
-      }
-    }
-    &sz {
-      @for $i from 0 to 10 {
-        &#{$i}#{ $DS } {
-          font-size: var(--font-size#{$i});
-        }
-      }
-      &inherit#{ $DS } {
-        font-size: inherit;
-      }
-    }
-    &wt {
-      &1#{ $DS } {
-        font-weight: lighter;
-      }
-      &2#{ $DS } {
-        font-weight: normal;
-      }
-      &3#{ $DS } {
-        font-weight: bold;
-      }
-    }
-  }
-  &bgc {
-    &1#{ $DS } {
-      background-color: $color-layer1;
-    }
-    &2#{ $DS } {
-      background-color: $color-layer2;
-    }
-    &3#{ $DS } {
-      background-color: $color-layer3;
-    }
-    &4#{ $DS } {
-      background-color: $color-layer4;
-    }
-    &5#{ $DS } {
-      background-color: $color-layer5;
-    }
-    &6#{ $DS } {
-      background-color: $color-layer6;
-    }
-    &cloud#{ $DS } {
-      background-color: $color-cloud;
-    }
-    &lcOpFew#{ $DS } {
-      background-color: $color-layer-opacity-few;
-    }
-    &lcOpLow#{ $DS } {
-      background-color: $color-layer-opacity-low;
-    }
-    &lcOpMiddle#{ $DS } {
-      background-color: $color-layer-opacity-middle;
-    }
-    &lcOpHigh#{ $DS } {
-      background-color: $color-layer-opacity-high;
-    }
-    &theme#{ $DS } {
-      background-color: $color-theme;
-    }
-    &tcOpFew#{ $DS } {
-      background-color: $color-theme-opacity-few;
-    }
-    &tcOpLow#{ $DS } {
-      background-color: $color-theme-opacity-low;
-    }
-    &tcOpMiddle#{ $DS } {
-      background-color: $color-theme-opacity-middle;
-    }
-    &tcOpHigh#{ $DS } {
-      background-color: $color-theme-opacity-high;
-    }
-    &tcLighten#{ $DS } {
-      background-color: $color-theme-lighten;
-    }
-    &tcLighter#{ $DS } {
-      background-color: $color-theme-lighter;
-    }
-    &tcLightest#{ $DS } {
-      background-color: $color-theme-lightest;
-    }
-    &tcDarken#{ $DS } {
-      background-color: $color-theme-darken;
-    }
-    &tcDarker#{ $DS } {
-      background-color: $color-theme-darker;
-    }
-    &tcDarkest#{ $DS } {
-      background-color: $color-theme-darkest;
-    }
-    &posi#{ $DS } {
-      background-color: $color-positive;
-    }
-    &posiOpLow#{ $DS } {
-      background-color: rgba(var(--color-positive-rgb), .05);
-    }
-    &posiOpMiddle#{ $DS } {
-      background-color: rgba(var(--color-positive-rgb), .1);
-    }
-    &nega#{ $DS } {
-      background-color: $color-negative;
-    }
-    &negaOpLow#{ $DS } {
-      background-color: rgba(var(--color-negative-rgb), .05);
-    }
-    &negaOpMiddle#{ $DS } {
-      background-color: rgba(var(--color-negative-rgb), .1);
-    }
-    &warn#{ $DS } {
-      background-color: $color-warning;
-    }
-    &dark#{ $DS } {
-      background-color: $color-dark;
-    }
-    &white#{ $DS } {
-      background-color: #fff;
-    }
-    &black#{ $DS } {
-      background-color: #0a0a0a;
-    }
-    &none#{ $DS } {
-      background-color: none;
-    }
-    &mono#{ $DS } {
-      background-color: $color-monoPrime;
-    }
-    &monoPrime#{ $DS } {
-      background-color: $color-monoPrime;
-    }
-    &monoSecond#{ $DS } {
-      background-color: $color-monoSecond;
-    }
-    &inherit#{ $DS } {
-      background-color: inherit;
-    }
-    &trans#{ $DS } {
-      background-color: transparent;
-    }
-    @each $key in themeColor.$ThemeColorKeys {
-      &#{ $key }#{ $DS } {
-        background-color:hsl(var(--color_#{ $key }-hsl));
-      }
-    }
-  }
-  &bs {
-    &none#{ $DS } {
-      box-shadow: none;
-    }
-    &borderBox#{ $DS } {
-      box-shadow:
-        0 4px 6px -1px rgba(0, 0, 0, .1),
-        0 2px 4px -2px rgba(0, 0, 0, .1);
-    }
-    &0#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow0;
-    }
-    &1#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow1;
-    }
-    &2#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow2;
-    }
-    &3#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow3;
-    }
-    &4#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow4;
-    }
-    &-1#{ $DS } {
-      box-shadow: 0 0 2px 0px rgba($shadow-color, .25) inset, 0 0 0 transparent;
-    }
-    &-2#{ $DS } {
-      box-shadow: 0 0 3px 0px rgba($shadow-color, .25) inset, 0 0 0 transparent;
-    }
-    &-3#{ $DS } {
-      box-shadow: 0 0 4px 0px rgba($shadow-color, .25) inset, 0 0 0 transparent;
-    }
-  }
-  & {
-    $typeArr : margin, padding;
-    @each $type in $typeArr {
-      $_type : _;
-      @if $type ==margin {
-        $_type : mrg;
-      }
-      @else if $type ==padding {
-        $_type : pd;
-      }
-      &#{ $_type } {
-        $dirArr : top, right, bottom, left;
-        @each $dir in $dirArr {
-          $_dir : _;
-          @if $dir ==top {
-            $_dir : t;
-          }
-          @else if $dir ==right {
-            $_dir : r;
-          }
-          @else if $dir ==bottom {
-            $_dir : b;
-          }
-          @else if $dir ==left {
-            $_dir : l;
-          }
-          &#{ $_dir } {
-            &0#{ $DS } {
-              #{ $type }-#{ $dir }: 0;
-            }
-            &1_12#{ $DS } {
-              #{ $type }-#{ $dir }: $unit1_12;
-            }
-            &1_6#{ $DS } {
-              #{ $type }-#{ $dir }: $unit1_6;
-            }
-            &1_4#{ $DS } {
-              #{ $type }-#{ $dir }: $unit1_4;
-            }
-            &1_3#{ $DS } {
-              #{ $type }-#{ $dir }: $unit1_3;
-            }
-            &1_2#{ $DS } {
-              #{ $type }-#{ $dir }: $unit1_2;
-            }
-            &2_3#{ $DS } {
-              #{ $type }-#{ $dir }: $unit2_3;
-            }
-            &3_4#{ $DS } {
-              #{ $type }-#{ $dir }: $unit3_4;
-            }
-            &1#{ $DS } {
-              #{ $type }-#{ $dir }: $unit1;
-            }
-            &1-5#{ $DS } {
-              #{ $type }-#{ $dir }: $unit1-5;
-            }
-            &2#{ $DS } {
-              #{ $type }-#{ $dir }: $unit2;
-            }
-            &2-5#{ $DS } {
-              #{ $type }-#{ $dir }: $unit2-5;
-            }
-            &3#{ $DS } {
-              #{ $type }-#{ $dir }: $unit3;
-            }
-            &4#{ $DS } {
-              #{ $type }-#{ $dir }: $unit4;
-            }
-            &auto#{ $DS } {
-              #{ $type }-#{ $dir }: auto;
-            }
-            &safeAreaTop#{ $DS } {
-              #{ $type }-#{ $dir }: $safe-area-top;
-            }
-            &safeAreaBottom#{ $DS } {
-              #{ $type }-#{ $dir }: $safe-area-bottom;
-            }
-          }
-        }
-      }
-    }
-  }
-  &pst {
-    $dirArr : top, right, bottom, left;
-    @each $dir in $dirArr {
-      $_dir : _;
-      @if $dir ==top {
-        $_dir : t;
-      }
-      @else if $dir ==right {
-        $_dir : r;
-      }
-      @else if $dir ==bottom {
-        $_dir : b;
-      }
-      @else if $dir ==left {
-        $_dir : l;
-      }
-      &#{ $_dir } {
-        &0#{ $DS } {
-          #{ $dir }: 0;
-        }
-        &1_12#{ $DS } {
-          #{ $dir }: $unit1_12;
-        }
-        &1_6#{ $DS } {
-          #{ $dir }: $unit1_6;
-        }
-        &1_4#{ $DS } {
-          #{ $dir }: $unit1_4;
-        }
-        &1_3#{ $DS } {
-          #{ $dir }: $unit1_3;
-        }
-        &1_2#{ $DS } {
-          #{ $dir }: $unit1_2;
-        }
-        &2_3#{ $DS } {
-          #{ $dir }: $unit2_3;
-        }
-        &3_4#{ $DS } {
-          #{ $dir }: $unit3_4;
-        }
-        &1#{ $DS } {
-          #{ $dir }: $unit1;
-        }
-        &2#{ $DS } {
-          #{ $dir }: $unit2;
-        }
-        &3#{ $DS } {
-          #{ $dir }: $unit3;
-        }
-        &4#{ $DS } {
-          #{ $dir }: $unit4;
-        }
-        &50P#{ $DS } {
-          #{ $dir }: 50%;
-        }
-        &100P#{ $DS } {
-          #{ $dir }: 100%;
-        }
-        &topNavigationHeight#{ $DS } {
-          #{ $dir }: $topNavigationHeight;
-        }
-        &topBase#{ $DS } {
-          #{ $dir }: var(--topBase);
-        }
-      }
-    }
-  }
-  &b {
-    &_ {
-      $dirArr : top, right, bottom, left;
-      @each $dir in $dirArr {
-        $_dir : _;
-        @if $dir ==top {
-          $_dir : t;
-        }
-        @else if $dir ==right {
-          $_dir : r;
-        }
-        @else if $dir ==bottom {
-          $_dir : b;
-        }
-        @else if $dir ==left {
-          $_dir : l;
-        }
-        &#{ $_dir }_ {
-          &ss {
-            &0#{ $DS } {
-              border-#{ $dir }: 1px solid transparent;
-            }
-            &1#{ $DS } {
-              border-#{ $dir }: 1px solid var(--border-color-thin);
-            }
-            &2#{ $DS } {
-              border-#{ $dir }: 1px solid var(--border-color-normal);
-            }
-            &unset#{ $DS } {
-              border-#{ $dir }-style: unset !important;
-              border-#{ $dir }-width: unset !important;
-              border-#{ $dir }-color: unset !important;
-            }
-          }
-        }
-      }
-      &wth {
-        @for $i from 0 to 5 {
-          &#{ $i }#{ $DS } {
-            border-width: calc(#{$i} * 1px);
-          }
-        }
-      }
-      &cl {
-        &0#{ $DS } {
-          border-color: transparent;
-        }
-        &1#{ $DS } {
-          border-color: var(--border-color-thin);
-        }
-        &2#{ $DS } {
-          border-color: var(--border-color-normal);
-        }
-        &theme#{ $DS } {
-          border-color: $color-theme;
-        }
-        &posi#{ $DS } {
-          border-color: $color-positive;
-        }
-        &nega#{ $DS } {
-          border-color: $color-negative;
-        }
-        &warn#{ $DS } {
-          border-color: $color-warning;
-        }
-        &white#{ $DS } {
-          border-color: white;
-        }
-      }
-      &st {
-        &solid#{ $DS } {
-          border-style: solid;
-        }
-        &dashed#{ $DS } {
-          border-style: dashed;
-        }
-        &double#{ $DS } {
-          border-style: double;
-        }
-        &dotted#{ $DS } {
-          border-style: dotted;
-        }
-      }
-    }
-    &r_ {
-      $dirArr : top-left, top-right, bottom-left, bottom-right;
-      @each $dir in $dirArr {
-        $_dir : _;
-        @if $dir ==top-left {
-          $_dir : tl;
-        }
-        @else if $dir ==top-right {
-          $_dir : tr;
-        }
-        @else if $dir ==bottom-left {
-          $_dir : bl;
-        }
-        @else if $dir ==bottom-right {
-          $_dir : br;
-        }
-        &#{ $_dir } {
-          &0#{ $DS } {
-            border-#{ $dir }-radius: 0;
-          }
-          &1_3#{ $DS } {
-            border-#{ $dir }-radius: $border-radius1_3;
-          }
-          &2_3#{ $DS } {
-            border-#{ $dir }-radius: $border-radius2_3;
-          }
-          @for $i from 1 to 7 {
-            &#{$i}#{ $DS } {
-              border-#{ $dir }-radius: var(--border-radius#{ $i });
-            }
-          }
-          &sphere#{ $DS } {
-            border-#{ $dir }-radius: 1000rem;
-          }
-          &inherit#{ $DS } {
-            border-#{ $dir }-radius: inherit;
-          }
-        }
-      }
-    }
-  }
-  &gap {
-    $dirArr : row, column;
-    @each $dir in $dirArr {
-      $_dir : _;
-      @if $dir ==row {
-        $_dir : Row;
-      }
-      @else if $dir ==column {
-        $_dir : Col;
-      }
-      &#{ $_dir } {
-        &0#{ $DS } {
-          #{ $dir }-gap: 0;
-        }
-        &1_12#{ $DS } {
-          #{ $dir }-gap: $unit1_12;
-        }
-        &1_6#{ $DS } {
-          #{ $dir }-gap: $unit1_6;
-        }
-        &1_4#{ $DS } {
-          #{ $dir }-gap: $unit1_4;
-        }
-        &1_3#{ $DS } {
-          #{ $dir }-gap: $unit1_3;
-        }
-        &1_2#{ $DS } {
-          #{ $dir }-gap: $unit1_2;
-        }
-        &2_3#{ $DS } {
-          #{ $dir }-gap: $unit2_3;
-        }
-        &3_4#{ $DS } {
-          #{ $dir }-gap: $unit3_4;
-        }
-        &1#{ $DS } {
-          #{ $dir }-gap: $unit1;
-        }
-        &1-5#{ $DS } {
-          #{ $dir }-gap: $unit1-5;
-        }
-        &2#{ $DS } {
-          #{ $dir }-gap: $unit2;
-        }
-        &2-5#{ $DS } {
-          #{ $dir }-gap: $unit2-5;
-        }
-        &3#{ $DS } {
-          #{ $dir }-gap: $unit3;
-        }
-        &4#{ $DS } {
-          #{ $dir }-gap: $unit4;
-        }
-      }
-    }
-  }
-  &fl {
-    &wrp {
-      &true#{ $DS } {
-        flex-wrap: wrap;
-      }
-      &false#{ $DS } {
-        flex-wrap: nowrap;
-      }
-    }
-    &typ {
-      &row#{ $DS } {
-        flex-direction: row;
-      }
-      &row-r#{ $DS } {
-        flex-direction: row-reverse;
-      }
-      &col#{ $DS } {
-        flex-flow: column;
-      }
-      &col-r#{ $DS } {
-        flex-flow: column-reverse;
-      }
-    }
-    &vrt {
-      &center#{ $DS } {
-        align-items: center;
-      }
-      &top#{ $DS } {
-        align-items: flex-start;
-      }
-      &bottom#{ $DS } {
-        align-items: flex-end;
-      }
-      &unset#{ $DS } {
-        align-items: unset;
-      }
-      &baseline#{ $DS } {
-        align-items: baseline;
-      }
-    }
-    &hrz {
-      &center#{ $DS } {
-        justify-content: center;
-      }
-      &left#{ $DS } {
-        justify-content: flex-start;
-      }
-      &right#{ $DS } {
-        justify-content: flex-end;
-      }
-      &between#{ $DS } {
-        justify-content: space-between;
-      }
-      &around#{ $DS } {
-        justify-content: space-around;
-      }
-      &even#{ $DS } {
-        justify-content: space-evenly;
-      }
-      &unset#{ $DS } {
-        justify-content: unset;
-      }
-    }
-    &chld {
-      &auto#{ $DS } > * {
-        flex-grow: 1;
-        flex-shrink: 1;
-        flex-basis: auto;
-      }
-      &even#{ $DS } > * {
-        flex-grow: 1;
-        flex-shrink: 1;
-        flex-basis: 0;
-      }
-      &none#{ $DS } > * {
-        flex: none;
-      }
-      &unset#{ $DS } > * {
-        flex: unset;
-      }
-    }
-    &sz {
-      &none#{ $DS } {
-        flex: none;
-      }
-      &auto#{ $DS } {
-        flex: 1 1 auto;
-      }
-      &0#{ $DS } {
-        flex: 1 1 0;
-      }
-    }
-    &grid {
-      @for $i from 1 to 13 {
-        &#{ $i }#{ $DS } {
-          flex: #{ $i };
-        }
-      }
-      &unset#{$DS} {
-        flex: unset;
-      }
-    }
-    &br#{ $DS } {
-      width: 100%;
-      flex: none;
-    }
-  }
-  &gr {
-    &#{ $DS } {
-      display: grid;
-    }
-    &cnttrue#{ $DS } > * {
-      margin: auto;
-    }
-    &col {
-      @for $i from 1 to 13 {
-        &#{ $i }#{ $DS } {
-          grid-template-columns : repeat(#{ $i }, 1fr);
-        }
-      }
-    }
-    &bx#{ $DS } {
-      max-width: 100%;
-    }
-  }
-  & {
-    $dirArr : height, width;
-    @each $dir in $dirArr {
-      $_dir : _;
-      @if $dir ==height {
-        $_dir : hgt;
-      }
-      @else if $dir ==width {
-        $_dir : wdt;
-      }
-      &#{ $_dir } {
-        &0#{ $DS } {
-          #{ $dir }: 0%;
-        }
-        &1#{ $DS } {
-          #{ $dir }: 100%;
-        }
-        &auto#{ $DS } {
-          #{ $dir }: auto;
-        }
-      }
-      &unt#{ $_dir } {
-        &0#{ $DS } {
-          #{ $dir }: 0;
-        }
-        &1_12#{ $DS } {
-          #{ $dir }: $unit1_12;
-        }
-        &1_6#{ $DS } {
-          #{ $dir }: $unit1_6;
-        }
-        &1_4#{ $DS } {
-          #{ $dir }: $unit1_4;
-        }
-        &1_3#{ $DS } {
-          #{ $dir }: $unit1_3;
-        }
-        &1_2#{ $DS } {
-          #{ $dir }: $unit1_2;
-        }
-        &2_3#{ $DS } {
-          #{ $dir }: $unit2_3;
-        }
-        &3_4#{ $DS } {
-          #{ $dir }: $unit3_4;
-        }
-        &1#{ $DS } {
-          #{ $dir }: $unit1;
-        }
-        &1-5#{ $DS } {
-          #{ $dir }: $unit1-5;
-        }
-        &2#{ $DS } {
-          #{ $dir }: $unit2;
-        }
-        &2-5#{ $DS } {
-          #{ $dir }: $unit2-5;
-        }
-        &3#{ $DS } {
-          #{ $dir }: $unit3;
-        }
-        &3-5#{ $DS } {
-          #{ $dir }: $unit3-5;
-        }
-        &4#{ $DS } {
-          #{ $dir }: $unit4;
-        }
-        &6#{ $DS } {
-          #{ $dir }: $unit6;
-        }
-        &8#{ $DS } {
-          #{ $dir }: $unit8;
-        }
-        &12#{ $DS } {
-          #{ $dir }: $unit12;
-        }
-      }
-    }
-  }
-  &hgt {
-    &viewHeight#{ $DS } {
-      height: $viewHeight;
-    }
-    &topNavigationHeight#{ $DS } {
-      height: $topNavigationHeight;
-    }
-    &sideNavigationHeight#{ $DS } {
-      height: $sideNavigationHeight;
-    }
-    &contentHeight#{ $DS } {
-      height: $contentHeight;
-    }
-  }
-  &wdt {
-    &viewWidth#{ $DS } {
-      width: 100vw;
-    }
-  }
-  & {
-    $typeArr : min, max;
-    @each $type in $typeArr {
-      &#{ $type } {
-        $dirArr : height, width;
-        @each $dir in $dirArr {
-          $_dir : _;
-          @if $dir ==height {
-            $_dir : h;
-          }
-          @else if $dir ==width {
-            $_dir : w;
-          }
-          &#{ $_dir } {
-            &0#{ $DS } {
-              #{ $type }-#{ $dir }: 0;
-            }
-            &1#{ $DS } {
-              #{ $type }-#{ $dir }: 100%;
-            }
-            &unset#{ $DS } {
-              #{ $type }-#{ $dir }: unset !important;
-            }
-            &viewHeight#{ $DS } {
-              #{ $type }-#{ $dir }: $viewHeight;
-            }
-            &topNavigationHeight#{ $DS } {
-              #{ $type }-#{ $dir }: $topNavigationHeight;
-            }
-            &sideNavigationHeight#{ $DS } {
-              #{ $type }-#{ $dir }: $sideNavigationHeight;
-            }
-            &contentHeight#{ $DS } {
-              #{ $type }-#{ $dir }: $contentHeight;
-            }
-          }
-        }
-      }
-    }
-  }
-  &trnst {
-    &none#{ $DS } {
-      transition: 0s;
-    }
-    &short#{ $DS } {
-      transition: $animation-time-short;
-    }
-    &middle#{ $DS } {
-      transition: $animation-time-middle;
-    }
-    &long#{ $DS } {
-      transition: $animation-time-long;
-    }
-  }
-  &op {
-    &trans#{ $DS } {
-      opacity: 0;
-    }
-    &low#{ $DS } {
-      opacity: .3;
-    }
-    &middle#{ $DS } {
-      opacity: .6;
-    }
-    &high#{ $DS } {
-      opacity: .75;
-    }
-    &most#{ $DS } {
-      opacity: 1;
-    }
-  }
-}
-.¥ {
-  @include UniStyles('');
-  &_h {
-    @include UniStyles(':hover');
-  }
-  &_f {
-    @include UniStyles(':focus');
-  }
-  &_a {
-    @include UniStyles(':active');
-  }
-  &bk {
-    @media (max-width : $breakPoint ) {
-      @include UniStyles('');
-    }
-  }
-}
-.ss {
-  &LastChildLossBorder_ {
-    &bottom {
-      > * {
-        &:last-child {
-          border-bottom: unset !important;
-        }
-      }
-    }
-    &right {
-      > * {
-        &:last-child {
-          border-right: unset !important;
-        }
-      }
-    }
-  }
-  &Pushable {
-    cursor: pointer;
-    &:hover, &:focus {
-      background-color: $color-layer2;
-    }
-    &:active {
-      background-color: $color-layer3;
-    }
-  }
-}