GIPainter-base 0.2.0 → 0.3.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: cd93f9a80de255d47d943601b44b37620fad235c
4
- data.tar.gz: aff48fd60d23a5876e559673d9934a798bb6c874
3
+ metadata.gz: 5b2ad67e63c13704b97c179de7538c40f9ba30a8
4
+ data.tar.gz: 744a11900e8c5c8d4538c457506af622b3296d09
5
5
  SHA512:
6
- metadata.gz: e1617f9a609fe860a8e36b595dd65b7f8930a9aab8476d747dc5e12774e968a887561c34506500cd2ec116e6f382efab028d272a62550b8bed4760bc3f37ca4c
7
- data.tar.gz: 403d5c84937df484fee792ab3cdc7b4cb886a5672c026a8c28604baddd4f35c8ce57f7834ec11eb6650a3d6f3fa3ddf85b845233933c9c69ead26f218126ae33
6
+ metadata.gz: 133c5a494b7aa013aea430e0faac301b7e2d045a0eb377c4de6cd037ca196969cd5eaf050875e253940a713b1e85bf5488d371a18f017c0786ff277b8cb24aea
7
+ data.tar.gz: 693aab6c9bf21624127afd3ba09afba780c281d3372b4579ee917ad177fcc9dab68a13d813d85ba3cf38faeaac97ddd8310a757c28d4561fe52a250b30f6ee2b
@@ -0,0 +1,63 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5,
6
+ h6 {
7
+ font-family: $headings-font-family;
8
+ font-weight: $headings-font-weight;
9
+ line-height: $headings-line-height;
10
+ color: $headings-color;
11
+
12
+ small {
13
+ font-weight: normal;
14
+ line-height: 1;
15
+ color: $headings-small-color;
16
+ }
17
+ }
18
+
19
+ h1,
20
+ h2,
21
+ h3 {
22
+ margin-top: $line-height-computed;
23
+ margin-bottom: ($line-height-computed / 2);
24
+
25
+ small {
26
+ font-size: 0.65em;
27
+ }
28
+ }
29
+
30
+ h4,
31
+ h5,
32
+ h6 {
33
+ margin-top: ($line-height-computed / 2);
34
+ margin-bottom: ($line-height-computed / 2);
35
+
36
+ small {
37
+ font-size: 0.75em;
38
+ }
39
+ }
40
+
41
+ h1 {
42
+ @include font-size($font-size-h1);
43
+ }
44
+
45
+ h2 {
46
+ @include font-size($font-size-h2);
47
+ }
48
+
49
+ h3 {
50
+ @include font-size($font-size-h3);
51
+ }
52
+
53
+ h4 {
54
+ @include font-size($font-size-h4);
55
+ }
56
+
57
+ h5 {
58
+ @include font-size($font-size-h5);
59
+ }
60
+
61
+ h6 {
62
+ @include font-size($font-size-h6);
63
+ }
@@ -0,0 +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;
39
+ }
@@ -0,0 +1,71 @@
1
+ //-----------------------------------
2
+ // COLORS MIXINS
3
+ //-----------------------------------
4
+
5
+ ////
6
+ /// @access public
7
+ /// @group Mixins
8
+ /// @type string
9
+ ////
10
+
11
+ /// Background gradient helper
12
+ /// @param {string} $type - type of gradient (radial, linear)
13
+ /// @param {string} $values - value to make gradient background
14
+ /// @example scss - Usage
15
+ /// .foo {
16
+ /// @include background-gradient($values: to right, #2ac363, #cd8c14, #9c4cc2);
17
+ /// }
18
+ /// @example css - Result
19
+ /// .foo {
20
+ /// background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
21
+ /// background-size: 100%;
22
+ /// background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2));
23
+ /// background-image: -moz-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
24
+ /// background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
25
+ /// background-image: linear-gradient(to right, #2ac363, #cd8c14, #9c4cc2);
26
+ /// }
27
+ @mixin background-gradient($type : linear, $values) {
28
+ $function : #{$type}-gradient;
29
+ @include background-image($function($values));
30
+ }
31
+
32
+ /// Background opacity helper
33
+ /// @param {Color} $color - color of your background
34
+ /// @param {int} $opacity - opacity value
35
+ /// @example scss - Usage
36
+ /// .foo {
37
+ /// @include background-opacity(#FF0000);
38
+ /// }
39
+ /// @example css - Result
40
+ /// .foo {
41
+ /// background-color: #FF0000;
42
+ /// background-color: rgba(255, 0, 0, 0.7);
43
+ /// }
44
+
45
+ @mixin background-opacity($color, $opacity: 0.7) {
46
+ background-color: $color;
47
+ background-color: rgba($color, $opacity);
48
+ }
49
+
50
+ /// Contrast color helper
51
+ /// @param {Color} $color - color of your background
52
+ /// @example scss - Usage
53
+ /// .foo {
54
+ /// @include text-contrast(#0099cc);
55
+ /// }
56
+ /// @example css - Result
57
+ /// .foo {
58
+ /// color: rgba(255, 255, 255, 0.8);
59
+ /// }
60
+ @mixin text-contrast($color) {
61
+ $color-brightness: round((red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000);
62
+ $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
63
+
64
+ @if abs($color-brightness) < ($light-color/2){
65
+ color: rgba($white, 0.8);
66
+ }
67
+
68
+ @else {
69
+ color: rgba($black, 0.8);
70
+ }
71
+ }
File without changes
@@ -0,0 +1,27 @@
1
+ //-----------------------------------
2
+ // OPACITY MIXINS
3
+ //-----------------------------------
4
+
5
+ ////
6
+ /// @access public
7
+ /// @group Mixins
8
+ /// @type string
9
+ ////
10
+
11
+ /// Opacity helper
12
+ /// @param {int} $opacity - 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
+ }
@@ -0,0 +1,258 @@
1
+ //-----------------------------------
2
+ // TYPOGRAPHY MIXINS
3
+ //-----------------------------------
4
+
5
+ ////
6
+ /// @access public
7
+ /// @group Mixins
8
+ /// @type string
9
+ ////
10
+
11
+ /// Mixin helper to convert font-size pixel to rem.
12
+ /// @param {int} $font-size - font-size in pixel
13
+ /// @example scss - Usage
14
+ /// .foo {
15
+ /// @include font-size(16px);
16
+ /// }
17
+ /// @example css - Result
18
+ /// .foo {
19
+ /// font-size: 16px;
20
+ /// font-size: 1.142857rem;
21
+ /// }
22
+
23
+ @mixin font-size($font-size) {
24
+ font-size: $font-size;
25
+ font-size: ($font-size / $font-size-base) * 1rem;
26
+ }
27
+
28
+ /// 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
34
+ /// @example scss - Usage
35
+ /// @include font-face("Arvo", "fonts/arvo-regular-webfont");
36
+ /// @example css - Result
37
+ /// @font-face {
38
+ /// font-family: "Arvo";
39
+ /// font-weight: normal;
40
+ /// font-style: normal;
41
+ /// src: url('fonts/arvo-regular-webfont.eot');
42
+ /// src: url('fonts/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
43
+ /// url('fonts/arvo-regular-webfont.woff2') format('woff2'),
44
+ /// url('fonts/arvo-regular-webfont.woff') format('woff'),
45
+ /// url('fonts/arvo-regular-webfont.ttf') format('truetype'),
46
+ /// url('fonts/arvo-regular-webfont.svg#svgFontName') format('svg');
47
+ /// }
48
+
49
+ @mixin font-face ($font-family, $file-path, $weight: normal, $style: normal, $formats: eot woff2 woff ttf svg) {
50
+ @if index('italic' 'oblique', $weight) {
51
+ $style: $weight;
52
+ $weight: normal;
53
+ }
54
+
55
+ @font-face {
56
+ font-family: $font-family;
57
+ font-weight: $weight;
58
+ font-style: $style;
59
+
60
+ @if index($formats, eot) {
61
+ src: url('#{$file-path}.eot');
62
+ }
63
+ src: font-src($formats, $file-path, $font-family);
64
+ }
65
+ }
66
+
67
+ /// Mixin helper to indent first line of paragraphe text
68
+ /// @param {string} $indent - Indentation size
69
+ /// @example scss - Usage
70
+ /// .foo {
71
+ /// @include indent-text();
72
+ /// }
73
+ /// @example css - Result
74
+ /// .foo {
75
+ /// margin: 0;
76
+ /// text-indent: 1.5em;
77
+ /// }
78
+
79
+ @mixin indent-text ($indent: 1.5em) {
80
+ p {
81
+ margin: 0;
82
+ text-indent: $indent;
83
+ }
84
+ }
85
+
86
+ /// 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
90
+ /// @example scss - Usage
91
+ /// .foo {
92
+ /// @include link-replace-underline(red, dotted);
93
+ /// }
94
+ /// @example css - Result
95
+ /// .foo {
96
+ /// text-decoration: none;
97
+ /// border-bottom-width: 1px;
98
+ /// border-bottom-style: dotted;
99
+ /// border-bottom-color: red;
100
+ /// }
101
+
102
+ @mixin link-replace-underline ($color: inherit, $style: solid, $width: 1px) {
103
+ text-decoration: none;
104
+ border-bottom-width: $width;
105
+ border-bottom-style: $style;
106
+ @if $color != inherit {
107
+ border-bottom-color: $color;
108
+ }
109
+ }
110
+
111
+ /// 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
118
+ /// @example scss - Usage
119
+ /// .foo {
120
+ /// @include side-lined(5px, $color: red, $double: 0.3em);
121
+ /// }
122
+ /// @example css - Result
123
+ /// .foo {
124
+ /// display: block;
125
+ /// overflow: hidden;
126
+ /// text-align: center;
127
+ /// }
128
+ /// .foo:before,
129
+ /// .foo:after {
130
+ /// content: "";
131
+ /// display: inline-block;
132
+ /// vertical-align: middle;
133
+ /// position: relative;
134
+ /// width: 50%;
135
+ /// border-top-style: solid;
136
+ /// border-top-width: 5px;
137
+ /// border-top-color: red;
138
+ /// height: 0.3em;
139
+ /// border-bottom-style: solid;
140
+ /// border-bottom-width: 5px;
141
+ /// border-bottom-color: $color;
142
+ /// }
143
+
144
+ @mixin side-lined ($height: 1px, $space: 0.5em, $color: inherit, $style: solid, $v-adjust: false, $double: false) {
145
+ display: block;
146
+ overflow: hidden;
147
+ text-align: center;
148
+
149
+ &:before,
150
+ &:after {
151
+ content: "";
152
+ display: inline-block;
153
+ vertical-align: middle;
154
+ position: relative;
155
+ width: 50%;
156
+
157
+ border-top-style: $style;
158
+ border-top-width: $height;
159
+
160
+ @if $color != inherit {
161
+ border-top-color: $color;
162
+ }
163
+
164
+ @if $v-adjust != false {
165
+ bottom: $v-adjust;
166
+ }
167
+
168
+ @if $double != false {
169
+ height: $double;
170
+ border-bottom-style: $style;
171
+ border-bottom-width: $height;
172
+ @if $color != inherit {
173
+ border-bottom-color: $color;
174
+ }
175
+ }
176
+ }
177
+
178
+ &:before {
179
+ right: $space;
180
+ margin-left: -50%;
181
+ }
182
+ &:after {
183
+ left: $space;
184
+ margin-right: -50%;
185
+ }
186
+ }
187
+
188
+ /// Mixin helper to truncate text
189
+ /// @param {string} $truncation-boundary - Max size of your container
190
+ /// @example scss - Usage
191
+ /// .foo {
192
+ /// @include truncate(100%);
193
+ /// }
194
+ /// @example css - Result
195
+ /// .foo {
196
+ /// max-width: 100%;
197
+ /// white-space: nowrap;
198
+ /// overflow: hidden;
199
+ /// text-overflow: ellipsis;
200
+ /// }
201
+
202
+ @mixin truncate($truncation-boundary) {
203
+ max-width: $truncation-boundary;
204
+ white-space: nowrap;
205
+ overflow: hidden;
206
+ text-overflow: ellipsis;
207
+ }
208
+
209
+ /// Mixin helper to get action selector
210
+ /// @param {boolean} $active - add active selector
211
+ /// @example scss - Usage
212
+ /// .foo {
213
+ /// @include selected() {
214
+ /// background-color: red;
215
+ /// }
216
+ /// }
217
+ /// @example css - Result
218
+ /// .foo:hover,
219
+ /// .foo:focus{
220
+ /// background-color: red;
221
+ /// }
222
+
223
+ @mixin selected ($active: false) {
224
+ @if $active {
225
+ &:hover,
226
+ &:focus,
227
+ &:active {
228
+ @content;
229
+ }
230
+ }
231
+ @else {
232
+ &:hover,
233
+ &:focus {
234
+ @content;
235
+ }
236
+ }
237
+ }
238
+
239
+ /// Mixin helper to add clearfix pseudo elements
240
+ /// @param {string} $elements - pseudo element selected (before, after)
241
+ /// @example scss - Usage
242
+ /// .foo {
243
+ /// @include clearfix(before);
244
+ /// }
245
+ /// @example css - Result
246
+ /// .foo:before {
247
+ /// display: table;
248
+ /// content: "";
249
+ /// clear: both;
250
+ /// }
251
+
252
+ @mixin clearfix ($elements: after) {
253
+ &:#{$elements}{
254
+ display: table;
255
+ content: "";
256
+ clear: both;
257
+ }
258
+ }
@@ -12,12 +12,13 @@
12
12
  /// Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.
