less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

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

@@ -10,10 +10,15 @@
 @duration: 0.6s;
 @easing: ease-in-out;
 
-@hiddenSideOpacity: 0.4;
+@hiddenSideOpacity: 0.6;
 @animatingZIndex: 100;
 
-@transition: all @duration @easing;
+@transition:
+  transform @duration @easing,
+  left @duration @easing,
+  width @duration @easing,
+  height @duration @easing
+;
 @sideTransition: opacity @duration @easing;
 @backfaceVisibility: hidden;
 

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

@@ -9,14 +9,11 @@
 /* Animation */
 @perspective: 1500px;
 @duration: 500ms;
-@easing: ease;
+@easing: @defaultEasing;
 
 /* Dimmer */
 @dimmerColor: rgba(0, 0, 0, 0.4);
-@dimmerTransition:
-  transform @duration,
-  opacity @duration
-;
+@dimmerTransition: opacity @duration;
 
 /* Color below page */
 @canvasBackground: @lightBlack;

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

@@ -2,11 +2,6 @@
             Sticky
 *******************************/
 
-@transitionDuration: 0.2s;
-@transition:
-  width @transitionDuration @defaultEasing,
-  height @transitionDuration @defaultEasing,
-  top @transitionDuration @defaultEasing,
-  bottom @transitionDuration @defaultEasing
-;
+@transsssitionDuration: @defaultDuration;
+@transition: none;
 @zIndex: 800;

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

@@ -8,6 +8,4 @@
 @loadingContentOffset: -10000px;
 
 @loaderDistanceFromTop: 100px;
-@loaderSize: 2.5em;
-@loaderOffset: -(@loaderSize / 2);
-@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
+@loaderSize: 2.5em;

data/assets/stylesheets/semantic_ui/themes/default/modules/transition.overrides

@@ -95,7 +95,7 @@
 
 .drop.transition {
   transform-origin: top center;
-  animation-duration: 500ms;
+  animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
 }
 .drop.transition.in {
@@ -229,7 +229,7 @@
   }
   100% {
     opacity: 0;
-    transform: translateY(10%);
+    transform: translateY(5%);
   }
 }
 @keyframes fadeOutDown {
@@ -239,7 +239,7 @@
   }
   100% {
     opacity: 0;
-    transform: translateY(-10%);
+    transform: translateY(-5%);
   }
 }
 @keyframes fadeOutLeft {
@@ -249,7 +249,7 @@
   }
   100% {
     opacity: 0;
-    transform: translateX(10%);
+    transform: translateX(5%);
   }
 }
 @keyframes fadeOutRight {
@@ -259,7 +259,7 @@
   }
   100% {
     opacity: 0;
-    transform: translateX(-10%);
+    transform: translateX(-5%);
   }
 }
 
@@ -270,7 +270,6 @@
 .flip.transition.in,
 .flip.transition.out {
   animation-duration: 600ms;
-  perspective: 2000px;
 }
 .horizontal.flip.transition.in {
   animation-name: horizontalFlipIn;
@@ -340,11 +339,10 @@
   animation-name: scaleOut;
 }
 
-/* In */
 @keyframes scaleIn {
   0% {
     opacity: 0;
-    transform: scale(0.7);
+    transform: scale(0.8);
   }
   100% {
     opacity: 1;
@@ -360,10 +358,11 @@
   }
   100% {
     opacity: 0;
-    transform: scale(0.7);
+    transform: scale(0.9);
   }
 }
 
+
 /*--------------
       Fly
 ---------------*/

data/assets/stylesheets/semantic_ui/themes/default/views/ad.variables

@@ -9,5 +9,5 @@
 @testColor: @white;
 @testFontWeight: bold;
 @testText: 'Ad';
-@testFontSize: 1em;
-@testMobileFontSize: 0.85714em;
+@testFontSize: @relativeMedium;
+@testMobileFontSize: @relativeTiny;

data/assets/stylesheets/semantic_ui/themes/default/views/card.variables

@@ -7,12 +7,13 @@
 --------------------*/
 
 /* Shadow */
