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 +4 -4
- data/assets/stylesheets/Base/_typography.scss +63 -0
- data/assets/stylesheets/Functions/_typography.scss +39 -0
- data/assets/stylesheets/Mixins/_colors.scss +71 -0
- data/assets/stylesheets/Mixins/_media-query.scss +0 -0
- data/assets/stylesheets/Mixins/_opacity.scss +27 -0
- data/assets/stylesheets/Mixins/_typography.scss +258 -0
- data/assets/stylesheets/Variables/_colors.scss +24 -22
- data/assets/stylesheets/Variables/_media-query.scss +5 -5
- data/assets/stylesheets/Variables/_typography.scss +36 -16
- data/assets/stylesheets/Variables/_weight.scss +15 -6
- data/assets/stylesheets/_GIPainter-base.scss +1 -0
- data/lib/GIPainter-base/version.rb +1 -1
- metadata +6 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5b2ad67e63c13704b97c179de7538c40f9ba30a8
|
4
|
+
data.tar.gz: 744a11900e8c5c8d4538c457506af622b3296d09
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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}
|
16
|
-
/// @prop {Color}
|
17
|
-
/// @prop {Color}
|
18
|
-
/// @prop {Color}
|
19
|
-
/// @prop {Color}
|
20
|
-
/// @prop {Color}
|
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}
|
31
|
-
/// @prop {Color}
|
32
|
-
/// @prop {Color}
|
33
|
-
/// @prop {Color}
|
34
|
-
/// @prop {Color}
|
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}
|
44
|
-
/// @prop {Color}
|
45
|
-
/// @prop {Color}
|
46
|
-
/// @prop {Color}
|
47
|
-
/// @prop {Color}
|
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}
|
57
|
-
/// @prop {Color}
|
58
|
-
/// @prop {Color}
|
59
|
-
/// @prop {Color}
|
60
|
-
/// @prop {Color}
|
61
|
-
/// @prop {Color}
|
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
|
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 {
|
13
|
-
/// @prop {
|
14
|
-
/// @prop {
|
15
|
-
/// @prop {
|
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
|
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
|
14
|
-
/// @prop {
|
15
|
-
/// @prop {
|
16
|
-
/// @prop {
|
17
|
-
/// @prop {
|
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
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
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;
|
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
|
-
|
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
|
-
|
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
|
-
|
2
|
-
//
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
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;
|
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.
|
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
|