@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,127 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.nav' as *;
-@use '../01-settings/settings.border-radius' as *;
-@use '../02-tools/tools.transition' as transition;
-@use '../02-tools/tools.event' as *;
-@use '../02-tools/tools.rem' as *;
-
-.c-nav {
-  $root: &;
-
-  --#{$prefix}nav-item-gap-x: #{rem($nav-item-gap-x)};
-  --#{$prefix}nav-link-padding-x: #{rem($nav-link-padding-x)};
-  --#{$prefix}nav-link-padding-y: #{rem($nav-link-padding-y)};
-  --#{$prefix}nav-link-font-size: #{$nav-link-font-size};
-  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
-  --#{$prefix}nav-link-color: #{$nav-link-color};
-  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
-  --#{$prefix}nav-link-bg: #{$nav-link-bg};
-  --#{$prefix}nav-link-hover-bg: #{$nav-link-hover-bg};
-  --#{$prefix}nav-link-inner-gap: #{rem($nav-link-inner-gap)};
-  --#{$prefix}nav-icon-size: #{$nav-icon-size};
-
-  display: flex;
-  align-items: center;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-
-  &__item {
-    & + & {
-      margin-left: var(--#{$prefix}nav-item-gap-x);
-    }
-
-    &--dropdown {
-      position: relative;
-    }
-
-    &:hover {
-        #{$root}__icon {
-          transform: rotate(-180deg);
-        }
-  
-        #{$root}__dropdown-menu, #{$root}__mega-menu  {
-          visibility: visible;
-          opacity: 1;
-        }
-      }
-  }
-
-  &__link {
-    display: inline-flex;
-    align-items: center;
-    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);
-    border-radius: $border-radius-lg;
-
-    @include transition.basic-transition();
-
-    @include on-event(true) {
-      color: var(--#{$prefix}nav-link-color);
-    }
-
-    @include on-event() {
-      background-color: var(--#{$prefix}nav-link-hover-bg);
-    }
-
-    &--disabled {
-      color: var(--#{$prefix}disabled-text-emphasis);
-      pointer-events: none;
-    }
-
-    &:focus,
-    &:active,
-    &.is-active {
-      background-color: var(--#{$prefix}brand-bg-subtle);
-    }
-  }
-
-  &__icon {
-    font-size: var(--#{$prefix}nav-icon-size);
-    @include transition.basic-transition();
-  }
-
-  &__dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    visibility: hidden;
-    opacity: 0;
-    white-space: nowrap;
-    @include transition.basic-transition();
-
-    &--center {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &--end {
-      left: auto;
-      right: 0;
-    }
-  }
-
-  &__mega-menu {
-    position: absolute;
-    top: calc(100% - var(--#{$prefix}navbar-padding-y));
-    left: 0;
-    width: 100%;
-    visibility: hidden;
-    opacity: 0;
-    @include transition.basic-transition();
-  }
-
-
-  &--end {
-    margin-left: auto;
-    justify-content: flex-end;
-  }
-
-  &--center {
-    margin: 0 auto;
-    justify-content: center;
-  }
-}

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

@@ -1,234 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.navbar' as *;
-@use '../01-settings/settings.breakpoints' as breakpoints;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.media-queries' as media;
-@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;
-        width: 100%;
-        max-width: var(--#{$prefix}navbar-container-max-width);
-        padding: 0 var(--#{$prefix}navbar-padding-x);
-        margin: 0 auto;
-    }
-
-    &__brand {
-        margin-right: var(--#{$prefix}navbar-brand-margin-end);
-        display: flex;
-        align-items: center;
-        
-        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: transparent;
-        border: 0;
-        border-radius: 4px;
-        cursor: pointer;
-        
-        &:focus {
-            outline: none;
-            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-        }
-        
-        &-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;
-            }
-            
-            &::before {
-                top: -0.5em;
-            }
-            
-            &::after {
-                bottom: -0.5em;
-            }
-        }
-    }
-    
-    &__collapse {
-        flex-grow: 1;
-        align-items: center;
-        display: flex;
-    }
-    
-    // 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%;
-        }
-
-        .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);
-            }
-        }
-    }
-    
-    // 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);
-            }
-        }
-    }
-}

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