13
13
 
14
14
  /// Default Gray color
15
- /// @prop {Color} $black [#000]
16
- /// @prop {Color} $gray-darker [#494949]
17
- /// @prop {Color} $gray-dark [#6E6E6E]
18
- /// @prop {Color} $gray [#929292]
19
- /// @prop {Color} $gray-light [#AEAEAE]
20
- /// @prop {Color} $gray-lighter [#C9C9C9]
15
+ /// @prop {Color} black [$black]
16
+ /// @prop {Color} gray-darker [$gray-darker]
17
+ /// @prop {Color} gray-dark [$gray-dark]
18
+ /// @prop {Color} gray [$gray]
19
+ /// @prop {Color} gray-light [$gray-light]
20
+ /// @prop {Color} gray-lighter [$gray-lighter]
21
+ /// @prop {Color} white [$white]
21
22
 
22
23
  $black: #000 !default;
23
24
  $gray-darker: #6f6f6e !default;
@@ -25,13 +26,14 @@ $gray-dark: #929292 !default;
25
26
  $gray: #b7b7b7 !default;
26
27
  $gray-light: #dbdbdb !default;
27
28
  $gray-lighter: #f0f0f0 !default;
29
+ $white: #fff !default;
28
30
 
29
31
  /// GI Main color
30
- /// @prop {Color} $main-color-darker [#2e4572]
31
- /// @prop {Color} $main-color-dark [#344e81]
32
- /// @prop {Color} $main-color [#3d5c98]
33
- /// @prop {Color} $main-color-light [#6e85b2]
34
- /// @prop {Color} $main-color-lighter [#9faecc]
32
+ /// @prop {Color} main-color-darker [$main-color-darker]
33
+ /// @prop {Color} main-color-dark [$main-color-dark]
34
+ /// @prop {Color} main-color [$main-color]
35
+ /// @prop {Color} main-color-light [$main-color-light]
36
+ /// @prop {Color} main-color-lighter [$main-color-lighter]
35
37
 
