semantic_ui_rails 0.0.2

data/app/assets/stylesheets/semantic/progress.css

@@ -0,0 +1,257 @@
+/*
+ * # Semantic Progress Bar
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: Nay 14, 2013
+ */
+/*******************************
+         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(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.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;
+}

data/app/assets/stylesheets/semantic/rating.css

@@ -0,0 +1,120 @@
+/*******************************
+           Star Rating
+*******************************/
+.ui.rating {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0em 0.5em;
+}
+.ui.rating:first-child {
+  margin-left: 0em;
+}
+.ui.rating:last-child {
+  margin-right: 0em;
+}
+.ui.rating:after {
+  display: block;
+  content: '';
+  visibility: hidden;
+  clear: both;
+  height: 0;
+}
+/* Icon */
+.ui.rating .icon {
+  cursor: default;
+  float: left;
+  margin: 0em;
+  width: 1em;
+  height: auto;
+  padding: 0em;
+  font-weight: normal;
+  font-style: normal;
+}
+.ui.rating .icon:after {
+  content: "\2605";
+  color: rgba(0, 0, 0, 0.15);
+  -webkit-transition: color 0.3s ease,
+    opacity 0.3s ease
+  ;
+  -moz-transition: color 0.3s ease,
+    opacity 0.3s ease
+  ;
+  -ms-transition: color 0.3s ease,
+    opacity 0.3s ease
+  ;
+  -o-transition: color 0.3s ease,
+    opacity 0.3s ease
+  ;
+  transition: color 0.3s ease,
+    opacity 0.3s ease
+  ;
+}
+/*******************************
+             Types
+*******************************/
+/*-------------------
+        Star
+--------------------*/
+.ui.star.rating .icon:after {
+  content: '\e800';
+  font-family: 'Icons';
+}
+.ui.star.rating .active.icon:after {
+  content: '\e801';
+  font-family: 'Icons';
+}
+/*-------------------
+        Heart
+--------------------*/
+.ui.heart.rating .icon:after {
+  content: '\2661';
+  font-family: 'Icons';
+}
+.ui.heart.rating .active.icon:after {
+  content: '\2665';
+  font-family: 'Icons';
+  color: #EF404A;
+}
+.ui.heart.rating .hover.icon:after,
+.ui.heart.rating .active.hover.icon:after {
+  color: #FF2733;
+}
+/*******************************
+             States
+*******************************/
+/*-------------------
+        Active
+--------------------*/
+/* active rating */
+.ui.active.rating .icon {
+  cursor: pointer;
+}
+/* active icons */
+.ui.rating .active.icon:after {
+  color: #FFCB08;
+}
+/*-------------------
+        Hover
+--------------------*/
+/* rating */
+.ui.rating.hover .active.icon:after {
+  opacity: 0.5;
+}
+/* icon */
+.ui.rating .icon.hover:after,
+.ui.rating .icon.hover.active:after {
+  opacity: 1;
+  color: #FFB70A;
+}
+/*******************************
+          Variations
+*******************************/
+.ui.small.rating {
+  font-size: 1rem;
+}
+.ui.rating {
+  font-size: 1.5rem;
+}
+.ui.large.rating {
+  font-size: 2rem;
+}

data/app/assets/stylesheets/semantic/reveal.css

