GIPainter-base 0.3.3 → 0.4.0

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.
@@ -0,0 +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
+ }
108
+ }
@@ -0,0 +1,109 @@
1
+ //-----------------------------------
2
+ // PSEUDO ELEMENTS MIXINS
3
+ //-----------------------------------
4
+
5
+ ////
6
+ /// @access public
7
+ /// @group Mixins
8
+ /// @type string
9
+ ////
10
+
11
+ /// Mixin helper set pseudo element.
12
+ /// @param {String} $display [block] - display of you pseudo element
13
+ /// @param {String} $pos [absolute] - position of your pseudo element
14
+ /// @param {String} $content [''] - content of your pseudo element
15
+ /// @example scss - Usage
16
+ /// .foo:after {
17
+ /// @include pseudo;
18
+ /// }
19
+ /// @example css - Result
20
+ /// .foo:after {
21
+ /// content: '';
22
+ /// display: block;
23
+ /// position: absolute;
24
+ /// }
25
+
26
+ @mixin pseudo($display: block, $pos: absolute, $content: ''){
27
+ @if type-of($pos) == list {
28
+ $coordinates: $pos;
29
+ $position: relative;
30
+ }
31
+ position: $pos;
32
+ content: $content;
33
+ display: $display;
34
+ }
35
+
36
+ /// Mixin helper to add clearfix pseudo elements
37
+ /// @param {String} $elements [after] - pseudo element selected (before, after)
38
+ /// @example scss - Usage
39
+ /// .foo {
40
+ /// @include clearfix(before);
41
+ /// }
42
+ /// @example css - Result
43
+ /// .foo:before {
44
+ /// display: table;
45
+ /// content: "";
46
+ /// position: static;
47
+ /// clear: both;
48
+ /// }
49
+
50
+ @mixin clearfix ($elements: after) {
51
+ &:#{$elements}{
52
+ @include pseudo(table, static);
53
+ clear: both;
54
+ }
55
+ }
56
+
57
+ /// Mixin helper to add clearfix pseudo elements
58
+ /// @param {Color} $color - color you want set to your triangle
59
+ /// @param {string} $direction - direction of your triangle (top, bottom, right, left)
60
+ /// @param {Length} $size [6px] - your triangle size
61
+ /// @param {string} $position [absolute] - position for your triangle (absolute, static, etc...)
62
+ /// @param {Length} $round [false] - radius of your triangle
63
+ /// @example scss - Usage
64
+ /// .foo:before {
65
+ /// @include triangle(red, bottom, $round: 3px);
66
+ /// }
67
+ /// @example css - Result
68
+ /// .foo:before {
69
+ /// display: block;
70
+ /// content: "";
71
+ /// position: absolute;
72
+ /// width: 0;
73
+ /// height: 0;
74
+ /// border-radius: 3px;
75
+ /// border-left: 6px solid transparent;
76
+ /// border-right: 6px solid transparent;
77
+ /// border-top: 6px solid red;
78
+ /// margin-top: -2.4px;
79
+ /// }
80
+
81
+ @mixin triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
82
+ @include pseudo($pos: $position);
83
+ width: 0;
84
+ height: 0;
85
+ @if $round {
86
+ border-radius: $round;
87
+ }
88
+ @if $direction == bottom {
89
+ border-left: $size solid transparent;
90
+ border-right: $size solid transparent;
91
+ border-top: $size solid $color;
92
+ margin-top: 0 - round( $size / 2.5 );
93
+ } @else if $direction == top {
94
+ border-left: $size solid transparent;
95
+ border-right: $size solid transparent;
96
+ border-bottom: $size solid $color;
97
+ margin-bottom: 0 - round( $size / 2.5 );
98
+ } @else if $direction == right {
99
+ border-top: $size solid transparent;
100
+ border-bottom: $size solid transparent;
101
+ border-left: $size solid $color;
102
+ margin-right: -$size;
103
+ } @else if $direction == left {
104
+ border-top: $size solid transparent;
105
+ border-bottom: $size solid transparent;
106
+ border-right: $size solid $color;
107
+ margin-left: -$size;
108
+ }
109
+ }
@@ -0,0 +1,73 @@
1
+ //-----------------------------------
2
+ // IMAGE MIXINS
3
+ //-----------------------------------
4
+
5
+ ////
6
+ /// @access public
7
+ /// @group Mixins
8
+ /// @type string
9
+ ////
10
+
11
+ /// Mixin helper set responsive ratio.
12
+ /// @param {Length} $x - width of you image/media/block
13
+ /// @param {Length} $y - height of you image/media/block
14
+ /// @param {Boolean} $pseudo [false] - set true to make pseudo element with repsonsive ratio
15
+ /// @example scss - Usage
16
+ /// .foo {
17
+ /// @include responsive-ratio(1,1, true);
18
+ /// }
19
+ /// @example css - Result
20
+ /// .foo:before {
21
+ /// display: block;
22
+ /// position: relative;
23
+ /// content: '';
24
+ /// width: 100%;
25
+ /// padding-top: 100%;
26
+ /// }
27
+
28
+ @mixin responsive-ratio($x,$y, $pseudo: false) {
29
+ $padding: unquote( ( $y / $x ) * 100 + '%' );
30
+ @if $pseudo {
31
+ &:before {
32
+ @include pseudo($pos: relative);
33
+ width: 100%;
34
+ padding-top: $padding;
35
+ }
36
+ } @else {
37
+ padding-top: $padding;
38
+ }
39
+ }
40
+
41
+ /// Mixin helper to sizing element
42
+ /// @param {Length} $width [auto] - element width
43
+ /// @param {Length} $height [auto] - element height
44
+ /// @example scss - Usage
45
+ /// .foo {
46
+ /// @include size(300px, 30px);
47
+ /// }
48
+ /// @example css - Result
49
+ /// .foo {
50
+ /// width: 300px;
51
+ /// height: 30px;
52
+ /// }
53
+
54
+ @mixin size($width: auto, $height: auto){
55
+ width: $width;
56
+ height: $height;
57
+ }
58
+
59
+ /// Mixin helper to sizing element square
60
+ /// @param {Length} $size [auto] - element size
61
+ /// @example scss - Usage
62
+ /// .foo {
63
+ /// @include square(300px);
64
+ /// }
65
+ /// @example css - Result
66
+ /// .foo {
67
+ /// width: 300px;
68
+ /// height: 300px;
69
+ /// }
70
+
71
+ @mixin square($size: auto) {
72
+ @include size($size, $size);
73
+ }
@@ -9,7 +9,7 @@
9
9
  ////
