@onpe/ui 1.3.35 → 1.3.37

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 (9) hide show
  1. package/dist/components.css +14 -59
  2. package/dist/components.esm.css +14 -59
  3. package/dist/components.esm.js +1 -1
  4. package/dist/components.js +1 -1
  5. package/dist/index.css +14 -59
  6. package/dist/index.esm.css +14 -59
  7. package/dist/index.esm.js +1 -1
  8. package/dist/index.js +1 -1
  9. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -16,10 +16,6 @@
16
16
  background-color: var(--onpe-ui-gray) !important;
17
17
  }
18
18
 
19
- .onpe-button:disabled:hover {
20
- background-color: var(--onpe-ui-gray) !important;
21
- }
22
-
23
19
  /* Button Sizes */
24
20
  .onpe-button.onpe-button-small {
25
21
  height: 2.5rem; /* h-10 */
@@ -41,106 +37,53 @@
41
37
  background-color: var(--onpe-ui-blue);
42
38
  }
43
39
 
44
- .onpe-button.onpe-button-blue:hover {
45
- background-color: rgba(0, 55, 112, 0.3); /* onpe-ui-blue/30 */
46
- }
47
-
48
40
  .onpe-button.onpe-button-skyblue {
49
41
  background-color: var(--onpe-ui-skyblue);
50
42
  }
51
43
 
52
- .onpe-button.onpe-button-skyblue:hover {
53
- background-color: rgba(0, 115, 207, 0.3); /* onpe-ui-skyblue/30 */
54
- }
55
-
56
44
  .onpe-button.onpe-button-skyblue-light {
57
45
  background-color: var(--onpe-ui-skyblue-light);
58
46
  }
59
47
 
60
- .onpe-button.onpe-button-skyblue-light:hover {
61
- background-color: rgba(105, 178, 232, 0.3); /* onpe-ui-skyblue-light/30 */
62
- }
63
-
64
48
  .onpe-button.onpe-button-yellow {
65
49
  background-color: var(--onpe-ui-yellow);
66
50
  }
67
51
 
68
- .onpe-button.onpe-button-yellow:hover {
69
- background-color: rgba(255, 184, 28, 0.3); /* onpe-ui-yellow/30 */
70
- }
71
-
72
52
  .onpe-button.onpe-button-light-skyblue {
73
53
  background-color: var(--onpe-ui-light-skyblue);
74
54
  }
75
55
 
76
- .onpe-button.onpe-button-light-skyblue:hover {
77
- background-color: rgba(170, 239, 246, 0.3); /* onpe-ui-light-skyblue/30 */
78
- }
79
-
80
56
  .onpe-button.onpe-button-gray {
81
57
  background-color: var(--onpe-ui-gray);
82
58
  }
83
59
 
84
- .onpe-button.onpe-button-gray:hover {
85
- background-color: rgba(188, 188, 188, 0.3); /* onpe-ui-gray/30 */
86
- }
87
-
88
60
  .onpe-button.onpe-button-gray-light {
89
61
  background-color: var(--onpe-ui-gray-light);
90
62
  }
91
63
 
92
- .onpe-button.onpe-button-gray-light:hover {
93
- background-color: rgba(189, 189, 189, 0.3); /* onpe-ui-gray-light/30 */
94
- }
95
-
96
64
  .onpe-button.onpe-button-gray-extra-light {
97
65
  background-color: var(--onpe-ui-gray-extra-light);
98
66
  }
99
67
 
100
- .onpe-button.onpe-button-gray-extra-light:hover {
101
- background-color: rgba(242, 242, 242, 0.3); /* onpe-ui-gray-extra-light/30 */
102
- }
103
-
104
68
  .onpe-button.onpe-button-red {
105
69
  background-color: var(--onpe-ui-red);
106
70
  }
107
71
 
108
- .onpe-button.onpe-button-red:hover {
109
- background-color: rgba(227, 0, 43, 0.3); /* onpe-ui-red/30 */
110
- }
111
-
112
72
  .onpe-button.onpe-button-dark-gray {
113
73
  background-color: var(--onpe-ui-dark-gray);
114
74
  }
115
75
 
116
- .onpe-button.onpe-button-dark-gray:hover {
117
- background-color: rgba(79, 79, 79, 0.3); /* onpe-ui-dark-gray/30 */
118
- }
119
-
120
76
  .onpe-button.onpe-button-green {
121
77
  background-color: var(--onpe-ui-green);
122
78
  }
