@bitstack/ng-boundary 14.0.1-alpha.5 → 14.0.1-alpha.7

package/src/styles/_responsive.scss

@@ -1,698 +0,0 @@
-// check support device-vh
-@use "sass:math";
-@use "variables";
-
-
-
-@mixin supports-dv {
-    @supports (width: 100dvh) {
-        @content;
-    }
-}
-@mixin not-supports-dv {
-    @supports not (width: 100dvh) {
-        @content;
-    }
-}
-
-
-
-/**
- * 主要尺寸轉換方法
- * 將設計稿的 px 轉為AWD的 vw
- */
-@function responsive-size-by-vw($w, $unit: 'v', $isLandscape: false, $isMax: false) {
-    @if ($isLandscape) {
-        @if ($isMax) {
-            @return max(vw($w, $unit), vh($w, $unit) * variables.$design-height / variables.$design-width);
-        } @else {
-            @return min(vw($w, $unit), vh($w, $unit) * variables.$design-height / variables.$design-width);
-        }
-    } @else {
-        @if ($isMax) {
-            @return max(vw($w, $unit), vh($w, $unit) * variables.$design-width / variables.$design-height);
-        } @else {
-            @return min(vw($w, $unit), vh($w, $unit) * variables.$design-width / variables.$design-height);
-        }
-    }
-}
-@function responsive-size-by-vh($h, $unit: 'v', $isLandscape: false, $isMax: false) {
-    @if ($isLandscape) {
-        @if ($isMax) {
-            @return max(vw($h, $unit) * variables.$design-width / variables.$design-height, vh($h, $unit));
-        } @else {
-            @return min(vw($h, $unit) * variables.$design-width / variables.$design-height, vh($h, $unit));
-        }
-    } @else {
-        @if ($isMax) {
-            @return max(vw($h, $unit) * variables.$design-height / variables.$design-width, vh($h, $unit));
-        } @else {
-            @return min(vw($h, $unit) * variables.$design-height / variables.$design-width, vh($h, $unit));
-        }
-    }
-}
-@function responsive-size-by-px($px, $unit: 'v', $isLandscape: false, $isMax: false) {
-    $w: math.div($px, 5.4);
-    @return responsive-size-by-vw($w, $unit, $isLandscape, $isMax);
-}
-
-// responsive width/height by vw
-@mixin width-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        width: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        width: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin height-by-vw($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        height: responsive-size-by-vw($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        height: responsive-size-by-vw($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin size-by-vw($w, $h: $w, $isLandscape: false, $isMax: false) {
-    @include width-by-vw($w, $isLandscape, $isMax);
-    @include height-by-vw($h, $isLandscape, $isMax);
-}
-// responsive width/height by vh
-@mixin width-by-vh($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        width: responsive-size-by-vh($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        width: responsive-size-by-vh($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin height-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        height: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        height: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin size-by-vh($w, $h: $w, $isLandscape: false, $isMax: false) {
-    @include width-by-vh($w, $isLandscape, $isMax);
-    @include height-by-vh($h, $isLandscape, $isMax);
-}
-// responsive width/height by px
-@mixin width-by-px($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        width: responsive-size-by-px($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        width: responsive-size-by-px($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin height-by-px($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        height: responsive-size-by-px($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        height: responsive-size-by-px($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin size-by-px($w, $h: $w, $isLandscape: false, $isMax: false) {
-    @include width-by-px($w, $isLandscape, $isMax);
-    @include height-by-px($h, $isLandscape, $isMax);
-}
-
-@mixin responsive-min-height-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        min-height: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        min-height: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-
-@mixin responsive-max-height-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        max-height: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        max-height: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-
-// responsive font-size
-@mixin responsive-font-size($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        font-size: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        font-size: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-font-size-by-vh($w, $isLandscape: false) {
-    @include supports-dv {
-        font-size: responsive-size-by-vh($w, 'dv', $isLandscape);
-    }
-    @include not-supports-dv {
-        font-size: responsive-size-by-vh($w, 'v', $isLandscape);
-    }
-}
-@mixin responsive-font-size-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        font-size: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        font-size: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-
-// responsive line-height
-@mixin responsive-line-height($w) {
-    @include supports-dv {
-        line-height: responsive-size-by-vw($w, 'dv');
-    }
-    @include not-supports-dv {
-        line-height: responsive-size-by-vw($w, 'v');
-    }
-}
-@mixin responsive-line-height-by-vh($h) {
-    @include supports-dv {
-        line-height: responsive-size-by-vh($h, 'dv');
-    }
-    @include not-supports-dv {
-        line-height: responsive-size-by-vh($h, 'v');
-    }
-}
-@mixin responsive-line-height-by-px($px) {
-    @include supports-dv {
-        line-height: responsive-size-by-px($px, 'dv');
-    }
-    @include not-supports-dv {
-        line-height: responsive-size-by-px($px, 'v');
-    }
-}
-
-// responsive letter-spacing
-@mixin responsive-letter-spacing($w) {
-    @include supports-dv() {
-        letter-spacing: responsive-size-by-vw($w, 'dv');
-    }
-    @include not-supports-dv() {
-        letter-spacing: responsive-size-by-vw($w, 'v');
-    }
-}
-@mixin responsive-letter-spacing-by-vh($h) {
-    @include supports-dv() {
-        letter-spacing: responsive-size-by-vh($h, 'dv');
-    }
-    @include not-supports-dv() {
-        letter-spacing: responsive-size-by-vh($h, 'v');
-    }
-}
-@mixin responsive-letter-spacing-by-px($px) {
-    @include supports-dv() {
-        letter-spacing: responsive-size-by-px($px, 'dv');
-    }
-    @include not-supports-dv() {
-        letter-spacing: responsive-size-by-px($px, 'v');
-    }
-}
-
-// responsive stroke width
-@mixin responsive-stroke-width-by-vw($w) {
-    @include supports-dv {
-        stroke-width: responsive-size-by-vw($w, 'dv');
-    }
-    @include not-supports-dv {
-        stroke-width: responsive-size-by-vw($w, 'v');
-    }
-}
-@mixin responsive-stroke-width-by-vh($h) {
-    @include supports-dv {
-        stroke-width: responsive-size-by-vh($h, 'dv');
-    }
-    @include not-supports-dv {
-        stroke-width: responsive-size-by-vh($h, 'v');
-    }
-}
-@mixin responsive-stroke-width-by-px($px) {
-    @include supports-dv {
-        stroke-width: responsive-size-by-px($px, 'dv');
-    }
-    @include not-supports-dv {
-        stroke-width: responsive-size-by-px($px, 'v');
-    }
-}
-
-// responsive text stroke
-@mixin responsive-text-stroke-by-vw($w, $color) {
-    @include supports-dv {
-        -webkit-text-stroke: responsive-size-by-vw($w, 'dv') $color;
-    }
-    @include not-supports-dv {
-        -webkit-text-stroke: responsive-size-by-vw($w, 'v') $color;
-    }
-}
-@mixin responsive-text-stroke-by-vh($w, $color) {
-    @include supports-dv {
-        -webkit-text-stroke: responsive-size-by-vh($w, 'dv') $color;
-    }
-    @include not-supports-dv {
-        -webkit-text-stroke: responsive-size-by-vh($w, 'v') $color;
-    }
-}
-@mixin responsive-text-stroke-by-px($px, $color) {
-    @include supports-dv {
-        -webkit-text-stroke: responsive-size-by-px($px, 'dv') $color;
-    }
-    @include not-supports-dv {
-        -webkit-text-stroke: responsive-size-by-px($px, 'v') $color;
-    }
-}
-
-// responsive border-radius
-@mixin responsive-border-radius-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        border-radius: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        border-radius: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-border-radius-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        border-radius: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        border-radius: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-border-radius-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        border-radius: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        border-radius: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-
-// responsive margin
-@mixin responsive-margin-top-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-top: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-top: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-bottom-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-bottom: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-bottom: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-left-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-left: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-left: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-right-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-right: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-right: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include responsive-margin-top-by-vw($w, $isLandscape, $isMax);
-    @include responsive-margin-bottom-by-vw($w, $isLandscape, $isMax);
-    @include responsive-margin-left-by-vw($w, $isLandscape, $isMax);
-    @include responsive-margin-right-by-vw($w, $isLandscape, $isMax);
-}
-
-@mixin responsive-margin-top-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-top: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-top: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-bottom-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-bottom: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-bottom: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-left-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-left: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-left: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-right-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-right: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-right: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include responsive-margin-top-by-vh($h, $isLandscape, $isMax);
-    @include responsive-margin-bottom-by-vh($h, $isLandscape, $isMax);
-    @include responsive-margin-left-by-vh($h, $isLandscape, $isMax);
-    @include responsive-margin-right-by-vh($h, $isLandscape, $isMax);
-}
-
-@mixin responsive-margin-top-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-top: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-top: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-bottom-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-bottom: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-bottom: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-left-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-left: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        margin-left: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-right-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        margin-right: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        right: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-margin-by-px($px, $isLandscape: false, $isMax: false) {
-    @include responsive-margin-top-by-px($px, $isLandscape, $isMax);
-    @include responsive-margin-bottom-by-px($px, $isLandscape, $isMax);
-    @include responsive-margin-left-by-px($px, $isLandscape, $isMax);
-    @include responsive-margin-right-by-px($px, $isLandscape, $isMax);
-}
-
-// responsive padding
-@mixin responsive-padding-top-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-top: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-top: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-bottom-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-bottom: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-bottom: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-left-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-left: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-left: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-right-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-right: responsive-size-by-vw($w, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-right: responsive-size-by-vw($w, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-by-vw($w, $isLandscape: false, $isMax: false) {
-    @include responsive-padding-top-by-vw($w, $isLandscape, $isMax);
-    @include responsive-padding-bottom-by-vw($w, $isLandscape, $isMax);
-    @include responsive-padding-left-by-vw($w, $isLandscape, $isMax);
-    @include responsive-padding-right-by-vw($w, $isLandscape, $isMax);
-}
-
-@mixin responsive-padding-top-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-top: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-top: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-bottom-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-bottom: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-bottom: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-left-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-left: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-left: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-right-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-right: responsive-size-by-vh($h, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-right: responsive-size-by-vh($h, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-by-vh($h, $isLandscape: false, $isMax: false) {
-    @include responsive-padding-top-by-vh($h, $isLandscape, $isMax);
-    @include responsive-padding-bottom-by-vh($h, $isLandscape, $isMax);
-    @include responsive-padding-left-by-vh($h, $isLandscape, $isMax);
-    @include responsive-padding-right-by-vh($h, $isLandscape, $isMax);
-}
-
-@mixin responsive-padding-top-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-top: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-top: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-bottom-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-bottom: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-bottom: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-left-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-left: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-left: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-right-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-right: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-right: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}
-@mixin responsive-padding-by-px($px, $isLandscape: false, $isMax: false) {
-    @include responsive-padding-top-by-px($px, $isLandscape, $isMax);
-    @include responsive-padding-bottom-by-px($px, $isLandscape, $isMax);
-    @include responsive-padding-left-by-px($px, $isLandscape, $isMax);
-    @include responsive-padding-right-by-px($px, $isLandscape, $isMax);
-}
-
-// responsive position
-@mixin responsive-position-by-vw($vw: (top: "", right: "", bottom: "", left: ""), $isLandscape: false, $isMax: false) {
-    $top: if(map-has-key($vw, top), map-get($vw, top), "");
-    $right: if(map-has-key($vw, right), map-get($vw, right), "");
-    $bottom: if(map-has-key($vw, bottom), map-get($vw, bottom), "");
-    $left: if(map-has-key($vw, left), map-get($vw, left), "");
-
-    @include supports-dv {
-        @if ($top != "") {
-            top: responsive-size-by-vw($top, 'dv', $isLandscape, $isMax);
-        }
-        @if ($right != "") {
-            right: responsive-size-by-vw($right, 'dv', $isLandscape, $isMax);
-        }
-        @if ($bottom != "") {
-            bottom: responsive-size-by-vw($bottom, 'dv', $isLandscape, $isMax);
-        }
-        @if ($left != "") {
-            left: responsive-size-by-vw($left, 'dv', $isLandscape, $isMax);
-        }
-    }
-    @include not-supports-dv {
-        @if ($top != "") {
-            top: responsive-size-by-vw($top, 'v', $isLandscape, $isMax);
-        }
-        @if ($right != "") {
-            right: responsive-size-by-vw($right, 'v', $isLandscape, $isMax);
-        }
-        @if ($bottom != "") {
-            bottom: responsive-size-by-vw($bottom, 'v', $isLandscape, $isMax);
-        }
-        @if ($left != "") {
-            left: responsive-size-by-vw($left, 'v', $isLandscape, $isMax);
-        }
-    }
-}
-@mixin responsive-position-by-vh($vh: (top: "", right: "", bottom: "", left: ""), $isLandscape: false, $isMax: false) {
-    $top: if(map-has-key($vh, top), map-get($vh, top), "");
-    $right: if(map-has-key($vh, right), map-get($vh, right), "");
-    $bottom: if(map-has-key($vh, bottom), map-get($vh, bottom), "");
-    $left: if(map-has-key($vh, left), map-get($vh, left), "");
-    @include supports-dv {
-        @if ($top != "") {
-            top: responsive-size-by-vh($top, 'dv', $isLandscape, $isMax);
-        }
-        @if ($right != "") {
-            right: responsive-size-by-vh($right, 'dv', $isLandscape, $isMax);
-        }
-        @if ($bottom != "") {
-            bottom: responsive-size-by-vh($bottom, 'dv', $isLandscape, $isMax);
-        }
-        @if ($left != "") {
-            left: responsive-size-by-vh($left, 'dv', $isLandscape, $isMax);
-        }
-    }
-    @include not-supports-dv {
-        @if ($top != "") {
-            top: responsive-size-by-vh($top, 'v', $isLandscape, $isMax);
-        }
-        @if ($right != "") {
-            right: responsive-size-by-vh($right, 'v', $isLandscape, $isMax);
-        }
-        @if ($bottom != "") {
-            bottom: responsive-size-by-vh($bottom, 'v', $isLandscape, $isMax);
-        }
-        @if ($left != "") {
-            left: responsive-size-by-vh($left, 'v', $isLandscape, $isMax);
-        }
-    }
-}
-@mixin responsive-position-by-px($px: (top: "", right: "", bottom: "", left: ""), $isLandscape: false, $isMax: false) {
-    $top: if(map-has-key($px, top), map-get($px, top), "");
-    $right: if(map-has-key($px, right), map-get($px, right), "");
-    $bottom: if(map-has-key($px, bottom), map-get($px, bottom), "");
-    $left: if(map-has-key($px, left), map-get($px, left), "");
-    @include supports-dv {
-        @if ($top != "") {
-            top: responsive-size-by-px($top, 'dv', $isLandscape, $isMax);
-        }
-        @if ($right != "") {
-            right: responsive-size-by-px($right, 'dv', $isLandscape, $isMax);
-        }
-        @if ($bottom != "") {
-            bottom: responsive-size-by-px($bottom, 'dv', $isLandscape, $isMax);
-        }
-        @if ($left != "") {
-            left: responsive-size-by-px($left, 'dv', $isLandscape, $isMax);
-        }
-    }
-    @include not-supports-dv {
-        @if ($top != "") {
-            top: responsive-size-by-px($top, 'v', $isLandscape, $isMax);
-        }
-        @if ($right != "") {
-            right: responsive-size-by-px($right, 'v', $isLandscape, $isMax);
-        }
-        @if ($bottom != "") {
-            bottom: responsive-size-by-px($bottom, 'v', $isLandscape, $isMax);
-        }
-        @if ($left != "") {
-            left: responsive-size-by-px($left, 'v', $isLandscape, $isMax);
-        }
-    }
-}
-
-@mixin responsive-letter-border($color, $w, $h: $w) {
-    $vw: $w + 'vw';
-    $vh: $h + 'vh';
-    $unit: min(#{$vw}, #{$vh} * variables.$design-width / variables.$design-height);
-    $minusUnit: calc(-1 * $unit);
-
-    text-shadow:
-        $unit 0 $color, /* 筆畫顏色，水平偏移 */
-        $minusUnit 0 $color, /* 筆畫顏色，水平偏移 */
-        0 $unit $color, /* 筆畫顏色，垂直偏移 */
-        0 $minusUnit $color, /* 筆畫顏色，垂直偏移 */
-        $unit $unit $color, /* 斜向右下 */
-        $minusUnit $minusUnit $color, /* 斜向左上 */
-        $unit $minusUnit $color, /* 斜向右上 */
-        $minusUnit $unit $color; /* 斜向左下 */
-}
-
-@mixin responsive-letter-shadow($color, $w, $h: $w) {
-    $vw: $w + 'vw';
-    $vh: $h + 'vh';
-    $unit: min(#{$vw}, #{$vh} * variables.$design-width / variables.$design-height);
-
-    text-shadow: $unit $unit $unit $color; /* 陰影顏色 */
-}
-
-@mixin responsive-letter-border-shadow($colorBorder, $colorShadow, $w, $h: $w) {
-    $vw: $w + 'vw';
-    $vh: $h + 'vh';
-    $unit: min(#{$vw}, #{$vh} * variables.$design-width / variables.$design-height);
-    $minusUnit: calc(-1 * $unit);
-    $shadow: calc(2 * $unit);
-
-    text-shadow:
-        $unit 0 $colorBorder, /* 筆畫顏色，水平偏移 */
-        $minusUnit 0 $colorBorder, /* 筆畫顏色，水平偏移 */
-        0 $unit $colorBorder, /* 筆畫顏色，垂直偏移 */
-        0 $minusUnit $colorBorder, /* 筆畫顏色，垂直偏移 */
-        $unit $unit $colorBorder, /* 斜向右下 */
-        $minusUnit $minusUnit $colorBorder, /* 斜向左上 */
-        $unit $minusUnit $colorBorder, /* 斜向右上 */
-        $minusUnit $unit $colorBorder, /* 斜向左下 */
-        $shadow $shadow $shadow $colorShadow; /* 陰影顏色 */
-}
-
-@mixin responsive-border-by-px($px, $color, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        border: responsive-size-by-px($px, 'dv', $isLandscape, $isMax) solid $color;
-    }
-    @include not-supports-dv {
-        border: responsive-size-by-px($px, 'v', $isLandscape, $isMax) solid $color;
-    }
-}
-
-@mixin responsive-padding-inline-start-by-px($px, $isLandscape: false, $isMax: false) {
-    @include supports-dv {
-        padding-inline-start: responsive-size-by-px($px, 'dv', $isLandscape, $isMax);
-    }
-    @include not-supports-dv {
-        padding-inline-start: responsive-size-by-px($px, 'v', $isLandscape, $isMax);
-    }
-}