@phillips/seldon 1.208.0 → 1.209.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.
- package/dist/scss/_sharedClasses.scss +3 -3
- package/dist/scss/_vars.scss +11 -0
- package/dist/scss/_vars.scss.js +11 -0
- package/dist/scss/components/AddToCalendar/_addToCalendar.scss +1 -1
- package/dist/scss/components/Breadcrumb/_breadcrumb.scss +1 -1
- package/dist/scss/components/Button/_button.scss +2 -3
- package/dist/scss/components/Carousel/_carousel.scss +3 -3
- package/dist/scss/components/ComboBox/_combobox.scss +2 -2
- package/dist/scss/components/ComposedModal/_composedModal.scss +1 -1
- package/dist/scss/components/DatePicker/_datePicker.scss +1 -1
- package/dist/scss/components/DescriptiveRadioButton/_descriptiveRadioButton.scss +1 -1
- package/dist/scss/components/Drawer/_drawer.scss +2 -2
- package/dist/scss/components/IconButton/_iconButton.scss +2 -2
- package/dist/scss/components/Input/_input.scss +2 -2
- package/dist/scss/components/Loader/_loader.scss +1 -1
- package/dist/scss/components/ProgressIndicator/_progressIndicator.scss +1 -1
- package/dist/scss/components/Select/_select.scss +0 -1
- package/dist/scss/components/Tags/_tags.scss +2 -2
- package/dist/scss/components/TextArea/_textArea.scss +1 -1
- package/dist/scss/components/Toast/_toast.scss +1 -1
- package/dist/scss/components/Toggle/_toggle.scss +2 -2
- package/dist/scss/patterns/CountryPicker/_countryPickerOption.scss +1 -1
- package/dist/scss/patterns/CountryPicker/_countryPickerTrigger.scss +1 -1
- package/dist/scss/patterns/FavoritesCollectionTile/_favoritesCollectionTile.scss +2 -2
- package/dist/scss/patterns/FiltersInline/_filterButton.scss +2 -2
- package/dist/scss/patterns/FiltersInline/_filterDropdownMenu.scss +2 -2
- package/dist/scss/patterns/SaleCard/_saleCard.scss +1 -1
- package/dist/scss/patterns/Social/_social.scss +0 -1
- package/package.json +1 -1
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
animation: skeleton-pulse 1s infinite alternate-reverse !important;
|
|
19
19
|
background-image: none !important;
|
|
20
20
|
background-clip: initial !important;
|
|
21
|
-
border-radius:
|
|
21
|
+
border-radius: $radius-xs !important;
|
|
22
22
|
/* stylelint-disable-next-line declaration-property-value-allowed-list */
|
|
23
23
|
border-color: #0000 !important;
|
|
24
24
|
box-shadow: none !important;
|
|
@@ -48,7 +48,7 @@ input[type='radio'].#{$px}-skeleton {
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
button.#{$px}-skeleton {
|
|
51
|
-
border-radius:
|
|
51
|
+
border-radius: $radius-3xl !important;
|
|
52
52
|
|
|
53
53
|
svg path {
|
|
54
54
|
fill: transparent !important;
|
|
@@ -58,7 +58,7 @@ button.#{$px}-skeleton {
|
|
|
58
58
|
.#{$px}-toggle-input {
|
|
59
59
|
.#{$px}-skeleton::before,
|
|
60
60
|
.#{$px}-skeleton::after {
|
|
61
|
-
border-radius:
|
|
61
|
+
border-radius: $radius-3xl !important;
|
|
62
62
|
}
|
|
63
63
|
.#{$px}-skeleton::after {
|
|
64
64
|
display: none !important;
|
package/dist/scss/_vars.scss
CHANGED
|
@@ -514,3 +514,14 @@ $header-height: var(--header-height);
|
|
|
514
514
|
/// Used to ensure the drawer button area is always at least the minimum height
|
|
515
515
|
/// This is calculated as the (button label height) + (Drawer panel padding) + (Button's internal padding)
|
|
516
516
|
$drawer-button-area-min-height: calc($button-label-line-height + $spacing-md * 2 + $spacing-sm * 2);
|
|
517
|
+
|
|
518
|
+
////////////////////////
|
|
519
|
+
/// RADIUS:
|
|
520
|
+
///////////////////////
|
|
521
|
+
$radius-xs: 4px;
|
|
522
|
+
$radius-sm: 8px;
|
|
523
|
+
$radius-md: 12px;
|
|
524
|
+
$radius-lg: 16px;
|
|
525
|
+
$radius-xl: 20px;
|
|
526
|
+
$radius-2xl: 24px;
|
|
527
|
+
$radius-3xl: 40px;
|
package/dist/scss/_vars.scss.js
CHANGED
|
@@ -514,6 +514,17 @@ $header-height: var(--header-height);
|
|
|
514
514
|
/// Used to ensure the drawer button area is always at least the minimum height
|
|
515
515
|
/// This is calculated as the (button label height) + (Drawer panel padding) + (Button's internal padding)
|
|
516
516
|
$drawer-button-area-min-height: calc($button-label-line-height + $spacing-md * 2 + $spacing-sm * 2);
|
|
517
|
+
|
|
518
|
+
////////////////////////
|
|
519
|
+
/// RADIUS:
|
|
520
|
+
///////////////////////
|
|
521
|
+
$radius-xs: 4px;
|
|
522
|
+
$radius-sm: 8px;
|
|
523
|
+
$radius-md: 12px;
|
|
524
|
+
$radius-lg: 16px;
|
|
525
|
+
$radius-xl: 20px;
|
|
526
|
+
$radius-2xl: 24px;
|
|
527
|
+
$radius-3xl: 40px;
|
|
517
528
|
`;
|
|
518
529
|
export {
|
|
519
530
|
e as default
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
background-color: $pure-black;
|
|
9
9
|
border: 1px solid transparent;
|
|
10
|
-
border-radius:
|
|
10
|
+
border-radius: $radius-3xl;
|
|
11
11
|
color: $pure-white;
|
|
12
12
|
cursor: pointer;
|
|
13
13
|
display: inline-flex;
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
z-index: 0;
|
|
72
72
|
|
|
73
73
|
&::before {
|
|
74
|
-
border-radius:
|
|
74
|
+
border-radius: $radius-3xl;
|
|
75
75
|
box-sizing: border-box;
|
|
76
76
|
content: '';
|
|
77
77
|
display: inline-block;
|
|
@@ -166,7 +166,6 @@
|
|
|
166
166
|
|
|
167
167
|
&:focus-visible {
|
|
168
168
|
background-color: $pure-white;
|
|
169
|
-
border-radius: 0;
|
|
170
169
|
outline-color: $soft-black;
|
|
171
170
|
outline-offset: 4.5px;
|
|
172
171
|
padding: 0 4px;
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
&__icon {
|
|
42
42
|
background-color: $pure-white;
|
|
43
|
-
border-radius:
|
|
43
|
+
border-radius: $radius-3xl;
|
|
44
44
|
display: flex;
|
|
45
45
|
flex-wrap: wrap;
|
|
46
46
|
height: 3.25rem;
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
width: 10px;
|
|
162
162
|
|
|
163
163
|
&:focus-visible {
|
|
164
|
-
border-radius:
|
|
164
|
+
border-radius: $radius-3xl;
|
|
165
165
|
outline: 0.5px solid $black-100;
|
|
166
166
|
|
|
167
167
|
&-dot {
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
|
|
176
176
|
&-dot {
|
|
177
177
|
background-color: $grey-50;
|
|
178
|
-
border-radius:
|
|
178
|
+
border-radius: $radius-3xl;
|
|
179
179
|
outline-color: $grey-50;
|
|
180
180
|
|
|
181
181
|
&--md {
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
accent-color: $black-100;
|
|
29
29
|
border: 1px solid $black-100;
|
|
30
|
-
border-radius:
|
|
30
|
+
border-radius: $radius-xs;
|
|
31
31
|
font-variation-settings: 'wght' 600;
|
|
32
32
|
outline: none;
|
|
33
33
|
padding: $padding-xsm;
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
animation: fade-in 150ms ease-out;
|
|
118
118
|
background-color: $white-100;
|
|
119
119
|
border: 1px solid $grey-50;
|
|
120
|
-
border-radius:
|
|
120
|
+
border-radius: $radius-xs;
|
|
121
121
|
box-shadow: 0 5px 15px rgba($pure-black, 0.1);
|
|
122
122
|
margin-top: 4px;
|
|
123
123
|
max-height: 300px;
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
&__close {
|
|
29
29
|
align-items: center;
|
|
30
|
-
border-radius:
|
|
30
|
+
border-radius: $radius-3xl;
|
|
31
31
|
color: $pure-black;
|
|
32
32
|
display: inline-flex;
|
|
33
33
|
justify-content: center;
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
// Bottom sheet modifier
|
|
48
48
|
&--bottom {
|
|
49
|
-
border-radius:
|
|
49
|
+
border-radius: $radius-md $radius-md 0 0;
|
|
50
50
|
box-shadow: 0 -2px 16px rgba($pure-black, 0.08);
|
|
51
51
|
height: auto;
|
|
52
52
|
inset: auto 0 0;
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
&--secondary,
|
|
76
76
|
&--tertiary.#{$px}-icon-button {
|
|
77
77
|
&:focus-visible {
|
|
78
|
-
border-radius:
|
|
78
|
+
border-radius: $radius-3xl;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
& > svg {
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
|
|
92
92
|
&--tertiary {
|
|
93
93
|
&:focus-visible {
|
|
94
|
-
border-radius:
|
|
94
|
+
border-radius: $radius-3xl;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
&:hover {
|
|
@@ -33,7 +33,7 @@ $lg: #{$px}-input--lg;
|
|
|
33
33
|
accent-color: $black-100;
|
|
34
34
|
align-items: center;
|
|
35
35
|
border: 1px solid $black-100;
|
|
36
|
-
border-radius:
|
|
36
|
+
border-radius: $radius-xs;
|
|
37
37
|
display: inline-flex;
|
|
38
38
|
font-variation-settings: 'wght' 600;
|
|
39
39
|
justify-content: space-between;
|
|
@@ -76,7 +76,7 @@ $lg: #{$px}-input--lg;
|
|
|
76
76
|
|
|
77
77
|
accent-color: $black-100;
|
|
78
78
|
border: 1px solid $black-100;
|
|
79
|
-
border-radius:
|
|
79
|
+
border-radius: $radius-xs;
|
|
80
80
|
font-variation-settings: 'wght' 600;
|
|
81
81
|
margin-bottom: 0.25rem;
|
|
82
82
|
padding: $padding-xsm;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
.#{$px}-tag {
|
|
16
16
|
border: 1px solid $black-100;
|
|
17
|
-
border-radius:
|
|
17
|
+
border-radius: $radius-2xl;
|
|
18
18
|
gap: $spacing-micro;
|
|
19
19
|
padding: $spacing-micro $spacing-xsm $spacing-micro $spacing-sm;
|
|
20
20
|
transition: border-color 0.25s;
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
|
|
92
92
|
&:focus-visible {
|
|
93
93
|
border-color: $black-100;
|
|
94
|
-
border-radius:
|
|
94
|
+
border-radius: $radius-2xl;
|
|
95
95
|
border-style: solid;
|
|
96
96
|
border-width: 1px;
|
|
97
97
|
outline-color: transparent;
|
|
@@ -30,7 +30,7 @@ $lg: #{$px}-input--lg;
|
|
|
30
30
|
|
|
31
31
|
&::before {
|
|
32
32
|
background-color: rgba($pure-black, 0.4);
|
|
33
|
-
border-radius:
|
|
33
|
+
border-radius: $radius-md;
|
|
34
34
|
height: 1rem;
|
|
35
35
|
left: 0;
|
|
36
36
|
transition:
|
|
@@ -42,7 +42,7 @@ $lg: #{$px}-input--lg;
|
|
|
42
42
|
&::after {
|
|
43
43
|
// background-color: transparent;
|
|
44
44
|
background: $white linear-gradient(transparent, rgba($pure-black, 0.05));
|
|
45
|
-
border-radius:
|
|
45
|
+
border-radius: $radius-3xl;
|
|
46
46
|
box-shadow:
|
|
47
47
|
0 1px 2px 0 rgba($pure-black, 0.15),
|
|
48
48
|
0 0 0 1px rgba($pure-black, 0.15) inset;
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
align-items: center;
|
|
51
51
|
align-self: normal;
|
|
52
52
|
background-position: center;
|
|
53
|
-
border-radius:
|
|
53
|
+
border-radius: $radius-3xl;
|
|
54
54
|
display: flex;
|
|
55
55
|
height: 2.5rem;
|
|
56
56
|
justify-content: center;
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
|
|
157
157
|
&-circle {
|
|
158
158
|
border: 2px solid $dark-gray;
|
|
159
|
-
border-radius:
|
|
159
|
+
border-radius: $radius-3xl;
|
|
160
160
|
height: 1.5rem;
|
|
161
161
|
justify-content: flex-start;
|
|
162
162
|
width: 1.5rem;
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
&--filter {
|
|
13
|
-
border-radius:
|
|
13
|
+
border-radius: $radius-sm;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
&--count {
|
|
17
17
|
background: $pure-black;
|
|
18
18
|
border: 2px solid $white-100;
|
|
19
|
-
border-radius:
|
|
19
|
+
border-radius: $radius-3xl;
|
|
20
20
|
color: $white-100;
|
|
21
21
|
display: inline-block;
|
|
22
22
|
font-size: var(--label-size3);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
.#{$px}-filter-dropdown-menu {
|
|
4
4
|
background: $white-100;
|
|
5
|
-
border-radius: $
|
|
5
|
+
border-radius: $radius-sm;
|
|
6
6
|
box-shadow: 0 4px 6px $medium-gray;
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-direction: column;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
&--mobile {
|
|
108
|
-
border-radius: $
|
|
108
|
+
border-radius: $radius-sm $radius-sm 0 0;
|
|
109
109
|
box-shadow: none;
|
|
110
110
|
padding: 0;
|
|
111
111
|
width: 100vw;
|