@ardium-ui/ui 1.0.0 → 1.0.1

package/themes/default/slide-toggle.scss

@@ -3,149 +3,149 @@
 @import '../variables';
 
 .ard-slide-toggle {
-    @include coloringMixins.typeColors();
+  @include coloringMixins.typeColors();
+  position: relative;
+  height: 1.25em;
+  font-size: inherit;
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  background: none;
+  padding: 0;
+
+  .ard-hitbox {
+    position: absolute;
+    left: -4px;
+    right: -4px;
+    bottom: -4px;
+    top: -4px;
+  }
+  .ard-slide-toggle-track {
     position: relative;
-    height: 1.25em;
+    width: 2.25em;
+    height: 0.75em;
     font-size: inherit;
-    cursor: pointer;
-    user-select: none;
-    border: none;
-    background: none;
-    padding: 0;
-
-    .ard-hitbox {
-        position: absolute;
-        left: -4px;
-        right: -4px;
-        bottom: -4px;
-        top: -4px;
-    }
-    .ard-slide-toggle-track {
-        position: relative;
-        width: 2.25em;
-        height: 0.75em;
-        font-size: inherit;
-        border-radius: 999px;
-        overflow: hidden;
-        background: $bg;
+    border-radius: 999px;
+    overflow: hidden;
+    background: $bg;
 
-        .ard-slide-toggle-track-overlay {
-            position: absolute;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            top: 0;
-            background: $overlay;
-            opacity: 20%;
-        }
+    .ard-slide-toggle-track-overlay {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      background: $overlay;
+      opacity: 20%;
     }
-    .ard-slide-toggle-handle {
-        width: 1.25em;
-        height: 1.25em;
-        font-size: inherit;
-        border-radius: 999px;
-        background: $bg-f;
-        position: absolute;
-        top: 0;
-        left: 0;
-        box-shadow: $simple-shadow;
-        overflow: hidden;
+  }
+  .ard-slide-toggle-handle {
+    width: 1.25em;
+    height: 1.25em;
+    font-size: inherit;
+    border-radius: 999px;
+    background: $bg-f;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-shadow: $simple-shadow;
+    overflow: hidden;
 
-        transition:
-            box-shadow 0.28s $timing-fn,
-            left 0.1s ease,
-            background-color 0.1s ease,
-            transform 0.1s ease;
+    transition:
+      box-shadow 0.28s $timing-fn,
+      left 0.1s ease,
+      background-color 0.1s ease,
+      transform 0.1s ease;
 
-        .ard-focus-overlay {
-            @include defaultMixins.focus-overlay;
-            background: var(--ard-cmpcl--overlay-colored);
-        }
-        .ard-slide-toggle-icon {
-            @include defaultMixins.icon(0, 600);
-            font-size: 0.95em;
-            color: $text;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            transition: color 0.1s ease;
+    .ard-focus-overlay {
+      @include defaultMixins.focus-overlay;
+      background: var(--ard-cmpcl--overlay-colored);
+    }
+    .ard-slide-toggle-icon {
+      @include defaultMixins.icon(0, 600);
+      font-size: 0.95em;
+      color: $text;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      transition: color 0.1s ease;
 
-            &.ard-icon-for-selected {
-                display: none;
-            }
-            &.ard-icon-for-unselected {
-                display: block;
-            }
-        }
+      &.ard-icon-for-selected {
+        display: none;
+      }
+      &.ard-icon-for-unselected {
+        display: block;
+      }
     }
-    &:hover,
-    &:focus {
-        .ard-slide-toggle-handle {
-            box-shadow: $simple-shadow2;
+  }
+  &:hover,
+  &:focus {
+    .ard-slide-toggle-handle {
+      box-shadow: $simple-shadow2;
 
-            .ard-focus-overlay {
-                opacity: 4%;
-            }
-        }
+      .ard-focus-overlay {
+        opacity: 4%;
+      }
     }
-    &:active {
-        .ard-slide-toggle-handle {
-            box-shadow: $simple-shadow3;
+  }
+  &:active {
+    .ard-slide-toggle-handle {
+      box-shadow: $simple-shadow3;
 
-            .ard-focus-overlay {
-                opacity: 12%;
-            }
-        }
+      .ard-focus-overlay {
+        opacity: 12%;
+      }
     }
+  }
 }
 .ard-slide-toggle.ard-slide-toggle-selected {
-    .ard-slide-toggle-track-overlay {
-        background: var(--ard-cmpcl--content);
-        opacity: 40%;
-    }
-    .ard-slide-toggle-handle {
-        left: 100%;
-        transform: translateX(-100%);
-        background: var(--ard-cmpcl--bg);
+  .ard-slide-toggle-track-overlay {
+    background: var(--ard-cmpcl--content);
+    opacity: 40%;
+  }
+  .ard-slide-toggle-handle {
+    left: 100%;
+    transform: translateX(-100%);
+    background: var(--ard-cmpcl--bg);
 
-        .ard-slide-toggle-icon {
-            color: var(--ard-cmpcl--on-bg);
+    .ard-slide-toggle-icon {
+      color: var(--ard-cmpcl--on-bg);
 
-            &.ard-icon-for-selected {
-                display: block;
-            }
-            &.ard-icon-for-unselected {
-                display: none;
-            }
-        }
+      &.ard-icon-for-selected {
+        display: block;
+      }
+      &.ard-icon-for-unselected {
+        display: none;
+      }
     }
-    //edge case for no coloring
-    &.ard-color-none {
-        .ard-slide-toggle-track-overlay {
-            opacity: 35%;
-        }
+  }
+  //edge case for no coloring
+  &.ard-color-none {
+    .ard-slide-toggle-track-overlay {
+      opacity: 35%;
     }
+  }
 }
 //! disabled state
 .ard-disabled .ard-slide-toggle {
-    pointer-events: none;
-    opacity: 60%;
+  pointer-events: none;
+  opacity: 60%;
 
+  .ard-slide-toggle-track-overlay {
+    opacity: 20%;
+  }
+  .ard-focus-overlay {
+    opacity: 20%;
+  }
+  .ard-slide-toggle-icon {
+    opacity: 60%;
+  }
+  //edge case for no coloring and for unselected state
+  &.ard-color-none,
+  &:not(.ard-slide-toggle-selected) {
     .ard-slide-toggle-track-overlay {
-        opacity: 20%;
-    }
-    .ard-focus-overlay {
-        opacity: 20%;
-    }
-    .ard-slide-toggle-icon {
-        opacity: 60%;
-    }
-    //edge case for no coloring and for unselected state
-    &.ard-color-none,
-    &:not(.ard-slide-toggle-selected) {
-        .ard-slide-toggle-track-overlay {
-            opacity: 12.5%;
-        }
+      opacity: 12.5%;
     }
+  }
 }

package/themes/default/slider.scss

@@ -5,220 +5,220 @@
 
 .ard-slider-container-master,
 .ard-range-slider-container-master {
-    @include coloringMixins.typeColors();
+  @include coloringMixins.typeColors();
 
-    position: relative;
-    font-size: 1rem;
-    width: 20em;
-    max-width: 100%;
-    padding: 0 0.625em;
+  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;
-    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 * {
+    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-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-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 {
-        --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;
+      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);
-        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;
-        }
+      }
+    }
+  }
+  //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;
     }
+  }
 }