amotify 0.0.2 → 0.0.4

package/src/@styles/UniStyling.scss

@@ -0,0 +1,996 @@
+@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;
+    }
+  }
+}