fd8fb3912a
See this screen shot: http://pasteboard.co/14TpE09S.png The longer role names or having multiple roles is not working well beyond the most basic _member_ admin type roles. It was also noticed while in the CSS for the member roles list, that portions of the CSS could benefit from some very simple refactoring to take advantage of the recent CSS Theme reorg. Change-Id: Ibf0be2850669fbc8f6d963f70eb9b6c91281de68 Closes-Bug: #1463181
216 lines
6.9 KiB
SCSS
216 lines
6.9 KiB
SCSS
/* This import is required for using the current theme variables as value
|
|
to our variables */
|
|
@import "/custom/variables";
|
|
|
|
|
|
/* This variable can be used to change the web root of horizon
|
|
default value is already '/' */
|
|
$webroot: "" !default;
|
|
|
|
|
|
/* Horizon Custom Variables */
|
|
|
|
$code-font-family: Menlo, Monaco, Consolas, 'Courier New' !default;
|
|
$body-min-width: 900px !default;
|
|
$sidebar-background-color: #f9f9f9 !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: $webroot + "/static/horizon/lib/font-awesome/fonts";
|
|
|
|
/* Charts */
|
|
|
|
$overview_chart_height: 81px;
|
|
|
|
|
|
/* Accordion Navigation */
|
|
|
|
$accordionBaseFontColor: #6e6e6e !default;
|
|
$accordionBorderColor: #e5e5e5 !default;
|
|
$accordionBoxShadowColor: #c7c7c7 !default;
|
|
$accordionHighlightColor: #d93c27 !default;
|
|
$accordionHeaderActiveColor: #e3e4e6 !default;
|
|
$accordionHeaderBorderColor: #bbbbbb !default;
|
|
$accordionItemActiveBgColor: #ffffff !default;
|
|
$accordionItemFontColor: #6e6e6e !default;
|
|
$accordionSubBorderColor: #c0c1c2 !default;
|
|
$accordionSubHeaderFontColor: #6e6e6e !default;
|
|
|
|
/* 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;
|