-
Notifications
You must be signed in to change notification settings - Fork 184
/
_spinners.scss
102 lines (89 loc) · 2.4 KB
/
_spinners.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/*
* Backpack - Skyscanner's Design System
*
* Copyright 2016 Skyscanner Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* stylelint-disable at-rule-disallowed-list */
@import 'tokens.scss';
@import './icons.scss';
@import './utils.scss';
@keyframes bpk-keyframe-spin {
100% {
transform: rotate(1turn);
}
}
/// Small spinner.
///
/// @param {key} $spinner - The key of the desired SVG datauri from the $bpk-spinners map.
///
/// @example scss
/// .selector {
/// @include bpk-spinner(spinner-sky-gray-tint-02);
/// }
@mixin bpk-spinner() {
width: bpk-spacing-base();
height: bpk-spacing-base();
animation: bpk-keyframe-spin 600ms linear infinite;
}
/// Large spinner. Modifies the bpk-spinner mixin.
///
/// @require {mixin} bpk-spinner
///
/// @example scss
/// .selector {
/// @include bpk-spinner(spinner-sky-gray-tint-02);
/// @include bpk-spinner--lg();
/// }
@mixin bpk-spinner--lg() {
width: bpk-spacing-lg();
height: bpk-spacing-lg();
}
/// Extra large spinner. Modifies the bpk-spinner mixin.
///
/// @require {mixin} bpk-spinner
///
/// @example scss
/// .selector {
/// @include bpk-spinner(spinner-sky-gray-tint-02);
/// @include bpk-spinner--xl();
/// }
@mixin bpk-spinner--xl() {
width: bpk-spacing-xl();
height: bpk-spacing-xl();
}
/// Align spinner to button. Modifies the bpk-spinner mixin.
///
/// @require {mixin} bpk-spinner
///
/// @example scss
/// .selector {
/// @include bpk-spinner();
/// @include bpk-icon--align-to-button();
/// }
@mixin bpk-spinner--align-to-button() {
vertical-align: baseline;
}
/// Align spinner to large button. Modifies the bpk-spinner mixin.
///
/// @require {mixin} bpk-spinner
///
/// @example scss
/// .selector {
/// @include bpk-spinner();
/// @include bpk-spinner--align-to-large-button();
/// }
@mixin bpk-spinner--align-to-large-button() {
@include bpk-icon-lg--align-to-large-button;
}