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.
- data/README.md +1 -1
- data/lib/mai/version.rb +1 -1
- data/sass/mai/_base.sass +21 -0
- data/sass/mai/_config.sass +23 -2
- data/sass/mai/base/_base.sass +23 -13
- data/sass/mai/base/_helpers.sass +19 -6
- data/sass/mai/config/_base.sass +11 -5
- data/sass/mai/config/_colors.sass +42 -11
- data/sass/mai/config/_global.sass +13 -15
- data/sass/mai/config/_media.sass +49 -13
- data/sass/mai/config/modules/_grid.sass +181 -0
- data/sass/mai/modules/_grid.sass +12 -3
- data/sass/mai/modules/_transitions.sass +29 -0
- data/sass/mai/modules/_ui.sass +21 -0
- data/sass/mai/modules/grid/_base.sass +23 -143
- data/sass/mai/modules/grid/_block.sass +3 -0
- data/sass/mai/modules/grid/_media.sass +2 -1
- data/sass/mai/modules/grid/media/_base.sass +14 -88
- data/sass/mai/modules/grid/media/_block.sass +9 -0
- data/sass/mai/modules/transitions/_base.sass +38 -0
- data/sass/mai/modules/transitions/_bounce.sass +38 -0
- data/sass/mai/modules/transitions/_fade.sass +143 -0
- data/sass/mai/modules/transitions/_flash.sass +25 -0
- data/sass/mai/modules/transitions/_flip.sass +117 -0
- data/sass/mai/modules/transitions/_pulse.sass +44 -0
- data/sass/mai/modules/transitions/_scale.sass +61 -0
- data/sass/mai/modules/transitions/_shake.sass +38 -0
- data/sass/mai/modules/transitions/_slide.sass +82 -0
- data/sass/mai/modules/transitions/_tada.sass +52 -0
- data/sass/mai/themes/_pinky.sass +10 -0
- data/sass/mai/themes/pinky/_colors.sass +0 -1
- data/sass/mai/utils/_context.sass +44 -12
- data/sass/mai/utils/_global.sass +9 -5
- data/sass/mai/utils/_media.sass +33 -17
- data/sass/mai/utils/_mobile.sass +8 -4
- data/sass/mai/utils/_rgba.sass +37 -8
- data/sass/mai/utils/_ui.sass +11 -26
- metadata +25 -7
- checksums.yaml +0 -15
- data/sass/mai/config/_grid.sass +0 -17
- data/sass/mai/modules/grid/_functions.sass +0 -11
data/README.md
CHANGED
data/lib/mai/version.rb
CHANGED
data/sass/mai/_base.sass
CHANGED
@@ -1,3 +1,24 @@
|
|
1
|
+
/*
|
2
|
+
* Base
|
3
|
+
*
|
4
|
+
* The Base package provides normalization across browsers along with some helper classes to make dealing with common
|
5
|
+
* tasks easier. It is a strict requirement for all other specific modules to work coherently and is therefore not
|
6
|
+
* contained in the 'modules' directory.
|
7
|
+
*
|
8
|
+
* @package Mai/Base
|
9
|
+
* @copyright 2013-2014 Muyo
|
10
|
+
* @link http://github.com/muyo/mai
|
11
|
+
* ------------------------------------------------------------------------------------------------------------------- /
|
12
|
+
|
13
|
+
/* External dependencies
|
14
|
+
----------------------------------------------------------------------------------------------------------------------
|
15
|
+
|
16
|
+
@import config
|
17
|
+
@import utils
|
18
|
+
|
19
|
+
|
20
|
+
/* Package files
|
21
|
+
----------------------------------------------------------------------------------------------------------------------
|
1
22
|
|
2
23
|
@import base/base
|
3
24
|
@import base/helpers
|
data/sass/mai/_config.sass
CHANGED
@@ -1,5 +1,26 @@
|
|
1
|
+
/*
|
2
|
+
* Config
|
3
|
+
*
|
4
|
+
* Provides configuration variables, functions and mixins used throughout all modules in Mai. In itself it does not
|
5
|
+
* generate any CSS and - since all variables/functions/mixins are prefixed - is safe to be included in your project
|
6
|
+
* as a whole and it is in fact recommended to do so.
|
7
|
+
*
|
8
|
+
* The imports are organized in an order so that all dependencies are met.
|
9
|
+
*
|
10
|
+
* @package Mai/Config
|
11
|
+
* @copyright 2013-2014 Muyo
|
12
|
+
* @link http://github.com/muyo/mai
|
13
|
+
* ------------------------------------------------------------------------------------------------------------------- /
|
14
|
+
|
15
|
+
/* Package files
|
16
|
+
----------------------------------------------------------------------------------------------------------------------
|
1
17
|
|
2
18
|
@import config/global
|
19
|
+
@import config/colors
|
3
20
|
@import config/base
|
4
|
-
@import config/
|
5
|
-
|
21
|
+
@import config/media
|
22
|
+
|
23
|
+
/* Module configuration
|
24
|
+
----------------------------------------------------------------------------------------------------------------------
|
25
|
+
|
26
|
+
@import config/modules/grid
|
data/sass/mai/base/_base.sass
CHANGED
@@ -1,12 +1,17 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
/*
|
2
|
+
* Base
|
3
|
+
*
|
4
|
+
* @package Mai/Base
|
5
|
+
* @copyright 2013-2014 Muyo
|
6
|
+
* @link http://github.com/muyo/mai
|
7
|
+
* ------------------------------------------------------------------------------------------------------------------- /
|
8
|
+
|
9
|
+
/* Box-sizing (border-box)
|
6
10
|
----------------------------------------------------------------------------------------------------------------------
|
11
|
+
Breaks IE compat below IE8. You'll need a box-sizing polyfill to get Mai to work in those.
|
7
12
|
|
8
|
-
|
9
|
-
|
13
|
+
*, *:before, *:after
|
14
|
+
+box-sizing
|
10
15
|
|
11
16
|
|
12
17
|
/* Reset
|
@@ -52,8 +57,6 @@ audio:not([controls])
|
|
52
57
|
p
|
53
58
|
margin-bottom: $m-type-p-margin-bottom
|
54
59
|
line-height: $m-type-p-line-height
|
55
|
-
&.lead
|
56
|
-
@extend %lead
|
57
60
|
|
58
61
|
aside
|
59
62
|
font-size: $m-type-aside-font-size
|
@@ -239,11 +242,11 @@ button, input
|
|
239
242
|
button, select
|
240
243
|
text-transform: none
|
241
244
|
|
242
|
-
button,
|
245
|
+
button, input[type="button"], input[type="reset"], input[type="submit"]
|
243
246
|
-webkit-appearance: button
|
244
247
|
cursor: pointer
|
245
248
|
|
246
|
-
button[disabled],
|
249
|
+
button[disabled], input[disabled]
|
247
250
|
cursor: default
|
248
251
|
|
249
252
|
input[type="checkbox"], input[type="radio"]
|
@@ -262,14 +265,21 @@ button::-moz-focus-inner, input::-moz-focus-inner
|
|
262
265
|
padding: 0
|
263
266
|
|
264
267
|
textarea
|
268
|
+
height: auto
|
269
|
+
min-height: 6em
|
265
270
|
overflow: auto
|
266
271
|
vertical-align: top
|
267
|
-
height:
|
268
|
-
|
272
|
+
line-height: 1.4em
|
273
|
+
resize: vertical
|
269
274
|
|
270
275
|
select
|
271
276
|
width: 100%
|
272
277
|
|
278
|
+
label
|
279
|
+
cursor: pointer
|
280
|
+
font-size: .9em
|
281
|
+
font-weight: bold
|
282
|
+
|
273
283
|
|
274
284
|
/* Tables
|
275
285
|
----------------------------------------------------------------------------------------------------------------------
|
data/sass/mai/base/_helpers.sass
CHANGED
@@ -1,15 +1,28 @@
|
|
1
|
+
/*
|
2
|
+
* Helpers
|
3
|
+
*
|
4
|
+
* @package Mai/Base
|
5
|
+
* @copyright 2013-2014 Muyo
|
6
|
+
* @link http://github.com/muyo/mai
|
7
|
+
* ------------------------------------------------------------------------------------------------------------------- /
|
1
8
|
|
2
|
-
|
3
|
-
|
9
|
+
.hidden
|
10
|
+
display: none
|
4
11
|
|
5
|
-
.left
|
12
|
+
.float-left
|
6
13
|
float: left
|
7
14
|
|
8
|
-
.right
|
15
|
+
.float-right
|
9
16
|
float: right
|
10
17
|
|
11
|
-
.
|
12
|
-
|
18
|
+
.text-right
|
19
|
+
text-align: $m-global-float-opposite
|
20
|
+
|
21
|
+
.text-left
|
22
|
+
text-align: $m-global-float-base
|
23
|
+
|
24
|
+
.text-justify
|
25
|
+
text-align: justify
|
13
26
|
|
14
27
|
// Note: Not within mai/media/print to ensure this class works properly even if media/print is not inlined but loaded
|
15
28
|
// as a separate stylesheet with a different meta media attribute.
|
data/sass/mai/config/_base.sass
CHANGED
@@ -1,7 +1,12 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
/*
|
2
|
+
* Base
|
3
|
+
*
|
4
|
+
* Basic settings for the UI, including typography, borders etc.
|
5
|
+
*
|
6
|
+
* @package Mai/Config
|
7
|
+
* @copyright 2013-2014 Muyo
|
8
|
+
* @link http://github.com/muyo/mai
|
9
|
+
* ------------------------------------------------------------------------------------------------------------------- /
|
5
10
|
|
6
11
|
/*----------------------------------------------------------------------------------------------------------------------
|
7
12
|
Borders
|
@@ -21,7 +26,6 @@ $m-ui-border-radius-big: 2*$m-ui-border-radius-medium !default
|
|
21
26
|
/* Mixins
|
22
27
|
----------------------------------------------------------------------------------------------------------------------
|
23
28
|
|
24
|
-
// Borders
|
25
29
|
=m-ui-border-default
|
26
30
|
border: $m-ui-border-default
|
27
31
|
|
@@ -62,6 +66,8 @@ $m-type-text-color-highlight-less: $m-color-highlight-less !default
|
|
62
66
|
|
63
67
|
$m-type-a-color-base: $m-type-text-color-highlight !default
|
64
68
|
$m-type-a-color-hover: $m-type-text-color-highlight-less !default
|
69
|
+
$m-type-a-color-reverse: $m-type-a-color-hover
|
70
|
+
$m-type-a-color-reverse-hover: $m-type-a-color-base
|
65
71
|
$m-type-a-text-decoration: none !default
|
66
72
|
|
67
73
|
|
@@ -1,17 +1,48 @@
|
|
1
|
+
/*
|
2
|
+
* Colors
|
3
|
+
*
|
4
|
+
* Contains variables and functions used to create a base color palette.
|
5
|
+
*
|
6
|
+
* @package Mai/Config
|
7
|
+
* @copyright 2013-2014 Muyo
|
8
|
+
* @link http://github.com/muyo/mai
|
9
|
+
* ------------------------------------------------------------------------------------------------------------------- /
|
1
10
|
|
2
|
-
/*
|
11
|
+
/* Base colors
|
3
12
|
----------------------------------------------------------------------------------------------------------------------
|
4
13
|
|
5
|
-
$m-color-foreground:
|
6
|
-
$m-color-background:
|
14
|
+
$m-color-foreground: #222 !default
|
15
|
+
$m-color-background: white !default
|
7
16
|
|
8
|
-
$m-color-blur:
|
9
|
-
$m-color-blur-less:
|
10
|
-
$m-color-blur-more:
|
17
|
+
$m-color-blur: lighten($m-color-foreground, 30%) !default
|
18
|
+
$m-color-blur-less: darken($m-color-blur, 15%) !default
|
19
|
+
$m-color-blur-more: lighten($m-color-blur, 15%) !default
|
11
20
|
|
12
|
-
$m-color-highlight:
|
13
|
-
$m-color-highlight-less:
|
14
|
-
$m-color-highlight-more:
|
21
|
+
$m-color-highlight: #00a9cb !default
|
22
|
+
$m-color-highlight-less: darken($m-color-highlight, 20%) !default
|
23
|
+
$m-color-highlight-more: lighten($m-color-highlight, 10%) !default
|
15
24
|
|
16
|
-
$m-color-
|
17
|
-
$m-color-success:
|
25
|
+
$m-color-success: #96c557 !default
|
26
|
+
$m-color-success-background: #dfe8b6 !default
|
27
|
+
$m-color-success-foreground: #61826b !default
|
28
|
+
$m-color-info: #029ee3 !default
|
29
|
+
$m-color-info-foreground: #029ee3 !default
|
30
|
+
$m-color-info-background: #f3f8fc !default
|
31
|
+
$m-color-warning: #ffcc94 !default
|
32
|
+
$m-color-warning-foreground: #ffaf00 !default
|
33
|
+
$m-color-warning-background: #fcefcf !default
|
34
|
+
$m-color-alert: #c60f13 !default
|
35
|
+
$m-color-alert-foreground: #c60f13 !default
|
36
|
+
$m-color-alert-background: #eddddd !default
|
37
|
+
$m-color-alert-border: #c27976 !default
|
38
|
+
|
39
|
+
|
40
|
+
/* Social colors
|
41
|
+
----------------------------------------------------------------------------------------------------------------------
|
42
|
+
|
43
|
+
$m-color-social-facebook: #3f5c9a !default
|
44
|
+
$m-color-social-twitter: #00acee !default
|
45
|
+
$m-color-social-google-plus: #dd4b39 !default
|
46
|
+
$m-color-social-youtube: #e60100 !default
|
47
|
+
$m-color-social-linkedin: #0077b5 !default
|
48
|
+
$m-color-social-rss: #ffaf00 !default
|
@@ -1,13 +1,17 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
1
|
+
/*
|
2
|
+
* Global
|
3
|
+
*
|
4
|
+
* Contains variables and functions helpful in keeping all modules consistent.
|
5
|
+
*
|
6
|
+
* @package Mai/Config
|
7
|
+
* @copyright 2013-2014 Muyo
|
8
|
+
* @link http://github.com/muyo/mai
|
9
|
+
* ------------------------------------------------------------------------------------------------------------------- /
|
6
10
|
|
7
11
|
/* Pixels to (r)em
|
8
12
|
----------------------------------------------------------------------------------------------------------------------
|
9
13
|
|
10
|
-
$m-global-em:
|
14
|
+
$m-global-em: 16px !default
|
11
15
|
|
12
16
|
@function em($pxWidth)
|
13
17
|
@return $pxWidth / $m-global-em * 1em
|
@@ -16,23 +20,17 @@ $m-global-em: 16px !default
|
|
16
20
|
@return $pxWidth / $m-global-em * 1rem
|
17
21
|
|
18
22
|
|
19
|
-
/* Colors
|
20
|
-
----------------------------------------------------------------------------------------------------------------------
|
21
|
-
|
22
|
-
@import colors
|
23
|
-
|
24
|
-
|
25
23
|
/* Margins / padding / gutter
|
26
24
|
----------------------------------------------------------------------------------------------------------------------
|
27
25
|
|
28
|
-
$m-global-margin-size:
|
26
|
+
$m-global-margin-size: em(15px)
|
29
27
|
|
30
28
|
|
31
29
|
/* Text direction
|
32
30
|
----------------------------------------------------------------------------------------------------------------------
|
33
31
|
|
34
|
-
$m-global-direction:
|
35
|
-
$m-global-float-base:
|
32
|
+
$m-global-direction: ltr !default
|
33
|
+
$m-global-float-base: left !default
|
36
34
|
$m-global-float-opposite: right !default
|
37
35
|
|
38
36
|
@if $m-global-direction == ltr
|
data/sass/mai/config/_media.sass
CHANGED
@@ -1,22 +1,58 @@
|
|
1
|
+
/*
|
2
|
+
* Media
|
3
|
+
*
|
4
|
+
* Contains variables and functions related to media queries.
|
5
|
+
*
|
6
|
+
* @package Mai/Config
|
7
|
+
* @copyright 2013-2014 Muyo
|
8
|
+
* @link http://github.com/muyo/mai
|
9
|
+
* ------------------------------------------------------------------------------------------------------------------- /
|
1
10
|
|
2
|
-
/*
|
11
|
+
/* Functions
|
3
12
|
----------------------------------------------------------------------------------------------------------------------
|
4
13
|
|
5
|
-
$
|
6
|
-
$
|
7
|
-
|
8
|
-
$
|
14
|
+
@function lower-bound($range)
|
15
|
+
@if length($range) <= 0
|
16
|
+
@return 0
|
17
|
+
@return nth($range,1)
|
9
18
|
|
10
|
-
|
19
|
+
@function upper-bound($range)
|
20
|
+
@if length($range) < 2
|
21
|
+
@return 999999999999
|
22
|
+
@return nth($range, 2)
|
23
|
+
|
24
|
+
|
25
|
+
/* Size ranges
|
11
26
|
----------------------------------------------------------------------------------------------------------------------
|
12
27
|
|
13
|
-
$m-media-
|
14
|
-
$m-media-
|
15
|
-
$m-media-
|
16
|
-
$m-media-
|
17
|
-
$m-media-
|
28
|
+
$m-media-range-s: (0, 767px) !default
|
29
|
+
$m-media-range-m: (768px, 1279px) !default
|
30
|
+
$m-media-range-l: (1280px, 1439px) !default
|
31
|
+
$m-media-range-xl: (1440px, 1919px) !default
|
32
|
+
$m-media-range-xxl: (1920px, 5120px) !default
|
33
|
+
|
34
|
+
|
35
|
+
/* Media query strings
|
36
|
+
----------------------------------------------------------------------------------------------------------------------
|
18
37
|
|
38
|
+
$m-media-query-screen: "only screen" !default
|
19
39
|
$m-media-query-and-landscape: "and (orientation: landscape)" !default
|
20
40
|
$m-media-query-and-portrait: "and (orientation: portrait)" !default
|
21
|
-
|
22
|
-
$m-media-query-
|
41
|
+
|
42
|
+
$m-media-query-landscape: "#{$m-media-query-screen} #{$m-media-query-and-landscape}" !default
|
43
|
+
$m-media-query-portrait: "#{$m-media-query-screen} #{$m-media-query-and-portrait}" !default
|
44
|
+
|
45
|
+
$m-media-query-s-up: $m-media-query-screen !default
|
46
|
+
$m-media-query-s-only: "#{$m-media-query-screen} and (max-width: #{upper-bound($m-media-range-s)})" !default
|
47
|
+
|
48
|
+
$m-media-query-m-up: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-m)})" !default
|
49
|
+
$m-media-query-m-only: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-m)}) and (max-width:#{upper-bound($m-media-range-m)})" !default
|
50
|
+
|
51
|
+
$m-media-query-l-up: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-l)})" !default
|
52
|
+
$m-media-query-l-only: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-l)}) and (max-width:#{upper-bound($m-media-range-l)})" !default
|
53
|
+
|
54
|
+
$m-media-query-xl-up: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xl)})" !default
|
55
|
+
$m-media-query-xl-only: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xl)}) and (max-width:#{upper-bound($m-media-range-xl)})" !default
|
56
|
+
|
57
|
+
$m-media-query-xxl-up: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xxl)})" !default
|
58
|
+
$m-media-query-xxl-only: "#{$m-media-query-screen} and (min-width:#{lower-bound($m-media-range-xxl)}) and (max-width:#{upper-bound($m-media-range-xxl)})" !default
|
@@ -0,0 +1,181 @@
|
|
1
|
+
/*
|
2
|
+
* Grid
|
3
|
+
*
|
4
|
+
* Based on Foundation 5 (https://github.com/zurb/foundation/blob/master/scss/foundation/components/_grid.scss)
|
5
|
+
*
|
6
|
+
* @package Mai/Config/Modules
|
7
|
+
* @copyright 2013-2014 Muyo
|
8
|
+
* @link http://github.com/muyo/mai
|
9
|
+
* ------------------------------------------------------------------------------------------------------------------- /
|
10
|
+
|
11
|
+
/* Base settings
|
12
|
+
----------------------------------------------------------------------------------------------------------------------
|
13
|
+
|
14
|
+
$m-grid-width: 960px !default
|
15
|
+
$m-grid-gutter-single: $m-global-margin-size !default
|
16
|
+
$m-grid-gutter: $m-grid-gutter-single * 2 !default
|
17
|
+
$m-grid-columns: 12 !default
|
18
|
+
$m-grid-column-float-base: $m-global-float-base !default
|
19
|
+
$m-grid-column-float-opposite: $m-global-float-opposite !default
|
20
|
+
|
21
|
+
$m-block-grid-columns: 12 !default
|
22
|
+
$m-block-grid-spacing: $m-global-margin-size !default
|
23
|
+
|
24
|
+
|
25
|
+
|
26
|
+
/* Media query strings
|
27
|
+
----------------------------------------------------------------------------------------------------------------------
|
28
|
+
|
29
|
+
$m-media-query-breakpoint: $m-media-query-s-up !default
|
30
|
+
|
31
|
+
|
32
|
+
/* Functions
|
33
|
+
----------------------------------------------------------------------------------------------------------------------
|
34
|
+
|
35
|
+
@function m-grid-columns-width($current, $total)
|
36
|
+
@return percentage(($current / $total))
|
37
|
+
|
38
|
+
|
39
|
+
/* Mixins
|
40
|
+
----------------------------------------------------------------------------------------------------------------------
|
41
|
+
|
42
|
+
|
43
|
+
// For creating container, nested, and collapsed rows.
|
44
|
+
=m-grid-row($behavior: false)
|
45
|
+
@if $behavior == nest
|
46
|
+
width: auto
|
47
|
+
margin-#{$m-grid-column-float-base}: -($m-grid-gutter-single)
|
48
|
+
margin-#{$m-grid-column-float-opposite}: -($m-grid-gutter-single)
|
49
|
+
margin-top: 0
|
50
|
+
margin-bottom: 0
|
51
|
+
max-width: none
|
52
|
+
@else if $behavior == collapse
|
53
|
+
width: 100%
|
54
|
+
margin: 0
|
55
|
+
max-width: $m-grid-width
|
56
|
+
@else if $behavior == nest-collapse
|
57
|
+
width: auto
|
58
|
+
margin: 0
|
59
|
+
max-width: none
|
60
|
+
@else
|
61
|
+
width: 100%
|
62
|
+
margin-#{$m-grid-column-float-base}: auto
|
63
|
+
margin-#{$m-grid-column-float-opposite}: auto
|
64
|
+
margin-top: 0
|
65
|
+
margin-bottom: 0
|
66
|
+
max-width: $m-grid-width
|
67
|
+
+clearfix()
|
68
|
+
|
69
|
+
// For creating columns - @include these inside a media query to control small vs. large grid layouts
|
70
|
+
=m-grid-column($columns: false, $last-column: false, $center: false, $offset: false, $push: false, $pull: false, $collapse: false, $float: true)
|
71
|
+
|
72
|
+
position: relative
|
73
|
+
|
74
|
+
// If collapsed, get rid of gutter padding
|
75
|
+
@if $collapse
|
76
|
+
padding-left: 0
|
77
|
+
padding-right: 0
|
78
|
+
// Gutter padding whenever a column isn't set to collapse
|
79
|
+
// (use $collapse:null to do nothing)
|
80
|
+
@else if $collapse == false
|
81
|
+
padding-left: $m-grid-gutter-single
|
82
|
+
padding-right: $m-grid-gutter-single
|
83
|
+
// If a column number is given, calculate width
|
84
|
+
@if $columns
|
85
|
+
width: m-grid-columns-width($columns, $m-grid-columns)
|
86
|
+
// If last column, float naturally instead of to the right
|
87
|
+
@if $last-column
|
88
|
+
float: $m-grid-column-float-opposite
|
89
|
+
|
90
|
+
// If offset, calculate appropriate margins
|
91
|
+
@if $offset
|
92
|
+
margin-#{$m-grid-column-float-base}: m-grid-columns-width($offset, $m-grid-columns)
|
93
|
+
// Source Ordering, adds left/right depending on which you use.
|
94
|
+
@if $push
|
95
|
+
#{$m-grid-column-float-base}: m-grid-columns-width($push, $m-grid-columns)
|
96
|
+
#{$m-grid-column-float-opposite}: auto
|
97
|
+
@if $pull
|
98
|
+
#{$m-grid-column-float-opposite}: m-grid-columns-width($pull, $m-grid-columns)
|
99
|
+
#{$m-grid-column-float-base}: auto
|
100
|
+
|
101
|
+
// If centered, get rid of float and add appropriate margins
|
102
|
+
@if $center
|
103
|
+
margin-#{$m-grid-column-float-base}: auto
|
104
|
+
margin-#{$m-grid-column-float-opposite}: auto
|
105
|
+
float: none !important
|
106
|
+
|
107
|
+
@if $float
|
108
|
+
@if $float == left or $float == true
|
109
|
+
float: $m-grid-column-float-base
|
110
|
+
@else if $float == right
|
111
|
+
float: $m-grid-column-float-opposite
|
112
|
+
@else
|
113
|
+
float: none
|
114
|
+
|
115
|
+
// Create presentational classes for grid
|
116
|
+
=m-grid-html-classes($size)
|
117
|
+
|
118
|
+
@for $i from 1 through $m-grid-columns - 1
|
119
|
+
.#{$size}-push#{-$i}
|
120
|
+
+m-grid-column($push: $i, $collapse: null, $float: false)
|
121
|
+
.#{$size}-pull#{-$i}
|
122
|
+
+m-grid-column($pull: $i, $collapse: null, $float: false)
|
123
|
+
|
124
|
+
.columns
|
125
|
+
+m-grid-column($columns: false)
|
126
|
+
|
127
|
+
@for $i from 1 through $m-grid-columns
|
128
|
+
.#{$size}#{-$i}
|
129
|
+
+m-grid-column($columns: $i,$collapse: null, $float: false)
|
130
|
+
|
131
|
+
@for $i from 0 through $m-grid-columns - 2
|
132
|
+
.#{$size}-offset-#{$i}
|
133
|
+
+m-grid-column($offset: $i, $collapse: null, $float: false)
|
134
|
+
|
135
|
+
[class="columns"] + [class="columns"]:last-child
|
136
|
+
float: $m-grid-column-float-base
|
137
|
+
[class="columns"] + [class="columns"].end
|
138
|
+
float: $m-grid-column-float-opposite
|
139
|
+
|
140
|
+
.columns.#{$size}-centered
|
141
|
+
+m-grid-column($center: true, $collapse: null, $float: false)
|
142
|
+
|
143
|
+
.columns.#{$size}-uncentered
|
144
|
+
margin-#{$m-grid-column-float-base}: 0
|
145
|
+
margin-#{$m-grid-column-float-opposite}: 0
|
146
|
+
float: $m-grid-column-float-base !important
|
147
|
+
|
148
|
+
.columns.#{$size}-uncentered.opposite
|
149
|
+
float: $m-grid-column-float-opposite !important
|
150
|
+
|
151
|
+
|
152
|
+
=m-block-grid($per-row: false, $spacing: $m-block-grid-spacing, $base-style: true)
|
153
|
+
|
154
|
+
@if $base-style
|
155
|
+
display: block
|
156
|
+
padding: 0
|
157
|
+
margin: 0 0 0 (-$spacing/2)
|
158
|
+
+cf
|
159
|
+
|
160
|
+
&>li
|
161
|
+
display: inline
|
162
|
+
height: auto
|
163
|
+
float: $m-grid-column-float-base
|
164
|
+
padding: 0 ($spacing/2) $spacing
|
165
|
+
|
166
|
+
@if $per-row
|
167
|
+
&>li
|
168
|
+
width: 100%/$per-row
|
169
|
+
padding: 0 ($spacing/2) $spacing
|
170
|
+
list-style: none
|
171
|
+
|
172
|
+
&:nth-of-type(n)
|
173
|
+
clear: none
|
174
|
+
&:nth-of-type(#{$per-row}n+1)
|
175
|
+
clear: both
|
176
|
+
|
177
|
+
// Generate presentational markup for block grid.
|
178
|
+
=m-block-grid-html-classes($size)
|
179
|
+
@for $i from 1 through $m-block-grid-columns
|
180
|
+
.#{$size}-block-grid-#{($i)}
|
181
|
+
+m-block-grid($i, $m-block-grid-spacing, false)
|