meedan-bootstrap 0.0.3
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.mkdn +7 -0
- data/lib/meedan-bootstrap.rb +3 -0
- data/stylesheets/_autorefresh.scss +3 -0
- data/stylesheets/_base.scss +29 -0
- data/stylesheets/_bevels.scss +17 -0
- data/stylesheets/_bundles.scss +46 -0
- data/stylesheets/_buttons.scss +34 -0
- data/stylesheets/_cab.scss +91 -0
- data/stylesheets/_calendar.scss +69 -0
- data/stylesheets/_colors.scss +93 -0
- data/stylesheets/_desk.scss +333 -0
- data/stylesheets/_forms.scss +109 -0
- data/stylesheets/_icons.scss +304 -0
- data/stylesheets/_labels.scss +64 -0
- data/stylesheets/_media_object.scss +141 -0
- data/stylesheets/_messages.scss +19 -0
- data/stylesheets/_navigation.scss +30 -0
- data/stylesheets/_pagination.scss +20 -0
- data/stylesheets/_pointer.scss +14 -0
- data/stylesheets/_profile.scss +25 -0
- data/stylesheets/_reset.scss +12 -0
- data/stylesheets/_respond_to.scss +24 -0
- data/stylesheets/_syntax.scss +205 -0
- data/stylesheets/_tables.scss +18 -0
- data/stylesheets/_tabs.scss +29 -0
- data/stylesheets/_tooltips.scss +180 -0
- data/stylesheets/_typography.scss +163 -0
- data/stylesheets/meedan_bootstrap.scss +51 -0
- data/templates/project/foo_theme/starter-theme.scss +85 -0
- data/templates/project/foo_theme/style-ar.scss +2 -0
- data/templates/project/foo_theme/style-en.scss +2 -0
- data/templates/project/manifest.rb +15 -0
- metadata +109 -0
@@ -0,0 +1,109 @@
|
|
1
|
+
|
2
|
+
// Default form -- include this in themes
|
3
|
+
@mixin default-form($form-cols: $primary-cols - 2, $context: $primary-cols) {
|
4
|
+
@include form-layout($form-cols, $context);
|
5
|
+
}
|
6
|
+
|
7
|
+
// Main form layout
|
8
|
+
@mixin form-layout($form-cols, $context) {
|
9
|
+
@include columns($form-cols, $context);
|
10
|
+
@include leader-and-trailer(1, $medium-font-size);
|
11
|
+
@include leader-and-trailer(1, $medium-font-size, 1);
|
12
|
+
|
13
|
+
h3 {
|
14
|
+
@include adjust-font-size-to($large-font-size);
|
15
|
+
color: $darker-gray;
|
16
|
+
text-transform: uppercase;
|
17
|
+
}
|
18
|
+
|
19
|
+
section:hover {
|
20
|
+
h3 {
|
21
|
+
color: $form-primary-accent;
|
22
|
+
}
|
23
|
+
label {
|
24
|
+
color: black;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
// optionally put form elements inside a .row
|
29
|
+
.row {
|
30
|
+
padding: rhythm(0.5);
|
31
|
+
background: $light-gray;
|
32
|
+
}
|
33
|
+
|
34
|
+
label {
|
35
|
+
display: inline;
|
36
|
+
line-height: 1.5;
|
37
|
+
color: $darker-gray;
|
38
|
+
}
|
39
|
+
|
40
|
+
section {
|
41
|
+
@include columns($form-cols - 4, $form-cols);
|
42
|
+
float: $from-direction;
|
43
|
+
clear: none;
|
44
|
+
|
45
|
+
// include a leader but not on the first one
|
46
|
+
@include leader(1, $medium-font-size, margin);
|
47
|
+
&:first-child {
|
48
|
+
margin-top: 0;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
// bevels but not on the first and last ones
|
53
|
+
@include bevels;
|
54
|
+
|
55
|
+
// collections of radios or checkboxes
|
56
|
+
fieldset {
|
57
|
+
label {
|
58
|
+
float: $from-direction;
|
59
|
+
clear: both;
|
60
|
+
@include leader(0.5, $small-font-size);
|
61
|
+
@include en-sans-font-stack;
|
62
|
+
background-color: $dark-gray;
|
63
|
+
@include border-radius(4px);
|
64
|
+
padding: 1%;
|
65
|
+
float: $from-direction;
|
66
|
+
clear: none;
|
67
|
+
margin-#{opposite-position($from-direction)}: 1%;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
legend{ }
|
72
|
+
|
73
|
+
input, textarea {
|
74
|
+
padding: 0.5%;
|
75
|
+
width: 99%;
|
76
|
+
@include adjust-font-size-to($large-font-size);
|
77
|
+
@include en-sans-font-stack;
|
78
|
+
}
|
79
|
+
|
80
|
+
input {
|
81
|
+
|
82
|
+
// submit button
|
83
|
+
&[type=submit] {
|
84
|
+
float: $from-direction;
|
85
|
+
clear: both;
|
86
|
+
@include adjust-font-size-to($large-font-size);
|
87
|
+
@include border-radius(10px);
|
88
|
+
@include leader-and-trailer(1, $large-font-size);
|
89
|
+
width: rhythm(4);
|
90
|
+
}
|
91
|
+
|
92
|
+
}
|
93
|
+
|
94
|
+
textarea {
|
95
|
+
}
|
96
|
+
|
97
|
+
.row {
|
98
|
+
float: $from-direction;
|
99
|
+
clear: both;
|
100
|
+
@include columns($form-cols, $form-cols);
|
101
|
+
button {
|
102
|
+
@include leader(1, $medium-font-size, margin);
|
103
|
+
}
|
104
|
+
input[type="checkbox"], input[type="radio"] {
|
105
|
+
width: rhythm(1);
|
106
|
+
@include omega;
|
107
|
+
}
|
108
|
+
}
|
109
|
+
}
|
@@ -0,0 +1,304 @@
|
|
1
|
+
// Meedan-bootstrap icon mixin
|
2
|
+
// must be called and extend one of the classes below, like:
|
3
|
+
// li { @include icon { @extend .icon-bookmark-empty; } }
|
4
|
+
@mixin icon {
|
5
|
+
@content;
|
6
|
+
&:before {
|
7
|
+
width: 20px;
|
8
|
+
font-family: FontAwesome;
|
9
|
+
font-weight: normal;
|
10
|
+
font-style: normal;
|
11
|
+
display: inline-block;
|
12
|
+
text-decoration: inherit;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
/* Font Awesome ========================================
|
17
|
+
the iconic font designed for use with Twitter Bootstrap
|
18
|
+
-------------------------------------------------------
|
19
|
+
The full suite of pictographic icons, examples, and documentation
|
20
|
+
can be found at: http://fortawesome.github.com/Font-Awesome/
|
21
|
+
|
22
|
+
License
|
23
|
+
-------------------------------------------------------
|
24
|
+
The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
|
25
|
+
http://creativecommons.org/licenses/by/3.0/ A mention of
|
26
|
+
'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
|
27
|
+
source code is considered acceptable attribution (most common on the web).
|
28
|
+
If human readable source code is not available to the end user, a mention in
|
29
|
+
an 'About' or 'Credits' screen is considered acceptable (most common in desktop
|
30
|
+
or mobile software).
|
31
|
+
|
32
|
+
Contact
|
33
|
+
-------------------------------------------------------
|
34
|
+
Email: dave@davegandy.com
|
35
|
+
Twitter: http://twitter.com/fortaweso_me
|
36
|
+
Work: Lead Product Designer @ http://kyruus.com
|
37
|
+
|
38
|
+
*/
|
39
|
+
|
40
|
+
// this setup required by FontAwesome
|
41
|
+
@import "compass/css3/font-face";
|
42
|
+
$font_path: "fontawesome-webfont" !default;
|
43
|
+
|
44
|
+
// end of additions to font awesome
|
45
|
+
|
46
|
+
/* Font Awesome styles
|
47
|
+
------------------------------------------------------- */
|
48
|
+
@include font-face(
|
49
|
+
'FontAwesome',
|
50
|
+
font-files(
|
51
|
+
"#{$font_path}.woff", woff,
|
52
|
+
"#{$font_path}.ttf", truetype,
|
53
|
+
"#{$font_path}.otf", opentype,
|
54
|
+
"#{$font_path}.svgz#FontAwesomeRegular", svg,
|
55
|
+
"#{$font_path}.svg#FontAwesomeRegular", svg),
|
56
|
+
'#{$font_path}.eot',
|
57
|
+
normal,
|
58
|
+
normal
|
59
|
+
);
|
60
|
+
|
61
|
+
[class^="icon-"]:before,
|
62
|
+
[class*=" icon-"]:before
|
63
|
+
{
|
64
|
+
font-family: FontAwesome;
|
65
|
+
font-weight: normal;
|
66
|
+
font-style: normal;
|
67
|
+
display: inline-block;
|
68
|
+
text-decoration: inherit;
|
69
|
+
}
|
70
|
+
|
71
|
+
a [class^="icon-"],
|
72
|
+
a [class*=" icon-"] {
|
73
|
+
display: inline-block;
|
74
|
+
text-decoration: inherit;
|
75
|
+
}
|
76
|
+
|
77
|
+
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
78
|
+
readers do not read off random characters that represent icons */
|
79
|
+
.icon-glass:before { content: "\f000"; }
|
80
|
+
.icon-music:before { content: "\f001"; }
|
81
|
+
.icon-search:before { content: "\f002"; }
|
82
|
+
.icon-envelope:before { content: "\f003"; }
|
83
|
+
.icon-heart:before { content: "\f004"; }
|
84
|
+
.icon-star:before { content: "\f005"; }
|
85
|
+
.icon-star-empty:before { content: "\f006"; }
|
86
|
+
.icon-user:before { content: "\f007"; }
|
87
|
+
.icon-film:before { content: "\f008"; }
|
88
|
+
.icon-th-large:before { content: "\f009"; }
|
89
|
+
.icon-th:before { content: "\f00a"; }
|
90
|
+
.icon-th-list:before { content: "\f00b"; }
|
91
|
+
.icon-ok:before { content: "\f00c"; }
|
92
|
+
.icon-remove:before { content: "\f00d"; }
|
93
|
+
.icon-zoom-in:before { content: "\f00e"; }
|
94
|
+
|
95
|
+
.icon-zoom-out:before { content: "\f010"; }
|
96
|
+
.icon-off:before { content: "\f011"; }
|
97
|
+
.icon-signal:before { content: "\f012"; }
|
98
|
+
.icon-cog:before { content: "\f013"; }
|
99
|
+
.icon-trash:before { content: "\f014"; }
|
100
|
+
.icon-home:before { content: "\f015"; }
|
101
|
+
.icon-file:before { content: "\f016"; }
|
102
|
+
.icon-time:before { content: "\f017"; }
|
103
|
+
.icon-road:before { content: "\f018"; }
|
104
|
+
.icon-download-alt:before { content: "\f019"; }
|
105
|
+
.icon-download:before { content: "\f01a"; }
|
106
|
+
.icon-upload:before { content: "\f01b"; }
|
107
|
+
.icon-inbox:before { content: "\f01c"; }
|
108
|
+
.icon-play-circle:before { content: "\f01d"; }
|
109
|
+
.icon-repeat:before { content: "\f01e"; }
|
110
|
+
|
111
|
+
/* \f020 is not a valid unicode character. all shifted one down */
|
112
|
+
.icon-refresh:before { content: "\f021"; }
|
113
|
+
.icon-list-alt:before { content: "\f022"; }
|
114
|
+
.icon-lock:before { content: "\f023"; }
|
115
|
+
.icon-flag:before { content: "\f024"; }
|
116
|
+
.icon-headphones:before { content: "\f025"; }
|
117
|
+
.icon-volume-off:before { content: "\f026"; }
|
118
|
+
.icon-volume-down:before { content: "\f027"; }
|
119
|
+
.icon-volume-up:before { content: "\f028"; }
|
120
|
+
.icon-qrcode:before { content: "\f029"; }
|
121
|
+
.icon-barcode:before { content: "\f02a"; }
|
122
|
+
.icon-tag:before { content: "\f02b"; }
|
123
|
+
.icon-tags:before { content: "\f02c"; }
|
124
|
+
.icon-book:before { content: "\f02d"; }
|
125
|
+
.icon-bookmark:before { content: "\f02e"; }
|
126
|
+
.icon-print:before { content: "\f02f"; }
|
127
|
+
|
128
|
+
.icon-camera:before { content: "\f030"; }
|
129
|
+
.icon-font:before { content: "\f031"; }
|
130
|
+
.icon-bold:before { content: "\f032"; }
|
131
|
+
.icon-italic:before { content: "\f033"; }
|
132
|
+
.icon-text-height:before { content: "\f034"; }
|
133
|
+
.icon-text-width:before { content: "\f035"; }
|
134
|
+
.icon-align-left:before { content: "\f036"; }
|
135
|
+
.icon-align-center:before { content: "\f037"; }
|
136
|
+
.icon-align-right:before { content: "\f038"; }
|
137
|
+
.icon-align-justify:before { content: "\f039"; }
|
138
|
+
.icon-list:before { content: "\f03a"; }
|
139
|
+
.icon-indent-left:before { content: "\f03b"; }
|
140
|
+
.icon-indent-right:before { content: "\f03c"; }
|
141
|
+
.icon-facetime-video:before { content: "\f03d"; }
|
142
|
+
.icon-picture:before { content: "\f03e"; }
|
143
|
+
|
144
|
+
.icon-pencil:before { content: "\f040"; }
|
145
|
+
.icon-map-marker:before { content: "\f041"; }
|
146
|
+
.icon-adjust:before { content: "\f042"; }
|
147
|
+
.icon-tint:before { content: "\f043"; }
|
148
|
+
.icon-edit:before { content: "\f044"; }
|
149
|
+
.icon-share:before { content: "\f045"; }
|
150
|
+
.icon-check:before { content: "\f046"; }
|
151
|
+
.icon-move:before { content: "\f047"; }
|
152
|
+
.icon-step-backward:before { content: "\f048"; }
|
153
|
+
.icon-fast-backward:before { content: "\f049"; }
|
154
|
+
.icon-backward:before { content: "\f04a"; }
|
155
|
+
.icon-play:before { content: "\f04b"; }
|
156
|
+
.icon-pause:before { content: "\f04c"; }
|
157
|
+
.icon-stop:before { content: "\f04d"; }
|
158
|
+
.icon-forward:before { content: "\f04e"; }
|
159
|
+
|
160
|
+
.icon-fast-forward:before { content: "\f050"; }
|
161
|
+
.icon-step-forward:before { content: "\f051"; }
|
162
|
+
.icon-eject:before { content: "\f052"; }
|
163
|
+
.icon-chevron-left:before { content: "\f053"; }
|
164
|
+
.icon-chevron-right:before { content: "\f054"; }
|
165
|
+
.icon-plus-sign:before { content: "\f055"; }
|
166
|
+
.icon-minus-sign:before { content: "\f056"; }
|
167
|
+
.icon-remove-sign:before { content: "\f057"; }
|
168
|
+
.icon-ok-sign:before { content: "\f058"; }
|
169
|
+
.icon-question-sign:before { content: "\f059"; }
|
170
|
+
.icon-info-sign:before { content: "\f05a"; }
|
171
|
+
.icon-screenshot:before { content: "\f05b"; }
|
172
|
+
.icon-remove-circle:before { content: "\f05c"; }
|
173
|
+
.icon-ok-circle:before { content: "\f05d"; }
|
174
|
+
.icon-ban-circle:before { content: "\f05e"; }
|
175
|
+
|
176
|
+
.icon-arrow-left:before { content: "\f060"; }
|
177
|
+
.icon-arrow-right:before { content: "\f061"; }
|
178
|
+
.icon-arrow-up:before { content: "\f062"; }
|
179
|
+
.icon-arrow-down:before { content: "\f063"; }
|
180
|
+
.icon-share-alt:before { content: "\f064"; }
|
181
|
+
.icon-resize-full:before { content: "\f065"; }
|
182
|
+
.icon-resize-small:before { content: "\f066"; }
|
183
|
+
.icon-plus:before { content: "\f067"; }
|
184
|
+
.icon-minus:before { content: "\f068"; }
|
185
|
+
.icon-asterisk:before { content: "\f069"; }
|
186
|
+
.icon-exclamation-sign:before { content: "\f06a"; }
|
187
|
+
.icon-gift:before { content: "\f06b"; }
|
188
|
+
.icon-leaf:before { content: "\f06c"; }
|
189
|
+
.icon-fire:before { content: "\f06d"; }
|
190
|
+
.icon-eye-open:before { content: "\f06e"; }
|
191
|
+
|
192
|
+
.icon-eye-close:before { content: "\f070"; }
|
193
|
+
.icon-warning-sign:before { content: "\f071"; }
|
194
|
+
.icon-plane:before { content: "\f072"; }
|
195
|
+
.icon-calendar:before { content: "\f073"; }
|
196
|
+
.icon-random:before { content: "\f074"; }
|
197
|
+
.icon-comment:before { content: "\f075"; }
|
198
|
+
.icon-magnet:before { content: "\f076"; }
|
199
|
+
.icon-chevron-up:before { content: "\f077"; }
|
200
|
+
.icon-chevron-down:before { content: "\f078"; }
|
201
|
+
.icon-retweet:before { content: "\f079"; }
|
202
|
+
.icon-shopping-cart:before { content: "\f07a"; }
|
203
|
+
.icon-folder-close:before { content: "\f07b"; }
|
204
|
+
.icon-folder-open:before { content: "\f07c"; }
|
205
|
+
.icon-resize-vertical:before { content: "\f07d"; }
|
206
|
+
.icon-resize-horizontal:before { content: "\f07e"; }
|
207
|
+
|
208
|
+
.icon-bar-chart:before { content: "\f080"; }
|
209
|
+
.icon-twitter-sign:before { content: "\f081"; }
|
210
|
+
.icon-facebook-sign:before { content: "\f082"; }
|
211
|
+
.icon-camera-retro:before { content: "\f083"; }
|
212
|
+
.icon-key:before { content: "\f084"; }
|
213
|
+
.icon-cogs:before { content: "\f085"; }
|
214
|
+
.icon-comments:before { content: "\f086"; }
|
215
|
+
.icon-thumbs-up:before { content: "\f087"; }
|
216
|
+
.icon-thumbs-down:before { content: "\f088"; }
|
217
|
+
.icon-star-half:before { content: "\f089"; }
|
218
|
+
.icon-heart-empty:before { content: "\f08a"; }
|
219
|
+
.icon-signout:before { content: "\f08b"; }
|
220
|
+
.icon-linkedin-sign:before { content: "\f08c"; }
|
221
|
+
.icon-pushpin:before { content: "\f08d"; }
|
222
|
+
.icon-external-link:before { content: "\f08e"; }
|
223
|
+
|
224
|
+
.icon-signin:before { content: "\f090"; }
|
225
|
+
.icon-trophy:before { content: "\f091"; }
|
226
|
+
.icon-github-sign:before { content: "\f092"; }
|
227
|
+
.icon-upload-alt:before { content: "\f093"; }
|
228
|
+
.icon-lemon:before { content: "\f094"; }
|
229
|
+
.icon-phone:before { content: "\f095"; }
|
230
|
+
.icon-check-empty:before { content: "\f096"; }
|
231
|
+
.icon-bookmark-empty:before { content: "\f097"; }
|
232
|
+
.icon-phone-sign:before { content: "\f098"; }
|
233
|
+
.icon-twitter:before { content: "\f099"; }
|
234
|
+
.icon-facebook:before { content: "\f09a"; }
|
235
|
+
.icon-github:before { content: "\f09b"; }
|
236
|
+
.icon-unlock:before { content: "\f09c"; }
|
237
|
+
.icon-credit-card:before { content: "\f09d"; }
|
238
|
+
.icon-rss:before { content: "\f09e"; }
|
239
|
+
|
240
|
+
.icon-hdd:before { content: "\f0a0"; }
|
241
|
+
.icon-bullhorn:before { content: "\f0a1"; }
|
242
|
+
.icon-bell:before { content: "\f0a2"; }
|
243
|
+
.icon-certificate:before { content: "\f0a3"; }
|
244
|
+
.icon-hand-right:before { content: "\f0a4"; }
|
245
|
+
.icon-hand-left:before { content: "\f0a5"; }
|
246
|
+
.icon-hand-up:before { content: "\f0a6"; }
|
247
|
+
.icon-hand-down:before { content: "\f0a7"; }
|
248
|
+
.icon-circle-arrow-left:before { content: "\f0a8"; }
|
249
|
+
.icon-circle-arrow-right:before { content: "\f0a9"; }
|
250
|
+
.icon-circle-arrow-up:before { content: "\f0aa"; }
|
251
|
+
.icon-circle-arrow-down:before { content: "\f0ab"; }
|
252
|
+
.icon-globe:before { content: "\f0ac"; }
|
253
|
+
.icon-wrench:before { content: "\f0ad"; }
|
254
|
+
.icon-tasks:before { content: "\f0ae"; }
|
255
|
+
|
256
|
+
.icon-filter:before { content: "\f0b0"; }
|
257
|
+
.icon-briefcase:before { content: "\f0b1"; }
|
258
|
+
.icon-fullscreen:before { content: "\f0b2"; }
|
259
|
+
|
260
|
+
.icon-group:before { content: "\f0c0"; }
|
261
|
+
.icon-link:before { content: "\f0c1"; }
|
262
|
+
.icon-cloud:before { content: "\f0c2"; }
|
263
|
+
.icon-beaker:before { content: "\f0c3"; }
|
264
|
+
.icon-cut:before { content: "\f0c4"; }
|
265
|
+
.icon-copy:before { content: "\f0c5"; }
|
266
|
+
.icon-paper-clip:before { content: "\f0c6"; }
|
267
|
+
.icon-save:before { content: "\f0c7"; }
|
268
|
+
.icon-sign-blank:before { content: "\f0c8"; }
|
269
|
+
.icon-reorder:before { content: "\f0c9"; }
|
270
|
+
.icon-list-ul:before { content: "\f0ca"; }
|
271
|
+
.icon-list-ol:before { content: "\f0cb"; }
|
272
|
+
.icon-strikethrough:before { content: "\f0cc"; }
|
273
|
+
.icon-underline:before { content: "\f0cd"; }
|
274
|
+
.icon-table:before { content: "\f0ce"; }
|
275
|
+
|
276
|
+
.icon-magic:before { content: "\f0d0"; }
|
277
|
+
.icon-truck:before { content: "\f0d1"; }
|
278
|
+
.icon-pinterest:before { content: "\f0d2"; }
|
279
|
+
.icon-pinterest-sign:before { content: "\f0d3"; }
|
280
|
+
.icon-google-plus-sign:before { content: "\f0d4"; }
|
281
|
+
.icon-google-plus:before { content: "\f0d5"; }
|
282
|
+
.icon-money:before { content: "\f0d6"; }
|
283
|
+
.icon-caret-down:before { content: "\f0d7"; }
|
284
|
+
.icon-caret-up:before { content: "\f0d8"; }
|
285
|
+
.icon-caret-left:before { content: "\f0d9"; }
|
286
|
+
.icon-caret-right:before { content: "\f0da"; }
|
287
|
+
.icon-columns:before { content: "\f0db"; }
|
288
|
+
.icon-sort:before { content: "\f0dc"; }
|
289
|
+
.icon-sort-down:before { content: "\f0dd"; }
|
290
|
+
.icon-sort-up:before { content: "\f0de"; }
|
291
|
+
|
292
|
+
.icon-envelope-alt:before { content: "\f0e0"; }
|
293
|
+
.icon-linkedin:before { content: "\f0e1"; }
|
294
|
+
.icon-undo:before { content: "\f0e2"; }
|
295
|
+
.icon-legal:before { content: "\f0e3"; }
|
296
|
+
.icon-dashboard:before { content: "\f0e4"; }
|
297
|
+
.icon-comment-alt:before { content: "\f0e5"; }
|
298
|
+
.icon-comments-alt:before { content: "\f0e6"; }
|
299
|
+
.icon-bolt:before { content: "\f0e7"; }
|
300
|
+
.icon-sitemap:before { content: "\f0e8"; }
|
301
|
+
.icon-umbrella:before { content: "\f0e9"; }
|
302
|
+
.icon-paste:before { content: "\f0ea"; }
|
303
|
+
|
304
|
+
.icon-user-md:before { content: "\f200"; }
|
@@ -0,0 +1,64 @@
|
|
1
|
+
// a label with an icon
|
2
|
+
// apply to .label-wrapper
|
3
|
+
@mixin label {
|
4
|
+
float: opposite-position($from-direction);
|
5
|
+
width: auto;
|
6
|
+
display: block;
|
7
|
+
width: 100%;
|
8
|
+
clear: both;
|
9
|
+
height: rhythm(1);
|
10
|
+
background: $light-gray;
|
11
|
+
@include trailer(0.5, $medium-font-size);
|
12
|
+
@include border-radius(10px);
|
13
|
+
|
14
|
+
.text {
|
15
|
+
@include adjust-font-size-to($small-font-size);
|
16
|
+
color: $bright-blue;
|
17
|
+
@include en-sans-font-stack;
|
18
|
+
float: $from-direction;
|
19
|
+
clear: none;
|
20
|
+
}
|
21
|
+
|
22
|
+
// the label icon with colored background
|
23
|
+
.custom-label {
|
24
|
+
@include adjust-font-size-to($small-font-size);
|
25
|
+
@include border-radius(50%);
|
26
|
+
float: $from-direction;
|
27
|
+
padding-#{opposite-position($from-direction)}: 10px;
|
28
|
+
padding-#{$from-direction}: 10px;
|
29
|
+
|
30
|
+
&.Problematic { @include icon { @extend .icon-flag; }; }
|
31
|
+
&.New { @include icon { @extend .icon-star; }; }
|
32
|
+
&.Checked { @include icon { @extend .icon-check;}; }
|
33
|
+
&.Breaking { @include icon { @extend .icon-star; }; }
|
34
|
+
|
35
|
+
// these are not in use and have not been converted yet to the new FontAwesome icons.
|
36
|
+
&.Discarded {
|
37
|
+
@include background(purple image-url("/images/iconic-icons/white/trash_stroke_16x16.png") center center no-repeat);
|
38
|
+
}
|
39
|
+
&.Unknown {
|
40
|
+
@include background($buttermilk-yellow image-url("/images/iconic-icons/white/x_14x14.png") center center no-repeat);
|
41
|
+
}
|
42
|
+
&.Confirmed {
|
43
|
+
@include background($tupperware-blue image-url("/images/iconic-icons/white/star_16x16.png") center center no-repeat);
|
44
|
+
}
|
45
|
+
&.Quote {
|
46
|
+
@include background($donjuan image-url("/images/iconic-icons/white/left_quote_16x16.png") center center no-repeat);
|
47
|
+
}
|
48
|
+
&.Idea {
|
49
|
+
@include background(lighten($reef-green, 10%) image-url("/images/iconic-icons/white/lightbulb_10x16.png") center center no-repeat);
|
50
|
+
}
|
51
|
+
&.Unconfirmed {
|
52
|
+
@include background(lighten($dark-brown, 10%) image-url("/images/iconic-icons/white/chat_alt_fill_16x16.png") center center no-repeat);
|
53
|
+
}
|
54
|
+
&.Mainstream {
|
55
|
+
@include background(darken($buttermilk-yellow, 10%) image-url("/images/iconic-icons/white/document_fill_16x16.png") center center no-repeat);
|
56
|
+
}
|
57
|
+
&.Controversial {
|
58
|
+
@include background(lighten($tupperware-blue, 10%) image-url("/images/iconic-icons/white/bolt_16x16.png") center center no-repeat);
|
59
|
+
}
|
60
|
+
&.Experimental {
|
61
|
+
@include background($donjuan image-url("/images/iconic-icons/white/beaker_8x16.png") center center no-repeat);
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|