basscss-rails 1.0.0 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Rakefile +9 -1
- data/app/assets/stylesheets/basscss/_align.scss +13 -0
- data/app/assets/stylesheets/basscss/_background-colors.scss +99 -0
- data/app/assets/stylesheets/basscss/_base-buttons.scss +5 -1
- data/app/assets/stylesheets/basscss/_base-forms.scss +12 -13
- data/app/assets/stylesheets/basscss/_base-reset.scss +1 -7
- data/app/assets/stylesheets/basscss/_base-typography.scss +36 -39
- data/app/assets/stylesheets/basscss/_border-colors.scss +99 -0
- data/app/assets/stylesheets/basscss/_borders.scss +2 -0
- data/app/assets/stylesheets/basscss/_btn-outline.scss +98 -0
- data/app/assets/stylesheets/basscss/_btn-primary.scss +97 -0
- data/app/assets/stylesheets/basscss/_btn.scss +113 -0
- data/app/assets/stylesheets/basscss/_button-link.scss +9 -9
- data/app/assets/stylesheets/basscss/_button-outline.scss +0 -12
- data/app/assets/stylesheets/basscss/_button-solid.scss +104 -0
- data/app/assets/stylesheets/basscss/_button-transparent.scss +0 -12
- data/app/assets/stylesheets/basscss/_color-base.scss +16 -43
- data/app/assets/stylesheets/basscss/_color-forms-dark.scss +25 -6
- data/app/assets/stylesheets/basscss/_color-forms.scss +37 -17
- data/app/assets/stylesheets/basscss/_color-input-range.scss +119 -0
- data/app/assets/stylesheets/basscss/_color-progress.scss +95 -0
- data/app/assets/stylesheets/basscss/_colors.scss +5 -64
- data/app/assets/stylesheets/basscss/_flex-object.scss +2 -7
- data/app/assets/stylesheets/basscss/_type-scale.scss +81 -0
- data/app/assets/stylesheets/basscss/_utility-layout.scss +3 -2
- data/app/assets/stylesheets/basscss/_utility-typography.scss +14 -1
- data/app/assets/stylesheets/basscss/_white-space.scss +2 -0
- data/app/assets/stylesheets/basscss/basscss.scss +27 -25
- data/lib/basscss/rails/version.rb +1 -1
- metadata +14 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c850263322c05ef2020eee48915b123a27476694
|
4
|
+
data.tar.gz: 41f1beb95456b9144551d48d1ce7795ec740215f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bada0af36bf48cd748ea1977193169f6e0febc8c29ce3471f74c3dd397d119bcd098b958a5cd1769392ce6c4203c9497a2352a155d56d337307070d7c001afa8
|
7
|
+
data.tar.gz: b2ad0a185cafa200267c55089eeb140ab71955ccc7fe7c985a6f4da119d9d89be097424649a4c563c8cef675c7b998e44d7a38a1523782350ac2d42c74481fb3
|
data/Rakefile
CHANGED
@@ -1,2 +1,10 @@
|
|
1
|
-
require
|
1
|
+
require 'bundler/gem_tasks'
|
2
|
+
require 'fileutils'
|
2
3
|
|
4
|
+
task :update do
|
5
|
+
puts 'Updating basscss files'
|
6
|
+
# exec('npm i --save basscss-sass --prefix ./')
|
7
|
+
FileUtils.remove_dir('app/assets/stylesheets/basscss')
|
8
|
+
FileUtils.mkdir('app/assets/stylesheets/basscss')
|
9
|
+
exec('cp node_modules/basscss-sass/*.scss app/assets/stylesheets/basscss')
|
10
|
+
end
|
@@ -0,0 +1,13 @@
|
|
1
|
+
|
2
|
+
// Converted Variables
|
3
|
+
|
4
|
+
|
5
|
+
// Custom Media Query Variables
|
6
|
+
|
7
|
+
|
8
|
+
/* Basscss Align */
|
9
|
+
|
10
|
+
.align-baseline { vertical-align: baseline }
|
11
|
+
.align-top { vertical-align: top }
|
12
|
+
.align-middle { vertical-align: middle }
|
13
|
+
.align-bottom { vertical-align: bottom }
|
@@ -0,0 +1,99 @@
|
|
1
|
+
|
2
|
+
// Converted Variables
|
3
|
+
|
4
|
+
$aqua: #7fdbff !default;
|
5
|
+
$blue: #0074d9 !default;
|
6
|
+
$navy: #001f3f !default;
|
7
|
+
$teal: #39cccc !default;
|
8
|
+
$green: #2ecc40 !default;
|
9
|
+
$olive: #3d9970 !default;
|
10
|
+
$lime: #01ff70 !default;
|
11
|
+
$yellow: #ffdc00 !default;
|
12
|
+
$orange: #ff851b !default;
|
13
|
+
$red: #ff4136 !default;
|
14
|
+
$fuchsia: #f012be !default;
|
15
|
+
$purple: #b10dc9 !default;
|
16
|
+
$maroon: #85144b !default;
|
17
|
+
$white: #fff !default;
|
18
|
+
$silver: #ddd !default;
|
19
|
+
$gray: #aaa !default;
|
20
|
+
$black: #111 !default;
|
21
|
+
$font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
|
22
|
+
$line-height: 1.5 !default;
|
23
|
+
$heading-font-family: $font-family !default;
|
24
|
+
$heading-font-weight: bold !default;
|
25
|
+
$heading-line-height: 1.25 !default;
|
26
|
+
$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
|
27
|
+
$h1: 2rem !default;
|
28
|
+
$h2: 1.5rem !default;
|
29
|
+
$h3: 1.25rem !default;
|
30
|
+
$h4: 1rem !default;
|
31
|
+
$h5: .875rem !default;
|
32
|
+
$h6: .75rem !default;
|
33
|
+
$bold-font-weight: bold !default;
|
34
|
+
$space-1: .5rem !default;
|
35
|
+
$space-2: 1rem !default;
|
36
|
+
$space-3: 2rem !default;
|
37
|
+
$space-4: 4rem !default;
|
38
|
+
$form-field-font-size: 1rem !default;
|
39
|
+
$form-field-height: 2.25rem !default;
|
40
|
+
$form-field-padding-y: .5rem !default;
|
41
|
+
$form-field-padding-x: .5rem !default;
|
42
|
+
$button-font-size: inherit !default;
|
43
|
+
$button-font-weight: bold !default;
|
44
|
+
$button-line-height: 1.125rem !default;
|
45
|
+
$button-padding-y: .5rem !default;
|
46
|
+
$button-padding-x: 1rem !default;
|
47
|
+
$container-width: 64em !default;
|
48
|
+
$darken-1: rgba(0,0,0,.0625) !default;
|
49
|
+
$darken-2: rgba(0,0,0,.125) !default;
|
50
|
+
$darken-3: rgba(0,0,0,.25) !default;
|
51
|
+
$darken-4: rgba(0,0,0,.5) !default;
|
52
|
+
$border-width: 1px !default;
|
53
|
+
$border-radius: 3px !default;
|
54
|
+
$border-color: $darken-2 !default;
|
55
|
+
|
56
|
+
// Custom Media Query Variables
|
57
|
+
|
58
|
+
$breakpoint-sm: '(min-width: 40em)' !default;
|
59
|
+
$breakpoint-md: '(min-width: 52em)' !default;
|
60
|
+
$breakpoint-lg: '(min-width: 64em)' !default;
|
61
|
+
|
62
|
+
/* Basscss Background Colors */
|
63
|
+
|
64
|
+
.bg-black { background-color: $black }
|
65
|
+
.bg-gray { background-color: $gray }
|
66
|
+
.bg-silver { background-color: $silver }
|
67
|
+
.bg-white { background-color: $white }
|
68
|
+
|
69
|
+
.bg-aqua { background-color: $aqua }
|
70
|
+
.bg-blue { background-color: $blue }
|
71
|
+
.bg-navy { background-color: $navy }
|
72
|
+
.bg-teal { background-color: $teal }
|
73
|
+
.bg-green { background-color: $green }
|
74
|
+
.bg-olive { background-color: $olive }
|
75
|
+
.bg-lime { background-color: $lime }
|
76
|
+
|
77
|
+
.bg-yellow { background-color: $yellow }
|
78
|
+
.bg-orange { background-color: $orange }
|
79
|
+
.bg-red { background-color: $red }
|
80
|
+
.bg-fuchsia { background-color: $fuchsia }
|
81
|
+
.bg-purple { background-color: $purple }
|
82
|
+
.bg-maroon { background-color: $maroon }
|
83
|
+
|
84
|
+
.bg-darken-1 { background-color: $darken-1 }
|
85
|
+
.bg-darken-2 { background-color: $darken-2 }
|
86
|
+
.bg-darken-3 { background-color: $darken-3 }
|
87
|
+
.bg-darken-4 { background-color: $darken-4 }
|
88
|
+
|
89
|
+
/* Basscss Defaults */
|
90
|
+
|
91
|
+
/*
|
92
|
+
|
93
|
+
COLOR VARIABLES
|
94
|
+
|
95
|
+
- Cool
|
96
|
+
- Warm
|
97
|
+
- Gray Scale
|
98
|
+
|
99
|
+
*/
|
@@ -52,6 +52,7 @@ $darken-4: rgba(0,0,0,.5) !default;
|
|
52
52
|
$border-width: 1px !default;
|
53
53
|
$border-radius: 3px !default;
|
54
54
|
$border-color: $darken-2 !default;
|
55
|
+
$button-font-family: inherit !default;
|
55
56
|
$button-font-size: inherit !default;
|
56
57
|
$button-font-weight: $bold-font-weight /* Fallback value: bold */ !default;
|
57
58
|
$button-line-height: 1.125rem !default;
|
@@ -68,12 +69,12 @@ $breakpoint-lg: '(min-width: 64em)' !default;
|
|
68
69
|
|
69
70
|
button,
|
70
71
|
.button {
|
72
|
+
font-family: $button-font-family;
|
71
73
|
font-size: $button-font-size;
|
72
74
|
font-weight: $button-font-weight;
|
73
75
|
text-decoration: none;
|
74
76
|
cursor: pointer;
|
75
77
|
display: inline-block;
|
76
|
-
box-sizing: border-box;
|
77
78
|
line-height: $button-line-height;
|
78
79
|
padding: $button-padding-y $button-padding-x;
|
79
80
|
margin: 0;
|
@@ -83,11 +84,14 @@ button,
|
|
83
84
|
-webkit-appearance: none;
|
84
85
|
}
|
85
86
|
|
87
|
+
button,
|
86
88
|
button:after,
|
87
89
|
button:before,
|
90
|
+
.button,
|
88
91
|
.button:after,
|
89
92
|
.button:before {
|
90
93
|
box-sizing: border-box;
|
94
|
+
box-sizing: border-box;
|
91
95
|
}
|
92
96
|
|
93
97
|
::-moz-focus-inner {
|
@@ -52,6 +52,11 @@ $darken-4: rgba(0,0,0,.5) !default;
|
|
52
52
|
$border-width: 1px !default;
|
53
53
|
$border-radius: 3px !default;
|
54
54
|
$border-color: $darken-2 !default;
|
55
|
+
$form-field-font-family: inherit !default;
|
56
|
+
$form-field-font-size: 1rem !default;
|
57
|
+
$form-field-height: 2.25rem !default;
|
58
|
+
$form-field-padding-y: .5rem !default;
|
59
|
+
$form-field-padding-x: .5rem !default;
|
55
60
|
|
56
61
|
// Custom Media Query Variables
|
57
62
|
|
@@ -65,12 +70,19 @@ input,
|
|
65
70
|
select,
|
66
71
|
textarea,
|
67
72
|
fieldset {
|
73
|
+
font-family: $form-field-font-family;
|
68
74
|
font-size: $form-field-font-size;
|
75
|
+
box-sizing: border-box;
|
69
76
|
margin-top: 0;
|
70
77
|
margin-bottom: 0;
|
71
78
|
}
|
72
79
|
|
80
|
+
label {
|
81
|
+
vertical-align: middle;
|
82
|
+
}
|
83
|
+
|
73
84
|
input[type=text],
|
85
|
+
input[type=date],
|
74
86
|
input[type=datetime],
|
75
87
|
input[type=datetime-local],
|
76
88
|
input[type=email],
|
@@ -82,7 +94,6 @@ input[type=tel],
|
|
82
94
|
input[type=time],
|
83
95
|
input[type=url],
|
84
96
|
input[type=week] {
|
85
|
-
box-sizing: border-box;
|
86
97
|
height: $form-field-height;
|
87
98
|
padding: $form-field-padding-y $form-field-padding-x;
|
88
99
|
vertical-align: middle;
|
@@ -90,7 +101,6 @@ input[type=week] {
|
|
90
101
|
}
|
91
102
|
|
92
103
|
select {
|
93
|
-
box-sizing: border-box;
|
94
104
|
line-height: 1.75;
|
95
105
|
padding: $form-field-padding-y $form-field-padding-x;
|
96
106
|
}
|
@@ -101,21 +111,10 @@ select:not([multiple]) {
|
|
101
111
|
}
|
102
112
|
|
103
113
|
textarea {
|
104
|
-
box-sizing: border-box;
|
105
114
|
line-height: 1.75;
|
106
115
|
padding: $form-field-padding-y $form-field-padding-x;
|
107
116
|
}
|
108
117
|
|
109
|
-
.fieldset-reset {
|
110
|
-
padding: 0;
|
111
|
-
margin-left: 0;
|
112
|
-
margin-right: 0;
|
113
|
-
border: 0;
|
114
|
-
}
|
115
|
-
.fieldset-reset legend {
|
116
|
-
padding: 0;
|
117
|
-
}
|
118
|
-
|
119
118
|
/* Basscss Defaults */
|
120
119
|
|
121
120
|
/*
|
@@ -1,6 +1,22 @@
|
|
1
1
|
|
2
2
|
// Converted Variables
|
3
3
|
|
4
|
+
$font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
|
5
|
+
$line-height: 1.5 !default;
|
6
|
+
$body-font-size: 100% !default;
|
7
|
+
$heading-font-family: $font-family !default;
|
8
|
+
$heading-font-weight: bold !default;
|
9
|
+
$heading-line-height: 1.25 !default;
|
10
|
+
$heading-margin-top: 1em !default;
|
11
|
+
$heading-margin-bottom: .5em !default;
|
12
|
+
$paragraph-margin-top: 0 !default;
|
13
|
+
$paragraph-margin-bottom: $space-2 !default;
|
14
|
+
$list-margin-top: 0 !default;
|
15
|
+
$list-margin-bottom: $space-2 !default;
|
16
|
+
$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
|
17
|
+
$pre-font-size: inherit !default;
|
18
|
+
$pre-margin-top: 0 !default;
|
19
|
+
$pre-margin-bottom: $space-2 !default;
|
4
20
|
$aqua: #7fdbff !default;
|
5
21
|
$blue: #0074d9 !default;
|
6
22
|
$navy: #001f3f !default;
|
@@ -64,63 +80,44 @@ $breakpoint-lg: '(min-width: 64em)' !default;
|
|
64
80
|
body {
|
65
81
|
font-family: $font-family;
|
66
82
|
line-height: $line-height;
|
67
|
-
font-size:
|
83
|
+
font-size: $body-font-size;
|
68
84
|
}
|
69
85
|
|
70
86
|
h1, h2, h3, h4, h5, h6 {
|
71
87
|
font-family: $heading-font-family;
|
72
88
|
font-weight: $heading-font-weight;
|
73
89
|
line-height: $heading-line-height;
|
74
|
-
margin-top:
|
75
|
-
margin-bottom:
|
90
|
+
margin-top: $heading-margin-top;
|
91
|
+
margin-bottom: $heading-margin-bottom;
|
76
92
|
}
|
77
93
|
|
78
|
-
p
|
79
|
-
|
80
|
-
margin-
|
81
|
-
|
94
|
+
p {
|
95
|
+
margin-top: $paragraph-margin-top;
|
96
|
+
margin-bottom: $paragraph-margin-bottom;
|
97
|
+
}
|
98
|
+
|
99
|
+
dl, ol, ul {
|
100
|
+
margin-top: $list-margin-top;
|
101
|
+
margin-bottom: $list-margin-bottom;
|
82
102
|
}
|
83
103
|
|
84
104
|
pre, code, samp {
|
85
105
|
font-family: $monospace-font-family;
|
86
|
-
font-size:
|
106
|
+
font-size: $pre-font-size;
|
87
107
|
}
|
88
108
|
|
89
109
|
pre {
|
90
|
-
margin-top:
|
91
|
-
margin-bottom: $
|
110
|
+
margin-top: $pre-margin-top;
|
111
|
+
margin-bottom: $pre-margin-bottom;
|
92
112
|
overflow-x: scroll;
|
93
113
|
}
|
94
114
|
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
}
|
99
|
-
|
100
|
-
|
101
|
-
margin-top: $space-3;
|
102
|
-
margin-bottom: $space-3;
|
103
|
-
margin-left: 0;
|
104
|
-
padding-left: $space-2;
|
105
|
-
padding-right: $space-2;
|
106
|
-
}
|
107
|
-
blockquote,
|
108
|
-
blockquote p {
|
109
|
-
font-size: $h3;
|
110
|
-
font-style: italic;
|
111
|
-
}
|
112
|
-
|
113
|
-
h1, .h1 { font-size: $h1 }
|
114
|
-
h2, .h2 { font-size: $h2 }
|
115
|
-
h3, .h3 { font-size: $h3 }
|
116
|
-
h4, .h4 { font-size: $h4 }
|
117
|
-
h5, .h5 { font-size: $h5 }
|
118
|
-
h6, .h6 { font-size: $h6 }
|
119
|
-
|
120
|
-
.list-reset {
|
121
|
-
list-style: none;
|
122
|
-
padding-left: 0;
|
123
|
-
}
|
115
|
+
h1 { font-size: $h1 }
|
116
|
+
h2 { font-size: $h2 }
|
117
|
+
h3 { font-size: $h3 }
|
118
|
+
h4 { font-size: $h4 }
|
119
|
+
h5 { font-size: $h5 }
|
120
|
+
h6 { font-size: $h6 }
|
124
121
|
|
125
122
|
/* Basscss Defaults */
|
126
123
|
|
@@ -0,0 +1,99 @@
|
|
1
|
+
|
2
|
+
// Converted Variables
|
3
|
+
|
4
|
+
$aqua: #7fdbff !default;
|
5
|
+
$blue: #0074d9 !default;
|
6
|
+
$navy: #001f3f !default;
|
7
|
+
$teal: #39cccc !default;
|
8
|
+
$green: #2ecc40 !default;
|
9
|
+
$olive: #3d9970 !default;
|
10
|
+
$lime: #01ff70 !default;
|
11
|
+
$yellow: #ffdc00 !default;
|
12
|
+
$orange: #ff851b !default;
|
13
|
+
$red: #ff4136 !default;
|
14
|
+
$fuchsia: #f012be !default;
|
15
|
+
$purple: #b10dc9 !default;
|
16
|
+
$maroon: #85144b !default;
|
17
|
+
$white: #fff !default;
|
18
|
+
$silver: #ddd !default;
|
19
|
+
$gray: #aaa !default;
|
20
|
+
$black: #111 !default;
|
21
|
+
$font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
|
22
|
+
$line-height: 1.5 !default;
|
23
|
+
$heading-font-family: $font-family !default;
|
24
|
+
$heading-font-weight: bold !default;
|
25
|
+
$heading-line-height: 1.25 !default;
|
26
|
+
$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
|
27
|
+
$h1: 2rem !default;
|
28
|
+
$h2: 1.5rem !default;
|
29
|
+
$h3: 1.25rem !default;
|
30
|
+
$h4: 1rem !default;
|
31
|
+
$h5: .875rem !default;
|
32
|
+
$h6: .75rem !default;
|
33
|
+
$bold-font-weight: bold !default;
|
34
|
+
$space-1: .5rem !default;
|
35
|
+
$space-2: 1rem !default;
|
36
|
+
$space-3: 2rem !default;
|
37
|
+
$space-4: 4rem !default;
|
38
|
+
$form-field-font-size: 1rem !default;
|
39
|
+
$form-field-height: 2.25rem !default;
|
40
|
+
$form-field-padding-y: .5rem !default;
|
41
|
+
$form-field-padding-x: .5rem !default;
|
42
|
+
$button-font-size: inherit !default;
|
43
|
+
$button-font-weight: bold !default;
|
44
|
+
$button-line-height: 1.125rem !default;
|
45
|
+
$button-padding-y: .5rem !default;
|
46
|
+
$button-padding-x: 1rem !default;
|
47
|
+
$container-width: 64em !default;
|
48
|
+
$darken-1: rgba(0,0,0,.0625) !default;
|
49
|
+
$darken-2: rgba(0,0,0,.125) !default;
|
50
|
+
$darken-3: rgba(0,0,0,.25) !default;
|
51
|
+
$darken-4: rgba(0,0,0,.5) !default;
|
52
|
+
$border-width: 1px !default;
|
53
|
+
$border-radius: 3px !default;
|
54
|
+
$border-color: $darken-2 !default;
|
55
|
+
|
56
|
+
// Custom Media Query Variables
|
57
|
+
|
58
|
+
$breakpoint-sm: '(min-width: 40em)' !default;
|
59
|
+
$breakpoint-md: '(min-width: 52em)' !default;
|
60
|
+
$breakpoint-lg: '(min-width: 64em)' !default;
|
61
|
+
|
62
|
+
/* Basscss Border Colors */
|
63
|
+
|
64
|
+
.border-black { border-color: $black }
|
65
|
+
.border-gray { border-color: $gray }
|
66
|
+
.border-silver { border-color: $silver }
|
67
|
+
.border-white { border-color: $white }
|
68
|
+
|
69
|
+
.border-aqua { border-color: $aqua }
|
70
|
+
.border-blue { border-color: $blue }
|
71
|
+
.border-navy { border-color: $navy }
|
72
|
+
.border-teal { border-color: $teal }
|
73
|
+
.border-green { border-color: $green }
|
74
|
+
.border-olive { border-color: $olive }
|
75
|
+
.border-lime { border-color: $lime }
|
76
|
+
|
77
|
+
.border-yellow { border-color: $yellow }
|
78
|
+
.border-orange { border-color: $orange }
|
79
|
+
.border-red { border-color: $red }
|
80
|
+
.border-fuchsia { border-color: $fuchsia }
|
81
|
+
.border-purple { border-color: $purple }
|
82
|
+
.border-maroon { border-color: $maroon }
|
83
|
+
|
84
|
+
.border-darken-1 { border-color: $darken-1 }
|
85
|
+
.border-darken-2 { border-color: $darken-2 }
|
86
|
+
.border-darken-3 { border-color: $darken-3 }
|
87
|
+
.border-darken-4 { border-color: $darken-4 }
|
88
|
+
|
89
|
+
/* Basscss Defaults */
|
90
|
+
|
91
|
+
/*
|
92
|
+
|
93
|
+
COLOR VARIABLES
|
94
|
+
|
95
|
+
- Cool
|
96
|
+
- Warm
|
97
|
+
- Gray Scale
|
98
|
+
|
99
|
+
*/
|