less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

data/assets/stylesheets/semantic_ui/themes/default/modules/embed.variables

@@ -0,0 +1,53 @@
+/*******************************
+             Video
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+/* Simple */
+@background: @lightGrey;
+@transitionDuration: 0.5s;
+@transitionEasing: @defaultEasing;
+
+/* Placeholder */
+@placeholderUnderlay: @background;
+
+/* Placeholder Overlayed Background */
+@placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
+@placeholderBackgroundOpacity: 0.5;
+@placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing;
+
+/* Icon */
+@iconBackground: @veryStrongTransparentBlack;
+@iconSize: 6rem;
+@iconTransition:
+  opacity @transitionDuration @transitionEasing,
+  color @transitionDuration @transitionEasing
+;
+@iconColor: @white;
+@iconShadow:
+  0px 2px 10px rgba(34, 36, 38, 0.2)
+;
+@iconZIndex: 10;
+
+/*-------------------
+       States
+--------------------*/
+
+/* Hover */
+@hoverPlaceholderBackground: @placeholderBackground;
+@hoverPlaceholderBackgroundOpacity: 1;
+@hoverIconColor: @white;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Aspect Ratios */
+@squareRatio: (1/1) * 100%;
+@widescreenRatio: (9/16) * 100%;
+@ultraWidescreenRatio: (9/21) * 100%;
+@standardRatio: (3/4) * 100%;

data/assets/stylesheets/semantic_ui/themes/default/modules/modal.variables

@@ -4,11 +4,13 @@
 
 @background: @white;
 @border: none;
-@width: 90%;
 @zIndex: 1001;
-@xOffset: -(@width / 2);
 @borderRadius: @defaultBorderRadius;
-@boxShadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);
+@transformOrigin: 50% 25%;
+@boxShadow:
+  1px 3px 3px 0px rgba(0, 0, 0, 0.2),
+  1px 3px 15px 2px rgba(0, 0, 0, 0.2)
+;
 
 /* Close Icon */
 @closeOpacity: 0.8;
@@ -24,21 +26,20 @@
 
 /* Header */
 @headerMargin: 0em;
-@headerVerticalPadding: 1.2rem;
-@headerHorizontalPadding: 2rem;
+@headerVerticalPadding: 1.25rem;
+@headerHorizontalPadding: 1.5rem;
 @headerPadding: @headerVerticalPadding @headerHorizontalPadding;
-@headerBackground: @subtleGradient @white;
+@headerBackground: @white;
 @headerColor: @darkTextColor;
-@headerFontSize: 1.6em;
-@headerLineHeight: 1.3em;
-@headerBoxShadow: @subtleShadow;
+@headerFontSize: @huge;
+@headerBoxShadow: none;
 @headerFontWeight: bold;
 @headerFontFamily: @headerFont;
 @headerBorder: 1px solid @borderColor;
 
 /* Content */
 @contentFontSize: 1em;
-@contentPadding: 2rem;
+@contentPadding: 1.5rem;
 @contentLineHeight: 1.4;
 @contentBackground: #FFFFFF;
 
@@ -49,13 +50,13 @@
 
 @descriptionDistance: 2em;
 @descriptionMinWidth: '';
-@descriptionWidth: 80%;
+@descriptionWidth: auto;
 @descriptionVerticalAlign: top;
 
 /* Modal Actions */
 @actionBorder: 1px solid @borderColor;
-@actionBackground: #EFEFEF;
-@actionPadding: 1rem 2rem;
+@actionBackground: @offWhite;
+@actionPadding: 1rem 1rem;
 @actionAlign: right;
 
 @buttonDistance: 0.75em;
@@ -76,13 +77,12 @@
 @mobileCloseTop: 0.5rem;
 @mobileCloseRight: 0.5rem;
 
-
 /* Responsive Widths */
 @mobileWidth: 95%;
 @tabletWidth: 88%;
-@computerWidth: 74%;
-@largeMonitorWidth: 56%;
-@widescreenMonitorWidth: 42%;
+@computerWidth: 850px;
+@largeMonitorWidth: 900px;
+@widescreenMonitorWidth: 950px;
 
 @mobileMargin: 0em 0em 0em -(@mobileWidth / 2);
 @tabletMargin: 0em 0em 0em -(@tabletWidth / 2);
@@ -94,6 +94,9 @@
 @fullScreenOffset: (100% - @fullScreenWidth) / 2;
 @fullScreenMargin: 1em auto;
 
+/* Coupling */
+@invertedBoxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
+
 /*-------------------
         Types
 --------------------*/
@@ -105,6 +108,9 @@
 @basicModalCloseRight: 1.5rem;
 @basicInnerCloseColor: @white;
 
