@simplysm/angular 14.0.90 → 14.0.92

package/scss/commons/_styles.scss

@@ -1,428 +1,430 @@
-@use "sass:map";
-@use "sass:string";
-
-@use "variables";
-@use "mixins";
-
-@layer base {
-  *,
-  *:after,
-  *:before {
-    box-sizing: border-box;
-    outline-color: var(--theme-primary-default);
-
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-  }
-
-  *:focus {
-    outline: none;
-  }
-
-  html {
-    font-size: 12px;
-  }
-
-  html,
-  body {
-    height: 100%;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-  }
-
-  body {
-    background: var(--background-color);
-    color: var(--text-trans-default);
-    font-family: var(--font-family);
-    font-variant-numeric: tabular-nums;
-    font-size: var(--font-size-default);
-    line-height: var(--line-height);
-  }
-
-  *::-webkit-scrollbar {
-    width: 1rem;
-    height: 1rem;
-    border-radius: 0.6667rem;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    background-color: var(--theme-gray-light);
-    border-radius: 0.6667rem;
-    background-clip: padding-box;
-    border: 2px solid transparent;
-  }
-
-  *::-webkit-scrollbar-track {
-    &:hover {
-      background-color: var(--theme-gray-lightest);
-      border-radius: 0.6667rem;
-      background-clip: padding-box;
-      border: 2px solid transparent;
-    }
-  }
-
-  *::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  hr {
-    border: none;
-    height: 1px;
-    background-color: var(--border-color-lighter);
-    width: 100%;
-    display: block;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  pre,
-  code {
-    font-size: var(--font-size-default);
-    line-height: var(--line-height);
-    margin: 0;
-  }
-
-  pre {
-    font-family: var(--font-family);
-    font-variant-numeric: tabular-nums;
-  }
-
-  code {
-    font-family: var(--font-family-monospace);
-    font-variant-numeric: tabular-nums;
-  }
-
-  small {
-    vertical-align: top;
-  }
-
-  sub {
-    display: inline-block;
-    overflow: visible;
-    height: 0;
-  }
-
-  form {
-    display: inline;
-  }
-} // @layer base
-
-@layer utilities {
-  .block {
-    display: block;
-  }
-
-  .inline-block {
-    display: inline-block;
-  }
-
-  .inline {
-    display: inline;
-  }
-
-  //-- FONT SIZE
-
-  @each $h in (h1, h2, h3, h4, h5, h6) {
-    #{$h} {
-      font-size: var(--font-size-#{$h});
-      line-height: var(--line-height);
-      margin: 0;
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, font-size) {
-    .ft-size-#{$key} {
-      font-size: var(--font-size-#{$key}) !important;
-      line-height: var(--line-height) !important;
-    }
-  }
-
-  //-- BACKGROUND COLOR
-
-  @each $key, $val in map.get(variables.$vars, theme) {
-    @each $key1, $val1 in $val {
-      .bg-theme-#{$key}-#{$key1} {
-        background: var(--theme-#{$key}-#{$key1}) !important;
-      }
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, trans) {
-    .bg-trans-#{$key} {
-      background: var(--trans-#{$key}) !important;
-    }
-  }
-
-  .bg-default {
-    background: var(--background-color) !important;
-  }
-
-  .bg-control {
-    background: var(--control-color) !important;
-  }
-
-  //-- TEXT COLOR
-
-  @each $key, $val in map.get(variables.$vars, text-trans) {
-    .tx-trans-#{$key} {
-      color: var(--text-trans-#{$key}) !important;
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, theme) {
-    @each $key1, $val1 in $val {
-      .tx-theme-#{$key}-#{$key1} {
-        color: var(--theme-#{$key}-#{$key1}) !important;
-      }
-    }
-  }
-
-  //-- TEXT STYLE
-
-  .tx-line-through {
-    text-decoration: line-through;
-  }
-  .tx-underline {
-    text-decoration: underline;
-  }
-
-  //-- BORDER
-
-  .bd {
-    border: 1px solid !important;
-  }
-
-  @each $key, $val in map.get(variables.$vars, theme) {
-    @each $key1, $val1 in $val {
-      .bd-theme-#{$key}-#{$key1} {
-        border-color: var(--theme-#{$key}-#{$key1}) !important;
-      }
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, trans) {
-    .bd-trans-#{$key} {
-      border-color: var(--trans-#{$key}) !important;
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, border-color) {
-    .bd-color-#{$key} {
-      border-color: var(--border-color-#{$key}) !important;
-    }
-  }
-
-  .bd-none {
-    border: none !important;
-  }
-
-  .bd-transparent {
-    border-color: transparent !important;
-  }
-
-  @each $dir in (top, right, bottom, left) {
-    $d: string.slice($dir, 1, 1);
-    @include mixins.border-direction-variants($dir, $d);
-  }
-
-  //-- BORDER WIDTH
-  @each $key, $val in map.get(variables.$vars, gap) {
-    .bd-width-#{$key} {
-      border-width: var(--gap-#{$key}) !important;
-    }
-
-    @each $dir in (top, right, bottom, left) {
-      $d: string.slice($dir, 1, 1);
-      .bd#{$d}-width-#{$key} {
-        border-#{$dir}-width: var(--gap-#{$key}) !important;
-      }
-    }
-  }
-
-  //-- BORDER RADIUS
-
-  $radius-dirs: (
-    t: (
-      top-right,
-      top-left,
-    ),
-    b: (
-      bottom-right,
-      bottom-left,
-    ),
-    l: (
-      top-left,
-      bottom-left,
-    ),
-    r: (
-      top-right,
-      bottom-right,
-    ),
-  );
-
-  @each $key, $val in map.get(variables.$vars, border-radius) {
-    .bd-radius-#{$key} {
-      border-radius: var(--border-radius-#{$key}) !important;
-    }
-
-    @each $d, $corners in $radius-dirs {
-      .bd#{$d}-radius-#{$key} {
-        @each $corner in $corners {
-          border-#{$corner}-radius: var(--border-radius-#{$key}) !important;
-        }
-      }
-    }
-  }
-
-  //-- PADDING, MARGIN
-
-  @each $key, $val in map.get(variables.$vars, gap) {
-    .p-#{$key} {
-      padding: var(--gap-#{$key}) !important;
-    }
-
-    .m-#{$key} {
-      margin: var(--gap-#{$key}) !important;
-    }
-
-    .pv-#{$key} {
-      padding-top: var(--gap-#{$key}) !important;
-      padding-bottom: var(--gap-#{$key}) !important;
-    }
-
-    .ph-#{$key} {
-      padding-left: var(--gap-#{$key}) !important;
-      padding-right: var(--gap-#{$key}) !important;
-    }
-
-    .mv-#{$key} {
-      margin-top: var(--gap-#{$key}) !important;
-      margin-bottom: var(--gap-#{$key}) !important;
-    }
-
-    .mh-#{$key} {
-      margin-left: var(--gap-#{$key}) !important;
-      margin-right: var(--gap-#{$key}) !important;
-    }
-
-    .sw-#{$key} {
-      width: var(--gap-#{$key}) !important;
-    }
-
-    .sh-#{$key} {
-      height: var(--gap-#{$key}) !important;
-    }
-
-    @each $dir in (top, right, bottom, left) {
-      $d: string.slice($dir, 1, 1);
-
-      .p#{$d}-#{$key} {
-        padding-#{$dir}: var(--gap-#{$key}) !important;
-      }
-
-      .m#{$d}-#{$key} {
-        margin-#{$dir}: var(--gap-#{$key}) !important;
-      }
-
-      .#{$d}-#{$key} {
-        #{$dir}: var(--gap-#{$key}) !important;
-      }
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, gap) {
-    @each $key1, $val1 in map.get(variables.$vars, gap) {
-      .p-#{$key}-#{$key1} {
-        padding: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
-      }
-
-      .m-#{$key}-#{$key1} {
-        margin: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
-      }
-    }
-  }
-
-  //-- TEXT ALIGN
-
-  @each $align in (left, right, center) {
-    .tx-#{$align} {
-      text-align: #{$align} !important;
-    }
-  }
-
-  //-- ETC
-
-  .sh-topbar {
-    height: var(--topbar-height) !important;
-  }
-
-  .sw-sidebar {
-    width: var(--sidebar-width) !important;
-  }
-
-  .form-control {
-    @include mixins.form-control-base();
-  }
-
-  .help {
-    @include mixins.help();
-  }
-
-  .control-header {
-    line-height: var(--line-height);
-    font-size: var(--font-size-sm);
-    color: var(--theme-gray-default);
-  }
-
-  .page-header {
-    line-height: var(--line-height);
-    margin-bottom: var(--gap-sm);
-    color: var(--theme-gray-default);
-
-    padding-bottom: var(--gap-xxs);
-    font-size: var(--font-size-sm);
-  }
-
-  .sticky-top {
-    position: sticky !important;
-    top: 0;
-    z-index: 1;
-  }
-
-  .overflow-auto {
-    overflow: auto;
-  }
-
-  .position-relative {
-    position: relative;
-  }
-
-  .nowrap {
-    white-space: nowrap;
-  }
-
-  .fill {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-
-  @each $key, $val in map.get(variables.$vars, gap) {
-    .gap-#{$key} {
-      gap: var(--gap-#{$key});
-    }
-  }
-
-  @each $val in [start, end, center] {
-    .main-align-#{$val} {
-      justify-content: $val !important;
-    }
-
-    .cross-align-#{$val} {
-      align-items: $val !important;
-    }
-  }
-} // @layer utilities
+@use "sass:map";
+@use "sass:string";
+
+@use "variables";
+@use "mixins";
+
+@layer base {
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+    outline-color: var(--theme-primary-default);
+
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  *:focus {
+    outline: none;
+  }
+
+  html {
+    font-size: 12px;
+  }
+
+  html,
+  body {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
+  body {
+    background: var(--background-color);
+    color: var(--text-trans-default);
+    font-family: var(--font-family);
+    font-variant-numeric: tabular-nums;
+    font-size: var(--font-size-default);
+    line-height: var(--line-height);
+  }
+
+  *::-webkit-scrollbar {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.6667rem;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--trans-lighter);
+    border-radius: 0.6667rem;
+    background-clip: padding-box;
+    border: 2px solid transparent;
+  }
+
+  *:hover::-webkit-scrollbar-thumb {
+    background-color: var(--trans-light);
+  }
+
+  *::-webkit-scrollbar-track:hover {
+    background-color: var(--trans-lightest);
+    border-radius: 0.6667rem;
+    background-clip: padding-box;
+    border: 2px solid transparent;
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  hr {
+    border: none;
+    height: 1px;
+    background-color: var(--border-color-lighter);
+    width: 100%;
+    display: block;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  pre,
+  code {
+    font-size: var(--font-size-default);
+    line-height: var(--line-height);
+    margin: 0;
+  }
+
+  pre {
+    font-family: var(--font-family);
+    font-variant-numeric: tabular-nums;
+  }
+
+  code {
+    font-family: var(--font-family-monospace);
+    font-variant-numeric: tabular-nums;
+  }
+
+  small {
+    vertical-align: top;
+  }
+
+  sub {
+    display: inline-block;
+    overflow: visible;
+    height: 0;
+  }
+
+  form {
+    display: inline;
+  }
+} // @layer base
+
+@layer utilities {
+  .block {
+    display: block;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  //-- FONT SIZE
+
+  @each $h in (h1, h2, h3, h4, h5, h6) {
+    #{$h} {
+      font-size: var(--font-size-#{$h});
+      line-height: var(--line-height);
+      margin: 0;
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, font-size) {
+    .ft-size-#{$key} {
+      font-size: var(--font-size-#{$key}) !important;
+      line-height: var(--line-height) !important;
+    }
+  }
+
+  //-- BACKGROUND COLOR
+
+  @each $key, $val in map.get(variables.$vars, theme) {
+    @each $key1, $val1 in $val {
+      .bg-theme-#{$key}-#{$key1} {
+        background: var(--theme-#{$key}-#{$key1}) !important;
+      }
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, trans) {
+    .bg-trans-#{$key} {
+      background: var(--trans-#{$key}) !important;
+    }
+  }
+
+  .bg-default {
+    background: var(--background-color) !important;
+  }
+
+  .bg-control {
+    background: var(--control-color) !important;
+  }
+
+  //-- TEXT COLOR
+
+  @each $key, $val in map.get(variables.$vars, text-trans) {
+    .tx-trans-#{$key} {
+      color: var(--text-trans-#{$key}) !important;
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, theme) {
+    @each $key1, $val1 in $val {
+      .tx-theme-#{$key}-#{$key1} {
+        color: var(--theme-#{$key}-#{$key1}) !important;
+      }
+    }
+  }
+
+  //-- TEXT STYLE
+
+  .tx-line-through {
+    text-decoration: line-through;
+  }
+  .tx-underline {
+    text-decoration: underline;
+  }
+
+  //-- BORDER
+
+  .bd {
+    border: 1px solid !important;
+  }
+
+  @each $key, $val in map.get(variables.$vars, theme) {
+    @each $key1, $val1 in $val {
+      .bd-theme-#{$key}-#{$key1} {
+        border-color: var(--theme-#{$key}-#{$key1}) !important;
+      }
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, trans) {
+    .bd-trans-#{$key} {
+      border-color: var(--trans-#{$key}) !important;
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, border-color) {
+    .bd-color-#{$key} {
+      border-color: var(--border-color-#{$key}) !important;
+    }
+  }
+
+  .bd-none {
+    border: none !important;
+  }
+
+  .bd-transparent {
+    border-color: transparent !important;
+  }
+
+  @each $dir in (top, right, bottom, left) {
+    $d: string.slice($dir, 1, 1);
+    @include mixins.border-direction-variants($dir, $d);
+  }
+
+  //-- BORDER WIDTH
+  @each $key, $val in map.get(variables.$vars, gap) {
+    .bd-width-#{$key} {
+      border-width: var(--gap-#{$key}) !important;
+    }
+
+    @each $dir in (top, right, bottom, left) {
+      $d: string.slice($dir, 1, 1);
+      .bd#{$d}-width-#{$key} {
+        border-#{$dir}-width: var(--gap-#{$key}) !important;
+      }
+    }
+  }
+
+  //-- BORDER RADIUS
+
+  $radius-dirs: (
+    t: (
+      top-right,
+      top-left,
+    ),
+    b: (
+      bottom-right,
+      bottom-left,
+    ),
+    l: (
+      top-left,
+      bottom-left,
+    ),
+    r: (
+      top-right,
+      bottom-right,
+    ),
+  );
+
+  @each $key, $val in map.get(variables.$vars, border-radius) {
+    .bd-radius-#{$key} {
+      border-radius: var(--border-radius-#{$key}) !important;
+    }
+
+    @each $d, $corners in $radius-dirs {
+      .bd#{$d}-radius-#{$key} {
+        @each $corner in $corners {
+          border-#{$corner}-radius: var(--border-radius-#{$key}) !important;
+        }
+      }
+    }
+  }
+
+  //-- PADDING, MARGIN
+
+  @each $key, $val in map.get(variables.$vars, gap) {
+    .p-#{$key} {
+      padding: var(--gap-#{$key}) !important;
+    }
+
+    .m-#{$key} {
+      margin: var(--gap-#{$key}) !important;
+    }
+
+    .pv-#{$key} {
+      padding-top: var(--gap-#{$key}) !important;
+      padding-bottom: var(--gap-#{$key}) !important;
+    }
+
+    .ph-#{$key} {
+      padding-left: var(--gap-#{$key}) !important;
+      padding-right: var(--gap-#{$key}) !important;
+    }
+
+    .mv-#{$key} {
+      margin-top: var(--gap-#{$key}) !important;
+      margin-bottom: var(--gap-#{$key}) !important;
+    }
+
+    .mh-#{$key} {
+      margin-left: var(--gap-#{$key}) !important;
+      margin-right: var(--gap-#{$key}) !important;
+    }
+
+    .sw-#{$key} {
+      width: var(--gap-#{$key}) !important;
+    }
+
+    .sh-#{$key} {
+      height: var(--gap-#{$key}) !important;
+    }
+
+    @each $dir in (top, right, bottom, left) {
+      $d: string.slice($dir, 1, 1);
+
+      .p#{$d}-#{$key} {
+        padding-#{$dir}: var(--gap-#{$key}) !important;
+      }
+
+      .m#{$d}-#{$key} {
+        margin-#{$dir}: var(--gap-#{$key}) !important;
+      }
+
+      .#{$d}-#{$key} {
+        #{$dir}: var(--gap-#{$key}) !important;
+      }
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, gap) {
+    @each $key1, $val1 in map.get(variables.$vars, gap) {
+      .p-#{$key}-#{$key1} {
+        padding: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
+      }
+
+      .m-#{$key}-#{$key1} {
+        margin: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
+      }
+    }
+  }
+
+  //-- TEXT ALIGN
+
+  @each $align in (left, right, center) {
+    .tx-#{$align} {
+      text-align: #{$align} !important;
+    }
+  }
+
+  //-- ETC
+
+  .sh-topbar {
+    height: var(--topbar-height) !important;
+  }
+
+  .sw-sidebar {
+    width: var(--sidebar-width) !important;
+  }
+
+  .form-control {
+    @include mixins.form-control-base();
+  }
+
+  .help {
+    @include mixins.help();
+  }
+
+  .control-header {
+    line-height: var(--line-height);
+    font-size: var(--font-size-sm);
+    color: var(--theme-gray-default);
+  }
+
+  .page-header {
+    line-height: var(--line-height);
+    margin-bottom: var(--gap-sm);
+    color: var(--theme-gray-default);
+
+    padding-bottom: var(--gap-xxs);
+    font-size: var(--font-size-sm);
+  }
+
+  .sticky-top {
+    position: sticky !important;
+    top: 0;
+    z-index: 1;
+  }
+
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .position-relative {
+    position: relative;
+  }
+
+  .nowrap {
+    white-space: nowrap;
+  }
+
+  .fill {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
+
+  @each $key, $val in map.get(variables.$vars, gap) {
+    .gap-#{$key} {
+      gap: var(--gap-#{$key});
+    }
+  }
+
+  @each $val in [start, end, center] {
+    .main-align-#{$val} {
+      justify-content: $val !important;
+    }
+
+    .cross-align-#{$val} {
+      align-items: $val !important;
+    }
+  }
+} // @layer utilities