UNPKG

@startupjs/ui/styles/helpers.styl

Version:

1.29 kBtext/stylusView Raw

1from(num)
2  condition = 'screen and (min-width: %s)' % num
3  @media condition
4    {block}
5
6to(num)
7  condition = 'screen and (max-width: %s)' % ((num - 1))
8  @media condition
9    {block}
10
11// DEPRECATED
12mobile()
13  +to($UI.media.mobile)
14    {block}
15
16tablet()
17  +from($UI.media.tablet)
18    {block}
19
20desktop()
21  +from($UI.media.desktop)
22    {block}
23
24wide()
25  +from($UI.media.wide)
26    {block}
27
28between(num1, num2)
29  condition = 'screen and (min-width: %s) and (max-width: %s)' % (num1 (num2 - 1))
30  @media condition
31    {block}
32
33betweenHeight(num1, num2)
34  condition = 'screen and (min-height: %s) and (max-height: %s)' % (num1 (num2 - 1))
35  @media condition
36    {block}
37
38portrait()
39  @media (orientation: portrait)
40    {block}
41
42landscape()
43  @media (orientation: landscape)
44    {block}
45
46web()
47  if __WEB__ is defined
48    {block}
49
50android()
51  if __ANDROID__ is defined
52    {block}
53
54ios()
55  if __IOS__ is defined
56    {block}
57
58windows()
59  if __WINDOWS__ is defined
60    {block}
61
62macos()
63  if __MACOS__ is defined
64    {block}
65
66native()
67  unless __WEB__ is defined
68    {block}
69
70bleed(left = 2u, right = left)
71  padding-left left
72  padding-right right
73  margin-left (- left)
74  margin-right (- right)
75
76radius(key = m)
77  if key is m
78    border-radius 4px
79  else if key is circle
80    border-radius 9999px

1	`from(num)`
2	`condition = 'screen and (min-width: %s)' % num`
3	`@media condition`
4	`{block}`
5
6	`to(num)`
7	`condition = 'screen and (max-width: %s)' % ((num - 1))`
8	`@media condition`
9	`{block}`
10
11	`// DEPRECATED`
12	`mobile()`
13	`+to($UI.media.mobile)`
14	`{block}`
15
16	`tablet()`
17	`+from($UI.media.tablet)`
18	`{block}`
19
20	`desktop()`
21	`+from($UI.media.desktop)`
22	`{block}`
23
24	`wide()`
25	`+from($UI.media.wide)`
26	`{block}`
27
28	`between(num1, num2)`
29	`condition = 'screen and (min-width: %s) and (max-width: %s)' % (num1 (num2 - 1))`
30	`@media condition`
31	`{block}`
32
33	`betweenHeight(num1, num2)`
34	`condition = 'screen and (min-height: %s) and (max-height: %s)' % (num1 (num2 - 1))`
35	`@media condition`
36	`{block}`
37
38	`portrait()`
39	`@media (orientation: portrait)`
40	`{block}`
41
42	`landscape()`
43	`@media (orientation: landscape)`
44	`{block}`
45
46	`web()`
47	`if __WEB__ is defined`
48	`{block}`
49
50	`android()`
51	`if __ANDROID__ is defined`
52	`{block}`
53
54	`ios()`
55	`if __IOS__ is defined`
56	`{block}`
57
58	`windows()`
59	`if __WINDOWS__ is defined`
60	`{block}`
61
62	`macos()`
63	`if __MACOS__ is defined`
64	`{block}`
65
66	`native()`
67	`unless __WEB__ is defined`
68	`{block}`
69
70	`bleed(left = 2u, right = left)`
71	`padding-left left`
72	`padding-right right`
73	`margin-left (- left)`
74	`margin-right (- right)`
75
76	`radius(key = m)`
77	`if key is m`
78	`border-radius 4px`
79	`else if key is circle`
80	`border-radius 9999px`