_core.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. /* FONT AWESOME CORE
  2. * -------------------------- */
  3. [class^="icon-"],
  4. [class*=" icon-"] {
  5. @include icon-FontAwesome();
  6. }
  7. [class^="icon-"]:before,
  8. [class*=" icon-"]:before {
  9. text-decoration: inherit;
  10. display: inline-block;
  11. cursor: default;
  12. speak: none;
  13. }
  14. /* makes the font 33% larger relative to the icon container */
  15. .icon-large:before {
  16. vertical-align: -10%;
  17. font-size: (4em/3);
  18. }
  19. /* makes sure icons active on rollover in links */
  20. a {
  21. [class^="icon-"],
  22. [class*=" icon-"] {
  23. display: inline;
  24. }
  25. }
  26. /* increased font size for icon-large */
  27. [class^="icon-"],
  28. [class*=" icon-"] {
  29. &.icon-fixed-width {
  30. display: inline-block;
  31. width: (16em/14);
  32. text-align: right;
  33. padding-right: (4em/14);
  34. &.icon-large {
  35. width: (20em/14);
  36. }
  37. }
  38. }
  39. .icons-ul {
  40. margin-left: $icons-li-width;
  41. list-style-type: none;
  42. > li { position: relative; }
  43. .icon-li {
  44. position: absolute;
  45. left: -$icons-li-width;
  46. width: $icons-li-width;
  47. text-align: center;
  48. line-height: inherit;
  49. }
  50. }
  51. // allows usage of the hide class directly on font awesome icons
  52. [class^="icon-"],
  53. [class*=" icon-"] {
  54. &.hide {
  55. display: none;
  56. }
  57. }
  58. .icon-muted { color: $iconMuted; }
  59. .icon-light { color: $iconLight; }
  60. .icon-dark { color: $iconDark; }
  61. // Icon Borders
  62. // -------------------------
  63. .icon-border {
  64. border: solid 1px $borderColor;
  65. padding: .2em .25em .15em;
  66. @include border-radius(3px);
  67. }
  68. // Icon Sizes
  69. // -------------------------
  70. .icon-2x {
  71. font-size: 2em;
  72. &.icon-border {
  73. border-width: 2px;
  74. @include border-radius(4px);
  75. }
  76. }
  77. .icon-3x {
  78. font-size: 3em;
  79. &.icon-border {
  80. border-width: 3px;
  81. @include border-radius(5px);
  82. }
  83. }
  84. .icon-4x {
  85. font-size: 4em;
  86. &.icon-border {
  87. border-width: 4px;
  88. @include border-radius(6px);
  89. }
  90. }
  91. .icon-5x {
  92. font-size: 5em;
  93. &.icon-border {
  94. border-width: 5px;
  95. @include border-radius(7px);
  96. }
  97. }
  98. // Floats & Margins
  99. // -------------------------
  100. // Quick floats
  101. .pull-right { float: right; }
  102. .pull-left { float: left; }
  103. [class^="icon-"],
  104. [class*=" icon-"] {
  105. &.pull-left {
  106. margin-right: .3em;
  107. }
  108. &.pull-right {
  109. margin-left: .3em;
  110. }
  111. }