Adds LESS variables to images

src/elements/image.less

@@ -10,6 +10,55 @@
  */
 
 
+
+/*******************************
+           Variables
+*******************************/
+
+@import "../global.variables";
+
+/*-------------------
+    Globals Used
+--------------------*/
+
+/*
+@borderColor
+
+*/
+
+/*-------------------
+   Segment Variables
+--------------------*/
+
+@placeholderColor: rgba(0, 0, 0, 0.05);
+@roundedBorderRadius: 0.3125em;
+
+@imageSpacing: 0.25rem;
+
+@avatarSize: 2em;
+
+@floatedHorizontalMargin: 1em;
+@floatedVerticalMargin: 1em;
+
+@mini: 0.7em;
+@tiny: 0.8em;
+@small: 0.875em;
+@medium: 1em;
+@large: 1.125em;
+@big: 1.25em;
+@huge: 1.375em;
+@massive: 1.5em;
+
+@miniWidth: 20px;
+@tinyWidth: 80px;
+@smallWidth: 150px;
+@mediumWidth: 300px;
+@largeWidth: 450px;
+@bigWidth: 600px;
+@hugeWidth: 800px;
+@massiveWidth: 960px;
+
+
 /*******************************
              Image
 *******************************/
@@ -19,7 +68,7 @@
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: @placeholderColor;
 }
 img.ui.image {
   display: block;
@@ -38,7 +87,7 @@ img.ui.image {
 
 .ui.disabled.image {
   cursor: default;
-  opacity: 0.3;
+  opacity: @disabledOpacity;
 }
 
 
@@ -54,9 +103,7 @@ img.ui.image {
 .ui.rounded.images img,
 .ui.rounded.image img,
 .ui.rounded.image {
-  -webkit-border-radius: 0.3125em;
-  -moz-border-radius: 0.3125em;
-  border-radius: 0.3125em;
+  border-radius: @roundedBorderRadius;
 }
 
 /*--------------
@@ -67,9 +114,9 @@ img.ui.image {
 .ui.circular.images img,
 .ui.circular.image img,
 .ui.circular.image {
-  -webkit-border-radius: 500rem;
-  -moz-border-radius: 500rem;
-  border-radius: 500rem;
+  -webkit-border-radius: @circularRadius;
+  -moz-border-radius: @circularRadius;
+  border-radius: @circularRadius;
 }
 
 /*--------------
@@ -96,12 +143,12 @@ img.ui.image {
   margin-right: 0.5em;
 
   display: inline-block;
-  width: 2em;
-  height: 2em;
+  width: @avatarSize;
+  height: @avatarSize;
 
-  -webkit-border-radius: 500rem;
-  -moz-border-radius: 500rem;
-  border-radius: 500rem;
+  -webkit-border-radius: @circularRadius;
+  -moz-border-radius: @circularRadius;
+  border-radius: @circularRadius;
 }
 
 
@@ -113,14 +160,14 @@ img.ui.image {
 .ui.floated.image,
 .ui.floated.images {
   float: left;
-  margin-right: 1em;
-  margin-bottom: 1em;
+  margin-right: @floatedHorizontalMargin;
+  margin-bottom: @floatedVerticalMargin;
 }
 .ui.right.floated.images,
 .ui.right.floated.image {
   float: right;
-  margin-bottom: 1em;
-  margin-left: 1em;
+  margin-bottom: @floatedVerticalMargin;
+  margin-left: @floatedHorizontalMargin;
 }
 
 
@@ -128,41 +175,53 @@ img.ui.image {
      Sizes
 ---------------*/
 
-.ui.tiny.images .image,
-.ui.tiny.images img,
-.ui.tiny.image {
-  width: 20px;
-  font-size: 0.7rem;
-}
 .ui.mini.images .image,
 .ui.mini.images img,
 .ui.mini.image {
-  width: 35px;
-  font-size: 0.8rem;
+  width: @miniWidth;
+  font-size: @mini;
+}
+.ui.tiny.images .image,
+.ui.tiny.images img,
+.ui.tiny.image {
+  width: @tinyWidth;
+  font-size: @tiny;
 }
 .ui.small.images .image,
 .ui.small.images img,
 .ui.small.image {
-  width: 80px;
-  font-size: 0.9rem;
+  width: @smallWidth;
+  font-size: @small;
 }
 .ui.medium.images .image,
 .ui.medium.images img,
 .ui.medium.image {
-  width: 300px;
-  font-size: 1rem;
+  width: @mediumWidth;
+  font-size: @medium;
 }
 .ui.large.images .image,
 .ui.large.images img,
 .ui.large.image {
-  width: 450px;
-  font-size: 1.1rem;
+  width: @largeWidth;
+  font-size: @large;
+}
+.ui.big.images .image,
+.ui.big.images img,
+.ui.big.image {
+  width: @bigWidth;
+  font-size: @big;
 }
 .ui.huge.images .image,
 .ui.huge.images img,
 .ui.huge.image {
-  width: 600px;
-  font-size: 1.2rem;
+  width: @hugeWidth;
+  font-size: @huge;
+}
+.ui.massive.images .image,
+.ui.massive.images img,
+.ui.massive.image {
+  width: @massiveWidth;
+  font-size: @massive;
 }
 
 /*******************************
@@ -171,11 +230,11 @@ img.ui.image {
 
 .ui.images {
   font-size: 0em;
-  margin: 0em -0.25rem 0rem;
+  margin: 0em -@imageSpacing 0rem;
 }
 
 .ui.images .image,
 .ui.images img {
   display: inline-block;
-  margin: 0em 0.25em 0.5em;
+  margin: 0em @imageSpacing (@imageSpacing * 2);
 }

src/global.variables

@@ -113,9 +113,11 @@
       Borders
 --------------------*/
 
-@borderColor         : rgba(0, 0, 0, 0.1);
-@selectedBorderColor : rgba(0, 0, 0, 0.2);
-@solidBorderColor    : #DDDDDD;
+@circularRadius           : 500rem;
+
+@borderColor              : rgba(0, 0, 0, 0.1);
+@selectedBorderColor      : rgba(0, 0, 0, 0.2);
+@solidBorderColor         : #DDDDDD;
 
 @whiteBorderColor         : rgba(255, 255, 255, 0.3);
 @selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);