@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,119 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.tabs' as *;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.transition' as *;
-@use '../02-tools/tools.breakpoints' as *;
-@use '../02-tools/tools.grid' as *;
-
-.c-tabs {
-  $root: &;
-
-  --#{$prefix}tabs-width: #{$tabs-width};
-  --#{$prefix}tabs-nav-btn-padding-x: #{rem($tabs-nav-btn-padding-x)};
-  --#{$prefix}tabs-nav-btn-padding-y: #{rem($tabs-nav-btn-padding-y)};
-  --#{$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-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};
-  --#{$prefix}tabs-nav-btn-bg-active: #{$tabs-nav-btn-bg-active};
-  --#{$prefix}tabs-nav-btn-bg-disabled: #{$tabs-nav-btn-bg-disabled};
-  --#{$prefix}tabs-nav-btn-border-radius: #{$tabs-nav-btn-border-radius};
-  --#{$prefix}tabs-nav-btn-border-width: #{$tabs-nav-btn-border-width};
-  --#{$prefix}tabs-nav-btn-border-color: #{$tabs-nav-btn-border-color};
-  --#{$prefix}tabs-nav-btn-border-active-color: #{$tabs-nav-btn-border-active-color};
-  --#{$prefix}tabs-nav-btn-border-disabled-color: #{$tabs-nav-btn-border-disabled-color};
-  --#{$prefix}tabs-nav-btns-gap: #{rem($tabs-nav-btns-gap)};
-  --#{$prefix}tabs-nav-btn-inner-gap: #{rem($tabs-nav-btn-inner-gap)};
-  --#{$prefix}tabs-nav-btn-icon-size: #{rem($tab-nav-btn-icon-size)};
-  --#{$prefix}tabs-panel-padding-x: #{rem($tabs-panel-padding-x)};
-  --#{$prefix}tabs-panel-padding-y: #{rem($tabs-panel-padding-y)};
-
-  width: 100%;
-  max-width: var(--#{$prefix}tabs-width);
-
-  &__nav {
-    display: flex;
-    list-style: none;
-    padding-left: 0;
-    margin-bottom: 0;
-
-    @include media-breakpoint-down(sm){
-      flex-wrap: wrap;
-    }
-  }
-
-  &__nav-item {
-    width: 50%;
-
-    &+& {
-      margin-left: var(--#{$prefix}tabs-nav-btns-gap);
-    }
-  }
-
-  &__nav-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--#{$prefix}tabs-nav-btn-inner-gap);
-    width: 100%;
-    color: var(--#{$prefix}tabs-nav-btn-color);
-    font-size: var(--#{$prefix}tabs-nav-btn-font-size);
-    font-weight: var(--#{$prefix}tabs-nav-btn-font-weight);
-    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);
-    background-color: var(--#{$prefix}tabs-nav-btn-bg);
-    @include basic-transition();
-   
-
-    &:active, &.is-active {
-      color: var(--#{$prefix}tabs-nav-btn-active-color);
-      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);
-
-      color: var(--#{$prefix}tabs-nav-btn-border-disabled-color);
-      background-color: var(--#{$prefix}tabs-nav-btn-bg-disabled);
-      pointer-events: none;
-    }
-
-    &:focus-visible {
-      outline: none;
-      border-color: var(--#{$prefix}tabs-nav-btn-border-active-color);
-    }
-    
-    > i {
-      font-size:   var(--#{$prefix}tabs-nav-btn-icon-size);
-    }
-  }
-
-  &__panels {
-    position: relative;
-  }
-
-  &__panel {
-    display: none;
-    opacity: 0;
-    overflow: hidden;
-    transition: opacity .3s cubic-bezier(0.65, 0.32, 1, 0.72);
-
-    &.is-active {
-      display: block;
-      opacity: 1;
-    }
-  }
-
-  &__panel-body {
-    padding: var(--#{$prefix}tabs-panel-padding-y) var(--#{$prefix}tabs-panel-padding-x);
-  }
-}

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

@@ -1,68 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.testimonials' as *;
-@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};
-
-   
-   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);
-   }
-
-   // &__author-avatar {
-
-   // }
-
-   // &__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);
-   }
-
-   &--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);
-   }
-}

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

@@ -1,163 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.todo' as todo;
-@use '../01-settings/settings.colors' as colors;
-@use '../02-tools/tools.color-functions' as *;
-@use '../02-tools/tools.to-rgb' as *;
-
-// Component: Todo
-// Description: Styles for the Todo component
-
-// Base todo component
-.c-todo {
-  --#{config.$prefix}todo-border-color: #{todo.$todo-border-color};
-  --#{config.$prefix}todo-border-radius: #{todo.$todo-border-radius};
-  --#{config.$prefix}todo-bg: #{todo.$todo-bg};
-  --#{config.$prefix}todo-color: #{todo.$todo-color};
-  --#{config.$prefix}todo-title-margin-bottom: #{todo.$todo-title-margin-bottom};
-  --#{config.$prefix}todo-item-padding: #{todo.$todo-item-padding};
-  --#{config.$prefix}todo-item-border-color: #{todo.$todo-item-border-color};
-  --#{config.$prefix}todo-item-hover-bg: #{todo.$todo-item-hover-bg};
-  --#{config.$prefix}todo-form-margin-bottom: #{todo.$todo-form-margin-bottom};
-  --#{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);
-  border-radius: var(--#{config.$prefix}todo-border-radius);
-  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;
-    font-weight: todo.$todo-title-font-weight;
-    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;
-    padding: 0;
-    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);
-        text-decoration: var(--#{config.$prefix}todo-completed-text-decoration);
-      }
-    }
-  }
-  
-  &__item-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-  }
-  
-  &__checkbox-label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    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;
-    }
-  }
-} 

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

