mai 0.0.3 → 0.0.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. data/README.md +1 -1
  2. data/lib/mai/version.rb +1 -1
  3. data/sass/mai/_base.sass +21 -0
  4. data/sass/mai/_config.sass +23 -2
  5. data/sass/mai/base/_base.sass +23 -13
  6. data/sass/mai/base/_helpers.sass +19 -6
  7. data/sass/mai/config/_base.sass +11 -5
  8. data/sass/mai/config/_colors.sass +42 -11
  9. data/sass/mai/config/_global.sass +13 -15
  10. data/sass/mai/config/_media.sass +49 -13
  11. data/sass/mai/config/modules/_grid.sass +181 -0
  12. data/sass/mai/modules/_grid.sass +12 -3
  13. data/sass/mai/modules/_transitions.sass +29 -0
  14. data/sass/mai/modules/_ui.sass +21 -0
  15. data/sass/mai/modules/grid/_base.sass +23 -143
  16. data/sass/mai/modules/grid/_block.sass +3 -0
  17. data/sass/mai/modules/grid/_media.sass +2 -1
  18. data/sass/mai/modules/grid/media/_base.sass +14 -88
  19. data/sass/mai/modules/grid/media/_block.sass +9 -0
  20. data/sass/mai/modules/transitions/_base.sass +38 -0
  21. data/sass/mai/modules/transitions/_bounce.sass +38 -0
  22. data/sass/mai/modules/transitions/_fade.sass +143 -0
  23. data/sass/mai/modules/transitions/_flash.sass +25 -0
  24. data/sass/mai/modules/transitions/_flip.sass +117 -0
  25. data/sass/mai/modules/transitions/_pulse.sass +44 -0
  26. data/sass/mai/modules/transitions/_scale.sass +61 -0
  27. data/sass/mai/modules/transitions/_shake.sass +38 -0
  28. data/sass/mai/modules/transitions/_slide.sass +82 -0
  29. data/sass/mai/modules/transitions/_tada.sass +52 -0
  30. data/sass/mai/themes/_pinky.sass +10 -0
  31. data/sass/mai/themes/pinky/_colors.sass +0 -1
  32. data/sass/mai/utils/_context.sass +44 -12
  33. data/sass/mai/utils/_global.sass +9 -5
  34. data/sass/mai/utils/_media.sass +33 -17
  35. data/sass/mai/utils/_mobile.sass +8 -4
  36. data/sass/mai/utils/_rgba.sass +37 -8
  37. data/sass/mai/utils/_ui.sass +11 -26
  38. metadata +25 -7
  39. checksums.yaml +0 -15
  40. data/sass/mai/config/_grid.sass +0 -17
  41. data/sass/mai/modules/grid/_functions.sass +0 -11
