/******************************* Icon *******************************/ /*-------------- Font Files ---------------*/ @fontName: 'icons'; @src: asset-url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), asset-url("@{fontPath}/@{fontName}.woff2") format('woff2'), asset-url("@{fontPath}/@{fontName}.woff") format('woff'), asset-url("@{fontPath}/@{fontName}.ttf") format('truetype'), asset-url("@{fontPath}/@{fontName}.svg#icons") format('svg') ; @fallbackSRC: asset-url("@{fontPath}/@{fontName}.eot"); /*-------------- Optional Files ---------------*/ /* Outline Icons */ @importOutlineIcons: true; @outlineFontName: 'outline-icons'; @outlineSrc: asset-url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'), asset-url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'), asset-url("@{fontPath}/@{outlineFontName}.woff") format('woff'), asset-url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'), asset-url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg') ; @outlineFallbackSRC: asset-url("@{fontPath}/@{outlineFontName}.eot"); /* Brand Icons */ @importBrandIcons: true; @brandFontName: 'brand-icons'; @brandSrc: asset-url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'), asset-url("@{fontPath}/@{brandFontName}.woff2") format('woff2'), asset-url("@{fontPath}/@{brandFontName}.woff") format('woff'), asset-url("@{fontPath}/@{brandFontName}.ttf") format('truetype'), asset-url("@{fontPath}/@{brandFontName}.svg#icons") format('svg') ; @brandFallbackSRC: asset-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;