-
Notifications
You must be signed in to change notification settings - Fork 37
/
styles.styl
130 lines (110 loc) · 2.97 KB
/
styles.styl
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
@require 'settings/breakpoints.styl'
constants=json('constants.json', { hash: true })
$iconSize = constants['iconSize']
$iconPadding = constants['iconPadding']
$mobileIconSize = constants['mobileIconSize']
$mobileIconPadding = constants['mobileIconPadding']
$color = constants['color'] // hard-coded color, because the component is currently only used in the Home
.SquareAppIcon-wrapper
box-sizing border-box
background-color var(--paperBackgroundColor)
border-radius rem(12)
height $iconSize
width $iconSize
transition transform 300ms, border-radius 300ms
+small-screen()
height $mobileIconSize
width $mobileIconSize
.SquareAppIcon-icon-container
display flex
align-items center
justify-content center
padding $iconPadding
border-radius rem(12)
width 100%
+small-screen()
padding $mobileIconPadding
svg, img
width 100%
.SquareAppIcon-wrapper-ghost
.SquareAppIcon-icon-container
mix-blend-mode screen
svg, img
filter saturate(0%)
.SquareAppIcon-icon-container-normal
mix-blend-mode luminosity
svg, img
opacity .5
.SquareAppIcon-wrapper-maintenance
.SquareAppIcon-icon-container
mix-blend-mode luminosity
svg, img
opacity .5
.SquareAppIcon-wrapper-loading
border-radius 50%
transform scale(0.875)
+small-screen()
transform scale(0.8334)
.SquareAppIcon-spinner
margin 0 !important
svg
position absolute
height 100%
width 100%
animation-duration = 1.50s
icon-duration = 0.2s
icon-start = 0.2s
border-radius-start = 50%
border-radius-end = rem(12)
opacity-start = 0
opacity-end = 1
.onEnd
align-items center
border-radius border-radius-start
display flex
height 100%
opacity opacity-start
position absolute
width 100%
z-index 1
svg
fill transparent !important
path
animation-duration icon-duration !important
path:first-of-type
animation-delay icon-start !important
// The second path is a part of the cross,
// since it has its own hardcoded animation delay we need to add it again (.16s)
path+path
animation-delay icon-start + .16s !important
*
stroke var(--white) !important
.onEnd.isFailed
--animationColor var(--errorColor)
.onEnd.isSuccess
--animationColor var(--successColor)
.isSuccess
.isFailed
animation end-animation animation-duration forwards
@keyframes end-animation {
0% {
background-color transparent
border-radius border-radius-start
opacity opacity-start
}
13.33% {
background-color var(--animationColor)
border-radius border-radius-end
opacity opacity-end
}
66.67% {
background-color var(--animationColor)
border-radius border-radius-end
opacity opacity-end
}
100% {
border-radius border-radius-end
opacity opacity-start
background-color transparent
}
}