36
38
  $main-color-darker: #2e4572 !default;
37
39
  $main-color-dark: #344e81 !default;
@@ -40,11 +42,11 @@ $main-color-light: #6e85b2 !default;
40
42
  $main-color-lighter: #9faecc !default;
41
43
 
42
44
  /// GI Secondary color
43
- /// @prop {Color} $secondary-color-darker [#941515]
44
- /// @prop {Color} $secondary-color-dark [#A71818]
45
- /// @prop {Color} $secondary-color [#c51c1c]
46
- /// @prop {Color} $secondary-color-light [#d45555]
47
- /// @prop {Color} $secondary-color-lighter [#e38c8e]
45
+ /// @prop {Color} secondary-color-darker [$secondary-color-darker]
46
+ /// @prop {Color} secondary-color-dark [$secondary-color-dark]
47
+ /// @prop {Color} secondary-color [$secondary-color]
48
+ /// @prop {Color} secondary-color-light [$secondary-color-light]
49
+ /// @prop {Color} secondary-color-lighter [$secondary-color-lighter]
48
50
 
49
51
  $secondary-color-darker: #941515 !default;
50
52
  $secondary-color-dark: #A71818 !default;
@@ -53,12 +55,12 @@ $secondary-color-light: #d45555 !default;
53
55
  $secondary-color-lighter: #e38c8e !default;
