@ardium-ui/ui 1.0.3 → 2.0.2

package/themes/default/progress-bar.scss

@@ -1,166 +1,166 @@
-@use './coloring' as CM;
-@import '../variables';
-
-.ard-progress-bar {
-  @include CM.typeColors();
-  width: 100%;
-  margin: 0.5rem 0;
-  overflow: hidden;
-
-  .ard-progress-bar__background,
-  .ard-progress-bar__overlay {
-    position: absolute;
-    background-color: var(--ard-cmpcl--bg-colored);
-    top: 0;
-    bottom: 0;
-    left: 0;
-  }
-  .ard-progress-bar__background {
-    background-color: var(--ard-cmpcl--bg-colored-light);
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 30%;
-  }
-  .ard-progress-bar__overlay {
-    width: var(--ard-_progress-bar-main, 0);
-  }
-
-  //! variants
-  &.ard-variant-sharp {
-    border-radius: 0;
-  }
-  &.ard-variant-pill {
-    border-radius: 9999px;
-  }
-
-  //! sizes
-  &.ard-progress-bar__size-default {
-    height: 0.25rem;
-  }
-  &.ard-progress-bar__size-auto:not(.ard-progress-bar__mode-buffer) {
-    height: 100%;
-  }
-
-  //! modes
-  &.ard-progress-bar__mode-determinate,
-  &.ard-progress-bar__mode-buffer {
-    .ard-progress-bar__overlay {
-      transition: width 0.1s $timing-fn;
-    }
-  }
-  &.ard-progress-bar__mode-indeterminate,
-  &.ard-progress-bar__mode-query {
-    .ard-progress-bar__overlay {
-      position: unset;
-
-      &::before,
-      &::after {
-        content: '';
-        position: absolute;
-        background-color: inherit;
-        top: 0;
-        left: 0;
-        bottom: 0;
-      }
-      &::before {
-        animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      }
-      &::after {
-        animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-        animation-delay: 1.15s;
-      }
-    }
-  }
-  &.ard-progress-bar__mode-query {
-    transform: rotate(180deg);
-  }
-  &.ard-progress-bar__mode-buffer {
-    .ard-progress-bar__background {
-      background: none !important;
-      left: var(--ard-_progress-bar-buffer, 100%);
-      overflow: hidden;
-
-      &::after {
-        content: '';
-        position: absolute;
-        right: -0.5rem;
-        top: 0;
-        bottom: 0;
-        width: 9999px;
-        animation: buffer 0.4s linear infinite;
-        border-bottom: 0.25rem dotted var(--ard-cmpcl--bg-colored);
-      }
-    }
-    .ard-progress-bar__overlay-buffer {
-      background: var(--ard-cmpcl--bg-colored-light);
-      position: absolute;
-      left: 0;
-      width: var(--ard-_progress-bar-buffer, 0);
-      top: 0;
-      bottom: 0;
-      transition: width 0.1s $timing-fn;
-    }
-  }
-
-  //! hiding the value
-  &.ard-progress-bar__size-default,
-  &.ard-progress-bar__hide-value,
-  &.ard-progress-bar__mode-buffer {
-    > .ard-progress-bar__value {
-      display: none;
-    }
-  }
-
-  //! currentColor special case
-  &.ard-color-currentColor {
-    .ard-progress-bar__background {
-      opacity: 22.5%;
-      background: var(--ard-cmpcl--bg-colored);
-    }
-    .ard-progress-bar__overlay-buffer {
-      opacity: 30%;
-      background: var(--ard-cmpcl--bg-colored);
-    }
-  }
-}
-
-@keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-
-@keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
-}
-
-@keyframes buffer {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-0.5rem);
-  }
-}
+@use './coloring' as CM;
+@import '../variables';
+
+.ard-progress-bar {
+  @include CM.typeColors();
+  width: 100%;
+  margin: 0.5rem 0;
+  overflow: hidden;
+
+  .ard-progress-bar__background,
+  .ard-progress-bar__overlay {
+    position: absolute;
+    background-color: var(--ard-cmpcl--bg-colored);
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+  .ard-progress-bar__background {
+    background-color: var(--ard-cmpcl--bg-colored-light);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 30%;
+  }
+  .ard-progress-bar__overlay {
+    width: var(--ard-_progress-bar-main, 0);
+  }
+
+  //! variants
+  &.ard-variant-sharp {
+    border-radius: 0;
+  }
+  &.ard-variant-pill {
+    border-radius: 9999px;
+  }
+
+  //! sizes
+  &.ard-progress-bar__size-default {
+    height: 0.25rem;
+  }
+  &.ard-progress-bar__size-auto:not(.ard-progress-bar__mode-buffer) {
+    height: 100%;
+  }
+
+  //! modes
+  &.ard-progress-bar__mode-determinate,
+  &.ard-progress-bar__mode-buffer {
+    .ard-progress-bar__overlay {
+      transition: width 0.1s $timing-fn;
+    }
+  }
+  &.ard-progress-bar__mode-indeterminate,
+  &.ard-progress-bar__mode-query {
+    .ard-progress-bar__overlay {
+      position: unset;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+      }
+      &::before {
+        animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      }
+      &::after {
+        animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        animation-delay: 1.15s;
+      }
+    }
+  }
+  &.ard-progress-bar__mode-query {
+    transform: rotate(180deg);
+  }
+  &.ard-progress-bar__mode-buffer {
+    .ard-progress-bar__background {
+      background: none !important;
+      left: var(--ard-_progress-bar-buffer, 100%);
+      overflow: hidden;
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: -0.5rem;
+        top: 0;
+        bottom: 0;
+        width: 9999px;
+        animation: buffer 0.4s linear infinite;
+        border-bottom: 0.25rem dotted var(--ard-cmpcl--bg-colored);
+      }
+    }
+    .ard-progress-bar__overlay-buffer {
+      background: var(--ard-cmpcl--bg-colored-light);
+      position: absolute;
+      left: 0;
+      width: var(--ard-_progress-bar-buffer, 0);
+      top: 0;
+      bottom: 0;
+      transition: width 0.1s $timing-fn;
+    }
+  }
+
+  //! hiding the value
+  &.ard-progress-bar__size-default,
+  &.ard-progress-bar__hide-value,
+  &.ard-progress-bar__mode-buffer {
+    > .ard-progress-bar__value {
+      display: none;
+    }
+  }
+
+  //! currentColor special case
+  &.ard-color-currentColor {
+    .ard-progress-bar__background {
+      opacity: 22.5%;
+      background: var(--ard-cmpcl--bg-colored);
+    }
+    .ard-progress-bar__overlay-buffer {
+      opacity: 30%;
+      background: var(--ard-cmpcl--bg-colored);
+    }
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+@keyframes buffer {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-0.5rem);
+  }
+}

