less-rails-semantic_ui 2.0.7.0 → 2.1.4.0

data/assets/stylesheets/semantic_ui/definitions/collections/message.less

@@ -86,33 +86,33 @@
 }
 
 /* List */
-.ui.message ul.list {
+.ui.message .list:not(.ui) {
   text-align: left;
   padding: 0em;
   opacity: @listOpacity;
   list-style-position: @listStylePosition;
   margin: @listMargin 0em 0em;
 }
-.ui.message ul.list:first-child {
+.ui.message .list:not(.ui):first-child {
   margin-top: 0em;
 }
-.ui.message ul.list:last-child {
+.ui.message .list:not(.ui):last-child {
   margin-bottom: 0em;
 }
-.ui.message ul.list li {
+.ui.message .list:not(.ui) li {
   position: relative;
   list-style-type: none;
   margin: 0em 0em @listItemMargin @listItemIndent;
   padding: 0em;
 }
-.ui.message ul.list li:before {
+.ui.message .list:not(.ui) li:before {
   position: absolute;
   content: '•';
   left: -1em;
   height: 100%;
   vertical-align: baseline;
 }
-.ui.message ul.list li:last-child {
+.ui.message .list:not(.ui) li:last-child {
   margin-bottom: 0em;
 }
 

data/assets/stylesheets/semantic_ui/definitions/collections/table.less

@@ -475,6 +475,21 @@
   white-space: nowrap;
 }
 
+/*--------------
+     Fixed
+---------------*/
+
+.ui.fixed.table {
+  table-layout: fixed;
+}
+
+.ui.fixed.table th,
+.ui.fixed.table td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
 /*--------------
    Hoverable
 ---------------*/
@@ -580,6 +595,10 @@
    Single Line
 ---------------*/
 
+.ui.table[class*="single line"],
+.ui.table [class*="single line"] {
+  white-space: nowrap;
+}
 .ui.table[class*="single line"],
 .ui.table [class*="single line"] {
   white-space: nowrap;

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

@@ -362,17 +362,81 @@
 }
 
 /* States */
+
+/* Hover */
 .ui.inverted.button:hover {
   background: @white;
   box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
   color: @hoverColor;
 }
-.ui.inverted.button:focus {
+
+/* Active / Focus */
+.ui.inverted.button:focus,
+.ui.inverted.button.active {
   background: @white;
   box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
   color: @focusColor;
 }
 
+/* Active Focus */
+.ui.inverted.button.active:focus {
+  background: @midWhite;
+  box-shadow: 0px 0px 0px @invertedBorderSize @midWhite inset !important;
+  color: @focusColor;
+}
+
+
+/*-------------------
+    Labeled Button
+--------------------*/
+
+.ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  flex-direction: row;
+  background: none !important;
+  padding: 0px !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.ui.labeled.button > .button {
+  margin: 0px;
+}
+.ui.labeled.button > .label {
+  display: flex;
+  align-items: @labeledLabelAlign;
+  margin: 0px 0px 0px @labeledLabelBorderOffset !important;
+  font-size: @labeledLabelFontSize;
+  padding: @labeledLabelPadding;
+  font-size: @labeledLabelFontSize;
+  border-color: @labeledLabelBorderColor;
+}
+
+/* Tag */
+.ui.labeled.button > .tag.label:before {
+  width: @labeledTagLabelSize;
+  height: @labeledTagLabelSize;
+}
+
+/* Right */
+.ui.labeled.button:not([class*="left labeled"]) > .button {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui.labeled.button:not([class*="left labeled"]) > .label {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+/* Left Side */
+.ui[class*="left labeled"].button > .button {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.ui[class*="left labeled"].button > .label {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
 
 /*-------------------
        Social
@@ -529,7 +593,7 @@
      Icon
 ---------------*/
 
-.ui.button > .icon {
+.ui.button > .icon:not(.button) {
   height: @iconHeight;
   opacity: @iconOpacity;
   margin: @iconMargin;
@@ -537,7 +601,7 @@
   vertical-align: @iconVerticalAlign;
   color: @iconColor;
 }
-.ui.button > .right.icon {
+.ui.button > .right.icon:not(.button) {
   margin: @rightIconMargin;
 }
 
@@ -780,10 +844,11 @@
   border-radius: 0px;
   border-top-left-radius: inherit;
   border-bottom-left-radius: inherit;
+  text-align: center;
 
+  margin: @labeledIconMargin;
   width: @labeledIconWidth;
   background-color: @labeledIconBackgroundColor;
-  text-align: center;
   color: @labeledIconColor;
   box-shadow: @labeledIconLeftShadow;
 }
@@ -819,7 +884,7 @@
   width: 100%;
   top: 50%;
   text-align: center;
-  margin-top: -(@lineHeight / 2);
+  transform: translateY(-50%);
 }
 
 .ui.labeled.icon.buttons .button > .icon {
@@ -1220,8 +1285,8 @@
 /* Basic */
 .ui.basic.black.buttons .button,
 .ui.basic.black.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @black inset !important;
+  color: @black !important;
 }
 .ui.basic.black.buttons .button:hover,
 .ui.basic.black.button:hover {
@@ -1233,6 +1298,7 @@
 .ui.basic.black.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @blackFocus inset !important;
+  color: @blackHover !important;
 }
 .ui.basic.black.buttons .active.button,
 .ui.basic.black.active.button {
@@ -1358,8 +1424,8 @@
 /* Basic */
 .ui.basic.grey.buttons .button,
 .ui.basic.grey.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @grey inset !important;
+  color: @grey !important;
 }
 .ui.basic.grey.buttons .button:hover,
 .ui.basic.grey.button:hover {
@@ -1371,6 +1437,7 @@
 .ui.basic.grey.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @greyFocus inset !important;
+  color: @greyHover !important;
 }
 .ui.basic.grey.buttons .active.button,
 .ui.basic.grey.active.button {
@@ -1497,8 +1564,8 @@
 /* Basic */
 .ui.basic.brown.buttons .button,
 .ui.basic.brown.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @brown inset !important;
+  color: @brown !important;
 }
 .ui.basic.brown.buttons .button:hover,
 .ui.basic.brown.button:hover {
@@ -1510,6 +1577,7 @@
 .ui.basic.brown.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @brownFocus inset !important;
+  color: @brownHover !important;
 }
 .ui.basic.brown.buttons .active.button,
 .ui.basic.brown.active.button {
@@ -1635,8 +1703,8 @@
 /* Basic */
 .ui.basic.blue.buttons .button,
 .ui.basic.blue.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @blue inset !important;
+  color: @blue !important;
 }
 .ui.basic.blue.buttons .button:hover,
 .ui.basic.blue.button:hover {
@@ -1648,6 +1716,7 @@
 .ui.basic.blue.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @blueFocus inset !important;
+  color: @blueHover !important;
 }
 .ui.basic.blue.buttons .active.button,
 .ui.basic.blue.active.button {
@@ -1774,8 +1843,8 @@
 /* Basic */
 .ui.basic.green.buttons .button,
 .ui.basic.green.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @green inset !important;
+  color: @green !important;
 }
 .ui.basic.green.buttons .button:hover,
 .ui.basic.green.button:hover {
@@ -1787,6 +1856,7 @@
 .ui.basic.green.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @greenFocus inset !important;
+  color: @greenHover !important;
 }
 .ui.basic.green.buttons .active.button,
 .ui.basic.green.active.button {
@@ -1912,8 +1982,8 @@
 /* Basic */
 .ui.basic.orange.buttons .button,
 .ui.basic.orange.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @orange inset !important;
+  color: @orange !important;
 }
 .ui.basic.orange.buttons .button:hover,
 .ui.basic.orange.button:hover {
@@ -1925,6 +1995,7 @@
 .ui.basic.orange.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeFocus inset !important;
+  color: @orangeHover !important;
 }
 .ui.basic.orange.buttons .active.button,
 .ui.basic.orange.active.button {
@@ -2050,8 +2121,8 @@
 /* Basic */
 .ui.basic.pink.buttons .button,
 .ui.basic.pink.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @pink inset !important;
+  color: @pink !important;
 }
 .ui.basic.pink.buttons .button:hover,
 .ui.basic.pink.button:hover {
@@ -2063,6 +2134,7 @@
 .ui.basic.pink.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkFocus inset !important;
+  color: @pinkHover !important;
 }
 .ui.basic.pink.buttons .active.button,
 .ui.basic.pink.active.button {
@@ -2189,8 +2261,8 @@
 /* Basic */
 .ui.basic.violet.buttons .button,
 .ui.basic.violet.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @violet inset !important;
+  color: @violet !important;
 }
 .ui.basic.violet.buttons .button:hover,
 .ui.basic.violet.button:hover {
@@ -2202,6 +2274,7 @@
 .ui.basic.violet.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @violetFocus inset !important;
+  color: @violetHover !important;
 }
 .ui.basic.violet.buttons .active.button,
 .ui.basic.violet.active.button {
@@ -2327,8 +2400,8 @@
 /* Basic */
 .ui.basic.purple.buttons .button,
 .ui.basic.purple.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @purple inset !important;
+  color: @purple !important;
 }
 .ui.basic.purple.buttons .button:hover,
 .ui.basic.purple.button:hover {
@@ -2340,6 +2413,7 @@
 .ui.basic.purple.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleFocus inset !important;
+  color: @purpleHover !important;
 }
 .ui.basic.purple.buttons .active.button,
 .ui.basic.purple.active.button {
@@ -2465,8 +2539,8 @@
 /* Basic */
 .ui.basic.red.buttons .button,
 .ui.basic.red.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @red inset !important;
+  color: @red !important;
 }
 .ui.basic.red.buttons .button:hover,
 .ui.basic.red.button:hover {
@@ -2478,6 +2552,7 @@
 .ui.basic.red.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @redFocus inset !important;
+  color: @redHover !important;
 }
 .ui.basic.red.buttons .active.button,
 .ui.basic.red.active.button {
@@ -2604,8 +2679,8 @@
 /* Basic */
 .ui.basic.teal.buttons .button,
 .ui.basic.teal.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @teal inset !important;
+  color: @teal !important;
 }
 .ui.basic.teal.buttons .button:hover,
 .ui.basic.teal.button:hover {
@@ -2617,6 +2692,7 @@
 .ui.basic.teal.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @tealFocus inset !important;
+  color: @tealHover !important;
 }
 .ui.basic.teal.buttons .active.button,
 .ui.basic.teal.active.button {
@@ -2743,8 +2819,8 @@
 /* Basic */
 .ui.basic.olive.buttons .button,
 .ui.basic.olive.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @olive inset !important;
+  color: @olive !important;
 }
 .ui.basic.olive.buttons .button:hover,
 .ui.basic.olive.button:hover {
@@ -2756,6 +2832,7 @@
 .ui.basic.olive.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveFocus inset !important;
+  color: @oliveHover !important;
 }
 .ui.basic.olive.buttons .active.button,
 .ui.basic.olive.active.button {
@@ -2881,8 +2958,8 @@
 /* Basic */
 .ui.basic.yellow.buttons .button,
 .ui.basic.yellow.button {
-  box-shadow: 0px 0px 0px @basicBorderSize @borderColor inset !important;
-  color: @textColor !important;
+  box-shadow: 0px 0px 0px @basicBorderSize @yellow inset !important;
+  color: @yellow !important;
 }
 .ui.basic.yellow.buttons .button:hover,
 .ui.basic.yellow.button:hover {
@@ -2894,6 +2971,7 @@
 .ui.basic.yellow.button:focus {
   background: transparent !important;
   box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowFocus inset !important;
+  color: @yellowHover !important;
 }
 .ui.basic.yellow.buttons .active.button,
 .ui.basic.yellow.active.button {

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

@@ -41,13 +41,19 @@
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.container {
-    width: @mobileWidth;
+    width: @mobileWidth !important;
     margin-left: @mobileGutter !important;
     margin-right: @mobileGutter !important;
   }
   .ui.grid.container {
     width: @mobileGridWidth !important;
   }
+  .ui.relaxed.grid.container {
+    width: @mobileRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @mobileVeryRelaxedGridWidth !important;
+  }
 }
 
 /* Tablet */
@@ -60,6 +66,12 @@
   .ui.grid.container {
     width: @tabletGridWidth !important;
   }
+  .ui.relaxed.grid.container {
+    width: @tabletRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @tabletVeryRelaxedGridWidth !important;
+  }
 }
 
 /* Small Monitor */
@@ -72,6 +84,12 @@
   .ui.grid.container {
     width: @computerGridWidth !important;
   }
+  .ui.relaxed.grid.container {
+    width: @computerRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @computerVeryRelaxedGridWidth !important;
+  }
 }
 
 /* Large Monitor */
@@ -84,6 +102,12 @@
   .ui.grid.container {
     width: @largeMonitorGridWidth !important;
   }
+  .ui.relaxed.grid.container {
+    width: @largeMonitorRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @largeMonitorVeryRelaxedGridWidth !important;
+  }
 }
 
 /*******************************