2
* # Semantic - basic.Icon (Basic)
3
* http://github.com/jlukic/semantic-ui/
6
* Copyright 2014 Contributors
7
* Released under the MIT license
8
* http://opensource.org/licenses/MIT
11
/*******************************
13
*******************************/
15
font-family: 'Basic Icons';
16
src: url(../fonts/basic.icons.eot);
17
src: url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'), url(../fonts/basic.icons.svg#basic.icons) format('svg'), url(../fonts/basic.icons.woff) format('woff'), url(../fonts/basic.icons.ttf) format('truetype');
21
text-decoration: inherit;
25
display: inline-block;
27
margin: 0em 0.25em 0em 0em;
30
font-family: 'Basic Icons';
34
text-decoration: inherit;
37
-webkit-box-sizing: border-box;
38
-moz-box-sizing: border-box;
39
-ms-box-sizing: border-box;
40
box-sizing: border-box;
41
-webkit-font-smoothing: antialiased;
42
-moz-font-smoothing: antialiased;
43
font-smoothing: antialiased;
45
/* basic.icons available */
46
i.basic.icon.circle.attention:before {
50
i.basic.icon.circle.help:before {
54
i.basic.icon.circle.info:before {
58
i.basic.icon.add:before {
62
i.basic.icon.chart:before {
66
i.basic.icon.chart.bar:before {
70
i.basic.icon.chart.pie:before {
74
i.basic.icon.resize.full:before {
78
i.basic.icon.resize.horizontal:before {
82
i.basic.icon.resize.small:before {
86
i.basic.icon.resize.vertical:before {
90
i.basic.icon.down:before {
94
i.basic.icon.down.triangle:before {
98
i.basic.icon.down.arrow:before {
102
i.basic.icon.left:before {
106
i.basic.icon.left.triangle:before {
110
i.basic.icon.left.arrow:before {
114
i.basic.icon.right:before {
118
i.basic.icon.right.triangle:before {
122
i.basic.icon.right.arrow:before {
126
i.basic.icon.up:before {
130
i.basic.icon.up.triangle:before {
134
i.basic.icon.up.arrow:before {
138
i.basic.icon.folder:before {
142
i.basic.icon.open.folder:before {
146
i.basic.icon.globe:before {
150
i.basic.icon.desk.globe:before {
154
i.basic.icon.star:before {
158
i.basic.icon.star.empty:before {
162
i.basic.icon.star.half:before {
166
i.basic.icon.lock:before {
170
i.basic.icon.unlock:before {
174
i.basic.icon.layout.grid:before {
178
i.basic.icon.layout.block:before {
182
i.basic.icon.layout.list:before {
186
i.basic.icon.heart.empty:before {
190
i.basic.icon.heart:before {
194
i.basic.icon.asterisk:before {
198
i.basic.icon.attachment:before {
202
i.basic.icon.attention:before {
206
i.basic.icon.trophy:before {
210
i.basic.icon.barcode:before {
214
i.basic.icon.cart:before {
218
i.basic.icon.block:before {
222
i.basic.icon.book:before {
225
i.basic.icon.bookmark:before {
229
i.basic.icon.calendar:before {
233
i.basic.icon.cancel:before {
237
i.basic.icon.close:before {
241
i.basic.icon.color:before {
245
i.basic.icon.chat:before {
249
i.basic.icon.check:before {
253
i.basic.icon.time:before {
257
i.basic.icon.cloud:before {
261
i.basic.icon.code:before {
265
i.basic.icon.email:before {
269
i.basic.icon.settings:before {
273
i.basic.icon.setting:before {
277
i.basic.icon.comment:before {
281
i.basic.icon.clockwise.counter:before {
285
i.basic.icon.clockwise:before {
289
i.basic.icon.cube:before {
293
i.basic.icon.direction:before {
297
i.basic.icon.doc:before {
301
i.basic.icon.docs:before {
305
i.basic.icon.dollar:before {
309
i.basic.icon.paint:before {
313
i.basic.icon.edit:before {
317
i.basic.icon.eject:before {
321
i.basic.icon.export:before {
325
i.basic.icon.hide:before {
329
i.basic.icon.unhide:before {
333
i.basic.icon.facebook:before {
337
i.basic.icon.fast-forward:before {
341
i.basic.icon.fire:before {
345
i.basic.icon.flag:before {
349
i.basic.icon.lightning:before {
353
i.basic.icon.lab:before {
357
i.basic.icon.flight:before {
361
i.basic.icon.forward:before {
365
i.basic.icon.gift:before {
369
i.basic.icon.github:before {
373
i.basic.icon.globe:before {
377
i.basic.icon.headphones:before {
381
i.basic.icon.question:before {
385
i.basic.icon.home:before {
389
i.basic.icon.i:before {
393
i.basic.icon.idea:before {
397
i.basic.icon.open:before {
401
i.basic.icon.content:before {
405
i.basic.icon.location:before {
409
i.basic.icon.mail:before {
413
i.basic.icon.mic:before {
417
i.basic.icon.minus:before {
421
i.basic.icon.money:before {
425
i.basic.icon.off:before {
429
i.basic.icon.pause:before {
433
i.basic.icon.photos:before {
437
i.basic.icon.photo:before {
441
i.basic.icon.pin:before {
445
i.basic.icon.play:before {
449
i.basic.icon.plus:before {
453
i.basic.icon.print:before {
457
i.basic.icon.rss:before {
461
i.basic.icon.search:before {
465
i.basic.icon.shuffle:before {
469
i.basic.icon.tag:before {
473
i.basic.icon.tags:before {
477
i.basic.icon.terminal:before {
481
i.basic.icon.thumbs.down:before {
485
i.basic.icon.thumbs.up:before {
489
i.basic.icon.to-end:before {
493
i.basic.icon.to-start:before {
497
i.basic.icon.top.list:before {
501
i.basic.icon.trash:before {
505
i.basic.icon.twitter:before {
509
i.basic.icon.upload:before {
513
i.basic.icon.user.add:before {
517
i.basic.icon.user:before {
521
i.basic.icon.community:before {
525
i.basic.icon.users:before {
529
i.basic.icon.id:before {
533
i.basic.icon.url:before {
537
i.basic.icon.zoom.in:before {
541
i.basic.icon.zoom.out:before {
548
/* dropdown arrows are to the right */
549
i.dropdown.basic.icon {
550
margin: 0em 0em 0em 0.5em;
552
/* stars are usually consecutive */
557
/* left side basic.icons */
562
margin: 0em 0.5em 0em 0em;
564
/* right side basic.icons */
570
margin: 0em 0em 0em 0.5em;
575
/* aliases for convenience */
576
i.basic.icon.delete:before {
580
i.basic.icon.dropdown:before {
584
i.basic.icon.help:before {
588
i.basic.icon.info:before {
592
i.basic.icon.error:before {
596
i.basic.icon.dislike:before {
600
i.basic.icon.like:before {
604
i.basic.icon.eye:before {
608
i.basic.icon.eye.hidden:before {
612
i.basic.icon.date:before {
616
/*******************************
618
*******************************/
622
i.basic.icon.active {
625
i.emphasized.basic.icon {
628
i.basic.icon.disabled {
631
/*******************************
633
*******************************/
634
/*-------------------
636
--------------------*/
640
-webkit-transition: opacity 0.3s ease-out;
641
-moz-transition: opacity 0.3s ease-out;
642
transition: opacity 0.3s ease-out;
644
.link.basic.icon:hover {
645
opacity: 1 !important;
647
/*-------------------
649
--------------------*/
650
i.circular.basic.icon {
651
border-radius: 500px !important;
652
padding: 0.5em 0em !important;
653
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
654
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
655
line-height: 1 !important;
656
width: 2em !important;
657
height: 2em !important;
659
i.circular.inverted.basic.icon {
661
-webkit-box-shadow: none;
664
/*-------------------
666
--------------------*/
667
i.vertically.flipped.basic.icon {
668
-webkit-transform: scale(1, -1);
669
-moz-transform: scale(1, -1);
670
-ms-transform: scale(1, -1);
671
transform: scale(1, -1);
673
i.horizontally.flipped.basic.icon {
674
-webkit-transform: scale(-1, 1);
675
-moz-transform: scale(-1, 1);
676
-ms-transform: scale(-1, 1);
677
transform: scale(-1, 1);
679
/*-------------------
681
--------------------*/
682
i.left.rotated.basic.icon {
683
-webkit-transform: rotate(-90deg);
684
-moz-transform: rotate(-90deg);
685
-ms-transform: rotate(-90deg);
686
transform: rotate(-90deg);
688
i.right.rotated.basic.icon {
689
-webkit-transform: rotate(90deg);
690
-moz-transform: rotate(90deg);
691
-ms-transform: rotate(90deg);
692
transform: rotate(90deg);
694
/*-------------------
696
--------------------*/
697
i.square.basic.icon {
700
padding: 0.5em 0.35em !important;
701
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
702
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
703
vertical-align: baseline;
705
i.square.basic.icon:before {
706
vertical-align: middle;
708
i.square.inverted.basic.icon {
710
-webkit-box-shadow: none;
713
/*-------------------
715
--------------------*/
716
i.inverted.basic.icon {
717
background-color: #222222;
720
/*-------------------
722
--------------------*/
724
color: #6ECFF5 !important;
727
color: #5C6166 !important;
730
color: #A1CF64 !important;
733
color: #D95C5C !important;
735
i.purple.basic.icon {
736
color: #564F8A !important;
739
color: #00B5AD !important;
741
/*-------------------
743
--------------------*/
744
i.inverted.black.basic.icon {
745
background-color: #5C6166 !important;
746
color: #FFFFFF !important;
748
i.inverted.blue.basic.icon {
749
background-color: #6ECFF5 !important;
750
color: #FFFFFF !important;
752
i.inverted.green.basic.icon {
753
background-color: #A1CF64 !important;
754
color: #FFFFFF !important;
756
i.inverted.red.basic.icon {
757
background-color: #D95C5C !important;
758
color: #FFFFFF !important;
760
i.inverted.purple.basic.icon {
761
background-color: #564F8A !important;
762
color: #FFFFFF !important;
764
i.inverted.teal.basic.icon {
765
background-color: #00B5AD !important;
766
color: #FFFFFF !important;
768
/*-------------------
770
--------------------*/
780
vertical-align: middle;
785
vertical-align: middle;
789
margin-right: 0.75em;
790
vertical-align: middle;
792
i.massive.basic.icon {
795
vertical-align: middle;