less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

data/assets/stylesheets/semantic_ui/definitions/elements/reveal.less

@@ -13,7 +13,7 @@
  * http://github.com/semantic-org/semantic-ui/
  *
  *
- * Copyright 2014 Contributors
+ * Copyright 2015 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
@@ -51,6 +51,7 @@
 }
 
 /* Make sure hovered element is on top of other reveal */
+.ui.active.reveal .visible.content,
 .ui.reveal:hover .visible.content {
   z-index: @activeZIndex !important;
 }
@@ -76,9 +77,7 @@
   float: left;
 
   margin: 0em;
-  transition:
-    transform @transitionDuration @transitionEasing @transitionDelay,
-  ;
+  transition: @slideTransition;
 }
 
 .ui.slide.reveal > .visible.content {
@@ -90,9 +89,11 @@
   width: 100% !important;
   transform: translateX(100%) !important;
 }
+.ui.slide.active.reveal > .visible.content,
 .ui.slide.reveal:hover > .visible.content {
   transform: translateX(-100%) !important;
 }
+.ui.slide.active.reveal > .hidden.content,
 .ui.slide.reveal:hover > .hidden.content {
   transform: translateX(0%) !important;
 }
@@ -103,9 +104,11 @@
 .ui.slide.right.reveal > .hidden.content {
   transform: translateX(-100%) !important;
 }
+.ui.slide.right.active.reveal > .visible.content,
 .ui.slide.right.reveal:hover > .visible.content {
   transform: translateX(100%) !important;
 }
+.ui.slide.right.active.reveal > .hidden.content,
 .ui.slide.right.reveal:hover > .hidden.content {
   transform: translateX(0%) !important;
 }
@@ -113,9 +116,11 @@
 .ui.slide.up.reveal > .hidden.content {
   transform: translateY(100%) !important;
 }
+.ui.slide.up.active.reveal > .visible.content,
 .ui.slide.up.reveal:hover > .visible.content {
   transform: translateY(-100%) !important;
 }
+.ui.slide.up.active.reveal > .hidden.content,
 .ui.slide.up.reveal:hover > .hidden.content {
   transform: translateY(0%) !important;
 }
@@ -123,9 +128,11 @@
 .ui.slide.down.reveal > .hidden.content {
   transform: translateY(-100%) !important;
 }
+.ui.slide.down.active.reveal > .visible.content,
 .ui.slide.down.reveal:hover > .visible.content {
   transform: translateY(100%) !important;
 }
+.ui.slide.down.active.reveal > .hidden.content,
 .ui.slide.down.reveal:hover > .hidden.content {
   transform: translateY(0%) !important;
 }
@@ -138,6 +145,7 @@
 .ui.fade.reveal > .visible.content {
   opacity: 1;
 }
+.ui.fade.active.reveal > .visible.content,
 .ui.fade.reveal:hover > .visible.content {
   opacity: 0;
 }
@@ -158,9 +166,7 @@
   float: left;
 
   margin: 0em;
-  transition:
-    transform @transitionDuration @transitionEasing @transitionDelay,
-  ;
+  transition: @moveTransition;
 }
 
 .ui.move.reveal > .visible.content {
@@ -171,15 +177,19 @@
   left: 0% !important;
   width: 100% !important;
 }
+.ui.move.active.reveal > .visible.content,
 .ui.move.reveal:hover > .visible.content {
   transform: translateX(-100%) !important;
 }
+.ui.move.right.active.reveal > .visible.content,
 .ui.move.right.reveal:hover > .visible.content {
   transform: translateX(100%) !important;
 }
+.ui.move.up.active.reveal > .visible.content,
 .ui.move.up.reveal:hover > .visible.content {
   transform: translateY(-100%) !important;
 }
+.ui.move.down.active.reveal > .visible.content,
 .ui.move.down.reveal:hover > .visible.content {
   transform: translateY(100%) !important;
 }
@@ -199,7 +209,9 @@
 .ui.rotate.right.reveal > .visible.content {
   transform-origin: bottom right;
 }
+.ui.rotate.active.reveal > .visible.conten,
 .ui.rotate.reveal:hover > .visible.content,
