less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

data/assets/stylesheets/semantic_ui/themes/default/elements/container.overrides

@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/

data/assets/stylesheets/semantic_ui/themes/default/elements/container.variables

@@ -0,0 +1,45 @@
+/*******************************
+            Container
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+/* Minimum Gutter is used to determine  the maximum container width for a given device */
+
+@maxWidth: 100%;
+
+/* Devices */
+@mobileMinimumGutter: 0em;
+@mobileWidth: auto;
+@mobileGutter: 1em;
+
+@tabletMinimumGutter: (@emSize  * 1);
+@tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
+@tabletGutter: auto;
+
+@computerMinimumGutter: (@emSize  * 1.5);
+@computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth;
+@computerGutter: auto;
+
+@largeMonitorMinimumGutter: (@emSize  * 2);
+@largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
+@largeMonitorGutter: auto;
+
+/* Coupling (Add Negative Margin to container size) */
+@gridGutterWidth: 2em;
+@mobileGridWidth: @mobileWidth;
+@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")";
+@computerGridWidth: ~"calc("@computerWidth~" + "@gridGutterWidth~")";
+@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")";
+
+/*-------------------
+       Types
+--------------------*/
+
+/* Text */
+@textWidth: 700px;
+@textFontFamily: @pageFont;
+@textLineHeight: 1.5;
+@textSize: @large;

data/assets/stylesheets/semantic_ui/themes/default/elements/divider.overrides

@@ -1,3 +1,18 @@
 /*******************************
          Theme Overrides
 *******************************/
+
+
+.ui.horizontal.divider:before,
+.ui.horizontal.divider:after {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
+}
+
+@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+  .ui.stackable.grid .ui.vertical.divider:before,
+  .ui.grid .stackable.row .ui.vertical.divider:before,
+  .ui.stackable.grid .ui.vertical.divider:after,
+  .ui.grid .stackable.row .ui.vertical.divider:after {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
+  }
+}

data/assets/stylesheets/semantic_ui/themes/default/elements/divider.variables

@@ -9,10 +9,10 @@
 @margin: 1rem 0rem;
 
 @highlightWidth: 1px;
-@highlightColor: rgba(255, 255, 255, 0.2);
+@highlightColor: @whiteBorderColor;
 
 @shadowWidth: 1px;
-@shadowColor: rgba(0, 0, 0, 0.1);
+@shadowColor: @borderColor;
 
 /* Text */
 @letterSpacing: 0.05em;
@@ -44,11 +44,10 @@
 /* Inverted */
 @invertedTextColor: @white;
 @invertedHighlightColor: rgba(255, 255, 255, 0.15);
-@invertedShadowColor: rgba(0, 0, 0, 0.15);
+@invertedShadowColor: @borderColor;
 
 /* Section */
 @sectionMargin: 2rem;
 
-
 /* Sizes */
 @medium: 1rem;

data/assets/stylesheets/semantic_ui/themes/default/elements/header.variables

@@ -21,9 +21,21 @@
 @horizontalPadding: 0em;
 @verticalPadding: 0em;
 
+/* Sub Heading */
+@subHeadingDistance: @2px;
+@subHeadingFontSize: @relativeTiny;
+@subHeadingFontWeight: bold;
+@subHeadingTextTransform: uppercase;
+@subHeadingColor: '';
+
+@smallSubHeadingSize: @relativeMini;
+@largeSubHeadingSize: @relativeSmall;
+@hugeSubHeadingSize: @relativeMedium;
+
 /* Sub Header */
+@subHeaderMargin: 0em;
 @subHeaderLineHeight: 1.2em;
-@subHeaderColor: rgba(0, 0, 0, 0.5);
+@subHeaderColor: @mutedTextColor;
 
 /* Icon */
 @iconOpacity: 1;
@@ -57,18 +69,18 @@
 --------------------*/
 
 /* Sizing */
