semantic-ui-sass 0.0.1

data/app/assets/stylesheets/semantic-ui/modules/_modal.scss

@@ -0,0 +1,217 @@
+/*
+ * # Semantic - Modal
+ * http://github.com/jlukic/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+             Modal
+*******************************/
+
+.ui.modal {
+  display: none;
+  position: fixed;
+  z-index: 1001;
+
+  top: 50%;
+  left: 50%;
+  text-align: left;
+
+  width: 90%;
+  margin-left: -45%;
+
+  background-color: #FFFFFF;
+  border: 1px solid #DDDDDD;
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
+
+/*******************************
+            Content
+*******************************/
+
+/*--------------
+     Close
+---------------*/
+
+.ui.modal > .close {
+  cursor: pointer;
+  position: absolute;
+
+  opacity: 0.8;
+
+  font-size: 1.25em;
+  top: -1.75em;
+  right: -1.75em;
+
+  color: #FFFFFF;
+}
+.ui.modal > .close:hover {
+  opacity: 1;
+}
+
+/*--------------
+     Header
+---------------*/
+
+.ui.modal > .header {
+  margin: 0em;
+  padding: 1.5rem 2rem;
+
+  font-size: 1.6em;
+  font-weight: bold;
+
+  -webkit-border-radius: 0.325em 0.325em 0px 0px;
+  -moz-border-radius: 0.325em 0.325em 0px 0px;
+  border-radius: 0.325em 0.325em 0px 0px;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.modal > .content {
+  display: table;
+  width: 100%;
+  position: relative;
+  padding: 2em;
+  background-color: #F4F4F4;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ui.modal > .content > .left {
+  display: table-cell;
+  padding-right: 5%;
+  min-width: 25%;
+}
+.ui.modal > .content > .right {
+  display: table-cell;
+  padding-left: 5%;
+  vertical-align: top;
+  min-width: 25%;
+}
+.ui.modal > .content > .left > .icon {
+  font-size: 8em;
+  margin: 0em;
+}
+.ui.modal > .content p {
+  line-height: 1.6;
+}
+
+/*--------------
+     Actions
+---------------*/
+
+.ui.modal .actions {
+  padding: 1rem 2rem;
+  text-align: right;
+}
+.ui.modal .actions > .button {
+  margin-left: 0.75em;
+}
+
+/*-------------------
+       Sizing
+--------------------*/
+
+/* Mobile Only */
+@media only screen and (max-width : 768px) {
+  .ui.modal .content .left {
+    display: block;
+    padding: 0em 0em 0em 1em;
+  }
+  .ui.modal .content .right {
+    display: block;
+    padding: 1em 0em 0em 0em;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+  }
+}
+/* Tablet and Mobile */
+@media only screen and (max-width : 998px) {
+  .ui.modal {
+    width: 92%;
+    margin-left: -46%;
+  }
+  .ui.modal > .close {
+    color: rgba(0, 0, 0, 0.8);
+    top: 1.5rem;
+    right: 1rem;
+  }
+}
+/* Computer / Responsive */
+@media only screen and (min-width : 998px) {
+  .ui.modal {
+    width: 74%;
+    margin-left: -37%;
+  }
+}
+@media only screen and (min-width : 1500px) {
+  .ui.modal {
+    width: 64%;
+    margin-left: -32%;
+  }
+}
+@media only screen and (min-width : 1750px) {
+  .ui.modal {
+    width: 54%;
+    margin-left: -27%;
+  }
+}
+@media only screen and (min-width : 2000px) {
+  .ui.modal {
+    width: 44%;
+    margin-left: -22%;
+  }
+}
+
+
+/*******************************
+             Types
+*******************************/
+
+.ui.basic.modal {
+  background-color: transparent;
+  border: none;
+  color: #FFFFFF;
+}
+.ui.basic.modal > .close {
+  top: 1.5rem;
+  right: 1rem;
+}
+.ui.basic.modal .content {
+  background-color: transparent;
+}
+
+/*******************************
+            Variations
+*******************************/
+
+/* A modal that cannot fit on the page */
+.ui.modal.scrolling {
+  position: absolute;
+  margin-top: 10px;
+}
+
+
+
+/*******************************
+              States
+*******************************/
+
+.ui.active.modal {
+  display: block;
+}

data/app/assets/stylesheets/semantic-ui/modules/_nag.scss

@@ -0,0 +1,173 @@
+/*
+ * # Semantic - Nag
+ * http://github.com/jlukic/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+             Nag
+*******************************/
+
+.ui.nag {
+  display: none;
+  opacity: 0.95;
+
+  position: relative;
+  top: 0px;
+  left: 0%;
+  z-index: 101;
+
+  min-height: 0;
+  width: 100%;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+
+  margin: 0em;
+  line-height: 3em;
+  padding: 0em 1em;
+
+  background-color: #555555;
+
+  -webkit-box-shadow:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.2)
+  ;
+  -moz-box-shadow:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.2)
+  ;
+  box-shadow:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.2)
+  ;
+
+  font-size: 1em;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+
+  -webkit-border-radius: 0px 0px 5px 5px;
+  -moz-border-radius: 0px 0px 5px 5px;
+  border-radius: 0px 0px 5px 5px;
+
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  -o-transition: 0.2s background;
+  -ms-transition: 0.2s background;
+  transition: 0.2s background;
+}
+
+a.ui.nag {
+  cursor: pointer;
+}
+
+.ui.nag > .title {
+  display: inline-block;
+  margin: 0em 0.5em;
+  color: #FFFFFF;
+}
+
+
+.ui.nag > .close.icon {
+  cursor: pointer;
+  opacity: 0.4;
+
+  position: absolute;
+  top: 50%;
+  right: 1em;
+
+  margin-top: -0.5em;
+  color: #FFFFFF;
+
+  -webkit-transition: 0.1s opacity;
+  -moz-transition: 0.1s opacity;
+  -o-transition: 0.1s opacity;
+  -ms-transition: 0.1s opacity;
+  transition: 0.1s opacity;
+}
+
+
+
+/*******************************
+             States
+*******************************/
+
+/* Hover */
+.ui.nag:hover {
+  opacity: 1;
+}
+
+.ui.nag .close:hover {
+  opacity: 1;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------
+     Static
+---------------*/
+
+.ui.overlay.nag {
+  position: absolute;
+  display: block;
+}
+
+/*--------------
+     Fixed
+---------------*/
+
+.ui.fixed.nag {
+  position: fixed;
+}
+
+/*--------------
+     Bottom
+---------------*/
+
+.ui.botton.nag {
+  -webkit-border-radius: 5px 5px 0px 0px;
+  -moz-border-radius: 5px 5px 0px 0px;
+  border-radius: 5px 5px 0px 0px;
+}
+.ui.fixed.bottom.nags,
+.ui.fixed.bottom.nag {
+  top: auto;
+  bottom: 0px;
+}
+
+
+/*--------------
+     White
+---------------*/
+
+.ui.white.nags .nag,
+.ui.white.nag {
+  background-color: #F1F1F1;
+  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+  color: #ACACAC;
+}
+.ui.white.nags .nag .close,
+.ui.white.nags .nag .title,
+.ui.white.nag .close,
+.ui.white.nag .title {
+  color: #333333;
+}
+
+
+/*******************************
+           Groups
+*******************************/
+
+.ui.nags .nag {
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}

data/app/assets/stylesheets/semantic-ui/modules/_popup.scss

@@ -0,0 +1,255 @@
+/*
+ * # Semantic - Popup
+ * http://github.com/jlukic/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Popup
+*******************************/
+
+.ui.popup {
+  display: none;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: 900;
+
+  border: 1px solid #DCDDDE;
+  max-width: 250px;
+  background-color: #FFFFFF;
+
+  padding: 0.8em 1.2em;
+  font-size: 0.875rem;
+  font-weight: normal;
+  font-style: normal;
+  color: rgba(0, 0, 0, 0.7);
+
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
+
+  -webkit-box-shadow: 0px 1px 1px #DCDDDE;
+  -moz-box-shadow: 0px 1px 1px #DCDDDE;
+  box-shadow: 0px 1px 1px #DCDDDE;
+}
+.ui.popup .header {
+  padding: 0em 0em 0.5em;
+
+  font-size: 1.125em;
+  line-height: 1.2;
+  font-weight: bold;
+}
+
+.ui.popup:before {
+  position: absolute;
+  content: "";
+  width: 0.75em;
+  height: 0.75rem;
+
+  background-image: none;
+  background-color: #FFFFFF;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
+
+  z-index: 2;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -webkit-box-shadow: 1px 1px 1px #DCDDDE;
+  -moz-box-shadow: 1px 1px 1px #DCDDDE;
+  box-shadow: 1px 1px 1px #DCDDDE;
+}
+
+.ui.popup .ui.button {
+  width: 100%;
+}
+
+/*******************************
+            Types
+*******************************/
+
+/*--------------
+     Spacing
+---------------*/
+
+.ui.popup {
+  margin: 0em;
+}
+.ui.popup.bottom {
+  margin: 0.75em 0em 0em;
+}
+.ui.popup.top {
+  margin: 0em 0em 0.75em;
+}
+.ui.popup.left.center {
+  margin: 0em 0.75em 0em 0em;
+}
+.ui.popup.right.center {
+  margin: 0em 0em 0em 0.75em;
+}
+.ui.popup.center {
+  margin-left: -1.25em;
+}
+
+/*--------------
+     Pointer
+---------------*/
+
+/*--- Below ---*/
+.ui.bottom.center.popup:before {
+  margin-left: -0.4em;
+  top: -0.4em;
+  left: 50%;
+  right: auto;
+  bottom: auto;
+  -webkit-box-shadow: -1px -1px 1px #dcddde;
+  -moz-box-shadow: -1px -1px 1px #dcddde;
+  box-shadow: -1px -1px 1px #dcddde;
+}
+
+.ui.bottom.left.popup {
+  margin-right: -0.8em;
+}
+.ui.bottom.left.popup:before {
+  top: -0.4em;
+  right: 1em;
+  bottom: auto;
+  left: auto;
+  margin-left: 0em;
+  -webkit-box-shadow: -1px -1px 1px #dcddde;
+  -moz-box-shadow: -1px -1px 1px #dcddde;
+  box-shadow: -1px -1px 1px #dcddde;
+}
+
+.ui.bottom.right.popup {
+  margin-left: -0.8em;
+}
+.ui.bottom.right.popup:before {
+  top: -0.4em;
+  left: 1em;
+  right: auto;
+  bottom: auto;
+  margin-left: 0em;
+  -webkit-box-shadow: -1px -1px 1px #dcddde;
+  -moz-box-shadow: -1px -1px 1px #dcddde;
+  box-shadow: -1px -1px 1px #dcddde;
+}
+
+/*--- Above ---*/
+.ui.top.center.popup:before {
+  top: auto;
+  right: auto;
+  bottom: -0.4em;
+  left: 50%;
+  margin-left: -0.4em;
+}
+.ui.top.left.popup {
+  margin-right: -0.8em;
+}
+.ui.top.left.popup:before {
+  bottom: -0.4em;
+  right: 1em;
+  top: auto;
+  left: auto;
+  margin-left: 0em;
+}
+.ui.top.right.popup {
+  margin-left: -0.8em;
+}
+.ui.top.right.popup:before {
+  bottom: -0.4em;
+  left: 1em;
+  top: auto;
+  right: auto;
+  margin-left: 0em;
+}
+
+/*--- Left Center ---*/
+.ui.left.center.popup:before {
+  top: 50%;
+  right: -0.35em;
+  bottom: auto;
+  left: auto;
+  margin-top: -0.4em;
+  -moz-box-shadow: 1px -1px 1px #dcddde;
+  -webkit-box-shadow: 1px -1px 1px #dcddde;
+  box-shadow: 1px -1px 1px #dcddde;
+}
+
+/*--- Right Center  ---*/
+.ui.right.center.popup:before {
+  top: 50%;
+  left: -0.35em;
+  bottom: auto;
+  right: auto;
+  margin-top: -0.4em;
+  -moz-box-shadow: -1px 1px 1px #dcddde;
+  -webkit-box-shadow: -1px 1px 1px #dcddde;
+  box-shadow: -1px 1px 1px #dcddde;
+}
+
+/*******************************
+            States
+*******************************/
+
+.ui.loading.popup {
+  display: block;
+  visibility: hidden;
+}
+.ui.active.popup {
+  display: block;
+}
+
+
+/*******************************
+            Variations
+*******************************/
+
+/*--------------
+      Size
+---------------*/
+
+.ui.small.popup {
+  font-size: 0.75rem;
+}
+.ui.large.popup {
+  font-size: 1rem;
+}
+
+
+/*--------------
+     Colors
+---------------*/
+
+/* Inverted colors  */
+.ui.inverted.popup {
+  background-color: #333333;
+  border: none;
+  color: #FFFFFF;
+
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.ui.inverted.popup .header {
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #FFFFFF;
+}
+.ui.inverted.popup:before {
+  background-color: #333333;
+
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}