-@shadowDistance: 3px;
-@shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor;
+@shadowDistance: 1px;
+@shadowBoxShadow: 0px @shadowDistance 3px 0px @solidBorderColor;
 
 /* Card */
+@fontFamily: @pageFont;
 @display: flex;
-@background: #FFFFFF;
+@background: @white;
 @borderRadius: @defaultBorderRadius;
 @margin: 1em 0em;
 @minHeight: 0px;
@@ -26,7 +27,10 @@
 ;
 @border: none;
 @zIndex: '';
-@transition: box-shadow @transitionDuration @transitionEasing;
+@transition:
+  box-shadow @defaultDuration @defaultEasing,
+  transform @defaultDuration @defaultEasing
+;
 
 /* Card Group */
 @horizontalSpacing: 1em;
@@ -46,40 +50,41 @@
        Content
 --------------------*/
 
+
 /* Image */
 @imageBackground: @transparentBlack;
 @imagePadding: 0em;
 @imageBorder: none;
-@imageBorderRadius: @borderRadius @borderRadius 0em 0em;
 @imageBoxShadow: none;
 @imageBorder: none;
 
 /* Content */
+@contentDivider: @borderWidth solid @internalBorderColor;
 @contentMargin: 0em;
 @contentBackground: none;
 @contentPadding: 1em 1em;
 @contentFontSize: 1em;
-@contentBorder: none;
 @contentBorderRadius: 0em;
 @contentBoxShadow: none;
+@contentBorder: none;
+
 
 /* Header */
-@headerMargin: 0em;
+@headerMargin: '';
 @headerFontWeight: bold;
-@headerFontSize: 1.2em;
-@headerLineHeight: 1.33em;
+@headerFontSize: @relativeBig;
 @headerLineHeightOffset: -(@lineHeight - 1em) / 2;
 @headerColor: @darkTextColor;
 
 /* Metadata */
-@metaFontSize: 0.9em;
+@metaFontSize: @relativeMedium;
 @metaSpacing: 0.3em;
 @metaColor: @lightTextColor;
 
 /* Icons */
 @actionOpacity: 0.75;
 @actionHoverOpacity: 1;
-@actionTransition: color @transitionDuration @transitionEasing;
+@actionTransition: color @defaultDuration @defaultEasing;
 
 @starColor: #FFB70A;
 @starActiveColor: #FFE623;
@@ -90,7 +95,7 @@
 /* Links */
 @contentLinkColor: '';
 @contentLinkHoverColor: '';
-@contentLinkTransition: color @transitionDuration @transitionEasing;
+@contentLinkTransition: color @defaultDuration @defaultEasing;
 
 @headerLinkColor: @headerColor;
 @headerLinkHoverColor: @linkHoverColor;
@@ -100,14 +105,14 @@
 
 /* Description */
 @descriptionDistance: 0.5em;
-@descriptionColor: rgba(0, 0, 0, 0.5);
+@descriptionColor: rgba(0, 0, 0, 0.68);
 
 /* Content Image */
-@contentImageWidth: auto;
+@contentImageWidth: '';
 @contentImageVerticalAlign: middle;
 
 /* Avatar Image */
-@avatarSize: 2.5em;
+@avatarSize: 2em;
 @avatarBorderRadius: @circularRadius;
 
 /* Paragraph */
@@ -128,29 +133,31 @@
 @extraPadding: 0.75em 1em;
 @extraBoxShadow: none;
 @extraColor: @lightTextColor;
-@extraTransition: color @transitionDuration @transitionEasing;
+@extraTransition: color @defaultDuration @defaultEasing;
 
 /* Extra Links */
 @extraLinkColor: @unselectedTextColor;
 @extraLinkHoverColor: @linkHoverColor;
 
 /* Buttons */
-@buttonMargin: 0em 0em -1px;
-@buttonWidth: 100%;
+@buttonMargin: 0px -@borderWidth;
+@buttonWidth: ~"calc(100% + "(@borderWidth * 2)~")";
 
 /*-------------------
       Variations
 --------------------*/
 
 /* Link */