-@huge   : unit(@h1, em);
-@large  : unit(@h2, em);
-@medium : unit(@h3, em);
-@small  : unit(@h4, em);
-@tiny   : unit(@h5, em);
+@hugeFontSize   : unit(@h1, em);
+@largeFontSize  : unit(@h2, em);
+@mediumFontSize : unit(@h3, em);
+@smallFontSize  : unit(@h4, em);
+@tinyFontSize   : unit(@h5, em);
 
 /* Sub Header */
-@h1SubHeaderFontSize: 1.4285rem;
-@h2SubHeaderFontSize: 1.1428rem;
-@h3SubHeaderFontSize: 1.1428rem;
-@h4SubHeaderFontSize: 1rem;
-@h5SubHeaderFontSize: 0.9285rem;
+@h1SubHeaderFontSize: @large;
+@h2SubHeaderFontSize: @large;
+@h3SubHeaderFontSize: @medium;
+@h4SubHeaderFontSize: @medium;
+@h5SubHeaderFontSize: @small;
 
 @hugeSubHeaderFontSize  : @h1SubHeaderFontSize;
 @largeSubHeaderFontSize : @h2SubHeaderFontSize;
@@ -79,7 +91,7 @@
 /* Icon Header */
 @iconHeaderSize: 3em;
 @iconHeaderOpacity: 1;
-@iconHeaderMargin: 0.25rem;
+@iconHeaderMargin: 0.5rem;
 @circularHeaderIconSize: 2em;
 @squareHeaderIconSize: 2em;
 
@@ -89,20 +101,22 @@
 @iconHeaderFirstMargin: 0em;
 
 /* Divided */
-@dividedBorder: 1px solid rgba(0, 0, 0, 0.1);
+@dividedBorderWidth: 1px;
+@dividedBorder: @dividedBorderWidth solid @borderColor;
 @dividedColoredBorderWidth: 2px;
 
-@dividedBorderPadding: 0.25rem;
-@dividedSubHeaderPadding: 0.25rem;
+@dividedBorderPadding: @3px;
+@dividedSubHeaderPadding: @3px;
 @dividedIconPadding: 0em;
 
 /* Block */
 @blockBackground: @darkWhite;
 @blockBoxShadow: none;
-@blockBorder: 1px solid @solidBorderColor;
-@blockHorizontalPadding: 1rem;
-@blockVerticalPadding: 0.75rem;
-@blockBorderRadius: 0.3125rem;
+@blockBorderWidth: 1px;
+@blockBorder: @blockBorderWidth solid @solidBorderColor;
+@blockHorizontalPadding: @medium;
+@blockVerticalPadding: @mini;
+@blockBorderRadius: @defaultBorderRadius;
 
 @tinyBlock: @tiny;
 @smallBlock: @small;
@@ -110,17 +124,6 @@
 @largeBlock: @large;
 @hugeBlock: @huge;
 
-/* Divided */
-@blackDividedBorderColor: @black;
-@blueDividedBorderColor: @blue;
-@greenDividedBorderColor: @green;
-@orangeDividedBorderColor: @orange;
-@pinkDividedBorderColor: @pink;
-@purpleDividedBorderColor: @purple;
-@redDividedBorderColor: @red;
-@tealDividedBorderColor: @teal;
-@yellowDividedBorderColor: @yellow;
-
 /* Attached */
 @attachedOffset: -1px;
 @attachedBoxShadow: none;
@@ -130,15 +133,16 @@
 @attachedBackground: @white;
 @attachedBorderRadius: @blockBorderRadius;
 
-@tinyAttached: 0.8571em;
-@smallAttached: 0.9285em;
-@mediumAttached: 1em;
-@largeAttached: 1.0714em;
-@hugeAttached: 1.1428em;
+@tinyAttachedSize: @relativeTiny;
+@smallAttachedSize: @relativeSmall;
+@mediumAttachedSize: @relativeMedium;
+@largeAttachedSize: @relativeLarge;
+@bigAttachedSize: @relativeBig;
+@hugeAttachedSize: @relativeHuge;
 
 /* Inverted */
 @invertedColor: @white;
