assets/sass/components/_icon.scss

   1 ///
   2 /// Forty by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Icon */
   8
   9         .icon {
  10                 @include icon;
  11                 border-bottom: none;
  12                 position: relative;
  13
  14                 > .label {
  15                         display: none;
  16                 }
  17
  18                 &:before {
  19                         line-height: inherit;
  20                 }
  21
  22                 &.solid {
  23                         &:before {
  24                                 font-weight: 900;
  25                         }
  26                 }
  27
  28                 &.brands {
  29                         &:before {
  30                                 font-family: 'Font Awesome 5 Brands';
  31                         }
  32                 }
  33
  34                 &.alt {
  35                         &:before {
  36                                 background-color: _palette(fg-bold);
  37                                 border-radius: 100%;
  38                                 color: _palette(bg);
  39                                 display: inline-block;
  40                                 height: 2em;
  41                                 line-height: 2em;
  42                                 text-align: center;
  43                                 width: 2em;
  44                         }
  45                 }
  46         }
  47
  48         a.icon {
  49                 &.alt {
  50                         &:before {
  51                                 @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
  52                         }
  53
  54                         &:hover {
  55                                 &:before {
  56                                         background-color: _palette(accent1);
  57                                 }
  58                         }
  59
  60                         &:active {
  61                                 &:before {
  62                                         background-color: desaturate(darken(_palette(accent1), 15), 5);
  63                                 }
  64                         }
  65                 }
  66         }