@shohojdhara/atomix 0.5.5 → 0.5.7

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

@@ -60,9 +60,9 @@
   &__overlay {
     position: absolute;
     inset: 0;
-    @include dynamic-background(var(--#{config.$prefix}river-overlay));
     opacity: var(--#{config.$prefix}river-overlay-opacity);
     border-radius: var(--#{config.$prefix}river-border-radius);
+    @include dynamic-background(var(--#{config.$prefix}river-overlay));
   }
 
   &__container {

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

@@ -117,8 +117,8 @@
     left: 0;
     width: 100%;
     height: 100%;
-    @include dynamic-background(var(--#{$prefix}sectionintro-overlay-bg-color));
     opacity: var(--#{$prefix}sectionintro-overlay-opacity);
+    @include dynamic-background(var(--#{$prefix}sectionintro-overlay-bg-color));
   }
 
   &--has-bg {

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

@@ -49,12 +49,11 @@
     padding: var(--#{$prefix}select-padding-x) var(--#{$prefix}select-padding-y);
     color: var(--#{$prefix}select-placeholder-color);
     font-size: var(--#{$prefix}select-font-size);
-    @include dynamic-background(var(--#{$prefix}select-bg));
     border: 1px solid var(--#{$prefix}select-border-color);
     border-radius: var(--#{$prefix}select-border-radius);
     cursor: pointer;
-
     @include transition.basic-transition();
+    @include dynamic-background(var(--#{$prefix}select-bg));
 
     &:hover {
       border-color: var(--#{$prefix}select-border-color-hover);
@@ -72,18 +71,18 @@
     @include transition.basic-transition();
   }
 
-  &__body {
+  &__dropdown {
     position: absolute;
     width: 100%;
     height: 0px;
     top: calc(100% + var(--#{$prefix}select-panel-spacer-y));
     left: 0;
-    @include dynamic-background(var(--#{$prefix}select-panel-bg));
     border-radius: var(--#{$prefix}select-panel-border-radius);
     box-shadow: var(--#{$prefix}select-panel-box-shadow);
     overflow: hidden;
-    @include transition.basic-transition;
     z-index: 99;
+    @include transition.basic-transition;
+    @include dynamic-background(var(--#{$prefix}select-panel-bg));
   }
 
   &__panel {
@@ -99,9 +98,9 @@
   &__item {
     padding: var(--#{$prefix}select-item-padding-x) var(--#{$prefix}select-item-padding-y);
     color: var(--#{$prefix}select-item-color);
-    @include dynamic-background(var(--#{$prefix}select-item-bg));
     border-radius: var(--#{$prefix}select-item-border-radius);
     @include transition.basic-transition;
+    @include dynamic-background(var(--#{$prefix}select-item-bg));
 
     &,
     & > * {

package/src/styles/06-components/_components.side-menu.scss

@@ -51,11 +51,11 @@
   // 2. Base Component Styles
   width: 100%;
   padding: var(--#{config.$prefix}side-menu-padding-y) var(--#{config.$prefix}side-menu-padding-x);
-  @include dynamic-background(var(--#{config.$prefix}side-menu-bg));
   border-radius: var(--#{config.$prefix}side-menu-border-radius);
   border: var(--#{config.$prefix}side-menu-border-width) solid
     var(--#{config.$prefix}side-menu-border-color);
   box-shadow: var(--#{config.$prefix}side-menu-box-shadow);
+  @include dynamic-background(var(--#{config.$prefix}side-menu-bg));
 
   // 3. Responsive Styles
   @include media-breakpoint-down(md) {
@@ -96,7 +96,6 @@
     width: 100%;
     padding: var(--#{config.$prefix}side-menu-toggler-padding-y)
       var(--#{config.$prefix}side-menu-toggler-padding-x);
-    @include dynamic-background(var(--#{config.$prefix}side-menu-toggler-bg));
     border: none;
     border-radius: var(--#{config.$prefix}side-menu-toggler-border-radius);
     cursor: pointer;
@@ -104,6 +103,7 @@
     transition: var(--#{config.$prefix}side-menu-toggler-transition);
     text-align: left;
     margin: 0;
+    @include dynamic-background(var(--#{config.$prefix}side-menu-toggler-bg));
 
     &:hover {
       @include dynamic-background(var(--#{config.$prefix}side-menu-toggler-hover-bg));
@@ -184,18 +184,18 @@
     color: var(--#{config.$prefix}side-menu-item-color);
     font-size: var(--#{config.$prefix}side-menu-item-font-size);
     font-weight: var(--#{config.$prefix}side-menu-item-font-weight);
-    @include dynamic-background(var(--#{config.$prefix}side-menu-item-bg));
     border: none;
     border-radius: var(--#{config.$prefix}side-menu-item-border-radius);
     text-decoration: none;
     cursor: pointer;
     transition: var(--#{config.$prefix}side-menu-item-transition);
     position: relative;
+    @include dynamic-background(var(--#{config.$prefix}side-menu-item-bg));
 
     &:hover {
       color: var(--#{config.$prefix}side-menu-item-hover-color);
-      @include dynamic-background(var(--#{config.$prefix}side-menu-item-hover-bg));
       text-decoration: none;
+      @include dynamic-background(var(--#{config.$prefix}side-menu-item-hover-bg));
     }
 
     &:focus-visible {
@@ -214,17 +214,17 @@
     // 5. State Classes
     &.is-active {
       color: var(--#{config.$prefix}side-menu-item-active-color);
-      @include dynamic-background(var(--#{config.$prefix}side-menu-item-active-bg));
       font-weight: typography.$font-weight-medium;
+      @include dynamic-background(var(--#{config.$prefix}side-menu-item-active-bg));
     }
 
     &.is-disabled,
     &[aria-disabled='true'] {
       color: var(--#{config.$prefix}side-menu-item-disabled-color);
-      @include dynamic-background(var(--#{config.$prefix}side-menu-item-disabled-bg));
       cursor: not-allowed;
       pointer-events: none;
       opacity: 0.6;
+      @include dynamic-background(var(--#{config.$prefix}side-menu-item-disabled-bg));
     }
   }
 

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

@@ -17,14 +17,6 @@
   display: inline-block;
   width: var(--#{$prefix}skeleton-width);
   min-height: var(--#{$prefix}skeleton-height);
-  @include dynamic-background(
-    linear-gradient(
-      90deg,
-      var(--#{$prefix}skeleton-gradient-from-color) 25%,
-      var(--#{$prefix}skeleton-gradient-to-color) 37%,
-      var(--#{$prefix}skeleton-gradient-from-color) 63%
-    )
-  );
   background-size: 400% 100%;
   border-radius: var(--#{$prefix}skeleton-border-radius);
   animation-name: #{$prefix}-skeleton-loading;
@@ -34,6 +26,14 @@
   pointer-events: none;
   vertical-align: middle;
   cursor: wait;
+  @include dynamic-background(
+    linear-gradient(
+      90deg,
+      var(--#{$prefix}skeleton-gradient-from-color) 25%,
+      var(--#{$prefix}skeleton-gradient-to-color) 37%,
+      var(--#{$prefix}skeleton-gradient-from-color) 63%
+    )
+  );
 
   &--rect {
     width: calc(var(--#{$prefix}skeleton-height) * 5.15);

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

@@ -72,9 +72,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    @include dynamic-background(slider.$slider-empty-background);
     border: slider.$slider-empty-border;
     border-radius: slider.$slider-empty-border-radius;
+    @include dynamic-background(slider.$slider-empty-background);
   }
 }
 
@@ -117,7 +117,6 @@
   height: var(--#{config.$prefix}slider-nav-size);
   border: none;
   border-radius: slider.$slider-nav-border-radius;
-  @include dynamic-background(slider.$slider-nav-background);
   color: slider.$slider-nav-color;
   cursor: pointer;
   pointer-events: auto;
@@ -127,11 +126,12 @@
   justify-content: center;
   transition: slider.$slider-nav-transition;
   box-shadow: slider.$slider-nav-shadow;
+  @include dynamic-background(slider.$slider-nav-background);
 
   &:hover {
-    @include dynamic-background(slider.$slider-nav-background-hover);
     transform: translateY(-50%) scale(1.05);
     box-shadow: slider.$slider-nav-shadow-hover;
+    @include dynamic-background(slider.$slider-nav-background-hover);
   }
 
   &:active {
@@ -188,14 +188,14 @@
   height: slider.$slider-pagination-bullet-size;
   border-radius: slider.$slider-pagination-bullet-border-radius;
   border: none;
-  @include dynamic-background(slider.$slider-pagination-bullet-background);
   cursor: pointer;
   pointer-events: auto;
   transition: slider.$slider-pagination-transition;
+  @include dynamic-background(slider.$slider-pagination-bullet-background);
 
   &:hover {
-    @include dynamic-background(slider.$slider-pagination-bullet-background-hover);
     transform: scale(1.2);
+    @include dynamic-background(slider.$slider-pagination-bullet-background-hover);
   }
 
   &:active {
@@ -203,8 +203,8 @@
   }
 
   &--active {
-    @include dynamic-background(slider.$slider-pagination-bullet-background-active);
     transform: scale(1.2);
+    @include dynamic-background(slider.$slider-pagination-bullet-background-active);
   }
 }
 

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

@@ -54,8 +54,8 @@
   &__line {
     width: var(--#{$prefix}steps-line-width);
     height: var(--#{$prefix}steps-line-height);
-    @include dynamic-background(var(--#{$prefix}steps-item-bg));
     transition: 1s;
+    @include dynamic-background(var(--#{$prefix}steps-item-bg));
   }
 
   &__content {
@@ -71,8 +71,8 @@
     @include square(var(--#{$prefix}steps-item-number-size));
     color: var(--#{$prefix}steps-item-number-color);
     font-size: var(--#{$prefix}steps-item-number-font-size);
-    @include dynamic-background(var(--#{$prefix}steps-item-number-bg));
     border-radius: var(--#{$prefix}steps-item-number-border-radius);
+    @include dynamic-background(var(--#{$prefix}steps-item-number-bg));
   }
 
   &__text {

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

@@ -68,8 +68,8 @@
     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);
-    @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg));
     @include basic-transition();
+    @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg));
 
     &:active,
     &.is-active {
@@ -89,8 +89,8 @@
       );
 
       color: var(--#{$prefix}tabs-nav-btn-border-disabled-color);
-      @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg-disabled));
       pointer-events: none;
+      @include dynamic-background(var(--#{$prefix}tabs-nav-btn-bg-disabled));
     }
 
     &:focus-visible {

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

@@ -27,9 +27,9 @@
   margin-bottom: todo.$todo-margin-bottom;
   border: 1px solid var(--#{config.$prefix}todo-border-color);
   border-radius: var(--#{config.$prefix}todo-border-radius);
-  @include dynamic-background(var(--#{config.$prefix}todo-bg));
   color: var(--#{config.$prefix}todo-color);
   padding: todo.$todo-padding;
+  @include dynamic-background(var(--#{config.$prefix}todo-bg));
 
   // Title
   &__title {

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

@@ -35,12 +35,11 @@
     flex: 0 0 var(--#{$prefix}toggle-switch-width);
     width: var(--#{$prefix}toggle-switch-width);
     height: var(--#{$prefix}toggle-switch-height);
-    @include dynamic-background(var(--#{$prefix}toggle-switch-bg));
     border-radius: var(--#{$prefix}toggle-switch-border-radius);
     user-select: none;
     cursor: pointer;
-
     @include transition.basic-transition();
+    @include dynamic-background(var(--#{$prefix}toggle-switch-bg));
 
     &::before {
       content: '';
@@ -48,10 +47,9 @@
       width: var(--#{$prefix}toggle-switch-handle-width);
       height: var(--#{$prefix}toggle-switch-handle-height);
       margin: var(--#{$prefix}toggle-switch-handle-margin);
-      @include dynamic-background(var(--#{$prefix}toggle-switch-handle-bg));
       border-radius: var(--#{$prefix}toggle-switch-handle-border-radius);
-
       @include transition.basic-transition();
+      @include dynamic-background(var(--#{$prefix}toggle-switch-handle-bg));
     }
   }
 
@@ -93,8 +91,8 @@
         content: '';
         position: absolute;
         inset: 0;
-        @include dynamic-background(colors.$overlay-2);
         border-radius: var(--#{$prefix}toggle-switch-handle-border-radius);
+        @include dynamic-background(colors.$overlay-2);
       }
     }
   }

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

@@ -36,21 +36,19 @@
     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);
-    @include dynamic-background(var(--#{$prefix}tooltip-bg));
     border-radius: var(--#{$prefix}tooltip-border-radius);
     box-shadow: var(--#{$prefix}tooltip-box-shadow);
     z-index: 2;
     opacity: 0;
     pointer-events: auto; // Allow interaction with tooltip content
-
     // Animation
     transition:
       opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
       transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
     // Initial states for animation based on position would be complex to do purely generically here without separate classes
     // So we stick to a simple scale/fade
     transform: scale(0.95);
+    @include dynamic-background(var(--#{$prefix}tooltip-bg));
 
     &.is-active {
       opacity: 1;
@@ -65,9 +63,9 @@
     border-radius: calc(
       (var(--#{$prefix}tooltip-arrow-size) - var(--#{$prefix}tooltip-border-radius)) / 2
     );
-    @include dynamic-background(var(--#{$prefix}tooltip-bg));
     z-index: 1;
     transform: rotate(45deg);
+    @include dynamic-background(var(--#{$prefix}tooltip-bg));
   }
 
   &--left &__arrow,

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

@@ -65,10 +65,9 @@
   width: 100%;
   max-width: var(--#{$prefix}upload-width);
   padding: var(--#{$prefix}upload-padding-y) var(--#{$prefix}upload-padding-x);
-  @include dynamic-background(var(--#{$prefix}upload-bg));
   border-radius: var(--#{$prefix}upload-border-radius);
-
   @include basic-transition();
+  @include dynamic-background(var(--#{$prefix}upload-bg));
 
   &:hover {
     @include dynamic-background(var(--#{$prefix}upload-hover-bg));

package/src/styles/06-components/_components.video-player.scss

@@ -36,10 +36,10 @@
 
   position: relative;
   width: 100%;
-  @include dynamic-background(var(--#{$prefix}-video-player-bg, #000));
   border-radius: var(--#{$prefix}-video-player-border-radius, 0.5rem);
   overflow: hidden;
   font-family: var(--#{$prefix}-font-family-base);
+  @include dynamic-background(var(--#{$prefix}-video-player-bg, #000));
 
   // &:focus-within,
   // &:focus {
@@ -352,11 +352,11 @@
     bottom: 3.125rem;
     right: 0;
     min-width: 12.5rem;
-    @include dynamic-background(rgba(var(--#{$prefix}primary-rgb), 0.7));
     border-radius: 0.5rem;
     padding: 0.5rem;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
+    @include dynamic-background(rgba(var(--#{$prefix}primary-rgb), 0.7));
   }
 
   &__settings-tabs {

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

@@ -64,12 +64,11 @@ $utilities-link: (
 $enable-important-utilities: true !default;
 $link-shade-percentage: 15% !default;
 
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in color-maps.$theme-colors {
   .u-link-#{$color} {
-    color: RGBA(var(--#{config.$prefix}#{$color}-rgb), var(--#{config.$prefix}u-link-opacity, 1))
+    color: rgba(var(--#{config.$prefix}#{$color}-rgb), var(--#{config.$prefix}u-link-opacity, 1))
       if($enable-important-utilities, !important, null);
-    text-decoration-color: RGBA(
+    text-decoration-color: rgba(
         var(--#{config.$prefix}#{$color}-rgb),
         var(--#{config.$prefix}u-link-underline-opacity, 1)
       )
@@ -83,9 +82,9 @@ $link-shade-percentage: 15% !default;
           shade-color($value, $link-shade-percentage),
           tint-color($value, $link-shade-percentage)
         );
-        color: RGBA(#{to-rgb($hover-color)}, var(--#{config.$prefix}u-link-opacity, 1))
+        color: rgba(#{to-rgb($hover-color)}, var(--#{config.$prefix}u-link-opacity, 1))
           if($enable-important-utilities, !important, null);
-        text-decoration-color: RGBA(
+        text-decoration-color: rgba(
             #{to-rgb($hover-color)},
             var(--#{config.$prefix}u-link-underline-opacity, 1)
           )