UNPKG

chartbuilder-ui/styl/chartbuilder-ui.styl

Version:

4.81 kBtext/stylusView Raw

1@import "mixins"
2@import "colors"
3
4$border = 1px solid $color-border
5$border-active = 1px solid $color-border-active
6
7body
background-color $color-background
font-size 12px
10
11// Alert
12// --------------------------
13
cb-alert
margin 0
font-size 1.5em
border-radius 4px
line-height 1.5em
width 100%
color white
transition(background-color 0.1s linear)
&.cb-alert-default
background-color white
color $color-body-text
&.cb-alert-error
background-color $color-error
&.cb-alert-warning
background-color $color-warning
&.cb-alert-success
background-color $color-success
.cb-alert-text
padding 10px 10px
33
34// Button
35// --------------------------
36
cb-button
cursor pointer
border $border
background none
appearance none
outline 0
margin-top 0
vertical-align middle
font-size 1.4em
line-height 14px
height 55px
padding 4px 10px 0px 10px
color $color-body-text
transition(background-color 0.2s linear)
&.disabled, &:disabled
color $color-button-fill-disabled
&:hover
background $color-button-hover-fill
color $color-button-hover
56
&:disabled
	background none
	color $color-button-fill-disabled
&:focus
outline none
62
63
64// ButtonGroup
65// --------------------------
66
cb-button-group
display flex
flex 0 0 100%
flex-flow row wrap
width 100%
.cb-button
flex auto
background-color $color-button-group-fill
color $color-button-fill-disabled
margin-left: -1px
&:first-child
	margin-left: 0px
&:focus
	outline none
&:hover
	color $color-body-text
&.active
	background $color-button-fill
	color $color-body-text
	transition(background-color 0.2s linear)
87
88// ColorPicker
89// --------------------------
90
cb-colorpicker
position relative
93
cb-colorpicker-current
width 40px
height 40px
border-radius 50%
cursor pointer
position relative
100
cb-colorpicker-els
z-index 10
opacity 0
transition(0.2s opacity linear)
width 170px
position absolute
top -20px
left 50px
display flex
background-color #f9f9f9
&.active
transition(0.2s opacity linear)
display flex
opacity 1
flex-flow row wrap
border $border-active
.cb-colorpicker-el
	cursor pointer
	flex auto
	margin 1px
	width 40px
	height 40px
	border-radius 1px
&:after
	right 100%
	top 30%
	border solid transparent
	content " "
	height 0
	width 0
	position absolute
	pointer-events none
	border-color rgba(204, 204, 204, 0)
	border-right-color #ccc
	border-width 8px
	margin-top -8px
137
138// Dropdown
139// --------------------------
140
cb-dropdown
select
height 45px
margin 3px 0
font-size 1.4em
width 100%
box-sizing border-box
margin-bottom 1em
color $color-body-text
border $border
background-color #fff
outline: none
153
154// LabelledTangle
155// --------------------------
156
cb-labelled-tangle
vertical-align middle
line-height 28px
height 28px
font-size 1em
label, div
display inline-block
164
.cb-tangle
-webkit-appearance none
text-align center
cursor col-resize
font inherit
border $border
display inline
margin 0 0 0 10px
background-color white
width 50px
font-size 1.2em
176
label
font-size 1.4em
179
.tangle-input:focus
cursor text
182
183// TextArea
184// --------------------------
185
cb-text-area
color $color-body-text
border $border
width 100%
font-size 1.1em
padding 15px
margin 0
min-height 10em
resize: none
&:focus
border $border-active
outline none
198
199// TextInput
200// --------------------------
201
cb-text-input
display inline-block
position relative
205
label
height 55px
font-size 1.4em
top 21px
opacity 1
margin-left 10px
color $color-input-placeholder
position absolute
transform scale(1) translate3d(0, 0, 0)
transform-origin left top
transition(all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms)
z-index 1
&.focus
	transform scale(0.8) translate3d(0, -11px, 0)
