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.
@@ -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
+ }