legendary-doc-site/assets/semantic-ui/definitions/elements/icon.less

/*!
 * # Fomantic-UI - Icon
 * http://github.com/fomantic/Fomantic-UI/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */


/*******************************
            Theme
*******************************/

@type    : 'element';
@element : 'icon';

@import (multiple) '../../theme.config';


/*******************************
             Icon
*******************************/

@font-face {
  font-family: 'Icons';
  src: @fallbackSRC;
  src: @src;
  font-style: normal;
  font-weight: @normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

i.icon {
  display: inline-block;
  opacity: @opacity;

  margin: 0 @distanceFromText 0 0;

  width: @width;
  height: @height;

  font-family: 'Icons';
  font-style: normal;
  font-weight: @normal;
  text-decoration: inherit;
  text-align: center;

  speak: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

i.icon:before {
  background: none !important;
}

/*******************************
             Types
*******************************/

& when (@variationIconLoading) {
  /*--------------
      Loading
  ---------------*/

  i.icon.loading {
    height: 1em;
    line-height: 1;
    animation: loader @loadingDuration linear infinite;
  }
}

/*******************************
             States
*******************************/

i.icon:hover, i.icons:hover,
i.icon:active, i.icons:active,
i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
  opacity: 1;
}

& when (@variationIconDisabled) {
  i.disabled.icon, i.disabled.icons {
    opacity: @disabledOpacity;
    cursor: default;
    pointer-events: none;
  }
}

/*******************************
           Variations
*******************************/

& when (@variationIconFitted) {
  /*-------------------
          Fitted
  --------------------*/

  i.fitted.icon {
    width: auto;
    margin: 0 !important;
  }
}

& when (@variationIconLink) {
  /*-------------------
           Link
  --------------------*/

  i.link.icon:not(.disabled), i.link.icons:not(.disabled) {
    cursor: pointer;
    opacity: @linkOpacity;
    transition: opacity @defaultDuration @defaultEasing;
  }
  i.link.icon:hover, i.link.icons:hover {
    opacity: 1;
  }
}

& when (@variationIconCircular) {
  /*-------------------
        Circular
  --------------------*/

  i.circular.icon {
    border-radius: 500em !important;
    line-height: 1 !important;

    padding: @circularPadding !important;
    box-shadow: @circularShadow;

    width: @circularSize !important;
    height: @circularSize !important;
  }
  & when (@variationIconInverted) {
    i.circular.inverted.icon {
      border: none;
      box-shadow: none;
    }
  }
}

& when (@variationIconFlipped) {
  /*-------------------
        Flipped
  --------------------*/

  i.flipped.icon,
  i.horizontally.flipped.icon {
    transform: scale(-1, 1);
  }
  i.vertically.flipped.icon {
    transform: scale(1, -1);
  }
}

& when (@variationIconRotated) {
  /*-------------------
        Rotated
  --------------------*/

  i.rotated.icon,
  i.right.rotated.icon,
  i.clockwise.rotated.icon {
    transform: rotate(90deg);
  }

  i.left.rotated.icon,
  i.counterclockwise.rotated.icon {
    transform: rotate(-90deg);
  }

  i.halfway.rotated.icon {
    transform: rotate(180deg);
  }
}

& when (@variationIconFlipped) and (@variationIconRotated) {
  /*--------------------------
        Flipped & Rotated
  ---------------------------*/

  i.rotated.flipped.icon,
  i.right.rotated.flipped.icon,
  i.clockwise.rotated.flipped.icon {
    transform: scale(-1, 1) rotate(90deg);
  }

  i.left.rotated.flipped.icon,
  i.counterclockwise.rotated.flipped.icon {
    transform: scale(-1, 1) rotate(-90deg);
  }

  i.halfway.rotated.flipped.icon {
    transform: scale(-1, 1) rotate(180deg);
  }

  i.rotated.vertically.flipped.icon,
  i.right.rotated.vertically.flipped.icon,
  i.clockwise.rotated.vertically.flipped.icon {
    transform: scale(1, -1) rotate(90deg);
  }

  i.left.rotated.vertically.flipped.icon,
  i.counterclockwise.rotated.vertically.flipped.icon {
    transform: scale(1, -1) rotate(-90deg);
  }

  i.halfway.rotated.vertically.flipped.icon {
    transform: scale(1, -1) rotate(180deg);
  }
}

& when (@variationIconBordered) {
  /*-------------------
        Bordered
  --------------------*/

  i.bordered.icon {
    line-height: 1;
    vertical-align: baseline;

    width: @borderedSize;
    height: @borderedSize;
    padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
    box-shadow: @borderedShadow;
  }
  & when (@variationIconInverted) {
    i.bordered.inverted.icon {
      border: none;
      box-shadow: none;
    }
  }
}

& when (@variationIconInverted) {
  /*-------------------
        Inverted
  --------------------*/

  /* Inverted Shapes */
  i.inverted.bordered.icon,
  i.inverted.circular.icon {
    background-color: @black;
    color: @white;
  }

  i.inverted.icon {
    color: @white;
  }
}

/*-------------------
       Colors
--------------------*/

each(@colors, {
  @color: replace(@key, '@', '');
  @c: @colors[@@color][color];
  @l: @colors[@@color][light];

  i.@{color}.icon.icon.icon.icon {
    color: @c;
  }
  & when (@variationIconInverted) {
    i.inverted.@{color}.icon.icon.icon.icon {
      color: @l;
    }
    i.inverted.bordered.@{color}.icon.icon.icon.icon,
    i.inverted.circular.@{color}.icon.icon.icon.icon {
      background-color: @c;
      color: @white;
    }
  }
})


/*-------------------
        Sizes
--------------------*/

i.icon,
i.icons {
  font-size: @medium;
  line-height: @lineHeight;
}
& when not (@variationIconSizes = false) {
  each(@variationIconSizes, {
    @s: @@value;
    i.@{value}.@{value}.@{value}.icon,
    i.@{value}.@{value}.@{value}.icons {
      font-size: @s;
      vertical-align: middle;
    }
  })
}

& when (@variationIconGroups) or (@variationIconCorner) {
  /*******************************
              Groups
  *******************************/

  i.icons {
    display: inline-block;
    position: relative;
    line-height: 1;
  }

  i.icons .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
  }

  i.icons .icon:first-child {
    position: static;
    width: auto;
    height: auto;
    vertical-align: top;
    transform: none;
  }

  & when (@variationIconCorner) {
    /* Corner Icon */
    i.icons .corner.icon {
      top: auto;
      left: auto;
      right: 0;
      bottom: 0;
      transform: none;
      font-size: @cornerIconSize;
      text-shadow: @cornerIconShadow;
    }
    i.icons .icon.corner[class*="top right"] {
      top: 0;
      left: auto;
      right: 0;
      bottom: auto;
    }
    i.icons .icon.corner[class*="top left"] {
      top: 0;
      left: 0;
      right: auto;
      bottom: auto;
    }
    i.icons .icon.corner[class*="bottom left"] {
      top: auto;
      left: 0;
      right: auto;
      bottom: 0;
    }
    i.icons .icon.corner[class*="bottom right"] {
      top: auto;
      left: auto;
      right: 0;
      bottom: 0;
    }
    & when (@variationIconInverted) {
      i.icons .inverted.corner.icon {
        text-shadow: @cornerIconInvertedShadow;
      }
    }
  }
}

.loadUIOverrides();