@oruga-ui/theme-oruga 0.5.0 → 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 +175 -162
  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 -156
  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 +26 -25
package/dist/scss/components/_taginput.scss CHANGED
@@ -1,117 +1,119 @@
1
1
  @use "sass:list";
2
2
 
3
3
  /* @docs */
4
- $taginput-counter-font-size: 0.75rem !default;
4
+ $taginput-counter-font-size: 0.75em !default;
5
5
  $taginput-counter-margin: 0.25rem 0 0 0.5rem !default;
6
6
  $taginput-item-background-color: var(--#{$prefix}primary) !default;
7
7
  $taginput-item-color: var(--#{$prefix}primary-invert) !default;
8
8
  $taginput-item-border-radius: var(--#{$prefix}base-border-radius) !default;
9
9
  $taginput-item-margin: 0.275em !default;
10
10
  $taginput-item-padding: 0 0.75em 0 0.75em !default;
11
- $taginput-margin-icon-to-text: 0.1875em !default;
11
+ $taginput-item-icon-margin: 0.5em !default;
12
12
  /* @docs */
13
13
 
14
14
  .o-taginput {
15
- display: flex;
16
-
17
- &__container {
18
15
  display: flex;
19
- flex-wrap: wrap;
20
-
21
- box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
22
- background-color: var(
23
- --#{$prefix}input-background-color,
24
- $input-background-color
25
- );
26
- border-color: var(--#{$prefix}input-border-color, $input-border-color);
27
- border-style: var(--#{$prefix}input-border-style, $input-border-style);
28
- border-width: var(--#{$prefix}input-border-width, $input-border-width);
29
- border-radius: var(--#{$prefix}input-border-radius, $input-border-radius);
30
- color: var(--#{$prefix}input-color, $input-color);
31
- font-size: var(--#{$prefix}base-font-size, $base-font-size);
32
- line-height: var(--#{$prefix}input-line-height, $input-line-height);
33
- margin: var(--#{$prefix}input-margin, $input-margin);
34
- width: var(--#{$prefix}taginput-width, inherit);
35
16
 
36
- // size variants
37
- @each $name, $value in $sizes {
38
- &--#{$name} {
39
- font-size: var(--#{$prefix}taginput-font-size-#{$name}, $value);
40
- }
17
+ &__container {
18
+ display: flex;
19
+ flex-wrap: wrap;
20
+ align-items: center;
21
+
22
+ box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
23
+ background-color: var(
24
+ --#{$prefix}input-background-color,
25
+ $input-background-color
26
+ );
27
+ border-color: var(--#{$prefix}input-border-color, $input-border-color);
28
+ border-style: var(--#{$prefix}input-border-style, $input-border-style);
29
+ border-width: var(--#{$prefix}input-border-width, $input-border-width);
30
+ border-radius: var(
31
+ --#{$prefix}input-border-radius,
32
+ $input-border-radius
33
+ );
34
+ color: var(--#{$prefix}input-color, $input-color);
35
+ line-height: var(--#{$prefix}input-line-height, $input-line-height);
36
+ margin: var(--#{$prefix}input-margin, $input-margin);
37
+ width: var(--#{$prefix}taginput-width, inherit);
41
38
  }
42
- }
43
-
44
- &__autocomplete {
45
- flex-grow: 1;
46
- flex-shrink: 1;
47
- width: auto;
48
- }
49
-
50
- &__input {
51
- border: none;
52
- box-shadow: none;
53
- width: 100%;
54
- }
55
-
56
- &__item {
57
- display: inline-flex;
58
- margin: var(--#{$prefix}taginput-item-margin, $taginput-item-margin);
59
- padding: var(--#{$prefix}taginput-item-padding, $taginput-item-padding);
60
- color: var(--#{$prefix}taginput-item-color, $taginput-item-color);
61
- background-color: var(
62
- --#{$prefix}taginput-item-background-color,
63
- $taginput-item-background-color
64
- );
65
- border-radius: var(
66
- --#{$prefix}taginput-item-border-radius,
67
- $taginput-item-border-radius
68
- );
69
-
70
- // color variants
71
- @each $name, $pair in $colors {
72
- $color: list.nth($pair, 1);
73
- $color-invert: list.nth($pair, 2);
74
39
 
75
- &--#{$name} {
76
- --#{$prefix}focus: #{createFocus($color)};
77
-
78
- background-color: var(--#{$prefix}variant-#{$name}, $color);
79
- color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
80
- }
40
+ &__autocomplete {
41
+ flex-grow: 1;
42
+ flex-shrink: 1;
43
+ width: auto;
81
44
  }
82
45
 
83
- // focus effect
84
- &:focus,
85
- &:focus-within {
86
- box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
87
- outline: 0;
46
+ &__input {
47
+ border: none;
48
+ box-shadow: none;
88
49
  }
89
- }
90
50
 
91
- &__counter {
92
- display: block;
93
- float: right;
94
- font-size: var(
95
- --#{$prefix}taginput-counter-font-size,
96
- $taginput-counter-font-size
97
- );
98
- margin: var(--#{$prefix}taginput-counter-margin, $taginput-counter-margin);
99
- }
51
+ // size variants
52
+ @each $name, $value in $sizes {
53
+ &--#{$name} {
54
+ font-size: var(--#{$prefix}taginput-font-size-#{$name}, $value);
55
+ }
56
+ }
100
57
 
101
- &--expanded {
102
- width: 100%;
103
- flex-grow: 1;
104
- flex-shrink: 1;
105
- }
58
+ &__item {
59
+ display: inline-flex;
60
+ margin: var(--#{$prefix}taginput-item-margin, $taginput-item-margin);
61
+ padding: var(--#{$prefix}taginput-item-padding, $taginput-item-padding);
62
+ color: var(--#{$prefix}taginput-item-color, $taginput-item-color);
63
+ background-color: var(
64
+ --#{$prefix}taginput-item-background-color,
65
+ $taginput-item-background-color
66
+ );
67
+ border-radius: var(
68
+ --#{$prefix}taginput-item-border-radius,
69
+ $taginput-item-border-radius
70
+ );
71
+
72
+ // color variants
73
+ @each $name, $pair in $colors {
74
+ $color: list.nth($pair, 1);
75
+ $color-invert: list.nth($pair, 2);
76
+
77
+ &--#{$name} {
78
+ --#{$prefix}focus: #{createFocus($color)};
79
+
80
+ background-color: var(--#{$prefix}variant-#{$name}, $color);
81
+ color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
82
+ }
83
+ }
84
+
85
+ // focus effect
86
+ &:focus,
87
+ &:focus-visible,
88
+ &:focus-within {
89
+ box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
90
+ outline: 0;
91
+ }
92
+
93
+ &__close {
94
+ margin-left: var(
95
+ --#{$prefix}taginput-item-icon-margin,
96
+ $taginput-item-icon-margin
97
+ );
98
+ }
99
+ }
106
100
 
107
- // // focus effect
108
- // &:focus &__container,
109
- // &:focus-within &__container {
110
- // box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
101
+ &__counter {
102
+ display: block;
103
+ float: right;
104
+ font-size: var(
105
+ --#{$prefix}taginput-counter-font-size,
106
+ $taginput-counter-font-size
107
+ );
108
+ margin: var(
109
+ --#{$prefix}taginput-counter-margin,
110
+ $taginput-counter-margin
111
+ );
112
+ }
111
113
 
112
- // // disable focus effect for inner input
113
- // .o-input {
114
- // --#{$prefix}focus: transparent;
115
- // }
116
- // }
114
+ &--expanded {
115
+ width: 100%;
116
+ flex-grow: 1;
117
+ flex-shrink: 1;
118
+ }
117
119
  }
package/dist/scss/components/_timepicker.scss CHANGED
@@ -6,87 +6,93 @@ $timepicker-footer-padding: 0 0.5rem !default;
6
6
  $timepicker-footer-margin: 0.875rem 0 0 0 !default;
7
7
  $timepicker-select-line-height: var(--#{$prefix}base-line-height) !default;
8
8
  $timepicker-select-padding: $control-padding-vertical
9
- $control-padding-horizontal !default;
9
+ $control-padding-horizontal !default;
10
10
  $timepicker-select-color: #363636 !default;
11
11
  $timepicker-select-font-weight: 600 !default;
12
12
  $timepicker-select-placeholder-opacity: var(
13
- --#{$prefix}base-disabled-opacity
13
+ --#{$prefix}base-disabled-opacity
14
14
  ) !default;
15
15
  $timepicker-separator-font-weight: 600 !default;
16
16
  /* @docs */
17
17
 
18
- .o-tpck {
19
- font-size: var(--#{$prefix}timepicker-font-size, $timepicker-font-size);
18
+ .o-timepicker {
19
+ font-size: var(--#{$prefix}timepicker-font-size, $timepicker-font-size);
20
20
 
21
- @each $name, $value in $sizes {
22
- &--#{$name} {
23
- font-size: var(--#{$prefix}timepicker-font-size-#{$name}, $value);
21
+ @each $name, $value in $sizes {
22
+ &--#{$name} {
23
+ font-size: var(--#{$prefix}timepicker-font-size-#{$name}, $value);
24
+ }
24
25
  }
25
- }
26
26
 
27
- &__dropdown {
28
- width: 100%;
29
- }
27
+ &__dropdown {
28
+ width: 100%;
29
+ }
30
30
 
31
- &__box {
32
- display: flex;
33
- justify-content: center;
34
- align-items: center;
35
- line-height: var(
36
- --#{$prefix}timepicker-box-line-height,
37
- $timepicker-box-line-height
38
- );
39
- padding: var(--#{$prefix}timepicker-box-padding, $timepicker-box-padding);
40
- }
31
+ &__box {
32
+ display: flex;
33
+ justify-content: center;
34
+ align-items: center;
35
+ line-height: var(
36
+ --#{$prefix}timepicker-box-line-height,
37
+ $timepicker-box-line-height
38
+ );
39
+ padding: var(
40
+ --#{$prefix}timepicker-box-padding,
41
+ $timepicker-box-padding
42
+ );
43
+ }
41
44
 
42
- &__select {
43
- -moz-appearance: none;
44
- -webkit-appearance: none;
45
- display: inline-block;
46
- position: relative;
47
- vertical-align: top;
48
- cursor: pointer;
49
- justify-content: flex-start;
50
- align-items: center;
51
- border: 0;
52
- font-size: inherit;
53
- font-weight: var(
54
- --#{$prefix}timepicker-select-font-weight,
55
- $timepicker-select-font-weight
56
- );
57
- line-height: var(
58
- --#{$prefix}timepicker-select-line-height,
59
- $timepicker-select-line-height
60
- );
61
- color: var(--#{$prefix}timepicker-select-color, $timepicker-select-color);
62
- padding: var(
63
- --#{$prefix}timepicker-select-padding,
64
- $timepicker-select-padding
65
- );
66
- }
45
+ &__select {
46
+ -moz-appearance: none;
47
+ -webkit-appearance: none;
48
+ display: inline-block;
49
+ position: relative;
50
+ vertical-align: top;
51
+ cursor: pointer;
52
+ justify-content: flex-start;
53
+ align-items: center;
54
+ border: 0;
55
+ font-size: inherit;
56
+ font-weight: var(
57
+ --#{$prefix}timepicker-select-font-weight,
58
+ $timepicker-select-font-weight
59
+ );
60
+ line-height: var(
61
+ --#{$prefix}timepicker-select-line-height,
62
+ $timepicker-select-line-height
63
+ );
64
+ color: var(
65
+ --#{$prefix}timepicker-select-color,
66
+ $timepicker-select-color
67
+ );
68
+ padding: var(
69
+ --#{$prefix}timepicker-select-padding,
70
+ $timepicker-select-padding
71
+ );
72
+ }
67
73
 
68
- &__select-placeholder {
69
- opacity: var(
70
- --#{$prefix}timepicker-select-placeholder-opacity,
71
- $timepicker-select-placeholder-opacity
72
- );
73
- }
74
+ &__select-placeholder {
75
+ opacity: var(
76
+ --#{$prefix}timepicker-select-placeholder-opacity,
77
+ $timepicker-select-placeholder-opacity
78
+ );
79
+ }
74
80
 
75
- &__separator {
76
- font-weight: var(
77
- --#{$prefix}timepicker-separator-font-weight,
78
- $timepicker-separator-font-weight
79
- );
80
- }
81
+ &__separator {
82
+ font-weight: var(
83
+ --#{$prefix}timepicker-separator-font-weight,
84
+ $timepicker-separator-font-weight
85
+ );
86
+ }
81
87
 
82
- &__footer {
83
- padding: var(
84
- --#{$prefix}timepicker-header-padding,
85
- $timepicker-footer-padding
86
- );
87
- margin: var(
88
- --#{$prefix}timepicker-header-margin,
89
- $timepicker-footer-margin
90
- );
91
- }
88
+ &__footer {
89
+ padding: var(
90
+ --#{$prefix}timepicker-header-padding,
91
+ $timepicker-footer-padding
92
+ );
93
+ margin: var(
94
+ --#{$prefix}timepicker-header-margin,
95
+ $timepicker-footer-margin
96
+ );
97
+ }
92
98
  }