Import theme fro Meta topic

LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2017: Discourse
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,4 @@
+## Material Design Stock Theme
+
+More info at: https://meta.discourse.org/t/material-design-stock-theme/47142?u=falco
+

about.json

@@ -0,0 +1,5 @@
+{
+  "name": "Material Design Theme",
+  "about_url": "https://meta.discourse.org/t/material-design-stock-theme/47142?u=falco",
+  "license_url": "https://github.com/discourse/material-design-stock-theme/blob/master/LICENSE.txt"
+}

common/common.scss

@@ -0,0 +1,8 @@
+//use Roboto font
+html {
+    font-family: "Roboto", sans-serif;
+    font-weight: 400;
+}
+body input, body button, body select, body textarea {
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
+}

common/head_tag.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">

desktop/desktop.scss

@@ -0,0 +1,223 @@
+//add space between categories
+.topic-list.categories{  
+      border-spacing: 0 1em;
+      border-collapse: separate;
+}
+
+//change category background color to white
+.topic-list.categories>tbody>tr{
+    background-color: lighten($secondary, 10%);
+}
+
+//padding for category title and description
+.topic-list.categories th, .topic-list.categories td {
+    padding: 0 15px 0 15px;
+}
+
+//Shadows for categories
+.topic-list.categories>tbody>tr td.category, .topic-list.categories>tbody>tr td.stats, .topic-list.categories>tbody>tr td.latest{  
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
+}
+
+
+//underline navigation links
+.nav-pills>li.active>a, .nav-pills>li>a.active {
+  color: $primary;
+  font-weight: 500;
+  background-color: $secondary;
+  border-bottom: 3px solid $tertiary;
+}
+
+//remove highlighting navigation background on hover
+.nav-pills > li > a:hover{
+    background-color: $secondary;
+}
+
+//add shadow behind the list of topics, but not categories
+.topic-list:not(.categories){
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  background-color: lighten($secondary, 10%);
+  border-collapse: collapse;
+}
+
+
+//create conversation cards
+.topic-body{
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+  background-color: lighten($secondary, 10%);
+  margin-top: 10px;
+  padding-left: 20px;
+  border-radius: 2px;
+  padding-right: 20px;
+}
+
+//more space for avatars
+.topic-avatar{
+    border-top: 0;
+    padding-right: 10px;
+}
+
+//improve format of embedded posts
+
+.embedded-posts .topic-avatar{
+    padding-left: 0px;
+}
+.embedded-posts.top.topic-body {
+    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0),0 2px 10px 0 rgba(0,0,0,0);
+    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0),0 2px 10px 0 rgba(0,0,0,0);
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0),0 2px 10px 0 rgba(0,0,0,0);
+    background-color: $secondary;
+}
+
+
+//raise and round buttons
+.btn:not(.bulk-select) {
+    border-radius: 2px;
+    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+}
+
+//flatten editor buttons
+.d-editor-button-bar .btn{
+    border-radius: 0px;
+    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0),0 2px 10px 0 rgba(0,0,0,0);
+    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0),0 2px 10px 0 rgba(0,0,0,0);
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0),0 2px 10px 0 rgba(0,0,0,0);
+}
+
+//properly space buttons on login modal
+button#login-link, button#new-account-link{
+padding-left:inherit;
+}
+
+//darken color, remove shadow and border when pressed
+.btn:active{
+    background-color: rgba(0,0,0,.4);
+    -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,0.16),0 0px 00px 0 rgba(0,0,0,0.12);
+    -moz-box-shadow: 0 0px 0px 0 rgba(0,0,0,0.16),0 0px 00px 0 rgba(0,0,0,0.12);
+    box-shadow: 0 0px 0px 0 rgba(0,0,0,0.16),0 0px 00px 0 rgba(0,0,0,0.12);
+    
+}
+.btn:focus{
+    outline: -webkit-focus-ring-color auto 0px;
+}
+
+
+//New Topic Fab
+#create-topic.btn-default {
+    border-radius: 40px;
+    position: fixed;
+    bottom: 30px;
+    right: 50px;
+    z-index: 999;
+    padding: 24px 20px 22px 5px;
+    background-color: $tertiary; 
+    color: $tertiary; 
+    white-space: nowrap;
+    text-indent: 10px;
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
+    box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
+    overflow: hidden;
+    width: 63px;
+    height: 63px;
+    -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
+    transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
+}
+
+#create-topic.btn-default .fa-plus {
+    color: white;
+}
+
+#create-topic.btn-default:hover {
+    text-indent: 8px;
+    width: 190px;
+    color: white;
+}
+
+
+//Reply Fab
+.timeline-footer-controls {
+    position: relative;
+}
+.widget-button.btn.create {
+    border-radius: 40px;
+    position: absolute;
+    top: 50px;
+    left: -18px;
+    z-index: 999;
+    padding: 24px 20px 22px 5px;
+    background-color: $tertiary;
+    color: white;
+    text-indent: 10px;
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
+    box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
+    overflow: hidden;
+    width: 63px;
+    height: 63px;
+    -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
+    transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
+}
+
+//Center and increase size of reply icon
+.widget-button.btn.create .fa-reply{
+    color: white;
+    font-size: 20px;
+    margin-left: -8px;
+}
+
+
+//Proper spacing for iPad portrait
+@media only screen 
+and (min-width : 768px)
+and (max-width: 1250px)
+{
+    .timeline-container {
+        margin-left: 820px;
+    }
+    .topic-admin-popup-menu{
+        left:-40% !important;
+        
+    }
+
+}
+
+//Properly space notifications button
+.widget-button.btn.notifications-dropdown{
+    right: 4px;
+    position: relative;
+    border-radius: 40px;
+    width: 30px;
+}
+
+
+
+//cards for search results
+.fps-result{
+    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+  background-color: lighten($secondary, 10%);
+  margin-top: 10px;
+  padding: 20px;
+  border-radius: 2px;
+}
+
+
+@keyframes background-fade-highlight {
+    0% {
+        background-color: $tertiary;
+    }
+
+    100% {
+        background-color: $secondary;
+    }
+}

