mirror of https://github.com/grafana/grafana
Rashid Khan
12 years ago
parent
11934adf1a
commit
91db870d77
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,555 @@ |
||||
// Slate 2.3.2 |
||||
// Bootswatch |
||||
// ----------------------------------------------------- |
||||
|
||||
// KIBANA |
||||
.panelCont { |
||||
outline: 1px solid darken(@bodyBackground, 10%); |
||||
border-top: 1px solid lighten(@bodyBackground, 10%); |
||||
padding: 0px 10px 10px 10px; |
||||
background: darken(@bodyBackground, 3%); |
||||
margin: 0px; |
||||
} |
||||
|
||||
|
||||
// TYPOGRAPHY |
||||
// ----------------------------------------------------- |
||||
|
||||
h1, h2, h3, h4, h5, h6 { |
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
code, pre { |
||||
background-color: #F7F7F7; |
||||
border: 1px solid darken(@grayDarker, 5%); |
||||
text-shadow: none; |
||||
} |
||||
|
||||
// SCAFFOLDING |
||||
// ----------------------------------------------------- |
||||
|
||||
legend, .page-header { |
||||
border-bottom: 1px solid @hrBorder; |
||||
} |
||||
|
||||
hr { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
// NAVBAR |
||||
// ----------------------------------------------------- |
||||
|
||||
.navbar { |
||||
|
||||
.navbar-inner { |
||||
#gradient > .vertical-three-colors(@grayDark, darken(@bodyBackground,3%), 70%, darken(@bodyBackground,3%)); |
||||
} |
||||
|
||||
.brand { |
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); |
||||
border-right: none; |
||||
} |
||||
|
||||
.navbar-text { |
||||
padding: 0 15px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.nav > li > a { |
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); |
||||
border-right: 1px solid rgba(0, 0, 0, 0.2); |
||||
border-left: 1px solid rgba(255, 255, 255, 0.1); |
||||
|
||||
&:hover { |
||||
#gradient > .directional(@grayDarker, @grayDark, 280deg); |
||||
border-left: 1px solid transparent; |
||||
border-right: 1px solid transparent; |
||||
} |
||||
} |
||||
|
||||
.nav > li.active > a, |
||||
.nav > li.active > a:hover { |
||||
color: @grayLighter; |
||||
background-color: @grayDark; |
||||
#gradient > .directional(lighten(@grayDarker, 2%), lighten(@grayDark, 2%), 0deg); |
||||
border-right: 1px solid darken(@gray, 15%); |
||||
} |
||||
|
||||
.navbar-search .search-query { |
||||
border: 1px solid darken(@gray, 15%); |
||||
} |
||||
|
||||
.btn, |
||||
.btn-group { |
||||
margin: 4px 0; |
||||
} |
||||
|
||||
.divider-vertical { |
||||
background-color: transparent; |
||||
border-right: none; |
||||
} |
||||
|
||||
.dropdown-menu::after { |
||||
border-bottom: 6px solid @grayDark; |
||||
} |
||||
|
||||
&-inverse { |
||||
|
||||
.navbar-inner { |
||||
#gradient > .vertical-three-colors(darken(@grayDarker, 3%), darken(@grayDarker, 8%), 70%, darken(@grayDarker, 8%)); |
||||
} |
||||
|
||||
.nav li > a { |
||||
background-image: none; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.nav li > a:hover, |
||||
.nav li.active > a, |
||||
.nav li.active > a:hover { |
||||
#gradient > .directional(darken(@grayDarker, 10%), darken(@grayDarker, 5%), 280deg); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (max-width: @navbarCollapseWidth) { |
||||
|
||||
.navbar .nav-collapse { |
||||
|
||||
.nav li > a, |
||||
.nav li > a:hover, |
||||
.nav .active > a, |
||||
.nav .active > a:hover { |
||||
.box-shadow(none); |
||||
color: @grayLighter; |
||||
border: 1px solid transparent; |
||||
background-color: transparent; |
||||
background-image: none; |
||||
} |
||||
|
||||
.nav li > a:hover, |
||||
.nav .active > a:hover { |
||||
background-color: @grayDarker; |
||||
} |
||||
|
||||
.navbar-form, |
||||
.navbar-search { |
||||
border-color: transparent; |
||||
.box-shadow(none); |
||||
} |
||||
|
||||
.nav-header { |
||||
color: @grayLight; |
||||
} |
||||
} |
||||
|
||||
.navbar-inverse .nav-collapse { |
||||
|
||||
.nav li > a:hover, |
||||
.nav .active > a:hover { |
||||
background-color: @grayDarker !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.nav-tabs { |
||||
.active > a, .active a:hover { |
||||
border-bottom: 1px solid darken(@grayDark, 5%);; |
||||
} |
||||
} |
||||
|
||||
div.subnav { |
||||
|
||||
margin: 0 1px; |
||||
//#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); |
||||
border: 1px solid transparent; |
||||
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); |
||||
|
||||
.nav > li > a { |
||||
color: @grayLighter; |
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); |
||||
border-right: 1px solid darken(@gray, 15%); |
||||
border-left: 1px solid @gray; |
||||
|
||||
&:hover { |
||||
color: @grayLighter; |
||||
background-color: @grayDark; |
||||
//#gradient > .directional(@grayDarker, @grayDark, 280deg); |
||||
border-left: 1px solid transparent; |
||||
border-right: 1px solid transparent; |
||||
} |
||||
} |
||||
|
||||
.nav > li.active > a, |
||||
.nav > li.active > a:hover { |
||||
color: @grayLighter; |
||||
background-color: @grayDark; |
||||
#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg); |
||||
border-right: 1px solid darken(@gray, 15%); |
||||
} |
||||
|
||||
.nav > li:first-child > a, |
||||
.nav > li:first-child > a:hover { |
||||
border-left: 1px solid transparent; |
||||
} |
||||
|
||||
.nav > li.active:last-child > a, |
||||
.nav > li:last-child > a:hover { |
||||
border-right: 1px solid darken(@gray, 15%); |
||||
} |
||||
|
||||
.open .dropdown-toggle { |
||||
border-right: 1px solid darken(@gray, 15%); |
||||
border-left: 1px solid @gray; |
||||
} |
||||
|
||||
&.subnav-fixed { |
||||
top: @navbarHeight; |
||||
margin: 0; |
||||
.box-shadow(none); |
||||
|
||||
.nav > li.active:first-child > a, |
||||
.nav > li:first-child > a:hover { |
||||
border-left: 1px solid darken(@gray, 15%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
// NAV |
||||
// ----------------------------------------------------- |
||||
|
||||
.nav { |
||||
|
||||
.nav-header { |
||||
text-shadow: -1px -1px 0 rgba(0,0,0,0.3); |
||||
} |
||||
|
||||
& > li > a { |
||||
//#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); |
||||
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); |
||||
border: none; |
||||
color: @grayLight; |
||||
font-weight: bold; |
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
li.active > a, |
||||
li.active > a:hover { |
||||
background-color: transparent; |
||||
color: @white; |
||||
} |
||||
|
||||
& > li.disabled > a, |
||||
& > li.disabled > a:hover { |
||||
color: @gray; |
||||
} |
||||
|
||||
li > a:hover { |
||||
background-color: transparent; |
||||
color: @grayLighter; |
||||
} |
||||
|
||||
} |
||||
|
||||
.breadcrumb { |
||||
border: 1px solid transparent; |
||||
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); |
||||
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); |
||||
|
||||
a { |
||||
color: @grayLighter; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
li { |
||||
color: @grayLight; |
||||
font-weight: bold; |
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); |
||||
} |
||||
} |
||||
|
||||
.pagination { |
||||
|
||||
ul { |
||||
.box-shadow(none); |
||||
} |
||||
|
||||
ul > li > a, |
||||
ul > li > span { |
||||
border-left: 1px solid @gray; |
||||
border-right: 1px solid darken(@gray, 15%); |
||||
border-top: none; |
||||
border-bottom: none; |
||||
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); |
||||
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); |
||||
color: @grayLighter; |
||||
font-weight: bold; |
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); |
||||
|
||||
&:hover { |
||||
#gradient > .directional(@grayDarker, @grayDark, 280deg); |
||||
border-left: 1px solid transparent; |
||||
} |
||||
} |
||||
|
||||
ul > .active > a, |
||||
ul > .active > a:hover, |
||||
ul > .active > span, |
||||
ul > .active > span:hover { |
||||
color: @grayLighter; |
||||
background-color: @grayDark; |
||||
#gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg); |
||||
border-left: 1px solid transparent; |
||||
} |
||||
|
||||
ul > .disabled > a, |
||||
ul > .disabled > a:hover, |
||||
ul > .disabled > span, |
||||
ul > .disabled > span:hover { |
||||
border-left: 1px solid @gray; |
||||
border-right: 1px solid darken(@gray, 15%); |
||||
border-top: none; |
||||
border-bottom: none; |
||||
#gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray); |
||||
} |
||||
} |
||||
|
||||
.pager { |
||||
|
||||
li > a, |
||||
li > span { |
||||
|
||||
border: 1px solid transparent; |
||||
.box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); |
||||
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); |
||||
|
||||
&:hover { |
||||
#gradient > .directional(@grayDarker, @grayDark, 280deg); |
||||
border: 1px solid transparent; |
||||
} |
||||
} |
||||
|
||||
.disabled a, |
||||
.disabled a:hover { |
||||
background-color: transparent; |
||||
#gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); |
||||
} |
||||
} |
||||
|
||||
// BUTTONS |
||||
// ----------------------------------------------------- |
||||
|
||||
.btn { |
||||
.buttonBackground(@gray, darken(@gray, 10%)); |
||||
.border-radius(3px); |
||||
border: 1px solid @grayDarker; |
||||
} |
||||
|
||||
.btn, .btn:hover { |
||||
color: @white; |
||||
font-weight: bold; |
||||
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
.btn-primary { |
||||
.buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20)); |
||||
color: @grayDark; |
||||
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); |
||||
} |
||||
|
||||
.btn-warning { |
||||
.buttonBackground(lighten(@orange, 15%), @orange); |
||||
} |
||||
|
||||
.btn-danger { |
||||
.buttonBackground(@red, #bd362f); |
||||
} |
||||
|
||||
.btn-success { |
||||
.buttonBackground(@green, #51a351); |
||||
} |
||||
|
||||
.btn-info { |
||||
.buttonBackground(@blue, #2f96b4); |
||||
} |
||||
|
||||
.btn-inverse { |
||||
.buttonBackground(@gray, @grayDarker); |
||||
} |
||||
|
||||
.caret { |
||||
border-top-color: @white; |
||||
} |
||||
|
||||
// TABLES |
||||
// ----------------------------------------------------- |
||||
|
||||
.table { |
||||
|
||||
tbody tr.success td { |
||||
background-color: @successText; |
||||
} |
||||
|
||||
tbody tr.error td { |
||||
background-color: @errorText; |
||||
} |
||||
|
||||
tbody tr.info td { |
||||
background-color: @infoText; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
// FORMS |
||||
// ----------------------------------------------------- |
||||
|
||||
label, input, button, select, textarea, legend { |
||||
color: @textColor; |
||||
} |
||||
|
||||
legend, label { |
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
.input-prepend .add-on, |
||||
.input-append .add-on { |
||||
vertical-align: top; |
||||
background-color: @gray; |
||||
border-top: 1px solid @grayLight; |
||||
border-left: 1px solid @grayLight; |
||||
border-bottom: 1px solid @grayDark; |
||||
border-right: 1px solid @grayDark; |
||||
text-shadow: none; |
||||
} |
||||
|
||||
.input-append .btn, |
||||
.input-prepend .btn { |
||||
margin-top: -1px; |
||||
padding: 5px 14px; |
||||
} |
||||
|
||||
.uneditable-input, |
||||
input[disabled], |
||||
select[disabled], |
||||
textarea[disabled], |
||||
input[readonly], |
||||
select[readonly], |
||||
textarea[readonly] { |
||||
color: @gray; |
||||
background: @grayDarker; |
||||
} |
||||
|
||||
.form-actions { |
||||
border-top: none; |
||||
} |
||||
|
||||
// DROPDOWNS |
||||
// ----------------------------------------------------- |
||||
|
||||
.dropdown-menu { |
||||
.box-shadow(0 5px 5px rgba(0, 0, 0, 0.2)); |
||||
} |
||||
|
||||
.dropdown.open .dropdown-toggle { |
||||
background-color: @grayDark; |
||||
color: @grayLighter; |
||||
} |
||||
|
||||
.dropdown-submenu > a::after { |
||||
border-left-color: @white; |
||||
} |
||||
|
||||
// ALERTS, LABELS, BADGES |
||||
// ----------------------------------------------------- |
||||
|
||||
.label, .alert { |
||||
color: rgba(255, 255, 255, 0.9); |
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); |
||||
.box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3)); |
||||
} |
||||
|
||||
.alert { |
||||
background-color: @orange; |
||||
border-color: @orange; |
||||
|
||||
.alert-heading { |
||||
color: rgba(255, 255, 255, 0.9); |
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4); |
||||
} |
||||
} |
||||
|
||||
.alert-success { |
||||
background-color: @successText; |
||||
border-color: @successText; |
||||
} |
||||
|
||||
.alert-error { |
||||
background-color: @errorText; |
||||
border-color: @errorText; |
||||
} |
||||
|
||||
.alert-info { |
||||
background-color: @infoText; |
||||
border-color: @infoText; |
||||
} |
||||
|
||||
// MISC |
||||
// ----------------------------------------------------- |
||||
|
||||
.well, .hero-unit { |
||||
.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5)); |
||||
} |
||||
|
||||
.thumbnail, |
||||
a.thumbnail:hover { |
||||
border: 1px solid darken(@grayDarker, 5%); |
||||
} |
||||
|
||||
.progress { |
||||
background-color: darken(@grayDarker, 3%); |
||||
#gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%)); |
||||
.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5)); |
||||
} |
||||
|
||||
.footer { |
||||
border-top: 1px solid darken(@grayDarker, 5%); |
||||
|
||||
p { |
||||
color: @textColor; |
||||
} |
||||
} |
||||
|
||||
.modal { |
||||
|
||||
background-color: darken(@grayDark, 5%); |
||||
|
||||
&-header { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
&-body { |
||||
border-bottom: 1px solid #1C1E22; |
||||
} |
||||
|
||||
&-footer { |
||||
border-top: none; |
||||
background-color: @grayDarker; |
||||
.box-shadow(none); |
||||
} |
||||
} |
||||
|
||||
// MEDIA QUERIES |
||||
// ----------------------------------------------------- |
||||
|
||||
@media (max-width: 979px) { |
||||
.navbar .brand { |
||||
border-right: none; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 768px) { |
||||
div.subnav .nav > li + li > a { |
||||
border-top: 1px solid transparent; |
||||
} |
||||
} |
||||
@ -0,0 +1,304 @@ |
||||
// Slate 2.3.2 |
||||
// Variables |
||||
// -------------------------------------------------- |
||||
|
||||
|
||||
// Global values |
||||
// -------------------------------------------------- |
||||
|
||||
|
||||
// Grays |
||||
// ------------------------- |
||||
@black: #000; |
||||
@grayDarker: #272B30; |
||||
@grayDark: #3A3F44; |
||||
@gray: #52575C; |
||||
@grayLight: #7A8288; |
||||
@grayLighter: #BBBFC2; |
||||
@white: #fff; |
||||
|
||||
|
||||
// Accent colors |
||||
// ------------------------- |
||||
@blue: #5bc0de; |
||||
@blueDark: #108CBB; |
||||
@green: #62c462; |
||||
@red: #ee5f5b; |
||||
@yellow: #F6D30D; |
||||
@orange: #f89406; |
||||
@pink: #c3325f; |
||||
@purple: #7a43b6; |
||||
|
||||
|
||||
// Scaffolding |
||||
// ------------------------- |
||||
@bodyBackground: @grayDarker; |
||||
@textColor: #C8C8C8; |
||||
|
||||
|
||||
// Links |
||||
// ------------------------- |
||||
@linkColor: @white; |
||||
@linkColorHover: @white; |
||||
|
||||
|
||||
// Typography |
||||
// ------------------------- |
||||
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
@serifFontFamily: Georgia, "Times New Roman", Times, serif; |
||||
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; |
||||
|
||||
@baseFontSize: 14px; |
||||
@baseFontFamily: @sansFontFamily; |
||||
@baseLineHeight: 21px; |
||||
@altFontFamily: @serifFontFamily; |
||||
|
||||
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily |
||||
@headingsFontWeight: bold; // instead of browser default, bold |
||||
@headingsColor: inherit; // empty to use BS default, @textColor |
||||
|
||||
|
||||
// Component sizing |
||||
// ------------------------- |
||||
// Based on 14px font-size and 20px line-height |
||||
|
||||
@fontSizeLarge: @baseFontSize * 1.25; // ~18px |
||||
@fontSizeSmall: @baseFontSize * 0.85; // ~12px |
||||
@fontSizeMini: @baseFontSize * 0.75; // ~11px |
||||
|
||||
@paddingLarge: 11px 19px; // 44px |
||||
@paddingSmall: 2px 10px; // 26px |
||||
@paddingMini: 0px 6px; // 22px |
||||
|
||||
@baseBorderRadius: 4px; |
||||
@borderRadiusLarge: 6px; |
||||
@borderRadiusSmall: 3px; |
||||
|
||||
|
||||
// Tables |
||||
// ------------------------- |
||||
@tableBackground: transparent; // overall background-color |
||||
@tableBackgroundAccent: darken(@grayDark, 5%); // for striping |
||||
@tableBackgroundHover: @grayDark; // for hover |
||||
@tableBorder: lighten(@grayDark, 2%); // table and cell border |
||||
|
||||
// Buttons |
||||
// ------------------------- |
||||
@btnBackground: @gray; |
||||
@btnBackgroundHighlight: darken(@gray, 10%); |
||||
@btnBorder: darken(@gray, 20%); |
||||
|
||||
@btnPrimaryBackground: @grayLight; |
||||
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); |
||||
|
||||
@btnInfoBackground: @blue; |
||||
@btnInfoBackgroundHighlight: #2f96b4; |
||||
|
||||
@btnSuccessBackground: @green; |
||||
@btnSuccessBackgroundHighlight: #51a351; |
||||
|
||||
@btnWarningBackground: lighten(@orange, 15%); |
||||
@btnWarningBackgroundHighlight: @orange; |
||||
|
||||
@btnDangerBackground: @red; |
||||
@btnDangerBackgroundHighlight: #bd362f; |
||||
|
||||
@btnInverseBackground: @gray; |
||||
@btnInverseBackgroundHighlight: @grayDarker; |
||||
|
||||
// Forms |
||||
// ------------------------- |
||||
@inputText: @white; |
||||
@inputBackground: @gray; |
||||
@inputBorder: @grayLight; |
||||
@inputBorderRadius: @baseBorderRadius; |
||||
@inputDisabledBackground: @grayLighter; |
||||
@formActionsBackground: darken(@grayDarker, 3%); |
||||
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border |
||||
|
||||
|
||||
// Dropdowns |
||||
// ------------------------- |
||||
@dropdownBackground: @grayDark; |
||||
@dropdownBorder: rgba(0,0,0,.2); |
||||
@dropdownDividerTop: transparent; |
||||
@dropdownDividerBottom: darken(@grayDarker, 5%); |
||||
|
||||
@dropdownLinkColor: @grayLight; |
||||
@dropdownLinkColorHover: @white; |
||||
@dropdownLinkColorActive: @white; |
||||
|
||||
@dropdownLinkBackgroundActive: @grayDarker; |
||||
@dropdownLinkBackgroundHover: @grayDarker; |
||||
|
||||
|
||||
|
||||
// COMPONENT VARIABLES |
||||
// -------------------------------------------------- |
||||
|
||||
|
||||
// Z-index master list |
||||
// ------------------------- |
||||
// Used for a bird's eye view of components dependent on the z-axis |
||||
// Try to avoid customizing these :) |
||||
@zindexDropdown: 1000; |
||||
@zindexPopover: 1010; |
||||
@zindexTooltip: 1030; |
||||
@zindexFixedNavbar: 1030; |
||||
@zindexModalBackdrop: 1040; |
||||
@zindexModal: 1050; |
||||
|
||||
|
||||
// Sprite icons path |
||||
// ------------------------- |
||||
@iconSpritePath: "../img/glyphicons-halflings.png"; |
||||
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; |
||||
|
||||
|
||||
// Input placeholder text color |
||||
// ------------------------- |
||||
@placeholderText: @grayLight; |
||||
|
||||
|
||||
// Hr border color |
||||
// ------------------------- |
||||
@hrBorder: darken(@grayDarker, 5%); |
||||
|
||||
|
||||
// Horizontal forms & lists |
||||
// ------------------------- |
||||
@horizontalComponentOffset: 180px; |
||||
|
||||
|
||||
// Wells |
||||
// ------------------------- |
||||
@wellBackground: darken(@grayDarker, 3%); |
||||
|
||||
|
||||
// Navbar |
||||
// ------------------------- |
||||
|
||||
@navbarCollapseWidth: 979px; |
||||
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; |
||||
@navbarHeight: 40px; |
||||
@navbarBackground: @grayDarker; |
||||
@navbarBackgroundHighlight: @grayDark; |
||||
@navbarBorder: darken(@navbarBackground, 12%); |
||||
|
||||
@navbarText: @textColor; |
||||
@navbarLinkColor: @textColor; |
||||
@navbarLinkColorHover: @white; |
||||
@navbarLinkColorActive: @navbarLinkColorHover; |
||||
@navbarLinkBackgroundHover: @grayDark; |
||||
@navbarLinkBackgroundActive: @navbarBackground; |
||||
|
||||
@navbarBrandColor: @grayLighter; |
||||
|
||||
// Inverted navbar |
||||
@navbarInverseBackground: darken(@grayDarker, 10%); |
||||
@navbarInverseBackgroundHighlight: @grayDarker; |
||||
@navbarInverseBorder: #252525; |
||||
|
||||
@navbarInverseText: @grayLight; |
||||
@navbarInverseLinkColor: @grayLight; |
||||
@navbarInverseLinkColorHover: @white; |
||||
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; |
||||
@navbarInverseLinkBackgroundHover: transparent; |
||||
@navbarInverseLinkBackgroundActive: @navbarInverseBackground; |
||||
|
||||
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); |
||||
@navbarInverseSearchBackgroundFocus: @white; |
||||
@navbarInverseSearchBorder: @navbarInverseBackground; |
||||
@navbarInverseSearchPlaceholderColor: #ccc; |
||||
|
||||
@navbarInverseBrandColor: @navbarInverseLinkColor; |
||||
|
||||
|
||||
// Pagination |
||||
// ------------------------- |
||||
@paginationBackground: #fff; |
||||
@paginationBorder: #ddd; |
||||
@paginationActiveBackground: #f5f5f5; |
||||
|
||||
|
||||
// Hero unit |
||||
// ------------------------- |
||||
@heroUnitBackground: darken(@grayDarker, 3%); |
||||
@heroUnitHeadingColor: inherit; |
||||
@heroUnitLeadColor: inherit; |
||||
|
||||
|
||||
// Form states and alerts |
||||
// ------------------------- |
||||
@warningText: #c09853; |
||||
@warningBackground: #fcf8e3; |
||||
@warningBorder: darken(spin(@warningBackground, -10), 3%); |
||||
|
||||
@errorText: #b94a48; |
||||
@errorBackground: #f2dede; |
||||
@errorBorder: darken(spin(@errorBackground, -10), 3%); |
||||
|
||||
@successText: #468847; |
||||
@successBackground: #dff0d8; |
||||
@successBorder: darken(spin(@successBackground, -10), 5%); |
||||
|
||||
@infoText: #3a87ad; |
||||
@infoBackground: #d9edf7; |
||||
@infoBorder: darken(spin(@infoBackground, -10), 7%); |
||||
|
||||
|
||||
// Tooltips and popovers |
||||
// ------------------------- |
||||
@tooltipColor: #fff; |
||||
@tooltipBackground: @dropdownBackground; |
||||
@tooltipArrowWidth: 5px; |
||||
@tooltipArrowColor: @tooltipBackground; |
||||
|
||||
@popoverBackground: @dropdownBackground; |
||||
@popoverArrowWidth: 10px; |
||||
@popoverArrowColor: @dropdownBackground; |
||||
@popoverTitleBackground: lighten(@popoverBackground, 3%); |
||||
|
||||
// Special enhancement for popovers |
||||
@popoverArrowOuterWidth: @popoverArrowWidth + 1; |
||||
@popoverArrowOuterColor: rgba(0,0,0,.25); |
||||
|
||||
|
||||
|
||||
// GRID |
||||
// -------------------------------------------------- |
||||
|
||||
|
||||
// Default 940px grid |
||||
// ------------------------- |
||||
@gridColumns: 12; |
||||
@gridColumnWidth: 60px; |
||||
@gridGutterWidth: 10px; |
||||
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); |
||||
|
||||
// 1200px min |
||||
@gridColumnWidth1200: 70px; |
||||
@gridGutterWidth1200: 10px; |
||||
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); |
||||
|
||||
// 768px-979px |
||||
@gridColumnWidth768: 42px; |
||||
@gridGutterWidth768: 10px; |
||||
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); |
||||
|
||||
|
||||
// Fluid grid |
||||
// ------------------------- |
||||
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); |
||||
@gridGutterWidth: 10px; |
||||
//@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); |
||||
|
||||
// 1200px min |
||||
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); |
||||
@gridGutterWidth: 10px; |
||||
//@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); |
||||
|
||||
// 768px-979px |
||||
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); |
||||
@gridGutterWidth: 10px; |
||||
//@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); |
||||
Loading…
Reference in new issue