-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.sass
170 lines (148 loc) · 3.17 KB
/
app.sass
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
// BMO Colors
$Body: #63cdb7
$face: #d3ffe8
$Lines: #4a4a4a
$circle-button: #d05152
$circle-button-border: #9f3637
$plus-button: #fed847
$plus-button-border: #d8b532
$triangel-button: #2f9ddb
$triangle-button-border: #2484ba
$green-circle: #48fd6c
$green-circle-border: #32c54f
$screen-color: #d3ffe8
//style for the canvas
body
background: #eee
h1
font-family: helvetica
text-align: center
margin: 10px
.artboard
width: 800px
height: 600px
background: #F5FAFC
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2)
border-radius: 3px
margin: 50px auto
border: 20px white solid
position: relative
//BMO style code
.bmo-body
background: $Body
width: 600px
height: 500px
position: absolute
margin-left: 100px
margin-top: 50px
border-radius: 10px
.face
background: $face
width: 200px
height: 150px
margin-left: 190px
margin-top: 100px
border-radius: 10px
border: solid
border-color: #4a4a4a
border-width: 10px
// .face-shadow
.big-line
background: $Lines
height: 8px
width: 140px
border-radius: 10px
margin-left: 190px
margin-top: 20px
.sm-button
background: $Lines
height: 8px
width: 8px
border-radius: 20px
margin-left: 200px
margin-top: 20px
position: static
.plus-1-sd
background: $plus-button-border
height: 50px
width: 10px
border-radius: 20px
margin-left: 205px
margin-top: 20px
.plus-1
background: $plus-button
height: 46px
width: 8px
border-radius: 20px
margin-left: 2px
.plus-2-sd
background: $plus-button-border
height: 10px
width: 49px
border-radius: 20px
margin-left: 186px
margin-top: -29px
.plus-2
background: $plus-button
height: 10px
width: 45px
border-radius: 20px
margin-left: 4px
.sm-line-1
background: $Lines
height: 6px
width: 15px
border-radius: 20px
margin-left: 190px
margin-top: 25px
.sm-line-2
background: $Lines
height: 6px
width: 15px
border-radius: 20px
margin-left: 212px
margin-top: -6px
.bg-circle-sd
background: $circle-button-border
border-radius: 50%
width: 40px
height: 40px
margin-left: 324px
margin-top: -40px
.bg-circle
background: $circle-button
border-radius: 50%
width: 36px
height: 36px
margin-left: 2px
.gr-circle-sd
background: $green-circle-border
border-radius: 50%
width: 40px
height: 40px
margin-left: 370px
margin-top: -59px
.gr-circle
background: $green-circle
border-radius: 50%
width: 36px
height: 36px
margin-left: 2px
.triangel-button-sd
width: 0px
height: 0px
border-bottom: solid 30px $triangle-button-border
border-left: solid 18px transparent
border-right: solid 18px transparent
margin-left: 333px
margin-top: -62px
border-radius: 10px
.triangel-button
width: 0px
height: 0px
border-bottom: solid 30px $triangel-button
border-left: solid 17px transparent
border-right: solid 17px transparent
margin-left: -14px
margin-top: -62px
border-radius: 10px