stipe 0.0.5.6 → 0.0.5.7
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/readme.md +5 -0
- data/stylesheets/stipe/_buttons.scss +2 -1
- data/stylesheets/stipe/buttons/_extends.scss +1 -15
- data/stylesheets/stipe/buttons/_mixins.scss +28 -0
- data/stylesheets/stipe/buttons/buttons.md +0 -0
- data/stylesheets/stipe/buttons/lib/_flat-default.scss +35 -0
- data/stylesheets/stipe/buttons/lib/_gloss-default.scss +39 -0
- data/stylesheets/stipe/buttons/lib/_shiny-default.scss +37 -0
- data/stylesheets/stipe/buttons/lib/_three-dee.scss +33 -0
- data/stylesheets/stipe/color/_default_color_palette.scss +9 -1
- data/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss +43 -4
- metadata +7 -4
- data/stylesheets/stipe/buttons/doc-src/buttons.md +0 -3
- data/stylesheets/stipe/buttons/lib/_cupid-green.scss +0 -63
- data/stylesheets/stipe/buttons/lib/_minimal.scss +0 -45
data/readme.md
CHANGED
@@ -16,9 +16,14 @@ Stipe is a Compass Extension, so Compass is set as a depdency. You will need to
|
|
16
16
|
* Over-hauled color palette CSS
|
17
17
|
* Updated forms extends to include `stipe_` in the name to increase visibility of where code is coming from in Toadstool
|
18
18
|
* Added UI for `contenteditable` new functionality
|
19
|
+
* Old button lib is dead
|
20
|
+
* All new buttons is alive
|
19
21
|
* Updates to `/stipe/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss`
|
20
22
|
* Added new `extend_color_loop` mixin
|
21
23
|
* Dynamically looping through list of OOCSS names to create color block classes
|
24
|
+
* New `extend_color_loop` mixin
|
25
|
+
* Added to `/stipe/stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss`
|
26
|
+
* All extends generated in memory from lists of objects
|
22
27
|
|
23
28
|
###0.0.5.5
|
24
29
|
* Fixed order of `@imports` in `_manifest.scss`
|
@@ -1 +1,2 @@
|
|
1
|
-
@import 'buttons/extends';
|
1
|
+
@import 'buttons/extends';
|
2
|
+
@import 'buttons/mixins';
|
@@ -1,16 +1,2 @@
|
|
1
1
|
// Default display Stipe buttons
|
2
|
-
// ---------------------------------------------------------
|
3
|
-
|
4
|
-
@import 'lib/cupid-green';
|
5
|
-
@import 'lib/minimal';
|
6
|
-
|
7
|
-
%stipe_buttons {
|
8
|
-
@extend %cupid-green;
|
9
|
-
margin-right: em(10);
|
10
|
-
&:last-child {
|
11
|
-
margin: 0;
|
12
|
-
}
|
13
|
-
&:nth-child(n+2) {
|
14
|
-
@extend %minimal;
|
15
|
-
}
|
16
|
-
}
|
2
|
+
// ---------------------------------------------------------
|
@@ -0,0 +1,28 @@
|
|
1
|
+
// Stipe comes with a series of pre-designed buttons that are easily useable and configutable
|
2
|
+
// gloss-default, shiny-default, flat-default and three-dee
|
3
|
+
// -----------------------------------------------------------
|
4
|
+
|
5
|
+
// Default values - edit in `_config.scss` file
|
6
|
+
// -----------------------------------------------------------
|
7
|
+
$button-color: $button-color !default;
|
8
|
+
$button-text-color: $white !default;
|
9
|
+
$button-line-height: 32 !default;
|
10
|
+
$button-border-radius: 3 !default;
|
11
|
+
$button-padding: 20 !default;
|
12
|
+
$button-font-size: 18 !default;
|
13
|
+
$button-weight: bold !default;
|
14
|
+
$button-text-shadow: true !default;
|
15
|
+
$button-box-shadow: true !default;
|
16
|
+
|
17
|
+
// button-default
|
18
|
+
// -----------------------------------------------------------
|
19
|
+
@mixin button-default ($text-color: $button-text-color, $line-height: $button-line-height, $border-radius: $button-border-radius, $padding: $button-padding, $font-size: $button-font-size, $weight: $button-weight){
|
20
|
+
color: $text-color;
|
21
|
+
line-height: em($line-height);
|
22
|
+
border-radius: em($border-radius);
|
23
|
+
padding: 0 em($padding);
|
24
|
+
font-size: em($font-size);
|
25
|
+
font-weight: $weight;
|
26
|
+
}
|
27
|
+
|
28
|
+
@import "lib/*";
|
File without changes
|
@@ -0,0 +1,35 @@
|
|
1
|
+
// flat-default
|
2
|
+
// -----------------------------------------------------------
|
3
|
+
@mixin flat-default ($color: $button-color, $text-shadow: $button-text-shadow, $box-shadow: $button-box-shadow){
|
4
|
+
$base-color: $color;
|
5
|
+
$grad-1: darken($base-color, 8%);
|
6
|
+
$dark-color: darken($base-color, 20%);
|
7
|
+
$highlight-color: lighten($base-color, 50%);
|
8
|
+
|
9
|
+
background-color: $base-color;
|
10
|
+
@include filter-gradient($grad-1, $base-color, vertical); // IE6-9
|
11
|
+
@include background-image(linear-gradient(top, $grad-1 0%,$base-color 75%));
|
12
|
+
|
13
|
+
border: 1px solid $dark-color;
|
14
|
+
|
15
|
+
@include button-default;
|
16
|
+
|
17
|
+
@if $text-shadow == true {
|
18
|
+
text-shadow: 0px 1px 3px transparentize($dark-color, 0.5);
|
19
|
+
}
|
20
|
+
@if $box-shadow == true {
|
21
|
+
box-shadow: 0 em(2) em(6) em(0) $shadow-color, $highlight-color 0 1px 0 inset;
|
22
|
+
}
|
23
|
+
|
24
|
+
&:hover {
|
25
|
+
$base-color: darken($base-color, 10%);
|
26
|
+
$grad-1: darken($grad-1, 10%);
|
27
|
+
background-color: $base-color;
|
28
|
+
@include filter-gradient($grad-1, $base-color, vertical); // IE6-9
|
29
|
+
@include background-image(linear-gradient(top, $grad-1 0%,$base-color 75%));
|
30
|
+
}
|
31
|
+
|
32
|
+
@media #{$mobile} {
|
33
|
+
width: 100%;
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
// gloss-default
|
2
|
+
// -----------------------------------------------------------
|
3
|
+
@mixin gloss-default ($color: $button-color, $text-shadow: $button-text-shadow, $box-shadow: $button-box-shadow) {
|
4
|
+
$base-color: $color;
|
5
|
+
$grad-1: $base-color;
|
6
|
+
$grad-2: lighten($base-color, 15%);
|
7
|
+
$grad-3: lighten($base-color, 3%);
|
8
|
+
$grad-4: lighten($base-color, 30%);
|
9
|
+
$dark-color: darken($base-color, 5%);
|
10
|
+
|
11
|
+
@include button-default;
|
12
|
+
|
13
|
+
background-color: $base-color; // Old browsers
|
14
|
+
@include filter-gradient($grad-1, $grad-4, vertical); // IE6-9
|
15
|
+
@include background-image(linear-gradient(top, $grad-1 0%,$grad-2 50%,$grad-3 51%,$grad-4 100%));
|
16
|
+
border: 1px solid $dark-color;
|
17
|
+
|
18
|
+
@if $text-shadow == true {
|
19
|
+
text-shadow: 0px 3px 3px $dark-color;
|
20
|
+
}
|
21
|
+
@if $box-shadow == true {
|
22
|
+
box-shadow: 0 em(2) em(6) em(0) $shadow-color;
|
23
|
+
}
|
24
|
+
|
25
|
+
&:hover {
|
26
|
+
$base-color: darken($base-color, 10%);
|
27
|
+
$grad-1: darken($grad-1, 10%);
|
28
|
+
$grad-2: darken($grad-2, 10%);
|
29
|
+
$grad-3: darken($grad-3, 10%);
|
30
|
+
$grad-4: darken($grad-4, 10%);
|
31
|
+
background-color: $base-color; // Old browsers
|
32
|
+
@include filter-gradient($grad-1, $grad-4, vertical); // IE6-9
|
33
|
+
@include background-image(linear-gradient(top, $grad-1 0%,$grad-2 50%,$grad-3 51%,$grad-4 100%));
|
34
|
+
}
|
35
|
+
|
36
|
+
@media #{$mobile} {
|
37
|
+
width: 100%;
|
38
|
+
}
|
39
|
+
}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
// shiny-default
|
2
|
+
// -----------------------------------------------------------
|
3
|
+
@mixin shiny-default ($color: $button-color, $text-shadow: $button-text-shadow, $box-shadow: $button-box-shadow){
|
4
|
+
$base-color: $color;
|
5
|
+
$grad-1: lighten($base-color, 30%);
|
6
|
+
$grad-3: darken($base-color, 15%);
|
7
|
+
$dark-color: darken($base-color, 10%);
|
8
|
+
$highlight-color: lighten($base-color, 80%);
|
9
|
+
|
10
|
+
background-color: $base-color;
|
11
|
+
@include filter-gradient($grad-1, $grad-3, vertical); // IE6-9
|
12
|
+
@include background-image(linear-gradient(top, $grad-1 0%,$base-color 50%,$grad-3 100%));
|
13
|
+
|
14
|
+
border: 1px solid $dark-color;
|
15
|
+
|
16
|
+
@include button-default;
|
17
|
+
|
18
|
+
@if $text-shadow == true {
|
19
|
+
text-shadow: 0px 3px 1px $dark-color;
|
20
|
+
}
|
21
|
+
@if $box-shadow == true {
|
22
|
+
box-shadow: 0 em(2) em(6) em(0) $shadow-color, $highlight-color 0 1px 0 inset;
|
23
|
+
}
|
24
|
+
|
25
|
+
&:hover {
|
26
|
+
$base-color: darken($base-color, 10%);
|
27
|
+
$grad-1: darken($grad-1, 10%);
|
28
|
+
$grad-3: darken($grad-3, 10%);
|
29
|
+
background-color: $base-color;
|
30
|
+
@include filter-gradient($grad-1, $grad-3, vertical); // IE6-9
|
31
|
+
@include background-image(linear-gradient(top, $grad-1 0%,$base-color 50%,$grad-3 100%));
|
32
|
+
}
|
33
|
+
|
34
|
+
@media #{$mobile} {
|
35
|
+
width: 100%;
|
36
|
+
}
|
37
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin three-dee ($color: $button-color, $text-shadow: $button-text-shadow, $box-shadow: $button-box-shadow){
|
2
|
+
$base-color: $color;
|
3
|
+
$grad-1: darken($base-color, 30%);
|
4
|
+
$dark-color: darken($base-color, 20%);
|
5
|
+
$highlight-color: lighten($base-color, 50%);
|
6
|
+
|
7
|
+
background-color: $base-color; // Old browsers
|
8
|
+
@include filter-gradient($base-color, $base-color, vertical); // IE6-9
|
9
|
+
@include background-image(linear-gradient(top, $base-color 0%,$grad-1 50%,$base-color 100%));
|
10
|
+
|
11
|
+
border: 1px solid $dark-color;
|
12
|
+
|
13
|
+
@include button-default;
|
14
|
+
|
15
|
+
@if $text-shadow == true {
|
16
|
+
text-shadow: 0px 1px 3px transparentize($dark-color, 0.5);
|
17
|
+
}
|
18
|
+
@if $box-shadow == true {
|
19
|
+
box-shadow: 0 em(2) em(6) em(0) $shadow-color, $highlight-color 0 1px 0 inset;
|
20
|
+
}
|
21
|
+
|
22
|
+
&:hover {
|
23
|
+
$base-color: darken($base-color, 10%);
|
24
|
+
$grad-1: darken($grad-1, 10%);
|
25
|
+
background-color: $base-color; // Old browsers
|
26
|
+
@include filter-gradient($base-color, $base-color, vertical); // IE6-9
|
27
|
+
@include background-image(linear-gradient(top, $base-color 0%,$grad-1 50%,$base-color 100%));
|
28
|
+
}
|
29
|
+
|
30
|
+
@media #{$mobile} {
|
31
|
+
width: 100%;
|
32
|
+
}
|
33
|
+
}
|
@@ -59,6 +59,14 @@ $border_color: $charlie_gray !default;
|
|
59
59
|
|
60
60
|
// Config defaults for buttons
|
61
61
|
// -----------------------------------------------------------------------------
|
62
|
-
$
|
62
|
+
$button-color: $delta-color !default;
|
63
63
|
$secondary_button_border_color: $bravo_gray !default;
|
64
64
|
$button_text: $white !default;
|
65
|
+
|
66
|
+
// Depricated variable
|
67
|
+
$primary_button_border_color: $bravo_color !default;
|
68
|
+
|
69
|
+
|
70
|
+
|
71
|
+
|
72
|
+
|
@@ -77,6 +77,8 @@
|
|
77
77
|
}
|
78
78
|
|
79
79
|
|
80
|
+
// To add new colors to the extended color loops below, simply add to the appropiate list
|
81
|
+
|
80
82
|
// Standard grayscale objects - in color view
|
81
83
|
// ----------------------------------------------
|
82
84
|
$color_names: alpha_gray
|
@@ -162,20 +164,57 @@ echo_color_juliet;
|
|
162
164
|
/////// semantic color blocks ////////
|
163
165
|
// ----------------------------------------------
|
164
166
|
// Typography, borders, rules and shadows
|
165
|
-
$color_names:
|
167
|
+
$color_names:
|
168
|
+
white
|
169
|
+
primary_header_color
|
170
|
+
primary_text
|
171
|
+
secondary_text href_color
|
172
|
+
shadow_color border_color
|
173
|
+
standard_hr_color
|
174
|
+
standard_border_color;
|
166
175
|
@include extend_color_loop;
|
167
176
|
|
168
177
|
|
169
178
|
/////// Config defaults for forms ///////
|
170
179
|
// ----------------------------------------------
|
171
|
-
$color_names:
|
180
|
+
$color_names:
|
181
|
+
alert_background_color
|
182
|
+
primary_button_border_color
|
183
|
+
secondary_button_border_color
|
184
|
+
button_text
|
185
|
+
input_disabled
|
186
|
+
input_disabled_bkg
|
187
|
+
input_disabled_border
|
188
|
+
input_disabled_text
|
189
|
+
form_field_background_color
|
190
|
+
form_field_focus_color
|
191
|
+
form_field_fail_bkg
|
192
|
+
form_field_border
|
193
|
+
form_field_border_fail
|
194
|
+
form_field_focus_border_color
|
195
|
+
form_field_text_fail
|
196
|
+
form_label_color
|
197
|
+
optional_field_text_color
|
198
|
+
instructional_text
|
199
|
+
placeholder_text
|
200
|
+
inline_alert_bkg_color
|
201
|
+
inline_alert_text_color;
|
172
202
|
@include extend_color_loop;
|
173
203
|
|
174
204
|
/////// Config defaults for buttons ///////
|
175
205
|
// ----------------------------------------------
|
176
|
-
$color_names:
|
206
|
+
$color_names:
|
207
|
+
button_color
|
208
|
+
primary_button_border_color
|
209
|
+
secondary_button_border_color
|
210
|
+
button_text;
|
177
211
|
@include extend_color_loop;
|
178
212
|
|
179
213
|
// HTML5 colors
|
180
|
-
$color_names:
|
214
|
+
$color_names:
|
215
|
+
webkit_tap_hightlight
|
216
|
+
ins_color
|
217
|
+
selection_color
|
218
|
+
selection_text_color
|
219
|
+
mark_color;
|
181
220
|
@include extend_color_loop;
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: stipe
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.5.
|
4
|
+
version: 0.0.5.7
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -63,9 +63,12 @@ files:
|
|
63
63
|
- stylesheets/stipe/_stipe.scss
|
64
64
|
- stylesheets/stipe/_typography.scss
|
65
65
|
- stylesheets/stipe/buttons/_extends.scss
|
66
|
-
- stylesheets/stipe/buttons/
|
67
|
-
- stylesheets/stipe/buttons/
|
68
|
-
- stylesheets/stipe/buttons/lib/
|
66
|
+
- stylesheets/stipe/buttons/_mixins.scss
|
67
|
+
- stylesheets/stipe/buttons/buttons.md
|
68
|
+
- stylesheets/stipe/buttons/lib/_flat-default.scss
|
69
|
+
- stylesheets/stipe/buttons/lib/_gloss-default.scss
|
70
|
+
- stylesheets/stipe/buttons/lib/_shiny-default.scss
|
71
|
+
- stylesheets/stipe/buttons/lib/_three-dee.scss
|
69
72
|
- stylesheets/stipe/color/_color_math.scss
|
70
73
|
- stylesheets/stipe/color/_default_color_palette.scss
|
71
74
|
- stylesheets/stipe/color/_extends_deprecated.scss
|
@@ -1,63 +0,0 @@
|
|
1
|
-
$cupid_background: #7fbf4d !default;
|
2
|
-
$cupid_gradient: $cupid_background 0%, #63a62f 100% !default;
|
3
|
-
$cupid_background_hover: darken($cupid_background, 4) !default;
|
4
|
-
$cupid_gradient_hover: $cupid_background_hover 0%, #5e9e2e 100% !default;
|
5
|
-
$cupid_border_color: #63a62f #63a62f #5b992b #63a62f !default;
|
6
|
-
$cupid_border_radius: em(3) !default;
|
7
|
-
$cupid_inset_box_shadow: #96ca6d !default;
|
8
|
-
$cupid_inset_box_shadow_hover: #8dbf67 !default;
|
9
|
-
$cupid_inset_box_shadow_active: #548c29 !default;
|
10
|
-
$cupid_text_color: #fff !default;
|
11
|
-
$cupid_text_weight: bold !default;
|
12
|
-
$cupid_font_family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif !default;
|
13
|
-
$cupid_font_size: 1.3em !default;
|
14
|
-
$cupid_padding: em(7) 0 em(8) 0 !default;
|
15
|
-
$cupid_text_shadow_color: #4c9021 !default;
|
16
|
-
$cupid_width: em(150) !default;
|
17
|
-
|
18
|
-
%cupid-green {
|
19
|
-
@include linear_gradient_w3c ($cupid_background, #{$cupid_gradient});
|
20
|
-
border-width: 1px;
|
21
|
-
border-style: solid;
|
22
|
-
border-color: $cupid_border_color;
|
23
|
-
@include border_radius($cupid_border_radius);
|
24
|
-
@include box_shadow(inset 0 1px 0 0, $cupid_inset_box_shadow);
|
25
|
-
color: $cupid_text_color;
|
26
|
-
font: $cupid_text_weight $cupid_font_size #{$cupid_font_family};
|
27
|
-
line-height: 1em;
|
28
|
-
padding: $cupid_padding;
|
29
|
-
text-align: center;
|
30
|
-
text-shadow: 0 -1px 0 $cupid_text_shadow_color;
|
31
|
-
width: $cupid_width;
|
32
|
-
@media #{$mobile} {
|
33
|
-
width: 100%;
|
34
|
-
line-height: 1.3em;
|
35
|
-
}
|
36
|
-
&:hover {
|
37
|
-
@include linear_gradient_w3c ($cupid_background_hover, #{$cupid_gradient_hover});
|
38
|
-
@include box_shadow(inset 0 1px 0 0, $cupid_inset_box_shadow_hover);
|
39
|
-
cursor: pointer;
|
40
|
-
}
|
41
|
-
&:active {
|
42
|
-
border-width: 1px;
|
43
|
-
border-style: solid;
|
44
|
-
border-color: darken(nth($cupid_border_color, 4), 5);
|
45
|
-
@include box_shadow(inset 0 0 8px 4px, $cupid_inset_box_shadow_active);
|
46
|
-
}
|
47
|
-
&[disabled] {
|
48
|
-
background: transparentize($cupid_background, 0.5);
|
49
|
-
border-color: transparentize($cupid_background, 0.5);
|
50
|
-
color: transparentize($cupid_text_color, 0.5);
|
51
|
-
}
|
52
|
-
}
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
@@ -1,45 +0,0 @@
|
|
1
|
-
$minimal_background: #e3e3e3 !default;
|
2
|
-
$minimal_border_color: #bbb !default;
|
3
|
-
$minimal_border_radius: em(3) !default;
|
4
|
-
$minimal_inset_shadow_color: #f6f6f6 !default;
|
5
|
-
$minimal_font_color: #333 !default;
|
6
|
-
$minimal_font_weight: bold !default;
|
7
|
-
$minimal_font_size: em(12) !default;
|
8
|
-
$minimal_font_family: $primary_font_family !default;
|
9
|
-
$minimal_padding: em(8) 0 em(9) !default;
|
10
|
-
$minimal_text_shadow: 0 1px 0 #fff !default;
|
11
|
-
$minimal_width: em(150) !default;
|
12
|
-
|
13
|
-
|
14
|
-
%minimal {
|
15
|
-
background: $minimal_background;
|
16
|
-
border: 1px solid $minimal_border_color;
|
17
|
-
@include border_radius($minimal_border_radius);
|
18
|
-
@include box_shadow(inset 0 0 1px 1px, $minimal_inset_shadow_color);
|
19
|
-
color: $minimal_font_color;
|
20
|
-
font: $minimal_font_weight $minimal_font_size #{$minimal_font_family};
|
21
|
-
line-height: 1em;
|
22
|
-
padding: $minimal_padding;
|
23
|
-
text-align: center;
|
24
|
-
text-shadow: $minimal_text_shadow;
|
25
|
-
width: $minimal_width;
|
26
|
-
@media #{$mobile} {
|
27
|
-
width: 100%;
|
28
|
-
line-height: 1.3em;
|
29
|
-
}
|
30
|
-
&:hover {
|
31
|
-
background: darken($minimal_background, 5);
|
32
|
-
@include box_shadow(inset 0 0 1px 1px, darken($minimal_inset_shadow_color, 5));
|
33
|
-
color: darken($minimal_font_color, 7);
|
34
|
-
cursor: pointer;
|
35
|
-
}
|
36
|
-
&:active {
|
37
|
-
background: darken($minimal_background, 8);
|
38
|
-
@include box_shadow(inset 0 0 1px 1px, darken($minimal_inset_shadow_color, 5));
|
39
|
-
}
|
40
|
-
&[disabled] {
|
41
|
-
background: transparentize($minimal_background, 0.5);
|
42
|
-
border-color: transparentize($minimal_background, 0.5);
|
43
|
-
color: transparentize($minimal_font_color, 0.5);
|
44
|
-
}
|
45
|
-
}
|