10
10
 
11
11
  /// Mixin helper to convert font-size pixel to rem.
12
- /// @param {int} $font-size - font-size in pixel
12
+ /// @param {Number} $font-size [14] - font-size in pixel
13
13
  /// @example scss - Usage
14
14
  /// .foo {
15
15
  /// @include font-size(16px);
@@ -20,17 +20,33 @@
20
20
  /// font-size: 1.142857rem;
21
21
  /// }
22
22
 
23
- @mixin font-size($font-size) {
24
- font-size: $font-size;
23
+ @mixin font-size($font-size: 14) {
24
+ font-size: $font-size * 1px;
25
25
  font-size: ($font-size / $font-size-base) * 1rem;
26
26
  }
27
27
 
28
+ /// Mixin helper to Generates line-height values in both pixels and rems.
29
+ /// @param {Number} $height-value [14] - Height value
30
+ /// @example scss - Usage
31
+ /// .foo {
32
+ /// @include line-height(14);
33
+ /// }
34
+ /// @example css - Result
35
+ /// .foo {
36
+ /// line-height: 14px;
37
+ /// line-height: 1rem;
38
+ /// }
39
+ @mixin line-height($height-value: 14) {
40
+ line-height: $height-value * 1px;
41
+ line-height: ($height-value / $font-size-base) * 1rem;
42
+ }
43
+
28
44
  /// Mixin helper to output '@font-face'
29
- /// @param {string} $font-family - font-family name
30
- /// @param {string} $file-path - path to file without extension
31
- /// @param {string} $weight - weight of your font (bold, normal, 100, etc...)
32
- /// @param {string} $style - style of your font (italic, oblique, normal, etc...)
33
- /// @param {string} $formats - formats of your font files
45
+ /// @param {String} $font-family - font-family name
46
+ /// @param {String} $file-path - path to file without extension
47
+ /// @param {String} $weight [normal] - weight of your font (bold, normal, 100, etc...)
48
+ /// @param {String} $style [normal] - style of your font (italic, oblique, normal, etc...)
49
+ /// @param {Array} $formats [eot woff2 woff ttf svg] - formats of your font files
34
50
  /// @example scss - Usage
35
51
  /// @include font-face("Arvo", "fonts/arvo-regular-webfont");
36
52
  /// @example css - Result
@@ -65,7 +81,7 @@
65
81
  }
