@ardium-ui/ui 4.1.0 → 4.1.2

package/themes/default/modal.scss

@@ -1,94 +1,94 @@
-@use '../variables' as ARD;
-
-.ard-modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: grid;
-  place-items: center;
-
-  &.ard-modal-backdrop {
-    background: ARD.$darken-overlay-strong;
-  }
-  .ard-modal-panel {
-    padding: 1.25rem;
-    padding-top: 1rem;
-    background: ARD.$bg;
-    max-width: calc(100vw - 4rem);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1.5rem;
-
-    &.ard-modal-no-heading-text {
-      gap: 0.25rem;
-
-      .ard-modal-close-button {
-        position: absolute;
-        right: 0.5rem;
-        top: 0.5rem;
-      }
-    }
-    &.ard-modal-has-close-button {
-      .ard-modal-heading {
-        padding-right: 2rem;
-      }
-    }
-  }
-  .ard-modal-heading {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-
-    .ard-modal-heading-text {
-      font-size: 1.25rem;
-      color: ARD.$text;
-      font-weight: 500;
-      font-family: Roboto;
-    }
-    .ard-modal-close-button {
-      position: absolute;
-      right: 0.5rem;
-      top: 0.5rem;
-    }
-  }
-  //! appearances
-  &.ard-appearance-raised {
-    .ard-modal-panel {
-      box-shadow: ARD.$simple-shadow2;
-    }
-  }
-  //! variants
-  &.ard-variant-rounded {
-    .ard-modal-panel {
-      border-radius: 8px;
-    }
-  }
-  &.ard-variant-sharp {
-    .ard-modal-panel {
-      border-radius: 0;
-    }
-  }
-
-  //! compact
-  &.ard-compact {
-    .ard-modal-panel {
-      font-size: 90%;
-      padding: 0.75rem 2rem 1rem 2rem;
-      gap: 1rem;
-
-      &.ard-modal-no-heading-text {
-        gap: 0.25rem;
-
-        .ard-modal-close-button {
-          position: absolute;
-          right: 0.25rem;
-          top: 0.25rem;
-        }
-      }
-    }
-  }
-}
+@use '../variables' as ARD;
+
+.ard-modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: grid;
+  place-items: center;
+
+  &.ard-modal-backdrop {
+    background: ARD.$darken-overlay-strong;
+  }
+  .ard-modal-panel {
+    padding: 1.25rem;
+    padding-top: 1rem;
+    background: ARD.$bg;
+    max-width: calc(100vw - 4rem);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+
+    &.ard-modal-no-heading-text {
+      gap: 0.25rem;
+
+      .ard-modal-close-button {
+        position: absolute;
+        right: 0.5rem;
+        top: 0.5rem;
+      }
+    }
+    &.ard-modal-has-close-button {
+      .ard-modal-heading {
+        padding-right: 2rem;
+      }
+    }
+  }
+  .ard-modal-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    .ard-modal-heading-text {
+      font-size: 1.25rem;
+      color: ARD.$text;
+      font-weight: 500;
+      font-family: Roboto;
+    }
+    .ard-modal-close-button {
+      position: absolute;
+      right: 0.5rem;
+      top: 0.5rem;
+    }
+  }
+  //! appearances
+  &.ard-appearance-raised {
+    .ard-modal-panel {
+      box-shadow: ARD.$simple-shadow2;
+    }
+  }
+  //! variants
+  &.ard-variant-rounded {
+    .ard-modal-panel {
+      border-radius: 8px;
+    }
+  }
+  &.ard-variant-sharp {
+    .ard-modal-panel {
+      border-radius: 0;
+    }
+  }
+
+  //! compact
+  &.ard-compact {
+    .ard-modal-panel {
+      font-size: 90%;
+      padding: 0.75rem 2rem 1rem 2rem;
+      gap: 1rem;
+
+      &.ard-modal-no-heading-text {
+        gap: 0.25rem;
+
+        .ard-modal-close-button {
+          position: absolute;
+          right: 0.25rem;
+          top: 0.25rem;
+        }
+      }
+    }
+  }
+}

package/themes/default/progress-bar.scss

@@ -1,166 +1,166 @@
-@use './coloring' as CM;
-@use '../variables' as ARD;
-
-.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 ARD.$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 ARD.$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;
+@use '../variables' as ARD;
+
+.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 ARD.$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 ARD.$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;
-@use '../variables' as ARD;
-
-.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: ARD.$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;
+@use '../variables' as ARD;
+
+.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: ARD.$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;
+    }
+  }
+}