@umbraco-ui/uui-card 1.10.0 → 1.12.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/custom-elements.json +1 -0
- package/lib/index.js +90 -34
- package/lib/uui-card.element.d.ts +1 -0
- package/package.json +3 -3
package/custom-elements.json
CHANGED
package/lib/index.js
CHANGED
|
@@ -60,24 +60,18 @@ UUICardElement.styles = [
|
|
|
60
60
|
transition: box-shadow 100ms ease-out;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
:host(
|
|
64
|
-
/* TODO: implement globally shared outline style */
|
|
63
|
+
:host([selectable]:focus-visible) {
|
|
65
64
|
outline-color: var(--uui-color-focus,#3879ff);
|
|
66
|
-
outline-
|
|
65
|
+
outline-width: var(--uui-card-border-width);
|
|
66
|
+
outline-style: solid;
|
|
67
|
+
outline-offset: var(--uui-card-border-width);
|
|
67
68
|
}
|
|
68
69
|
|
|
69
|
-
:host(
|
|
70
|
+
:host() * {
|
|
70
71
|
/* TODO: implement globally shared outline style */
|
|
71
72
|
outline-color: var(--uui-color-focus,#3879ff);
|
|
72
73
|
}
|
|
73
74
|
|
|
74
|
-
:host(:focus) {
|
|
75
|
-
outline-color: var(--uui-color-focus,#3879ff);
|
|
76
|
-
outline-width: var(--uui-card-border-width);
|
|
77
|
-
outline-style: solid;
|
|
78
|
-
outline-offset: var(--uui-card-border-width);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
75
|
:host([error])::before {
|
|
82
76
|
content: '';
|
|
83
77
|
position: absolute;
|
|
@@ -91,48 +85,110 @@ UUICardElement.styles = [
|
|
|
91
85
|
border-radius: var(--uui-border-radius,3px);
|
|
92
86
|
}
|
|
93
87
|
|
|
94
|
-
|
|
95
|
-
|
|
88
|
+
button {
|
|
89
|
+
font-size: inherit;
|
|
90
|
+
font-family: inherit;
|
|
91
|
+
border: 0;
|
|
92
|
+
padding: 0;
|
|
93
|
+
background-color: transparent;
|
|
94
|
+
text-align: left;
|
|
95
|
+
color: var(--uui-color-text,#060606);
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
color:
|
|
98
|
+
a {
|
|
99
|
+
text-decoration: none;
|
|
100
|
+
color: inherit;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
:
|
|
104
|
-
|
|
103
|
+
button:focus,
|
|
104
|
+
a:focus {
|
|
105
|
+
outline-color: var(--uui-color-focus,#3879ff);
|
|
106
|
+
outline-width: var(--uui-card-border-width);
|
|
107
|
+
outline-style: solid;
|
|
108
|
+
outline-offset: var(--uui-card-border-width);
|
|
109
|
+
border-radius: var(--uui-border-radius,3px);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
:host([selectable]) {
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
}
|
|
115
|
+
:host([selectable]) #select-border {
|
|
105
116
|
position: absolute;
|
|
117
|
+
z-index: 2;
|
|
118
|
+
top: -2px;
|
|
119
|
+
left: -2px;
|
|
120
|
+
right: -2px;
|
|
121
|
+
bottom: -2px;
|
|
106
122
|
pointer-events: none;
|
|
107
|
-
inset: calc(var(--uui-card-border-width) * -1);
|
|
108
|
-
width: calc(100% + calc(var(--uui-card-border-width) * 2));
|
|
109
|
-
height: calc(100% + calc(var(--uui-card-border-width) * 2));
|
|
110
|
-
box-sizing: border-box;
|
|
111
|
-
border: var(--uui-card-border-width) solid var(--uui-color-selected,#3544b1);
|
|
112
|
-
border-radius: calc(
|
|
113
|
-
var(--uui-border-radius,3px) + var(--uui-card-border-width)
|
|
114
|
-
);
|
|
115
|
-
transition: opacity 100ms ease-out;
|
|
116
123
|
opacity: 0;
|
|
124
|
+
transition: opacity 120ms;
|
|
125
|
+
}
|
|
126
|
+
:host([selectable]) #select-border::after {
|
|
127
|
+
content: '';
|
|
128
|
+
position: absolute;
|
|
129
|
+
width: 100%;
|
|
130
|
+
height: 100%;
|
|
131
|
+
box-sizing: border-box;
|
|
132
|
+
border: 2px solid var(--uui-color-selected,#3544b1);
|
|
133
|
+
border-radius: calc(var(--uui-border-radius,3px) + 2px);
|
|
134
|
+
box-shadow:
|
|
135
|
+
0 0 4px 0 var(--uui-color-selected,#3544b1),
|
|
136
|
+
inset 0 0 2px 0 var(--uui-color-selected,#3544b1);
|
|
137
|
+
}
|
|
138
|
+
:host([selected]) #select-border {
|
|
139
|
+
opacity: 1;
|
|
117
140
|
}
|
|
118
|
-
:host([selectable]:hover)
|
|
141
|
+
:host([selectable]:not([selected]):hover) #select-border {
|
|
119
142
|
opacity: 0.33;
|
|
120
143
|
}
|
|
121
|
-
:host([selectable][selected]:hover)
|
|
122
|
-
opacity: 0.
|
|
144
|
+
:host([selectable][selected]:hover) #select-border {
|
|
145
|
+
opacity: 0.8;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
:host([selectable]:not([selected])) #open-part:hover + #select-border {
|
|
149
|
+
opacity: 0;
|
|
123
150
|
}
|
|
124
|
-
:host([selectable][selected])
|
|
151
|
+
:host([selectable][selected]) #open-part:hover + #select-border {
|
|
125
152
|
opacity: 1;
|
|
126
153
|
}
|
|
127
154
|
|
|
155
|
+
:host([selectable]:not([selected]):hover) #select-border::after {
|
|
156
|
+
animation: not-selected--hover 1.2s infinite;
|
|
157
|
+
}
|
|
158
|
+
@keyframes not-selected--hover {
|
|
159
|
+
0%,
|
|
160
|
+
100% {
|
|
161
|
+
opacity: 0.66;
|
|
162
|
+
}
|
|
163
|
+
50% {
|
|
164
|
+
opacity: 1;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
:host([selectable][selected]:hover) #select-border::after {
|
|
169
|
+
animation: selected--hover 1.4s infinite;
|
|
170
|
+
}
|
|
171
|
+
@keyframes selected--hover {
|
|
172
|
+
0%,
|
|
173
|
+
100% {
|
|
174
|
+
opacity: 1;
|
|
175
|
+
}
|
|
176
|
+
50% {
|
|
177
|
+
opacity: 0.66;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
:host([selectable]) #open-part:hover + #select-border::after {
|
|
181
|
+
animation: none;
|
|
182
|
+
}
|
|
183
|
+
|
|
128
184
|
:host([select-only]) *,
|
|
129
185
|
:host([select-only]) ::slotted(*) {
|
|
130
186
|
pointer-events: none;
|
|
131
187
|
}
|
|
132
188
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
color:
|
|
189
|
+
:host([disabled]) {
|
|
190
|
+
background: var(--uui-color-disabled,#f3f3f5);
|
|
191
|
+
color: var(--uui-color-disabled-contrast,#c4c4c4);
|
|
136
192
|
}
|
|
137
193
|
`
|
|
138
194
|
];
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
declare const UUICardElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectOnlyMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectableMixinInterface) & typeof LitElement;
|
|
3
3
|
/**
|
|
4
|
+
* Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.
|
|
4
5
|
* @element uui-card
|
|
5
6
|
* @fires {UUICardEvent} open - fires when the card title is clicked.
|
|
6
7
|
* @description - Base card component to be extended by specific card elements.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui-card",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Umbraco",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"custom-elements.json"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@umbraco-ui/uui-base": "1.
|
|
33
|
+
"@umbraco-ui/uui-base": "1.12.0"
|
|
34
34
|
},
|
|
35
35
|
"scripts": {
|
|
36
36
|
"build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
43
|
"homepage": "https://uui.umbraco.com/?path=/story/uui-card",
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "0ac5219b2765bf6c90fe4943a6620b46a7fced4e"
|
|
45
45
|
}
|