@rolster/styles-foundations 2.2.4 → 2.3.1

package/scss/components/_data-table.scss

@@ -1,9 +1,9 @@
 // Rolster Technology Datatable Component
-// v2.0.2
+// v2.0.3
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 13/Jun/2024
+// Updated: 24/Jun/2024
 
 @mixin datatable_cell_control() {
   --rlc-avatar-border-radius: var(--rls-sizing-x3);
@@ -13,6 +13,11 @@
 
   --rlc-action-ripple-dimension: var(--rls-sizing-x16);
   --rlc-action-ripple-position: -8rem;
+  
+  --rlc-fieldbox-body-background: transparent;
+  --rlc-fieldbox-body-border: none;
+  --rlc-fieldbox-body-box-shadow: none;
+  --rlc-fieldbox-body-padding: 0rem;
 
   --rlc-switch-element-size: var(--rls-sizing-x10);
   --rlc-switch-bar-radius: var(--rls-sizing-x2);
@@ -162,7 +167,7 @@
       overflow: hidden;
     }
 
-    .rls-box-field {
+    .rls-field-box {
       width: 100%;
       padding: 0rem;
 
@@ -170,13 +175,6 @@
         display: none;
       }
 
-      &__body {
-        background: transparent;
-        border: none;
-        padding: 0rem;
-        box-shadow: none;
-      }
-
       &__icon {
         padding: 0rem;
       }
@@ -184,15 +182,10 @@
       &__error {
         display: none;
       }
-
-      .rls-input-number,
-      .rls-input-text {
-        --rlc-input-parent-padding: 0rem;
-      }
     }
 
-    .rls-list-field {
-      .rls-box-field__body {
+    .rls-field-list {
+      .rls-field-box__body {
         padding: var(--rls-sizing-x4) 0rem;
         border: none;
         box-shadow: none;

package/scss/components/{_box-field.scss → _field-box.scss}

@@ -1,11 +1,11 @@
-// Rolster Technology BoxField Component
-// v2.0.0
+// Rolster Technology FieldBox Component
+// v2.1.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 08/Sep/2022
-// Updated: 26/May/2024
+// Updated: 24/Jun/2024
 
-.rls-box-field {
+.rls-field-box {
   --pvt-label-opacity: 1;
   --pvt-body-opacity: 1;
 
@@ -18,21 +18,21 @@
   transition: height 160ms 0ms var(--rls-standard-curve);
 
   &--focused {
-    --rlc-boxfield-body-background: var(--rls-app-background-500);
-    --rlc-boxfield-body-border: var(--rls-theme-border-1-500);
-    --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
-    --rlc-boxfield-label-font-color: var(--rls-theme-color-500);
+    --rlc-fieldbox-body-background: var(--rls-app-background-500);
+    --rlc-fieldbox-body-border: var(--rls-theme-border-1-500);
+    --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
+    --rlc-fieldbox-label-font-color: var(--rls-theme-color-500);
   }
 
   &--error {
-    --rlc-boxfield-body-border: var(--rls-border-1) solid
+    --rlc-fieldbox-body-border: var(--rls-border-1) solid
       var(--rls-danger-color-500);
-    --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-danger-500);
-    --rlc-boxfield-label-font-color: var(--rls-danger-color-500);
+    --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-danger-shadow-500);
+    --rlc-fieldbox-label-font-color: var(--rls-danger-color-500);
   }
 
   &--disabled {
-    --rlc-boxfield-body-background: var(--rls-app-background-500);
+    --rlc-fieldbox-body-background: var(--rls-app-background-500);
     --pvt-body-opacity: 0.75;
     --pvt-label-opacity: 0.5;
   }
@@ -42,7 +42,7 @@
     width: 100%;
     padding: 0rem 5rem;
     box-sizing: border-box;
-    color: var(--rlc-boxfield-label-font-color);
+    color: var(--rlc-fieldbox-label-font-color);
     opacity: var(--pvt-label-opacity);
     overflow: hidden;
     white-space: nowrap;
@@ -64,10 +64,10 @@
     overflow: hidden;
     opacity: var(--pvt-body-opacity);
     border-radius: var(--rls-sizing-x2);
-    background: var(--rlc-boxfield-body-background);
-    padding: var(--rlc-boxfield-body-padding);
-    border: var(--rlc-boxfield-body-border);
-    box-shadow: var(--rlc-boxfield-body-shadow);
+    background: var(--rlc-fieldbox-body-background);
+    padding: var(--rlc-fieldbox-body-padding);
+    border: var(--rlc-fieldbox-body-border);
+    box-shadow: var(--rlc-fieldbox-body-shadow);
   }
 
   &__helper {

package/scss/components/{_list-field.scss → _field-list.scss}

@@ -1,11 +1,11 @@
 // Rolster Technology ListField Component
-// v1.2.0
+// v1.3.0
 // @license MIT
 // Author: Rolster Developers
 // Created: 20/Mar/2018
-// Updated: 31/May/2024
+// Updated: 24/Jun/2024
 
-.rls-list-field {
+.rls-field-list {
   --pvt-action-font-color: var(--rls-app-color-300);
   --pvt-list-height: 0rem;
   --pvt-list-max-height: 160rem;
@@ -15,18 +15,18 @@
   --pvt-backdrop-opacity: 0;
   --pvt-backdrop-bottom: initial;
 
-  --rlc-boxfield-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
 
   position: relative;
   box-sizing: border-box;
 
-  &.rls-box-field--active {
-    --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-theme-100);
-    --rlc-boxfield-body-border: var(--rls-theme-border-1-300);
-    --rlc-boxfield-label-font-color: var(--rls-app-color-300);
+  &.rls-field-box--active {
+    --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--box-shadow-theme-100);
+    --rlc-fieldbox-body-border: var(--rls-theme-border-1-300);
+    --rlc-fieldbox-label-font-color: var(--rls-app-color-300);
   }
 
-  &.rls-box-field--disabled {
+  &.rls-field-box--disabled {
     --pvt-action-font-color: var(--rls-app-color-100);
   }
 
@@ -209,7 +209,7 @@
 }
 
 @media screen and (max-width: 480px) {
-  .rls-list-field {
+  .rls-field-list {
     --pvt-list-transform: translateY(100%);
     --pvt-list-transform-origin: initial;
     --pvt-list-max-height: initial;

package/scss/utilities/_normalize.utility.scss

@@ -29,7 +29,7 @@ body {
   -webkit-tap-highlight-color: transparent;
 
   &.rls-app-body {
-    --rlc-boxfield-body-background: rgba(248, 248, 248, 1);
+    --rlc-fieldbox-body-background: rgba(248, 248, 248, 1);
     --rlc-app-body-background: var(--rls-app-background-300);
   }
 }