Create FAB file and test refactor
Test file imports and extensions being compiled as expected in Discourse
This commit is contained in:
M1thrandir
parent
6dd0b35a51
commit
17a39e769b
87
about.json
87
about.json
@ -2,90 +2,5 @@
|
||||
"name": "Material Design Theme",
|
||||
"about_url": "https://meta.discourse.org/t/material-design-stock-theme/47142",
|
||||
"license_url": "https://github.com/discourse/material-design-stock-theme/blob/master/LICENSE.txt",
|
||||
"color_schemes": {
|
||||
"Material Teal/Amber": {
|
||||
"primary": "212121",
|
||||
"secondary": "fafafa",
|
||||
"tertiary": "ffa000",
|
||||
"quaternary": "00796b",
|
||||
"header_background": "00796b",
|
||||
"header_primary": "ffffff",
|
||||
"highlight": "ffff8d",
|
||||
"danger": "ff5722",
|
||||
"success": "4caf50",
|
||||
"love": "fa6c8d"
|
||||
},
|
||||
"Material Red/Blue": {
|
||||
"primary": "212121",
|
||||
"secondary": "fafafa",
|
||||
"tertiary": "448aff",
|
||||
"quaternary": "d32f2f",
|
||||
"header_background": "d32f2f",
|
||||
"header_primary": "ffffff",
|
||||
"highlight": "ffff8d",
|
||||
"danger": "ff6d00",
|
||||
"success": "4caf50",
|
||||
"love": "fa6c8d"
|
||||
},
|
||||
"Material Blue/Red": {
|
||||
"primary": "212121",
|
||||
"secondary": "fafafa",
|
||||
"tertiary": "ff5252",
|
||||
"quaternary": "2196f3",
|
||||
"header_background": "1976f2",
|
||||
"header_primary": "ffffff",
|
||||
"highlight": "ffff8d",
|
||||
"danger": "ff6d00",
|
||||
"success": "4caf50",
|
||||
"love": "fa6c8d"
|
||||
},
|
||||
"Material Indigo/Orange": {
|
||||
"primary": "212121",
|
||||
"secondary": "fafafa",
|
||||
"tertiary": "ff5722",
|
||||
"quaternary": "3f51b5",
|
||||
"header_background": "303f9f",
|
||||
"header_primary": "ffffff",
|
||||
"highlight": "ffeb3b",
|
||||
"danger": "f44336",
|
||||
"success": "4caf50",
|
||||
"love": "fa6c8d"
|
||||
},
|
||||
"Material Dark": {
|
||||
"primary": "fafafa",
|
||||
"secondary": "212121",
|
||||
"tertiary": "00bcd4",
|
||||
"quaternary": "00bcd4",
|
||||
"header_background": "000000",
|
||||
"header_primary": "ffffff",
|
||||
"highlight": "fafafa",
|
||||
"danger": "e45735",
|
||||
"success": "009900",
|
||||
"love": "fa6c8d"
|
||||
},
|
||||
"M1thrandir Dark": {
|
||||
"primary": "ababab",
|
||||
"secondary": "222222",
|
||||
"tertiary": "5eb9b9",
|
||||
"quaternary": "0b8692",
|
||||
"header_background": "151515",
|
||||
"header_primary": "ababab",
|
||||
"highlight": "0b8692",
|
||||
"danger": "9e1919",
|
||||
"success": "3a8c5a",
|
||||
"love": "e8486d"
|
||||
},
|
||||
"M1thrandir Light": {
|
||||
"primary": "222222",
|
||||
"secondary": "f5f5f5",
|
||||
"tertiary": "ff8222",
|
||||
"quaternary": "ff5722",
|
||||
"header_background": "00395f",
|
||||
"header_primary": "ffffff",
|
||||
"highlight": "0172bd",
|
||||
"danger": "df0000",
|
||||
"success": "5d882e",
|
||||
"love": "fa6c8d"
|
||||
}
|
||||
}
|
||||
"color_schemes": {}
|
||||
}
|
||||
|
||||
78
desktop/_FAB.scss
Normal file
78
desktop/_FAB.scss
Normal file
@ -0,0 +1,78 @@
|
||||
@import 'shared';
|
||||
|
||||
//FAB specific styles
|
||||
%fabShadow {
|
||||
-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);
|
||||
}
|
||||
|
||||
//New Topic Fab
|
||||
#create-topic.btn-default {
|
||||
@extend %shadow;
|
||||
border-radius: 40px;
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 50px;
|
||||
z-index: 999;
|
||||
padding: 20px 2px 20px;
|
||||
background-color: $quaternary;
|
||||
color: $quaternary;
|
||||
white-space: nowrap;
|
||||
text-indent: 10px;
|
||||
overflow: hidden;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
-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 i {
|
||||
color: $header-primary;
|
||||
}
|
||||
|
||||
#create-topic.btn-default:hover {
|
||||
text-indent: 0px;
|
||||
width: 190px;
|
||||
color: $header-primary;
|
||||
}
|
||||
|
||||
//remove opacity setting
|
||||
.btn i.fa {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
//Reply Fab
|
||||
.timeline-footer-controls {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.widget-button.btn.create.no-text {
|
||||
@extend %fabShadow;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: -18px;
|
||||
z-index: 999;
|
||||
padding: 5px 12px 0px 0px;
|
||||
background-color: $quaternary;
|
||||
color: $header-primary;
|
||||
text-indent: 10px;
|
||||
overflow: hidden;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
-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;
|
||||
}
|
||||
|
||||
.widget-button.btn.create.no-text:hover {
|
||||
background-color: darken($quaternary, 2%);
|
||||
color: $header-primary;
|
||||
}
|
||||
|
||||
//Center and increase size of reply icon
|
||||
.widget-button.btn.create .fa-reply {
|
||||
color: $header-primary;
|
||||
font-size: 20px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
17
desktop/_shared.scss
Normal file
17
desktop/_shared.scss
Normal file
@ -0,0 +1,17 @@
|
||||
//This file should include styles that are reused throughout the app to reduce
|
||||
//inconsistency and make styles easier to share across files.
|
||||
|
||||
//Shared Variables
|
||||
|
||||
|
||||
|
||||
//Shared Extensions
|
||||
|
||||
%shadow {
|
||||
-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);
|
||||
}
|
||||
|
||||
//Shared Mixins
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@import 'shared';
|
||||
@import 'FAB';
|
||||
|
||||
//add space between categories
|
||||
.topic-list.categories {
|
||||
border-spacing: 0 1em;
|
||||
@ -13,9 +16,7 @@
|
||||
|
||||
//change category and tag dropdowns
|
||||
.chooser {
|
||||
-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);
|
||||
@extend %shadow;
|
||||
background-color: lighten($secondary, 5%) !important;
|
||||
color: $quaternary !important;
|
||||
border: none !important;
|
||||
@ -426,84 +427,11 @@ button#new-account-link {
|
||||
color: $highlight;
|
||||
}
|
||||
|
||||
//color support for status add-on
|
||||
//color support for solved status add-on
|
||||
.topic-statuses .topic-status .fa-check-square-o {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
//New Topic Fab
|
||||
#create-topic.btn-default {
|
||||
border-radius: 40px;
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 50px;
|
||||
z-index: 999;
|
||||
padding: 20px 2px 20px;
|
||||
background-color: $quaternary;
|
||||
color: $quaternary;
|
||||
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: 56px;
|
||||
height: 56px;
|
||||
-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 i {
|
||||
color: $header-primary;
|
||||
}
|
||||
|
||||
#create-topic.btn-default:hover {
|
||||
text-indent: 0px;
|
||||
width: 190px;
|
||||
color: $header-primary;
|
||||
}
|
||||
|
||||
//remove opacity setting
|
||||
.btn i.fa {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
//Reply Fab
|
||||
.timeline-footer-controls {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.widget-button.btn.create.no-text {
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: -18px;
|
||||
z-index: 999;
|
||||
padding: 5px 12px 0px 0px;
|
||||
background-color: $quaternary;
|
||||
color: $header-primary;
|
||||
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: 56px;
|
||||
height: 56px;
|
||||
-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;
|
||||
}
|
||||
|
||||
.widget-button.btn.create.no-text:hover {
|
||||
background-color: darken($quaternary, 2%);
|
||||
color: $header-primary;
|
||||
}
|
||||
|
||||
//Center and increase size of reply icon
|
||||
.widget-button.btn.create .fa-reply {
|
||||
color: $header-primary;
|
||||
font-size: 20px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
//Proper spacing for iPad portrait
|
||||
@media only screen and (min-width: 768px) and (max-width: 1250px) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user