@ardium-ui/ui 1.0.0 → 1.0.2

package/themes/default/snackbar.scss

@@ -4,57 +4,57 @@
 @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;
+  @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;
-    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);
-        }
-    }
+    align-items: center;
+    flex-grow: 1;
+    color: $text2-alt;
 
-    &.ard-snackbar-closing {
-        animation: hide 150ms ease-out forwards;
+    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;
+  opacity: 0%;
+  transform: scale(60%);
+  bottom: -0.375rem;
 }
 
 @keyframes show {
-    from {
-        @include animation();
-    }
+  from {
+    @include animation();
+  }
 }
 
 @keyframes hide {
-    to {
-        @include animation();
-    }
+  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;
+  display: inline-block;
+  height: 2rem;
+  width: 2rem;
+  position: relative;
+  margin: 0.25rem;
 }
 
 .ard-spinner {
-    @include CM.typeColors();
-    --ard-_spinner-duration: 1.4s;
-    position: absolute;
+  @include CM.typeColors();
+  --ard-_spinner-duration: 1.4s;
+  position: absolute;
 
-    scale: 2.3; //magic number
+  scale: 2.3; //magic number
 
-    > circle {
-        stroke: var(--ard-cmpcl--content);
-    }
+  > circle {
+    stroke: var(--ard-cmpcl--content);
+  }
 }

package/themes/default/stars.scss

