@ardium-ui/ui 1.0.3 → 2.0.2

package/themes/default/slider.scss

@@ -1,224 +1,224 @@
-@use './mixins' as defaultMixins;
-@use './coloring' as coloringMixins;
-@use 'sass:math';
-@import '../variables';
-
-.ard-slider-container-master,
-.ard-range-slider-container-master {
-  @include coloringMixins.typeColors();
-
-  position: relative;
-  font-size: 1rem;
-  width: 20em;
-  max-width: 100%;
-  padding: 0 0.625em;
-  display: flex;
-  flex-direction: column;
-
-  color: var(--ard-cmpcl--bg-colored);
-
-  //! compact
-  &.ard-compact {
-    font-size: 0.85rem;
-
-    .ard-slider-container > .ard-slider-handle {
-      font-size: 0.95em;
-    }
-  }
-
-  //! container
-  .ard-slider-container {
-    display: flex;
-    align-items: center;
-    position: relative;
-    width: 100%;
-    height: 1.25em;
-    cursor: pointer;
-  }
-  //! track
-  .ard-slider-track {
-    width: 100%;
-    height: 0.25em;
-    background: $bg;
-
-    .ard-slider-track-overlay {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: currentColor;
-      opacity: 20%;
-      border-radius: 9999px;
-
-      &.ard-slider-track-active {
-        width: 0;
-        height: calc(100% + 0.125em);
-        top: math.div(-1em, 16);
-        opacity: 100%;
-        transition:
-          width var(--_ard-slider-transition) ease,
-          left var(--_ard-slider-transition) ease;
-      }
-    }
-    .ard-hitbox {
-      position: absolute;
-      inset: -0.625em;
-    }
-    .ard-value-tick-container {
-      position: absolute;
-      left: 0.125em;
-      width: calc(100% - 0.25em);
-      height: 100%;
-    }
-    .ard-value-tick {
-      top: 50%;
-      width: 0.125em;
-      height: 0.125em;
-      border-radius: 9999px;
-      background: $text;
-      opacity: 30%;
-      transform: translate(-50%, -50%);
-    }
-  }
-  //! handle
-  // &.ard-slider-handle-grabbed,
-  // &.ard-slider-handle-grabbed * {
-  //     cursor: grabbing;
-  // }
-  .ard-slider-handle {
-    font-size: inherit;
-    top: 0;
-    width: 1.25em;
-    height: 1.25em;
-    color: inherit;
-    background: currentColor;
-    border-radius: 9999px;
-    border: none;
-    z-index: 1;
-    outline: none;
-    cursor: pointer;
-
-    transition:
-      box-shadow 0.15s ease,
-      left var(--_ard-slider-transition) ease;
-    box-shadow: $simple-shadow;
-
-    // cursor: grab;
-    // &.ard-grabbed {
-    //     cursor: grabbing;
-    // }
-
-    .ard-focus-overlay {
-      @include defaultMixins.focus-overlay(0.5em);
-      background: currentColor;
-    }
-    @include defaultMixins.focus-overlay-scale-addon();
-
-    .ard-hitbox {
-      position: absolute;
-      inset: math.div(-7em, 16);
-      border-radius: 9999px;
-    }
-    &:hover {
-      .ard-focus-overlay {
-        opacity: 7.5%;
-      }
-    }
-    &:focus {
-      box-shadow: $simple-shadow2;
-      .ard-focus-overlay {
-        opacity: 15%;
-      }
-    }
-    &:active,
-    &.ard-grabbed {
-      .ard-focus-overlay {
-        opacity: 25%;
-      }
-    }
-  }
-  .ard-slider-label-container {
-    position: relative;
-    font-size: 0.9em;
-    padding-top: 0.2em;
-    left: 2px;
-    width: calc(100% - 0.25em) !important;
-
-    .ard-slider-label {
-      transform: translateX(-50%);
-    }
-  }
-  //! tooltip
-  .ard-slider-tooltip-wrapper {
-    transition: left var(--_ard-slider-transition) ease;
-    z-index: 2;
-  }
-  .ard-slider-tooltip {
-    --ard-background: #{$text3};
-    background: var(--ard-background);
-    color: $text2-alt;
-    font-size: 0.875em;
-    border-radius: 0.375em;
-    height: 2em;
-    padding: 0 0.75em;
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    position: relative;
-    z-index: 2;
-    user-select: none;
-
-    transform: scale(0);
-    transition: transform 0.1s $timing-fn;
-
-    &::before {
-      content: '';
-      position: absolute;
-      border: 0.375em solid transparent;
-      left: 50%;
-    }
-  }
-  &.ard-tooltip-top {
-    .ard-slider-tooltip {
-      bottom: 0.5em;
-
-      &::before {
-        bottom: 0;
-        border-top-color: var(--ard-background);
-        transform: translate(-50%, 100%);
-      }
-    }
-  }
-  &.ard-tooltip-bottom {
-    .ard-slider-tooltip {
-      top: 0.5em;
-
-      &::before {
-        top: 0;
-        border-bottom-color: var(--ard-background);
-        transform: translate(-50%, -100%);
-      }
-    }
-  }
-  //! showing and hiding tooltip
-  //show tooltip when handle is hovered or focused
-  .ard-slider-handle:hover,
-  .ard-slider-handle:focus {
-    + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
-      transform: scale(1);
-    }
-  }
-  //hide other tooltips when a handle is focused
-  .ard-slider-container:focus-within {
-    .ard-slider-handle:not(:focus) {
-      + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
-        transform: scale(0);
-      }
-    }
-  }
-  //make a way to force-show a tooltip
-  .ard-slider-handle .ard-slider-tooltip-wrapper.ard-tooltip-always {
-    .ard-slider-tooltip {
-      transform: scale(1) !important;
-    }
-  }
-}
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@use 'sass:math';
+@import '../variables';
+
+.ard-slider-container-master,
+.ard-range-slider-container-master {
+  @include coloringMixins.typeColors();
+
+  position: relative;
+  font-size: 1rem;
+  width: 20em;
+  max-width: 100%;
+  padding: 0 0.625em;
+  display: flex;
+  flex-direction: column;
+
+  color: var(--ard-cmpcl--bg-colored);
+
+  //! compact
+  &.ard-compact {
+    font-size: 0.85rem;
+
+    .ard-slider-container > .ard-slider-handle {
+      font-size: 0.95em;
+    }
+  }
+
+  //! container
+  .ard-slider-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    height: 1.25em;
+    cursor: pointer;
+  }
+  //! track
+  .ard-slider-track {
+    width: 100%;
+    height: 0.25em;
+    background: $bg;
+
+    .ard-slider-track-overlay {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: currentColor;
+      opacity: 20%;
+      border-radius: 9999px;
+
+      &.ard-slider-track-active {
+        width: 0;
+        height: calc(100% + 0.125em);
+        top: math.div(-1em, 16);
+        opacity: 100%;
+        transition:
+          width var(--_ard-slider-transition) ease,
+          left var(--_ard-slider-transition) ease;
+      }
+    }
+    .ard-hitbox {
+      position: absolute;
+      inset: -0.625em;
+    }
+    .ard-value-tick-container {
+      position: absolute;
+      left: 0.125em;
+      width: calc(100% - 0.25em);
+      height: 100%;
+    }
+    .ard-value-tick {
+      top: 50%;
+      width: 0.125em;
+      height: 0.125em;
+      border-radius: 9999px;
+      background: $text;
+      opacity: 30%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  //! handle
+  // &.ard-slider-handle-grabbed,
+  // &.ard-slider-handle-grabbed * {
+  //     cursor: grabbing;
+  // }
+  .ard-slider-handle {
+    font-size: inherit;
+    top: 0;
+    width: 1.25em;
+    height: 1.25em;
+    color: inherit;
+    background: currentColor;
+    border-radius: 9999px;
+    border: none;
+    z-index: 1;
+    outline: none;
+    cursor: pointer;
+
+    transition:
+      box-shadow 0.15s ease,
+      left var(--_ard-slider-transition) ease;
+    box-shadow: $simple-shadow;
+
+    // cursor: grab;
+    // &.ard-grabbed {
+    //     cursor: grabbing;
+    // }
+
+    .ard-focus-overlay {
+      @include defaultMixins.focus-overlay(0.5em);
+      background: currentColor;
+    }
+    @include defaultMixins.focus-overlay-scale-addon();
+
+    .ard-hitbox {
+      position: absolute;
+      inset: math.div(-7em, 16);
+      border-radius: 9999px;
+    }
+    &:hover {
+      .ard-focus-overlay {
+        opacity: 7.5%;
+      }
+    }
+    &:focus {
+      box-shadow: $simple-shadow2;
+      .ard-focus-overlay {
+        opacity: 15%;
+      }
+    }
+    &:active,
+    &.ard-grabbed {
+      .ard-focus-overlay {
+        opacity: 25%;
+      }
+    }
+  }
+  .ard-slider-label-container {
+    position: relative;
+    font-size: 0.9em;
+    padding-top: 0.2em;
+    left: 2px;
+    width: calc(100% - 0.25em) !important;
+
+    .ard-slider-label {
+      transform: translateX(-50%);
+    }
+  }
+  //! tooltip
+  .ard-slider-tooltip-wrapper {
+    transition: left var(--_ard-slider-transition) ease;
+    z-index: 2;
+  }
+  .ard-slider-tooltip {
+    --ard-background: #{$text3};
+    background: var(--ard-background);
+    color: $text2-alt;
+    font-size: 0.875em;
+    border-radius: 0.375em;
+    height: 2em;
+    padding: 0 0.75em;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    position: relative;
+    z-index: 2;
+    user-select: none;
+
+    transform: scale(0);
+    transition: transform 0.1s $timing-fn;
+
+    &::before {
+      content: '';
+      position: absolute;
+      border: 0.375em solid transparent;
+      left: 50%;
+    }
+  }
+  &.ard-tooltip-top {
+    .ard-slider-tooltip {
+      bottom: 0.5em;
+
+      &::before {
+        bottom: 0;
+        border-top-color: var(--ard-background);
+        transform: translate(-50%, 100%);
+      }
+    }
+  }
+  &.ard-tooltip-bottom {
+    .ard-slider-tooltip {
+      top: 0.5em;
+
+      &::before {
+        top: 0;
+        border-bottom-color: var(--ard-background);
+        transform: translate(-50%, -100%);
+      }
+    }
+  }
+  //! showing and hiding tooltip
+  //show tooltip when handle is hovered or focused
+  .ard-slider-handle:hover,
+  .ard-slider-handle:focus {
+    + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
+      transform: scale(1);
+    }
+  }
+  //hide other tooltips when a handle is focused
+  .ard-slider-container:focus-within {
+    .ard-slider-handle:not(:focus) {
+      + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
+        transform: scale(0);
+      }
+    }
+  }
+  //make a way to force-show a tooltip
+  .ard-slider-handle .ard-slider-tooltip-wrapper.ard-tooltip-always {
+    .ard-slider-tooltip {
+      transform: scale(1) !important;
+    }
+  }
+}

