less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

data/assets/stylesheets/semantic_ui/definitions/elements/icon.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
  *
@@ -56,7 +56,6 @@ i.icon {
 
   font-family: 'Icons';
   font-style: normal;
-  line-height: 1;
   font-weight: normal;
   text-decoration: inherit;
   text-align: center;
@@ -64,6 +63,7 @@ i.icon {
   speak: none;
   font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
   backface-visibility: hidden;
 }
 
@@ -81,6 +81,7 @@ i.icon:before {
 
 i.icon.loading {
   height: 1em;
+  line-height: 1;
   animation: icon-loading @loadingDuration linear infinite;
 }
 @keyframes icon-loading {
@@ -109,7 +110,6 @@ i.emphasized.icon {
 }
 
 i.disabled.icon {
-  pointer-events: none;
   opacity: @disabledOpacity !important;
 }
 
@@ -126,7 +126,7 @@ i.disabled.icon {
 i.link.icon {
   cursor: pointer;
   opacity: @linkOpacity;
-  transition: opacity @transitionDuration @transitionEasing;
+  transition: opacity @defaultDuration @defaultEasing;
 }
 i.link.icon:hover {
   opacity: 1 !important;
@@ -138,12 +138,11 @@ i.link.icon:hover {
 
 i.circular.icon {
   border-radius: 500em !important;
+  line-height: 1 !important;
 
   padding: @circularPadding !important;
-
   box-shadow: @circularShadow;
 
-  line-height: 1 !important;
   width: @circularSize !important;
   height: @circularSize !important;
 }
@@ -184,13 +183,13 @@ i.counterclockwise.rotated.icon {
 --------------------*/
 
 i.bordered.icon {
+  line-height: 1;
+  vertical-align: baseline;
+
   width: @borderedSize;
   height: @borderedSize;
-
   padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
   box-shadow: @borderedShadow;
-
-  vertical-align: baseline;
 }
 i.bordered.inverted.icon {
   border: none;
@@ -198,154 +197,260 @@ i.bordered.inverted.icon {
 }
 
 /*-------------------
-       Colors
+      Inverted
 --------------------*/
 
-i.white.icon {
+/* Inverted Shapes */
+i.inverted.bordered.icon,
+i.inverted.circular.icon {
+  background-color: @black !important;
   color: @white !important;
 }
-i.black.icon {
-  color: @black !important;
+
+i.inverted.icon {
+  color: @white;
 }
-i.blue.icon {
-  color: @blue !important;
+
+
+/*-------------------
+       Colors
+--------------------*/
+
+/* Red */
+i.red.icon {
+  color: @red !important;
 }
-i.green.icon {
-  color: @green !important;
+i.inverted.red.icon {
+  color: @lightRed !important;
 }
+i.inverted.bordered.red.icon,
+i.inverted.circular.red.icon {
+  background-color: @red !important;
+  color: @white !important;
+}
+
+/* Orange */
 i.orange.icon {
   color: @orange !important;
 }
-i.pink.icon {
-  color: @pink !important;
-}
-i.purple.icon {
-  color: @purple !important;
-}
-i.red.icon {
-  color: @red !important;
+i.inverted.orange.icon {
+  color: @lightOrange !important;
 }
-i.teal.icon {
-  color: @teal !important;
+i.inverted.bordered.orange.icon,
+i.inverted.circular.orange.icon {
+  background-color: @orange !important;
+  color: @white !important;
 }
+
+/* Yellow */
 i.yellow.icon {
   color: @yellow !important;
 }
+i.inverted.yellow.icon {
+  color: @lightYellow !important;
+}
+i.inverted.bordered.yellow.icon,
+i.inverted.circular.yellow.icon {
+  background-color: @yellow !important;
+  color: @white !important;
+}
 
-
-/*-------------------
-      Inverted
---------------------*/
-
-i.inverted.icon {
-  color: @white;
+/* Olive */
+i.olive.icon {
+  color: @olive !important;
 }
-i.inverted.black.icon {
-  color: @lightBlack !important;
+i.inverted.olive.icon {
+  color: @lightOlive !important;
 }
-i.inverted.blue.icon {
-  color: @lightBlue !important;
+i.inverted.bordered.olive.icon,
+i.inverted.circular.olive.icon {
+  background-color: @olive !important;
+  color: @white !important;
+}
+
+/* Green */
+i.green.icon {
+  color: @green !important;
 }
 i.inverted.green.icon {
   color: @lightGreen !important;
 }
-i.inverted.orange.icon {
-  color: @lightOrange !important;
-}
-i.inverted.pink.icon {
-  color: @lightPink !important;
-}
-i.inverted.purple.icon {
-  color: @lightPurple !important;
+i.inverted.bordered.green.icon,
+i.inverted.circular.green.icon {
+  background-color: @green !important;
+  color: @white !important;
 }
-i.inverted.red.icon {
-  color: @lightRed !important;
+
+/* Teal */
+i.teal.icon {
+  color: @teal !important;
 }
 i.inverted.teal.icon {
   color: @lightTeal !important;
 }
-i.inverted.yellow.icon {
-  color: @lightYellow !important;
+i.inverted.bordered.teal.icon,
+i.inverted.circular.teal.icon {
+  background-color: @teal !important;
+  color: @white !important;
 }
 
-/* Inverted Shapes */
-i.inverted.bordered.icon,
-i.inverted.circular.icon {
-  background-color: #222222 !important;
-  color: #FFFFFF !important;
+/* Blue */
+i.blue.icon {
+  color: @blue !important;
 }
-i.inverted.bordered.black.icon,
-i.inverted.circular.black.icon {
-  background-color: @black !important;
-  color: #FFFFFF !important;
+i.inverted.blue.icon {
+  color: @lightBlue !important;
 }
 i.inverted.bordered.blue.icon,
 i.inverted.circular.blue.icon {
   background-color: @blue !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
-i.inverted.bordered.green.icon,
-i.inverted.circular.green.icon {
-  background-color: @green !important;
-  color: #FFFFFF !important;
+
+/* Violet */
+i.violet.icon {
+  color: @violet !important;
 }
-i.inverted.bordered.orange.icon,
-i.inverted.circular.orange.icon {
-  background-color: @orange !important;
-  color: #FFFFFF !important;
+i.inverted.violet.icon {
+  color: @lightViolet !important;
 }
-i.inverted.bordered.pink.icon,
-i.inverted.circular.pink.icon {
-  background-color: @pink !important;
-  color: #FFFFFF !important;
+i.inverted.bordered.violet.icon,
+i.inverted.circular.violet.icon {
+  background-color: @violet !important;
+  color: @white !important;
+}
+
+/* Purple */
+i.purple.icon {
+  color: @purple !important;
+}
+i.inverted.purple.icon {
+  color: @lightPurple !important;
 }
 i.inverted.bordered.purple.icon,
 i.inverted.circular.purple.icon {
   background-color: @purple !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
-i.inverted.bordered.red.icon,
-i.inverted.circular.red.icon {
-  background-color: @red !important;
-  color: #FFFFFF !important;
+
+/* Pink */
+i.pink.icon {
+  color: @pink !important;
 }
-i.inverted.bordered.teal.icon,
-i.inverted.circular.teal.icon {
-  background-color: @teal !important;
-  color: #FFFFFF !important;
+i.inverted.pink.icon {
+  color: @lightPink !important;
 }
-i.inverted.bordered.yellow.icon,
-i.inverted.circular.yellow.icon {
-  background-color: @yellow !important;
-  color: #FFFFFF !important;
+i.inverted.bordered.pink.icon,
+i.inverted.circular.pink.icon {
+  background-color: @pink !important;
+  color: @white !important;
 }
 
+/* Brown */
+i.brown.icon {
+  color: @brown !important;
+}
+i.inverted.brown.icon {
+  color: @lightBrown !important;
+}
+i.inverted.bordered.brown.icon,
+i.inverted.circular.brown.icon {
+  background-color: @brown !important;
+  color: @white !important;
+}
+
+/* Grey */
+i.grey.icon {
+  color: @grey !important;
+}
+i.inverted.grey.icon {
+  color: @lightGrey !important;
+}
+i.inverted.bordered.grey.icon,
+i.inverted.circular.grey.icon {
+  background-color: @grey !important;
+  color: @white !important;
+}
 
 /*-------------------
         Sizes
 --------------------*/
 
-i.small.icon {
+i.small.icon,
+i.small.icons {
+  line-height: 1;
   font-size: @small;
 }
-i.icon {
+i.icon,
+i.icons {
   font-size: @medium;
 }
-i.large.icon {
-  font-size: @large;
+i.large.icon,
+i.large.icons {
+  line-height: 1;
   vertical-align: middle;
+  font-size: @large;
 }
-i.big.icon {
-  font-size: @big;
+i.big.icon,
+i.big.icons {
+  line-height: 1;
   vertical-align: middle;
+  font-size: @big;
 }
-i.huge.icon {
-  font-size: @huge;
+i.huge.icon,
+i.huge.icons {
+  line-height: 1;
   vertical-align: middle;
+  font-size: @huge;
 }
-i.massive.icon {
-  font-size: @massive;
+i.massive.icon,
+i.massive.icons {
+  line-height: 1;
   vertical-align: middle;
+  font-size: @massive;
+}
+
+/*******************************
+            Groups
+*******************************/
+
+i.icons {
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+}
+
+i.icons .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  margin: 0em;
+  margin: 0;
+}
+
+i.icons .icon:first-child {
+  position: static;
+  width: auto;
+  height: auto;
+  vertical-align: top;
+  transform: none;
+  margin-right: @distanceFromText;
+}
+
+/* Corner Icon */
+i.icons .corner.icon {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+  transform: none;
+  font-size: @cornerIconSize;
+  text-shadow: @cornerIconShadow;
+}
+
+i.icons .inverted.corner.icon {
+  text-shadow: @cornerIconInvertedShadow;
 }
 
-.loadUIOverrides();
+.loadUIOverrides();

data/assets/stylesheets/semantic_ui/definitions/elements/image.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
  *
@@ -116,11 +116,9 @@ img.ui.image {
 ---------------*/
 
 .ui.rounded.images .image,
-.ui.rounded.images img,
-.ui.rounded.images svg,
-.ui.rounded.image img,
-.ui.rounded.image svg,
-.ui.rounded.image {
+.ui.rounded.image,
+.ui.rounded.images .image > *,
+.ui.rounded.image > * {
   border-radius: @roundedBorderRadius;
 }
 
@@ -147,11 +145,9 @@ img.ui.bordered.image {
 }
 
 .ui.circular.images .image,
-.ui.circular.images img,
-.ui.circular.images svg,
-.ui.circular.image img,
-.ui.circular.image svg,
-.ui.circular.image {
+.ui.circular.image,
+.ui.circular.images .image > *,
+.ui.circular.image > * {
   -webkit-border-radius: @circularRadius;
   -moz-border-radius: @circularRadius;
   border-radius: @circularRadius;
@@ -194,6 +190,25 @@ img.ui.bordered.image {
   border-radius: @circularRadius;
 }
 
+/*-------------------
+       Spaced
+--------------------*/
+
+.ui.spaced.image {
+  display: inline-block !important;
+  margin-left: @spacedDistance;
+  margin-right: @spacedDistance;
+}
+
+.ui[class*="left spaced"].image {
+  margin-left: @spacedDistance;
+  margin-right: 0em;
+}
+
+.ui[class*="right spaced"].image {
+  margin-left: 0em;
+  margin-right: @spacedDistance;
+}
 
 /*-------------------
        Floated