author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-10-02 07:59:30 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-10-02 07:59:30 (UTC) |
commit | 1180b7b195157aaeb4f0d5380e0c886bbd06c2e2 (patch) (unidiff) | |
tree | 709e33a09d9325d382aabaf0a0828e20ebdb96db /frontend/delta/scss/web/mixin.scss | |
parent | 20bea94ab6b91c85b171dcf86baba0a64169d508 (diff) | |
download | clipperz-1180b7b195157aaeb4f0d5380e0c886bbd06c2e2.zip clipperz-1180b7b195157aaeb4f0d5380e0c886bbd06c2e2.tar.gz clipperz-1180b7b195157aaeb4f0d5380e0c886bbd06c2e2.tar.bz2 |
Updated /delta
Switched from less to scss. Still no build script to update the final CSS, though.
Added preliminary support for storing account data on browser's local storage for offline viewing. No public backend currently support this feature.
Diffstat (limited to 'frontend/delta/scss/web/mixin.scss') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/delta/scss/web/mixin.scss | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/frontend/delta/scss/web/mixin.scss b/frontend/delta/scss/web/mixin.scss new file mode 100644 index 0000000..c601e35 --- a/dev/null +++ b/frontend/delta/scss/web/mixin.scss | |||
@@ -0,0 +1,107 @@ | |||
1 | @mixin border-radius ($radius) { | ||
2 | border-radius: $radius; | ||
3 | -moz-border-radius: $radius; | ||
4 | -webkit-border-radius: $radius; | ||
5 | } | ||
6 | |||
7 | @mixin font-feature-settings($foo, $bar) { | ||
8 | -webkit-font-feature-settings:"$foo","$bar"; | ||
9 | -moz-font-feature-settings:"$foo=1, $bar=1"; | ||
10 | -moz-font-feature-settings:"$foo","$bar"; | ||
11 | -ms-font-feature-settings:"$foo","$bar"; | ||
12 | -o-font-feature-settings:"$foo","$bar"; | ||
13 | font-feature-settings:"$foo","$bar"; | ||
14 | } | ||
15 | |||
16 | @mixin icon-font() { | ||
17 | font-family: 'clipperz-icons'; | ||
18 | @include font-feature-settings("liga", "dlig"); | ||
19 | -webkit-font-smoothing: antialiased; | ||
20 | text-rendering:optimizeLegibility; | ||
21 | } | ||
22 | |||
23 | @mixin password-font() { | ||
24 | font-family: 'clipperz-password'; | ||
25 | -webkit-font-smoothing: antialiased; | ||
26 | text-rendering:optimizeLegibility; | ||
27 | } | ||
28 | |||
29 | @mixin animation ($animation, $duration, $timing-function:linear, $iteration-count:1, $fill-mode:none) { | ||
30 | -webkit-animation-name: $animation; | ||
31 | -webkit-animation-duration: $duration; | ||
32 | -webkit-animation-timing-function: $timing-function; | ||
33 | -webkit-animation-iteration-count: $iteration-count; | ||
34 | -webkit-animation-fill-mode: $fill-mode; | ||
35 | |||
36 | -moz-animation-name: $animation; | ||
37 | -moz-animation-duration: $duration; | ||
38 | -moz-animation-timing-function: $timing-function; | ||
39 | -moz-animation-iteration-count: $iteration-count; | ||
40 | -moz-animation-fill-mode: $fill-mode; | ||
41 | |||
42 | -ms-animation-name: $animation; | ||
43 | -ms-animation-duration: $duration; | ||
44 | -ms-animation-timing-function: $timing-function; | ||
45 | -ms-animation-iteration-count: $iteration-count; | ||
46 | -ms-animation-fill-mode: $fill-mode; | ||
47 | |||
48 | -o-animation-name: $animation; | ||
49 | -o-animation-duration: $duration; | ||
50 | -o-animation-timing-function: $timing-function; | ||
51 | -o-animation-iteration-count: $iteration-count; | ||
52 | -o-animation-fill-mode: $fill-mode; | ||
53 | |||
54 | animation-name: $animation; | ||
55 | animation-duration: $duration; | ||
56 | animation-timing-function: $timing-function; | ||
57 | animation-iteration-count: $iteration-count; | ||
58 | animation-fill-mode: $fill-mode; | ||
59 | } | ||
60 | |||
61 | @mixin transition ($item, $time, $function) { | ||
62 | -webkit-transition: $item $time $function; | ||
63 | -moz-transition: $item $time $function; | ||
64 | -o-transition: $item $time $function; | ||
65 | -ms-transition: $item $time $function; | ||
66 | transition: $item $time $function; | ||
67 | } | ||
68 | |||
69 | @mixin transform ($rotateAngle, $translateX, $translateY) { | ||
70 | -webkit-transform: rotate( $rotateAngle) translate($translateX, $translateY); | ||
71 | -moz-transform: rotate( $rotateAngle) translate($translateX, $translateY); | ||
72 | -ms-transform: rotate( $rotateAngle) translate($translateX, $translateY); | ||
73 | -o-transform: rotate( $rotateAngle) translate($translateX, $translateY); | ||
74 | transform: rotate( $rotateAngle) translate($translateX, $translateY); | ||
75 | } | ||
76 | |||
77 | |||
78 | @mixin animation-delay ($delay) { | ||
79 | -webkit-animation-delay: $delay; | ||
80 | -moz-animation-delay: $delay; | ||
81 | -ms-animation-delay: $delay; | ||
82 | -o-animation-delay: $delay; | ||
83 | animation-delay: $delay; | ||
84 | } | ||
85 | |||
86 | @mixin box-shadow ($xOffset, $yOffset, $size, $color) { | ||
87 | -webkit-box-shadow: $xOffset $yOffset $size $color; | ||
88 | -moz-box-shadow: $xOffset $yOffset $size $color; | ||
89 | -ms-box-shadow: $xOffset $yOffset $size $color; | ||
90 | -o-box-shadow: $xOffset $yOffset $size $color; | ||
91 | box-shadow: $xOffset $yOffset $size $color; | ||
92 | } | ||
93 | |||
94 | @mixin keyframes($name) { | ||
95 | @-webkit-keyframes #{$name} { | ||
96 | @content; | ||
97 | } | ||
98 | @-moz-keyframes #{$name} { | ||
99 | @content; | ||
100 | } | ||
101 | @-ms-keyframes #{$name} { | ||
102 | @content; | ||
103 | } | ||
104 | @keyframes #{$name} { | ||
105 | @content; | ||
106 | } | ||
107 | } \ No newline at end of file | ||