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.
@@ -1,2 +1,4 @@
1
1
  @import "juliana/settings";
2
- @import "juliana/mixins";
2
+ @import "juliana/mixins";
3
+ @import "juliana/arrows";
4
+ @import "juliana/buttons";
@@ -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
+ }
@@ -86,6 +86,6 @@
86
86
  //*/
87
87
  @mixin box-sizing( $sizing: border-box ) {
88
88
  -webkit-box-sizing: $sizing;
89
- -moz-box-sizing: $sizing;
90
- box-sizing: $sizing;
89
+ -moz-box-sizing: $sizing;
90
+ box-sizing: $sizing;
91
91
  }
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
- prerelease: false
5
- segments:
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
- has_rdoc: true
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
- requirements:
45
- - - ">="
46
- - !ruby/object:Gem::Version
47
- segments:
48
- - 0
49
- version: "0"
50
- required_rubygems_version: !ruby/object:Gem::Requirement
51
- requirements:
52
- - - ">="
53
- - !ruby/object:Gem::Version
54
- segments:
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.3.6
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
-