@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -22,12 +22,10 @@
   color: var(--#{config.$prefix}spinner-background-color);
   position: relative;
   @include size.square(var(--#{config.$prefix}spinner-size));
-  border: var(--#{config.$prefix}spinner-border-width) solid
-    var(--#{config.$prefix}spinner-color);
+  border: var(--#{config.$prefix}spinner-border-width) solid var(--#{config.$prefix}spinner-color);
   border-right-color: currentcolor;
   border-radius: 50%;
-  animation: var(--#{config.$prefix}spinner-animation-speed) ease-in-out infinite
-    spinner;
+  animation: var(--#{config.$prefix}spinner-animation-speed) ease-in-out infinite spinner;
 
   @each $size, $value in spinner.$spinner-sizes {
     &--#{$size} {

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

@@ -5,96 +5,95 @@
 @use '../02-tools/tools.hidden' as *;
 
 .c-steps {
-    $root: &;
+  $root: &;
 
-    --#{$prefix}steps-padding-x: #{rem($steps-padding-x)};
-    --#{$prefix}steps-padding-y: #{rem($steps-padding-y)};
-    --#{$prefix}steps-item-color: #{$steps-item-color};
-    --#{$prefix}steps-item-bg:    #{$steps-item-bg};
-    --#{$prefix}steps-item-active-color: #{$steps-item-active-color};
-    --#{$prefix}steps-item-active-bg: #{$steps-item-active-bg};
-    --#{$prefix}steps-item-number-bg: #{$steps-item-number-bg};
-    --#{$prefix}steps-item-number-color: #{$steps-item-number-color};
-    --#{$prefix}steps-item-number-active-color: #{$steps-item-number-active-color};
-    --#{$prefix}steps-item-number-size: #{$steps-item-number-size};
-    --#{$prefix}steps-item-number-font-size: #{$steps-item-number-font-size};
-    --#{$prefix}steps-item-number-border-radius: #{$steps-item-number-border-radius};
-    --#{$prefix}steps-item-font-size: #{$steps-item-font-size};
-    --#{$prefix}steps-item-content-gap: #{rem($steps-item-content-gap)};
-    --#{$prefix}steps-line-height: #{rem($steps-line-height)};
-    --#{$prefix}steps-line-width: #{rem($steps-line-width)};
-    --#{$prefix}steps-gap: #{rem($steps-gap)};
-    --#{$prefix}steps-line-height-vertical: #{rem($steps-line-height-vertical)};
-    --#{$prefix}steps-line-width-vertical: #{rem($steps-line-width-vertical)};
+  --#{$prefix}steps-padding-x: #{rem($steps-padding-x)};
+  --#{$prefix}steps-padding-y: #{rem($steps-padding-y)};
+  --#{$prefix}steps-item-color: #{$steps-item-color};
+  --#{$prefix}steps-item-bg: #{$steps-item-bg};
+  --#{$prefix}steps-item-active-color: #{$steps-item-active-color};
+  --#{$prefix}steps-item-active-bg: #{$steps-item-active-bg};
+  --#{$prefix}steps-item-number-bg: #{$steps-item-number-bg};
+  --#{$prefix}steps-item-number-color: #{$steps-item-number-color};
+  --#{$prefix}steps-item-number-active-color: #{$steps-item-number-active-color};
+  --#{$prefix}steps-item-number-size: #{$steps-item-number-size};
+  --#{$prefix}steps-item-number-font-size: #{$steps-item-number-font-size};
+  --#{$prefix}steps-item-number-border-radius: #{$steps-item-number-border-radius};
+  --#{$prefix}steps-item-font-size: #{$steps-item-font-size};
+  --#{$prefix}steps-item-content-gap: #{rem($steps-item-content-gap)};
+  --#{$prefix}steps-line-height: #{rem($steps-line-height)};
+  --#{$prefix}steps-line-width: #{rem($steps-line-width)};
+  --#{$prefix}steps-gap: #{rem($steps-gap)};
+  --#{$prefix}steps-line-height-vertical: #{rem($steps-line-height-vertical)};
+  --#{$prefix}steps-line-width-vertical: #{rem($steps-line-width-vertical)};
 
-    display: inline-flex;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--#{$prefix}steps-gap);
+
+  &__item {
+    display: flex;
     align-items: center;
     gap: var(--#{$prefix}steps-gap);
 
-    &__item{
-        display: flex;
-        align-items: center;
-        gap: var(--#{$prefix}steps-gap);
-
-        &:first-child {
-            #{$root}__line {
-                @include visually-hidden();
-            }
-        }
-
-        &.is-active{
-            --#{$prefix}steps-item-bg: var(--#{$prefix}steps-item-active-bg);
-            --#{$prefix}steps-item-number-bg: var(--#{$prefix}steps-item-active-bg);
-            --#{$prefix}steps-item-number-color: var(--#{$prefix}steps-item-number-active-color);
-            --#{$prefix}steps-item-color: var(--#{$prefix}steps-item-active-color);
-        }
+    &:first-child {
+      #{$root}__line {
+        @include visually-hidden();
+      }
     }
 
-    &__line{
-        width: var(--#{$prefix}steps-line-width);
-        height: var(--#{$prefix}steps-line-height);
-        background-color: var(--#{$prefix}steps-item-bg);
-        transition: 1s;
+    &.is-active {
+      --#{$prefix}steps-item-bg: var(--#{$prefix}steps-item-active-bg);
+      --#{$prefix}steps-item-number-bg: var(--#{$prefix}steps-item-active-bg);
+      --#{$prefix}steps-item-number-color: var(--#{$prefix}steps-item-number-active-color);
+      --#{$prefix}steps-item-color: var(--#{$prefix}steps-item-active-color);
     }
+  }
 
-    &__content {
-        display: flex;
-        align-items: center;
-        gap: var(--#{$prefix}steps-item-content-gap);
-    }
+  &__line {
+    width: var(--#{$prefix}steps-line-width);
+    height: var(--#{$prefix}steps-line-height);
+    background-color: var(--#{$prefix}steps-item-bg);
+    transition: 1s;
+  }
 
-    &__number{
-        display: grid;
-        place-items: center;
-        @include square(var(--#{$prefix}steps-item-number-size));
-        color: var(--#{$prefix}steps-item-number-color);
-        font-size: var(--#{$prefix}steps-item-number-font-size);
-        background-color: var(--#{$prefix}steps-item-number-bg);
-        border-radius: var(--#{$prefix}steps-item-number-border-radius);
-    }
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: var(--#{$prefix}steps-item-content-gap);
+  }
 
-    &__text {
-        color: var(--#{$prefix}steps-item-color);
-        font-size: var(--#{$prefix}steps-item-font-size);
-    }
+  &__number {
+    display: grid;
+    place-items: center;
+    @include square(var(--#{$prefix}steps-item-number-size));
+    color: var(--#{$prefix}steps-item-number-color);
+    font-size: var(--#{$prefix}steps-item-number-font-size);
+    background-color: var(--#{$prefix}steps-item-number-bg);
+    border-radius: var(--#{$prefix}steps-item-number-border-radius);
+  }
 
-    &--vertical {
-        --#{$prefix}steps-line-width: var(--#{$prefix}steps-line-width-vertical);
-        --#{$prefix}steps-line-height: var(--#{$prefix}steps-line-height-vertical);
-        flex-direction: column;
-        gap: 0;
+  &__text {
+    color: var(--#{$prefix}steps-item-color);
+    font-size: var(--#{$prefix}steps-item-font-size);
+  }
+
+  &--vertical {
+    --#{$prefix}steps-line-width: var(--#{$prefix}steps-line-width-vertical);
+    --#{$prefix}steps-line-height: var(--#{$prefix}steps-line-height-vertical);
+    flex-direction: column;
+    gap: 0;
 
-        #{$root}{
-            &__item{
-                gap: 0;
-                flex-direction: column;
-                align-items: flex-start;
-            }
+    #{$root} {
+      &__item {
+        gap: 0;
+        flex-direction: column;
+        align-items: flex-start;
+      }
 
-            &__line {
-                margin-left: calc(var(--#{$prefix}steps-item-number-size) / 2);
-            }
-        }
+      &__line {
+        margin-left: calc(var(--#{$prefix}steps-item-number-size) / 2);
+      }
     }
+  }
 }
-

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

@@ -14,7 +14,7 @@
   --#{$prefix}tabs-nav-btn-font-size: #{$tabs-nav-btn-font-size};
   --#{$prefix}tabs-nav-btn-font-weight: #{$tabs-nav-btn-font-weight};
   --#{$prefix}tabs-nav-btn-color: #{$tabs-nav-btn-color};
-  --#{$prefix}tabs-nav-btn-active-color: #{$tabs-nav-btn-active-color}; 
+  --#{$prefix}tabs-nav-btn-active-color: #{$tabs-nav-btn-active-color};
   --#{$prefix}tabs-nav-btn-disabled-color: #{$tabs-nav-btn-disabled-color};
   --#{$prefix}tabs-nav-btn-bg: #{$tabs-nav-btn-bg};
   --#{$prefix}tabs-nav-btn-bg-hover: #{$tabs-nav-btn-bg-hover};
@@ -40,7 +40,7 @@
     padding-left: 0;
     margin-bottom: 0;
 
-    @include media-breakpoint-down(sm){
+    @include media-breakpoint-down(sm) {
       flex-wrap: wrap;
     }
   }
@@ -48,7 +48,7 @@
   &__nav-item {
     width: 50%;
 
-    &+& {
+    & + & {
       margin-left: var(--#{$prefix}tabs-nav-btns-gap);
     }
   }
@@ -65,22 +65,27 @@
     padding: var(--#{$prefix}tabs-nav-btn-padding-y) var(--#{$prefix}tabs-nav-btn-padding-x);
     border-radius: var(--#{$prefix}tabs-nav-btn-border-radius);
     border: var(--#{$prefix}tabs-nav-btn-border-width) solid transparent;
-    border-bottom: var(--#{$prefix}tabs-nav-btn-border-width) solid var(--#{$prefix}tabs-nav-btn-border-color);
+    border-bottom: var(--#{$prefix}tabs-nav-btn-border-width) solid
+      var(--#{$prefix}tabs-nav-btn-border-color);
     background-color: var(--#{$prefix}tabs-nav-btn-bg);
     @include basic-transition();
-   
 
-    &:active, &.is-active {
+    &:active,
+    &.is-active {
       color: var(--#{$prefix}tabs-nav-btn-active-color);
-      border-color: transparent transparent var(--#{$prefix}tabs-nav-btn-border-active-color) transparent;
+      border-color: transparent transparent var(--#{$prefix}tabs-nav-btn-border-active-color)
+        transparent;
     }
 
     &:hover {
       background-color: var(--#{$prefix}tabs-nav-btn-bg-hover);
     }
 
-    &:disabled, &.is-disabled {
-      --#{$prefix}tabs-nav-btn-border-active-color: var(--#{$prefix}tabs-nav-btn-border-disabled-color);
+    &:disabled,
+    &.is-disabled {
+      --#{$prefix}tabs-nav-btn-border-active-color: var(
+        --#{$prefix}tabs-nav-btn-border-disabled-color
+      );
 
       color: var(--#{$prefix}tabs-nav-btn-border-disabled-color);
       background-color: var(--#{$prefix}tabs-nav-btn-bg-disabled);
@@ -91,9 +96,9 @@
       outline: none;
       border-color: var(--#{$prefix}tabs-nav-btn-border-active-color);
     }
-    
+
     > i {
-      font-size:   var(--#{$prefix}tabs-nav-btn-icon-size);
+      font-size: var(--#{$prefix}tabs-nav-btn-icon-size);
     }
   }
 
@@ -105,7 +110,7 @@
     display: none;
     opacity: 0;
     overflow: hidden;
-    transition: opacity .3s cubic-bezier(0.65, 0.32, 1, 0.72);
+    transition: opacity 0.3s cubic-bezier(0.65, 0.32, 1, 0.72);
 
     &.is-active {
       display: block;

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

@@ -3,66 +3,63 @@
 @use '../02-tools/tools.rem' as *;
 
 .c-testimonial {
+  --#{$prefix}testimonial-width: #{$testimonial-width};
+  --#{$prefix}testimonial-padding-x: #{rem($testimonial-padding-x)};
+  --#{$prefix}testimonial-padding-y: #{rem($testimonial-padding-y)};
+  --#{$prefix}testimonial-inner-spacer: #{rem($testimonial-inner-spacer)};
+  --#{$prefix}testimonial-bg: #{$testimonial-bg};
+  --#{$prefix}testimonial-quote-font-size: #{$testimonial-quote-font-size};
+  --#{$prefix}testimonial-quote-font-size-sm: #{$testimonial-quote-font-size-sm};
+  --#{$prefix}testimonial-quote-font-size-lg: #{$testimonial-quote-font-size-lg};
+  --#{$prefix}testimonial-quote-font-weight: #{$testimonial-quote-font-weight};
+  --#{$prefix}testimonial-quote-color: #{$testimonial-quote-color};
+  --#{$prefix}testimonial-author-font-size: #{$testimonial-author-font-size};
+  --#{$prefix}testimonial-author-color: #{$testimonial-author-color};
+  --#{$prefix}testimonial-author-role-font-size: #{$testimonial-author-role-font-size};
+  --#{$prefix}testimonial-author-role-color: #{$testimonial-author-role-color};
+  --#{$prefix}testimonial-author-inner-spacer: #{$testimonial-author-inner-spacer};
 
-   --#{$prefix}testimonial-width: #{$testimonial-width};
-   --#{$prefix}testimonial-padding-x: #{rem($testimonial-padding-x)};
-   --#{$prefix}testimonial-padding-y: #{rem($testimonial-padding-y)};
-   --#{$prefix}testimonial-inner-spacer: #{rem($testimonial-inner-spacer)};
-   --#{$prefix}testimonial-bg: #{$testimonial-bg};
-   --#{$prefix}testimonial-quote-font-size: #{$testimonial-quote-font-size};
-   --#{$prefix}testimonial-quote-font-size-sm: #{$testimonial-quote-font-size-sm};
-   --#{$prefix}testimonial-quote-font-size-lg: #{$testimonial-quote-font-size-lg};
-   --#{$prefix}testimonial-quote-font-weight: #{$testimonial-quote-font-weight};
-   --#{$prefix}testimonial-quote-color: #{$testimonial-quote-color}; 
-   --#{$prefix}testimonial-author-font-size: #{$testimonial-author-font-size};
-   --#{$prefix}testimonial-author-color: #{$testimonial-author-color};
-   --#{$prefix}testimonial-author-role-font-size: #{$testimonial-author-role-font-size};
-   --#{$prefix}testimonial-author-role-color: #{$testimonial-author-role-color};
-   --#{$prefix}testimonial-author-inner-spacer: #{$testimonial-author-inner-spacer};
+  width: 100%;
+  max-width: var(--#{$prefix}testimonial-width);
+  padding: var(--#{$prefix}testimonial-padding-y) var(--#{$prefix}testimonial-padding-x);
+  background: var(--#{$prefix}testimonial-bg);
 
-   
-   width: 100%;
-   max-width: var(--#{$prefix}testimonial-width);
-   padding: var(--#{$prefix}testimonial-padding-y) var(--#{$prefix}testimonial-padding-x);
-   background: var(--#{$prefix}testimonial-bg);
+  &__quote {
+    color: var(--#{$prefix}testimonial-quote-color);
+    font-size: var(--#{$prefix}testimonial-quote-font-size);
+    font-weight: var(--#{$prefix}testimonial-quote-font-weight);
+    margin-bottom: 0px;
+  }
 
+  &__author {
+    display: flex;
+    gap: var(--#{$prefix}testimonial-author-inner-spacer);
+    margin-top: var(--#{$prefix}testimonial-inner-spacer);
+  }
 
-   &__quote {
-      color: var(--#{$prefix}testimonial-quote-color);
-      font-size: var(--#{$prefix}testimonial-quote-font-size);
-      font-weight: var(--#{$prefix}testimonial-quote-font-weight);
-      margin-bottom: 0px;
-   }
+  // &__author-avatar {
 
-   &__author {
-      display: flex;
-      gap: var(--#{$prefix}testimonial-author-inner-spacer);
-      margin-top: var(--#{$prefix}testimonial-inner-spacer);
-   }
+  // }
 
-   // &__author-avatar {
+  // &__author-info {
 
-   // }
+  // }
 
-   // &__author-info {
+  &__author-name {
+    color: var(--#{$prefix}testimonial-author-color);
+    font-size: var(--#{$prefix}testimonial-author-font-size);
+  }
 
-   // }
+  &__author-role {
+    color: var(--#{$prefix}testimonial-author-role-color);
+    font-size: var(--#{$prefix}testimonial-author-role-font-size);
+  }
 
-   &__author-name {
-      color: var(--#{$prefix}testimonial-author-color);
-      font-size: var(--#{$prefix}testimonial-author-font-size);
-   }
+  &--sm {
+    --#{$prefix}testimonial-quote-font-size: var(--#{$prefix}testimonial-quote-font-size-sm);
+  }
 
-   &__author-role {
-      color: var(--#{$prefix}testimonial-author-role-color);
-      font-size: var(--#{$prefix}testimonial-author-role-font-size);
-   }
-
-   &--sm {
-      --#{$prefix}testimonial-quote-font-size: var(--#{$prefix}testimonial-quote-font-size-sm);
-   }
-
-   &--lg {
-      --#{$prefix}testimonial-quote-font-size: var(--#{$prefix}testimonial-quote-font-size-lg);
-   }
-}
+  &--lg {
+    --#{$prefix}testimonial-quote-font-size: var(--#{$prefix}testimonial-quote-font-size-lg);
+  }
+}

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

@@ -21,7 +21,7 @@
   --#{config.$prefix}todo-form-gap: #{todo.$todo-form-gap};
   --#{config.$prefix}todo-completed-color: #{todo.$todo-completed-color};
   --#{config.$prefix}todo-completed-text-decoration: #{todo.$todo-completed-text-decoration};
-  
+
   width: 100%;
   margin-bottom: todo.$todo-margin-bottom;
   border: 1px solid var(--#{config.$prefix}todo-border-color);
@@ -29,7 +29,7 @@
   background-color: var(--#{config.$prefix}todo-bg);
   color: var(--#{config.$prefix}todo-color);
   padding: todo.$todo-padding;
-  
+
   // Title
   &__title {
     font-size: todo.$todo-title-font-size;
@@ -37,26 +37,26 @@
     margin-top: 0;
     margin-bottom: var(--#{config.$prefix}todo-title-margin-bottom);
   }
-  
+
   // Form
   &__form {
     margin-bottom: var(--#{config.$prefix}todo-form-margin-bottom);
   }
-  
+
   &__form-group {
     display: flex;
     gap: var(--#{config.$prefix}todo-form-gap);
   }
-  
+
   &__input {
     flex: 1;
     min-width: 0; // Prevent flex items from overflowing
   }
-  
+
   &__add-btn {
     flex-shrink: 0;
   }
-  
+
   // List
   &__list {
     list-style: none;
@@ -64,24 +64,24 @@
     margin: 0;
     border-top: 1px solid var(--#{config.$prefix}todo-item-border-color);
   }
-  
+
   &__empty {
     padding: var(--#{config.$prefix}todo-item-padding);
     text-align: center;
     color: todo.$todo-empty-color;
     font-style: italic;
   }
-  
+
   // Items
   &__item {
     padding: var(--#{config.$prefix}todo-item-padding);
     border-bottom: 1px solid var(--#{config.$prefix}todo-item-border-color);
     transition: background-color 0.2s ease;
-    
+
     &:hover {
       background-color: var(--#{config.$prefix}todo-item-hover-bg);
     }
-    
+
     &--completed {
       .c-todo__item-text {
         color: var(--#{config.$prefix}todo-completed-color);
@@ -89,14 +89,14 @@
       }
     }
   }
-  
+
   &__item-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
   }
-  
+
   &__checkbox-label {
     display: flex;
     align-items: center;
@@ -104,60 +104,60 @@
     flex: 1;
     cursor: pointer;
   }
-  
+
   &__checkbox {
     flex-shrink: 0;
   }
-  
+
   &__item-text {
     word-break: break-word;
   }
-  
+
   &__delete-btn {
     flex-shrink: 0;
     opacity: 0.7;
     transition: opacity 0.2s ease;
-    
+
     &:hover {
       opacity: 1;
     }
   }
-  
+
   // Size variants
   &--sm {
     padding: todo.$todo-padding-sm;
     font-size: todo.$todo-font-size-sm;
-    
+
     .c-todo__title {
       font-size: todo.$todo-title-font-size-sm;
       margin-bottom: todo.$todo-title-margin-bottom-sm;
     }
-    
+
     .c-todo__item {
       padding: todo.$todo-item-padding-sm;
     }
   }
-  
+
   &--lg {
     padding: todo.$todo-padding-lg;
-    
+
     .c-todo__title {
       font-size: todo.$todo-title-font-size-lg;
       margin-bottom: todo.$todo-title-margin-bottom-lg;
     }
-    
+
     .c-todo__item {
       padding: todo.$todo-item-padding-lg;
     }
   }
-  
+
   // Disabled state
   &--disabled {
     opacity: todo.$todo-disabled-opacity;
     cursor: not-allowed;
-    
+
     .c-todo__checkbox-label {
       cursor: not-allowed;
     }
   }
-} 
+}