-@linkHoverBackground: '';
-@linkHoverBorder: none;
+@linkHoverBackground: @white;
+@linkHoverBorder: @border;
 @linkHoverZIndex: 5;
+@linkHoverRaiseDistance: 3px;
+@linkHoverTransform: translateY(-@linkHoverRaiseDistance);
 
-@shadowHoverBoxShadow: 0px @shadowDistance 0px 0px @solidSelectedBorderColor;
+@shadowHoverBoxShadow: 0px @shadowDistance @linkHoverRaiseDistance 0px @solidSelectedBorderColor;
 @linkHoverBoxShadow:
   @shadowHoverBoxShadow,
-  0px 0px 0px 1px @selectedBorderColor
+  @borderShadow
 ;
 
 /* Card Count */
@@ -196,4 +203,7 @@
 @stackableMargin: ~"calc("@oneColumn~" - "(@stackableCardSpacing * 2)~")";
 
 /* Sizes */
-@medium: 1em;
+@medium: 1em;
+
+/* Colored */
+@coloredShadowDistance: 2px;

data/assets/stylesheets/semantic_ui/themes/default/views/feed.variables

@@ -13,18 +13,16 @@
 --------------------*/
 
 /* Event */
-@eventDisplay: table;
 @eventWidth: 100%;
-@eventPadding: 0.5rem 0em;
+@eventPadding: @3px 0em;
 @eventMargin: 0em;
 @eventBackground: none;
 @eventDivider: none;
 
 /* Event Label */
-@labelDisplay: table-cell;
 @labelWidth: 2.5em;
-@labelHeight: 2.5em;
-@labelVerticalAlign: top;
+@labelHeight: auto;
+@labelAlignSelf: stretch;
 @labelTextAlign: left;
 
 /* Icon Label */
@@ -43,12 +41,11 @@
 @imageLabelBorderRadius: @circularRadius;
 
 /* Content w/ Label */
-@labeledContentPadding: 0.5em 0em 0.5em 1.25em;
+@labeledContentMargin: 0.5em 0em @relative5px @relativeLarge;
 @lastLabeledContentPadding: 0em;
 
 /* Content */
-@contentDisplay: table-cell;
-@contentVerticalAlign: top;
+@contentAlignSelf: stretch;
 @contentTextAlign: left;
 @contentWordWrap: break-word;
 
@@ -56,19 +53,19 @@
 @dateMargin: -0.5rem 0em 0em;
 @datePadding: 0em;
 @dateColor: @lightTextColor;
-@dateFontSize: 1em;
+@dateFontSize: @relativeMedium;
 @dateFontWeight: normal;
 @dateFontStyle: normal;
 
 /* Summary */
 @summaryMargin: 0em;
-@summaryFontSize: 1em;
+@summaryFontSize: @relativeMedium;
 @summaryFontWeight: bold;
 @summaryColor: @textColor;
 
 /* Summary Image */
 @summaryImageWidth: auto;
-@summaryImageHeight: 2em;
+@summaryImageHeight: 10em;
 @summaryImageMargin: -0.25em 0.25em 0em 0em;
 @summaryImageVerticalAlign: middle;
 @summaryImageBorderRadius: 0.25em;
@@ -78,7 +75,7 @@
 @summaryDateFloat: none;
 @summaryDateMargin: 0em 0em 0em 0.5em;
 @summaryDatePadding: 0em;
-@summaryDateFontSize: 0.875em;
+@summaryDateFontSize: @relativeTiny;
 @summaryDateFontWeight: @dateFontWeight;
 @summaryDateFontStyle: @dateFontStyle;
 @summaryDateColor: @dateColor;
@@ -102,15 +99,15 @@
 @extraImageWidth: 6em;
 
 /* Extra Text */
-@extraTextPadding: 0.5em 1em;
-@extraTextPointer: 3px solid rgba(0, 0, 0, 0.2);
-@extraTextFontSize: 1em;
-@extraTextLineHeight: 1.33;
+@extraTextPadding: 0em;
+@extraTextPointer: none;
+@extraTextFontSize: @relativeMedium;
+@extraTextLineHeight: @lineHeight;
 @extraTextMaxWidth: 500px;
 
 /* Metadata Group */
 @metadataDisplay: inline-block;
