@rolster/styles-foundations 3.0.4 → 3.0.6

package/scss/design-system-bordered/organisms/field-clock.scss

@@ -1,62 +1,62 @@
-// Rolster Technology FieldClock Component
-// v1.1.1
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 25/Abr/2026
-
-.rls-field-clock {
-  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-
-  --pvt-font-size: var(--rlc-field-clock-font-size, var(--rls-input-font-size));
-
-  --pvt-letter-spacing: var(
-    --rlc-field-clock-letter-spacing,
-    var(--rls-input-letter-spacing)
-  );
-
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-
-  .rls-field-box--readonly {
-    --pvt-control-width: 100%;
-  }
-
-  .rls-field-box__body {
-    column-gap: var(--rls-sizing-x2);
-  }
-
-  &__control {
-    position: relative;
-    width: 100%;
-    height: var(--rls-sizing-x12);
-    line-height: var(--rls-sizing-x12);
-    padding: 0rem;
-    cursor: default;
-    border: none;
-    outline: none;
-    background: transparent;
-    color: var(--rls-app-color-900);
-    font-weight: var(--rls-font-weight-medium);
-    font-size: var(--pvt-font-size);
-    letter-spacing: var(--pvt-letter-spacing);
-
-    &::placeholder {
-      color: var(--rls-app-color-400);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.rls-field-clock-modal {
-  --rlc-modal-background: transparent;
-  --rlc-modal-max-width: 150rem;
-  --rlc-picker-clock-radius: var(--rls-sizing-x4);
-  --rlc-picker-clock-background: var(--rls-app-color-050);
-  --rlc-picker-clock-padding: var(--rls-sizing-x4) 0rem;
-}
+// Rolster Technology FieldClock Component
+// v1.1.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 25/Abr/2026
+
+.rls-field-clock {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  --pvt-font-size: var(--rlc-field-clock-font-size, var(--rls-input-font-size));
+
+  --pvt-letter-spacing: var(
+    --rlc-field-clock-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  .rls-field-box--readonly {
+    --pvt-control-width: 100%;
+  }
+
+  .rls-field-box__body {
+    column-gap: var(--rls-sizing-x2);
+  }
+
+  &__control {
+    position: relative;
+    width: 100%;
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    padding: 0rem;
+    cursor: default;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--rls-app-color-900);
+    font-weight: var(--rls-font-weight-medium);
+    font-size: var(--pvt-font-size);
+    letter-spacing: var(--pvt-letter-spacing);
+
+    &::placeholder {
+      color: var(--rls-app-color-400);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.rls-field-clock-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-clock-radius: var(--rls-sizing-x4);
+  --rlc-picker-clock-background: var(--rls-app-color-050);
+  --rlc-picker-clock-padding: var(--rls-sizing-x4) 0rem;
+}

package/scss/design-system-bordered/organisms/field-date-range.scss

@@ -1,60 +1,60 @@
-// Rolster Technology FieldDateRange Component
-// v1.1.9
-// @license MIT
-// Author: Rolster Developers
-// Created: 25/May/2023
-// Updated: 25/Abr/2026
-
-.rls-field-date-range {
-  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-
-  --pvt-font-size: var(
-    --rlc-field-date-range-font-size,
-    var(--rls-input-font-size)
-  );
-
-  --pvt-letter-spacing: var(
-    --rlc-field-date-range-letter-spacing,
-    var(--rls-input-letter-spacing)
-  );
-
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-
-  .rls-field-box--readonly {
-    --pvt-control-width: 100%;
-  }
-
-  &__control {
-    position: relative;
-    width: 100%;
-    height: var(--rls-sizing-x12);
-    line-height: var(--rls-sizing-x12);
-    padding: 0rem;
-    cursor: default;
-    border: none;
-    outline: none;
-    background: transparent;
-    color: var(--rls-app-color-900);
-    font-weight: var(--rls-font-weight-medium);
-    font-size: var(--pvt-font-size);
-    letter-spacing: var(--pvt-letter-spacing);
-
-    &::placeholder {
-      color: var(--rls-app-color-400);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.rls-field-date-range-modal {
-  --rlc-modal-background: transparent;
-  --rlc-modal-max-width: 150rem;
-  --rlc-picker-date-range-radius: var(--rls-sizing-x4);
-  --rlc-picker-date-range-background: var(--rls-app-color-050);
-}
+// Rolster Technology FieldDateRange Component
+// v1.1.9
+// @license MIT
+// Author: Rolster Developers
+// Created: 25/May/2023
+// Updated: 25/Abr/2026
+
+.rls-field-date-range {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  --pvt-font-size: var(
+    --rlc-field-date-range-font-size,
+    var(--rls-input-font-size)
+  );
+
+  --pvt-letter-spacing: var(
+    --rlc-field-date-range-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  .rls-field-box--readonly {
+    --pvt-control-width: 100%;
+  }
+
+  &__control {
+    position: relative;
+    width: 100%;
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    padding: 0rem;
+    cursor: default;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--rls-app-color-900);
+    font-weight: var(--rls-font-weight-medium);
+    font-size: var(--pvt-font-size);
+    letter-spacing: var(--pvt-letter-spacing);
+
+    &::placeholder {
+      color: var(--rls-app-color-400);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.rls-field-date-range-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-date-range-radius: var(--rls-sizing-x4);
+  --rlc-picker-date-range-background: var(--rls-app-color-050);
+}

package/scss/design-system-bordered/organisms/field-date.scss

@@ -1,61 +1,61 @@
-// Rolster Technology FieldDate Component
-// v1.1.9
-// @license MIT
-// Author: Rolster Developers
-// Created: 20/Mar/2018
-// Updated: 25/Abr/2026
-
-.rls-field-date {
-  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-
-  --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
-
-  --pvt-letter-spacing: var(
-    --rlc-field-date-letter-spacing,
-    var(--rls-input-letter-spacing)
-  );
-
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-
-  .rls-field-box--readonly {
-    --pvt-control-width: 100%;
-  }
-
-  .rls-field-box__body {
-    column-gap: var(--rls-sizing-x2);
-  }
-
-  &__control {
-    position: relative;
-    width: 100%;
-    height: var(--rls-sizing-x12);
-    line-height: var(--rls-sizing-x12);
-    padding: 0rem;
-    cursor: default;
-    border: none;
-    outline: none;
-    background: transparent;
-    color: var(--rls-app-color-900);
-    font-weight: var(--rls-font-weight-medium);
-    font-size: var(--pvt-font-size);
-    letter-spacing: var(--pvt-letter-spacing);
-
-    &::placeholder {
-      color: var(--rls-app-color-400);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.rls-field-date-modal {
-  --rlc-modal-background: transparent;
-  --rlc-modal-max-width: 150rem;
-  --rlc-picker-date-radius: var(--rls-sizing-x4);
-  --rlc-picker-date-background: var(--rls-app-color-050);
-}
+// Rolster Technology FieldDate Component
+// v1.1.9
+// @license MIT
+// Author: Rolster Developers
+// Created: 20/Mar/2018
+// Updated: 25/Abr/2026
+
+.rls-field-date {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
+
+  --pvt-letter-spacing: var(
+    --rlc-field-date-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  .rls-field-box--readonly {
+    --pvt-control-width: 100%;
+  }
+
+  .rls-field-box__body {
+    column-gap: var(--rls-sizing-x2);
+  }
+
+  &__control {
+    position: relative;
+    width: 100%;
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    padding: 0rem;
+    cursor: default;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--rls-app-color-900);
+    font-weight: var(--rls-font-weight-medium);
+    font-size: var(--pvt-font-size);
+    letter-spacing: var(--pvt-letter-spacing);
+
+    &::placeholder {
+      color: var(--rls-app-color-400);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.rls-field-date-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-date-radius: var(--rls-sizing-x4);
+  --rlc-picker-date-background: var(--rls-app-color-050);
+}

package/scss/design-system-bordered/organisms/form-navigation.scss

@@ -1,46 +1,46 @@
-// Rolster Technology FormNavigation Component
-// v1.1.3
-// @license MIT
-// Author: Rolster Developers
-// Created: 31/May/2023
-// Updated: 03/Ene/2026
-
-.rls-form-navigation {
-  --rlc-field-box-body-background: var(
-    --rlc-form-navigation-field-box-background,
-    var(--rls-app-color-050)
-  );
-
-  --pvt-component-transition: 160ms;
-
-  position: fixed;
-  display: flex;
-  top: 0rem;
-  right: 0rem;
-  width: calc(100% - var(--rls-sizing-x16));
-  max-width: var(--rlc-form-navigation-max-width, 160rem);
-  height: 100%;
-  justify-content: flex-end;
-  visibility: hidden;
-  transform: translateX(100%);
-  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);
-  z-index: var(--rls-z-index-16);
-
-  &--visible {
-    visibility: visible;
-    transform: translateX(0%);
-  }
-
-  &__component {
-    position: absolute;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    background: var(--rlc-form-navigation-background, var(--rls-app-color-100));
-    border-left: var(--rlc-form-navigation-border, var(--rls-app-border-1-200));
-  }
-}
+// Rolster Technology FormNavigation Component
+// v1.1.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 31/May/2023
+// Updated: 03/Ene/2026
+
+.rls-form-navigation {
+  --rlc-field-box-body-background: var(
+    --rlc-form-navigation-field-box-background,
+    var(--rls-app-color-050)
+  );
+
+  --pvt-component-transition: 160ms;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  right: 0rem;
+  width: calc(100% - var(--rls-sizing-x16));
+  max-width: var(--rlc-form-navigation-max-width, 160rem);
+  height: 100%;
+  justify-content: flex-end;
+  visibility: hidden;
+  transform: translateX(100%);
+  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);
+  z-index: var(--rls-z-index-16);
+
+  &--visible {
+    visibility: visible;
+    transform: translateX(0%);
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    background: var(--rlc-form-navigation-background, var(--rls-app-color-100));
+    border-left: var(--rlc-form-navigation-border, var(--rls-app-border-1-200));
+  }
+}

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

@@ -1,50 +1,50 @@
-// Rolster Technology ImageChooser Component
-// v2.0.3
-// @license MIT
-// Author: Rolster Developers
-// Created: 03/Jul/2018
-// Updated: 25/Jul/2025
-
-.rls-image-chooser {
-  position: relative;
-  width: var(--rlc-image-chooser-width, 48rem);
-  height: var(--rlc-image-chooser-height, 48rem);
-  border-radius: var(--rlc-image-chooser-radius, 50%);
-  overflow: hidden;
-
-  &__avatar {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    background: var(--rls-theme-color-600);
-
-    img {
-      width: 100%;
-    }
-  }
-
-  & > input[type='file'] {
-    position: absolute;
-    z-index: -1;
-    visibility: hidden;
-  }
-
-  &__modal {
-    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
-      var(--rls-sizing-x12) var(--rls-sizing-x12);
-
-    --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
-    width: 100%;
-  }
-}
-
-@media only screen and (max-width: 480px) {
-  .rls-image-chooser__modal {
-    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
-      var(--rls-sizing-x8) var(--rls-sizing-x8);
-
-    --rlc-modal-max-width: 160rem;
-  }
-}
+// Rolster Technology ImageChooser Component
+// v2.0.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 03/Jul/2018
+// Updated: 25/Jul/2025
+
+.rls-image-chooser {
+  position: relative;
+  width: var(--rlc-image-chooser-width, 48rem);
+  height: var(--rlc-image-chooser-height, 48rem);
+  border-radius: var(--rlc-image-chooser-radius, 50%);
+  overflow: hidden;
+
+  &__avatar {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    background: var(--rls-theme-color-600);
+
+    img {
+      width: 100%;
+    }
+  }
+
+  & > input[type='file'] {
+    position: absolute;
+    z-index: -1;
+    visibility: hidden;
+  }
+
+  &__modal {
+    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
+      var(--rls-sizing-x12) var(--rls-sizing-x12);
+
+    --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
+    width: 100%;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .rls-image-chooser__modal {
+    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
+      var(--rls-sizing-x8) var(--rls-sizing-x8);
+
+    --rlc-modal-max-width: 160rem;
+  }
+}

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

@@ -1,23 +1,23 @@
-// Rolster Technology ImageEditorModal Component
-// v1.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 15/Ago/2025
-// Updated: 15/Ago/2025
-
-.rls-image-editor-modal {
-  --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
-    var(--rls-sizing-x12) var(--rls-sizing-x12);
-
-  --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
-  width: 100%;
-}
-
-@media only screen and (max-width: 480px) {
-  .rls-image-editor-modal {
-    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
-      var(--rls-sizing-x8) var(--rls-sizing-x8);
-
-    --rlc-modal-max-width: 160rem;
-  }
-}
+// Rolster Technology ImageEditorModal Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 15/Ago/2025
+// Updated: 15/Ago/2025
+
+.rls-image-editor-modal {
+  --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
+    var(--rls-sizing-x12) var(--rls-sizing-x12);
+
+  --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
+  width: 100%;
+}
+
+@media only screen and (max-width: 480px) {
+  .rls-image-editor-modal {
+    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
+      var(--rls-sizing-x8) var(--rls-sizing-x8);
+
+    --rlc-modal-max-width: 160rem;
+  }
+}