@@ -1,154 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.pagination' as pagination;
-@use '../02-tools/tools.rem' as rem;
-@use '../02-tools/tools.size' as size;
-
-.c-pagination {
-  $root: &;
-
-  --#{config.$prefix}pagination-padding-x: #{rem.rem(pagination.$pagination-padding-x)};
-  --#{config.$prefix}pagination-padding-y: #{rem.rem(pagination.$pagination-padding-y)};
-  --#{config.$prefix}pagination-size: #{rem.rem(pagination.$pagination-size)};
-  --#{config.$prefix}pagination-font-size: #{pagination.$pagination-font-size};
-  --#{config.$prefix}pagination-color: #{pagination.$pagination-color};
-  --#{config.$prefix}pagination-bg: #{pagination.$pagination-bg};
-  --#{config.$prefix}pagination-focus-border-color: #{pagination.$pagination-focus-border-color};
-  --#{config.$prefix}pagination-focus-border-width: #{pagination.$pagination-focus-border-width};
-  --#{config.$prefix}pagination-hover-color: #{pagination.$pagination-hover-color};
-  --#{config.$prefix}pagination-hover-bg: #{pagination.$pagination-hover-bg};
-  --#{config.$prefix}pagination-active-color: #{pagination.$pagination-active-color};
-  --#{config.$prefix}pagination-active-bg: #{pagination.$pagination-active-bg};
-  --#{config.$prefix}pagination-disabled-color: #{pagination.$pagination-disabled-color};
-  --#{config.$prefix}pagination-disabled-bg: #{pagination.$pagination-disabled-bg};
-  --#{config.$prefix}pagination-border-radius: #{pagination.$pagination-border-radius};
-  --#{config.$prefix}pagination-icon-size: var(--#{config.$prefix}pagination-font-size);
-
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &__items {
-    display: flex;
-    align-items: center;
-    list-style: none;
-    padding-left: 0;
-    margin-bottom: 0;
-    gap: 0.25rem;
-  }
-
-  &__item {
-    display: flex;
-    align-items: center;
-    @include size.square(var(--#{config.$prefix}pagination-size));
-    overflow: hidden;
-
-    &--dots {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      @include size.square(var(--#{config.$prefix}pagination-size));
-      color: var(--#{config.$prefix}pagination-color);
-      font-size: var(--#{config.$prefix}pagination-font-size);
-      user-select: none;
-    }
-
-    &.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);
-        pointer-events: none;
-      }
-    }
-
-    &.is-disabled {
-      .c-pagination__link {
-        --#{config.$prefix}pagination-color: var(--#{config.$prefix}pagination-disabled-color);
-        --#{config.$prefix}pagination-bg: var(--#{config.$prefix}pagination-disabled-bg);
-        pointer-events: none;
-      }
-    }
-  }
-
-  &__link {
-    @include size.square(100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--#{config.$prefix}pagination-color);
-    font-size: var(--#{config.$prefix}pagination-font-size);
-    padding: var(--#{config.$prefix}pagination-padding-y)
-      var(--#{config.$prefix}pagination-padding-x);
-    background-color: var(--#{config.$prefix}pagination-bg);
-    border-radius: var(--#{config.$prefix}pagination-border-radius);
-    border: none;
-    cursor: pointer;
-    user-select: none;
-
-    &:hover {
-      --#{config.$prefix}pagination-color: var(--#{config.$prefix}pagination-hover-color);
-      --#{config.$prefix}pagination-bg: var(--#{config.$prefix}pagination-hover-bg);
-    }
-
-    &:focus-visible {
-      outline: none;
-      border-radius: 0;
-      border: var(--#{config.$prefix}pagination-focus-border-width) solid var(--#{config.$prefix}pagination-focus-border-color);
-    }
-
-    .c-icon {
-      color: inherit;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  &--sm {
-    --#{config.$prefix}pagination-size: #{rem.rem(pagination.$pagination-size-sm)};
-    --#{config.$prefix}pagination-font-size: 0.75rem;
-    --#{config.$prefix}pagination-padding-y: 4px;
-    --#{config.$prefix}pagination-padding-x: 4px;
-  }
-
-  &--md {
-    // Default size, no need to override
-  }
-
-  &--lg {
-    --#{config.$prefix}pagination-size: #{rem.rem(pagination.$pagination-size-lg)};
-    --#{config.$prefix}pagination-font-size: 1rem;
-    --#{config.$prefix}pagination-padding-y: 12px;
-    --#{config.$prefix}pagination-padding-x: 12px;
-  }
-
-  &__icon-skip-back,
-  &__icon-caret-left,
-  &__icon-caret-right,
-  &__icon-skip-forward {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 1em;
-    width: 1em;
-    line-height: 1;
-  }
-
-  &__icon-skip-back::before {
-    content: "⏮";
-  }
-
-  &__icon-caret-left::before {
-    content: "◀";
-  }
-
-  &__icon-caret-right::before {
-    content: "▶";
-  }
-
-  &__icon-skip-forward::before {
-    content: "⏭";
-  }
-}