+@basicInvertedModalColor: @textColor;
+@basicInvertedModalHeaderColor: @darkTextColor;
+
 /* Scrolling Margin */
 @scrollingMargin: 3.5rem;
 @mobileScrollingMargin: 1rem;
@@ -114,7 +120,7 @@
 --------------------*/
 
 /* Size Widths */
-@smallRatio: 0.6;
+@smallRatio: 0.8;
 @largeRatio: 1.2;
 
 /* Derived Responsive Sizes */

data/assets/stylesheets/semantic_ui/themes/default/modules/popup.variables

@@ -10,9 +10,9 @@
 @background: @white;
 
 @maxWidth: 250px;
-@borderColor: #CCCCCC;
+@borderColor: @solidBorderColor;
 @borderWidth: 1px;
-@boxShadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+@boxShadow: @floatingShadow;
 @color: @textColor;
 
 @verticalPadding: 0.833em;
@@ -86,10 +86,4 @@
 
 @invertedHeaderBackground: none;
 @invertedHeaderColor: @white;
-@invertedArrowColor: @black;
-
-/* Sizes */
-@small: 0.785714rem;
-@medium: 0.85714rem;
-@large: 1rem;
-@huge: 1.14285rem;
+@invertedArrowColor: @black;

data/assets/stylesheets/semantic_ui/themes/default/modules/progress.variables

@@ -11,10 +11,10 @@
 @firstMargin: 0em 0em (@labelHeight + @verticalSpacing);
 @lastMargin: 0em 0em (@labelHeight);
 
-@background: @subtleTransparentBlack;
-@border: 1px solid @borderColor;
+@background: @strongTransparentBlack;
+@border: none;
 @boxShadow: none;
-@padding: 0.2857em;
+@padding: 0em;
 @borderRadius: @defaultBorderRadius;
 
 /* Bar */
@@ -22,8 +22,8 @@
 @barHeight: 1.75em;
 @barBackground: #888888;
 @barBorderRadius: @borderRadius;
-@barTransitionEasing: ease;
-@barTransitionDuration: 0.3s;
+@barTransitionEasing: @defaultEasing;
+@barTransitionDuration: @defaultDuration;
 @barTransition:
   width @barTransitionDuration @barTransitionEasing,
   background-color @barTransitionDuration @barTransitionEasing
@@ -33,7 +33,7 @@
 
 /* Progress Bar Label */
 @progressWidth: auto;
-@progressSize: 0.9em;
+@progressSize: @relativeSmall;
 @progressPosition: absolute;
 @progressTop: 50%;
 @progressRight: 0.5em;
@@ -66,12 +66,18 @@
 --------------------*/
 
 @indicatingFirstColor: #D95C5C;
-@indicatingSecondColor: #D9A65C;
+@indicatingSecondColor: #EFBC72;
 @indicatingThirdColor: #E6BB48;
 @indicatingFourthColor: #DDC928;
 @indicatingFifthColor: #B4D95C;
 @indicatingSixthColor: #66DA81;
 
+@indicatingFirstLabelColor: @textColor;
+@indicatingSecondLabelColor: @textColor;
+@indicatingThirdLabelColor: @textColor;
+@indicatingFourthLabelColor: @textColor;
+@indicatingFifthLabelColor: @textColor;
+@indicatingSixthLabelColor: @textColor;
 
 /*-------------------
         States

data/assets/stylesheets/semantic_ui/themes/default/modules/rating.variables

@@ -2,64 +2,102 @@
              Rating
 *******************************/
 
-@display: inline-block;
-@margin: 0em 0.75rem;
+@margin: 0em @relativeMini;
+@whiteSpace: nowrap;
+@verticalAlign: baseline;
 
-@verticalAlign: middle;
-
-@iconWidth: 1.1em;
+@iconCursor: pointer;
+@iconWidth: 1.25em;
+@iconHeight: auto;
+@iconTransition:
+  opacity @defaultDuration @defaultEasing,
+  background @defaultDuration @defaultEasing,
+  text-shadow @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing
+;
 
-@inactiveColor: rgba(0, 0, 0, 0.15);
 
 /*-------------------
         Types
 --------------------*/
 
+/* Standard */
+@inactiveBackground: transparent;
+@inactiveColor: rgba(0, 0, 0, 0.15);
+
+@selectedBackground: @inactiveBackground;
+@selectedColor: @textColor;
+
+@activeBackground: @inactiveBackground;
+@activeColor: @darkTextColor;
+
 /* Star */
 @starIconWidth: @iconWidth;
+@starIconHeight: @iconHeight;
+@starShadowWidth: 1px;
+
+@starInactiveBackground: @inactiveBackground;
 @starInactiveColor: @inactiveColor;