123
79
 
124
- .onpe-button.onpe-button-green:hover {
125
- background-color: rgba(118, 189, 67, 0.3); /* onpe-ui-green/30 */
126
- }
127
-
128
80
  .onpe-button.onpe-button-yellow-light {
129
81
  background-color: var(--onpe-ui-yellow-light);
130
82
  }
131
83
 
132
- .onpe-button.onpe-button-yellow-light:hover {
133
- background-color: rgba(255, 241, 210, 0.3); /* onpe-ui-yellow-light/30 */
134
- }
135
-
136
84
  .onpe-button.onpe-button-primary {
137
85
  background-color: var(--onpe-ui-blue);
138
- }
139
-
140
- .onpe-button.onpe-button-primary:hover {
141
- background-color: rgba(0, 55, 112, 0.3); /* onpe-ui-blue/30 */
142
- }
143
-
86
+ }
144
87
 
145
88
  /* Overlay Component Styles */
146
89
  .onpe-overlay {
@@ -534,7 +477,7 @@ body.onpe-modal-open {
534
477
 
535
478
  .onpe-modal-confirm-buttons-container {
536
479
  display: flex;
537
- flex-direction: column-reverse;
480
+ flex-direction: column;
538
481
  align-items: center;
539
482
  justify-content: center;
540
483
  width: 100%;
@@ -542,6 +485,10 @@ body.onpe-modal-open {
542
485
  margin-top: 44px; /* 2.75rem = 44px */
543
486
  }
544
487
 
488
+ .onpe-modal-confirm-buttons-desktop {
489
+ display: none;
490
+ }
491
+
545
492
  .onpe-modal-confirm-button {
546
493
  width: 100%;
547
494
  max-width: 200px;
@@ -574,6 +521,14 @@ body.onpe-modal-open {
574
521
  .onpe-modal-confirm-buttons-container {
575
522
  flex-direction: row; /* lg:flex-row */
576
523
  }
524
+
525
+ .onpe-modal-confirm-buttons-mobile {
526
+ display: none;
527
+ }
528
+
529
+ .onpe-modal-confirm-buttons-desktop {
530
+ display: flex;
531
+ }
577
532
 
578
533
  .onpe-modal-confirm-button {
579
534
  width: 200px;
package/dist/components.esm.css CHANGED
@@ -16,10 +16,6 @@
16
16
  background-color: var(--onpe-ui-gray) !important;
17
17
  }
18
18
 
19
- .onpe-button:disabled:hover {
20
- background-color: var(--onpe-ui-gray) !important;
21
- }
22
-
23
19
  /* Button Sizes */
24
20
  .onpe-button.onpe-button-small {
25
21
  height: 2.5rem; /* h-10 */
@@ -41,106 +37,53 @@
41
37
  background-color: var(--onpe-ui-blue);
42
38
  }
43
39
 
44
- .onpe-button.onpe-button-blue:hover {
45
- background-color: rgba(0, 55, 112, 0.3); /* onpe-ui-blue/30 */
46
- }
47
-
48
40
  .onpe-button.onpe-button-skyblue {
49
41
  background-color: var(--onpe-ui-skyblue);
50
42
  }
51
43
 
52
- .onpe-button.onpe-button-skyblue:hover {
53
- background-color: rgba(0, 115, 207, 0.3); /* onpe-ui-skyblue/30 */
54
- }
55
-
56
44
  .onpe-button.onpe-button-skyblue-light {
57
45
  background-color: var(--onpe-ui-skyblue-light);
58
46
  }
59
47
 
60
- .onpe-button.onpe-button-skyblue-light:hover {
61
- background-color: rgba(105, 178, 232, 0.3); /* onpe-ui-skyblue-light/30 */
62
- }
63
-
64
48
  .onpe-button.onpe-button-yellow {
65
49
  background-color: var(--onpe-ui-yellow);
66
50
  }
67
51
 
68
- .onpe-button.onpe-button-yellow:hover {
69
- background-color: rgba(255, 184, 28, 0.3); /* onpe-ui-yellow/30 */
70
- }
71
-
72
52
  .onpe-button.onpe-button-light-skyblue {
73
53
  background-color: var(--onpe-ui-light-skyblue);
74
54
  }
75
55
 
76
- .onpe-button.onpe-button-light-skyblue:hover {
77
- background-color: rgba(170, 239, 246, 0.3); /* onpe-ui-light-skyblue/30 */
78
- }
79
-
80
56
  .onpe-button.onpe-button-gray {
81
57
  background-color: var(--onpe-ui-gray);
82
58
  }
83
59
 
84
- .onpe-button.onpe-button-gray:hover {
85
- background-color: rgba(188, 188, 188, 0.3); /* onpe-ui-gray/30 */
86
- }
87
-
88
60
  .onpe-button.onpe-button-gray-light {
89
61
  background-color: var(--onpe-ui-gray-light);
90
62
  }
91
63
 
92
- .onpe-button.onpe-button-gray-light:hover {
93
- background-color: rgba(189, 189, 189, 0.3); /* onpe-ui-gray-light/30 */
94
- }
95
-
96
64
  .onpe-button.onpe-button-gray-extra-light {
97
65
  background-color: var(--onpe-ui-gray-extra-light);
98
66
  }
99
67
 
100
- .onpe-button.onpe-button-gray-extra-light:hover {
101
- background-color: rgba(242, 242, 242, 0.3); /* onpe-ui-gray-extra-light/30 */
102
- }
103
-
104
68
  .onpe-button.onpe-button-red {
105
69
  background-color: var(--onpe-ui-red);
106
70
  }
107
71
 
108
- .onpe-button.onpe-button-red:hover {
109
- background-color: rgba(227, 0, 43, 0.3); /* onpe-ui-red/30 */
110
- }
111
-
112
72
  .onpe-button.onpe-button-dark-gray {
113
73
  background-color: var(--onpe-ui-dark-gray);
114
74
  }
115
75
 
116
- .onpe-button.onpe-button-dark-gray:hover {
117
- background-color: rgba(79, 79, 79, 0.3); /* onpe-ui-dark-gray/30 */
118
- }
119
-
120
76
  .onpe-button.onpe-button-green {
121
77
  background-color: var(--onpe-ui-green);
122
78
  }
123
79
 
124
- .onpe-button.onpe-button-green:hover {
125
- background-color: rgba(118, 189, 67, 0.3); /* onpe-ui-green/30 */
126
- }
127
-
128
80
  .onpe-button.onpe-button-yellow-light {
129
81
  background-color: var(--onpe-ui-yellow-light);
130
82
  }
131
83
 
132
- .onpe-button.onpe-button-yellow-light:hover {
133
- background-color: rgba(255, 241, 210, 0.3); /* onpe-ui-yellow-light/30 */
134
- }
135
-
136
84
  .onpe-button.onpe-button-primary {
137
85
  background-color: var(--onpe-ui-blue);
138
- }
139
-
140
- .onpe-button.onpe-button-primary:hover {
141
- background-color: rgba(0, 55, 112, 0.3); /* onpe-ui-blue/30 */
142
- }
143
-
86
+ }
144
87
 
145
88
  /* Overlay Component Styles */
146
89
  .onpe-overlay {
@@ -534,7 +477,7 @@ body.onpe-modal-open {
534
477
 
535
478
  .onpe-modal-confirm-buttons-container {
536
479
  display: flex;
537
- flex-direction: column-reverse;
480
+ flex-direction: column;
538
481
  align-items: center;
539
482
  justify-content: center;
540
483
  width: 100%;
@@ -542,6 +485,10 @@ body.onpe-modal-open {
542
485
  margin-top: 44px; /* 2.75rem = 44px */
543
486
  }
544
487
 
488
+ .onpe-modal-confirm-buttons-desktop {
489
+ display: none;
490
+ }
491
+
545
492
  .onpe-modal-confirm-button {
546
493
  width: 100%;
547
494
  max-width: 200px;
@@ -574,6 +521,14 @@ body.onpe-modal-open {
574
521
  .onpe-modal-confirm-buttons-container {
575
522
  flex-direction: row; /* lg:flex-row */
576
523
  }
524
+
525
+ .onpe-modal-confirm-buttons-mobile {
526
+ display: none;
527
+ }
528
+
529
+ .onpe-modal-confirm-buttons-desktop {
530
+ display: flex;
531
+ }
577
532
 
578
533
  .onpe-modal-confirm-button {
579
534
  width: 200px;