mai 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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)