-@invertedSubHeaderColor: rgba(255, 255, 255, 0.85);
+@invertedSubHeaderColor: @invertedMutedTextColor;
 @invertedDividedBorderColor: @whiteBorderColor;
 @invertedBlockBackground: @lightBlack @subtleGradient;
 @invertedAttachedBackground: @invertedBlockBackground;

data/assets/stylesheets/semantic_ui/themes/default/elements/icon.overrides

@@ -431,8 +431,8 @@ i.icon.subway:before { content: "\f239"; }
 i.icon.table:before { content: "\f0ce"; }
 i.icon.columns:before { content: "\f0db"; }
 i.icon.sort:before { content: "\f0dc"; }
-i.icon.sort.ascending:before { content: "\f0dd"; }
-i.icon.sort.descending:before { content: "\f0de"; }
+i.icon.sort.ascending:before { content: "\f0de"; }
+i.icon.sort.descending:before { content: "\f0dd"; }
 i.icon.sort.alphabet.ascending:before { content: "\f15d"; }
 i.icon.sort.alphabet.descending:before { content: "\f15e"; }
 i.icon.sort.content.ascending:before { content: "\f160"; }
@@ -650,7 +650,7 @@ i.icon.log.out:before { content: "\f08b"; }
 i.icon.thumb.tack:before { content: "\f08d"; }
 i.icon.winner:before { content: "\f091"; }
 i.icon.bookmark.outline:before { content: "\f097"; }
-i.icon.phone.square:before { content: "\f098"; }
+i.icon.phone:before { content: "\f095"; }
 i.icon.phone.square:before { content: "\f098"; }
 i.icon.credit.card:before { content: "\f09d"; }
 i.icon.hdd.outline:before { content: "\f0a0"; }
@@ -710,6 +710,7 @@ i.icon.target:before { content: "\f140"; }
 i.icon.play.circle:before { content: "\f144"; }
 i.icon.pencil.square:before { content: "\f14b"; }
 i.icon.compass:before { content: "\f14e"; }
+i.icon.amex:before { content: "\f1f3"; }
 i.icon.eur:before { content: "\f153"; }
 i.icon.gbp:before { content: "\f154"; }
 i.icon.usd:before { content: "\f155"; }

data/assets/stylesheets/semantic_ui/themes/default/elements/icon.variables

@@ -7,12 +7,23 @@
 --------------------*/
 
 @fontName: 'icons';
+@fallbackSRC: asset-url("@{fontPath}/@{fontName}.eot");
+@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')
+;
 
 @opacity: 1;
-@width: 1.23em;
-@height: 0.9em;
+@width: @iconWidth;
+@height: 1em;
 @distanceFromText: 0.25rem;
 
+
+/* Variations */
+
 @linkOpacity: 0.8;
 @linkDuration: 0.3s;
 @loadingDuration: 2s;
@@ -26,18 +37,24 @@
 @borderedHorizontalPadding: ((@borderedSize - @width) / 2);
 @borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
 
-@small: 0.875em;
+@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
+;
+
+@small: @relativeSmall;
 @medium: 1em;
 @large: 1.5em;
 @big: 2em;
 @huge: 4em;
 @massive: 8em;
-
-@fallbackSRC: asset-url("@{fontPath}/@{fontName}.eot");
-@src:
-  asset-url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
-  asset-url("@{fontPath}/@{fontName}.woff2") format('woff'),
-  asset-url("@{fontPath}/@{fontName}.woff") format('woff'),
-  asset-url("@{fontPath}/@{fontName}.ttf") format('truetype'),
-  asset-url("@{fontPath}/@{fontName}.svg#icons") format('svg')
-;

