roots-rails 0.0.1.alpha
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/lib/generators/roots/framework_generator.rb +28 -0
- data/lib/generators/roots/install_generator.rb +36 -0
- data/lib/generators/templates/favicon.ico +0 -0
- data/lib/generators/templates/images/apple-touch-icon-114x114.png +0 -0
- data/lib/generators/templates/images/apple-touch-icon-72x72.png +0 -0
- data/lib/generators/templates/images/apple-touch-icon.png +0 -0
- data/lib/generators/templates/images/preview.png +0 -0
- data/lib/generators/templates/layouts/application.sass +23 -0
- data/lib/generators/templates/layouts/config.html.haml +57 -0
- data/lib/generators/templates/layouts/layout.html.haml +26 -0
- data/lib/generators/templates/noise.png +0 -0
- data/lib/generators/templates/sass/modules/_animation.sass +454 -0
- data/lib/generators/templates/sass/modules/_buttons.sass +233 -0
- data/lib/generators/templates/sass/modules/_code.sass +41 -0
- data/lib/generators/templates/sass/modules/_forms.sass +209 -0
- data/lib/generators/templates/sass/modules/_interaction.sass +89 -0
- data/lib/generators/templates/sass/modules/_reset.sass +238 -0
- data/lib/generators/templates/sass/modules/_tables.sass +76 -0
- data/lib/generators/templates/sass/modules/_typography.sass +367 -0
- data/lib/generators/templates/sass/modules/_ui.sass +205 -0
- data/lib/generators/templates/sass/modules/_utilities.sass +372 -0
- data/lib/generators/templates/sass/roots.sass +54 -0
- data/lib/generators/templates/scripts/pie.htc +96 -0
- data/lib/generators/templates/scripts/selectivizr.js +5 -0
- data/lib/roots.rb +6 -0
- data/lib/roots/engine.rb +6 -0
- data/lib/roots/version.rb +4 -0
- data/readme.md +24 -0
- data/roots-rails.gemspec +28 -0
- data/vendor/assets/stylesheets/modules/_animation.sass +454 -0
- data/vendor/assets/stylesheets/modules/_buttons.sass +233 -0
- data/vendor/assets/stylesheets/modules/_code.sass +41 -0
- data/vendor/assets/stylesheets/modules/_fluid.sass +160 -0
- data/vendor/assets/stylesheets/modules/_forms.sass +209 -0
- data/vendor/assets/stylesheets/modules/_interaction.sass +89 -0
- data/vendor/assets/stylesheets/modules/_reset.sass +238 -0
- data/vendor/assets/stylesheets/modules/_tables.sass +76 -0
- data/vendor/assets/stylesheets/modules/_typography.sass +367 -0
- data/vendor/assets/stylesheets/modules/_ui.sass +205 -0
- data/vendor/assets/stylesheets/modules/_utilities.sass +372 -0
- data/vendor/assets/stylesheets/roots.sass +57 -0
- metadata +132 -0
@@ -0,0 +1,205 @@
|
|
1
|
+
// -----------------------------------------------------
|
2
|
+
// UI
|
3
|
+
// -----------------------------------------------------
|
4
|
+
|
5
|
+
// Mixin: Area
|
6
|
+
// Just a nice little area for you to put content in. Rounded corners, box with light
|
7
|
+
// grey background by default. You can pass it a different color if you'd like.
|
8
|
+
// ex. +area
|
9
|
+
// ex. +area($red) -- not recommended
|
10
|
+
|
11
|
+
=area($color: #F5F5F5)
|
12
|
+
+box-shadow(inset 0 0 6px rgba(#000,.05))
|
13
|
+
background-color: $color
|
14
|
+
padding: 15px
|
15
|
+
border-radius: 4px
|
16
|
+
behavior: asset-url('pie.htc', javascript)
|
17
|
+
margin: 20px 0
|
18
|
+
|
19
|
+
// Mixin: Notice
|
20
|
+
// A notice for you. Best used for flash alerts, this was originally an internal
|
21
|
+
// mixin, but you can use it if you'd like. Give it a color and a width and it will
|
22
|
+
// output a nice lightly gradiented box for your notice to reside in.
|
23
|
+
// ex. +notice
|
24
|
+
// ex. +notice(500px, $blue)
|
25
|
+
|
26
|
+
=notice($width: false, $color: #EEEEEE)
|
27
|
+
+simple-gradient($color, 3%)
|
28
|
+
+group
|
29
|
+
border-radius: 5px
|
30
|
+
padding: 15px
|
31
|
+
border: 1px solid darken($color, 10%)
|
32
|
+
-webkit-box-shadow: 1px 1px 3px rgba(#000,.05)
|
33
|
+
position: relative
|
34
|
+
|
35
|
+
@if $width
|
36
|
+
width: $width
|
37
|
+
|
38
|
+
// Mixin: Flash
|
39
|
+
// This is really great for rails flash messages, or really any little notifications like
|
40
|
+
// 'logged in!', 'logged out!', or 'errarrrr!'. Takes one of four types and colors them nicely
|
41
|
+
// for you - notice, success, warning, or error. Defaults to notice
|
42
|
+
// ex. +flash
|
43
|
+
// ex. +flash(error )
|
44
|
+
|
45
|
+
=flash($type: notice)
|
46
|
+
@if $type == notice
|
47
|
+
+notice($color: #6CC5FA)
|
48
|
+
color: #fff
|
49
|
+
font-weight: bold
|
50
|
+
text-shadow: 1px 1px 1px rgba(#000,.2)
|
51
|
+
@if $type == success
|
52
|
+
+notice($color: #7BDEA3)
|
53
|
+
color: #fff
|
54
|
+
font-weight: bold
|
55
|
+
text-shadow: 1px 1px 1px rgba(#000,.2)
|
56
|
+
@if $type == warning
|
57
|
+
+notice($color: #FAE677)
|
58
|
+
font-weight: bold
|
59
|
+
text-shadow: 1px 1px 1px rgba(#fff,.2)
|
60
|
+
@if $type == error
|
61
|
+
+notice($color: #E77C70)
|
62
|
+
color: #fff
|
63
|
+
font-weight: bold
|
64
|
+
text-shadow: 1px 1px 1px rgba(#000,.2)
|
65
|
+
|
66
|
+
// Mixin: Breadcrumb
|
67
|
+
// Lay this one down on a list and it will turn the list into a breadcrumb-y thing. By default
|
68
|
+
// separates with a slash, but you can feed it any character. Second param is spacing between the
|
69
|
+
// list items, and the third is the color of the divider. All are optional.
|
70
|
+
// ex. +breadcrumb
|
71
|
+
// ex. +breadcrumb(">")
|
72
|
+
// ex. +breadcrumb("-", 25px, $red)
|
73
|
+
|
74
|
+
=breadcrumb($character: "/", $spacing: 10px, $divider-color: #CDCDCD)
|
75
|
+
+inline-list($spacing)
|
76
|
+
li:after
|
77
|
+
content: $character
|
78
|
+
margin-left: $spacing
|
79
|
+
color: $divider-color
|
80
|
+
li:last-child:after
|
81
|
+
content: ""
|
82
|
+
|
83
|
+
// Mixin: Bubble
|
84
|
+
// If you're anything like me, you always seem to find your designers putting little bubbles in things.
|
85
|
+
// This mixin takes care of that problem, and makes a nice bubble with 100% css.
|
86
|
+
// All parameters optional - accepts width, pointer position (left, center, or right), and a color.
|
87
|
+
// ex. +bubble
|
88
|
+
// ex. +bubble($color: $blue)
|
89
|
+
// ex. +bubble(center, #57777E)
|
90
|
+
// ex. +bubble(right, #5740A1, 500px)
|
91
|
+
|
92
|
+
=bubble($pointer: left, $color: #EEEEEE, $width: false)
|
93
|
+
+notice($width, $color)
|
94
|
+
|
95
|
+
&:after
|
96
|
+
+triangle(down, 10px, darken($color, 3%))
|
97
|
+
position: absolute
|
98
|
+
bottom: -9px
|
99
|
+
@if $pointer == center
|
100
|
+
@if $width == false
|
101
|
+
@warn "you must specify a width to center the pointer"
|
102
|
+
left: $width/2
|
103
|
+
@else if $pointer == right
|
104
|
+
right: 15px
|
105
|
+
|
106
|
+
&:before
|
107
|
+
+triangle(down, 10px, darken($color, 10%))
|
108
|
+
position: absolute
|
109
|
+
bottom: -11px
|
110
|
+
@if $pointer == center
|
111
|
+
@if $width == false
|
112
|
+
@warn "you must specify a width to center the pointer"
|
113
|
+
left: $width/2
|
114
|
+
@else if $pointer == right
|
115
|
+
right: 15px
|
116
|
+
|
117
|
+
// Mixin: Figure
|
118
|
+
// For when you want to *semantically* show an image. Put this on your <figure /> element and it will style
|
119
|
+
// the nested image and figcaption in a wonderfully pleasing manner. Takes a color (for the thin outline), and
|
120
|
+
// if you want, dimensions of the image as a space separated list.
|
121
|
+
// ex. +figure
|
122
|
+
// ex. +figure($blue)
|
123
|
+
// ex. +figure(#D29E78, 100px 250px)
|
124
|
+
// ex. +figure($dimensions: 100px 250px)
|
125
|
+
|
126
|
+
=figure($color: $default, $dimensions: false)
|
127
|
+
@if type-of($dimensions) == list
|
128
|
+
display: block
|
129
|
+
width: nth($dimensions, 1)
|
130
|
+
height: nth($dimensions, 2)
|
131
|
+
@else if $dimensions == false
|
132
|
+
+inline-block
|
133
|
+
@else
|
134
|
+
@warn "Pass dimensions as false or a space-spearated list, as such: +figure($dimensions: 100px 250px) or +figure($blue, 100px 250px)"
|
135
|
+
img
|
136
|
+
display: block
|
137
|
+
padding: 4px
|
138
|
+
+round-corners(3px)
|
139
|
+
border: 1px solid rgba($color, .6)
|
140
|
+
figcaption
|
141
|
+
padding: 10px 0
|
142
|
+
text-align: center
|
143
|
+
font-style: italic
|
144
|
+
|
145
|
+
// Mixin: Nav
|
146
|
+
// Makes a fantastic nav bar for you that doesn't look exactly like bootstrap's and you can
|
147
|
+
// customize it as well. Params: fixed (boolean), color (recommend something dark), link color,
|
148
|
+
// and size, which is an integer from one up, and scales every aspect of the nav bar for you.
|
149
|
+
// All have defaults.
|
150
|
+
// This mixin is meant to be placed on a <nav> element that contains a ul.
|
151
|
+
// ex. +nav
|
152
|
+
// ex. +nav(false, #444, $red, 3)
|
153
|
+
|
154
|
+
=nav($fixed: true, $color: #222, $link-color: #fff, $size: 1)
|
155
|
+
display: block
|
156
|
+
z-index: 10
|
157
|
+
+simple-noise-gradient($color, 5%)
|
158
|
+
+group
|
159
|
+
+box-shadow(0 3px 3px rgba(0,0,0,.15))
|
160
|
+
border-bottom: 1px solid rgba(darken($color, 15%),.7)
|
161
|
+
height: #{round(($size + 14)*2.866)}px
|
162
|
+
width: 100%
|
163
|
+
font-size: #{$size + 14}px
|
164
|
+
@if $fixed
|
165
|
+
position: fixed
|
166
|
+
@else
|
167
|
+
position: relative
|
168
|
+
|
169
|
+
ul
|
170
|
+
float: right
|
171
|
+
margin: 0
|
172
|
+
padding: #{($size + 14)*.8}px
|
173
|
+
color: $link-color
|
174
|
+
|
175
|
+
li
|
176
|
+
list-style-type: none
|
177
|
+
margin-right: 30px
|
178
|
+
float: left
|
179
|
+
|
180
|
+
a
|
181
|
+
color: $link-color
|
182
|
+
border: none
|
183
|
+
cursor: pointer
|
184
|
+
|
185
|
+
&:hover
|
186
|
+
color: darken($link-color, 20%)
|
187
|
+
border: none
|
188
|
+
|
189
|
+
// Additive Mixin: Flash Notices
|
190
|
+
// WARNING: Creates classes in your css and styles them - not to be used inside an element.
|
191
|
+
// Super convenient flash notices. Anything with .flash on it will display as a notice, and if
|
192
|
+
// you add the additional class .error, .warning, .notice, or .success, it will display the
|
193
|
+
// appropriate color background for the message.
|
194
|
+
// ex. +flash-notices
|
195
|
+
|
196
|
+
=flash-notices
|
197
|
+
.flash
|
198
|
+
&.error
|
199
|
+
+flash(error)
|
200
|
+
&.warning
|
201
|
+
+flash(warning)
|
202
|
+
&.notice
|
203
|
+
+flash(notice)
|
204
|
+
&.success
|
205
|
+
+flash(success)
|
@@ -0,0 +1,372 @@
|
|
1
|
+
// -----------------------------------------------------
|
2
|
+
// Utilities
|
3
|
+
// -----------------------------------------------------
|
4
|
+
|
5
|
+
// Mixin: Prefix
|
6
|
+
// Pass this a key and a value and it will put all the browser prefixes on it.
|
7
|
+
// ex. +prefix(box-shadow, 0 0 3px #000)
|
8
|
+
// ex. +prefix(transition, all .3s ease)
|
9
|
+
|
10
|
+
=prefix($prop, $val)
|
11
|
+
-webkit-#{$prop}: $val
|
12
|
+
-moz-#{$prop}: $val
|
13
|
+
-o-#{$prop}: $val
|
14
|
+
-ms-#{$prop}: $val
|
15
|
+
#{$prop}: $val
|
16
|
+
|
17
|
+
// Mixin: Transition
|
18
|
+
// A shortcut for prefixed transitions with an intelligent default. If you want to pass it multiple
|
19
|
+
// comma-separated transitions you must put your parameters in quotes (or the commas get confused)
|
20
|
+
// ex. +transition
|
21
|
+
// ex. +transition(color 1s ease)
|
22
|
+
// ex. +transition("color, background 1s ease")
|
23
|
+
|
24
|
+
=transition($params: all .3s ease-in-out)
|
25
|
+
+prefix(transition, unquote($params))
|
26
|
+
|
27
|
+
// Mixin: Text Shadow
|
28
|
+
// A shortcut for prefixed text-shadows with an intelligent default. If you want to pass it multiple
|
29
|
+
// comma-separated shadows you must put your parameters in quotes (or the commas get confused)
|
30
|
+
// ex. +text-shadow
|
31
|
+
// ex. +text-shadow(1px 1px 3px $blue)
|
32
|
+
// ex. +text-shadow("1px 1px 3px $blue, inset 2px 0 5px rgba(0,0,0,.5)")
|
33
|
+
|
34
|
+
=text-shadow($params:0 0 1px rgba(0,0,0,.1))
|
35
|
+
+prefix(text-shadow, unquote($params))
|
36
|
+
|
37
|
+
// Mixin: Box Shadow
|
38
|
+
// A shortcut for prefixed box-shadows with an intelligent default. If you want to pass it multiple
|
39
|
+
// comma-separated shadows you must put your parameters in quotes (or the commas get confused)
|
40
|
+
// ex. +box-shadow
|
41
|
+
// ex. +box-shadow(1px 1px 3px $blue)
|
42
|
+
// ex. +box-shadow("1px 1px 3px $blue, inset 2px 0 5px rgba(0,0,0,.5)")
|
43
|
+
|
44
|
+
=box-shadow($params)
|
45
|
+
+prefix(box-shadow, unquote($params))
|
46
|
+
behavior: asset-url('pie.htc', javascript)
|
47
|
+
|
48
|
+
// Mixin: Opacity
|
49
|
+
// I know, it seems silly. But every time you go to IE testing you will be thanking yourself for
|
50
|
+
// using this instead of the normal opacity declaration. Takes the same params as opacity would normally
|
51
|
+
// ex. +opacity(.6)
|
52
|
+
|
53
|
+
=opacity($opacity)
|
54
|
+
filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})")
|
55
|
+
opacity: $opacity
|
56
|
+
|
57
|
+
// Mixin: Rotate
|
58
|
+
// Prefixed rotation with IE compatibility. Takes a degree value followed by "deg"
|
59
|
+
// ex. +rotate(45deg)
|
60
|
+
|
61
|
+
=rotate($params)
|
62
|
+
+prefix(transform, rotate($params))
|
63
|
+
behavior: asset-url('pie.htc', javascript)
|
64
|
+
|
65
|
+
// Mixin: Rounded
|
66
|
+
// Unless you are working with a ridiculously large element, this will round the corners
|
67
|
+
// as much as css will allow. Even in IE.
|
68
|
+
// ex. +rounded
|
69
|
+
|
70
|
+
=rounded
|
71
|
+
border-radius: 999px
|
72
|
+
behavior: asset-url('pie.htc', javascript)
|
73
|
+
|
74
|
+
// Mixin: Round Corners
|
75
|
+
// Take a guess what this does. Aliases border-radius, works in IE.
|
76
|
+
// ex. +round-corners(5px)
|
77
|
+
|
78
|
+
=round-corners($px)
|
79
|
+
border-radius: $px
|
80
|
+
behavior: asset-url('pie.htc', javascript)
|
81
|
+
|
82
|
+
// Mixin: Round
|
83
|
+
// Take a guess what this does. Aliases border-radius, works in IE.
|
84
|
+
// ex. +round(5px)
|
85
|
+
|
86
|
+
=round($px)
|
87
|
+
+round-corners($px)
|
88
|
+
|
89
|
+
// Mixin: Border
|
90
|
+
// Alias of border, but with an intelligent default
|
91
|
+
|
92
|
+
=border($params: 1px solid)
|
93
|
+
border: $params
|
94
|
+
|
95
|
+
// Mixin: B
|
96
|
+
// Alias of border, but with an intelligent default. Intended for quick debugging use.
|
97
|
+
// I used to spend a lot of time typing "border: 1px solid", but no more!
|
98
|
+
// ex. +b
|
99
|
+
|
100
|
+
=b
|
101
|
+
+border
|
102
|
+
|
103
|
+
// Mixin: Bg
|
104
|
+
// Alias for background (with images), makes it a little quicker. Takes three arguments, the first is
|
105
|
+
// the image path, second is background-position if you want, third is background repeat.
|
106
|
+
// ex. +bg(../img/test.png)
|
107
|
+
// ex. +bg(../img/other.jpg, center center, repeat)
|
108
|
+
|
109
|
+
=bg($path, $position: unquote(""), $repeat: no-repeat)
|
110
|
+
background: url(unquote($path)) $position $repeat
|
111
|
+
|
112
|
+
// Mixin: Bold
|
113
|
+
// It's just faster to type +bold than font-weight: bold
|
114
|
+
// ex. +bold
|
115
|
+
|
116
|
+
=bold
|
117
|
+
font-weight: bold
|
118
|
+
|
119
|
+
// Mixin: Italic
|
120
|
+
// It's just faster to type +italic than font-style: italic
|
121
|
+
// ex. +bold
|
122
|
+
|
123
|
+
=italic
|
124
|
+
font-style: italic
|
125
|
+
|
126
|
+
// Mixin: Columns
|
127
|
+
// For css3 columns. Takes column count (int), column gap (px, em), column width (px, em), and
|
128
|
+
// a border-like declaration if you want a column rule. This follows exactly with the css3 spec,
|
129
|
+
// it's just quicker, prefixed, and shortened.
|
130
|
+
// ex. +columns
|
131
|
+
// ex. +columns(5)
|
132
|
+
// ex. +columns(8, 15px, 200px, 1px solid $red)
|
133
|
+
|
134
|
+
=columns($count: 3, $gap: 30px, $width: false, $rule: false)
|
135
|
+
+prefix(column-count, $count)
|
136
|
+
+prefix(column-gap, $gap)
|
137
|
+
@if $width
|
138
|
+
+prefix(column-width, $width)
|
139
|
+
@if $rule
|
140
|
+
+prefix(column-rule, $rule)
|
141
|
+
|
142
|
+
// Mixin: Avoid Column Break
|
143
|
+
// If you have a list that is broken into columns, this will make sure that the list item
|
144
|
+
// is not split across columns awkwardly. Works only in webkit at the moment.
|
145
|
+
|
146
|
+
=avoid-column-break
|
147
|
+
+prefix(column-break-inside, avoid)
|
148
|
+
|
149
|
+
// Mixin: Triangle
|
150
|
+
// One of my favorites. Makes a little css triangle for you. Pass it a direction (up, down, left, right),
|
151
|
+
// size (in pixels), and a color.
|
152
|
+
// ex. +triangle
|
153
|
+
// ex. +triangle(down, 15px, $blue)
|
154
|
+
|
155
|
+
=triangle($direction: up, $size: 10px, $color: #000)
|
156
|
+
width: 0
|
157
|
+
height: 0
|
158
|
+
@if $direction == up
|
159
|
+
border-left: $size solid transparent
|
160
|
+
border-right: $size solid transparent
|
161
|
+
border-bottom: $size solid $color
|
162
|
+
@else if $direction == down
|
163
|
+
border-left: $size solid transparent
|
164
|
+
border-right: $size solid transparent
|
165
|
+
border-top: $size solid $color
|
166
|
+
@else if $direction == left
|
167
|
+
border-top: $size solid transparent
|
168
|
+
border-bottom: $size solid transparent
|
169
|
+
border-right: $size solid $color
|
170
|
+
@else if $direction == right
|
171
|
+
border-top: $size solid transparent
|
172
|
+
border-bottom: $size solid transparent
|
173
|
+
border-left: $size solid $color
|
174
|
+
|
175
|
+
// Mixin: Ir
|
176
|
+
// Image replacement. Pass it an image path and the image's dimensions and any text will be hidden
|
177
|
+
// in the div and it will show an image instead. Uses the fanciest new method, props to Paul Irish
|
178
|
+
// Avoid any possibility of an error by quoting the image path. Also looks cleaner.
|
179
|
+
// ex. +ir("../img/test.jpg", 200px 400px)
|
180
|
+
|
181
|
+
=ir($img-path: false, $dimensions: false)
|
182
|
+
font: 0/0 a
|
183
|
+
text-shadow: none
|
184
|
+
color: transparent
|
185
|
+
@if $img-path
|
186
|
+
+bg(unquote($img-path))
|
187
|
+
@if type-of($dimensions) == list
|
188
|
+
width: nth($dimensions, 1)
|
189
|
+
height: nth($dimensions, 3)
|
190
|
+
@else if $dimensions == false
|
191
|
+
// all is well
|
192
|
+
@else
|
193
|
+
@warn "Dimenions takes a space-separated list of values - order: width, height. Ex: +ir('img.jpg', 100px 150px)"
|
194
|
+
|
195
|
+
|
196
|
+
// Mixin: Group
|
197
|
+
// This is the clearfix with a better name. I use this mixin like there's no tomorrow. It's like using
|
198
|
+
// overflow: hidden, except it doesn't hide the overflow. Awesome for wrangling floats, and really quick now.
|
199
|
+
// ex. +group
|
200
|
+
|
201
|
+
=group
|
202
|
+
zoom: 1
|
203
|
+
&:before, &:after
|
204
|
+
content: ""
|
205
|
+
display: table
|
206
|
+
&:after
|
207
|
+
clear: both
|
208
|
+
|
209
|
+
// Mixin: Clearfix
|
210
|
+
// In case you can't leave this crazy word in the past. This is an alias for group.
|
211
|
+
// ex. +clearfix
|
212
|
+
|
213
|
+
=clearfix
|
214
|
+
+group
|
215
|
+
|
216
|
+
// Mixin: Inline Block
|
217
|
+
// Cross browser inline block display. Saves many IE headaches.
|
218
|
+
// ex. +inline-block
|
219
|
+
|
220
|
+
=inline-block
|
221
|
+
display: -moz-inline-stack
|
222
|
+
display: inline-block
|
223
|
+
vertical-align: top
|
224
|
+
zoom: 1
|
225
|
+
*display: inline
|
226
|
+
|
227
|
+
// Mixin: Media
|
228
|
+
// Based on Nicole Sullivan's media class, made famous by Facebook
|
229
|
+
// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
|
230
|
+
|
231
|
+
// Put this on a parent and it will split the first two children left and right, like you would with perhaps
|
232
|
+
// a comment with an avatar to the left. Pass it a margin between the two.
|
233
|
+
// Explained fully here: http://carrotblog.com/css-patterns-evolved/
|
234
|
+
|
235
|
+
// This mixin works right when the element you apply it to has two or three direct children
|
236
|
+
// The first one will float to the left, the second one will be to the right of the first, and third will go farthest right
|
237
|
+
// ex. +split
|
238
|
+
// ex. +split(15px)
|
239
|
+
// ex. +split(15px 10px)
|
240
|
+
|
241
|
+
=media($margin: 10px)
|
242
|
+
|
243
|
+
$left: $margin
|
244
|
+
$right: $margin
|
245
|
+
|
246
|
+
@if type-of($margin) == list
|
247
|
+
$left: nth($margin, 1)
|
248
|
+
$right: nth($margin, 2)
|
249
|
+
|
250
|
+
overflow: hidden
|
251
|
+
zoom: 1
|
252
|
+
|
253
|
+
& > *
|
254
|
+
overflow: hidden
|
255
|
+
zoom: 1
|
256
|
+
& > *:first-child
|
257
|
+
float: left
|
258
|
+
margin-right: $right
|
259
|
+
& > *:nth-child(3)
|
260
|
+
float: right
|
261
|
+
margin-left: $left
|
262
|
+
|
263
|
+
// Mixin: Raquo
|
264
|
+
// Because technically raquo is not semantic, it's easier to add it like this.
|
265
|
+
// ex. +raquo
|
266
|
+
|
267
|
+
=raquo
|
268
|
+
&:after
|
269
|
+
content: " \00BB"
|
270
|
+
|
271
|
+
// Mixin: D
|
272
|
+
// I find myself writing "width: blah blah px, height: blah px" all the time. This makes it so so
|
273
|
+
// much faster. The arguments it accepts are very flexible. You can pass it one number and it will set that
|
274
|
+
// to the width and height. You can give it units, and if you don't it will assume pixels. You can pass
|
275
|
+
// it two numbers and it will set the first to width and the second to height. It's very convenient.
|
276
|
+
// ex. +d(50) => width: 50px; height: 50px;
|
277
|
+
// ex. +d(1.5em 2em) => width: 1.5em; height: 2em
|
278
|
+
|
279
|
+
=dimensions($numbers)
|
280
|
+
@if type-of($numbers) == list
|
281
|
+
@if unitless(nth($numbers, 1))
|
282
|
+
width: #{nth($numbers, 1)}px
|
283
|
+
height: #{nth($numbers, 2)}px
|
284
|
+
@else
|
285
|
+
width: nth($numbers, 1)
|
286
|
+
height: nth($numbers, 2)
|
287
|
+
@else if type-of($numbers) == number
|
288
|
+
@if unitless($numbers)
|
289
|
+
width: #{$numbers}px
|
290
|
+
height: #{$numbers}px
|
291
|
+
@else
|
292
|
+
width: $numbers
|
293
|
+
height: $numbers
|
294
|
+
@else
|
295
|
+
@warn "Please pass in a value or list of two values"
|
296
|
+
|
297
|
+
// Mixin: D
|
298
|
+
// A shorter alias for +dimensions, because I use it so so often.
|
299
|
+
|
300
|
+
=d($arg)
|
301
|
+
+dimensions($arg)
|
302
|
+
|
303
|
+
// Mixin: Debug
|
304
|
+
// Debugging tool - drop this at root level in your css and it will put borders on every element so
|
305
|
+
// you can see what's up. It will also flag them if you made mistakes like put in inline styles, forgot
|
306
|
+
// an alt on an image, left the alt blank, etc. For god's sake don't use this in production.
|
307
|
+
|
308
|
+
// all credit for this goes to intuit.css, from which I adapted it (and improved it a bit)
|
309
|
+
// https://github.com/csswizardry/inuit.css
|
310
|
+
|
311
|
+
=debug
|
312
|
+
html
|
313
|
+
|
314
|
+
div
|
315
|
+
border: 1px solid green
|
316
|
+
|
317
|
+
[style], style
|
318
|
+
border: 5px solid yellow
|
319
|
+
|
320
|
+
style
|
321
|
+
border: block
|
322
|
+
|
323
|
+
img
|
324
|
+
border: 5px solid red
|
325
|
+
|
326
|
+
img[alt]
|
327
|
+
border-color: green
|
328
|
+
|
329
|
+
img[alt=""]
|
330
|
+
border-color: yellow
|
331
|
+
|
332
|
+
a
|
333
|
+
border: 5px solid yellow
|
334
|
+
|
335
|
+
a[title]
|
336
|
+
border-color: green
|
337
|
+
|
338
|
+
a[href="#"]
|
339
|
+
outline-color: yellow
|
340
|
+
|
341
|
+
a[target]
|
342
|
+
border-color: red
|
343
|
+
|
344
|
+
[class=""], [id=""]
|
345
|
+
border: 5px solid yellow
|
346
|
+
|
347
|
+
// Mixin: Keyframes
|
348
|
+
// An easier way to do keyframe animations cross browser. Accepts an animation name
|
349
|
+
// and a block.
|
350
|
+
// ex. +keyframes(fade-out)
|
351
|
+
// 0%
|
352
|
+
// opacity: 1
|
353
|
+
// 100%
|
354
|
+
// opacity: 0
|
355
|
+
|
356
|
+
// Check out the animations module for a bunch of sweet presets you can load if you want.
|
357
|
+
|
358
|
+
=keyframes($name)
|
359
|
+
@-moz-keyframes #{$name}
|
360
|
+
@content
|
361
|
+
@-webkit-keyframes #{$name}
|
362
|
+
@content
|
363
|
+
@-ms-keyframes #{$name}
|
364
|
+
@content
|
365
|
+
|
366
|
+
// Mixin: Animation
|
367
|
+
// How you actually implement the animation. Takes animation name, duration, and how to handle
|
368
|
+
// looping. works the same way as the official, just prefixes it.
|
369
|
+
// ex. +animation(fade-out, 5s, infinite)
|
370
|
+
|
371
|
+
=animation($params)
|
372
|
+
+prefix(animation, $params)
|