semantic-ui-sass 0.19.3.1 → 1.7.0.0

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

@@ -1,27 +1,34 @@
-/*
- * # Semantic Comment View
- * http://github.com/jlukic/semantic-ui/
- *
+ /*
+ * # Semantic UI
+ * https://github.com/Semantic-Org/Semantic-UI
+ * http://www.semantic-ui.com/
  *
  * Copyright 2014 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- * Released: April 17 2014
  */
 
+
+
 /*******************************
             Standard
 *******************************/
 
+
 /*--------------
     Comments
 ---------------*/
 
-
-
-.ui.comments a {
-  cursor: pointer;
+.ui.comments {
+  margin: 1.5em 0em;
+  max-width: 650px;
+}
+.ui.comments:first-child {
+  margin-top: 0em;
+}
+.ui.comments:last-child {
+  margin-bottom: 0em;
 }
 
 /*--------------
@@ -30,62 +37,102 @@
 
 .ui.comments .comment {
   position: relative;
-  margin-top: 0.5em;
-  padding-top: 0.5em;
+  background: none;
+  margin: 0.5em 0em 0em;
+  padding: 0.5em 0em 0em;
+  border: none;
+  border-top: none;
+  line-height: 1.2;
 }
-
 .ui.comments .comment:first-child {
   margin-top: 0em;
   padding-top: 0em;
 }
 
 /*--------------------
-   Avatar (Optional)
+    Nested Comments
 ---------------------*/
 
+.ui.comments .comment .comments {
+  margin: 0em 0em 0.5em 0.5em;
+  padding: 1em 0em 1em 1em;
+}
+.ui.comments .comment .comments:before {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.ui.comments .comment .comments .comment {
+  border: none;
+  border-top: none;
+  background: none;
+}
+
+/*--------------
+     Avatar
+---------------*/
+
 .ui.comments .comment .avatar {
   display: block;
+  width: 2.5em;
+  height: auto;
   float: left;
-  width: 4em;
+  margin: 0.2em 0em 0em;
 }
-
+.ui.comments .comment img.avatar,
 .ui.comments .comment .avatar img {
   display: block;
   margin: 0em auto;
-  width: 3em;
-  height: 3em;
-  border-radius: 500px;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
 }
 
 /*--------------
      Content
 ---------------*/
 
-.ui.comments .comment > .content,
-.ui.comments .comment > .avatar {
+.ui.comments .comment > .content {
   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;
 }
 
+/*--------------
+     Author
+---------------*/
+
+.ui.comments .comment .author {
+  font-size: 1em;
+  color: rgba(0, 0, 0, 0.8);
+  font-weight: bold;
+}
+.ui.comments .comment a.author {
+  cursor: pointer;
+}
+.ui.comments .comment a.author:hover {
+  color: #00b2f3;
+}
+
+/*--------------
+     Metadata
+---------------*/
+
 .ui.comments .comment .metadata {
   display: inline-block;
-  margin-left: 0.3em;
+  margin-left: 0.5em;
   color: rgba(0, 0, 0, 0.4);
+  font-size: 0.875em;
 }
-
 .ui.comments .comment .metadata > * {
   display: inline-block;
-  margin: 0em 0.3em 0em 0em;
+  margin: 0em 0.5em 0em 0em;
+}
+.ui.comments .comment .metadata > :last-child {
+  margin-right: 0em;
 }
 
 /*--------------------
@@ -94,7 +141,10 @@
 
 .ui.comments .comment .text {
   margin: 0.25em 0em 0.5em;
+  font-size: 1em;
   word-wrap: break-word;
+  color: rgba(0, 0, 0, 0.8);
+  line-height: 1.3;
 }
 
 /*--------------------
@@ -102,96 +152,63 @@
 ---------------------*/
 
 .ui.comments .comment .actions {
-  font-size: 0.9em;
+  font-size: 0.875em;
 }
-
 .ui.comments .comment .actions a {
+  cursor: pointer;
   display: inline-block;
-  margin: 0em 0.3em 0em 0em;
-  color: rgba(0, 0, 0, 0.3);
+  margin: 0em 0.75em 0em 0em;
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.comments .comment .actions a:last-child {
+  margin-right: 0em;
 }
-
 .ui.comments .comment .actions a.active,
 .ui.comments .comment .actions a:hover {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(0, 0, 0, 0.8);
 }
 
 /*--------------------
       Reply Form
 ---------------------*/
 
-.ui.comments .reply.form {
-  margin-top: 0.75em;
-  width: 100%;
-  max-width: 30em;
+.ui.comments > .reply.form {
+  margin-top: 1em;
 }
-
 .ui.comments .comment .reply.form {
-  margin-left: 2em;
-}
-
-.ui.comments > .reply.form {
-  margin-top: 1.5em;
-  max-width: 40em;
+  width: 100%;
+  margin-top: 1em;
 }
-
 .ui.comments .reply.form textarea {
+  font-size: 1em;
   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 */
+/*******************************
+            State
+*******************************/
 
-.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments {
-  margin-left: 1.5em;
+.ui.collapsed.comments,
+.ui.comments .collapsed.comments,
+.ui.comments .collapsed.comment {
+  display: none;
 }
 
-/* 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);
-  box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
+  margin: -1.5em 0 -1em 1.25em;
+  padding: 3em 0em 2em 2.25em;
+  box-shadow: -1px 0px 0px rgba(39, 41, 43, 0.15);
 }
 
 /*--------------------
@@ -200,12 +217,15 @@
 
 .ui.minimal.comments .comment .actions {
   opacity: 0;
-  -webkit-transition: opacity 0.1s ease-out;
-  transition: opacity 0.1s ease-out;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: auto;
+  -webkit-transition: opacity 0.2s ease;
+          transition: opacity 0.2s ease;
   -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
+          transition-delay: 0.1s;
 }
-
 .ui.minimal.comments .comment > .content:hover > .actions {
   opacity: 1;
 }
@@ -215,5 +235,26 @@
 ---------------------*/
 
 .ui.small.comments {
-  font-size: 0.875em;
-}
+  font-size: 0.9em;
+}
+.ui.comments {
+  font-size: 1em;
+}
+.ui.large.comments {
+  font-size: 1.1em;
+}
+.ui.huge.comments {
+  font-size: 1.2em;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+    User Variable Overrides
+*******************************/
+

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

@@ -1,164 +1,277 @@
-/*
- * # Activity Feed View
- * http://github.com/jlukic/semantic-ui/
- *
+ /*
+ * # Semantic UI
+ * https://github.com/Semantic-Org/Semantic-UI
+ * http://www.semantic-ui.com/
  *
  * Copyright 2014 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- * Released: May 22, 2014
  */
 
+
+
 /*******************************
          Activity Feed
 *******************************/
 
-
-
-.ui.feed a {
-  cursor: pointer;
+.ui.feed {
+  margin: 1em 0em;
 }
-
-.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;
+.ui.feed:first-child {
+  margin-top: 0em;
+}
+.ui.feed:last-child {
+  margin-top: 0em;
 }
 
+
 /*******************************
             Content
 *******************************/
 
-/* Event */
 
-.ui.feed .event {
-  width: 100%;
+/* Event */
+.ui.feed > .event {
   display: table;
-  padding: 1em;
+  width: 100%;
+  padding: 0.5rem 0em;
+  margin: 0em;
+  background: none;
+  border-top: none;
 }
-
-.ui.feed .event:first-child {
+.ui.feed > .event:first-child {
   border-top: 0px;
+  padding-top: 0em;
 }
-
-.ui.feed .event:last-child {
-  margin-bottom: 1em;
+.ui.feed > .event:last-child {
+  padding-bottom: 0em;
 }
 
 /* Event Label */
-
-.ui.feed .label {
-  width: 3em;
+.ui.feed > .event > .label {
   display: table-cell;
+  width: 2.5em;
+  height: 2.5em;
   vertical-align: top;
   text-align: left;
 }
-
-.ui.feed .label .icon {
+.ui.feed > .event > .label .icon {
+  opacity: 1;
   font-size: 1.5em;
-  padding: 0.5em;
-  margin: 0em;
+  width: 100%;
+  padding: 0.25em;
+  background: none;
+  border: none;
+  border-radius: none;
+  color: rgba(0, 0, 0, 0.6);
 }
-
-.ui.feed .label img {
-  width: 3em;
-  margin: 0em;
-  border-radius: 50em;
+.ui.feed > .event > .label img {
+  width: 100%;
+  height: auto;
+  border-radius: 500rem;
 }
-
-.ui.feed .label + .content {
-  padding: 0.75em 1em 0em;
+.ui.feed > .event > .label + .content {
+  padding: 0.5em 0em 0.5em 1.25em;
 }
 
 /* Content */
-
-.ui.feed .content {
+.ui.feed > .event > .content {
   display: table-cell;
   vertical-align: top;
   text-align: left;
   word-wrap: break-word;
 }
+.ui.feed > .event:last-child > .content {
+  padding-bottom: 0em;
+}
+
+/* Link */
+.ui.feed > .event > .content a {
+  cursor: pointer;
+}
 
-/* Date */
+/*--------------
+      Date
+---------------*/
 
-.ui.feed .content .date {
-  float: right;
-  padding-left: 1em;
+.ui.feed > .event > .content .date {
+  margin: -0.5rem 0em 0em;
+  padding: 0em;
+  font-weight: normal;
+  font-size: 1em;
+  font-style: normal;
   color: rgba(0, 0, 0, 0.4);
 }
 
-/* Summary */
+/*--------------
+     Summary
+---------------*/
 
-.ui.feed .content .summary {
-  color: rgba(0, 0, 0, 0.75);
+.ui.feed > .event > .content .summary {
+  margin: 0em;
+  font-size: 1em;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.8);
 }
 
-.ui.feed .content .summary img {
+/* Summary Image */
+.ui.feed > .event > .content .summary img {
   display: inline-block;
-  margin-right: 0.25em;
-  width: 4em;
-  border-radius: 500px;
+  width: auto;
+  height: 2em;
+  margin: -0.25em 0.25em 0em 0em;
+  border-radius: 0.25em;
+  vertical-align: middle;
 }
 
-/* Additional Information */
+/*--------------
+      User
+---------------*/
 
-.ui.feed .content .extra {
-  margin: 1em 0em 0em;
-  padding: 0.5em 0em 0em;
-  color: rgba(0, 0, 0, 0.5);
+.ui.feed > .event > .content .user {
+  display: inline-block;
+  font-weight: bold;
+  margin-right: 0em;
+  vertical-align: baseline;
+}
+.ui.feed > .event > .content .user img {
+  margin: -0.25em 0.25em 0em 0em;
+  width: auto;
+  height: 2em;
+  vertical-align: middle;
+}
+
+/*--------------
+   Inline Date
+---------------*/
+
+
+/* Date inside Summary */
+.ui.feed > .event > .content .summary > .date {
+  display: inline-block;
+  float: none;
+  font-weight: normal;
+  font-size: 0.875em;
+  font-style: normal;
+  margin: 0em 0em 0em 0.5em;
+  padding: 0em;
+  color: rgba(0, 0, 0, 0.4);
 }
 
+/*--------------
+  Extra Summary
+---------------*/
 
+.ui.feed > .event > .content .extra {
+  margin: 0.5em 0em 0em;
+  background: none;
+  padding: 0em;
+  color: rgba(0, 0, 0, 0.8);
+}
 
-.ui.feed .content .extra.images img {
+/* Images */
+.ui.feed > .event > .content .extra.images img {
   display: inline-block;
-  margin-right: 0.25em;
+  margin: 0em 0.25em 0em 0em;
   width: 6em;
 }
 
-.ui.feed .content .extra.text {
+/* Text */
+.ui.feed > .event > .content .extra.text {
   padding: 0.5em 1em;
-  border-left: 0.2em solid rgba(0, 0, 0, 0.1);
+  border-left: 3px solid rgba(0, 0, 0, 0.2);
+  font-size: 1em;
+  max-width: 500px;
+  line-height: 1.33;
 }
 
-/*******************************
-            Variations
-*******************************/
+/*--------------
+      Meta
+---------------*/
 
-.ui.small.feed {
+.ui.feed > .event > .content .meta {
+  display: inline-block;
   font-size: 0.875em;
+  margin: 0.5em 0em 0em;
+  background: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0em;
+  color: rgba(0, 0, 0, 0.6);
 }
-
-.ui.small.feed .label img {
-  width: 2.5em;
+.ui.feed > .event > .content .meta > * {
+  position: relative;
+  margin-left: 0.75em;
 }
-
-.ui.small.feed .label .icon {
-  font-size: 1.25em;
+.ui.feed > .event > .content .meta > *:after {
+  content: '';
+  color: rgba(0, 0, 0, 0.2);
+  top: 0em;
+  left: -1em;
+  opacity: 1;
+  position: absolute;
+  vertical-align: top;
 }
-
-.ui.feed .event {
-  padding: 0.75em 0em;
+.ui.feed > .event > .content .meta .like {
+  color: '';
+  -webkit-transition: 0.2s color ease;
+          transition: 0.2s color ease;
+}
+.ui.feed > .event > .content .meta .like:hover .icon {
+  color: #ff2733;
+}
+.ui.feed > .event > .content .meta .active.like .icon {
+  color: #ef404a;
 }
 
-.ui.small.feed .label + .content {
-  padding: 0.5em 0.5em 0;
+/* First element */
+.ui.feed > .event > .content .meta > :first-child {
+  margin-left: 0em;
+}
+.ui.feed > .event > .content .meta > :first-child::after {
+  display: none;
 }
 
-.ui.small.feed .content .extra.images img {
-  width: 5em;
+/* Action */
+.ui.feed > .event > .content .meta a,
+.ui.feed > .event > .content .meta > .icon {
+  cursor: pointer;
+  opacity: 1;
+  color: rgba(0, 0, 0, 0.5);
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+}
+.ui.feed > .event > .content .meta a:hover,
+.ui.feed > .event > .content .meta a:hover .icon,
+.ui.feed > .event > .content .meta > .icon:hover {
+  color: rgba(0, 0, 0, 0.8);
 }
 
-.ui.small.feed .content .extra {
-  margin: 0.5em 0em 0em;
+
+/*******************************
+            Variations
+*******************************/
+
+.ui.small.feed {
+  font-size: 0.9em;
+}
+.ui.feed {
+  font-size: 1em;
+}
+.ui.large.feed {
+  font-size: 1.1em;
 }
 
-.ui.small.feed .content .extra.text {
-  padding: 0.25em 0.5em;
-}
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+    User Variable Overrides
+*******************************/
+