f460d3bc31
This stylelint-scss rule is useful because we were inconsistent when
using calc(); sometimes we added interpolation to Sass variables, and
sometimes we didn't. The reason why we originally added interpolation
was that it was necessary until we migrated to Dart Sass in commit
d54971e53. Since then, we can omit the interpolation, which is also what
the Sass documentation recommends [1].
[1] https://sass-lang.com/documentation/values/calculations/
171 lines
4.3 KiB
SCSS
171 lines
4.3 KiB
SCSS
@use "sass:color";
|
|
|
|
// CONSUL DEMOCRACY Settings
|
|
// -----------------------------
|
|
//
|
|
// Table of Contents:
|
|
//
|
|
// 1. Foundation settings overrides
|
|
// 2. CONSUL DEMOCRACY variables
|
|
// 3. Foundation overrides depending on CONSUL DEMOCRACY variables
|
|
|
|
// 1. Foundation settings overrides
|
|
// ---------------------------------
|
|
|
|
$black: #222 !default;
|
|
$white: #fdfdfd !default;
|
|
$dark-gray: #8a8a8a !default;
|
|
|
|
$body-background: $white;
|
|
$body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;
|
|
|
|
$closebutton-color: $black !default;
|
|
|
|
$global-radius: rem-calc(3) !default;
|
|
$global-width: rem-calc(1200) !default;
|
|
|
|
$header-styles: (
|
|
small: (
|
|
"h1": ("font-size": 34),
|
|
"h2": ("font-size": 24),
|
|
"h3": ("font-size": 20),
|
|
"h4": ("font-size": 18),
|
|
"h5": ("font-size": 16),
|
|
"h6": ("font-size": 14),
|
|
),
|
|
medium: (
|
|
"h1": ("font-size": 44),
|
|
"h2": ("font-size": 34),
|
|
"h3": ("font-size": 24),
|
|
"h4": ("font-size": 19),
|
|
"h5": ("font-size": 16),
|
|
"h6": ("font-size": 13),
|
|
),
|
|
) !default;
|
|
|
|
$small-font-size: rem-calc(14) !default;
|
|
|
|
$abbr-underline: none !default;
|
|
|
|
$orbit-bullet-diameter: 0.8rem !default;
|
|
$orbit-caption-background: #eee;
|
|
|
|
$show-header-for-stacked: true !default;
|
|
|
|
$switch-background: $dark-gray !default;
|
|
|
|
// 2. CONSUL DEMOCRACY variables
|
|
// -----------------------------
|
|
|
|
$body-margin: calc(50vw - $global-width * 0.5) !default;
|
|
$full-width-margin: unquote("#{$global-width * 0.5} - 50vw") !default;
|
|
|
|
$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;
|
|
|
|
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
|
|
|
$brand: #004a83 !default;
|
|
$brand-secondary: color.adjust($brand, $lightness: -10%) !default;
|
|
|
|
$text-medium: #515151 !default;
|
|
$text-light: #bfbfbf !default;
|
|
|
|
$border: #dee0e3 !default;
|
|
|
|
$debates: $brand !default;
|
|
|
|
$like: #38a36f !default;
|
|
$unlike: #ea6666 !default;
|
|
|
|
$delete: #db2e0f !default;
|
|
$check: #46db91 !default;
|
|
|
|
$proposals: #ffa42d !default;
|
|
$proposals-dark: #794500 !default;
|
|
|
|
$budget: #7e328a !default;
|
|
$budget-hover: #7571bf !default;
|
|
|
|
$highlight: #e7f2fc !default;
|
|
$highlight-soft: #f3f8fd !default;
|
|
$light: #f5f7fa !default;
|
|
$featured: #ffdc5c !default;
|
|
|
|
$footer: #f1f1f1 !default;
|
|
$footer-border: #bfc1c3 !default;
|
|
$main-header: $brand !default;
|
|
$subnavigation: $body-background !default;
|
|
$top-links: $brand-secondary !default;
|
|
|
|
$success-bg: #dff0d8 !default;
|
|
$success-border: #d6e9c6 !default;
|
|
$color-success: #3c763d !default;
|
|
|
|
$info-bg: #d9edf7 !default;
|
|
$info-border: #bce8f1 !default;
|
|
$color-info: #31708f !default;
|
|
|
|
$warning-bg: #fcf8e3 !default;
|
|
$warning-border: #faebcc !default;
|
|
$color-warning: #8a6d3b !default;
|
|
|
|
$alert-bg: #f2dede !default;
|
|
$alert-border: #ebccd1 !default;
|
|
$color-alert: #a94442 !default;
|
|
|
|
$pdf-primary: #0300ff !default;
|
|
$pdf-secondary: #ff9e00 !default;
|
|
|
|
$focus-middle: #ffbf47 !default;
|
|
$focus-outer: $brand !default;
|
|
$focus-inner-width: 1px !default;
|
|
$focus-middle-width: 3px !default;
|
|
$focus-outer-width: 2px !default;
|
|
|
|
$input-height: $line-height * 2 !default;
|
|
|
|
$font-icon-margin: rem-calc(4) !default;
|
|
$icon-width: $line-height * 2 !default;
|
|
|
|
$off-screen-left: -1000rem !default;
|
|
|
|
$sdg-icon-min-width: 45px !default;
|
|
|
|
$sdg-text: #fff;
|
|
$sdg-colors: (
|
|
1: #e5243b,
|
|
2: #dda63a,
|
|
3: #4c9f38,
|
|
4: #c5192d,
|
|
5: #ff3a21,
|
|
6: #26bde2,
|
|
7: #fcc30b,
|
|
8: #a21942,
|
|
9: #fd6925,
|
|
10: #dd1367,
|
|
11: #fd9d24,
|
|
12: #bf8b2e,
|
|
13: #3f7e44,
|
|
14: #0a97d9,
|
|
15: #56c02b,
|
|
16: #00689d,
|
|
17: #19486a
|
|
) !default;
|
|
|
|
// 3. Foundation overrides depending on CONSUL DEMOCRACY variables
|
|
// ---------------------------------------------------------------
|
|
|
|
$anchor-color: $brand !default;
|
|
$anchor-color-hover: color.adjust($anchor-color, $lightness: -20%) !default;
|
|
|
|
$tab-background-active: $white !default;
|
|
|
|
$tab-item-font-size: $base-font-size !default;
|
|
$tab-item-padding: $line-height * 0.5 0 !default;
|
|
$tab-content-border: $border !default;
|
|
|
|
$tooltip-background-color: $brand !default;
|