Render the tags under the input. This way the input is not moved down when a tag is added. Render icons under the label. As you can add tags by clicking on the icons, in this way the input is more related to the icons.
150 lines
2.9 KiB
SCSS
150 lines
2.9 KiB
SCSS
// CONSUL Settings
|
|
// -----------------------------
|
|
//
|
|
// Table of Contents:
|
|
//
|
|
// 1. CONSUL variables
|
|
// 2. Foundation settings overrides
|
|
//
|
|
|
|
// 1. CONSUL variables
|
|
// --------------------
|
|
|
|
$base-font-size: 17px;
|
|
$base-line: rem-calc(26);
|
|
$small-font-size: rem-calc(14);
|
|
$line-height: rem-calc(24);
|
|
$tiny-font-size: rem-calc(12);
|
|
|
|
$brand: #004a83;
|
|
$dark: darken($brand, 10%);
|
|
|
|
$text: #222;
|
|
$text-medium: #515151;
|
|
$text-light: #bfbfbf;
|
|
|
|
$border: #dee0e3;
|
|
|
|
$link: $brand;
|
|
$link-hover: darken($link, 20%);
|
|
|
|
$debates: $brand;
|
|
|
|
$like: #7bd2a8;
|
|
$unlike: #ef8585;
|
|
|
|
$delete: #f04124;
|
|
$check: #46db91;
|
|
|
|
$proposals: #ffa42d;
|
|
$proposals-dark: #794500;
|
|
|
|
$budget: #7e328a;
|
|
$budget-hover: #7571bf;
|
|
|
|
$highlight: #e7f2fc;
|
|
$highlight-soft: #f3f8fd;
|
|
$light: #f5f7fa;
|
|
$featured: #ffdc5c;
|
|
|
|
$footer-border: #bfc1c3;
|
|
|
|
$success-bg: #dff0d8;
|
|
$success-border: #d6e9c6;
|
|
$color-success: #3c763d;
|
|
|
|
$info-bg: #d9edf7;
|
|
$info-border: #bce8f1;
|
|
$color-info: #31708f;
|
|
|
|
$warning-bg: #fcf8e3;
|
|
$warning-border: #faebcc;
|
|
$color-warning: #8a6d3b;
|
|
|
|
$alert-bg: #f2dede;
|
|
$alert-border: #ebccd1;
|
|
$color-alert: #a94442;
|
|
|
|
$pdf-primary: #0300ff;
|
|
$pdf-secondary: #ff9e00;
|
|
|
|
$outline-focus: 3px solid #ffbf47;
|
|
|
|
$input-height: $line-height * 2;
|
|
|
|
// 2. Foundation settings overrides
|
|
// ---------------------------------
|
|
|
|
$black: #222;
|
|
$white: #fff;
|
|
|
|
$body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important;
|
|
|
|
$header-font-family: $body-font-family;
|
|
|
|
$global-radius: rem-calc(3);
|
|
|
|
$button-radius: $global-radius;
|
|
|
|
$font-family-serif: Georgia, "Times New Roman", Times, serif;
|
|
|
|
$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),
|
|
),
|
|
);
|
|
|
|
$small-font-size: rem-calc(14);
|
|
|
|
$abbr-underline: none;
|
|
|
|
$tab-background-active: $white;
|
|
|
|
$accordion-item-color: foreground($accordion-background, $text);
|
|
$accordion-content-color: foreground($accordion-background, $text);
|
|
|
|
$tab-item-font-size: $base-font-size;
|
|
$tab-item-padding: $line-height / 2 0;
|
|
$tab-content-border: $border;
|
|
|
|
$orbit-bullet-diameter: 0.8rem;
|
|
|
|
$pagination-radius: $global-radius;
|
|
|
|
$show-header-for-stacked: true;
|
|
|
|
$tooltip-background-color: $brand;
|
|
|
|
$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
|
|
);
|