66
82
 
67
83
  /// Mixin helper to indent first line of paragraphe text
68
- /// @param {string} $indent - Indentation size
84
+ /// @param {Length} $indent [1.5em] - Indentation size
69
85
  /// @example scss - Usage
70
86
  /// .foo {
71
87
  /// @include indent-text();
@@ -84,9 +100,9 @@
84
100
  }
85
101
 
86
102
  /// Mixin helper to replace underline of link with border-bottom
87
- /// @param {Color} $color - color of border
88
- /// @param {string} $style - style of border
89
- /// @param {string} $width - size of border
103
+ /// @param {Color} $color [inherit] - color of border
104
+ /// @param {string} $style [solid] - style of border
105
+ /// @param {Length} $width [1px] - size of border
90
106
  /// @example scss - Usage
91
107
  /// .foo {
92
108
  /// @include link-replace-underline(red, dotted);
@@ -109,12 +125,12 @@
109
125
  }
110
126
 
111
127
  /// Mixin helper to add side line arround text
112
- /// @param {string} $height - height of side lines
113
- /// @param {string} $space - space around text
114
- /// @param {Color} $color - color of side lines
115
- /// @param {string} $style - styles of side lines
116
- /// @param {string} $v-adjust - adjust verticality
117
- /// @param {string} $double - size between 2 lines in same side
128
+ /// @param {Length} $height [1px] - height of side lines
129
+ /// @param {Length} $space [0.5em] - space around text
130
+ /// @param {Color} $color [inherit] - color of side lines
131
+ /// @param {string} $style [solid] - styles of side lines
132
+ /// @param {Length} $v-adjust [false] - adjust verticality
133
+ /// @param {Length} $double [false] - size between 2 lines in same side
118
134
  /// @example scss - Usage
119
135
  /// .foo {
120
136
  /// @include side-lined(5px, $color: red, $double: 0.3em);
@@ -186,7 +202,7 @@
186
202
  }
187
203
 
188
204
  /// Mixin helper to truncate text
189
- /// @param {string} $truncation-boundary - Max size of your container
205
+ /// @param {Length} $truncation-boundary - Max size of your container
190
206
  /// @example scss - Usage
191
207
  /// .foo {
192
208
  /// @include truncate(100%);
@@ -207,10 +223,10 @@
207
223
  }
208
224
 
209
225
  /// Mixin helper to get action selector
210
- /// @param {boolean} $active - add active selector
226
+ /// @param {Boolean} $active [false] - add active selector
211
227
  /// @example scss - Usage
212
228
  /// .foo {
213
- /// @include selected() {
229
+ /// @include selected {
214
230
  /// background-color: red;
215
231
  /// }
216
232
  /// }
@@ -236,23 +252,62 @@
236
252
  }
237
253
  }
238
254
 
239
- /// Mixin helper to add clearfix pseudo elements
240
- /// @param {string} $elements - pseudo element selected (before, after)
255
+ /// Mixin helper to hide text
256
+ /// @param {Boolean} $break [false] - set to true to break element
257
+ /// @param {Length} $indent [200%] - indentation text
258
+ /// @param {String} $align [left] - text alignement
259
+ /// @param {String} $overflow [hidden] - overflow of element
241
260
  /// @example scss - Usage
242
261
  /// .foo {
243
- /// @include clearfix(before);
262
+ /// @include hide-text;
244
263
  /// }
