@odx/ui 5.2.4 → 5.2.5
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/CHANGELOG.md +7 -0
- package/core-theme.css +1 -1
- package/package.json +1 -1
- package/scss/_breakpoints.scss +58 -0
- package/scss/abstract/_breakpoints.scss +58 -0
- package/scss/card.component.scss +10 -5
- package/scss/components/card.component.scss +10 -5
package/package.json
CHANGED
package/scss/_breakpoints.scss
CHANGED
|
@@ -69,6 +69,64 @@ $breakpoints: (
|
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
+
@mixin container-up($root: null, $breakpoint) {
|
|
73
|
+
$min: _get-min-value($breakpoint);
|
|
74
|
+
|
|
75
|
+
@if $min {
|
|
76
|
+
@if $root {
|
|
77
|
+
@container #{$root} (width >= #{$min}) {
|
|
78
|
+
@content;
|
|
79
|
+
}
|
|
80
|
+
} @else {
|
|
81
|
+
@container (width >= #{$min}) {
|
|
82
|
+
@content;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
} @else {
|
|
86
|
+
@content;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@mixin container-down($root: null, $breakpoint) {
|
|
91
|
+
$max: _get-max-value($breakpoint);
|
|
92
|
+
|
|
93
|
+
@if $max {
|
|
94
|
+
@if $root {
|
|
95
|
+
@container #{$root} (width < #{$max}) {
|
|
96
|
+
@content;
|
|
97
|
+
}
|
|
98
|
+
} @else {
|
|
99
|
+
@container (width < #{$max}) {
|
|
100
|
+
@content;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
} @else {
|
|
104
|
+
@content;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@mixin container-only($root: null, $breakpoint) {
|
|
109
|
+
$min: _get-min-value($breakpoint);
|
|
110
|
+
$next: _get-next-value($breakpoint);
|
|
111
|
+
$max: _get-max-value($breakpoint);
|
|
112
|
+
|
|
113
|
+
@if $min != null and $max != null {
|
|
114
|
+
@if $root {
|
|
115
|
+
@container #{$root} (width >= #{$min}) and (width < #{$max}) {
|
|
116
|
+
@content;
|
|
117
|
+
}
|
|
118
|
+
} @else {
|
|
119
|
+
@container (width >= #{$min}) and (width < #{$max}) {
|
|
120
|
+
@content;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
} @else if $max == null {
|
|
124
|
+
@include container-up($root, $breakpoint) {
|
|
125
|
+
@content;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
72
130
|
@mixin only($breakpoint) {
|
|
73
131
|
$min: _get-min-value($breakpoint);
|
|
74
132
|
$next: _get-next-value($breakpoint);
|
|
@@ -69,6 +69,64 @@ $breakpoints: (
|
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
+
@mixin container-up($root: null, $breakpoint) {
|
|
73
|
+
$min: _get-min-value($breakpoint);
|
|
74
|
+
|
|
75
|
+
@if $min {
|
|
76
|
+
@if $root {
|
|
77
|
+
@container #{$root} (width >= #{$min}) {
|
|
78
|
+
@content;
|
|
79
|
+
}
|
|
80
|
+
} @else {
|
|
81
|
+
@container (width >= #{$min}) {
|
|
82
|
+
@content;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
} @else {
|
|
86
|
+
@content;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@mixin container-down($root: null, $breakpoint) {
|
|
91
|
+
$max: _get-max-value($breakpoint);
|
|
92
|
+
|
|
93
|
+
@if $max {
|
|
94
|
+
@if $root {
|
|
95
|
+
@container #{$root} (width < #{$max}) {
|
|
96
|
+
@content;
|
|
97
|
+
}
|
|
98
|
+
} @else {
|
|
99
|
+
@container (width < #{$max}) {
|
|
100
|
+
@content;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
} @else {
|
|
104
|
+
@content;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@mixin container-only($root: null, $breakpoint) {
|
|
109
|
+
$min: _get-min-value($breakpoint);
|
|
110
|
+
$next: _get-next-value($breakpoint);
|
|
111
|
+
$max: _get-max-value($breakpoint);
|
|
112
|
+
|
|
113
|
+
@if $min != null and $max != null {
|
|
114
|
+
@if $root {
|
|
115
|
+
@container #{$root} (width >= #{$min}) and (width < #{$max}) {
|
|
116
|
+
@content;
|
|
117
|
+
}
|
|
118
|
+
} @else {
|
|
119
|
+
@container (width >= #{$min}) and (width < #{$max}) {
|
|
120
|
+
@content;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
} @else if $max == null {
|
|
124
|
+
@include container-up($root, $breakpoint) {
|
|
125
|
+
@content;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
72
130
|
@mixin only($breakpoint) {
|
|
73
131
|
$min: _get-min-value($breakpoint);
|
|
74
132
|
$next: _get-next-value($breakpoint);
|
package/scss/card.component.scss
CHANGED
|
@@ -18,23 +18,24 @@
|
|
|
18
18
|
|
|
19
19
|
.odx-card {
|
|
20
20
|
$root: &;
|
|
21
|
+
$main-padding: var(--odx-card-main-padding);
|
|
21
22
|
|
|
22
23
|
--odx-card-main-padding: #{dimensions.get-size(math.div(12, 24))};
|
|
23
24
|
--odx-card-gap: #{dimensions.get-size(math.div(12, 24))};
|
|
24
25
|
|
|
25
|
-
$main-padding: var(--odx-card-main-padding);
|
|
26
|
-
|
|
27
|
-
@include motion.transition(box-shadow color border-color);
|
|
28
|
-
@include utils.interactive();
|
|
29
|
-
|
|
30
26
|
background-color: var(--odx-c-background-content);
|
|
31
27
|
behavior: button;
|
|
32
28
|
border: var(--odx-v-outline-width-bold) solid transparent;
|
|
33
29
|
border-radius: var(--odx-v-border-radius);
|
|
30
|
+
container-name: card-root;
|
|
31
|
+
container-type: inline-size;
|
|
34
32
|
display: block;
|
|
35
33
|
padding: $main-padding;
|
|
36
34
|
position: relative;
|
|
37
35
|
|
|
36
|
+
@include motion.transition(box-shadow color border-color);
|
|
37
|
+
@include utils.interactive();
|
|
38
|
+
|
|
38
39
|
&--image-card {
|
|
39
40
|
--odx-card-main-padding: #{dimensions.get-size(1)};
|
|
40
41
|
|
|
@@ -134,6 +135,10 @@
|
|
|
134
135
|
|
|
135
136
|
font-size: dimensions.get-size(math.div(25, 24));
|
|
136
137
|
}
|
|
138
|
+
|
|
139
|
+
@include breakpoints.container-down(card-root, phone) {
|
|
140
|
+
margin-inline-end: dimensions.get-size(math.div(36, 24));
|
|
141
|
+
}
|
|
137
142
|
}
|
|
138
143
|
}
|
|
139
144
|
|
|
@@ -18,23 +18,24 @@
|
|
|
18
18
|
|
|
19
19
|
.odx-card {
|
|
20
20
|
$root: &;
|
|
21
|
+
$main-padding: var(--odx-card-main-padding);
|
|
21
22
|
|
|
22
23
|
--odx-card-main-padding: #{dimensions.get-size(math.div(12, 24))};
|
|
23
24
|
--odx-card-gap: #{dimensions.get-size(math.div(12, 24))};
|
|
24
25
|
|
|
25
|
-
$main-padding: var(--odx-card-main-padding);
|
|
26
|
-
|
|
27
|
-
@include motion.transition(box-shadow color border-color);
|
|
28
|
-
@include utils.interactive();
|
|
29
|
-
|
|
30
26
|
background-color: var(--odx-c-background-content);
|
|
31
27
|
behavior: button;
|
|
32
28
|
border: var(--odx-v-outline-width-bold) solid transparent;
|
|
33
29
|
border-radius: var(--odx-v-border-radius);
|
|
30
|
+
container-name: card-root;
|
|
31
|
+
container-type: inline-size;
|
|
34
32
|
display: block;
|
|
35
33
|
padding: $main-padding;
|
|
36
34
|
position: relative;
|
|
37
35
|
|
|
36
|
+
@include motion.transition(box-shadow color border-color);
|
|
37
|
+
@include utils.interactive();
|
|
38
|
+
|
|
38
39
|
&--image-card {
|
|
39
40
|
--odx-card-main-padding: #{dimensions.get-size(1)};
|
|
40
41
|
|
|
@@ -134,6 +135,10 @@
|
|
|
134
135
|
|
|
135
136
|
font-size: dimensions.get-size(math.div(25, 24));
|
|
136
137
|
}
|
|
138
|
+
|
|
139
|
+
@include breakpoints.container-down(card-root, phone) {
|
|
140
|
+
margin-inline-end: dimensions.get-size(math.div(36, 24));
|
|
141
|
+
}
|
|
137
142
|
}
|
|
138
143
|
}
|
|
139
144
|
|