juliana 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/sass/_juliana.scss +3 -1
- data/sass/juliana/_arrows.scss +137 -0
- data/sass/juliana/_buttons.scss +237 -0
- data/sass/juliana/_mixins.scss +2 -2
- metadata +23 -38
data/sass/_juliana.scss
CHANGED
@@ -0,0 +1,137 @@
|
|
1
|
+
//** Arrow ****************************************/
|
2
|
+
//*
|
3
|
+
//* Adds a CSS3 generated arrow to an element, best used when combined with the button mixins
|
4
|
+
//*
|
5
|
+
//* @param string [$direction]
|
6
|
+
//* The direction that the arrow should point. left, right, down, up
|
7
|
+
//* Left facing arrows are always floated to the left side of the text, all other arrows are on the right
|
8
|
+
//*
|
9
|
+
//* @param string [$color]
|
10
|
+
//* Color of generated arrow in hex. Defaults to white.
|
11
|
+
//*
|
12
|
+
//* @param string [$parent_height]
|
13
|
+
//* Height of parent element in pixels. Defaults to 27px (default button height)
|
14
|
+
//*
|
15
|
+
//* @param string [$shadow_color]
|
16
|
+
//* Color of generated arrow shadow in hex. Defaults to 35% translucent black
|
17
|
+
//* Note: due to unsupported alpha transparancy on absolutely positioned elements in IE8, arrow shadows are disabled in IE8.
|
18
|
+
//*
|
19
|
+
//* @param string [$shadow_distance_x]
|
20
|
+
//* X offset of generated shadow. Defaults to 1px
|
21
|
+
//*
|
22
|
+
//* @param string [$shadow_distance_y]
|
23
|
+
//* Y offset of generated shadow. Defaults to 1px
|
24
|
+
//*
|
25
|
+
//* @param string [$size]
|
26
|
+
//* Size of arrow in pixels. Defaults to 4px.
|
27
|
+
//*
|
28
|
+
//* @param string [$offet]
|
29
|
+
//* Offset from edge of element in px. Defaults to size of arrow * 3
|
30
|
+
//*
|
31
|
+
//* @param string [$padding]
|
32
|
+
//* Padding to add to the side of the element to account for arrow. Defaults to size of offset * 2 to center.
|
33
|
+
//*/
|
34
|
+
|
35
|
+
@mixin arrow ( $direction: right, $color: #fff, $parent_height: 27px, $shadow_color: rgba( #000, 0.35 ), $shadow_distance_x: 1px, $shadow_distance_y: 1px, $size: 4px, $offset: $size * 3, $padding: $offset * 2 ) {
|
36
|
+
|
37
|
+
position: relative;
|
38
|
+
-webkit-transform:rotate(360deg); // force antialiasing
|
39
|
+
|
40
|
+
@if ( $direction == 'down' or $direction == 'up' or $direction == 'right' ) {
|
41
|
+
padding-right: $padding;
|
42
|
+
}
|
43
|
+
|
44
|
+
@if ( $direction == 'left' ) {
|
45
|
+
padding-left: $padding;
|
46
|
+
}
|
47
|
+
|
48
|
+
&:after,
|
49
|
+
&:before {
|
50
|
+
@include pseudo;
|
51
|
+
right: $offset - $size;
|
52
|
+
}
|
53
|
+
|
54
|
+
&:after {
|
55
|
+
|
56
|
+
@if ( $direction == 'down' ) {
|
57
|
+
border-color: #{$color} transparent transparent transparent;
|
58
|
+
border-style: solid inset inset inset;
|
59
|
+
top: ceil( ( $parent_height / 2 ) - ( $size / 2 ) );
|
60
|
+
}
|
61
|
+
|
62
|
+
@if ( $direction == 'up' ) {
|
63
|
+
border-color: transparent transparent #{$color} transparent;
|
64
|
+
border-style: inset inset solid inset;
|
65
|
+
top: ceil( ( $parent_height / 2 ) - ( $size * 1.5 ) );
|
66
|
+
}
|
67
|
+
|
68
|
+
@if ( $direction == 'right' ) {
|
69
|
+
border-color: transparent transparent transparent #{$color};
|
70
|
+
border-style: inset inset inset solid;
|
71
|
+
top: ceil( ( $parent_height / 2 ) - ( $size * 1.25 ) );
|
72
|
+
}
|
73
|
+
|
74
|
+
@if ( $direction == 'left' ) {
|
75
|
+
left: $offset - $size;
|
76
|
+
border-color: transparent #{$color} transparent transparent;
|
77
|
+
border-style: inset solid inset inset;
|
78
|
+
top: ceil( ( $parent_height / 2 ) - ( $size * 1.25 ) );
|
79
|
+
}
|
80
|
+
|
81
|
+
border-width: #{$size};
|
82
|
+
width: 0;
|
83
|
+
height: 0;
|
84
|
+
position: absolute;
|
85
|
+
|
86
|
+
.ie & {
|
87
|
+
border-style: solid;
|
88
|
+
}
|
89
|
+
|
90
|
+
} // :after
|
91
|
+
|
92
|
+
@if ( $shadow_color ) {
|
93
|
+
|
94
|
+
&:before {
|
95
|
+
|
96
|
+
right: $offset - $size - $shadow_distance_x;
|
97
|
+
|
98
|
+
@if ( $direction == 'down' ) {
|
99
|
+
border-color: #{$shadow_color} transparent transparent transparent;
|
100
|
+
border-style: solid inset inset inset;
|
101
|
+
top: ceil( ( $parent_height / 2 ) - ( $size / 2 ) + $shadow_distance_y );
|
102
|
+
}
|
103
|
+
|
104
|
+
@if ( $direction == 'up' ) {
|
105
|
+
border-color: transparent transparent #{$shadow_color} transparent;
|
106
|
+
border-style: inset inset solid inset;
|
107
|
+
top: ceil( ( $parent_height / 2 ) - ( $size * 1.5 ) + $shadow_distance_y );
|
108
|
+
}
|
109
|
+
|
110
|
+
@if ( $direction == 'right' ) {
|
111
|
+
border-color: transparent transparent transparent #{$shadow_color};
|
112
|
+
border-style: inset inset inset solid;
|
113
|
+
top: ceil( ( $parent_height / 2 ) - ( $size * 1.25 ) + $shadow_distance_y );
|
114
|
+
}
|
115
|
+
|
116
|
+
@if ( $direction == 'left' ) {
|
117
|
+
border-color: transparent #{$shadow_color} transparent transparent;
|
118
|
+
border-style: inset solid inset inset;
|
119
|
+
left: $offset - $size - $shadow_distance_x;
|
120
|
+
top: ceil( ( $parent_height / 2 ) - ( $size * 1.25 ) + $shadow_distance_y );
|
121
|
+
}
|
122
|
+
|
123
|
+
border-width: #{$size};
|
124
|
+
width: 0;
|
125
|
+
height: 0;
|
126
|
+
position: absolute;
|
127
|
+
|
128
|
+
.ie8 & {
|
129
|
+
// ie8 does not support alpha opacity on abs positioned elements. punishment for using ie8 = no shadows
|
130
|
+
border-style: none;
|
131
|
+
}
|
132
|
+
|
133
|
+
} // :before
|
134
|
+
|
135
|
+
} // if $shadow_color
|
136
|
+
|
137
|
+
} // arrow
|
@@ -0,0 +1,237 @@
|
|
1
|
+
//** Button Structure ****************************************/
|
2
|
+
//*
|
3
|
+
//* Sets up buttons. By default creates .form-button, .form-button-small and .form-button-large to our typical standards
|
4
|
+
//*
|
5
|
+
//* @param string $default_sizes
|
6
|
+
//* Override this if for some reason the three default sizes are not appropriate for your use case.
|
7
|
+
//* Provide as a list in the following format:
|
8
|
+
//* button class suffix, button text font-size, button height, button text line-height, button horizontal padding
|
9
|
+
//*
|
10
|
+
//* If you include a size called "default" it will apply one set of rules to the class that you include this mixin with.
|
11
|
+
//*
|
12
|
+
//* @param string $additional_sizes
|
13
|
+
//* Optionally provide extra sizes to include with default sizes, provided as a list in the following format:
|
14
|
+
//* button class suffix, button text font-size, button height, button text line-height, button horizontal padding
|
15
|
+
//*
|
16
|
+
//* Example:
|
17
|
+
//* @include button-structure( huge 24px 32px 32px 32px );
|
18
|
+
//*
|
19
|
+
//* @param string $prefix
|
20
|
+
//*
|
21
|
+
//* Optional string to prefix size class names with. Defaults to form-button as noted above.
|
22
|
+
//*
|
23
|
+
//*/
|
24
|
+
@mixin button-structure( $default_sizes: false, $additional_sizes: false, $prefix: 'form-button' ) {
|
25
|
+
|
26
|
+
@include border-radius( 4px );
|
27
|
+
border: 1px solid #016084;
|
28
|
+
color: #fefefe;
|
29
|
+
font-weight: bold;
|
30
|
+
display: inline-block;
|
31
|
+
vertical-align: top;
|
32
|
+
-webkit-user-select: none;
|
33
|
+
-moz-user-select: none;
|
34
|
+
user-select: none;
|
35
|
+
|
36
|
+
$sizes: ( default 12px 27px 27px 15px ) ( small 11px 23px 22px 13px ) ( large 13px 31px 30px 15px );
|
37
|
+
|
38
|
+
@if $default_sizes {
|
39
|
+
$sizes: $default_sizes;
|
40
|
+
}
|
41
|
+
|
42
|
+
@if $additional_sizes {
|
43
|
+
$sizes: append( $sizes, $additional_sizes );
|
44
|
+
}
|
45
|
+
|
46
|
+
|
47
|
+
@each $size in $sizes {
|
48
|
+
|
49
|
+
@if nth( $size, 1 ) == 'default' {
|
50
|
+
@include _button-sizes( $size );
|
51
|
+
} // if
|
52
|
+
|
53
|
+
@else {
|
54
|
+
|
55
|
+
&.#{$prefix}-#{nth( $size, 1 )} {
|
56
|
+
@include _button-sizes( $size );
|
57
|
+
} // form-button-size
|
58
|
+
|
59
|
+
} // else
|
60
|
+
|
61
|
+
} // each
|
62
|
+
|
63
|
+
&:hover {
|
64
|
+
text-decoration: none;
|
65
|
+
}
|
66
|
+
|
67
|
+
} // button-structure
|
68
|
+
|
69
|
+
|
70
|
+
//** Button Sizes ****************************************/
|
71
|
+
//* Used to avoid repetition in button-structure. Not very useful to call this directly
|
72
|
+
//*
|
73
|
+
//* @param list size
|
74
|
+
//* list of size values in format:
|
75
|
+
//* button text font-size, button height, button text line-height, button horizontal padding
|
76
|
+
//*/
|
77
|
+
@mixin _button-sizes( $size ) {
|
78
|
+
font-size: nth( $size, 2 );
|
79
|
+
height: nth( $size, 3 );
|
80
|
+
line-height: nth( $size, 4 );
|
81
|
+
padding: 0 nth( $size, 5 );
|
82
|
+
} // _button_sizes
|
83
|
+
|
84
|
+
|
85
|
+
//** Button Style ****************************************/
|
86
|
+
//*
|
87
|
+
//* Sets up custom button styes.
|
88
|
+
//*
|
89
|
+
//* All parameters are optional:
|
90
|
+
//*
|
91
|
+
//* @param string [$active_gradient] Gradient for button active state in list format. ex: $active_gradient: #000 #fff
|
92
|
+
//* Note that if not defined explicitly, this will be automatically calculated as $gradient with the values reversed (standard active behavior)
|
93
|
+
//*
|
94
|
+
//* @param string [$active_shadow] Active state shadow color in hex.
|
95
|
+
//* Box-shadow params are set automatically with function active_shadow
|
96
|
+
//*
|
97
|
+
//* @param string [$border_color]
|
98
|
+
//* Specifies button border-color
|
99
|
+
//*
|
100
|
+
//* @param string [$border_radius]
|
101
|
+
//* Specifies button border-radius
|
102
|
+
//*
|
103
|
+
//* @param string [$border_width]
|
104
|
+
//* Specifies button border-width
|
105
|
+
//*
|
106
|
+
//* @param string [$box_shadow]
|
107
|
+
//* Specifies button box-shadow
|
108
|
+
//*
|
109
|
+
//* @param string [$gradient]
|
110
|
+
//* Specifies button background gradient
|
111
|
+
//*
|
112
|
+
//* @param string [$hover_border]
|
113
|
+
//* Specifies button hover state border (accepts full shorthand)
|
114
|
+
//*
|
115
|
+
//* @param string [$hover_decoration]
|
116
|
+
//* Specifies button hover state text-decoration
|
117
|
+
//*
|
118
|
+
//* @param string [$hover_gradient]
|
119
|
+
//* Specifies button hover state background gradient. If not defined, defaults to 5% darker than normal gradient.
|
120
|
+
//*
|
121
|
+
//* @param string [$hover_text_color]
|
122
|
+
//* Specifies button hover state text color
|
123
|
+
//*
|
124
|
+
//* @param string [$text_color]
|
125
|
+
//* Specifies button text color
|
126
|
+
//*
|
127
|
+
//* @param string [$text_shadow]
|
128
|
+
//* Specifies button text-shadow
|
129
|
+
//*
|
130
|
+
//* @param string [$visited_text_color]
|
131
|
+
//* Specifies button visited state text color
|
132
|
+
//*/
|
133
|
+
@mixin button-style ( $active_gradient: false, $active_shadow: false, $border_color: false, $border_radius: false, $border_width: false, $box_shadow: false, $gradient: false, $hover_border: false, $hover_decoration: false, $hover_gradient: false, $hover_text_color: false, $text_color: false, $text_shadow: false, $visited_text_color: false ) {
|
134
|
+
|
135
|
+
@if $border_color {
|
136
|
+
border-color: $border_color;
|
137
|
+
}
|
138
|
+
|
139
|
+
@if $border_radius {
|
140
|
+
@include border-radius( $border_radius );
|
141
|
+
}
|
142
|
+
|
143
|
+
@if $border_width {
|
144
|
+
border-width: $border_width;
|
145
|
+
}
|
146
|
+
|
147
|
+
@if $box_shadow {
|
148
|
+
@include box-shadow( $box_shadow );
|
149
|
+
}
|
150
|
+
|
151
|
+
@if $gradient {
|
152
|
+
@include gradient( nth( $gradient, 1 ), nth( $gradient, 2 ) );
|
153
|
+
}
|
154
|
+
|
155
|
+
@if $text_color {
|
156
|
+
color: $text_color;
|
157
|
+
}
|
158
|
+
|
159
|
+
@if $text_shadow {
|
160
|
+
text-shadow: $text_shadow;
|
161
|
+
}
|
162
|
+
|
163
|
+
@if $visited_text_color {
|
164
|
+
|
165
|
+
&:visited {
|
166
|
+
color: $visited_text_color;
|
167
|
+
}
|
168
|
+
|
169
|
+
} // if $visited_text_color
|
170
|
+
|
171
|
+
@if $hover_border or $hover_text_color or $hover_gradient or $hover_decoration {
|
172
|
+
|
173
|
+
&:hover,
|
174
|
+
&:active,
|
175
|
+
&:focus {
|
176
|
+
|
177
|
+
@if $hover_border {
|
178
|
+
border: $hover_border;
|
179
|
+
}
|
180
|
+
|
181
|
+
@if $hover_border == false and $border_color {
|
182
|
+
border-color: darken( $border_color, 15% );
|
183
|
+
}
|
184
|
+
|
185
|
+
@if $hover_text_color or $hover_gradient or $hover_decoration {
|
186
|
+
|
187
|
+
@if $hover_text_color {
|
188
|
+
color: $hover_text_color;
|
189
|
+
}
|
190
|
+
|
191
|
+
@if $hover_gradient {
|
192
|
+
@include gradient( nth( $hover_gradient, 1 ), nth( $hover_gradient, 2 ) );
|
193
|
+
}
|
194
|
+
|
195
|
+
@if $hover_decoration {
|
196
|
+
text-decoration: $hover_decoration;
|
197
|
+
}
|
198
|
+
|
199
|
+
} // if $hover_text_color or $hover_gradient or $hover_decoration
|
200
|
+
|
201
|
+
} // :hover, :active, :focus
|
202
|
+
|
203
|
+
} // if $hover_border or $hover_text_color or $hover_gradient or $hover_decoration
|
204
|
+
|
205
|
+
@if $hover_gradient == false and $gradient {
|
206
|
+
|
207
|
+
&:hover,
|
208
|
+
&:active,
|
209
|
+
&:focus {
|
210
|
+
@include gradient( darken( nth( $gradient, 1 ), 5% ), darken( nth( $gradient, 2 ), 5% ) );
|
211
|
+
}
|
212
|
+
|
213
|
+
} // @if $hover_gradient == false and $gradient
|
214
|
+
|
215
|
+
|
216
|
+
@if $active_gradient or $active_shadow {
|
217
|
+
|
218
|
+
&:active {
|
219
|
+
|
220
|
+
@if $active_gradient {
|
221
|
+
@include gradient( nth( $active_gradient, 1), nth( $active_gradient, 2 ) );
|
222
|
+
}
|
223
|
+
|
224
|
+
@if $active_shadow {
|
225
|
+
@include box-shadow( $active_shadow );
|
226
|
+
}
|
227
|
+
|
228
|
+
} // &:active
|
229
|
+
|
230
|
+
} // if $active_gradient or $active_shadow
|
231
|
+
|
232
|
+
} // button-style
|
233
|
+
|
234
|
+
//** Function defining the button active shadow ****************************************/
|
235
|
+
@function active_shadow( $color ) {
|
236
|
+
@return inset 0 0 10px $color;
|
237
|
+
}
|
data/sass/juliana/_mixins.scss
CHANGED
metadata
CHANGED
@@ -1,65 +1,50 @@
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
2
|
name: juliana
|
3
|
-
version: !ruby/object:Gem::Version
|
4
|
-
|
5
|
-
|
6
|
-
- 0
|
7
|
-
- 0
|
8
|
-
- 4
|
9
|
-
version: 0.0.4
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.5
|
5
|
+
prerelease:
|
10
6
|
platform: ruby
|
11
|
-
authors:
|
7
|
+
authors:
|
12
8
|
- Jackie, Jess, John
|
13
9
|
autorequire:
|
14
10
|
bindir: bin
|
15
11
|
cert_chain: []
|
16
|
-
|
17
|
-
date: 2012-06-14 00:00:00 -04:00
|
18
|
-
default_executable:
|
12
|
+
date: 2012-07-06 00:00:00.000000000 Z
|
19
13
|
dependencies: []
|
20
|
-
|
21
14
|
description: Sass it, bitch!
|
22
15
|
email: jackie@behance.com
|
23
16
|
executables: []
|
24
|
-
|
25
17
|
extensions: []
|
26
|
-
|
27
18
|
extra_rdoc_files: []
|
28
|
-
|
29
|
-
files:
|
19
|
+
files:
|
30
20
|
- lib/juliana.rb
|
31
21
|
- sass/_juliana.scss
|
32
22
|
- sass/juliana/_mixins.scss
|
33
23
|
- sass/juliana/_settings.scss
|
34
|
-
|
24
|
+
- sass/juliana/_buttons.scss
|
25
|
+
- sass/juliana/_arrows.scss
|
35
26
|
homepage: http://be.net
|
36
27
|
licenses: []
|
37
|
-
|
38
28
|
post_install_message:
|
39
29
|
rdoc_options: []
|
40
|
-
|
41
|
-
require_paths:
|
30
|
+
require_paths:
|
42
31
|
- lib
|
43
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
requirements:
|
52
|
-
- -
|
53
|
-
- !ruby/object:Gem::Version
|
54
|
-
|
55
|
-
- 0
|
56
|
-
version: "0"
|
32
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
33
|
+
none: false
|
34
|
+
requirements:
|
35
|
+
- - ! '>='
|
36
|
+
- !ruby/object:Gem::Version
|
37
|
+
version: '0'
|
38
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
39
|
+
none: false
|
40
|
+
requirements:
|
41
|
+
- - ! '>='
|
42
|
+
- !ruby/object:Gem::Version
|
43
|
+
version: '0'
|
57
44
|
requirements: []
|
58
|
-
|
59
45
|
rubyforge_project:
|
60
|
-
rubygems_version: 1.
|
46
|
+
rubygems_version: 1.8.24
|
61
47
|
signing_key:
|
62
48
|
specification_version: 3
|
63
49
|
summary: Sassy baby
|
64
50
|
test_files: []
|
65
|
-
|