You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

157 lines
3.0 KiB

  1. //
  2. // Sass Icon Fonts
  3. //
  4. // Main File icons.scss
  5. // Version: 0.4
  6. // Created By: Andrew Senetar
  7. // Date: August, 7 2013
  8. // Used: Font Awesome Styles, Foundation Icon Fonts Scss as Starting; animation from Fontello
  9. /* Defaults */
  10. $set: "voltaicideas";
  11. // Colors (from Font Awesome)
  12. $iconBorderColor: #eee !default;
  13. $iconMuted: #eee !default;
  14. $iconLight: #fff !default;
  15. $iconDark: #333 !default;
  16. /* Mixins */
  17. // Mixin for creating individual icon classes
  18. @mixin i-class($name, $pau) {
  19. .icon-#{$name}:before {
  20. content: "\e#{$pau}";
  21. }
  22. }
  23. // Mixin to simplify font face creation
  24. @mixin face($set) {
  25. @font-face {
  26. font-family: "#{$set}";
  27. src: url("../fonts/#{$set}");
  28. src: url("../fonts/#{$set}.eot#iefix") format('embedded-opentype'),
  29. url("../fonts/#{$set}.woff") format('woff'),
  30. url("../fonts/#{$set}.ttf") format('truetype'),
  31. url("../fonts/#{$set}.svg#fontello") format('svg');
  32. font-weight: normal;
  33. font-style: normal;
  34. }
  35. }
  36. @mixin border-radius($radius) {
  37. -webkit-border-radius: $radius;
  38. -moz-border-radius: $radius;
  39. -ms-border-radius: $radius;
  40. -o-border-radius: $radius;
  41. border-radius: $radius;
  42. }
  43. @include face(#{$set}); //@font-face
  44. //// global icon styles (from Foundation Icons + Font Awesome)
  45. /* Icon font Styles */
  46. [class*='icon-'] {
  47. background-image: none;
  48. background-position: 0% 0%;
  49. background-repeat: repeat;
  50. display: inline;
  51. height: auto;
  52. width: auto;
  53. vertical-align: baseline;
  54. line-height: 1;
  55. margin-top: 0;
  56. speak: none;
  57. font-family: '#{$set}';
  58. font-style: normal;
  59. font-weight: normal;
  60. font-variant: normal;
  61. text-transform: none;
  62. text-decoration: inherit;
  63. -webkit-font-smoothing: antialiased;
  64. }
  65. [class*='icon-']:before {
  66. text-decoration: inherit;
  67. display: inline-block;
  68. speak: none;
  69. }
  70. //// Icon borders (from Font Awesome)
  71. [class*="border icon-"] {
  72. border: solid 1px $iconBorderColor;
  73. padding: .2em .25em .15em;
  74. @include border-radius(3px);
  75. }
  76. //// Icon sizes (from Font Awesome)
  77. [class*="large icon-"]:before {
  78. vertical-align: -10%;
  79. font-size: 1.333em;
  80. }
  81. [class*="huge icon-"]:before {
  82. vertical-align: -17%;
  83. font-size: 1.75em;
  84. }
  85. [class*="2x icon-"] {
  86. font-size: 2em;
  87. & .border {
  88. border-width: 2px;
  89. @include border-radius(4px);
  90. }
  91. }
  92. [class*="3x icon-"] {
  93. font-size: 3em;
  94. & .border {
  95. border-width: 3px;
  96. @include border-radius(5px);
  97. }
  98. }
  99. [class*="4x icon-"] {
  100. font-size: 4em;
  101. & .border {
  102. border-width: 4px;
  103. @include border-radius(6px);
  104. }
  105. }
  106. [class*="5x icon-"] {
  107. font-size: 5em;
  108. & .border {
  109. border-width: 5px;
  110. @include border-radius(7px);
  111. }
  112. }
  113. //// Colors (from Font Awesome)
  114. [class*="muted icon-"]{
  115. color: $iconMuted;
  116. }
  117. [class*="light icon-"]{
  118. color: $iconLight;
  119. }
  120. [class*="dark icon-"]{
  121. color: $iconDark;
  122. }
  123. //// Fixes
  124. //// makes sure icons active on rollover in links (from Font Awesome)
  125. a [class*="icon-"]:before {
  126. display: inline;
  127. }
  128. //// Actual Icons
  129. /* Icon Font List */
  130. @import "_icon_codes.scss";