@oardi/css-utils 0.83.0 → 0.85.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/package.json
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.avatar {
|
|
3
|
+
--avatar-size: 2.5rem;
|
|
4
|
+
--avatar-border-radius: 50%;
|
|
5
|
+
--avatar-bg-color: var(--bg-highlight);
|
|
6
|
+
--avatar-color: var(--text-color);
|
|
7
|
+
--avatar-border-width: 0;
|
|
8
|
+
--avatar-border-color: transparent;
|
|
9
|
+
--avatar-font-size: var(--font-size-sm);
|
|
10
|
+
--avatar-font-weight: 700;
|
|
11
|
+
--avatar-image-fit: cover;
|
|
12
|
+
--avatar-image-position: center;
|
|
13
|
+
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
flex-shrink: 0;
|
|
18
|
+
width: var(--avatar-size);
|
|
19
|
+
min-width: var(--avatar-size);
|
|
20
|
+
height: var(--avatar-size);
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
border: var(--avatar-border-width) solid var(--avatar-border-color);
|
|
23
|
+
border-radius: var(--avatar-border-radius);
|
|
24
|
+
background-color: var(--avatar-bg-color);
|
|
25
|
+
color: var(--avatar-color);
|
|
26
|
+
font-size: var(--avatar-font-size);
|
|
27
|
+
font-weight: var(--avatar-font-weight);
|
|
28
|
+
line-height: 1;
|
|
29
|
+
vertical-align: middle;
|
|
30
|
+
|
|
31
|
+
&:is(img) {
|
|
32
|
+
object-fit: var(--avatar-image-fit);
|
|
33
|
+
object-position: var(--avatar-image-position);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
& > img {
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
object-fit: var(--avatar-image-fit);
|
|
40
|
+
object-position: var(--avatar-image-position);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.avatar-square {
|
|
45
|
+
--avatar-border-radius: var(--border-radius);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.avatar-sm {
|
|
49
|
+
--avatar-size: 2rem;
|
|
50
|
+
--avatar-font-size: var(--font-size-xs);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.avatar-md {
|
|
54
|
+
--avatar-size: 2.5rem;
|
|
55
|
+
--avatar-font-size: var(--font-size-sm);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.avatar-lg {
|
|
59
|
+
--avatar-size: 3rem;
|
|
60
|
+
--avatar-font-size: var(--font-size-md);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.avatar-xl {
|
|
64
|
+
--avatar-size: 4rem;
|
|
65
|
+
--avatar-font-size: var(--font-size-lg);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -24,8 +24,6 @@
|
|
|
24
24
|
--expansion-panel-icon-closed: '+';
|
|
25
25
|
--expansion-panel-icon-open: '−';
|
|
26
26
|
|
|
27
|
-
--expansion-panel-content-max-height: 32rem;
|
|
28
|
-
|
|
29
27
|
--expansion-panel-focus-outline-width: var(--focus-outline-width);
|
|
30
28
|
--expansion-panel-focus-outline-style: var(--focus-outline-style);
|
|
31
29
|
--expansion-panel-focus-outline-color: var(--focus-outline-color);
|
|
@@ -110,7 +108,8 @@
|
|
|
110
108
|
}
|
|
111
109
|
|
|
112
110
|
.expansion-panel-content {
|
|
113
|
-
|
|
111
|
+
display: grid;
|
|
112
|
+
grid-template-rows: 0fr;
|
|
114
113
|
overflow: hidden;
|
|
115
114
|
opacity: 0;
|
|
116
115
|
background-color: var(--expansion-panel-content-bg-color);
|
|
@@ -118,16 +117,22 @@
|
|
|
118
117
|
border-end-end-radius: var(--expansion-panel-border-radius);
|
|
119
118
|
|
|
120
119
|
transition:
|
|
121
|
-
|
|
120
|
+
grid-template-rows var(--expansion-panel-content-transition-duration)
|
|
122
121
|
var(--expansion-panel-transition-easing),
|
|
123
122
|
opacity var(--expansion-panel-transition-duration)
|
|
124
123
|
var(--expansion-panel-transition-easing);
|
|
125
124
|
|
|
126
125
|
.expansion-panel-inner {
|
|
127
|
-
|
|
126
|
+
min-height: 0;
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
padding-block: 0;
|
|
129
|
+
padding-inline: var(--expansion-panel-inner-padding);
|
|
128
130
|
transform: translateY(-0.5rem);
|
|
129
|
-
transition:
|
|
130
|
-
var(--expansion-panel-transition-
|
|
131
|
+
transition:
|
|
132
|
+
padding-block var(--expansion-panel-content-transition-duration)
|
|
133
|
+
var(--expansion-panel-transition-easing),
|
|
134
|
+
transform var(--expansion-panel-content-transition-duration)
|
|
135
|
+
var(--expansion-panel-transition-easing);
|
|
131
136
|
}
|
|
132
137
|
}
|
|
133
138
|
|
|
@@ -137,10 +142,11 @@
|
|
|
137
142
|
}
|
|
138
143
|
|
|
139
144
|
.expansion-panel-content {
|
|
140
|
-
|
|
145
|
+
grid-template-rows: 1fr;
|
|
141
146
|
opacity: 1;
|
|
142
147
|
|
|
143
148
|
.expansion-panel-inner {
|
|
149
|
+
padding-block: var(--expansion-panel-inner-padding);
|
|
144
150
|
transform: translateY(0);
|
|
145
151
|
}
|
|
146
152
|
}
|
package/scss/index.scss
CHANGED