package/themes/default/snackbar.scss

@@ -1,60 +1,58 @@
-@use './coloring' as C;
-@import '../variables';
-
-@import '@angular/cdk/overlay-prebuilt.css';
-
-.ard-snackbar {
-  @include C.typeColors();
-  min-width: min(21rem, 90vw);
-  max-width: min(42rem, 90vw);
-  min-height: 3rem;
-  margin: 0.625rem;
-  position: relative;
-  display: flex;
-  justify-content: stretch;
-  align-items: center;
-  gap: 0.625rem;
-  border-radius: 6px;
-  transform-origin: bottom center;
-  background-color: $bg-f-alt;
-  padding: 0 0.5rem 0 1rem;
-
-  opacity: 100%;
-  transform: scale(100%);
-  bottom: 0;
-  animation: show 150ms ease-out forwards;
-
-  .ard-snackbar-content {
-    display: flex;
-    gap: 0.625rem;
-    align-items: center;
-    flex-grow: 1;
-    color: $text2-alt;
-
-    ard-icon {
-      color: var(--ard-cmpcl--content-light);
-    }
-  }
-
-  &.ard-snackbar-closing {
-    animation: hide 150ms ease-out forwards;
-  }
-}
-
-@mixin animation {
-  opacity: 0%;
-  transform: scale(60%);
-  bottom: -0.375rem;
-}
-
-@keyframes show {
-  from {
-    @include animation();
-  }
-}
-
-@keyframes hide {
-  to {
-    @include animation();
-  }
-}
+@use './coloring' as C;
+@import '../variables';
+
+.ard-snackbar {
+  @include C.typeColors();
+  min-width: min(21rem, 90vw);
+  max-width: min(42rem, 90vw);
+  min-height: 3rem;
+  margin: 0.625rem;
+  position: relative;
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: 6px;
+  transform-origin: bottom center;
+  background-color: $bg-f-alt;
+  padding: 0 0.5rem 0 1rem;
+
+  opacity: 100%;
+  transform: scale(100%);
+  bottom: 0;
+  animation: show 150ms ease-out forwards;
+
+  .ard-snackbar-content {
+    display: flex;
+    gap: 0.625rem;
+    align-items: center;
+    flex-grow: 1;
+    color: $text2-alt;
+
+    ard-icon {
+      color: var(--ard-cmpcl--content-light);
+    }
+  }
+
+  &.ard-snackbar-closing {
+    animation: hide 150ms ease-out forwards;
+  }
+}
+
+@mixin animation {
+  opacity: 0%;
+  transform: scale(60%);
+  bottom: -0.375rem;
+}
+
+@keyframes show {
+  from {
+    @include animation();
+  }
+}
+
+@keyframes hide {
+  to {
+    @include animation();
+  }
+}

package/themes/default/spinner.scss

@@ -1,21 +1,21 @@
-@use './coloring' as CM;
-
-ard-spinner {
-  display: inline-block;
-  height: 2rem;
-  width: 2rem;
-  position: relative;
-  margin: 0.25rem;
-}
-
-.ard-spinner {
-  @include CM.typeColors();
-  --ard-_spinner-duration: 1.4s;
-  position: absolute;
-
-  scale: 2.3; //magic number
-
-  > circle {
-    stroke: var(--ard-cmpcl--content);
-  }
-}
+@use './coloring' as CM;
+
+ard-spinner {
+  display: inline-block;
+  height: 2rem;
+  width: 2rem;
+  position: relative;
+  margin: 0.25rem;
+}
+
+.ard-spinner {
+  @include CM.typeColors();
+  --ard-_spinner-duration: 1.4s;
+  position: absolute;
+
+  scale: 2.3; //magic number
+
+  > circle {
+    stroke: var(--ard-cmpcl--content);
+  }
+}