data/assets/stylesheets/semantic_ui/themes/default/elements/image.variables

@@ -17,9 +17,8 @@
        Types
 --------------------*/
 
-
 /* Avatar */
-@avatarSize: 2.5em;
+@avatarSize: 2em;
 @avatarMargin: 0.25em;
 
 
@@ -27,12 +26,15 @@
        Variations
 --------------------*/
 
+/* Spaced */
+@spacedDistance: 0.5em;
+
 /* Floated */
 @floatedHorizontalMargin: 1em;
 @floatedVerticalMargin: 1em;
 
 /* Size */
-@miniWidth: 20px;
+@miniWidth: 35px;
 @tinyWidth: 80px;
 @smallWidth: 150px;
 @mediumWidth: 300px;

data/assets/stylesheets/semantic_ui/themes/default/elements/input.variables

@@ -7,25 +7,25 @@
 --------------------*/
 
 @inputFont: @pageFont;
-@verticalPadding: 0.78571em;
-@horizontalPadding: 1em;
+@verticalPadding: @inputVerticalPadding;
+@horizontalPadding: @inputHorizontalPadding;
 
-@lineHeight: 1.2142em;
+@lineHeight: @inputLineHeight;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
 
 @padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding;
 
 @textAlign: left;
-@background: #FFFFFF;
+@background: @inputBackground;
 @borderWidth: 1px;
-@border: @borderWidth solid rgba(0, 0, 0, 0.15);
+@border: @borderWidth solid @borderColor;
 @boxShadow: none;
 
 @borderRadius: @defaultBorderRadius;
 @transition:
-  background-color @transitionDuration @transitionEasing,
-  box-shadow @transitionDuration @transitionEasing,
-  border-color @transitionDuration @transitionEasing
+  background-color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
 ;
 
 @inputColor: @textColor;
@@ -35,8 +35,6 @@
 --------------------*/
 
 /* Icon Input */
-@glyphWidth: 1.25em;
-
 @iconWidth: (@verticalPadding * 2) + @glyphWidth;
 @iconOpacity: 0.5;
 @iconFocusOpacity: 1;
@@ -56,8 +54,9 @@
 /* Labeled Input */
 @labelCornerTop: @borderWidth;
 @labelCornerRight: @borderWidth;
-@labelCornerSize: 0.75em;
+@labelCornerSize: @relative9px;
 @labelSize: 1em;
+@labelVerticalPadding: (@verticalPadding - @lineHeightOffset);
 
 @labeledMargin: 2.5em;
 @labeledIconInputMargin: 3.25em;
@@ -93,9 +92,6 @@
 @errorBoxShadow: none;
 
 /* Loader */
-@loaderSize: 1.2857em;
-@loaderOffset: -(@loaderSize / 2);
-@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
 
 /*-------------------
@@ -106,13 +102,3 @@
 @transparentInvertedPlaceholderColor: @invertedUnselectedTextColor;
 @transparentInvertedColor: @white;
 
-
-/* Sizing */
-@mini: 0.8125rem;
-@small: 0.875rem;
-@medium: 1rem;
-@large: 1.125rem;
-@big: 1.25rem;
-@huge: 1.375rem;
-@massive: 1.5rem;
-

data/assets/stylesheets/semantic_ui/themes/default/elements/label.variables

@@ -2,46 +2,55 @@
              Label
 *******************************/
 
-
 /*-------------------
        Element
 --------------------*/
 
-
 @verticalAlign: baseline;
 @verticalMargin: 0em;
-@horizontalMargin: 0.125em;
+@horizontalMargin: @relative2px;
 @backgroundColor: #E8E8E8;
 @backgroundImage: none;
 @labelTextColor: rgba(0, 0, 0, 0.6);
-@verticalPadding: 0.6em;
-@horizontalPadding: 0.8em;
+@verticalPadding: 0.5833em;
+@horizontalPadding: 0.833em;
 @borderRadius: @absoluteBorderRadius;
 @textTransform: none;
 @fontWeight: bold;
 