+.ui.rotate.right.active.reveal > .visible.content,
 .ui.rotate.right.reveal:hover > .visible.content {
   transform: rotate(@rotateDegrees);
 }
@@ -207,6 +219,7 @@
 .ui.rotate.left.reveal > .visible.content {
   transform-origin: bottom left;
 }
+.ui.rotate.left.active.reveal > .visible.content,
 .ui.rotate.left.reveal:hover > .visible.content {
   transform: rotate(-@rotateDegrees);
 }
@@ -221,6 +234,7 @@
 .ui.disabled.reveal > .content {
   transition: none !important;
 }
+.ui.disabled.active.reveal > .visible.content,
 .ui.disabled.reveal:hover > .visible.content {
   position: static !important;
   display: block !important;
@@ -231,6 +245,7 @@
   bottom: auto !important;
   transform: none !important;
 }
+.ui.disabled.active.reveal > .hidden.content,
 .ui.disabled.reveal:hover > .hidden.content {
   display: none !important;
 }
@@ -241,11 +256,11 @@
 *******************************/
 
 /*--------------
-     Masked
+     Visible
 ---------------*/
 
-.ui.masked.reveal {
-  overflow: hidden;
+.ui.visible.reveal {
+  overflow: visible;
 }
 
 /*--------------

data/assets/stylesheets/semantic_ui/definitions/elements/segment.less

@@ -13,7 +13,7 @@
  * http://github.com/semantic-org/semantic-ui/
  *
  *
- * Copyright 2014 Contributors
+ * Copyright 2015 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
@@ -36,8 +36,8 @@
   position: relative;
   background-color: @background;
   box-shadow: @boxShadow;
-  margin: @margin 0em;
-  padding: @verticalPadding @horizontalPadding;
+  margin: @margin;
+  padding: @padding;
   border-radius: @borderRadius;
   border: @border;
 }
@@ -49,40 +49,23 @@
   margin-bottom: 0em;
 }
 
-.ui.segment:after {
-  content: '';
-  display: block;
-  height: 0px;
-  clear: both;
-  visibility: hidden;
-}
 
 /* Vertical */
-.ui[class*="vertical segment"] {
+.ui.vertical.segment {
   margin: 0em;
   padding-left: 0em;
   padding-right: 0em;
 
   background-color: transparent;
   border-radius: 0px;
+  box-shadow: none;
   border: none;
-  box-shadow: 0px -1px 0px @borderColor inset;
+  border-bottom: @borderWidth solid @borderColor;
 }
-.ui[class*="vertical segment"]:last-child {
-  box-shadow: none;
+.ui.vertical.segment:last-child {
+  border-bottom: none;
 }
 
-/* Horizontal */
-.ui[class*="horizontal segment"] {
-  margin: 0em;
-  padding-top: 0em;
-  padding-bottom: 0em;
-
-  background-color: transparent;
-  border-radius: 0px;
-  border: none;
-  box-shadow: 1px 0px 0px @borderColor;
-}
 
 /*-------------------
     Loose Coupling
@@ -118,7 +101,7 @@
   padding-bottom: @pageGridMargin;
 }
 .ui.grid.segment {
-  margin: @margin 0rem;
+  margin: @margin;
   border-radius: @borderRadius;
 }
 
@@ -129,7 +112,7 @@
   box-shadow: @boxShadow;
 }
 .ui[class*="very basic"].table.segment {
-  padding: @verticalPadding @horizontalPadding;
+  padding: @padding;
 }
 
 
@@ -141,6 +124,7 @@
         Piled
 --------------------*/
 
+.ui.piled.segments,
 .ui.piled.segment {
   margin: @piledMargin 0em;
   box-shadow: @piledBoxShadow;
@@ -152,6 +136,8 @@
 .ui.piled.segment:last-child {
   margin-bottom: 0em;
 }
+.ui.piled.segments:after,
+.ui.piled.segments:before,
 .ui.piled.segment:after,
 .ui.piled.segment:before {
   background-color: @white;
@@ -162,18 +148,21 @@
   left: 0px;
   position: absolute;
   width: 100%;
+  border: @piledBorder;
   box-shadow: @piledBoxShadow;
 }
-.ui.piled.segment:after {
-  transform: rotate(@piledDegrees);
-  top: 0;
-  z-index: -1;
-}
+.ui.piled.segments:before,
 .ui.piled.segment:before {
   transform: rotate(-@piledDegrees);
   top: 0;
   z-index: -2;
 }
+.ui.piled.segments:after,
+.ui.piled.segment:after {
+  transform: rotate(@piledDegrees);
+  top: 0;
+  z-index: -1;
+}
 
 /* Piled Attached */
 .ui[class*="top attached"].piled.segment {
@@ -198,8 +187,10 @@
 .ui.stacked.segment {
   padding-bottom: @stackedPadding;
 }
-.ui.stacked.segment:after,
-.ui.stacked.segment:before {
+.ui.stacked.segments:before,
+.ui.stacked.segments:after,
+.ui.stacked.segment:before,
+.ui.stacked.segment:after {
   content: '';
   position: absolute;
   bottom: -(@stackedHeight / 2);
@@ -212,23 +203,39 @@
   height: @stackedHeight;
   visibility: visible;
 }
+.ui.stacked.segments:before,
 .ui.stacked.segment:before {
   display: none;
 }
 
 /* Add additional page */
+.ui.tall.stacked.segments:before,
 .ui.tall.stacked.segment:before {
   display: block;
   bottom: 0px;
 }
 
 /* Inverted */
-.ui.stacked.inverted.segment:after,
-.ui.stacked.inverted.segment:before {
+.ui.stacked.inverted.segments:before,
+.ui.stacked.inverted.segments:after,
+.ui.stacked.inverted.segment:before,
+.ui.stacked.inverted.segment:after {
   background-color: @subtleTransparentBlack;
   border-top: 1px solid @selectedBorderColor;
 }
 
+/*-------------------
+       Padded
+--------------------*/
+
+.ui.padded.segment {
+  padding: @paddedSegmentPadding;
+}
+
+.ui[class*="very padded"].segment {
+  padding: @veryPaddedSegmentPadding;
+}
+
 /*-------------------
        Compact
 --------------------*/
@@ -237,6 +244,16 @@
   display: table;
 }
 
+/* Compact Group */
+.ui.compact.segments {
+  display: inline-flex;
+}
+.ui.compact.segments .segment,
+.ui.segments .compact.segment {
+  display: block;
+  flex: 0 1 auto;
+}
+
 /*-------------------
        Circular
 --------------------*/
@@ -253,11 +270,119 @@
        Raised
 --------------------*/
 
+.ui.raised.segments,
 .ui.raised.segment {
   box-shadow: @raisedBoxShadow;
 }
 
 
+/*******************************
+            Groups
+*******************************/
+
+/* Group */
+.ui.segments {
+  flex-direction: column;
+  position: relative;
+  margin: @groupedMargin;
+  border: @groupedBorder;
+  box-shadow: @groupedBoxShadow;
+  border-radius: @groupedBorderRadius;
+}
+.ui.segments:first-child {
+  margin-top: 0em;
+}
+.ui.segments:last-child {
+  margin-bottom: 0em;
+}
+
+
+/* Nested Segment */
+.ui.segments > .segment {
+  top: 0px;
+  bottom: 0px;
+  border-radius: 0px;
+  margin: @groupedSegmentMargin;
+  width: @groupedSegmentWidth;
+  box-shadow: @groupedSegmentBoxShadow;
+  border: @groupedSegmentBorder;
+  border-top: @groupedSegmentDivider;
+}
+
+.ui.segments:not(.horizontal) > .segment:first-child {
+  top: @attachedTopOffset;
+  bottom: 0px;
+  border-top: none;
+  margin-top: 0em;
+  bottom: 0px;
+  margin-bottom: 0em;
+  top: @attachedTopOffset;
+  border-radius: @borderRadius @borderRadius 0em 0em;
+}
+
+/* Bottom */
+.ui.segments:not(.horizontal) > .segment:last-child {
+  top: @attachedBottomOffset;
+  bottom: 0px;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  box-shadow: @attachedBottomBoxShadow;
+  border-radius: 0em 0em @borderRadius @borderRadius;
+}
+
+
+/* Nested Group */
+.ui.segments > .ui.segments {
+  border-top: @groupedSegmentDivider;
+  margin: @nestedGroupMargin;
+}
+.ui.segments > .segments:first-child {
+  border-top: none;
+}
+.ui.segments > .segment + .segments:not(.horizontal) {
+  margin-top: 0em;
+}
+
+/* Horizontal Group */
+.ui.horizontal.segments {
+  display: flex;
+  flex-direction: row;
+  background-color: transparent;
+  border-radius: 0px;
+  padding: 0em;
+  background-color: @background;
+  box-shadow: @boxShadow;
+  margin: @margin;
+  border-radius: @borderRadius;
+  border: @border;
+}
+
+/* Nested Horizontal Group */
+.ui.segments > .horizontal.segments {
+  margin: 0em;
+  background-color: transparent;
+  border-radius: 0px;
+  border: none;
+  box-shadow: none;
+  border-top: @groupedSegmentDivider;
+}
+
+/* Horizontal Segment */
+.ui.horizontal.segments > .segment {
+  flex: 1 1 auto;
+  margin: 0em;
+  min-width: 0px;
+  background-color: transparent;
+  border-radius: 0px;
+  border: none;
+  box-shadow: none;
+  border-left: @borderWidth solid @borderColor;
+}
+.ui.horizontal.segments > .segment:first-child {
+  border-left: none;
+}
+
+
 /*******************************
             States
 *******************************/
@@ -338,129 +463,142 @@
 --------------------*/
 
 .ui.basic.segment {
-  position: relative;
-  background-color: transparent;
-  box-shadow: none;
-
-  border-radius: 0px;
+  background: @basicBackground;
+  box-shadow: @basicBoxShadow;
+  border: @basicBorder;
+  border-radius: @basicBorderRadius;
 }
 
 /*-------------------
-       Fittted
+       Clearing
 --------------------*/
 
-.ui.fitted.segment {
-  padding: 0em;
+.ui.clearing.segment:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
 }
 
 /*-------------------
        Colors
 --------------------*/
 
-.ui.black.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @black;
-}
-.ui.blue.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @blue;
+/* Red */
+.ui.red.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @red;
 }
-.ui.green.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @green;
+.ui.inverted.red.segment {
+  background-color: @red !important;
+  color: @white !important;
 }
+
+/* Orange */
 .ui.orange.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @orange;
 }
-.ui.pink.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @pink;
-}
-.ui.purple.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @purple;
-}
-.ui.red.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @red;
-}
-.ui.teal.segment:not(.inverted) {
-  border-top: @coloredBorderSize solid @teal;
+.ui.inverted.orange.segment {
+  background-color: @orange !important;
+  color: @white !important;
 }
+
+/* Yellow */
 .ui.yellow.segment:not(.inverted) {
   border-top: @coloredBorderSize solid @yellow;
 }
-
-.ui.black.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
-}
-.ui.blue.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
-}
-.ui.green.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+.ui.inverted.yellow.segment {
+  background-color: @yellow !important;
+  color: @white !important;
 }
