@lucca-front/scss 16.4.0-rc.2 → 16.4.0-rc.4
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/lucca-front.min.css +1 -1
- package/package.json +2 -2
- package/src/components/index.scss +1 -0
- package/src/components/skeleton/component.scss +17 -0
- package/src/components/skeleton/exports.scss +4 -0
- package/src/components/skeleton/index.scss +26 -0
- package/src/components/skeleton/mods.scss +27 -0
- package/src/components/skeleton/states.scss +84 -0
- package/src/components/skeleton/vars.scss +8 -0
- package/src/components/textField/exports.scss +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lucca-front/scss",
|
|
3
|
-
"version": "16.4.0-rc.
|
|
3
|
+
"version": "16.4.0-rc.4",
|
|
4
4
|
"description": "A Sass framework for Lucca products.",
|
|
5
5
|
"main": "src/main.scss",
|
|
6
6
|
"scripts": {},
|
|
@@ -23,6 +23,6 @@
|
|
|
23
23
|
"normalize.css": "^8.0.0"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@lucca-front/icons": "v16.4.0-rc.
|
|
26
|
+
"@lucca-front/icons": "v16.4.0-rc.4"
|
|
27
27
|
}
|
|
28
28
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@mixin component($atRoot: 'without: rule') {
|
|
2
|
+
@at-root ($atRoot) {
|
|
3
|
+
.skeleton-item {
|
|
4
|
+
animation: skeletonFade var(--commons-animations-durations-fast) ease-in 1 forwards;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
// fades content in on load
|
|
9
|
+
@keyframes skeletonFade {
|
|
10
|
+
0% {
|
|
11
|
+
opacity: 0;
|
|
12
|
+
}
|
|
13
|
+
100% {
|
|
14
|
+
opacity: 1;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@use 'exports' as *;
|
|
2
|
+
|
|
3
|
+
.skeleton {
|
|
4
|
+
@include vars;
|
|
5
|
+
@include component;
|
|
6
|
+
// .mod-dark can be applied to .skeleton or .skeleton-item
|
|
7
|
+
&.mod-dark {
|
|
8
|
+
@include dark;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&.is-loading {
|
|
12
|
+
@include loading;
|
|
13
|
+
.skeleton-item {
|
|
14
|
+
// .mod-dark can be applied to .skeleton or .skeleton-item
|
|
15
|
+
&.mod-dark {
|
|
16
|
+
@include dark;
|
|
17
|
+
}
|
|
18
|
+
&.mod-square {
|
|
19
|
+
@include square;
|
|
20
|
+
}
|
|
21
|
+
&.mod-circle {
|
|
22
|
+
@include circle;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@mixin dark {
|
|
2
|
+
--components-skeleton-gradient-step-one: var(--palettes-grey-200);
|
|
3
|
+
--components-skeleton-gradient-step-two: var(--palettes-grey-500);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@mixin skeletonShapeSizing($spacings...) {
|
|
7
|
+
@each $spacing in $spacings {
|
|
8
|
+
&.mod-#{$spacing} {
|
|
9
|
+
--components-skeleton-shape-height: var(--spacings-#{$spacing});
|
|
10
|
+
--components-skeleton-shape-width: var(--spacings-#{$spacing});
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@mixin square {
|
|
16
|
+
@include skeletonShapeSizing('XS', 'S', 'L', 'XL', 'XXL');
|
|
17
|
+
border-radius: var(--commons-borderRadius-M);
|
|
18
|
+
height: var(--components-skeleton-shape-height);
|
|
19
|
+
width: var(--components-skeleton-shape-width);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@mixin circle {
|
|
23
|
+
@include skeletonShapeSizing('XS', 'S', 'L', 'XL', 'XXL');
|
|
24
|
+
border-radius: 50%;
|
|
25
|
+
height: var(--components-skeleton-shape-height);
|
|
26
|
+
width: var(--components-skeleton-shape-width);
|
|
27
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
@mixin skeletonTextSizing($sizes...) {
|
|
2
|
+
@each $size in $sizes {
|
|
3
|
+
&.u-text#{$size} {
|
|
4
|
+
@if ($size == 'XS') {
|
|
5
|
+
--components-skeleton-text-offset: 0.25rem;
|
|
6
|
+
}
|
|
7
|
+
@if ($size == 'S' or $size == 'L') {
|
|
8
|
+
--components-skeleton-text-offset: 0.375rem;
|
|
9
|
+
}
|
|
10
|
+
@if ($size == 'XXL') {
|
|
11
|
+
--components-skeleton-text-offset: 0.5rem;
|
|
12
|
+
}
|
|
13
|
+
height: var(--sizes-#{$size}-lineHeight);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@mixin skeletonTitleSizing($titles...) {
|
|
19
|
+
@each $title in $titles {
|
|
20
|
+
&:is(.u-#{$title}, #{$title}) {
|
|
21
|
+
height: auto;
|
|
22
|
+
line-height: var(--sizes-lineHeight);
|
|
23
|
+
min-height: var(--sizes-lineHeight);
|
|
24
|
+
@if ($title == 'h1') {
|
|
25
|
+
--components-skeleton-text-offset: 0.5rem;
|
|
26
|
+
}
|
|
27
|
+
@if ($title == 'h2' or $title == 'h3' or $title == 'h4' or $title == 'h5') {
|
|
28
|
+
--components-skeleton-text-offset: 0.375rem;
|
|
29
|
+
}
|
|
30
|
+
@if ($title == 'h6') {
|
|
31
|
+
--components-skeleton-text-offset: 0.25rem;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin loading {
|
|
38
|
+
animation: skeletonPulse 1.5s infinite ease-in-out;
|
|
39
|
+
.skeleton-item {
|
|
40
|
+
animation: skeletonBackground 1.5s infinite linear;
|
|
41
|
+
background: linear-gradient(
|
|
42
|
+
90deg,
|
|
43
|
+
var(--components-skeleton-gradient-step-one, var(--palettes-grey-50)),
|
|
44
|
+
var(--components-skeleton-gradient-step-two, var(--palettes-grey-200)),
|
|
45
|
+
var(--components-skeleton-gradient-step-one, var(--palettes-grey-50))
|
|
46
|
+
);
|
|
47
|
+
background-size: 150% 100%;
|
|
48
|
+
background-repeat: repeat-x;
|
|
49
|
+
display: block;
|
|
50
|
+
&:not(.mod-square, .mod-circle) {
|
|
51
|
+
@include skeletonTextSizing('XS', 'S', 'L', 'XL', 'XXL');
|
|
52
|
+
@include skeletonTitleSizing('h1', 'h2', 'h3', 'h4', 'h5', 'h6');
|
|
53
|
+
clip-path: inset(
|
|
54
|
+
calc(var(--components-skeleton-text-offset) + 1px) calc(100% - var(--components-skeleton-text-width, 100%))
|
|
55
|
+
calc(var(--components-skeleton-text-offset) - 1px) 0 round var(--commons-borderRadius-L)
|
|
56
|
+
);
|
|
57
|
+
height: var(--sizes-M-lineHeight);
|
|
58
|
+
width: 100%;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// background gradient animation
|
|
63
|
+
@keyframes skeletonBackground {
|
|
64
|
+
0% {
|
|
65
|
+
background-position: 150% 50%;
|
|
66
|
+
}
|
|
67
|
+
100% {
|
|
68
|
+
background-position: -150% 50%;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// pulse animation
|
|
73
|
+
@keyframes skeletonPulse {
|
|
74
|
+
0% {
|
|
75
|
+
opacity: 0.9;
|
|
76
|
+
}
|
|
77
|
+
50% {
|
|
78
|
+
opacity: 1;
|
|
79
|
+
}
|
|
80
|
+
100% {
|
|
81
|
+
opacity: 0.9;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
@mixin vars {
|
|
2
|
+
--components-skeleton-gradient-step-one: var(--palettes-grey-50);
|
|
3
|
+
--components-skeleton-gradient-step-two: var(--palettes-grey-200);
|
|
4
|
+
--components-skeleton-shape-height: var(--spacings-M);
|
|
5
|
+
--components-skeleton-shape-width: var(--spacings-M);
|
|
6
|
+
--components-skeleton-text-offset: 0.375rem;
|
|
7
|
+
--components-skeleton-text-width: 100%;
|
|
8
|
+
}
|