-@metadataFontSize: 0.875em;
+@metadataFontSize: @relativeTiny;
 @metadataMargin: 0.5em 0em 0em;
 @metadataBackground: none;
 @metadataBorder: none;
@@ -135,15 +132,10 @@
 @metadataActionCursor: pointer;
 @metadataActionOpacity: 1;
 @metadataActionColor: rgba(0, 0, 0, 0.5);
-@metadataActionTransition: color @transitionDuration @transitionEasing;
+@metadataActionTransition: color @defaultDuration @defaultEasing;
 
 @metadataActionHoverColor: @selectedTextColor;
 
 /*-------------------
       Variations
 --------------------*/
-
-/* Size */
-@small: 0.9em;
-@medium: 1em;
-@large: 1.1em;

data/assets/stylesheets/semantic_ui/themes/default/views/item.variables

@@ -10,7 +10,7 @@
 @groupMargin: 1.5em 0em;
 
 /* Item */
-@display: table;
+@display: flex;
 @background: transparent;
 @borderRadius: 0rem;
 @minHeight: 0px;
@@ -19,7 +19,7 @@
 @boxShadow: none;
 @border: none;
 @zIndex: '';
-@transition: box-shadow @transitionDuration @transitionEasing;
+@transition: box-shadow @defaultDuration @defaultEasing;
 
 /* Responsive */
 @itemSpacing: 1em;
@@ -40,7 +40,7 @@
 --------------------*/
 
 /* Image */
-@imageDisplay: table-cell;
+@imageDisplay: block;
 @imageFloat: none;
 @imageMaxHeight: '';
 @imageVerticalAlign: top;
@@ -52,10 +52,10 @@
 @imageBorder: none;
 
 /* Content */
-@contentDisplay: table-cell;
+@contentDisplay: block;
 @contentVerticalAlign: top;
 
-@contentWidth: 100%;
+@contentWidth: auto;
 @contentOffset: 0em;
 @contentBackground: none;
 @contentMargin: 0em;
@@ -68,10 +68,11 @@
 /* Header */
 @headerMargin: -@lineHeightOffset 0em 0em;
 @headerFontWeight: bold;
-@headerFontSize: 1.2em;
+@headerFontSize: @relativeBig;
 @headerColor: @darkTextColor;
 
 /* Metadata */
+@metaMargin: 0.5em 0em 0.5em;
 @metaFontSize: 1em;
 @metaLineHeight: 1em;
 @metaSpacing: 0.3em;
@@ -80,7 +81,7 @@
 /* Icons */
 @actionOpacity: 0.75;
 @actionHoverOpacity: 1;
-@actionTransition: color @transitionDuration @transitionEasing;
+@actionTransition: color @defaultDuration @defaultEasing;
 
 /* Actions */
 @favoriteColor: #FFB70A;
@@ -95,14 +96,14 @@
 @metaLinkHoverColor: @textColor;
 @contentLinkColor: '';
 @contentLinkHoverColor: '';
-@contentLinkTransition: color @transitionDuration @transitionEasing;
+@contentLinkTransition: color @defaultDuration @defaultEasing;
 
 
 /* Description */
 @descriptionDistance: 0.6em;
-@descriptionMaxWidth: 550px;
+@descriptionMaxWidth: auto;
 @descriptionFontSize: 1em;
-@descriptionLineHeight: 1.33;
+@descriptionLineHeight: @lineHeight;
 @descriptionColor: @textColor;
 
 /* Content Image */
@@ -131,7 +132,7 @@
 @extraPadding: 0em 0em 0em;
 @extraBoxShadow: none;
 @extraColor: @lightTextColor;
-@extraTransition: color @transitionDuration @transitionEasing;
+@extraTransition: color @defaultDuration @defaultEasing;
 
 /*-------------------
       Variations