-.ui.orange.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+
+/* Olive */
+.ui.olive.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @olive;
 }
-.ui.pink.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+.ui.inverted.olive.segment {
+  background-color: @olive !important;
+  color: @white !important;
 }
-.ui.purple.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+
+/* Green */
+.ui.green.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @green;
 }
-.ui.red.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+.ui.inverted.green.segment {
+  background-color: @green !important;
+  color: @white !important;
 }
-.ui.teal.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+
+/* Teal */
+.ui.teal.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @teal;
 }
-.ui.yellow.segment:not(.inverted):not(.attached) {
-  border-top-left-radius: @coloredBorderRadius !important;
-  border-top-right-radius: @coloredBorderRadius !important;
+.ui.inverted.teal.segment {
+  background-color: @teal !important;
+  color: @white !important;
 }
 
-/*-------------------
-   Inverted Colors
---------------------*/
-
-.ui.inverted.segment,
-.ui.inverted.black.segment {
-  background-color: @black !important;
-  color: @white !important;
+/* Blue */
+.ui.blue.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @blue;
 }
 .ui.inverted.blue.segment {
   background-color: @blue !important;
   color: @white !important;
 }
-.ui.inverted.green.segment {
-  background-color: @green !important;
+
+/* Violet */
+.ui.violet.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @violet;
+}
+.ui.inverted.violet.segment {
+  background-color: @violet !important;
   color: @white !important;
 }
-.ui.inverted.orange.segment {
-  background-color: @orange !important;
+
+/* Purple */
+.ui.purple.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @purple;
+}
+.ui.inverted.purple.segment {
+  background-color: @purple !important;
   color: @white !important;
 }
+
+/* Pink */
+.ui.pink.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @pink;
+}
 .ui.inverted.pink.segment {
   background-color: @pink !important;
   color: @white !important;
 }