54
56
 
55
57
  /// Brand color
56
- /// @prop {Color} $brand-primary [#3d5c98]
57
- /// @prop {Color} $brand-secondary [#c51c1c]
58
- /// @prop {Color} $brand-success [#5cb85c]
59
- /// @prop {Color} $brand-info [#5bc0de]
60
- /// @prop {Color} $brand-warning [#f0ad4e]
61
- /// @prop {Color} $brand-danger [#d9534f]
58
+ /// @prop {Color} brand-primary [$brand-primary]
59
+ /// @prop {Color} brand-secondary [$brand-secondary]
60
+ /// @prop {Color} brand-success [$brand-success]
61
+ /// @prop {Color} brand-info [$brand-info]
62
+ /// @prop {Color} brand-warning [$brand-warning]
63
+ /// @prop {Color} brand-danger [$brand-danger]
62
64
 
63
65
  $brand-primary: $main-color !default;
64
66
  $brand-secondary: $secondary-color !default;
@@ -5,14 +5,14 @@
5
5
  ////
6
6
  /// @access public
7
7
  /// @group Media Query
8
- /// @type media-query
8
+ /// @type string
9
9
  ////
10
10
 
11
11
  /// We use the following media queries in our sass files to create the key breakpoints.
12
- /// @prop {media-query} $screen-xs [480px] - Extra small devices Phones
13
- /// @prop {media-query} $screen-sm [768px] - Small devices Tablets
14
- /// @prop {media-query} $screen-md [992px] - Medium devices
15
- /// @prop {media-query} $screen-lg [1200px] - Large devices Desktops
12
+ /// @prop {string} screen-xs [$screen-xs] - Extra small devices Phones
13
+ /// @prop {string} screen-sm [$screen-sm] - Small devices Tablets
14
+ /// @prop {string} screen-md [$screen-md] - Medium devices
15
+ /// @prop {string} screen-lg [$screen-lg] - Large devices Desktops
16
16
 
