e0df577dde
Table styling for Launch Instance workflow, details panels and other
screens in Horizon. Responsive design hides lower priority columns
as window becomes narrower. De-prioritized column values can be displayed
in details row. Included also are directives (extending Smart-Table)
that deal with user interaction such as expanding row to show more
detail and the check all checkbox.
Manual settings when using these tables:
- priority for each column (<td class="rsp-p1">)
- de-prioritized column values to show elsewhere
(<div class="rsp-alt-p1">{$ row.name $}</div>)
- action column width
- detail row 'padding-right' to account for action column width
Mockups: http://invis.io/DW1XZIUH2, http://invis.io/YA1KV4VTP
Demo available here: https://review.openstack.org/#/c/151101
Partially Implements: blueprint table-row-detail-drawers
Change-Id: I5af5baf8bc8c9e4fff0dfff479863b600cec8699
127 lines
3.6 KiB
SCSS
127 lines
3.6 KiB
SCSS
/* This import is required for using bootstrap variables as value
|
|
to our variables */
|
|
@import "/bootstrap/scss/bootstrap/variables";
|
|
|
|
|
|
/* Bootstrap variables overrides */
|
|
|
|
$icon-font-path: "../../bootstrap/fonts/bootstrap/";
|
|
$font-size-base: 13px;
|
|
$modal-md: 732px;
|
|
$gray-light: #cccccc;
|
|
|
|
|
|
/* Horizon Custom Variables */
|
|
|
|
$body-min-width: 900px !default;
|
|
$sidebar-background-color: #f9f9f9 !default;
|
|
$sidebar-width: 220px !default;
|
|
$border-color: #dddddd !default;
|
|
$table-bg-odd: #f9f9f9 !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/horizon/lib/font-awesome/fonts";
|
|
|
|
/* Charts */
|
|
|
|
$overview_chart_height: 81px;
|
|
|
|
|
|
/* Accordion Navigation */
|
|
|
|
$accordionBorderColor: #e5e5e5 !default;
|
|
|
|
/* Help panel */
|
|
|
|
// theme
|
|
$helpPanelColor: #333 !default;
|
|
$helpPanelBg: #eee !default;
|
|
$helpPanelBtnColor: #333 !default;
|
|
$helpPanelBtnBg: transparent !default;
|
|
|
|
// layout
|
|
$helpPanelWidthDefault: 300px !default;
|
|
$helpPanelBtnSize: 40px !default;
|
|
$helpPanelBtnIconSize: 28px !default;
|
|
|
|
/* Wizard */
|
|
|
|
// theme
|
|
$WizardNavItemColor: #444 !default;
|
|
$WizardButtonColorHiLight: rgba(255, 255, 255, .8) !default;
|
|
$WizardNextBtnBgColor: #0083d1 !default;
|
|
$WizardNextBtnBdColor: darken($WizardNextBtnBgColor, 1%) !default;
|
|
$WizardNextBtnDisabledBgColor: #ccc !default;
|
|
$WizardNextBtnDisabledBdColor: darken($WizardNextBtnDisabledBgColor, 1%) !default;
|
|
$WizardFinishBtnBgColor: #4b2 !default;
|
|
$WizardFinishBtnBdColor: darken($WizardFinishBtnBgColor, 1%) !default;
|
|
$WizardFinishBtnDisabledBgColor: #ccc !default;
|
|
$WizardFinishBtnDisabledBdColor: darken($WizardFinishBtnDisabledBgColor, 1%) !default;
|
|
|
|
// layout
|
|
$wizardHeight: 500px !default;
|
|
$wizardTitleBarHeight: 70px !default;
|
|
$wizardToolBarHeight: 65px !default;
|
|
$wizardNavWidth: 280px !default;
|
|
$WizardNavItemHeight: 45px !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; |