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.
@@ -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
  }