@simplysm/angular 14.0.28 → 14.0.29

package/scss/commons/_styles.scss

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