data/sass/mai/modules/transitions/_fade.sass ADDED
@@ -0,0 +1,143 @@
1
+
2
+ @import base
3
+
4
+ /* Definition
5
+ ----------------------------------------------------------------------------------------------------------------------
6
+
7
+ .transition.fade
8
+ &.in
9
+ -webkit-animation-name: fade
10
+ animation-name: fade
11
+ &.out
12
+ -webkit-animation-name: fadeOut
13
+ animation-name: fadeOut
14
+ &.up
15
+ &.in
16
+ -webkit-animation-name: fadeUp
17
+ animation-name: fadeUp
18
+ &.out
19
+ -webkit-animation-name: fadeUpOut
20
+ animation-name: fadeUpOut
21
+ &.down
22
+ &.in
23
+ -webkit-animation-name: fadeDown
24
+ animation-name: fadeDown
25
+ &.out
26
+ -webkit-animation-name: fadeDownOut
27
+ animation-name: fadeDownOut
28
+
29
+
30
+ /* Keyframes
31
+ ----------------------------------------------------------------------------------------------------------------------
32
+
33
+ @-webkit-keyframes fade
34
+ 0%
35
+ opacity: 0
36
+ 100%
37
+ opacity: 1
38
+
39
+ @keyframes fade
40
+ 0%
41
+ opacity: 0
42
+ 100%
43
+ opacity: 1
44
+
45
+ @-webkit-keyframes fadeOut
46
+ 0%
47
+ opacity: 1
48
+ 100%
49
+ opacity: 0
50
+
51
+ @keyframes fadeOut
52
+ 0%
53
+ opacity: 1
54
+ 100%
55
+ opacity: 0
56
+
57
+ @-webkit-keyframes fadeUp
58
+ 0%
59
+ opacity: 0
60
+ -webkit-transform: translateY(20px)
61
+ transform: translateY(20px)
62
+ 100%
63
+ opacity: 1
64
+ -webkit-transform: translateY(0)
65
+ transform: translateY(0)
66
+
67
+ @keyframes fadeUp
68
+ 0%
69
+ opacity: 0
70
+ -webkit-transform: translateY(20px)
71
+ -ms-transform: translateY(20px)
72
+ transform: translateY(20px)
73
+ 100%
74
+ opacity: 1
75
+ -webkit-transform: translateY(0)
76
+ -ms-transform: translateY(0)
77
+ transform: translateY(0)
78
+
79
+ @-webkit-keyframes fadeUpOut
80
+ 0%
81
+ opacity: 1
82
+ -webkit-transform: translateY(0)
83
+ transform: translateY(0)
84
+ 100%
85
+ opacity: 0
86
+ -webkit-transform: translateY(20px)
87
+ transform: translateY(20px)
88
+
89
+ @keyframes fadeUpOut
90
+ 0%
91
+ opacity: 1
92
+ -webkit-transform: translateY(0)
93
+ -ms-transform: translateY(0)
94
+ transform: translateY(0)
95
+ 100%
96
+ opacity: 0
97
+ -webkit-transform: translateY(20px)
98
+ -ms-transform: translateY(20px)
99
+ transform: translateY(20px)
100
+
101
+ @-webkit-keyframes fadeDown
102
+ 0%
103
+ opacity: 0
104
+ -webkit-transform: translateY(-20px)
105
+ transform: translateY(-20px)
106
+ 100%
107
+ opacity: 1
108
+ -webkit-transform: translateY(0)
109
+ transform: translateY(0)
110
+
111
+ @keyframes fadeDown
112
+ 0%
113
+ opacity: 0
114
+ -webkit-transform: translateY(-20px)
115
+ -ms-transform: translateY(-20px)
116
+ transform: translateY(-20px)
117
+ 100%
118
+ opacity: 1
119
+ -webkit-transform: translateY(0)
120
+ -ms-transform: translateY(0)
121
+ transform: translateY(0)
122
+
123
+ @-webkit-keyframes fadeDownOut
124
+ 0%
125
+ opacity: 1
126
+ -webkit-transform: translateY(0)
127
+ transform: translateY(0)
128
+ 100%
129
+ opacity: 0
130
+ -webkit-transform: translateY(-20px)
131
+ transform: translateY(-20px)
132
+
133
+ @keyframes fadeDownOut
134
+ 0%
135
+ opacity: 1
136
+ -webkit-transform: translateY(0)
137
+ -ms-transform: translateY(0)
138
+ transform: translateY(0)
139
+ 100%
140
+ opacity: 0
141
+ -webkit-transform: translateY(-20px)
142
+ -ms-transform: translateY(-20px)
143
+ transform: translateY(-20px)
data/sass/mai/modules/transitions/_flash.sass ADDED
@@ -0,0 +1,25 @@
1
+
2
+ @import base
3
+
4
+ /* Definition
5
+ ----------------------------------------------------------------------------------------------------------------------
6
+
7
+ .transition.flash
8
+ -webkit-animation-name: flash
9
+ animation-name: flash
10
+
11
+
12
+ /* Keyframes
13
+ ----------------------------------------------------------------------------------------------------------------------
14
+
15
+ @-webkit-keyframes flash
16
+ 0%, 50%, 100%
17
+ opacity: 1
18
+ 25%, 75%
19
+ opacity: 0
20
+
21
+ @keyframes flash
22
+ 0%, 50%, 100%
23
+ opacity: 1
24
+ 25%, 75%
25
+ opacity: 0
data/sass/mai/modules/transitions/_flip.sass ADDED
@@ -0,0 +1,117 @@
1
+
2
+ @import base
3
+
4
+ /* Definition
5
+ ----------------------------------------------------------------------------------------------------------------------
6
+
7
+ .transition.flip
8
+ &.in, &.out
9
+ -webkit-perspective: 2000px
10
+ -ms-perspective: 2000px
11
+ perspective: 2000px
12
+ &.horizontal
13
+ &.in
14
+ -webkit-animation-name: horizontalFlip
15
+ animation-name: horizontalFlip
16
+ &.out
17
+ -webkit-animation-name: horizontalFlipOut
18
+ animation-name: horizontalFlipOut
19
+ &.vertical
20
+ &.in
21
+ -webkit-animation-name: verticalFlip
22
+ animation-name: verticalFlip
23
+ &.out
24
+ -webkit-animation-name: verticalFlipOut
25
+ animation-name: verticalFlipOut
26
+
27
+
28
+ /* Keyframes
29
+ ----------------------------------------------------------------------------------------------------------------------
30
+
31
+ @-webkit-keyframes horizontalFlip
32
+ 0%
33
+ -webkit-transform: rotateY(-90deg)
34
+ transform: rotateY(-90deg)
35
+ opacity: 0
36
+ 100%
37
+ -webkit-transform: rotateY(0deg)
38
+ transform: rotateY(0deg)
39
+ opacity: 1
40
+
41
+ @keyframes horizontalFlip
42
+ 0%
43
+ -webkit-transform: rotateY(-90deg)
44
+ -ms-transform: rotateY(-90deg)
45
+ transform: rotateY(-90deg)
46
+ opacity: 0
47
+ 100%
48
+ -webkit-transform: rotateY(0deg)
49
+ -ms-transform: rotateY(0deg)
50
+ transform: rotateY(0deg)
51
+ opacity: 1
52
+
53
+ @-webkit-keyframes horizontalFlipOut
54
+ 0%
55
+ -webkit-transform: rotateY(0deg)
56
+ transform: rotateY(0deg)
57
+ opacity: 0
58
+ 100%
59
+ -webkit-transform: rotateY(90deg)
60
+ transform: rotateY(90deg)
61
+ opacity: 1
62
+
63
+ @keyframes horizontalFlipOut
64
+ 0%
65
+ -webkit-transform: rotateY(0deg)
66
+ -ms-transform: rotateY(0deg)
67
+ transform: rotateY(0deg)
68
+ opacity: 0
69
+ 100%
70
+ -webkit-transform: rotateY(90deg)
71
+ -ms-transform: rotateY(90deg)
72
+ transform: rotateY(90deg)
73
+ opacity: 1
74
+
75
+ @-webkit-keyframes verticalFlip
76
+ 0%
77
+ -webkit-transform: rotateX(-90deg)
78
+ transform: rotateX(-90deg)
79
+ opacity: 0
80
+ 100%
81
+ -webkit-transform: rotateX(0deg)
82
+ transform: rotateX(0deg)
83
+ opacity: 1
84
+
85
+ @keyframes verticalFlip
86
+ 0%
87
+ -webkit-transform: rotateX(-90deg)
88
+ -ms-transform: rotateX(-90deg)
89
+ transform: rotateX(-90deg)
90
+ opacity: 0
91
+ 100%
92
+ -webkit-transform: rotateX(0deg)
93
+ -ms-transform: rotateX(0deg)
94
+ transform: rotateX(0deg)
95
+ opacity: 1
96
+
97
+ @-webkit-keyframes verticalFlipOut
98
+ 0%
99
+ -webkit-transform: rotateX(0deg)
100
+ transform: rotateX(0deg)
101
+ opacity: 1
102
+ 100%
103
+ -webkit-transform: rotateX(-90deg)
104
+ transform: rotateX(-90deg)
105
+ opacity: 0
106
+
107
+ @keyframes verticalFlipOut
108
+ 0%
109
+ -webkit-transform: rotateX(0deg)
110
+ -ms-transform: rotateX(0deg)
111
+ transform: rotateX(0deg)
112
+ opacity: 1
113
+ 100%
114
+ -webkit-transform: rotateX(-90deg)
115
+ -ms-transform: rotateX(-90deg)
116
+ transform: rotateX(-90deg)
117
+ opacity: 0
data/sass/mai/modules/transitions/_pulse.sass ADDED
@@ -0,0 +1,44 @@
1
+
2
+ @import base
3
+
4
+ /* Definition
5
+ ----------------------------------------------------------------------------------------------------------------------
6
+
7
+ .transition.pulse
8
+ -webkit-animation-name: pulse
9
+ animation-name: pulse
10
+
11
+
12
+ /* Keyframes
13
+ ----------------------------------------------------------------------------------------------------------------------
14
+
15
+ @-webkit-keyframes pulse
16
+ 0%
17
+ -webkit-transform: scale(1)
18
+ transform: scale(1)
19
+ opacity: 1
20
+ 50%
21
+ -webkit-transform: scale(0.9)
22
+ transform: scale(0.9)
23
+ opacity: 0.7
24
+ 100%
25
+ -webkit-transform: scale(1)
26
+ transform: scale(1)
27
+ opacity: 1
28
+
29
+ @keyframes pulse
30
+ 0%
31
+ -webkit-transform: scale(1)
32
+ -ms-transform: scale(1)
33
+ transform: scale(1)
34
+ opacity: 1
35
+ 50%
36
+ -webkit-transform: scale(0.9)
37
+ -ms-transform: scale(0.9)
38
+ transform: scale(0.9)
39
+ opacity: 0.7
40
+ 100%
41
+ -webkit-transform: scale(1)
42
+ -ms-transform: scale(1)
43
+ transform: scale(1)
44
+ opacity: 1
data/sass/mai/modules/transitions/_scale.sass ADDED
@@ -0,0 +1,61 @@
1
+
2
+ @import base
3
+
4
+ /* Definition
5
+ ----------------------------------------------------------------------------------------------------------------------
6
+
7
+ .transition.scale
8
+ &.in
9
+ -webkit-animation-name: scale
10
+ animation-name: scale
11
+ &.out
12
+ -webkit-animation-name: scaleOut
13
+ animation-name: scaleOut
14
+
15
+
16
+ /* Keyframes
17
+ ----------------------------------------------------------------------------------------------------------------------
18
+
19
+ @-webkit-keyframes scale
20
+ 0%
21
+ opacity: 0
22
+ -webkit-transform: scale(0.7)
23
+ transform: scale(0.7)
24
+ 100%
25
+ opacity: 1
26
+ -webkit-transform: scale(1)
27
+ transform: scale(1)
28
+
29
+ @keyframes scale
30
+ 0%
31
+ opacity: 0
32
+ -webkit-transform: scale(0.7)
33
+ -ms-transform: scale(0.7)
34
+ transform: scale(0.7)
35
+ 100%
36
+ opacity: 1
37
+ -webkit-transform: scale(1)
38
+ -ms-transform: scale(1)
39
+ transform: scale(1)
40
+
41
+ @-webkit-keyframes scaleOut
42
+ 0%
43
+ opacity: 1
44
+ -webkit-transform: scale(1)
45
+ transform: scale(1)
46
+ 100%
47
+ opacity: 0
48
+ -webkit-transform: scale(0.7)
49
+ transform: scale(0.7)
50
+
51
+ @keyframes scaleOut
52
+ 0%
53
+ opacity: 1
54
+ -webkit-transform: scale(1)
55
+ -ms-transform: scale(1)
56
+ transform: scale(1)
57
+ 100%
58
+ opacity: 0
59
+ -webkit-transform: scale(0.7)
60
+ -ms-transform: scale(0.7)
61
+ transform: scale(0.7)
data/sass/mai/modules/transitions/_shake.sass ADDED
@@ -0,0 +1,38 @@
1
+
2
+ @import base
3
+
4
+ /* Definition
5
+ ----------------------------------------------------------------------------------------------------------------------
6
+
7
+ .transition.shake
8
+ -webkit-animation-name: shake
9
+ animation-name: shake
10
+
11
+
12
+ /* Keyframes
13
+ ----------------------------------------------------------------------------------------------------------------------
14
+
15
+ @-webkit-keyframes shake
16
+ 0%, 100%
17
+ -webkit-transform: translateX(0)
18
+ transform: translateX(0)
19
+ 10%, 30%, 50%, 70%, 90%
20
+ -webkit-transform: translateX(-10px)
21
+ transform: translateX(-10px)
22
+ 20%, 40%, 60%, 80%
23
+ -webkit-transform: translateX(10px)
24
+ transform: translateX(10px)
25
+
26
+ @keyframes shake
27
+ 0%, 100%
28
+ -webkit-transform: translateX(0)
29
+ -ms-transform: translateX(0)
30
+ transform: translateX(0)
31
+ 10%, 30%, 50%, 70%, 90%
32
+ -webkit-transform: translateX(-10px)
33
+ -ms-transform: translateX(-10px)
34
+ transform: translateX(-10px)
35
+ 20%, 40%, 60%, 80%
36
+ -webkit-transform: translateX(10px)
37
+ -ms-transform: translateX(10px)
38
+ transform: translateX(10px)
data/sass/mai/modules/transitions/_slide.sass ADDED
@@ -0,0 +1,82 @@
1
+
2
+ @import base
3
+
4
+ /* Definition
5
+ ----------------------------------------------------------------------------------------------------------------------
6
+
7
+ .transition.slide
8
+ &.down
9
+ &.in
10
+ -webkit-animation-name: slide
11
+ animation-name: slide
12
+ transform-origin: 50% 0%
13
+ -ms-transform-origin: 50% 0%
14
+ -webkit-transform-origin: 50% 0%
15
+ &.out
16
+ -webkit-animation-name: slideOut
17
+ animation-name: slideOut
18
+ transform-origin: 50% 0%
19
+ -ms-transform-origin: 50% 0%
20
+ -webkit-transform-origin: 50% 0%
21
+ &.up
22
+ &.in
23
+ -webkit-animation-name: slide
24
+ animation-name: slide
25
+ transform-origin: 50% 100%
26
+ -ms-transform-origin: 50% 100%
27
+ -webkit-transform-origin: 50% 100%
28
+ &.out
29
+ -webkit-animation-name: slideOut
30
+ animation-name: slideOut
31
+ transform-origin: 50% 100%
32
+ -ms-transform-origin: 50% 100%
33
+ -webkit-transform-origin: 50% 100%
34
+
35
+
36
+ /* Keyframes
37
+ ----------------------------------------------------------------------------------------------------------------------
38
+
39
+ @-webkit-keyframes slide
40
+ 0%
41
+ opacity: 0
42
+ -webkit-transform: scaleY(0)
43
+ transform: scaleY(0)
44
+ 100%
45
+ opacity: 1
46
+ -webkit-transform: scaleY(1)
47
+ transform: scaleY(1)
48
+
49
+ @keyframes slide
50
+ 0%
51
+ opacity: 0
52
+ -webkit-transform: scaleY(0)
53
+ -ms-transform: scaleY(0)
54
+ transform: scaleY(0)
55
+ 100%
56
+ opacity: 1
57
+ -webkit-transform: scaleY(1)
58
+ -ms-transform: scaleY(1)
59
+ transform: scaleY(1)
60
+
61
+
62
+ @-webkit-keyframes slideOut
63
+ 0%
64
+ opacity: 1
65
+ -webkit-transform: scaleY(1)
66
+ transform: scaleY(1)
67
+ 100%
68
+ opacity: 0
69
+ -webkit-transform: scaleY(0)
70
+ transform: scaleY(0)
71
+
72
+ @keyframes slideOut
73
+ 0%
74
+ opacity: 1
75
+ -webkit-transform: scaleY(1)
76
+ -ms-transform: scaleY(1)
77
+ transform: scaleY(1)
78
+ 100%
79
+ opacity: 0
80
+ -webkit-transform: scaleY(0)
81
+ -ms-transform: scaleY(0)
82
+ transform: scaleY(0)