[IMP] website: create customize theme application and color-picker; Create theme_bootswatch and use less files.
This commit is contained in:
Christophe Matthieu
@@ -0,0 +1,13 @@
|
||||
{
|
||||
'name': 'Bootswatch Theme',
|
||||
'description': 'Bootswatch Theme',
|
||||
'category': 'Website',
|
||||
'version': '1.0',
|
||||
'author': 'OpenERP SA',
|
||||
'depends': ['website'],
|
||||
'data': [
|
||||
'views/layout.xml',
|
||||
'views/theme.xml',
|
||||
],
|
||||
'application': True,
|
||||
}
|
||||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
@@ -0,0 +1,195 @@
|
||||
// Amelia 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Lobster|Cabin:400,700");
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
|
||||
&-brand {
|
||||
font-family: 'Lobster', cursive;
|
||||
}
|
||||
|
||||
&-default {
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-default-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
.btn {
|
||||
|
||||
.caret {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
|
||||
&:hover {
|
||||
color: @btn-default-color;
|
||||
}
|
||||
|
||||
.caret {
|
||||
border-top-color: @btn-default-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
.text-primary,
|
||||
.text-primary:hover {
|
||||
color: lighten(@brand-primary, 40%);
|
||||
}
|
||||
|
||||
.text-success,
|
||||
.text-success:hover {
|
||||
color: lighten(@brand-success, 20%);
|
||||
}
|
||||
|
||||
.text-danger,
|
||||
.text-danger:hover {
|
||||
color: lighten(@brand-danger, 20%);
|
||||
}
|
||||
|
||||
.text-warning,
|
||||
.text-warning:hover {
|
||||
color: lighten(@brand-warning, 20%);
|
||||
}
|
||||
|
||||
.text-info,
|
||||
.text-info:hover {
|
||||
color: lighten(@brand-info, 40%);
|
||||
}
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
.table-responsive > .table {
|
||||
background-color: @table-bg;
|
||||
}
|
||||
|
||||
table,
|
||||
.table {
|
||||
|
||||
a:not(.btn) {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
input,
|
||||
textarea {
|
||||
color: @input-color;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-family: 'Lobster', cursive;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
color: @btn-default-color;
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: lighten(@brand-warning, 20%);
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: lighten(@brand-warning, 20%);
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: lighten(@brand-primary, 40%);
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: lighten(@brand-primary, 40%);
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: lighten(@brand-success, 20%);
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: lighten(@brand-success, 20%);
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
.pagination {
|
||||
|
||||
a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
|
||||
a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
.close {
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
// Containers =================================================================
|
||||
|
||||
a.thumbnail:hover,
|
||||
a.thumbnail:focus,
|
||||
a.thumbnail.active {
|
||||
border-color: @thumbnail-border;
|
||||
}
|
||||
|
||||
.popover {
|
||||
color: @gray-dark;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,846 @@
|
||||
// Amelia 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: #111; // #222
|
||||
@gray-dark: #444; // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@gray-light: #bbb; // #999
|
||||
@gray-lighter: #ddd; // #eee
|
||||
|
||||
@brand-primary: #AD1D28;
|
||||
@brand-success: #48CA3B;
|
||||
@brand-info: #4D3A7D;
|
||||
@brand-warning: #DEBB27;
|
||||
@brand-danger: #DF6E1E;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #108A93;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: #fff;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: lighten(@brand-warning, 15%);
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: @link-color;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Cabin", Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: 'Lobster', cursive;
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: inherit;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: lighten(@body-bg, 10%);
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: transparent;
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: darken(@body-bg, 2.5%);
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: lighten(@body-bg, 5%);
|
||||
@table-bg-active: darken(@body-bg, 5%);
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: darken(@body-bg, 5%);
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: @gray-dark;
|
||||
@btn-default-bg: @gray-lighter;
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: #fff;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-primary-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: @btn-primary-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: @btn-primary-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-primary-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @gray-dark;
|
||||
//** `<input>` border color
|
||||
@input-border: #ccc;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: darken(@body-bg, 5%);
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @gray-lighter;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @gray-lighter;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: @gray-light;
|
||||
@navbar-default-bg: @brand-primary;
|
||||
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: #fff;
|
||||
@navbar-default-link-hover-color: #fff;
|
||||
@navbar-default-link-hover-bg: lighten(@navbar-default-bg, 10%);
|
||||
@navbar-default-link-active-color: #fff;
|
||||
@navbar-default-link-active-bg: @navbar-default-link-hover-bg;
|
||||
@navbar-default-link-disabled-color: #ccc;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: @navbar-default-brand-color;
|
||||
@navbar-default-brand-hover-bg: none;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: @navbar-default-link-hover-bg;
|
||||
@navbar-default-toggle-icon-bar-bg: #fff;
|
||||
@navbar-default-toggle-border-color: @navbar-default-link-hover-bg;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: @gray-light;
|
||||
@navbar-inverse-bg: @brand-warning;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: #fff;
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: lighten(@navbar-inverse-bg, 10%);
|
||||
@navbar-inverse-link-active-color: #fff;
|
||||
@navbar-inverse-link-active-bg: @navbar-inverse-link-hover-bg;
|
||||
@navbar-inverse-link-disabled-color: #444;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: #fff;
|
||||
@navbar-inverse-brand-hover-bg: none;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: @navbar-inverse-link-hover-bg;
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: @navbar-inverse-link-hover-bg;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: lighten(@body-bg, 10%);
|
||||
|
||||
@nav-disabled-link-color: @gray-lighter;
|
||||
@nav-disabled-link-hover-color: @gray-lighter;
|
||||
|
||||
@nav-open-link-hover-color: @nav-link-hover-bg;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: @nav-link-hover-bg;
|
||||
|
||||
@nav-tabs-link-hover-border-color: transparent;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @nav-link-hover-bg;
|
||||
@nav-tabs-active-link-hover-color: #fff;
|
||||
@nav-tabs-active-link-hover-border-color: transparent;
|
||||
|
||||
@nav-tabs-justified-link-border-color: transparent;
|
||||
@nav-tabs-justified-active-link-border-color: transparent;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: @link-color;
|
||||
@pagination-bg: lighten(@body-bg, 5%);
|
||||
@pagination-border: transparent;
|
||||
|
||||
@pagination-hover-color: @link-hover-color;
|
||||
@pagination-hover-bg: @component-active-bg;
|
||||
@pagination-hover-border: transparent;
|
||||
|
||||
@pagination-active-color: #fff;
|
||||
@pagination-active-bg: lighten(@body-bg, 10%);
|
||||
@pagination-active-border: transparent;
|
||||
|
||||
@pagination-disabled-color: #fff;
|
||||
@pagination-disabled-bg: lighten(@body-bg, 5%);
|
||||
@pagination-disabled-border: transparent;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @pagination-disabled-color;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: darken(@body-bg, 5%);
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #fff;
|
||||
@state-success-bg: @brand-success;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #fff;
|
||||
@state-info-bg: @brand-info;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #fff;
|
||||
@state-warning-bg: @brand-warning;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
||||
|
||||
@state-danger-text: #fff;
|
||||
@state-danger-bg: @brand-danger;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: #fff;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: lighten(@body-bg, 5%);
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: darken(@body-bg, 5%);
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: darken(@body-bg, 5%);
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: lighten(@body-bg, 5%);
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: darken(@body-bg, 5%);
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: lighten(@body-bg, 10%);
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-border;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: @link-color;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #fff;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: lighten(@body-bg, 5%);
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: darken(@body-bg, 5%);
|
||||
@panel-footer-bg: @panel-default-heading-bg;
|
||||
|
||||
@panel-default-text: #fff;
|
||||
@panel-default-border: darken(@body-bg, 5%);
|
||||
@panel-default-heading-bg: lighten(@body-bg, 15%);
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @brand-primary;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: @state-success-border;
|
||||
@panel-success-heading-bg: @state-success-bg;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: @state-info-border;
|
||||
@panel-info-heading-bg: @state-info-bg;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: @state-warning-border;
|
||||
@panel-warning-heading-bg: @state-warning-bg;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: @state-danger-border;
|
||||
@panel-danger-heading-bg: @state-danger-bg;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @hr-border;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: @hr-border;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: darken(@body-bg, 5%);
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @brand-primary;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: #fff;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: @brand-primary;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: lighten(@body-bg, 5%);
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: @gray-lighter;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: #fff;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #fff;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: rgba(255, 255, 255, 0.6);
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: rgba(255, 255, 255, 0.6);
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: rgba(255, 255, 255, 0.6);
|
||||
//** Page header border color
|
||||
@page-header-border-color: darken(@body-bg, 5%);
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: darken(@body-bg, 5%);
|
||||
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
// Cerulean 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
.btn-shadow(@color) {
|
||||
#gradient > .vertical-three-colors(lighten(@color, 8%), @color, 60%, darken(@color, 4%));
|
||||
filter: none;
|
||||
border-bottom: 1px solid darken(@color, 10%);
|
||||
}
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
.btn-shadow(@navbar-default-bg);
|
||||
filter: none;
|
||||
.box-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
|
||||
|
||||
&-default {
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-default-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-inverse {
|
||||
#gradient > .vertical-three-colors(lighten(@navbar-inverse-bg, 8%), lighten(@navbar-inverse-bg, 4%), 60%, darken(@navbar-inverse-bg, 2%));
|
||||
filter: none;
|
||||
border-bottom: 1px solid darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-inverse-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li > a,
|
||||
&-brand {
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
|
||||
.navbar {
|
||||
|
||||
.dropdown-header {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
.btn {
|
||||
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.caret {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
|
||||
.btn-shadow(@btn-default-bg);
|
||||
|
||||
&:hover {
|
||||
color: @btn-default-color;
|
||||
}
|
||||
|
||||
.caret {
|
||||
border-top-color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
.btn-shadow(@btn-default-bg);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
.btn-shadow(@btn-primary-bg);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
.btn-shadow(@btn-success-bg);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
.btn-shadow(@btn-info-bg);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
.btn-shadow(@btn-warning-bg);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
.btn-shadow(@btn-danger-bg);
|
||||
}
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
// Containers =================================================================
|
||||
|
||||
.panel-primary,
|
||||
.panel-success,
|
||||
.panel-warning,
|
||||
.panel-danger,
|
||||
.panel-info {
|
||||
|
||||
.panel-heading,
|
||||
.panel-title {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -0,0 +1,846 @@
|
||||
// Cerulean 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: lighten(#000, 20%); // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@gray-light: lighten(#000, 60%); // #999
|
||||
@gray-lighter: lighten(#000, 93.5%); // #eee
|
||||
|
||||
@brand-primary: #2FA4E7;
|
||||
@brand-success: #73A839;
|
||||
@brand-info: #033C73;
|
||||
@brand-warning: #DD5600;
|
||||
@brand-danger: #C71C22;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #fff;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: @gray;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: @brand-primary;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: darken(@link-color, 15%);
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-base;
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: #317EAC;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: transparent;
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: #f9f9f9;
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: #f5f5f5;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: #ddd;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: @text-color;
|
||||
@btn-default-bg: #fff;
|
||||
@btn-default-border: rgba(0, 0, 0, 0.1);
|
||||
|
||||
@btn-primary-color: #fff;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: #fff;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: #fff;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: #fff;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: #fff;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @text-color;
|
||||
//** `<input>` border color
|
||||
@input-border: #ccc;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: #ddd;
|
||||
@navbar-default-bg: @brand-primary;
|
||||
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: #fff;
|
||||
@navbar-default-link-hover-color: #fff;
|
||||
@navbar-default-link-hover-bg: darken(@navbar-default-bg, 10%);
|
||||
@navbar-default-link-active-color: #fff;
|
||||
@navbar-default-link-active-bg: darken(@navbar-default-bg, 10%);
|
||||
@navbar-default-link-disabled-color: #ddd;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: #fff;
|
||||
@navbar-default-brand-hover-bg: none;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 10%);
|
||||
@navbar-default-toggle-icon-bar-bg: #fff;
|
||||
@navbar-default-toggle-border-color: darken(@navbar-default-bg, 10%);
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: #fff;
|
||||
@navbar-inverse-bg: @brand-info;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 5%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: #fff;
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 5%);
|
||||
@navbar-inverse-link-active-color: #fff;
|
||||
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 5%);
|
||||
@navbar-inverse-link-disabled-color: #ccc;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: #fff;
|
||||
@navbar-inverse-brand-hover-bg: none;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 5%);
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 5%);
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: #ddd;
|
||||
|
||||
@nav-tabs-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @body-bg;
|
||||
@nav-tabs-active-link-hover-color: @gray;
|
||||
@nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
@nav-tabs-justified-link-border-color: #ddd;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: @link-color;
|
||||
@pagination-bg: #fff;
|
||||
@pagination-border: #ddd;
|
||||
|
||||
@pagination-hover-color: @link-hover-color;
|
||||
@pagination-hover-bg: @gray-lighter;
|
||||
@pagination-hover-border: #ddd;
|
||||
|
||||
@pagination-active-color: @gray-light;
|
||||
@pagination-active-bg: #f5f5f5;
|
||||
@pagination-active-border: @pagination-hover-border;
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
@pagination-disabled-bg: #fff;
|
||||
@pagination-disabled-border: #ddd;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: @gray-lighter;
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #468847;
|
||||
@state-success-bg: #dff0d8;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #3a87ad;
|
||||
@state-info-bg: #d9edf7;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #c09853;
|
||||
@state-warning-bg: #fcf8e3;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
||||
|
||||
@state-danger-text: #b94a48;
|
||||
@state-danger-bg: #f2dede;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: #fff;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @gray-light;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: #fff;
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: #f5f5f5;
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: #fff;
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: #ddd;
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: #fff;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #f5f5f5;
|
||||
|
||||
@panel-default-text: @text-color;
|
||||
@panel-default-border: #ddd;
|
||||
@panel-default-heading-bg: #f5f5f5;
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @panel-default-border;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: @panel-default-border;
|
||||
@panel-success-heading-bg: @brand-success;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: @panel-default-border;
|
||||
@panel-info-heading-bg: @brand-info;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: @panel-default-border;
|
||||
@panel-warning-heading-bg: @brand-warning;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: @panel-default-border;
|
||||
@panel-danger-heading-bg: @brand-danger;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @body-bg;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: #ddd;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: #f5f5f5;
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @brand-primary;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @link-color;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: #fff;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: #f5f5f5;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #000;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray-light;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
//** Page header border color
|
||||
@page-header-border-color: @gray-lighter;
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: @gray-lighter;
|
||||
|
||||
|
||||
@@ -0,0 +1,201 @@
|
||||
// Cosmo 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700");
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
|
||||
&-inverse {
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
.btn-lg {
|
||||
padding-top: 19px;
|
||||
}
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.text-primary,
|
||||
.text-primary:hover {
|
||||
color: @brand-primary;
|
||||
}
|
||||
|
||||
.text-success,
|
||||
.text-success:hover {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.text-danger,
|
||||
.text-danger:hover {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.text-warning,
|
||||
.text-warning:hover {
|
||||
color: @brand-warning;
|
||||
}
|
||||
|
||||
.text-info,
|
||||
.text-info:hover {
|
||||
color: @brand-info;
|
||||
}
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
table,
|
||||
.table {
|
||||
|
||||
a:not(.btn) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.success,
|
||||
.warning,
|
||||
.danger,
|
||||
.info {
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
|
||||
.has-warning {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-warning;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus,
|
||||
.input-group-addon {
|
||||
border: 1px solid @brand-warning;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus,
|
||||
.input-group-addon {
|
||||
border: 1px solid @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus,
|
||||
.input-group-addon {
|
||||
border: 1px solid @brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
.nav-pills {
|
||||
|
||||
& > li > a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
|
||||
& > li > a:hover,
|
||||
& > li > a:focus {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
.close {
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
border: none;
|
||||
|
||||
.alert-link {
|
||||
text-decoration: underline;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
.progress {
|
||||
height: 8px;
|
||||
.box-shadow(none);
|
||||
.progress-bar {
|
||||
font-size: 8px;
|
||||
line-height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers =================================================================
|
||||
|
||||
.panel {
|
||||
&-heading,
|
||||
&-footer {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&-default {
|
||||
.close {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
.close {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
color: @text-color;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,846 @@
|
||||
// Cosmo 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: lighten(#000, 20%); // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@gray-light: lighten(#000, 60%); // #999
|
||||
@gray-lighter: lighten(#000, 90%); // #eee
|
||||
|
||||
@brand-primary: #2780E3;
|
||||
@brand-success: #3FB618;
|
||||
@brand-info: #9954BB;
|
||||
@brand-warning: #FF7518;
|
||||
@brand-danger: #FF0039;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #fff;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: @gray-dark;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: @brand-primary;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: darken(@link-color, 15%);
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 15px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-base;
|
||||
@headings-font-weight: 300;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: inherit;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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;
|
||||
@padding-base-horizontal: 18px;
|
||||
|
||||
@padding-large-vertical: 18px;
|
||||
@padding-large-horizontal: 30px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 0;
|
||||
@border-radius-large: 0;
|
||||
@border-radius-small: 0;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: transparent;
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: #f9f9f9;
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: #f5f5f5;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: #ddd;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: #fff;
|
||||
@btn-default-bg: @gray-darker;
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: @btn-default-color;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-default-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: @btn-default-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: @btn-default-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-default-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @text-color;
|
||||
//** `<input>` border color
|
||||
@input-border: #ccc;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: #fff;
|
||||
@navbar-default-bg: @gray-darker;
|
||||
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: #fff;
|
||||
@navbar-default-link-hover-color: #fff;
|
||||
@navbar-default-link-hover-bg: darken(@navbar-default-bg, 10%);
|
||||
@navbar-default-link-active-color: @navbar-default-link-hover-color;
|
||||
@navbar-default-link-active-bg: @navbar-default-link-hover-bg;
|
||||
@navbar-default-link-disabled-color: #ccc;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: #fff;
|
||||
@navbar-default-brand-hover-bg: none;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: @navbar-default-link-hover-bg;
|
||||
@navbar-default-toggle-icon-bar-bg: #fff;
|
||||
@navbar-default-toggle-border-color: transparent;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: #fff;
|
||||
@navbar-inverse-bg: @brand-primary;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: #fff;
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 10%);
|
||||
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
|
||||
@navbar-inverse-link-active-bg: @navbar-inverse-link-hover-bg;
|
||||
@navbar-inverse-link-disabled-color: #fff;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: #fff;
|
||||
@navbar-inverse-brand-hover-bg: none;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: @navbar-inverse-link-hover-bg;
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: transparent;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: #ddd;
|
||||
|
||||
@nav-tabs-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @body-bg;
|
||||
@nav-tabs-active-link-hover-color: @gray;
|
||||
@nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
@nav-tabs-justified-link-border-color: #ddd;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: @link-color;
|
||||
@pagination-bg: #fff;
|
||||
@pagination-border: #ddd;
|
||||
|
||||
@pagination-hover-color: @link-hover-color;
|
||||
@pagination-hover-bg: @gray-lighter;
|
||||
@pagination-hover-border: #ddd;
|
||||
|
||||
@pagination-active-color: @gray-light;
|
||||
@pagination-active-bg: #f5f5f5;
|
||||
@pagination-active-border: #ddd;
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
@pagination-disabled-bg: #fff;
|
||||
@pagination-disabled-border: #ddd;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: @border-radius-base;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: @gray-lighter;
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #fff;
|
||||
@state-success-bg: @brand-success;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #fff;
|
||||
@state-info-bg: @brand-info;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #fff;
|
||||
@state-warning-bg: @brand-warning;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
||||
|
||||
@state-danger-text: #fff;
|
||||
@state-danger-bg: @brand-danger;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: #fff;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: #fff;
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: transparent;
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: #ccc;
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: #fff;
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: #ddd;
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: #fff;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #f5f5f5;
|
||||
|
||||
@panel-default-text: @gray-dark;
|
||||
@panel-default-border: #ddd;
|
||||
@panel-default-heading-bg: #f5f5f5;
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @brand-primary;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: @state-success-border;
|
||||
@panel-success-heading-bg: @state-success-bg;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: @state-info-border;
|
||||
@panel-info-heading-bg: @state-info-bg;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: @state-warning-border;
|
||||
@panel-warning-heading-bg: @state-warning-bg;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: @state-danger-border;
|
||||
@panel-danger-heading-bg: @state-danger-bg;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @body-bg;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: #ddd;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: #f5f5f5;
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @brand-primary;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @link-color;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: #fff;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: #f5f5f5;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #fff;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray-light;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
//** Page header border color
|
||||
@page-header-border-color: @gray-lighter;
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: @gray-lighter;
|
||||
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
// Cyborg 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Roboto:400,700");
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
.text-primary,
|
||||
.text-primary:hover {
|
||||
color: @brand-primary;
|
||||
}
|
||||
|
||||
.text-success,
|
||||
.text-success:hover {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.text-danger,
|
||||
.text-danger:hover {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.text-warning,
|
||||
.text-warning:hover {
|
||||
color: @brand-warning;
|
||||
}
|
||||
|
||||
.text-info,
|
||||
.text-info:hover {
|
||||
color: @brand-info;
|
||||
}
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
table,
|
||||
.table {
|
||||
color: #fff;
|
||||
|
||||
a:not(.btn) {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.table-responsive > .table {
|
||||
background-color: @table-bg;
|
||||
}
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
.has-warning {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-warning;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus,
|
||||
.input-group-addon {
|
||||
border-color: @brand-warning;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus,
|
||||
.input-group-addon {
|
||||
border-color: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus,
|
||||
.input-group-addon {
|
||||
border-color: @brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
legend {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: @btn-default-bg;
|
||||
}
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
.nav-tabs,
|
||||
.nav-pills,
|
||||
.breadcrumb,
|
||||
.pager {
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
.alert {
|
||||
|
||||
.alert-link,
|
||||
a {
|
||||
color: @alert-warning-text;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.close {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
// Containers =================================================================
|
||||
|
||||
a.thumbnail:hover,
|
||||
a.thumbnail:focus,
|
||||
a.thumbnail.active {
|
||||
border-color: @thumbnail-border;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,846 @@
|
||||
// Cyborg 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: #222; // #222
|
||||
@gray-dark: #282828; // #333
|
||||
@gray: #555; // #555
|
||||
@gray-light: #888; // #999
|
||||
@gray-lighter: #ADAFAE; // #eee
|
||||
|
||||
@brand-primary: #2A9FD6;
|
||||
@brand-success: #77B300;
|
||||
@brand-info: #9933CC;
|
||||
@brand-warning: #FF8800;
|
||||
@brand-danger: #CC0000;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #060606;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: @gray-light;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: @brand-primary;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: @link-color;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: 56px;
|
||||
@font-size-h2: 45px;
|
||||
@font-size-h3: 34px;
|
||||
@font-size-h4: 24px;
|
||||
@font-size-h5: 20px;
|
||||
@font-size-h6: 16px;
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-base;
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: #fff;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: darken(@gray-darker, 4%);
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: darken(@table-bg, 6%);
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: @gray-dark;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: @gray-dark;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: #fff;
|
||||
@btn-default-bg: lighten(@gray-dark, 10%);
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: @btn-default-color;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-default-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: @btn-default-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: @btn-default-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-default-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @text-color;
|
||||
//** `<input>` border color
|
||||
@input-border: @gray-dark;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: @gray-dark;
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: @gray-darker;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(255,255,255,0.1);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #444;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: rgba(255,255,255,0.1);
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: #fff;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: @text-color;
|
||||
@navbar-default-bg: @body-bg;
|
||||
@navbar-default-border: @gray-dark;
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: @text-color;
|
||||
@navbar-default-link-hover-color: #fff;
|
||||
@navbar-default-link-hover-bg: transparent;
|
||||
@navbar-default-link-active-color: #fff;
|
||||
@navbar-default-link-active-bg: transparent;
|
||||
@navbar-default-link-disabled-color: @gray-light;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: #fff;
|
||||
@navbar-default-brand-hover-color: #fff;
|
||||
@navbar-default-brand-hover-bg: transparent;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: @gray-dark;
|
||||
@navbar-default-toggle-icon-bar-bg: #ccc;
|
||||
@navbar-default-toggle-border-color: @gray-dark;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: @gray-light;
|
||||
@navbar-inverse-bg: @gray-darker;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: @gray-light;
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: transparent;
|
||||
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
|
||||
@navbar-inverse-link-active-bg: transparent;
|
||||
@navbar-inverse-link-disabled-color: #aaa;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: #fff;
|
||||
@navbar-inverse-brand-hover-color: #fff;
|
||||
@navbar-inverse-brand-hover-bg: transparent;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: #333;
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: #333;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-darker;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: @gray-darker;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: @gray-dark;
|
||||
|
||||
@nav-tabs-link-hover-border-color: transparent;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @brand-primary;
|
||||
@nav-tabs-active-link-hover-color: #fff;
|
||||
@nav-tabs-active-link-hover-border-color: @gray-dark;
|
||||
|
||||
@nav-tabs-justified-link-border-color: #ddd;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: #fff;
|
||||
@pagination-bg: @gray-darker;
|
||||
@pagination-border: @gray-dark;
|
||||
|
||||
@pagination-hover-color: #fff;
|
||||
@pagination-hover-bg: @component-active-bg;
|
||||
@pagination-hover-border: transparent;
|
||||
|
||||
@pagination-active-color: #fff;
|
||||
@pagination-active-bg: @brand-primary;
|
||||
@pagination-active-border: transparent;
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
@pagination-disabled-bg: @gray-darker;
|
||||
@pagination-disabled-border: @gray-dark;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: darken(@gray-darker, 5%);
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #fff;
|
||||
@state-success-bg: @brand-success;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #fff;
|
||||
@state-info-bg: @brand-info;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #fff;
|
||||
@state-warning-bg: @brand-warning;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
||||
|
||||
@state-danger-text: #fff;
|
||||
@state-danger-bg: @brand-danger;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: lighten(@body-bg, 10%);
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #999;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: @popover-bg;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: lighten(@body-bg, 10%);
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: @gray-dark;
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: @gray-darker;
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: @gray-darker;
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: @gray-dark;
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: lighten(@list-group-bg, 15%);
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: @text-color;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #fff;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: @gray-darker;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: @gray-dark;
|
||||
@panel-footer-bg: @panel-default-heading-bg;
|
||||
|
||||
@panel-default-text: @text-color;
|
||||
@panel-default-border: @panel-inner-border;
|
||||
@panel-default-heading-bg: lighten(@gray-darker, 10%);
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @brand-primary;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: @state-success-border;
|
||||
@panel-success-heading-bg: @state-success-bg;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: @state-info-border;
|
||||
@panel-info-heading-bg: @state-info-bg;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: @state-warning-border;
|
||||
@panel-warning-heading-bg: @state-warning-bg;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: @state-danger-border;
|
||||
@panel-danger-heading-bg: @state-danger-bg;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @gray-dark;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: @gray-dark;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: darken(@gray-darker, 5%);
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @brand-primary;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @brand-primary;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: #fff;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: @gray-darker;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #fff;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @text-color;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #000;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-dark;
|
||||
//** Page header border color
|
||||
@page-header-border-color: @gray-dark;
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: @gray-dark;
|
||||
|
||||
|
||||
@@ -0,0 +1,265 @@
|
||||
// Flatly 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
border-width: 0;
|
||||
|
||||
&-default {
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-default-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-inverse {
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-inverse-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-brand {
|
||||
padding: 18.5px 15px 20.5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
.btn:active {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.btn-group.open .dropdown-toggle {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
.text-primary,
|
||||
.text-primary:hover {
|
||||
color: @brand-primary;
|
||||
}
|
||||
|
||||
.text-success,
|
||||
.text-success:hover {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.text-danger,
|
||||
.text-danger:hover {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.text-warning,
|
||||
.text-warning:hover {
|
||||
color: @brand-warning;
|
||||
}
|
||||
|
||||
.text-info,
|
||||
.text-info:hover {
|
||||
color: @brand-info;
|
||||
}
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
table,
|
||||
.table {
|
||||
|
||||
a:not(.btn) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.success,
|
||||
.warning,
|
||||
.danger,
|
||||
.info {
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
> thead > tr > th,
|
||||
> tbody > tr > th,
|
||||
> tfoot > tr > th,
|
||||
> thead > tr > td,
|
||||
> tbody > tr > td,
|
||||
> tfoot > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&-bordered > thead > tr > th,
|
||||
&-bordered > tbody > tr > th,
|
||||
&-bordered > tfoot > tr > th,
|
||||
&-bordered > thead > tr > td,
|
||||
&-bordered > tbody > tr > td,
|
||||
&-bordered > tfoot > tr > td {
|
||||
border: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
.form-control,
|
||||
input, {
|
||||
border-width: 2px;
|
||||
.box-shadow(none);
|
||||
|
||||
&:focus {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline,
|
||||
.form-control-feedback {
|
||||
color: @brand-warning;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border: 2px solid @brand-warning;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border-color: @brand-warning;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline,
|
||||
.form-control-feedback {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border: 2px solid @brand-danger;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border-color: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline,
|
||||
.form-control-feedback {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border: 2px solid @brand-success;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border-color: @brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
.nav {
|
||||
.open > a,
|
||||
.open > a:hover,
|
||||
.open > a:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
a,
|
||||
a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
&>a,
|
||||
&>a:hover,
|
||||
&>a:focus,
|
||||
&>span {
|
||||
background-color: @pagination-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
.close {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
|
||||
.alert-link {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
.progress {
|
||||
height: 10px;
|
||||
.box-shadow(none);
|
||||
.progress-bar {
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Containers =================================================================
|
||||
|
||||
.well {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
.panel {
|
||||
&-default {
|
||||
.close {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
.close {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
color: @text-color;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,846 @@
|
||||
// Flatly 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: #7b8a8b; // #333
|
||||
@gray: #95a5a6; // #555
|
||||
@gray-light: #b4bcc2; // #999
|
||||
@gray-lighter: #ecf0f1; // #eee
|
||||
|
||||
@brand-primary: #2C3E50;
|
||||
@brand-success: #18BC9C;
|
||||
@brand-info: #3498DB;
|
||||
@brand-warning: #F39C12;
|
||||
@brand-danger: #E74C3C;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #fff;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: @brand-primary;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: @brand-success;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: @link-color;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 15px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-base;
|
||||
@headings-font-weight: 400;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: inherit;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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;
|
||||
@padding-base-horizontal: 15px;
|
||||
|
||||
@padding-large-vertical: 18px;
|
||||
@padding-large-horizontal: 27px;
|
||||
|
||||
@padding-small-vertical: 6px;
|
||||
@padding-small-horizontal: 9px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: transparent;
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: #f9f9f9;
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: @gray-lighter;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: @gray-lighter;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: #fff;
|
||||
@btn-default-bg: @gray;
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: @btn-default-color;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-default-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: @btn-default-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: @btn-default-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-default-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @text-color;
|
||||
//** `<input>` border color
|
||||
@input-border: #dce4ec;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: @brand-primary;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: #acb6c0;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: transparent;
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 60px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: #777;
|
||||
@navbar-default-bg: @brand-primary;
|
||||
@navbar-default-border: transparent;
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: #fff;
|
||||
@navbar-default-link-hover-color: @brand-success;
|
||||
@navbar-default-link-hover-bg: transparent;
|
||||
@navbar-default-link-active-color: #fff;
|
||||
@navbar-default-link-active-bg: darken(@navbar-default-bg, 10%);
|
||||
@navbar-default-link-disabled-color: #ccc;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: @navbar-default-link-hover-color;
|
||||
@navbar-default-brand-hover-bg: transparent;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 10%);
|
||||
@navbar-default-toggle-icon-bar-bg: #fff;
|
||||
@navbar-default-toggle-border-color: darken(@navbar-default-bg, 10%);
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: #fff;
|
||||
@navbar-inverse-bg: @brand-success;
|
||||
@navbar-inverse-border: transparent;
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: #fff;
|
||||
@navbar-inverse-link-hover-color: @brand-primary;
|
||||
@navbar-inverse-link-hover-bg: transparent;
|
||||
@navbar-inverse-link-active-color: #fff;
|
||||
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 5%);
|
||||
@navbar-inverse-link-disabled-color: #ccc;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: @navbar-inverse-link-hover-color;
|
||||
@navbar-inverse-brand-hover-bg: transparent;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%);
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @body-bg;
|
||||
@nav-tabs-active-link-hover-color: @brand-primary;
|
||||
@nav-tabs-active-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-justified-link-border-color: @gray-lighter;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: #fff;
|
||||
@pagination-bg: @brand-success;
|
||||
@pagination-border: transparent;
|
||||
|
||||
@pagination-hover-color: #fff;
|
||||
@pagination-hover-bg: darken(@brand-success, 15%);
|
||||
@pagination-hover-border: transparent;
|
||||
|
||||
@pagination-active-color: #fff;
|
||||
@pagination-active-bg: darken(@brand-success, 15%);
|
||||
@pagination-active-border: transparent;
|
||||
|
||||
@pagination-disabled-color: @gray-lighter;
|
||||
@pagination-disabled-bg: lighten(@brand-success, 15%);;
|
||||
@pagination-disabled-border: transparent;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: #fff;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: @gray-lighter;
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #fff;
|
||||
@state-success-bg: @brand-success;
|
||||
@state-success-border: @brand-success;
|
||||
|
||||
@state-info-text: #fff;
|
||||
@state-info-bg: @brand-info;
|
||||
@state-info-border: @brand-info;
|
||||
|
||||
@state-warning-text: #fff;
|
||||
@state-warning-bg: @brand-warning;
|
||||
@state-warning-border: @brand-warning;
|
||||
|
||||
@state-danger-text: #fff;
|
||||
@state-danger-bg: @brand-danger;
|
||||
@state-danger-border: @brand-danger;
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: #fff;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: #fff;
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: @gray-lighter;
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: #fff;
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: @gray-lighter;
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: @gray-lighter;
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: #fff;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: @gray-lighter;
|
||||
@panel-footer-bg: @gray-lighter;
|
||||
|
||||
@panel-default-text: @text-color;
|
||||
@panel-default-border: @gray-lighter;
|
||||
@panel-default-heading-bg: @gray-lighter;
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @brand-primary;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: @state-success-border;
|
||||
@panel-success-heading-bg: @state-success-bg;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: @state-info-border;
|
||||
@panel-info-heading-bg: @state-info-bg;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: @state-warning-border;
|
||||
@panel-warning-heading-bg: @state-warning-bg;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: @state-danger-border;
|
||||
@panel-danger-heading-bg: @state-danger-bg;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @body-bg;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: @gray-lighter;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: @gray-lighter;
|
||||
@well-border: transparent;
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @brand-primary;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @brand-primary;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: #fff;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: @gray-lighter;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @gray;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #000;
|
||||
@close-text-shadow: none;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: @gray-lighter;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray-light;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
//** Page header border color
|
||||
@page-header-border-color: transparent;
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: @gray-lighter;
|
||||
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
// Journal 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=News+Cycle:400,700");
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
font-size: 18px;
|
||||
font-family: @font-family-sans-serif;
|
||||
font-weight: @headings-font-weight;
|
||||
|
||||
&-default {
|
||||
|
||||
.badge {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&-inverse {
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-inverse-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 18px;
|
||||
font-weight: @headings-font-weight;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
.has-warning {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-primary;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: @brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: @brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
.badge {
|
||||
padding-bottom: 4px;
|
||||
vertical-align: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
// Containers =================================================================
|
||||
|
||||
.jumbotron {
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: @font-family-sans-serif;
|
||||
font-weight: @headings-font-weight;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
||||
&-primary,
|
||||
&-success,
|
||||
&-warning,
|
||||
&-danger,
|
||||
&-info {
|
||||
.panel-title {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,846 @@
|
||||
// Journal 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: lighten(#000, 20%); // #333
|
||||
@gray: #777; // #555
|
||||
@gray-light: lighten(#000, 60%); // #999
|
||||
@gray-lighter: lighten(#000, 93.5%); // #eee
|
||||
|
||||
@brand-primary: #EB6864;
|
||||
@brand-success: #22B24C;
|
||||
@brand-info: #369;
|
||||
@brand-warning: #F5E625;
|
||||
@brand-danger: #F57A00;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #fff;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: @gray;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: @brand-primary;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: darken(@link-color, 15%);
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "News Cycle", "Arial Narrow Bold", sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-serif;
|
||||
|
||||
@font-size-base: 15px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-sans-serif;
|
||||
@headings-font-weight: 700;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: #000;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: transparent;
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: #f9f9f9;
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: #f5f5f5;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: #ddd;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: #fff;
|
||||
@btn-default-bg: @gray-light;
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: @btn-default-color;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-default-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: @btn-default-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: @btn-default-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-default-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @text-color;
|
||||
//** `<input>` border color
|
||||
@input-border: #ccc;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 60px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: #000;
|
||||
@navbar-default-bg: #fff;
|
||||
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: #000;
|
||||
@navbar-default-link-hover-color: #000;
|
||||
@navbar-default-link-hover-bg: darken(@navbar-default-bg, 6.5%);
|
||||
@navbar-default-link-active-color: #000;
|
||||
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
|
||||
@navbar-default-link-disabled-color: #ccc;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: @navbar-default-link-hover-color;
|
||||
@navbar-default-brand-hover-bg: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: #ddd;
|
||||
@navbar-default-toggle-icon-bar-bg: #ccc;
|
||||
@navbar-default-toggle-border-color: #ddd;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: #fff;
|
||||
@navbar-inverse-bg: @brand-primary;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: #fff;
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 6.5%);
|
||||
@navbar-inverse-link-active-color: #fff;
|
||||
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 6.5%);
|
||||
@navbar-inverse-link-disabled-color: #444;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: #fff;
|
||||
@navbar-inverse-brand-hover-bg: darken(@navbar-inverse-bg, 6.5%);
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%);
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: #ddd;
|
||||
|
||||
@nav-tabs-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @body-bg;
|
||||
@nav-tabs-active-link-hover-color: @gray;
|
||||
@nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
@nav-tabs-justified-link-border-color: #ddd;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: @link-color;
|
||||
@pagination-bg: #fff;
|
||||
@pagination-border: #ddd;
|
||||
|
||||
@pagination-hover-color: @link-hover-color;
|
||||
@pagination-hover-bg: @gray-lighter;
|
||||
@pagination-hover-border: #ddd;
|
||||
|
||||
@pagination-active-color: @gray-light;
|
||||
@pagination-active-bg: #f5f5f5;
|
||||
@pagination-active-border: #ddd;
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
@pagination-disabled-bg: #fff;
|
||||
@pagination-disabled-border: #ddd;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: @gray-lighter;
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #468847;
|
||||
@state-success-bg: #dff0d8;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #3a87ad;
|
||||
@state-info-bg: #d9edf7;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #c09853;
|
||||
@state-warning-bg: #fcf8e3;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
||||
|
||||
@state-danger-text: #b94a48;
|
||||
@state-danger-bg: #f2dede;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: #fff;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: #fff;
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: #f5f5f5;
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: #fff;
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: #ddd;
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: #fff;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #f5f5f5;
|
||||
|
||||
@panel-default-text: @text-color;
|
||||
@panel-default-border: #ddd;
|
||||
@panel-default-heading-bg: #f5f5f5;
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @brand-primary;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: @brand-success;
|
||||
@panel-success-heading-bg: @brand-success;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: @brand-info;
|
||||
@panel-info-heading-bg: @brand-info;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: @brand-warning;
|
||||
@panel-warning-heading-bg: @brand-warning;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: @brand-danger;
|
||||
@panel-danger-heading-bg: @brand-danger;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @body-bg;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: #ddd;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: #f5f5f5;
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @link-color;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @link-color;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: #fff;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: #f5f5f5;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #000;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray-light;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
//** Page header border color
|
||||
@page-header-border-color: @gray-lighter;
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: @gray-lighter;
|
||||
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
// Readable 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Raleway:400,700");
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
font-family: @headings-font-family;
|
||||
|
||||
&-nav,
|
||||
&-form {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&-nav > li > a {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
margin: 12px 6px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
&-nav > .active > a,
|
||||
&-nav > .active > a:hover {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
&-default .navbar-nav > .active > a:hover {
|
||||
color: @navbar-default-link-hover-color;
|
||||
}
|
||||
|
||||
&-inverse .navbar-nav > .active > a:hover {
|
||||
color: @navbar-inverse-link-hover-color;
|
||||
}
|
||||
|
||||
&-brand {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @grid-float-breakpoint) {
|
||||
.navbar {
|
||||
.navbar-nav > li > a {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
.btn {
|
||||
font-family: @headings-font-family;
|
||||
}
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
legend {
|
||||
font-family: @headings-font-family;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
font-family: @font-family-sans-serif;
|
||||
}
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
.nav {
|
||||
.open > a,
|
||||
.open > a:hover,
|
||||
.open > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
||||
font-family: @headings-font-family;
|
||||
|
||||
&-lg > li > a,
|
||||
&-lg > li > span {
|
||||
padding: 14px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
|
||||
font-family: @headings-font-family;
|
||||
|
||||
a {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.disabled a {
|
||||
border-color: @pager-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
.close {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
.alert-link {
|
||||
color: @alert-success-text;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: @headings-font-family;
|
||||
font-weight: normal;
|
||||
|
||||
&-default {
|
||||
border: 1px solid #ddd;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 1px 7px 5px;
|
||||
vertical-align: 2px;
|
||||
font-family: @headings-font-family;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
// Containers =================================================================
|
||||
|
||||
.panel {
|
||||
.box-shadow(none);
|
||||
|
||||
&-default {
|
||||
.close {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-primary,
|
||||
&-success,
|
||||
&-warning,
|
||||
&-danger,
|
||||
&-info {
|
||||
.panel-heading {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
border: 1px solid #ddd;
|
||||
border-top-width: 0;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
.close {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,846 @@
|
||||
// Readable 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: lighten(#000, 20%); // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@gray-light: lighten(#000, 70%); // #999
|
||||
@gray-lighter: lighten(#000, 93.5%); // #eee
|
||||
|
||||
@brand-primary: #4582EC;
|
||||
@brand-success: #3FAD46;
|
||||
@brand-info: #5bc0de;
|
||||
@brand-warning: #f0ad4e;
|
||||
@brand-danger: #d9534f;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #fff;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: @gray-dark;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: @brand-primary;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: darken(@link-color, 20%);
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-serif;
|
||||
|
||||
@font-size-base: 16px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-sans-serif;
|
||||
@headings-font-weight: bold;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: inherit;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: transparent;
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: #f9f9f9;
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: #f5f5f5;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: #ddd;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: @text-color;
|
||||
@btn-default-bg: #fff;
|
||||
@btn-default-border: #ddd;
|
||||
|
||||
@btn-primary-color: #fff;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: #fff;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: #fff;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: #fff;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: #fff;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @text-color;
|
||||
//** `<input>` border color
|
||||
@input-border: #ddd;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 65px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: @text-color;
|
||||
@navbar-default-bg: @body-bg;
|
||||
@navbar-default-border: #ddd;
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: @link-color;
|
||||
@navbar-default-link-hover-color: @link-color;
|
||||
@navbar-default-link-hover-bg: transparent;
|
||||
@navbar-default-link-active-color: @navbar-default-link-color;
|
||||
@navbar-default-link-active-bg: transparent;
|
||||
@navbar-default-link-disabled-color: #333;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: @navbar-default-link-hover-color;
|
||||
@navbar-default-brand-hover-bg: transparent;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: #ddd;
|
||||
@navbar-default-toggle-icon-bar-bg: #ccc;
|
||||
@navbar-default-toggle-border-color: #ddd;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: @text-color;
|
||||
@navbar-inverse-bg: @body-bg;
|
||||
@navbar-inverse-border: #ddd;
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: @text-color;
|
||||
@navbar-inverse-link-hover-color: @text-color;
|
||||
@navbar-inverse-link-hover-bg: transparent;
|
||||
@navbar-inverse-link-active-color: @text-color;
|
||||
@navbar-inverse-link-active-bg: transparent;
|
||||
@navbar-inverse-link-disabled-color: #ccc;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: @navbar-inverse-link-hover-color;
|
||||
@navbar-inverse-brand-hover-bg: transparent;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: #ddd;
|
||||
@navbar-inverse-toggle-icon-bar-bg: #ccc;
|
||||
@navbar-inverse-toggle-border-color: #ddd;
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: #ddd;
|
||||
|
||||
@nav-tabs-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @body-bg;
|
||||
@nav-tabs-active-link-hover-color: @gray;
|
||||
@nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
@nav-tabs-justified-link-border-color: #ddd;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: @text-color;
|
||||
@pagination-bg: #fff;
|
||||
@pagination-border: #ddd;
|
||||
|
||||
@pagination-hover-color: #fff;
|
||||
@pagination-hover-bg: @brand-primary;
|
||||
@pagination-hover-border: @brand-primary;
|
||||
|
||||
@pagination-active-color: #fff;
|
||||
@pagination-active-bg: @brand-primary;
|
||||
@pagination-active-border: @brand-primary;
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
@pagination-disabled-bg: #fff;
|
||||
@pagination-disabled-border: #ddd;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: darken(@body-bg, 3%);
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: @brand-success;
|
||||
@state-success-bg: #dff0d8;
|
||||
@state-success-border: @brand-success;
|
||||
|
||||
@state-info-text: @brand-info;
|
||||
@state-info-bg: #d9edf7;
|
||||
@state-info-border: @brand-info;
|
||||
|
||||
@state-warning-text: @brand-warning;
|
||||
@state-warning-bg: #fcf8e3;
|
||||
@state-warning-border: @brand-warning;
|
||||
|
||||
@state-danger-text: @brand-danger;
|
||||
@state-danger-bg: #f2dede;
|
||||
@state-danger-border: @brand-danger;
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: #fff;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: #fff;
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-border;
|
||||
@alert-success-text: #fff;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-border;
|
||||
@alert-info-text: #fff;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-border;
|
||||
@alert-warning-text: #fff;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-border;
|
||||
@alert-danger-text: #fff;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: #f5f5f5;
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: #fff;
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: #ddd;
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: #fff;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #fff;
|
||||
|
||||
@panel-default-text: @gray-dark;
|
||||
@panel-default-border: #ddd;
|
||||
@panel-default-heading-bg: #f5f5f5;
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: transparent;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: transparent;
|
||||
@panel-success-heading-bg: @state-success-border;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: transparent;
|
||||
@panel-info-heading-bg: @state-info-border;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: transparent;
|
||||
@panel-warning-heading-bg: @state-warning-border;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: transparent;
|
||||
@panel-danger-heading-bg: @state-danger-border;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @body-bg;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: #ddd;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: darken(@body-bg, 3%);
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @brand-primary;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @link-color;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: #fff;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: #f5f5f5;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #fff;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @text-color;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @brand-primary;
|
||||
//** Page header border color
|
||||
@page-header-border-color: #ddd;
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: @gray-lighter;
|
||||
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
// Simplex 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Open+Sans:400,700");
|
||||
|
||||
.btn-shadow(@color) {
|
||||
#gradient > .vertical-three-colors(lighten(@color, 3%), @color, 6%, darken(@color, 3%));
|
||||
filter: none;
|
||||
border: 1px solid darken(@color, 10%);
|
||||
}
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
|
||||
&-inverse {
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
.btn {
|
||||
font-family: @headings-font-family;
|
||||
}
|
||||
|
||||
.btn-default,
|
||||
.btn-default:hover {
|
||||
.btn-shadow(@btn-default-bg);
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-primary:hover {
|
||||
.btn-shadow(@btn-primary-bg);
|
||||
}
|
||||
|
||||
.btn-success,
|
||||
.btn-success:hover {
|
||||
.btn-shadow(@btn-success-bg);
|
||||
}
|
||||
|
||||
.btn-info,
|
||||
.btn-info:hover {
|
||||
.btn-shadow(@btn-info-bg);
|
||||
}
|
||||
|
||||
.btn-warning,
|
||||
.btn-warning:hover {
|
||||
.btn-shadow(@btn-warning-bg);
|
||||
}
|
||||
|
||||
.btn-danger,
|
||||
.btn-danger:hover {
|
||||
.btn-shadow(@btn-danger-bg);
|
||||
}
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
body {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
th {
|
||||
color: @headings-color;
|
||||
}
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
legend {
|
||||
color: @headings-color;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
.help-block,
|
||||
.control-label {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.help-block,
|
||||
.control-label {
|
||||
color: @brand-primary;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: @brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.help-block,
|
||||
.control-label {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: @brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
.pager {
|
||||
a {
|
||||
color: @headings-color;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.active > a, {
|
||||
border-color: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.disabled > a {
|
||||
border-color: @pager-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
// Containers =================================================================
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -0,0 +1,846 @@
|
||||
// Simplex 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: #444;
|
||||
@gray: #777;
|
||||
@gray-light: #808080;
|
||||
@gray-lighter: #ddd;
|
||||
|
||||
@brand-primary: #D9230F;
|
||||
@brand-success: #469408;
|
||||
@brand-info: #029ACF;
|
||||
@brand-warning: #9B479F;
|
||||
@brand-danger: #D9831F;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #FCFCFC;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: @gray;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: @brand-primary;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: darken(@link-color, 15%);
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 13px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-sans-serif;
|
||||
@headings-font-weight: 300;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: @gray-dark;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: transparent;
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: #f9f9f9;
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: #f5f5f5;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: #ddd;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: #fff;
|
||||
@btn-default-bg: #474949;
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: @btn-default-color;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-default-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: @btn-default-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: @btn-default-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-default-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @text-color;
|
||||
//** `<input>` border color
|
||||
@input-border: #ddd;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-lighter;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 40px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: @gray;
|
||||
@navbar-default-bg: #fff;
|
||||
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: @gray;
|
||||
@navbar-default-link-hover-color: @brand-primary;
|
||||
@navbar-default-link-hover-bg: transparent;
|
||||
@navbar-default-link-active-color: @navbar-default-link-hover-color;
|
||||
@navbar-default-link-active-bg: transparent;
|
||||
@navbar-default-link-disabled-color: #444;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: @navbar-default-link-hover-color;
|
||||
@navbar-default-brand-hover-bg: transparent;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: #ddd;
|
||||
@navbar-default-toggle-icon-bar-bg: #ccc;
|
||||
@navbar-default-toggle-border-color: #ddd;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: lighten(@brand-primary, 40%);
|
||||
@navbar-inverse-bg: @brand-primary;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: lighten(@brand-primary, 40%);
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: transparent;
|
||||
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
|
||||
@navbar-inverse-link-active-bg: transparent;
|
||||
@navbar-inverse-link-disabled-color: #ccc;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: #fff;
|
||||
@navbar-inverse-brand-hover-bg: transparent;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%);
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: #ddd;
|
||||
|
||||
@nav-tabs-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @body-bg;
|
||||
@nav-tabs-active-link-hover-color: @gray;
|
||||
@nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
@nav-tabs-justified-link-border-color: #ddd;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: @headings-color;
|
||||
@pagination-bg: #fff;
|
||||
@pagination-border: #ddd;
|
||||
|
||||
@pagination-hover-color: #fff;
|
||||
@pagination-hover-bg: @brand-primary;
|
||||
@pagination-hover-border: @brand-primary;
|
||||
|
||||
@pagination-active-color: #fff;
|
||||
@pagination-active-bg: @brand-primary;
|
||||
@pagination-active-border: @brand-primary;
|
||||
|
||||
@pagination-disabled-color: @gray-lighter;
|
||||
@pagination-disabled-bg: #fff;
|
||||
@pagination-disabled-border: #ddd;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @brand-primary;
|
||||
|
||||
@pager-active-bg: @brand-primary;
|
||||
@pager-active-color: #fff;
|
||||
|
||||
@pager-disabled-color: @gray-lighter;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: darken(@body-bg, 3%);
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #468847;
|
||||
@state-success-bg: #dff0d8;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #3a87ad;
|
||||
@state-info-bg: #d9edf7;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #c09853;
|
||||
@state-warning-bg: #fcf8e3;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
||||
|
||||
@state-danger-text: #b94a48;
|
||||
@state-danger-bg: #f2dede;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: #fff;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: #fff;
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: #f5f5f5;
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: #fff;
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: #ddd;
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: #fff;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: @panel-default-heading-bg;
|
||||
|
||||
@panel-default-text: @gray-dark;
|
||||
@panel-default-border: #ddd;
|
||||
@panel-default-heading-bg: @body-bg;
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @brand-primary;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: #fff;
|
||||
@panel-success-border: @brand-success;
|
||||
@panel-success-heading-bg: @brand-success;
|
||||
|
||||
@panel-info-text: #fff;
|
||||
@panel-info-border: @brand-info;
|
||||
@panel-info-heading-bg: @brand-info;
|
||||
|
||||
@panel-warning-text: #fff;
|
||||
@panel-warning-border: @brand-warning;
|
||||
@panel-warning-heading-bg: @brand-warning;
|
||||
|
||||
@panel-danger-text: #fff;
|
||||
@panel-danger-border: @brand-danger;
|
||||
@panel-danger-heading-bg: @brand-danger;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @body-bg;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: #ddd;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: darken(@body-bg, 3%);
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @link-color;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @link-color;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: #fff;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: transparent;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #000;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray-light;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
//** Page header border color
|
||||
@page-header-border-color: @gray-lighter;
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: @gray-lighter;
|
||||
|
||||
|
||||
@@ -0,0 +1,375 @@
|
||||
// Slate 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
.btn-shadow(@color) {
|
||||
#gradient > .vertical-three-colors(lighten(@color, 6%), @color, 60%, darken(@color, 4%));
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.btn-shadow-inverse(@color) {
|
||||
#gradient > .vertical-three-colors(darken(@color, 24%), darken(@color, 18%), 40%, darken(@color, 14%));
|
||||
filter: none;
|
||||
}
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
|
||||
.btn-shadow(@navbar-default-bg);
|
||||
border: 1px solid rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&-inverse {
|
||||
.btn-shadow(@navbar-inverse-bg);
|
||||
|
||||
.badge {
|
||||
background-color: @navbar-inverse-link-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-nav > li > a {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@navbar-default-bg);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav .open > a {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&-nav > li.active > a {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
&-form {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
.btn,
|
||||
.btn:hover {
|
||||
border-color: rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
.btn-shadow(@btn-default-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@btn-default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
.btn-shadow(@btn-primary-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@btn-primary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
.btn-shadow(@btn-success-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@btn-success-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
.btn-shadow(@btn-info-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@btn-info-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
.btn-shadow(@btn-warning-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@btn-warning-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
.btn-shadow(@btn-danger-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@btn-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link,
|
||||
.btn-link:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.text-primary,
|
||||
.text-primary:hover {
|
||||
color: @brand-primary;
|
||||
}
|
||||
|
||||
.text-success,
|
||||
.text-success:hover {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.text-danger,
|
||||
.text-danger:hover {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.text-warning,
|
||||
.text-warning:hover {
|
||||
color: @brand-warning;
|
||||
}
|
||||
|
||||
.text-info,
|
||||
.text-info:hover {
|
||||
color: @brand-info;
|
||||
}
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
.table {
|
||||
|
||||
.success,
|
||||
.warning,
|
||||
.danger,
|
||||
.info {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&-bordered tbody {
|
||||
|
||||
tr.success,
|
||||
tr.warning,
|
||||
tr.danger {
|
||||
|
||||
td,
|
||||
&:hover td {
|
||||
border-color: @table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-responsive > .table {
|
||||
background-color: @table-bg;
|
||||
}
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
input,
|
||||
textarea {
|
||||
color: @input-color;
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-warning;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: @brand-warning;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: @body-bg;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-danger;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: @brand-danger;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: @body-bg;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.help-block,
|
||||
.control-label,
|
||||
.form-control-feedback {
|
||||
color: @brand-success;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control:focus {
|
||||
border-color: @brand-success;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: @body-bg;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
legend {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border-color: rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
.btn-shadow(@btn-default-bg);
|
||||
color: @btn-default-color;
|
||||
}
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
.nav {
|
||||
|
||||
.open > a,
|
||||
.open > a:hover,
|
||||
.open > a:focus {
|
||||
border-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
|
||||
& > li > a {
|
||||
.btn-shadow(@btn-default-bg);
|
||||
border: 1px solid rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@btn-default-bg);
|
||||
border: 1px solid rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
& > li.active > a,
|
||||
& > li.active > a:hover {
|
||||
background-color: none;
|
||||
.btn-shadow-inverse(@btn-default-bg);
|
||||
border: 1px solid rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
& > li.disabled > a,
|
||||
& > li.disabled > a:hover {
|
||||
.btn-shadow(@btn-default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
||||
& > li > a,
|
||||
& > li > span {
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
.btn-shadow(@btn-default-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@btn-default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
& > li.active > a,
|
||||
& > li.active > span {
|
||||
.btn-shadow-inverse(@btn-default-bg);
|
||||
}
|
||||
|
||||
& > li.disabled > a,
|
||||
& > li.disabled > a:hover,
|
||||
& > li.disabled > span,
|
||||
& > li.disabled > span:hover {
|
||||
background-color: transparent;
|
||||
.btn-shadow(@btn-default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
|
||||
& > li > a {
|
||||
.btn-shadow(@btn-default-bg);
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow-inverse(@btn-default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
& > li.disabled > a,
|
||||
& > li.disabled > a:hover {
|
||||
background-color: transparent;
|
||||
.btn-shadow(@btn-default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
border: 1px solid rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
.btn-shadow(@btn-default-bg);
|
||||
}
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
.alert {
|
||||
|
||||
.alert-link,
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: @close-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
// Containers =================================================================
|
||||
|
||||
a.thumbnail:hover,
|
||||
a.thumbnail:focus,
|
||||
a.thumbnail.active {
|
||||
border-color: @thumbnail-border;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
border: 1px solid rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.panel-primary,
|
||||
.panel-success,
|
||||
.panel-danger,
|
||||
.panel-warning,
|
||||
.panel-info {
|
||||
|
||||
.panel-heading {
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@@ -0,0 +1,846 @@
|
||||
// Slate 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: #272B30; // #222
|
||||
@gray-dark: #3A3F44; // #333
|
||||
@gray: #52575C; // #555
|
||||
@gray-light: #7A8288; // #999
|
||||
@gray-lighter: #999; // #eee
|
||||
|
||||
@brand-primary: @gray-light;
|
||||
@brand-success: #62c462;
|
||||
@brand-info: #5bc0de;
|
||||
@brand-warning: #f89406;
|
||||
@brand-danger: #ee5f5b;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: @gray-darker;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: #C8C8C8;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: #fff;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-base;
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: inherit;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: transparent;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: lighten(@body-bg, 3%);
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: lighten(@table-bg, 3%);
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: lighten(@table-bg, 12%);
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: darken(@gray-darker, 5%);
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: #fff;
|
||||
@btn-default-bg: @navbar-default-bg;
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: @btn-default-color;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-default-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: @btn-default-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: @btn-default-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-default-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @gray-darker;
|
||||
//** `<input>` border color
|
||||
@input-border: #ccc;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: darken(@gray-darker, 5%);
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: @gray-dark;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: @gray-darker;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: @gray-darker;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @text-color;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @gray-darker;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: @text-color;
|
||||
@navbar-default-bg: @gray-dark;
|
||||
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: @text-color;
|
||||
@navbar-default-link-hover-color: #fff;
|
||||
@navbar-default-link-hover-bg: darken(@navbar-default-bg, 8%);
|
||||
@navbar-default-link-active-color: #fff;
|
||||
@navbar-default-link-active-bg: darken(@navbar-default-bg, 8%);
|
||||
@navbar-default-link-disabled-color: #ccc;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: #fff;
|
||||
@navbar-default-brand-hover-bg: none;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 8%);
|
||||
@navbar-default-toggle-icon-bar-bg: @text-color;
|
||||
@navbar-default-toggle-border-color: darken(@navbar-default-bg, 8%);
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: #ccc;
|
||||
@navbar-inverse-bg: @brand-primary;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: #ccc;
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 12%);
|
||||
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
|
||||
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 12%);
|
||||
@navbar-inverse-link-disabled-color: #ccc;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: #fff;
|
||||
@navbar-inverse-brand-hover-bg: none;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 12%);
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 12%);
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: lighten(@body-bg, 10%);
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: darken(@gray-darker, 5%);
|
||||
|
||||
@nav-tabs-link-hover-border-color: darken(@gray-darker, 5%);
|
||||
|
||||
@nav-tabs-active-link-hover-bg: lighten(@body-bg, 10%);
|
||||
@nav-tabs-active-link-hover-color: #fff;
|
||||
@nav-tabs-active-link-hover-border-color: darken(@gray-darker, 5%);
|
||||
|
||||
@nav-tabs-justified-link-border-color: @nav-tabs-border-color;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: @link-color;
|
||||
@pagination-bg: @btn-default-bg;
|
||||
@pagination-border: rgba(0, 0, 0, 0.6);
|
||||
|
||||
@pagination-hover-color: @link-hover-color;
|
||||
@pagination-hover-bg: transparent;
|
||||
@pagination-hover-border: rgba(0, 0, 0, 0.6);
|
||||
|
||||
@pagination-active-color: #fff;
|
||||
@pagination-active-bg: darken(@pagination-bg, 10%);
|
||||
@pagination-active-border: rgba(0, 0, 0, 0.6);
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
@pagination-disabled-bg: #fff;
|
||||
@pagination-disabled-border: rgba(0, 0, 0, 0.6);
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: darken(@body-bg, 5%);
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #fff;
|
||||
@state-success-bg: @brand-success;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #fff;
|
||||
@state-info-bg: @brand-info;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #fff;
|
||||
@state-warning-bg: @brand-warning;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
||||
|
||||
@state-danger-text: #fff;
|
||||
@state-danger-bg: @brand-danger;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: lighten(@body-bg, 3%);
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #999;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: @popover-bg;
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: @popover-bg;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: lighten(@body-bg, 3%);
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: darken(@gray-darker, 5%);
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: darken(@body-bg, 5%);
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: lighten(@body-bg, 5%);
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: rgba(0, 0, 0, 0.6);
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: lighten(@body-bg, 10%);
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: lighten(@body-bg, 10%);
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-border;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: @text-color;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #fff;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: lighten(@body-bg, 3%);
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: rgba(0, 0, 0, 0.6);
|
||||
@panel-footer-bg: @panel-default-heading-bg;
|
||||
|
||||
@panel-default-text: @text-color;
|
||||
@panel-default-border: rgba(0, 0, 0, 0.6);
|
||||
@panel-default-heading-bg: lighten(@body-bg, 10%);
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @panel-default-border;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: @panel-default-border;
|
||||
@panel-success-heading-bg: @state-success-bg;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: @panel-default-border;
|
||||
@panel-info-heading-bg: @state-info-bg;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: @panel-default-border;
|
||||
@panel-warning-heading-bg: @state-warning-bg;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: @panel-default-border;
|
||||
@panel-danger-heading-bg: @state-danger-bg;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @well-bg;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: @well-border;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: darken(@body-bg, 5%);
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @gray-light;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @link-color;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: @gray-light;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: transparent;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #000;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray-light;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-light;
|
||||
//** Page header border color
|
||||
@page-header-border-color: darken(@gray-darker, 5%);
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: darken(@gray-darker, 5%);
|
||||
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
// Spacelab 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
|
||||
|
||||
.btn-shadow(@color) {
|
||||
#gradient > .vertical-three-colors(lighten(@color, 15%), @color, 50%, darken(@color, 4%));
|
||||
filter: none;
|
||||
border: 1px solid darken(@color, 10%);
|
||||
}
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
|
||||
.btn-shadow(@navbar-default-bg);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
|
||||
&-inverse {
|
||||
.btn-shadow(@navbar-inverse-bg);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-inverse-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&-nav > li > a,
|
||||
&-nav > li > a:hover {
|
||||
padding-top: @navbar-padding-vertical + 2px;
|
||||
padding-bottom: @navbar-padding-vertical - 2px;
|
||||
.transition(color ease-in-out .2s);
|
||||
}
|
||||
|
||||
&-brand,
|
||||
&-brand:hover {
|
||||
.transition(color ease-in-out .2s);
|
||||
}
|
||||
|
||||
.caret,
|
||||
.caret:hover {
|
||||
.transition(border-color ease-in-out .2s);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
.btn {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
||||
|
||||
&-default {
|
||||
.btn-shadow(@btn-default-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow(darken(@btn-default-bg, 4%));
|
||||
}
|
||||
}
|
||||
|
||||
&-primary {
|
||||
.btn-shadow(@btn-primary-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow(darken(@btn-primary-bg, 4%));
|
||||
}
|
||||
}
|
||||
|
||||
&-success {
|
||||
.btn-shadow(@btn-success-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow(darken(@btn-success-bg, 4%));
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
.btn-shadow(@btn-info-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow(darken(@btn-info-bg, 4%));
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
.btn-shadow(@btn-warning-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow(darken(@btn-warning-bg, 4%));
|
||||
}
|
||||
}
|
||||
|
||||
&-danger {
|
||||
.btn-shadow(@btn-danger-bg);
|
||||
|
||||
&:hover {
|
||||
.btn-shadow(darken(@btn-danger-bg, 4%));
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
// Containers =================================================================
|
||||
|
||||
.panel {
|
||||
|
||||
&-primary {
|
||||
.panel-title {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@@ -0,0 +1,846 @@
|
||||
// Spacelab 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: #2d2d2d; // #222
|
||||
@gray-dark: lighten(#000, 20%); // #333
|
||||
@gray: #666; // #555
|
||||
@gray-light: lighten(#000, 60%); // #999
|
||||
@gray-lighter: lighten(#000, 93.5%); // #eee
|
||||
|
||||
@brand-primary: #446E9B;
|
||||
@brand-success: #3CB521;
|
||||
@brand-info: #3399F3;
|
||||
@brand-warning: #D47500;
|
||||
@brand-danger: #CD0200;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #fff;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: @gray;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: @brand-info;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: @link-color;
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-base;
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: @gray-darker;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: transparent;
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: #f9f9f9;
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: #f5f5f5;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: #ddd;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: #fff;
|
||||
@btn-default-bg: #474949;
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: @btn-default-color;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-default-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: @btn-default-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: @btn-default-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-default-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @text-color;
|
||||
//** `<input>` border color
|
||||
@input-border: #ccc;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: #777;
|
||||
@navbar-default-bg: #eee;
|
||||
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: #777;
|
||||
@navbar-default-link-hover-color: @brand-info;
|
||||
@navbar-default-link-hover-bg: transparent;
|
||||
@navbar-default-link-active-color: @navbar-default-link-hover-color;
|
||||
@navbar-default-link-active-bg: transparent;
|
||||
@navbar-default-link-disabled-color: #444;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: @navbar-default-link-hover-color;
|
||||
@navbar-default-brand-hover-bg: transparent;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 6.5%);
|
||||
@navbar-default-toggle-icon-bar-bg: #ccc;
|
||||
@navbar-default-toggle-border-color: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: #ddd;
|
||||
@navbar-inverse-bg: @brand-primary;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: #ddd;
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: transparent;
|
||||
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
|
||||
@navbar-inverse-link-active-bg: transparent;
|
||||
@navbar-inverse-link-disabled-color: #ccc;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: #fff;
|
||||
@navbar-inverse-brand-hover-bg: transparent;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%);
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: #ddd;
|
||||
|
||||
@nav-tabs-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @body-bg;
|
||||
@nav-tabs-active-link-hover-color: @gray;
|
||||
@nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
@nav-tabs-justified-link-border-color: #ddd;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: @link-color;
|
||||
@pagination-bg: #fff;
|
||||
@pagination-border: #ddd;
|
||||
|
||||
@pagination-hover-color: @link-hover-color;
|
||||
@pagination-hover-bg: @gray-lighter;
|
||||
@pagination-hover-border: #ddd;
|
||||
|
||||
@pagination-active-color: @gray-light;
|
||||
@pagination-active-bg: #f5f5f5;
|
||||
@pagination-active-border: #ddd;
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
@pagination-disabled-bg: #fff;
|
||||
@pagination-disabled-border: #ddd;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: @gray-lighter;
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #468847;
|
||||
@state-success-bg: #dff0d8;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #3a87ad;
|
||||
@state-info-bg: #d9edf7;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #c09853;
|
||||
@state-warning-bg: #fcf8e3;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
||||
|
||||
@state-danger-text: #b94a48;
|
||||
@state-danger-bg: #f2dede;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: #fff;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: #fff;
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: #f5f5f5;
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: #fff;
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: #ddd;
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: #fff;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #f5f5f5;
|
||||
|
||||
@panel-default-text: @gray-dark;
|
||||
@panel-default-border: #ddd;
|
||||
@panel-default-heading-bg: #f5f5f5;
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @brand-primary;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: @state-success-border;
|
||||
@panel-success-heading-bg: @state-success-bg;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: @state-info-border;
|
||||
@panel-info-heading-bg: @state-info-bg;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: @state-warning-border;
|
||||
@panel-warning-heading-bg: @state-warning-bg;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: @state-danger-border;
|
||||
@panel-danger-heading-bg: @state-danger-bg;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @body-bg;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: #ddd;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: #f5f5f5;
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @link-color;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @link-color;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: #fff;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: #f5f5f5;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #000;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray-light;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
//** Page header border color
|
||||
@page-header-border-color: @gray-lighter;
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: @gray-lighter;
|
||||
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
// United 3.2.0
|
||||
// Bootswatch
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import url("//fonts.googleapis.com/css?family=Ubuntu");
|
||||
|
||||
// Navbar =====================================================================
|
||||
|
||||
.navbar {
|
||||
|
||||
&-default {
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-default-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-inverse {
|
||||
|
||||
.badge {
|
||||
background-color: #fff;
|
||||
color: @navbar-inverse-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons ====================================================================
|
||||
|
||||
// Typography =================================================================
|
||||
|
||||
// Tables =====================================================================
|
||||
|
||||
// Forms ======================================================================
|
||||
|
||||
// Navs =======================================================================
|
||||
|
||||
// Indicators =================================================================
|
||||
|
||||
// Progress bars ==============================================================
|
||||
|
||||
// Containers =================================================================
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,846 @@
|
||||
// United 3.2.0
|
||||
// Variables
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: #333; // #333
|
||||
@gray: #777; // #555
|
||||
@gray-light: #AEA79F; // #999
|
||||
@gray-lighter: lighten(#000, 93.5%); // #eee
|
||||
|
||||
@brand-primary: #DD4814;
|
||||
@brand-success: #38B44A;
|
||||
@brand-info: #772953;
|
||||
@brand-warning: #EFB73E;
|
||||
@brand-danger: #DF382C;
|
||||
|
||||
|
||||
//== Scaffolding
|
||||
//
|
||||
//## Settings for some of the most global styles.
|
||||
|
||||
//** Background color for `<body>`.
|
||||
@body-bg: #fff;
|
||||
//** Global text color on `<body>`.
|
||||
@text-color: @gray-dark;
|
||||
|
||||
//** Global textual link color.
|
||||
@link-color: @brand-primary;
|
||||
//** Link hover color set via `darken()` function.
|
||||
@link-hover-color: darken(@link-color, 15%);
|
||||
|
||||
|
||||
//== Typography
|
||||
//
|
||||
//## Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
@font-family-sans-serif: "Ubuntu", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
||||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
@font-family-base: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-h5: @font-size-base;
|
||||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@line-height-base: 1.428571429; // 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)); // ~20px
|
||||
|
||||
//** By default, this inherits from the `<body>`.
|
||||
@headings-font-family: @font-family-base;
|
||||
@headings-font-weight: 500;
|
||||
@headings-line-height: 1.1;
|
||||
@headings-color: inherit;
|
||||
|
||||
|
||||
//== 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: "../fonts/";
|
||||
//** File name for all font files.
|
||||
@icon-font-name: "glyphicons-halflings-regular";
|
||||
//** Element ID within SVG icon file.
|
||||
@icon-font-svg-id: "glyphicons_halflingsregular";
|
||||
|
||||
|
||||
//== 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: 8px;
|
||||
@padding-base-horizontal: 12px;
|
||||
|
||||
@padding-large-vertical: 14px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@padding-xs-vertical: 1px;
|
||||
@padding-xs-horizontal: 5px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
|
||||
//** Global color for active items (e.g., navs or dropdowns).
|
||||
@component-active-color: #fff;
|
||||
//** Global background color for active items (e.g., navs or dropdowns).
|
||||
@component-active-bg: @brand-primary;
|
||||
|
||||
//** Width of the `border` for generating carets that indicator dropdowns.
|
||||
@caret-width-base: 4px;
|
||||
//** Carets increase slightly in size for larger components.
|
||||
@caret-width-large: 5px;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Padding for cells in `.table-condensed`.
|
||||
@table-condensed-cell-padding: 5px;
|
||||
|
||||
//** Default background color used for all tables.
|
||||
@table-bg: transparent;
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: #f9f9f9;
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: #f5f5f5;
|
||||
@table-bg-active: @table-bg-hover;
|
||||
|
||||
//** Border color for table and cell borders.
|
||||
@table-border-color: #ddd;
|
||||
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
@btn-font-weight: normal;
|
||||
|
||||
@btn-default-color: #fff;
|
||||
@btn-default-bg: @gray-light;
|
||||
@btn-default-border: @btn-default-bg;
|
||||
|
||||
@btn-primary-color: @btn-default-color;
|
||||
@btn-primary-bg: @brand-primary;
|
||||
@btn-primary-border: @btn-primary-bg;
|
||||
|
||||
@btn-success-color: @btn-default-color;
|
||||
@btn-success-bg: @brand-success;
|
||||
@btn-success-border: @btn-success-bg;
|
||||
|
||||
@btn-info-color: @btn-default-color;
|
||||
@btn-info-bg: @brand-info;
|
||||
@btn-info-border: @btn-info-bg;
|
||||
|
||||
@btn-warning-color: @btn-default-color;
|
||||
@btn-warning-bg: @brand-warning;
|
||||
@btn-warning-border: @btn-warning-bg;
|
||||
|
||||
@btn-danger-color: @btn-default-color;
|
||||
@btn-danger-bg: @brand-danger;
|
||||
@btn-danger-border: @btn-danger-bg;
|
||||
|
||||
@btn-link-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Forms
|
||||
//
|
||||
//##
|
||||
|
||||
//** `<input>` background color
|
||||
@input-bg: #fff;
|
||||
//** `<input disabled>` background color
|
||||
@input-bg-disabled: @gray-lighter;
|
||||
|
||||
//** Text color for `<input>`s
|
||||
@input-color: @text-color;
|
||||
//** `<input>` border color
|
||||
@input-border: #ccc;
|
||||
//** `<input>` border radius
|
||||
@input-border-radius: @border-radius-base;
|
||||
//** Border color for inputs on focus
|
||||
@input-border-focus: #66afe9;
|
||||
|
||||
//** Placeholder text color
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
//** Default `.form-control` height
|
||||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
|
||||
//** Large `.form-control` height
|
||||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
//** Small `.form-control` height
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-color: @text-color;
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
//** Background color for textual input addons
|
||||
@input-group-addon-bg: @gray-lighter;
|
||||
//** Border color for textual input addons
|
||||
@input-group-addon-border-color: @input-border;
|
||||
|
||||
|
||||
//== Dropdowns
|
||||
//
|
||||
//## Dropdown menu container and contents.
|
||||
|
||||
//** Background for the dropdown menu.
|
||||
@dropdown-bg: #fff;
|
||||
//** Dropdown menu `border-color`.
|
||||
@dropdown-border: rgba(0,0,0,.15);
|
||||
//** Dropdown menu `border-color` **for IE8**.
|
||||
@dropdown-fallback-border: #ccc;
|
||||
//** Divider color for between dropdown items.
|
||||
@dropdown-divider-bg: #e5e5e5;
|
||||
|
||||
//** Dropdown link text color.
|
||||
@dropdown-link-color: @gray-dark;
|
||||
//** Hover color for dropdown links.
|
||||
@dropdown-link-hover-color: #fff;
|
||||
//** Hover background for dropdown links.
|
||||
@dropdown-link-hover-bg: @dropdown-link-active-bg;
|
||||
|
||||
//** Active dropdown menu item text color.
|
||||
@dropdown-link-active-color: #fff;
|
||||
//** Active dropdown menu item background color.
|
||||
@dropdown-link-active-bg: @component-active-bg;
|
||||
|
||||
//** Disabled dropdown menu item background color.
|
||||
@dropdown-link-disabled-color: @text-muted;
|
||||
|
||||
//** Text color for headers within dropdown menus.
|
||||
@dropdown-header-color: @text-muted;
|
||||
|
||||
//** Deprecated `@dropdown-caret-color` as of v3.1.0
|
||||
@dropdown-caret-color: #000;
|
||||
|
||||
|
||||
//-- 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;
|
||||
@zindex-dropdown: 1000;
|
||||
@zindex-popover: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
@zindex-navbar-fixed: 1030;
|
||||
@zindex-modal-background: 1040;
|
||||
@zindex-modal: 1050;
|
||||
|
||||
|
||||
//== 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;
|
||||
//** Deprecated `@screen-xs-min` as of v3.2.0
|
||||
@screen-xs-min: @screen-xs;
|
||||
//** Deprecated `@screen-phone` as of v3.0.1
|
||||
@screen-phone: @screen-xs-min;
|
||||
|
||||
// Small screen / tablet
|
||||
//** Deprecated `@screen-sm` as of v3.0.1
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
//** Deprecated `@screen-tablet` as of v3.0.1
|
||||
@screen-tablet: @screen-sm-min;
|
||||
|
||||
// Medium screen / desktop
|
||||
//** Deprecated `@screen-md` as of v3.0.1
|
||||
@screen-md: 992px;
|
||||
@screen-md-min: @screen-md;
|
||||
//** Deprecated `@screen-desktop` as of v3.0.1
|
||||
@screen-desktop: @screen-md-min;
|
||||
|
||||
// Large screen / wide desktop
|
||||
//** Deprecated `@screen-lg` as of v3.0.1
|
||||
@screen-lg: 1200px;
|
||||
@screen-lg-min: @screen-lg;
|
||||
//** Deprecated `@screen-lg-desktop` as of v3.0.1
|
||||
@screen-lg-desktop: @screen-lg-min;
|
||||
|
||||
// So media queries don't overlap when required, provide a maximum
|
||||
@screen-xs-max: (@screen-sm-min - 1);
|
||||
@screen-sm-max: (@screen-md-min - 1);
|
||||
@screen-md-max: (@screen-lg-min - 1);
|
||||
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
@grid-columns: 12;
|
||||
//** Padding between columns. Gets divided in half for the left and right.
|
||||
@grid-gutter-width: 30px;
|
||||
// Navbar collapse
|
||||
//** Point at which the navbar becomes uncollapsed.
|
||||
@grid-float-breakpoint: @screen-sm-min;
|
||||
//** Point at which the navbar begins collapsing.
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
|
||||
//== Container sizes
|
||||
//
|
||||
//## Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
// Small screen / tablet
|
||||
@container-tablet: ((720px + @grid-gutter-width));
|
||||
//** For `@screen-sm-min` and up.
|
||||
@container-sm: @container-tablet;
|
||||
|
||||
// Medium screen / desktop
|
||||
@container-desktop: ((940px + @grid-gutter-width));
|
||||
//** For `@screen-md-min` and up.
|
||||
@container-md: @container-desktop;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@container-large-desktop: ((1140px + @grid-gutter-width));
|
||||
//** For `@screen-lg-min` and up.
|
||||
@container-lg: @container-large-desktop;
|
||||
|
||||
|
||||
//== Navbar
|
||||
//
|
||||
//##
|
||||
|
||||
// Basics of a navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-margin-bottom: @line-height-computed;
|
||||
@navbar-border-radius: @border-radius-base;
|
||||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||
@navbar-collapse-max-height: 340px;
|
||||
|
||||
@navbar-default-color: #fff;
|
||||
@navbar-default-bg: @brand-primary;
|
||||
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
|
||||
|
||||
// Navbar links
|
||||
@navbar-default-link-color: #fff;
|
||||
@navbar-default-link-hover-color: #fff;
|
||||
@navbar-default-link-hover-bg: darken(@navbar-default-bg, 15%);
|
||||
@navbar-default-link-active-color: #fff;
|
||||
@navbar-default-link-active-bg: darken(@navbar-default-bg, 10%);
|
||||
@navbar-default-link-disabled-color: #ccc;
|
||||
@navbar-default-link-disabled-bg: transparent;
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-default-brand-color: @navbar-default-link-color;
|
||||
@navbar-default-brand-hover-color: #fff;
|
||||
@navbar-default-brand-hover-bg: none;
|
||||
|
||||
// Navbar toggle
|
||||
@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 15%);
|
||||
@navbar-default-toggle-icon-bar-bg: #fff;
|
||||
@navbar-default-toggle-border-color: darken(@navbar-default-bg, 15%);
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: #fff;
|
||||
@navbar-inverse-bg: @brand-info;
|
||||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: #fff;
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 15%);
|
||||
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
|
||||
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
|
||||
@navbar-inverse-link-disabled-color: #ccc;
|
||||
@navbar-inverse-link-disabled-bg: transparent;
|
||||
|
||||
// Inverted navbar brand label
|
||||
@navbar-inverse-brand-color: @navbar-inverse-link-color;
|
||||
@navbar-inverse-brand-hover-color: #fff;
|
||||
@navbar-inverse-brand-hover-bg: none;
|
||||
|
||||
// Inverted navbar toggle
|
||||
@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 15%);
|
||||
@navbar-inverse-toggle-icon-bar-bg: #fff;
|
||||
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 15%);
|
||||
|
||||
|
||||
//== Navs
|
||||
//
|
||||
//##
|
||||
|
||||
//=== Shared nav styles
|
||||
@nav-link-padding: 10px 15px;
|
||||
@nav-link-hover-bg: @gray-lighter;
|
||||
|
||||
@nav-disabled-link-color: @gray-light;
|
||||
@nav-disabled-link-hover-color: @gray-light;
|
||||
|
||||
@nav-open-link-hover-color: #fff;
|
||||
|
||||
//== Tabs
|
||||
@nav-tabs-border-color: #ddd;
|
||||
|
||||
@nav-tabs-link-hover-border-color: @gray-lighter;
|
||||
|
||||
@nav-tabs-active-link-hover-bg: @body-bg;
|
||||
@nav-tabs-active-link-hover-color: @gray;
|
||||
@nav-tabs-active-link-hover-border-color: #ddd;
|
||||
|
||||
@nav-tabs-justified-link-border-color: #ddd;
|
||||
@nav-tabs-justified-active-link-border-color: @body-bg;
|
||||
|
||||
//== Pills
|
||||
@nav-pills-border-radius: @border-radius-base;
|
||||
@nav-pills-active-link-hover-bg: @component-active-bg;
|
||||
@nav-pills-active-link-hover-color: @component-active-color;
|
||||
|
||||
|
||||
//== Pagination
|
||||
//
|
||||
//##
|
||||
|
||||
@pagination-color: @link-color;
|
||||
@pagination-bg: #fff;
|
||||
@pagination-border: #ddd;
|
||||
|
||||
@pagination-hover-color: @link-hover-color;
|
||||
@pagination-hover-bg: @gray-lighter;
|
||||
@pagination-hover-border: #ddd;
|
||||
|
||||
@pagination-active-color: @gray-light;
|
||||
@pagination-active-bg: #f5f5f5;
|
||||
@pagination-active-border: #ddd;
|
||||
|
||||
@pagination-disabled-color: @gray-light;
|
||||
@pagination-disabled-bg: #fff;
|
||||
@pagination-disabled-border: #ddd;
|
||||
|
||||
|
||||
//== Pager
|
||||
//
|
||||
//##
|
||||
|
||||
@pager-bg: @pagination-bg;
|
||||
@pager-border: @pagination-border;
|
||||
@pager-border-radius: 15px;
|
||||
|
||||
@pager-hover-bg: @pagination-hover-bg;
|
||||
|
||||
@pager-active-bg: @pagination-active-bg;
|
||||
@pager-active-color: @pagination-active-color;
|
||||
|
||||
@pager-disabled-color: @gray-light;
|
||||
|
||||
|
||||
//== Jumbotron
|
||||
//
|
||||
//##
|
||||
|
||||
@jumbotron-padding: 30px;
|
||||
@jumbotron-color: inherit;
|
||||
@jumbotron-bg: @gray-lighter;
|
||||
@jumbotron-heading-color: inherit;
|
||||
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||
|
||||
|
||||
//== Form states and alerts
|
||||
//
|
||||
//## Define colors for form feedback states and, by default, alerts.
|
||||
|
||||
@state-success-text: #468847;
|
||||
@state-success-bg: #dff0d8;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
|
||||
|
||||
@state-info-text: #3a87ad;
|
||||
@state-info-bg: #d9edf7;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
@state-warning-text: #c09853;
|
||||
@state-warning-bg: #fcf8e3;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
|
||||
|
||||
@state-danger-text: #b94a48;
|
||||
@state-danger-bg: #f2dede;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
|
||||
|
||||
|
||||
//== Tooltips
|
||||
//
|
||||
//##
|
||||
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 200px;
|
||||
//** Tooltip text color
|
||||
@tooltip-color: #fff;
|
||||
//** Tooltip background color
|
||||
@tooltip-bg: rgba(0,0,0,.9);
|
||||
@tooltip-opacity: .9;
|
||||
|
||||
//** Tooltip arrow width
|
||||
@tooltip-arrow-width: 5px;
|
||||
//** Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
|
||||
|
||||
//== Popovers
|
||||
//
|
||||
//##
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
//** Popover maximum width
|
||||
@popover-max-width: 276px;
|
||||
//** Popover border color
|
||||
@popover-border-color: rgba(0,0,0,.2);
|
||||
//** Popover fallback border color
|
||||
@popover-fallback-border-color: #ccc;
|
||||
|
||||
//** Popover title background color
|
||||
@popover-title-bg: darken(@popover-bg, 3%);
|
||||
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 10px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: #fff;
|
||||
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
|
||||
//** Popover outer arrow fallback color
|
||||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
|
||||
|
||||
|
||||
//== Labels
|
||||
//
|
||||
//##
|
||||
|
||||
//** Default label background color
|
||||
@label-default-bg: @btn-default-bg;
|
||||
//** Primary label background color
|
||||
@label-primary-bg: @brand-primary;
|
||||
//** Success label background color
|
||||
@label-success-bg: @brand-success;
|
||||
//** Info label background color
|
||||
@label-info-bg: @brand-info;
|
||||
//** Warning label background color
|
||||
@label-warning-bg: @brand-warning;
|
||||
//** Danger label background color
|
||||
@label-danger-bg: @brand-danger;
|
||||
|
||||
//** Default label text color
|
||||
@label-color: #fff;
|
||||
//** Default text color of a linked label
|
||||
@label-link-hover-color: #fff;
|
||||
|
||||
|
||||
//== Modals
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding applied to the modal body
|
||||
@modal-inner-padding: 20px;
|
||||
|
||||
//** Padding applied to the modal title
|
||||
@modal-title-padding: 15px;
|
||||
//** Modal title line-height
|
||||
@modal-title-line-height: @line-height-base;
|
||||
|
||||
//** Background color of modal content area
|
||||
@modal-content-bg: #fff;
|
||||
//** Modal content border color
|
||||
@modal-content-border-color: rgba(0,0,0,.2);
|
||||
//** Modal content border color **for IE8**
|
||||
@modal-content-fallback-border-color: #999;
|
||||
|
||||
//** Modal backdrop background color
|
||||
@modal-backdrop-bg: #000;
|
||||
//** Modal backdrop opacity
|
||||
@modal-backdrop-opacity: .5;
|
||||
//** Modal header border color
|
||||
@modal-header-border-color: #e5e5e5;
|
||||
//** Modal footer border color
|
||||
@modal-footer-border-color: @modal-header-border-color;
|
||||
|
||||
@modal-lg: 900px;
|
||||
@modal-md: 600px;
|
||||
@modal-sm: 300px;
|
||||
|
||||
|
||||
//== Alerts
|
||||
//
|
||||
//## Define alert colors, border radius, and padding.
|
||||
|
||||
@alert-padding: 15px;
|
||||
@alert-border-radius: @border-radius-base;
|
||||
@alert-link-font-weight: bold;
|
||||
|
||||
@alert-success-bg: @state-success-bg;
|
||||
@alert-success-text: @state-success-text;
|
||||
@alert-success-border: @state-success-border;
|
||||
|
||||
@alert-info-bg: @state-info-bg;
|
||||
@alert-info-text: @state-info-text;
|
||||
@alert-info-border: @state-info-border;
|
||||
|
||||
@alert-warning-bg: @state-warning-bg;
|
||||
@alert-warning-text: @state-warning-text;
|
||||
@alert-warning-border: @state-warning-border;
|
||||
|
||||
@alert-danger-bg: @state-danger-bg;
|
||||
@alert-danger-text: @state-danger-text;
|
||||
@alert-danger-border: @state-danger-border;
|
||||
|
||||
|
||||
//== Progress bars
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color of the whole progress component
|
||||
@progress-bg: #f5f5f5;
|
||||
//** Progress bar text color
|
||||
@progress-bar-color: #fff;
|
||||
|
||||
//** Default progress bar color
|
||||
@progress-bar-bg: @brand-primary;
|
||||
//** Success progress bar color
|
||||
@progress-bar-success-bg: @brand-success;
|
||||
//** Warning progress bar color
|
||||
@progress-bar-warning-bg: @brand-warning;
|
||||
//** Danger progress bar color
|
||||
@progress-bar-danger-bg: @brand-danger;
|
||||
//** Info progress bar color
|
||||
@progress-bar-info-bg: @brand-info;
|
||||
|
||||
|
||||
//== List group
|
||||
//
|
||||
//##
|
||||
|
||||
//** Background color on `.list-group-item`
|
||||
@list-group-bg: #fff;
|
||||
//** `.list-group-item` border color
|
||||
@list-group-border: #ddd;
|
||||
//** List group border radius
|
||||
@list-group-border-radius: @border-radius-base;
|
||||
|
||||
//** Background color of single list items on hover
|
||||
@list-group-hover-bg: #f5f5f5;
|
||||
//** Text color of active list items
|
||||
@list-group-active-color: @component-active-color;
|
||||
//** Background color of active list items
|
||||
@list-group-active-bg: @component-active-bg;
|
||||
//** Border color of active list elements
|
||||
@list-group-active-border: @list-group-active-bg;
|
||||
//** Text color for content within active list items
|
||||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||
|
||||
//** Text color of disabled list items
|
||||
@list-group-disabled-color: @gray-light;
|
||||
//** Background color of disabled list items
|
||||
@list-group-disabled-bg: @gray-lighter;
|
||||
//** Text color for content within disabled list items
|
||||
@list-group-disabled-text-color: @list-group-disabled-color;
|
||||
|
||||
@list-group-link-color: #555;
|
||||
@list-group-link-hover-color: @list-group-link-color;
|
||||
@list-group-link-heading-color: #333;
|
||||
|
||||
|
||||
//== Panels
|
||||
//
|
||||
//##
|
||||
|
||||
@panel-bg: #fff;
|
||||
@panel-body-padding: 15px;
|
||||
@panel-heading-padding: 10px 15px;
|
||||
@panel-footer-padding: @panel-heading-padding;
|
||||
@panel-border-radius: @border-radius-base;
|
||||
|
||||
//** Border color for elements within panels
|
||||
@panel-inner-border: #ddd;
|
||||
@panel-footer-bg: #f5f5f5;
|
||||
|
||||
@panel-default-text: @gray-dark;
|
||||
@panel-default-border: #ddd;
|
||||
@panel-default-heading-bg: #f5f5f5;
|
||||
|
||||
@panel-primary-text: #fff;
|
||||
@panel-primary-border: @brand-primary;
|
||||
@panel-primary-heading-bg: @brand-primary;
|
||||
|
||||
@panel-success-text: @state-success-text;
|
||||
@panel-success-border: @state-success-border;
|
||||
@panel-success-heading-bg: @state-success-bg;
|
||||
|
||||
@panel-info-text: @state-info-text;
|
||||
@panel-info-border: @state-info-border;
|
||||
@panel-info-heading-bg: @state-info-bg;
|
||||
|
||||
@panel-warning-text: @state-warning-text;
|
||||
@panel-warning-border: @state-warning-border;
|
||||
@panel-warning-heading-bg: @state-warning-bg;
|
||||
|
||||
@panel-danger-text: @state-danger-text;
|
||||
@panel-danger-border: @state-danger-border;
|
||||
@panel-danger-heading-bg: @state-danger-bg;
|
||||
|
||||
|
||||
//== Thumbnails
|
||||
//
|
||||
//##
|
||||
|
||||
//** Padding around the thumbnail image
|
||||
@thumbnail-padding: 4px;
|
||||
//** Thumbnail background color
|
||||
@thumbnail-bg: @body-bg;
|
||||
//** Thumbnail border color
|
||||
@thumbnail-border: #ddd;
|
||||
//** Thumbnail border radius
|
||||
@thumbnail-border-radius: @border-radius-base;
|
||||
|
||||
//** Custom text color for thumbnail captions
|
||||
@thumbnail-caption-color: @text-color;
|
||||
//** Padding around the thumbnail caption
|
||||
@thumbnail-caption-padding: 9px;
|
||||
|
||||
|
||||
//== Wells
|
||||
//
|
||||
//##
|
||||
|
||||
@well-bg: #f5f5f5;
|
||||
@well-border: darken(@well-bg, 7%);
|
||||
|
||||
|
||||
//== Badges
|
||||
//
|
||||
//##
|
||||
|
||||
@badge-color: #fff;
|
||||
//** Linked badge text color on hover
|
||||
@badge-link-hover-color: #fff;
|
||||
@badge-bg: @gray-light;
|
||||
|
||||
//** Badge text color in active nav link
|
||||
@badge-active-color: @link-color;
|
||||
//** Badge background color in active nav link
|
||||
@badge-active-bg: #fff;
|
||||
|
||||
@badge-font-weight: bold;
|
||||
@badge-line-height: 1;
|
||||
@badge-border-radius: 10px;
|
||||
|
||||
|
||||
//== Breadcrumbs
|
||||
//
|
||||
//##
|
||||
|
||||
@breadcrumb-padding-vertical: 8px;
|
||||
@breadcrumb-padding-horizontal: 15px;
|
||||
//** Breadcrumb background color
|
||||
@breadcrumb-bg: #f5f5f5;
|
||||
//** Breadcrumb text color
|
||||
@breadcrumb-color: #ccc;
|
||||
//** Text color of current page in the breadcrumb
|
||||
@breadcrumb-active-color: @gray-light;
|
||||
//** Textual separator for between breadcrumb elements
|
||||
@breadcrumb-separator: "/";
|
||||
|
||||
|
||||
//== Carousel
|
||||
//
|
||||
//##
|
||||
|
||||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
|
||||
|
||||
@carousel-control-color: #fff;
|
||||
@carousel-control-width: 15%;
|
||||
@carousel-control-opacity: .5;
|
||||
@carousel-control-font-size: 20px;
|
||||
|
||||
@carousel-indicator-active-bg: #fff;
|
||||
@carousel-indicator-border-color: #fff;
|
||||
|
||||
@carousel-caption-color: #fff;
|
||||
|
||||
|
||||
//== Close
|
||||
//
|
||||
//##
|
||||
|
||||
@close-font-weight: bold;
|
||||
@close-color: #000;
|
||||
@close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
//== Code
|
||||
//
|
||||
//##
|
||||
|
||||
@code-color: #c7254e;
|
||||
@code-bg: #f9f2f4;
|
||||
|
||||
@kbd-color: #fff;
|
||||
@kbd-bg: #333;
|
||||
|
||||
@pre-bg: #f5f5f5;
|
||||
@pre-color: @gray-dark;
|
||||
@pre-border-color: #ccc;
|
||||
@pre-scrollable-max-height: 340px;
|
||||
|
||||
|
||||
//== Type
|
||||
//
|
||||
//##
|
||||
|
||||
//** Horizontal offset for forms and lists.
|
||||
@component-offset-horizontal: 180px;
|
||||
//** Text muted color
|
||||
@text-muted: @gray-light;
|
||||
//** Abbreviations and acronyms border color
|
||||
@abbr-border-color: @gray-light;
|
||||
//** Headings small color
|
||||
@headings-small-color: @gray-light;
|
||||
//** Blockquote small color
|
||||
@blockquote-small-color: @gray-light;
|
||||
//** Blockquote font size
|
||||
@blockquote-font-size: (@font-size-base * 1.25);
|
||||
//** Blockquote border color
|
||||
@blockquote-border-color: @gray-lighter;
|
||||
//** Page header border color
|
||||
@page-header-border-color: @gray-lighter;
|
||||
//** Width of horizontal description list titles
|
||||
@dl-horizontal-offset: @component-offset-horizontal;
|
||||
//** Horizontal line color.
|
||||
@hr-border: @gray-lighter;
|
||||
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
|
||||
<t t-extend="website.theme_customize">
|
||||
<t t-jquery="#theme_customize_modal" t-operation="replace">
|
||||
|
||||
<div id="theme_customize_modal" class="modal fade bs-example-modal-sm">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="loading_backdrop"></div>
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close">×</button>
|
||||
<h4 class="modal-title" id="mySmallModalLabel">Customize your theme</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<label class="checked">
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png" alt="Default Theme"/>
|
||||
<input name="theme" type="radio" data-xmlid="" checked="checked"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/amelia/thumbnail.png" alt="Amelia"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_amelia"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/cerulean/thumbnail.png" alt="Cerulean"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_cerulean"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/cosmo/thumbnail.png" alt="Cosmo"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_cosmo" data-disable="ee"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/cyborg/thumbnail.png" alt="Cyborg"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_cyborg"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/flatly/thumbnail.png" alt="Flatly"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_flatly"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/journal/thumbnail.png" alt="Journal"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_journal"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/readable/thumbnail.png" alt="Readable"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_readable"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/simplex/thumbnail.png" alt="Simplex"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_simplex"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/slate/thumbnail.png" alt="Slate"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_slate"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/spacelab/thumbnail.png" alt="Spacelab"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_spacelab"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/less/united/thumbnail.png" alt="United"/>
|
||||
<input name="theme" type="radio" data-xmlid="website.theme_united"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</t>
|
||||
</t>
|
||||
|
||||
|
||||
</templates>
|
||||
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<openerp>
|
||||
<data>
|
||||
|
||||
<template id="script" inherit_id="website.assets_editor" name="Clean scripts">
|
||||
<xpath expr="/t" position="inside">
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
'use strict';
|
||||
openerp.website.add_template_file('/theme_bootswatch/static/src/xml/theme.xml');
|
||||
})();
|
||||
</script>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</data>
|
||||
</openerp>
|
||||
@@ -0,0 +1,96 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<openerp>
|
||||
<data>
|
||||
|
||||
<!--
|
||||
All Default Themes
|
||||
-->
|
||||
|
||||
<template id="website.theme_amelia" name="Amelia" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/amelia/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/amelia/variables.less' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/theme_bootswatch/static/src/less/amelia/fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_cerulean" name="Cerulean" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/cerulean/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/cerulean/variables.less' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_cosmo" name="Cosmo" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/cosmo/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/cosmo/variables.less' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/theme_bootswatch/static/src/less/cosmo/fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_cyborg" name="Cyborg" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/cyborg/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/cyborg/variables.less' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/theme_bootswatch/static/src/less/cyborg/fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_flatly" name="Flatly" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/flatly/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/flatly/variables.less' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/theme_bootswatch/static/src/less/flatly/fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_journal" name="Journal" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/journal/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/journal/variables.less' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/theme_bootswatch/static/src/less/journal/fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_readable" name="Readable" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/readable/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/readable/variables.less' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/theme_bootswatch/static/src/less/readable/fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_simplex" name="Simplex" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/simplex/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/simplex/variables.less' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/theme_bootswatch/static/src/less/simplex/fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_slate" name="Slate" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/slate/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/slate/variables.less' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/theme_bootswatch/static/src/less/slate/fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_spacelab" name="Spacelab" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/spacelab/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/spacelab/variables.less' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/theme_bootswatch/static/src/less/spacelab/fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_united" name="United" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/united/bootswatch.less' t-ignore="true"/>
|
||||
<link rel="stylesheet" type="text/less" href='/theme_bootswatch/static/src/less/united/variables.less' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</data>
|
||||
</openerp>
|
||||
@@ -156,31 +156,6 @@ class Website(openerp.addons.web.controllers.main.Home):
|
||||
return werkzeug.wrappers.Response(url, mimetype='text/plain')
|
||||
return werkzeug.utils.redirect(url)
|
||||
|
||||
@http.route('/website/theme_change', type='http', auth="user", website=True)
|
||||
def theme_change(self, theme_id=False, **kwargs):
|
||||
imd = request.registry['ir.model.data']
|
||||
Views = request.registry['ir.ui.view']
|
||||
|
||||
_, theme_template_id = imd.get_object_reference(
|
||||
request.cr, request.uid, 'website', 'theme')
|
||||
views = Views.search(request.cr, request.uid, [
|
||||
('inherit_id', '=', theme_template_id),
|
||||
('application', '=', 'enabled'),
|
||||
], context=request.context)
|
||||
Views.write(request.cr, request.uid, views, {
|
||||
'application': 'disabled',
|
||||
}, context=request.context)
|
||||
|
||||
if theme_id:
|
||||
module, xml_id = theme_id.split('.')
|
||||
_, view_id = imd.get_object_reference(
|
||||
request.cr, request.uid, module, xml_id)
|
||||
Views.write(request.cr, request.uid, [view_id], {
|
||||
'application': 'enabled'
|
||||
}, context=request.context)
|
||||
|
||||
return request.render('website.themes', {'theme_changed': True})
|
||||
|
||||
@http.route(['/website/snippets'], type='json', auth="public", website=True)
|
||||
def snippets(self):
|
||||
return request.website._render('website.snippets')
|
||||
@@ -354,6 +329,63 @@ class Website(openerp.addons.web.controllers.main.Home):
|
||||
obj = _object.browse(request.cr, request.uid, _id)
|
||||
return bool(obj.website_published)
|
||||
|
||||
#------------------------------------------------------
|
||||
# Themes
|
||||
#------------------------------------------------------
|
||||
|
||||
def get_view_ids(self, xml_ids):
|
||||
ids = []
|
||||
imd = request.registry['ir.model.data']
|
||||
for xml_id in xml_ids:
|
||||
if "." in xml_id:
|
||||
xml = xml_id.split(".")
|
||||
view_model, id = imd.get_object_reference(request.cr, request.uid, xml[0], xml[1])
|
||||
else:
|
||||
id = int(xml_id)
|
||||
ids.append(id)
|
||||
return ids
|
||||
|
||||
@http.route(['/website/theme_customize_get'], type='json', auth="public", website=True)
|
||||
def theme_customize_get(self, xml_ids):
|
||||
view = request.registry["ir.ui.view"]
|
||||
enable = []
|
||||
disable = []
|
||||
ids = self.get_view_ids(xml_ids)
|
||||
for v in view.browse(request.cr, request.uid, ids, context=request.context):
|
||||
if v.application != "disabled":
|
||||
enable.append(v.xml_id)
|
||||
else:
|
||||
disable.append(v.xml_id)
|
||||
return [enable, disable]
|
||||
|
||||
@http.route(['/website/theme_customize'], type='json', auth="public", website=True)
|
||||
def theme_customize(self, enable, disable):
|
||||
""" enable or Disable lists of ``xml_id`` of the inherit templates
|
||||
"""
|
||||
cr, uid, context, pool = request.cr, request.uid, request.context, request.registry
|
||||
view = pool["ir.ui.view"]
|
||||
|
||||
def set_application(ids, application):
|
||||
write_ids = []
|
||||
for v in view.browse(cr, uid, self.get_view_ids(ids), context=context):
|
||||
if v.application == 'always':
|
||||
continue
|
||||
if v.application != application:
|
||||
write_ids.append(v.id)
|
||||
|
||||
if write_ids:
|
||||
view.write(cr, uid, write_ids, {'application': application})
|
||||
|
||||
set_application(disable, 'disabled')
|
||||
set_application(enable, 'enabled')
|
||||
|
||||
return True
|
||||
|
||||
@http.route(['/website/theme_customize_reload'], type='http', auth="public", website=True)
|
||||
def theme_customize_reload(self, href, enable, disable):
|
||||
self.theme_customize(enable and enable.split(",") or [],disable and disable.split(",") or [])
|
||||
return request.redirect(href + ("&theme=true" if "#" in href else "#theme=true"))
|
||||
|
||||
#------------------------------------------------------
|
||||
# Helpers
|
||||
#------------------------------------------------------
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,6 +0,0 @@
|
||||
#website-top-navbar a.btn-link {
|
||||
color: #fff;
|
||||
}
|
||||
.popover .close {
|
||||
color: #fff;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -23,8 +23,8 @@
|
||||
.navbar.navbar-inverse .cke_top {
|
||||
background: transparent;
|
||||
border: none;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-ms-filter: "alpha(opacity=50)";
|
||||
}
|
||||
@@ -57,11 +57,13 @@
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
z-index: 20000;
|
||||
background: #414141, -moz-linear-gradient(#646060, #262626);
|
||||
background: #414141, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646060), color-stop(100%, #262626));
|
||||
background: #414141, -webkit-linear-gradient(#646060, #262626);
|
||||
background: #414141, -moz-linear-gradient(#646060, #262626);
|
||||
background: #414141, -o-linear-gradient(#646060, #262626);
|
||||
background: #414141, linear-gradient(#646060, #262626);
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.oe_website_editorbar li {
|
||||
@@ -240,9 +242,8 @@ ul.oe_menu_editor .disclose {
|
||||
|
||||
/* ---- RTE ---- {{{ */
|
||||
.oe_editable .btn, .btn.oe_editable {
|
||||
-moz-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-moz-user-select: auto;
|
||||
user-select: auto;
|
||||
cursor: text !important;
|
||||
}
|
||||
@@ -400,8 +401,10 @@ ul.oe_menu_editor .disclose {
|
||||
height: 660px;
|
||||
background-color: black;
|
||||
border: 2px solid #1c1f1f;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-ms-border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
@@ -424,13 +427,13 @@ ul.oe_menu_editor .disclose {
|
||||
color: #1c1f1f;
|
||||
}
|
||||
.oe_mobile_preview.modal .modal-content .modal-header .close {
|
||||
color: lightgray;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
|
||||
color: lightgrey;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
.oe_mobile_preview.modal .modal-content .modal-header .close:hover {
|
||||
color: #e00101;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
.oe_mobile_preview.modal .modal-content .modal-body {
|
||||
@@ -461,8 +464,10 @@ ul.oe_menu_editor .disclose {
|
||||
}
|
||||
.oe_seo_configuration .oe_seo_keyword {
|
||||
padding: 0.2em 0.4em 0.2em 0.5em;
|
||||
-moz-border-radius: 0.4em;
|
||||
-webkit-border-radius: 0.4em;
|
||||
-moz-border-radius: 0.4em;
|
||||
-ms-border-radius: 0.4em;
|
||||
-o-border-radius: 0.4em;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
.oe_seo_configuration li.oe_seo_preview_g {
|
||||
@@ -571,3 +576,84 @@ ul.oe_menu_editor .disclose {
|
||||
font-weight: normal;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* ---- CUSTOMIZE THEME ---- {{{ */
|
||||
#theme_error {
|
||||
background: #ffffcc;
|
||||
}
|
||||
|
||||
#theme_customize_modal {
|
||||
overflow: visible;
|
||||
z-index: 1020;
|
||||
background: transparent;
|
||||
display: block;
|
||||
}
|
||||
#theme_customize_modal .modal-dialog {
|
||||
top: 75px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
font-family: "Lato-Regular";
|
||||
font-weight: normal;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
#theme_customize_modal .modal-h5 {
|
||||
color: white;
|
||||
font-family: "Lato-Regular";
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: normal;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
padding: 4px 0 4px 4px;
|
||||
background-color: #bdc3c7;
|
||||
}
|
||||
#theme_customize_modal table {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#theme_customize_modal label {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
#theme_customize_modal label > div, #theme_customize_modal label > img {
|
||||
border: 1px solid white;
|
||||
line-height: 30px;
|
||||
font-size: 0.9em;
|
||||
margin: 2px 4px;
|
||||
}
|
||||
#theme_customize_modal label.checked > div, #theme_customize_modal label.checked > img {
|
||||
box-shadow: 2px 2px 3px #888888;
|
||||
border: 1px solid #666666;
|
||||
}
|
||||
#theme_customize_modal label img {
|
||||
width: 60px;
|
||||
height: 35px;
|
||||
margin: 2px;
|
||||
border: 1px solid rgba(136, 136, 136, 0.5);
|
||||
}
|
||||
#theme_customize_modal label input {
|
||||
display: none;
|
||||
}
|
||||
#theme_customize_modal .loading_backdrop {
|
||||
display: none;
|
||||
}
|
||||
#theme_customize_modal.loading .loading_backdrop {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ---- force the browse to re-compute the stylesheets ---- */
|
||||
body.theme_customize_css_loading {
|
||||
magin-top: 1px;
|
||||
}
|
||||
body.theme_customize_css_loading #wrapwrap {
|
||||
magin-top: -1px;
|
||||
}
|
||||
|
||||
@@ -496,4 +496,74 @@ $infobar_height: 20px
|
||||
|
||||
// }}}
|
||||
|
||||
/* ---- CUSTOMIZE THEME ---- {{{ */
|
||||
#theme_error
|
||||
background: #ffc
|
||||
#theme_customize_modal
|
||||
overflow: visible
|
||||
z-index: 1020
|
||||
background: transparent
|
||||
display: block
|
||||
.modal-dialog
|
||||
top: 75px
|
||||
width: auto
|
||||
margin: 0
|
||||
position: absolute
|
||||
right: 10px
|
||||
font-family: 'Lato-Regular'
|
||||
font-weight: normal
|
||||
text-transform: capitalize
|
||||
letter-spacing: normal
|
||||
.modal-h5
|
||||
color: #ffffff
|
||||
font-family: 'Lato-Regular'
|
||||
font-weight: normal
|
||||
text-transform: uppercase
|
||||
letter-spacing: normal
|
||||
font-size: 14px
|
||||
color: white
|
||||
padding: 4px 0 4px 4px
|
||||
background-color: #bdc3c7
|
||||
table
|
||||
width: 100%
|
||||
margin-bottom: 8px
|
||||
label
|
||||
display: block
|
||||
text-align: center
|
||||
> div, > img
|
||||
border: 1px solid #fff
|
||||
line-height: 30px
|
||||
font-size: 0.9em
|
||||
margin: 2px 4px
|
||||
&.checked
|
||||
> div, > img
|
||||
box-shadow: 2px 2px 3px #888
|
||||
border: 1px solid #666
|
||||
img
|
||||
width: 60px
|
||||
height: 35px
|
||||
margin: 2px
|
||||
border: 1px solid rgba(136, 136, 136, 0.5)
|
||||
input
|
||||
display: none
|
||||
.loading_backdrop
|
||||
display: none
|
||||
&.loading
|
||||
.loading_backdrop
|
||||
display: block
|
||||
width: 100%
|
||||
height: 100%
|
||||
background: #000
|
||||
opacity: 0.3
|
||||
position: absolute
|
||||
z-index: 1
|
||||
|
||||
/* ---- force the browse to re-compute the stylesheets ---- */
|
||||
body.theme_customize_css_loading
|
||||
magin-top: 1px
|
||||
#wrapwrap
|
||||
magin-top: -1px
|
||||
|
||||
// }}}
|
||||
|
||||
// vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
|
||||
|
||||
@@ -642,3 +642,43 @@
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ---- COLOR-PICKER ---- {{{ */
|
||||
.colorpicker {
|
||||
margin: 0 auto;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.colorpicker td {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.colorpicker td > * {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
border-width: 1px;
|
||||
display: block;
|
||||
}
|
||||
.colorpicker .only-text {
|
||||
display: none;
|
||||
}
|
||||
.colorpicker .automatic-color {
|
||||
background: white;
|
||||
border-left: 7px solid #ff3333;
|
||||
border-top: 7px solid #00ee00;
|
||||
border-right: 8px solid #3333ff;
|
||||
border-bottom: 8px solid #ffee00;
|
||||
margin: 4px 3px 3px 3px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.cke_panel_container table.colorpicker tr:first-child td {
|
||||
padding-top: 6px;
|
||||
}
|
||||
.cke_panel_container table.colorpicker tr:last-child td {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
@@ -507,6 +507,38 @@
|
||||
height: 16px
|
||||
display: inline-block
|
||||
|
||||
/* ---- COLOR-PICKER ---- {{{ */
|
||||
|
||||
.colorpicker
|
||||
margin: 0 auto
|
||||
background: transparent
|
||||
border: 0
|
||||
td
|
||||
padding: 0
|
||||
background: transparent
|
||||
> *
|
||||
width: 16px
|
||||
height: 16px
|
||||
border-radius: 2px
|
||||
margin: 3px
|
||||
padding: 0
|
||||
border-width: 1px
|
||||
display: block
|
||||
.only-text
|
||||
display: none
|
||||
.automatic-color
|
||||
background: #fff
|
||||
border-left: 7px solid #f33
|
||||
border-top: 7px solid #0e0
|
||||
border-right: 8px solid #33f
|
||||
border-bottom: 8px solid #fe0
|
||||
margin: 4px 3px 3px 3px
|
||||
width: 0
|
||||
height: 0
|
||||
.cke_panel_container table.colorpicker
|
||||
tr:first-child td
|
||||
padding-top: 6px
|
||||
tr:last-child td
|
||||
padding-bottom: 6px
|
||||
|
||||
|
||||
// }}}
|
||||
|
||||
@@ -238,10 +238,6 @@ footer {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
#themes-list .well {
|
||||
padding: 0 0 20px 0;
|
||||
}
|
||||
|
||||
/* -- Hack for removing double scrollbar from mobile preview -- */
|
||||
div#mobile-preview.modal {
|
||||
overflow: hidden;
|
||||
@@ -393,62 +389,6 @@ div.carousel div.carousel-content {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.oe_dark {
|
||||
background: #eff8f8;
|
||||
background: rgba(200, 200, 200, 0.14);
|
||||
}
|
||||
|
||||
.oe_black {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.oe_green {
|
||||
background-color: #169c78;
|
||||
color: white;
|
||||
}
|
||||
.oe_green .text-muted {
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.oe_blue_light {
|
||||
background-color: #41b6ab;
|
||||
color: white;
|
||||
}
|
||||
.oe_blue_light .text-muted {
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.oe_blue {
|
||||
background-color: #34495e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.oe_orange {
|
||||
background-color: #f05442;
|
||||
color: white;
|
||||
}
|
||||
.oe_orange .text-muted {
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.oe_purple {
|
||||
background-color: #b163a3;
|
||||
color: white;
|
||||
}
|
||||
.oe_purple .text-muted {
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.oe_red {
|
||||
background-color: #9c1b31;
|
||||
color: white;
|
||||
}
|
||||
.oe_red .text-muted {
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
/* Misc */
|
||||
.texttop {
|
||||
vertical-align: top;
|
||||
|
||||
@@ -192,9 +192,6 @@ footer
|
||||
.nav-hierarchy
|
||||
padding-left: 16px
|
||||
|
||||
#themes-list .well
|
||||
padding: 0 0 20px 0
|
||||
|
||||
/* -- Hack for removing double scrollbar from mobile preview -- */
|
||||
div#mobile-preview.modal
|
||||
overflow: hidden
|
||||
@@ -317,50 +314,6 @@ div.carousel
|
||||
vertical-align: middle
|
||||
padding: 32px 0
|
||||
|
||||
/* Background */
|
||||
|
||||
.oe_dark
|
||||
background: #eff8f8
|
||||
background: rgba(200, 200, 200, 0.14)
|
||||
|
||||
.oe_black
|
||||
background-color: rgba(0, 0, 0, 0.9)
|
||||
color: white
|
||||
|
||||
.oe_green
|
||||
background-color: #169C78
|
||||
color: white
|
||||
.text-muted
|
||||
color: #ddd
|
||||
|
||||
.oe_blue_light
|
||||
background-color: #41b6ab
|
||||
color: white
|
||||
.text-muted
|
||||
color: #ddd
|
||||
|
||||
.oe_blue
|
||||
background-color: #34495e
|
||||
color: white
|
||||
|
||||
.oe_orange
|
||||
background-color: #f05442
|
||||
color: white
|
||||
.text-muted
|
||||
color: #ddd
|
||||
|
||||
.oe_purple
|
||||
background-color: #b163a3
|
||||
color: white
|
||||
.text-muted
|
||||
color: #ddd
|
||||
|
||||
.oe_red
|
||||
background-color: #9C1b31
|
||||
color: white
|
||||
.text-muted
|
||||
color: #ddd
|
||||
|
||||
/* Misc */
|
||||
|
||||
.texttop
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -209,6 +209,111 @@
|
||||
}
|
||||
});
|
||||
|
||||
CKEDITOR.plugins.add('customColor', {
|
||||
requires: 'panelbutton,floatpanel',
|
||||
init: function (editor) {
|
||||
function create_button (buttonID, label) {
|
||||
var btnID = buttonID;
|
||||
editor.ui.add(buttonID, CKEDITOR.UI_PANELBUTTON, {
|
||||
label: label,
|
||||
title: label,
|
||||
modes: { wysiwyg: true },
|
||||
editorFocus: true,
|
||||
context: 'font',
|
||||
panel: {
|
||||
css: [ '/web/css/web.assets_common/' + (new Date().getTime()),
|
||||
'/web/css/website.assets_frontend/' + (new Date().getTime()),
|
||||
'/web/css/website.assets_editor/' + (new Date().getTime())],
|
||||
attributes: { 'role': 'listbox', 'aria-label': label },
|
||||
},
|
||||
enable: function () {
|
||||
this.setState(CKEDITOR.TRISTATE_OFF);
|
||||
},
|
||||
disable: function () {
|
||||
this.setState(CKEDITOR.TRISTATE_DISABLED);
|
||||
},
|
||||
onBlock: function (panel, block) {
|
||||
var self = this;
|
||||
var html = openerp.qweb.render('website.colorpicker');
|
||||
block.autoSize = true;
|
||||
block.element.setHtml( html );
|
||||
$(block.element.$).on('click', 'button', function () {
|
||||
self.clicked(this);
|
||||
});
|
||||
if (btnID === "TextColor") {
|
||||
$(".only-text", block.element.$).css("display", "block");
|
||||
$(".only-bg", block.element.$).css("display", "none");
|
||||
}
|
||||
var $body = $(block.element.$).parents("body");
|
||||
setTimeout(function () {
|
||||
$body.css('background-color', '#fff');
|
||||
}, 0);
|
||||
},
|
||||
getClasses: function () {
|
||||
var self = this;
|
||||
var classes = [];
|
||||
var id = this._.id;
|
||||
var block = this._.panel._.panel._.blocks[id];
|
||||
var $root = $(block.element.$);
|
||||
$root.find("button").map(function () {
|
||||
var color = self.getClass(this);
|
||||
if(color) classes.push( color );
|
||||
});
|
||||
return classes;
|
||||
},
|
||||
getClass: function (button) {
|
||||
var color = btnID === "BGColor" ? $(button).attr("class") : $(button).attr("class").replace(/^bg-/i, 'text-');
|
||||
return color.length && color;
|
||||
},
|
||||
clicked: function (button) {
|
||||
var className = this.getClass(button);
|
||||
var ancestor = editor.getSelection().getCommonAncestor();
|
||||
|
||||
editor.focus();
|
||||
this._.panel.hide();
|
||||
editor.fire('saveSnapshot');
|
||||
|
||||
// remove style
|
||||
var classes = [];
|
||||
var $ancestor = $(ancestor.$);
|
||||
var $fonts = $(ancestor.$).find('font');
|
||||
if (!ancestor.$.tagName) {
|
||||
$ancestor = $ancestor.parent();
|
||||
}
|
||||
if ($ancestor.is('font')) {
|
||||
$fonts = $fonts.add($ancestor[0]);
|
||||
}
|
||||
|
||||
$fonts.filter("."+this.getClasses().join(",.")).map(function () {
|
||||
var className = $(this).attr("class");
|
||||
if (classes.indexOf(className) === -1) {
|
||||
classes.push(className);
|
||||
}
|
||||
});
|
||||
for (var k in classes) {
|
||||
editor.removeStyle( new CKEDITOR.style({
|
||||
element: 'font',
|
||||
attributes: { 'class': classes[k] },
|
||||
}) );
|
||||
}
|
||||
|
||||
// add new style
|
||||
if (className) {
|
||||
editor.applyStyle( new CKEDITOR.style({
|
||||
element: 'font',
|
||||
attributes: { 'class': className },
|
||||
}) );
|
||||
}
|
||||
editor.fire('saveSnapshot');
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
create_button("BGColor", "Background Color");
|
||||
create_button("TextColor", "Text Color");
|
||||
}
|
||||
});
|
||||
|
||||
CKEDITOR.plugins.add('oeref', {
|
||||
requires: 'widget',
|
||||
|
||||
@@ -564,7 +669,7 @@
|
||||
website.EditorBarCustomize = openerp.Widget.extend({
|
||||
events: {
|
||||
'mousedown a.dropdown-toggle': 'load_menu',
|
||||
'click ul a[data-action!=ace]': 'do_customize',
|
||||
'click li:not(#html_editor):not(#theme_customize):not(#install_apps) a': 'do_customize',
|
||||
},
|
||||
start: function() {
|
||||
var self = this;
|
||||
@@ -868,7 +973,7 @@
|
||||
fillEmptyBlocks: false,
|
||||
filebrowserImageUploadUrl: "/website/attach",
|
||||
// Support for sharedSpaces in 4.x
|
||||
extraPlugins: 'sharedspace,customdialogs,tablebutton,oeref',
|
||||
extraPlugins: 'customColor,sharedspace,customdialogs,tablebutton,oeref',
|
||||
// Place toolbar in controlled location
|
||||
sharedSpaces: { top: 'oe_rte_toolbar' },
|
||||
toolbar: [{
|
||||
@@ -900,7 +1005,7 @@
|
||||
{name: "Heading 5", element: 'h5'},
|
||||
{name: "Heading 6", element: 'h6'},
|
||||
{name: "Formatted", element: 'pre'},
|
||||
{name: "Address", element: 'address'}
|
||||
{name: "Address", element: 'address'},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@@ -942,6 +942,48 @@
|
||||
}
|
||||
});
|
||||
|
||||
website.snippet.options.colorpicker = website.snippet.Option.extend({
|
||||
start: function () {
|
||||
var self = this;
|
||||
var res = this._super();
|
||||
|
||||
this.$el.find('li').append( openerp.qweb.render('website.colorpicker') );
|
||||
|
||||
var classes = [];
|
||||
this.$el.find("table.colorpicker td > *").map(function () {
|
||||
var $color = $(this);
|
||||
var color = $color.attr("class");
|
||||
if (self.$target.hasClass(color)) {
|
||||
self.color = color;
|
||||
$color.parent().addClass("selected");
|
||||
}
|
||||
classes.push(color);
|
||||
});
|
||||
this.classes = classes.join(" ");
|
||||
|
||||
this.bind_events();
|
||||
return res;
|
||||
},
|
||||
bind_events: function () {
|
||||
var self = this;
|
||||
var $td = this.$el.find("table.colorpicker td");
|
||||
var $colors = $td.children();
|
||||
$colors
|
||||
.mouseenter(function () {
|
||||
self.$target.removeClass(self.classes).addClass($(this).attr("class"));
|
||||
})
|
||||
.mouseleave(function () {
|
||||
self.$target.removeClass(self.classes)
|
||||
.addClass($td.filter(".selected").children().attr("class"));
|
||||
})
|
||||
.click(function () {
|
||||
$td.removeClass("selected");
|
||||
$(this).parent().addClass("selected");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
website.snippet.options.slider = website.snippet.Option.extend({
|
||||
unique_id: function () {
|
||||
var id = 0;
|
||||
@@ -975,10 +1017,10 @@
|
||||
},
|
||||
clean_for_save: function () {
|
||||
this._super();
|
||||
this.$target.find(".item").removeClass("next prev left right active");
|
||||
this.$target.find(".item:first").addClass("active");
|
||||
this.$indicators.find('li').removeClass('active');
|
||||
this.$indicators.find('li:first').addClass('active');
|
||||
this.$target.find(".item").removeClass("next prev left right active")
|
||||
.first().addClass("active");
|
||||
this.$indicators.find('li').removeClass('active')
|
||||
.first().addClass("active");
|
||||
},
|
||||
start : function () {
|
||||
var self = this;
|
||||
|
||||
@@ -0,0 +1,263 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
openerp.website.add_template_file('/website/static/src/xml/website.theme.xml');
|
||||
|
||||
openerp.website.Theme = openerp.Widget.extend({
|
||||
template: 'website.theme_customize',
|
||||
events: {
|
||||
'change input[data-xmlid],input[data-enable],input[data-disable]': 'change_selection',
|
||||
'click .close': 'close',
|
||||
},
|
||||
start: function () {
|
||||
var self = this;
|
||||
this.timer = null;
|
||||
this.reload = false;
|
||||
this.flag = false;
|
||||
this.$el.addClass("theme_customize_modal");
|
||||
this.active_select_tags();
|
||||
this.$inputs = $("input[data-xmlid],input[data-enable],input[data-disable]");
|
||||
setTimeout(function () {self.$el.addClass('in');}, 0);
|
||||
return this.load_xml_data().then(function () {
|
||||
self.flag = true;
|
||||
});
|
||||
},
|
||||
active_select_tags: function () {
|
||||
var uniqueID = 0;
|
||||
var self = this;
|
||||
var $selects = this.$('select:has(option[data-xmlid],option[data-enable],option[data-disable])');
|
||||
$selects.each(function () {
|
||||
uniqueID++;
|
||||
var $select = $(this);
|
||||
var $options = $select.find('option[data-xmlid], option[data-enable], option[data-disable]');
|
||||
$options.each(function () {
|
||||
var $option = $(this);
|
||||
var $input = $('<input style="display: none;" type="radio" name="theme_customize_modal-select-'+uniqueID+'"/>');
|
||||
$input.attr('id', $option.attr('id'));
|
||||
$input.attr('data-xmlid', $option.data('xmlid'));
|
||||
$input.attr('data-enable', $option.data('enable'));
|
||||
$input.attr('data-disable', $option.data('disable'));
|
||||
$option.removeAttr('id');
|
||||
$option.data('input', $input);
|
||||
$input.on('update', function () {
|
||||
$option.attr('selected', $(this).prop("checked"));
|
||||
});
|
||||
self.$el.append($input);
|
||||
});
|
||||
$select.data("value", $options.first());
|
||||
$options.first().attr("selected", true);
|
||||
});
|
||||
$selects.change(function () {
|
||||
var $option = $(this).find('option:selected');
|
||||
$(this).data("value").data("input").prop("checked", true).change();
|
||||
$(this).data("value", $option);
|
||||
$option.data("input").change();
|
||||
});
|
||||
},
|
||||
load_xml_data: function (xml_ids) {
|
||||
var self = this;
|
||||
$('#theme_error').remove();
|
||||
return openerp.jsonRpc('/website/theme_customize_get', 'call', {
|
||||
'xml_ids': this.get_xml_ids(this.$inputs)
|
||||
}).done(function (data) {
|
||||
self.$inputs.filter('[data-xmlid]').each(function () {
|
||||
if (!_.difference(self.get_xml_ids($(this)), data[1]).length) {
|
||||
$(this).prop("checked", false).change();
|
||||
}
|
||||
if (!_.difference(self.get_xml_ids($(this)), data[0]).length) {
|
||||
$(this).prop("checked", true).change();
|
||||
}
|
||||
});
|
||||
}).fail(function (d, error) {
|
||||
$('body').prepend($('<div id="theme_error"/>').text(error.data.message));
|
||||
});
|
||||
},
|
||||
get_inputs: function (string) {
|
||||
return this.$inputs.filter('#'+string.split(",").join(", #"));
|
||||
},
|
||||
get_xml_ids: function ($inputs) {
|
||||
var xml_ids = [];
|
||||
$inputs.each(function () {
|
||||
if ($(this).data('xmlid') && $(this).data('xmlid').length) {
|
||||
xml_ids = xml_ids.concat($(this).data('xmlid').split(","));
|
||||
}
|
||||
});
|
||||
return xml_ids;
|
||||
},
|
||||
compute_stylesheets: function () {
|
||||
var self = this;
|
||||
self.has_error = false;
|
||||
$('link[href*=".assets_"]').attr('data-loading', true);
|
||||
function theme_customize_css_onload() {
|
||||
if ($('link[data-loading]').size()) {
|
||||
$('body').toggleClass('theme_customize_css_loading');
|
||||
setTimeout(theme_customize_css_onload, 50);
|
||||
} else {
|
||||
$('body').removeClass('theme_customize_css_loading');
|
||||
self.$el.removeClass("loading");
|
||||
|
||||
if (window.getComputedStyle($('button[data-toggle="collapse"]:first')[0]).getPropertyValue('position') === 'static' ||
|
||||
window.getComputedStyle($('#theme_customize_modal')[0]).getPropertyValue('display') === 'none') {
|
||||
if (self.has_error) {
|
||||
window.location.hash = "theme=true";
|
||||
window.location.reload();
|
||||
} else {
|
||||
self.has_error = true;
|
||||
$('link[href*=".assets_"][data-error]').removeAttr('data-error').attr('data-loading', true);
|
||||
self.update_stylesheets();
|
||||
setTimeout(theme_customize_css_onload, 50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
theme_customize_css_onload();
|
||||
},
|
||||
update_stylesheets: function () {
|
||||
$('link[href*=".assets_"]').each(function update () {
|
||||
var $style = $(this);
|
||||
var href = $style.attr("href").replace(/[^\/]+$/, new Date().getTime());
|
||||
var $asset = $('<link rel="stylesheet" href="'+href+'"/>');
|
||||
$asset.attr("onload", "$(this).prev().attr('disable', true).remove(); $(this).removeAttr('onload').removeAttr('onerror');");
|
||||
$asset.attr("onerror", "$(this).prev().removeAttr('data-loading').attr('data-error','loading'); $(this).attr('disable', true).remove();");
|
||||
$style.after($asset);
|
||||
});
|
||||
},
|
||||
update_style: function (enable, disable, reload) {
|
||||
var self = this;
|
||||
if (this.$el.hasClass("loading")) return;
|
||||
this.$el.addClass("loading");
|
||||
|
||||
if (!reload && $('link[href*=".assets_"]').size()) {
|
||||
this.compute_stylesheets();
|
||||
return openerp.jsonRpc('/website/theme_customize', 'call', {
|
||||
'enable': enable,
|
||||
'disable': disable
|
||||
}).then(function () {
|
||||
self.update_stylesheets();
|
||||
});
|
||||
} else {
|
||||
var href = '/website/theme_customize_reload'+
|
||||
'?href='+encodeURIComponent(window.location.href)+
|
||||
'&enable='+encodeURIComponent(enable.join(","))+
|
||||
'&disable='+encodeURIComponent(disable.join(","));
|
||||
window.location.href = href;
|
||||
return $.Deferred();
|
||||
}
|
||||
},
|
||||
enable_disable: function (data, enable) {
|
||||
if (!data) return;
|
||||
this.$('#'+data.split(",").join(", #")).each(function () {
|
||||
var check = $(this).prop("checked");
|
||||
var $label = $(this).closest("label");
|
||||
$(this).attr("checked", enable);
|
||||
if (enable) $label.addClass("checked");
|
||||
else $label.removeClass("checked");
|
||||
if (check != enable) {
|
||||
$(this).change();
|
||||
}
|
||||
});
|
||||
},
|
||||
change_selection: function (event) {
|
||||
var self = this;
|
||||
if (this.$el.hasClass("loading")) return;
|
||||
|
||||
var $option = $(event.target),
|
||||
checked = $option.prop("checked");
|
||||
|
||||
if (checked) {
|
||||
this.enable_disable($option.data('enable'), true);
|
||||
this.enable_disable($option.data('disable'), false);
|
||||
$option.closest("label").addClass("checked");
|
||||
} else {
|
||||
$option.closest("label").removeClass("checked");
|
||||
}
|
||||
$option.prop("checked", checked);
|
||||
|
||||
var $enable = this.$inputs.filter('[data-xmlid]:checked');
|
||||
$enable.closest("label").addClass("checked");
|
||||
var $disable = this.$inputs.filter('[data-xmlid]:not(:checked)');
|
||||
$disable.closest("label").removeClass("checked");
|
||||
|
||||
var $sets = this.$inputs.filter('input[data-enable]:not([data-xmlid]), input[data-disable]:not([data-xmlid])');
|
||||
$sets.each(function () {
|
||||
var $set = $(this);
|
||||
var checked = true;
|
||||
if ($set.data("enable")) {
|
||||
self.get_inputs($(this).data("enable")).each(function () {
|
||||
if (!$(this).prop("checked")) checked = false;
|
||||
});
|
||||
}
|
||||
if ($set.data("disable")) {
|
||||
self.get_inputs($(this).data("disable")).each(function () {
|
||||
if ($(this).prop("checked")) checked = false;
|
||||
});
|
||||
}
|
||||
if (checked) {
|
||||
$set.prop("checked", true).closest("label").addClass("checked");
|
||||
} else {
|
||||
$set.prop("checked", false).closest("label").removeClass("checked");
|
||||
}
|
||||
$set.trigger('update');
|
||||
});
|
||||
|
||||
if (this.flag && $option.data('reload') && document.location.href.match(new RegExp( $option.data('reload') ))) {
|
||||
this.reload = true;
|
||||
}
|
||||
|
||||
clearTimeout(this.timer);
|
||||
if (this.flag) {
|
||||
this.timer = setTimeout(function () {
|
||||
self.update_style(self.get_xml_ids($enable), self.get_xml_ids($disable), self.reload);
|
||||
self.reload = false;
|
||||
},0);
|
||||
} else {
|
||||
this.timer = setTimeout(function () { self.reload = false; },0);
|
||||
}
|
||||
},
|
||||
close: function () {
|
||||
var self = this;
|
||||
$('#theme_error').remove();
|
||||
$('link[href*=".assets_"]').removeAttr('data-loading');
|
||||
this.$el.removeClass('in');
|
||||
this.$el.addClass('out');
|
||||
setTimeout(function () {self.destroy();}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
function themeError(message) {
|
||||
var _t = openerp._t;
|
||||
|
||||
if (message.indexOf('lessc')) {
|
||||
message = '<span class="text-muted">' + message + "</span><br/><br/>" + _t("Please install or update node-less");
|
||||
}
|
||||
|
||||
var $error = $( openerp.qweb.render('website.error_dialog', {
|
||||
title: _t("Theme Error"),
|
||||
message: message
|
||||
}));
|
||||
$error.appendTo("body").modal();
|
||||
$error.on('hidden.bs.modal', function () {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
openerp.website.ready().done(function() {
|
||||
function theme_customize() {
|
||||
var error = window.getComputedStyle(document.body, ':before').getPropertyValue('content');
|
||||
if (error && error !== 'none') {
|
||||
return themeError(eval(error));
|
||||
}
|
||||
var Theme = openerp.website.Theme;
|
||||
if (Theme.open && !Theme.open.isDestroyed()) return;
|
||||
Theme.open = new Theme();
|
||||
Theme.open.appendTo("body");
|
||||
}
|
||||
$(document).on('click', "#theme_customize a",theme_customize);
|
||||
if ((window.location.hash || "").indexOf("theme=true") !== -1) {
|
||||
theme_customize();
|
||||
window.location.hash = "";
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,95 @@
|
||||
/* Clean Colors */
|
||||
|
||||
@color-blue: #3498DB;
|
||||
@color-turquoise: #1ABC9C;
|
||||
@color-green: #2ECC71;
|
||||
@color-yellow: #F1C40F;
|
||||
@color-orange: #E67E22;
|
||||
@color-red: #E74C3C;
|
||||
@color-pink: #f74b94;
|
||||
@color-purple: #9B59B6;
|
||||
@color-brown: #7b5844;
|
||||
|
||||
@color-blue-dark: #2980B9;
|
||||
@color-turquoise-dark: #16A085;
|
||||
@color-green-dark: #27AE60;
|
||||
@color-yellow-dark: #f3ac12;
|
||||
@color-orange-dark: #D35400;
|
||||
@color-red-dark: #C0392B;
|
||||
@color-pink-dark: #ea3884;
|
||||
@color-purple-dark: #8E44AD;
|
||||
@color-brown-dark: #604434;
|
||||
|
||||
@color-blue-light: lighten(@color-blue, 20%);
|
||||
@color-turquoise-light: lighten(@color-turquoise, 20%);
|
||||
@color-green-light: lighten(@color-green, 20%);
|
||||
@color-yellow-light: lighten(@color-yellow, 20%);
|
||||
@color-orange-light: lighten(@color-orange, 20%);
|
||||
@color-red-light: lighten(@color-red, 20%);
|
||||
@color-pink-light: lighten(@color-pink, 20%);
|
||||
@color-purple-light: lighten(@color-purple, 20%);
|
||||
@color-brown-light: lighten(@color-brown, 20%);
|
||||
|
||||
@color-clouds: #ECF0F1;
|
||||
@color-silver: #BDC3C7;
|
||||
@color-concrete: #95A5A6;
|
||||
@color-stone: #7F8C8D;
|
||||
@color-asphalt: #34495E;
|
||||
@color-midnight: #2C3E50;
|
||||
|
||||
|
||||
@color-concrete-dark: #445b5c;
|
||||
|
||||
/* +++++ NEW COLORS +++++ */
|
||||
|
||||
@color-wind: #f7f7f7;
|
||||
@color-clay: #e1dcd5;
|
||||
@color-sand: #c5bcb1;
|
||||
@color-beach: #f3bf91;
|
||||
@color-forest: #254c3a;
|
||||
@color-twilight: #3b2c50;
|
||||
@color-burgundy: #8e362d;
|
||||
@color-marine: #212d3a;
|
||||
|
||||
/* GRAYS --------------------------------------------------------- */
|
||||
|
||||
@gray-darker: lighten(#000, 20%);
|
||||
@gray-dark: lighten(#000, 40%);
|
||||
@gray: lighten(#000, 55%);
|
||||
@gray-light: lighten(#000, 70%);
|
||||
@gray-lighter: lighten(#000, 80%);
|
||||
|
||||
/* Backgrounds Colors ------------------------------------------------*/
|
||||
|
||||
@bg-blue: background(@color-blue);
|
||||
@bg-turquoise: background(@color-turquoise);
|
||||
@bg-green: background(@color-green);
|
||||
@bg-yellow: background(@color-yellow);
|
||||
@bg-orange: background(@color-orange);
|
||||
@bg-red: background(@color-red);
|
||||
@bg-pink: background(@color-pink);
|
||||
@bg-purple: background(@color-purple);
|
||||
@bg-brown: background(@color-brown);
|
||||
|
||||
|
||||
/* ---- Default Color HTML Class ---- */
|
||||
|
||||
.bg-blue { background-color: @color-blue;}
|
||||
.bg-turquoise { background-color: @color-turquoise;}
|
||||
.bg-green { background-color: @color-green;}
|
||||
.bg-yellow { background-color: @color-yellow;}
|
||||
.bg-orange { background-color: @color-orange;}
|
||||
.bg-red { background-color: @color-red;}
|
||||
.bg-pink { background-color: @color-pink;}
|
||||
.bg-purple { background-color: @color-purple;}
|
||||
.bg-brown { background-color: @color-brown;}
|
||||
|
||||
.text-blue { color: @color-blue;}
|
||||
.text-turquoise { color: @color-turquoise;}
|
||||
.text-green { color: @color-green;}
|
||||
.text-yellow { color: @color-yellow;}
|
||||
.text-orange { color: @color-orange;}
|
||||
.text-red { color: @color-red;}
|
||||
.text-pink { color: @color-pink;}
|
||||
.text-purple { color: @color-purple;}
|
||||
.text-brown { color: @color-brown;}
|
||||
@@ -0,0 +1,77 @@
|
||||
/* GRAYS --------------------------------------------------------- */
|
||||
|
||||
@gray-darker: lighten(#000, 30%);
|
||||
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
@color-primary: @color-purple;
|
||||
@color-success: @color-purple-dark;
|
||||
@color-info: @color-twilight;
|
||||
@color-warning: @color-red-dark;
|
||||
@color-danger: @color-midnight;
|
||||
|
||||
/* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
.bg-primary {
|
||||
background-color: @color-clouds;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: @color-purple;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: @color-twilight;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: @color-purple-dark;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: @color-midnight;
|
||||
}
|
||||
|
||||
/* TEXTS & LINKS --------------------------------------------------- */
|
||||
|
||||
@text-muted: @color-primary;
|
||||
@link-color: @color-primary;
|
||||
@link-hover-color: @color-success;
|
||||
|
||||
/* BUTTONS --------------------------------------------------------- */
|
||||
|
||||
@btn-primary-bg: @color-silver;
|
||||
@btn-success-bg: @color-concrete;
|
||||
@btn-info-bg: @color-purple;
|
||||
@btn-warning-bg: @color-purple-light;
|
||||
@btn-danger-bg: @color-red;
|
||||
|
||||
.btn .fa {
|
||||
color: white;}
|
||||
|
||||
.btn-default .fa {
|
||||
color: @gray-dark;}
|
||||
|
||||
/* TRANSPARENT BG --------------------------------------------------- */
|
||||
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
|
||||
|
||||
.bg-transparent-color { background: @color-twilight; opacity: 0.85;}
|
||||
.bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
/* Footer ----------------------------------------------------------- */
|
||||
|
||||
#wrapwrap footer {
|
||||
background-color: @color-concrete-dark;
|
||||
color: @gray-light;
|
||||
}
|
||||
footer ul li a {
|
||||
color: @color-clouds;
|
||||
}
|
||||
footer ul li a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer h4 {
|
||||
color: @gray-lighter;
|
||||
padding-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
footer .fa {
|
||||
color: @color-concrete;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
@color-primary: @color-blue;
|
||||
@color-success: @color-turquoise;
|
||||
@color-info: @color-green;
|
||||
@color-warning: @color-asphalt;
|
||||
@color-danger: @color-midnight;
|
||||
|
||||
/* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
.bg-primary {
|
||||
background-color: @color-wind;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: @color-silver;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: @color-blue;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: @color-blue-dark;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: @color-asphalt;
|
||||
}
|
||||
|
||||
/* TEXTS & LINKS --------------------------------------------------- */
|
||||
|
||||
@text-muted: @color-primary;
|
||||
@link-color: @color-primary;
|
||||
@link-hover-color: @color-info;
|
||||
|
||||
/* BUTTONS --------------------------------------------------------- */
|
||||
|
||||
@btn-primary-bg: @color-blue;
|
||||
@btn-success-bg: @color-turquoise;
|
||||
@btn-info-bg: @color-green;
|
||||
@btn-warning-bg: @color-orange;
|
||||
@btn-danger-bg: @color-red;
|
||||
|
||||
.btn .fa {
|
||||
color: white;}
|
||||
|
||||
.btn-default .fa {
|
||||
color: @gray-dark;}
|
||||
|
||||
/* TRANSPARENT BG --------------------------------------------------- */
|
||||
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
|
||||
|
||||
.bg-transparent-color { background: @color-blue-dark; opacity: 0.9;}
|
||||
.bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
/* Footer ----------------------------------------------------------- */
|
||||
|
||||
#wrapwrap footer {
|
||||
background-color: @color-midnight;
|
||||
color: @gray;
|
||||
}
|
||||
footer ul li a {
|
||||
color: @color-silver;
|
||||
}
|
||||
|
||||
footer ul li a:hover {
|
||||
color: @color-clouds;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer h4 {
|
||||
color: @color-stone;
|
||||
padding-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
footer .fa {
|
||||
color: @gray-light;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
@color-primary: @color-green;
|
||||
@color-success: @color-turquoise;
|
||||
@color-info: @color-turquoise-dark;
|
||||
@color-warning: @color-asphalt;
|
||||
@color-danger: @color-midnight;
|
||||
|
||||
/* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
.bg-primary {
|
||||
background-color: @color-wind;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: @color-silver;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: @color-green-dark;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: @color-green;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: @color-forest;
|
||||
}
|
||||
|
||||
/* TEXTS & LINKS --------------------------------------------------- */
|
||||
|
||||
@text-muted: @color-success;
|
||||
@link-color: @color-success;
|
||||
@link-hover-color: @color-primary;
|
||||
|
||||
/* BUTTONS --------------------------------------------------------- */
|
||||
|
||||
@btn-primary-bg: @color-green;
|
||||
@btn-success-bg: @color-turquoise;
|
||||
@btn-info-bg: @color-blue;
|
||||
@btn-warning-bg: @color-orange;
|
||||
@btn-danger-bg: @color-red;
|
||||
|
||||
.btn .fa {
|
||||
color: white;}
|
||||
|
||||
.btn-default .fa {
|
||||
color: @gray-dark;}
|
||||
|
||||
/* TRANSPARENT BG --------------------------------------------------- */
|
||||
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
|
||||
|
||||
.bg-transparent-color { background: @color-green-dark; opacity: 0.9;}
|
||||
.bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
/* Footer ----------------------------------------------------------- */
|
||||
|
||||
#wrapwrap footer {
|
||||
background-color: @color-concrete-dark;
|
||||
color: @gray;
|
||||
}
|
||||
footer ul li a {
|
||||
color: @color-clouds;
|
||||
}
|
||||
footer ul li a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer h4 {
|
||||
color: @color-silver;
|
||||
padding-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
footer .fa {
|
||||
color: @color-clouds;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
@color-primary: @color-orange;
|
||||
@color-success: @color-red;
|
||||
@color-info: @color-yellow-dark;
|
||||
@color-warning: @color-red-dark;
|
||||
@color-danger: @color-orange-dark;
|
||||
|
||||
/* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
.bg-primary {
|
||||
background-color: @color-sand;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: @color-yellow;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: @color-orange;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: @color-yellow-dark;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: @color-orange-dark;
|
||||
}
|
||||
|
||||
/* TEXTS & LINKS ------------------------------------------------------- */
|
||||
|
||||
@text-muted: @gray;
|
||||
@link-color: @color-info;
|
||||
@link-hover-color: @color-primary;
|
||||
|
||||
/* BUTTONS --------------------------------------------------------- */
|
||||
|
||||
@btn-primary-bg: @color-yellow;
|
||||
@btn-success-bg: @color-orange;
|
||||
@btn-info-bg: @color-yellow-dark;
|
||||
@btn-warning-bg: @color-orange-dark;
|
||||
@btn-danger-bg: @color-red-dark;
|
||||
|
||||
.btn .fa {
|
||||
color: white;}
|
||||
|
||||
.btn-default .fa {
|
||||
color: @gray-dark;}
|
||||
|
||||
/* TRANSPARENT BG --------------------------------------------------- */
|
||||
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
|
||||
|
||||
.bg-transparent-color { background: @color-orange-dark; opacity: 0.85;}
|
||||
.bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
/* Footer ----------------------------------------------------------- */
|
||||
|
||||
#wrapwrap footer {
|
||||
background-color: @color-orange-dark;
|
||||
color: white;
|
||||
}
|
||||
footer ul li a {
|
||||
color: @color-beach;
|
||||
}
|
||||
footer ul li a:hover {
|
||||
color: @color-yellow;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer h4 {
|
||||
color: @color-beach;
|
||||
padding-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
footer .fa {
|
||||
color: @color-beach;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
/* GRAYS --------------------------------------------------------- */
|
||||
|
||||
@gray: lighten(#000, 50%);
|
||||
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
@color-primary: @color-red;
|
||||
@color-success: @color-red-dark;
|
||||
@color-info: @color-orange;
|
||||
@color-warning: @color-purple;
|
||||
@color-danger: @color-orange-dark;
|
||||
|
||||
/* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
.bg-primary {
|
||||
background-color: @color-sand;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: @color-red;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: @color-red-dark;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: @color-orange;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: @color-orange-dark;
|
||||
}
|
||||
|
||||
/* TEXT & LINKS -------------------------------------------------------- */
|
||||
|
||||
@text-muted: @gray;
|
||||
@link-color: @color-primary;
|
||||
@link-hover-color: @color-success;
|
||||
|
||||
/* BUTTONS --------------------------------------------------------- */
|
||||
|
||||
@btn-primary-bg: @color-red;
|
||||
@btn-success-bg: @color-orange;
|
||||
@btn-info-bg: @color-yellow-dark;
|
||||
@btn-warning-bg: @color-orange-dark;
|
||||
@btn-danger-bg: @color-red-dark;
|
||||
|
||||
.btn .fa {
|
||||
color: white;}
|
||||
|
||||
.btn-default .fa {
|
||||
color: @gray-dark;}
|
||||
|
||||
/* TRANSPARENT BG --------------------------------------------------- */
|
||||
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
|
||||
|
||||
.bg-transparent-color { background: @color-red-dark; opacity: 0.85;}
|
||||
.bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
/* Footer ----------------------------------------------------------- */
|
||||
|
||||
#wrapwrap footer {
|
||||
background-color: @color-burgundy;
|
||||
color: @gray-lighter;
|
||||
}
|
||||
footer ul li a {
|
||||
color: white;
|
||||
}
|
||||
footer ul li a:hover {
|
||||
color: @color-orange;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer h4 {
|
||||
color: @color-sand;
|
||||
padding-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
footer .fa {
|
||||
color: @color-red;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
@color-primary: @color-concrete;
|
||||
@color-success: @color-turquoise;
|
||||
@color-info: @color-stone;
|
||||
@color-warning: @color-concrete-dark;
|
||||
@color-danger: @color-midnight;
|
||||
|
||||
/* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
.bg-primary {
|
||||
background-color: @color-clouds;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: @color-silver;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: @color-stone;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: @color-concrete-dark;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: @color-asphalt;
|
||||
}
|
||||
|
||||
/* TEXT & LINKS -------------------------------------------------------- */
|
||||
|
||||
@text-muted: @color-primary;
|
||||
@link-color: @color-primary;
|
||||
@link-hover-color: @color-info;
|
||||
|
||||
/* BUTTONS --------------------------------------------------------- */
|
||||
|
||||
@btn-primary-bg: @color-concrete;
|
||||
@btn-success-bg: @color-blue;
|
||||
@btn-info-bg: @color-asphalt;
|
||||
@btn-warning-bg: @color-red;
|
||||
@btn-danger-bg: @color-red-dark;
|
||||
|
||||
.btn .fa {
|
||||
color: white;}
|
||||
|
||||
.btn-default .fa {
|
||||
color: @gray-dark;}
|
||||
|
||||
/* TRANSPARENT BG --------------------------------------------------- */
|
||||
/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
|
||||
|
||||
.bg-transparent-color { background: @color-stone; opacity: 0.9;}
|
||||
.bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
/* Footer ----------------------------------------------------------- */
|
||||
|
||||
#wrapwrap footer {
|
||||
background-color: @color-concrete-dark;
|
||||
color: @color-concrete;
|
||||
}
|
||||
footer ul li a {
|
||||
color: @color-clouds;
|
||||
}
|
||||
footer ul li a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer h4 {
|
||||
color: @color-silver;
|
||||
padding-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
footer .fa {
|
||||
color: @color-clouds;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
@font-family-sans-serif: Georgia, "Times New Roman", Times, serif;
|
||||
@font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@@ -0,0 +1,4 @@
|
||||
#wrapwrap {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
|
||||
<!--
|
||||
Customize Themes
|
||||
|
||||
Use INPUT type 'checkbox' or 'radio' or use OPTION in select box
|
||||
'data-xmlid' (optional) xml id of the template to add if the input is checked.
|
||||
You can set a list of xml id separate by comma (all template is enable or
|
||||
disable in same time)
|
||||
'data-enable' (optional) to checked one or more HTML ids, or list separate by comma
|
||||
'data-disable' (optional) to unchecked one or more HTML ids, or list separate by comma
|
||||
'data-reload="/"' (optional) force the reloading of the page if the url match with
|
||||
the string ( = regexp).
|
||||
Otherwise, only the '/web/css/website.assets_frontend' is reloaded
|
||||
|
||||
For the sets (data-enable and/or data-disable without data-xmlid), the set is
|
||||
automatically checked if:
|
||||
- all related fields are enabled for data-enable
|
||||
- all related fields are disabled for data-disable
|
||||
else unchecked
|
||||
|
||||
HTML apply classes:
|
||||
- 'checked': on the parent label when input is checked
|
||||
- 'in': on the container (e.g.: bootstrap modal) after added in DOM (removed together
|
||||
out is added)
|
||||
- 'out': on the container 1 second before removed from ths DOM
|
||||
- 'loading': on the container/modal when the new css is loading
|
||||
-->
|
||||
|
||||
<t t-name="website.theme_customize">
|
||||
<div id="theme_customize_modal" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="loading_backdrop"></div>
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close">×</button>
|
||||
<h4 class="modal-title" id="mySmallModalLabel">Customize your theme</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h5 class="modal-h5">LAYOUT</h5>
|
||||
<table name="layout">
|
||||
<tr>
|
||||
<td class=" text-center" width="50%">
|
||||
<label class=" center-block">
|
||||
<div class="text-center" style="background-image: url(/website/static/src/img/theme/layout-full.gif); background-size: 100%; line-height: 40px;">FULL WIDTH</div>
|
||||
<input name="layoutvar" type="radio" data-xmlid="" />
|
||||
</label>
|
||||
</td>
|
||||
<td class=" text-center">
|
||||
<label class=" center-block">
|
||||
<div class="text-center" style="background-image: url(/website/static/src/img/theme/layout-boxed.gif); background-size: 100%; line-height: 40px;">BOXED</div>
|
||||
<input name="layoutvar" type="radio" data-xmlid="website.option_layout_boxed"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h5 class="modal-h5">MAIN COLOR</h5>
|
||||
<table name="color">
|
||||
<tr>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/website/static/src/img/theme/variant-stone.gif" alt="Stone" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/website/static/src/img/theme/variant-emerald.gif" alt="Emerald" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="website.option_color_emerald" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/website/static/src/img/theme/variant-cobalt.gif" alt="Cobalt" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="website.option_color_cobalt" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/website/static/src/img/theme/variant-amethyst.gif" alt="Amethyst" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="website.option_color_amethyst" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/website/static/src/img/theme/variant-ruby.gif" alt="Blue" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="website.option_color_ruby" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/website/static/src/img/theme/variant-gold.gif" alt="Gold" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="website.option_color_gold" />
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h5 class="modal-h5">FONTS COMBINATIONS</h5>
|
||||
<table name="font">
|
||||
<tr>
|
||||
<td width="50%">
|
||||
<label>
|
||||
<div>
|
||||
<span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">Helvetica</span>
|
||||
<span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >/ Georgia</span>
|
||||
</div>
|
||||
<input name="theme" type="radio" data-xmlid=""/>
|
||||
</label>
|
||||
</td>
|
||||
<td width="50%">
|
||||
<label>
|
||||
<div>
|
||||
<span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >Georgia</span>
|
||||
<span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">/ Helvetica</span>
|
||||
<input name="theme" type="radio" data-xmlid="website.option_font"/>
|
||||
</div>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- color-picker -->
|
||||
<!-- HTML class to hide option for one mode : only-text, only-bg -->
|
||||
|
||||
<t t-name="website.colorpicker">
|
||||
<table class="colorpicker">
|
||||
<tr>
|
||||
<td><button class="automatic-color" title="Automatic Color"/></td>
|
||||
<td><button class="bg-primary" title="Primary Color"/></td>
|
||||
<td><button class="bg-success" title="Success Color"/></td>
|
||||
<td><button class="bg-info" title="Info Color"/></td>
|
||||
<td><button class="bg-warning" title="Warning Color"/></td>
|
||||
<td><button class="bg-danger" title="Danger Color"/></td>
|
||||
</tr>
|
||||
<tr><td colspan="8"><hr style="width: 100%; height: 1px;"/></td></tr>
|
||||
<tr>
|
||||
<td><button class="bg-blue"/></td>
|
||||
<td><button class="bg-turquoise"/></td>
|
||||
<td><button class="bg-green"/></td>
|
||||
<td><button class="bg-yellow"/></td>
|
||||
<td><button class="bg-red"/></td>
|
||||
<td><button class="bg-pink"/></td>
|
||||
<td><button class="bg-purple"/></td>
|
||||
<td><button class="bg-brown"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
@@ -850,51 +850,23 @@
|
||||
<li class="dropdown-submenu" data-required="true">
|
||||
<a tabindex="-1" href="#">Background</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-2" href="#">Uniform Color</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li data-value='oe_dark'><a>Darken</a></li>
|
||||
<li data-value='oe_green'><a>Green</a></li>
|
||||
<li data-value='oe_red'><a>Red</a></li>
|
||||
<li data-value='oe_blue_light'><a>Turquoise</a></li>
|
||||
<li data-value='oe_blue'><a>Dark Blue</a></li>
|
||||
<li data-value='oe_orange'><a>Orange</a></li>
|
||||
<li data-value='oe_purple'><a>Purple</a></li>
|
||||
<li data-value='oe_black'><a>Black</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-2" href="#">People</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/parallax/parallax_bg.jpg"><a>Sunflower</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-2" href="#">Landscape</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-2" href="#">Various</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/parallax/parallax_bg.jpg"><a>Sunflower</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
|
||||
<li data-value="oe_img_bg" data-src="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
|
||||
<li data-value=""><a>None</a></li>
|
||||
<li><a style="background: none; padding: 5px; border-top: 1px solid #ddd;"></a></li>
|
||||
<li class="oe_custom_bg" data-value="oe_img_bg"><a><b>Choose an image...</b></a></li>
|
||||
@@ -902,6 +874,16 @@
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div data-snippet-option-id='colorpicker'
|
||||
data-selector="section, .carousel, .parallax">
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">Color</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li></li>
|
||||
</ul>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div data-snippet-option-id='carousel'
|
||||
data-selector=".carousel">
|
||||
<li class="divider"></li>
|
||||
|
||||
+104
-268
@@ -3,287 +3,123 @@
|
||||
<data>
|
||||
|
||||
<!--
|
||||
Theme Selector
|
||||
Theme
|
||||
-->
|
||||
|
||||
<template id="website.themes" name="Themes">
|
||||
<t t-call="website.layout">
|
||||
<div id="wrap" groups="base.group_website_publisher">
|
||||
<div class="container">
|
||||
|
||||
<div class="alert alert-info mt32" t-if="theme_changed">
|
||||
<button type="button" class="close" data-dismiss="alert">&times;</button>
|
||||
<p>
|
||||
<h4>Theme Changed!</h4>
|
||||
Have a look at <a href="/">your homepage</a> or try another theme below.
|
||||
</p>
|
||||
</div>
|
||||
<h1 class="text-center">Try a New Theme</h1>
|
||||
<h3 class="text-center text-muted">You'll be able to change the theme at anytime</h3>
|
||||
|
||||
<div class="row mt32" id="themes-list">
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img src="/website/static/src/img/bootswatch_default_thumbnail.png" class="img-responsive" alt="Default Theme"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Default</h3>
|
||||
<p>Pure Bootstrap</p>
|
||||
<a class="btn btn-info" href="/website/theme_change">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template id="website.theme" name="Theme">
|
||||
<!-- Boostrap Fallback if server can't compute less files -->
|
||||
<link id="bootstrap_css" rel='stylesheet' href='/web/static/lib/bootstrap/css/bootstrap.css' t-ignore="true"/>
|
||||
|
||||
<link rel="stylesheet" href='/website/static/src/css/website.css' t-ignore="true"/>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/amelia/thumbnail.png" alt="Amelia"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Amelia</h3>
|
||||
<p>Sweet and cheery</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_amelia">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Boostrap less files -->
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/cerulean/thumbnail.png" alt="Cerulean"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Cerulean</h3>
|
||||
<p>A calm blue sky</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_cerulean">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Boostrap -->
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/cosmo/thumbnail.png" alt="Cosmo"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Cosmo</h3>
|
||||
<p>An ode to Metro</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_cosmo">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/alerts.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/background-variant.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/border-radius.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/buttons.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/center-block.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/clearfix.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/forms.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/gradients.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/grid-framework.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/grid.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/hide-text.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/image.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/labels.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/list-group.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/nav-divider.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/nav-vertical-align.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/opacity.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/pagination.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/panels.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/progress-bar.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/reset-filter.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/resize.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/responsive-visibility.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/size.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/tab-focus.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/table-row.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/text-emphasis.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/text-overflow.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/mixins/vendor-prefixes.less" rel="stylesheet" type="text/less"/>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/cyborg/thumbnail.png" alt="Cyborg"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Cyborg</h3>
|
||||
<p>Jet black and electric blue</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_cyborg">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<link href="/web/static/lib/bootstrap/less/variables.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/normalize.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/print.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/scaffolding.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/type.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/code.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/grid.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/tables.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/forms.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/buttons.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/component-animations.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/glyphicons.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/dropdowns.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/button-groups.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/input-groups.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/navs.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/navbar.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/breadcrumbs.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/pagination.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/pager.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/labels.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/badges.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/jumbotron.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/thumbnails.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/alerts.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/progress-bars.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/media.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/list-group.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/panels.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/wells.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/close.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/modals.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/tooltip.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/popovers.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/carousel.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/utilities.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/web/static/lib/bootstrap/less/responsive-utilities.less" rel="stylesheet" type="text/less"/>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/flatly/thumbnail.png" alt="Flatly"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Flatly</h3>
|
||||
<p>Flat and modern</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_flatly">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/journal/thumbnail.png" alt="Journal"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Journal</h3>
|
||||
<p>Crisp like a new sheet of paper.</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_journal">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/readable/thumbnail.png" alt="Readable"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Readable</h3>
|
||||
<p>Optimized for legibility</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_readable">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/simplex/thumbnail.png" alt="Simplex"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Simplex</h3>
|
||||
<p>Mini and minimalist.</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_simplex">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/slate/thumbnail.png" alt="Slate"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Slate</h3>
|
||||
<p>Shades of gunmetal gray</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_slate">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/spacelab/thumbnail.png" alt="Spacelab"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Spacelab</h3>
|
||||
<p>Silvery and sleek.</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_spacelab">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/united/thumbnail.png" alt="United"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>United</h3>
|
||||
<p>Ubuntu orange and unique font</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_united">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="well text-center">
|
||||
<div class="image">
|
||||
<img class="img-responsive" src="http://bootswatch.com/yeti/thumbnail.png" alt="Yeti"/>
|
||||
</div>
|
||||
<div class="options">
|
||||
<h3>Yeti</h3>
|
||||
<p>A friendly foundation</p>
|
||||
<a class="btn btn-info" href="/website/theme_change?theme_id=website.theme_yeti">Apply</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<link rel="stylesheet" href='/website/static/src/less/colors.less' t-ignore="true"/>
|
||||
</template>
|
||||
|
||||
<!-- Option layout -->
|
||||
|
||||
<!--
|
||||
All Default Themes
|
||||
-->
|
||||
<template id="option_layout_boxed" name="option_layout_boxed" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link href="/website/static/src/less/option_layout_boxed.less" rel="stylesheet" type="text/less"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_amelia" name="Amelia" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/amelia.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/amelia.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<!-- Option color -->
|
||||
|
||||
<template id="website.theme_cerulean" name="Cerulean" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/cerulean.min.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_stone" name="option_color_stone" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after"><link href="/website/static/src/less/option_color_stone.less" rel="stylesheet" type="text/less"/></xpath>
|
||||
</template>
|
||||
<template id="option_color_emerald" name="option_color_emerald" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after"><link href="/website/static/src/less/option_color_emerald.less" rel="stylesheet" type="text/less"/></xpath>
|
||||
</template>
|
||||
<template id="option_color_cobalt" name="option_color_cobalt" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after"><link href="/website/static/src/less/option_color_cobalt.less" rel="stylesheet" type="text/less"/></xpath>
|
||||
</template>
|
||||
<template id="option_color_amethyst" name="option_color_amethyst" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after"><link href="/website/static/src/less/option_color_amethyst.less" rel="stylesheet" type="text/less"/></xpath>
|
||||
</template>
|
||||
<template id="option_color_ruby" name="option_color_ruby" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after"><link href="/website/static/src/less/option_color_ruby.less" rel="stylesheet" type="text/less"/></xpath>
|
||||
</template>
|
||||
<template id="option_color_gold" name="option_color_gold" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after"><link href="/website/static/src/less/option_color_gold.less" rel="stylesheet" type="text/less"/></xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_cosmo" name="Cosmo" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/cosmo.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/cosmo.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_cyborg" name="Cyborg" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/cyborg.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/cyborg.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_flatly" name="Flatly" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/flatly.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/flatly.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_journal" name="Journal" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/journal.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/journal.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_readable" name="Readable" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/readable.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/readable.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_simplex" name="Simplex" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/simplex.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/simplex.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_slate" name="Slate" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/slate.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/slate.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_spacelab" name="Spacelab" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/spacelab.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/spacelab.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_united" name="United" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/united.min.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="website.theme_yeti" name="Yeti" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[@id='bootstrap_css']" position="replace">
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/yeti.min.css' t-ignore="true"/>
|
||||
<link rel='stylesheet' href='/website/static/src/css/bootswatch/yeti.fix.css' t-ignore="true"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font" name="option_font" inherit_id="website.theme" optional="disabled">
|
||||
<xpath expr="//link[last()]" position="after"><link href="/website/static/src/less/option_font.less" rel="stylesheet" type="text/less"/></xpath>
|
||||
</template>
|
||||
|
||||
</data>
|
||||
</openerp>
|
||||
|
||||
@@ -62,9 +62,9 @@
|
||||
Customize <span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#advanced-view-editor" data-action='ace'>HTML Editor</a></li>
|
||||
<li><a href="/page/website.themes">Change Theme</a></li>
|
||||
<li><a href="/web#return_label=Website&action=website.action_module_website">Install Apps</a></li>
|
||||
<li id="html_editor"><a href="#advanced-view-editor" data-action='ace'>HTML Editor</a></li>
|
||||
<li id="theme_customize"><a href="#">Customize Theme</a></li>
|
||||
<li id="install_apps"><a href="/web#return_label=Website&action=website.action_module_website">Install Apps</a></li>
|
||||
<li class="divider"></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -6,11 +6,6 @@
|
||||
|
||||
<!-- Layout and generic templates -->
|
||||
|
||||
<template id="website.theme" name="Theme">
|
||||
<link id="bootstrap_css" rel='stylesheet' href='/web/static/lib/bootstrap/css/bootstrap.css' t-ignore="true"/>
|
||||
<link rel="stylesheet" href='/website/static/src/css/website.css' t-ignore="true"/>
|
||||
</template>
|
||||
|
||||
<template id="website.assets_frontend" name="Website assets">
|
||||
<t t-call="website.theme"/>
|
||||
|
||||
@@ -215,6 +210,7 @@
|
||||
<script type="text/javascript" src="/website/static/src/js/website.snippets.editor.js"></script>
|
||||
<script type="text/javascript" src="/website/static/src/js/website.ace.js"></script>
|
||||
<script type="text/javascript" src="/website/static/src/js/website.translator.js"></script>
|
||||
<script type="text/javascript" src="/website/static/src/js/website.theme.js"></script>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
@@ -3,5 +3,5 @@ import openerp.tests
|
||||
@openerp.tests.common.at_install(False)
|
||||
@openerp.tests.common.post_install(True)
|
||||
class TestUi(openerp.tests.HttpCase):
|
||||
def test_01_admin_shop_tour(self):
|
||||
def test_01_admin_shop_customize_tour(self):
|
||||
self.phantom_js("/", "openerp.Tour.run('shop_customize', 'test')", "openerp.Tour.tours.shop_customize", login="admin")
|
||||
|
||||
Reference in New Issue
Block a user