roots-rails 0.0.1.alpha → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +0 -1
- data/lib/generators/roots/install_generator.rb +28 -12
- data/lib/generators/templates/layouts/_settings.styl +40 -0
- data/lib/generators/templates/layouts/application.css.styl +13 -0
- data/lib/generators/templates/layouts/layout.html.slim +26 -0
- data/lib/generators/templates/{scripts/pie.htc → pie.htc} +0 -0
- data/lib/roots/version.rb +1 -1
- data/readme.md +5 -13
- data/roots-rails.gemspec +2 -10
- metadata +13 -87
- data/Gemfile +0 -4
- data/lib/generators/roots/framework_generator.rb +0 -28
- 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 +0 -23
- data/lib/generators/templates/layouts/config.html.haml +0 -57
- data/lib/generators/templates/layouts/layout.html.haml +0 -26
- data/lib/generators/templates/sass/modules/_animation.sass +0 -454
- data/lib/generators/templates/sass/modules/_buttons.sass +0 -233
- data/lib/generators/templates/sass/modules/_code.sass +0 -41
- data/lib/generators/templates/sass/modules/_forms.sass +0 -209
- data/lib/generators/templates/sass/modules/_interaction.sass +0 -89
- data/lib/generators/templates/sass/modules/_reset.sass +0 -238
- data/lib/generators/templates/sass/modules/_tables.sass +0 -76
- data/lib/generators/templates/sass/modules/_typography.sass +0 -367
- data/lib/generators/templates/sass/modules/_ui.sass +0 -205
- data/lib/generators/templates/sass/modules/_utilities.sass +0 -372
- data/lib/generators/templates/sass/roots.sass +0 -54
- data/lib/generators/templates/scripts/selectivizr.js +0 -5
- data/vendor/assets/stylesheets/modules/_animation.sass +0 -454
- data/vendor/assets/stylesheets/modules/_buttons.sass +0 -233
- data/vendor/assets/stylesheets/modules/_code.sass +0 -41
- data/vendor/assets/stylesheets/modules/_fluid.sass +0 -160
- data/vendor/assets/stylesheets/modules/_forms.sass +0 -209
- data/vendor/assets/stylesheets/modules/_interaction.sass +0 -89
- data/vendor/assets/stylesheets/modules/_reset.sass +0 -238
- data/vendor/assets/stylesheets/modules/_tables.sass +0 -76
- data/vendor/assets/stylesheets/modules/_typography.sass +0 -367
- data/vendor/assets/stylesheets/modules/_ui.sass +0 -205
- data/vendor/assets/stylesheets/modules/_utilities.sass +0 -372
- data/vendor/assets/stylesheets/roots.sass +0 -57
@@ -1,205 +0,0 @@
|
|
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)
|
@@ -1,372 +0,0 @@
|
|
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)
|