245
264
  /// @example css - Result
246
- /// .foo:before {
247
- /// display: table;
248
- /// content: "";
249
- /// clear: both;
265
+ /// .foo{
266
+ /// text-indent: $indent;
267
+ /// text-align: $align;
268
+ /// font-size: 0;
269
+ /// white-space: nowrap;
270
+ /// overflow: $overflow;
250
271
  /// }
251
272
 
252
- @mixin clearfix ($elements: after) {
253
- &:#{$elements}{
254
- display: table;
255
- content: "";
256
- clear: both;
273
+ @mixin hide-text($break: false, $indent: 200%, $align: left, $overflow: hidden) {
274
+ @if $break {
275
+ position: absolute;
276
+ top: 0; left: 0;
277
+ pointer-events: none;
257
278
  }
279
+ text-indent: $indent;
280
+ text-align: $align;
281
+ font-size: 0;
282
+ white-space: nowrap;
283
+ @if $overflow {
284
+ overflow: $overflow;
285
+ }
286
+ }
287
+
288
+ /// Mixin helper to replace text with image
289
+ /// @param {Length} $w - width of element
290
+ /// @param {Length} $h - height of element
291
+ /// @param {String} $file - file path
292
+ /// @param {String} $overflow [hidden] - overflow of element
293
+ /// @example scss - Usage
294
+ /// .foo {
295
+ /// @include hide-text;
296
+ /// }
297
+ /// @example css - Result
298
+ /// .foo{
299
+ /// text-indent: $indent;
300
+ /// text-align: $align;
301
+ /// font-size: 0;
302
+ /// white-space: nowrap;
303
+ /// overflow: $overflow;
304
+ /// }
305
+
306
+ @mixin text-replacement($w, $h, $file, $overflow: hidden) {
307
+ @include responsive-ratio($w, $h, true);
308
+ position: relative;
309
+ max-width: $w * 1px;
310
+ background: url($file) 50% 50% no-repeat;
311
+ background-size: contain;
312
+ @include hide-text($overflow: $overflow);
258
313
  }
@@ -62,4 +62,8 @@ $headings-font-family: inherit !default;
62
62
  $headings-font-weight: 500 !default;
63
63
  $headings-line-height: 1.1 !default;
64
64
  $headings-color: inherit !default;
65
- $headings-small-color: inherit !default;
65
+ $headings-small-color: inherit !default;
66
+
67
+ /// Links
68
+ /// @prop {typography} headings-font-family [$headings-font-family]
69
+ $link-color: $main-color !default;
@@ -1,3 +1,3 @@
1
1
  module GIPainter_base
2
- VERSION = '0.3.3'
2
+ VERSION = '0.4.0'
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: GIPainter-base
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.3
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Genious Interactive
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-02-16 00:00:00.000000000 Z
11
+ date: 2017-02-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: compass
@@ -130,12 +130,19 @@ extensions: []
130
130
  extra_rdoc_files: []
131
131
  files:
132
132
  - README.md
133
- - assets/stylesheets/Base/_normalize.scss
134
133
  - assets/stylesheets/Base/_typography.scss
135
134
  - assets/stylesheets/Functions/_typography.scss
136
135
  - assets/stylesheets/Mixins/_colors.scss
136
+ - assets/stylesheets/Mixins/_image.scss
137
+ - assets/stylesheets/Mixins/_list.scss
138
+ - assets/stylesheets/Mixins/_margin.scss
137
139
  - assets/stylesheets/Mixins/_media-query.scss
140
+ - assets/stylesheets/Mixins/_miscellaneous.scss
138
141
  - assets/stylesheets/Mixins/_opacity.scss
142
+ - assets/stylesheets/Mixins/_padding.scss
143
+ - assets/stylesheets/Mixins/_position.scss
144
+ - assets/stylesheets/Mixins/_pseudo.scss
145
+ - assets/stylesheets/Mixins/_size.scss
139
146
  - assets/stylesheets/Mixins/_typography.scss
140
147
  - assets/stylesheets/Variables/_colors.scss
141
148
  - assets/stylesheets/Variables/_media-query.scss