semantic-ui-sass 0.0.1

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

@@ -0,0 +1,98 @@
+/*
+ * # Semantic - Video
+ * http://github.com/jlukic/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Video
+*******************************/
+
+.ui.video {
+  position: relative;
+  max-width: 100%;
+}
+
+/*--------------
+     Content
+---------------*/
+
+/* Placeholder Image */
+.ui.video .placeholder {
+  background-color: #333333;
+}
+
+/* Play Icon Overlay */
+.ui.video .play {
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+
+  width: 100%;
+  height: 100%;
+
+  -ms-filter:"progid:DXImageTransform.Microsoft@include ctb-Alpha(Opacity=60);";
+  filter: alpha(opacity=60);
+  opacity: 0.6;
+
+  -webkit-transition: opacity 0.3s;
+  -moz-transition: opacity 0.3s;
+  -o-transition: opacity 0.3s;
+  -ms-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+.ui.video .play.icon:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+
+  font-size: 6rem;
+  margin: -3rem 0em 0em -3rem;
+  color: #FFFFFF;
+  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
+}
+
+.ui.video .placeholder {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* IFrame Embed */
+.ui.video .embed {
+  display: none;
+}
+
+/*******************************
+            States
+*******************************/
+
+/*--------------
+    Hover
+---------------*/
+
+.ui.video .play:hover {
+  opacity: 1;
+}
+
+
+/*--------------
+     Active
+---------------*/
+
+.ui.video.active .play,
+.ui.video.active .placeholder {
+  display: none;
+}
+.ui.video.active .embed {
+  display: block;
+}

data/app/assets/stylesheets/semantic-ui/views/_all.scss

@@ -0,0 +1,5 @@
+@import 'comment';
+@import 'feed';
+@import 'item';
+@import 'list';
+@import 'statistic';

data/app/assets/stylesheets/semantic-ui/views/_comment.scss

@@ -0,0 +1,221 @@
+/*
+ * # Semantic Comment View
+ * http://github.com/jlukic/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 17 2013
+ */
+
+
+/*******************************
+            Standard
+*******************************/
+
+
+/*--------------
+    Comments
+---------------*/
+
+.ui.comments {
+
+
+}
+.ui.comments a {
+  cursor: pointer;
+}
+
+
+/*--------------
+     Comment
+---------------*/
+
+.ui.comments .comment {
+  position: relative;
+  margin-top: 0.5em;
+  padding-top: 0.5em;
+}
+.ui.comments .comment:first-child {
+  margin-top: 0em;
+  padding-top: 0em;
+}
+
+
+
+/*--------------------
+   Avatar (Optional)
+---------------------*/
+
+.ui.comments .comment .avatar {
+  display: block;
+  float: left;
+  width: 4em;
+}
+.ui.comments .comment .avatar img {
+  display: block;
+  margin: 0em auto;
+
+  width: 3em;
+  height: 3em;
+  border-radius: 500px;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.comments .comment > .content,
+.ui.comments .comment > .avatar {
+  display: block;
+}
+.ui.comments .comment .avatar ~ .content {
+  padding: 0em 1em;
+}
+
+/* If there is an avatar move content over */
+.ui.comments .comment > .avatar ~ .content {
+  padding-top: 0.25em;
+  margin-left: 3.5em;
+}
+
+.ui.comments .comment .metadata {
+  display: inline-block;
+  margin-left: 0.3em;
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.comments .comment .metadata > * {
+  display: inline-block;
+  margin: 0em 0.3em 0em 0em;
+}
+
+/*--------------------
+     Comment Text
+---------------------*/
+
+.ui.comments .comment .text {
+  margin: 0.25em 0em 0.5em;
+  word-wrap: break-word;
+}
+
+/*--------------------
+     User Actions
+---------------------*/
+
+.ui.comments .comment .actions {
+  font-size: 0.9em;
+}
+.ui.comments .comment .actions a {
+  display: inline-block;
+  margin: 0em 0.3em 0em 0em;
+  color: rgba(0, 0, 0, 0.3);
+}
+.ui.comments .comment .actions a.active,
+.ui.comments .comment .actions a:hover {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+/*--------------------
+      Reply Form
+---------------------*/
+
+.ui.comments .reply.form {
+  margin-top: 0.75em;
+  width: 100%;
+  max-width: 30em;
+}
+.ui.comments .comment .reply.form {
+  margin-left: 2em;
+}
+.ui.comments > .reply.form {
+  margin-top: 1.5em;
+  max-width: 40em;
+}
+.ui.comments .reply.form textarea {
+  height: 12em;
+}
+
+
+
+/*--------------------
+    Nested Comments
+---------------------*/
+
+.ui.comments .comment .comments {
+  margin-top: 0.5em;
+  padding-top: 0.5em;
+  padding-bottom: 1em;
+}
+.ui.comments .comment .comments:before{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+/* One Deep */
+.ui.comments > .comment  .comments {
+  margin-left: 2em;
+
+}
+/* Two Deep */
+.ui.comments > .comment > .comments > .comment > .comments {
+  margin-left: 1.75em;
+}
+/* Three Deep */
+.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments {
+  margin-left: 1.5em;
+}
+/* Four Deep or more */
+.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments {
+  margin-left: 0.5em;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+/*--------------------
+        Threaded
+---------------------*/
+
+.ui.threaded.comments .comment .comments {
+  margin-left: 2em !important;
+  padding-left: 2em !important;
+
+  -webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
+}
+
+/*--------------------
+        Minimal
+---------------------*/
+
+.ui.minimal.comments .comment .actions {
+  opacity: 0;
+
+  -webkit-transition: opacity 0.1s ease-out;
+  -moz-transition: opacity 0.1s ease-out;
+  -o-transition: opacity 0.1s ease-out;
+  -ms-transition: opacity 0.1s ease-out;
+  transition: opacity 0.1s ease-out;
+
+  -webkit-transition-delay: 0.1s;
+  -moz-transition-delay: 0.1s;
+  -o-transition-delay: 0.1s;
+  -ms-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+}
+.ui.minimal.comments .comment > .content:hover > .actions {
+  opacity: 1;
+}
+
+/*--------------------
+       Sizes
+---------------------*/
+
+.ui.small.comments {
+  font-size: 0.875em;
+}

data/app/assets/stylesheets/semantic-ui/views/_feed.scss

@@ -0,0 +1,152 @@
+/*
+ * # Activity Feed View
+ * http://github.com/jlukic/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: May 22, 2013
+ */
+
+
+/*******************************
+         Activity Feed
+*******************************/
+
+.ui.feed {
+
+}
+
+.ui.feed a {
+  cursor: pointer;
+}
+
+.ui.feed,
+.ui.feed .event,
+.ui.feed .label,
+.ui.feed .content,
+.ui.feed .extra {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+
+/*******************************
+            Content
+*******************************/
+
+/* Event */
+.ui.feed .event {
+  width: 100%;
+  display: table;
+  padding: 1em;
+}
+.ui.feed .event:first-child {
+  border-top: 0px;
+}
+.ui.feed .event:last-child {
+  margin-bottom: 1em;
+}
+
+/* Event Label */
+.ui.feed .label {
+  width: 3em;
+  display: table-cell;
+  vertical-align: top;
+  text-align: left;
+}
+.ui.feed .label .icon {
+  font-size: 1.5em;
+  padding: 0.5em;
+  margin: 0em;
+}
+.ui.feed .label img {
+  width: 3em;
+  margin: 0em;
+  border-radius: 50em;
+}
+.ui.feed .label + .content {
+  padding: 0.75em 1em 0em;
+}
+
+/* Content */
+.ui.feed .content {
+  display: table-cell;
+  vertical-align: top;
+  text-align: left;
+  word-wrap: break-word;
+}
+
+/* Date */
+.ui.feed .content .date {
+  float: right;
+  padding-left: 1em;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+/* Summary */
+.ui.feed .content .summary {
+  color: rgba(0, 0, 0, 0.75);
+}
+.ui.feed .content .summary img {
+  display: inline-block;
+  margin-right: 0.25em;
+  width: 4em;
+  border-radius: 500px;
+}
+
+/* Additional Information */
+.ui.feed .content .extra {
+  margin: 1em 0em 0em;
+  padding: 0.5em 0em 0em;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.ui.feed .content .extra.images {
+
+}
+.ui.feed .content .extra.images img {
+  display: inline-block;
+  margin-right: 0.25em;
+  width: 6em;
+}
+
+.ui.feed .content .extra.text {
+  padding: 0.5em 1em;
+  border-left: 0.2em solid rgba(0, 0, 0, 0.1);
+}
+
+
+
+/*******************************
+            Variations
+*******************************/
+
+.ui.small.feed {
+  font-size: 0.875em;
+}
+.ui.small.feed .label img {
+  width: 2.5em;
+}
+.ui.small.feed .label .icon {
+  font-size: 1.25em;
+}
+.ui.feed .event {
+  padding: 0.75em 0em;
+}
+.ui.small.feed .label + .content {
+  padding: 0.5em 0.5em 0;
+}
+.ui.small.feed .content .extra.images img {
+  width: 5em;
+}
+.ui.small.feed .content .extra {
+  margin: 0.5em 0em 0em;
+}
+.ui.small.feed .content .extra.text {
+  padding: 0.25em 0.5em;
+}