icon-buttons 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +1 -0
- data/lib/icon-buttons.rb +3 -0
- data/stylesheets/_icon-buttons.scss +3 -0
- data/stylesheets/icon-buttons/_base.scss +146 -0
- data/templates/project/_buttons.scss +44 -0
- data/templates/project/buttons.html +18 -0
- data/templates/project/manifest.rb +16 -0
- data/templates/project/silk/accept.png +0 -0
- data/templates/project/silk/add.png +0 -0
- metadata +87 -0
data/README.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
This Compass plugin provides some easy to use mixins for creating buttons with icons.
|
data/lib/icon-buttons.rb
ADDED
@@ -0,0 +1,146 @@
|
|
1
|
+
@import "compass/utilities/general/clearfix";
|
2
|
+
@import "compass/css3/border-radius";
|
3
|
+
@import "compass/css3/box-shadow";
|
4
|
+
@import "compass/css3/images";
|
5
|
+
|
6
|
+
// Some sane defaults
|
7
|
+
$button-padding: 5px !default; // Space from border to icon and text to border
|
8
|
+
$icon-right-margin: 5px !default; // Space between icon and text
|
9
|
+
$gradient-percentage: 10% !default; // Difference between the gradient colors
|
10
|
+
|
11
|
+
|
12
|
+
@mixin single-line-icon-button($icon-size : 16px, $font-size: 12px, $icon-class : ".icon",
|
13
|
+
$text-class : ".text", $gradient-base-color: #f7f7f7) {
|
14
|
+
|
15
|
+
@include default-button-styles($gradient-base-color);
|
16
|
+
|
17
|
+
// Instead of line-height: normal we'll set it to 1.2. This should be sufficient for most fonts.
|
18
|
+
// See this excellent piece from Eric Meyer for the reasons why line-height: normal is abnormal:
|
19
|
+
// http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
|
20
|
+
$line-height: 1.25;
|
21
|
+
$icon-margin: 0;
|
22
|
+
|
23
|
+
@if $icon-size > $font-size {
|
24
|
+
// Make the text height equal to the icon height for proper vertical alignment
|
25
|
+
$line-height: $icon-size;
|
26
|
+
} @else {
|
27
|
+
// Make the total icon height equal to the text height for proper vertical alignment
|
28
|
+
#{$icon-class} {
|
29
|
+
$icon-margin: (($line-height * $font-size) - $icon-size) / 2;
|
30
|
+
margin-top: $icon-margin;
|
31
|
+
margin-bottom: $icon-margin;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
#{$icon-class} {
|
36
|
+
margin-right: $icon-right-margin;
|
37
|
+
height: $icon-size;
|
38
|
+
width: $icon-size;
|
39
|
+
display: block;
|
40
|
+
float: left;
|
41
|
+
}
|
42
|
+
|
43
|
+
#{$text-class} {
|
44
|
+
line-height: $line-height;
|
45
|
+
font-size: $font-size;
|
46
|
+
display: block;
|
47
|
+
float: left;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
@mixin multi-line-icon-button($icon-size : 16px, $font-size-line1: 16px, $font-size-line2: 10px,
|
52
|
+
$icon-class : ".icon", $text-line1-class : ".line1", $text-line2-class : ".line2", $gradient-base-color: #f7f7f7) {
|
53
|
+
|
54
|
+
@include default-button-styles($gradient-base-color);
|
55
|
+
|
56
|
+
$margin-between-text: 5px !default;
|
57
|
+
$line-height-line1: 1.25;
|
58
|
+
$line-height-line2: 1.25;
|
59
|
+
|
60
|
+
$total-text-height: $line-height-line1 * $font-size-line1 + $line-height-line2 * $font-size-line2;
|
61
|
+
@if $icon-size > $total-text-height {
|
62
|
+
// Make the text height equal to the icon height for proper vertical alignment
|
63
|
+
$text-margin: ($icon-size - $total-text-height) / 2;
|
64
|
+
#{$text-line1-class} {
|
65
|
+
margin-top: $text-margin;
|
66
|
+
}
|
67
|
+
#{$text-line2-class} {
|
68
|
+
margin-bottom: $text-margin;
|
69
|
+
}
|
70
|
+
} @else {
|
71
|
+
// Make the total icon height equal to the total text height for proper vertical alignment
|
72
|
+
#{$icon-class} {
|
73
|
+
$icon-margin: ($total-text-height - $icon-size) / 2;
|
74
|
+
margin-top: $icon-margin;
|
75
|
+
margin-bottom: $icon-margin;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
#{$icon-class} {
|
80
|
+
margin-right: $icon-right-margin;
|
81
|
+
line-height: $line-height-line1;
|
82
|
+
height: $icon-size;
|
83
|
+
width: $icon-size;
|
84
|
+
display: block;
|
85
|
+
float: left;
|
86
|
+
}
|
87
|
+
|
88
|
+
#{$text-line1-class} {
|
89
|
+
margin-left: $icon-size + $icon-right-margin;
|
90
|
+
margin-bottom: $margin-between-text;
|
91
|
+
font-size: $font-size-line1;
|
92
|
+
white-space: nowrap;
|
93
|
+
display: block;
|
94
|
+
}
|
95
|
+
|
96
|
+
#{$text-line2-class} {
|
97
|
+
margin-left: $icon-size + $icon-right-margin;
|
98
|
+
line-height: $line-height-line2;
|
99
|
+
font-size: $font-size-line2;
|
100
|
+
white-space: nowrap;
|
101
|
+
display: block;
|
102
|
+
}
|
103
|
+
}
|
104
|
+
|
105
|
+
@mixin default-button-styles($gradient-base-color: #f7f7f7, $border-color: #ccc, $text-color: #000) {
|
106
|
+
|
107
|
+
$normal-gradient-start-color: $gradient-base-color;
|
108
|
+
$normal-gradient-stop-color: darken($gradient-base-color, $gradient-percentage);
|
109
|
+
$hover-gradient-start-color: $gradient-base-color;
|
110
|
+
$hover-gradient-stop-color: darken($gradient-base-color, $gradient-percentage * 2);
|
111
|
+
$active-gradient-start-color: darken($gradient-base-color, $gradient-percentage * 2);
|
112
|
+
$active-gradient-stop-color: $gradient-base-color;
|
113
|
+
|
114
|
+
text-decoration: none;
|
115
|
+
padding: $button-padding;
|
116
|
+
-moz-box-sizing: border-box !important;
|
117
|
+
display: inline-block;
|
118
|
+
|
119
|
+
border: 1px solid $border-color;
|
120
|
+
@include border-radius(3px);
|
121
|
+
|
122
|
+
background: $normal-gradient-start-color;
|
123
|
+
@include filter-gradient($normal-gradient-start-color, $normal-gradient-stop-color);
|
124
|
+
@include background-image(linear-gradient($normal-gradient-start-color, $normal-gradient-stop-color));
|
125
|
+
|
126
|
+
@include box-shadow(inset rgba(255,255,255,0.5) 0 1px 0);
|
127
|
+
|
128
|
+
color: $text-color;
|
129
|
+
cursor: pointer;
|
130
|
+
outline: none !important;
|
131
|
+
|
132
|
+
&:hover,
|
133
|
+
&:focus {
|
134
|
+
border: 1px solid darken($gradient-base-color, $gradient-percentage * 3.025);;
|
135
|
+
background: darken($gradient-base-color, $gradient-percentage / 2);
|
136
|
+
@include filter-gradient($hover-gradient-start-color, $hover-gradient-stop-color);
|
137
|
+
@include background-image(linear-gradient($hover-gradient-start-color, $hover-gradient-stop-color));
|
138
|
+
}
|
139
|
+
|
140
|
+
&:active,
|
141
|
+
&.active {
|
142
|
+
background: darken($gradient-base-color, $gradient-percentage * 1.25);
|
143
|
+
@include filter-gradient($active-gradient-start-color, $active-gradient-stop-color);
|
144
|
+
@include background-image(linear-gradient($active-gradient-start-color, $active-gradient-stop-color));
|
145
|
+
}
|
146
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
@import "icon-buttons";
|
2
|
+
|
3
|
+
/*
|
4
|
+
* This is where you combine compass-icon-buttons with the spriting magic of Compass
|
5
|
+
*
|
6
|
+
* See http://compass-style.org/help/tutorials/spriting/ for more info on spriting
|
7
|
+
*
|
8
|
+
* We're using the famous famfamfam silk icons here. See http://www.famfamfam.com/lab/icons/silk/
|
9
|
+
*/
|
10
|
+
@import "silk/*.png";
|
11
|
+
@include all-silk-sprites;
|
12
|
+
|
13
|
+
/*
|
14
|
+
* Here we'll mix it with our own styles
|
15
|
+
*
|
16
|
+
* First up: the single line buttons
|
17
|
+
*/
|
18
|
+
.single-button-default {
|
19
|
+
@include single-line-icon-button();
|
20
|
+
}
|
21
|
+
.single-button-huge {
|
22
|
+
// Font-size larger than icon-size
|
23
|
+
// Calling the mixin with just values (1st is icon-size, 2nd is font-size)
|
24
|
+
@include single-line-icon-button(16px, 24px);
|
25
|
+
|
26
|
+
// Define custom styles to override the defaults
|
27
|
+
padding-left: 10px;
|
28
|
+
padding-right: 10px;
|
29
|
+
}
|
30
|
+
/*
|
31
|
+
* Then, some multi line buttons
|
32
|
+
*/
|
33
|
+
.multi-button-default {
|
34
|
+
@include multi-line-icon-button();
|
35
|
+
}
|
36
|
+
.multi-button-huge {
|
37
|
+
@include multi-line-icon-button(16px, 24px, 15px);
|
38
|
+
// Define custom styles to override the defaults for this instance
|
39
|
+
padding-left: 10px;
|
40
|
+
padding-right: 10px;
|
41
|
+
.icon {
|
42
|
+
margin-right: 10px;
|
43
|
+
}
|
44
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
<a href="#" class="single-button-default" title="accept">
|
2
|
+
<span class="icon silk-accept"></span>
|
3
|
+
<span class="text">Accept</span>
|
4
|
+
</a>
|
5
|
+
<a href="#" class="single-button-huge" title="accept">
|
6
|
+
<span class="icon silk-accept"></span>
|
7
|
+
<span class="text">Accept</span>
|
8
|
+
</a>
|
9
|
+
<a href="#" class="multi-button-default" title="accept">
|
10
|
+
<span class="icon silk-accept"></span>
|
11
|
+
<span class="line1">Order now!</span>
|
12
|
+
<span class="line2">and save 25%</span>
|
13
|
+
</a>
|
14
|
+
<a href="#" class="multi-button-huge" title="accept">
|
15
|
+
<span class="icon silk-accept"></span>
|
16
|
+
<span class="line1">Order now!</span>
|
17
|
+
<span class="line2">and save 25%</span>
|
18
|
+
</a>
|
@@ -0,0 +1,16 @@
|
|
1
|
+
description "buttons with sprited icons, create single line or multi line buttons with ease."
|
2
|
+
|
3
|
+
stylesheet '_buttons.scss', :media => 'screen, projection'
|
4
|
+
html 'buttons.html'
|
5
|
+
image 'silk/accept.png'
|
6
|
+
image 'silk/add.png'
|
7
|
+
|
8
|
+
help %Q{
|
9
|
+
Installs some html, a stylesheet partial and some images that
|
10
|
+
you can use directly or refer to as an example.
|
11
|
+
}
|
12
|
+
|
13
|
+
welcome_message %Q{
|
14
|
+
In buttons.html you will find some example markup for the icon buttons. In the stylesheet partial you can see how to
|
15
|
+
use the library and apply it to your markup.
|
16
|
+
}
|
Binary file
|
Binary file
|
metadata
ADDED
@@ -0,0 +1,87 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: icon-buttons
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
hash: 29
|
5
|
+
prerelease:
|
6
|
+
segments:
|
7
|
+
- 0
|
8
|
+
- 0
|
9
|
+
- 1
|
10
|
+
version: 0.0.1
|
11
|
+
platform: ruby
|
12
|
+
authors:
|
13
|
+
- Leon de Rijke
|
14
|
+
autorequire:
|
15
|
+
bindir: bin
|
16
|
+
cert_chain: []
|
17
|
+
|
18
|
+
date: 2011-12-07 00:00:00 Z
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
name: compass
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
none: false
|
25
|
+
requirements:
|
26
|
+
- - ">="
|
27
|
+
- !ruby/object:Gem::Version
|
28
|
+
hash: 29
|
29
|
+
segments:
|
30
|
+
- 0
|
31
|
+
- 11
|
32
|
+
version: "0.11"
|
33
|
+
type: :runtime
|
34
|
+
version_requirements: *id001
|
35
|
+
description: icon buttons for compass
|
36
|
+
email: leon@leonderijke.nl
|
37
|
+
executables: []
|
38
|
+
|
39
|
+
extensions: []
|
40
|
+
|
41
|
+
extra_rdoc_files: []
|
42
|
+
|
43
|
+
files:
|
44
|
+
- README.md
|
45
|
+
- lib/icon-buttons.rb
|
46
|
+
- stylesheets/_icon-buttons.scss
|
47
|
+
- stylesheets/icon-buttons/_base.scss
|
48
|
+
- templates/project/_buttons.scss
|
49
|
+
- templates/project/buttons.html
|
50
|
+
- templates/project/manifest.rb
|
51
|
+
- templates/project/silk/accept.png
|
52
|
+
- templates/project/silk/add.png
|
53
|
+
homepage: http://www.leonderijke.nl/
|
54
|
+
licenses: []
|
55
|
+
|
56
|
+
post_install_message:
|
57
|
+
rdoc_options: []
|
58
|
+
|
59
|
+
require_paths:
|
60
|
+
- lib
|
61
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
62
|
+
none: false
|
63
|
+
requirements:
|
64
|
+
- - ">="
|
65
|
+
- !ruby/object:Gem::Version
|
66
|
+
hash: 3
|
67
|
+
segments:
|
68
|
+
- 0
|
69
|
+
version: "0"
|
70
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
71
|
+
none: false
|
72
|
+
requirements:
|
73
|
+
- - ">="
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
hash: 3
|
76
|
+
segments:
|
77
|
+
- 0
|
78
|
+
version: "0"
|
79
|
+
requirements: []
|
80
|
+
|
81
|
+
rubyforge_project:
|
82
|
+
rubygems_version: 1.8.11
|
83
|
+
signing_key:
|
84
|
+
specification_version: 3
|
85
|
+
summary: icon buttons for compass
|
86
|
+
test_files: []
|
87
|
+
|