@@ -0,0 +1,283 @@
+/*
+ * # Semantic Reveal
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: June 28, 2013
+ */
+/*******************************
+            Reveal
+*******************************/
+.ui.reveal {
+  display: inline-block;
+  position: relative !important;
+  z-index: 2 !important;
+  font-size: 0em !important;
+}
+.ui.reveal > .content {
+  font-size: 1em !important;
+}
+.ui.reveal > .visible.content {
+  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+}
+.ui.reveal > .visible.content {
+  position: absolute !important;
+  top: 0em !important;
+  left: 0em !important;
+  z-index: 4 !important;
+  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+}
+.ui.reveal > .hidden.content {
+  position: relative !important;
+  z-index: 3 !important;
+}
+/*------------------
+   Loose Coupling
+-------------------*/
+.ui.reveal.button {
+  overflow: hidden;
+}
+/*******************************
+              Types
+*******************************/
+/*--------------
+      Slide
+---------------*/
+.ui.slide.reveal {
+  position: relative !important;
+  display: block;
+  overflow: hidden !important;
+  white-space: nowrap;
+}
+.ui.slide.reveal > .content {
+  display: block;
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0em;
+  -webkit-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  -moz-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  -ms-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+  transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s;
+}
+.ui.slide.reveal > .visible.content {
+  position: relative !important;
+}
+.ui.slide.reveal > .hidden.content {
+  position: absolute !important;
+  left: 100% !important;
+  width: 100% !important;
+}
+.ui.slide.reveal:hover > .visible.content {
+  left: -100% !important;
+}
+.ui.slide.reveal:hover > .hidden.content {
+  left: 0% !important;
+}
+.ui.right.slide.reveal > .visible.content {
+  left: 0%;
+}
+.ui.right.slide.reveal > .hidden.content {
+  left: auto !important;
+  right: 100% !important;
+}
+.ui.right.slide.reveal:hover > .visible.content {
+  left: 100% !important;
+  right: auto !important;
+}
+.ui.right.slide.reveal:hover > .hidden.content {
+  left: auto !important;
+  right: 0% !important;
+}
+.ui.up.slide.reveal > .visible.content {
+  top: 0% !important;
+  left: 0% !important;
+  right: auto !important;
+  bottom: auto !important;
+}
+.ui.up.slide.reveal > .hidden.content {
+  top: 100% !important;
+  left: 0% !important;
+  right: auto !important;
+  bottom: auto !important;
+}
+.ui.slide.up.reveal:hover > .visible.content {
+  top: -100% !important;
+  left: 0% !important;
+}
+.ui.slide.up.reveal:hover > .hidden.content {
+  top: 0% !important;
+  left: 0% !important;
+}
+.ui.down.slide.reveal > .visible.content {
+  top: auto !important;
+  right: auto !important;
+  bottom: auto !important;
+  bottom: 0% !important;
+}
+.ui.down.slide.reveal > .hidden.content {
+  top: auto !important;
+  right: auto !important;
+  bottom: 100% !important;
+  left: 0% !important;
+}
+.ui.slide.down.reveal:hover > .visible.content {
+  left: 0% !important;
+  bottom: -100% !important;
+}
+.ui.slide.down.reveal:hover > .hidden.content {
+  left: 0% !important;
+  bottom: 0% !important;
+}
+/*--------------
+      Fade
+---------------*/
+.ui.fade.reveal > .visible.content {
+  opacity: 1;
+}
+.ui.fade.reveal:hover > .visible.content {
+  opacity: 0;
+}
+/*--------------
+      Move
+---------------*/
+.ui.move.reveal > .visible.content,
+.ui.move.left.reveal > .visible.content {
+  left: auto !important;
+  top: auto !important;
+  bottom: auto !important;
+  right: 0% !important;
+}
+.ui.move.reveal:hover > .visible.content,
+.ui.move.left.reveal:hover > .visible.content {
+  right: 100% !important;
+}
+.ui.move.right.reveal > .visible.content {
+  right: auto !important;
+  top: auto !important;
+  bottom: auto !important;
+  left: 0% !important;
+}
+.ui.move.right.reveal:hover > .visible.content {
+  left: 100% !important;
+}
+.ui.move.up.reveal > .visible.content {
+  right: auto !important;
+  left: auto !important;
+  top: auto !important;
+  bottom: 0% !important;
+}
+.ui.move.up.reveal:hover > .visible.content {
+  bottom: 100% !important;
+}
+.ui.move.down.reveal > .visible.content {
+  right: auto !important;
+  left: auto !important;
+  top: 0% !important;
+  bottom: auto !important;
+}
+.ui.move.down.reveal:hover > .visible.content {
+  top: 100% !important;
+}
+/*--------------
+     Rotate
+---------------*/
+.ui.rotate.reveal > .visible.content {
+  -webkit-transition-duration: 0.8s;
+  -moz-transition-duration: 0.8s;
+  -o-transition-duration: 0.8s;
+  -ms-transition-duration: 0.8s;
+  transition-duration: 0.8s;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+.ui.rotate.reveal > .visible.content,
+.ui.rotate.right.reveal > .visible.content {
+  -webkit-transform-origin: bottom right;
+  -moz-transform-origin: bottom right;
+  -o-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+}
+.ui.rotate.reveal:hover > .visible.content,
+.ui.rotate.right.reveal:hover > .visible.content {
+  -webkit-transform: rotate(110deg);
+  -moz-transform: rotate(110deg);
+  -o-transform: rotate(110deg);
+  -ms-transform: rotate(110deg);
+  transform: rotate(110deg);
+}
+.ui.rotate.left.reveal > .visible.content {
+  -webkit-transform-origin: bottom left;
+  -moz-transform-origin: bottom left;
+  -o-transform-origin: bottom left;
+  -ms-transform-origin: bottom left;
+  transform-origin: bottom left;
+}
+.ui.rotate.left.reveal:hover > .visible.content {
+  -webkit-transform: rotate(-110deg);
+  -moz-transform: rotate(-110deg);
+  -o-transform: rotate(-110deg);
+  -ms-transform: rotate(-110deg);
+  transform: rotate(-110deg);
+}
+/*******************************
+              States
+*******************************/
+.ui.disabled.reveal {
+  opacity: 1 !important;
+}
+.ui.disabled.reveal > .content {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  -ms-transition: none !important;
+  transition: none !important;
+}
+.ui.disabled.reveal:hover > .visible.content {
+  position: static !important;
+  display: block !important;
+  opacity: 1 !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+}
+.ui.disabled.reveal:hover > .hidden.content {
+  display: none !important;
+}
+/*******************************
+           Variations
+*******************************/
+/*--------------
+     Masked
+---------------*/
+.ui.masked.reveal {
+  overflow: hidden;
+}
+/*--------------
+     Instant
+---------------*/
+.ui.instant.reveal > .content {
+  -webkit-transition-delay: 0s !important;
+  -moz-transition-delay: 0s !important;
+  -o-transition-delay: 0s !important;
+  -ms-transition-delay: 0s !important;
+  transition-delay: 0s !important;
+}