Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Commit 344d41a

Browse files
arschmitzsfrisk
arschmitz
authored and
sfrisk
committed
Build: Update to use grunt-jsass, fixes node 5+, refine variable usage
Fixes gh-152 Closes gh-154
1 parent f1a5d2b commit 344d41a

File tree

12 files changed

+96
-93
lines changed

12 files changed

+96
-93
lines changed

‎.jshintrc

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"eqeqeq": true,
55
"eqnull": true,
66
"expr": true,
7+
"esnext": true,
78
"immed": true,
89
"noarg": true,
910
"quotmark": "double",

‎.travis.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
sudo: false
22
language: node_js
33
node_js:
4-
- "0.10"
4+
- "5"
55
cache:
66
directories:
77
- node_modules

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,12 @@
5151
"grunt-csscomb": "3.0.0",
5252
"grunt-git-authors": "2.0.0",
5353
"grunt-html": "5.0.1",
54+
"grunt-jsass": "1.1.0",
5455
"grunt-jscs": "2.3.0",
5556
"grunt-sass": "1.0.0",
5657
"grunt-selenium-server": "0.1.2",
5758
"grunt-svgmin": "2.0.0",
5859
"grunt-svgstore": "0.5.0",
59-
"jsass-vars": "0.0.3",
6060
"load-grunt-config": "0.16.0",
6161
"perfjankie": "1.2.2"
6262
},

‎scss/atoms/buttons/_buttons.scss

+11-11
Original file line numberDiff line numberDiff line change
@@ -39,49 +39,49 @@
3939
}
4040

4141
.btn {
42-
@include btn( map-get($ui-btn, margin));
42+
@include btn( map-get($btn-element, margin));
4343
}
4444

4545
/* Button Colors */
4646

4747
.btn-default {
48-
@include btn-colors($ui-btn-default);
48+
@include btn-colors($btn-default);
4949
}
5050

5151
.btn-primary {
52-
@include btn-colors($ui-btn-primary);
52+
@include btn-colors($btn-primary);
5353
}
5454

5555
.btn-success {
56-
@include btn-colors($ui-btn-success);
56+
@include btn-colors($btn-success);
5757
}
5858

5959
.btn-info {
60-
@include btn-colors($ui-btn-info);
60+
@include btn-colors($btn-info);
6161
}
6262

6363
.btn-warning {
64-
@include btn-colors($ui-btn-warning);
64+
@include btn-colors($btn-warning);
6565
}
6666

6767
.btn-danger {
68-
@include btn-colors($ui-btn-danger );
68+
@include btn-colors($btn-danger );
6969
}
7070

7171
/* Button Sizes */
7272

7373
.btn-lg {
74-
@include btn-size($ui-btn-lg);
74+
@include btn-size($btn-lg);
7575
}
7676

7777
.btn-md {
78-
@include btn-size($ui-btn-md);
78+
@include btn-size($btn-md);
7979
}
8080

8181
.btn-sm {
82-
@include btn-size($ui-btn-sm);
82+
@include btn-size($btn-sm);
8383
}
8484

8585
.btn-xs {
86-
@include btn-size($ui-btn-xs);
86+
@include btn-size($btn-xs);
8787
}

‎scss/atoms/buttons/_mixins.scss

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
@mixin btn($margin) {
22
border: 1px solid transparent;
33
cursor: pointer;
4-
letter-spacing: map-get($ui-btn, letter-spacing);
5-
font-family: $ui-btn-font;
6-
font-weight: map-get($ui-btn, font-weight);
4+
letter-spacing: map-get($btn-element, letter-spacing);
5+
font-family: $btn-font;
6+
font-weight: map-get($btn-element, font-weight);
77
margin: $margin;
88
text-decoration: none;
9-
text-transform: map-get($ui-btn, text-transform);
9+
text-transform: map-get($btn-element, text-transform);
1010
}
1111

1212
@mixin btn-colors($btn-colors) {
1313
color: map-get($btn-colors, color);
1414
background: map-deep-get($btn-colors, "background", "base");
1515
border-color: map-get($btn-colors, border);
1616
@if (map-get($btn-colors, shadow) == true) {
17-
transition: map-get($ui-btn-shadows, transition);
18-
box-shadow: map-get($ui-btn-shadows, box-shadow-base);
17+
transition: map-get($btn-shadows, transition);
18+
box-shadow: map-get($btn-shadows, box-shadow-base);
1919
}
2020

2121
&:active,
2222
&.active {
2323
@include btn-active($btn-colors);
2424
@if (map-get($btn-colors, shadow) == true) {
25-
box-shadow: map-get($ui-btn-shadows, box-shadow-active);
25+
box-shadow: map-get($btn-shadows, box-shadow-active);
2626
}
2727
}
2828

@@ -40,7 +40,7 @@
4040
&.disabled {
4141
@include btn-disabled($btn-colors);
4242
@if (map-get($btn-colors, shadow) == true) {
43-
box-shadow: map-get($ui-btn-shadows, box-shadow-disabled);
43+
box-shadow: map-get($btn-shadows, box-shadow-disabled);
4444
}
4545
}
4646
}
@@ -71,17 +71,17 @@
7171
}
7272