-@starSelectedColor: #FFB70A;
+@starInactiveTextShadow: none;
+
+@starActiveBackground: @activeBackground;
 @starActiveColor: #FFE623;
-@starActiveShadow:
-  0px -1px 0px #CFA300,
-  -1px 0px 0px #CFA300,
-  0px 1px 0px #CFA300,
-  1px 0px 0px #CFA300
+@starActiveShadowColor: #DDC507;
+@starActiveTextShadow:
+  0px -@starShadowWidth 0px @starActiveShadowColor,
+  -@starShadowWidth 0px 0px @starActiveShadowColor,
+  0px @starShadowWidth 0px @starActiveShadowColor,
+  @starShadowWidth 0px 0px @starActiveShadowColor
+;
+
+@starSelectedBackground: @selectedBackground;
+@starSelectedColor: #FFCC00;
+@starSelectedShadowColor: #E6A200;
+@starSelectedTextShadow:
+  0px -@starShadowWidth 0px @starSelectedShadowColor,
+  -@starShadowWidth 0px 0px @starSelectedShadowColor,
+  0px @starShadowWidth 0px @starSelectedShadowColor,
+  @starShadowWidth 0px 0px @starSelectedShadowColor
 ;
 
 /* Heart */
-@heartIconWidth: 1.25em;
+@heartIconWidth: 1.4em;
+@heartIconHeight: @iconHeight;
+@heartShadowWidth: 1px;
+
+@heartInactiveBackground: @inactiveBackground;
 @heartInactiveColor: @inactiveColor;
-@heartSelectedColor: #FF2733;
-@heartActiveColor: #FF2733;
-@heartActiveShadow:
-  0px -1px 0px #9E0000,
-  -1px 0px 0px #9E0000,
-  0px 1px 0px #9E0000,
-  1px 0px 0px #9E0000
+@heartInactiveTextShadow: none;
+
+@heartActiveBackground: @activeBackground;
+@heartActiveColor: #FF6D75;
+@heartActiveShadowColor: #CD0707;
+@heartActiveTextShadow:
+  0px -@heartShadowWidth 0px @heartActiveShadowColor,
+  -@heartShadowWidth 0px 0px @heartActiveShadowColor,
+  0px @heartShadowWidth 0px @heartActiveShadowColor,
+  @heartShadowWidth 0px 0px @heartActiveShadowColor
 ;
 
+@heartSelectedBackground: @selectedBackground;
+@heartSelectedColor: #FF3000;
+@heartSelectedShadowColor: #AA0101;
+@heartSelectedTextShadow:
+  0px -@heartShadowWidth 0px @heartSelectedShadowColor,
+  -@heartShadowWidth 0px 0px @heartSelectedShadowColor,
+  0px @heartShadowWidth 0px @heartSelectedShadowColor,
+  @heartShadowWidth 0px 0px @heartSelectedShadowColor
+;
 
 /*-------------------
         States
 --------------------*/
 
-@inactiveColor: rgba(0, 0, 0, 0.15);
-@hoverColor: @textColor;
-@activeColor: @darkTextColor;
-
-@interactiveIconOpacity: 0.5;
+@interactiveActiveIconOpacity: 1;
 @interactiveSelectedIconOpacity: 1;
 
 /*-------------------
       Variations
 --------------------*/
 
-@mini: 0.7rem;
-@tiny: 0.8rem;
-@small: 0.875rem;
-@medium: 1rem;
-@large: 1.1rem;
-@big: 1.25rem;
-@huge: 1.5rem;
-@massive: 2rem;
+@massive: 2rem;

data/assets/stylesheets/semantic_ui/themes/default/modules/search.variables

@@ -3,37 +3,39 @@
 *******************************/
 
 /* Search Prompt */
-@promptFontSize: 1em;
-@promptVerticalPadding: 0.78571em;
-@promptHorizontalPadding: 1em;
-@promptLineHeight: 1.2;
+@promptBackground: @inputBackground;
+@promptVerticalPadding: @inputVerticalPadding;
+@promptHorizontalPadding: @inputHorizontalPadding;
+@promptLineHeight: @inputLineHeight;
+@promptFontSize: @relativeMedium;
 @promptPadding: (@promptVerticalPadding + ((1em - @promptLineHeight) / 2)) @promptHorizontalPadding;
-@promptBackground: #FFFFFF;
 @promptBorder: 1px solid @borderColor;
 @promptBorderRadius: @circularRadius;
 @promptColor: @textColor;
 @promptTransition:
-  background-color 0.2s ease,
-  color 0.2s ease,
-  box-shadow 0.2s ease,
-  border-color 0.2s ease
+  background-color @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
 ;
 @promptBoxShadow: 0em 0em 0em 0em transparent inset;
 
 /* Result Box */
