semantic_ui_rails 0.0.2

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

@@ -0,0 +1,222 @@
+/*
+ * # Semantic Search
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 17 2013
+ */
+/*******************************
+             Search
+*******************************/
+.ui.search {
+  position: relative;
+  text-shadow: none;
+  font-style: normal;
+  font-weight: normal;
+}
+.ui.search input {
+  -webkit-border-radius: 500rem;
+  -moz-border-radius: 500rem;
+  border-radius: 500rem;
+}
+/*--------------
+     Button
+---------------*/
+.ui.search > .button {
+  position: relative;
+  z-index: 2;
+  float: right;
+  margin: 0px 0px 0px -15px;
+  padding: 6px 15px 7px;
+  -webkit-border-radius: 0px 15px 15px 0px;
+  -moz-border-radius: 0px 15px 15px 0px;
+  border-radius: 0px 15px 15px 0px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+/*--------------
+    Results
+---------------*/
+.ui.search .results {
+  display: none;
+  position: absolute;
+  z-index: 999;
+  top: 100%;
+  left: 0px;
+  overflow: hidden;
+  background-color: #FFFFFF;
+  margin-top: 0.5em;
+  width: 380px;
+  font-size: 0.875em;
+  line-height: 1.2;
+  color: #555555;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
+}
+.ui.search .result {
+  cursor: pointer;
+  overflow: hidden;
+  padding: 0.5em 1em;
+}
+.ui.search .result:first-child {
+  border-top: none;
+}
+.ui.search .result .image {
+  background: #F0F0F0;
+  margin-right: 10px;
+  float: left;
+  overflow: hidden;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  width: 38px;
+  height: 38px;
+}
+.ui.search .result .image img {
+  display: block;
+  width: 38px;
+  height: 38px;
+}
+.ui.search .result .image ~ .info {
+  float: none;
+  margin-left: 50px;
+}
+.ui.search .result .info {
+  float: left;
+}
+.ui.search .result .title {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.search .result .description {
+  color: rgba(0, 0, 0, 0.6);
+}
+.ui.search .result .price {
+  float: right;
+  color: #5BBD72;
+  font-weight: bold;
+}
+/*--------------
+    Message
+---------------*/
+.ui.search .message {
+  padding: 1em;
+}
+.ui.search .message .text .title {
+  margin: 0em 0em 0.5rem;
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.search .message .text .description {
+  margin: 0em;
+  font-size: 1rem;
+  color: rgba(0, 0, 0, 0.5);
+}
+/*--------------
+    Categories
+---------------*/
+.ui.search .results .category {
+  background-color: #FAFAFA;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  -webkit-transition: background 0.2s ease-in;
+  -moz-transition: background 0.2s ease-in;
+  -o-transition: background 0.2s ease-in;
+  -ms-transition: background 0.2s ease-in;
+  transition: background 0.2s ease-in;
+}
+.ui.search .results .category:first-child {
+  border-top: none;
+}
+.ui.search .results .category > .name {
+  float: left;
+  padding: 12px 0px 0px 8px;
+  font-weight: bold;
+  color: #777777;
+  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+}
+.ui.search .results .category .result {
+  background-color: #FFFFFF;
+  margin-left: 80px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+/* View All Results */
+.ui.search .all {
+  display: block;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #FAFAFA;
+  height: 2em;
+  line-height: 2em;
+  color: rgba(0, 0, 0, 0.6);
+  font-weight: bold;
+  text-align: center;
+}
+/*******************************
+            States
+*******************************/
+/*--------------
+      Hover
+---------------*/
+.ui.search .result:hover,
+.ui.search .category .result:hover {
+  background-color: #F8F8F8;
+}
+.ui.search .all:hover {
+  background-color: #F0F0F0;
+}
+/*--------------
+     Loading
+---------------*/
+.ui.search.loading .input .icon {
+  background: url(../images/loader-mini.gif) no-repeat 50% 50%;
+}
+.ui.search.loading .input .icon:before,
+.ui.search.loading .input .icon:after {
+  display: none;
+}
+/*--------------
+      Active
+---------------*/
+.ui.search .results .category.active {
+  background-color: #F1F1F1;
+}
+.ui.search .results .category.active > .name {
+  color: #333333;
+}
+.ui.search .result.active,
+.ui.search .category .result.active {
+  background-color: #FBFBFB;
+}
+.ui.search .result.active .title {
+  color: #000000;
+}
+.ui.search .result.active .description {
+  color: #555555;
+}
+/*******************************
+           Variations
+*******************************/
+/* Large */
+.ui.search .large.result .image,
+.ui.search .large.result .image img {
+  width: 50px;
+  height: 50px;
+}
+.ui.search .large.results .indented.info {
+  margin-left: 65px;
+}
+.ui.search .large.results .info .title {
+  font-size: 16px;
+}
+.ui.search .large.results .info .description {
+  font-size: 11px;
+}

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

@@ -0,0 +1,362 @@
+/*
+ * # Semantic Segment - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: May 17 2013
+ */
+/*******************************
+            Segment
+*******************************/
+.ui.segment {
+  position: relative;
+  background-color: #FFFFFF;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  margin: 1em 0em;
+  padding: 1em;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  -moz-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ui.segment:first-child {
+  margin-top: 0em;
+}
+.ui.segment:last-child {
+  margin-bottom: 0em;
+}
+.ui.segment:after {
+  content: '';
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.ui.vertical.segment {
+  margin: 0em;
+  padding-left: 0em;
+  padding-right: 0em;
+  background-color: transparent;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.vertical.segment:first-child {
+  padding-top: 0em;
+}
+.ui.horizontal.segment {
+  margin: 0em;
+  padding-top: 0em;
+  padding-bottom: 0em;
+  background-color: transparent;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
+}
+.ui.horizontal.segment:first-child {
+  padding-left: 0em;
+}
+/*-------------------
+    Loose Coupling
+--------------------*/
+.ui.pointing.menu + .ui.attached.segment {
+  top: 1px;
+}
+/* No padding on edge content */
+.ui.segment > :first-child {
+  margin-top: 0em;
+}
+.ui.segment > :last-child {
+  margin-bottom: 0em;
+}
+/* Padding on next content after a label */
+.ui.segment > .attached.label:first-child + * {
+  margin-top: 2em;
+}
+.ui.segment > .bottom.attached.label:first-child ~ :last-child {
+  margin-top: 0em;
+  margin-bottom: 2em;
+}
+/*******************************
+             Types
+*******************************/
+/*-------------------
+        Piled
+--------------------*/
+.ui.piled.segment {
+  margin: 2em 0em;
+  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
+  -ms-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
+  -o-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15);
+}
+.ui.piled.segment:first-child {
+  margin-top: 0em;
+}
+.ui.piled.segment:last-child {
+  margin-bottom: 0em;
+}
+.ui.piled.segment:after,
+.ui.piled.segment:before {
+  background-color: #FFFFFF;
+  visibility: visible;
+  content: "";
+  display: block;
+  height: 100%;
+  left: -1px;
+  position: absolute;
+  width: 100%;
+  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
+}
+.ui.piled.segment:after {
+  -webkit-transform: rotate(1.2deg);
+  -moz-transform: rotate(1.2deg);
+  -ms-transform: rotate(1.2deg);
+  -o-transform: rotate(1.2deg);
+  transform: rotate(1.2deg);
+  top: 0;
+  z-index: -1;
+}
+.ui.piled.segment:before {
+  -webkit-transform: rotate(-1.2deg);
+  -moz-transform: rotate(-1.2deg);
+  -ms-transform: rotate(-1.2deg);
+  -o-transform: rotate(-1.2deg);
+  transform: rotate(-1.2deg);
+  top: 0;
+  z-index: -2;
+}
+/*-------------------
+       Stacked
+--------------------*/
+.ui.stacked.segment {
+  padding-bottom: 1.7em;
+}
+.ui.stacked.segment:after,
+.ui.stacked.segment:before {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0%;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.02);
+  width: 100%;
+  height: 5px;
+  visibility: visible;
+}
+.ui.stacked.segment:before {
+  bottom: 0px;
+}
+/* Inverted */
+.ui.stacked.inverted.segment:after,
+.ui.stacked.inverted.segment:before {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.35);
+}
+/*-------------------
+       Raised
+--------------------*/
+.ui.raised.segment {
+  -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
+}
+/*******************************
+            States
+*******************************/
+.ui.disabled.segment {
+  opacity: 0.8;
+  color: #DDDDDD;
+}
+/*******************************
+           Variations
+*******************************/
+/*-------------------
+       Basic
+--------------------*/
+.ui.basic.segment {
+  position: relative;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+.ui.basic.segment:first-child {
+  padding-top: 0em;
+}
+.ui.basic.segment:last-child {
+  padding-bottom: 0em;
+}
+/*-------------------
+       Fittted
+--------------------*/
+.ui.fitted.segment {
+  padding: 0em;
+}
+/*-------------------
+       Colors
+--------------------*/
+.ui.blue.segment {
+  border-top: 0.2em solid #6ECFF5;
+}
+.ui.green.segment {
+  border-top: 0.2em solid #A1CF64;
+}
+.ui.red.segment {
+  border-top: 0.2em solid #D95C5C;
+}
+.ui.purple.segment {
+  border-top: 0.2em solid #564F8A;
+}
+.ui.teal.segment {
+  border-top: 0.2em solid #00B5AD;
+}
+/*-------------------
+   Inverted Colors
+--------------------*/
+.ui.inverted.black.segment {
+  background-color: #5C6166 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.blue.segment {
+  background-color: #6ECFF5 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.green.segment {
+  background-color: #A1CF64 !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.red.segment {
+  background-color: #D95C5C !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.purple.segment {
+  background-color: #564F8A !important;
+  color: #FFFFFF !important;
+}
+.ui.inverted.teal.segment {
+  background-color: #00B5AD !important;
+  color: #FFFFFF !important;
+}
+/*-------------------
+       Aligned
+--------------------*/
+.ui.left.aligned.segment {
+  text-align: left;
+}
+.ui.right.aligned.segment {
+  text-align: right;
+}
+.ui.center.aligned.segment {
+  text-align: center;
+}
+/*-------------------
+       Floated
+--------------------*/
+.ui.floated.segment,
+.ui.left.floated.segment {
+  float: left;
+}
+.ui.right.floated.segment {
+  float: right;
+}
+/*-------------------
+      Inverted
+--------------------*/
+.ui.inverted.segment {
+  border: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.inverted.segment,
+.ui.primary.inverted.segment {
+  background-color: #222222;
+  color: #FFFFFF;
+}
+/*-------------------
+     Ordinality
+--------------------*/
+.ui.primary.segment {
+  background-color: #FFFFFF;
+  color: #555555;
+}
+.ui.secondary.segment {
+  background-color: #FAF9FA;
+  color: #777777;
+}
+.ui.tertiary.segment {
+  background-color: #EBEBEB;
+  color: #B0B0B0;
+}
+.ui.secondary.inverted.segment {
+  background-color: #555555;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3)));
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
+  color: #FAFAFA;
+}
+.ui.tertiary.inverted.segment {
+  background-color: #555555;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6)));
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
+  color: #EEEEEE;
+}
+/*-------------------
+      Attached
+--------------------*/
+.ui.segment.attached {
+  top: -1px;
+  bottom: -1px;
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+  margin: 0em;
+  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
+  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
+  box-shadow: 0px 0px 0px 1px #DDDDDD;
+}
+.ui.top.attached.segment {
+  top: 0px;
+  bottom: -1px;
+  margin-top: 1em;
+  margin-bottom: 0em;
+  -moz-border-radius: 5px 5px 0px 0px;
+  -webkit-border-radius: 5px 5px 0px 0px;
+  border-radius: 5px 5px 0px 0px;
+}
+.ui.segment.bottom.attached {
+  top: -1px;
+  bottom: 0px;
+  margin-top: 0em;
+  margin-bottom: 1em;
+  -moz-border-radius: 0px 0px 5px 5px;
+  -webkit-border-radius: 0px 0px 5px 5px;
+  border-radius: 0px 0px 5px 5px;
+}

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

@@ -0,0 +1,87 @@
+/*
+ * # Semantic Button
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 17 2013
+ */
+/*******************************
+              Shape
+*******************************/
+.ui.shape {
+  position: relative;
+  -webkit-perspective: 2000px;
+  -moz-perspective: 2000px;
+  -ms-perspective: 2000px;
+  perspective: 2000px;
+}
+.ui.shape .sides {
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+.ui.shape .side {
+  opacity: 1;
+  width: 100%;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.ui.shape .side {
+  display: none;
+}
+/*******************************
+             States
+*******************************/
+/*--------------
+    Animating
+---------------*/
+.ui.shape.animating .sides {
+  position: absolute;
+}
+.ui.shape .animating.side {
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  z-index: 100;
+}
+.ui.shape .hidden.side {
+  opacity: 0.4;
+}
+/*--------------
+      CSS
+---------------*/
+.ui.shape.css {
+  -webkit-transition: all 0.6s ease-in-out;
+  -moz-transition: all 0.6s ease-in-out;
+  -o-transition: all 0.6s ease-in-out;
+  -ms-transition: all 0.6s ease-in-out;
+  transition: all 0.6s ease-in-out;
+}
+.ui.shape.css .sides {
+  -webkit-transition: all 0.6s ease-in-out;
+  -moz-transition: all 0.6s ease-in-out;
+  -o-transition: all 0.6s ease-in-out;
+  -ms-transition: all 0.6s ease-in-out;
+  transition: all 0.6s ease-in-out;
+}
+.ui.shape.css .side {
+  -webkit-transition: opacity 0.6s ease-in-out;
+  -moz-transition: opacity 0.6s ease-in-out;
+  -o-transition: opacity 0.6s ease-in-out;
+  -ms-transition: opacity 0.6s ease-in-out;
+  transition: opacity 0.6s ease-in-out;
+}
+/*--------------
+     Active
+---------------*/
+.ui.shape .active.side {
+  display: block;
+}