@@ -6,117 +6,117 @@
 .ard-star-button,
 .ard-star-display,
 .ard-star-input {
-    @include coloringMixins.typeColors();
-    color: var(--ard-cmpcl--bg-colored);
+  @include coloringMixins.typeColors();
+  color: var(--ard-cmpcl--bg-colored);
 
-    &.ard-color-star {
-        color: $star;
-    }
+  &.ard-color-star {
+    color: $star;
+  }
 }
 .ard-star {
-    font-size: 1.5em;
-    width: 1em;
-    height: 1em;
-    position: relative;
+  font-size: 1.5em;
+  width: 1em;
+  height: 1em;
+  position: relative;
 
-    .ard-star-icon {
-        display: none;
-    }
-    .ard-star-icon {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-    }
-    .ard-star-selected::after {
-        content: 'star';
-        @include defaultMixins.icon(1);
-        font-size: 1em;
-        line-height: unset;
-    }
-    .ard-star-half::after {
-        content: 'star_half';
-        @include defaultMixins.icon;
-        font-size: 1em;
-        line-height: unset;
-    }
-    .ard-star-unselected::after {
-        content: 'star';
-        @include defaultMixins.icon;
-        font-size: 1em;
-        line-height: unset;
-    }
-    &.ard-star-fill-none .ard-star-unselected {
-        display: block;
-    }
-    &.ard-star-fill-half .ard-star-half {
-        display: block;
-    }
-    &.ard-star-fill-filled .ard-star-selected {
-        display: block;
-    }
+  .ard-star-icon {
+    display: none;
+  }
+  .ard-star-icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .ard-star-selected::after {
+    content: 'star';
+    @include defaultMixins.icon(1);
+    font-size: 1em;
+    line-height: unset;
+  }
+  .ard-star-half::after {
+    content: 'star_half';
+    @include defaultMixins.icon;
+    font-size: 1em;
+    line-height: unset;
+  }
+  .ard-star-unselected::after {
+    content: 'star';
+    @include defaultMixins.icon;
+    font-size: 1em;
+    line-height: unset;
+  }
+  &.ard-star-fill-none .ard-star-unselected {
+    display: block;
+  }
+  &.ard-star-fill-half .ard-star-half {
+    display: block;
+  }
+  &.ard-star-fill-filled .ard-star-selected {
+    display: block;
+  }
 }
 .ard-star-display,
 .ard-star-input {
-    display: flex;
-    user-select: none;
+  display: flex;
+  user-select: none;
 }
 .ard-star-input {
-    cursor: pointer;
+  cursor: pointer;
 
-    .ard-star-not-in-value {
-        opacity: 50%;
-    }
+  .ard-star-not-in-value {
+    opacity: 50%;
+  }
 }
 .ard-star-button {
-    position: relative;
-    cursor: pointer;
-    user-select: none;
-    font-size: inherit;
-    width: max-content;
-    height: max-content;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    outline: none;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  font-size: inherit;
+  width: max-content;
+  height: max-content;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline: none;
 
-    .ard-hitbox {
-        position: absolute;
-        left: -4px;
-        right: -4px;
-        bottom: -4px;
-        top: -4px;
-    }
+  .ard-hitbox {
+    position: absolute;
+    left: -4px;
+    right: -4px;
+    bottom: -4px;
+    top: -4px;
+  }
 
+  .ard-focus-overlay {
+    @include defaultMixins.focus-overlay;
+    position: absolute;
+    left: -0.125em;
+    right: -0.125em;
+    bottom: -0.125em;
+    top: -0.125em;
+    border-radius: 999px;
+    background: currentColor;
+  }
+  @include defaultMixins.focus-overlay-scale-addon();
+  &:hover,
+  &:focus {
     .ard-focus-overlay {
-        @include defaultMixins.focus-overlay;
-        position: absolute;
-        left: -0.125em;
-        right: -0.125em;
-        bottom: -0.125em;
-        top: -0.125em;
-        border-radius: 999px;
-        background: currentColor;
+      opacity: 10%;
     }
-    @include defaultMixins.focus-overlay-scale-addon();
-    &:hover,
-    &:focus {
-        .ard-focus-overlay {
-            opacity: 10%;
-        }
-    }
-    &:active {
-        .ard-focus-overlay {
-            opacity: 20%;
-        }
+  }
+  &:active {
+    .ard-focus-overlay {
+      opacity: 20%;
     }
+  }
 }
 //! disabled state for star-button
 .ard-disabled {
-    > .ard-star-button,
-    > .ard-star-input {
-        pointer-events: none;
-        opacity: 50%;
-    }
+  > .ard-star-button,
+  > .ard-star-input {
+    pointer-events: none;
+    opacity: 50%;
+  }
 }

package/themes/default/statebox.scss

@@ -3,107 +3,107 @@
 @import '../variables';
 
 .ard-statebox {
-    @include coloringMixins.typeColors();
-    font-size: 1.1em;
-    width: 1.25em;
-    height: 1.25em;
-    position: relative;
-    cursor: pointer;
-    user-select: none;
-    color: var(--ard-cmpcl--bg-colored);
-    border: none;
-    background: none;
-    padding: 0;
+  @include coloringMixins.typeColors();
+  font-size: 1.1em;
+  width: 1.25em;
+  height: 1.25em;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  color: var(--ard-cmpcl--bg-colored);
+  border: none;
+  background: none;
+  padding: 0;
 
-    .ard-hitbox {
-        position: absolute;
-        left: -4px;
-        right: -4px;
-        bottom: -4px;
-        top: -4px;
-    }
-    .ard-focus-overlay {
-        @include defaultMixins.focus-overlay;
-        position: absolute;
-        left: -0.5rem;
-        right: -0.5rem;
-        bottom: -0.5rem;
-        top: -0.5rem;
-        border-radius: 999px;
-        background: currentColor;
+  .ard-hitbox {
+    position: absolute;
+    left: -4px;
+    right: -4px;
+    bottom: -4px;
+    top: -4px;
+  }
+  .ard-focus-overlay {
+    @include defaultMixins.focus-overlay;
+    position: absolute;
+    left: -0.5rem;
+    right: -0.5rem;
+    bottom: -0.5rem;
+    top: -0.5rem;
+    border-radius: 999px;
+    background: currentColor;
+  }
+  .ard-statebox-icon,
+  .ard-statebox-frame::after {
+    @include defaultMixins.icon;
+    transition: opacity 0.2s $timing-fn;
+    color: currentColor;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .ard-statebox-frame::after {
+    content: '\e835';
+  }
+  &.ard-statebox-keep-frame {
+    .ard-statebox-icon {
+      font-size: 0.9em;
     }
-    .ard-statebox-icon,
-    .ard-statebox-frame::after {
-        @include defaultMixins.icon;
-        transition: opacity 0.2s $timing-fn;
-        color: currentColor;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-    }
-    .ard-statebox-frame::after {
-        content: '\e835';
+  }
+  &.ard-statebox-filled {
+    .ard-statebox-icon {
+      font-variation-settings: 'FILL' 1;
     }
     &.ard-statebox-keep-frame {
-        .ard-statebox-icon {
-            font-size: 0.9em;
-        }
-    }
-    &.ard-statebox-filled {
-        .ard-statebox-icon {
-            font-variation-settings: 'FILL' 1;
-        }
-        &.ard-statebox-keep-frame {
-            .ard-statebox-icon,
-            .ard-statebox-character {
-                color: var(--ard-cmpcl--on-bg);
-            }
-            .ard-statebox-frame::before {
-                content: '';
-                position: absolute;
-                left: 2px;
-                right: 2px;
-                top: 2px;
-                bottom: 2px;
-                background: currentColor;
-            }
-            &.ard-color-custom {
-                .ard-statebox-icon,
-                .ard-statebox-character {
-                    color: var(--ard-on-custom-color);
-                }
-            }
-        }
-    }
-    .ard-statebox-character {
-        font-weight: 900;
+      .ard-statebox-icon,
+      .ard-statebox-character {
+        color: var(--ard-cmpcl--on-bg);
+      }
+      .ard-statebox-frame::before {
+        content: '';
         position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        font-family: 'Roboto', sans-serif;
+        left: 2px;
+        right: 2px;
+        top: 2px;
+        bottom: 2px;
+        background: currentColor;
+      }
+      &.ard-color-custom {
+        .ard-statebox-icon,
+        .ard-statebox-character {
+          color: var(--ard-on-custom-color);
+        }
+      }
     }
-    &.ard-color-custom {
-        color: var(--ard-custom-color);
+  }
+  .ard-statebox-character {
+    font-weight: 900;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-family: 'Roboto', sans-serif;
+  }
+  &.ard-color-custom {
+    color: var(--ard-custom-color);
+  }
+  &:hover,
+  &:focus {
+    .ard-statebox-icon {
+      opacity: 100%;
     }
-    &:hover,
-    &:focus {
-        .ard-statebox-icon {
-            opacity: 100%;
-        }
-        .ard-focus-overlay {
-            opacity: 10%;
-        }
+    .ard-focus-overlay {
+      opacity: 10%;
     }
-    &:active {
-        .ard-focus-overlay {
-            opacity: 20%;
-        }
+  }
+  &:active {
+    .ard-focus-overlay {
+      opacity: 20%;
     }
+  }
 }
 //! disabled state
 .ard-disabled .ard-statebox {
-    pointer-events: none;
-    opacity: 60%;
+  pointer-events: none;
+  opacity: 60%;
 }

package/themes/default/table-pagination.scss

@@ -1,56 +1,56 @@
 .ard-pagination {
-    height: 2.9375rem;
-    width: 100%;
+  height: 2.9375rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding: 0 0.5rem 0 1rem;
+  box-sizing: border-box;
+
+  .ard-pagination__items-per-page {
     display: flex;
     align-items: center;
-    gap: 2rem;
-    padding: 0 0.5rem 0 1rem;
-    box-sizing: border-box;
-
-    .ard-pagination__items-per-page {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    .ard-pagination__current-page {
-        display: flex;
-        align-items: center;
-        gap: 1.25rem;
-    }
+    gap: 0.5rem;
+  }
+  .ard-pagination__current-page {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+  }
 
-    //! compact
-    &.ard-compact {
-        height: 2.1875rem;
-        font-size: 0.875rem;
-    }
+  //! compact
+  &.ard-compact {
+    height: 2.1875rem;
+    font-size: 0.875rem;
+  }
 
-    //! aligns
-    &.ard-align-left {
-        justify-content: flex-start;
-    }
-    &.ard-align-center {
-        justify-content: center;
-    }
-    &.ard-align-right {
-        justify-content: flex-end;
-    }
-    &.ard-align-split {
-        justify-content: space-between;
-    }
+  //! aligns
+  &.ard-align-left {
+    justify-content: flex-start;
+  }
+  &.ard-align-center {
+    justify-content: center;
+  }
+  &.ard-align-right {
+    justify-content: flex-end;
+  }
+  &.ard-align-split {
+    justify-content: space-between;
+  }
 
-    //! style overrides
-    .ard-select {
-        padding-left: 0.875em;
-    }
+  //! style overrides
+  .ard-select {
+    padding-left: 0.875em;
+  }
 }
 
 .ard-disabled {
-    .ard-pagination {
-        pointer-events: none;
-        user-select: none;
+  .ard-pagination {
+    pointer-events: none;
+    user-select: none;
 
-        .ard-pagination__text {
-            opacity: 50%;
-        }
+    .ard-pagination__text {
+      opacity: 50%;
     }
+  }
 }