basass 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +1 -0
- data/basass.gemspec +40 -0
- data/lib/basass.rb +5 -0
- data/stylesheets/_basass-defaults.scss +92 -0
- data/stylesheets/_basass.scss +14 -0
- data/stylesheets/_functions.scss +43 -0
- data/stylesheets/_mixins.scss +81 -0
- data/stylesheets/basass/_grids.scss +128 -0
- data/stylesheets/basass/_icons.scss +34 -0
- data/stylesheets/basass/_lists.scss +52 -0
- data/stylesheets/basass/_normalize.scss +291 -0
- data/stylesheets/basass/_prettyprint.scss +121 -0
- data/stylesheets/basass/_states.scss +23 -0
- data/stylesheets/basass/_top-nav.scss +106 -0
- data/stylesheets/basass/_type.scss +150 -0
- data/templates/project/application-ie.scss +10 -0
- data/templates/project/application.scss +1 -0
- data/templates/project/manifest.rb +16 -0
- metadata +96 -0
data/README.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
# BaSass
|
data/basass.gemspec
ADDED
@@ -0,0 +1,40 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
|
3
|
+
Gem::Specification.new do |s|
|
4
|
+
s.name = %q{basass}
|
5
|
+
s.version = "0.0.1"
|
6
|
+
|
7
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
|
8
|
+
s.authors = ["Lee Ellam"]
|
9
|
+
s.date = %q{2013-04-11}
|
10
|
+
s.description = %q{BaSass is a Sass framework to use as a base for mobile first responsive design.}
|
11
|
+
s.email = %w{lee@lee-ellam.com}
|
12
|
+
s.has_rdoc = false
|
13
|
+
s.files = [
|
14
|
+
"basass.gemspec",
|
15
|
+
"README.md",
|
16
|
+
"lib/basass.rb",
|
17
|
+
"stylesheets/_basass.scss",
|
18
|
+
"stylesheets/_basass-defaults.scss",
|
19
|
+
"stylesheets/_functions.scss",
|
20
|
+
"stylesheets/_mixins.scss",
|
21
|
+
"stylesheets/basass/_grids.scss",
|
22
|
+
"stylesheets/basass/_icons.scss",
|
23
|
+
"stylesheets/basass/_lists.scss",
|
24
|
+
"stylesheets/basass/_normalize.scss",
|
25
|
+
"stylesheets/basass/_prettyprint.scss",
|
26
|
+
"stylesheets/basass/_states.scss",
|
27
|
+
"stylesheets/basass/_top-nav.scss",
|
28
|
+
"stylesheets/basass/_type.scss",
|
29
|
+
"templates/project/application.scss",
|
30
|
+
"templates/project/application-ie.scss",
|
31
|
+
"templates/project/manifest.rb"
|
32
|
+
]
|
33
|
+
s.homepage = %q{http://basass.lee-ellam.com}
|
34
|
+
s.require_paths = ["lib"]
|
35
|
+
s.rubyforge_project = %q{basass}
|
36
|
+
s.rubygems_version = %q{1.8.23}
|
37
|
+
s.summary = %q{Base framework for mobile first responsive design.}
|
38
|
+
s.add_dependency(%q<compass>, [">= 0.12.2"])
|
39
|
+
s.add_dependency(%q<sass>, [">= 3.2.0"])
|
40
|
+
end
|
data/lib/basass.rb
ADDED
@@ -0,0 +1,92 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Global defaults
|
3
|
+
// ==========================================================================
|
4
|
+
|
5
|
+
$old-ie: false !default;
|
6
|
+
|
7
|
+
$container-width: 1000px !default;
|
8
|
+
|
9
|
+
$main-color: #08a8e4 !default;
|
10
|
+
$secondary-color: #ff1926 !default;
|
11
|
+
|
12
|
+
$text-direction: ltr !default;
|
13
|
+
$float: left;
|
14
|
+
$opposite-float: right;
|
15
|
+
|
16
|
+
@if $text-direction == rtl {
|
17
|
+
$float: right;
|
18
|
+
$opposite-float: left;
|
19
|
+
}
|
20
|
+
|
21
|
+
// ==========================================================================
|
22
|
+
// Grid & media query defaults
|
23
|
+
// ==========================================================================
|
24
|
+
|
25
|
+
$columns: 12 !default;
|
26
|
+
$column-gutter: 30px !default;
|
27
|
+
|
28
|
+
$small-screen: 768px !default; // tablet - landscape
|
29
|
+
$medium-screen: 1280px !default; // desktop
|
30
|
+
$large-screen: 1440px !default; // large desktop, tv, etc
|
31
|
+
|
32
|
+
$small-query: "screen and (min-width: #{$small-screen})" !default;
|
33
|
+
$medium-query: "screen and (min-width: #{$medium-screen})" !default;
|
34
|
+
$large-query: "screen and (min-width: #{$large-screen})" !default;
|
35
|
+
|
36
|
+
$query-transition-property: all !default;
|
37
|
+
$query-transition-duration: 0.3s !default;
|
38
|
+
$query-transition-timing-function: linear !default;
|
39
|
+
$query-transition: $query-transition-property $query-transition-duration $query-transition-timing-function;
|
40
|
+
$animate-queries: true !default;
|
41
|
+
|
42
|
+
// ==========================================================================
|
43
|
+
// Typography defaults
|
44
|
+
// ==========================================================================
|
45
|
+
|
46
|
+
// Modular Scale
|
47
|
+
$base-font-size: 16px !default;
|
48
|
+
$base-important-number: 90px !default;
|
49
|
+
$base-size: $base-font-size $base-important-number;
|
50
|
+
$ratio: 1.61803398875 !default;
|
51
|
+
$line-height: 1.5 !default;
|
52
|
+
|
53
|
+
// Headers
|
54
|
+
$header-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
|
55
|
+
$header-font-weight: bold !default;
|
56
|
+
$header-font-color: #222 !default;
|
57
|
+
$header-margin-top: 0.2em !default;
|
58
|
+
$header-margin-bottom: 0.5em !default;
|
59
|
+
$sub-heading-font-color: lighten($header-font-color, 50%) !default;
|
60
|
+
|
61
|
+
// Paragraphs
|
62
|
+
$paragraph-font-family: inherit !default;
|
63
|
+
$paragraph-font-weight: normal !default;
|
64
|
+
$paragraph-font-color: #444 !default;
|
65
|
+
$paragraph-margin-top: 0 !default;
|
66
|
+
$paragraph-margin-bottom: 1.5em !default;
|
67
|
+
|
68
|
+
// Code
|
69
|
+
$code-font-family: 'Courier New', Courier, mono !default;
|
70
|
+
$code-font-weight: 600 !default;
|
71
|
+
$code-font-color: $secondary-color !default;
|
72
|
+
|
73
|
+
// Rule
|
74
|
+
$hr-border-width: 1px !default;
|
75
|
+
$hr-border-style: solid !default;
|
76
|
+
$hr-border-color: #ddd !default;
|
77
|
+
$hr-margin-top: 1.5em !default;
|
78
|
+
$hr-margin-bottom: 1.5em !default;
|
79
|
+
|
80
|
+
// Blockquote
|
81
|
+
$blockquote-margin-top: 1.5em !default;
|
82
|
+
$blockquote-margin-bottom: 1.5em !default;
|
83
|
+
$blockquote-font-color: $sub-heading-font-color !default;
|
84
|
+
|
85
|
+
// Links
|
86
|
+
$link-color: $main-color !default;
|
87
|
+
|
88
|
+
// ==========================================================================
|
89
|
+
// Decorative styles
|
90
|
+
// ==========================================================================
|
91
|
+
|
92
|
+
$border-radius: 3px !default;
|
@@ -0,0 +1,43 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Helper functions - https://github.com/zurb/foundation/
|
3
|
+
// ==========================================================================
|
4
|
+
|
5
|
+
$em-base: 16px !default;
|
6
|
+
|
7
|
+
@function emCalc($pxWidth) {
|
8
|
+
@return $pxWidth / $em-base * 1em;
|
9
|
+
}
|
10
|
+
|
11
|
+
@function gridCalc($colNumber, $totalColumns) {
|
12
|
+
@return percentage(($colNumber / $totalColumns));
|
13
|
+
}
|
14
|
+
|
15
|
+
// ==========================================================================
|
16
|
+
// Math functions - https://github.com/adambom/Sass-Math
|
17
|
+
// ==========================================================================
|
18
|
+
|
19
|
+
@function power ($x, $n) {
|
20
|
+
$ret: 1;
|
21
|
+
@if $n >= 0 {
|
22
|
+
@for $i from 1 through $n {
|
23
|
+
$ret: $ret * $x;
|
24
|
+
}
|
25
|
+
} @else {
|
26
|
+
@for $i from $n to 0 {
|
27
|
+
$ret: $ret / $x;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
@return $ret;
|
31
|
+
}
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
@function numberToWord($num){
|
36
|
+
$words: one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen;
|
37
|
+
@for $i from 1 through length($words) {
|
38
|
+
$word: nth($words, $i);
|
39
|
+
@if $num == $i {
|
40
|
+
@return $word;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
}
|
@@ -0,0 +1,81 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Helpers
|
3
|
+
// ==========================================================================
|
4
|
+
|
5
|
+
@mixin clearfix {
|
6
|
+
*zoom:1;
|
7
|
+
&:before, &:after{content:'';display:table}
|
8
|
+
&:after{clear:both}
|
9
|
+
}
|
10
|
+
|
11
|
+
// ==========================================================================
|
12
|
+
// Responsive mixins
|
13
|
+
// ==========================================================================
|
14
|
+
|
15
|
+
@mixin media-query($query){
|
16
|
+
@media #{$query} {
|
17
|
+
@content;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
@mixin respond-to($query){
|
22
|
+
@if $old-ie == true {
|
23
|
+
@if $query == "screen and (min-width: #{$small-screen})" {
|
24
|
+
@content;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
@else {
|
28
|
+
@include media-query($query) {
|
29
|
+
@content;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
// Animate media queries
|
35
|
+
@mixin animate-query{
|
36
|
+
@if $animate-queries and $query-transition {
|
37
|
+
@include transition($query-transition);
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
// ==========================================================================
|
42
|
+
// IE mixin
|
43
|
+
// ==========================================================================
|
44
|
+
|
45
|
+
@mixin ie{
|
46
|
+
@if $ie {
|
47
|
+
@content;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
// ==========================================================================
|
52
|
+
// Animation
|
53
|
+
// ==========================================================================
|
54
|
+
|
55
|
+
@mixin keyframes($name){
|
56
|
+
@-webkit-keyframes $name {
|
57
|
+
@content;
|
58
|
+
}
|
59
|
+
@-moz-keyframes $name {
|
60
|
+
@content;
|
61
|
+
}
|
62
|
+
@-o-keyframes $name {
|
63
|
+
@content;
|
64
|
+
}
|
65
|
+
@keyframes $name {
|
66
|
+
@content;
|
67
|
+
}
|
68
|
+
//$prefixes: -webkit-, -moz-, -o-, '';
|
69
|
+
//@each $prefix in $prefixes {
|
70
|
+
// "@#{$prefix}keyframes" $name {
|
71
|
+
// @content;
|
72
|
+
// }
|
73
|
+
//}
|
74
|
+
}
|
75
|
+
|
76
|
+
@mixin animation($animation-name, $animation-duration, $animation-timing-function){
|
77
|
+
$prefixes: -webkit-, -moz-, -o-, '';
|
78
|
+
@each $prefix in $prefixes {
|
79
|
+
#{$prefix}animation: $animation-name $animation-duration $animation-timing-function;
|
80
|
+
}
|
81
|
+
}
|
@@ -0,0 +1,128 @@
|
|
1
|
+
@import "compass/css3";
|
2
|
+
|
3
|
+
// ==========================================================================
|
4
|
+
// Grid variables and mixins
|
5
|
+
// ==========================================================================
|
6
|
+
|
7
|
+
$output-grid-classes: true !default;
|
8
|
+
|
9
|
+
//
|
10
|
+
// Rows
|
11
|
+
//
|
12
|
+
%row{
|
13
|
+
@include clearfix;
|
14
|
+
box-sizing:border-box;
|
15
|
+
max-width: $container-width + $column-gutter;
|
16
|
+
width: 100%;
|
17
|
+
margin: 0 auto;
|
18
|
+
}
|
19
|
+
|
20
|
+
%nested-row{
|
21
|
+
margin-left: -($column-gutter / 2);
|
22
|
+
margin-right: -($column-gutter / 2);
|
23
|
+
width: auto;
|
24
|
+
max-width: none;
|
25
|
+
}
|
26
|
+
|
27
|
+
@mixin grid-row($behaviour: false) {
|
28
|
+
@if $behaviour == false {
|
29
|
+
@extend %row;
|
30
|
+
}
|
31
|
+
@else if $behaviour == nested {
|
32
|
+
@extend %nested-row;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
//
|
37
|
+
// Columns
|
38
|
+
//
|
39
|
+
@mixin grid-column($column-size: false, $push: false, $pull: false, $centered: false, $offset: false){
|
40
|
+
|
41
|
+
@include animate-query;
|
42
|
+
@include box-sizing(border-box);
|
43
|
+
position: relative;
|
44
|
+
padding-left: $column-gutter / 2;
|
45
|
+
padding-right: $column-gutter / 2;
|
46
|
+
|
47
|
+
@if $column-size {
|
48
|
+
width: gridCalc($column-size, $columns);
|
49
|
+
float: #{$float};
|
50
|
+
}
|
51
|
+
|
52
|
+
//
|
53
|
+
// Centered
|
54
|
+
//
|
55
|
+
@if $centered {
|
56
|
+
float: none !important;
|
57
|
+
margin: 0 auto !important;
|
58
|
+
}
|
59
|
+
|
60
|
+
//
|
61
|
+
// Source ordering
|
62
|
+
//
|
63
|
+
@if $push {
|
64
|
+
#{$float}: gridCalc($push, $columns);
|
65
|
+
}
|
66
|
+
@if $pull {
|
67
|
+
#{$opposite-float}: gridCalc($pull, $columns);
|
68
|
+
}
|
69
|
+
|
70
|
+
//
|
71
|
+
// Offset
|
72
|
+
//
|
73
|
+
@if $offset {
|
74
|
+
margin-#{$float}: gridCalc($offset, $columns);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
// ==========================================================================
|
79
|
+
// Grid classes
|
80
|
+
// ==========================================================================
|
81
|
+
|
82
|
+
@if $output-grid-classes{
|
83
|
+
.row{
|
84
|
+
@include grid-row;
|
85
|
+
|
86
|
+
.column,
|
87
|
+
.columns {
|
88
|
+
@include grid-column();
|
89
|
+
|
90
|
+
&.centered {
|
91
|
+
@include grid-column($centered: true);
|
92
|
+
}
|
93
|
+
|
94
|
+
@include respond-to($small-query) {
|
95
|
+
@for $i from 1 through $columns {
|
96
|
+
$word: numberToWord($i);
|
97
|
+
&.#{$word}{
|
98
|
+
@include grid-column($column-size: $i);
|
99
|
+
}
|
100
|
+
|
101
|
+
//
|
102
|
+
// Source ordering
|
103
|
+
//
|
104
|
+
&.push-#{$word}{
|
105
|
+
@include grid-column($push: $i);
|
106
|
+
}
|
107
|
+
&.pull-#{$word}{
|
108
|
+
@include grid-column($pull: $i);
|
109
|
+
}
|
110
|
+
|
111
|
+
//
|
112
|
+
// Offset
|
113
|
+
//
|
114
|
+
&.offset-#{$word}{
|
115
|
+
@include grid-column($offset: $i);
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
}
|
120
|
+
|
121
|
+
//
|
122
|
+
// Nested rows
|
123
|
+
//
|
124
|
+
.row{
|
125
|
+
@include grid-row($behaviour: nested);
|
126
|
+
}
|
127
|
+
}
|
128
|
+
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
/*!
|
2
|
+
* Font Awesome 3.0.2
|
3
|
+
* the iconic font designed for use with Twitter Bootstrap
|
4
|
+
* -------------------------------------------------------
|
5
|
+
* The full suite of pictographic icons, examples, and documentation
|
6
|
+
* can be found at: http://fortawesome.github.com/Font-Awesome/
|
7
|
+
*
|
8
|
+
* License
|
9
|
+
* -------------------------------------------------------
|
10
|
+
* - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
|
11
|
+
* - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
|
12
|
+
* http://opensource.org/licenses/mit-license.html
|
13
|
+
* - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
|
14
|
+
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
|
15
|
+
* "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
|
16
|
+
|
17
|
+
* Contact
|
18
|
+
* -------------------------------------------------------
|
19
|
+
* Email: dave@davegandy.com
|
20
|
+
* Twitter: http://twitter.com/fortaweso_me
|
21
|
+
* Work: Lead Product Designer @ http://kyruus.com
|
22
|
+
*/
|
23
|
+
$cdn-url: 'http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/';
|
24
|
+
|
25
|
+
@font-face{
|
26
|
+
font-family:'FontAwesome';
|
27
|
+
src:url('#{$cdn-url}font/fontawesome-webfont.eot?v=3.0.1');
|
28
|
+
src:url('#{$cdn-url}font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
|
29
|
+
url('#{$cdn-url}font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
|
30
|
+
url('#{$cdn-url}font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
|
31
|
+
font-weight:normal;
|
32
|
+
font-style:normal }
|
33
|
+
|
34
|
+
[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;margin-top:0}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}a [class^="icon-"],a [class*=" icon-"]{display:inline-block}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}.btn [class^="icon-"],.nav [class^="icon-"],.btn [class*=" icon-"],.nav [class*=" icon-"]{display:inline}.btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em}.btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block}.nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em}li [class^="icon-"],.nav li [class^="icon-"],li [class*=" icon-"],.nav li [class*=" icon-"]{display:inline-block;width:1.25em;text-align:center}li [class^="icon-"].icon-large,.nav li [class^="icon-"].icon-large,li [class*=" icon-"].icon-large,.nav li [class*=" icon-"].icon-large{width:1.5625em}ul.icons{list-style-type:none;text-indent:-0.75em}ul.icons li [class^="icon-"],ul.icons li [class*=" icon-"]{width:.75em}.icon-muted{color:#eee}.icon-border{border:solid 1px #eee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.pull-right{float:right}.pull-left{float:left}[class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em}[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em}.btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em}.btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em}.btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em}.btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em}.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em}.icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}@-moz-document url-prefix(){.icon-spin{height:.9em}.btn .icon-spin{height:auto}.icon-spin.icon-large{height:1.25em}.btn .icon-spin.icon-large{height:.75em}}.icon-glass:before{content:"\f000"}.icon-music:before{content:"\f001"}.icon-search:before{content:"\f002"}.icon-envelope:before{content:"\f003"}.icon-heart:before{content:"\f004"}.icon-star:before{content:"\f005"}.icon-star-empty:before{content:"\f006"}.icon-user:before{content:"\f007"}.icon-film:before{content:"\f008"}.icon-th-large:before{content:"\f009"}.icon-th:before{content:"\f00a"}.icon-th-list:before{content:"\f00b"}.icon-ok:before{content:"\f00c"}.icon-remove:before{content:"\f00d"}.icon-zoom-in:before{content:"\f00e"}.icon-zoom-out:before{content:"\f010"}.icon-off:before{content:"\f011"}.icon-signal:before{content:"\f012"}.icon-cog:before{content:"\f013"}.icon-trash:before{content:"\f014"}.icon-home:before{content:"\f015"}.icon-file:before{content:"\f016"}.icon-time:before{content:"\f017"}.icon-road:before{content:"\f018"}.icon-download-alt:before{content:"\f019"}.icon-download:before{content:"\f01a"}.icon-upload:before{content:"\f01b"}.icon-inbox:before{content:"\f01c"}.icon-play-circle:before{content:"\f01d"}.icon-repeat:before{content:"\f01e"}.icon-refresh:before{content:"\f021"}.icon-list-alt:before{content:"\f022"}.icon-lock:before{content:"\f023"}.icon-flag:before{content:"\f024"}.icon-headphones:before{content:"\f025"}.icon-volume-off:before{content:"\f026"}.icon-volume-down:before{content:"\f027"}.icon-volume-up:before{content:"\f028"}.icon-qrcode:before{content:"\f029"}.icon-barcode:before{content:"\f02a"}.icon-tag:before{content:"\f02b"}.icon-tags:before{content:"\f02c"}.icon-book:before{content:"\f02d"}.icon-bookmark:before{content:"\f02e"}.icon-print:before{content:"\f02f"}.icon-camera:before{content:"\f030"}.icon-font:before{content:"\f031"}.icon-bold:before{content:"\f032"}.icon-italic:before{content:"\f033"}.icon-text-height:before{content:"\f034"}.icon-text-width:before{content:"\f035"}.icon-align-left:before{content:"\f036"}.icon-align-center:before{content:"\f037"}.icon-align-right:before{content:"\f038"}.icon-align-justify:before{content:"\f039"}.icon-list:before{content:"\f03a"}.icon-indent-left:before{content:"\f03b"}.icon-indent-right:before{content:"\f03c"}.icon-facetime-video:before{content:"\f03d"}.icon-picture:before{content:"\f03e"}.icon-pencil:before{content:"\f040"}.icon-map-marker:before{content:"\f041"}.icon-adjust:before{content:"\f042"}.icon-tint:before{content:"\f043"}.icon-edit:before{content:"\f044"}.icon-share:before{content:"\f045"}.icon-check:before{content:"\f046"}.icon-move:before{content:"\f047"}.icon-step-backward:before{content:"\f048"}.icon-fast-backward:before{content:"\f049"}.icon-backward:before{content:"\f04a"}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-forward:before{content:"\f04e"}.icon-fast-forward:before{content:"\f050"}.icon-step-forward:before{content:"\f051"}.icon-eject:before{content:"\f052"}.icon-chevron-left:before{content:"\f053"}.icon-chevron-right:before{content:"\f054"}.icon-plus-sign:before{content:"\f055"}.icon-minus-sign:before{content:"\f056"}.icon-remove-sign:before{content:"\f057"}.icon-ok-sign:before{content:"\f058"}.icon-question-sign:before{content:"\f059"}.icon-info-sign:before{content:"\f05a"}.icon-screenshot:before{content:"\f05b"}.icon-remove-circle:before{content:"\f05c"}.icon-ok-circle:before{content:"\f05d"}.icon-ban-circle:before{content:"\f05e"}.icon-arrow-left:before{content:"\f060"}.icon-arrow-right:before{content:"\f061"}.icon-arrow-up:before{content:"\f062"}.icon-arrow-down:before{content:"\f063"}.icon-share-alt:before{content:"\f064"}.icon-resize-full:before{content:"\f065"}.icon-resize-small:before{content:"\f066"}.icon-plus:before{content:"\f067"}.icon-minus:before{content:"\f068"}.icon-asterisk:before{content:"\f069"}.icon-exclamation-sign:before{content:"\f06a"}.icon-gift:before{content:"\f06b"}.icon-leaf:before{content:"\f06c"}.icon-fire:before{content:"\f06d"}.icon-eye-open:before{content:"\f06e"}.icon-eye-close:before{content:"\f070"}.icon-warning-sign:before{content:"\f071"}.icon-plane:before{content:"\f072"}.icon-calendar:before{content:"\f073"}.icon-random:before{content:"\f074"}.icon-comment:before{content:"\f075"}.icon-magnet:before{content:"\f076"}.icon-chevron-up:before{content:"\f077"}.icon-chevron-down:before{content:"\f078"}.icon-retweet:before{content:"\f079"}.icon-shopping-cart:before{content:"\f07a"}.icon-folder-close:before{content:"\f07b"}.icon-folder-open:before{content:"\f07c"}.icon-resize-vertical:before{content:"\f07d"}.icon-resize-horizontal:before{content:"\f07e"}.icon-bar-chart:before{content:"\f080"}.icon-twitter-sign:before{content:"\f081"}.icon-facebook-sign:before{content:"\f082"}.icon-camera-retro:before{content:"\f083"}.icon-key:before{content:"\f084"}.icon-cogs:before{content:"\f085"}.icon-comments:before{content:"\f086"}.icon-thumbs-up:before{content:"\f087"}.icon-thumbs-down:before{content:"\f088"}.icon-star-half:before{content:"\f089"}.icon-heart-empty:before{content:"\f08a"}.icon-signout:before{content:"\f08b"}.icon-linkedin-sign:before{content:"\f08c"}.icon-pushpin:before{content:"\f08d"}.icon-external-link:before{content:"\f08e"}.icon-signin:before{content:"\f090"}.icon-trophy:before{content:"\f091"}.icon-github-sign:before{content:"\f092"}.icon-upload-alt:before{content:"\f093"}.icon-lemon:before{content:"\f094"}.icon-phone:before{content:"\f095"}.icon-check-empty:before{content:"\f096"}.icon-bookmark-empty:before{content:"\f097"}.icon-phone-sign:before{content:"\f098"}.icon-twitter:before{content:"\f099"}.icon-facebook:before{content:"\f09a"}.icon-github:before{content:"\f09b"}.icon-unlock:before{content:"\f09c"}.icon-credit-card:before{content:"\f09d"}.icon-rss:before{content:"\f09e"}.icon-hdd:before{content:"\f0a0"}.icon-bullhorn:before{content:"\f0a1"}.icon-bell:before{content:"\f0a2"}.icon-certificate:before{content:"\f0a3"}.icon-hand-right:before{content:"\f0a4"}.icon-hand-left:before{content:"\f0a5"}.icon-hand-up:before{content:"\f0a6"}.icon-hand-down:before{content:"\f0a7"}.icon-circle-arrow-left:before{content:"\f0a8"}.icon-circle-arrow-right:before{content:"\f0a9"}.icon-circle-arrow-up:before{content:"\f0aa"}.icon-circle-arrow-down:before{content:"\f0ab"}.icon-globe:before{content:"\f0ac"}.icon-wrench:before{content:"\f0ad"}.icon-tasks:before{content:"\f0ae"}.icon-filter:before{content:"\f0b0"}.icon-briefcase:before{content:"\f0b1"}.icon-fullscreen:before{content:"\f0b2"}.icon-group:before{content:"\f0c0"}.icon-link:before{content:"\f0c1"}.icon-cloud:before{content:"\f0c2"}.icon-beaker:before{content:"\f0c3"}.icon-cut:before{content:"\f0c4"}.icon-copy:before{content:"\f0c5"}.icon-paper-clip:before{content:"\f0c6"}.icon-save:before{content:"\f0c7"}.icon-sign-blank:before{content:"\f0c8"}.icon-reorder:before{content:"\f0c9"}.icon-list-ul:before{content:"\f0ca"}.icon-list-ol:before{content:"\f0cb"}.icon-strikethrough:before{content:"\f0cc"}.icon-underline:before{content:"\f0cd"}.icon-table:before{content:"\f0ce"}.icon-magic:before{content:"\f0d0"}.icon-truck:before{content:"\f0d1"}.icon-pinterest:before{content:"\f0d2"}.icon-pinterest-sign:before{content:"\f0d3"}.icon-google-plus-sign:before{content:"\f0d4"}.icon-google-plus:before{content:"\f0d5"}.icon-money:before{content:"\f0d6"}.icon-caret-down:before{content:"\f0d7"}.icon-caret-up:before{content:"\f0d8"}.icon-caret-left:before{content:"\f0d9"}.icon-caret-right:before{content:"\f0da"}.icon-columns:before{content:"\f0db"}.icon-sort:before{content:"\f0dc"}.icon-sort-down:before{content:"\f0dd"}.icon-sort-up:before{content:"\f0de"}.icon-envelope-alt:before{content:"\f0e0"}.icon-linkedin:before{content:"\f0e1"}.icon-undo:before{content:"\f0e2"}.icon-legal:before{content:"\f0e3"}.icon-dashboard:before{content:"\f0e4"}.icon-comment-alt:before{content:"\f0e5"}.icon-comments-alt:before{content:"\f0e6"}.icon-bolt:before{content:"\f0e7"}.icon-sitemap:before{content:"\f0e8"}.icon-umbrella:before{content:"\f0e9"}.icon-paste:before{content:"\f0ea"}.icon-lightbulb:before{content:"\f0eb"}.icon-exchange:before{content:"\f0ec"}.icon-cloud-download:before{content:"\f0ed"}.icon-cloud-upload:before{content:"\f0ee"}.icon-user-md:before{content:"\f0f0"}.icon-stethoscope:before{content:"\f0f1"}.icon-suitcase:before{content:"\f0f2"}.icon-bell-alt:before{content:"\f0f3"}.icon-coffee:before{content:"\f0f4"}.icon-food:before{content:"\f0f5"}.icon-file-alt:before{content:"\f0f6"}.icon-building:before{content:"\f0f7"}.icon-hospital:before{content:"\f0f8"}.icon-ambulance:before{content:"\f0f9"}.icon-medkit:before{content:"\f0fa"}.icon-fighter-jet:before{content:"\f0fb"}.icon-beer:before{content:"\f0fc"}.icon-h-sign:before{content:"\f0fd"}.icon-plus-sign-alt:before{content:"\f0fe"}.icon-double-angle-left:before{content:"\f100"}.icon-double-angle-right:before{content:"\f101"}.icon-double-angle-up:before{content:"\f102"}.icon-double-angle-down:before{content:"\f103"}.icon-angle-left:before{content:"\f104"}.icon-angle-right:before{content:"\f105"}.icon-angle-up:before{content:"\f106"}.icon-angle-down:before{content:"\f107"}.icon-desktop:before{content:"\f108"}.icon-laptop:before{content:"\f109"}.icon-tablet:before{content:"\f10a"}.icon-mobile-phone:before{content:"\f10b"}.icon-circle-blank:before{content:"\f10c"}.icon-quote-left:before{content:"\f10d"}.icon-quote-right:before{content:"\f10e"}.icon-spinner:before{content:"\f110"}.icon-circle:before{content:"\f111"}.icon-reply:before{content:"\f112"}.icon-github-alt:before{content:"\f113"}.icon-folder-close-alt:before{content:"\f114"}.icon-folder-open-alt:before{content:"\f115"}
|
@@ -0,0 +1,52 @@
|
|
1
|
+
// ==========================================================================
|
2
|
+
// Basic Lists
|
3
|
+
// ==========================================================================
|
4
|
+
%list {
|
5
|
+
margin: $paragraph-margin-top 0 $paragraph-margin-bottom;
|
6
|
+
padding: 0;
|
7
|
+
list-style-position: outside;
|
8
|
+
}
|
9
|
+
%nested-list{
|
10
|
+
margin: 0 0 0 20px;
|
11
|
+
}
|
12
|
+
|
13
|
+
ol{
|
14
|
+
@extend %list;
|
15
|
+
|
16
|
+
ol, ul {
|
17
|
+
@extend %nested-list;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
ul{
|
22
|
+
@extend %list;
|
23
|
+
|
24
|
+
ol, ul {
|
25
|
+
@extend %nested-list;
|
26
|
+
}
|
27
|
+
|
28
|
+
&.circle{list-style:circle}
|
29
|
+
&.square{list-style:square}
|
30
|
+
&.disc{list-style:disc}
|
31
|
+
}
|
32
|
+
|
33
|
+
dl{
|
34
|
+
@extend %list;
|
35
|
+
|
36
|
+
dt {
|
37
|
+
font-weight: bold;
|
38
|
+
}
|
39
|
+
dd {
|
40
|
+
margin: 0;
|
41
|
+
}
|
42
|
+
|
43
|
+
dd {
|
44
|
+
@extend %nested-list;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
.nav-list{
|
49
|
+
margin: 0;
|
50
|
+
padding: 0;
|
51
|
+
list-style: none;
|
52
|
+
}
|
@@ -0,0 +1,291 @@
|
|
1
|
+
//! normalize.css v2.1.0 | MIT License | git.io/normalize
|
2
|
+
|
3
|
+
// ==========================================================================
|
4
|
+
// HTML5 display definitions
|
5
|
+
// ==========================================================================
|
6
|
+
|
7
|
+
// Correct `block` display not defined in IE 8/9.
|
8
|
+
article,
|
9
|
+
aside,
|
10
|
+
details,
|
11
|
+
figcaption,
|
12
|
+
figure,
|
13
|
+
footer,
|
14
|
+
header,
|
15
|
+
hgroup,
|
16
|
+
main,
|
17
|
+
nav,
|
18
|
+
section,
|
19
|
+
summary {
|
20
|
+
display: block;
|
21
|
+
}
|
22
|
+
|
23
|
+
// Correct `inline-block` display not defined in IE 8/9.
|
24
|
+
audio,
|
25
|
+
canvas,
|
26
|
+
video {
|
27
|
+
display: inline-block;
|
28
|
+
}
|
29
|
+
|
30
|
+
// Prevent modern browsers from displaying `audio` without controls.
|
31
|
+
// Remove excess height in iOS 5 devices.
|
32
|
+
audio:not([controls]) {
|
33
|
+
display: none;
|
34
|
+
height: 0;
|
35
|
+
}
|
36
|
+
|
37
|
+
// Address styling not present in IE 8/9.
|
38
|
+
[hidden] {
|
39
|
+
display: none;
|
40
|
+
}
|
41
|
+
|
42
|
+
// ==========================================================================
|
43
|
+
// Base
|
44
|
+
// ==========================================================================
|
45
|
+
|
46
|
+
// 1. Set default font family to sans-serif.
|
47
|
+
// 2. Prevent iOS text size adjust after orientation change, without disabling
|
48
|
+
// user zoom.
|
49
|
+
html {
|
50
|
+
font-family: sans-serif; // 1
|
51
|
+
-webkit-text-size-adjust: 100%; // 2
|
52
|
+
-ms-text-size-adjust: 100%; // 2
|
53
|
+
}
|
54
|
+
|
55
|
+
// Remove default margin.
|
56
|
+
body {
|
57
|
+
margin: 0;
|
58
|
+
}
|
59
|
+
|
60
|
+
// ==========================================================================
|
61
|
+
// Links
|
62
|
+
// ==========================================================================
|
63
|
+
|
64
|
+
// Address `outline` inconsistency between Chrome and other browsers.
|
65
|
+
a:focus {
|
66
|
+
outline: thin dotted;
|
67
|
+
}
|
68
|
+
|
69
|
+
// Improve readability when focused and also mouse hovered in all browsers.
|
70
|
+
a:active,
|
71
|
+
a:hover {
|
72
|
+
outline: 0;
|
73
|
+
}
|
74
|
+
|
75
|
+
// ==========================================================================
|
76
|
+
// Typography
|
77
|
+
// ==========================================================================
|
78
|
+
|
79
|
+
// Address variable `h1` font-size and margin within `section` and `article`
|
80
|
+
// contexts in Firefox 4+, Safari 5, and Chrome.
|
81
|
+
h1 {
|
82
|
+
font-size: 2em;
|
83
|
+
margin: 0.67em 0;
|
84
|
+
}
|
85
|
+
|
86
|
+
// Address styling not present in IE 8/9, Safari 5, and Chrome.
|
87
|
+
abbr[title] {
|
88
|
+
border-bottom: 1px dotted;
|
89
|
+
}
|
90
|
+
|
91
|
+
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
92
|
+
b,
|
93
|
+
strong {
|
94
|
+
font-weight: bold;
|
95
|
+
}
|
96
|
+
|
97
|
+
// Address styling not present in Safari 5 and Chrome.
|
98
|
+
dfn {
|
99
|
+
font-style: italic;
|
100
|
+
}
|
101
|
+
|
102
|
+
// Address differences between Firefox and other browsers.
|
103
|
+
hr {
|
104
|
+
-moz-box-sizing: content-box;
|
105
|
+
box-sizing: content-box;
|
106
|
+
height: 0;
|
107
|
+
}
|
108
|
+
|
109
|
+
// Address styling not present in IE 8/9.
|
110
|
+
mark {
|
111
|
+
background: #ff0;
|
112
|
+
color: #000;
|
113
|
+
}
|
114
|
+
|
115
|
+
// Correct font family set oddly in Safari 5 and Chrome.
|
116
|
+
code,
|
117
|
+
kbd,
|
118
|
+
pre,
|
119
|
+
samp {
|
120
|
+
font-family: monospace, serif;
|
121
|
+
font-size: 1em;
|
122
|
+
}
|
123
|
+
|
124
|
+
// Improve readability of pre-formatted text in all browsers.
|
125
|
+
pre {
|
126
|
+
white-space: pre-wrap;
|
127
|
+
}
|
128
|
+
|
129
|
+
// Set consistent quote types.
|
130
|
+
q {
|
131
|
+
quotes: "\201C" "\201D" "\2018" "\2019";
|
132
|
+
}
|
133
|
+
|
134
|
+
// Address inconsistent and variable font size in all browsers.
|
135
|
+
small {
|
136
|
+
font-size: 80%;
|
137
|
+
}
|
138
|
+
|
139
|
+
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
140
|
+
sub,
|
141
|
+
sup {
|
142
|
+
font-size: 75%;
|
143
|
+
line-height: 0;
|
144
|
+
position: relative;
|
145
|
+
vertical-align: baseline;
|
146
|
+
}
|
147
|
+
|
148
|
+
sup {
|
149
|
+
top: -0.5em;
|
150
|
+
}
|
151
|
+
|
152
|
+
sub {
|
153
|
+
bottom: -0.25em;
|
154
|
+
}
|
155
|
+
|
156
|
+
// ==========================================================================
|
157
|
+
// Embedded content
|
158
|
+
// ==========================================================================
|
159
|
+
|
160
|
+
// Remove border when inside `a` element in IE 8/9.
|
161
|
+
img {
|
162
|
+
border: 0;
|
163
|
+
}
|
164
|
+
|
165
|
+
// Correct overflow displayed oddly in IE 9.
|
166
|
+
svg:not(:root) {
|
167
|
+
overflow: hidden;
|
168
|
+
}
|
169
|
+
|
170
|
+
// ==========================================================================
|
171
|
+
// Figures
|
172
|
+
// ==========================================================================
|
173
|
+
|
174
|
+
// Address margin not present in IE 8/9 and Safari 5.
|
175
|
+
figure {
|
176
|
+
margin: 0;
|
177
|
+
}
|
178
|
+
|
179
|
+
// ==========================================================================
|
180
|
+
// Forms
|
181
|
+
// ==========================================================================
|
182
|
+
|
183
|
+
// Define consistent border, margin, and padding.
|
184
|
+
fieldset {
|
185
|
+
border: 1px solid #c0c0c0;
|
186
|
+
margin: 0 2px;
|
187
|
+
padding: 0.35em 0.625em 0.75em;
|
188
|
+
}
|
189
|
+
|
190
|
+
// 1. Correct `color` not being inherited in IE 8/9.
|
191
|
+
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
192
|
+
legend {
|
193
|
+
border: 0; // 1
|
194
|
+
padding: 0; // 2
|
195
|
+
}
|
196
|
+
|
197
|
+
// 1. Correct font family not being inherited in all browsers.
|
198
|
+
// 2. Correct font size not being inherited in all browsers.
|
199
|
+
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
200
|
+
button,
|
201
|
+
input,
|
202
|
+
select,
|
203
|
+
textarea {
|
204
|
+
font-family: inherit; // 1
|
205
|
+
font-size: 100%; // 2
|
206
|
+
margin: 0; // 3
|
207
|
+
}
|
208
|
+
|
209
|
+
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
210
|
+
// the UA stylesheet.
|
211
|
+
button,
|
212
|
+
input {
|
213
|
+
line-height: normal;
|
214
|
+
}
|
215
|
+
|
216
|
+
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
217
|
+
// All other form control elements do not inherit `text-transform` values.
|
218
|
+
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
219
|
+
// Correct `select` style inheritance in Firefox 4+ and Opera.
|
220
|
+
button,
|
221
|
+
select {
|
222
|
+
text-transform: none;
|
223
|
+
}
|
224
|
+
|
225
|
+
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
226
|
+
// and `video` controls.
|
227
|
+
// 2. Correct inability to style clickable `input` types in iOS.
|
228
|
+
// 3. Improve usability and consistency of cursor style between image-type
|
229
|
+
// `input` and others.
|
230
|
+
button,
|
231
|
+
html input[type="button"], // 1
|
232
|
+
input[type="reset"],
|
233
|
+
input[type="submit"] {
|
234
|
+
-webkit-appearance: button; // 2
|
235
|
+
cursor: pointer; // 3
|
236
|
+
}
|
237
|
+
|
238
|
+
// Re-set default cursor for disabled elements.
|
239
|
+
button[disabled],
|
240
|
+
html input[disabled] {
|
241
|
+
cursor: default;
|
242
|
+
}
|
243
|
+
|
244
|
+
// 1. Address box sizing set to `content-box` in IE 8/9.
|
245
|
+
// 2. Remove excess padding in IE 8/9.
|
246
|
+
input[type="checkbox"],
|
247
|
+
input[type="radio"] {
|
248
|
+
box-sizing: border-box; // 1
|
249
|
+
padding: 0; // 2
|
250
|
+
}
|
251
|
+
|
252
|
+
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
253
|
+
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
254
|
+
// (include `-moz` to future-proof).
|
255
|
+
input[type="search"] {
|
256
|
+
-webkit-appearance: textfield; // 1
|
257
|
+
-moz-box-sizing: content-box;
|
258
|
+
-webkit-box-sizing: content-box; // 2
|
259
|
+
box-sizing: content-box;
|
260
|
+
}
|
261
|
+
|
262
|
+
// Remove inner padding and search cancel button in Safari 5 and Chrome
|
263
|
+
// on OS X.
|
264
|
+
input[type="search"]::-webkit-search-cancel-button,
|
265
|
+
input[type="search"]::-webkit-search-decoration {
|
266
|
+
-webkit-appearance: none;
|
267
|
+
}
|
268
|
+
|
269
|
+
// Remove inner padding and border in Firefox 4+.
|
270
|
+
button::-moz-focus-inner,
|
271
|
+
input::-moz-focus-inner {
|
272
|
+
border: 0;
|
273
|
+
padding: 0;
|
274
|
+
}
|
275
|
+
|
276
|
+
// 1. Remove default vertical scrollbar in IE 8/9.
|
277
|
+
// 2. Improve readability and alignment in all browsers.
|
278
|
+
textarea {
|
279
|
+
overflow: auto; // 1
|
280
|
+
vertical-align: top; // 2
|
281
|
+
}
|
282
|
+
|
283
|
+
// ==========================================================================
|
284
|
+
// Tables
|
285
|
+
// ==========================================================================
|
286
|
+
|
287
|
+
// Remove most spacing between table cells.
|
288
|
+
table {
|
289
|
+
border-collapse: collapse;
|
290
|
+
border-spacing: 0;
|
291
|
+
}
|
@@ -0,0 +1,121 @@
|
|
1
|
+
/*
|
2
|
+
* Derived from einaros's Sons of Obsidian theme at
|
3
|
+
* http://studiostyl.es/schemes/son-of-obsidian by
|
4
|
+
* Alex Ford of CodeTunnel:
|
5
|
+
* http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
|
6
|
+
*/
|
7
|
+
|
8
|
+
// prettyprint inserts its stylesheet after these styles get loaded,
|
9
|
+
// addition of !important is to preserve these
|
10
|
+
|
11
|
+
.str
|
12
|
+
{
|
13
|
+
color: #EC7600 !important;
|
14
|
+
}
|
15
|
+
.kwd
|
16
|
+
{
|
17
|
+
color: #93C763 !important;
|
18
|
+
}
|
19
|
+
.com
|
20
|
+
{
|
21
|
+
color: #66747B !important;
|
22
|
+
}
|
23
|
+
.typ
|
24
|
+
{
|
25
|
+
color: #678CB1 !important;
|
26
|
+
}
|
27
|
+
.lit
|
28
|
+
{
|
29
|
+
color: #FACD22 !important;
|
30
|
+
}
|
31
|
+
.pun
|
32
|
+
{
|
33
|
+
color: #F1F2F3 !important;
|
34
|
+
}
|
35
|
+
.pln
|
36
|
+
{
|
37
|
+
color: #F1F2F3 !important;
|
38
|
+
}
|
39
|
+
.tag
|
40
|
+
{
|
41
|
+
color: #8AC763 !important;
|
42
|
+
}
|
43
|
+
.atn
|
44
|
+
{
|
45
|
+
color: #E0E2E4 !important;
|
46
|
+
}
|
47
|
+
.atv
|
48
|
+
{
|
49
|
+
color: #EC7600 !important;
|
50
|
+
}
|
51
|
+
.dec
|
52
|
+
{
|
53
|
+
color: purple !important;
|
54
|
+
}
|
55
|
+
pre.prettyprint
|
56
|
+
{
|
57
|
+
border: 0px solid #888 !important;
|
58
|
+
}
|
59
|
+
ol.linenums
|
60
|
+
{
|
61
|
+
margin-top: 0 !important;
|
62
|
+
margin-bottom: 0 !important;
|
63
|
+
}
|
64
|
+
.prettyprint {
|
65
|
+
background: #000 !important;
|
66
|
+
}
|
67
|
+
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
|
68
|
+
{
|
69
|
+
color: #555 !important;
|
70
|
+
list-style-type: decimal !important;
|
71
|
+
}
|
72
|
+
li.L1, li.L3, li.L5, li.L7, li.L9 {
|
73
|
+
background: #111 !important;
|
74
|
+
}
|
75
|
+
@media print
|
76
|
+
{
|
77
|
+
.str
|
78
|
+
{
|
79
|
+
color: #060 !important;
|
80
|
+
}
|
81
|
+
.kwd
|
82
|
+
{
|
83
|
+
color: #006 !important;
|
84
|
+
font-weight: bold !important;
|
85
|
+
}
|
86
|
+
.com
|
87
|
+
{
|
88
|
+
color: #600 !important;
|
89
|
+
font-style: italic !important;
|
90
|
+
}
|
91
|
+
.typ
|
92
|
+
{
|
93
|
+
color: #404 !important;
|
94
|
+
font-weight: bold !important;
|
95
|
+
}
|
96
|
+
.lit
|
97
|
+
{
|
98
|
+
color: #044 !important;
|
99
|
+
}
|
100
|
+
.pun
|
101
|
+
{
|
102
|
+
color: #440 !important;
|
103
|
+
}
|
104
|
+
.pln
|
105
|
+
{
|
106
|
+
color: #000 !important;
|
107
|
+
}
|
108
|
+
.tag
|
109
|
+
{
|
110
|
+
color: #006 !important;
|
111
|
+
font-weight: bold !important;
|
112
|
+
}
|
113
|
+
.atn
|
114
|
+
{
|
115
|
+
color: #404 !important;
|
116
|
+
}
|
117
|
+
.atv
|
118
|
+
{
|
119
|
+
color: #060 !important;
|
120
|
+
}
|
121
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
.show-small-only{display:inherit}
|
2
|
+
.show-medium-only{display:none}
|
3
|
+
.show-large-only{display:none}
|
4
|
+
|
5
|
+
.hide-small-only{display:none}
|
6
|
+
.hide-medium-only{display:none}
|
7
|
+
.hide-large-only{display:none}
|
8
|
+
|
9
|
+
.hide-for-small-up{
|
10
|
+
@include animate-query;
|
11
|
+
display:inherit !important;
|
12
|
+
}
|
13
|
+
.show-for-small-up{
|
14
|
+
@include animate-query;
|
15
|
+
display:none !important;
|
16
|
+
}
|
17
|
+
|
18
|
+
|
19
|
+
|
20
|
+
@include respond-to($small-query) {
|
21
|
+
.hide-for-small-up{display:none !important}
|
22
|
+
.show-for-small-up{display:inherit !important}
|
23
|
+
}
|
@@ -0,0 +1,106 @@
|
|
1
|
+
$top-nav-background: #222 !default;
|
2
|
+
|
3
|
+
// ==========================================================================
|
4
|
+
// Top navigation
|
5
|
+
// ==========================================================================
|
6
|
+
|
7
|
+
// TODO: move global styles out into relevant partials, tidy up!
|
8
|
+
|
9
|
+
.nav{
|
10
|
+
|
11
|
+
}
|
12
|
+
|
13
|
+
.top.nav{
|
14
|
+
@include box-sizing(border-box);
|
15
|
+
background: $top-nav-background;
|
16
|
+
width: 100%;
|
17
|
+
height: 45px;
|
18
|
+
line-height: 45px;
|
19
|
+
margin-bottom: 1.5em;
|
20
|
+
overflow: visible;
|
21
|
+
position: relative;
|
22
|
+
font-size: 0.8125em;
|
23
|
+
color: #fff;
|
24
|
+
|
25
|
+
a {
|
26
|
+
color: #fff;
|
27
|
+
}
|
28
|
+
|
29
|
+
.logo-area {
|
30
|
+
position: relative;
|
31
|
+
height: 45px;
|
32
|
+
padding: 0 $column-gutter / 2;
|
33
|
+
|
34
|
+
.logo {
|
35
|
+
margin: 0 auto;
|
36
|
+
display: block;
|
37
|
+
}
|
38
|
+
|
39
|
+
.menu-icon {
|
40
|
+
position: absolute;
|
41
|
+
top: 0;
|
42
|
+
right: $column-gutter / 2;
|
43
|
+
width: 45px;
|
44
|
+
text-align:center;
|
45
|
+
|
46
|
+
&:hover{
|
47
|
+
background: #111;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
ul.menu{
|
53
|
+
margin: 0;
|
54
|
+
padding: 0;
|
55
|
+
list-style: none;
|
56
|
+
display: none;
|
57
|
+
|
58
|
+
> li {
|
59
|
+
display: block;
|
60
|
+
border: 0;
|
61
|
+
border-bottom: 1px solid #222;
|
62
|
+
border-top: 1px solid #555;
|
63
|
+
a {
|
64
|
+
display: block;
|
65
|
+
padding: 0 $column-gutter / 2;
|
66
|
+
|
67
|
+
&:hover {
|
68
|
+
background: lighten($top-nav-background, 7%);
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
&.expanded {
|
75
|
+
height: auto;
|
76
|
+
|
77
|
+
ul.menu{
|
78
|
+
display: block;
|
79
|
+
background: lighten($top-nav-background, 10%);
|
80
|
+
}
|
81
|
+
}
|
82
|
+
|
83
|
+
@include respond-to($small-query){
|
84
|
+
ul.menu {
|
85
|
+
@include animate-query;
|
86
|
+
position: absolute;
|
87
|
+
top: 0;
|
88
|
+
right: 0;
|
89
|
+
display: block;
|
90
|
+
|
91
|
+
> li {
|
92
|
+
display: inline-block;
|
93
|
+
border: 0;
|
94
|
+
border-left: 1px solid #444;
|
95
|
+
|
96
|
+
a{
|
97
|
+
background: transparent;
|
98
|
+
|
99
|
+
&:hover {
|
100
|
+
background: #111;
|
101
|
+
}
|
102
|
+
}
|
103
|
+
}
|
104
|
+
}
|
105
|
+
}
|
106
|
+
}
|
@@ -0,0 +1,150 @@
|
|
1
|
+
@import
|
2
|
+
"compass/css3";
|
3
|
+
|
4
|
+
// ==========================================================================
|
5
|
+
// Basic typography
|
6
|
+
// ==========================================================================
|
7
|
+
|
8
|
+
html{
|
9
|
+
line-height: $line-height
|
10
|
+
}
|
11
|
+
|
12
|
+
h1, h2, h3, h4, h5, h6,
|
13
|
+
.h1,.h2,.h3,.h4,.h5,.h6{
|
14
|
+
@include animate-query;
|
15
|
+
font-family: $header-font-family;
|
16
|
+
font-weight: $header-font-weight;
|
17
|
+
color: $header-font-color;
|
18
|
+
margin-top: $header-margin-top;
|
19
|
+
margin-bottom: $header-margin-bottom;
|
20
|
+
|
21
|
+
// Small text
|
22
|
+
& small{
|
23
|
+
font-size: 70%;
|
24
|
+
color: $sub-heading-font-color;
|
25
|
+
}
|
26
|
+
|
27
|
+
// Light sub-heading text
|
28
|
+
&.sub-heading{
|
29
|
+
font-weight: 300;
|
30
|
+
color: $sub-heading-font-color;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
h1, .h1{
|
35
|
+
font-size: 1.5em;
|
36
|
+
@include respond-to($small-query) {
|
37
|
+
font-size: emCalc(ms(4));
|
38
|
+
line-height: 1.3;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
h2, .h2{
|
43
|
+
font-size: 1.3em;
|
44
|
+
@include respond-to($small-query) {
|
45
|
+
font-size: emCalc(ms(3));
|
46
|
+
line-height: 1.2;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
h3, .h3{
|
51
|
+
font-size: 1.25em;
|
52
|
+
@include respond-to($small-query) {
|
53
|
+
font-size: emCalc(ms(2));
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
h4, .h4{
|
58
|
+
font-size: 1.15em;
|
59
|
+
@include respond-to($small-query) {
|
60
|
+
font-size: emCalc(ms(1));
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
h5, .h5{
|
65
|
+
font-size: emCalc(ms(0));
|
66
|
+
}
|
67
|
+
|
68
|
+
h6, .h6{
|
69
|
+
font-size: emCalc(ms(-1));
|
70
|
+
}
|
71
|
+
|
72
|
+
hr{
|
73
|
+
border: $hr-border-style $hr-border-color;
|
74
|
+
border-width: $hr-border-width 0 0;
|
75
|
+
margin: $hr-margin-top 0 $hr-margin-bottom - emCalc(1px);
|
76
|
+
height: 0;
|
77
|
+
clear: both;
|
78
|
+
}
|
79
|
+
|
80
|
+
p, pre{
|
81
|
+
margin-top: $paragraph-margin-top;
|
82
|
+
margin-bottom: $paragraph-margin-bottom;
|
83
|
+
}
|
84
|
+
|
85
|
+
code {
|
86
|
+
font-family: $code-font-family;
|
87
|
+
font-weight: $code-font-weight;
|
88
|
+
color: $code-font-color;
|
89
|
+
}
|
90
|
+
|
91
|
+
blockquote {
|
92
|
+
font-size: ms(0);
|
93
|
+
font-style: italic;
|
94
|
+
margin: $blockquote-margin-top 0 $blockquote-margin-bottom;
|
95
|
+
border-left: 3px solid $main-color;
|
96
|
+
padding: 0.5em emCalc(40px) 0.5em emCalc(37px);
|
97
|
+
color: $blockquote-font-color;
|
98
|
+
@include clearfix;
|
99
|
+
|
100
|
+
cite {
|
101
|
+
display: block;
|
102
|
+
margin-top: 1em;
|
103
|
+
font-style: normal;
|
104
|
+
@extend small;
|
105
|
+
&:before{
|
106
|
+
content: '\2014';
|
107
|
+
}
|
108
|
+
}
|
109
|
+
}
|
110
|
+
|
111
|
+
a{
|
112
|
+
color: $link-color;
|
113
|
+
text-decoration: none;
|
114
|
+
display: inline-block;
|
115
|
+
@include transition(color 0.3s ease-in-out);
|
116
|
+
|
117
|
+
&:hover{
|
118
|
+
color: darken($link-color, 5%);
|
119
|
+
}
|
120
|
+
}
|
121
|
+
|
122
|
+
// ==========================================================================
|
123
|
+
// Syntax highlighting
|
124
|
+
// ==========================================================================
|
125
|
+
|
126
|
+
div.code-example {
|
127
|
+
margin-top: 1em;
|
128
|
+
|
129
|
+
&:before{
|
130
|
+
content: attr(data-language);
|
131
|
+
text-transform: uppercase;
|
132
|
+
float: right;
|
133
|
+
margin:0.5em 0.5em 0 0;
|
134
|
+
color: #66747b;
|
135
|
+
font-size: ms(-1);
|
136
|
+
font-family: $paragraph-font-family;
|
137
|
+
}
|
138
|
+
|
139
|
+
pre,
|
140
|
+
pre.prettyprint {
|
141
|
+
background: #333!important;
|
142
|
+
padding:1em;
|
143
|
+
@include box-shadow(inset 0 2px 6px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.75));
|
144
|
+
|
145
|
+
code {
|
146
|
+
font-size:0.875em;
|
147
|
+
font-weight:normal;
|
148
|
+
}
|
149
|
+
}
|
150
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
// ============================================
|
2
|
+
// Old IE stylsheet - should import your
|
3
|
+
// application.scss and set $old-ie variable
|
4
|
+
// BaSass will take care of the rest (although
|
5
|
+
// you're free to add further IE only styling)
|
6
|
+
// ============================================
|
7
|
+
|
8
|
+
$old-ie: true;
|
9
|
+
|
10
|
+
@import "application";
|
@@ -0,0 +1 @@
|
|
1
|
+
@import "basass";
|
@@ -0,0 +1,16 @@
|
|
1
|
+
description "BaSass is a Sass framework to use as a base for mobile first responsive design."
|
2
|
+
|
3
|
+
stylesheet 'application.scss', :media => 'all'
|
4
|
+
stylesheet 'application-ie.scss', :media => 'all', :condition => 'lte IE 8'
|
5
|
+
|
6
|
+
help %Q{
|
7
|
+
Please see the BaSass website for documentation on how everything works:
|
8
|
+
|
9
|
+
http://basass.lee-ellam.com
|
10
|
+
}
|
11
|
+
|
12
|
+
welcome_message %Q{
|
13
|
+
Please see the BaSass website for documentation on how everything works:
|
14
|
+
|
15
|
+
http://basass.lee-ellam.com
|
16
|
+
}
|
metadata
ADDED
@@ -0,0 +1,96 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: basass
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Lee Ellam
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2013-04-11 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: compass
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: 0.12.2
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: 0.12.2
|
30
|
+
- !ruby/object:Gem::Dependency
|
31
|
+
name: sass
|
32
|
+
requirement: !ruby/object:Gem::Requirement
|
33
|
+
none: false
|
34
|
+
requirements:
|
35
|
+
- - ! '>='
|
36
|
+
- !ruby/object:Gem::Version
|
37
|
+
version: 3.2.0
|
38
|
+
type: :runtime
|
39
|
+
prerelease: false
|
40
|
+
version_requirements: !ruby/object:Gem::Requirement
|
41
|
+
none: false
|
42
|
+
requirements:
|
43
|
+
- - ! '>='
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: 3.2.0
|
46
|
+
description: BaSass is a Sass framework to use as a base for mobile first responsive
|
47
|
+
design.
|
48
|
+
email:
|
49
|
+
- lee@lee-ellam.com
|
50
|
+
executables: []
|
51
|
+
extensions: []
|
52
|
+
extra_rdoc_files: []
|
53
|
+
files:
|
54
|
+
- basass.gemspec
|
55
|
+
- README.md
|
56
|
+
- lib/basass.rb
|
57
|
+
- stylesheets/_basass.scss
|
58
|
+
- stylesheets/_basass-defaults.scss
|
59
|
+
- stylesheets/_functions.scss
|
60
|
+
- stylesheets/_mixins.scss
|
61
|
+
- stylesheets/basass/_grids.scss
|
62
|
+
- stylesheets/basass/_icons.scss
|
63
|
+
- stylesheets/basass/_lists.scss
|
64
|
+
- stylesheets/basass/_normalize.scss
|
65
|
+
- stylesheets/basass/_prettyprint.scss
|
66
|
+
- stylesheets/basass/_states.scss
|
67
|
+
- stylesheets/basass/_top-nav.scss
|
68
|
+
- stylesheets/basass/_type.scss
|
69
|
+
- templates/project/application.scss
|
70
|
+
- templates/project/application-ie.scss
|
71
|
+
- templates/project/manifest.rb
|
72
|
+
homepage: http://basass.lee-ellam.com
|
73
|
+
licenses: []
|
74
|
+
post_install_message:
|
75
|
+
rdoc_options: []
|
76
|
+
require_paths:
|
77
|
+
- lib
|
78
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
79
|
+
none: false
|
80
|
+
requirements:
|
81
|
+
- - ! '>='
|
82
|
+
- !ruby/object:Gem::Version
|
83
|
+
version: '0'
|
84
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
85
|
+
none: false
|
86
|
+
requirements:
|
87
|
+
- - ! '>='
|
88
|
+
- !ruby/object:Gem::Version
|
89
|
+
version: 1.3.5
|
90
|
+
requirements: []
|
91
|
+
rubyforge_project: basass
|
92
|
+
rubygems_version: 1.8.23
|
93
|
+
signing_key:
|
94
|
+
specification_version: 3
|
95
|
+
summary: Base framework for mobile first responsive design.
|
96
|
+
test_files: []
|