Semantic-Org/Semantic-UI

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

/*--------------
   Font Files
---------------*/

@fontName: 'icons';
@src:
  url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
  url("@{fontPath}/@{fontName}.woff2") format('woff2'),
  url("@{fontPath}/@{fontName}.woff") format('woff'),
  url("@{fontPath}/@{fontName}.ttf") format('truetype'),
  url("@{fontPath}/@{fontName}.svg#icons") format('svg')
;
@fallbackSRC: url("@{fontPath}/@{fontName}.eot");

/*--------------
 Optional Files
---------------*/

/* Outline Icons */
@importOutlineIcons: true;
@outlineFontName: 'outline-icons';
@outlineSrc:
  url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'),
  url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'),
  url("@{fontPath}/@{outlineFontName}.woff") format('woff'),
  url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'),
  url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg')
;
@outlineFallbackSRC: url("@{fontPath}/@{outlineFontName}.eot");

/* Brand Icons */
@importBrandIcons: true;
@brandFontName: 'brand-icons';
@brandSrc:
  url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'),
  url("@{fontPath}/@{brandFontName}.woff2") format('woff2'),
  url("@{fontPath}/@{brandFontName}.woff") format('woff'),
  url("@{fontPath}/@{brandFontName}.ttf") format('truetype'),
  url("@{fontPath}/@{brandFontName}.svg#icons") format('svg')
;
@brandFallbackSRC: url("@{fontPath}/@{brandFontName}.eot");

/*--------------
   Definition
---------------*/

/* Icon Variables */
@opacity: 1;
@width: @iconWidth;
@height: 1em;
@distanceFromText: 0.25rem;


/* Variations */
@linkOpacity: 0.8;
@linkDuration: 0.3s;
@loadingDuration: 2s;

@circularSize: 2em;
@circularPadding: 0.5em 0em;
@circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;

@borderedSize: 2em;
@borderedVerticalPadding: ((@borderedSize - @height) / 2);
@borderedHorizontalPadding: 0em;
@borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;

@cornerIconSize: 0.45em;
@cornerIconStroke: 1px;
@cornerIconShadow:
  -@cornerIconStroke -@cornerIconStroke 0 @white,
   @cornerIconStroke -@cornerIconStroke 0 @white,
  -@cornerIconStroke  @cornerIconStroke 0 @white,
   @cornerIconStroke  @cornerIconStroke 0 @white
;
@cornerIconInvertedShadow:
  -@cornerIconStroke -@cornerIconStroke 0 @black,
   @cornerIconStroke -@cornerIconStroke 0 @black,
  -@cornerIconStroke  @cornerIconStroke 0 @black,
   @cornerIconStroke  @cornerIconStroke 0 @black
;

@mini: 0.4em;
@tiny: 0.5em;
@small: 0.75em;
@medium: 1em;
@large: 1.5em;
@big: 2em;
@huge: 4em;
@massive: 8em;