220
input
height 55px
font-size 1.4em
margin 3px 0
padding 21px 10px 0 10px
box-sizing border-box
border $border
&:focus
	border $border-active
	outline none
231
232// Toggle
233// --------------------------
234
cb-toggle
display block
position relative
cursor pointer
background-color transparent
border 0
padding 0
user-select(none)
243
.cb-toggle-container
display inline-block
width 45px
height 24px
padding 0
border-radius 30px
background-color $color-share-button
transition(all 0.2s ease)
252
.cb-toggle-switch
position absolute
top 1px
left 1px
width 22px
height 22px
border-radius 50%
background-color $color-background
box-sizing border-box
transition(all 0.2s ease)
263
&.toggled
.cb-toggle-container
	background-color $color-toggle-toggled
.cb-toggle-switch
	left 22px
269
input
cursor pointer
opacity 0
position absolute
right 0
275
label
cursor pointer
font-size 1.2em
line-height 24px
padding-left 10px
vertical-align top

1	`@import "mixins"`
2	`@import "colors"`
3
4	`$border = 1px solid $color-border`
5	`$border-active = 1px solid $color-border-active`
6
7	`body`
8	`background-color $color-background`
9	`font-size 12px`
10
11	`// Alert`
12	`// --------------------------`
13
14	`.cb-alert`
15	`margin 0`
16	`font-size 1.5em`
17	`border-radius 4px`
18	`line-height 1.5em`
19	`width 100%`
20	`color white`
21	`transition(background-color 0.1s linear)`
22	`&.cb-alert-default`
23	`background-color white`
24	`color $color-body-text`
25	`&.cb-alert-error`
26	`background-color $color-error`
27	`&.cb-alert-warning`
28	`background-color $color-warning`
29	`&.cb-alert-success`
30	`background-color $color-success`
31	`.cb-alert-text`
32	`padding 10px 10px`
33
34	`// Button`
35	`// --------------------------`
36
37	`.cb-button`
38	`cursor pointer`
39	`border $border`
40	`background none`
41	`appearance none`
42	`outline 0`
43	`margin-top 0`
44	`vertical-align middle`
45	`font-size 1.4em`
46	`line-height 14px`
47	`height 55px`
48	`padding 4px 10px 0px 10px`
49	`color $color-body-text`
50	`transition(background-color 0.2s linear)`
51	`&.disabled, &:disabled`
52	`color $color-button-fill-disabled`
53	`&:hover`
54	`background $color-button-hover-fill`
55	`color $color-button-hover`
56
57	`&:disabled`
58	`background none`
59	`color $color-button-fill-disabled`
60	`&:focus`
61	`outline none`
62
63
64	`// ButtonGroup`
65	`// --------------------------`
66
67	`.cb-button-group`
68	`display flex`
69	`flex 0 0 100%`
70	`flex-flow row wrap`
71	`width 100%`
72	`.cb-button`
73	`flex auto`
74	`background-color $color-button-group-fill`
75	`color $color-button-fill-disabled`
76	`margin-left: -1px`
77	`&:first-child`
78	`margin-left: 0px`
79	`&:focus`
80	`outline none`
81	`&:hover`
82	`color $color-body-text`
83	`&.active`
84	`background $color-button-fill`
85	`color $color-body-text`
86	`transition(background-color 0.2s linear)`
87
88	`// ColorPicker`
89	`// --------------------------`
90
91	`.cb-colorpicker`
92	`position relative`
93
94	`.cb-colorpicker-current`
95	`width 40px`
96	`height 40px`
97	`border-radius 50%`
98	`cursor pointer`
99	`position relative`
100
101	`.cb-colorpicker-els`
102	`z-index 10`
103	`opacity 0`
104	`transition(0.2s opacity linear)`
105	`width 170px`
106	`position absolute`
107	`top -20px`
108	`left 50px`
109	`display flex`
110	`background-color #f9f9f9`
111	`&.active`
112	`transition(0.2s opacity linear)`
113	`display flex`
114	`opacity 1`
115	`flex-flow row wrap`
116	`border $border-active`
117	`.cb-colorpicker-el`
118	`cursor pointer`
119	`flex auto`
120	`margin 1px`
121	`width 40px`
122	`height 40px`
123	`border-radius 1px`
124	`&:after`
125	`right 100%`
126	`top 30%`
127	`border solid transparent`
128	`content " "`
129	`height 0`
130	`width 0`
131	`position absolute`
132	`pointer-events none`
133	`border-color rgba(204, 204, 204, 0)`
134	`border-right-color #ccc`
135	`border-width 8px`
136	`margin-top -8px`
137
138	`// Dropdown`
139	`// --------------------------`
140
141	`.cb-dropdown`
142	`select`
143	`height 45px`
144	`margin 3px 0`
145	`font-size 1.4em`
146	`width 100%`
147	`box-sizing border-box`
148	`margin-bottom 1em`
149	`color $color-body-text`
150	`border $border`
151	`background-color #fff`
152	`outline: none`
153
154	`// LabelledTangle`
155	`// --------------------------`
156
157	`.cb-labelled-tangle`
158	`vertical-align middle`
159	`line-height 28px`
160	`height 28px`
161	`font-size 1em`
162	`label, div`
163	`display inline-block`
164
165	`.cb-tangle`
166	`-webkit-appearance none`
167	`text-align center`
168	`cursor col-resize`
169	`font inherit`
170	`border $border`
171	`display inline`
172	`margin 0 0 0 10px`
173	`background-color white`
174	`width 50px`
175	`font-size 1.2em`
176
177	`label`
178	`font-size 1.4em`
179
180	`.tangle-input:focus`
181	`cursor text`
182
183	`// TextArea`
184	`// --------------------------`
185
186	`.cb-text-area`
187	`color $color-body-text`
188	`border $border`
189	`width 100%`
190	`font-size 1.1em`
191	`padding 15px`
192	`margin 0`
193	`min-height 10em`
194	`resize: none`
195	`&:focus`
196	`border $border-active`
197	`outline none`
198
199	`// TextInput`
200	`// --------------------------`
201
202	`.cb-text-input`
203	`display inline-block`
204	`position relative`
205
206	`label`
207	`height 55px`
208	`font-size 1.4em`
209	`top 21px`
210	`opacity 1`
211	`margin-left 10px`
212	`color $color-input-placeholder`
213	`position absolute`
214	`transform scale(1) translate3d(0, 0, 0)`
215	`transform-origin left top`
216	`transition(all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms)`
217	`z-index 1`
218	`&.focus`
219	`transform scale(0.8) translate3d(0, -11px, 0)`
220
221	`input`
222	`height 55px`
223	`font-size 1.4em`
224	`margin 3px 0`
225	`padding 21px 10px 0 10px`
226	`box-sizing border-box`
227	`border $border`
228	`&:focus`
229	`border $border-active`
230	`outline none`
231
232	`// Toggle`
233	`// --------------------------`
234
235	`.cb-toggle`
236	`display block`
237	`position relative`
238	`cursor pointer`
239	`background-color transparent`
240	`border 0`
241	`padding 0`
242	`user-select(none)`
243
244	`.cb-toggle-container`
245	`display inline-block`
246	`width 45px`
247	`height 24px`
248	`padding 0`
249	`border-radius 30px`
250	`background-color $color-share-button`
251	`transition(all 0.2s ease)`
252
253	`.cb-toggle-switch`
254	`position absolute`
255	`top 1px`
256	`left 1px`
257	`width 22px`
258	`height 22px`
259	`border-radius 50%`
260	`background-color $color-background`
261	`box-sizing border-box`
262	`transition(all 0.2s ease)`
263
264	`&.toggled`
265	`.cb-toggle-container`
266	`background-color $color-toggle-toggled`
267	`.cb-toggle-switch`
268	`left 22px`
269
270	`input`
271	`cursor pointer`
272	`opacity 0`
273	`position absolute`
274	`right 0`
275
276	`label`
277	`cursor pointer`
278	`font-size 1.2em`
279	`line-height 24px`
280	`padding-left 10px`
281	`vertical-align top`