@@ -1,100 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.toggle' as *;
-@use '../01-settings/settings.colors' as colors;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.hidden' as *;
-@use '../02-tools/tools.transition' as transition;
-
-.c-toggle {
-  $root: &;
-
-  --#{$prefix}toggle-gap: #{rem($toggle-gap)};
-  --#{$prefix}toggle-switch-bg: #{$toggle-switch-off-bg};
-  --#{$prefix}toggle-switch-disabled-bg: #{$toggle-switch-disabled-bg};
-  --#{$prefix}toggle-switch-border-radius: #{$toggle-switch-border-radius};
-  --#{$prefix}toggle-switch-box-shadow: #{$toggle-switch-box-shadow};
-  --#{$prefix}toggle-switch-handle-bg: #{$toggle-switch-handle-bg};
-  --#{$prefix}toggle-switch-handle-border-radius: #{$toggle-switch-handle-border-radius};
-  --#{$prefix}toggle-switch-width: #{rem($toggle-switch-width)};
-  --#{$prefix}toggle-switch-height: #{rem($toggle-switch-height)};
-  --#{$prefix}toggle-switch-handle-width: #{rem($toggle-switch-handle-width)};
-  --#{$prefix}toggle-switch-handle-height: #{rem($toggle-switch-handle-height)};
-  --#{$prefix}toggle-switch-handle-margin: #{rem($toggle-switch-handle-margin)};
-  --#{$prefix}toggle-label-font-size: #{$toggle-label-font-size};
-  --#{$prefix}toggle-label-color: #{$toggle-label-color};
-
-  display: flex;
-  align-items: center;
-  gap: var(--#{$prefix}toggle-gap);
-
-  &__switch {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex: 0 0 var(--#{$prefix}toggle-switch-width);
-    width: var(--#{$prefix}toggle-switch-width);
-    height: var(--#{$prefix}toggle-switch-height);
-    background-color: var(--#{$prefix}toggle-switch-bg);
-    border-radius: var(--#{$prefix}toggle-switch-border-radius);
-    user-select: none;
-    cursor: pointer;
-
-    @include transition.basic-transition();
-
-    &::before {
-      content: '';
-      display: inline-block;
-      width: var(--#{$prefix}toggle-switch-handle-width);
-      height: var(--#{$prefix}toggle-switch-handle-height);
-      margin: var(--#{$prefix}toggle-switch-handle-margin);
-      background: var(--#{$prefix}toggle-switch-handle-bg);
-      border-radius: var(--#{$prefix}toggle-switch-handle-border-radius);
-
-      @include transition.basic-transition();
-    }
-  }
-
-  &__label {
-    font-size: var(--#{$prefix}toggle-label-font-size);
-    color: var(--#{$prefix}toggle-label-color);
-  }
-
-  &.is-on {
-    --#{$prefix}toggle-switch-bg: #{$toggle-switch-on-bg};
-    #{$root}__switch {
-      &::before {
-        transform: translate(
-          calc(
-            var(--#{$prefix}toggle-switch-width) -
-              (
-                var(--#{$prefix}toggle-switch-handle-width) +
-                  var(--#{$prefix}toggle-switch-handle-margin) * 2
-              )
-          )
-        );
-      }
-    }
-  }
-
-  &.is-disabled:not(.is-on) {
-    pointer-events: none;
-
-    #{$root}__switch {
-      background: var(--#{$prefix}toggle-switch-disabled-bg);
-    }
-  }
-
-  &.is-disabled.is-on {
-    pointer-events: none;
-
-    #{$root}__switch {
-      &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: colors.$overlay-2;
-        border-radius: var(--#{$prefix}toggle-switch-handle-border-radius);
-      }
-    }
-  }
-}

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

@@ -1,137 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.tooltip' as *;
-@use '../02-tools/tools.rem' as *;
-@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)};
-
-
-    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(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;
-    }
-
-
-    &--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);
-
-        #{$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;
-        }
-    }
-
-
-    &--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;
-        }
-    }
-
-    &--bottom-left {
-        top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-        left: 0;
-    }
-
-    &--bottom-right {
-        top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-        right: 0;
-    }
-
-    &.is-active {
-        pointer-events: auto;
-
-        .c-tooltip__content {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-}