UNPKG

ciser

Version:

Functional CSS, help quickly build and design new UI without writing css.

github.com/lamhieu-vk/ciser

lamhieu-vk/ciser

41 lines (39 loc) • 2.31 kB
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
/* Variables */ .blurred-t { -webkit-filter: blur( .125rem ); filter: blur( .125rem ); } .blurred-l { -webkit-filter: blur( .25rem ); filter: blur( .25rem ); } .blurred-r { -webkit-filter: blur( .5rem ); filter: blur( .5rem ); } .blurred-m { -webkit-filter: blur( 1rem ); filter: blur( 1rem ); } .blurred-b { -webkit-filter: blur( 2rem ); filter: blur( 2rem ); } .filter-none { -webkit-filter: none; filter: none; } @media screen and (min-width: 30em) { .blurred-t-ns { -webkit-filter: blur( .125rem ); filter: blur( .125rem ); } .blurred-l-ns { -webkit-filter: blur( .25rem ); filter: blur( .25rem ); } .blurred-r-ns { -webkit-filter: blur( .5rem ); filter: blur( .5rem ); } .blurred-m-ns { -webkit-filter: blur( 1rem ); filter: blur( 1rem ); } .blurred-b-ns { -webkit-filter: blur( 2rem ); filter: blur( 2rem ); } .filter-none-ns { -webkit-filter: none; filter: none; } } @media screen and (min-width: 30em) and (max-width: 60em) { .blurred-t-m { -webkit-filter: blur( .125rem ); filter: blur( .125rem ); } .blurred-l-m { -webkit-filter: blur( .25rem ); filter: blur( .25rem ); } .blurred-r-m { -webkit-filter: blur( .5rem ); filter: blur( .5rem ); } .blurred-m-m { -webkit-filter: blur( 1rem ); filter: blur( 1rem ); } .blurred-b-m { -webkit-filter: blur( 2rem ); filter: blur( 2rem ); } .filter-none-m { -webkit-filter: none; filter: none; } } @media screen and (max-width: 60em) and (orientation: landscape) { .blurred-t-ml { -webkit-filter: blur( .125rem ); filter: blur( .125rem ); } .blurred-l-ml { -webkit-filter: blur( .25rem ); filter: blur( .25rem ); } .blurred-r-ml { -webkit-filter: blur( .5rem ); filter: blur( .5rem ); } .blurred-m-ml { -webkit-filter: blur( 1rem ); filter: blur( 1rem ); } .blurred-b-ml { -webkit-filter: blur( 2rem ); filter: blur( 2rem ); } .filter-none-ml { -webkit-filter: none; filter: none; } } @media screen and (min-width: 60em) { .blurred-t-l { -webkit-filter: blur( .125rem ); filter: blur( .125rem ); } .blurred-l-l { -webkit-filter: blur( .25rem ); filter: blur( .25rem ); } .blurred-r-l { -webkit-filter: blur( .5rem ); filter: blur( .5rem ); } .blurred-m-l { -webkit-filter: blur( 1rem ); filter: blur( 1rem ); } .blurred-b-l { -webkit-filter: blur( 2rem ); filter: blur( 2rem ); } .filter-none-l { -webkit-filter: none; filter: none; } }