@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -36,15 +36,16 @@
     }
 
     &:hover {
-        #{$root}__icon {
-          transform: rotate(-180deg);
-        }
-  
-        #{$root}__dropdown-menu, #{$root}__mega-menu  {
-          visibility: visible;
-          opacity: 1;
-        }
+      #{$root}__icon {
+        transform: rotate(-180deg);
       }
+
+      #{$root}__dropdown-menu,
+      #{$root}__mega-menu {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
   }
 
   &__link {
@@ -53,8 +54,7 @@
     gap: var(--#{$prefix}nav-link-inner-gap);
     font-size: var(--#{$prefix}nav-link-font-size);
     font-weight: var(--#{$prefix}nav-link-font-weight);
-    padding: var(--#{$prefix}nav-link-padding-y)
-      var(--#{$prefix}nav-link-padding-x);
+    padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
     border-radius: $border-radius-lg;
 
     @include transition.basic-transition();
@@ -114,7 +114,6 @@
     @include transition.basic-transition();
   }
 
-
   &--end {
     margin-left: auto;
     justify-content: flex-end;
@@ -124,4 +123,50 @@
     margin: 0 auto;
     justify-content: center;
   }
+
+  // Float variants - floating navigation bubbles
+  &--float-top-center,
+  &--float-bottom-center {
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    background: var(--#{$prefix}body-bg);
+    border: 1px solid var(--#{$prefix}border-color);
+    border-radius: $border-radius-pill;
+    box-shadow: var(--#{$prefix}box-shadow-lg);
+    padding: rem(8px) rem(16px);
+    backdrop-filter: blur(10px);
+
+    // Add subtle background transparency
+    background: rgba(var(--#{$prefix}body-bg-rgb), 0.95);
+
+    // Ensure items are properly spaced in float mode
+    #{$root}__item {
+      & + & {
+        margin-left: rem(4px);
+      }
+    }
+
+    // Adjust link padding for compact float design
+    #{$root}__link {
+      padding: rem(8px) rem(12px);
+      border-radius: $border-radius-lg;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.is-active {
+        background-color: var(--#{$prefix}brand-bg-subtle);
+      }
+    }
+  }
+
+  &--float-top-center {
+    top: rem(20px);
+  }
+
+  &--float-bottom-center {
+    bottom: rem(20px);
+  }
 }

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

@@ -6,229 +6,305 @@
 @use '../01-settings/settings.maps' as maps;
 
 .c-navbar {
-    $root: &;
-
-    --#{$prefix}navbar-padding-x: #{rem($navbar-padding-x)};
-    --#{$prefix}navbar-padding-y: #{rem($navbar-padding-y)};
-    --#{$prefix}navbar-bg: #{$navbar-bg};
-    --#{$prefix}navbar-border-width: #{$navbar-border-width};
-    --#{$prefix}navbar-border-color: #{$navbar-border-color};
-    --#{$prefix}navbar-brand-margin-end: #{rem($navbar-brand-margin-end)};
-    --#{$prefix}navbar-toggler-size: #{$navbar-toggler-size};
-    --#{$prefix}navbar-toggler-color: #{$navbar-toggler-color};
-    --#{$prefix}navbar-container-max-width: #{$navbar-container-max-width};
-
-    position: relative; 
-    padding: var(--#{$prefix}navbar-padding-y) 0;
-    border-bottom: 1px solid var(--#{$prefix}navbar-border-color);
-    background-color: var(--#{$prefix}navbar-bg);
-
-    &__container {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
+  $root: &;
+
+  // 1. CSS Custom Properties
+  --#{$prefix}navbar-padding-x: #{rem($navbar-padding-x)};
+  --#{$prefix}navbar-padding-y: #{rem($navbar-padding-y)};
+  --#{$prefix}navbar-container-max-width: #{$navbar-container-max-width};
+  --#{$prefix}navbar-bg: #{$navbar-bg};
+  --#{$prefix}navbar-border-width: #{$navbar-border-width};
+  --#{$prefix}navbar-border-color: #{$navbar-border-color};
+  --#{$prefix}navbar-box-shadow: #{$navbar-box-shadow};
+  --#{$prefix}navbar-brand-margin-end: #{rem($navbar-brand-margin-end)};
+  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
+  --#{$prefix}navbar-brand-font-weight: #{$navbar-brand-font-weight};
+  --#{$prefix}navbar-brand-color: #{$navbar-brand-color};
+  --#{$prefix}navbar-toggler-size: #{$navbar-toggler-size};
+  --#{$prefix}navbar-toggler-color: #{$navbar-toggler-color};
+  --#{$prefix}navbar-toggler-bg: #{$navbar-toggler-bg};
+  --#{$prefix}navbar-toggler-border: #{$navbar-toggler-border};
+  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
+  --#{$prefix}navbar-toggler-focus-shadow: #{$navbar-toggler-focus-shadow};
+  --#{$prefix}navbar-collapse-padding-top: #{$navbar-collapse-padding-top};
+  --#{$prefix}navbar-collapse-transition: #{$navbar-collapse-transition};
+  --#{$prefix}navbar-backdrop-bg: #{$navbar-backdrop-bg};
+  --#{$prefix}navbar-backdrop-z-index: #{$navbar-backdrop-z-index};
+  --#{$prefix}navbar-z-index: #{$navbar-z-index};
+
+  // 2. Base Component Styles
+  position: relative;
+  padding: var(--#{$prefix}navbar-padding-y) 0;
+  border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-color);
+  background-color: var(--#{$prefix}navbar-bg);
+  z-index: var(--#{$prefix}navbar-z-index);
+
+  &__container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    max-width: var(--#{$prefix}navbar-container-max-width);
+    padding: 0 var(--#{$prefix}navbar-padding-x);
+    margin: 0 auto;
+  }
+
+  // 3. Element Styles (BEM Elements)
+  &__brand {
+    margin-right: var(--#{$prefix}navbar-brand-margin-end);
+    display: flex;
+    align-items: center;
+    font-size: var(--#{$prefix}navbar-brand-font-size);
+    font-weight: var(--#{$prefix}navbar-brand-font-weight);
+    color: var(--#{$prefix}navbar-brand-color);
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: var(--#{$prefix}navbar-brand-color);
+      text-decoration: none;
+    }
+
+    svg {
+      color: inherit;
+    }
+  }
+
+  &__toggler {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}navbar-toggler-size);
+    height: var(--#{$prefix}navbar-toggler-size);
+    padding: 0;
+    background-color: var(--#{$prefix}navbar-toggler-bg);
+    border: var(--#{$prefix}navbar-toggler-border);
+    border-radius: var(--#{$prefix}navbar-toggler-border-radius);
+    cursor: pointer;
+    transition: all 0.15s ease-in-out;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: var(--#{$prefix}navbar-toggler-focus-shadow);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &-icon {
+      position: relative;
+      display: inline-block;
+      width: 1.5em;
+      height: 1.5em;
+      vertical-align: middle;
+
+      &::before,
+      &::after,
+      & {
+        position: absolute;
+        height: 2px;
         width: 100%;
-        max-width: var(--#{$prefix}navbar-container-max-width);
-        padding: 0 var(--#{$prefix}navbar-padding-x);
-        margin: 0 auto;
+        background-color: var(--#{$prefix}navbar-toggler-color);
+        border-radius: 1px;
+        transition: transform 0.15s ease;
+      }
+
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+      }
+
+      &::before {
+        top: -0.5em;
+      }
+
+      &::after {
+        bottom: -0.5em;
+      }
     }
+  }
 
-    &__brand {
-        margin-right: var(--#{$prefix}navbar-brand-margin-end);
-        display: flex;
-        align-items: center;
-        
-        svg {
-            color: inherit;
-        }
+  &__collapse {
+    flex-grow: 1;
+    align-items: center;
+    display: flex;
+    transition: var(--#{$prefix}navbar-collapse-transition);
+  }
+
+  // 4. Backdrop for mobile overlay
+  &__backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--#{$prefix}navbar-backdrop-bg);
+    z-index: var(--#{$prefix}navbar-backdrop-z-index);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease-in-out;
+
+    &.is-open {
+      opacity: 1;
+      visibility: visible;
     }
+  }
+
+  // Responsive behavior for collapsible navbars
+  &--collapsible {
+    @include media.media-down('md') {
+      #{$root}__toggler {
+        display: flex;
+        margin-left: auto;
+      }
 
-    &__toggler {
+      #{$root}__collapse {
         display: none;
-        align-items: center;
-        justify-content: center;
-        width: var(--#{$prefix}navbar-toggler-size);
-        height: var(--#{$prefix}navbar-toggler-size);
-        padding: 0;
-        background-color: transparent;
-        border: 0;
-        border-radius: 4px;
-        cursor: pointer;
-        
-        &:focus {
-            outline: none;
-            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+        width: 100%;
+
+        &.is-expanded {
+          display: block;
+          padding-top: var(--#{$prefix}navbar-collapse-padding-top);
         }
-        
-        &-icon {
-            position: relative;
-            display: inline-block;
-            width: 1.5em;
-            height: 1.5em;
-            vertical-align: middle;
-            
-            &::before,
-            &::after,
-            & {
-                position: absolute;
-                height: 2px;
-                width: 100%;
-                background-color: var(--#{$prefix}navbar-toggler-color);
-                border-radius: 1px;
-                transition: transform 0.15s ease;
-            }
-            
-            &::before,
-            &::after {
-                content: "";
-                display: block;
+
+        .c-nav {
+          flex-direction: column;
+          align-items: flex-start;
+
+          &__item {
+            width: 100%;
+            margin-left: 0 !important;
+
+            & + & {
+              margin-top: 0.25rem;
             }
-            
-            &::before {
-                top: -0.5em;
+          }
+
+          &__link {
+            display: block;
+            width: 100%;
+          }
+
+          &__dropdown-menu,
+          &__mega-menu {
+            position: static;
+            width: 100%;
+            margin-top: 0.25rem;
+            margin-bottom: 0.25rem;
+            border: none;
+            box-shadow: none;
+            background-color: transparent;
+            visibility: hidden;
+            opacity: 0;
+            height: 0;
+            overflow: hidden;
+            transform: none !important;
+          }
+
+          &__item--dropdown.is-active {
+            > .c-nav__dropdown-menu,
+            > .c-nav__mega-menu {
+              visibility: visible;
+              opacity: 1;
+              height: auto;
             }
-            
-            &::after {
-                bottom: -0.5em;
+
+            > .c-nav__link .c-nav__icon {
+              transform: rotate(-180deg);
             }
+          }
         }
+      }
     }
-    
-    &__collapse {
-        flex-grow: 1;
-        align-items: center;
-        display: flex;
+
+    @include media.media-up('md') {
+      #{$root}__collapse {
+        display: flex !important;
+      }
     }
-    
-    // Responsive behavior for collapsible navbars
-    &--collapsible {
-        @include media.media-down('md') {
-            #{$root}__toggler {
-                display: flex;
-                margin-left: auto;
-            }
-            
-            #{$root}__collapse {
-                display: none;
-                width: 100%;
-                
-                &.is-expanded {
-                    display: block;
-                    padding-top: 0.5rem;
-                }
-                
-                .c-nav {
-                    flex-direction: column;
-                    align-items: flex-start;
-                    
-                    &__item {
-                        width: 100%;
-                        margin-left: 0 !important;
-                        
-                        & + & {
-                            margin-top: 0.25rem;
-                        }
-                    }
-                    
-                    &__link {
-                        display: block;
-                        width: 100%;
-                    }
-                    
-                    &__dropdown-menu,
-                    &__mega-menu {
-                        position: static;
-                        width: 100%;
-                        margin-top: 0.25rem;
-                        margin-bottom: 0.25rem;
-                        border: none;
-                        box-shadow: none;
-                        background-color: transparent;
-                        visibility: hidden;
-                        opacity: 0;
-                        height: 0;
-                        overflow: hidden;
-                        transform: none !important;
-                    }
-                    
-                    &__item--dropdown.is-active {
-                        > .c-nav__dropdown-menu,
-                        > .c-nav__mega-menu {
-                            visibility: visible;
-                            opacity: 1;
-                            height: auto;
-                        }
-                        
-                        > .c-nav__link .c-nav__icon {
-                            transform: rotate(-180deg);
-                        }
-                    }
-                }
-            }
-        }
-        
-        @include media.media-up('md') {
-            #{$root}__collapse {
-                display: flex !important;
-            }
-        }
+  }
+
+  &--fixed,
+  &--fixed-bottom {
+    position: fixed;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 1030;
+  }
+
+  &--fixed {
+    top: 0;
+  }
+
+  &--fixed-bottom {
+    bottom: 0;
+
+    .c-nav__dropdown-menu {
+      top: auto;
+      bottom: 100%;
     }
 
-    &--fixed, &--fixed-bottom {
-        position: fixed;
-        left: 0;
-        right: 0;
-        width: 100%;
-        z-index: 1030;
+    .c-nav--end .c-nav__dropdown-menu {
+      left: 50%;
+      transform: translateX(-50%);
     }
 
-    &--fixed {
-        top: 0;
+    // For fixed-bottom, the caret should point upward
+    .c-nav__icon {
+      transform: rotate(180deg);
+
+      &:hover {
+        transform: rotate(0deg);
+      }
     }
+  }
 
-    &--fixed-bottom {
-        bottom: 0;
+  // 5. Modifier Styles (BEM Modifiers)
+  // Theme/variant styles
+  @each $color, $value in maps.$theme-colors-bg-subtle {
+    &--#{$color} {
+      --#{$prefix}navbar-bg: var(--#{$prefix}#{$color}-bg-subtle);
+      --#{$prefix}navbar-border-color: var(--#{$prefix}#{$color}-border-subtle);
+      --#{$prefix}navbar-toggler-color: var(--#{$prefix}#{$color}-text);
+      --#{$prefix}navbar-brand-color: var(--#{$prefix}#{$color}-text-emphasis);
 
-        .c-nav__dropdown-menu {
-            top: auto;
-            bottom: 100%;
-        }
+      .c-nav__link {
+        color: var(--#{$prefix}#{$color}-text);
 
-        .c-nav--end .c-nav__dropdown-menu {
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        
-        // For fixed-bottom, the caret should point upward
-        .c-nav__icon {
-            transform: rotate(180deg);
-            
-            &:hover {
-                transform: rotate(0deg);
-            }
+        &:hover,
+        &:focus,
+        &.is-active {
+          background-color: var(--#{$prefix}#{$color}-subtle);
         }
+      }
     }
-    
-    // Theme/variant styles
-    @each $color, $value in maps.$theme-colors-bg-subtle{
-        &--#{$color} {
-            --#{$prefix}navbar-bg: var(--#{$prefix}#{$color}-bg-subtle);
-            --#{$prefix}navbar-border-color: var(--#{$prefix}#{$color}-border-subtle);
-            --#{$prefix}navbar-toggler-color: var(--#{$prefix}#{$color}-text);
-            
-            .c-nav__link {
-                color: var(--#{$prefix}#{$color}-text);
-                
-                &:hover,
-                &:focus,
-                &.is-active {
-                    background-color: var(--#{$prefix}#{$color}-subtle);
-                }
-            }
-            
-            .c-navbar__brand {
-                color: var(--#{$prefix}#{$color}-text-emphasis);
-            }
-        }
+  }
+
+  // 6. Dark Mode Support
+  .dark-mode & {
+    --#{$prefix}navbar-bg: #{$navbar-bg-dark};
+    --#{$prefix}navbar-border-color: #{$navbar-border-color-dark};
+    --#{$prefix}navbar-brand-color: #{$navbar-brand-color-dark};
+    --#{$prefix}navbar-toggler-color: #{$navbar-toggler-color-dark};
+  }
+
+  // 7. Accessibility Considerations
+  @media (prefers-reduced-motion: reduce) {
+    --#{$prefix}navbar-collapse-transition: none;
+
+    #{$root}__toggler {
+      transition: none;
+    }
+
+    #{$root}__backdrop {
+      transition: none;
     }
-}
+  }
+}

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

@@ -55,7 +55,7 @@
 
     &.is-active {
       font-weight: bold;
-      
+
       .c-pagination__link {
         --#{config.$prefix}pagination-color: var(--#{config.$prefix}pagination-active-color);
         --#{config.$prefix}pagination-bg: var(--#{config.$prefix}pagination-active-bg);
@@ -95,7 +95,8 @@
     &:focus-visible {
       outline: none;
       border-radius: 0;
-      border: var(--#{config.$prefix}pagination-focus-border-width) solid var(--#{config.$prefix}pagination-focus-border-color);
+      border: var(--#{config.$prefix}pagination-focus-border-width) solid
+        var(--#{config.$prefix}pagination-focus-border-color);
     }
 
     .c-icon {
@@ -137,18 +138,18 @@
   }
 
   &__icon-skip-back::before {
-    content: "⏮";
+    content: '⏮';
   }
 
   &__icon-caret-left::before {
-    content: "◀";
+    content: '◀';
   }
 
   &__icon-caret-right::before {
-    content: "▶";
+    content: '▶';
   }
 
   &__icon-skip-forward::before {
-    content: "⏭";
+    content: '⏭';
   }
 }