7373
@mixin btn-disabled($btn-colors) {
74-
cursor: map-get($ui-btn-disabled, cursor);
75-
color: rgba(map-get($btn-colors, color), map-get($ui-btn-disabled, "color-opacity"));
74+
cursor: map-get($btn-disable, cursor);
75+
color: rgba(map-get($btn-colors, color), map-get($btn-disable, "color-opacity"));
7676
$bg: map-deep-get($btn-colors, "background", "base");
7777
@if ($bg == transparent) {
7878
background: map-deep-get($btn-colors, "background", "base");
7979
} @else {
80-
background: rgba($bg, map-get($ui-btn-disabled, "background-opacity"));
80+
background: rgba($bg, map-get($btn-disable, "background-opacity"));
8181
}
8282
@if (map-get($btn-colors, border) == transparent) {
8383
border-color: map-get($btn-colors, border);
8484
} @else {
85-
border-color: rgba(map-get($btn-colors, border), map-get($ui-btn-disabled, "background-opacity"));
85+
border-color: rgba(map-get($btn-colors, border), map-get($btn-disable, "background-opacity"));
8686
}
8787
}

‎scss/atoms/typography/_functions.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
* 1. font-size: em(14px);
1212
* 2. font-size: em(30px/14px);
1313
*/
14-
@function em($value, $context: map-get($font-default, font-size)) {
14+
@function em($value, $context: map-get($typography-font-default, font-size)) {
1515
@return ($value / $context * 1em);
1616
}

‎scss/atoms/typography/_typography.scss

+22-22
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,38 @@
1010
"mixins";
1111

1212
body {
13-
font: $normal #{ map-get( $font-default, font-size ) }/1.5 $sans;
13+
font: $typography-normal #{ map-get( $typography-font-default, font-size ) }/1.5 $typography-sans;
1414

15-
@media ( max-width: $viewport-md-min ) {
15+
@media ( max-width: $breakpoints-viewport-md-min ) {
1616
font-size: 16px;
1717
}
18-
@media ( max-width: $viewport-sm-min ) {
18+
@media ( max-width: $breakpoints-viewport-sm-min ) {
1919
font-size: 14px;
2020
}
2121
}
2222

2323
h1 {
24-
@include heading($h1);
24+
@include heading($typography-h1);
2525
}
2626

2727
h2 {
28-
@include heading($h2);
28+
@include heading($typography-h2);
2929
}
3030

3131
h3 {
32-
@include heading($h3);
32+
@include heading($typography-h3);
3333
}
3434

3535
h4 {
36-
@include heading($h4);
36+
@include heading($typography-h4);
3737
}
3838

3939
h5 {
40-
@include heading($h5);
40+
@include heading($typography-h5);
4141
}
4242

4343
h6 {
44-
@include heading($h6);
44+
@include heading($typography-h6);
4545
}
4646

4747
/*
@@ -52,21 +52,21 @@ h6 {
5252

5353
hr {
5454
border: 0;
55-
border-bottom: map-get($hr, thickness) map-get($hr, style) map-get($hr, color);
55+
border-bottom: map-get($typography-hr, thickness) map-get($typography-hr, style) map-get($typography-hr, color);
5656
}
5757

5858
blockquote {
5959
margin: 0;
60-
padding-left: map-get($blockquote,padding-left); //TODO consider all padding variables
60+
padding-left: map-get($typography-blockquote,padding-left); //TODO consider all padding variables
6161
position: relative;
62-
border-left: map-get($blockquote,border);
63-
font-style: map-get($blockquote,font-style);
62+
border-left: map-get($typography-blockquote,border);
63+
font-style: map-get($typography-blockquote,font-style);
6464
}
6565

6666
pre {
6767
padding: 16px 20px;
68-
background: map-get($pre,background);
69-
font: normal 12px/1.4 $monospace;
68+
background: map-get($typography-pre,background);
69+
font: normal 12px/1.4 $typography-monospace;
7070
}
7171

7272
/*
@@ -90,27 +90,27 @@ dd {
9090
*/
9191

9292
a {
93-
@include link($link);
93+
@include link($typography-link);
9494
&:visited {
95-
@include link($link-visited);
95+
@include link($typography-link-visited);
9696
}
9797
&:active,
9898
&:focus {
99-
@include link($link-focus);
99+
@include link($typography-link-focus);
100100
}
101101
&:hover {
102-
@include link($link-hover);
102+
@include link($typography-link-hover);
103103
}
104104
}
105105

106106
b,
107107
strong {
108-
font-weight: $bold;
108+
font-weight: $typography-bold;
109109
}
110110

111111
code {
112-
background: map-get($code,background);
112+
background: map-get($typography-code,background);
113113
font-size: em( 16px );
114114
padding: em( 4px, 16px ) em( 8px, 16px );
115-
border-radius: map-get($code,border-radius);
115+
border-radius: map-get($typography-code,border-radius);
116116
}

0 commit comments

Comments
 (0)