Theming Mechanism now supports 3rd party themes
In order to facilitate the bulk of the CSS Reorg effort, it was extremely beneficial to quickly toggle between many different themes in order to validate proper cascading inheritance. This work prompted the following example theme. The 'material' theme gives an example of how to make use of a 3rd party theme using the theming functionality. In addition to incorporating a theme, loaded as a static asset using requirements.txt, it also gives examples of how to cleanly override styles, variables, icon fonts and Django templates. This theme is replacing 'blue' as the example of how to use a theme other than 'default'. To use this theme, add the theme to your local_settings.py: CUSTOM_THEME_PATH = 'themes/material', recollect and recompress your static files. Change-Id: Ic67189de5aac5ca541ad6fe82b823e8fcf318bd0 Partially-Implements: blueprint horizon-theme-css-reorg
This commit is contained in:
Diana Whitten
parent
3c6783e18b
commit
a1b645830f
|
|
@ -12,7 +12,7 @@ and a ``_styles.scss`` file with additional styles to load after dashboard
|
|||
styles have loaded.
|
||||
|
||||
To use a custom theme, set ``CUSTOM_THEME_PATH`` in ``local_settings.py`` to
|
||||
the directory location for the theme (e.g., ``"themes/blue"``). The
|
||||
the directory location for the theme (e.g., ``"themes/material"``). The
|
||||
path can either be relative to the ``openstack_dashboard`` directory or an
|
||||
absolute path to an accessible location on the file system. The default
|
||||
``CUSTOM_THEME_PATH`` is ``themes/default``.
|
||||
|
|
|
|||
|
|
@ -417,6 +417,9 @@ file and a _styles.scss file. These must contain or import all the
|
|||
bootstrap and horizon specific variables and styles which are used to style
|
||||
the GUI. For example themes, see: /horizon/openstack_dashboard/themes/
|
||||
|
||||
Horizon ships with one alternate theme based on Google's Material Design. To
|
||||
use the alternate theme, set your CUSTOM_THEME_PATH to ``themes/material``.
|
||||
|
||||
|
||||
``DEFAULT_THEME_PATH``
|
||||
----------------------
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import xstatic.pkg.angular_lrdragndrop
|
|||
import xstatic.pkg.angular_smart_table
|
||||
import xstatic.pkg.bootstrap_datepicker
|
||||
import xstatic.pkg.bootstrap_scss
|
||||
import xstatic.pkg.bootswatch
|
||||
import xstatic.pkg.d3
|
||||
import xstatic.pkg.font_awesome
|
||||
import xstatic.pkg.hogan
|
||||
|
|
@ -38,7 +39,9 @@ import xstatic.pkg.jquery_tablesorter
|
|||
import xstatic.pkg.jquery_ui
|
||||
import xstatic.pkg.jsencrypt
|
||||
import xstatic.pkg.magic_search
|
||||
import xstatic.pkg.mdi
|
||||
import xstatic.pkg.rickshaw
|
||||
import xstatic.pkg.roboto_fontface
|
||||
import xstatic.pkg.spin
|
||||
import xstatic.pkg.termjs
|
||||
|
||||
|
|
@ -68,6 +71,9 @@ def get_staticfiles_dirs(webroot='/'):
|
|||
('bootstrap',
|
||||
xstatic.main.XStatic(xstatic.pkg.bootstrap_scss,
|
||||
root_url=webroot).base_dir),
|
||||
('horizon/lib/bootswatch',
|
||||
xstatic.main.XStatic(xstatic.pkg.bootswatch,
|
||||
root_url=webroot).base_dir),
|
||||
('horizon/lib',
|
||||
xstatic.main.XStatic(xstatic.pkg.d3,
|
||||
root_url=webroot).base_dir),
|
||||
|
|
@ -98,15 +104,21 @@ def get_staticfiles_dirs(webroot='/'):
|
|||
('horizon/lib/magic_search',
|
||||
xstatic.main.XStatic(xstatic.pkg.magic_search,
|
||||
root_url=webroot).base_dir),
|
||||
('horizon/lib/mdi',
|
||||
xstatic.main.XStatic(xstatic.pkg.mdi,
|
||||
root_url=webroot).base_dir),
|
||||
('horizon/lib',
|
||||
xstatic.main.XStatic(xstatic.pkg.rickshaw,
|
||||
root_url=webroot).base_dir),
|
||||
('horizon/lib/roboto_fontface',
|
||||
xstatic.main.XStatic(xstatic.pkg.roboto_fontface,
|
||||
root_url=webroot).base_dir),
|
||||
('horizon/lib',
|
||||
xstatic.main.XStatic(xstatic.pkg.spin,
|
||||
root_url=webroot).base_dir),
|
||||
('horizon/lib',
|
||||
xstatic.main.XStatic(xstatic.pkg.termjs,
|
||||
root_url=webroot).base_dir),
|
||||
xstatic.main.XStatic(xstatic.pkg.termjs,
|
||||
root_url=webroot).base_dir),
|
||||
]
|
||||
|
||||
if xstatic.main.XStatic(xstatic.pkg.jquery_ui,
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
// Blue
|
||||
// ----
|
||||
|
||||
@mixin btn-shadow($color) {
|
||||
@include gradient-vertical-three-colors(lighten($color, 3%), $color, 6%, darken($color, 3%));
|
||||
filter: none;
|
||||
border: 1px solid darken($color, 10%);
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
.btn-default,
|
||||
.btn-default:hover {
|
||||
@include btn-shadow($btn-default-bg);
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-primary:hover {
|
||||
@include btn-shadow($btn-primary-bg);
|
||||
}
|
||||
|
|
@ -1,884 +0,0 @@
|
|||
// Blue Theme
|
||||
|
||||
// Colors
|
||||
|
||||
$gray: #2751DB !default;
|
||||
$gray-darker: #94A5F2 !default;
|
||||
$gray-dark: #0C0CED !default;
|
||||
$gray-light: #C7CFF2 !default;
|
||||
$gray-lighter: #DCE1F5 !default;
|
||||
|
||||
$brand-primary: #375A7F !default;
|
||||
$brand-success: #00bc8c !default;
|
||||
$brand-info: #34DB98 !default;
|
||||
$brand-warning: #F39C12 !default;
|
||||
$brand-danger: #E74C3C !default;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
$body-bg: $gray-darker !default;
|
||||
//** Global text color on `<body>`.
|
||||
$text-color: #0F089C !default;
|
||||
|
||||
//** Global textual link color.
|
||||
$link-color: desaturate(lighten($brand-success, 10%),10%) !default;
|
||||
//** Link hover color set via `darken()` function.
|
||||
$link-hover-color: $link-color !default;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$web-font: "//fonts.googleapis.com/css?family=Lato:400,700,400italic";
|
||||
|
||||
$font-family-sans-serif: Helvetica, Arial, sans-serif !default;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-serif !default;
|
||||
|
||||
$font-size-base: 15px !default;
|
||||
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
|
||||
|
||||
$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
|
||||
$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
|
||||
$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
|
||||
$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
$font-size-h5: $font-size-base !default;
|
||||
$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
$line-height-base: 1.428571429 !default; // 20/14
|
||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
$headings-font-family: $font-family-base !default;
|
||||
$headings-font-weight: 400 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
$headings-color: inherit !default;
|
||||
|
||||
|
||||
//== Iconography
|
||||
//
|
||||
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
|
||||
|
||||
//** Load fonts from this directory.
|
||||
//** File name for all font files.
|
||||
$icon-font-name: "glyphicons-halflings-regular" !default;
|
||||
//** Element ID within SVG icon file.
|
||||
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
|
||||
|
||||
|
||||
//== Components
|
||||
//
|
||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
||||
|
||||
$padding-base-vertical: 10px !default;
|
||||
$padding-base-horizontal: 15px !default;
|
||||
|
||||
$padding-large-vertical: 18px !default;
|
||||
$padding-large-horizontal: 27px !default;
|
||||
|
||||
$padding-small-vertical: 6px !default;
|
||||
$padding-small-horizontal: 9px !default;
|
||||
|
||||
$padding-xs-vertical: 1px !default;
|
||||
$padding-xs-horizontal: 5px !default;
|
||||
|
||||
$line-height-large: 1.33 !default;
|
||||
$line-height-small: 1.5 !default;
|
||||
|
||||
$border-radius-base: 4px !default;
|
||||
$border-radius-large: 6px !default;
|
||||
$border-radius-small: 3px !default;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
$component-active-color: #fff !default;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
$component-active-bg: $brand-success !default;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
$caret-width-base: 4px !default;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
$caret-width-large: 5px !default;
|
||||
|
||||
|
||||
//== Tables
|
||||
//
|
||||
//## Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
//** Padding for `<th>`s and `<td>`s.
|
||||
$table-cell-padding: 8px !default;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
$table-condensed-cell-padding: 5px !default;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
$table-bg: transparent !default;
|
||||
//** Background color used for `.table-striped`.
|
||||
$table-bg-accent: $gray-dark !default;
|
||||
//** Background color used for `.table-hover`.
|
||||
$table-bg-hover: $gray !default;
|
||||
$table-bg-active: $table-bg-hover !default;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
$table-border-color: $gray !default;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$btn-font-weight: normal !default;
|
||||
|
||||
$btn-default-color: $text-color !default;
|
||||
$btn-default-bg: $gray !default;
|
||||
$btn-default-border: $btn-default-bg !default;
|
||||
|
||||
$btn-primary-color: #fff !default;
|
||||
$btn-primary-bg: $brand-primary !default;
|
||||
$btn-primary-border: $btn-primary-bg !default;
|
||||
|
||||
$btn-success-color: $btn-primary-color !default;
|
||||
$btn-success-bg: $brand-success !default;
|
||||
$btn-success-border: $btn-success-bg !default;
|
||||
|
||||
$btn-info-color: $btn-success-color !default;
|
||||
$btn-info-bg: $brand-info !default;
|
||||
$btn-info-border: $btn-info-bg !default;
|
||||
|
||||
$btn-warning-color: $btn-success-color !default;
|
||||
$btn-warning-bg: $brand-warning !default;
|
||||
$btn-warning-border: $btn-warning-bg !default;
|
||||
|
||||
$btn-danger-color: $btn-success-color !default;
|
||||
$btn-danger-bg: $brand-danger !default;
|
||||
$btn-danger-border: $btn-danger-bg !default;
|
||||
|
||||
$btn-link-disabled-color: $gray-light !default;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
$input-bg: #fff !default;
|
||||
//** `<input disabled>` background color
|
||||
$input-bg-disabled: $gray-lighter !default;
|
||||
//** Text color for `<input>`s
|
||||
$input-color: $gray !default;
|
||||
//** `<input>` border color
|
||||
$input-border: #f1f1f1 !default;
|
||||
//** `<input>` border radius
|
||||
$input-border-radius: $border-radius-base !default;
|
||||
//** Border color for inputs on focus
|
||||
$input-border-focus: #fff !default;
|
||||
|
||||
//** Placeholder text color
|
||||
$input-color-placeholder: $gray-light !default;
|
||||
|
||||
//** Default `.form-control` height
|
||||
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
|
||||
//** Large `.form-control` height
|
||||
$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
|
||||
//** Small `.form-control` height
|
||||
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
|
||||
|
||||
$legend-color: $text-color !default;
|
||||
$legend-border-color: transparent !default;
|
||||
|
||||
//** Background color for textual input addons
|
||||
$input-group-addon-bg: $gray-dark !default;
|
||||
//** Border color for textual input addons
|
||||
$input-group-addon-border-color: transparent !default;
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
$component-offset-horizontal: 180px !default;
|
||||
//** Text muted color
|
||||
$text-muted: $gray-light !default;
|
||||
//** Abbreviations and acronyms border color
|
||||
$abbr-border-color: $gray-light !default;
|
||||
//** Headings small color
|
||||
$headings-small-color: $gray-light !default;
|
||||
//** Blockquote small color
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
//** Blockquote font size
|
||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||
//** Blockquote border color
|
||||
$blockquote-border-color: $gray !default;
|
||||
//** Page header border color
|
||||
$page-header-border-color: transparent !default;
|
||||
//** Width of horizontal description list titles
|
||||
$dl-horizontal-offset: $component-offset-horizontal !default;
|
||||
//** Horizontal line color.
|
||||
$hr-border: $gray !default;
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
$dropdown-bg: #fff !default;
|
||||
//** Dropdown menu `border-color`.
|
||||
$dropdown-border: rgba(0,0,0,.15) !default;
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
$dropdown-fallback-border: #ccc !default;
|
||||
//** Divider color for between dropdown items.
|
||||
$dropdown-divider-bg: #e5e5e5 !default;
|
||||
|
||||
//** Active dropdown menu item background color.
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
//** Dropdown link text color.
|
||||
$dropdown-link-color: $brand-primary !default;
|
||||
//** Hover color for dropdown links.
|
||||
$dropdown-link-hover-color: #fff !default;
|
||||
//** Hover background for dropdown links.
|
||||
$dropdown-link-hover-bg: $dropdown-link-active-bg !default;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
$dropdown-link-active-color: #fff !default;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
$dropdown-link-disabled-color: $text-muted !default;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
$dropdown-header-color: $text-muted !default;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
$dropdown-caret-color: #000 !default;
|
||||
|
||||
|
||||
//-- 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.
|
||||
//
|
||||
// Note: These variables are not generated into the Customizer.
|
||||
|
||||
$zindex-navbar: 1000 !default;
|
||||
$zindex-dropdown: 1000 !default;
|
||||
$zindex-popover: 1060 !default;
|
||||
$zindex-tooltip: 1070 !default;
|
||||
$zindex-navbar-fixed: 1030 !default;
|
||||
$zindex-modal-background: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
|
||||
|
||||
//== Media queries breakpoints
|
||||
//
|
||||
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
||||
|
||||
// Extra small screen / phone
|
||||
//** Deprecated `@screen-xs` as of v3.0.1
|
||||
$screen-xs: 480px !default;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
$screen-xs-min: $screen-xs !default;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
$screen-phone: $screen-xs-min !default;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
$screen-sm: 768px !default;
|
||||
$screen-sm-min: $screen-sm !default;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
$screen-tablet: $screen-sm-min !default;
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
$screen-md: 992px !default;
|
||||
$screen-md-min: $screen-md !default;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
$screen-desktop: $screen-md-min !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
$screen-lg: 1200px !default;
|
||||
$screen-lg-min: $screen-lg !default;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
$screen-lg-desktop: $screen-lg-min !default;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
$screen-xs-max: ($screen-sm-min - 1) !default;
|
||||
$screen-sm-max: ($screen-md-min - 1) !default;
|
||||
$screen-md-max: ($screen-lg-min - 1) !default;
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
$grid-columns: 12 !default;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
$grid-gutter-width: 30px !default;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
$grid-float-breakpoint: $screen-sm-min !default;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
$container-tablet: ((720px + $grid-gutter-width)) !default;
|
||||
//** For `@screen-sm-min` and up.
|
||||
$container-sm: $container-tablet !default;
|
||||
|
||||
// Medium screen / desktop
|
||||
$container-desktop: ((940px + $grid-gutter-width)) !default;
|
||||
//** For `@screen-md-min` and up.
|
||||
$container-md: $container-desktop !default;
|
||||
|
||||
// Large screen / wide desktop
|
||||
$container-large-desktop: ((1140px + $grid-gutter-width)) !default;
|
||||
//** For `@screen-lg-min` and up.
|
||||
$container-lg: $container-large-desktop !default;
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
$navbar-height: 60px !default;
|
||||
$navbar-margin-bottom: $line-height-computed !default;
|
||||
$navbar-border-radius: $border-radius-base !default;
|
||||
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
|
||||
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
|
||||
$navbar-collapse-max-height: 340px !default;
|
||||
|
||||
$navbar-default-color: #777 !default;
|
||||
$navbar-default-bg: $brand-primary !default;
|
||||
$navbar-default-border: transparent !default;
|
||||
|
||||
// Navbar links
|
||||
$navbar-default-link-color: #fff !default;
|
||||
$navbar-default-link-hover-color: $brand-success !default;
|
||||
$navbar-default-link-hover-bg: transparent !default;
|
||||
$navbar-default-link-active-color: #fff !default;
|
||||
$navbar-default-link-active-bg: darken($navbar-default-bg, 10%) !default;
|
||||
$navbar-default-link-disabled-color: #ccc !default;
|
||||
$navbar-default-link-disabled-bg: transparent !default;
|
||||
|
||||
// Navbar brand label
|
||||
$navbar-default-brand-color: $navbar-default-link-color !default;
|
||||
$navbar-default-brand-hover-color: $navbar-default-link-hover-color !default;
|
||||
$navbar-default-brand-hover-bg: transparent !default;
|
||||
|
||||
// Navbar toggle
|
||||
$navbar-default-toggle-hover-bg: darken($navbar-default-bg, 10%) !default;
|
||||
$navbar-default-toggle-icon-bar-bg: #fff !default;
|
||||
$navbar-default-toggle-border-color: darken($navbar-default-bg, 10%) !default;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
$navbar-inverse-color: #fff !default;
|
||||
$navbar-inverse-bg: $brand-success !default;
|
||||
$navbar-inverse-border: transparent !default;
|
||||
|
||||
// Inverted navbar links
|
||||
$navbar-inverse-link-color: $navbar-inverse-color !default;
|
||||
$navbar-inverse-link-hover-color: $brand-primary !default;
|
||||
$navbar-inverse-link-hover-bg: transparent !default;
|
||||
$navbar-inverse-link-active-color: $navbar-inverse-color !default;
|
||||
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 5%) !default;
|
||||
$navbar-inverse-link-disabled-color: #aaa !default;
|
||||
$navbar-inverse-link-disabled-bg: transparent !default;
|
||||
// Navbar brand label
|
||||
$navbar-default-brand-color: $navbar-default-link-color !default;
|
||||
$navbar-default-brand-hover-color: $navbar-default-link-hover-color !default;
|
||||
$navbar-default-brand-hover-bg: transparent !default;
|
||||
|
||||
// Navbar toggle
|
||||
$navbar-default-toggle-hover-bg: darken($navbar-default-bg, 10%) !default;
|
||||
$navbar-default-toggle-icon-bar-bg: #fff !default;
|
||||
$navbar-default-toggle-border-color: darken($navbar-default-bg, 10%) !default;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
$navbar-inverse-color: #fff !default;
|
||||
$navbar-inverse-bg: $brand-success !default;
|
||||
$navbar-inverse-border: transparent !default;
|
||||
|
||||
// Inverted navbar links
|
||||
$navbar-inverse-link-color: $navbar-inverse-color !default;
|
||||
$navbar-inverse-link-hover-color: $brand-primary !default;
|
||||
$navbar-inverse-link-hover-bg: transparent !default;
|
||||
$navbar-inverse-link-active-color: $navbar-inverse-color !default;
|
||||
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 5%) !default;
|
||||
$navbar-inverse-link-disabled-color: #aaa !default;
|
||||
$navbar-inverse-link-disabled-bg: transparent !default;
|
||||
|
||||
// Inverted navbar brand label
|
||||
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
|
||||
$navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color !default;
|
||||
$navbar-inverse-brand-hover-bg: transparent !default;
|
||||
|
||||
// Inverted navbar toggle
|
||||
$navbar-inverse-toggle-hover-bg: darken($navbar-inverse-bg, 10%) !default;
|
||||
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
|
||||
$navbar-inverse-toggle-border-color: darken($navbar-inverse-bg, 10%) !default;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
$nav-link-padding: 10px 15px !default;
|
||||
$nav-link-hover-bg: $gray-dark !default;
|
||||
|
||||
$nav-disabled-link-color: lighten($gray, 10%) !default;
|
||||
$nav-disabled-link-hover-color: lighten($gray, 10%) !default;
|
||||
|
||||
$nav-open-link-hover-color: #fff !default;
|
||||
//== Tabs
|
||||
$nav-tabs-border-color: $gray !default;
|
||||
|
||||
$nav-tabs-link-hover-border-color: $gray !default;
|
||||
|
||||
$nav-tabs-active-link-hover-bg: $body-bg !default;
|
||||
$nav-tabs-active-link-hover-color: $brand-success !default;
|
||||
$nav-tabs-active-link-hover-border-color: $nav-tabs-link-hover-border-color !default;
|
||||
|
||||
$nav-tabs-justified-link-border-color: $gray-lighter !default;
|
||||
$nav-tabs-justified-active-link-border-color: $body-bg !default;
|
||||
|
||||
//== Pills
|
||||
$nav-pills-border-radius: $border-radius-base !default;
|
||||
$nav-pills-active-link-hover-bg: $component-active-bg !default;
|
||||
$nav-pills-active-link-hover-color: $component-active-color !default;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
$pagination-color: #fff !default;
|
||||
$pagination-bg: $brand-success !default;
|
||||
$pagination-border: transparent !default;
|
||||
|
||||
$pagination-hover-color: #fff !default;
|
||||
$pagination-hover-bg: lighten($brand-success, 6%) !default;
|
||||
$pagination-hover-border: transparent !default;
|
||||
|
||||
$pagination-active-color: #fff !default;
|
||||
$pagination-active-bg: lighten($brand-success, 6%) !default;
|
||||
$pagination-active-border: transparent !default;
|
||||
|
||||
$pagination-disabled-color: #fff !default;
|
||||
$pagination-disabled-bg: darken($brand-success, 15%) !default;
|
||||
$pagination-disabled-border: transparent !default;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
$pager-bg: $pagination-bg !default;
|
||||
$pager-border: $pagination-border !default;
|
||||
$pager-border-radius: 15px !default;
|
||||
|
||||
$pager-hover-bg: $pagination-hover-bg !default;
|
||||
|
||||
$pager-active-bg: $pagination-active-bg !default;
|
||||
$pager-active-color: $pagination-active-color !default;
|
||||
|
||||
$pager-disabled-color: #ddd !default;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
$jumbotron-padding: 30px !default;
|
||||
$jumbotron-color: inherit !default;
|
||||
$jumbotron-bg: $gray-dark !default;
|
||||
$jumbotron-heading-color: inherit !default;
|
||||
$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
$state-success-text: #fff !default;
|
||||
$state-success-bg: $brand-success !default;
|
||||
$state-success-border: $brand-success !default;
|
||||
|
||||
$state-info-text: #fff !default;
|
||||
$state-info-bg: $brand-info !default;
|
||||
$state-info-border: $brand-info !default;
|
||||
|
||||
$state-warning-text: #fff !default;
|
||||
$state-warning-bg: $brand-warning !default;
|
||||
$state-warning-border: $brand-warning !default;
|
||||
|
||||
$state-danger-text: #fff !default;
|
||||
$state-danger-bg: $brand-danger !default;
|
||||
$state-danger-border: $brand-danger !default;
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
$tooltip-max-width: 200px !default;
|
||||
//** Tooltip text color
|
||||
$tooltip-color: #fff !default;
|
||||
//** Tooltip background color
|
||||
$tooltip-bg: rgba(0,0,0,.9) !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
|
||||
//** Tooltip arrow width
|
||||
$tooltip-arrow-width: 5px !default;
|
||||
//** Tooltip arrow color
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
$popover-bg: $gray-dark !default;
|
||||
//** Popover maximum width
|
||||
$popover-max-width: 276px !default;
|
||||
//** Popover border color
|
||||
$popover-border-color: rgba(0,0,0,.2) !default;
|
||||
//** Popover fallback border color
|
||||
$popover-fallback-border-color: #999 !default;
|
||||
|
||||
//** Popover title background color
|
||||
$popover-title-bg: darken($popover-bg, 3%) !default;
|
||||
|
||||
//** Popover arrow width
|
||||
$popover-arrow-width: 10px !default;
|
||||
//** Popover arrow color
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
//** Popover outer arrow width
|
||||
$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
|
||||
//** Popover outer arrow color
|
||||
$popover-arrow-outer-color: fadein($popover-border-color, 5%) !default;
|
||||
//** Popover outer arrow fallback color
|
||||
$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
$label-default-bg: $gray !default;
|
||||
//** Primary label background color
|
||||
$label-primary-bg: $brand-primary !default;
|
||||
//** Success label background color
|
||||
$label-success-bg: $brand-success !default;
|
||||
//** Info label background color
|
||||
$label-info-bg: $brand-info !default;
|
||||
//** Warning label background color
|
||||
$label-warning-bg: $brand-warning !default;
|
||||
//** Danger label background color
|
||||
$label-danger-bg: $brand-danger !default;
|
||||
|
||||
//** Default label text color
|
||||
$label-color: #fff !default;
|
||||
//** Default text color of a linked label
|
||||
$label-link-hover-color: #fff !default;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
$modal-inner-padding: 20px !default;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
$modal-title-padding: 15px !default;
|
||||
//** Modal title line-height
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
//** Background color of modal content area
|
||||
$modal-content-bg: $gray-dark !default;
|
||||
//** Modal content border color
|
||||
$modal-content-border-color: rgba(0,0,0,.2) !default;
|
||||
//** Modal content border color **for IE8**
|
||||
$modal-content-fallback-border-color: #999 !default;
|
||||
|
||||
//** Modal backdrop background color
|
||||
$modal-backdrop-bg: #000 !default;
|
||||
//** Modal backdrop opacity
|
||||
$modal-backdrop-opacity: .7 !default;
|
||||
//** Modal header border color
|
||||
$modal-header-border-color: $gray !default;
|
||||
//** Modal footer border color
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
|
||||
$modal-lg: 900px !default;
|
||||
$modal-md: 600px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding: 15px !default;
|
||||
$alert-border-radius: $border-radius-base !default;
|
||||
$alert-link-font-weight: bold !default;
|
||||
|
||||
$alert-success-bg: $state-success-bg !default;
|
||||
$alert-success-text: $state-success-text !default;
|
||||
$alert-success-border: $state-success-border !default;
|
||||
|
||||
$alert-info-bg: $state-info-bg !default;
|
||||
$alert-info-text: $state-info-text !default;
|
||||
$alert-info-border: $state-info-border !default;
|
||||
|
||||
$alert-warning-bg: $state-warning-bg !default;
|
||||
$alert-warning-text: $state-warning-text !default;
|
||||
$alert-warning-border: $state-warning-border !default;
|
||||
|
||||
$alert-danger-bg: $state-danger-bg !default;
|
||||
$alert-danger-text: $state-danger-text !default;
|
||||
$alert-danger-border: $state-danger-border !default;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
$progress-bg: $gray-lighter !default;
|
||||
//** Progress bar text color
|
||||
$progress-bar-color: #fff !default;
|
||||
|
||||
//** Default progress bar color
|
||||
$progress-bar-bg: $brand-primary !default;
|
||||
//** Success progress bar color
|
||||
$progress-bar-success-bg: $brand-success !default;
|
||||
//** Warning progress bar color
|
||||
$progress-bar-warning-bg: $brand-warning !default;
|
||||
//** Danger progress bar color
|
||||
$progress-bar-danger-bg: $brand-danger !default;
|
||||
//** Info progress bar color
|
||||
$progress-bar-info-bg: $brand-info !default;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
$list-group-bg: $gray-dark !default;
|
||||
//** `.list-group-item` border color
|
||||
$list-group-border: $gray !default;
|
||||
//** List group border radius
|
||||
$list-group-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
$list-group-hover-bg: transparent !default;
|
||||
//** Text color of active list items
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
//** Background color of active list items
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
//** Border color of active list elements
|
||||
$list-group-active-border: $list-group-active-bg !default;
|
||||
//** Text color for content within active list items
|
||||
$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
|
||||
|
||||
//** Text color of disabled list items
|
||||
$list-group-disabled-color: $gray-light !default;
|
||||
//** Background color of disabled list items
|
||||
$list-group-disabled-bg: $gray-lighter !default;
|
||||
//** Text color for content within disabled list items
|
||||
$list-group-disabled-text-color: $list-group-disabled-color !default;
|
||||
|
||||
$list-group-link-color: $link-color !default;
|
||||
$list-group-link-hover-color: $list-group-link-color !default;
|
||||
$list-group-link-heading-color: darken($link-color, 5%) !default;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
$panel-bg: $gray-dark !default;
|
||||
$panel-body-padding: 15px !default;
|
||||
$panel-heading-padding: 10px 15px !default;
|
||||
$panel-footer-padding: $panel-heading-padding !default;
|
||||
$panel-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Border color for elements within panels
|
||||
$panel-inner-border: $gray !default;
|
||||
$panel-footer-bg: $gray !default;
|
||||
|
||||
$panel-default-text: $text-color !default;
|
||||
$panel-default-border: $gray !default;
|
||||
$panel-default-heading-bg: $gray-dark !default;
|
||||
|
||||
$panel-primary-text: #fff !default;
|
||||
$panel-primary-border: $brand-primary !default;
|
||||
$panel-primary-heading-bg: $brand-primary !default;
|
||||
|
||||
$panel-success-text: $state-success-text !default;
|
||||
$panel-success-border: $state-success-border !default;
|
||||
$panel-success-heading-bg: $state-success-bg !default;
|
||||
|
||||
$panel-info-text: $state-info-text !default;
|
||||
$panel-info-border: $state-info-border !default;
|
||||
$panel-info-heading-bg: $state-info-bg !default;
|
||||
|
||||
$panel-warning-text: $state-warning-text !default;
|
||||
$panel-warning-border: $state-warning-border !default;
|
||||
$panel-warning-heading-bg: $state-warning-bg !default;
|
||||
|
||||
$panel-danger-text: $state-danger-text !default;
|
||||
$panel-danger-border: $state-danger-border !default;
|
||||
$panel-danger-heading-bg: $state-danger-bg !default;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
$thumbnail-padding: 2px !default;
|
||||
//** Thumbnail background color
|
||||
$thumbnail-bg: $body-bg !default;
|
||||
//** Thumbnail border color
|
||||
$thumbnail-border: $gray !default;
|
||||
//** Thumbnail border radius
|
||||
$thumbnail-border-radius: $border-radius-base !default;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
$thumbnail-caption-color: $text-color !default;
|
||||
//** Padding around the thumbnail caption
|
||||
$thumbnail-caption-padding: 9px !default;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
$well-bg: $gray-dark !default;
|
||||
$well-border: transparent !default;
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
$badge-color: #fff !default;
|
||||
//** Linked badge text color on hover
|
||||
$badge-link-hover-color: #fff !default;
|
||||
$badge-bg: $gray !default;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
$badge-active-color: $brand-primary !default;
|
||||
//** Badge background color in active nav link
|
||||
$badge-active-bg: #fff !default;
|
||||
|
||||
$badge-font-weight: bold !default;
|
||||
$badge-line-height: 1 !default;
|
||||
$badge-border-radius: 10px !default;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
$breadcrumb-padding-vertical: 8px !default;
|
||||
$breadcrumb-padding-horizontal: 15px !default;
|
||||
//** Breadcrumb background color
|
||||
$breadcrumb-bg: $gray !default;
|
||||
//** Breadcrumb text color
|
||||
$breadcrumb-color: $text-color !default;
|
||||
//** Text color of current page in the breadcrumb
|
||||
$breadcrumb-active-color: $gray-light !default;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
$breadcrumb-separator: "/" !default;
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
|
||||
|
||||
$carousel-control-color: #fff !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
$carousel-control-font-size: 20px !default;
|
||||
|
||||
$carousel-indicator-active-bg: #fff !default;
|
||||
$carousel-indicator-border-color: #fff !default;
|
||||
|
||||
$carousel-caption-color: #fff !default;
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
$close-font-weight: bold !default;
|
||||
$close-color: #fff !default;
|
||||
$close-text-shadow: none !default;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
$code-color: #c7254e !default;
|
||||
$code-bg: #f9f2f4 !default;
|
||||
|
||||
$kbd-color: #fff !default;
|
||||
$kbd-bg: #333 !default;
|
||||
|
||||
$pre-bg: $gray-lighter !default;
|
||||
$pre-color: $gray-dark !default;
|
||||
$pre-border-color: #ccc !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
|
||||
// Horizon custom variables
|
||||
$sidebar-background-color: $body-bg;
|
||||
$border-color: #dddddd;
|
||||
|
||||
// Table
|
||||
$table-bg-odd: $body-bg;
|
||||
$table-stripe-bgcolor: $body-bg;
|
||||
$table-border-color: #cccccc;
|
||||
|
||||
// Resource Browser
|
||||
$rbrowser-body-background-color: $body-bg;
|
||||
$rbrowser-header-background-color: $body-bg;
|
||||
$rbrowser-footer-background-color: $body-bg;
|
||||
|
||||
// Accordion Nav
|
||||
$accordionBaseFontColor: #002EFC;
|
||||
$accordionBorderColor: #cccccc;
|
||||
$accordianBoxShadowColor: #c7c7c7;
|
||||
$accordionHighlightColor: #0000FF;
|
||||
$accordianHeaderActiveColor: $gray-dark;
|
||||
$accordianHeaderBorderColor: $body-bg;
|
||||
$accordionItemActiveBgColor: #ffffff;
|
||||
$accordionItemFontColor: #002EFC;
|
||||
$accordionSubBorderColor: #c0c1c2;
|
||||
$accordionSubHeaderFontColor: #002EFC;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<span class="fa fa-list-alt"></span>
|
||||
<span class="context-overview">
|
||||
{% if domain_supported %}
|
||||
<span>{{ domain_name }}</span>
|
||||
<strong>·</strong>
|
||||
{% endif %}
|
||||
<span>{{ project_name }}</span>
|
||||
{% if multi_region %}
|
||||
<strong>·</strong>
|
||||
<span>{{ region_name }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
{% load i18n %}
|
||||
{% load url from future %}
|
||||
|
||||
{% with dashboard_url=request.horizon.dashboard.get_absolute_url %}
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-header">{% trans "Projects:" %}</li>
|
||||
{% for project in projects %}
|
||||
<li>
|
||||
<a href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}">
|
||||
{{ project.name }}
|
||||
{% if project.enabled and project.id == project_id %}
|
||||
<span class="fa fa-check"></span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endwith %}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Based on Paper
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
@import '/bootstrap/scss/bootstrap/mixins/vendor-prefixes';
|
||||
@import '/horizon/lib/bootswatch/paper/bootswatch';
|
||||
|
||||
$roboto-font-path: $static_url + '/horizon/lib/roboto_fontface/fonts';
|
||||
@import '/horizon/lib/roboto_fontface/css/roboto-fontface.scss';
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
$brand-primary: #03a9f4;
|
||||
|
||||
// If that blue isn't desired, then consider any of these other
|
||||
//colors that are part of the Matieral Design Spec Color Palette
|
||||
|
||||
//$brand-primary: #627C7B;
|
||||
//$brand-primary: #455a64;
|
||||
//$brand-primary: #009688;
|
||||
|
||||
$gray-dark: #212121;
|
||||
|
||||
|
||||
//== Iconography
|
||||
//
|
||||
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
|
||||
|
||||
//** Load fonts from this directory.
|
||||
$icon-font-path: "../icons/fonts/";
|
||||
//** File name for all font files.
|
||||
$icon-font-name: "material";
|
||||
//** Element ID within SVG icon file.
|
||||
$icon-font-svg-id: "material";
|
||||
|
||||
|
||||
//== Components
|
||||
//
|
||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
||||
|
||||
$border-radius-base: 0;
|
||||
$border-radius-small: 0;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Inverted navbar
|
||||
// Inverted navbar links
|
||||
$navbar-inverse-link-color: #fff;
|
||||
$navbar-inverse-link-hover-color: $navbar-inverse-link-color;
|
||||
|
||||
// Inverted navbar brand label
|
||||
$navbar-inverse-brand-hover-color: $navbar-inverse-link-color;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
$nav-link-padding: 15px 22px 15px 22px;
|
||||
$nav-link-hover-bg: transparent;
|
||||
|
||||
$nav-disabled-link-color: $gray-dark;
|
||||
$nav-disabled-link-hover-color: $gray-dark;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import 'variable_customizations';
|
||||
|
||||
// Bootswatch Paper
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
@import '/horizon/lib/bootswatch/paper/variables';
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
// This file does a 1-1 mapping of each font-awesome icon in use to
|
||||
// a corresponding Material Design Icon.
|
||||
|
||||
$mdi-font-path: $static_url + "/horizon/lib/mdi/fonts";
|
||||
@import "/horizon/lib/mdi/scss/materialdesignicons.scss";
|
||||
|
||||
.fa {
|
||||
@extend .mdi;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
$icon-swap: (
|
||||
caret-down: 'menu-down',
|
||||
sign-out: 'logout',
|
||||
question-circle: 'help-circle',
|
||||
cog: 'settings',
|
||||
user: 'account',
|
||||
plus: 'plus',
|
||||
minus: 'minus',
|
||||
check: 'check',
|
||||
list-alt: 'view-list',
|
||||
chevron-down: 'chevron-down',
|
||||
chevron-up: 'chevron-up',
|
||||
chevron-left: 'chevron-left',
|
||||
chevron-right: 'chevron-right',
|
||||
search: 'magnify',
|
||||
exclamation-circle: 'alert-circle',
|
||||
warning: 'alert',
|
||||
exclamation-triangle: 'alert',
|
||||
cloud-download: 'cloud-download',
|
||||
cloud-upload: 'cloud-upload',
|
||||
upload: 'upload',
|
||||
download: 'download',
|
||||
times: 'close',
|
||||
close: 'close',
|
||||
remove: 'close',
|
||||
random: 'shuffle',
|
||||
ban: 'block-helper',
|
||||
th-large: 'view-grid',
|
||||
th: 'view-module',
|
||||
trash: 'delete',
|
||||
trash-o: 'delete',
|
||||
pencil: 'pencil',
|
||||
eye: 'eye',
|
||||
eye-slash: 'eye-off',
|
||||
desktop: 'desktop-mac',
|
||||
server: 'server',
|
||||
square: 'checkbox-blank',
|
||||
exclamation: 'exclamation',
|
||||
sort: 'sort',
|
||||
home: 'home',
|
||||
square-o: 'checkbox-blank-outline',
|
||||
group: 'account-multiple',
|
||||
share-square-o: 'share',
|
||||
link: 'link-variant',
|
||||
exchange: 'swap-horizontal',
|
||||
);
|
||||
|
||||
@each $fa-icon, $mdi-icon in $icon-swap {
|
||||
.fa-#{$fa-icon} {
|
||||
@extend .mdi-#{$mdi-icon};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
@import "icons";
|
||||
@import "components/hamburger";
|
||||
@import "components/sidebar";
|
||||
|
||||
|
||||
// General Layout Changes
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#content_body {
|
||||
padding-top: $navbar-height;
|
||||
transition: padding-left $sidebar-animation;
|
||||
|
||||
@media (max-width: $screen-lg) {
|
||||
padding-left: $content-body-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// The top nav is fixed, even when the page scrolls
|
||||
.topbar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 4;
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hamburger menu only shows on smaller screen sizes
|
||||
.navbar-header .md-hamburger {
|
||||
display: none;
|
||||
@media (max-width: $screen-lg) {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
& > button {
|
||||
padding: $navbar-padding-vertical $navbar-padding-horizontal;
|
||||
height: $navbar-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// The mask that the hamburger menu uses to apply an opacity
|
||||
// to the entire page when in smaller screen
|
||||
#md-hamburger-mask {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transform: translateZ(0);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
transition: all $hamburger-transition;
|
||||
|
||||
@media (max-width: $screen-lg) {
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
$sidebar-width: 240px;
|
||||
$hamburger-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||
$sidebar-animation: $hamburger-transition;
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
// HAMBURGLER!!!!
|
||||
// Adapted with <3 from http://codepen.io/swirlycheetah/pen/cFtzb
|
||||
|
||||
// keyframes mixin
|
||||
@mixin keyframes($name) {
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
@-moz-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
@-ms-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.md-hamburger-trigger {
|
||||
display: block;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.md-hamburger-layer {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: $gray;
|
||||
position: relative;
|
||||
@include animation-duration(300ms);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: block;
|
||||
width: inherit;
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
background: inherit;
|
||||
left: 0;
|
||||
content: '';
|
||||
@include animation-duration(300ms);
|
||||
@include animation-timing-function(ease-in-out);
|
||||
}
|
||||
|
||||
&:before {
|
||||
bottom: 200%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
// Specialness for a nav-bar
|
||||
.navbar .md-hamburger-layer {
|
||||
background: $navbar-default-toggle-icon-bar-bg;
|
||||
}
|
||||
|
||||
.md-hamburger-arrow {
|
||||
@include animation-name(md-hamburger-icon--slide);
|
||||
@include animation-fill-mode(forwards);
|
||||
|
||||
&:before {
|
||||
@include animation-name(md-hamburger-icon--slide-before);
|
||||
@include animation-fill-mode(forwards);
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include animation-name(md-hamburger-icon--slide-after);
|
||||
@include animation-fill-mode(forwards);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.md-hamburger-menu {
|
||||
@include animation-name(md-hamburger-icon--slide-from);
|
||||
|
||||
&:before {
|
||||
@include animation-name(md-hamburger-icon--slide-before-from);
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include animation-name(md-hamburger-icon--slide-after-from);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include keyframes(md-hamburger-icon--slide) {
|
||||
0% {
|
||||
}
|
||||
100% {
|
||||
@include rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(md-hamburger-icon--slide-before) {
|
||||
0% {
|
||||
}
|
||||
100% {
|
||||
@include rotate(45deg);
|
||||
margin: 3% 37%;
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(md-hamburger-icon--slide-after) {
|
||||
0% {
|
||||
}
|
||||
100% {
|
||||
@include rotate(-45deg);
|
||||
margin: 3% 37%;
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(md-hamburger-icon--slide-from) {
|
||||
0% {
|
||||
@include rotate(-180deg);
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(md-hamburger-icon--slide-before-from) {
|
||||
0% {
|
||||
@include rotate(45deg);
|
||||
margin: 3% 37%;
|
||||
width: 75%;
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(md-hamburger-icon--slide-after-from) {
|
||||
0% {
|
||||
@include rotate(-45deg);
|
||||
margin: 3% 37%;
|
||||
width: 75%;
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
#sidebar {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.14);
|
||||
bottom: 0;
|
||||
display: block;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: $navbar-height;
|
||||
/* No mixin for this yet */
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
@include translate(0, 0);
|
||||
@include transition(transform $sidebar-animation);
|
||||
width: $sidebar-width;
|
||||
z-index: 3;
|
||||
margin-left: 0;
|
||||
overflow-x: scroll;
|
||||
|
||||
.sidebar-wrapper {
|
||||
background: $body-bg;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.openstack-dashboard {
|
||||
& > a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
background-color: transparent;
|
||||
|
||||
&:focus {
|
||||
background-color: $gray-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.openstack-dashboard > a,
|
||||
.openstack-panel > a,
|
||||
.nav-header > a {
|
||||
&:focus {
|
||||
background-color: $gray-lighter;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.openstack-dashboard > a,
|
||||
.openstack-panel > a,
|
||||
.nav-header > a {
|
||||
color: $list-group-link-heading-color;
|
||||
}
|
||||
|
||||
.openstack-panel > a {
|
||||
padding: $padding-small-horizontal $font-size-h4 $padding-small-horizontal ($font-size-h1 - $padding-small-horizontal);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.openstack-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-header-title {
|
||||
text-align: left;
|
||||
padding-left: $padding-small-horizontal;
|
||||
}
|
||||
|
||||
// Specialness for smaller screens!
|
||||
@media (max-width: $screen-lg) {
|
||||
@include translate(-$sidebar-width, 0);
|
||||
border: none;
|
||||
|
||||
&.active {
|
||||
@include translate(0, 0);
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
* (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
$(document).ready(function () {
|
||||
'use strict';
|
||||
|
||||
var $sidenav = $('#sidebar');
|
||||
var $mask = $(document.createElement('div'))
|
||||
.prop('id', 'md-hamburger-mask')
|
||||
.appendTo($('#container'));
|
||||
|
||||
// Hamburger Happiness !!!
|
||||
$(document).on('click', '.md-hamburger', function () {
|
||||
var $foo = $(this).find('.md-hamburger-layer');
|
||||
$(this).find('.md-hamburger-layer')
|
||||
.toggleClass('md-hamburger-arrow')
|
||||
.toggleClass('md-hamburger-menu');
|
||||
|
||||
$mask.toggleClass('active');
|
||||
$sidenav.toggleClass('active');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
{% load branding i18n %}
|
||||
{% load url from future %}
|
||||
{% load context_selection %}
|
||||
{% load compress %}
|
||||
|
||||
<nav class="navbar navbar-default">
|
||||
<nav class="navbar navbar-inverse">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
|
|
@ -12,9 +13,16 @@
|
|||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="md-hamburger">
|
||||
<button class="md-hamburger-trigger">
|
||||
<span class="md-hamburger-layer md-hamburger-menu"></span>
|
||||
</button>
|
||||
{% compress js inline %}
|
||||
<script src='{{ STATIC_URL }}custom/js/material.hamburger.js'></script>
|
||||
{% endcompress %}
|
||||
</div>
|
||||
<a class="navbar-brand" href="{% site_branding_link %}">
|
||||
<span class="openstack-logo"></span>
|
||||
{% site_branding %}
|
||||
<img class="openstack-logo" src="{{ STATIC_URL }}dashboard/img/logo.png" alt="{% site_branding %}">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -22,24 +30,44 @@
|
|||
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
|
||||
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
|
||||
{% show_overview %}
|
||||
<b class="caret"></b>
|
||||
<span class="fa fa-caret-down"></span>
|
||||
</a>
|
||||
{% show_domain_list %}
|
||||
{% show_project_list %}
|
||||
{% show_region_list %}
|
||||
<ul class="dropdown-menu context-selection">
|
||||
|
||||
{% comment %}
|
||||
is_multidomain is only available through an assignment tag pulled in through context_selection
|
||||
{% endcomment %}
|
||||
{% is_multidomain as domain_supported %}
|
||||
{% if domain_supported %}
|
||||
<li>
|
||||
{% show_domain_list %}
|
||||
</li>
|
||||
{% endif %}
|
||||
<li>
|
||||
{% show_project_list %}
|
||||
</li>
|
||||
|
||||
{% comment %}
|
||||
is_multi_region is only available through an assignment tag pulled in through context_selection
|
||||
{% endcomment %}
|
||||
{% is_multi_region as multi_region %}
|
||||
{% if multi_region %}
|
||||
<li>
|
||||
{% show_region_list %}
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% include "horizon/common/_region_selector.html" %}
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
|
||||
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
|
||||
<span class="fa fa-user"></span>
|
||||
{{ request.user.username }}
|
||||
<b class="caret"></b>
|
||||
<span class="fa fa-caret-down"></span>
|
||||
</a>
|
||||
<ul id="editor_list" class="dropdown-menu">
|
||||
<li>
|
||||
|
|
@ -65,6 +93,9 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
{% include "horizon/common/_region_selector.html" %}
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!-- /.container-fluid -->
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
{% load horizon i18n %}
|
||||
{% load url from future %}
|
||||
|
||||
<div class="sidebar-wrapper">
|
||||
<ul id="sidebar-drawer" class="nav nav-pills nav-stacked">
|
||||
{% for dashboard, panel_info in components %}
|
||||
{% if user|has_permissions:dashboard %}
|
||||
<li class="openstack-dashboard{% if current.slug == dashboard.slug %} active{% endif %}">
|
||||
<a data-toggle="collapse"
|
||||
data-parent="#sidebar-drawer"
|
||||
href="#sidebar-drawer-{{ dashboard.slug }}"
|
||||
{% if current.slug != dashboard.slug %}
|
||||
class="collapsed"
|
||||
{% endif %}>
|
||||
{{ dashboard.name }}
|
||||
<span class="openstack-toggle pull-right fa"></span>
|
||||
</a>
|
||||
<ul id="sidebar-drawer-{{ dashboard.slug }}"
|
||||
class="nav collapse panel-collapse{% if current.slug == dashboard.slug %} in{% endif %}">
|
||||
{% for group, panels in panel_info.iteritems %}
|
||||
{% with panels|has_permissions_on_list:user as filtered_panels %}
|
||||
{% if filtered_panels %}
|
||||
{% if group.name %}
|
||||
<li class="nav-header">
|
||||
<a data-toggle="collapse"
|
||||
data-parent="#sidebar-drawer-{{ dashboard.slug }}"
|
||||
href="#sidebar-drawer-{{ dashboard.slug }}-{{ group.slug }}"
|
||||
{% if current.slug == dashboard.slug and current_panel_group != group.slug %}class="collapsed"
|
||||
{% elif current.slug != dashboard.slug and forloop.counter0 != 0 %}class="collapsed"{% endif %}>
|
||||
<span class="nav-header-title">
|
||||
{{ group.name }}
|
||||
<span class="openstack-toggle fa pull-right"></span>
|
||||
</span>
|
||||
</a>
|
||||
<ul id="sidebar-drawer-{{ dashboard.slug }}-{{ group.slug }}"
|
||||
class="nav collapse panel-collapse
|
||||
{% if current.slug == dashboard.slug and current_panel_group == group.slug %} in
|
||||
{% elif current.slug != dashboard.slug and forloop.counter0 == 0 %} in{% endif %}">
|
||||
{% endif %}
|
||||
{% for panel in filtered_panels %}
|
||||
<li class="openstack-panel{% if current.slug == dashboard.slug and current_panel == panel.slug %} active{% endif %}">
|
||||
<a class="openstack-spin" href="{{ panel.get_absolute_url }}"
|
||||
tabindex="{{ forloop.counter }}" >
|
||||
{{ panel.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if group.name %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -48,6 +48,7 @@ XStatic-Angular-Gettext>=2.1.0.2 # MIT License
|
|||
XStatic-Angular-lrdragndrop>=1.0.2.2 # MIT License
|
||||
XStatic-Bootstrap-Datepicker>=1.3.1.0 # Apache 2.0 License
|
||||
XStatic-Bootstrap-SCSS>=3 # Apache 2.0 License
|
||||
XStatic-bootswatch>=3.3.5.2 # MIT License
|
||||
XStatic-D3>=3.1.6.2 # BSD License (3 clause)
|
||||
XStatic-Hogan>=2.0.0.2 # Apache 2.0 License
|
||||
XStatic-Font-Awesome>=4.3.0 # SIL OFL 1.1 License, MIT License
|
||||
|
|
@ -59,7 +60,9 @@ XStatic-JQuery.TableSorter>=2.14.5.1 # MIT License
|
|||
XStatic-jquery-ui>=1.10.1 # MIT License
|
||||
XStatic-JSEncrypt>=2.0.0.2 # MIT License
|
||||
XStatic-Magic-Search>=0.2.5.1 # Apache 2.0 License
|
||||
XStatic-mdi==1.1.70.1 # SIL OPEN FONT LICENSE Version 1.1
|
||||
XStatic-Rickshaw>=1.5.0 # BSD License (prior)
|
||||
XStatic-roboto-fontface>=0.4.3.2 # Apache 2.0 License
|
||||
XStatic-smart-table>=1.4.5.3 # MIT License
|
||||
XStatic-Spin>=1.2.5.2 # MIT License
|
||||
XStatic-term.js>=0.0.4 # MIT License
|
||||
|
|
|
|||
Loading…
Reference in New Issue