@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,260 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.upload' as *;
-@use '../01-settings/settings.border-radius' as *;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.transition' as *;
-@use '../02-tools/tools.hidden-visually' as *;
-@use '../02-tools/tools.border-radius' as *;
-
-.c-upload {
-  $root: &;
-
-  --#{$prefix}upload-width: #{rem($upload-width)};
-  --#{$prefix}upload-padding-x: #{rem($upload-padding-x)};
-  --#{$prefix}upload-padding-y: #{rem($upload-padding-y)};
-  --#{$prefix}upload-inner-padding-x: #{rem($upload-inner-padding-x)};
-  --#{$prefix}upload-inner-padding-y: #{rem($upload-inner-padding-y)};
-  --#{$prefix}upload-border-radius: #{$upload-border-radius};
-  --#{$prefix}upload-border-width: #{rem($upload-border-width)};
-  --#{$prefix}upload-border-color: #{$upload-border-color};
-  --#{$prefix}upload-bg: #{$upload-bg};
-  --#{$prefix}upload-hover-bg: #{$upload-hover-bg};
-  --#{$prefix}upload-icon-size: #{$upload-icon-size};
-  --#{$prefix}upload-icon-padding: #{$upload-icon-padding};
-  --#{$prefix}upload-icon-bg: #{$upload-icon-bg};
-  --#{$prefix}upload-title-font-size: #{$upload-title-font-size};
-  --#{$prefix}upload-title-font-weight: #{$upload-title-font-weight};
-  --#{$prefix}upload-title-color: #{$upload-title-color};
-  --#{$prefix}upload-title-margin-top: #{rem($upload-title-margin-top)};
-  --#{$prefix}upload-text-font-size: #{$upload-text-font-size};
-  --#{$prefix}upload-text-font-weight: #{$upload-text-font-weight};
-  --#{$prefix}upload-text-color: #{$upload-text-color};
-  --#{$prefix}upload-text-margin-top: #{rem($upload-text-margin-top)};
-  --#{$prefix}upload-btn-margin-top: #{rem($upload-btn-margin-top)};
-  --#{$prefix}upload-btn-margin-left: #{rem($upload-btn-margin-left)};
-  --#{$prefix}upload-helper-text-font-size: #{$upload-helper-text-font-size};
-  --#{$prefix}upload-helper-text-font-weight: #{$upload-helper-text-font-weight};
-  --#{$prefix}upload-helper-text-color: #{$upload-helper-text-color};
-  --#{$prefix}upload-helper-text-margin-top: #{rem(
-      $upload-helper-text-margin-top
-    )};
-  --#{$prefix}upload-loader-padding-x: #{rem($upload-loader-padding-x)};
-  --#{$prefix}upload-loader-padding-y: #{rem($upload-loader-padding-y)};
-  --#{$prefix}upload-loader-border-radius: #{$upload-loader-border-radius};
-  --#{$prefix}upload-loader-border-width: #{$upload-loader-border-width};
-  --#{$prefix}upload-loader-border-color: #{$upload-loader-border-color};
-  --#{$prefix}upload-loader-margin-top: #{$upload-loader-margin-top};
-  --#{$prefix}upload-loader-title-color: #{$upload-loader-title-color};
-  --#{$prefix}upload-loader-title-font-size: #{$upload-loader-title-font-size};
-  --#{$prefix}upload-loader-title-font-weight: #{$upload-loader-title-font-weight};
-  --#{$prefix}upload-loader-text-color: #{$upload-loader-text-color};
-  --#{$prefix}upload-loader-text-font-size: #{$upload-loader-text-font-size};
-  --#{$prefix}upload-loader-text-margin-top: #{rem(
-      $upload-loader-text-margin-top
-    )};
-  --#{$prefix}upload-loader-color: #{$upload-loader-progress-color};
-  --#{$prefix}upload-loader-bar-height: #{rem($upload-loader-bar-height)};
-  --#{$prefix}upload-loader-bar-margin-top: #{rem($upload-loader-bar-margin-top)};
-  --#{$prefix}upload-loader-bg-opacity: #{$upload-loader-bg-opacity};
-  --#{$prefix}upload-loader-progress: 39%;
-  --#{$prefix}upload-content-margin-left: #{rem($upload-content-margin-left)};
-  --#{$prefix}upload-disabled-opacity: #{$upload-disabled-opacity};
-  --#{$prefix}upload-loader-control-icon-size: #{$upload-loader-control-icon-size};
-  --#{$prefix}upload-loader-contorl-color: #{$upload-loader-contorl-color};
-
-  width: 100%;
-  max-width: var(--#{$prefix}upload-width);
-  padding: var(--#{$prefix}upload-padding-y) var(--#{$prefix}upload-padding-x);
-  background-color: var(--#{$prefix}upload-bg);
-  border-radius: var(--#{$prefix}upload-border-radius);
-
-  @include basic-transition();
-
-  &:hover {
-    background-color: var(--#{$prefix}upload-hover-bg);
-  }
-
-  &__inner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: var(--#{$prefix}upload-inner-padding-y)
-      var(--#{$prefix}upload-inner-padding-x);
-    border-radius: var(--#{$prefix}upload-border-radius);
-    border: var(--#{$prefix}upload-border-width) dashed
-      var(--#{$prefix}upload-border-color);
-  }
-
-  &__icon {
-    font-size: var(--#{$prefix}upload-icon-size);
-    padding: var(--#{$prefix}upload-icon-padding);
-    background-color: var(--#{$prefix}upload-icon-bg);
-
-    @include border-radius($border-radius-pill);
-  }
-
-  &__title {
-    color: var(--#{$prefix}upload-title-color);
-    font-size: var(--#{$prefix}upload-title-font-size);
-    font-weight: var(--#{$prefix}upload-title-font-weight);
-    margin-top: var(--#{$prefix}upload-title-margin-top);
-  }
-
-  &__text {
-    color: var(--#{$prefix}upload-text-color);
-    font-size: var(--#{$prefix}upload-text-font-size);
-    font-weight: var(--#{$prefix}upload-text-font-weight);
-    margin-top: var(--#{$prefix}upload-text-margin-top);
-  }
-
-  &__btn {
-    margin-top: var(--#{$prefix}upload-btn-margin-top);
-  }
-
-  &__helper-text {
-    color: var(--#{$prefix}upload-helper-text-color);
-    font-size: var(--#{$prefix}upload-helper-text-font-size);
-    font-weight: var(--#{$prefix}upload-helper-text-font-weight);
-    margin-top: var(--#{$prefix}upload-helper-text-margin-top);
-  }
-
-  &__row {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &__col {
-    display: flex;
-    align-items: center;
-  }
-
-  &__content {
-    margin-left: var(--#{$prefix}upload-content-margin-left);
-  }
-
-  &__loader {
-    --upload-loader-percentage: 0;
-
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    width: 100%;
-    max-width: rem($upload-width);
-    padding: var(--#{$prefix}upload-loader-padding-y)
-      var(--#{$prefix}upload-loader-padding-x);
-    border: var(--#{$prefix}upload-loader-border-width) solid
-      var(--#{$prefix}upload-loader-border-color);
-    border-radius: var(--#{$prefix}upload-loader-border-radius);
-    margin-top: var(--#{$prefix}upload-loader-margin-top);
-    overflow: hidden;
-  }
-
-  &__loader-title {
-    color: var(--#{$prefix}upload-loader-title-color);
-    font-size: var(--#{$prefix}upload-loader-title-font-size);
-    font-weight: var(--#{$prefix}upload-loader-title-font-weight);
-    line-height: 1.715;
-  }
-
-  &__loader-progress {
-    display: flex;
-    gap: 10px;
-    color: var(--#{$prefix}upload-loader-text-color);
-    font-size: var(--#{$prefix}upload-loader-text-font-size);
-    line-height: 1.43;
-    margin-top: var(--#{$prefix}upload-loader-text-margin-top);
-  }
-
-  &__loader-control {
-    display: flex;
-    align-items: center;
-    gap: rem(4px);
-  }
-
-  &__loader-close {
-    color: var(--#{$prefix}upload-loader-contorl-color);
-    font-size: var(--#{$prefix}upload-loader-control-icon-size);
-  }
-
-  &__loader-bar {
-    width: 22px;
-    height: 22px;
-
-
-    svg {
-      width: 100%;
-      height: 100%;
-
-      circle {
-        width: 100%;
-        height: 100%;
-        fill: none;
-        stroke: var(--#{$prefix}secondary-bg-subtle);
-        stroke-width: 2px;
-        stroke-linecap: round;
-        transform: translate(1px, 1px);
-
-        &:nth-child(2)
-        {
-          stroke-dasharray: 63;
-          stroke-dashoffset: 63;
-        }
-
-        &:nth-child(2)
-        {
-          stroke-dashoffset: calc(63 - (63 * var(--upload-loader-percentage) ) / 100);
-          stroke: var(--#{$prefix}upload-loader-color);
-        }
-      }
-    }
-  }
-
-  &--large {
-    --#{$prefix}upload-width: #{rem($upload-width-large)};
-    --#{$prefix}upload-inner-padding-x: #{rem($upload-large-inner-padding-x)};
-    --#{$prefix}upload-inner-padding-y: #{rem($upload-large-inner-padding-y)};
-    --#{$prefix}upload-title-margin-top: 0;
-    --#{$prefix}upload-btn-margin-top: 0;
-    --#{$prefix}upload-helper-text-margin-top: 0;
-
-    #{$root} {
-      &__loader {
-        max-width: rem(360px);
-      }
-
-      &__btn {
-        margin-left: var(--#{$prefix}upload-btn-margin-left);
-      }
-    }
-  }
-
-  &--sm {
-    --#{$prefix}upload-width: #{rem($upload-width-sm)};
-  }
-
-  &--success {
-    --#{$prefix}upload-loader-progress: 100%;
-    --#{$prefix}upload-loader-text-color: #{$upload-loader-success-color};
-    --#{$prefix}upload-loader-color: #{$upload-loader-success-color};
-    --#{$prefix}upload-loader-contorl-color: #{$upload-loader-success-color};
-  }
-
-  &--error {
-    --#{$prefix}upload-loader-text-color: #{$upload-loader-error-color};
-    --#{$prefix}upload-loader-color: #{$upload-loader-error-color};
-    --#{$prefix}upload-loader-contorl-color: #{$upload-loader-error-color};
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-    user-select: none;
-    opacity: var(--#{$prefix}upload-disabled-opacity);
-
-    #{$root}__btn {
-      pointer-events: none;
-    }
-  }
-}

package/src/styles/06-components/_index.scss

@@ -1,49 +0,0 @@
-// Forward all component files
-@forward "components.accordion";
-@forward "components.avatar";
-@forward "components.avatar-group";
-@forward "components.badge";
-@forward "components.breadcrumb";
-@forward "components.btn-group";
-@forward "components.button";
-@forward "components.datepicker";
-@forward "components.card";
-@forward "components.checkbox-group";
-@forward "components.checkbox";
-@forward "components.color-mode-toggle";
-@forward "components.countdown";
-@forward "components.data-table";
-@forward "components.dropdown";
-@forward "components.edge-panel";
-@forward "components.form";
-@forward "components.hero";
-@forward "components.form-group";
-@forward "components.input";
-@forward "components.list-group";
-@forward "components.list";
-@forward "components.menu";
-@forward "components.messages";
-@forward "components.modal";
-@forward "components.nav";
-@forward "components.navbar";
-@forward "components.callout";
-@forward "components.pagination";
-@forward "components.popover";
-@forward "components.product-review";
-@forward "components.progress";
-@forward "components.rating";
-@forward "components.river";
-@forward "components.sectionintro";
-@forward "components.select";
-@forward "components.side-menu";
-@forward "components.skeleton";
-@forward "components.spinner";
-@forward "components.steps";
-@forward "components.tabs";
-@forward "components.testimonials";
-@forward "components.todo";
-@forward "components.toggle";
-@forward "components.tooltip";
-@forward "components.upload";
-@forward "components.photoviewer";
-@forward "components.image-gallery";

package/src/styles/99-utilities/_index.scss

@@ -1,21 +0,0 @@
-// Forward all utility files
-@forward "utilities.background";
-@forward "utilities.border";
-@forward "utilities.clearfix";
-@forward "utilities.display";
-@forward "utilities.flex";
-@forward "utilities.link";
-@forward "utilities.object-fit";
-@forward "utilities.opacity";
-@forward "utilities.overflow";
-@forward "utilities.position";
-@forward "utilities.shadow";
-@forward "utilities.sizes";
-@forward "utilities.spacing";
-@forward "utilities.text";
-@forward "utilities.visibility";
-@forward "utilities.visually-hidden";
-@forward "utilities.z-index";
-
-// Forward the main utilities generator
-@forward "utilities";

package/src/styles/99-utilities/_utilities.background.scss

@@ -1,28 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.colors' as colors;
-@use '../01-settings/settings.maps' as color-maps;
-@use '../01-settings/settings.config' as config;
-
-// Define utilities for background
-$utilities-bg: (
-  "background-color": (
-    property: background-color,
-    class: u-bg,
-    values: map.merge(
-      color-maps.$utilities-bg-colors,
-      (
-        "transparent": transparent,
-      )
-    )
-  ),
-  "subtle-background-color": (
-    property: background-color,
-    class: u-bg,
-    values: map.merge(
-      color-maps.$utilities-bg-subtle,
-      (
-        "transparent": transparent,
-      )
-    )
-  ),
-);

package/src/styles/99-utilities/_utilities.border.scss

@@ -1,157 +0,0 @@
-@use 'sass:map';
-@use "../01-settings/settings.config" as config;
-@use "../01-settings/settings.maps" as color-maps;
-@use "../01-settings/settings.border" as border;
-
-// Define utilities for borders
-$utilities-border: (
-  'border': (
-    property: border,
-    class: u-border,
-    values: (
-      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
-        var(--#{config.$prefix}border-color),
-      0: 0
-    )
-  ),
-  'border-top': (
-    property: border-top,
-    class: u-border-t,
-    values: (
-      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
-        var(--#{config.$prefix}border-color),
-      0: 0
-    )
-  ),
-  'border-end': (
-    property: border-right,
-    class: u-border-e,
-    values: (
-      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
-        var(--#{config.$prefix}border-color),
-      0: 0
-    )
-  ),
-  'border-bottom': (
-    property: border-bottom,
-    class: u-border-b,
-    values: (
-      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
-        var(--#{config.$prefix}border-color),
-      0: 0
-    )
-  ),
-  'border-start': (
-    property: border-left,
-    class: u-border-s,
-    values: (
-      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
-        var(--#{config.$prefix}border-color),
-      0: 0
-    )
-  ),
-  'border-color': (
-    property: border-color,
-    class: u-border,
-    local-vars: (
-      'border-opacity': 1
-    ),
-    values: color-maps.$utilities-border-colors
-  ),
-  'subtle-border-color': (
-    property: border-color,
-    class: u-border,
-    values: color-maps.$utilities-border-subtle
-  ),
-  'border-width': (
-    property: border-width,
-    class: u-border,
-    values: border.$border-widths
-  ),
-  'border-opacity': (
-    css-var: true,
-    class: u-border-opacity,
-    values: (
-      10: 0.1,
-      25: 0.25,
-      50: 0.5,
-      75: 0.75,
-      100: 1
-    )
-  ),
-  'rounded': (
-    property: border-radius,
-    class: u-rounded,
-    values: (
-      null: var(--#{config.$prefix}border-radius),
-      0: 0,
-      sm: var(--#{config.$prefix}border-radius-sm),
-      md: var(--#{config.$prefix}border-radius),
-      lg: var(--#{config.$prefix}border-radius-lg),
-      xl: var(--#{config.$prefix}border-radius-xl),
-      xxl: var(--#{config.$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
-  ),
-  'rounded-top': (
-    property: border-top-left-radius border-top-right-radius,
-    class: u-rounded-top,
-    values: (
-      null: var(--#{config.$prefix}border-radius),
-      0: 0,
-      sm: var(--#{config.$prefix}border-radius-sm),
-      md: var(--#{config.$prefix}border-radius),
-      lg: var(--#{config.$prefix}border-radius-lg),
-      xl: var(--#{config.$prefix}border-radius-xl),
-      xxl: var(--#{config.$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
-  ),
-  'rounded-end': (
-    property: border-top-right-radius border-bottom-right-radius,
-    class: u-rounded-end,
-    values: (
-      null: var(--#{config.$prefix}border-radius),
-      0: 0,
-      sm: var(--#{config.$prefix}border-radius-sm),
-      md: var(--#{config.$prefix}border-radius),
-      lg: var(--#{config.$prefix}border-radius-lg),
-      xl: var(--#{config.$prefix}border-radius-xl),
-      xxl: var(--#{config.$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
-  ),
-  'rounded-bottom': (
-    property: border-bottom-right-radius border-bottom-left-radius,
-    class: u-rounded-bottom,
-    values: (
-      null: var(--#{config.$prefix}border-radius),
-      0: 0,
-      sm: var(--#{config.$prefix}border-radius-sm),
-      md: var(--#{config.$prefix}border-radius),
-      lg: var(--#{config.$prefix}border-radius-lg),
-      xl: var(--#{config.$prefix}border-radius-xl),
-      xxl: var(--#{config.$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
-  ),
-  'rounded-start': (
-    property: border-bottom-left-radius border-top-left-radius,
-    class: u-rounded-start,
-    values: (
-      null: var(--#{config.$prefix}border-radius),
-      0: 0,
-      sm: var(--#{config.$prefix}border-radius-sm),
-      md: var(--#{config.$prefix}border-radius),
-      lg: var(--#{config.$prefix}border-radius-lg),
-      xl: var(--#{config.$prefix}border-radius-xl),
-      xxl: var(--#{config.$prefix}border-radius-xxl),
-      circle: 50%,
-      pill: var(--#{config.$prefix}border-radius-pill)
-    )
-  )
-);

package/src/styles/99-utilities/_utilities.clearfix.scss

@@ -1,5 +0,0 @@
-@use "../02-tools/tools.clearfix" as *;
-
-.u-clearfix {
-  @include clearfix;
-}

package/src/styles/99-utilities/_utilities.display.scss

@@ -1,12 +0,0 @@
-@use 'sass:map';
-
-// Define utilities for display
-$utilities-display: (
-  "display": (
-    responsive: true,
-    print: true,
-    property: display,
-    class: u-d,
-    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
-  )
-);

package/src/styles/99-utilities/_utilities.flex.scss

@@ -1,109 +0,0 @@
-@use 'sass:map';
-
-// Define utilities for flex layout
-$utilities-flex: (
-  'flex': (
-    responsive: true,
-    property: flex,
-    class: u-flex,
-    values: (
-      fill: 1 1 auto
-    )
-  ),
-  'flex-direction': (
-    responsive: true,
-    property: flex-direction,
-    class: u-flex,
-    values: row column row-reverse column-reverse
-  ),
-  'flex-grow': (
-    responsive: true,
-    property: flex-grow,
-    class: u-flex,
-    values: (
-      grow-0: 0,
-      grow-1: 1
-    )
-  ),
-  'flex-shrink': (
-    responsive: true,
-    property: flex-shrink,
-    class: u-flex,
-    values: (
-      shrink-0: 0,
-      shrink-1: 1
-    )
-  ),
-  'flex-wrap': (
-    responsive: true,
-    property: flex-wrap,
-    class: u-flex,
-    values: wrap nowrap wrap-reverse
-  ),
-  'justify-content': (
-    responsive: true,
-    property: justify-content,
-    class: u-justify-content,
-    values: (
-      start: flex-start,
-      end: flex-end,
-      center: center,
-      between: space-between,
-      around: space-around,
-      evenly: space-evenly
-    )
-  ),
-  'align-items': (
-    responsive: true,
-    property: align-items,
-    class: u-align-items,
-    values: (
-      start: flex-start,
-      end: flex-end,
-      center: center,
-      baseline: baseline,
-      stretch: stretch
-    )
-  ),
-  'align-content': (
-    responsive: true,
-    property: align-content,
-    class: u-align-content,
-    values: (
-      start: flex-start,
-      end: flex-end,
-      center: center,
-      between: space-between,
-      around: space-around,
-      stretch: stretch
-    )
-  ),
-  'align-self': (
-    responsive: true,
-    property: align-self,
-    class: u-align-self,
-    values: (
-      auto: auto,
-      start: flex-start,
-      end: flex-end,
-      center: center,
-      baseline: baseline,
-      stretch: stretch
-    )
-  ),
-  'order': (
-    responsive: true,
-    property: order,
-    class: u-order,
-    values: (
-      first: -1,
-      0: 0,
-      1: 1,
-      2: 2,
-      3: 3,
-      4: 4,
-      5: 5,
-      last: 6
-    )
-  )
-);