package/themes/default/progress-circle.scss

@@ -1,56 +1,56 @@
-@use './coloring' as coloringMixins;
-@import '../variables';
-
-.ard-progress-circle {
-  @include coloringMixins.typeColors;
-  width: 3em;
-
-  --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
-
-  //! appearances
-  &.ard-appearance-transparent {
-    .ard-progress-circle-background {
-      background: transparent;
-    }
-  }
-  &.ard-appearance-colorless {
-    .ard-progress-circle-background {
-      background: $darken-overlay-medium;
-    }
-  }
-  &.ard-appearance-colored {
-    .ard-progress-circle-background {
-      opacity: 16%;
-      background: var(--ard-cmpcl--bg-colored);
-    }
-    //special case for no coloring
-    &.ard-color-none {
-      .ard-progress-circle-background {
-        opacity: 8%;
-      }
-    }
-  }
-  //! ring variant
-  &.ard-progress-circle-variant-ring {
-    .ard-progress-circle-background,
-    .ard-progress-circle-overlay {
-      //magic number
-      //don't know why this value specifically looks good
-      mask: radial-gradient(transparent 59%, #000 59%);
-    }
-  }
-  //! value
-  .ard-progress-circle-value {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    font-weight: bold;
-    font-size: 0.9em;
-  }
-  &.ard-progress-circle-variant-full {
-    .ard-progress-circle-value {
-      display: none;
-    }
-  }
-}
+@use './coloring' as coloringMixins;
+@import '../variables';
+
+.ard-progress-circle {
+  @include coloringMixins.typeColors;
+  width: 3em;
+
+  --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
+
+  //! appearances
+  &.ard-appearance-transparent {
+    .ard-progress-circle-background {
+      background: transparent;
+    }
+  }
+  &.ard-appearance-colorless {
+    .ard-progress-circle-background {
+      background: $darken-overlay-medium;
+    }
+  }
+  &.ard-appearance-colored {
+    .ard-progress-circle-background {
+      opacity: 16%;
+      background: var(--ard-cmpcl--bg-colored);
+    }
+    //special case for no coloring
+    &.ard-color-none {
+      .ard-progress-circle-background {
+        opacity: 8%;
+      }
+    }
+  }
+  //! ring variant
+  &.ard-progress-circle-variant-ring {
+    .ard-progress-circle-background,
+    .ard-progress-circle-overlay {
+      //magic number
+      //don't know why this value specifically looks good
+      mask: radial-gradient(transparent 59%, #000 59%);
+    }
+  }
+  //! value
+  .ard-progress-circle-value {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    font-size: 0.9em;
+  }
+  &.ard-progress-circle-variant-full {
+    .ard-progress-circle-value {
+      display: none;
+    }
+  }
+}

package/themes/default/radio.scss

@@ -1,112 +1,112 @@
-@use './coloring' as CM;
-@use './mixins' as GM;
-@import '../variables';
-
-ard-radio-group {
-  display: flex;
-  gap: 0.5rem 1rem;
-}
-
-ard-radio {
-  display: inline-block;
-  width: max-content;
-  max-width: 100%;
-}
-
-.ard-radio {
-  @include CM.typeColors();
-
-  outline: none;
-  font-size: 1em;
-  display: flex;
-  gap: 0.375em;
-  padding: 0;
-  width: 100%;
-
-  > .ard-radio-circles {
-    position: relative;
-    width: 1.25em;
-    height: 1.25em;
-
-    > .ard-radio-outer-circle {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      border: 2px solid $detail;
-      border-radius: 9999px;
-      transition: border-color 0.2s $timing-fn;
-    }
-    > .ard-radio-inner-circle {
-      position: absolute;
-      left: 25%;
-      right: 25%;
-      top: 25%;
-      bottom: 25%;
-      background: var(--ard-cmpcl--bg-colored);
-      border-radius: 9999px;
-      transform: scale(0);
-      transition: transform 0.2s $timing-fn;
-    }
-    > .ard-focus-overlay {
-      @include GM.focus-overlay(0.375em);
-      border-radius: 9999px;
-      background-color: $overlay;
-
-      transition:
-        opacity 0.2s ease,
-        background-color 0.2s ease;
-    }
-    > .ard-hitbox {
-      position: absolute;
-      top: -0.375em;
-      bottom: -0.375em;
-      left: -0.375em;
-      right: -0.375em;
-      cursor: pointer;
-    }
-
-    &:hover {
-      > .ard-focus-overlay {
-        opacity: 7.5%;
-      }
-    }
-  }
-
-  &.ard-radio-selected {
-    > .ard-radio-circles {
-      > .ard-radio-outer-circle {
-        border-color: var(--ard-cmpcl--bg-colored);
-      }
-      > .ard-radio-inner-circle {
-        transform: scale(1);
-      }
-      > .ard-focus-overlay {
-        background-color: var(--ard-cmpcl--bg-colored);
-      }
-    }
-  }
-  &:focus {
-    > .ard-radio-circles {
-      > .ard-focus-overlay {
-        opacity: 15%;
-      }
-    }
-  }
-  &:active {
-    > .ard-radio-circles {
-      > .ard-focus-overlay {
-        opacity: 25%;
-      }
-    }
-  }
-}
-
-.ard-disabled {
-  .ard-radio {
-    pointer-events: none;
-    opacity: 50%;
-    user-select: none;
-  }
-}
+@use './coloring' as CM;
+@use './mixins' as GM;
+@import '../variables';
+
+ard-radio-group {
+  display: flex;
+  gap: 0.5rem 1rem;
+}
+
+ard-radio {
+  display: inline-block;
+  width: max-content;
+  max-width: 100%;
+}
+
+.ard-radio {
+  @include CM.typeColors();
+
+  outline: none;
+  font-size: 1em;
+  display: flex;
+  gap: 0.375em;
+  padding: 0;
+  width: 100%;
+
+  > .ard-radio-circles {
+    position: relative;
+    width: 1.25em;
+    height: 1.25em;
+
+    > .ard-radio-outer-circle {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      border: 2px solid $detail;
+      border-radius: 9999px;
+      transition: border-color 0.2s $timing-fn;
+    }
+    > .ard-radio-inner-circle {
+      position: absolute;
+      left: 25%;
+      right: 25%;
+      top: 25%;
+      bottom: 25%;
+      background: var(--ard-cmpcl--bg-colored);
+      border-radius: 9999px;
+      transform: scale(0);
+      transition: transform 0.2s $timing-fn;
+    }
+    > .ard-focus-overlay {
+      @include GM.focus-overlay(0.375em);
+      border-radius: 9999px;
+      background-color: $overlay;
+
+      transition:
+        opacity 0.2s ease,
+        background-color 0.2s ease;
+    }
+    > .ard-hitbox {
+      position: absolute;
+      top: -0.375em;
+      bottom: -0.375em;
+      left: -0.375em;
+      right: -0.375em;
+      cursor: pointer;
+    }
+
+    &:hover {
+      > .ard-focus-overlay {
+        opacity: 7.5%;
+      }
+    }
+  }
+
+  &.ard-radio-selected {
+    > .ard-radio-circles {
+      > .ard-radio-outer-circle {
+        border-color: var(--ard-cmpcl--bg-colored);
+      }
+      > .ard-radio-inner-circle {
+        transform: scale(1);
+      }
+      > .ard-focus-overlay {
+        background-color: var(--ard-cmpcl--bg-colored);
+      }
+    }
+  }
+  &:focus {
+    > .ard-radio-circles {
+      > .ard-focus-overlay {
+        opacity: 15%;
+      }
+    }
+  }
+  &:active {
+    > .ard-radio-circles {
+      > .ard-focus-overlay {
+        opacity: 25%;
+      }
+    }
+  }
+}
+
+.ard-disabled {
+  .ard-radio {
+    pointer-events: none;
+    opacity: 50%;
+    user-select: none;
+  }
+}