Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Allow importing Discourse styles in custom stylesheets to modify vars.

This commit is contained in:
Vikhyat Korrapati 2014-03-08 18:55:03 +05:30
parent a3f270f0e9
commit ddd1dfe896
58 changed files with 66 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/stylesheets/common.css.erb
View File

@ -1,17 +0,0 @@
// Manifest
//
//= require ./vendor/normalize
//= require ./common/foundation/base
//= require ./vendor/font_awesome/font-awesome
//= require ./vendor/chosen
//= require_tree ./common/components
//= require ./common/foundation/helpers
//= require_tree ./common
<%
# TODO this is very tricky, we want to add a dependency here on files that may not yet exist
# otherwise in dev we are often stuck nuking the tmp/cache directory
DiscoursePluginRegistry.stylesheets.each do |css|
require_asset(css)
end
%>

10
app/assets/stylesheets/common.scss Normal file
View File

@ -0,0 +1,10 @@
@import "vendor/normalize";
@import "common/foundation/base";
@import "vendor/font_awesome/font-awesome";
@import "vendor/chosen";
@import "common/foundation/helpers";
@import "common/foundation/mixins";
@import "common/foundation/variables";
@import "common/components/*";
@import "common/admin/*";
@import "common/input_tip";

3
app/assets/stylesheets/common/components/badges.css.scss
View File

@ -1,6 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
// -------------------------------------------------- // --------------------------------------------------
// Badges // Badges
// -------------------------------------------------- // --------------------------------------------------

3
app/assets/stylesheets/common/components/buttons.css.scss
View File

@ -1,6 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
// -------------------------------------------------- // --------------------------------------------------
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------

2
app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss
View File

