@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/styles/06-components/_components.tooltip.scss

@@ -4,134 +4,133 @@
 @use '../02-tools/tools.size' as *;
 
 .c-tooltip {
-    $root: &;
-
-    --#{$prefix}tooltip-max-width: #{rem($tooltip-max-width)};
-    --#{$prefix}tooltip-padding-x: #{rem($tooltip-padding-x)};
-    --#{$prefix}tooltip-padding-y: #{rem($tooltip-padding-y)};
-    --#{$prefix}tooltip-bg: #{$tooltip-bg};
-    --#{$prefix}tooltip-font-size: #{$tooltip-font-size};
-    --#{$prefix}tooltip-font-weight: #{$tooltip-font-weight};
-    --#{$prefix}tooltip-color: #{$tooltip-color};
-    --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
-    --#{$prefix}tooltip-border-width: #{$tooltip-border-width};
-    --#{$prefix}tooltip-border-color: #{$tooltip-border-color};
-    --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow};
-    --#{$prefix}tooltip-arrow-size: #{rem($tooltip-arrow-size)};
-
-
+  $root: &;
+
+  --#{$prefix}tooltip-max-width: #{rem($tooltip-max-width)};
+  --#{$prefix}tooltip-padding-x: #{rem($tooltip-padding-x)};
+  --#{$prefix}tooltip-padding-y: #{rem($tooltip-padding-y)};
+  --#{$prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$prefix}tooltip-font-size: #{$tooltip-font-size};
+  --#{$prefix}tooltip-font-weight: #{$tooltip-font-weight};
+  --#{$prefix}tooltip-color: #{$tooltip-color};
+  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$prefix}tooltip-border-width: #{$tooltip-border-width};
+  --#{$prefix}tooltip-border-color: #{$tooltip-border-color};
+  --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow};
+  --#{$prefix}tooltip-arrow-size: #{rem($tooltip-arrow-size)};
+
+  position: absolute;
+  bottom: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+  left: 50%;
+  width: max-content;
+  height: max-content;
+  max-width: var(--#{$prefix}tooltip-max-width);
+  transform: translateX(-50%);
+  pointer-events: none;
+  z-index: 1000;
+
+  &__content {
+    position: relative;
+    color: var(--#{$prefix}tooltip-color);
+    font-size: var(--#{$prefix}tooltip-font-size);
+    font-weight: var(--#{$prefix}tooltip-font-weight);
+    padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+    background-color: var(--#{$prefix}tooltip-bg);
+    border-radius: var(--#{$prefix}tooltip-border-radius);
+    z-index: 2;
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity 0.2s ease-out,
+      transform 0.2s ease-out;
+  }
+
+  &__arrow {
     position: absolute;
-    bottom: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+    bottom: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
     left: 50%;
-    width: max-content;
-    height: max-content;
-    max-width: var(--#{$prefix}tooltip-max-width);
-    transform: translateX(-50%);
-    pointer-events: none;
-    z-index: 1000;
-
-    &__content {
-        position: relative;
-        color: var(--#{$prefix}tooltip-color);
-        font-size: var(--#{$prefix}tooltip-font-size);
-        font-weight: var(--#{$prefix}tooltip-font-weight);
-        padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-        background-color: var(--#{$prefix}tooltip-bg);
-        border-radius: var(--#{$prefix}tooltip-border-radius);
-        z-index: 2;
-        opacity: 0;
-        transform: scale(0.95);
-        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
-    }
-
-    &__arrow {
-        position: absolute;
-        bottom: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-        left: 50%;
-        transform: translateX(-50%) rotate(45deg);
-        @include square(var(--#{$prefix}tooltip-arrow-size));
-        background-color: var(--#{$prefix}tooltip-bg);
-        z-index: 1;
+    transform: translateX(-50%) rotate(45deg);
+    @include square(var(--#{$prefix}tooltip-arrow-size));
+    background-color: var(--#{$prefix}tooltip-bg);
+    z-index: 1;
+  }
+
+  &--top-left {
+    left: auto;
+    right: calc(100% - var(--#{$prefix}tooltip-arrow-size) * 2);
+    transform: translateX(0);
+
+    #{$root}__arrow {
+      left: auto;
+      right: var(--#{$prefix}tooltip-arrow-size);
+      transform: rotate(45deg);
     }
+  }
 
+  &--top-right {
+    left: calc(100% - var(--#{$prefix}tooltip-arrow-size) * 2);
+    transform: translateX(0);
 
-    &--top-left {
-        left: auto;
-        right: calc(100% - var( --#{$prefix}tooltip-arrow-size) * 2);
-        transform: translateX(0);
-
-        #{$root}__arrow {
-            left: auto;
-            right: var(--#{$prefix}tooltip-arrow-size);
-            transform: rotate(45deg);
-        }
+    #{$root}__arrow {
+      left: var(--#{$prefix}tooltip-arrow-size);
+      transform: rotate(45deg);
     }
-
-    &--top-right {
-        left: calc(100% - var( --#{$prefix}tooltip-arrow-size) * 2);
-        transform: translateX(0);
-
-        #{$root}__arrow {
-            left: var(--#{$prefix}tooltip-arrow-size);
-            transform: rotate(45deg);
-        }
+  }
+
+  &--right {
+    left: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+    top: 50%;
+    transform: translateY(-50%);
+
+    #{$root}__arrow {
+      left: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
+      top: 50%;
+      bottom: auto;
+      transform: rotate(45deg) translateY(-50%);
+      transform-origin: top;
     }
-
-    &--right {
-        left: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-        top: 50%;
-        transform: translateY(-50%);
-
-        #{$root}__arrow {
-            left: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-            top: 50%;
-            bottom: auto;
-            transform: rotate(45deg) translateY(-50%);
-            transform-origin: top;
-        }
+  }
+
+  &--left {
+    left: auto;
+    right: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+    top: 50%;
+    transform: translateY(-50%);
+
+    #{$root}__arrow {
+      left: auto;
+      top: 50%;
+      bottom: auto;
+      right: calc(var(--#{$prefix}tooltip-arrow-size) / -5);
+      transform: rotate(45deg) translateY(-50%);
     }
+  }
 
+  &--bottom {
+    top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
 
-    &--left {
-        left: auto;
-        right: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-        top: 50%;
-        transform: translateY(-50%);
-
-        #{$root}__arrow {
-            left: auto;
-            top: 50%;
-            bottom: auto;
-            right: calc(var(--#{$prefix}tooltip-arrow-size) / -5);
-            transform: rotate(45deg) translateY(-50%);
-        }
-    }
-
-    &--bottom {
-        top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-        
-        #{$root}__arrow {
-            top: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-            bottom: auto;
-        }
+    #{$root}__arrow {
+      top: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
+      bottom: auto;
     }
+  }
 
-    &--bottom-left {
-        top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-        left: 0;
-    }
+  &--bottom-left {
+    top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+    left: 0;
+  }
 
-    &--bottom-right {
-        top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-        right: 0;
-    }
+  &--bottom-right {
+    top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+    right: 0;
+  }
 
-    &.is-active {
-        pointer-events: auto;
+  &.is-active {
+    pointer-events: auto;
 
-        .c-tooltip__content {
-            opacity: 1;
-            transform: scale(1);
-        }
+    .c-tooltip__content {
+      opacity: 1;
+      transform: scale(1);
     }
-}
+  }
+}

package/src/styles/06-components/_components.upload.scss

@@ -35,9 +35,7 @@
   --#{$prefix}upload-helper-text-font-size: #{$upload-helper-text-font-size};
   --#{$prefix}upload-helper-text-font-weight: #{$upload-helper-text-font-weight};
   --#{$prefix}upload-helper-text-color: #{$upload-helper-text-color};
-  --#{$prefix}upload-helper-text-margin-top: #{rem(
-      $upload-helper-text-margin-top
-    )};
+  --#{$prefix}upload-helper-text-margin-top: #{rem($upload-helper-text-margin-top)};
   --#{$prefix}upload-loader-padding-x: #{rem($upload-loader-padding-x)};
   --#{$prefix}upload-loader-padding-y: #{rem($upload-loader-padding-y)};
   --#{$prefix}upload-loader-border-radius: #{$upload-loader-border-radius};
@@ -49,9 +47,7 @@
   --#{$prefix}upload-loader-title-font-weight: #{$upload-loader-title-font-weight};
   --#{$prefix}upload-loader-text-color: #{$upload-loader-text-color};
   --#{$prefix}upload-loader-text-font-size: #{$upload-loader-text-font-size};
-  --#{$prefix}upload-loader-text-margin-top: #{rem(
-      $upload-loader-text-margin-top
-    )};
+  --#{$prefix}upload-loader-text-margin-top: #{rem($upload-loader-text-margin-top)};
   --#{$prefix}upload-loader-color: #{$upload-loader-progress-color};
   --#{$prefix}upload-loader-bar-height: #{rem($upload-loader-bar-height)};
   --#{$prefix}upload-loader-bar-margin-top: #{rem($upload-loader-bar-margin-top)};
@@ -78,11 +74,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: var(--#{$prefix}upload-inner-padding-y)
-      var(--#{$prefix}upload-inner-padding-x);
+    padding: var(--#{$prefix}upload-inner-padding-y) var(--#{$prefix}upload-inner-padding-x);
     border-radius: var(--#{$prefix}upload-border-radius);
-    border: var(--#{$prefix}upload-border-width) dashed
-      var(--#{$prefix}upload-border-color);
+    border: var(--#{$prefix}upload-border-width) dashed var(--#{$prefix}upload-border-color);
   }
 
   &__icon {
@@ -143,8 +137,7 @@
     position: relative;
     width: 100%;
     max-width: rem($upload-width);
-    padding: var(--#{$prefix}upload-loader-padding-y)
-      var(--#{$prefix}upload-loader-padding-x);
+    padding: var(--#{$prefix}upload-loader-padding-y) var(--#{$prefix}upload-loader-padding-x);
     border: var(--#{$prefix}upload-loader-border-width) solid
       var(--#{$prefix}upload-loader-border-color);
     border-radius: var(--#{$prefix}upload-loader-border-radius);
@@ -183,7 +176,6 @@
     width: 22px;
     height: 22px;
 
-
     svg {
       width: 100%;
       height: 100%;
@@ -197,15 +189,13 @@
         stroke-linecap: round;
         transform: translate(1px, 1px);
 
-        &:nth-child(2)
-        {
+        &:nth-child(2) {
           stroke-dasharray: 63;
           stroke-dashoffset: 63;
         }
 
-        &:nth-child(2)
-        {
-          stroke-dashoffset: calc(63 - (63 * var(--upload-loader-percentage) ) / 100);
+        &:nth-child(2) {
+          stroke-dashoffset: calc(63 - (63 * var(--upload-loader-percentage)) / 100);
           stroke: var(--#{$prefix}upload-loader-color);
         }
       }

package/src/styles/06-components/_index.scss

@@ -1,49 +1,49 @@
 // Forward all component files
-@forward "components.accordion";
-@forward "components.avatar";
-@forward "components.avatar-group";
-@forward "components.badge";
-@forward "components.breadcrumb";
-@forward "components.btn-group";
-@forward "components.button";
-@forward "components.datepicker";
-@forward "components.card";
-@forward "components.checkbox-group";
-@forward "components.checkbox";
-@forward "components.color-mode-toggle";
-@forward "components.countdown";
-@forward "components.data-table";
-@forward "components.dropdown";
-@forward "components.edge-panel";
-@forward "components.form";
-@forward "components.hero";
-@forward "components.form-group";
-@forward "components.input";
-@forward "components.list-group";
-@forward "components.list";
-@forward "components.menu";
-@forward "components.messages";
-@forward "components.modal";
-@forward "components.nav";
-@forward "components.navbar";
-@forward "components.callout";
-@forward "components.pagination";
-@forward "components.popover";
-@forward "components.product-review";
-@forward "components.progress";
-@forward "components.rating";
-@forward "components.river";
-@forward "components.sectionintro";
-@forward "components.select";
-@forward "components.side-menu";
-@forward "components.skeleton";
-@forward "components.spinner";
-@forward "components.steps";
-@forward "components.tabs";
-@forward "components.testimonials";
-@forward "components.todo";
-@forward "components.toggle";
-@forward "components.tooltip";
-@forward "components.upload";
-@forward "components.photoviewer";
-@forward "components.image-gallery";
+@forward 'components.accordion';
+@forward 'components.avatar';
+@forward 'components.avatar-group';
+@forward 'components.badge';
+@forward 'components.breadcrumb';
+@forward 'components.btn-group';
+@forward 'components.button';
+@forward 'components.datepicker';
+@forward 'components.card';
+@forward 'components.checkbox-group';
+@forward 'components.checkbox';
+@forward 'components.color-mode-toggle';
+@forward 'components.countdown';
+@forward 'components.data-table';
+@forward 'components.dropdown';
+@forward 'components.edge-panel';
+@forward 'components.form';
+@forward 'components.hero';
+@forward 'components.form-group';
+@forward 'components.input';
+@forward 'components.list-group';
+@forward 'components.list';
+@forward 'components.menu';
+@forward 'components.messages';
+@forward 'components.modal';
+@forward 'components.nav';
+@forward 'components.navbar';
+@forward 'components.callout';
+@forward 'components.pagination';
+@forward 'components.popover';
+@forward 'components.product-review';
+@forward 'components.progress';
+@forward 'components.rating';
+@forward 'components.river';
+@forward 'components.sectionintro';
+@forward 'components.select';
+@forward 'components.side-menu';
+@forward 'components.skeleton';
+@forward 'components.spinner';
+@forward 'components.steps';
+@forward 'components.tabs';
+@forward 'components.testimonials';
+@forward 'components.todo';
+@forward 'components.toggle';
+@forward 'components.tooltip';
+@forward 'components.upload';
+@forward 'components.photoviewer';
+@forward 'components.image-gallery';

package/src/styles/99-utilities/_index.scss

@@ -1,21 +1,21 @@
 // Forward all utility files
-@forward "utilities.background";
-@forward "utilities.border";
-@forward "utilities.clearfix";
-@forward "utilities.display";
-@forward "utilities.flex";
-@forward "utilities.link";
-@forward "utilities.object-fit";
-@forward "utilities.opacity";
-@forward "utilities.overflow";
-@forward "utilities.position";
-@forward "utilities.shadow";
-@forward "utilities.sizes";
-@forward "utilities.spacing";
-@forward "utilities.text";
-@forward "utilities.visibility";
-@forward "utilities.visually-hidden";
-@forward "utilities.z-index";
+@forward 'utilities.background';
+@forward 'utilities.border';
+@forward 'utilities.clearfix';
+@forward 'utilities.display';
+@forward 'utilities.flex';
+@forward 'utilities.link';
+@forward 'utilities.object-fit';
+@forward 'utilities.opacity';
+@forward 'utilities.overflow';
+@forward 'utilities.position';
+@forward 'utilities.shadow';
+@forward 'utilities.sizes';
+@forward 'utilities.spacing';
+@forward 'utilities.text';
+@forward 'utilities.visibility';
+@forward 'utilities.visually-hidden';
+@forward 'utilities.z-index';
 
 // Forward the main utilities generator
-@forward "utilities";
+@forward 'utilities';

package/src/styles/99-utilities/_utilities.background.scss

@@ -5,24 +5,24 @@
 
 // Define utilities for background
 $utilities-bg: (
-  "background-color": (
+  'background-color': (
     property: background-color,
     class: u-bg,
     values: map.merge(
-      color-maps.$utilities-bg-colors,
-      (
-        "transparent": transparent,
-      )
-    )
+        color-maps.$utilities-bg-colors,
+        (
+          'transparent': transparent,
+        )
+      ),
   ),
-  "subtle-background-color": (
+  'subtle-background-color': (
     property: background-color,
     class: u-bg,
     values: map.merge(
-      color-maps.$utilities-bg-subtle,
-      (
-        "transparent": transparent,
-      )
-    )
+        color-maps.$utilities-bg-subtle,
+        (
+          'transparent': transparent,
+        )
+      ),
   ),
-);
+);

package/src/styles/99-utilities/_utilities.border.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use "../01-settings/settings.config" as config;
-@use "../01-settings/settings.maps" as color-maps;
-@use "../01-settings/settings.border" as border;
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.border' as border;
 
 // Define utilities for borders
 $utilities-border: (
@@ -11,8 +11,8 @@ $utilities-border: (
     values: (
       null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
         var(--#{config.$prefix}border-color),
-      0: 0
-    )
+      0: 0,
+    ),
   ),
   'border-top': (
     property: border-top,
@@ -20,8 +20,8 @@ $utilities-border: (
     values: (
       null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
         var(--#{config.$prefix}border-color),
-      0: 0
-    )
+      0: 0,
+    ),
   ),
   'border-end': (
     property: border-right,
@@ -29,8 +29,8 @@ $utilities-border: (
     values: (
       null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
         var(--#{config.$prefix}border-color),
-      0: 0
-    )
+      0: 0,
+    ),
   ),
   'border-bottom': (
     property: border-bottom,
@@ -38,8 +38,8 @@ $utilities-border: (
     values: (
       null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
         var(--#{config.$prefix}border-color),
-      0: 0
-    )
+      0: 0,
+    ),
   ),
   'border-start': (
     property: border-left,
@@ -47,26 +47,26 @@ $utilities-border: (
     values: (
       null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
         var(--#{config.$prefix}border-color),
-      0: 0
-    )
+      0: 0,
+    ),
   ),
   'border-color': (
     property: border-color,
     class: u-border,
     local-vars: (
-      'border-opacity': 1
+      'border-opacity': 1,
     ),
-    values: color-maps.$utilities-border-colors
+    values: color-maps.$utilities-border-colors,
   ),
   'subtle-border-color': (
     property: border-color,
     class: u-border,
-    values: color-maps.$utilities-border-subtle
+    values: color-maps.$utilities-border-subtle,
   ),
   'border-width': (
     property: border-width,
     class: u-border,
-    values: border.$border-widths
+    values: border.$border-widths,
   ),
   'border-opacity': (
     css-var: true,
@@ -76,8 +76,8 @@ $utilities-border: (
       25: 0.25,
       50: 0.5,
       75: 0.75,
-      100: 1
-    )
+      100: 1,
+    ),
   ),
   'rounded': (
     property: border-radius,
@@ -91,8 +91,8 @@ $utilities-border: (
       xl: var(--#{config.$prefix}border-radius-xl),
       xxl: var(--#{config.$prefix}border-radius-xxl),
       circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
+      pill: var(--#{config.$prefix}border-radius-pill),
+    ),
   ),
   'rounded-top': (
     property: border-top-left-radius border-top-right-radius,
@@ -106,8 +106,8 @@ $utilities-border: (
       xl: var(--#{config.$prefix}border-radius-xl),
       xxl: var(--#{config.$prefix}border-radius-xxl),
       circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
+      pill: var(--#{config.$prefix}border-radius-pill),
+    ),
   ),
   'rounded-end': (
     property: border-top-right-radius border-bottom-right-radius,
@@ -121,8 +121,8 @@ $utilities-border: (
       xl: var(--#{config.$prefix}border-radius-xl),
       xxl: var(--#{config.$prefix}border-radius-xxl),
       circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
+      pill: var(--#{config.$prefix}border-radius-pill),
+    ),
   ),
   'rounded-bottom': (
     property: border-bottom-right-radius border-bottom-left-radius,
@@ -136,8 +136,8 @@ $utilities-border: (
       xl: var(--#{config.$prefix}border-radius-xl),
       xxl: var(--#{config.$prefix}border-radius-xxl),
       circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
+      pill: var(--#{config.$prefix}border-radius-pill),
+    ),
   ),
   'rounded-start': (
     property: border-bottom-left-radius border-top-left-radius,
@@ -151,7 +151,7 @@ $utilities-border: (
       xl: var(--#{config.$prefix}border-radius-xl),
       xxl: var(--#{config.$prefix}border-radius-xxl),
       circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
-  )
+      pill: var(--#{config.$prefix}border-radius-pill),
+    ),
+  ),
 );

package/src/styles/99-utilities/_utilities.clearfix.scss

@@ -1,4 +1,4 @@
-@use "../02-tools/tools.clearfix" as *;
+@use '../02-tools/tools.clearfix' as *;
 
 .u-clearfix {
   @include clearfix;