17
17
  $screen-xs: 480px !default;
18
18
  $screen-sm: 768px !default;
@@ -5,41 +5,61 @@
5
5
  ////
6
6
  /// @access public
7
7
  /// @group Typography
8
- /// @type typography
8
+ /// @type string
9
9
  ////
10
10
 
11
11
  /// Font, line-height, and color for body text, headings, and more.
12
12
 
13
- /// Font familly use on GIPainter
14
- /// @prop {typography} $font-family-sans-serif ["Helvetica Neue", Helvetica, Arial, sans-serif]
15
- /// @prop {typography} $font-family-serif [Georgia, "Times New Roman", Times, serif]
16
- /// @prop {typography} $font-family-monospace [Menlo, Monaco, Consolas, "Courier New", monospace] - Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
17
- /// @prop {typography} $font-family-base ["Helvetica Neue", Helvetica, Arial, sans-serif]
13
+ /// Font familly
14
+ /// @prop {string} font-family-sans-serif [$font-family-sans-serif]
15
+ /// @prop {string} font-family-serif [$font-family-serif]
16
+ /// @prop {string} font-family-monospace [$font-family-monospace] - Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
17
+ /// @prop {string} font-family-base [$font-family-base]
18
18
 
19
19
  $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
20
20
  $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
21
21
  $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
22
22
  $font-family-base: $font-family-sans-serif !default;
23
23
 
24
+ /// Font size
25
+ /// @prop {typography} font-size-base [$font-size-base]
26
+ /// @prop {typography} font-size-large [$font-size-large]
27
+ /// @prop {typography} font-size-small [$font-size-small]
24
28
 
25
29
  $font-size-base: 14px !default;
26
30
  $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
27
31
  $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
28
32
 