@ -1,5 +1,3 @@
@import "../foundation/variables";
.topic-list-item td:first-child, .topic-post { .topic-list-item td:first-child, .topic-post {
background-color: inherit; background-color: inherit;
border-left: 1px solid transparent; border-left: 1px solid transparent;

4
app/assets/stylesheets/common/components/navs.css.scss
View File

@ -1,7 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
// -------------------------------------------------- // --------------------------------------------------
// Navigation menus // Navigation menus
// -------------------------------------------------- // --------------------------------------------------

5
app/assets/stylesheets/desktop.css.erb
View File

@ -1,5 +0,0 @@
// Manifest
//
//= require common
//= require_tree ./desktop

2
app/assets/stylesheets/desktop.scss Normal file
View File

@ -0,0 +1,2 @@
@import "common";
@import "desktop/*";

3
app/assets/stylesheets/desktop/activation.scss
View File

@ -1,9 +1,6 @@
// Styles used before the user is logged into discourse. For example, activating their // Styles used before the user is logged into discourse. For example, activating their
// account or changing their email. // account or changing their email.
@import "common/foundation/variables";
@import "common/foundation/mixins";
#simple-container { #simple-container {
@include border-radius-all(10px); @include border-radius-all(10px);
background-color: $primary_background_color; background-color: $primary_background_color;

3
app/assets/stylesheets/desktop/colorpicker.scss
View File

@ -1,8 +1,5 @@
// styles for the category badge color picker // styles for the category badge color picker
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
.category-color-editor { .category-color-editor {
input { input {
width: 70px; width: 70px;

3
app/assets/stylesheets/desktop/combobox.scss
View File

@ -1,6 +1,3 @@
@import "../common/foundation/variables";
.category-combobox { .category-combobox {
.badge-category { .badge-category {
display: inline-block; display: inline-block;

3
app/assets/stylesheets/desktop/compose.scss
View File

@ -1,8 +1,5 @@
// styles that apply to the reply pane that slides up to compose replies // styles that apply to the reply pane that slides up to compose replies
@import "common/foundation/variables";
@import "common/foundation/mixins";
// hack, this needs to be done cleaner // hack, this needs to be done cleaner
#private-message-users { #private-message-users {
width: 400px; width: 400px;

5
app/assets/stylesheets/desktop/discourse.scss
View File

@ -2,11 +2,6 @@
// BEWARE: changing these styles implies they take effect anywhere they are seen // BEWARE: changing these styles implies they take effect anywhere they are seen
// throughout the Discourse application // throughout the Discourse application
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
html {font-size: 14px/19px;} html {font-size: 14px/19px;}
body { body {

4
app/assets/stylesheets/desktop/faqs.scss
View File

@ -1,7 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
// -------------------------------------------------- // --------------------------------------------------
// FAQs // FAQs
// -------------------------------------------------- // --------------------------------------------------

3
app/assets/stylesheets/desktop/header.scss
View File

@ -1,6 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
// -------------------------------------------------- // --------------------------------------------------
// Discourse header // Discourse header
// -------------------------------------------------- // --------------------------------------------------

3
app/assets/stylesheets/desktop/history.scss
View File

@ -1,8 +1,5 @@
// styles that apply to the popup that appears when you show the edit history of a post // styles that apply to the popup that appears when you show the edit history of a post
@import "common/foundation/variables";
@import "common/foundation/mixins";
.modal.history-modal { .modal.history-modal {
.modal-inner-container { .modal-inner-container {
min-width: 960px; min-width: 960px;

3
app/assets/stylesheets/desktop/lightbox.scss
View File

@ -1,6 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
.lightbox { .lightbox {
position: relative; position: relative;
display: inline-block; display: inline-block;

3
app/assets/stylesheets/desktop/login.scss
View File

@ -1,8 +1,5 @@
// style that apply to the login popup // style that apply to the login popup
@import "common/foundation/variables";
@import "common/foundation/mixins";
#login-buttons { #login-buttons {
button { button {
margin: 0 5px 5px 0; margin: 0 5px 5px 0;

3
app/assets/stylesheets/desktop/modal.scss
View File

@ -1,8 +1,5 @@
// base styles for every modal popup used in Discourse // base styles for every modal popup used in Discourse
@import "common/foundation/variables";
@import "common/foundation/mixins";
.modal-open { .modal-open {
.dropdown-menu { .dropdown-menu {
z-index: 2050; z-index: 2050;

3
app/assets/stylesheets/desktop/onebox.scss
View File

@ -1,6 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
a.loading-onebox { a.loading-onebox {
background: { background: {
image: image-url("spinner_96.gif"); image: image-url("spinner_96.gif");

3
app/assets/stylesheets/desktop/pagedown.scss
View File

@ -1,8 +1,5 @@
// styles that apply to the PageDown editor // styles that apply to the PageDown editor
// http://code.google.com/p/pagedown/ // http://code.google.com/p/pagedown/
@import "common/foundation/variables";
@import "common/foundation/mixins";
.wmd-panel { .wmd-panel {
margin-left: 25%; margin-left: 25%;

3
app/assets/stylesheets/desktop/poster_expansion.scss
View File

@ -1,8 +1,5 @@
// styles that apply to the "share" popup when sharing a link to a post or topic // styles that apply to the "share" popup when sharing a link to a post or topic
@import "common/foundation/variables";
@import "common/foundation/mixins";
#poster-expansion { #poster-expansion {
position: absolute; position: absolute;
width: 460px; width: 460px;

3
app/assets/stylesheets/desktop/share_link.scss
View File

@ -1,8 +1,5 @@
// styles that apply to the "share" popup when sharing a link to a post or topic // styles that apply to the "share" popup when sharing a link to a post or topic
@import "common/foundation/variables";
@import "common/foundation/mixins";
#share-link { #share-link {
position: absolute; position: absolute;
left: 20px; left: 20px;

3
app/assets/stylesheets/desktop/topic-admin-menu.scss
View File

@ -1,8 +1,5 @@
// Styles for the topic admin menu // Styles for the topic admin menu
@import "common/foundation/variables";
@import "common/foundation/mixins";
#show-topic-admin { #show-topic-admin {
position: fixed; position: fixed;
top: 70px; top: 70px;

3
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -1,6 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
// -------------------------------------------------- // --------------------------------------------------
// Topic lists // Topic lists
// -------------------------------------------------- // --------------------------------------------------

4
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -1,7 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
@import "common/foundation/helpers";
.gap { .gap {
background-color: lighten($secondary_background_color, 76%); background-color: lighten($secondary_background_color, 76%);
padding: 5px 0; padding: 5px 0;

3
app/assets/stylesheets/desktop/topic.scss
View File

@ -1,6 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
.post-info a { .post-info a {
color: lighten($primary_text_color, 50%); color: lighten($primary_text_color, 50%);
padding-right: 5px; padding-right: 5px;

3
app/assets/stylesheets/desktop/upload.scss
View File

@ -1,6 +1,3 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
.add-upload .fa-plus { .add-upload .fa-plus {
font-size: 10px; font-size: 10px;
position: relative; position: relative;

2
app/assets/stylesheets/desktop/user.scss
View File

@ -1,6 +1,4 @@
// styles that apply to the user page // styles that apply to the user page
@import "common/foundation/variables";
@import "common/foundation/mixins";
.groups { .groups {
.group-link { .group-link {

0
app/assets/stylesheets/desktop/username_tagsinput.css → app/assets/stylesheets/desktop/username_tagsinput.scss
View File

4
app/assets/stylesheets/mobile.css.erb
View File

@ -1,4 +0,0 @@
// Manifest
//
//= require common
//= require_tree ./mobile

2
app/assets/stylesheets/mobile.scss Normal file
View File

@ -0,0 +1,2 @@
@import "common";
@import "mobile/*";

3
app/assets/stylesheets/mobile/activation.scss
View File

@ -1,9 +1,6 @@
// Styles used before the user is logged into discourse. For example, activating their // Styles used before the user is logged into discourse. For example, activating their
// account or changing their email. // account or changing their email.
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
#simple-container { #simple-container {
@include border-radius-all(10px); @include border-radius-all(10px);
background-color: $primary_background_color; background-color: $primary_background_color;

3
app/assets/stylesheets/mobile/colorpicker.scss
View File

@ -1,8 +1,5 @@
// styles for the category badge color picker // styles for the category badge color picker
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
.category-color-editor { .category-color-editor {
input { input {
width: 70px; width: 70px;

3
app/assets/stylesheets/mobile/compose.scss
View File

@ -1,8 +1,5 @@
// styles that apply to the reply pane that slides up to compose replies // styles that apply to the reply pane that slides up to compose replies
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
// hack, this needs to be done cleaner // hack, this needs to be done cleaner
.private-message input.span8 { .private-message input.span8 {
width: 47%; width: 47%;

4
app/assets/stylesheets/mobile/discourse.scss
View File

@ -2,10 +2,6 @@
// BEWARE: changing these styles implies they take effect anywhere they are seen // BEWARE: changing these styles implies they take effect anywhere they are seen
// throughout the Discourse application // throughout the Discourse application
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
@import "../common/foundation/helpers";
body { body {
background-color: $primary_background_color; background-color: $primary_background_color;
} }

4
app/assets/stylesheets/mobile/faqs.scss
View File

@ -1,7 +1,3 @@
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
@import "../common/foundation/helpers";
// -------------------------------------------------- // --------------------------------------------------
// FAQs // FAQs
// -------------------------------------------------- // --------------------------------------------------

3
app/assets/stylesheets/mobile/header.scss
View File

@ -1,6 +1,3 @@
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
// -------------------------------------------------- // --------------------------------------------------
// Discourse header // Discourse header
// -------------------------------------------------- // --------------------------------------------------

3
app/assets/stylesheets/mobile/history.scss
View File

@ -1,8 +1,5 @@
// styles that apply to the popup that appears when you show the edit history of a post // styles that apply to the popup that appears when you show the edit history of a post
@import "common/foundation/variables";
@import "common/foundation/mixins";
.modal.history-modal { .modal.history-modal {
.modal-inner-container { .modal-inner-container {
min-width: 960px; min-width: 960px;

3
app/assets/stylesheets/mobile/lightbox.scss
View File

@ -1,6 +1,3 @@
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
.lightbox { .lightbox {
position: relative; position: relative;
display: inline-block; display: inline-block;

3
app/assets/stylesheets/mobile/login.scss
View File

@ -1,8 +1,5 @@
// style that apply to the login popup // style that apply to the login popup
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
.btn-social { .btn-social {
width: 250px; width: 250px;
font-size: 16px; font-size: 16px;

3
app/assets/stylesheets/mobile/modal.scss
View File

@ -1,8 +1,5 @@
// base styles for every modal popup used in Discourse // base styles for every modal popup used in Discourse
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
.modal-open { .modal-open {
.dropdown-menu { .dropdown-menu {
z-index: 2050; z-index: 2050;

3
app/assets/stylesheets/mobile/onebox.scss
View File

@ -1,6 +1,3 @@
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
a.loading-onebox { a.loading-onebox {
background: { background: {
image: image-url("spinner_96.gif"); image: image-url("spinner_96.gif");

2
app/assets/stylesheets/mobile/pagedown.scss
View File

@ -1,8 +1,6 @@
// styles that apply to the PageDown editor // styles that apply to the PageDown editor
// http://code.google.com/p/pagedown/ // http://code.google.com/p/pagedown/
@import "../common/foundation/mixins";
.wmd-panel { .wmd-panel {
margin-left: 25%; margin-left: 25%;
margin-right: 25%; margin-right: 25%;

3
app/assets/stylesheets/mobile/share_link.scss
View File

@ -1,8 +1,5 @@
// styles that apply to the "share" popup when sharing a link to a post or topic // styles that apply to the "share" popup when sharing a link to a post or topic
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
#share-link { #share-link {
position: absolute; position: absolute;
left: 20px; left: 20px;

3
app/assets/stylesheets/mobile/topic-admin-menu.scss
View File

@ -1,8 +1,5 @@
// Styles for the topic admin menu // Styles for the topic admin menu
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
#show-topic-admin { #show-topic-admin {
position: fixed; position: fixed;
top: 70px; top: 70px;

3
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -1,6 +1,3 @@
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
// -------------------------------------------------- // --------------------------------------------------
// Topic lists // Topic lists
// -------------------------------------------------- // --------------------------------------------------

2
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -1,5 +1,3 @@
@import "common/foundation/variables";
.gap { .gap {
background-color: lighten($secondary_background_color, 76%); background-color: lighten($secondary_background_color, 76%);
padding: 5px 15px; padding: 5px 15px;

2
app/assets/stylesheets/mobile/topic.scss
View File

@ -1,5 +1,3 @@
@import "common/foundation/variables";
.topic-meta-data { .topic-meta-data {
width: 100%; width: 100%;
h3 a {margin-left: 10px;} h3 a {margin-left: 10px;}

3
app/assets/stylesheets/mobile/upload.scss
View File

@ -1,6 +1,3 @@
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
.add-upload .fa-plus { .add-upload .fa-plus {
font-size: 10px; font-size: 10px;
position: relative; position: relative;

2
app/assets/stylesheets/mobile/user.scss
View File

@ -1,6 +1,4 @@
// styles that apply to the user page // styles that apply to the user page
@import "../common/foundation/variables";
@import "../common/foundation/mixins";
.user-preferences { .user-preferences {
.control-group { .control-group {

0
app/assets/stylesheets/mobile/username_tagsinput.css → app/assets/stylesheets/mobile/username_tagsinput.scss
View File

7
app/assets/stylesheets/plugins.css.erb Normal file
View File

@ -0,0 +1,7 @@
<%
# TODO this is very tricky, we want to add a dependency here on files that may not yet exist
# otherwise in dev we are often stuck nuking the tmp/cache directory
DiscoursePluginRegistry.stylesheets.each do |css|
require_asset(css)
end
%>

10
app/assets/stylesheets/vendor/chosen.css.erb → app/assets/stylesheets/vendor/chosen.scss vendored
View File

@ -60,7 +60,7 @@
width: 12px; width: 12px;
height: 13px; height: 13px;
font-size: 1px; font-size: 1px;
background: url(<%=asset_path "chosen-sprite.png"%>) right top no-repeat; background: asset-url("chosen-sprite.png") right top no-repeat;
} }
.chzn-container-single .chzn-single abbr:hover { .chzn-container-single .chzn-single abbr:hover {
background-position: right -11px; background-position: right -11px;
@ -74,7 +74,7 @@
width: 18px; width: 18px;
} }
.chzn-container-single .chzn-single div b { .chzn-container-single .chzn-single div b {
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat 0 0; background: asset-url("chosen-sprite.png") no-repeat 0 0;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -184,7 +184,7 @@
width: 12px; width: 12px;
height: 13px; height: 13px;
font-size: 1px; font-size: 1px;
background: url(<%=asset_path "chosen-sprite.png"%>) right top no-repeat; background: asset-url("chosen-sprite.png") right top no-repeat;
} }
.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover { .chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
background-position: right -11px; background-position: right -11px;
@ -264,10 +264,10 @@
bottom: 0; bottom: 0;
} }
.chzn-container .chzn-results-scroll-down span { .chzn-container .chzn-results-scroll-down span {
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -4px -3px; background: asset-url("chosen-sprite.png") no-repeat -4px -3px;
} }
.chzn-container .chzn-results-scroll-up span { .chzn-container .chzn-results-scroll-up span {
background: url(<%=asset_path "chosen-sprite.png"%>) no-repeat -22px -3px; background: asset-url("chosen-sprite.png") no-repeat -22px -3px;
} }
/* @end */ /* @end */

28
app/models/site_customization.rb
View File

@ -11,11 +11,37 @@ class SiteCustomization < ActiveRecord::Base
true true
end end
def compile_stylesheet(scss)
stylesheets_path = Rails.root.join('app', 'assets', 'stylesheets')
# Get the sprockets environment. We need to do this because in production
# Rails.application.assets returns Sprockets::Index which does not compile
# assets.
sprockets = Rails.application.assets
if sprockets.is_a?(Sprockets::Index)
sprockets = sprockets.instance_variable_get('@environment')
end
file_path = stylesheets_path.join('custom_stylesheet.scss')
File.open(file_path, 'w') do |f|
f.write scss
end
begin
compiled = sprockets.find_asset('custom_stylesheet').body
ensure
FileUtils.rm file_path
end
compiled
end
before_save do before_save do
['stylesheet', 'mobile_stylesheet'].each do |stylesheet_attr| ['stylesheet', 'mobile_stylesheet'].each do |stylesheet_attr|
if self.send("#{stylesheet_attr}_changed?") if self.send("#{stylesheet_attr}_changed?")
begin begin
self.send("#{stylesheet_attr}_baked=", Sass.compile(self.send(stylesheet_attr))) self.send("#{stylesheet_attr}_baked=", compile_stylesheet(self.send(stylesheet_attr)))
rescue Sass::SyntaxError => e rescue Sass::SyntaxError => e
error = e.sass_backtrace_str("custom stylesheet") error = e.sass_backtrace_str("custom stylesheet")
error.gsub!("\n", '\A ') error.gsub!("\n", '\A ')

2
app/views/common/_discourse_stylesheet.html.erb
View File

@ -6,6 +6,8 @@
<% end %> <% end %>
<%- end %> <%- end %>
<%= stylesheet_link_tag "plugins" %>
<%- if staff? %> <%- if staff? %>
<%= stylesheet_link_tag "admin"%> <%= stylesheet_link_tag "admin"%>
<%- end %> <%- end %>

4
lib/tasks/assets.rake
View File

@ -35,10 +35,10 @@ task 'assets:precompile:before' do
def evaluate(context, locals, &block) def evaluate(context, locals, &block)
::Sprockets.cache_compiled("sass", data) do ::Sprockets.cache_compiled("sass", data) do
# HACK, SASS compiler will degrade to aweful perf with huge files # HACK, SASS compiler will degrade to aweful perf with huge files
# Bypass if larger than 200kb, ensure assets are minified prior # Bypass if larger than 500kb, ensure assets are minified prior
if context.pathname && if context.pathname &&
context.pathname.to_s =~ /.css$/ && context.pathname.to_s =~ /.css$/ &&
data.length > 200.kilobytes data.length > 500.kilobytes
puts "Skipped minifying #{context.pathname} cause it is larger than 200KB, minify in source control or avoid large CSS files" puts "Skipped minifying #{context.pathname} cause it is larger than 200KB, minify in source control or avoid large CSS files"
data data
else else