wiskey 0.0.8 → 0.0.9
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/app/assets/stylesheets/README.md +45 -0
- data/app/assets/stylesheets/_wiskey.scss +21 -0
- data/app/assets/stylesheets/wiskey/css3/_animation.scss +156 -0
- data/app/assets/stylesheets/wiskey/css3/_background-clip.scss +13 -0
- data/app/assets/stylesheets/wiskey/css3/_border-radius.scss +54 -0
- data/app/assets/stylesheets/wiskey/css3/_box-shadow.scss +4 -0
- data/app/assets/stylesheets/wiskey/css3/_box-sizing.scss +9 -0
- data/app/assets/stylesheets/wiskey/css3/_column-count.scss +18 -0
- data/app/assets/stylesheets/wiskey/css3/_flex-box.scss +52 -0
- data/app/assets/stylesheets/wiskey/css3/_inline-block.scss +24 -0
- data/app/assets/stylesheets/wiskey/css3/_linear-gradient.scss +41 -0
- data/app/assets/stylesheets/wiskey/css3/_opacity.scss +8 -0
- data/app/assets/stylesheets/wiskey/css3/_radial-gradient.scss +21 -0
- data/app/assets/stylesheets/wiskey/css3/_text-overflow.scss +4 -0
- data/app/assets/stylesheets/wiskey/css3/_text-shadow.scss +3 -0
- data/app/assets/stylesheets/wiskey/css3/_transform.scss +13 -0
- data/app/assets/stylesheets/wiskey/css3/_transition.scss +91 -0
- data/app/assets/stylesheets/wiskey/css3/_user-select.scss +10 -0
- data/app/assets/stylesheets/wiskey/functions/_experimental.scss +52 -0
- data/app/assets/stylesheets/wiskey/functions/_medias.scss +30 -0
- data/lib/wiskey/version.rb +1 -1
- data/wiskey.gemspec +1 -1
- metadata +69 -62
- data/.gitmodules +0 -3
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 04af12efebfeec8f5265af5d33b37a70dbd9e494
|
4
|
+
data.tar.gz: 4d0160ec009f046e8fe4095b3a5d87fb45929f9d
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 83581dd4616b9f8461e359765e835f00a83bd0ad20a7e00ecdcdee78ef6d73780f6b5869b261fb0ee6ff1a57a29f555e59980d668c93f9fab35f1a5a644ea744
|
7
|
+
data.tar.gz: a5b624cf6aa9ad2ca15ae54feaa0e6b2a84999d106718339dfdf5c467dca40323e67fc03c1c5d7bccd2fcc47754f49e64f9514808d97e877d4039ecd7a45919d
|
@@ -0,0 +1,45 @@
|
|
1
|
+
Wiskey
|
2
|
+
===
|
3
|
+
|
4
|
+
Set of low level css features without any solid css.
|
5
|
+
|
6
|
+
Requirements
|
7
|
+
---
|
8
|
+
|
9
|
+
The [sass](http://sass-lang.com/) library
|
10
|
+
|
11
|
+
Usage
|
12
|
+
---
|
13
|
+
Import wiskey at the beginning of your sass file.
|
14
|
+
|
15
|
+
```sass
|
16
|
+
@import "wiskey/wiskey";
|
17
|
+
```
|
18
|
+
|
19
|
+
Thanks
|
20
|
+
---
|
21
|
+
|
22
|
+
For Thoughtbots and their bourbon gem.
|
23
|
+
|
24
|
+
License
|
25
|
+
---
|
26
|
+
The MIT License (MIT)
|
27
|
+
|
28
|
+
Copyright (c) 2013 Стенгазета "Вечерка"
|
29
|
+
|
30
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
31
|
+
this software and associated documentation files (the "Software"), to deal in
|
32
|
+
the Software without restriction, including without limitation the rights to
|
33
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
34
|
+
the Software, and to permit persons to whom the Software is furnished to do so,
|
35
|
+
subject to the following conditions:
|
36
|
+
|
37
|
+
The above copyright notice and this permission notice shall be included in all
|
38
|
+
copies or substantial portions of the Software.
|
39
|
+
|
40
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
41
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
42
|
+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
43
|
+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
44
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
45
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
@@ -0,0 +1,21 @@
|
|
1
|
+
// Custom Functions
|
2
|
+
@import "wiskey/functions/experimental";
|
3
|
+
@import "wiskey/functions/medias";
|
4
|
+
|
5
|
+
// CSS3 Mixins
|
6
|
+
@import "wiskey/css3/animation";
|
7
|
+
@import "wiskey/css3/background-clip";
|
8
|
+
@import "wiskey/css3/border-radius";
|
9
|
+
@import "wiskey/css3/box-shadow";
|
10
|
+
@import "wiskey/css3/box-sizing";
|
11
|
+
@import "wiskey/css3/flex-box";
|
12
|
+
@import "wiskey/css3/inline-block";
|
13
|
+
@import "wiskey/css3/linear-gradient";
|
14
|
+
@import "wiskey/css3/radial-gradient";
|
15
|
+
@import "wiskey/css3/transform";
|
16
|
+
@import "wiskey/css3/transition";
|
17
|
+
@import "wiskey/css3/opacity";
|
18
|
+
@import "wiskey/css3/text-shadow";
|
19
|
+
@import "wiskey/css3/text-overflow";
|
20
|
+
@import "wiskey/css3/column-count";
|
21
|
+
@import "wiskey/css3/user-select";
|
@@ -0,0 +1,156 @@
|
|
1
|
+
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
|
2
|
+
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
|
3
|
+
|
4
|
+
@mixin animation-name ($name-1,
|
5
|
+
$name-2: false, $name-3: false,
|
6
|
+
$name-4: false, $name-5: false,
|
7
|
+
$name-6: false, $name-7: false,
|
8
|
+
$name-8: false, $name-9: false)
|
9
|
+
{
|
10
|
+
$full: compact($name-1, $name-2, $name-3, $name-4,
|
11
|
+
$name-5, $name-6, $name-7, $name-8, $name-9);
|
12
|
+
|
13
|
+
@include experimental(animation-name, $full,
|
14
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
15
|
+
}
|
16
|
+
|
17
|
+
|
18
|
+
@mixin animation-duration ($time-1: 0,
|
19
|
+
$time-2: false, $time-3: false,
|
20
|
+
$time-4: false, $time-5: false,
|
21
|
+
$time-6: false, $time-7: false,
|
22
|
+
$time-8: false, $time-9: false)
|
23
|
+
{
|
24
|
+
$full: compact($time-1, $time-2, $time-3, $time-4,
|
25
|
+
$time-5, $time-6, $time-7, $time-8, $time-9);
|
26
|
+
|
27
|
+
@include experimental(animation-duration, $full,
|
28
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
29
|
+
}
|
30
|
+
|
31
|
+
|
32
|
+
@mixin animation-timing-function ($motion-1: ease,
|
33
|
+
// ease | linear | ease-in | ease-out | ease-in-out
|
34
|
+
$motion-2: false, $motion-3: false,
|
35
|
+
$motion-4: false, $motion-5: false,
|
36
|
+
$motion-6: false, $motion-7: false,
|
37
|
+
$motion-8: false, $motion-9: false)
|
38
|
+
{
|
39
|
+
$full: compact($motion-1, $motion-2, $motion-3, $motion-4,
|
40
|
+
$motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
|
41
|
+
|
42
|
+
@include experimental(animation-timing-function, $full,
|
43
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
44
|
+
}
|
45
|
+
|
46
|
+
|
47
|
+
@mixin animation-iteration-count ($value-1: 1,
|
48
|
+
// infinite | <number>
|
49
|
+
$value-2: false, $value-3: false,
|
50
|
+
$value-4: false, $value-5: false,
|
51
|
+
$value-6: false, $value-7: false,
|
52
|
+
$value-8: false, $value-9: false)
|
53
|
+
{
|
54
|
+
$full: compact($value-1, $value-2, $value-3, $value-4,
|
55
|
+
$value-5, $value-6, $value-7, $value-8, $value-9);
|
56
|
+
|
57
|
+
@include experimental(animation-iteration-count, $full,
|
58
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
59
|
+
}
|
60
|
+
|
61
|
+
|
62
|
+
@mixin animation-direction ($direction-1: normal,
|
63
|
+
// normal | alternate
|
64
|
+
$direction-2: false, $direction-3: false,
|
65
|
+
$direction-4: false, $direction-5: false,
|
66
|
+
$direction-6: false, $direction-7: false,
|
67
|
+
$direction-8: false, $direction-9: false)
|
68
|
+
{
|
69
|
+
$full: compact($direction-1, $direction-2, $direction-3, $direction-4,
|
70
|
+
$direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
|
71
|
+
|
72
|
+
-webkit-animation-direction: $full;
|
73
|
+
-moz-animation-direction: $full;
|
74
|
+
animation-direction: $full;
|
75
|
+
@include experimental(animation-direction, $full,
|
76
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
77
|
+
}
|
78
|
+
|
79
|
+
|
80
|
+
@mixin animation-play-state ($state-1: running,
|
81
|
+
// running | paused
|
82
|
+
$state-2: false, $state-3: false,
|
83
|
+
$state-4: false, $state-5: false,
|
84
|
+
$state-6: false, $state-7: false,
|
85
|
+
$state-8: false, $state-9: false)
|
86
|
+
{
|
87
|
+
$full: compact($state-1, $state-2, $state-3, $state-4,
|
88
|
+
$state-5, $state-6, $state-7, $state-8, $state-9);
|
89
|
+
|
90
|
+
@include experimental(animation-play-state, $full,
|
91
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
92
|
+
}
|
93
|
+
|
94
|
+
|
95
|
+
@mixin animation-delay ($time-1: 0,
|
96
|
+
$time-2: false, $time-3: false,
|
97
|
+
$time-4: false, $time-5: false,
|
98
|
+
$time-6: false, $time-7: false,
|
99
|
+
$time-8: false, $time-9: false)
|
100
|
+
{
|
101
|
+
$full: compact($time-1, $time-2, $time-3, $time-4,
|
102
|
+
$time-5, $time-6, $time-7, $time-8, $time-9);
|
103
|
+
|
104
|
+
@include experimental(animation-delay, $full,
|
105
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
106
|
+
}
|
107
|
+
|
108
|
+
|
109
|
+
@mixin animation-fill-mode ($mode-1: none,
|
110
|
+
// http://goo.gl/l6ckm
|
111
|
+
// none | forwards | backwards | both
|
112
|
+
$mode-2: false, $mode-3: false,
|
113
|
+
$mode-4: false, $mode-5: false,
|
114
|
+
$mode-6: false, $mode-7: false,
|
115
|
+
$mode-8: false, $mode-9: false)
|
116
|
+
{
|
117
|
+
$full: compact($mode-1, $mode-2, $mode-3, $mode-4,
|
118
|
+
$mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
|
119
|
+
|
120
|
+
@include experimental(animation-fill-mode, $full,
|
121
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
122
|
+
}
|
123
|
+
|
124
|
+
|
125
|
+
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
|
126
|
+
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
|
127
|
+
@mixin animation-basic ($name, $time: 0, $motion: ease) {
|
128
|
+
$length-of-name: length($name);
|
129
|
+
$length-of-time: length($time);
|
130
|
+
$length-of-motion: length($motion);
|
131
|
+
|
132
|
+
@if $length-of-name > 1 {
|
133
|
+
@include animation-name(zip($name));
|
134
|
+
} @else {
|
135
|
+
@include animation-name( $name);
|
136
|
+
}
|
137
|
+
|
138
|
+
@if $length-of-time > 1 {
|
139
|
+
@include animation-duration(zip($time));
|
140
|
+
} @else {
|
141
|
+
@include animation-duration( $time);
|
142
|
+
}
|
143
|
+
|
144
|
+
@if $length-of-motion > 1 {
|
145
|
+
@include animation-timing-function(zip($motion));
|
146
|
+
} @else {
|
147
|
+
@include animation-timing-function( $motion);
|
148
|
+
}
|
149
|
+
}
|
150
|
+
|
151
|
+
// Official animation shorthand property. Needs more work to actually be useful.
|
152
|
+
@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
|
153
|
+
$full: $name $duration $timing-function $delay $iteration-count $direction;
|
154
|
+
@include experimental(animation, $full,
|
155
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
156
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
@mixin background-clip($clip) {
|
2
|
+
$deprecated: $clip;
|
3
|
+
@if $clip == padding-box { $deprecated: padding; }
|
4
|
+
@if $clip == border-box { $deprecated: border; }
|
5
|
+
|
6
|
+
@include experimental(background-clip, $deprecated,
|
7
|
+
-moz, -webkit, not -o, not -ms, not -khtml, not official);
|
8
|
+
@include experimental(background-clip, $clip,
|
9
|
+
not -moz, not -webkit, -o, -ms, -khtml, official);
|
10
|
+
}
|
11
|
+
|
12
|
+
// @include background-clip(padding-box);
|
13
|
+
// @include background-clip(border-box);
|
@@ -0,0 +1,54 @@
|
|
1
|
+
@mixin border-radius ($top-right, $top-left: false, $bottom-right: false, $bottom-left: false) {
|
2
|
+
@if not $top-left { $top-left: $top-right }
|
3
|
+
@if not $bottom-right { $bottom-right: $top-right }
|
4
|
+
@if not $bottom-left { $bottom-left: $top-left }
|
5
|
+
|
6
|
+
@include border-top-left-radius($top-left);
|
7
|
+
@include border-top-right-radius($top-right);
|
8
|
+
@include border-bottom-left-radius($bottom-left);
|
9
|
+
@include border-bottom-right-radius($bottom-right);
|
10
|
+
}
|
11
|
+
|
12
|
+
@mixin border-top-left-radius($top-left) {
|
13
|
+
-webkit-border-top-left-radius: $top-left;
|
14
|
+
-moz-border-radius-topleft: $top-left;
|
15
|
+
border-top-left-radius: $top-left;
|
16
|
+
}
|
17
|
+
|
18
|
+
@mixin border-top-right-radius($top-right) {
|
19
|
+
-webkit-border-top-right-radius: $top-right;
|
20
|
+
-moz-border-radius-topright: $top-right;
|
21
|
+
border-top-right-radius: $top-right;
|
22
|
+
}
|
23
|
+
|
24
|
+
@mixin border-bottom-left-radius($bottom-left) {
|
25
|
+
-webkit-border-bottom-left-radius: $bottom-left;
|
26
|
+
-moz-border-radius-bottomleft: $bottom-left;
|
27
|
+
border-bottom-left-radius: $bottom-left;
|
28
|
+
}
|
29
|
+
|
30
|
+
@mixin border-bottom-right-radius($bottom-right) {
|
31
|
+
-webkit-border-bottom-right-radius: $bottom-right;
|
32
|
+
-moz-border-radius-bottomright: $bottom-right;
|
33
|
+
border-bottom-right-radius: $bottom-right;
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin border-top-radius($top) {
|
37
|
+
@include border-top-left-radius($top);
|
38
|
+
@include border-top-right-radius($top);
|
39
|
+
}
|
40
|
+
|
41
|
+
@mixin border-bottom-radius($bottom) {
|
42
|
+
@include border-bottom-left-radius($bottom);
|
43
|
+
@include border-bottom-right-radius($bottom);
|
44
|
+
}
|
45
|
+
|
46
|
+
@mixin border-left-radius($left) {
|
47
|
+
@include border-top-left-radius($left);
|
48
|
+
@include border-bottom-right-radius($left);
|
49
|
+
}
|
50
|
+
|
51
|
+
@mixin border-right-radius($right) {
|
52
|
+
@include border-top-right-radius($right);
|
53
|
+
@include border-bottom-right-radius($right);
|
54
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
@mixin box-sizing ($box) {
|
2
|
+
// content-box | border-box | inherit
|
3
|
+
@include experimental(box-sizing, $box,
|
4
|
+
-moz, -webkit, -o, -ms, not -khtml, official)
|
5
|
+
}
|
6
|
+
|
7
|
+
// @include box-sizing(content-box);
|
8
|
+
// @include box-sizing(border-box);
|
9
|
+
// @include box-sizing(inherit);
|
@@ -0,0 +1,18 @@
|
|
1
|
+
@mixin column-count($count, $rule, $gap) {
|
2
|
+
-webkit-column-count: $count;
|
3
|
+
-moz-column-count: $count;
|
4
|
+
column-count: $count;
|
5
|
+
|
6
|
+
-webkit-column-rule: $rule;
|
7
|
+
-moz-column-rule: $rule;
|
8
|
+
column-rule: $rule;
|
9
|
+
|
10
|
+
-webkit-column-gap: $gap;
|
11
|
+
-moz-column-gap: $gap;
|
12
|
+
column-gap: $gap;
|
13
|
+
}
|
14
|
+
|
15
|
+
// count: column count
|
16
|
+
// rule: rule style
|
17
|
+
// gap: padding between columns
|
18
|
+
// @include column-count(2, 1px solid #bbb, 2em)
|
@@ -0,0 +1,52 @@
|
|
1
|
+
// CSS3 Flexible Box Model and property defaults
|
2
|
+
|
3
|
+
// Custom shorthand notation for flexbox
|
4
|
+
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
|
5
|
+
@include display-box;
|
6
|
+
@include box-orient($orient);
|
7
|
+
@include box-pack($pack);
|
8
|
+
@include box-align($align);
|
9
|
+
}
|
10
|
+
|
11
|
+
@mixin display-box {
|
12
|
+
display: -webkit-box;
|
13
|
+
display: -moz-box;
|
14
|
+
display: box;
|
15
|
+
}
|
16
|
+
|
17
|
+
// horizontal|vertical|inline-axis|block-axis|inherit
|
18
|
+
@mixin box-orient($orient: inline-axis) {
|
19
|
+
@include mw-experimental(box-orient, $orient);
|
20
|
+
}
|
21
|
+
|
22
|
+
// start|end|center|justify
|
23
|
+
@mixin box-pack($pack: start) {
|
24
|
+
@include mw-experimental(box-pack, $pack);
|
25
|
+
}
|
26
|
+
|
27
|
+
// start|end|center|baseline|stretch
|
28
|
+
@mixin box-align($align: stretch) {
|
29
|
+
@include mw-experimental(box-align, $align);
|
30
|
+
}
|
31
|
+
|
32
|
+
// normal|reverse|inherit
|
33
|
+
@mixin box-direction($direction: normal) {
|
34
|
+
@include mw-experimental(box-direction, $direction);
|
35
|
+
}
|
36
|
+
|
37
|
+
// single|multiple
|
38
|
+
@mixin box-lines($lines: single) {
|
39
|
+
@include mw-experimental(box-lines, $lines);
|
40
|
+
}
|
41
|
+
|
42
|
+
@mixin box-ordinal-group($integer: 1) {
|
43
|
+
@include mw-experimental(box-ordinal-group, $integer);
|
44
|
+
}
|
45
|
+
|
46
|
+
@mixin box-flex($value: 0.0) {
|
47
|
+
@include mw-experimental(box-flex, $value);
|
48
|
+
}
|
49
|
+
|
50
|
+
@mixin box-flex-group($integer: 1) {
|
51
|
+
@include mw-experimental(box-flex-group, $integer);
|
52
|
+
}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
// Legacy support for inline-block in IE7 (maybe IE6)
|
2
|
+
@mixin inline-block {
|
3
|
+
display: -moz-inline-box;
|
4
|
+
-moz-box-orient: vertical;
|
5
|
+
display: inline-block;
|
6
|
+
vertical-align: baseline;
|
7
|
+
zoom: 1;
|
8
|
+
*display: inline;
|
9
|
+
*vertical-align: auto;
|
10
|
+
}
|
11
|
+
|
12
|
+
// remove spaces from inline-blocks. this is hack, in general. The better way - remove it from HTML
|
13
|
+
@mixin inline-block-fix {
|
14
|
+
letter-spacing: -.3em;
|
15
|
+
|
16
|
+
> * {
|
17
|
+
letter-spacing: normal;
|
18
|
+
word-spacing: normal;
|
19
|
+
}
|
20
|
+
|
21
|
+
.webkit & {
|
22
|
+
word-spacing: normal;
|
23
|
+
}
|
24
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
// Requires Sass 3.1+
|
2
|
+
@mixin linear-gradient($pos, $G1, $G2: false,
|
3
|
+
$G3: false, $G4: false,
|
4
|
+
$G5: false, $G6: false,
|
5
|
+
$G7: false, $G8: false,
|
6
|
+
$G9: false, $G10: false) {
|
7
|
+
// Detect what type of value exists in $pos
|
8
|
+
$pos-type: type-of(nth($pos, 1));
|
9
|
+
|
10
|
+
// If $pos is missing from mixin, reassign vars and add default position
|
11
|
+
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
|
12
|
+
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
|
13
|
+
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
|
14
|
+
$pos: top; // Default position
|
15
|
+
}
|
16
|
+
|
17
|
+
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
|
18
|
+
|
19
|
+
background-color: nth($G1, 1);
|
20
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from($G1), to($G2)); /* Saf4+, Chrome */
|
21
|
+
background-image: -webkit-linear-gradient($pos, $full);
|
22
|
+
background-image: -moz-linear-gradient($pos, $full);
|
23
|
+
background-image: -ms-linear-gradient($pos, $full);
|
24
|
+
background-image: -o-linear-gradient($pos, $full);
|
25
|
+
background-image: unquote("linear-gradient(#{$pos}, #{$full})");
|
26
|
+
}
|
27
|
+
|
28
|
+
@mixin gradient($pos, $G1, $G2: false,
|
29
|
+
$G3: false, $G4: false,
|
30
|
+
$G5: false, $G6: false,
|
31
|
+
$G7: false, $G8: false,
|
32
|
+
$G9: false, $G10: false) {
|
33
|
+
@include linear-gradient($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
|
34
|
+
}
|
35
|
+
|
36
|
+
|
37
|
+
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
|
38
|
+
|
39
|
+
// @include linear-gradient(#1e5799, #2989d8);
|
40
|
+
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
|
41
|
+
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
|
@@ -0,0 +1,21 @@
|
|
1
|
+
// Requires Sass 3.1+
|
2
|
+
@mixin radial-gradient($pos, $shape-size,
|
3
|
+
$G1, $G2,
|
4
|
+
$G3: false, $G4: false,
|
5
|
+
$G5: false, $G6: false,
|
6
|
+
$G7: false, $G8: false,
|
7
|
+
$G9: false, $G10: false) {
|
8
|
+
|
9
|
+
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
|
10
|
+
|
11
|
+
background-color: nth($G1, 1);
|
12
|
+
background-image: -webkit-radial-gradient($pos, $shape-size, $full);
|
13
|
+
background-image: -moz-radial-gradient($pos, $shape-size, $full);
|
14
|
+
background-image: -ms-radial-gradient($pos, $shape-size, $full);
|
15
|
+
background-image: -o-radial-gradient($pos, $shape-size, $full);
|
16
|
+
background-image: radial-gradient($pos, $shape-size, $full);
|
17
|
+
}
|
18
|
+
|
19
|
+
// Usage: Gradient position and shape-size are required. Color stops are optional.
|
20
|
+
// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
|
21
|
+
// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
|
@@ -0,0 +1,13 @@
|
|
1
|
+
@mixin transform($property: none) {
|
2
|
+
// none | <transform-function>
|
3
|
+
@include experimental(transform, $property,
|
4
|
+
-moz, -webkit, -o, -ms, not -khtml, official);
|
5
|
+
}
|
6
|
+
|
7
|
+
@mixin transform-origin($axes: 50%) {
|
8
|
+
// x-axis - left | center | right | length | %
|
9
|
+
// y-axis - top | center | bottom | length | %
|
10
|
+
// z-axis - length
|
11
|
+
@include experimental(transform-origin, $axes,
|
12
|
+
-moz, -webkit, -o, -ms, not -khtml, official);
|
13
|
+
}
|
@@ -0,0 +1,91 @@
|
|
1
|
+
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
|
2
|
+
// Example: @include transition (all, 2.0s, ease-in-out);
|
3
|
+
// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
|
4
|
+
// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
|
5
|
+
|
6
|
+
@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
|
7
|
+
|
8
|
+
// Detect # of args passed into each variable
|
9
|
+
$length-of-property: length($property);
|
10
|
+
$length-of-duration: length($duration);
|
11
|
+
$length-of-timing-function: length($timing-function);
|
12
|
+
$length-of-delay: length($delay);
|
13
|
+
|
14
|
+
@if $length-of-property > 1 {
|
15
|
+
@include transition-property(zip($property)); }
|
16
|
+
@else {
|
17
|
+
@include transition-property( $property);
|
18
|
+
}
|
19
|
+
|
20
|
+
@if $length-of-duration > 1 {
|
21
|
+
@include transition-duration(zip($duration)); }
|
22
|
+
@else {
|
23
|
+
@include transition-duration( $duration);
|
24
|
+
}
|
25
|
+
|
26
|
+
@if $length-of-timing-function > 1 {
|
27
|
+
@include transition-timing-function(zip($timing-function)); }
|
28
|
+
@else {
|
29
|
+
@include transition-timing-function( $timing-function);
|
30
|
+
}
|
31
|
+
|
32
|
+
@if $length-of-delay > 1 {
|
33
|
+
@include transition-delay(zip($delay)); }
|
34
|
+
@else {
|
35
|
+
@include transition-delay( $delay);
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
|
40
|
+
@mixin transition-property ($prop-1: all,
|
41
|
+
$prop-2: false, $prop-3: false,
|
42
|
+
$prop-4: false, $prop-5: false,
|
43
|
+
$prop-6: false, $prop-7: false,
|
44
|
+
$prop-8: false, $prop-9: false)
|
45
|
+
{
|
46
|
+
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
|
47
|
+
$prop-6, $prop-7, $prop-8, $prop-9);
|
48
|
+
|
49
|
+
@include experimental(transition-property, $full,
|
50
|
+
-moz, -webkit, -o, -ms, not -khtml, official);
|
51
|
+
}
|
52
|
+
|
53
|
+
@mixin transition-duration ($time-1: 0,
|
54
|
+
$time-2: false, $time-3: false,
|
55
|
+
$time-4: false, $time-5: false,
|
56
|
+
$time-6: false, $time-7: false,
|
57
|
+
$time-8: false, $time-9: false)
|
58
|
+
{
|
59
|
+
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
|
60
|
+
$time-6, $time-7, $time-8, $time-9);
|
61
|
+
|
62
|
+
@include experimental(transition-duration, $full,
|
63
|
+
-moz, -webkit, -o, -ms, not -khtml, official);
|
64
|
+
}
|
65
|
+
|
66
|
+
@mixin transition-timing-function ($motion-1: ease,
|
67
|
+
$motion-2: false, $motion-3: false,
|
68
|
+
$motion-4: false, $motion-5: false,
|
69
|
+
$motion-6: false, $motion-7: false,
|
70
|
+
$motion-8: false, $motion-9: false)
|
71
|
+
{
|
72
|
+
$full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
|
73
|
+
$motion-6, $motion-7, $motion-8, $motion-9);
|
74
|
+
|
75
|
+
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
|
76
|
+
@include experimental(transition-timing-function, $full,
|
77
|
+
-moz, -webkit, -o, -ms, not -khtml, official);
|
78
|
+
}
|
79
|
+
|
80
|
+
@mixin transition-delay ($time-1: 0,
|
81
|
+
$time-2: false, $time-3: false,
|
82
|
+
$time-4: false, $time-5: false,
|
83
|
+
$time-6: false, $time-7: false,
|
84
|
+
$time-8: false, $time-9: false)
|
85
|
+
{
|
86
|
+
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
|
87
|
+
$time-6, $time-7, $time-8, $time-9);
|
88
|
+
|
89
|
+
@include experimental(transition-timing-function, $full,
|
90
|
+
-moz, -webkit, -o, -ms, not -khtml, official);
|
91
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
@mixin user-select($value) {
|
2
|
+
// auto | none | text
|
3
|
+
@include experimental(user-select, $value,
|
4
|
+
-moz, -webkit, -o, not -ms, not -khtml, official);
|
5
|
+
}
|
6
|
+
|
7
|
+
// Usage: Gradient position and shape-size are required. Color stops are optional.
|
8
|
+
// @include user-select(none);
|
9
|
+
// @include user-select(text);
|
10
|
+
// @include user-select(all);
|
@@ -0,0 +1,52 @@
|
|
1
|
+
@mixin experimental($property, $value,
|
2
|
+
$moz : true,
|
3
|
+
$webkit : true,
|
4
|
+
$o : true,
|
5
|
+
$ms : true,
|
6
|
+
$khtml : true,
|
7
|
+
$official : true
|
8
|
+
) {
|
9
|
+
@if $moz { -moz-#{$property} : $value; }
|
10
|
+
@if $webkit { -webkit-#{$property} : $value; }
|
11
|
+
@if $o { -o-#{$property} : $value; }
|
12
|
+
@if $ms { -ms-#{$property} : $value; }
|
13
|
+
@if $khtml { -khtml-#{$property} : $value; }
|
14
|
+
@if $official { #{$property} : $value; }
|
15
|
+
}
|
16
|
+
|
17
|
+
@mixin mwo-experimental($property, $value) {
|
18
|
+
@include experimental($property, $value,
|
19
|
+
-moz, -webkit, -o, not -ms, not -khtml, official);
|
20
|
+
}
|
21
|
+
|
22
|
+
@mixin m-experimental($property, $value) {
|
23
|
+
@include experimental($property, $value,
|
24
|
+
-moz, not -webkit, not -o, not -ms, not -khtml, official);
|
25
|
+
}
|
26
|
+
|
27
|
+
@mixin o-experimental($property, $value) {
|
28
|
+
@include experimental($property, $value,
|
29
|
+
not -moz, not -webkit, -o, not -ms, not -khtml, official);
|
30
|
+
}
|
31
|
+
|
32
|
+
@mixin w-experimental($property, $value) {
|
33
|
+
@include experimental($property, $value,
|
34
|
+
not -moz, -webkit, not -o, not -ms, not -khtml, official);
|
35
|
+
}
|
36
|
+
|
37
|
+
@mixin mw-experimental($property, $value) {
|
38
|
+
@include experimental($property, $value,
|
39
|
+
-moz, -webkit, not -o, not -ms, not -khtml, official);
|
40
|
+
}
|
41
|
+
|
42
|
+
@mixin mo-experimental($property, $value) {
|
43
|
+
@include experimental($property, $value,
|
44
|
+
-moz, not -webkit, -o, not -ms, not -khtml, official);
|
45
|
+
}
|
46
|
+
|
47
|
+
@mixin wo-experimental($property, $value) {
|
48
|
+
@include experimental($property, $value,
|
49
|
+
not -moz, -webkit, -o, not -ms, not -khtml, official);
|
50
|
+
}
|
51
|
+
// @include experimental(property, value)
|
52
|
+
// @include experimental(property, value, -moz, -webkit, not -o, not-ks, not -khtml, official)
|
@@ -0,0 +1,30 @@
|
|
1
|
+
//
|
2
|
+
// $media
|
3
|
+
// handhelds
|
4
|
+
// wide-handhelds
|
5
|
+
// tablets
|
6
|
+
// small-screens
|
7
|
+
// wide-screens
|
8
|
+
//
|
9
|
+
|
10
|
+
$media-handhelds: 480px !default;
|
11
|
+
$media-wide-handhelds: 699px !default;
|
12
|
+
$media-tablets: 960px !default;
|
13
|
+
$media-small-screens: 1200px !default;
|
14
|
+
// $media-wide-screens: !default;
|
15
|
+
|
16
|
+
$media-set: (
|
17
|
+
handhelds: "screen and (max-width: #{$media-handhelds})",
|
18
|
+
wide-handhelds: "screen and (min-width: #{$media-handhelds}) and (max-width: #{$media-wide-handhelds})",
|
19
|
+
tablets: "screen and (min-width: #{$media-wide-handhelds}) and (max-width: #{$media-tablets})",
|
20
|
+
small-screens: "screen and (min-width: #{$media-tablets}) and (max-width: #{$media-small-screens})",
|
21
|
+
wide-screens: "screen and (min-width: #{$media-small-screens})"
|
22
|
+
);
|
23
|
+
|
24
|
+
@mixin respond-to($medias...) {
|
25
|
+
$result: ();
|
26
|
+
@each $media in $medias {
|
27
|
+
$result: append($result, map-get($media-set, $media), comma);
|
28
|
+
}
|
29
|
+
@media #{$result} { @content; }
|
30
|
+
}
|
data/lib/wiskey/version.rb
CHANGED
data/wiskey.gemspec
CHANGED
@@ -8,7 +8,7 @@ Gem::Specification.new do |s|
|
|
8
8
|
|
9
9
|
s.authors = [ "Alexey Osipenko" ]
|
10
10
|
s.email = [ "alexey@osipenko.in.ua" ]
|
11
|
-
s.homepage = "
|
11
|
+
s.homepage = "https://github.com/cimon-io/wiskey/"
|
12
12
|
s.description = "The rails 3 gem, which include SCSS mixins and default rails templates for true-cutupping."
|
13
13
|
s.version = Wiskey::VERSION
|
14
14
|
|
metadata
CHANGED
@@ -1,65 +1,79 @@
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
2
|
name: wiskey
|
3
|
-
version: !ruby/object:Gem::Version
|
4
|
-
|
5
|
-
segments:
|
6
|
-
- 0
|
7
|
-
- 0
|
8
|
-
- 8
|
9
|
-
version: 0.0.8
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.9
|
10
5
|
platform: ruby
|
11
|
-
authors:
|
6
|
+
authors:
|
12
7
|
- Alexey Osipenko
|
13
8
|
autorequire:
|
14
9
|
bindir: bin
|
15
10
|
cert_chain: []
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
dependencies:
|
20
|
-
- !ruby/object:Gem::Dependency
|
11
|
+
date: 2015-06-07 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
21
14
|
name: sass
|
22
|
-
|
23
|
-
|
24
|
-
requirements:
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
25
17
|
- - ">="
|
26
|
-
- !ruby/object:Gem::Version
|
27
|
-
|
28
|
-
- 3
|
29
|
-
- 1
|
30
|
-
version: "3.1"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '3.1'
|
31
20
|
type: :runtime
|
32
|
-
version_requirements: *id001
|
33
|
-
- !ruby/object:Gem::Dependency
|
34
|
-
name: rake
|
35
21
|
prerelease: false
|
36
|
-
|
37
|
-
requirements:
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
38
24
|
- - ">="
|
39
|
-
- !ruby/object:Gem::Version
|
40
|
-
|
41
|
-
|
42
|
-
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '3.1'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rake
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ">="
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '0'
|
43
34
|
type: :development
|
44
|
-
|
45
|
-
|
46
|
-
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ">="
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
description: The rails 3 gem, which include SCSS mixins and default rails templates
|
42
|
+
for true-cutupping.
|
43
|
+
email:
|
47
44
|
- alexey@osipenko.in.ua
|
48
|
-
executables:
|
45
|
+
executables:
|
49
46
|
- wiskey
|
50
47
|
extensions: []
|
51
|
-
|
52
48
|
extra_rdoc_files: []
|
53
|
-
|
54
|
-
|
55
|
-
- .
|
56
|
-
- .gitmodules
|
57
|
-
- .rvmrc
|
49
|
+
files:
|
50
|
+
- ".gitignore"
|
51
|
+
- ".rvmrc"
|
58
52
|
- Gemfile
|
59
53
|
- Gemfile.lock
|
60
54
|
- MIT-LICENSE
|
61
55
|
- README.rdoc
|
62
56
|
- Rakefile
|
57
|
+
- app/assets/stylesheets/README.md
|
58
|
+
- app/assets/stylesheets/_wiskey.scss
|
59
|
+
- app/assets/stylesheets/wiskey/css3/_animation.scss
|
60
|
+
- app/assets/stylesheets/wiskey/css3/_background-clip.scss
|
61
|
+
- app/assets/stylesheets/wiskey/css3/_border-radius.scss
|
62
|
+
- app/assets/stylesheets/wiskey/css3/_box-shadow.scss
|
63
|
+
- app/assets/stylesheets/wiskey/css3/_box-sizing.scss
|
64
|
+
- app/assets/stylesheets/wiskey/css3/_column-count.scss
|
65
|
+
- app/assets/stylesheets/wiskey/css3/_flex-box.scss
|
66
|
+
- app/assets/stylesheets/wiskey/css3/_inline-block.scss
|
67
|
+
- app/assets/stylesheets/wiskey/css3/_linear-gradient.scss
|
68
|
+
- app/assets/stylesheets/wiskey/css3/_opacity.scss
|
69
|
+
- app/assets/stylesheets/wiskey/css3/_radial-gradient.scss
|
70
|
+
- app/assets/stylesheets/wiskey/css3/_text-overflow.scss
|
71
|
+
- app/assets/stylesheets/wiskey/css3/_text-shadow.scss
|
72
|
+
- app/assets/stylesheets/wiskey/css3/_transform.scss
|
73
|
+
- app/assets/stylesheets/wiskey/css3/_transition.scss
|
74
|
+
- app/assets/stylesheets/wiskey/css3/_user-select.scss
|
75
|
+
- app/assets/stylesheets/wiskey/functions/_experimental.scss
|
76
|
+
- app/assets/stylesheets/wiskey/functions/_medias.scss
|
63
77
|
- bin/wiskey
|
64
78
|
- lib/tasks/install.rake
|
65
79
|
- lib/wiskey.rb
|
@@ -73,35 +87,28 @@ files:
|
|
73
87
|
- lib/wiskey/sass_extensions/functions/split_params.rb
|
74
88
|
- lib/wiskey/version.rb
|
75
89
|
- wiskey.gemspec
|
76
|
-
|
77
|
-
homepage: http://aratak.github.com/wiskey/
|
90
|
+
homepage: https://github.com/cimon-io/wiskey/
|
78
91
|
licenses: []
|
79
|
-
|
92
|
+
metadata: {}
|
80
93
|
post_install_message:
|
81
94
|
rdoc_options: []
|
82
|
-
|
83
|
-
require_paths:
|
95
|
+
require_paths:
|
84
96
|
- lib
|
85
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
86
|
-
requirements:
|
97
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
98
|
+
requirements:
|
87
99
|
- - ">="
|
88
|
-
- !ruby/object:Gem::Version
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
required_rubygems_version: !ruby/object:Gem::Requirement
|
93
|
-
requirements:
|
100
|
+
- !ruby/object:Gem::Version
|
101
|
+
version: '0'
|
102
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
103
|
+
requirements:
|
94
104
|
- - ">="
|
95
|
-
- !ruby/object:Gem::Version
|
96
|
-
|
97
|
-
- 0
|
98
|
-
version: "0"
|
105
|
+
- !ruby/object:Gem::Version
|
106
|
+
version: '0'
|
99
107
|
requirements: []
|
100
|
-
|
101
108
|
rubyforge_project:
|
102
|
-
rubygems_version:
|
109
|
+
rubygems_version: 2.2.2
|
103
110
|
signing_key:
|
104
|
-
specification_version:
|
111
|
+
specification_version: 4
|
105
112
|
summary: The solutoiuns for the rails cutupping.
|
106
113
|
test_files: []
|
107
|
-
|
114
|
+
has_rdoc:
|
data/.gitmodules
DELETED