Merge pull request #4506 from consul/foundation_settings
Make it easier to customize Sass variables
This commit is contained in:
Javi Martín
12
app/assets/stylesheets/_consul_custom_overrides.scss
Normal file
12
app/assets/stylesheets/_consul_custom_overrides.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
// Override CONSUL and Foundation settings in this file.
|
||||
//
|
||||
// For example, override the brand color to #123456 with:
|
||||
//
|
||||
// $brand: #123456;
|
||||
//
|
||||
// Or override Foundation's tooltip color to #123456 with:
|
||||
//
|
||||
// $tooltip-color: #123456;
|
||||
//
|
||||
// The variables you can override are defined in the
|
||||
// `_settings.scss` and `_consul_settings.scss` files.
|
||||
@@ -10,74 +10,75 @@
|
||||
// 1. CONSUL variables
|
||||
// --------------------
|
||||
|
||||
$base-font-size: rem-calc(17);
|
||||
$base-line: rem-calc(26);
|
||||
$small-font-size: rem-calc(14);
|
||||
$line-height: rem-calc(24);
|
||||
$tiny-font-size: rem-calc(12);
|
||||
$base-font-size: rem-calc(17) !default;
|
||||
$base-line: rem-calc(26) !default;
|
||||
$line-height: rem-calc(24) !default;
|
||||
$tiny-font-size: rem-calc(12) !default;
|
||||
|
||||
$brand: #004a83;
|
||||
$brand-secondary: darken($brand, 10%);
|
||||
$dark: $brand-secondary;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
||||
|
||||
$text: #222;
|
||||
$text-medium: #515151;
|
||||
$text-light: #bfbfbf;
|
||||
$brand: #004a83 !default;
|
||||
$brand-secondary: darken($brand, 10%) !default;
|
||||
$dark: $brand-secondary !default;
|
||||
|
||||
$border: #dee0e3;
|
||||
$text: #222 !default;
|
||||
$text-medium: #515151 !default;
|
||||
$text-light: #bfbfbf !default;
|
||||
|
||||
$link: $brand;
|
||||
$link-hover: darken($link, 20%);
|
||||
$border: #dee0e3 !default;
|
||||
|
||||
$debates: $brand;
|
||||
$link: $brand !default;
|
||||
$link-hover: darken($link, 20%) !default;
|
||||
|
||||
$like: #7bd2a8;
|
||||
$unlike: #ef8585;
|
||||
$debates: $brand !default;
|
||||
|
||||
$delete: #f04124;
|
||||
$check: #46db91;
|
||||
$like: #7bd2a8 !default;
|
||||
$unlike: #ef8585 !default;
|
||||
|
||||
$proposals: #ffa42d;
|
||||
$proposals-dark: #794500;
|
||||
$delete: #f04124 !default;
|
||||
$check: #46db91 !default;
|
||||
|
||||
$budget: #7e328a;
|
||||
$budget-hover: #7571bf;
|
||||
$proposals: #ffa42d !default;
|
||||
$proposals-dark: #794500 !default;
|
||||
|
||||
$highlight: #e7f2fc;
|
||||
$highlight-soft: #f3f8fd;
|
||||
$light: #f5f7fa;
|
||||
$featured: #ffdc5c;
|
||||
$budget: #7e328a !default;
|
||||
$budget-hover: #7571bf !default;
|
||||
|
||||
$footer-border: #bfc1c3;
|
||||
$highlight: #e7f2fc !default;
|
||||
$highlight-soft: #f3f8fd !default;
|
||||
$light: #f5f7fa !default;
|
||||
$featured: #ffdc5c !default;
|
||||
|
||||
$success-bg: #dff0d8;
|
||||
$success-border: #d6e9c6;
|
||||
$color-success: #3c763d;
|
||||
$footer-border: #bfc1c3 !default;
|
||||
|
||||
$info-bg: #d9edf7;
|
||||
$info-border: #bce8f1;
|
||||
$color-info: #31708f;
|
||||
$success-bg: #dff0d8 !default;
|
||||
$success-border: #d6e9c6 !default;
|
||||
$color-success: #3c763d !default;
|
||||
|
||||
$warning-bg: #fcf8e3;
|
||||
$warning-border: #faebcc;
|
||||
$color-warning: #8a6d3b;
|
||||
$info-bg: #d9edf7 !default;
|
||||
$info-border: #bce8f1 !default;
|
||||
$color-info: #31708f !default;
|
||||
|
||||
$alert-bg: #f2dede;
|
||||
$alert-border: #ebccd1;
|
||||
$color-alert: #a94442;
|
||||
$warning-bg: #fcf8e3 !default;
|
||||
$warning-border: #faebcc !default;
|
||||
$color-warning: #8a6d3b !default;
|
||||
|
||||
$pdf-primary: #0300ff;
|
||||
$pdf-secondary: #ff9e00;
|
||||
$alert-bg: #f2dede !default;
|
||||
$alert-border: #ebccd1 !default;
|
||||
$color-alert: #a94442 !default;
|
||||
|
||||
$outline-focus: 3px solid #ffbf47;
|
||||
$pdf-primary: #0300ff !default;
|
||||
$pdf-secondary: #ff9e00 !default;
|
||||
|
||||
$input-height: $line-height * 2;
|
||||
$outline-focus: 3px solid #ffbf47 !default;
|
||||
|
||||
$icon-width: $line-height * 2;
|
||||
$input-height: $line-height * 2 !default;
|
||||
|
||||
$off-screen-left: -1000rem;
|
||||
$icon-width: $line-height * 2 !default;
|
||||
|
||||
$sdg-icon-min-width: 40px;
|
||||
$off-screen-left: -1000rem !default;
|
||||
|
||||
$sdg-icon-min-width: 40px !default;
|
||||
|
||||
$sdg-colors: (
|
||||
1: #e5243b,
|
||||
@@ -97,23 +98,17 @@ $sdg-colors: (
|
||||
15: #56c02b,
|
||||
16: #00689d,
|
||||
17: #19486a
|
||||
);
|
||||
) !default;
|
||||
|
||||
// 2. Foundation settings overrides
|
||||
// ---------------------------------
|
||||
|
||||
$black: #222;
|
||||
$white: #fdfdfd;
|
||||
$black: #222 !default;
|
||||
$white: #fdfdfd !default;
|
||||
|
||||
$body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important;
|
||||
$body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;
|
||||
|
||||
$header-font-family: $body-font-family;
|
||||
|
||||
$global-radius: rem-calc(3);
|
||||
|
||||
$button-radius: $global-radius;
|
||||
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
$global-radius: rem-calc(3) !default;
|
||||
|
||||
$header-styles: (
|
||||
small: (
|
||||
@@ -132,25 +127,22 @@ $header-styles: (
|
||||
"h5": ("font-size": 16),
|
||||
"h6": ("font-size": 13),
|
||||
),
|
||||
);
|
||||
) !default;
|
||||
|
||||
$small-font-size: rem-calc(14);
|
||||
$small-font-size: rem-calc(14) !default;
|
||||
|
||||
$abbr-underline: none;
|
||||
$abbr-underline: none !default;
|
||||
|
||||
$tab-background-active: $white;
|
||||
$closebutton-color: $text !default;
|
||||
|
||||
$accordion-item-color: foreground($accordion-background, $text);
|
||||
$accordion-content-color: foreground($accordion-background, $text);
|
||||
$tab-background-active: $white !default;
|
||||
|
||||
$tab-item-font-size: $base-font-size;
|
||||
$tab-item-padding: $line-height / 2 0;
|
||||
$tab-content-border: $border;
|
||||
$tab-item-font-size: $base-font-size !default;
|
||||
$tab-item-padding: $line-height / 2 0 !default;
|
||||
$tab-content-border: $border !default;
|
||||
|
||||
$orbit-bullet-diameter: 0.8rem;
|
||||
$orbit-bullet-diameter: 0.8rem !default;
|
||||
|
||||
$pagination-radius: $global-radius;
|
||||
$show-header-for-stacked: true !default;
|
||||
|
||||
$show-header-for-stacked: true;
|
||||
|
||||
$tooltip-background-color: $brand;
|
||||
$tooltip-background-color: $brand !default;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// Overrides and adds customized foundation settings in this file
|
||||
// Read more on documentation:
|
||||
// * English: https://github.com/consul/consul/blob/master/CUSTOMIZE_EN.md#css
|
||||
// * Spanish: https://github.com/consul/consul/blob/master/CUSTOMIZE_ES.md#css
|
||||
// Add custom variables in this file. For example, define a new variable
|
||||
// called `$important-link` which you can use in your custom CSS files.
|
||||
//
|
||||
// To override existing variables, use the file named
|
||||
// `_consul_custom_overrides.scss` instead
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,13 +1,24 @@
|
||||
@import "amsify.suggestags";
|
||||
@import "annotator.min";
|
||||
@import "c3";
|
||||
@import "social-share-button";
|
||||
@import "foundation_and_overrides";
|
||||
@import "fonts";
|
||||
@import "font-awesome-sprockets";
|
||||
@import "font-awesome";
|
||||
@import "jquery-ui/autocomplete";
|
||||
@import "jquery-ui/datepicker";
|
||||
@import "jquery-ui/sortable";
|
||||
@import "leaflet";
|
||||
|
||||
@import "foundation_and_overrides";
|
||||
@import "fonts";
|
||||
@import "icons";
|
||||
@import "mixins/*";
|
||||
|
||||
@import "admin";
|
||||
@import "advanced_search";
|
||||
@import "annotator_overrides";
|
||||
@import "autocomplete_overrides";
|
||||
@import "datepicker_overrides";
|
||||
@import "layout";
|
||||
@import "participation";
|
||||
@import "milestones";
|
||||
@@ -20,15 +31,6 @@
|
||||
@import "notification_item";
|
||||
@import "community";
|
||||
@import "stats";
|
||||
@import "c3";
|
||||
@import "annotator.min";
|
||||
@import "amsify.suggestags";
|
||||
@import "annotator_overrides";
|
||||
@import "jquery-ui/datepicker";
|
||||
@import "datepicker_overrides";
|
||||
@import "jquery-ui/autocomplete";
|
||||
@import "autocomplete_overrides";
|
||||
@import "jquery-ui/sortable";
|
||||
@import "sticky_overrides";
|
||||
@import "tags";
|
||||
@import "admin/**/*";
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
@charset "utf-8";
|
||||
|
||||
@import "settings";
|
||||
@import "util/util";
|
||||
@import "consul_custom_overrides";
|
||||
@import "consul_settings";
|
||||
@import "settings";
|
||||
@import "custom_settings";
|
||||
@import "foundation";
|
||||
|
||||
|
||||
@@ -321,7 +321,6 @@ a {
|
||||
}
|
||||
|
||||
.close-button {
|
||||
color: $text;
|
||||
top: $line-height / 2;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user