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_light(fg-bold);
  37                                 border-radius: 100%;
  38                                 color: _palette_light(bg);
  39                                 display: inline-block;
  40                                 height: 2em;
  41                                 line-height: 2em;
  42                                 text-align: center;
  43                                 width: 2em;
  44                                 @media screen and (prefers-color-scheme: dark) {
  45                                         background-color: _palette_dark(fg-bold);
  46                                         color: _palette_dark(bg);
  47                                 }
  48                         }
  49                 }
  50         }
  51
  52         a.icon {
  53                 &.alt {
  54                         &:before {
  55                                 @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
  56                         }
  57
  58                         &:hover {
  59                                 &:before {
  60                                         background-color: _palette_light(accent1);
  61                                         @media screen and (prefers-color-scheme: dark) {
  62                                                 background-color: _palette_dark(accent1);
  63                                         }
  64                                 }
  65                         }
  66
  67                         &:active {
  68                                 &:before {
  69                                         background-color: desaturate(darken(_palette_light(accent1), 15), 5);
  70                                         @media screen and (prefers-color-scheme: dark) {
  71                                                 background-color: desaturate(darken(_palette_dark(accent1), 15), 5);
  72                                         }
  73                                 }
  74                         }
  75                 }
  76         }