GIPainter-base 0.5.1 → 0.5.2
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.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/assets/stylesheets/Base/_typography.scss +346 -346
- data/assets/stylesheets/Functions/_typography.scss +38 -38
- data/assets/stylesheets/Mixins/_colors.scss +53 -53
- data/assets/stylesheets/Mixins/_image.scss +53 -53
- data/assets/stylesheets/Mixins/_list.scss +69 -69
- data/assets/stylesheets/Mixins/_margin.scss +45 -45
- data/assets/stylesheets/Mixins/_media-query.scss +48 -48
- data/assets/stylesheets/Mixins/_miscellaneous.scss +41 -41
- data/assets/stylesheets/Mixins/_opacity.scss +26 -26
- data/assets/stylesheets/Mixins/_padding.scss +29 -29
- data/assets/stylesheets/Mixins/_position.scss +107 -107
- data/assets/stylesheets/Mixins/_pseudo.scss +108 -108
- data/assets/stylesheets/Mixins/_size.scss +72 -72
- data/assets/stylesheets/Mixins/_typography.scss +375 -370
- data/assets/stylesheets/Variables/_colors.scss +79 -70
- data/assets/stylesheets/Variables/_media-query.scss +27 -20
- data/assets/stylesheets/Variables/_typography.scss +69 -69
- data/assets/stylesheets/Variables/_weight.scss +21 -21
- data/assets/stylesheets/_GIPainter-base.scss +18 -18
- data/lib/GIPainter-base/version.rb +2 -2
- data/templates/project/manifest.rb +6 -6
- metadata +3 -3
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
//-----------------------------------
|
|
2
|
-
// TYPOGRAPHY FUNCTION
|
|
3
|
-
//-----------------------------------
|
|
4
|
-
|
|
5
|
-
////
|
|
6
|
-
/// @access private
|
|
7
|
-
/// @group Typography
|
|
8
|
-
/// @type string
|
|
9
|
-
////
|
|
10
|
-
|
|
11
|
-
/// Return the list of `src` values, in order, that a good `@font-face` will need, including only those formats specified in the list `$formats`.
|
|
12
|
-
/// @param {int} $formats - file extension
|
|
13
|
-
/// @param {int} $file-path - file path
|
|
14
|
-
/// @param {int} $font-family - file name
|
|
15
|
-
|
|
16
|
-
@function font-src($formats, $file-path, $font-family) {
|
|
17
|
-
$result: ();
|
|
18
|
-
@if index($formats, eot) {
|
|
19
|
-
$eot-val: url('#{$file-path}.eot?#iefix') format('embedded-opentype');
|
|
20
|
-
$result: append($result, $eot-val, comma);
|
|
21
|
-
}
|
|
22
|
-
@if index($formats, woff2) {
|
|
23
|
-
$woff2-val: url('#{$file-path}.woff2') format('woff2');
|
|
24
|
-
$result: append($result, $woff2-val, comma);
|
|
25
|
-
}
|
|
26
|
-
@if index($formats, woff) {
|
|
27
|
-
$woff-val: url('#{$file-path}.woff') format('woff');
|
|
28
|
-
$result: append($result, $woff-val, comma);
|
|
29
|
-
}
|
|
30
|
-
@if index($formats, ttf) {
|
|
31
|
-
$ttf-val: url('#{$file-path}.ttf') format('truetype');
|
|
32
|
-
$result: append($result, $ttf-val, comma);
|
|
33
|
-
}
|
|
34
|
-
@if index($formats, svg) {
|
|
35
|
-
$svg-val: url('#{$file-path}.svg##{$font-family}') format('svg');
|
|
36
|
-
$result: append($result, $svg-val, comma);
|
|
37
|
-
}
|
|
38
|
-
@return $result;
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// TYPOGRAPHY FUNCTION
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access private
|
|
7
|
+
/// @group Typography
|
|
8
|
+
/// @type string
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
/// Return the list of `src` values, in order, that a good `@font-face` will need, including only those formats specified in the list `$formats`.
|
|
12
|
+
/// @param {int} $formats - file extension
|
|
13
|
+
/// @param {int} $file-path - file path
|
|
14
|
+
/// @param {int} $font-family - file name
|
|
15
|
+
|
|
16
|
+
@function font-src($formats, $file-path, $font-family) {
|
|
17
|
+
$result: ();
|
|
18
|
+
@if index($formats, eot) {
|
|
19
|
+
$eot-val: url('#{$file-path}.eot?#iefix') format('embedded-opentype');
|
|
20
|
+
$result: append($result, $eot-val, comma);
|
|
21
|
+
}
|
|
22
|
+
@if index($formats, woff2) {
|
|
23
|
+
$woff2-val: url('#{$file-path}.woff2') format('woff2');
|
|
24
|
+
$result: append($result, $woff2-val, comma);
|
|
25
|
+
}
|
|
26
|
+
@if index($formats, woff) {
|
|
27
|
+
$woff-val: url('#{$file-path}.woff') format('woff');
|
|
28
|
+
$result: append($result, $woff-val, comma);
|
|
29
|
+
}
|
|
30
|
+
@if index($formats, ttf) {
|
|
31
|
+
$ttf-val: url('#{$file-path}.ttf') format('truetype');
|
|
32
|
+
$result: append($result, $ttf-val, comma);
|
|
33
|
+
}
|
|
34
|
+
@if index($formats, svg) {
|
|
35
|
+
$svg-val: url('#{$file-path}.svg##{$font-family}') format('svg');
|
|
36
|
+
$result: append($result, $svg-val, comma);
|
|
37
|
+
}
|
|
38
|
+
@return $result;
|
|
39
39
|
}
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
//-----------------------------------
|
|
2
|
-
// COLORS MIXINS
|
|
3
|
-
//-----------------------------------
|
|
4
|
-
|
|
5
|
-
////
|
|
6
|
-
/// @access public
|
|
7
|
-
/// @group Mixins
|
|
8
|
-
/// @type string
|
|
9
|
-
////
|
|
10
|
-
|
|
11
|
-
/// Mixin helper to set Background opacity
|
|
12
|
-
/// @param {Color} $color - color of your background
|
|
13
|
-
/// @param {Number} $opacity [0.7] - opacity value
|
|
14
|
-
/// @example scss - Usage
|
|
15
|
-
/// .foo {
|
|
16
|
-
/// @include background-opacity(#FF0000);
|
|
17
|
-
/// }
|
|
18
|
-
/// @example css - Result
|
|
19
|
-
/// .foo {
|
|
20
|
-
/// background-color: #FF0000;
|
|
21
|
-
/// background-color: rgba(255, 0, 0, 0.7);
|
|
22
|
-
/// }
|
|
23
|
-
|
|
24
|
-
@mixin background-opacity($color, $opacity: 0.7) {
|
|
25
|
-
$rgba: rgba($color, $opacity);
|
|
26
|
-
$ie-hex-str: ie-hex-str($rgba);
|
|
27
|
-
background-color: transparent;
|
|
28
|
-
background-color: $rgba;
|
|
29
|
-
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
|
|
30
|
-
zoom: 1;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/// Mixin helper to set text contrast
|
|
34
|
-
/// @param {Color} $color - color of your background
|
|
35
|
-
/// @example scss - Usage
|
|
36
|
-
/// .foo {
|
|
37
|
-
/// @include text-contrast(#0099cc);
|
|
38
|
-
/// }
|
|
39
|
-
/// @example css - Result
|
|
40
|
-
/// .foo {
|
|
41
|
-
/// color: rgba(255, 255, 255, 0.8);
|
|
42
|
-
/// }
|
|
43
|
-
@mixin text-contrast($color) {
|
|
44
|
-
$color-brightness: round((red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000);
|
|
45
|
-
$light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
|
|
46
|
-
|
|
47
|
-
@if abs($color-brightness) < ($light-color/2){
|
|
48
|
-
color: rgba($white, 0.8);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
@else {
|
|
52
|
-
color: rgba($black, 0.8);
|
|
53
|
-
}
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// COLORS MIXINS
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access public
|
|
7
|
+
/// @group Mixins
|
|
8
|
+
/// @type string
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
/// Mixin helper to set Background opacity
|
|
12
|
+
/// @param {Color} $color - color of your background
|
|
13
|
+
/// @param {Number} $opacity [0.7] - opacity value
|
|
14
|
+
/// @example scss - Usage
|
|
15
|
+
/// .foo {
|
|
16
|
+
/// @include background-opacity(#FF0000);
|
|
17
|
+
/// }
|
|
18
|
+
/// @example css - Result
|
|
19
|
+
/// .foo {
|
|
20
|
+
/// background-color: #FF0000;
|
|
21
|
+
/// background-color: rgba(255, 0, 0, 0.7);
|
|
22
|
+
/// }
|
|
23
|
+
|
|
24
|
+
@mixin background-opacity($color, $opacity: 0.7) {
|
|
25
|
+
$rgba: rgba($color, $opacity);
|
|
26
|
+
$ie-hex-str: ie-hex-str($rgba);
|
|
27
|
+
background-color: transparent;
|
|
28
|
+
background-color: $rgba;
|
|
29
|
+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
|
|
30
|
+
zoom: 1;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/// Mixin helper to set text contrast
|
|
34
|
+
/// @param {Color} $color - color of your background
|
|
35
|
+
/// @example scss - Usage
|
|
36
|
+
/// .foo {
|
|
37
|
+
/// @include text-contrast(#0099cc);
|
|
38
|
+
/// }
|
|
39
|
+
/// @example css - Result
|
|
40
|
+
/// .foo {
|
|
41
|
+
/// color: rgba(255, 255, 255, 0.8);
|
|
42
|
+
/// }
|
|
43
|
+
@mixin text-contrast($color) {
|
|
44
|
+
$color-brightness: round((red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000);
|
|
45
|
+
$light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
|
|
46
|
+
|
|
47
|
+
@if abs($color-brightness) < ($light-color/2){
|
|
48
|
+
color: rgba($white, 0.8);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@else {
|
|
52
|
+
color: rgba($black, 0.8);
|
|
53
|
+
}
|
|
54
54
|
}
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
//-----------------------------------
|
|
2
|
-
// IMAGE MIXINS
|
|
3
|
-
//-----------------------------------
|
|
4
|
-
|
|
5
|
-
////
|
|
6
|
-
/// @access public
|
|
7
|
-
/// @group Mixins
|
|
8
|
-
/// @type string
|
|
9
|
-
////
|
|
10
|
-
|
|
11
|
-
/// Mixin helper to retina image.
|
|
12
|
-
/// on retina, use image that's scaled by 2
|
|
13
|
-
/// @param {String} $image - image file path
|
|
14
|
-
/// @param {Length} $width - image width
|
|
15
|
-
/// @param {Length} $height - image height
|
|
16
|
-
/// @example scss - Usage
|
|
17
|
-
/// .foo {
|
|
18
|
-
/// @include image-2x('../images/image.png', 100%, auto);
|
|
19
|
-
/// }
|
|
20
|
-
/// @example css - Result
|
|
21
|
-
/// @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124dpi), (min-resolution: 1.3dppx) {
|
|
22
|
-
/// .foo {
|
|
23
|
-
/// background-image: url('../images/image.png');
|
|
24
|
-
/// background-size: 100% auto;
|
|
25
|
-
/// }
|
|
26
|
-
/// }
|
|
27
|
-
|
|
28
|
-
@mixin image-2x($image, $width, $height) {
|
|
29
|
-
background-image: url($image);
|
|
30
|
-
|
|
31
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
32
|
-
background-image: url($image);
|
|
33
|
-
background-size: $width $height;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/// Mixin helper to responsive image.
|
|
38
|
-
/// @param {String} $display - display of element
|
|
39
|
-
/// @example scss - Usage
|
|
40
|
-
/// img {
|
|
41
|
-
/// @include image-responsive;
|
|
42
|
-
/// }
|
|
43
|
-
/// @example css - Result
|
|
44
|
-
/// img {
|
|
45
|
-
/// display: block;
|
|
46
|
-
/// max-width: 100%;
|
|
47
|
-
/// height: auto;
|
|
48
|
-
/// }
|
|
49
|
-
|
|
50
|
-
@mixin image-responsive($display: block) {
|
|
51
|
-
display: $display;
|
|
52
|
-
max-width: 100%;
|
|
53
|
-
height: auto;
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// IMAGE MIXINS
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access public
|
|
7
|
+
/// @group Mixins
|
|
8
|
+
/// @type string
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
/// Mixin helper to retina image.
|
|
12
|
+
/// on retina, use image that's scaled by 2
|
|
13
|
+
/// @param {String} $image - image file path
|
|
14
|
+
/// @param {Length} $width - image width
|
|
15
|
+
/// @param {Length} $height - image height
|
|
16
|
+
/// @example scss - Usage
|
|
17
|
+
/// .foo {
|
|
18
|
+
/// @include image-2x('../images/image.png', 100%, auto);
|
|
19
|
+
/// }
|
|
20
|
+
/// @example css - Result
|
|
21
|
+
/// @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124dpi), (min-resolution: 1.3dppx) {
|
|
22
|
+
/// .foo {
|
|
23
|
+
/// background-image: url('../images/image.png');
|
|
24
|
+
/// background-size: 100% auto;
|
|
25
|
+
/// }
|
|
26
|
+
/// }
|
|
27
|
+
|
|
28
|
+
@mixin image-2x($image, $width, $height) {
|
|
29
|
+
background-image: url($image);
|
|
30
|
+
|
|
31
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
32
|
+
background-image: url($image);
|
|
33
|
+
background-size: $width $height;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/// Mixin helper to responsive image.
|
|
38
|
+
/// @param {String} $display - display of element
|
|
39
|
+
/// @example scss - Usage
|
|
40
|
+
/// img {
|
|
41
|
+
/// @include image-responsive;
|
|
42
|
+
/// }
|
|
43
|
+
/// @example css - Result
|
|
44
|
+
/// img {
|
|
45
|
+
/// display: block;
|
|
46
|
+
/// max-width: 100%;
|
|
47
|
+
/// height: auto;
|
|
48
|
+
/// }
|
|
49
|
+
|
|
50
|
+
@mixin image-responsive($display: block) {
|
|
51
|
+
display: $display;
|
|
52
|
+
max-width: 100%;
|
|
53
|
+
height: auto;
|
|
54
54
|
}
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
//-----------------------------------
|
|
2
|
-
// LIST MIXINS
|
|
3
|
-
//-----------------------------------
|
|
4
|
-
|
|
5
|
-
////
|
|
6
|
-
/// @access public
|
|
7
|
-
/// @group Mixins
|
|
8
|
-
/// @type string
|
|
9
|
-
////
|
|
10
|
-
|
|
11
|
-
/// Mixin helper to Remove default styling from a list.
|
|
12
|
-
/// @param {Boolean} $no-margin [true] - If true, top and bottom margins will be removed from the list.
|
|
13
|
-
/// @example scss - Usage
|
|
14
|
-
/// .foo {
|
|
15
|
-
/// @include list-unstyled;
|
|
16
|
-
/// }
|
|
17
|
-
/// @example css - Result
|
|
18
|
-
/// .foo {
|
|
19
|
-
/// list-style-type: none;
|
|
20
|
-
/// padding-left: 0;
|
|
21
|
-
/// margin-top: 0;
|
|
22
|
-
/// margin-bottom: 0;
|
|
23
|
-
/// }
|
|
24
|
-
|
|
25
|
-
@mixin list-unstyled($no-margin: true) {
|
|
26
|
-
list-style-type: none;
|
|
27
|
-
padding-left: 0;
|
|
28
|
-
@if $no-margin {
|
|
29
|
-
margin-top: 0;
|
|
30
|
-
margin-bottom: 0;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/// Mixin helper to make list inline with separator.
|
|
35
|
-
/// @param {String} $separator [", "] - separator text
|
|
36
|
-
/// @param {String} $display [inline-block] - display of each list item
|
|
37
|
-
/// @param {Boolean} $no-margin [true] - If true, top and bottom margins will be removed from the list.
|
|
38
|
-
/// @example scss - Usage
|
|
39
|
-
/// .foo {
|
|
40
|
-
/// @include list-inline("|");
|
|
41
|
-
/// }
|
|
42
|
-
/// @example css - Result
|
|
43
|
-
/// .foo {
|
|
44
|
-
/// list-style-type: none;
|
|
45
|
-
/// padding-left: 0;
|
|
46
|
-
/// margin-top: 0;
|
|
47
|
-
/// margin-bottom: 0;
|
|
48
|
-
/// }
|
|
49
|
-
///
|
|
50
|
-
/// .foo > li {
|
|
51
|
-
/// display: inline-block;
|
|
52
|
-
/// }
|
|
53
|
-
///
|
|
54
|
-
/// .foo > li:not(:last-child):after {
|
|
55
|
-
/// content: "|";
|
|
56
|
-
/// display: inline-block;
|
|
57
|
-
/// margin: 0 1em;
|
|
58
|
-
/// }
|
|
59
|
-
|
|
60
|
-
@mixin list-inline ($separator: ",", $display: inline-block, $no-margin: true) {
|
|
61
|
-
@include list-unstyled($no-margin);
|
|
62
|
-
& > li {
|
|
63
|
-
display: $display;
|
|
64
|
-
&:not(:last-child):after {
|
|
65
|
-
content: $separator;
|
|
66
|
-
display: inline-block;
|
|
67
|
-
margin: 0 1em;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// LIST MIXINS
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access public
|
|
7
|
+
/// @group Mixins
|
|
8
|
+
/// @type string
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
/// Mixin helper to Remove default styling from a list.
|
|
12
|
+
/// @param {Boolean} $no-margin [true] - If true, top and bottom margins will be removed from the list.
|
|
13
|
+
/// @example scss - Usage
|
|
14
|
+
/// .foo {
|
|
15
|
+
/// @include list-unstyled;
|
|
16
|
+
/// }
|
|
17
|
+
/// @example css - Result
|
|
18
|
+
/// .foo {
|
|
19
|
+
/// list-style-type: none;
|
|
20
|
+
/// padding-left: 0;
|
|
21
|
+
/// margin-top: 0;
|
|
22
|
+
/// margin-bottom: 0;
|
|
23
|
+
/// }
|
|
24
|
+
|
|
25
|
+
@mixin list-unstyled($no-margin: true) {
|
|
26
|
+
list-style-type: none;
|
|
27
|
+
padding-left: 0;
|
|
28
|
+
@if $no-margin {
|
|
29
|
+
margin-top: 0;
|
|
30
|
+
margin-bottom: 0;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/// Mixin helper to make list inline with separator.
|
|
35
|
+
/// @param {String} $separator [", "] - separator text
|
|
36
|
+
/// @param {String} $display [inline-block] - display of each list item
|
|
37
|
+
/// @param {Boolean} $no-margin [true] - If true, top and bottom margins will be removed from the list.
|
|
38
|
+
/// @example scss - Usage
|
|
39
|
+
/// .foo {
|
|
40
|
+
/// @include list-inline("|");
|
|
41
|
+
/// }
|
|
42
|
+
/// @example css - Result
|
|
43
|
+
/// .foo {
|
|
44
|
+
/// list-style-type: none;
|
|
45
|
+
/// padding-left: 0;
|
|
46
|
+
/// margin-top: 0;
|
|
47
|
+
/// margin-bottom: 0;
|
|
48
|
+
/// }
|
|
49
|
+
///
|
|
50
|
+
/// .foo > li {
|
|
51
|
+
/// display: inline-block;
|
|
52
|
+
/// }
|
|
53
|
+
///
|
|
54
|
+
/// .foo > li:not(:last-child):after {
|
|
55
|
+
/// content: "|";
|
|
56
|
+
/// display: inline-block;
|
|
57
|
+
/// margin: 0 1em;
|
|
58
|
+
/// }
|
|
59
|
+
|
|
60
|
+
@mixin list-inline ($separator: ",", $display: inline-block, $no-margin: true) {
|
|
61
|
+
@include list-unstyled($no-margin);
|
|
62
|
+
& > li {
|
|
63
|
+
display: $display;
|
|
64
|
+
&:not(:last-child):after {
|
|
65
|
+
content: $separator;
|
|
66
|
+
display: inline-block;
|
|
67
|
+
margin: 0 1em;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
70
|
}
|
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
//-----------------------------------
|
|
2
|
-
// MARGIN MIXINS
|
|
3
|
-
//-----------------------------------
|
|
4
|
-
|
|
5
|
-
////
|
|
6
|
-
/// @access public
|
|
7
|
-
/// @group Mixins
|
|
8
|
-
/// @type string
|
|
9
|
-
////
|
|
10
|
-
|
|
11
|
-
/// Mixin helper set margin.
|
|
12
|
-
/// @param {Length} $value - value you want set
|
|
13
|
-
/// @param {String} $side [null] - set you side
|
|
14
|
-
/// @example scss - Usage
|
|
15
|
-
/// .foo {
|
|
16
|
-
/// @include margin_set(16px 10px );
|
|
17
|
-
/// }
|
|
18
|
-
/// @example css - Result
|
|
19
|
-
/// .foo {
|
|
20
|
-
/// margin: 16px 10px;
|
|
21
|
-
/// }
|
|
22
|
-
|
|
23
|
-
@mixin margin-set($value, $side: null) {
|
|
24
|
-
@if $side {
|
|
25
|
-
margin: $value;
|
|
26
|
-
}
|
|
27
|
-
@else{
|
|
28
|
-
margin-#{$side}: $value;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
/// Mixin helper set margin auto.
|
|
33
|
-
/// @example scss - Usage
|
|
34
|
-
/// .foo {
|
|
35
|
-
/// @include margin-auto;
|
|
36
|
-
/// }
|
|
37
|
-
/// @example css - Result
|
|
38
|
-
/// .foo {
|
|
39
|
-
/// margin-left: auto;
|
|
40
|
-
/// margin-right: auto;
|
|
41
|
-
/// }
|
|
42
|
-
|
|
43
|
-
@mixin margin-auto {
|
|
44
|
-
margin-left: auto;
|
|
45
|
-
margin-right: auto;
|
|
1
|
+
//-----------------------------------
|
|
2
|
+
// MARGIN MIXINS
|
|
3
|
+
//-----------------------------------
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @access public
|
|
7
|
+
/// @group Mixins
|
|
8
|
+
/// @type string
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
/// Mixin helper set margin.
|
|
12
|
+
/// @param {Length} $value - value you want set
|
|
13
|
+
/// @param {String} $side [null] - set you side
|
|
14
|
+
/// @example scss - Usage
|
|
15
|
+
/// .foo {
|
|
16
|
+
/// @include margin_set(16px 10px );
|
|
17
|
+
/// }
|
|
18
|
+
/// @example css - Result
|
|
19
|
+
/// .foo {
|
|
20
|
+
/// margin: 16px 10px;
|
|
21
|
+
/// }
|
|
22
|
+
|
|
23
|
+
@mixin margin-set($value, $side: null) {
|
|
24
|
+
@if $side {
|
|
25
|
+
margin: $value;
|
|
26
|
+
}
|
|
27
|
+
@else{
|
|
28
|
+
margin-#{$side}: $value;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/// Mixin helper set margin auto.
|
|
33
|
+
/// @example scss - Usage
|
|
34
|
+
/// .foo {
|
|
35
|
+
/// @include margin-auto;
|
|
36
|
+
/// }
|
|
37
|
+
/// @example css - Result
|
|
38
|
+
/// .foo {
|
|
39
|
+
/// margin-left: auto;
|
|
40
|
+
/// margin-right: auto;
|
|
41
|
+
/// }
|
|
42
|
+
|
|
43
|
+
@mixin margin-auto {
|
|
44
|
+
margin-left: auto;
|
|
45
|
+
margin-right: auto;
|
|
46
46
|
}
|