@rolster/styles-foundations 3.0.3 → 3.0.5

package/scss/design-system-bordered/organisms/image-editor.scss

@@ -1,118 +1,118 @@
-// Rolster Technology ImageEditor Component
-// v1.0.1
-// @license MIT
-// Author: Rolster Developers
-// Created: 03/Jul/2018
-// Updated: 11/Jul/2025
-
-.rls-image-editor {
-  --pvt-overlay-background: var(--rls-theme-backdrop-900);
-  --pvt-sliders-padding: 0rem var(--rls-sizing-x8);
-  --pvt-actions-direction: row;
-  --pvt-actions-row-gap: 0rem;
-  --pvt-actions-column-gap: var(--rls-sizing-x8);
-
-  position: relative;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  row-gap: var(--rls-sizing-x12);
-
-  &__body {
-    position: relative;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    background: var(--rls-app-color-900);
-
-    &__image {
-      overflow: hidden;
-    }
-
-    &__selection {
-      position: absolute;
-      cursor: move;
-      box-sizing: border-box;
-      z-index: var(--rls-z-index-4);
-      border: var(
-        --rlc-image-editor-selection-border,
-        2px dashed var(--rls-app-color-050)
-      );
-      user-select: none;
-    }
-
-    &__overlay--top {
-      position: absolute;
-      top: 0rem;
-      z-index: var(--rls-z-index-2);
-      background: var(--pvt-overlay-background);
-    }
-
-    &__overlay--right {
-      position: absolute;
-      right: 0rem;
-      height: 100%;
-      z-index: var(--rls-z-index-2);
-      background: var(--pvt-overlay-background);
-    }
-
-    &__overlay--bottom {
-      position: absolute;
-      bottom: 0rem;
-      z-index: var(--rls-z-index-2);
-      background: var(--pvt-overlay-background);
-    }
-
-    &__overlay--left {
-      position: absolute;
-      right: 0rem;
-      height: 100%;
-      z-index: var(--rls-z-index-2);
-      background: var(--pvt-overlay-background);
-    }
-  }
-
-  &__footer {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--rls-sizing-x12);
-    padding: var(--rlc-image-editor-footer-padding, 0rem);
-    box-sizing: border-box;
-  }
-
-  &__sliders {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--rls-sizing-x6);
-    padding: var(--pvt-sliders-padding);
-    box-sizing: border-box;
-  }
-
-  &__actions {
-    display: flex;
-    flex-direction: var(--pvt-actions-direction);
-    justify-content: center;
-    row-gap: var(--pvt-actions-row-gap);
-    column-gap: var(--pvt-actions-column-gap);
-  }
-
-  & > canvas {
-    position: absolute;
-    top: 0rem;
-    left: 0rem;
-    z-index: -1;
-    visibility: hidden;
-    pointer-events: none;
-  }
-}
-
-@media only screen and (max-width: 420px) {
-  .rls-image-editor {
-    --pvt-sliders-padding: 0rem;
-    --pvt-actions-direction: column;
-    --pvt-actions-row-gap: var(--rls-sizing-x6);
-    --pvt-actions-column-gap: 0rem;
-
-    row-gap: var(--rls-sizing-x8);
-  }
-}
+// Rolster Technology ImageEditor Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Jul/2018
+// Updated: 11/Jul/2025
+
+.rls-image-editor {
+  --pvt-overlay-background: var(--rls-theme-backdrop-900);
+  --pvt-sliders-padding: 0rem var(--rls-sizing-x8);
+  --pvt-actions-direction: row;
+  --pvt-actions-row-gap: 0rem;
+  --pvt-actions-column-gap: var(--rls-sizing-x8);
+
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x12);
+
+  &__body {
+    position: relative;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    background: var(--rls-app-color-900);
+
+    &__image {
+      overflow: hidden;
+    }
+
+    &__selection {
+      position: absolute;
+      cursor: move;
+      box-sizing: border-box;
+      z-index: var(--rls-z-index-4);
+      border: var(
+        --rlc-image-editor-selection-border,
+        2px dashed var(--rls-app-color-050)
+      );
+      user-select: none;
+    }
+
+    &__overlay--top {
+      position: absolute;
+      top: 0rem;
+      z-index: var(--rls-z-index-2);
+      background: var(--pvt-overlay-background);
+    }
+
+    &__overlay--right {
+      position: absolute;
+      right: 0rem;
+      height: 100%;
+      z-index: var(--rls-z-index-2);
+      background: var(--pvt-overlay-background);
+    }
+
+    &__overlay--bottom {
+      position: absolute;
+      bottom: 0rem;
+      z-index: var(--rls-z-index-2);
+      background: var(--pvt-overlay-background);
+    }
+
+    &__overlay--left {
+      position: absolute;
+      right: 0rem;
+      height: 100%;
+      z-index: var(--rls-z-index-2);
+      background: var(--pvt-overlay-background);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x12);
+    padding: var(--rlc-image-editor-footer-padding, 0rem);
+    box-sizing: border-box;
+  }
+
+  &__sliders {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x6);
+    padding: var(--pvt-sliders-padding);
+    box-sizing: border-box;
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: var(--pvt-actions-direction);
+    justify-content: center;
+    row-gap: var(--pvt-actions-row-gap);
+    column-gap: var(--pvt-actions-column-gap);
+  }
+
+  & > canvas {
+    position: absolute;
+    top: 0rem;
+    left: 0rem;
+    z-index: -1;
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .rls-image-editor {
+    --pvt-sliders-padding: 0rem;
+    --pvt-actions-direction: column;
+    --pvt-actions-row-gap: var(--rls-sizing-x6);
+    --pvt-actions-column-gap: 0rem;
+
+    row-gap: var(--rls-sizing-x8);
+  }
+}

