basscss-rails 0.0.1
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 +7 -0
- data/.gitignore +22 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +67 -0
- data/Rakefile +2 -0
- data/app/assets/stylesheets/basscss/_borders.scss +35 -0
- data/app/assets/stylesheets/basscss/_button-themes.scss +32 -0
- data/app/assets/stylesheets/basscss/_buttons.scss +33 -0
- data/app/assets/stylesheets/basscss/_colors.scss +20 -0
- data/app/assets/stylesheets/basscss/_form-themes.scss +37 -0
- data/app/assets/stylesheets/basscss/_forms.scss +68 -0
- data/app/assets/stylesheets/basscss/_grid.scss +56 -0
- data/app/assets/stylesheets/basscss/_lists.scss +16 -0
- data/app/assets/stylesheets/basscss/_margins.scss +34 -0
- data/app/assets/stylesheets/basscss/_nav-themes.scss +130 -0
- data/app/assets/stylesheets/basscss/_navs.scss +59 -0
- data/app/assets/stylesheets/basscss/_padding.scss +18 -0
- data/app/assets/stylesheets/basscss/_positions.scss +22 -0
- data/app/assets/stylesheets/basscss/_reset.scss +10 -0
- data/app/assets/stylesheets/basscss/_table-object.scss +26 -0
- data/app/assets/stylesheets/basscss/_table-themes.scss +8 -0
- data/app/assets/stylesheets/basscss/_tables.scss +23 -0
- data/app/assets/stylesheets/basscss/_theme.scss +16 -0
- data/app/assets/stylesheets/basscss/_type.scss +43 -0
- data/app/assets/stylesheets/basscss/_utilities.scss +30 -0
- data/app/assets/stylesheets/basscss/_variables.scss +62 -0
- data/app/assets/stylesheets/basscss/basscss-lite.scss +19 -0
- data/app/assets/stylesheets/basscss/basscss.scss +43 -0
- data/basscss-rails.gemspec +23 -0
- data/lib/basscss/rails.rb +7 -0
- data/lib/basscss/rails/engine.rb +8 -0
- data/lib/basscss/rails/version.rb +5 -0
- metadata +105 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: b42bc530e7e0140e164255084ac6ea301ff586f3
|
4
|
+
data.tar.gz: 2ec01689af7c734429e7cf02c0542e80d2e99f4c
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 421bb41f2a18c11655f2797c03b700f875cac332ba436d8d77c935478b6c9e198be2d3bbd4436937a7c9127d74a40f17caab3f58045479f8248e1a3ce2eb6278
|
7
|
+
data.tar.gz: becc7d7cda4a187bd7d9cbb570ab66bad847d69d1083cc83c9232c5802a915c30a86a7918f1c82b98f14161283b3de457c89bd46c1decbce625886a665fd9c32
|
data/.gitignore
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
*.gem
|
2
|
+
*.rbc
|
3
|
+
.bundle
|
4
|
+
.config
|
5
|
+
.yardoc
|
6
|
+
Gemfile.lock
|
7
|
+
InstalledFiles
|
8
|
+
_yardoc
|
9
|
+
coverage
|
10
|
+
doc/
|
11
|
+
lib/bundler/man
|
12
|
+
pkg
|
13
|
+
rdoc
|
14
|
+
spec/reports
|
15
|
+
test/tmp
|
16
|
+
test/version_tmp
|
17
|
+
tmp
|
18
|
+
*.bundle
|
19
|
+
*.so
|
20
|
+
*.o
|
21
|
+
*.a
|
22
|
+
mkmf.log
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2014 Brent Jackson, John Otander
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,67 @@
|
|
1
|
+
# BASSCSS for Rails
|
2
|
+
|
3
|
+
Include BASSCSS, the next-level CSS toolkit, in your Rails apps through the assets pipeline.
|
4
|
+
|
5
|
+
Repackaged from <https://github.com/jxnblk/basscss> by Brent Jackson.
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add this line to your application's Gemfile:
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
gem 'basscss'
|
13
|
+
```
|
14
|
+
|
15
|
+
And then execute:
|
16
|
+
|
17
|
+
$ bundle
|
18
|
+
|
19
|
+
Or install it yourself as:
|
20
|
+
|
21
|
+
$ gem install basscss
|
22
|
+
|
23
|
+
##### Using Sass
|
24
|
+
|
25
|
+
You will then need to require the stylesheet in your application.scss:
|
26
|
+
|
27
|
+
```scss
|
28
|
+
@import "basscss/basscss";
|
29
|
+
```
|
30
|
+
|
31
|
+
There's also a lite version of BASSCSS, which can be included instead:
|
32
|
+
|
33
|
+
```scss
|
34
|
+
@import "basscss/basscss-lite";
|
35
|
+
```
|
36
|
+
|
37
|
+
##### Using CSS
|
38
|
+
|
39
|
+
Or, in your application.css:
|
40
|
+
|
41
|
+
```css
|
42
|
+
*= require basscss/basscss;
|
43
|
+
```
|
44
|
+
|
45
|
+
Or, for BASSCSS lite:
|
46
|
+
|
47
|
+
```css
|
48
|
+
*= require basscss/basscss-lite;
|
49
|
+
```
|
50
|
+
|
51
|
+
## Usage
|
52
|
+
|
53
|
+
Further documentation can be found on the BASSCSS website: <http://www.basscss.com/docs/>
|
54
|
+
|
55
|
+
## Contributing
|
56
|
+
|
57
|
+
1. Fork it ( https://github.com/johnotander/basscss/fork )
|
58
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
59
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
60
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
61
|
+
5. Create a new Pull Request
|
62
|
+
|
63
|
+
## Acknowledgements
|
64
|
+
|
65
|
+
* The CSS toolkit is written by Brent Jackson: <https://github.com/jxnblk/basscss>
|
66
|
+
|
67
|
+
More documentation available at <http://www.basscss.com/docs/>.
|
data/Rakefile
ADDED
@@ -0,0 +1,35 @@
|
|
1
|
+
// Borders
|
2
|
+
|
3
|
+
.border {
|
4
|
+
border-style: solid;
|
5
|
+
border-width: $border-width;
|
6
|
+
border-color: $border-color;
|
7
|
+
}
|
8
|
+
|
9
|
+
.border-top {
|
10
|
+
border-top-style: solid;
|
11
|
+
border-top-width: $border-width;
|
12
|
+
border-top-color: $border-color;
|
13
|
+
}
|
14
|
+
|
15
|
+
.border-right {
|
16
|
+
border-right-style: solid;
|
17
|
+
border-right-width: $border-width;
|
18
|
+
border-right-color: $border-color;
|
19
|
+
}
|
20
|
+
|
21
|
+
.border-bottom {
|
22
|
+
border-bottom-style: solid;
|
23
|
+
border-bottom-width: $border-width;
|
24
|
+
border-bottom-color: $border-color;
|
25
|
+
}
|
26
|
+
|
27
|
+
.border-left {
|
28
|
+
border-left-style: solid;
|
29
|
+
border-left-width: $border-width;
|
30
|
+
border-left-color: $border-color;
|
31
|
+
}
|
32
|
+
|
33
|
+
.rounded { border-radius: $border-radius; }
|
34
|
+
.circle { border-radius: 50%; }
|
35
|
+
|
@@ -0,0 +1,32 @@
|
|
1
|
+
// Button Themes
|
2
|
+
|
3
|
+
.button {
|
4
|
+
border-radius: $border-radius;
|
5
|
+
transition-duration: .2s;
|
6
|
+
transition-timing-function: ease;
|
7
|
+
transition-property: box-shadow , background-color;
|
8
|
+
&:focus {
|
9
|
+
outline: none;
|
10
|
+
box-shadow: 0 0 0 2px #fff, 0 0 1px 4px rgba($blue, .5);
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
.button-blue {
|
15
|
+
color: #fff;
|
16
|
+
background-color: $blue;
|
17
|
+
&:hover {
|
18
|
+
color: #fff;
|
19
|
+
background-color: darken($blue, 20%);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
.button-gray {
|
24
|
+
color: #fff;
|
25
|
+
background-color: $mid-gray;
|
26
|
+
&:hover {
|
27
|
+
color: #fff;
|
28
|
+
background-color: darken($mid-gray, 20%);
|
29
|
+
}
|
30
|
+
&:focus {}
|
31
|
+
}
|
32
|
+
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// Buttons
|
2
|
+
|
3
|
+
.button {
|
4
|
+
font-family: inherit;
|
5
|
+
font-weight: bold;
|
6
|
+
text-decoration: none;
|
7
|
+
cursor: pointer;
|
8
|
+
border: none;
|
9
|
+
-webkit-appearance: none;
|
10
|
+
appearance: none;
|
11
|
+
white-space: nowrap;
|
12
|
+
display: inline-block;
|
13
|
+
line-height: $ui-height;
|
14
|
+
height: auto;
|
15
|
+
min-height: $ui-height;
|
16
|
+
padding: 0 $ui-padding;
|
17
|
+
&:hover,
|
18
|
+
&:focus {
|
19
|
+
text-decoration: none;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
.button-big {
|
24
|
+
line-height: $ui-height-big;
|
25
|
+
min-height: $ui-height-big;
|
26
|
+
padding: 0 1.5*$ui-padding;
|
27
|
+
}
|
28
|
+
|
29
|
+
.button-small {
|
30
|
+
line-height: $ui-height-small;
|
31
|
+
min-height: $ui-height-small;
|
32
|
+
}
|
33
|
+
|
@@ -0,0 +1,20 @@
|
|
1
|
+
// Colors
|
2
|
+
|
3
|
+
.white { color: #fff; }
|
4
|
+
.dark-gray { color: $dark-gray; }
|
5
|
+
.mid-gray { color: $mid-gray; }
|
6
|
+
.light-gray { color: $light-gray; }
|
7
|
+
.blue { color: $blue; }
|
8
|
+
.green { color: $green; }
|
9
|
+
.yellow { color: $yellow; }
|
10
|
+
.red { color: $red; }
|
11
|
+
|
12
|
+
.bg-white { background-color: #fff; }
|
13
|
+
.bg-dark-gray { background-color: $dark-gray; }
|
14
|
+
.bg-mid-gray { background-color: $mid-gray; }
|
15
|
+
.bg-light-gray { background-color: $light-gray; }
|
16
|
+
.bg-blue { background-color: $blue; }
|
17
|
+
.bg-green { background-color: $green; }
|
18
|
+
.bg-yellow { background-color: $yellow; }
|
19
|
+
.bg-red { background-color: $red; }
|
20
|
+
|
@@ -0,0 +1,37 @@
|
|
1
|
+
// Form Themes
|
2
|
+
|
3
|
+
// See _forms.scss for structural styles
|
4
|
+
|
5
|
+
.form-light {
|
6
|
+
.input,
|
7
|
+
.textarea,
|
8
|
+
.select {
|
9
|
+
background-color: white;
|
10
|
+
transition: box-shadow .2s ease;
|
11
|
+
border-color: $border-color;
|
12
|
+
border-radius: $border-radius;
|
13
|
+
&:focus {
|
14
|
+
outline: none;
|
15
|
+
border-color: $blue;
|
16
|
+
box-shadow: 0 0 .125rem rgba($blue,.5);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
.radio input,
|
20
|
+
.checkbox input {
|
21
|
+
transition: box-shadow .2s ease;
|
22
|
+
&:focus {
|
23
|
+
outline: none;
|
24
|
+
box-shadow: 0 0 0 2px #fff, 0 0 1px 4px rgba($blue, .5);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
.radio input {
|
28
|
+
border-radius: 50%;
|
29
|
+
}
|
30
|
+
.fieldset {
|
31
|
+
border-width: 1px;
|
32
|
+
border-style: solid;
|
33
|
+
border-color: $border-color;
|
34
|
+
border-radius: $border-radius;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
@@ -0,0 +1,68 @@
|
|
1
|
+
// Forms
|
2
|
+
|
3
|
+
.form {
|
4
|
+
font-size: 1rem;
|
5
|
+
.field,
|
6
|
+
.input,
|
7
|
+
.select {
|
8
|
+
-moz-box-sizing: border-box;
|
9
|
+
box-sizing: border-box;
|
10
|
+
max-width: 100%;
|
11
|
+
height: $ui-height;
|
12
|
+
line-height: $ui-height - $ui-padding;
|
13
|
+
}
|
14
|
+
.input,
|
15
|
+
.select {
|
16
|
+
border-style: solid;
|
17
|
+
border-width: 1px;
|
18
|
+
}
|
19
|
+
.select {
|
20
|
+
margin-right: 0;
|
21
|
+
margin-left: 0;
|
22
|
+
&[multiple] {
|
23
|
+
height: auto;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
.input {
|
27
|
+
padding: .5*$ui-padding $ui-padding;
|
28
|
+
-webkit-appearance: none;
|
29
|
+
appearance: none;
|
30
|
+
}
|
31
|
+
.textarea {
|
32
|
+
-moz-box-sizing: border-box;
|
33
|
+
box-sizing: border-box;
|
34
|
+
padding: $ui-padding;
|
35
|
+
line-height: 1.5;
|
36
|
+
}
|
37
|
+
.field-big,
|
38
|
+
.input-big {
|
39
|
+
height: $ui-height-big;
|
40
|
+
}
|
41
|
+
.field-small,
|
42
|
+
.input-small {
|
43
|
+
height: $ui-height-small;
|
44
|
+
line-height: $ui-height-small - $ui-padding;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
.form-stacked {
|
49
|
+
.label,
|
50
|
+
.input,
|
51
|
+
.select,
|
52
|
+
.checkbox,
|
53
|
+
.radio,
|
54
|
+
.fieldset,
|
55
|
+
.field {
|
56
|
+
display: block;
|
57
|
+
width: 100%;
|
58
|
+
}
|
59
|
+
.input,
|
60
|
+
.select,
|
61
|
+
.radio,
|
62
|
+
.checkbox,
|
63
|
+
.fieldset,
|
64
|
+
.field {
|
65
|
+
margin-bottom: 1rem;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
@@ -0,0 +1,56 @@
|
|
1
|
+
// Grid
|
2
|
+
|
3
|
+
.container {
|
4
|
+
max-width: $grid-max-width;
|
5
|
+
margin-right: auto;
|
6
|
+
margin-left: auto;
|
7
|
+
}
|
8
|
+
|
9
|
+
.row {
|
10
|
+
overflow: hidden;
|
11
|
+
margin-right: -$grid-gutter/2;
|
12
|
+
margin-left: -$grid-gutter/2;
|
13
|
+
}
|
14
|
+
|
15
|
+
.col,
|
16
|
+
.col-right,
|
17
|
+
.col-center,
|
18
|
+
.mobile-col,
|
19
|
+
.col-px {
|
20
|
+
box-sizing: border-box;
|
21
|
+
padding-right: $grid-gutter/2;
|
22
|
+
padding-left: $grid-gutter/2;
|
23
|
+
}
|
24
|
+
|
25
|
+
// Mobile grid
|
26
|
+
.mobile-col { float: left; }
|
27
|
+
@for $i from 1 through 11 {
|
28
|
+
.mobile-col-#{$i} { width: percentage($i/12); }
|
29
|
+
}
|
30
|
+
|
31
|
+
// Desktop grid
|
32
|
+
@media screen and (min-width: $breakpoint-desktop) {
|
33
|
+
.col { float: left; }
|
34
|
+
.col-right { float: right; }
|
35
|
+
.col-center { margin-right: auto; margin-left: auto; }
|
36
|
+
@for $i from 1 through 11 {
|
37
|
+
.col-#{$i} { width: percentage($i/12); }
|
38
|
+
.col-offset-#{$i} { margin-left: percentage($i/12); }
|
39
|
+
}
|
40
|
+
.container-col-10 {
|
41
|
+
max-width: (10/12 * ($grid-max-width + $grid-gutter)) - $grid-gutter;
|
42
|
+
margin-right: auto;
|
43
|
+
margin-left: auto;
|
44
|
+
}
|
45
|
+
.container-col-8 {
|
46
|
+
max-width: (8/12 * ($grid-max-width + $grid-gutter)) - $grid-gutter;
|
47
|
+
margin-right: auto;
|
48
|
+
margin-left: auto;
|
49
|
+
}
|
50
|
+
.container-col-6 {
|
51
|
+
max-width: (6/12 * ($grid-max-width + $grid-gutter)) - $grid-gutter;
|
52
|
+
margin-right: auto;
|
53
|
+
margin-left: auto;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
@@ -0,0 +1,34 @@
|
|
1
|
+
// Margins
|
2
|
+
|
3
|
+
.m0 { margin: 0; }
|
4
|
+
.mb0 { margin-bottom: 0; }
|
5
|
+
|
6
|
+
.m1 { margin: .5*$space; }
|
7
|
+
.mt1 { margin-top: .5*$space; }
|
8
|
+
.mr1 { margin-right: .5*$space; }
|
9
|
+
.mb1 { margin-bottom: .5*$space; }
|
10
|
+
.ml1 { margin-left: .5*$space; }
|
11
|
+
|
12
|
+
.m2 { margin: $space; }
|
13
|
+
.mt2 { margin-top: $space; }
|
14
|
+
.mr2 { margin-right: $space; }
|
15
|
+
.mb2 { margin-bottom: $space; }
|
16
|
+
.ml2 { margin-left: $space; }
|
17
|
+
|
18
|
+
.m3 { margin: 2*$space; }
|
19
|
+
.mt3 { margin-top: 2*$space; }
|
20
|
+
.mr3 { margin-right: 2*$space; }
|
21
|
+
.mb3 { margin-bottom: 2*$space; }
|
22
|
+
.ml3 { margin-left: 2*$space; }
|
23
|
+
|
24
|
+
.m4 { margin: 4*$space; }
|
25
|
+
.mt4 { margin-top: 4*$space; }
|
26
|
+
.mr4 { margin-right: 4*$space; }
|
27
|
+
.mb4 { margin-bottom: 4*$space; }
|
28
|
+
.ml4 { margin-left: 4*$space; }
|
29
|
+
|
30
|
+
|
31
|
+
// Wrapper for horizontally centering elements with a set width
|
32
|
+
.wrap { margin-right: auto; margin-left: auto; }
|
33
|
+
|
34
|
+
|
@@ -0,0 +1,130 @@
|
|
1
|
+
// Nav Themes
|
2
|
+
|
3
|
+
// See _nav.scss for structural styles
|
4
|
+
|
5
|
+
// Undo default link styles
|
6
|
+
.nav a {
|
7
|
+
&:hover,
|
8
|
+
&:focus {
|
9
|
+
text-decoration: none;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
.nav-dark {
|
14
|
+
& > a {
|
15
|
+
color: white;
|
16
|
+
&:hover,
|
17
|
+
&:focus {
|
18
|
+
color: white;
|
19
|
+
background-color: $darken-2;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
.active {
|
23
|
+
background-color: $darken-3;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
.nav-light {
|
28
|
+
& > a {
|
29
|
+
color: $dark-gray;
|
30
|
+
&:hover,
|
31
|
+
&:focus {
|
32
|
+
color: $dark-gray;
|
33
|
+
background-color: $darken-1;
|
34
|
+
}
|
35
|
+
}
|
36
|
+
.active {
|
37
|
+
background-color: $darken-2;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
// Bordered treatment - For vertical layouts only
|
42
|
+
.nav-borders {
|
43
|
+
border-style: solid;
|
44
|
+
border-width: 1px;
|
45
|
+
border-color: $border-color;
|
46
|
+
& > a {
|
47
|
+
border-top-style: solid;
|
48
|
+
border-top-width: 1px;
|
49
|
+
border-top-color: $border-color;
|
50
|
+
&:first-child {
|
51
|
+
border-top: 0;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
.active {
|
55
|
+
color: $dark-gray;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
// Pills
|
60
|
+
.nav-pills {
|
61
|
+
& > a {
|
62
|
+
border-radius: $border-radius;
|
63
|
+
&:hover,
|
64
|
+
&:focus {
|
65
|
+
background-color: rgba($blue,.125);
|
66
|
+
}
|
67
|
+
}
|
68
|
+
.active {
|
69
|
+
color: white;
|
70
|
+
background-color: $blue;
|
71
|
+
&:hover,
|
72
|
+
&:focus {
|
73
|
+
background-color: darken($blue,10%);
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
// Segmented control styles - For horizontal layouts only
|
79
|
+
.nav-segments {
|
80
|
+
box-shadow: inset 0 0 0 1px $blue;
|
81
|
+
border-radius: $border-radius;
|
82
|
+
& > a {
|
83
|
+
border-right: 1px solid $blue;
|
84
|
+
border-bottom: 1px solid $blue;
|
85
|
+
&:hover,
|
86
|
+
&:focus {
|
87
|
+
background-color: rgba($blue,.125);
|
88
|
+
}
|
89
|
+
&:first-child {
|
90
|
+
border-radius: $border-radius 0 0 $border-radius;
|
91
|
+
}
|
92
|
+
&:last-child {
|
93
|
+
border-right: 0;
|
94
|
+
border-radius: 0 $border-radius $border-radius 0;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
.active {
|
98
|
+
color: white;
|
99
|
+
background-color: $blue;
|
100
|
+
&:hover,
|
101
|
+
&:focus {
|
102
|
+
background-color: darken($blue,10%);
|
103
|
+
}
|
104
|
+
}
|
105
|
+
.disabled {
|
106
|
+
color: rgba($dark-gray,.5);
|
107
|
+
&:hover,
|
108
|
+
&:focus {
|
109
|
+
color: rgba($dark-gray,.5);
|
110
|
+
background-color: transparent;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
}
|
114
|
+
|
115
|
+
// Tabs - For horizontal layout only
|
116
|
+
.nav-tabs {
|
117
|
+
& > a {
|
118
|
+
border-radius: $border-radius $border-radius 0 0;
|
119
|
+
border-bottom: 1px solid $border-color;
|
120
|
+
&:hover {
|
121
|
+
background-color: $darken-1;
|
122
|
+
}
|
123
|
+
}
|
124
|
+
.active {
|
125
|
+
background-color: white;
|
126
|
+
border: 1px solid $border-color;
|
127
|
+
border-bottom-color: transparent;
|
128
|
+
}
|
129
|
+
}
|
130
|
+
|
@@ -0,0 +1,59 @@
|
|
1
|
+
// Nav Component
|
2
|
+
|
3
|
+
// Sets line height, display block, padding, and white-space nowrap
|
4
|
+
.nav {
|
5
|
+
line-height: $ui-height;
|
6
|
+
& > a,
|
7
|
+
.nav-item {
|
8
|
+
display: block;
|
9
|
+
line-height: inherit;
|
10
|
+
white-space: nowrap;
|
11
|
+
}
|
12
|
+
& > a {
|
13
|
+
padding-right: $ui-padding;
|
14
|
+
padding-left: $ui-padding;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
// Sets display table at all sizes
|
19
|
+
.mobile-nav-table {
|
20
|
+
display: table;
|
21
|
+
& > a,
|
22
|
+
.nav-item {
|
23
|
+
display: table-cell;
|
24
|
+
vertical-align: middle;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
// Sets display table above breakpoint
|
29
|
+
@media (min-width: $breakpoint-mobile) {
|
30
|
+
.nav-table {
|
31
|
+
display: table;
|
32
|
+
& > a,
|
33
|
+
.nav-item {
|
34
|
+
display: table-cell;
|
35
|
+
vertical-align: middle;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
// Extension to set all nav-table items equal width
|
41
|
+
// Use with .full-width to span the full width of container
|
42
|
+
.nav-table-fixed { table-layout: fixed; }
|
43
|
+
|
44
|
+
// Extension to add padding to .nav-item
|
45
|
+
.nav-item-px {
|
46
|
+
padding-right: $ui-padding;
|
47
|
+
padding-left: $ui-padding;
|
48
|
+
}
|
49
|
+
|
50
|
+
// Height extensions
|
51
|
+
.nav-big { line-height: $ui-height-big; }
|
52
|
+
.nav-small { line-height: $ui-height-small; }
|
53
|
+
|
54
|
+
// Extension to align with surrounding content
|
55
|
+
.nav-flush {
|
56
|
+
margin-right: -$ui-padding;
|
57
|
+
margin-left: -$ui-padding;
|
58
|
+
}
|
59
|
+
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// Padding
|
2
|
+
|
3
|
+
.p1 { padding: .5*$space; }
|
4
|
+
.px1 { padding-right: .5*$space; padding-left: .5*$space; }
|
5
|
+
.py1 { padding-top: .5*$space; padding-bottom: .5*$space; }
|
6
|
+
|
7
|
+
.p2 { padding: $space; }
|
8
|
+
.px2 { padding-right: $space; padding-left: $space; }
|
9
|
+
.py2 { padding-top: $space; padding-bottom: $space; }
|
10
|
+
|
11
|
+
.p3 { padding: 2*$space; }
|
12
|
+
.px3 { padding-right: 2*$space; padding-left: 2*$space; }
|
13
|
+
.py3 { padding-top: 2*$space; padding-bottom: 2*$space; }
|
14
|
+
|
15
|
+
.p4 { padding: 4*$space; }
|
16
|
+
.px4 { padding-right: 4*$space; padding-left: 4*$space; }
|
17
|
+
.py4 { padding-top: 4*$space; padding-bottom: 4*$space; }
|
18
|
+
|
@@ -0,0 +1,22 @@
|
|
1
|
+
// Positioning Utilities
|
2
|
+
|
3
|
+
.relative { position: relative; }
|
4
|
+
.absolute { position: absolute; }
|
5
|
+
.fixed { position: fixed; }
|
6
|
+
|
7
|
+
.top-0 { top: 0; }
|
8
|
+
.right-0 { right: 0; }
|
9
|
+
.bottom-0 { bottom: 0; }
|
10
|
+
.left-0 { left: 0; }
|
11
|
+
|
12
|
+
.z1 { z-index: 1; }
|
13
|
+
.z2 { z-index: 2; }
|
14
|
+
.z3 { z-index: 3; }
|
15
|
+
.z4 { z-index: 4; }
|
16
|
+
|
17
|
+
.absolute-center {
|
18
|
+
top: 0; right: 0; bottom: 0; left: 0;
|
19
|
+
margin: auto;
|
20
|
+
display: table;
|
21
|
+
}
|
22
|
+
|
@@ -0,0 +1,10 @@
|
|
1
|
+
// Reset
|
2
|
+
|
3
|
+
body, button, input, select, textarea, pre { margin: 0; }
|
4
|
+
h1, h2, h3, h4, h5, h6, p, dl, ol, ul {
|
5
|
+
margin-top: 0;
|
6
|
+
margin-bottom: 1rem;
|
7
|
+
}
|
8
|
+
button, input, select, textarea { font-family: inherit; font-size: 100%; }
|
9
|
+
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; }
|
10
|
+
|
@@ -0,0 +1,26 @@
|
|
1
|
+
// Table object
|
2
|
+
|
3
|
+
.mobile-table {
|
4
|
+
display: table;
|
5
|
+
width: 100%;
|
6
|
+
}
|
7
|
+
.mobile-table-cell {
|
8
|
+
display: table-cell;
|
9
|
+
vertical-align: middle;
|
10
|
+
}
|
11
|
+
|
12
|
+
@media (min-width: $breakpoint-desktop){
|
13
|
+
.table {
|
14
|
+
display: table;
|
15
|
+
width: 100%;
|
16
|
+
}
|
17
|
+
.table-cell {
|
18
|
+
display: table-cell;
|
19
|
+
vertical-align: middle;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
.table-fixed {
|
24
|
+
table-layout: fixed;
|
25
|
+
}
|
26
|
+
|
@@ -0,0 +1,23 @@
|
|
1
|
+
// Tables
|
2
|
+
|
3
|
+
.table-reset {
|
4
|
+
border-collapse: collapse;
|
5
|
+
border-spacing: 0;
|
6
|
+
max-width: 100%;
|
7
|
+
width: 100%;
|
8
|
+
th { text-align: left; }
|
9
|
+
th, td {
|
10
|
+
padding: $ui-padding;
|
11
|
+
line-height: inherit;
|
12
|
+
}
|
13
|
+
th { vertical-align: bottom; }
|
14
|
+
td { vertical-align: top; }
|
15
|
+
}
|
16
|
+
|
17
|
+
// Extension for smaller tables
|
18
|
+
.table-small {
|
19
|
+
th, td {
|
20
|
+
padding: .25*$ui-padding $ui-padding;
|
21
|
+
line-height: $ui-height-small;
|
22
|
+
}
|
23
|
+
}
|
@@ -0,0 +1,43 @@
|
|
1
|
+
// Type
|
2
|
+
|
3
|
+
body {
|
4
|
+
font-family: $font-family;
|
5
|
+
line-height: $line-height;
|
6
|
+
font-weight: 400;
|
7
|
+
}
|
8
|
+
|
9
|
+
h1, h2, h3, h4, h5, h6 { line-height: $line-height-heading; }
|
10
|
+
|
11
|
+
// Base Type Scale
|
12
|
+
h1, .h1 { font-size: $h1; }
|
13
|
+
h2, .h2 { font-size: $h2; }
|
14
|
+
h3, .h3 { font-size: $h3; }
|
15
|
+
h4, .h4,
|
16
|
+
p, dl, ol, ul { font-size: $h4; }
|
17
|
+
h5, .h5 { font-size: $h5; }
|
18
|
+
h6, .h6, small { font-size: $h6; }
|
19
|
+
|
20
|
+
// Responsive Type Scale
|
21
|
+
@if ($responsive-type) {
|
22
|
+
@media screen and (min-width: $breakpoint-desktop) {
|
23
|
+
.h1 { font-size: $desktop-h1; }
|
24
|
+
.h2 { font-size: $desktop-h2; }
|
25
|
+
.h3 { font-size: $desktop-h3; }
|
26
|
+
.h4 { font-size: $desktop-h4; }
|
27
|
+
.h5 { font-size: $desktop-h5; }
|
28
|
+
.h6 { font-size: $desktop-h6; }
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
// Utilities
|
33
|
+
.bold { font-weight: bold; }
|
34
|
+
.regular { font-weight: normal; }
|
35
|
+
.italic { font-style: italic; }
|
36
|
+
.caps { text-transform: uppercase; letter-spacing: .2em; }
|
37
|
+
|
38
|
+
// Alignment
|
39
|
+
.left-align { text-align: left; }
|
40
|
+
.center { text-align: center; }
|
41
|
+
.right-align { text-align: right; }
|
42
|
+
.justified { text-align: justify; }
|
43
|
+
|
@@ -0,0 +1,30 @@
|
|
1
|
+
// Layout Utilities
|
2
|
+
|
3
|
+
.inline { display: inline; }
|
4
|
+
.block { display: block; }
|
5
|
+
.inline-block { display: inline-block; }
|
6
|
+
|
7
|
+
.oh { overflow: hidden; }
|
8
|
+
.left { float: left; }
|
9
|
+
.right { float: right; }
|
10
|
+
|
11
|
+
.clearfix {
|
12
|
+
&:before, &:after { content: " "; display: table; }
|
13
|
+
&:after { clear: both; }
|
14
|
+
}
|
15
|
+
|
16
|
+
.fit { max-width: 100%; }
|
17
|
+
|
18
|
+
.full-width { width: 100%; }
|
19
|
+
.half-width { width: 50%; }
|
20
|
+
|
21
|
+
// Responsive states
|
22
|
+
.mobile-show { display: none !important; }
|
23
|
+
@media screen and (max-width: 48em) {
|
24
|
+
.mobile-show,
|
25
|
+
.mobile-block { display: block !important; }
|
26
|
+
.mobile-block { width: 100%; }
|
27
|
+
.mobile-hide { display: none !important; }
|
28
|
+
.mobile-center { text-align: center; }
|
29
|
+
}
|
30
|
+
|
@@ -0,0 +1,62 @@
|
|
1
|
+
// Variables
|
2
|
+
|
3
|
+
// Default whitespace unit
|
4
|
+
$space: 1rem !default;
|
5
|
+
|
6
|
+
// Typography
|
7
|
+
$font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
|
8
|
+
$line-height: 1.5 !default;
|
9
|
+
$line-height-heading: 1.25 !default;
|
10
|
+
|
11
|
+
// Type Scale
|
12
|
+
$h1: 2rem !default;
|
13
|
+
$h2: 1.5rem !default;
|
14
|
+
$h3: 1.25rem !default;
|
15
|
+
$h4: 1rem !default;
|
16
|
+
$h5: .75rem !default;
|
17
|
+
$h6: .75rem !default;
|
18
|
+
|
19
|
+
// Responsive type scale
|
20
|
+
$responsive-type: true !default;
|
21
|
+
$desktop-h1: 4rem !default;
|
22
|
+
$desktop-h2: 2rem !default;
|
23
|
+
$desktop-h3: 1.5rem !default;
|
24
|
+
$desktop-h4: 1.125rem !default;
|
25
|
+
$desktop-h5: .875rem !default;
|
26
|
+
$desktop-h6: .875rem !default;
|
27
|
+
|
28
|
+
// Breakpoints
|
29
|
+
$breakpoint-mobile: 32em !default;
|
30
|
+
$breakpoint-desktop: 48em !default;
|
31
|
+
|
32
|
+
// Heights for buttons, forms, nav, etc.
|
33
|
+
$ui-height: 2.25rem !default;
|
34
|
+
$ui-height-small: 1.75rem !default;
|
35
|
+
$ui-height-big: 3rem !default;
|
36
|
+
|
37
|
+
$ui-padding: .75*$space !default;
|
38
|
+
|
39
|
+
// Grid
|
40
|
+
$grid-max-width: 75rem !default;
|
41
|
+
$grid-gutter: 2 * $space !default;
|
42
|
+
|
43
|
+
// Theme
|
44
|
+
$blue: #0096cc !default;
|
45
|
+
$light-gray: #eee !default;
|
46
|
+
$mid-gray: #777 !default;
|
47
|
+
$dark-gray: #333 !default;
|
48
|
+
|
49
|
+
$red: #f96010 !default;
|
50
|
+
$green: #11e966 !default;
|
51
|
+
$yellow: #ffdc00 !default;
|
52
|
+
|
53
|
+
// Alpha blacks for UI elements
|
54
|
+
$darken-1: rgba(#000,.125) !default;
|
55
|
+
$darken-2: rgba(#000,.25) !default;
|
56
|
+
$darken-3: rgba(#000,.375) !default;
|
57
|
+
|
58
|
+
// Borders
|
59
|
+
$border-color: #ccc !default;
|
60
|
+
$border-width: 1px !default;
|
61
|
+
$border-radius: .25rem !default;
|
62
|
+
|
@@ -0,0 +1,19 @@
|
|
1
|
+
/*
|
2
|
+
|
3
|
+
BASSCSS Lite
|
4
|
+
|
5
|
+
Next-level CSS toolkit - http://basscss.com
|
6
|
+
|
7
|
+
Made with love by Jxnblk - ©2014 Brent Jackson
|
8
|
+
MIT License http://opensource.org/licenses/MIT
|
9
|
+
|
10
|
+
*/
|
11
|
+
|
12
|
+
|
13
|
+
@import "variables";
|
14
|
+
@import "reset";
|
15
|
+
@import "type";
|
16
|
+
@import "margins";
|
17
|
+
@import "padding";
|
18
|
+
@import "utilities";
|
19
|
+
|
@@ -0,0 +1,43 @@
|
|
1
|
+
/*
|
2
|
+
|
3
|
+
BASSCSS
|
4
|
+
|
5
|
+
Next-level CSS toolkit - http://basscss.com
|
6
|
+
|
7
|
+
Made with love by Jxnblk - ©2014 Brent Jackson
|
8
|
+
MIT License http://opensource.org/licenses/MIT
|
9
|
+
|
10
|
+
*/
|
11
|
+
|
12
|
+
|
13
|
+
@import "variables";
|
14
|
+
|
15
|
+
@import "reset";
|
16
|
+
|
17
|
+
@import "type";
|
18
|
+
@import "margins";
|
19
|
+
@import "padding";
|
20
|
+
@import "utilities";
|
21
|
+
@import "forms";
|
22
|
+
@import "lists";
|
23
|
+
@import "positions";
|
24
|
+
@import "tables";
|
25
|
+
|
26
|
+
// Components
|
27
|
+
@import "buttons";
|
28
|
+
@import "grid";
|
29
|
+
@import "table-object";
|
30
|
+
@import "navs";
|
31
|
+
|
32
|
+
|
33
|
+
// Thematic styles
|
34
|
+
@import "theme";
|
35
|
+
@import "colors";
|
36
|
+
@import "borders";
|
37
|
+
|
38
|
+
@import "form-themes";
|
39
|
+
@import "table-themes";
|
40
|
+
|
41
|
+
@import "button-themes";
|
42
|
+
@import "nav-themes";
|
43
|
+
|
@@ -0,0 +1,23 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'basscss/rails/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "basscss-rails"
|
8
|
+
spec.version = Basscss::Rails::VERSION
|
9
|
+
spec.authors = ["John Otander"]
|
10
|
+
spec.email = ["johnotander@gmail.com"]
|
11
|
+
spec.summary = %q{Include BASSCSS in your Rails apps.}
|
12
|
+
spec.description = %q{Include BASSCSS, a simple, responsive CSS toolkit based on OOCSS principles in your Rails apps.}
|
13
|
+
spec.homepage = "https://github.com/johnotander/basscss-rails"
|
14
|
+
spec.license = "MIT"
|
15
|
+
|
16
|
+
spec.files = `git ls-files -z`.split("\x0")
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
19
|
+
spec.require_paths = ["lib"]
|
20
|
+
|
21
|
+
spec.add_development_dependency "bundler", "~> 1.6"
|
22
|
+
spec.add_development_dependency "rake"
|
23
|
+
end
|
metadata
ADDED
@@ -0,0 +1,105 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: basscss-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- John Otander
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2014-08-23 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: bundler
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '1.6'
|
20
|
+
type: :development
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.6'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rake
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ">="
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '0'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ">="
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
description: Include BASSCSS, a simple, responsive CSS toolkit based on OOCSS principles
|
42
|
+
in your Rails apps.
|
43
|
+
email:
|
44
|
+
- johnotander@gmail.com
|
45
|
+
executables: []
|
46
|
+
extensions: []
|
47
|
+
extra_rdoc_files: []
|
48
|
+
files:
|
49
|
+
- ".gitignore"
|
50
|
+
- Gemfile
|
51
|
+
- LICENSE.txt
|
52
|
+
- README.md
|
53
|
+
- Rakefile
|
54
|
+
- app/assets/stylesheets/basscss/_borders.scss
|
55
|
+
- app/assets/stylesheets/basscss/_button-themes.scss
|
56
|
+
- app/assets/stylesheets/basscss/_buttons.scss
|
57
|
+
- app/assets/stylesheets/basscss/_colors.scss
|
58
|
+
- app/assets/stylesheets/basscss/_form-themes.scss
|
59
|
+
- app/assets/stylesheets/basscss/_forms.scss
|
60
|
+
- app/assets/stylesheets/basscss/_grid.scss
|
61
|
+
- app/assets/stylesheets/basscss/_lists.scss
|
62
|
+
- app/assets/stylesheets/basscss/_margins.scss
|
63
|
+
- app/assets/stylesheets/basscss/_nav-themes.scss
|
64
|
+
- app/assets/stylesheets/basscss/_navs.scss
|
65
|
+
- app/assets/stylesheets/basscss/_padding.scss
|
66
|
+
- app/assets/stylesheets/basscss/_positions.scss
|
67
|
+
- app/assets/stylesheets/basscss/_reset.scss
|
68
|
+
- app/assets/stylesheets/basscss/_table-object.scss
|
69
|
+
- app/assets/stylesheets/basscss/_table-themes.scss
|
70
|
+
- app/assets/stylesheets/basscss/_tables.scss
|
71
|
+
- app/assets/stylesheets/basscss/_theme.scss
|
72
|
+
- app/assets/stylesheets/basscss/_type.scss
|
73
|
+
- app/assets/stylesheets/basscss/_utilities.scss
|
74
|
+
- app/assets/stylesheets/basscss/_variables.scss
|
75
|
+
- app/assets/stylesheets/basscss/basscss-lite.scss
|
76
|
+
- app/assets/stylesheets/basscss/basscss.scss
|
77
|
+
- basscss-rails.gemspec
|
78
|
+
- lib/basscss/rails.rb
|
79
|
+
- lib/basscss/rails/engine.rb
|
80
|
+
- lib/basscss/rails/version.rb
|
81
|
+
homepage: https://github.com/johnotander/basscss-rails
|
82
|
+
licenses:
|
83
|
+
- MIT
|
84
|
+
metadata: {}
|
85
|
+
post_install_message:
|
86
|
+
rdoc_options: []
|
87
|
+
require_paths:
|
88
|
+
- lib
|
89
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
90
|
+
requirements:
|
91
|
+
- - ">="
|
92
|
+
- !ruby/object:Gem::Version
|
93
|
+
version: '0'
|
94
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
95
|
+
requirements:
|
96
|
+
- - ">="
|
97
|
+
- !ruby/object:Gem::Version
|
98
|
+
version: '0'
|
99
|
+
requirements: []
|
100
|
+
rubyforge_project:
|
101
|
+
rubygems_version: 2.2.2
|
102
|
+
signing_key:
|
103
|
+
specification_version: 4
|
104
|
+
summary: Include BASSCSS in your Rails apps.
|
105
|
+
test_files: []
|