-@labelTransitionDuration: @transitionDuration;
-@labelTransitionEasing: @transitionEasing;
+@lineHeightOffset: -(@verticalPadding / 2);
+
+@labelTransitionDuration: @defaultDuration;
+@labelTransitionEasing: @defaultEasing;
 @transition: background @labelTransitionDuration @labelTransitionEasing;
 
 /* Group */
-@groupVerticalMargin: 0.75em;
+@groupVerticalMargin: 0.5em;
 @groupHorizontalMargin: 0.5em;
 
 /*-------------------
         Parts
 --------------------*/
 
-@linkOpacity: 0.8;
+/* Link */
+@linkOpacity: 0.5;
 @linkTransition: @labelTransitionDuration opacity @labelTransitionEasing;
 
+/* Icon */
 @iconDistance: 0.75em;
 
+/* Image */
+@imageHeight: (1em + @verticalPadding * 2);
+
+/* Detail */
 @detailFontWeight: bold;
 @detailOpacity: 0.8;
 @detailIconDistance: 0.25em;
 @detailMargin: 1em;
 
+/* Delete */
+@deleteOpacity: @linkOpacity;
+@deleteSize: @relativeSmall;
 @deleteMargin: 0.5em;
 @deleteTransition: background @labelTransitionDuration @labelTransitionEasing;
 
@@ -51,19 +60,19 @@
 
 /* Image Label */
 @imageLabelBackground: @backgroundColor;
-@imageLabelBorderRadius: @circularRadius;
 @imageLabelVerticalPadding: @verticalPadding;
 @imageLabelHorizontalPadding: @horizontalPadding;
 @imageLabelTextDistance: 0.5em;
 @imageLabelDetailDistance: @imageLabelTextDistance;
 @imageLabelBorderRadius: @borderRadius;
 @imageLabelBoxShadow: none;
-@imageLabelDetailBackground: @strongTransparentBlack;
-
-/* Computed Values */
-@imageLabelImageHeight: (1em + @verticalPadding * 2);
 @imageLabelPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding @imageLabelVerticalPadding @imageLabelTextDistance;
+
 @imageLabelImageMargin: -@verticalPadding @imageLabelTextDistance -@verticalPadding -@imageLabelTextDistance;
+@imageLabelImageBorderRadius: @imageLabelBorderRadius 0em 0em @imageLabelBorderRadius;
+@imageLabelImageHeight: @imageHeight;
+
+@imageLabelDetailBackground: @strongTransparentBlack;
 @imageLabelDetailPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding;
 @imageLabelDetailMargin: -@imageLabelVerticalPadding -@imageLabelHorizontalPadding -@imageLabelVerticalPadding @imageLabelDetailDistance;
 
@@ -71,16 +80,28 @@
         States
 --------------------*/
 
+/* Hover */
 @labelHoverBackgroundColor: #E0E0E0;
 @labelHoverBackgroundImage: none;
 @labelHoverTextColor: @hoveredTextColor;
 
+/* Active */
+@labelActiveBackgroundColor: #D0D0D0;
+@labelActiveBackgroundImage: none;
+@labelActiveTextColor: @selectedTextColor;
+
+/* Active Hover */
+@labelActiveHoverBackgroundColor: #C8C8C8;
+@labelActiveHoverBackgroundImage: none;
+@labelActiveHoverTextColor: @selectedTextColor;
+
+
 /*-------------------
       Variations
 --------------------*/
 
 /* Tag */
-@tagCircleColor: #FFFFFF;
+@tagCircleColor: @white;
 @tagCircleSize: 0.5em;
 @tagHorizontalPadding: 1.5em;
 @tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
@@ -101,18 +122,50 @@
 
 @ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: ~"calc("-@ribbonImageMargin~" - "@ribbonTriangleSize~")";