desktop/header.html

@@ -0,0 +1,83 @@
+<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
+
+<td class='main-link clearfix'>
+
+  {{raw "topic-status" topic=topic}}
+  {{topic-link topic}}
+  {{#if controller.showTopicPostBadges}}
+    {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
+  {{/if}}
+
+
+  {{raw "list/topic-excerpt" topic=model}}
+  <div class='creator'>
+  {{#if showCategory}}
+     {{category-link topic.category}}
+   {{/if}}
+  {{~#if topic.creator ~}}
+  <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
+  {{~/if ~}}
+   {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
+   </div>
+</td>
+
+
+
+{{#if controller.showLikes}}
+<td class="num likes">
+  {{number topic.like_count}} <i class='fa fa-heart'></i>
+</td>
+{{/if}}
+   
+{{#if controller.showOpLikes}}
+<td class="num likes">
+  {{number topic.op_like_count}} <i class='fa fa-heart'></i>
+</td>
+{{/if}}
+
+{{raw "list/posts-count-column" topic=topic}}
+
+<td class="last-post">
+<div class='poster-avatar'>
+<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
+</div>
+<div class='poster-info'>
+<a href="{{topic.lastPostUrl}}">
+{{format-date topic.bumpedAt format="tiny"}}
+</a>
+<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
+</div>
+</td>
+</script>
+
+<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
+  {{raw "topic-list-header-column" order='posts' name='topic.title'}}
+  
+  {{#if showLikes}}
+     {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName='Likes'}}
+  {{/if}}
+  {{#if showOpLikes}}
+     {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName='Likes'}}
+  {{/if}}
+  {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Replies'}}
+  {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
+</script>
+
+<script>
+
+(function(){
+
+var TopicListItemView = require('discourse/components/topic-list-item').default;
+
+
+TopicListItemView.reopen({
+    showCategory: function(){
+        return !this.get('controller.hideCategory') &&
+                this.get('topic.creator') &&
+                this.get('topic.category.name') !== 'uncategorized';
+    }.property()
+});
+   
+})();
+ 
+</script>