@oruga-ui/theme-oruga 0.5.1 → 0.6.0

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 (39) hide show
  1. package/README.md +4 -3
  2. package/dist/oruga.css +2 -2
  3. package/dist/scss/components/_autocomplete.scss +15 -15
  4. package/dist/scss/components/_button.scss +174 -165
  5. package/dist/scss/components/_carousel.scss +199 -177
  6. package/dist/scss/components/_checkbox.scss +130 -122
  7. package/dist/scss/components/_collapse.scss +11 -9
  8. package/dist/scss/components/_datepicker.scss +408 -416
  9. package/dist/scss/components/_datetimepicker.scss +8 -8
  10. package/dist/scss/components/_dropdown.scss +224 -206
  11. package/dist/scss/components/_field.scss +107 -106
  12. package/dist/scss/components/_icon.scss +44 -40
  13. package/dist/scss/components/_input.scss +127 -112
  14. package/dist/scss/components/_loading.scss +27 -24
  15. package/dist/scss/components/_menu.scss +100 -63
  16. package/dist/scss/components/_modal.scss +66 -66
  17. package/dist/scss/components/_notification.scss +146 -134
  18. package/dist/scss/components/_pagination.scss +227 -198
  19. package/dist/scss/components/_radio.scss +95 -74
  20. package/dist/scss/components/_select.scss +143 -120
  21. package/dist/scss/components/_sidebar.scss +120 -104
  22. package/dist/scss/components/_skeleton.scss +55 -55
  23. package/dist/scss/components/_slider.scss +166 -151
  24. package/dist/scss/components/_steps.scss +300 -287
  25. package/dist/scss/components/_switch.scss +115 -128
  26. package/dist/scss/components/_table.scss +363 -330
  27. package/dist/scss/components/_tabs.scss +295 -280
  28. package/dist/scss/components/_taginput.scss +95 -93
  29. package/dist/scss/components/_timepicker.scss +74 -68
  30. package/dist/scss/components/_tooltip.scss +522 -424
  31. package/dist/scss/components/_upload.scss +51 -48
  32. package/dist/scss/oruga.scss +0 -1
  33. package/dist/scss/utils/_animations.scss +97 -97
  34. package/dist/scss/utils/_base.scss +31 -14
  35. package/dist/scss/utils/_helpers.scss +65 -65
  36. package/dist/scss/utils/_root.scss +37 -44
  37. package/dist/scss/utils/_variables.scss +44 -44
  38. package/dist/theme.js +1 -1
  39. package/package.json +20 -19
package/dist/scss/components/_datetimepicker.scss CHANGED
@@ -1,13 +1,13 @@
1
1
  /* @docs */
2
2
  /* @docs */
3
3
 
