@oruga-ui/theme-oruga 0.5.1 → 0.7.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 (41) hide show
  1. package/README.md +5 -4
  2. package/dist/oruga.css +2 -2
  3. package/dist/scss/components/_autocomplete.scss +16 -16
  4. package/dist/scss/components/_breadcrumb.scss +189 -0
  5. package/dist/scss/components/_button.scss +180 -166
  6. package/dist/scss/components/_carousel.scss +199 -177
  7. package/dist/scss/components/_checkbox.scss +130 -122
  8. package/dist/scss/components/_collapse.scss +11 -9
  9. package/dist/scss/components/_datepicker.scss +409 -417
  10. package/dist/scss/components/_datetimepicker.scss +8 -8
  11. package/dist/scss/components/_dropdown.scss +225 -207
  12. package/dist/scss/components/_field.scss +107 -106
  13. package/dist/scss/components/_icon.scss +44 -40
  14. package/dist/scss/components/_input.scss +127 -112
  15. package/dist/scss/components/_loading.scss +27 -24
  16. package/dist/scss/components/_menu.scss +102 -65
  17. package/dist/scss/components/_modal.scss +67 -67
  18. package/dist/scss/components/_notification.scss +146 -134
  19. package/dist/scss/components/_pagination.scss +227 -198
  20. package/dist/scss/components/_radio.scss +95 -74
  21. package/dist/scss/components/_select.scss +143 -120
  22. package/dist/scss/components/_sidebar.scss +120 -104
  23. package/dist/scss/components/_skeleton.scss +55 -55
  24. package/dist/scss/components/_slider.scss +166 -151
  25. package/dist/scss/components/_steps.scss +300 -287
  26. package/dist/scss/components/_switch.scss +115 -128
  27. package/dist/scss/components/_table.scss +364 -331
  28. package/dist/scss/components/_tabs.scss +295 -280
  29. package/dist/scss/components/_tag.scss +84 -0
  30. package/dist/scss/components/_taginput.scss +55 -97
  31. package/dist/scss/components/_timepicker.scss +74 -68
  32. package/dist/scss/components/_tooltip.scss +522 -424
  33. package/dist/scss/components/_upload.scss +51 -48
  34. package/dist/scss/oruga.scss +2 -1
  35. package/dist/scss/utils/_animations.scss +97 -97
  36. package/dist/scss/utils/_base.scss +33 -16
  37. package/dist/scss/utils/_helpers.scss +65 -65
  38. package/dist/scss/utils/_root.scss +37 -44
  39. package/dist/scss/utils/_variables.scss +45 -44
  40. package/dist/theme.js +1 -1
  41. package/package.json +29 -26
package/dist/scss/components/_carousel.scss CHANGED
@@ -5,11 +5,15 @@ $carousel-arrow-icon-spaced: 1.5rem !default;
5
5
  $carousel-arrow-top: 50% !default;
6
6
  $carousel-arrow-size: 1.5rem !default;
7
7
  $carousel-arrow-border-radius: var(
8
- --#{$prefix}base-border-radius-rounded
8
+ --#{$prefix}base-border-radius-rounded
9
9
  ) !default;
10
10
  $carousel-arrow-border: 1px solid $carousel-arrow-background !default;
