less-rails-semantic_ui 1.0.1.0

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

@@ -0,0 +1,351 @@
+/*
+ *= depend_on semantic_ui/theme.config
+ *= depend_on semantic_ui/config/elements/icon.overrides
+ *= depend_on semantic_ui/config/elements/icon.variables
+ */
+
+/*
+ * # Semantic - Icon
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributor
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'icon';
+
+@import 'semantic_ui/theme.config';
+
+/*******************************
+             Icon
+*******************************/
+
+@font-face {
+  font-family: 'Icons';
+  src: asset-url("@{fontPath}/@{fontName}.eot");
+  src:
+    asset-url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
+    asset-url("@{fontPath}/@{fontName}.svg#icons") format('svg'),
+    asset-url("@{fontPath}/@{fontName}.woff") format('woff'),
+    asset-url("@{fontPath}/@{fontName}.ttf") format('truetype')
+  ;
+
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-decoration: inherit;
+  text-transform: none;
+}
+
+i.icon {
+  display: inline-block;
+  opacity: @opacity;
+
+  margin: 0em @distanceFromText 0em 0em;
+
+  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;
+  backface-visibility: hidden;
+}
+
+i.icon:before {
+  background: none !important;
+}
+
+/*******************************
+             Types
+*******************************/
+
+/*--------------
+    Loading
+---------------*/
+
+i.icon.loading {
+  height: 1em;
+  animation: icon-loading @loadingDuration linear infinite;
+}
+@keyframes icon-loading {
+ from {
+    transform: rotate(0deg);
+ }
+ to {
+    transform: rotate(360deg);
+ }
+}
+
+/*******************************
+             States
+*******************************/
+
+i.icon.hover {
+  opacity: 1;
+}
+
+i.icon.active {
+  opacity: 1;
+}
+
+i.emphasized.icon {
+  opacity: 1;
+}
+
+i.disabled.icon {
+  pointer-events: none;
+  opacity: @disabledOpacity !important;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*-------------------
+         Link
+--------------------*/
+
+i.link.icon {
+  cursor: pointer;
+  opacity: @linkOpacity;
+  transition: opacity @transitionDuration @transitionEasing;
+}
+i.link.icon:hover {
+  opacity: 1 !important;
+}
+
+/*-------------------
+      Circular
+--------------------*/
+
+i.circular.icon {
+  border-radius: 500em !important;
+
+  padding: @circularPadding !important;
+
+  box-shadow: @circularShadow;
+
+  line-height: 1 !important;
+  width: @circularSize !important;
+  height: @circularSize !important;
+}
+i.circular.inverted.icon {
+  border: none;
+  box-shadow: none;
+}
+
+/*-------------------
+      Flipped
+--------------------*/
+
+i.flipped.icon,
+i.horizontally.flipped.icon {
+  transform: scale(-1, 1);
+}
+i.vertically.flipped.icon {
+  transform: scale(1, -1);
+}
+
+/*-------------------
+      Rotated
+--------------------*/
+
+i.rotated.icon,
+i.right.rotated.icon,
+i.clockwise.rotated.icon {
+  transform: rotate(90deg);
+}
+
+i.left.rotated.icon,
+i.counterclockwise.rotated.icon {
+  transform: rotate(-90deg);
+}
+
+/*-------------------
+      Bordered
+--------------------*/
+
+i.bordered.icon {
+  width: @borderedSize;
+  height: @borderedSize;
+
+  padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
+  box-shadow: @borderedShadow;
+
+  vertical-align: baseline;
+}
+i.bordered.inverted.icon {
+  border: none;
+  box-shadow: none;
+}
+
+/*-------------------
+       Colors
+--------------------*/
+
+i.white.icon {
+  color: @white !important;
+}
+i.black.icon {
+  color: @black !important;
+}
+i.blue.icon {
+  color: @blue !important;
+}
+i.green.icon {
+  color: @green !important;
+}
+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.teal.icon {
+  color: @teal !important;
+}
+i.yellow.icon {
+  color: @yellow !important;
+}
+
+
+/*-------------------
+      Inverted
+--------------------*/
+
+i.inverted.icon {
+  color: @white;
+}
+i.inverted.black.icon {
+  color: @lightBlack !important;
+}
+i.inverted.blue.icon {
+  color: @lightBlue !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.red.icon {
+  color: @lightRed !important;
+}
+i.inverted.teal.icon {
+  color: @lightTeal !important;
+}
+i.inverted.yellow.icon {
+  color: @lightYellow !important;
+}
+
+/* Inverted Shapes */
+i.inverted.bordered.icon,
+i.inverted.circular.icon {
+  background-color: #222222 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.bordered.black.icon,
+i.inverted.circular.black.icon {
+  background-color: @black !important;
+  color: #FFFFFF !important;
+}
+i.inverted.bordered.blue.icon,
+i.inverted.circular.blue.icon {
+  background-color: @blue !important;
+  color: #FFFFFF !important;
+}
+i.inverted.bordered.green.icon,
+i.inverted.circular.green.icon {
+  background-color: @green !important;
+  color: #FFFFFF !important;
+}
+i.inverted.bordered.orange.icon,
+i.inverted.circular.orange.icon {
+  background-color: @orange !important;
+  color: #FFFFFF !important;
+}
+i.inverted.bordered.pink.icon,
+i.inverted.circular.pink.icon {
+  background-color: @pink !important;
+  color: #FFFFFF !important;
+}
+i.inverted.bordered.purple.icon,
+i.inverted.circular.purple.icon {
+  background-color: @purple !important;
+  color: #FFFFFF !important;
+}
+i.inverted.bordered.red.icon,
+i.inverted.circular.red.icon {
+  background-color: @red !important;
+  color: #FFFFFF !important;
+}
+i.inverted.bordered.teal.icon,
+i.inverted.circular.teal.icon {
+  background-color: @teal !important;
+  color: #FFFFFF !important;
+}
+i.inverted.bordered.yellow.icon,
+i.inverted.circular.yellow.icon {
+  background-color: @yellow !important;
+  color: #FFFFFF !important;
+}
+
+
+/*-------------------
+        Sizes
+--------------------*/
+
+i.small.icon {
+  font-size: @small;
+}
+i.icon {
+  font-size: @medium;
+}
+i.large.icon {
+  font-size: @large;
+  vertical-align: middle;
+}
+i.big.icon {
+  font-size: @big;
+  vertical-align: middle;
+}
+i.huge.icon {
+  font-size: @huge;
+  vertical-align: middle;
+}
+i.massive.icon {
+  font-size: @massive;
+  vertical-align: middle;
+}
+
+.loadUIOverrides();

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

@@ -0,0 +1,267 @@
+/*
+ *= depend_on semantic_ui/theme.config
+ *= depend_on semantic_ui/config/elements/image.overrides
+ *= depend_on semantic_ui/config/elements/image.variables
+ */
+
+/*
+ * # Semantic - Image
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributor
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'image';
+
+@import 'semantic_ui/theme.config';
+
+/*******************************
+             Image
+*******************************/
+
+.ui.image {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  background-color: @placeholderColor;
+}
+img.ui.image {
+  display: block;
+  background: none;
+}
+.ui.image img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/*******************************
+            States
+*******************************/
+
+
+.ui.disabled.image {
+  cursor: default;
+  opacity: @disabledOpacity;
+}
+
+
+/*******************************
+          Variations
+*******************************/
+
+
+/*--------------
+     Inline
+---------------*/
+
+.ui.inline.image,
+.ui.inline.image img {
+  display: inline-block;
+}
+
+/*------------------
+  Vertical Aligned
+-------------------*/
+
+.ui.top.aligned.images .image,
+.ui.top.aligned.image,
+.ui.top.aligned.image img {
+  display: inline-block;
+  vertical-align: top;
+}
+.ui.middle.aligned.images .image,
+.ui.middle.aligned.image,
+.ui.middle.aligned.image img {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ui.bottom.aligned.images .image,
+.ui.bottom.aligned.image,
+.ui.bottom.aligned.image img {
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+/*--------------
+     Rounded
+---------------*/
+
+.ui.rounded.images .image,
+.ui.rounded.images img,
+.ui.rounded.image img,
+.ui.rounded.image {
+  border-radius: @roundedBorderRadius;
+}
+
+/*--------------
+    Bordered
+---------------*/
+
+.ui.bordered.images .image,
+.ui.bordered.images img,
+.ui.bordered.image img,
+img.ui.bordered.image {
+  border: @imageBorder;
+}
+
+/*--------------
+    Circular
+---------------*/
+
+.ui.circular.images,
+.ui.circular.image {
+  overflow: hidden;
+}
+
+.ui.circular.images .image,
+.ui.circular.images img,
+.ui.circular.image img,
+.ui.circular.image {
+  -webkit-border-radius: @circularRadius;
+  -moz-border-radius: @circularRadius;
+  border-radius: @circularRadius;
+}
+
+/*--------------
+     Fluid
+---------------*/
+
+.ui.fluid.images,
+.ui.fluid.image,
+.ui.fluid.images img,
+.ui.fluid.image img {
+  display: block;
+  width: 100%;
+}
+
+
+/*--------------
+     Avatar
+---------------*/
+
+.ui.avatar.images .image,
+.ui.avatar.images img,
+.ui.avatar.image img,
+.ui.avatar.image {
+  margin-right: @avatarMargin;
+
+  display: inline-block;
+  width: @avatarSize;
+  height: @avatarSize;
+
+  -webkit-border-radius: @circularRadius;
+  -moz-border-radius: @circularRadius;
+  border-radius: @circularRadius;
+}
+
+
+/*-------------------
+       Floated
+--------------------*/
+
+.ui.floated.image,
+.ui.floated.images {
+  float: left;
+  margin-right: @floatedHorizontalMargin;
+  margin-bottom: @floatedVerticalMargin;
+}
+.ui.right.floated.images,
+.ui.right.floated.image {
+  float: right;
+  margin-right: 0em;
+  margin-bottom: @floatedVerticalMargin;
+  margin-left: @floatedHorizontalMargin;
+}
+
+.ui.floated.images:last-child,
+.ui.floated.image:last-child {
+  margin-bottom: 0em;
+}
+
+
+.ui.centered.images,
+.ui.centered.image {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/*--------------
+     Sizes
+---------------*/
+
+.ui.mini.images .image,
+.ui.mini.images img,
+.ui.mini.image {
+  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: @smallWidth;
+  font-size: @small;
+}
+.ui.medium.images .image,
+.ui.medium.images img,
+.ui.medium.image {
+  width: @mediumWidth;
+  font-size: @medium;
+}
+.ui.large.images .image,
+.ui.large.images img,
+.ui.large.image {
+  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: @hugeWidth;
+  font-size: @huge;
+}
+.ui.massive.images .image,
+.ui.massive.images img,
+.ui.massive.image {
+  width: @massiveWidth;
+  font-size: @massive;
+}
+
+/*******************************
+              Groups
+*******************************/
+
+.ui.images {
+  font-size: 0em;
+  margin: 0em -@imageHorizontalMargin 0rem;
+}
+
+.ui.images .image,
+.ui.images img {
+  display: inline-block;
+  margin: 0em @imageHorizontalMargin @imageVerticalMargin;
+}
+
+.loadUIOverrides();