icon.less in less-rails-semantic_ui-2.0.0.0

- old
+ new

@@ -11,11 +11,11 @@
 /*!
  * # Semantic UI - Icon
  * http://github.com/semantic-org/semantic-ui/
  *
  *
- * Copyright 2014 Contributors
+ * Copyright 2015 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
  */
 
@@ -54,18 +54,18 @@
   width: @width;
   height: @height;
 
   font-family: 'Icons';
   font-style: normal;
-  line-height: 1;
   font-weight: normal;
   text-decoration: inherit;
   text-align: center;
 
   speak: none;
   font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
   backface-visibility: hidden;
 }
 
 i.icon:before {
   background: none !important;
@@ -79,10 +79,11 @@
     Loading
 ---------------*/
 
 i.icon.loading {
   height: 1em;
+  line-height: 1;
   animation: icon-loading @loadingDuration linear infinite;
 }
 @keyframes icon-loading {
  from {
     transform: rotate(0deg);
@@ -107,11 +108,10 @@
 i.emphasized.icon {
   opacity: 1;
 }
 
 i.disabled.icon {
-  pointer-events: none;
   opacity: @disabledOpacity !important;
 }
 
 
 /*******************************
@@ -124,11 +124,11 @@
 --------------------*/
 
 i.link.icon {
   cursor: pointer;
   opacity: @linkOpacity;
-  transition: opacity @transitionDuration @transitionEasing;
+  transition: opacity @defaultDuration @defaultEasing;
 }
 i.link.icon:hover {
   opacity: 1 !important;
 }
 
@@ -136,16 +136,15 @@
       Circular
 --------------------*/
 
 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;
 }
 i.circular.inverted.icon {
   border: none;
@@ -182,170 +181,276 @@
 /*-------------------
       Bordered
 --------------------*/
 
 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;
   box-shadow: none;
 }
 
 /*-------------------
-       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.inverted.orange.icon {
+  color: @lightOrange !important;
 }
-i.purple.icon {
-  color: @purple !important;
+i.inverted.bordered.orange.icon,
+i.inverted.circular.orange.icon {
+  background-color: @orange !important;
+  color: @white !important;
 }
-i.red.icon {
-  color: @red !important;
-}
-i.teal.icon {
-  color: @teal !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.bordered.green.icon,
+i.inverted.circular.green.icon {
+  background-color: @green !important;
+  color: @white !important;
 }
-i.inverted.pink.icon {
-  color: @lightPink !important;
+
+/* Teal */
+i.teal.icon {
+  color: @teal !important;
 }
-i.inverted.purple.icon {
-  color: @lightPurple !important;
-}
-i.inverted.red.icon {
-  color: @lightRed !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;
 }
 
-.loadUIOverrides();
\ No newline at end of file
+/*******************************
+            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();