-@resultsWidth: 16em;
+@resultsWidth: 18em;
 @resultsBackground: #FFFFFF;
 @resultsDistance: 0.5em;
-@resultsBorderRadius: 0.25em;
-@resultsBoxShadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
+@resultsBorderRadius: @defaultBorderRadius;
+@resultsBorder: 1px solid @solidBorderColor;
+@resultsBoxShadow: @floatingShadow;
 
 /* Result */
 @resultFontSize: 1em;
-@resultVerticalPadding: 0.5em;
-@resultHorizontalPadding: 1em;
+@resultVerticalPadding: @relativeTiny;
+@resultHorizontalPadding: @relativeLarge;
+@resultPadding: @resultVerticalPadding @resultHorizontalPadding;
 @resultTextColor: @textColor;
 @resultLineHeight: 1.33;
-@resultDivider: 1px solid @borderColor;
+@resultDivider: 1px solid @internalBorderColor;
 @resultLastDivider: none;
 
 /* Result Image */
@@ -46,13 +48,14 @@
 
 /* Result Content */
 @resultTitleFont: @headerFont;
+@resultTitleMargin: -@headerLineHeightOffset 0em 0em;
 @resultTitleFontWeight: bold;
-@resultTitleFontSize: 1em;
+@resultTitleFontSize: @relativeMedium;
 @resultTitleColor: @darkTextColor;
 
 /* Description */
-@resultDescriptionFontSize: 0.9285em;
-@resultDescriptionDistance: 0em;
+@resultDescriptionFontSize: @relativeSmall;
+@resultDescriptionDistance: 0;
 @resultDescriptionColor: @lightTextColor;
 
 /* Price */
@@ -62,7 +65,7 @@
 /* Special Message */
 @messageVerticalPadding: 1em;
 @messageHorizontalPadding: 1em;
-@messageHeaderFontSize: 1.1428em;
+@messageHeaderFontSize: @medium;
 @messageHeaderFontWeight: bold;
 @messageHeaderColor: @textColor;
 @messageDescriptionDistance: 0.25rem;
@@ -72,7 +75,7 @@
 /* All Results Link */
 @actionBorder: none;
 @actionBackground: @darkWhite;
-@actionPadding: 0.5em 1em;
+@actionPadding: @relativeSmall @relativeMedium;
 @actionColor: @textColor;
 @actionFontWeight: bold;
 @actionAlign: center;
@@ -82,14 +85,16 @@
             States
 *******************************/
 
+/* Focus */
+@promptFocusBackground: @promptBackground;
+@promptFocusBorderColor: @selectedBorderColor;
+@promptFocusColor: @selectedTextColor;
+
 /* Hover */
 @resultHoverBackground: @offWhite;
 @actionHoverBackground: #E0E0E0;
 
 /* Loading */
-@loaderSize: 1.2857em;
-@loaderOffset: -(@loaderSize / 2);
-@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
 
 /* Active Category */
@@ -97,9 +102,9 @@
 @categoryNameActiveColor: @textColor;
 
 /* Active Result */
-@resultActiveBorderLeft: transparent;
+@resultActiveBorderLeft: @internalBorderColor;
 @resultActiveBackground: @darkWhite;
-@resultActiveBoxShadow: 3px 0px 3px 0px @borderColor;
+@resultActiveBoxShadow: none;
 @resultActiveTitleColor: @darkTextColor;
 @resultActiveDescriptionColor: @darkTextColor;
 @resultsZIndex: 998;
@@ -112,29 +117,26 @@
 /* Category */
 @categoryBackground: @darkWhite;
 @categoryBoxShadow: none;
-@categoryDivider: 1px solid @borderColor;
+@categoryDivider: 1px solid @internalBorderColor;
 @categoryTransition:
-  background 0.2s ease,
-  border-color 0.2s ease
+  background @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
 ;
 
 @categoryResultsWidth: 28em;
 
 @categoryResultBackground: @white;
 @categoryResultLeftBorder: 1px solid @borderColor;
-@categoryResultDivider: 1px solid @borderColor;
+@categoryResultDivider: @resultDivider;
 @categoryResultLastDivider: none;
+@categoryResultPadding: @resultPadding;
 @categoryResultTransition: @categoryTransition;
 
 @categoryNameWidth: 100px;
-@categoryNameBackground: @darkWhite;
+@categoryNameBackground: transparent;
 @categoryNameFont: @pageFont;
 @categoryNameFontSize: 1em;
 @categoryNameFloat: left;
 @categoryNamePadding: 0.4em 1em;
 @categoryNameFontWeight: bold;
 @categoryNameColor: @lightTextColor;
-
-/* Sizes */
-@medium: 1em;
-@large: 1.1em;