-@ribbonImageDistance: ~"calc("@ribbonImageMargin~" + "@ribbonTriangleSize~")";
 @rightRibbonImageOffset:  ~"calc(100% + "@ribbonImageMargin~" + "@ribbonTriangleSize~")";
 
-@blackRibbonShadow: darken(@black, 10);
-@blueRibbonShadow: darken(@blue, 10);
-@greenRibbonShadow: darken(@green, 10);
-@orangeRibbonShadow: darken(@orange, 10);
-@pinkRibbonShadow: darken(@pink, 10);
-@purpleRibbonShadow: darken(@purple, 10);
+/* Colors */
+@redTextColor: @white;
+@orangeTextColor: @white;
+@yellowTextColor: @white;
+@oliveTextColor: @white;
+@greenTextColor: @white;
+@tealTextColor: @white;
+@blueTextColor: @white;
+@violetTextColor: @white;
+@purpleTextColor: @white;
+@pinkTextColor: @white;
+@brownTextColor: @white;
+@greyTextColor: @white;
+@blackTextColor: @white;
+
+@redHoverTextColor: @white;
+@orangeHoverTextColor: @white;
+@yellowHoverTextColor: @white;
+@oliveHoverTextColor: @white;
+@greenHoverTextColor: @white;
+@tealHoverTextColor: @white;
+@blueHoverTextColor: @white;
+@violetHoverTextColor: @white;
+@purpleHoverTextColor: @white;
+@pinkHoverTextColor: @white;
+@brownHoverTextColor: @white;
+@greyHoverTextColor: @white;
+@blackHoverTextColor: @white;
+
 @redRibbonShadow: darken(@red, 10);
-@tealRibbonShadow: darken(@teal, 10);
+@orangeRibbonShadow: darken(@orange, 10);
 @yellowRibbonShadow: darken(@yellow, 10);
+@oliveRibbonShadow: darken(@olive, 10);
+@greenRibbonShadow: darken(@green, 10);
+@tealRibbonShadow: darken(@teal, 10);
+@blueRibbonShadow: darken(@blue, 10);
+@violetRibbonShadow: darken(@violet, 10);
+@purpleRibbonShadow: darken(@purple, 10);
+@pinkRibbonShadow: darken(@pink, 10);
+@brownRibbonShadow: darken(@brown, 10);
+@greyRibbonShadow: darken(@grey, 10);
+@blackRibbonShadow: darken(@black, 10);
 
 /* Attached */
 @attachedSegmentPadding: 2rem;
@@ -122,13 +175,13 @@
 /* Corner */
 @cornerSizeRatio: 1;
 @cornerTransition: color @labelTransitionDuration @labelTransitionEasing;
-@cornerTriangleSize: 3.25em;
+@cornerTriangleSize: 4em;
 @cornerTriangleTransition: border-color @labelTransitionDuration @labelTransitionEasing;
 @cornerTriangleZIndex: 1;
 
-@cornerIconSize: 1em;
-@cornerIconTopOffset: 0.4em;
-@cornerIconLeftOffset: 0.75em;
+@cornerIconSize: @relativeLarge;
+@cornerIconTopOffset: @relative9px;
+@cornerIconLeftOffset: @relative11px;
 
 /* Corner Text */
 @cornerTextWidth: 3em;
@@ -164,11 +217,11 @@
 --------------------*/
 
 /* Sizing */
-@mini    : 0.6428rem;
-@tiny    : 0.7142rem;
-@small   : 0.7857rem;
-@medium  : 0.8571rem;
-@large   : 1rem;
-@big     : 1.1428rem;
-@huge    : 1.2857rem;
-@massive : 1.4285rem;
+@mini    : @9px;
+@tiny    : @10px;
+@small   : @11px;
+@medium  : @12px;
+@large   : @medium;
+@big     : @large;
+@huge    : @big;
+@massive : @huge;