@rolster/react-components 1.4.1 → 1.4.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 (5) hide show
  1. package/dist/cjs/assets/{lib.cjs-7a1f29f4.css → lib.cjs-a7ae2768.css} +10 -8
  2. package/dist/es/assets/{lib-7a1f29f4.css → lib-a7ae2768.css} +10 -8
  3. package/dist/esm/components/organisms/DateField/DateField.css +1 -1
  4. package/dist/esm/components/organisms/DatePicker/DatePicker.css +9 -7
  5. package/package.json +1 -1
package/dist/cjs/assets/{lib.cjs-7a1f29f4.css → lib.cjs-a7ae2768.css} RENAMED
@@ -1679,12 +1679,13 @@
1679
1679
 
1680
1680
  .rls-date-picker {
1681
1681
  position: relative;
1682
- float: left;
1683
- max-width: 18.75rem;
1682
+ display: flex;
1683
+ flex-direction: column;
1684
1684
  overflow: hidden;
1685
+ max-width: 18.75rem;
1685
1686
  }
1686
1687
  .rls-date-picker__header {
1687
- background: var(--color-xofttion-100);
1688
+ background: var(--color-rolster-100);
1688
1689
  padding: var(--sizing-8);
1689
1690
  box-sizing: border-box;
1690
1691
  margin-bottom: var(--sizing-16);
@@ -1696,7 +1697,7 @@
1696
1697
  font-weight: var(--font-weight-bold);
1697
1698
  }
1698
1699
  .rls-date-picker__title:hover {
1699
- color: var(--color-xofttion-500);
1700
+ color: var(--color-rolster-500);
1700
1701
  }
1701
1702
  .rls-date-picker__title--description {
1702
1703
  height: var(--sizing-32);
@@ -1712,6 +1713,7 @@
1712
1713
  }
1713
1714
  .rls-date-picker__component {
1714
1715
  display: flex;
1716
+ width: 18.75rem;
1715
1717
  padding: 0rem var(--sizing-4);
1716
1718
  box-sizing: border-box;
1717
1719
  margin-bottom: var(--sizing-8);
@@ -1733,20 +1735,20 @@
1733
1735
  display: none;
1734
1736
  }
1735
1737
  .rls-date-picker__actions {
1738
+ display: flex;
1739
+ flex-wrap: wrap;
1740
+ gap: var(--sizing-8);
1736
1741
  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
1737
1742
  overflow: hidden;
1738
1743
  box-sizing: border-box;
1739
1744
  }
1740
1745
  .rls-date-picker__actions--cancel {
1741
1746
  width: calc(50% - var(--sizing-4));
1742
- margin-right: var(--sizing-4);
1743
1747
  }
1744
1748
  .rls-date-picker__actions--today {
1745
1749
  width: calc(50% - var(--sizing-4));
1746
- margin-left: var(--sizing-4);
1747
1750
  }
1748
1751
  .rls-date-picker__actions--ok {
1749
- margin-top: var(--sizing-8);
1750
1752
  width: 100%;
1751
1753
  }
1752
1754
  .rls-date-picker__actions button {
@@ -1814,7 +1816,7 @@
1814
1816
  }
1815
1817
 
