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,49 +1,49 @@
|
|
1
|
-
//-----------------------------------
|
2
|
-
// MEDIA QUERY MIXINS
|
3
|
-
//-----------------------------------
|
4
|
-
|
5
|
-
////
|
6
|
-
/// @access public
|
7
|
-
/// @group Mixins
|
8
|
-
/// @type string
|
9
|
-
////
|
10
|
-
|
11
|
-
/// Mixin helper set media query breakpoint.
|
12
|
-
/// @param {Length} $width - breakpoint width
|
13
|
-
/// @param {String} $type [min] - type of your breakpoint (max, min)
|
14
|
-
/// @example scss - Usage
|
15
|
-
/// .foo {
|
16
|
-
/// @include mquery($screen-md){
|
17
|
-
/// background-color: red;
|
18
|
-
/// }
|
19
|
-
/// }
|
20
|
-
/// @example css - Result
|
21
|
-
/// @media only screen and (min-width: 992px) {
|
22
|
-
/// .foo {
|
23
|
-
/// background-color: red;
|
24
|
-
/// }
|
25
|
-
/// }
|
26
|
-
|
27
|
-
@mixin mquery($width, $type: min) {
|
28
|
-
@if $type == max {
|
29
|
-
$width: $width - 1px;
|
30
|
-
}
|
31
|
-
@media only screen and (#{$type}-width: $width) {
|
32
|
-
@content;
|
33
|
-
}
|
34
|
-
}
|
35
|
-
|
36
|
-
/// Media query helper for declaring media queries by device pixel ratio.
|
37
|
-
/// @param {Number} $ratio - Min device pixel ratio
|
38
|
-
/// @example scss - Usage
|
39
|
-
/// .foo {
|
40
|
-
/// @include mquery-r(2) {
|
41
|
-
/// width: 100%;
|
42
|
-
/// }
|
43
|
-
/// }
|
44
|
-
|
45
|
-
@mixin mquery-r($ratio) {
|
46
|
-
@media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: $ratio), only screen and (min-device-pixel-ratio: $ratio) {
|
47
|
-
@content;
|
48
|
-
}
|
1
|
+
//-----------------------------------
|
2
|
+
// MEDIA QUERY MIXINS
|
3
|
+
//-----------------------------------
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @access public
|
7
|
+
/// @group Mixins
|
8
|
+
/// @type string
|
9
|
+
////
|
10
|
+
|
11
|
+
/// Mixin helper set media query breakpoint.
|
12
|
+
/// @param {Length} $width - breakpoint width
|
13
|
+
/// @param {String} $type [min] - type of your breakpoint (max, min)
|
14
|
+
/// @example scss - Usage
|
15
|
+
/// .foo {
|
16
|
+
/// @include mquery($screen-md){
|
17
|
+
/// background-color: red;
|
18
|
+
/// }
|
19
|
+
/// }
|
20
|
+
/// @example css - Result
|
21
|
+
/// @media only screen and (min-width: 992px) {
|
22
|
+
/// .foo {
|
23
|
+
/// background-color: red;
|
24
|
+
/// }
|
25
|
+
/// }
|
26
|
+
|
27
|
+
@mixin mquery($width, $type: min) {
|
28
|
+
@if $type == max {
|
29
|
+
$width: $width - 1px;
|
30
|
+
}
|
31
|
+
@media only screen and (#{$type}-width: $width) {
|
32
|
+
@content;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
/// Media query helper for declaring media queries by device pixel ratio.
|
37
|
+
/// @param {Number} $ratio - Min device pixel ratio
|
38
|
+
/// @example scss - Usage
|
39
|
+
/// .foo {
|
40
|
+
/// @include mquery-r(2) {
|
41
|
+
/// width: 100%;
|
42
|
+
/// }
|
43
|
+
/// }
|
44
|
+
|
45
|
+
@mixin mquery-r($ratio) {
|
46
|
+
@media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: $ratio), only screen and (min-device-pixel-ratio: $ratio) {
|
47
|
+
@content;
|
48
|
+
}
|
49
49
|
}
|
@@ -1,42 +1,42 @@
|
|
1
|
-
//-----------------------------------
|
2
|
-
// MISCELLANEOUS MIXINS
|
3
|
-
//-----------------------------------
|
4
|
-
|
5
|
-
////
|
6
|
-
/// @access public
|
7
|
-
/// @group Mixins
|
8
|
-
/// @type string
|
9
|
-
////
|
10
|
-
|
11
|
-
/// Mixin helper to hide element
|
12
|
-
/// @example scss - Usage
|
13
|
-
/// .foo {
|
14
|
-
/// @include hidden;
|
15
|
-
/// }
|
16
|
-
/// @example css - Result
|
17
|
-
/// .foo {
|
18
|
-
/// display: none;
|
19
|
-
/// visibilitty: hidden;
|
20
|
-
/// }
|
21
|
-
|
22
|
-
@mixin hidden {
|
23
|
-
display: none;
|
24
|
-
visibility: hidden;
|
25
|
-
}
|
26
|
-
|
27
|
-
/// Mixin helper to show element
|
28
|
-
/// @param {String} $state [block] - display element;
|
29
|
-
/// @example scss - Usage
|
30
|
-
/// .foo {
|
31
|
-
/// @include visible(inline-block);
|
32
|
-
/// }
|
33
|
-
/// @example css - Result
|
34
|
-
/// .foo {
|
35
|
-
/// display: inline-block
|
36
|
-
/// visibility: visible;
|
37
|
-
/// }
|
38
|
-
|
39
|
-
@mixin visible($state: block) {
|
40
|
-
display: $state;
|
41
|
-
visibility: visible;
|
1
|
+
//-----------------------------------
|
2
|
+
// MISCELLANEOUS MIXINS
|
3
|
+
//-----------------------------------
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @access public
|
7
|
+
/// @group Mixins
|
8
|
+
/// @type string
|
9
|
+
////
|
10
|
+
|
11
|
+
/// Mixin helper to hide element
|
12
|
+
/// @example scss - Usage
|
13
|
+
/// .foo {
|
14
|
+
/// @include hidden;
|
15
|
+
/// }
|
16
|
+
/// @example css - Result
|
17
|
+
/// .foo {
|
18
|
+
/// display: none;
|
19
|
+
/// visibilitty: hidden;
|
20
|
+
/// }
|
21
|
+
|
22
|
+
@mixin hidden {
|
23
|
+
display: none;
|
24
|
+
visibility: hidden;
|
25
|
+
}
|
26
|
+
|
27
|
+
/// Mixin helper to show element
|
28
|
+
/// @param {String} $state [block] - display element;
|
29
|
+
/// @example scss - Usage
|
30
|
+
/// .foo {
|
31
|
+
/// @include visible(inline-block);
|
32
|
+
/// }
|
33
|
+
/// @example css - Result
|
34
|
+
/// .foo {
|
35
|
+
/// display: inline-block
|
36
|
+
/// visibility: visible;
|
37
|
+
/// }
|
38
|
+
|
39
|
+
@mixin visible($state: block) {
|
40
|
+
display: $state;
|
41
|
+
visibility: visible;
|
42
42
|
}
|
@@ -1,27 +1,27 @@
|
|
1
|
-
//-----------------------------------
|
2
|
-
// OPACITY MIXINS
|
3
|
-
//-----------------------------------
|
4
|
-
|
5
|
-
////
|
6
|
-
/// @access public
|
7
|
-
/// @group Mixins
|
8
|
-
/// @type string
|
9
|
-
////
|
10
|
-
|
11
|
-
/// Mixin helper to set opacity
|
12
|
-
/// @param {Number} $opacity [0.7] - opacity ratio
|
13
|
-
/// @example scss - Usage
|
14
|
-
/// .foo {
|
15
|
-
/// @include opacity(0.8);
|
16
|
-
/// }
|
17
|
-
/// @example css - Result
|
18
|
-
/// .foo {
|
19
|
-
/// opacity: 0.8;
|
20
|
-
/// filter: alpha(opacity=80);
|
21
|
-
/// }
|
22
|
-
|
23
|
-
@mixin opacity($opacity : 0.7) {
|
24
|
-
opacity: $opacity;
|
25
|
-
$opacity-ie: ($opacity * 100);
|
26
|
-
filter: alpha(opacity=$opacity-ie);
|
1
|
+
//-----------------------------------
|
2
|
+
// OPACITY MIXINS
|
3
|
+
//-----------------------------------
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @access public
|
7
|
+
/// @group Mixins
|
8
|
+
/// @type string
|
9
|
+
////
|
10
|
+
|
11
|
+
/// Mixin helper to set opacity
|
12
|
+
/// @param {Number} $opacity [0.7] - opacity ratio
|
13
|
+
/// @example scss - Usage
|
14
|
+
/// .foo {
|
15
|
+
/// @include opacity(0.8);
|
16
|
+
/// }
|
17
|
+
/// @example css - Result
|
18
|
+
/// .foo {
|
19
|
+
/// opacity: 0.8;
|
20
|
+
/// filter: alpha(opacity=80);
|
21
|
+
/// }
|
22
|
+
|
23
|
+
@mixin opacity($opacity : 0.7) {
|
24
|
+
opacity: $opacity;
|
25
|
+
$opacity-ie: ($opacity * 100);
|
26
|
+
filter: alpha(opacity=$opacity-ie);
|
27
27
|
}
|
@@ -1,30 +1,30 @@
|
|
1
|
-
//-----------------------------------
|
2
|
-
// PADDING MIXINS
|
3
|
-
//-----------------------------------
|
4
|
-
|
5
|
-
////
|
6
|
-
/// @access public
|
7
|
-
/// @group Mixins
|
8
|
-
/// @type string
|
9
|
-
////
|
10
|
-
|
11
|
-
/// Mixin helper set padding.
|
12
|
-
/// @param {Length} $value - value you want set
|
13
|
-
/// @param {String} $side [null] - set you side
|
14
|
-
/// @example scss - Usage
|
15
|
-
/// .foo {
|
16
|
-
/// @include padding_set(16px 10px );
|
17
|
-
/// }
|
18
|
-
/// @example css - Result
|
19
|
-
/// .foo {
|
20
|
-
/// padding: 16px 10px;
|
21
|
-
/// }
|
22
|
-
|
23
|
-
@mixin padding-set($value, $side: null) {
|
24
|
-
@if $side {
|
25
|
-
padding: $value;
|
26
|
-
}
|
27
|
-
@else{
|
28
|
-
padding-#{$side}: $value;
|
29
|
-
}
|
1
|
+
//-----------------------------------
|
2
|
+
// PADDING MIXINS
|
3
|
+
//-----------------------------------
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @access public
|
7
|
+
/// @group Mixins
|
8
|
+
/// @type string
|
9
|
+
////
|
10
|
+
|
11
|
+
/// Mixin helper set padding.
|
12
|
+
/// @param {Length} $value - value you want set
|
13
|
+
/// @param {String} $side [null] - set you side
|
14
|
+
/// @example scss - Usage
|
15
|
+
/// .foo {
|
16
|
+
/// @include padding_set(16px 10px );
|
17
|
+
/// }
|
18
|
+
/// @example css - Result
|
19
|
+
/// .foo {
|
20
|
+
/// padding: 16px 10px;
|
21
|
+
/// }
|
22
|
+
|
23
|
+
@mixin padding-set($value, $side: null) {
|
24
|
+
@if $side {
|
25
|
+
padding: $value;
|
26
|
+
}
|
27
|
+
@else{
|
28
|
+
padding-#{$side}: $value;
|
29
|
+
}
|
30
30
|
}
|
@@ -1,108 +1,108 @@
|
|
1
|
-
//-----------------------------------
|
2
|
-
// POSITION MIXINS
|
3
|
-
//-----------------------------------
|
4
|
-
|
5
|
-
////
|
6
|
-
/// @access public
|
7
|
-
/// @group Mixins
|
8
|
-
/// @type string
|
9
|
-
////
|
10
|
-
|
11
|
-
/// Mixin helper to centerer block.
|
12
|
-
/// @param {boolean} $horizontal [true] - set to false to centerer verticaly
|
13
|
-
/// @param {boolean} $vertical [true] - set to false to centerer horizontaly
|
14
|
-
/// @example scss - Usage
|
15
|
-
/// .foo {
|
16
|
-
/// @include centerer();
|
17
|
-
/// }
|
18
|
-
/// @example css - Result
|
19
|
-
/// .foo {
|
20
|
-
/// position: absolute;
|
21
|
-
/// top: 50%;
|
22
|
-
/// left: 50%
|
23
|
-
/// -webkit-transform: translate(-50%, -50%);
|
24
|
-
/// -ms-transform: translate(-50%, -50%);
|
25
|
-
/// transform: translate(-50%, -50%);
|
26
|
-
/// }
|
27
|
-
|
28
|
-
@mixin centerer($horizontal: true, $vertical: true) {
|
29
|
-
position: absolute;
|
30
|
-
@if ($horizontal and $vertical) {
|
31
|
-
top: 50%;
|
32
|
-
left: 50%;
|
33
|
-
@include translate(-50%, -50%);
|
34
|
-
} @else if ($horizontal) {
|
35
|
-
left: 50%;
|
36
|
-
@include translate(-50%, 0);
|
37
|
-
} @else if ($vertical) {
|
38
|
-
top: 50%;
|
39
|
-
@include translate(0, -50%);
|
40
|
-
}
|
41
|
-
}
|
42
|
-
|
43
|
-
/// Mixins helper to Shorthandizes position declarations.
|
44
|
-
/// @param {String} $type [absolute] - Either `relative`, `absolute` or `fixed`
|
45
|
-
/// @param {Length} $left [null] - Left offset
|
46
|
-
/// @param {Length} $right [null] - Right offset
|
47
|
-
/// @param {Length} $top [null] - Top offset
|
48
|
-
/// @param {Length} $bottom [null] - Bottom offset
|
49
|
-
/// @example scss - Usage
|
50
|
-
/// .foo {
|
51
|
-
/// @include position(absolute, $top: 10px, $left: 10px);
|
52
|
-
/// }
|
53
|
-
/// @example css - Result
|
54
|
-
/// .foo {
|
55
|
-
/// position: absolute;
|
56
|
-
/// left: 10px;
|
57
|
-
/// top: 10px;
|
58
|
-
/// }
|
59
|
-
@mixin position($type: absolute, $top: null, $right: null, $bottom: null, $left: null) {
|
60
|
-
@if type-of($type) == list {
|
61
|
-
$coordinates: $type;
|
62
|
-
$position: relative;
|
63
|
-
}
|
64
|
-
position: $type;
|
65
|
-
top: $top;
|
66
|
-
right: $right;
|
67
|
-
bottom: $bottom;
|
68
|
-
left: $left;
|
69
|
-
}
|
70
|
-
|
71
|
-
/// Mixins helper to Vertically center descendent elements with the inline-block method.
|
72
|
-
/// @param {Array} $inner [*] - A CSS selector for the inner element. Can be a single selector or a comma-separated list of selectors. In either case, wrap selectors in quotes.
|
73
|
-
/// @example scss - Usage
|
74
|
-
/// .foo {
|
75
|
-
/// @include vertical-align-inline;
|
76
|
-
/// }
|
77
|
-
/// @example css - Result
|
78
|
-
/// .foo:before {
|
79
|
-
/// content: "";
|
80
|
-
/// display: inline-block;
|
81
|
-
/// position: static;
|
82
|
-
/// height: 100%;
|
83
|
-
/// vertical-align: middle;
|
84
|
-
/// margin-right: -0.25em;
|
85
|
-
/// }
|
86
|
-
/// .foo > * {
|
87
|
-
/// display: inline-block;
|
88
|
-
/// vertical-align: middle;
|
89
|
-
/// }
|
90
|
-
|
91
|
-
@mixin vertical-align-inline ($inner...) {
|
92
|
-
&:before {
|
93
|
-
@include pseudo(inline-block, static);
|
94
|
-
height: 100%;
|
95
|
-
vertical-align: middle;
|
96
|
-
margin-right: -0.25em;
|
97
|
-
width: .1px;
|
98
|
-
}
|
99
|
-
|
100
|
-
$inner: if(length($inner) == 0, "*", $inner);
|
101
|
-
@each $cell-selector in $inner {
|
102
|
-
$cell-selector: unquote($cell-selector);
|
103
|
-
& > #{$cell-selector} {
|
104
|
-
display: inline-block;
|
105
|
-
vertical-align: middle;
|
106
|
-
}
|
107
|
-
}
|
1
|
+
//-----------------------------------
|
2
|
+
// POSITION MIXINS
|
3
|
+
//-----------------------------------
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @access public
|
7
|
+
/// @group Mixins
|
8
|
+
/// @type string
|
9
|
+
////
|
10
|
+
|
11
|
+
/// Mixin helper to centerer block.
|
12
|
+
/// @param {boolean} $horizontal [true] - set to false to centerer verticaly
|
13
|
+
/// @param {boolean} $vertical [true] - set to false to centerer horizontaly
|
14
|
+
/// @example scss - Usage
|
15
|
+
/// .foo {
|
16
|
+
/// @include centerer();
|
17
|
+
/// }
|
18
|
+
/// @example css - Result
|
19
|
+
/// .foo {
|
20
|
+
/// position: absolute;
|
21
|
+
/// top: 50%;
|
22
|
+
/// left: 50%
|
23
|
+
/// -webkit-transform: translate(-50%, -50%);
|
24
|
+
/// -ms-transform: translate(-50%, -50%);
|
25
|
+
/// transform: translate(-50%, -50%);
|
26
|
+
/// }
|
27
|
+
|
28
|
+
@mixin centerer($horizontal: true, $vertical: true) {
|
29
|
+
position: absolute;
|
30
|
+
@if ($horizontal and $vertical) {
|
31
|
+
top: 50%;
|
32
|
+
left: 50%;
|
33
|
+
@include translate(-50%, -50%);
|
34
|
+
} @else if ($horizontal) {
|
35
|
+
left: 50%;
|
36
|
+
@include translate(-50%, 0);
|
37
|
+
} @else if ($vertical) {
|
38
|
+
top: 50%;
|
39
|
+
@include translate(0, -50%);
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
/// Mixins helper to Shorthandizes position declarations.
|
44
|
+
/// @param {String} $type [absolute] - Either `relative`, `absolute` or `fixed`
|
45
|
+
/// @param {Length} $left [null] - Left offset
|
46
|
+
/// @param {Length} $right [null] - Right offset
|
47
|
+
/// @param {Length} $top [null] - Top offset
|
48
|
+
/// @param {Length} $bottom [null] - Bottom offset
|
49
|
+
/// @example scss - Usage
|
50
|
+
/// .foo {
|
51
|
+
/// @include position(absolute, $top: 10px, $left: 10px);
|
52
|
+
/// }
|
53
|
+
/// @example css - Result
|
54
|
+
/// .foo {
|
55
|
+
/// position: absolute;
|
56
|
+
/// left: 10px;
|
57
|
+
/// top: 10px;
|
58
|
+
/// }
|
59
|
+
@mixin position($type: absolute, $top: null, $right: null, $bottom: null, $left: null) {
|
60
|
+
@if type-of($type) == list {
|
61
|
+
$coordinates: $type;
|
62
|
+
$position: relative;
|
63
|
+
}
|
64
|
+
position: $type;
|
65
|
+
top: $top;
|
66
|
+
right: $right;
|
67
|
+
bottom: $bottom;
|
68
|
+
left: $left;
|
69
|
+
}
|
70
|
+
|
71
|
+
/// Mixins helper to Vertically center descendent elements with the inline-block method.
|
72
|
+
/// @param {Array} $inner [*] - A CSS selector for the inner element. Can be a single selector or a comma-separated list of selectors. In either case, wrap selectors in quotes.
|
73
|
+
/// @example scss - Usage
|
74
|
+
/// .foo {
|
75
|
+
/// @include vertical-align-inline;
|
76
|
+
/// }
|
77
|
+
/// @example css - Result
|
78
|
+
/// .foo:before {
|
79
|
+
/// content: "";
|
80
|
+
/// display: inline-block;
|
81
|
+
/// position: static;
|
82
|
+
/// height: 100%;
|
83
|
+
/// vertical-align: middle;
|
84
|
+
/// margin-right: -0.25em;
|
85
|
+
/// }
|
86
|
+
/// .foo > * {
|
87
|
+
/// display: inline-block;
|
88
|
+
/// vertical-align: middle;
|
89
|
+
/// }
|
90
|
+
|
91
|
+
@mixin vertical-align-inline ($inner...) {
|
92
|
+
&:before {
|
93
|
+
@include pseudo(inline-block, static);
|
94
|
+
height: 100%;
|
95
|
+
vertical-align: middle;
|
96
|
+
margin-right: -0.25em;
|
97
|
+
width: .1px;
|
98
|
+
}
|
99
|
+
|
100
|
+
$inner: if(length($inner) == 0, "*", $inner);
|
101
|
+
@each $cell-selector in $inner {
|
102
|
+
$cell-selector: unquote($cell-selector);
|
103
|
+
& > #{$cell-selector} {
|
104
|
+
display: inline-block;
|
105
|
+
vertical-align: middle;
|
106
|
+
}
|
107
|
+
}
|
108
108
|
}
|