@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/styles/06-components/_components.edge-panel.scss

@@ -40,11 +40,11 @@
     z-index: map.get($z-layers, 1);
     transition: opacity var(--#{$prefix}edge-panel-animation-duration) ease;
     will-change: opacity;
-    
+
     &.is-animating {
       animation: fadeIn 0.3s ease forwards;
     }
-    
+
     &.is-animating-out {
       animation: fadeOut 0.3s ease forwards;
     }
@@ -63,13 +63,15 @@
     display: flex;
     flex-direction: column;
     will-change: transform, opacity;
-    
+
     &.is-animating {
-      animation: slideIn var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      animation: slideIn var(--#{$prefix}edge-panel-animation-duration)
+        cubic-bezier(0.16, 1, 0.3, 1) forwards;
     }
-    
+
     &.is-animating-out {
-      animation: slideOut var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      animation: slideOut var(--#{$prefix}edge-panel-animation-duration)
+        cubic-bezier(0.16, 1, 0.3, 1) forwards;
     }
   }
 
@@ -93,11 +95,11 @@
     justify-content: center;
     border-radius: 50%;
     transition: background-color 0.2s ease;
-    
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.05);
     }
-    
+
     &:focus-visible {
       outline: 2px solid var(--#{$prefix}primary);
       outline-offset: 2px;
@@ -120,11 +122,11 @@
       bottom: 0;
       border-right: 1px solid var(--#{$prefix}edge-panel-border-color);
       transform: translateX(-100%);
-      
+
       &.is-animating {
         animation-name: slideInStart;
       }
-      
+
       &.is-animating-out {
         animation-name: slideOutStart;
       }
@@ -139,11 +141,11 @@
       left: auto;
       border-left: 1px solid var(--#{$prefix}edge-panel-border-color);
       transform: translateX(100%);
-      
+
       &.is-animating {
         animation-name: slideInEnd;
       }
-      
+
       &.is-animating-out {
         animation-name: slideOutEnd;
       }
@@ -160,11 +162,11 @@
       height: var(--#{$prefix}edge-panel-height);
       transform: translateY(-100%);
       border-bottom: 1px solid var(--#{$prefix}edge-panel-border-color);
-      
+
       &.is-animating {
         animation-name: slideInTop;
       }
-      
+
       &.is-animating-out {
         animation-name: slideOutTop;
       }
@@ -181,11 +183,11 @@
       height: var(--#{$prefix}edge-panel-height);
       transform: translateY(100%);
       border-top: 1px solid var(--#{$prefix}edge-panel-border-color);
-      
+
       &.is-animating {
         animation-name: slideInBottom;
       }
-      
+
       &.is-animating-out {
         animation-name: slideOutBottom;
       }
@@ -202,24 +204,24 @@
       transform: translateX(0) translateY(0);
     }
   }
-  
+
   // No animation mode
-  &[data-mode="none"] {
+  &[data-mode='none'] {
     #{$root}__container {
       // Disable all transitions
       transition: none !important;
       animation: none !important;
-      
+
       &.is-animating,
       &.is-animating-out {
         animation: none !important;
       }
     }
-    
+
     #{$root}__backdrop {
       transition: none !important;
       animation: none !important;
-      
+
       &.is-animating,
       &.is-animating-out {
         animation: none !important;
@@ -232,20 +234,20 @@
 .is-edgepanel-open {
   --#{$prefix}edge-panel-animation-duration: #{$edge-panel-animation-duration}ms;
   overflow: hidden;
-  
+
   &.is-pushed {
-    transition: 
+    transition:
       padding-left var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1),
       padding-right var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1),
       padding-top var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1),
       padding-bottom var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1);
-    
+
     // Disable scrolling on iOS
     position: fixed;
     width: 100%;
     height: 100%;
   }
-  
+
   &:not(.is-pushed) {
     // Disable scrolling on iOS
     position: fixed;
@@ -254,56 +256,95 @@
   }
 }
 
-
 // Simple fade in animation
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: var(--#{$prefix}edge-panel-backdrop-opacity); }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: var(--#{$prefix}edge-panel-backdrop-opacity);
+  }
 }
 
 // Simple fade out animation
 @keyframes fadeOut {
-  from { opacity: var(--#{$prefix}edge-panel-backdrop-opacity); }
-  to { opacity: 0; }
+  from {
+    opacity: var(--#{$prefix}edge-panel-backdrop-opacity);
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 // Position-specific animations
 @keyframes slideInStart {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes slideOutStart {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
 }
 
 @keyframes slideInEnd {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes slideOutEnd {
-  from { transform: translateX(0); }
-  to { transform: translateX(100%); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
 }
 
 @keyframes slideInTop {
-  from { transform: translateY(-100%); }
-  to { transform: translateY(0); }
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 @keyframes slideOutTop {
-  from { transform: translateY(0); }
-  to { transform: translateY(-100%); }
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
 }
 
 @keyframes slideInBottom {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 @keyframes slideOutBottom {
-  from { transform: translateY(0); }
-  to { transform: translateY(100%); }
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
 }

package/src/styles/06-components/_components.form-group.scss

@@ -36,9 +36,9 @@
   }
 
   &--lg {
-     #{$root}__field {
+    #{$root}__field {
       @extend .c-input--lg !optional;
-     }
+    }
   }
 
   &--sm {
@@ -65,8 +65,9 @@
     }
   }
 
-  &:disabled,&.is-disabled {
-    >* {
+  &:disabled,
+  &.is-disabled {
+    > * {
       pointer-events: none;
     }
 

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

@@ -8,144 +8,140 @@
 @use '../02-tools/tools.grid' as *;
 
 .c-hero {
-    $root: &;
-
-    --#{$prefix}hero-padding-x: #{rem($hero-padding-x)};
-    --#{$prefix}hero-padding-y: #{rem($hero-padding-y)};
-    --#{$prefix}hero-bg: #{$hero-bg};
-    --#{$prefix}hero-overlay: #{$hero-overlay};
-    --#{$prefix}hero-overlay-opacity: #{$hero-overlay-opacity};
-    --#{$prefix}hero-subtitle-font-size: #{$hero-subtitle-font-size};
-    --#{$prefix}hero-title-font-size: #{$hero-title-font-size};
-    --#{$prefix}hero-text-font-size: #{$hero-text-font-size};
-    --#{$prefix}hero-subtitle-color: #{$hero-subtitle-color};
-    --#{$prefix}hero-title-color: #{$hero-title-color};
-    --#{$prefix}hero-text-color: #{$hero-text-color};
-    --#{$prefix}hero-subtitle-font-weight: #{$hero-subtitle-font-weight};
-    --#{$prefix}hero-title-font-weight: #{$hero-title-font-weight};
-    --#{$prefix}hero-text-font-weight: #{$hero-text-font-weight};
-    --#{$prefix}hero-subtitle-margin-bottom: #{$hero-subtitle-margin-bottom};
-    --#{$prefix}hero-text-margin-top: #{rem($hero-text-margin-top)};
-    --#{$prefix}hero-actions-margin-top: #{rem($hero-actions-margin-top)};
-    --#{$prefix}hero-actions-inner-gap: #{rem($hero-actions-inner-gap)};
-    --#{$prefix}hero-grid-gutter: #{rem($hero-grid-gutter)};
-    --#{$prefix}hero-content-width: #{rem($hero-content-width)};
-
-
+  $root: &;
+
+  --#{$prefix}hero-padding-x: #{rem($hero-padding-x)};
+  --#{$prefix}hero-padding-y: #{rem($hero-padding-y)};
+  --#{$prefix}hero-bg: #{$hero-bg};
+  --#{$prefix}hero-overlay: #{$hero-overlay};
+  --#{$prefix}hero-overlay-opacity: #{$hero-overlay-opacity};
+  --#{$prefix}hero-subtitle-font-size: #{$hero-subtitle-font-size};
+  --#{$prefix}hero-title-font-size: #{$hero-title-font-size};
+  --#{$prefix}hero-text-font-size: #{$hero-text-font-size};
+  --#{$prefix}hero-subtitle-color: #{$hero-subtitle-color};
+  --#{$prefix}hero-title-color: #{$hero-title-color};
+  --#{$prefix}hero-text-color: #{$hero-text-color};
+  --#{$prefix}hero-subtitle-font-weight: #{$hero-subtitle-font-weight};
+  --#{$prefix}hero-title-font-weight: #{$hero-title-font-weight};
+  --#{$prefix}hero-text-font-weight: #{$hero-text-font-weight};
+  --#{$prefix}hero-subtitle-margin-bottom: #{$hero-subtitle-margin-bottom};
+  --#{$prefix}hero-text-margin-top: #{rem($hero-text-margin-top)};
+  --#{$prefix}hero-actions-margin-top: #{rem($hero-actions-margin-top)};
+  --#{$prefix}hero-actions-inner-gap: #{rem($hero-actions-inner-gap)};
+  --#{$prefix}hero-grid-gutter: #{rem($hero-grid-gutter)};
+  --#{$prefix}hero-content-width: #{rem($hero-content-width)};
+
+  position: relative;
+  display: grid;
+  place-items: center;
+  padding: var(--#{$prefix}hero-padding-y) var(--#{$prefix}hero-padding-x);
+  background-color: var(--#{$prefix}hero-bg);
+
+  &__bg {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    z-index: 0;
+  }
+
+  &__bg-image,
+  &__video {
+    position: absolute;
+    inset: 0;
+    @include square(100%);
+    @include object-fit(cover);
+    z-index: 0;
+  }
+
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    background: var(--#{$prefix}hero-overlay);
+    opacity: var(--#{$prefix}hero-overlay-opacity);
+    z-index: 1;
+  }
+
+  &__container {
     position: relative;
-    display: grid;
-    place-items: center;
-    padding: var(--#{$prefix}hero-padding-y) var(--#{$prefix}hero-padding-x);
-    background-color: var(--#{$prefix}hero-bg);
-
-    &__bg {
-        position: absolute;
-        inset: 0;
-        overflow: hidden;
-        z-index: 0;
-    }
-
-    &__bg-image, &__video {
-        position: absolute;
-        inset: 0;
-        @include square(100%);
-        @include object-fit(cover);
-        z-index: 0;
-    }
-
-    &__overlay {
-        position: absolute;
-        inset: 0;
-        background: var(--#{$prefix}hero-overlay);
-        opacity: var(--#{$prefix}hero-overlay-opacity);
-        z-index: 1;
-    }
-
-    &__container {
-        position: relative;
-        z-index: 2;
+    z-index: 2;
+  }
+
+  &__grid {
+    --#{$prefix}gutter-x: var(--#{$prefix}hero-grid-gutter);
+    align-items: center;
+  }
+
+  &__content {
+    width: 100%;
+    max-width: var(--#{$prefix}hero-content-width);
+  }
+  &__subtitle {
+    color: var(--#{$prefix}hero-subtitle-color);
+    font-size: var(--#{$prefix}hero-subtitle-font-size);
+    font-weight: var(--#{$prefix}hero-subtitle-font-weight);
+    margin-bottom: var(--#{$prefix}hero-subtitle-margin-bottom);
+  }
+
+  &__title {
+    font-size: calc(2.15625rem + 1.5vw);
+    color: var(--#{$prefix}hero-title-color);
+    font-weight: var(--#{$prefix}hero-title-font-weight);
+    letter-spacing: -1px;
+
+    @include media-breakpoint-up(md) {
+      font-size: var(--#{$prefix}hero-title-font-size);
+      line-height: 72px;
     }
-
-    &__grid{
-        --#{$prefix}gutter-x: var(--#{$prefix}hero-grid-gutter);
-        align-items: center;
-    }
-
-    &__content{
-        width: 100%;
-        max-width: var(--#{$prefix}hero-content-width);
-    }
-    &__subtitle {
-        color: var(--#{$prefix}hero-subtitle-color);
-        font-size: var(--#{$prefix}hero-subtitle-font-size);
-        font-weight: var(--#{$prefix}hero-subtitle-font-weight);
-        margin-bottom: var(--#{$prefix}hero-subtitle-margin-bottom);
-    }
-
-    &__title {
-        font-size: calc(2.15625rem + 1.5vw);
-        color: var(--#{$prefix}hero-title-color);
-        font-weight: var(--#{$prefix}hero-title-font-weight);
-        letter-spacing: -1px;
-
-        @include media-breakpoint-up(md){
-            font-size: var(--#{$prefix}hero-title-font-size);
-            line-height: 72px;
+  }
+
+  &__text {
+    color: var(--#{$prefix}hero-text-color);
+    font-size: var(--#{$prefix}hero-text-font-size);
+    font-weight: var(--#{$prefix}hero-text-font-weight);
+    margin-top: var(--#{$prefix}hero-text-margin-top);
+  }
+
+  &__actions {
+    display: inline-flex;
+    gap: var(--#{$prefix}hero-actions-inner-gap);
+    margin-top: var(--#{$prefix}hero-actions-margin-top);
+  }
+
+  &__image {
+    width: 100%;
+    max-width: none;
+    height: 380px;
+    @include object-fit(cover);
+  }
+
+  &--center {
+    text-align: center;
+
+    #{$root} {
+      &__content {
+        margin: {
+          left: auto;
+          right: auto;
         }
-    }
-
-    &__text {
-        color: var(--#{$prefix}hero-text-color);
-        font-size: var(--#{$prefix}hero-text-font-size);
-        font-weight: var(--#{$prefix}hero-text-font-weight);
-        margin-top: var(--#{$prefix}hero-text-margin-top);
-    }
-
-    &__actions {
-        display: inline-flex;
-        gap: var(--#{$prefix}hero-actions-inner-gap);
-        margin-top: var(--#{$prefix}hero-actions-margin-top);
-    }
+      }
 
-    &__image {
-        width: 100%;
-        max-width: none;
-        height: 380px;
-        @include object-fit(cover);
+      &__image-wrapper {
+        margin-top: var(--#{$prefix}hero-grid-gutter);
+      }
     }
+  }
 
-    &--center {
-        text-align: center;
-
-        #{$root}{
-            &__content{
-                margin: {
-                    left: auto;
-                    right: auto;
-                }
-            }
+  &--end {
+    text-align: right;
 
-            &__image-wrapper {
-                margin-top: var(--#{$prefix}hero-grid-gutter);
-            }
-        }
+    #{$root} {
+      &__content {
+        margin-left: auto;
+      }
     }
+  }
 
-    &--end {
-        text-align: right;
-
-        #{$root}{
-            &__content{
-                margin-left: auto;
-            }
-        }
-    }
-
-    &--full-vh {
-        min-height: 100vh;
-    }
-
-
-
-    
-}
+  &--full-vh {
+    min-height: 100vh;
+  }
+}

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

@@ -3,7 +3,7 @@
 @use '../02-tools/tools.rem' as *;
 
 // Icon component
-// 
+//
 // Styling for Phosphor Icons
 
 .c-icon {
@@ -12,69 +12,69 @@
   justify-content: center;
   vertical-align: middle;
   line-height: 1;
-  
+
   // Icon sizes
   &--xs {
     height: rem(16px);
     width: rem(16px);
   }
-  
+
   &--sm {
     height: rem(20px);
     width: rem(20px);
   }
-  
+
   &--md {
     height: rem(24px);
     width: rem(24px);
   }
-  
+
   &--lg {
     height: rem(32px);
     width: rem(32px);
   }
-  
+
   &--xl {
     height: rem(40px);
     width: rem(40px);
   }
-  
+
   // Icon colors - these will be used if no color is specified in the component
   &--primary {
     color: colors.$primary;
   }
-  
+
   &--secondary {
     color: colors.$secondary;
   }
-  
+
   &--success {
     color: colors.$success;
   }
-  
+
   &--danger {
     color: colors.$danger;
   }
-  
+
   &--warning {
     color: colors.$warning;
   }
-  
+
   &--info {
     color: colors.$info;
   }
-  
+
   // Current color - inherits color from parent
   &--current {
     color: currentColor;
   }
-  
+
   // Icon with text - adds spacing when used next to text
   &--with-text-right {
     margin-right: rem(8px);
   }
-  
+
   &--with-text-left {
     margin-left: rem(8px);
   }
-} 
+}