1816
1818
  .rls-date-field {
1817
- --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
1819
+ --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
1818
1820
  position: relative;
1819
1821
  float: left;
1820
1822
  width: 100%;
package/dist/es/assets/{lib-7a1f29f4.css → lib-a7ae2768.css} RENAMED
@@ -1679,12 +1679,13 @@
1679
1679
 
1680
1680
  .rls-date-picker {
1681
1681
  position: relative;
1682
- float: left;
1683
- max-width: 18.75rem;
1682
+ display: flex;
1683
+ flex-direction: column;
1684
1684
  overflow: hidden;
1685
+ max-width: 18.75rem;
1685
1686
  }
1686
1687
  .rls-date-picker__header {
1687
- background: var(--color-xofttion-100);
1688
+ background: var(--color-rolster-100);
1688
1689
  padding: var(--sizing-8);
1689
1690
  box-sizing: border-box;
1690
1691
  margin-bottom: var(--sizing-16);
@@ -1696,7 +1697,7 @@
1696
1697
  font-weight: var(--font-weight-bold);
1697
1698
  }
1698
1699
  .rls-date-picker__title:hover {
1699
- color: var(--color-xofttion-500);
1700
+ color: var(--color-rolster-500);
1700
1701
  }
1701
1702
  .rls-date-picker__title--description {
1702
1703
  height: var(--sizing-32);
@@ -1712,6 +1713,7 @@
1712
1713
  }
1713
1714
  .rls-date-picker__component {
1714
1715
  display: flex;
1716
+ width: 18.75rem;
1715
1717
  padding: 0rem var(--sizing-4);
1716
1718
  box-sizing: border-box;
1717
1719
  margin-bottom: var(--sizing-8);
@@ -1733,20 +1735,20 @@
1733
1735
  display: none;
1734
1736
  }
1735
1737
  .rls-date-picker__actions {
1738
+ display: flex;
1739
+ flex-wrap: wrap;
1740
+ gap: var(--sizing-8);
1736
1741
  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
1737
1742
  overflow: hidden;
1738
1743
  box-sizing: border-box;
1739
1744
  }
1740
1745
  .rls-date-picker__actions--cancel {
1741
1746
  width: calc(50% - var(--sizing-4));
1742
- margin-right: var(--sizing-4);
1743
1747
  }
1744
1748
  .rls-date-picker__actions--today {
1745
1749
  width: calc(50% - var(--sizing-4));
1746
- margin-left: var(--sizing-4);
1747
1750
  }
1748
1751
  .rls-date-picker__actions--ok {
1749
- margin-top: var(--sizing-8);
1750
1752
  width: 100%;
1751
1753
  }
1752
1754
  .rls-date-picker__actions button {
@@ -1814,7 +1816,7 @@
1814
1816
  }
1815
1817
 
1816
1818
  .rls-date-field {
1817
- --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
1819
+ --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
1818
1820
  position: relative;
1819
1821
  float: left;
1820
1822
  width: 100%;
package/dist/esm/components/organisms/DateField/DateField.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-date-field {
2
- --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
2
+ --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
3
3
  position: relative;
4
4
  float: left;
5
5
  width: 100%;
package/dist/esm/components/organisms/DatePicker/DatePicker.css CHANGED
@@ -1,11 +1,12 @@
1
1
  .rls-date-picker {
2
2
  position: relative;
3
- float: left;
4
- max-width: 18.75rem;
3
+ display: flex;
4
+ flex-direction: column;
5
5
  overflow: hidden;
6
+ max-width: 18.75rem;
6
7
  }
7
8
  .rls-date-picker__header {
8
- background: var(--color-xofttion-100);
9
+ background: var(--color-rolster-100);
9
10
  padding: var(--sizing-8);
10
11
  box-sizing: border-box;
11
12
  margin-bottom: var(--sizing-16);
@@ -17,7 +18,7 @@
17
18
  font-weight: var(--font-weight-bold);
18
19
  }
19
20
  .rls-date-picker__title:hover {
20
- color: var(--color-xofttion-500);
21
+ color: var(--color-rolster-500);
21
22
  }
22
23
  .rls-date-picker__title--description {
23
24
  height: var(--sizing-32);
@@ -33,6 +34,7 @@
33
34
  }
34
35
  .rls-date-picker__component {
35
36
  display: flex;
37
+ width: 18.75rem;
36
38
  padding: 0rem var(--sizing-4);
37
39
  box-sizing: border-box;
38
40
  margin-bottom: var(--sizing-8);
@@ -54,20 +56,20 @@
54
56
  display: none;
55
57
  }
56
58
  .rls-date-picker__actions {
59
+ display: flex;
60
+ flex-wrap: wrap;
61
+ gap: var(--sizing-8);
57
62
  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
58
63
  overflow: hidden;
59
64
  box-sizing: border-box;
60
65
  }
61
66
  .rls-date-picker__actions--cancel {
62
67
  width: calc(50% - var(--sizing-4));
63
- margin-right: var(--sizing-4);
64
68
  }
65
69
  .rls-date-picker__actions--today {
66
70
  width: calc(50% - var(--sizing-4));
67
- margin-left: var(--sizing-4);
68
71
  }
69
72
  .rls-date-picker__actions--ok {
70
- margin-top: var(--sizing-8);
71
73
  width: 100%;
72
74
  }
73
75
  .rls-date-picker__actions button {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "1.4.1",
3
+ "version": "1.4.2",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",