c42c8e3c7a
The icons were a bit hard to click on small screens, even for people without any motion disabilities. We might increase the size or the space between icons again in the future; right now it's hard for users with certain motion disabilities to click on the right icon. Coincidentally, the minimum size of the icon is now barely over the 44px established as minimum required size by the WCAG guideline 2.5.5 (level AAA) [1]. Also coincidentally, at a screen 320px wide (the minimum screen size we support), six icons appear on each row, just like in the UN logo. [1] https://www.w3.org/TR/WCAG21/#target-size
157 lines
3.8 KiB
SCSS
157 lines
3.8 KiB
SCSS
// CONSUL Settings
|
|
// -----------------------------
|
|
//
|
|
// Table of Contents:
|
|
//
|
|
// 1. Foundation settings overrides
|
|
// 2. CONSUL variables
|
|
// 3. Foundation overrides depending on CONSUL variables
|
|
|
|
// 1. Foundation settings overrides
|
|
// ---------------------------------
|
|
|
|
$black: #222 !default;
|
|
$white: #fdfdfd !default;
|
|
|
|
$body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !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;
|
|
|
|
$show-header-for-stacked: true !default;
|
|
|
|
// 2. CONSUL variables
|
|
// --------------------
|
|
|
|
$body-margin: calc(50vw - #{$global-width / 2}) !default;
|
|
$full-width-margin: #{$global-width / 2} - 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: darken($brand, 10%) !default;
|
|
$dark: $brand-secondary !default;
|
|
|
|
$text: $black !default;
|
|
$text-medium: #515151 !default;
|
|
$text-light: #bfbfbf !default;
|
|
|
|
$border: #dee0e3 !default;
|
|
|
|
$link: $brand !default;
|
|
$link-hover: darken($link, 20%) !default;
|
|
|
|
$debates: $brand !default;
|
|
|
|
$like: #7bd2a8 !default;
|
|
$unlike: #ef8585 !default;
|
|
|
|
$delete: #f04124 !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-border: #bfc1c3 !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;
|
|
|
|
$outline-focus: 3px solid #ffbf47 !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-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 variables
|
|
// -----------------------------------------------------
|
|
|
|
$tab-background-active: $white !default;
|
|
|
|
$tab-item-font-size: $base-font-size !default;
|
|
$tab-item-padding: $line-height / 2 0 !default;
|
|
$tab-content-border: $border !default;
|
|
|
|
$closebutton-color: $text !default;
|
|
|
|
$tooltip-background-color: $brand !default;
|