/
_skeletons.scss
88 lines (66 loc) · 2.74 KB
/
_skeletons.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
@import "../../theme/variables";
// ---------------------------------------------------------------------------------------------------------------------
// Global Skeleton Definitions
// ---------------------------------------------------------------------------------------------------------------------
@import "../../components/atoms/ac-input-base/ac-input-base.skeleton";
@import "../../components/atoms/ac-navdrawer/ac-navdrawer.skeleton";
@import "../../components/atoms/ac-gauge/ac-gauge.skeleton";
@import "../../components/molecules/ac-select/ac-select.skeleton";
@import "../../components/molecules/ac-input/ac-input.skeleton";
@import "../../components/molecules/ac-tabs/ac-tabs.skeleton";
@import "../../components/molecules/ac-tabs/ac-tab/ac-tab.skeleton";
@import "../../components/templates/ac-layout/ac-layout.skeleton";
// ---------------------------------------------------------------------------------------------------------------------
// Global Utils
// ---------------------------------------------------------------------------------------------------------------------
@keyframes skeleton-background {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
// Default Text Skeleton.
// Can be used in div, uses display: block.
// ---------------------------------------------------------
.ac-skeleton .ac-skeleton--text {
@include cover-text-with-pseudo-skeleton();
}
// Default Inline Text Skeleton.
// Can be used in span, uses display: inline.
// ---------------------------------------------------------
.ac-skeleton .ac-skeleton--text--inline {
@include cover-text-with-pseudo-skeleton();
display: inline-flex;
position: relative;
width: calc(1em * 10);
}
// Circle Shape Skeleton
// ---------------------------------------------------------
.ac-skeleton .ac-skeleton--circle {
@include skeleton-background(skeleton-background);
border-radius: 100%;
color: transparent;
* {
display: none;
}
}
// Skeleton Background Only
// ---------------------------------------------------------
.ac-skeleton .ac-skeleton--bg {
@include skeleton-background(skeleton-background);
color: transparent;
* {
display: none;
}
}
// ---------------------------------------------------------------------------------------------------------------------
// Text Defaults
// ---------------------------------------------------------------------------------------------------------------------
@include create-skeleton-for-text(h1, $font-huge);
@include create-skeleton-for-text(h2, $font-large);
@include create-skeleton-for-text(h3, $font-medium);
@include create-skeleton-for-text(h4, $font-small);
@include create-skeleton-for-text(h5, $font-tiny);
@include create-skeleton-for-text(h6, $font-tiny);