semantic-ui-sass 0.0.1

data/app/assets/stylesheets/semantic-ui/elements/_loader.scss

@@ -0,0 +1,185 @@
+/*
+ * # Semantic - Loader
+ * http://github.com/jlukic/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Loader
+*******************************/
+
+
+/* Standard Size */
+.ui.loader {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0px;
+  z-index: 1000;
+
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -o-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.ui.dimmer .loader {
+  display: block;
+}
+
+/*******************************
+             Types
+*******************************/
+
+/*-------------------
+        Text
+--------------------*/
+
+.ui.text.loader {
+  width: auto !important;
+  height: auto !important;
+  text-align: center;
+  font-style: normal;
+}
+
+.ui.mini.text.loader {
+  min-width: 16px;
+  padding-top: 2em;
+  font-size: 0.875em;
+}
+.ui.small.text.loader {
+  min-width: 24px;
+  padding-top: 2.5em;
+  font-size: 0.875em;
+}
+.ui.text.loader {
+  min-width: 32px;
+  font-size: 1em;
+  padding-top: 3em;
+}
+.ui.large.text.loader {
+  min-width: 64px;
+  padding-top: 5em;
+  font-size: 1.2em;
+}
+
+/*******************************
+            States
+*******************************/
+
+.ui.loader.active,
+.ui.loader.visible {
+  display: block;
+}
+
+.ui.loader.disabled,
+.ui.loader.hidden {
+  display: none;
+}
+
+
+/*******************************
+            Variations
+*******************************/
+
+/*-------------------
+       Inverted
+--------------------*/
+
+.ui.dimmer .ui.text.loader,
+.ui.inverted.text.loader {
+  color: rgba(255, 255, 255, 0.8);
+}
+.ui.inverted.dimmer .ui.text.loader {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/* Tiny Size */
+.ui.dimmer .mini.ui.loader,
+.ui.inverted .mini.ui.loader {
+  background-image: image-url("semantic-ui/loader-mini-inverted.gif");
+}
+
+/* Small Size */
+.ui.dimmer .small.ui.loader,
+.ui.inverted .small.ui.loader {
+  background-image: image-url("semantic-ui/loader-small-inverted.gif");
+}
+
+/* Standard Size */
+.ui.dimmer .ui.loader,
+.ui.inverted.loader  {
+  background-image: image-url("semantic-ui/loader-medium-inverted.gif");
+}
+
+/* Large Size */
+.ui.dimmer .large.ui.loader,
+.ui.inverted .large.ui.loader {
+  background-image: image-url("semantic-ui/loader-large-inverted.gif");
+}
+
+/*-------------------
+        Sizes
+--------------------*/
+
+/* Tiny Size */
+.ui.inverted.dimmer .ui.mini.loader,
+.ui.mini.loader {
+  width: 16px;
+  height: 16px;
+  background-image: image-url("semantic-ui/loader-mini.gif");
+}
+
+/* Small Size */
+.ui.inverted.dimmer .ui.small.loader,
+.ui.small.loader {
+  width: 24px;
+  height: 24px;
+  background-image: image-url("semantic-ui/loader-small.gif");
+}
+
+.ui.inverted.dimmer .ui.loader,
+.ui.loader {
+  width: 32px;
+  height: 32px;
+  background: image-url("semantic-ui/loader-medium.gif") no-repeat;
+  background-position: 48% 0px;
+}
+
+/* Large Size */
+.ui.inverted.dimmer .ui.loader.large,
+.ui.loader.large {
+  width: 64px;
+  height: 64px;
+  background-image: image-url("semantic-ui/loader-large.gif");
+}
+
+
+/*-------------------
+       Inline
+--------------------*/
+
+.ui.inline.loader {
+  position: static;
+  vertical-align: middle;
+  margin: 0em;
+
+  -webkit-transform: none;
+  -moz-transform: none;
+  -o-transform: none;
+  -ms-transform: none;
+  transform: none;
+}
+
+.ui.inline.loader.active,
+.ui.inline.loader.visible {
+  display: inline-block;
+}

data/app/assets/stylesheets/semantic-ui/elements/_progress.scss

@@ -0,0 +1,352 @@
+/*
+ * # Semantic - Progress Bar
+ * http://github.com/jlukic/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+         Progress Bar
+*******************************/
+
+.ui.progress {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+
+  width: 100%;
+  height: 35px;
+
+  background-color: #FAFAFA;
+  padding: 5px;
+
+  -webkit-border-radius: 0.3125em;
+  -moz-border-radius: 0.3125em;
+  border-radius: 0.3125em;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.ui.progress .bar {
+  display: inline-block;
+  height: 100%;
+
+  background-color: #CCCCCC;
+
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+
+  -webkit-transition:
+    width 1s ease-in-out,
+    background-color 1s ease-out
+  ;
+  -moz-transition:
+    width 1s ease-in-out,
+    background-color 1s ease-out
+  ;
+  -ms-transition:
+    width 1s ease-in-out,
+    background-color 1s ease-out
+  ;
+  -o-transition:
+    width 1s ease-in-out,
+    background-color 1s ease-out
+  ;
+  transition:
+    width 1s ease-in-out,
+    background-color 1s ease-out
+  ;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+
+/*--------------
+  Successful
+---------------*/
+
+.ui.successful.progress .bar {
+  background-color: #73E064 !important;
+}
+.ui.successful.progress .bar,
+.ui.successful.progress .bar::after {
+  -webkit-animation: none !important;
+  -moz-animation: none !important;
+  animation: none !important;
+}
+
+/*--------------
+     Failed
+---------------*/
+
+.ui.failed.progress .bar {
+  background-color: #DF9BA4 !important;
+}
+.ui.failed.progress .bar,
+.ui.failed.progress .bar::after {
+  -webkit-animation: none !important;
+  -moz-animation: none !important;
+  animation: none !important;
+}
+
+/*--------------
+     Active
+---------------*/
+
+.ui.active.progress .bar {
+  position: relative;
+}
+.ui.active.progress .bar::after {
+  content: '';
+  opacity: 0;
+
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background: #FFFFFF;
+
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+
+  -webkit-animation: progress-active 2s ease-out infinite;
+  -moz-animation: progress-active 2s ease-out infinite;
+  animation: progress-active 2s ease-out infinite;
+}
+
+@-webkit-keyframes progress-active {
+  0% {
+    opacity: 0;
+    width: 0;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0;
+    width: 95%;
+  }
+}
+@-moz-keyframes progress-active {
+  0% {
+    opacity: 0;
+    width: 0;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0;
+    width: 100%;
+  }
+}
+@keyframes progress-active {
+  0% {
+    opacity: 0;
+    width: 0;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0;
+    width: 100%;
+  }
+}
+
+/*--------------
+    Disabled
+---------------*/
+
+.ui.disabled.progress {
+  opacity: 0.35;
+}
+.ui.disabled.progress .bar,
+.ui.disabled.progress .bar::after {
+  -webkit-animation: none !important;
+  -moz-animation: none !important;
+  animation: none !important;
+}
+
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------
+    Attached
+---------------*/
+
+/* bottom attached */
+.ui.progress.attached {
+  position: relative;
+  border: none;
+}
+.ui.progress.attached,
+.ui.progress.attached .bar {
+  display: block;
+  height: 3px;
+  padding: 0px;
+  overflow: hidden;
+  -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
+  -moz-border-radius: 0em 0em 0.3125em 0.3125em;
+  border-radius: 0em 0em 0.3125em 0.3125em;
+}
+.ui.progress.attached .bar {
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+
+/* top attached */
+.ui.progress.top.attached,
+.ui.progress.top.attached .bar {
+  top: -2px;
+  -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
+  -moz-border-radius: 0.3125em 0.3125em 0em 0em;
+  border-radius: 0.3125em 0.3125em 0em 0em;
+}
+.ui.progress.top.attached .bar {
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+}
+
+
+/*--------------
+     Colors
+---------------*/
+
+.ui.blue.progress .bar {
+  background-color: #6ECFF5;
+}
+.ui.black.progress .bar {
+  background-color: #5C6166;
+}
+.ui.green.progress .bar {
+  background-color: #A1CF64;
+}
+.ui.red.progress .bar {
+  background-color: #EF4D6D;
+}
+.ui.purple.progress .bar {
+  background-color: #564F8A;
+}
+.ui.teal.progress .bar {
+  background-color: #00B5AD;
+}
+
+
+/*--------------
+    Striped
+---------------*/
+
+.ui.progress.striped .bar {
+  -webkit-background-size: 30px 30px;
+  -moz-background-size: 30px 30px;
+  background-size: 30px 30px;
+  background-image:
+    -webkit-gradient(linear, left top, right bottom,
+      color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
+      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
+      color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
+      to(transparent)
+    )
+  ;
+  background-image:
+    -webkit-linear-gradient(
+      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+      transparent 75%, transparent
+    )
+  ;
+  background-image:
+    -moz-linear-gradient(
+      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+      transparent 75%, transparent
+    )
+  ;
+  background-image:
+    -ms-linear-gradient(
+      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+      transparent 75%, transparent
+    )
+  ;
+  background-image:
+    -o-linear-gradient(
+      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+      transparent 75%, transparent
+    )
+  ;
+  background-image:
+    linear-gradient(
+      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+      transparent 75%, transparent
+    )
+  ;
+}
+
+.ui.progress.active.striped .bar:after {
+  -webkit-animation: none;
+  -moz-animation: none;
+  -ms-animation: none;
+  -o-animation: none;
+  animation: none;
+}
+.ui.progress.active.striped .bar {
+  -webkit-animation: progress-striped 3s linear infinite;
+  -moz-animation: progress-striped 3s linear infinite;
+  animation: progress-striped 3s linear infinite;
+}
+
+@-webkit-keyframes progress-striped {
+  0% {
+    background-position: 0px 0;
+  }
+  100% {
+    background-position: 60px 0;
+  }
+}
+@-moz-keyframes progress-striped {
+  0% {
+    background-position: 0px 0;
+  }
+  100% {
+    background-position: 60px 0;
+  }
+}
+@keyframes progress-striped {
+  0% {
+    background-position: 0px 0;
+  }
+  100% {
+    background-position: 60px 0;
+  }
+}
+
+
+/*--------------
+     Sizes
+---------------*/
+
+.ui.small.progress .bar {
+  height: 14px;
+}