package/scss/design-system-bordered/organisms/modal-sheet.scss

@@ -1,138 +1,138 @@
-// Rolster Technology ModalSheet Component
-// v1.0.2
-// @license MIT
-// Author: Rolster Developers
-// Created: 26/Sep/2018
-// Updated: 08/Abr/2026
-
-.rls-modal-sheet {
-  --pvt-component-transform: translateY(150px) scale(0.6);
-  --pvt-component-bottom: initial;
-  --pvt-component-max-width: var(
-    --rlc-modal-sheet-max-width,
-    calc(100% - var(--rls-sizing-x8))
-  );
-  --pvt-component-height: 0rem;
-  --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
-  --pvt-component-border-radius: var(
-    --rlc-modal-sheet-border-radius,
-    var(--rls-sizing-x4)
-  );
-  --pvt-component-opacity: 0;
-  --pvt-component-visibility: hidden;
-  --pvt-component-transition: 160ms;
-
-  --pvt-backdrop-opacity: 0;
-  --pvt-backdrop-bottom: initial;
-
-  position: fixed;
-  display: flex;
-  top: 0rem;
-  left: 0rem;
-  width: 100%;
-  height: 100%;
-  z-index: var(--rls-z-index-24);
-  visibility: hidden;
-  align-items: center;
-  justify-content: center;
-
-  &--visible {
-    --pvt-component-visibility: visible;
-    --pvt-component-height: auto;
-    --pvt-component-opacity: 1;
-    --pvt-component-transform: translateY(0) scale(1);
-    --pvt-backdrop-bottom: 0rem;
-    --pvt-backdrop-opacity: 1;
-
-    visibility: visible;
-  }
-
-  &__component {
-    position: absolute;
-    display: flex;
-    bottom: var(--pvt-component-bottom);
-    max-width: var(--pvt-component-max-width);
-    height: var(--pvt-component-height);
-    max-height: var(--pvt-component-max-height);
-    flex-direction: column;
-    opacity: var(--pvt-component-opacity);
-    visibility: var(--pvt-component-visibility);
-    z-index: var(--rls-z-index-2);
-    border-radius: var(--pvt-component-border-radius);
-    background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
-    transform: var(--pvt-component-transform);
-    transition:
-      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
-      transform var(--pvt-component-transition) 0ms
-        var(--rls-deceleration-curve),
-      visibility var(--pvt-component-transition) 0ms
-        var(--rls-deceleration-curve);
-  }
-
-  &__backdrop {
-    position: absolute;
-    display: block;
-    top: 0rem;
-    left: 0rem;
-    right: 0rem;
-    bottom: var(--pvt-backdrop-bottom);
-    opacity: var(--pvt-backdrop-opacity);
-    z-index: var(--rls-z-index-1);
-    background: var(
-      --rlc-modal-sheet-backdrop-color,
-      var(--rls-theme-backdrop-400)
-    );
-    backdrop-filter: var(--rlc-modal-sheet-backdrop-filter, blur(2px));
-    transition:
-      opacity 120ms 0ms var(--rls-deceleration-curve),
-      bottom 120ms 0ms var(--rls-deceleration-curve);
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .rls-modal-sheet {
-    --pvt-component-transform: translateY(100%);
-    --pvt-component-bottom: 0px;
-    --pvt-component-max-width: 240rem;
-    --pvt-component-max-height: 75%;
-    --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
-      0rem 0rem;
-    --pvt-component-transition: 320ms;
-
-    align-items: initial;
-
-    &--visible {
-      --pvt-component-transform: translateY(0);
-    }
-
-    &__component {
-      &::before {
-        display: block;
-        content: '';
-        width: var(--rls-sizing-x24);
-        height: var(--rls-sizing-x2);
-        border-radius: var(--rls-sizing-x2);
-        background: var(--rls-app-color-300);
-        margin: var(--rls-sizing-x3) auto;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 640px) and (max-height: 960px) {
-  .rls-modal-sheet {
-    --pvt-component-max-height: calc(100% - 32rem);
-  }
-}
-
-@media screen and (max-width: 640px) and (max-height: 720px) {
-  .rls-modal-sheet {
-    --pvt-component-max-height: calc(100% - 24rem);
-  }
-}
-
-@media screen and (max-width: 640px) and (max-height: 560px) {
-  .rls-modal-sheet {
-    --pvt-component-max-height: calc(100% - 16rem);
-  }
-}
+// Rolster Technology ModalSheet Component
+// v1.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 26/Sep/2018
+// Updated: 08/Abr/2026
+
+.rls-modal-sheet {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-bottom: initial;
+  --pvt-component-max-width: var(
+    --rlc-modal-sheet-max-width,
+    calc(100% - var(--rls-sizing-x8))
+  );
+  --pvt-component-height: 0rem;
+  --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
+  --pvt-component-border-radius: var(
+    --rlc-modal-sheet-border-radius,
+    var(--rls-sizing-x4)
+  );
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 160ms;
+
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+
+  &--visible {
+    --pvt-component-visibility: visible;
+    --pvt-component-height: auto;
+    --pvt-component-opacity: 1;
+    --pvt-component-transform: translateY(0) scale(1);
+    --pvt-backdrop-bottom: 0rem;
+    --pvt-backdrop-opacity: 1;
+
+    visibility: visible;
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    bottom: var(--pvt-component-bottom);
+    max-width: var(--pvt-component-max-width);
+    height: var(--pvt-component-height);
+    max-height: var(--pvt-component-max-height);
+    flex-direction: column;
+    opacity: var(--pvt-component-opacity);
+    visibility: var(--pvt-component-visibility);
+    z-index: var(--rls-z-index-2);
+    border-radius: var(--pvt-component-border-radius);
+    background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
+    transform: var(--pvt-component-transform);
+    transition:
+      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+      transform var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve),
+      visibility var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve);
+  }
+
+  &__backdrop {
+    position: absolute;
+    display: block;
+    top: 0rem;
+    left: 0rem;
+    right: 0rem;
+    bottom: var(--pvt-backdrop-bottom);
+    opacity: var(--pvt-backdrop-opacity);
+    z-index: var(--rls-z-index-1);
+    background: var(
+      --rlc-modal-sheet-backdrop-color,
+      var(--rls-theme-backdrop-400)
+    );
+    backdrop-filter: var(--rlc-modal-sheet-backdrop-filter, blur(2px));
+    transition:
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .rls-modal-sheet {
+    --pvt-component-transform: translateY(100%);
+    --pvt-component-bottom: 0px;
+    --pvt-component-max-width: 240rem;
+    --pvt-component-max-height: 75%;
+    --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
+      0rem 0rem;
+    --pvt-component-transition: 320ms;
+
+    align-items: initial;
+
+    &--visible {
+      --pvt-component-transform: translateY(0);
+    }
+
+    &__component {
+      &::before {
+        display: block;
+        content: '';
+        width: var(--rls-sizing-x24);
+        height: var(--rls-sizing-x2);
+        border-radius: var(--rls-sizing-x2);
+        background: var(--rls-app-color-300);
+        margin: var(--rls-sizing-x3) auto;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 640px) and (max-height: 960px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
+}
+
+@media screen and (max-width: 640px) and (max-height: 720px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+
+@media screen and (max-width: 640px) and (max-height: 560px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
+  }
+}

package/scss/design-system-bordered/organisms/modal.scss

@@ -1,75 +1,75 @@
-// Rolster Technology Modal Component
-// v1.2.5
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 08/Abr/2026
-
-.rls-modal {
-  --pvt-component-transform: translateY(150px) scale(0.6);
-  --pvt-component-height: 0rem;
-  --pvt-component-opacity: 0;
-  --pvt-component-visibility: hidden;
-  --pvt-component-transition: 160ms;
-  --pvt-backdrop-opacity: 0;
-  --pvt-backdrop-bottom: initial;
-
-  position: fixed;
-  display: flex;
-  top: 0rem;
-  left: 0rem;
-  width: 100%;
-  height: 100%;
-  z-index: var(--rls-z-index-24);
-  visibility: hidden;
-  align-items: center;
-  justify-content: center;
-
-  &--visible {
-    --pvt-component-visibility: visible;
-    --pvt-component-height: auto;
-    --pvt-component-opacity: 1;
-    --pvt-component-transform: translateY(0) scale(1);
-    --pvt-backdrop-bottom: 0rem;
-    --pvt-backdrop-opacity: 1;
-
-    visibility: visible;
-  }
-
-  &__component {
-    position: absolute;
-    display: flex;
-    max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
-    height: var(--pvt-component-height);
-    max-height: calc(100% - var(--rls-sizing-x12));
-    flex-direction: column;
-    opacity: var(--pvt-component-opacity);
-    visibility: var(--pvt-component-visibility);
-    z-index: var(--rls-z-index-2);
-    border-radius: var(--rls-sizing-x4);
-    background: var(--rlc-modal-background, var(--rls-app-color-050));
-    transform: var(--pvt-component-transform);
-    transition:
-      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
-      transform var(--pvt-component-transition) 0ms
-        var(--rls-deceleration-curve),
-      visibility var(--pvt-component-transition) 0ms
-        var(--rls-deceleration-curve);
-  }
-
-  &__backdrop {
-    position: absolute;
-    display: block;
-    top: 0rem;
-    left: 0rem;
-    right: 0rem;
-    bottom: var(--pvt-backdrop-bottom);
-    opacity: var(--pvt-backdrop-opacity);
-    z-index: var(--rls-z-index-1);
-    background: var(--rlc-modal-backdrop-color, var(--rls-theme-backdrop-400));
-    backdrop-filter: var(--rlc-modal-backdrop-filter, blur(2px));
-    transition:
-      opacity 120ms 0ms var(--rls-deceleration-curve),
-      bottom 120ms 0ms var(--rls-deceleration-curve);
-  }
-}
+// Rolster Technology Modal Component
+// v1.2.5
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 08/Abr/2026
+
+.rls-modal {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 160ms;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+
+  &--visible {
+    --pvt-component-visibility: visible;
+    --pvt-component-height: auto;
+    --pvt-component-opacity: 1;
+    --pvt-component-transform: translateY(0) scale(1);
+    --pvt-backdrop-bottom: 0rem;
+    --pvt-backdrop-opacity: 1;
+
+    visibility: visible;
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
+    height: var(--pvt-component-height);
+    max-height: calc(100% - var(--rls-sizing-x12));
+    flex-direction: column;
+    opacity: var(--pvt-component-opacity);
+    visibility: var(--pvt-component-visibility);
+    z-index: var(--rls-z-index-2);
+    border-radius: var(--rls-sizing-x4);
+    background: var(--rlc-modal-background, var(--rls-app-color-050));
+    transform: var(--pvt-component-transform);
+    transition:
+      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+      transform var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve),
+      visibility var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve);
+  }
+
+  &__backdrop {
+    position: absolute;
+    display: block;
+    top: 0rem;
+    left: 0rem;
+    right: 0rem;
+    bottom: var(--pvt-backdrop-bottom);
+    opacity: var(--pvt-backdrop-opacity);
+    z-index: var(--rls-z-index-1);
+    background: var(--rlc-modal-backdrop-color, var(--rls-theme-backdrop-400));
+    backdrop-filter: var(--rlc-modal-backdrop-filter, blur(2px));
+    transition:
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
+  }
+}