// Extend bootstrap variables @import "bootstrap-variables"; // Non-bootstrap variables // Anything below this line should only be used by non-bootstrap code $brand-secondary: #005a93; $brand-secondary-hover: darken($brand-secondary, 2); $brand-primary: #29abe2; $brand-success: #3fa142; $brand-danger: #d40404; // Offical SilverStripe brand color $color-brand: white !default; // Generic colors $color-notice: #93CDE8 !default; $color-warning: #E9D104 !default; $color-error: #e68288 !default; $color-good: #72c34b !default; // Body colors $body-color-dark: darken($body-color, 10); // Extra state colors $state-draft: #cf3f00; // State draft border $state-draft-bg: #ff7f22; $state-modified: $state-draft; // State modified border $state-modified-bg: #fff7f0; $state-archived: $gray-700; $state-live: $green; // Extra background colors $body-bg-dark: darken($body-bg, 2); // Extra border colors $border-color-light: lighten($border-color, 4); $border-color-dark: darken($border-color, 4); // Extra spacers $spacer-sm: calc($spacer * .75); // 12px $spacer-xs: calc($spacer * .625); // 10px // Grid columns // Panel padding $panel-padding: calc($grid-gutter-width / 2); $panel-padding-x: $panel-padding; $panel-padding-y: $panel-padding; // Set the number of columns and specify the width of the gutters. $grid-gutter-width-half: $panel-padding; // Pixel value used to responsively scale all typography. Applied to the `` element. $font-size-root: 13px; // Custom size $font-size-xs: .846rem; // 11px $font-size-xxs: .75rem; // 10px // Component $component-active-bg-light: lighten($component-active-bg, 57%); $component-active-border-color: $brand-primary; // Custom table colors $table-bg-tools: $gray-700; // Buttons // $btn-spacing: 5px; $btn-icon-spacing: 6px; $btn-font-weight: normal; $btn-primary-color: $white; $btn-primary-bg: $brand-success; $btn-primary-border: $btn-primary-bg; $btn-primary-shadow: darken($btn-primary-bg, 6%); $btn-secondary-color: $text-muted; $btn-secondary-bg: darken($body-bg, 5); $btn-secondary-border: $border-color-dark; // Forms $input-padding-y: .5385rem; // 7px $input-max-width: 895px; // Approx max possible at small screen sizes $input-padding-x-lg: 1.25rem; $input-padding-y-lg: .75rem; // Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. $zindex-popover: 1060; $zindex-modal-bg: 1040; $zindex-modal: 1050; $zindex-cms-content-header: 60; $zindex-cms-content-actions: 79; $zindex-menu: $zindex-cms-content-actions + 1; // SS toolbars // Used for ui layout which contains main actions, secondary page action, top breadcrumbs and navigation bars. $toolbar-height: 52px; $toolbar-total-height: $toolbar-height + 1px; // Include border // Navs $nav-tabs-link-border-width: .15385rem; // 2px just border bottom width $nav-link-padding: $nav-link-padding-y $nav-link-padding-x #{$nav-link-padding-y - (calc($nav-tabs-link-border-width / 2))}; // List group $list-group-link-color: $body-color; $list-group-link-hover-color: $list-group-link-color; $list-group-link-heading-color: $body-color; // Panel sizes $cms-panel-xs: 60px; $cms-panel-sm: 300px; $cms-panel-md: 448px; $cms-panel-lg: 638px; // Shadows $shadow-level-1: rgba(0, 0, 0, .1); $shadow-level-2: rgba(0, 0, 0, .15); $shadow-level-3: rgba(0, 0, 0, .2); $shadow-level-4: rgba(0, 0, 0, .25); $shadow-level-5: rgba(0, 0, 0, .3); $shadow-light: $shadow-level-3; $shadow-lighter: $shadow-level-1; $dropdown-shadow: 0 0 3px $shadow-level-3; $gallery-item-shadow: 0 1px 4px $shadow-level-3; // Gives items depth of different levels $z-depth-1: 0 2px 5px 0 $shadow-level-1, 0 2px 10px 0 $shadow-level-1; $z-depth-2: 0 8px 12px 0 $shadow-level-3, 0 6px 20px 0 $shadow-level-2; $z-depth-3: 0 12px 20px 0 $shadow-level-4, 0 17px 40px 0 $shadow-level-3; $z-depth-4: 0 16px 28px 0 $shadow-level-5, 0 25px 55px 0 $shadow-level-5; // Menu theme colours $base-menu: #d8e4eb !default; $base-menu-bg: lighten($base-menu, 5%); $base-menu-icon: darken($base-menu, 26%); // Gallery thumbnail and image sizes $gallery-thumb-width: 176px; $gallery-thumb-height: 132px; $gallery-item-width: $gallery-thumb-width + 2; // include borders $gallery-item-height: 174px; $gallery-title-height: 40px; $gallery-folder-height: 54px; $gallery-folder-title-height: $gallery-folder-height - 2; // Preview panel screen sizes $mobile-height: 568px; $mobile-width: 320px; $tablet-height: 1024px; $tablet-width: 768px; $desktop-height: 768px; $desktop-width: 1366px; // Search panel sizes $search-width: 360px; $search-width-lg: 500px; $search-width-max: 100%; // CMS menu $cms-menu-width: calc($panel-padding-y * 9); $cms-menu-width-collapsed: $cms-panel-xs; // Custom speeds $transition-speed-slow: 1s; $transition-speed-mid: .5s; $transition-speed-fast: .3s; // line height to be based off the root height $line-height-root: calc($line-height-base * 1rem); // Toasts $toast-max-width: 250px; $toast-padding-x: map_get($spacers, sm); $toast-font-size: 1rem; $toast-color: $gray-700; $toast-background-color: #fff; $toast-border-width: 0; $toast-border-radius: 4px; $toast-box-shadow: $z-depth-1;