11
11
  $carousel-arrow-transition: var(--#{$prefix}transition-duration)
12
- var(--#{$prefix}transition-timing) !default;
12
+ var(--#{$prefix}transition-timing) !default;
13
+ $carousel-autoplay-top: 1em !default;
14
+ $carousel-autoplay-left: $carousel-arrow-icon-spaced !default;
15
+ $carousel-autoplay-right: unset !default;
16
+ $carousel-autoplay-bottom: unset !default;
13
17
  $carousel-indicators-background: rgba(var(--#{$prefix}white), 0.5) !default;
14
18
  $carousel-indicators-padding: 0.5rem !default;
15
19
  $carousel-indicator-margin: 0 0.5rem 0 0 !default;
@@ -19,215 +23,233 @@ $carousel-indicator-border: 1px solid $carousel-indicator-color !default;
19
23
  $carousel-indicator-active-background: $carousel-indicator-color !default;
20
24
  $carousel-indicator-active-border: 1px solid $carousel-indicator-color !default;
21
25
  $carousel-indicator-transition: var(--#{$prefix}transition-duration)
22
- var(--#{$prefix}transition-timing) !default;
26
+ var(--#{$prefix}transition-timing) !default;
23
27
  $carousel-indicator-size: 10px !default;
24
28
  $carousel-indicator-dots-border-radius: var(
25
- --#{$prefix}base-border-radius
29
+ --#{$prefix}base-border-radius
26
30
  ) !default;
27
31
  $carousel-indicator-lines-height: 5px !default;
28
32
  $carousel-indicator-lines-width: 25px !default;
29
33
  $carousel-items-transition: all var(--#{$prefix}transition-duration)
30
- var(--#{$prefix}transition-timing) 0s !default;
34
+ var(--#{$prefix}transition-timing) 0s !default;
31
35
  $carousel-item-border: 2px solid transparent !default;
32
36
  $carousel-overlay-background: hsla(0, 0%, 4%, 0.86) !default;
33
37
  $carousel-overlay-zindex: 40 !default;
34
38
  /* @docs */
35
39
 
36
- .o-car {
37
- @include unselectable;
38
- position: relative;
39
- overflow: hidden;
40
- width: 100%;
41
-
42
- &__overlay {
43
- bottom: 0;
44
- left: 0;
45
- right: 0;
46
- top: 0;
47
- align-items: center;
48
- flex-direction: column;
49
- justify-content: center;
50
- display: flex;
51
- max-height: 100vh;
52
- position: fixed;
53
-
54
- background-color: var(
55
- --#{$prefix}carousel-overlay-background,
56
- $carousel-overlay-background
57
- );
58
- z-index: var(--#{$prefix}carousel-overlay-zindex, $carousel-overlay-zindex);
59
- }
60
-
61
- &__wrapper {
40
+ .o-carousel {
41
+ @include unselectable;
42
+
62
43
  position: relative;
44
+ overflow: hidden;
63
45
  width: 100%;
64
- }
65
46
 
66
- &__items {
67
- display: flex;
68
- width: 100%;
47
+ &__overlay {
48
+ position: fixed;
49
+ bottom: 0;
50
+ left: 0;
51
+ right: 0;
52
+ top: 0;
53
+ align-items: center;
54
+ flex-direction: column;
55
+ justify-content: center;
56
+ display: flex;
57
+ max-height: 100vh;
58
+
59
+ background-color: var(
60
+ --#{$prefix}carousel-overlay-background,
61
+ $carousel-overlay-background
62
+ );
63
+ z-index: var(
64
+ --#{$prefix}carousel-overlay-zindex,
65
+ $carousel-overlay-zindex
66
+ );
67
+ }
69
68
 
70
- &:not(&--dragging) {
71
- transition: var(
72
- --#{$prefix}carousel-items-transition,
73
- $carousel-items-transition
74
- );
69
+ &__wrapper {
70
+ position: relative;
71
+ width: 100%;
75
72
  }
76
- }
77
73
 
78
- &__item {
79
- border: var(--#{$prefix}carousel-item-border, $carousel-item-border);
80
- flex-shrink: 0;
74
+ &__items {
75
+ display: flex;
76
+ width: 100%;
81
77
 
82
- &--clickable {
83
- cursor: pointer;
78
+ &:not(&--dragging) {
79
+ transition: var(
80
+ --#{$prefix}carousel-items-transition,
81
+ $carousel-items-transition
82
+ );
83
+ }
84
84
  }
85
- }
86
85
 
87
- &__indicators {
88
- width: 100%;
89
- display: flex;
90
- align-items: center;
91
- justify-content: center;
92
-
93
- padding: var(
94
- --#{$prefix}carousel-indicators-padding,
95
- $carousel-indicators-padding
96
- );
97
- background: var(
98
- --#{$prefix}carousel-indicators-background,
99
- $carousel-indicators-background
100
- );
101
-
102
- &--inside {
103
- position: absolute;
104
-
105
- &--bottom {
106
- bottom: 0;
107
- }
86
+ &__item {
87
+ border: var(--#{$prefix}carousel-item-border, $carousel-item-border);
88
+ flex-shrink: 0;
108
89
 
109
- &--top {
110
- top: 0;
111
- }
112
- }
113
- }
114
-
115
- &__indicator {
116
- &:not(:last-child) {
117
- margin: var(
118
- --#{$prefix}carousel-indicator-margin,
119
- $carousel-indicator-margin
120
- );
90
+ &--clickable {
91
+ cursor: pointer;
92
+ }
121
93
  }
122
94
 
123
- &__item {
124
- display: block;
125
-
126
- border: var(
127
- --#{$prefix}carousel-indicator-border,
128
- $carousel-indicator-border
129
- );
130
- background: var(
131
- --#{$prefix}carousel-indicator-background,
132
- $carousel-indicator-background
133
- );
134
- transition: var(
135
- --#{$prefix}carousel-indicator-transition,
136
- $carousel-indicator-transition
137
- );
138
-
139
- &--active,
140
- :hover {
141
- background: var(
142
- --#{$prefix}carousel-indicator-active-background,
143
- $carousel-indicator-active-background
95
+ &__indicators {
96
+ width: 100%;
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+
101
+ padding: var(
102
+ --#{$prefix}carousel-indicators-padding,
103
+ $carousel-indicators-padding
144
104
  );
145
- border: var(
146
- --#{$prefix}carousel-indicator-active-border,
147
- $carousel-indicator-active-border
105
+ background: var(
106
+ --#{$prefix}carousel-indicators-background,
107
+ $carousel-indicators-background
148
108
  );
149
- }
150
109
 
151
- &--boxes {
152
- width: var(
153
- --#{$prefix}carousel-indicator-size,
154
- $carousel-indicator-size
110
+ &--inside {
111
+ position: absolute;
112
+ }
113
+
114
+ &--bottom {
115
+ bottom: 0;
116
+ }
117
+
118
+ &--top {
119
+ top: 0;
120
+ }
121
+ }
122
+
123
+ &__indicator {
124
+ &:not(:last-child) {
125
+ margin: var(
126
+ --#{$prefix}carousel-indicator-margin,
127
+ $carousel-indicator-margin
128
+ );
129
+ }
130
+
131
+ &__item {
132
+ display: block;
133
+
134
+ border: var(
135
+ --#{$prefix}carousel-indicator-border,
136
+ $carousel-indicator-border
137
+ );
138
+ background: var(
139
+ --#{$prefix}carousel-indicator-background,
140
+ $carousel-indicator-background
141
+ );
142
+ transition: var(
143
+ --#{$prefix}carousel-indicator-transition,
144
+ $carousel-indicator-transition
145
+ );
146
+
147
+ &--active,
148
+ :hover {
149
+ background: var(
150
+ --#{$prefix}carousel-indicator-active-background,
151
+ $carousel-indicator-active-background
152
+ );
153
+ border: var(
154
+ --#{$prefix}carousel-indicator-active-border,
155
+ $carousel-indicator-active-border
156
+ );
157
+ }
158
+
159
+ &--boxes {
160
+ width: var(
161
+ --#{$prefix}carousel-indicator-size,
162
+ $carousel-indicator-size
163
+ );
164
+ height: var(
165
+ --#{$prefix}carousel-indicator-size,
166
+ $carousel-indicator-size
167
+ );
168
+ }
169
+
170
+ &--dots {
171
+ border-radius: var(
172
+ --#{$prefix}carousel-indicator-dots-border-radius,
173
+ $carousel-indicator-dots-border-radius
174
+ );
175
+ width: var(
176
+ --#{$prefix}carousel-indicator-size,
177
+ $carousel-indicator-size
178
+ );
179
+ height: var(
180
+ --#{$prefix}carousel-indicator-size,
181
+ $carousel-indicator-size
182
+ );
183
+ }
184
+
185
+ &--lines {
186
+ width: var(
187
+ --#{$prefix}carousel-indicator-lines-width,
188
+ $carousel-indicator-lines-width
189
+ );
190
+ height: var(
191
+ --#{$prefix}carousel-indicator-lines-height,
192
+ $carousel-indicator-lines-height
193
+ );
194
+ }
195
+ }
196
+ }
197
+
198
+ &__icon {
199
+ cursor: pointer;
200
+ background: var(
201
+ --#{$prefix}carousel-arrow-background,
202
+ $carousel-arrow-background
203
+ );
204
+ color: var(--#{$prefix}carousel-arrow-color, $carousel-arrow-color);
205
+ width: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
206
+ height: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
207
+ border-radius: var(
208
+ --#{$prefix}carousel-arrow-border-radius,
209
+ $carousel-arrow-border-radius
155
210
  );
156
- height: var(
157
- --#{$prefix}carousel-indicator-size,
158
- $carousel-indicator-size
211
+ border: var(--#{$prefix}carousel-arrow-border, $carousel-arrow-border);
212
+ transition: var(
213
+ --#{$prefix}carousel-arrow-transition,
214
+ $carousel-arrow-transition
159
215
  );
160
- }
216
+ z-index: 1;
217
+ }
161
218
 
162
- &--dots {
163
- border-radius: var(
164
- --#{$prefix}carousel-indicator-dots-border-radius,
165
- $carousel-indicator-dots-border-radius
219
+ &__icon-autoplay {
220
+ position: absolute;
221
+ top: var(--#{$prefix}carousel-autoplay-top, $carousel-autoplay-top);
222
+ left: var(--#{$prefix}carousel-autoplay-left, $carousel-autoplay-left);
223
+ right: var(
224
+ --#{$prefix}carousel-autoplay-right,
225
+ $carousel-autoplay-right
166
226
  );
167
- width: var(
168
- --#{$prefix}carousel-indicator-size,
169
- $carousel-indicator-size
227
+ bottom: var(
228
+ --#{$prefix}carousel-autoplay-bottom,
229
+ $carousel-autoplay-bottom
170
230
  );
171
- height: var(
172
- --#{$prefix}carousel-indicator-size,
173
- $carousel-indicator-size
231
+ }
232
+
233
+ &__icon-prev,
234
+ &__icon-next {
235
+ position: absolute;
236
+ top: var(--#{$prefix}carousel-arrow-top, $carousel-arrow-top);
237
+ transform: translateY(
238
+ var(--#{$prefix}carousel-arrow-top, -$carousel-arrow-top)
174
239
  );
175
- }
240
+ }
176
241
 
177
- &--lines {
178
- width: var(
179
- --#{$prefix}carousel-indicator-lines-width,
180
- $carousel-indicator-lines-width
242
+ &__icon-prev {
243
+ left: var(
244
+ --#{$prefix}carousel-arrow-icon-spaced,
245
+ $carousel-arrow-icon-spaced
181
246
  );
182
- height: var(
183
- --#{$prefix}carousel-indicator-lines-height,
184
- $carousel-indicator-lines-height
247
+ }
248
+
249
+ &__icon-next {
250
+ right: var(
251
+ --#{$prefix}carousel-arrow-icon-spaced,
252
+ $carousel-arrow-icon-spaced
185
253
  );
186
- }
187
254
  }
188
- }
189
-
190
- &__arrow__icon {
191
- cursor: pointer;
192
- background: var(
193
- --#{$prefix}carousel-arrow-background,
194
- $carousel-arrow-background
195
- );
196
- color: var(--#{$prefix}carousel-arrow-color, $carousel-arrow-color);
197
- width: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
198
- height: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
199
- border-radius: var(
200
- --#{$prefix}carousel-arrow-border-radius,
201
- $carousel-arrow-border-radius
202
- );
203
- border: var(--#{$prefix}carousel-arrow-border, $carousel-arrow-border);
204
- transition: var(
205
- --#{$prefix}carousel-arrow-transition,
206
- $carousel-arrow-transition
207
- );
208
- }
209
-
210
- &__arrow__icon-prev,
211
- &__arrow__icon-next {
212
- position: absolute;
213
- top: var(--#{$prefix}carousel-arrow-top, $carousel-arrow-top);
214
- transform: translateY(
215
- var(--#{$prefix}carousel-arrow-top, -$carousel-arrow-top)
216
- );
217
- z-index: 1;
218
- }
219
-
220
- &__arrow__icon-prev {
221
- left: var(
222
- --#{$prefix}carousel-arrow-icon-spaced,
223
- $carousel-arrow-icon-spaced
224
- );
225
- }
226
-
227
- &__arrow__icon-next {
228
- right: var(
229
- --#{$prefix}carousel-arrow-icon-spaced,
230
- $carousel-arrow-icon-spaced
231
- );
232
- }
233
255
  }