4
- .o-dtpck {
5
- &__time {
6
- display: flex;
7
- justify-content: center;
8
- align-items: center;
4
+ .o-datetimepicker {
5
+ &__time {
6
+ display: flex;
7
+ justify-content: center;
8
+ align-items: center;
9
9
 
10
- // override time dropdown shadow
11
- --#{$prefix}dropdown-menu-box-shadow: 0, 0, 0, 0;
12
- }
10
+ // override time dropdown shadow
11
+ --#{$prefix}dropdown-menu-box-shadow: 0, 0, 0, 0;
12
+ }
13
13
  }
package/dist/scss/components/_dropdown.scss CHANGED
@@ -4,7 +4,7 @@ $dropdown-item-active-background-color: var(--#{$prefix}primary) !default;
4
4
  $dropdown-item-active-color: var(--#{$prefix}primary-invert) !default;
5
5
  $dropdown-item-color: #000000 !default;
6
6
  $dropdown-item-disabled-opacity: var(
7
- --#{$prefix}base-disabled-opacity
7
+ --#{$prefix}base-disabled-opacity
8
8
  ) !default;
9
9
  $dropdown-item-font-size: var(--#{$prefix}base-font-size) !default;
10
10
  $dropdown-item-hover-background-color: #f5f5f5 !default;
@@ -15,8 +15,8 @@ $dropdown-item-font-weight: 400 !default;
15
15
  $dropdown-menu-background: #ffffff !default;
16
16
  $dropdown-menu-border-radius: var(--#{$prefix}base-border-radius) !default;
17
17
  $dropdown-menu-box-shadow:
18
- 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
19
- 0 0 0 1px rgba(10, 10, 10, 0.02) !default;
18
+ 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
19
+ 0 0 0 1px rgba(10, 10, 10, 0.02) !default;
20
20
  $dropdown-menu-spacer: 0px !default;
21
21
  $dropdown-menu-margin: 0 !default;
22
22
  $dropdown-menu-padding: 0.5rem 0 0.5rem 0 !default;
@@ -30,239 +30,257 @@ $dropdown-mobile-width: calc(100vw - 40px) !default;
30
30
  $dropdown-mobile-zindex: 60 !default;
31
31
  /* @docs */
32
32
 
33
- .o-drop {
34
- display: inline-flex;
35
- position: relative;
36
- vertical-align: top;
33
+ .o-dropdown {
34
+ display: inline-flex;
35
+ position: relative;
36
+ vertical-align: top;
37
37
 
38
- &__overlay {
39
- position: fixed;
40
- bottom: 0;
41
- left: 0;
42
- right: 0;
43
- top: 0;
44
- cursor: pointer;
45
- display: none;
38
+ &__overlay {
39
+ position: fixed;
40
+ bottom: 0;
41
+ left: 0;
42
+ right: 0;
43
+ top: 0;
44
+ cursor: pointer;
45
+ display: none;
46
46
 
47
- background-color: var(
48
- --#{$prefix}dropdown-mobile-overlay-color,
49
- $dropdown-mobile-overlay-color
50
- );
51
- z-index: var(
52
- --#{$prefix}dropdown-mobile-overlay-zindex,
53
- $dropdown-mobile-overlay-zindex
54
- );
55
- }
47
+ background-color: var(
48
+ --#{$prefix}dropdown-mobile-overlay-color,
49
+ $dropdown-mobile-overlay-color
50
+ );
51
+ z-index: var(
52
+ --#{$prefix}dropdown-mobile-overlay-zindex,
53
+ $dropdown-mobile-overlay-zindex
54
+ );
55
+ }
56
56
 
57
- &__trigger {
58
- width: 100%;
59
- }
57
+ &__trigger {
58
+ display: inline-flex;
59
+ width: 100%;
60
+ }
60
61
 
61
- &__menu {
62
- position: absolute;
63
- display: block;
62
+ &__menu {
63
+ position: absolute;
64
+ display: block;
64
65
 
65
- min-width: var(--#{$prefix}dropdown-menu-width, $dropdown-menu-width);
66
- z-index: var(--#{$prefix}dropdown-menu-zindex, $dropdown-menu-zindex);
67
- background-color: var(
68
- --#{$prefix}dropdown-menu-background,
69
- $dropdown-menu-background
70
- );
71
- border-radius: var(
72
- --#{$prefix}dropdown-menu-border-radius,
73
- $dropdown-menu-border-radius
74
- );
75
- box-shadow: var(
76
- --#{$prefix}dropdown-menu-box-shadow,
77
- $dropdown-menu-box-shadow
78
- );
79
- padding: var(--#{$prefix}dropdown-menu-padding, $dropdown-menu-padding);
80
- margin: var(--#{$prefix}dropdown-menu-margin, $dropdown-menu-margin);
66
+ min-width: var(--#{$prefix}dropdown-menu-width, $dropdown-menu-width);
67
+ z-index: var(--#{$prefix}dropdown-menu-zindex, $dropdown-menu-zindex);
68
+ background-color: var(
69
+ --#{$prefix}dropdown-menu-background,
70
+ $dropdown-menu-background
71
+ );
72
+ border-radius: var(
73
+ --#{$prefix}dropdown-menu-border-radius,
74
+ $dropdown-menu-border-radius
75
+ );
76
+ box-shadow: var(
77
+ --#{$prefix}dropdown-menu-box-shadow,
78
+ $dropdown-menu-box-shadow
79
+ );
80
+ padding: var(--#{$prefix}dropdown-menu-padding, $dropdown-menu-padding);
81
+ margin: var(--#{$prefix}dropdown-menu-margin, $dropdown-menu-margin);
81
82
 
82
- &--bottom {
83
- left: 50%;
84
- right: auto;
85
- top: calc(
86
- 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
87
- );
88
- bottom: auto;
89
- transform: translateX(-50%);
90
- }
83
+ &--bottom {
84
+ left: 50%;
85
+ right: auto;
86
+ top: calc(
87
+ 100% +
88
+ var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
89
+ );
90
+ bottom: auto;
91
+ transform: translateX(-50%);
92
+ }
91
93
 
92
- &--top {
93
- left: 50%;
94
- right: auto;
95
- top: auto;
96
- bottom: calc(
97
- 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
98
- );
99
- transform: translateX(-50%);
100
- }
94
+ &--top {
95
+ left: 50%;
96
+ right: auto;
97
+ top: auto;
98
+ bottom: calc(
99
+ 100% +
100
+ var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
101
+ );
102
+ transform: translateX(-50%);
103
+ }
101
104
 
102
- &--left {
103
- right: calc(
104
- 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
105
- );
106
- left: auto;
107
- top: 50%;
108
- bottom: auto;
109
- transform: translateY(-50%);
110
- }
105
+ &--left {
106
+ right: calc(
107
+ 100% +
108
+ var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
109
+ );
110
+ left: auto;
111
+ top: 50%;
112
+ bottom: auto;
113
+ transform: translateY(-50%);
114
+ }
111
115
 
112
- &--right {
113
- right: auto;
114
- left: calc(
115
- 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
116
- );
117
- top: 50%;
118
- bottom: auto;
119
- transform: translateY(-50%);
120
- }
116
+ &--right {
117
+ right: auto;
118
+ left: calc(
119
+ 100% +
120
+ var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
121
+ );
122
+ top: 50%;
123
+ bottom: auto;
124
+ transform: translateY(-50%);
125
+ }
121
126
 
122
- &--top-right {
123
- right: 0;
124
- left: auto;
125
- top: auto;
126
- bottom: calc(
127
- 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
128
- );
129
- }
127
+ &--top-right {
128
+ right: 0;
129
+ left: auto;
130
+ top: auto;
131
+ bottom: calc(
132
+ 100% +
133
+ var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
134
+ );
135
+ }
130
136
 
131
- &--top-left {
132
- right: auto;
133
- left: 0;
134
- top: auto;
135
- bottom: calc(
136
- 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
137
- );
138
- }
137
+ &--top-left {
138
+ right: auto;
139
+ left: 0;
140
+ top: auto;
141
+ bottom: calc(
142
+ 100% +
143
+ var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
144
+ );
145
+ }
139
146
 
140
- &--bottom-right {
141
- right: 0;
142
- left: auto;
143
- top: calc(
144
- 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
145
- );
146
- bottom: auto;
147
- }
147
+ &--bottom-right {
148
+ right: 0;
149
+ left: auto;
150
+ top: calc(
151
+ 100% +
152
+ var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
153
+ );
154
+ bottom: auto;
155
+ }
148
156
 
149
- &--bottom-left {
150
- right: auto;
151
- left: 0;
152
- top: calc(
153
- 100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
154
- );
155
- bottom: auto;
157
+ &--bottom-left {
158
+ right: auto;
159
+ left: 0;
160
+ top: calc(
161
+ 100% +
162
+ var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
163
+ );
164
+ bottom: auto;
165
+ }
156
166
  }
157
- }
158
167
 
159
- &__item {
160
- display: block;
161
- position: relative;
168
+ &__item {
169
+ display: block;
170
+ position: relative;
162
171
 
163
- color: var(--#{$prefix}dropdown-item-color, $dropdown-item-color);
164
- font-size: var(
165
- --#{$prefix}dropdown-item-font-size,
166
- $dropdown-item-font-size
167
- );
168
- font-weight: var(
169
- --#{$prefix}dropdown-item-font-weight,
170
- $dropdown-item-font-weight
171
- );
172
- line-height: var(
173
- --#{$prefix}dropdown-item-line-height,
174
- $dropdown-item-line-height
175
- );
176
- padding: var(--#{$prefix}dropdown-item-padding, $dropdown-item-padding);
172
+ color: var(--#{$prefix}dropdown-item-color, $dropdown-item-color);
173
+ font-size: var(
174
+ --#{$prefix}dropdown-item-font-size,
175
+ $dropdown-item-font-size
176
+ );
177
+ font-weight: var(
178
+ --#{$prefix}dropdown-item-font-weight,
179
+ $dropdown-item-font-weight
180
+ );
181
+ line-height: var(
182
+ --#{$prefix}dropdown-item-line-height,
183
+ $dropdown-item-line-height
184
+ );
185
+ padding: var(--#{$prefix}dropdown-item-padding, $dropdown-item-padding);
177
186
 
178
- &--disabled {
179
- opacity: var(
180
- --#{$prefix}dropdown-item-disabled-opacity,
181
- $dropdown-item-disabled-opacity
182
- );
183
- pointer-events: none;
184
- }
187
+ &--disabled {
188
+ opacity: var(
189
+ --#{$prefix}dropdown-item-disabled-opacity,
190
+ $dropdown-item-disabled-opacity
191
+ );
192
+ pointer-events: none;
193
+ }
185
194
 
186
- &--active {
187
- background-color: var(
188
- --#{$prefix}dropdown-item-active-background-color,
189
- $dropdown-item-active-background-color
190
- );
191
- color: var(
192
- --#{$prefix}dropdown-item-active-color,
193
- $dropdown-item-active-color
194
- );
195
- }
195
+ &--active {
196
+ background-color: var(
197
+ --#{$prefix}dropdown-item-active-background-color,
198
+ $dropdown-item-active-background-color
199
+ );
200
+ color: var(
201
+ --#{$prefix}dropdown-item-active-color,
202
+ $dropdown-item-active-color
203
+ );
204
+ }
196
205
 
197
- &--clickable {
198
- cursor: pointer;
199
- }
206
+ &--clickable {
207
+ cursor: pointer;
200
208
 
201
- &--clickable:not(&--active):hover {
202
- background-color: var(
203
- --#{$prefix}dropdown-item-hover-background-color,
204
- $dropdown-item-hover-background-color
205
- );
206
- color: var(
207
- --#{$prefix}dropdown-item-hover-color,
208
- $dropdown-item-hover-color
209
- );
209
+ &:not(.o-dropdown__item--active) {
210
+ &:hover,
211
+ &.o-dropdown__item--focused {
212
+ background-color: var(
213
+ --#{$prefix}dropdown-item-hover-background-color,
214
+ $dropdown-item-hover-background-color
215
+ );
216
+ color: var(
217
+ --#{$prefix}dropdown-item-hover-color,
218
+ $dropdown-item-hover-color
219
+ );
220
+ }
221
+ }
222
+ }
210
223
  }
211
- }
212
224
 
213
- &--inline {
214
- display: inline;
225
+ &--inline {
226
+ display: inline;
215
227
 
216
- .o-drop__menu {
217
- position: static;
218
- display: inline-block;
219
- padding: 0;
228
+ .o-dropdown__menu {
229
+ position: static;
230
+ display: inline-block;
231
+ padding: 0;
232
+ }
220
233
  }
221
- }
222
234
 
223
- &--expanded {
224
- width: 100%;
235
+ &--expanded {
236
+ width: 100%;
225
237
 
226
- .o-drop__menu {
227
- width: 100%;
238
+ .o-dropdown__menu {
239
+ width: 100%;
240
+ }
228
241
  }
229
- }
230
242
 
231
- &--disabled {
232
- opacity: var(
233
- --#{$prefix}dropdown-disabled-opacity,
234
- $dropdown-disabled-opacity
235
- );
236
- pointer-events: none;
237
- }
238
-
239
- &--modal:not(.o-drop--inline):not(.o-drop--hoverable) {
240
- > .o-drop__menu {
241
- position: fixed;
242
- top: 25%;
243
- left: 50%;
244
- bottom: auto;
245
- right: auto;
246
- transform: translate3d(-50%, -25%, 0);
247
- overflow-y: auto;
248
- width: var(--#{$prefix}dropdown-mobile-width, $dropdown-mobile-width);
249
- max-width: var(
250
- --#{$prefix}dropdown-mobile-max-width,
251
- $dropdown-mobile-max-width
252
- );
253
- max-height: var(
254
- --#{$prefix}dropdown-mobile-max-height,
255
- $dropdown-mobile-max-height
256
- );
257
- z-index: var(--#{$prefix}dropdown-mobile-zindex, $dropdown-mobile-zindex);
243
+ &--disabled {
244
+ opacity: var(
245
+ --#{$prefix}dropdown-disabled-opacity,
246
+ $dropdown-disabled-opacity
247
+ );
248
+ pointer-events: none;
258
249
  }
259
250
 
260
- > .o-drop__overlay {
261
- display: block;
251
+ &--modal:not(.o-dropdown--inline):not(.o-dropdown--hoverable) {
252
+ > .o-dropdown__menu {
253
+ position: fixed;
254
+ top: 25%;
255
+ left: 50%;
256
+ bottom: auto;
257
+ right: auto;
258
+ transform: translate3d(-50%, -25%, 0);
259
+ overflow-y: auto;
260
+ width: var(
261
+ --#{$prefix}dropdown-mobile-width,
262
+ $dropdown-mobile-width
263
+ );
264
+ max-width: var(
265
+ --#{$prefix}dropdown-mobile-max-width,
266
+ $dropdown-mobile-max-width
267
+ );
268
+ max-height: var(
269
+ --#{$prefix}dropdown-mobile-max-height,
270
+ $dropdown-mobile-max-height
271
+ );
272
+ z-index: var(
273
+ --#{$prefix}dropdown-mobile-zindex,
274
+ $dropdown-mobile-zindex
275
+ );
276
+ }
277
+
278
+ > .o-dropdown__overlay {
279
+ display: block;
280
+ }
262
281
  }
263
- }
264
282
 
265
- &--teleport {
266
- width: unset;
267
- }
283
+ &--teleport {
284
+ width: unset;
285
+ }
268
286
  }