29
- $font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
30
- $font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
31
- $font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
32
- $font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
33
+ /// @prop {typography} font-size-h1 [$font-size-h1]
34
+ /// @prop {typography} font-size-h2 [$font-size-h2]
35
+ /// @prop {typography} font-size-h3 [$font-size-h3]
36
+ /// @prop {typography} font-size-h4 [$font-size-h4]
37
+ /// @prop {typography} font-size-h5 [$font-size-h5]
38
+ /// @prop {typography} font-size-h6 [$font-size-h6]
39
+
40
+ $font-size-h1: floor(($font-size-base * 2.6)) !default;
41
+ $font-size-h2: floor(($font-size-base * 2.15)) !default;
42
+ $font-size-h3: ceil(($font-size-base * 1.7)) !default;
43
+ $font-size-h4: ceil(($font-size-base * 1.25)) !default;
33
44
  $font-size-h5: $font-size-base !default;
34
- $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
45
+ $font-size-h6: ceil(($font-size-base * 0.85)) !default;
46
+
47
+ /// Line height
48
+ /// @prop {typography} line-height-base [$line-height-base]
49
+ /// @prop {typography} line-height-computed [$line-height-computed] - Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
35
50
 
36
- //** Unit-less `line-height` for use in components like buttons.
37
- $line-height-base: 1.428571429 !default; // 20/14
38
- //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
51
+ $line-height-base: 1.428571429 !default;
39
52
  $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
40
53
 
41
- //** By default, this inherits from the `<body>`.
54
+ /// Headings by default is inherits from the '<body>'.
55
+ /// @prop {typography} headings-font-family [$headings-font-family]
56
+ /// @prop {typography} headings-font-weight [$headings-font-weight]
57
+ /// @prop {typography} headings-line-height [$headings-line-height]
58
+ /// @prop {typography} headings-color [$headings-color]
59
+ /// @prop {typography} headings-small-color [$headings-small-color]
60
+
42
61
  $headings-font-family: inherit !default;
43
62
  $headings-font-weight: 500 !default;
44
63
  $headings-line-height: 1.1 !default;
45
- $headings-color: inherit !default;
64
+ $headings-color: inherit !default;
65
+ $headings-small-color: inherit !default;
@@ -1,9 +1,18 @@
1
- //-- Z-index master list
2
- //
3
- // Warning: Avoid customizing these values. They're used for a bird's eye view
4
- // of components dependent on the z-axis and are designed to all work together.
5
- //
6
- // Note: These variables are not generated into the Customizer.
1
+ //-----------------------------------
2
+ // WEIGHT VARIABLES
3
+ //-----------------------------------
4
+
5
+ ////
6
+ /// @access public
7
+ /// @group Weight
8
+ /// @type string
9
+ ////
10
+
11
+ /// Weight of elements use on our css.
12
+ /// @prop {weight} zindex-popover [$zindex-popover]
13
+ /// @prop {weight} zindex-tooltip [$zindex-tooltip]
14
+ /// @prop {weight} zindex-modal-background [$zindex-modal-background]
15
+ /// @prop {weight} zindex-modal [$zindex-modal]
7
16
 
8
17
  $zindex-popover: 1030 !default;
9
18
  $zindex-tooltip: 1030 !default;
@@ -11,6 +11,7 @@
11
11
  // -----------------------------------------------------------------------------
12
12
  @import "Base/**/*";
13
13
  @import "Variables/**/*";
14
+ @import "Functions/**/*";
14
15
  @import "Mixins/**/*";
15
16
 
16
17
  // GIPainter Theme Layout
@@ -1,3 +1,3 @@
1
1
  module GIPainter_base
2
- VERSION = '0.2.0'
2
+ VERSION = '0.3.0'
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: GIPainter-base
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.0
4
+ version: 0.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Genious Interactive
@@ -132,6 +132,11 @@ files:
132
132
  - README.md
133
133
  - assets/stylesheets/Base/_normalize.scss
134
134
  - assets/stylesheets/Base/_typography.scss
135
+ - assets/stylesheets/Functions/_typography.scss
136
+ - assets/stylesheets/Mixins/_colors.scss
137
+ - assets/stylesheets/Mixins/_media-query.scss
138
+ - assets/stylesheets/Mixins/_opacity.scss
139
+ - assets/stylesheets/Mixins/_typography.scss
135
140
  - assets/stylesheets/Variables/_colors.scss
136
141
  - assets/stylesheets/Variables/_media-query.scss
137
142
  - assets/stylesheets/Variables/_typography.scss