-.ui.inverted.purple.segment {
-  background-color: @purple !important;
-  color: @white !important;
+
+/* Brown */
+.ui.brown.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @brown;
 }
-.ui.inverted.red.segment {
-  background-color: @red !important;
+.ui.inverted.brown.segment {
+  background-color: @brown !important;
   color: @white !important;
 }
-.ui.inverted.teal.segment {
-  background-color: @teal !important;
+
+/* Grey */
+.ui.grey.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @grey;
+}
+.ui.inverted.grey.segment {
+  background-color: @grey !important;
   color: @white !important;
 }
-.ui.inverted.yellow.segment {
-  background-color: @yellow !important;
+
+/* Black */
+.ui.black.segment:not(.inverted) {
+  border-top: @coloredBorderSize solid @black;
+}
+.ui.inverted.black.segment {
+  background-color: @black !important;
   color: @white !important;
 }
 
@@ -485,11 +623,11 @@
 .ui.floated.segment,
 .ui[class*="left floated"].segment {
   float: left;
-  margin-right: @margin;
+  margin-right: @floatedDistance;
 }
 .ui[class*="right floated"].segment {
   float: right;
-  margin-left: @margin;
+  margin-left: @floatedDistance;
 }
 
 
@@ -499,8 +637,6 @@
 
 .ui.inverted.segment {
   border: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
   box-shadow: none;
 }
 .ui.inverted.segment .segment {
@@ -521,23 +657,24 @@
 }
 
 /*-------------------
-     Ordinality
+     Emphasis
 --------------------*/
 
+/* Secondary */
 .ui.secondary.segment {
   background: @secondaryBackground;
   color: @secondaryColor;
 }
-
-.ui.tertiary.segment {
-  background: @tertiaryBackground;
-  color: @textColor;
-}
-
 .ui.secondary.inverted.segment {
   background: @secondaryInvertedBackground;
   color: @secondaryInvertedColor;
 }
+
+/* Tertiary */
+.ui.tertiary.segment {
+  background: @tertiaryBackground;
+  color: @tertiaryColor;
+}
 .ui.tertiary.inverted.segment {
   background: @tertiaryInvertedBackground;
   color: @tertiaryInvertedColor;
@@ -587,53 +724,4 @@
   margin-bottom: 0em;
 }
 
-
-/*-------------------
-       Groups
---------------------*/
-
-.ui.segments {
-  margin: @margin 0em;
-}
-.ui.segments:first-child {
-  margin-top: 0em;
-}
-.ui.segments:last-child {
-  margin-bottom: 0em;
-}
-
-.ui.segments > .segment {
-  top: 0px;
-  bottom: 0px;
-  margin: 0em @attachedHorizontalOffset;
-  width: @attachedWidth;
-  max-width: @attachedWidth;
-  border-radius: 0px;
-  box-shadow: @attachedBoxShadow;
-  border: @attachedBorder;
-}
-
-.ui.segments > .segment:not(:first-child) {
-  border-top: none;
-}
-
-/* Top */
-.ui.segments > .segment:first-child {
-  margin-top: 0em;
-  bottom: 0px;
-  margin-bottom: 0em;
-  top: @attachedTopOffset;
-  border-radius: @borderRadius @borderRadius 0em 0em;
-}
-
-/* Bottom */
-.ui.segments > .segment:last-child {
-  bottom: 0px;
-  margin-top: 0em;
-  margin-bottom: 0em;
-  top: @attachedBottomOffset;
-  box-shadow: @attachedBottomBoxShadow;
-  border-radius: 0em 0em @borderRadius @borderRadius;
-}
-
 .loadUIOverrides();