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 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
- $primary_button_border_color: $bravo_color !default;
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: white primary_header_color primary_text secondary_text href_color shadow_color border_color standard_hr_color standard_border_color;
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: alert_background_color primary_button_border_color secondary_button_border_color button_text input_disabled input_disabled_bkg input_disabled_border input_disabled_text form_field_background_color form_field_focus_color form_field_fail_bkg form_field_border form_field_border_fail form_field_focus_border_color form_field_text_fail form_label_color optional_field_text_color instructional_text placeholder_text inline_alert_bkg_color inline_alert_text_color;
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: primary_button_border_color secondary_button_border_color button_text;
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: webkit_tap_hightlight ins_color selection_color selection_text_color mark_color;
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.6
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/doc-src/buttons.md
67
- - stylesheets/stipe/buttons/lib/_cupid-green.scss
68
- - stylesheets/stipe/buttons/lib/_minimal.scss
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,3 +0,0 @@
1
- #Buttons
2
-
3
- Instructions as how to use pre-fab buttons and how to make your own.
@@ -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
- }