@ardium-ui/ui 1.0.0 → 1.0.2

package/themes/default/progress-bar.scss

@@ -2,165 +2,165 @@
 @import '../variables';
 
 .ard-progress-bar {
-    @include CM.typeColors();
-    width: 100%;
-    margin: 0.5rem 0;
-    overflow: hidden;
+  @include CM.typeColors();
+  width: 100%;
+  margin: 0.5rem 0;
+  overflow: hidden;
 
-    .ard-progress-bar__background,
+  .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: var(--ard-cmpcl--bg-colored);
+        background-color: inherit;
         top: 0;
-        bottom: 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-color: var(--ard-cmpcl--bg-colored-light);
+      background: none !important;
+      left: var(--ard-_progress-bar-buffer, 100%);
+      overflow: hidden;
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: -0.5rem;
         top: 0;
         bottom: 0;
-        left: 0;
-        right: 0;
-        opacity: 30%;
-    }
-    .ard-progress-bar__overlay {
-        width: var(--ard-_progress-bar-main, 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;
+    }
+  }
 
-    //! variants
-    &.ard-variant-sharp {
-        border-radius: 0;
-    }
-    &.ard-variant-pill {
-        border-radius: 9999px;
-    }
+  //! hiding the value
+  &.ard-progress-bar__size-default,
+  &.ard-progress-bar__hide-value,
+  &.ard-progress-bar__mode-buffer {
+    > .ard-progress-bar__value {
+      display: none;
+    }
+  }
 
-    //! 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);
     }
-
-    //! 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);
-        }
+    .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%;
-    }
+  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%;
-    }
+  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);
-    }
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-0.5rem);
+  }
 }

package/themes/default/progress-circle.scss

@@ -2,55 +2,55 @@
 @import '../variables';
 
 .ard-progress-circle {
-    @include coloringMixins.typeColors;
-    width: 3em;
+  @include coloringMixins.typeColors;
+  width: 3em;
 
-    --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
+  --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
 
-    //! appearances
-    &.ard-appearance-transparent {
-        .ard-progress-circle-background {
-            background: transparent;
-        }
+  //! appearances
+  &.ard-appearance-transparent {
+    .ard-progress-circle-background {
+      background: transparent;
     }
-    &.ard-appearance-colorless {
-        .ard-progress-circle-background {
-            background: $darken-overlay-medium;
-        }
+  }
+  &.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%;
-            }
-        }
+  }
+  &.ard-appearance-colored {
+    .ard-progress-circle-background {
+      opacity: 16%;
+      background: var(--ard-cmpcl--bg-colored);
     }
-    //! 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%);
-        }
+    //special case for no coloring
+    &.ard-color-none {
+      .ard-progress-circle-background {
+        opacity: 8%;
+      }
     }
-    //! value
-    .ard-progress-circle-value {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        font-weight: bold;
-        font-size: 0.9em;
+  }
+  //! 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%);
     }
-    &.ard-progress-circle-variant-full {
-        .ard-progress-circle-value {
-            display: none;
-        }
+  }
+  //! 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

@@ -3,110 +3,110 @@
 @import '../variables';
 
 ard-radio-group {
-    display: flex;
-    gap: 0.5rem 1rem;
+  display: flex;
+  gap: 0.5rem 1rem;
 }
 
 ard-radio {
-    display: inline-block;
-    width: max-content;
-    max-width: 100%;
+  display: inline-block;
+  width: max-content;
+  max-width: 100%;
 }
 
 .ard-radio {
-    @include CM.typeColors();
+  @include CM.typeColors();
 
-    outline: none;
-    font-size: 1em;
-    display: flex;
-    gap: 0.375em;
-    padding: 0;
-    width: 100%;
+  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-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;
+    > .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;
-        }
+      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%;
-            }
-        }
+    &: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);
-            }
-        }
+  &.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%;
-            }
-        }
+  }
+  &:focus {
+    > .ard-radio-circles {
+      > .ard-focus-overlay {
+        opacity: 15%;
+      }
     }
-    &:active {
-        > .ard-radio-circles {
-            > .ard-focus-overlay {
-                opacity: 25%;
-            }
-        }
+  }
+  &:active {
+    > .ard-radio-circles {
+      > .ard-focus-overlay {
+        opacity: 25%;
+      }
     }
+  }
 }
 
 .ard-disabled {
-    .ard-radio {
-        pointer-events: none;
-        opacity: 50%;
-        user-select: none;
-    }
+  .ard-radio {
+    pointer-events: none;
+    opacity: 50%;
+    user-select: none;
+  }
 }