@rolster/styles-foundations 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/rolster-styles.css +117 -119
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +117 -119
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_rolster-components.scss +5 -5
  7. package/scss/components/_app.scss +9 -9
  8. package/scss/components/_box-field.scss +4 -5
  9. package/scss/components/_data-table.scss +6 -6
  10. package/scss/components/_list-field.scss +7 -7
  11. package/scss/utilities/_layout-utilities.scss +19 -19
  12. package/scss/utilities/_normalize-utilities.scss +1 -2
package/dist/rolster-styles.css CHANGED
@@ -1250,12 +1250,12 @@ select,
1250
1250
  textarea {
1251
1251
  font-family: inherit;
1252
1252
  line-height: normal;
1253
+ font-size: 8rem;
1253
1254
  }
1254
1255
 
1255
1256
  textarea {
1256
1257
  overflow: auto;
1257
1258
  height: auto;
1258
- font: inherit;
1259
1259
  color: inherit;
1260
1260
  }
1261
1261
 
@@ -1268,7 +1268,6 @@ input,
1268
1268
  optgroup,
1269
1269
  select {
1270
1270
  margin: 0rem;
1271
- font: inherit;
1272
1271
  color: inherit;
1273
1272
  }
1274
1273
 
@@ -1642,22 +1641,22 @@ p {
1642
1641
  .xs-flex-grid-12 {
1643
1642
  --flex-grid-12-gap: 7.3125rem;
1644
1643
  --flex-grid-8-gap: 7rem;
1645
- --flex-grid-6-gap: 6, 6475rem;
1644
+ --flex-grid-6-gap: 6.6475rem;
1646
1645
  --flex-grid-4-gap: 6rem;
1647
- --flex-grid-12-col-2: 6, 624rem;
1646
+ --flex-grid-12-col-2: 6.624rem;
1648
1647
  --flex-grid-12-col-3: 6rem;
1649
- --flex-grid-12-col-4: 5, 38rem;
1650
- --flex-grid-12-col-6: 4, 1rem;
1648
+ --flex-grid-12-col-4: 5.38rem;
1649
+ --flex-grid-12-col-6: 4.1rem;
1651
1650
  --flex-grid-12-col-8: 3rem;
1652
- --flex-grid-8-col-2: 6, 182rem;
1653
- --flex-grid-8-col-3: 5, 2rem;
1651
+ --flex-grid-8-col-2: 6.182rem;
1652
+ --flex-grid-8-col-3: 5.2rem;
1654
1653
  --flex-grid-8-col-4: 4rem;
1655
- --flex-grid-8-col-6: 2, 2rem;
1656
- --flex-grid-6-col-2: 5, 4rem;
1654
+ --flex-grid-8-col-6: 2.2rem;
1655
+ --flex-grid-6-col-2: 5.4rem;
1657
1656
  --flex-grid-6-col-3: 4rem;
1658
- --flex-grid-6-col-4: 2, 84rem;
1657
+ --flex-grid-6-col-4: 2.84rem;
1659
1658
  --flex-grid-4-col-2: 4rem;
1660
- --flex-grid-4-col-3: 2, 2rem;
1659
+ --flex-grid-4-col-3: 2.2rem;
1661
1660
  display: inline-flex;
1662
1661
  flex-wrap: wrap;
1663
1662
  gap: var(--sizing-x6);
@@ -1666,22 +1665,22 @@ p {
1666
1665
  .xs-flex-grid-16 {
1667
1666
  --flex-grid-12-gap: 7.3125rem;
1668
1667
  --flex-grid-8-gap: 7rem;
1669
- --flex-grid-6-gap: 6, 6475rem;
1668
+ --flex-grid-6-gap: 6.6475rem;
1670
1669
  --flex-grid-4-gap: 6rem;
1671
1670
  --flex-grid-12-col-2: 6.66rem;
1672
1671
  --flex-grid-12-col-3: 6rem;
1673
- --flex-grid-12-col-4: 5, 38rem;
1674
- --flex-grid-12-col-6: 4, 1rem;
1672
+ --flex-grid-12-col-4: 5.38rem;
1673
+ --flex-grid-12-col-6: 4.1rem;
1675
1674
  --flex-grid-12-col-8: 3rem;
1676
- --flex-grid-8-col-2: 6, 182rem;
1677
- --flex-grid-8-col-3: 5, 2rem;
1675
+ --flex-grid-8-col-2: 6.182rem;
1676
+ --flex-grid-8-col-3: 5.2rem;
1678
1677
  --flex-grid-8-col-4: 4rem;
1679
- --flex-grid-8-col-6: 2, 2rem;
1680
- --flex-grid-6-col-2: 5, 4rem;
1678
+ --flex-grid-8-col-6: 2.2rem;
1679
+ --flex-grid-6-col-2: 5.4rem;
1681
1680
  --flex-grid-6-col-3: 4rem;
1682
- --flex-grid-6-col-4: 2, 84rem;
1681
+ --flex-grid-6-col-4: 2.84rem;
1683
1682
  --flex-grid-4-col-2: 4rem;
1684
- --flex-grid-4-col-3: 2, 2rem;
1683
+ --flex-grid-4-col-3: 2.2rem;
1685
1684
  display: inline-flex;
1686
1685
  flex-wrap: wrap;
1687
1686
  gap: var(--sizing-x8);
@@ -1802,22 +1801,22 @@ p {
1802
1801
  .sm-flex-grid-12 {
1803
1802
  --flex-grid-12-gap: 7.3125rem;
1804
1803
  --flex-grid-8-gap: 7rem;
1805
- --flex-grid-6-gap: 6, 6475rem;
1804
+ --flex-grid-6-gap: 6.6475rem;
1806
1805
  --flex-grid-4-gap: 6rem;
1807
- --flex-grid-12-col-2: 6, 624rem;
1806
+ --flex-grid-12-col-2: 6.624rem;
1808
1807
  --flex-grid-12-col-3: 6rem;
1809
- --flex-grid-12-col-4: 5, 38rem;
1810
- --flex-grid-12-col-6: 4, 1rem;
1808
+ --flex-grid-12-col-4: 5.38rem;
1809
+ --flex-grid-12-col-6: 4.1rem;
1811
1810
  --flex-grid-12-col-8: 3rem;
1812
- --flex-grid-8-col-2: 6, 182rem;
1813
- --flex-grid-8-col-3: 5, 2rem;
1811
+ --flex-grid-8-col-2: 6.182rem;
1812
+ --flex-grid-8-col-3: 5.2rem;
1814
1813
  --flex-grid-8-col-4: 4rem;
1815
- --flex-grid-8-col-6: 2, 2rem;
1816
- --flex-grid-6-col-2: 5, 4rem;
1814
+ --flex-grid-8-col-6: 2.2rem;
1815
+ --flex-grid-6-col-2: 5.4rem;
1817
1816
  --flex-grid-6-col-3: 4rem;
1818
- --flex-grid-6-col-4: 2, 84rem;
1817
+ --flex-grid-6-col-4: 2.84rem;
1819
1818
  --flex-grid-4-col-2: 4rem;
1820
- --flex-grid-4-col-3: 2, 2rem;
1819
+ --flex-grid-4-col-3: 2.2rem;
1821
1820
  display: inline-flex;
1822
1821
  flex-wrap: wrap;
1823
1822
  gap: var(--sizing-x6);
@@ -1825,22 +1824,22 @@ p {
1825
1824
  .sm-flex-grid-16 {
1826
1825
  --flex-grid-12-gap: 7.3125rem;
1827
1826
  --flex-grid-8-gap: 7rem;
1828
- --flex-grid-6-gap: 6, 6475rem;
1827
+ --flex-grid-6-gap: 6.6475rem;
1829
1828
  --flex-grid-4-gap: 6rem;
1830
1829
  --flex-grid-12-col-2: 6.66rem;
1831
1830
  --flex-grid-12-col-3: 6rem;
1832
- --flex-grid-12-col-4: 5, 38rem;
1833
- --flex-grid-12-col-6: 4, 1rem;
1831
+ --flex-grid-12-col-4: 5.38rem;
1832
+ --flex-grid-12-col-6: 4.1rem;
1834
1833
  --flex-grid-12-col-8: 3rem;
1835
- --flex-grid-8-col-2: 6, 182rem;
1836
- --flex-grid-8-col-3: 5, 2rem;
1834
+ --flex-grid-8-col-2: 6.182rem;
1835
+ --flex-grid-8-col-3: 5.2rem;
1837
1836
  --flex-grid-8-col-4: 4rem;
1838
- --flex-grid-8-col-6: 2, 2rem;
1839
- --flex-grid-6-col-2: 5, 4rem;
1837
+ --flex-grid-8-col-6: 2.2rem;
1838
+ --flex-grid-6-col-2: 5.4rem;
1840
1839
  --flex-grid-6-col-3: 4rem;
1841
- --flex-grid-6-col-4: 2, 84rem;
1840
+ --flex-grid-6-col-4: 2.84rem;
1842
1841
  --flex-grid-4-col-2: 4rem;
1843
- --flex-grid-4-col-3: 2, 2rem;
1842
+ --flex-grid-4-col-3: 2.2rem;
1844
1843
  display: inline-flex;
1845
1844
  flex-wrap: wrap;
1846
1845
  gap: var(--sizing-x8);
@@ -1958,22 +1957,22 @@ p {
1958
1957
  .md-flex-grid-12 {
1959
1958
  --flex-grid-12-gap: 7.3125rem;
1960
1959
  --flex-grid-8-gap: 7rem;
1961
- --flex-grid-6-gap: 6, 6475rem;
1960
+ --flex-grid-6-gap: 6.6475rem;
1962
1961
  --flex-grid-4-gap: 6rem;
1963
- --flex-grid-12-col-2: 6, 624rem;
1962
+ --flex-grid-12-col-2: 6.624rem;
1964
1963
  --flex-grid-12-col-3: 6rem;
1965
- --flex-grid-12-col-4: 5, 38rem;
1966
- --flex-grid-12-col-6: 4, 1rem;
1964
+ --flex-grid-12-col-4: 5.38rem;
1965
+ --flex-grid-12-col-6: 4.1rem;
1967
1966
  --flex-grid-12-col-8: 3rem;
1968
- --flex-grid-8-col-2: 6, 182rem;
1969
- --flex-grid-8-col-3: 5, 2rem;
1967
+ --flex-grid-8-col-2: 6.182rem;
1968
+ --flex-grid-8-col-3: 5.2rem;
1970
1969
  --flex-grid-8-col-4: 4rem;
1971
- --flex-grid-8-col-6: 2, 2rem;
1972
- --flex-grid-6-col-2: 5, 4rem;
1970
+ --flex-grid-8-col-6: 2.2rem;
1971
+ --flex-grid-6-col-2: 5.4rem;
1973
1972
  --flex-grid-6-col-3: 4rem;
1974
- --flex-grid-6-col-4: 2, 84rem;
1973
+ --flex-grid-6-col-4: 2.84rem;
1975
1974
  --flex-grid-4-col-2: 4rem;
1976
- --flex-grid-4-col-3: 2, 2rem;
1975
+ --flex-grid-4-col-3: 2.2rem;
1977
1976
  display: inline-flex;
1978
1977
  flex-wrap: wrap;
1979
1978
  gap: var(--sizing-x6);
@@ -1981,22 +1980,22 @@ p {
1981
1980
  .md-flex-grid-16 {
1982
1981
  --flex-grid-12-gap: 7.3125rem;
1983
1982
  --flex-grid-8-gap: 7rem;
1984
- --flex-grid-6-gap: 6, 6475rem;
1983
+ --flex-grid-6-gap: 6.6475rem;
1985
1984
  --flex-grid-4-gap: 6rem;
1986
1985
  --flex-grid-12-col-2: 6.66rem;
1987
1986
  --flex-grid-12-col-3: 6rem;
1988
- --flex-grid-12-col-4: 5, 38rem;
1989
- --flex-grid-12-col-6: 4, 1rem;
1987
+ --flex-grid-12-col-4: 5.38rem;
1988
+ --flex-grid-12-col-6: 4.1rem;
1990
1989
  --flex-grid-12-col-8: 3rem;
1991
- --flex-grid-8-col-2: 6, 182rem;
1992
- --flex-grid-8-col-3: 5, 2rem;
1990
+ --flex-grid-8-col-2: 6.182rem;
1991
+ --flex-grid-8-col-3: 5.2rem;
1993
1992
  --flex-grid-8-col-4: 4rem;
1994
- --flex-grid-8-col-6: 2, 2rem;
1995
- --flex-grid-6-col-2: 5, 4rem;
1993
+ --flex-grid-8-col-6: 2.2rem;
1994
+ --flex-grid-6-col-2: 5.4rem;
1996
1995
  --flex-grid-6-col-3: 4rem;
1997
- --flex-grid-6-col-4: 2, 84rem;
1996
+ --flex-grid-6-col-4: 2.84rem;
1998
1997
  --flex-grid-4-col-2: 4rem;
1999
- --flex-grid-4-col-3: 2, 2rem;
1998
+ --flex-grid-4-col-3: 2.2rem;
2000
1999
  display: inline-flex;
2001
2000
  flex-wrap: wrap;
2002
2001
  gap: var(--sizing-x8);
@@ -2114,22 +2113,22 @@ p {
2114
2113
  .lg-flex-grid-12 {
2115
2114
  --flex-grid-12-gap: 7.3125rem;
2116
2115
  --flex-grid-8-gap: 7rem;
2117
- --flex-grid-6-gap: 6, 6475rem;
2116
+ --flex-grid-6-gap: 6.6475rem;
2118
2117
  --flex-grid-4-gap: 6rem;
2119
- --flex-grid-12-col-2: 6, 624rem;
2118
+ --flex-grid-12-col-2: 6.624rem;
2120
2119
  --flex-grid-12-col-3: 6rem;
2121
- --flex-grid-12-col-4: 5, 38rem;
2122
- --flex-grid-12-col-6: 4, 1rem;
2120
+ --flex-grid-12-col-4: 5.38rem;
2121
+ --flex-grid-12-col-6: 4.1rem;
2123
2122
  --flex-grid-12-col-8: 3rem;
2124
- --flex-grid-8-col-2: 6, 182rem;
2125
- --flex-grid-8-col-3: 5, 2rem;
2123
+ --flex-grid-8-col-2: 6.182rem;
2124
+ --flex-grid-8-col-3: 5.2rem;
2126
2125
  --flex-grid-8-col-4: 4rem;
2127
- --flex-grid-8-col-6: 2, 2rem;
2128
- --flex-grid-6-col-2: 5, 4rem;
2126
+ --flex-grid-8-col-6: 2.2rem;
2127
+ --flex-grid-6-col-2: 5.4rem;
2129
2128
  --flex-grid-6-col-3: 4rem;
2130
- --flex-grid-6-col-4: 2, 84rem;
2129
+ --flex-grid-6-col-4: 2.84rem;
2131
2130
  --flex-grid-4-col-2: 4rem;
2132
- --flex-grid-4-col-3: 2, 2rem;
2131
+ --flex-grid-4-col-3: 2.2rem;
2133
2132
  display: inline-flex;
2134
2133
  flex-wrap: wrap;
2135
2134
  gap: var(--sizing-x6);
@@ -2137,22 +2136,22 @@ p {
2137
2136
  .lg-flex-grid-16 {
2138
2137
  --flex-grid-12-gap: 7.3125rem;
2139
2138
  --flex-grid-8-gap: 7rem;
2140
- --flex-grid-6-gap: 6, 6475rem;
2139
+ --flex-grid-6-gap: 6.6475rem;
2141
2140
  --flex-grid-4-gap: 6rem;
2142
2141
  --flex-grid-12-col-2: 6.66rem;
2143
2142
  --flex-grid-12-col-3: 6rem;
2144
- --flex-grid-12-col-4: 5, 38rem;
2145
- --flex-grid-12-col-6: 4, 1rem;
2143
+ --flex-grid-12-col-4: 5.38rem;
2144
+ --flex-grid-12-col-6: 4.1rem;
2146
2145
  --flex-grid-12-col-8: 3rem;
2147
- --flex-grid-8-col-2: 6, 182rem;
2148
- --flex-grid-8-col-3: 5, 2rem;
2146
+ --flex-grid-8-col-2: 6.182rem;
2147
+ --flex-grid-8-col-3: 5.2rem;
2149
2148
  --flex-grid-8-col-4: 4rem;
2150
- --flex-grid-8-col-6: 2, 2rem;
2151
- --flex-grid-6-col-2: 5, 4rem;
2149
+ --flex-grid-8-col-6: 2.2rem;
2150
+ --flex-grid-6-col-2: 5.4rem;
2152
2151
  --flex-grid-6-col-3: 4rem;
2153
- --flex-grid-6-col-4: 2, 84rem;
2152
+ --flex-grid-6-col-4: 2.84rem;
2154
2153
  --flex-grid-4-col-2: 4rem;
2155
- --flex-grid-4-col-3: 2, 2rem;
2154
+ --flex-grid-4-col-3: 2.2rem;
2156
2155
  display: inline-flex;
2157
2156
  flex-wrap: wrap;
2158
2157
  gap: var(--sizing-x8);
@@ -2270,22 +2269,22 @@ p {
2270
2269
  .xl-flex-grid-12 {
2271
2270
  --flex-grid-12-gap: 7.3125rem;
2272
2271
  --flex-grid-8-gap: 7rem;
2273
- --flex-grid-6-gap: 6, 6475rem;
2272
+ --flex-grid-6-gap: 6.6475rem;
2274
2273
  --flex-grid-4-gap: 6rem;
2275
- --flex-grid-12-col-2: 6, 624rem;
2274
+ --flex-grid-12-col-2: 6.624rem;
2276
2275
  --flex-grid-12-col-3: 6rem;
2277
- --flex-grid-12-col-4: 5, 38rem;
2278
- --flex-grid-12-col-6: 4, 1rem;
2276
+ --flex-grid-12-col-4: 5.38rem;
2277
+ --flex-grid-12-col-6: 4.1rem;
2279
2278
  --flex-grid-12-col-8: 3rem;
2280
- --flex-grid-8-col-2: 6, 182rem;
2281
- --flex-grid-8-col-3: 5, 2rem;
2279
+ --flex-grid-8-col-2: 6.182rem;
2280
+ --flex-grid-8-col-3: 5.2rem;
2282
2281
  --flex-grid-8-col-4: 4rem;
2283
- --flex-grid-8-col-6: 2, 2rem;
2284
- --flex-grid-6-col-2: 5, 4rem;
2282
+ --flex-grid-8-col-6: 2.2rem;
2283
+ --flex-grid-6-col-2: 5.4rem;
2285
2284
  --flex-grid-6-col-3: 4rem;
2286
- --flex-grid-6-col-4: 2, 84rem;
2285
+ --flex-grid-6-col-4: 2.84rem;
2287
2286
  --flex-grid-4-col-2: 4rem;
2288
- --flex-grid-4-col-3: 2, 2rem;
2287
+ --flex-grid-4-col-3: 2.2rem;
2289
2288
  display: inline-flex;
2290
2289
  flex-wrap: wrap;
2291
2290
  gap: var(--sizing-x6);
@@ -2293,22 +2292,22 @@ p {
2293
2292
  .xl-flex-grid-16 {
2294
2293
  --flex-grid-12-gap: 7.3125rem;
2295
2294
  --flex-grid-8-gap: 7rem;
2296
- --flex-grid-6-gap: 6, 6475rem;
2295
+ --flex-grid-6-gap: 6.6475rem;
2297
2296
  --flex-grid-4-gap: 6rem;
2298
2297
  --flex-grid-12-col-2: 6.66rem;
2299
2298
  --flex-grid-12-col-3: 6rem;
2300
- --flex-grid-12-col-4: 5, 38rem;
2301
- --flex-grid-12-col-6: 4, 1rem;
2299
+ --flex-grid-12-col-4: 5.38rem;
2300
+ --flex-grid-12-col-6: 4.1rem;
2302
2301
  --flex-grid-12-col-8: 3rem;
2303
- --flex-grid-8-col-2: 6, 182rem;
2304
- --flex-grid-8-col-3: 5, 2rem;
2302
+ --flex-grid-8-col-2: 6.182rem;
2303
+ --flex-grid-8-col-3: 5.2rem;
2305
2304
  --flex-grid-8-col-4: 4rem;
2306
- --flex-grid-8-col-6: 2, 2rem;
2307
- --flex-grid-6-col-2: 5, 4rem;
2305
+ --flex-grid-8-col-6: 2.2rem;
2306
+ --flex-grid-6-col-2: 5.4rem;
2308
2307
  --flex-grid-6-col-3: 4rem;
2309
- --flex-grid-6-col-4: 2, 84rem;
2308
+ --flex-grid-6-col-4: 2.84rem;
2310
2309
  --flex-grid-4-col-2: 4rem;
2311
- --flex-grid-4-col-3: 2, 2rem;
2310
+ --flex-grid-4-col-3: 2.2rem;
2312
2311
  display: inline-flex;
2313
2312
  flex-wrap: wrap;
2314
2313
  gap: var(--sizing-x8);
@@ -3494,7 +3493,7 @@ button {
3494
3493
  --rls-action-color: var(--color-theme-300);
3495
3494
  --rls-action-ripple-color: var(--rls-action-color);
3496
3495
  --rls-action-ripple-dimension: var(--sizing-x18);
3497
- --rls-action-ripple-position: -1.125rem;
3496
+ --rls-action-ripple-position: -9rem;
3498
3497
  --rls-avatar-font-size: var(--title-font-size);
3499
3498
  --rls-avatar-border-radius: var(--sizing-x4);
3500
3499
  --rls-avatar-width: var(--sizing-x24);
@@ -3515,7 +3514,7 @@ button {
3515
3514
  --rls-button-content-radius: var(--sizing-x2);
3516
3515
  --rls-card-content-padding: var(--sizing-x8);
3517
3516
  --rls-datatable-letter-spacing: 0.0625em;
3518
- --rls-datatable-font-size: 0.875rem;
3517
+ --rls-datatable-font-size: 7rem;
3519
3518
  --rls-form-footer-justify-content: end;
3520
3519
  --rls-icon-font-size: var(--sizing-x12);
3521
3520
  --rls-icon-width: var(--sizing-x12);
@@ -3533,7 +3532,7 @@ button {
3533
3532
  --rls-switch-element-size: var(--sizing-x12);
3534
3533
  --rls-switch-bar-radius: var(--sizing-x3);
3535
3534
  --rls-switch-bar-height: var(--sizing-x6);
3536
- --rls-tabulartext-char-width: 0.625rem;
3535
+ --rls-tabulartext-char-width: 5rem;
3537
3536
  --rls-tabulartext-pointer-width: 2rem;
3538
3537
  --rls-toolbar-height: var(--sizing-x28);
3539
3538
  }
@@ -3559,14 +3558,14 @@ button {
3559
3558
  --rls-toolbar-height: 100%;
3560
3559
  position: relative;
3561
3560
  width: 100%;
3562
- height: 28rem;
3561
+ height: var(--sizing-x28);
3563
3562
  box-sizing: border-box;
3564
3563
  z-index: var(--z-index-8);
3565
3564
  background: var(--background-theme-100);
3566
3565
  }
3567
3566
  .rls-app__header + .rls-app__page,
3568
3567
  .rls-app__header + .rls-app__content {
3569
- height: calc(100vh - 28rem);
3568
+ height: calc(100vh - var(--sizing-x28));
3570
3569
  }
3571
3570
 
3572
3571
  .rls-app__content {
@@ -3591,18 +3590,18 @@ button {
3591
3590
  }
3592
3591
  .rls-app__page__nav {
3593
3592
  position: relative;
3594
- width: 20rem;
3593
+ width: 160rem;
3595
3594
  height: 100%;
3596
3595
  margin: 0rem;
3597
3596
  padding: 0rem;
3598
3597
  overflow: auto;
3599
3598
  box-sizing: border-box;
3600
- border-radius: 0rem 0rem 16rem 0rem;
3599
+ border-radius: 0rem 0rem var(--sizing-x16) 0rem;
3601
3600
  background: var(--background-theme-100);
3602
3601
  }
3603
3602
  .rls-app__page__nav + .rls-app__page__content {
3604
- --rls-snackbar-left: calc(50% + 10rem);
3605
- width: calc(100% - 20rem);
3603
+ --rls-snackbar-left: calc(50% + 80rem);
3604
+ width: calc(100% - 160rem);
3606
3605
  }
3607
3606
  .rls-app__page__content {
3608
3607
  display: flex;
@@ -3616,7 +3615,7 @@ button {
3616
3615
  }
3617
3616
 
3618
3617
  .rls-divider {
3619
- height: 1rem;
3618
+ height: var(--sizing-x1);
3620
3619
  background-image: linear-gradient(
3621
3620
  to right,
3622
3621
  var(--border-theme-100) 50%,
@@ -3657,9 +3656,8 @@ button {
3657
3656
  }
3658
3657
  .rls-box-field__label {
3659
3658
  position: relative;
3660
- float: left;
3661
3659
  width: 100%;
3662
- padding: 0rem 0.625rem;
3660
+ padding: 0rem 5rem;
3663
3661
  box-sizing: border-box;
3664
3662
  color: var(--rls-boxfield-label-font-color);
3665
3663
  opacity: var(--pvt-label-opacity);
@@ -3688,7 +3686,7 @@ button {
3688
3686
  }
3689
3687
  .rls-box-field__helper {
3690
3688
  color: var(--color-theme-100);
3691
- padding: 0rem 0.625rem;
3689
+ padding: 0rem 5rem;
3692
3690
  box-sizing: border-box;
3693
3691
  font-weight: var(--font-weight-medium);
3694
3692
  font-size: var(--overline-font-size);
@@ -3896,15 +3894,15 @@ button {
3896
3894
  font-weight: var(--font-weight-semibold);
3897
3895
  font-size: var(--smalltext-font-size);
3898
3896
  letter-spacing: var(--smalltext-letter-spacing);
3899
- min-height: 8rem;
3900
- line-height: 8rem;
3897
+ min-height: var(--sizing-x8);
3898
+ line-height: var(--sizing-x8);
3901
3899
  }
3902
3900
  .rls-datatable__cell > .rls-ballot .rls-ballot__subtitle {
3903
3901
  margin-top: 0rem;
3904
3902
  font-size: var(--overline-font-size);
3905
3903
  letter-spacing: var(--overline-letter-spacing);
3906
- min-height: 8rem;
3907
- line-height: 8rem;
3904
+ min-height: var(--sizing-x8);
3905
+ line-height: var(--sizing-x8);
3908
3906
  }
3909
3907
  .rls-datatable__cell > a:hover {
3910
3908
  color: var(--color-theme-700);
@@ -3941,7 +3939,7 @@ button {
3941
3939
  --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
3942
3940
  --pvt-action-font-color: var(--color-theme-300);
3943
3941
  --pvt-list-height: 0rem;
3944
- --pvt-list-max-height: 20rem;
3942
+ --pvt-list-max-height: 160rem;
3945
3943
  --pvt-list-opacity: 0;
3946
3944
  --pvt-list-transform: scale(0, 0);
3947
3945
  --pvt-list-transform-origin: 0% 0%;
@@ -3969,7 +3967,7 @@ button {
3969
3967
  outline: none;
3970
3968
  background: transparent;
3971
3969
  color: var(--rls-input-font-color);
3972
- font-size: var(--rls-input-size);
3970
+ font-size: var(--rls-input-font-size);
3973
3971
  font-weight: var(--font-weight-medium);
3974
3972
  letter-spacing: var(--rls-input-letter-spacing);
3975
3973
  }
@@ -4030,7 +4028,7 @@ button {
4030
4028
  max-height: var(--pvt-list-max-height);
4031
4029
  padding: var(--sizing-x4) var(--sizing-x2);
4032
4030
  box-sizing: border-box;
4033
- border-radius: 4rem;
4031
+ border-radius: var(--sizing-x4);
4034
4032
  overflow: hidden;
4035
4033
  z-index: var(--z-index-2);
4036
4034
  background: var(--background-theme-500);
@@ -4137,7 +4135,7 @@ button {
4137
4135
  position: absolute;
4138
4136
  bottom: 0rem;
4139
4137
  width: 100%;
4140
- max-width: 25rem;
4138
+ max-width: 200rem;
4141
4139
  max-height: 75%;
4142
4140
  padding: var(--sizing-x8) var(--sizing-x2);
4143
4141
  border-radius: var(--sizing-x4) var(--sizing-x4) 0rem 0rem;
@@ -4152,7 +4150,7 @@ button {
4152
4150
  .rls-list-field__empty__avatar {
4153
4151
  width: 100%;
4154
4152
  height: auto;
4155
- max-width: 8rem;
4153
+ max-width: var(--sizing-x8);
4156
4154
  margin: auto;
4157
4155
  padding-bottom: var(--sizing-x6);
4158
4156
  }