frontend/css/variables/_bootstrap.scss in trestle-0.9.8 vs frontend/css/variables/_bootstrap.scss in trestle-0.10.0.pre
- old
+ new
@@ -1,64 +1,82 @@
// Color system
-$theme-colors: (
- "primary": #4d6bb2,
- "success": #7dc67d,
- "info": #7ccde5,
- "warning": #f3bd71,
- "danger": #e17572,
- "light": #bbbbbb,
- "dark": #444444,
+$primary: #4d6bb2;
+$secondary: #6c757d;
+$success: #7dc67d;
+$info: #7ccde5;
+$warning: #f3bd71;
+$danger: #e17572;
+$light: #bbbbbb;
+$dark: #444444;
- // Backwards compatibility
- "default": #bbbbbb
-);
-
// Body
$body-bg: #f3f3f3;
$body-color: #333333;
-// Set a specific jump point for requesting color jumps
-$theme-color-interval: 5% !default;
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
+$min-contrast-ratio: 1.7;
-// Increase default color threshold for light vs dark
-$yiq-contrasted-threshold: 200;
-
// Enable box shadows
$enable-shadows: true;
// Decrease default grid spacing
-$grid-gutter-width: 10px * 2;
+$grid-gutter-width: 1.375rem;
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+ ("<", "%3c"),
+ (">", "%3e"),
+ ("#", "%23"),
+ ("(", "%28"),
+ (")", "%29"),
+) !default;
+
+
+// Components
+
+$box-shadow: soft-shadow(1rem, 1.5em, rgba(black, 0.25));
+$box-shadow-sm: soft-shadow(0.5rem, 0.75em, rgba(black, 0.075), $layers: 4);
+
+
// Typography
+$link-decoration: none;
+
$headings-font-weight: 400;
$headings-margin-bottom: 1rem;
$h1-font-size: 2rem;
$h2-font-size: 1.75rem;
$h3-font-size: 1.5rem;
$h4-font-size: 1.25rem;
$h5-font-size: 1.1rem;
$h6-font-size: 1rem;
+$hr-color: rgba(black, 0.375);
$hr-margin-y: 1.5rem;
// Navs
+$nav-pills-link-active-bg: var(--primary);
+
$nav-tabs-border-radius: 0;
$nav-tabs-border-width: 0;
-$nav-tabs-link-bg: #eeeeee;
-$nav-tabs-link-color: #555555;
+// (non-Bootstrap variables)
+$nav-tabs-link-bg: #eeeeee;
+$nav-tabs-link-color: #555555;
+$nav-tabs-link-hover-bg: #eaeaea;
+$nav-tabs-link-hover-color: #505050;
+$nav-tabs-link-transition: color .1s ease-in-out, background-color .1s ease-in-out;
-$nav-tabs-link-active-bg: white;
+$nav-tabs-link-active-bg: white;
$nav-tabs-link-active-color: $body-color;
// Navbar
@@ -68,32 +86,48 @@
// Breadcrumbs
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
-$breadcrumb-bg: transparent;
$breadcrumb-active-color: #777777;
$breadcrumb-divider-color: #cccccc;
// Tables
-$table-cell-padding: 6px 8px;
-$table-accent-bg: rgba(black, 0.02);
+$table-cell-padding-x: 0.625rem;
+$table-cell-padding-y: 0.375rem;
+
+$table-bg: transparent;
+$table-striped-bg: rgba(black, 0.02);
$table-hover-bg: rgba(black, 0.04);
$table-border-color: rgba(black, 0.13);
-$table-bg-level: -11;
-$table-border-level: -7;
-
// Alerts
$alert-padding-y: 1.5rem;
$alert-border-radius: 0.1rem;
+// Progress bars
+
+$progress-bar-bg: var(--primary);
+
+
+// List group
+
+$list-group-bg: white;
+$list-group-active-bg: var(--primary);
+
+
+// Close
+
+$btn-close-color: white;
+$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+
+
// Badges
$badge-padding-y: 0.35em;
$badge-padding-x: 0.6em;
@@ -103,65 +137,99 @@
$btn-padding-x-sm: 0.65rem;
// Forms
-$input-border-color: #cccccc;
+$input-bg: white;
$input-disabled-bg: #fafafa;
-$input-box-shadow: none;
+$input-border-color: #cccccc;
$input-placeholder-color: #999999;
$input-group-addon-bg: #eeeeee;
-$form-feedback-invalid-color: darken(theme-color("danger"), 20%);
+$form-feedback-invalid-color: shade-color($danger, 10%);
$form-feedback-margin-top: 0.5rem;
$form-feedback-font-size: 90%;
+$form-label-font-weight: bold;
+
$form-text-color: #666666;
-$custom-control-indicator-size: 1.15rem;
-$custom-control-indicator-border-width: 1px;
+$form-check-input-width: 1.25em;
+$form-check-padding-start: $form-check-input-width + 0.6em;
-$custom-control-gutter: 0.6rem;
+$form-switch-width: 2.25em;
+$form-switch-focus-color: #aaaaaa;
-$custom-switch-width: 2.25rem;
-$custom-switch-indicator-size: calc(#{em($custom-control-indicator-size)} - #{$custom-control-indicator-border-width * 4}) !default;
+$form-select-padding-x-sm: 0.62rem;
+$form-select-padding-x-lg: 0.75rem;
// Dropdowns
+$dropdown-bg: white;
$dropdown-spacer: 0.5rem;
-$dropdown-box-shadow: 0 3px 6px rgba(black, 0.175);
+$dropdown-box-shadow: $box-shadow-sm;
$dropdown-arrow-width: 7px;
$dropdown-arrow-outer-width: $dropdown-arrow-width + 1px;
$dropdown-header-color: #111111;
$dropdown-font-size: 0.9rem;
+$dropdown-link-active-bg: var(--primary);
+$dropdown-dark-bg: #222222;
+$dropdown-dark-divider-bg: rgba(white, 0.15);
+
+
+// Pagination
+
+$pagination-bg: white;
+$pagination-disabled-bg: white;
+
+
// Cards
$card-bg: rgba(white, 0.5);
$card-border-radius: 0;
+// Accordion
+
+$accordion-bg: white;
+$accordion-icon-active-color: #111111;
+
+
+// Tooltips
+
+$tooltip-color: white;
+
+
// Popovers
-$popover-box-shadow: $dropdown-box-shadow;
-$popover-arrow-width: $dropdown-arrow-width;
-$popover-font-size: 0.9rem;
+$popover-font-size: 0.9rem;
+$popover-box-shadow: $dropdown-box-shadow;
+$popover-header-bg: #f7f7f7;
+$popover-header-border: #ebebeb;
+$popover-body-padding-y: 0.5rem;
+$popover-body-padding-x: 0.75rem;
+
+$popover-arrow-width: $dropdown-arrow-width;
+
+
// Modals
$modal-inner-padding: 1.5rem;
$modal-header-padding-x: 1.5rem;
$modal-header-padding-y: 1.05rem;
+$modal-content-bg: white;
$modal-content-border-radius: 0;
$modal-content-border-width: 0;
$modal-footer-border-width: 1px;
$modal-footer-border-color: rgba(black, 0.1);
@@ -170,6 +238,32 @@
$modal-lg: 900px;
// Select2 Bootstrap Theme
-$s2bs-btn-default-border: #cccccc;
+$s2bs5-border-color: #ced4da;
+
+$s2bs5-item-active-bg: tint-color($primary, 90%);
+
+$s2b25-clear-width: 0.5rem;
+$s2b25-clear-height: 0.5rem;
+$s2b25-clear-height-sm: 0.5rem;
+$s2b25-clear-height-lg: 1rem;
+
+$s2bs5-clear-icon: str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color($s2bs5-border-color, 50%)});
+$s2bs5-clear-bg: transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height auto no-repeat;
+$s2bs5-clear-hover-bg: $s2bs5-clear-bg;
+
+$s2bs5-clear-bg-sm: transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height-sm auto no-repeat;
+$s2bs5-clear-hover-bg-sm: $s2bs5-clear-bg-sm;
+
+$s2bs5-clear-bg-lg: transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height-lg auto no-repeat;
+$s2bs5-clear-hover-bg-lg: $s2bs5-clear-bg-lg;
+
+$s2bs5-clear-tag-icon: $btn-close-bg;
+$s2bs5-clear-tag-bg: transparent escape-svg($s2bs5-clear-tag-icon) center / $s2b25-clear-height-sm auto no-repeat;
+
+$s2bs5-padding-x: 0.75rem;
+$s2bs5-padding-y: 0.375rem;
+
+$s2bs5-multi-item-padding-x: 0.375rem;
+$s2bs5-multi-item-padding-y: 0;