styleguide-export/src/sass/components/loader.scss at master · csseditor/styleguide-export · GitHub

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
89
90
91
92
//
// Loading spinner
// -------------------------

// Variables
// -------------------------

$loader-xl: 22px;
$loader-l: 14px;
$loader-m: 14px;
$loader-s: 8px;

// Loader
// -------------------------

.is-loading:after {
    @extend .transitionDuration-m;
    @extend .transitionProperty-opacity;
    @extend .transitionTimingFunction-ease-in-out;
}

.is-loading:after {
    @extend .display-block;
    @extend .absolutelyCenter;

    @extend .borderStyle-solid;
    @extend .borderColor-silver;
    @extend .borderRadius-circle;
    @extend .borderColor-silver;
    @extend .borderRightColor-transparent;

    @extend .animation-spin;
    content: "";
}

// Loader colours
// -------------------------

.is-loading--white:after {
    @extend .borderColor-white;
    @extend .borderRightColor-transparent;
}

.is-loading--smoke:after {
    @extend .borderColor-smoke;
    @extend .borderRightColor-transparent;
}

.is-loading--smoke--d:after {
    @extend .borderColor-smoke--d;
    @extend .borderRightColor-transparent;
}

.is-loading--silver:after {
    @extend .borderColor-silver;
    @extend .borderRightColor-transparent;
}

// Loader sizes
// -------------------------

.is-loading--xl:after {
    width: $loader-xl;
    height: $loader-xl;
    border-width: 2px;
    margin-top: -($loader-xl / 2);
    margin-left: -($loader-xl / 2);
}

.is-loading--l:after {
    width: $loader-l;
    height: $loader-l;
    border-width: 2px;
    margin-top: -($loader-l / 2);
    margin-left: -($loader-l / 2);
}

.is-loading--m:after {
    width: $loader-m;
    height: $loader-m;
    border-width: 2px;
    margin-top: -($loader-m / 2);
    margin-left: -($loader-m / 2);
}

.is-loading--s:after {
    width: $loader-s;
    height: $loader-s;
    border-width: 1px;
    margin-top: -($loader-s / 2);
    margin-left: -($loader-s / 2);
}