horizon/openstack_dashboard/static/dashboard/scss/_variables.scss

207 lines
6.7 KiB
SCSS

/* This import is required for using the current theme variables as value
to our variables */
@import "/custom/variables";
/* When used with Horizon via Django, this value is set automatically from
settings.py and is added dynamically to the namespace through
horizon/utils/scss_filter.py */
$static_url: "/static/" !default;
/* Horizon Custom Variables */
$code-font-family: Menlo, Monaco, Consolas, 'Courier New' !default;
$main-content-min-width: 900px !default;
$sidebar-width: 220px !default;
$border-color: #dddddd !default;
$table-bg-odd: $table-bg-accent !default;
$content-body-padding: 15px !default;
/* Workflows */
$workflow-color-tab-complete-bg: #007acc;
$workflow-color-tab-incomplete-bg: #dddddd;
$workflow-color-tab-trough-bg: #efefef;
$workflow-color-tab-border: #ffffff;
$workflow-color-tab-link-active: #ffffff;
$workflow-color-tab-link-inactive: #43a4d7;
$workflow-color-label-error: $brand-danger;
$workflow-size-tab-border: 2px;
$workflow-size-tab-arrow: 20px;
$workflow-size-tab-padding: 15px;
/* Resource Browser */
$rbrowser-data-table-border-width: 1px;
$rbrowser-data-table-border-color: $border-color;
$rbrowser-actions-column-padding: 10px;
$rbrowser-small-button-height: 28px;
$rbrowser-td-height: $rbrowser-small-button-height;
$rbrowser-table-cell-padding: 8px;
$rbrowser-selected-color: #e9f5fa;
$rbrowser-wrapper-width: 100%;
$rbrowser-navigation-table-width: 40%;
$rbrowser-content-table-width: $rbrowser-wrapper-width - $rbrowser-navigation-table-width;
$rbrowser-body-background-color: $body-bg;
$rbrowser-header-background-color: $gray-lighter;
$rbrowser-footer-background-color: #f1f1f1;
// Note: the content-wrapper background colors are determined by
// .table-striped-datatable styles.
// Font-awesome path to the icon fonts
$fa-font-path: $static_url + "horizon/lib/font-awesome/fonts";
/* Charts */
$overview_chart_height: 81px;
/* Help panel */
// theme
$helpPanelColor: #333 !default;
$helpPanelBg: #fff !default;
$helpPanelBtnBg: #eee !default;
$helpPanelBtnIconColor: #333 !default;
$helpPanelBtnIconBg: transparent !default;
$helpPanelBorderColor: #888 !default;
// layout
$helpPanelWidthDefault: 300px !default;
$helpPanelBtnSize: 40px !default;
$helpPanelBtnIconSize: 28px !default;
/* Wizard */
// theme
$WizardNavItemColor: #333 !default;
$WizardNavItemBgColor: #0084d1 !default;
$WizardNavItemBdColor: #bbb !default;
$WizardButtonColorHiLight: #fff !default;
$WizardBtnTextColor: #333;
$WizardBtnBgColor: #fff !default;
$WizardBtnBdColor: #ccc !default;
$WizardNextBtnBgColor: #0084d1 !default;
$WizardNextBtnBdColor: #0084d1 !default;
$WizardNextBtnDisabledBgColor: #ccc !default;
$WizardNextBtnDisabledBdColor: #ccc !default;
$WizardFinishBtnBgColor: #51b848 !default;
$WizardFinishBtnBdColor: #51b848 !default;
$WizardFinishBtnDisabledBgColor: #ccc !default;
$WizardFinishBtnDisabledBdColor: #ccc !default;
$WizardToolbarBgColor: #f5f5f5 !default;
$WizardToolbarVerticalSeparatorBdColor: #e3e3e3 !default;
$WizardValidationErrorColor: #d43f3a !default;
$wizard-textarea-border-color: #eee;
// layout
$wizardTopPadding: 40px !default;
$wizardBottomPadding: $wizardTopPadding !default;
$wizardLeftPadding: $wizardTopPadding !default;
$wizardRightPadding: $wizardLeftPadding !default;
$wizardHeight: 100% !default;
$wizardWidth: 100% !default;
$wizardMinHeight: 460px !default;
$wizardMinWidth: 1024px !default;
$wizardMaxHeight: 900px !default;
$wizardMaxWidth: 1440px !default;
$wizardTitleBarHeight: 70px !default;
$wizardToolBarHeight: 65px !default;
$wizardNavWidth: 290px !default;
$WizardNavItemHeight: 46px !default;
$WizardNavItemWidth: 190px !default;
$WizardSidePadding: 35px !default;
$WizardStatusIndicatorSize: 24px !default;
$WizardBtnGap: 5px !default;
$WizardToolbarBtnHeight: 28px !default;
/* Responsive Table */
$batch-action-width: 10em !default;
$batch-action-padding: $batch-action-width + 1em !default;
$detail-row-padding: 1em !default;
$expander-width: 1.5em !default;
$reorder-border: 2px solid #1f83c6 !default;
$select-col-width: 2.5em !default;
$table-col-avg-width: 150px !default;
$table-border-color: #cccccc !default;
$table-border: 1px solid $table-border-color !default;
$table-gap-height: 0.5em !default;
$table-padding: 0.5em !default;
$table-stripe-bgcolor: #f9f9f9 !default;
/* Tooltip */
$tooltip-bg-color: #fefefe !default;
$tooltip-border: solid 1px #bcbcbc !default;
$tooltip-box-shadow: 1px 1px 8px -3px #cccccc !default;
$tooltip-key-color: #000000 !default;
$tooltip-value-color: inherit !default;
$tooltip-key-padding: 0 0.2em !default;
$tooltip-key-weight: 600 !default;
$tooltip-padding: 0.3em 0.8em !default;
/* Transfer Tables */
$badge-info-color: #0084d1 !default;
$invalid-color: #f0ad4e !default;
$transfer-btn-width: 3em !default;
$transfer-help-text-color: #999999 !default;
$transfer-btn-border-color: #666666 !default;
$transfer-disabled-btn-color: #cccccc !default;
$transfer-disabled-btn-border-color: #cecece !default;
$transfer-header-bottom-border: 1px solid #eeeeee !default;
$placeholder-text-color: #b8b8b8 !default;
/* Pie/Donut Charts */
$chart-label-font-size: 16px !default;
$chart-label-color: #1f83c6 !default;
$chart-legend-font-size: .9em !default;
$chart-legend-padding: 0.2em 0.75em !default;
$chart-quota-usage-color: #1f83c6 !default;
$chart-quota-added-color: #81c1e7 !default;
$chart-quota-remaining-color: #d1d3d4 !default;
$chart-quota-danger-color: $brand-danger !default;
$chart-slice-legend-padding: 0.2em 0 !default;
$chart-title-font-color: #555 !default;
$chart-title-font-size: .9em !default;
$chart-title-font-size-large: 1.1em !default;
$chart-title-padding: 0 0 0.5em !default;
$chart-title-weight: 600 !default;
/* Metadata Display */
$metadata-display-selector-color: $link-color !default;
$metadata-display-selector-hover-color: $link-hover-color !default;
$metadata-display-selector-active-color: #666 !default;
$metadata-display-separator-color: #ccc !default;
/* Magic Search */
$magic-search-min-width: 40em !default;
$magic-search-border-color: #cccccc !default;
$magic-search-margin-bottom: 0 !default;
$magic-search-border-radius: 3px !default;
$magic-search-margin-padding: 2px !default;
/* Member lists */
$members-list-padding: 3px !default;
$members-list-border: 1px solid $gray-light !default;
// TODO: These values are hardcoded lengths but they are actually
// very dependant on the modal size set in the theme. We need
// to eventually readdress these and calculate them dynamically
$members-list-item-width: 130px !default;
$members-list-item-max-width: 327px !default;
$members-list-roles-width: 125px !default;
// Mimics the padding in _dropdowns.scss
// Not sure why this is hardcoded :-/
// https://github.com/twbs/bootstrap/issues/13443
$dropdown-item-padding-vertical: 3px;
$dropdown-item-padding-horizontal: 20px;