mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(sass): variable refactoring
This commit is contained in:
Torkel Ödegaard
parent
febad7b1d7
commit
7c917156ee
@ -1,6 +1,6 @@
|
||||
<ul class="nav gf-timepicker-nav">
|
||||
|
||||
<li class="dashnav-zoom-out">
|
||||
<li class="dashnav-zoom-out" style="padding-top: 4px">
|
||||
<a class='small' ng-click='ctrl.zoom(2)'>
|
||||
Zoom Out
|
||||
</a>
|
||||
|
||||
@ -4,10 +4,12 @@
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/hover";
|
||||
|
||||
|
||||
// BASE
|
||||
@import "base/normalize";
|
||||
@import "base/base";
|
||||
@import "base/reboot";
|
||||
@import "base/type";
|
||||
@import "base/forms";
|
||||
@import "base/fonts";
|
||||
@ -44,7 +46,6 @@
|
||||
@import "components/filter-table";
|
||||
@import "components/scrollbar";
|
||||
@import "components/old_stuff";
|
||||
@import "components/navbar";
|
||||
@import "components/popovers";
|
||||
@import "components/alerts";
|
||||
@import "components/typeahead";
|
||||
|
||||
@ -35,77 +35,26 @@ $critical: #ed2e18;
|
||||
// -------------------------
|
||||
$body-bg: rgb(20,20,20);
|
||||
$page-bg: $gray-darker;
|
||||
$body-color: $gray-lighter;
|
||||
$text-color: $gray-lighter;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
$link-color: darken($white,11%);
|
||||
$link-color-disabled: darken($link-color,30%);
|
||||
$link-color-hover: $white;
|
||||
$link-hover-color: $white;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
$headings-color: darken($white,11%);
|
||||
$abbr-border-color: $gray-light !default;
|
||||
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
$text-muted: darken($link-color,30%);
|
||||
|
||||
$font-size-root: 14px !default;
|
||||
|
||||
$font-size-base: 1rem !default;
|
||||
$font-size-lg: 1.25rem !default;
|
||||
$font-size-sm: .875rem !default;
|
||||
$font-size-xs: .75rem !default;
|
||||
|
||||
$line-height-base: 1.5 !default;
|
||||
|
||||
$font-size-h1: 2.5rem !default;
|
||||
$font-size-h2: 2rem !default;
|
||||
$font-size-h3: 1.75rem !default;
|
||||
$font-size-h4: 1.5rem !default;
|
||||
$font-size-h5: 1.25rem !default;
|
||||
$font-size-h6: 1rem !default;
|
||||
|
||||
$display1-size: 6rem !default;
|
||||
$display2-size: 5.5rem !default;
|
||||
$display3-size: 4.5rem !default;
|
||||
$display4-size: 3.5rem !default;
|
||||
|
||||
$display1-weight: 300 !default;
|
||||
$display2-weight: 300 !default;
|
||||
$display3-weight: 300 !default;
|
||||
$display4-weight: 300 !default;
|
||||
|
||||
$baseFontSize: 14px;
|
||||
$baseFontWeight: 400;
|
||||
$baseFontFamily: $font-family-sans-serif;
|
||||
$baseLineHeight: 20px;
|
||||
$altFontFamily: $font-family-serif;
|
||||
$fontWeightSemi: 600;
|
||||
|
||||
$headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily
|
||||
$headingsFontWeight: 400; // instead of browser default, bold
|
||||
$headingsFontStyle: normal;
|
||||
$headingsColor: darken($white,11%); // empty to use BS default, $text-color
|
||||
$inputText: $gray-light;
|
||||
|
||||
// Component sizing
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 20px line-height
|
||||
|
||||
$font-size-lg: $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: 3px;
|
||||
$borderRadiusLarge: 4px;
|
||||
$borderRadiusSmall: 2px;
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
$blockquote-border-color: $gray-lighter !default;
|
||||
|
||||
$hr-border-color: rgba(0,0,0,.1) !default;
|
||||
|
||||
// Panel
|
||||
// -------------------------
|
||||
@ -140,10 +89,10 @@ $scrollbarBorder: black;
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
$tableBackground: transparent; // overall background-color
|
||||
$tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping
|
||||
$tableBackgroundHover: $gray-dark; // for hover
|
||||
$tableBorder: $gray-dark; // table and cell border
|
||||
$table-bg: transparent; // overall background-color
|
||||
$table-bg-accent: rgba(100, 100, 100, 0.3); // for striping
|
||||
$table-bg-hover: $gray-dark; // for hover
|
||||
$table-border: $gray-dark; // table and cell border
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
@ -190,9 +139,10 @@ $heroUnitLeadColor: inherit;
|
||||
$inputBackground: lighten($gray-dark,5%);
|
||||
$inputBorder: lighten($gray-dark,5%);
|
||||
$inputBorderRadius: $baseBorderRadius;
|
||||
$inputText: $gray-light;
|
||||
$inputDisabledBackground: #555;
|
||||
$formActionsBackground: transparent;
|
||||
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
$labelBackground: $gray-dark;
|
||||
|
||||
|
||||
@ -281,8 +231,8 @@ $paginationActiveBackground: $blue;
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
$warningText: darken(#c09853, 10%);
|
||||
$warningBackground: $orange;
|
||||
$state-warning-text: darken(#c09853, 10%);
|
||||
$state-warning-bg: $orange;
|
||||
|
||||
$errorText: #b94a48;
|
||||
$errorBackground: $btnDangerBackground;
|
||||
|
||||
@ -41,31 +41,25 @@ $critical: #EC2128;
|
||||
|
||||
$body-bg: rgb(20,20,20);
|
||||
$page-bg: $gray-darker;
|
||||
$body-color: $gray-lighter;
|
||||
$text-color: $gray-lighter;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
$link-color: $gray;
|
||||
$link-color-disabled: lighten($link-color,30%);
|
||||
$link-color-hover: darken($link-color, 20%);
|
||||
$link-hover-color: darken($link-color, 20%);
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
$headings-color: $text-color;
|
||||
$abbr-border-color: $gray-light !default;
|
||||
$text-muted: darken($link-color,30%);
|
||||
|
||||
$baseFontSize: 14px;
|
||||
$baseFontWeight: 400;
|
||||
$fontWeightSemi: 600;
|
||||
$baseFontFamily: $font-family-sans-serif;
|
||||
$baseLineHeight: 20px;
|
||||
$altFontFamily: $font-family-serif;
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
$blockquote-border-color: $gray-lighter !default;
|
||||
|
||||
$headingsFontFamily: inherit; // inherit. empty to use BS default, $baseFontFamily
|
||||
$headingsFontWeight: normal; // instead of browser default, bold
|
||||
$headingsFontStyle: normal;
|
||||
$headingsColor: $text-color; // empty to use BS default, $text-color
|
||||
$hr-border-color: rgba(0,0,0,.1) !default;
|
||||
|
||||
// Panel
|
||||
// -------------------------
|
||||
@ -93,9 +87,9 @@ $code-tag-bg: #ddd;
|
||||
// -------------------------
|
||||
// Based on 14px font-size and 20px line-height
|
||||
|
||||
$font-size-lg: $baseFontSize * 1.25; // ~18px
|
||||
$fontSizeSmall: $baseFontSize * 0.85; // ~12px
|
||||
$fontSizeMini: $baseFontSize * 0.75; // ~11px
|
||||
$font-size-lg: $font-size-base * 1.25; // ~18px
|
||||
$font-size-sm: $font-size-base * 0.85; // ~12px
|
||||
$font-size-xs: $font-size-base * 0.75; // ~11px
|
||||
|
||||
$paddingLarge: 22px 30px; // 66px
|
||||
$paddingSmall: 2px 10px; // 26px
|
||||
@ -117,10 +111,12 @@ $grafanaListMainLinkColor: $text-color;
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
$tableBackground: transparent; // overall background-color
|
||||
$tableBackgroundAccent: #f9f9f9; // for striping
|
||||
$tableBackgroundHover: #E8F8FD; // for hover
|
||||
$tableBorder: #ddd; // table and cell border
|
||||
$table-bg: transparent; // overall background-color
|
||||
$table-bg-accent: #f9f9f9; // for striping
|
||||
$table-bg-hover: #E8F8FD; // for hover
|
||||
$table-bg-active: $table-bg-hover !default;
|
||||
$table-border: #ddd; // table and cell border
|
||||
|
||||
|
||||
// Scrollbars
|
||||
$scrollbarBackground: $gray-lighter;
|
||||
@ -168,7 +164,7 @@ $inputBorder: $gray-lighter;
|
||||
$inputBorderRadius: $baseBorderRadius;
|
||||
$inputDisabledBackground: $gray-lighter;
|
||||
$formActionsBackground: #f5f5f5;
|
||||
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
$inputText: #020202;
|
||||
$labelBackground: #f8f8f8;
|
||||
|
||||
@ -272,8 +268,8 @@ $heroUnitLeadColor: inherit;
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
$warningText: lighten($orange, 10%);
|
||||
$warningBackground: $orange;
|
||||
$state-warning-text: lighten($orange, 10%);
|
||||
$state-warning-bg: $orange;
|
||||
$warningBorder: transparent;
|
||||
|
||||
$errorText: lighten($red, 10%);
|
||||
|
||||
@ -1,5 +1,48 @@
|
||||
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-flex: false !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: false !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: false !default;
|
||||
$enable-hover-media-query: false !default;
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
|
||||
|
||||
// Spacing
|
||||
//
|
||||
// Control the default styling of most Bootstrap elements by modifying these
|
||||
// variables. Mostly focused on spacing.
|
||||
|
||||
$spacer: 1rem !default;
|
||||
$spacer-x: $spacer !default;
|
||||
$spacer-y: $spacer !default;
|
||||
$spacers: (
|
||||
0: (
|
||||
x: 0,
|
||||
y: 0
|
||||
),
|
||||
1: (
|
||||
x: $spacer-x,
|
||||
y: $spacer-y
|
||||
),
|
||||
2: (
|
||||
x: ($spacer-x * 1.5),
|
||||
y: ($spacer-y * 1.5)
|
||||
),
|
||||
3: (
|
||||
x: ($spacer-x * 3),
|
||||
y: ($spacer-y * 3)
|
||||
)
|
||||
) !default;
|
||||
$border-width: 1px !default;
|
||||
|
||||
|
||||
// Grid breakpoints
|
||||
//
|
||||
// Define the minimum and maximum dimensions at which your layout will change,
|
||||
@ -44,3 +87,79 @@ $form-sizes: (
|
||||
xxxl: 400px
|
||||
) !default;
|
||||
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
|
||||
$font-size-root: 14px !default;
|
||||
|
||||
$font-size-base: 1rem !default;
|
||||
$font-size-lg: 1.25rem !default;
|
||||
$font-size-sm: .875rem !default;
|
||||
$font-size-xs: .75rem !default;
|
||||
|
||||
$line-height-base: 1.5 !default;
|
||||
$font-weight-semi-bold: 600;
|
||||
|
||||
$font-size-h1: 2.5rem !default;
|
||||
$font-size-h2: 2rem !default;
|
||||
$font-size-h3: 1.75rem !default;
|
||||
$font-size-h4: 1.5rem !default;
|
||||
$font-size-h5: 1.25rem !default;
|
||||
$font-size-h6: 1rem !default;
|
||||
|
||||
$display1-size: 6rem !default;
|
||||
$display2-size: 5.5rem !default;
|
||||
$display3-size: 4.5rem !default;
|
||||
$display4-size: 3.5rem !default;
|
||||
|
||||
$display1-weight: 400 !default;
|
||||
$display2-weight: 400 !default;
|
||||
$display3-weight: 400 !default;
|
||||
$display4-weight: 400 !default;
|
||||
|
||||
$lead-font-size: 1.25rem !default;
|
||||
$lead-font-weight: 300 !default;
|
||||
|
||||
$headings-margin-bottom: ($spacer / 2) !default;
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: 400 !default;
|
||||
$headings-line-height: 1.1 !default;
|
||||
|
||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||
$blockquote-border-width: .25rem !default;
|
||||
|
||||
$hr-border-width: $border-width !default;
|
||||
|
||||
$dt-font-weight: bold !default;
|
||||
|
||||
$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
|
||||
$nested-kbd-font-weight: bold !default;
|
||||
|
||||
$list-inline-padding: 5px !default;
|
||||
|
||||
|
||||
$paddingLarge: 11px 19px; // 44px
|
||||
$paddingSmall: 2px 10px; // 26px
|
||||
$paddingMini: 0px 6px; // 22px
|
||||
|
||||
$baseBorderRadius: 3px;
|
||||
$borderRadiusLarge: 4px;
|
||||
$borderRadiusSmall: 2px;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
$link-decoration: none !default;
|
||||
$link-hover-decoration: none !default;
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
$table-cell-padding: .75rem !default;
|
||||
$table-sm-cell-padding: .3rem !default;
|
||||
@ -1,36 +0,0 @@
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: $baseFontFamily;
|
||||
font-size: $baseFontSize;
|
||||
line-height: $baseLineHeight;
|
||||
color: $text-color;
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-color-hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -7,7 +7,7 @@
|
||||
code,
|
||||
pre {
|
||||
@include font-family-monospace();
|
||||
font-size: $baseFontSize - 2;
|
||||
font-size: $font-size-base - 2;
|
||||
background-color: $code-tag-bg;
|
||||
color: $text-color;
|
||||
border: 1px solid darken($code-tag-bg, 15%);
|
||||
@ -25,9 +25,9 @@ code {
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
margin: 0 0 $baseLineHeight / 2;
|
||||
font-size: $baseFontSize - 1; // 14px to 13px
|
||||
line-height: $baseLineHeight;
|
||||
margin: 0 0 $line-height-base / 2;
|
||||
font-size: $font-size-base - 1; // 14px to 13px
|
||||
line-height: $line-height-base;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
@ -36,7 +36,7 @@ pre {
|
||||
|
||||
// Make prettyprint styles more spaced out for readability
|
||||
&.prettyprint {
|
||||
margin-bottom: $baseLineHeight;
|
||||
margin-bottom: $line-height-base;
|
||||
}
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
// Make all forms have space below them
|
||||
form {
|
||||
margin: 0 0 $baseLineHeight;
|
||||
margin: 0 0 $line-height-base;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@ -22,16 +22,16 @@ legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: $baseLineHeight;
|
||||
font-size: $baseFontSize * 1.5;
|
||||
line-height: $baseLineHeight * 2;
|
||||
margin-bottom: $line-height-base;
|
||||
font-size: $font-size-base * 1.5;
|
||||
line-height: $line-height-base * 2;
|
||||
color: $gray-dark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: $baseLineHeight * .75;
|
||||
font-size: $line-height-base * .75;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
@ -42,13 +42,13 @@ input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
@include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
|
||||
@include font-shorthand($font-size-base,normal,$line-height-base); // Set size, weight, line-height here
|
||||
}
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
||||
font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
|
||||
}
|
||||
|
||||
// Identify controls by their labels
|
||||
@ -78,10 +78,10 @@ input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
height: $baseLineHeight;
|
||||
height: $line-height-base;
|
||||
padding: 4px 6px;
|
||||
font-size: $baseFontSize;
|
||||
line-height: $baseLineHeight;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
color: $inputText;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
349
public/sass/base/_reboot.scss
Normal file
349
public/sass/base/_reboot.scss
Normal file
@ -0,0 +1,349 @@
|
||||
// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
|
||||
|
||||
// Reboot
|
||||
//
|
||||
// Global resets to common HTML elements and more for easier usage by Bootstrap.
|
||||
// Adds additional rules on top of Normalize.css, including several overrides.
|
||||
|
||||
|
||||
// Reset the box-sizing
|
||||
//
|
||||
// Change from `box-sizing: content-box` to `border-box` so that when you add
|
||||
// `padding` or `border`s to an element, the overall declared `width` does not
|
||||
// change. For example, `width: 100px;` will always be `100px` despite the
|
||||
// `border: 10px solid red;` and `padding: 20px;`.
|
||||
//
|
||||
// Heads up! This reset may cause conflicts with some third-party widgets. For
|
||||
// recommendations on resolving such conflicts, see
|
||||
// http://getbootstrap.com/getting-started/#third-box-sizing.
|
||||
//
|
||||
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
|
||||
// Make viewport responsive
|
||||
//
|
||||
// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
|
||||
// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
|
||||
// Eventually @viewport will replace <meta name="viewport">.
|
||||
//
|
||||
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
|
||||
// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
|
||||
// and the fix for that involves a snippet of JavaScript to sniff the user agent
|
||||
// and apply some conditional CSS.
|
||||
//
|
||||
// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
|
||||
//
|
||||
// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
|
||||
// `.class-name { @import "bootstrap"; }`).
|
||||
@at-root {
|
||||
@-ms-viewport { width: device-width; }
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reset HTML, body, and more
|
||||
//
|
||||
|
||||
html {
|
||||
// Sets a specific default `font-size` for user with `rem` type scales.
|
||||
font-size: $font-size-root;
|
||||
// As a side-effect of setting the @viewport above,
|
||||
// IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
|
||||
// Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
|
||||
// thus making it hard to click on stuff near the right edge of the page.
|
||||
// So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
|
||||
// See https://github.com/twbs/bootstrap/issues/18543
|
||||
-ms-overflow-style: scrollbar;
|
||||
// Changes the default tap highlight to be completely transparent in iOS.
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
// Make the `body` use the `font-size-root`
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
// Go easy on the eyes and use something other than `#000` for text
|
||||
color: $body-color;
|
||||
// By default, `<body>` has no `background-color` so we set one as a best practice.
|
||||
background-color: $body-bg;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
// This prevents an unwanted focus outline from appearing around elements that
|
||||
// might still respond to pointer events.
|
||||
//
|
||||
// Credit: https://github.com/suitcss/base
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
// Remove top margins from headings
|
||||
//
|
||||
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||
// margin for easier control within type scales as it avoids margin collapsing.
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Reset margins on paragraphs
|
||||
//
|
||||
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||
// bottom margin to use `rem` units instead of `em`.
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Abbreviations and acronyms
|
||||
abbr[title],
|
||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted $abbr-border-color;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: $dt-font-weight;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Links
|
||||
//
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
pre {
|
||||
// Remove browser default top margin
|
||||
margin-top: 0;
|
||||
// Reset browser default of `1em` to use `rem`s
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
figure {
|
||||
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
|
||||
// We reset that to create a better flow in-page.
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Images
|
||||
//
|
||||
|
||||
img {
|
||||
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
||||
// centers them. This won't apply should you reset them to `block` level.
|
||||
vertical-align: middle;
|
||||
// Note: `<img>`s are deliberately not made responsive by default.
|
||||
// For the rationale behind this, see the comments on the `.img-fluid` class.
|
||||
}
|
||||
|
||||
|
||||
// iOS "clickable elements" fix for role="button"
|
||||
//
|
||||
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
||||
// for traditionally non-focusable elements with role="button"
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
|
||||
//
|
||||
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
|
||||
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
||||
// However, they DO support removing the click delay via `touch-action: manipulation`.
|
||||
// See:
|
||||
// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
|
||||
// * http://caniuse.com/#feat=css-touch-action
|
||||
// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
|
||||
table {
|
||||
// Reset for nesting within parents with `background-color`.
|
||||
background-color: $table-bg;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: $table-cell-padding;
|
||||
padding-bottom: $table-cell-padding;
|
||||
color: $text-muted;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
// Centered by default, but left-align-ed to match the `td`s below.
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
label {
|
||||
// Allow labels to use `margin` for spacing.
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Work around a Firefox/IE bug where the transparent `button` background
|
||||
// results in a loss of the default `button` focus styles.
|
||||
//
|
||||
// Credit: https://github.com/suitcss/base/
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
// Remove all `margin`s so our classes don't have to do it themselves.
|
||||
margin: 0;
|
||||
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
|
||||
// properly inherited. However, `line-height` isn't addressed there. Using this
|
||||
// ensures we don't need to unnecessarily redeclare the global font stack.
|
||||
line-height: inherit;
|
||||
// iOS adds rounded borders by default
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
|
||||
// so we reset that to ensure it behaves more like a standard block element.
|
||||
// See https://github.com/twbs/bootstrap/issues/12359.
|
||||
min-width: 0;
|
||||
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
// Reset the entire legend element to match the `fieldset`
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
// border: 0;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
// This overrides the extra rounded corners on search inputs in iOS so that our
|
||||
// `.form-control` class can properly style them. Note that this cannot simply
|
||||
// be added to `.form-control` as it's not specific enough. For details, see
|
||||
// https://github.com/twbs/bootstrap/issues/11586.
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// todo: needed?
|
||||
output {
|
||||
display: inline-block;
|
||||
// font-size: $font-size-base;
|
||||
// line-height: $line-height;
|
||||
// color: $input-color;
|
||||
}
|
||||
|
||||
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
@ -7,13 +7,13 @@
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 $baseLineHeight / 2;
|
||||
margin: 0 0 $line-height-base / 2;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: $baseLineHeight;
|
||||
font-size: $baseFontSize * 1.5;
|
||||
margin-bottom: $line-height-base;
|
||||
font-size: $font-size-base * 1.5;
|
||||
font-weight: 200;
|
||||
line-height: $baseLineHeight * 1.5;
|
||||
line-height: $line-height-base * 1.5;
|
||||
}
|
||||
|
||||
// Emphasis & misc
|
||||
@ -21,11 +21,9 @@ p {
|
||||
// -------------------------
|
||||
|
||||
// Ex: 14px base font * 85% = about 12px
|
||||
.small, small { font-size: 85%; }
|
||||
.large { font-size: 120%; }
|
||||
|
||||
small { font-size: 85%; }
|
||||
strong { font-weight: bold; }
|
||||
em { font-style: italic; color: $headingsColor; }
|
||||
em { font-style: italic; color: $headings-color; }
|
||||
cite { font-style: normal; }
|
||||
|
||||
// Utility classes
|
||||
@ -33,9 +31,9 @@ cite { font-style: normal; }
|
||||
a.muted:hover,
|
||||
a.muted:focus { color: darken($gray-light, 10%); }
|
||||
|
||||
.text-warning { color: $warningText; }
|
||||
.text-warning { color: $state-warning-text; }
|
||||
a.text-warning:hover,
|
||||
a.text-warning:focus { color: darken($warningText, 10%); }
|
||||
a.text-warning:focus { color: darken($state-warning-text, 10%); }
|
||||
|
||||
.text-error { color: $errorText; }
|
||||
a.text-error:hover,
|
||||
@ -54,40 +52,77 @@ a { cursor: pointer; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
|
||||
|
||||
//
|
||||
// Headings
|
||||
// -------------------------
|
||||
//
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: ($baseLineHeight / 2) 0;
|
||||
font-family: $headingsFontFamily;
|
||||
font-weight: $headingsFontWeight;
|
||||
line-height: $baseLineHeight;
|
||||
color: $headingsColor;
|
||||
text-rendering: optimizelegibility; // Fix the character spacing for headings
|
||||
font-style: $headingsFontStyle;
|
||||
small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: $gray-light;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 { line-height: $baseLineHeight * 2; }
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
h2, .h2 { font-size: $font-size-h2; }
|
||||
h3, .h3 { font-size: $font-size-h3; }
|
||||
h4, .h4 { font-size: $font-size-h4; }
|
||||
h5, .h5 { font-size: $font-size-h5; }
|
||||
h6, .h6 { font-size: $font-size-h6; }
|
||||
|
||||
h1 { font-size: $baseFontSize * 2.00; } // ~38px
|
||||
h2 { font-size: $baseFontSize * 1.75; } // ~32px
|
||||
h3 { font-size: $baseFontSize * 1.50; } // ~24px
|
||||
h4 { font-size: $baseFontSize * 1.25; } // ~18px
|
||||
h5 { font-size: $baseFontSize; }
|
||||
h6 { font-size: $baseFontSize * 0.85; } // ~12px
|
||||
.lead {
|
||||
font-size: $lead-font-size;
|
||||
font-weight: $lead-font-weight;
|
||||
}
|
||||
|
||||
h1 small { font-size: $baseFontSize * 1.75; } // ~24px
|
||||
h2 small { font-size: $baseFontSize * 1.25; } // ~18px
|
||||
h3 small { font-size: $baseFontSize; }
|
||||
h4 small { font-size: $baseFontSize; }
|
||||
// Type display classes
|
||||
.display-1 {
|
||||
font-size: $display1-size;
|
||||
font-weight: $display1-weight;
|
||||
}
|
||||
.display-2 {
|
||||
font-size: $display2-size;
|
||||
font-weight: $display2-weight;
|
||||
}
|
||||
.display-3 {
|
||||
font-size: $display3-size;
|
||||
font-weight: $display3-weight;
|
||||
}
|
||||
.display-4 {
|
||||
font-size: $display4-size;
|
||||
font-weight: $display4-weight;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Horizontal rules
|
||||
//
|
||||
|
||||
hr {
|
||||
margin-top: $spacer-y;
|
||||
margin-bottom: $spacer-y;
|
||||
border: 0;
|
||||
border-top: $hr-border-width solid $hr-border-color;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Emphasis
|
||||
//
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
mark,
|
||||
.mark {
|
||||
padding: .2em;
|
||||
background-color: $state-warning-bg;
|
||||
}
|
||||
|
||||
|
||||
// Lists
|
||||
@ -96,7 +131,7 @@ h4 small { font-size: $baseFontSize; }
|
||||
// Unordered and Ordered lists
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
margin: 0 0 $baseLineHeight / 2 25px;
|
||||
margin: 0 0 $line-height-base / 2 25px;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
@ -105,7 +140,7 @@ ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
li {
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
// Remove default list styles
|
||||
@ -129,17 +164,17 @@ ol.inline {
|
||||
|
||||
// Description Lists
|
||||
dl {
|
||||
margin-bottom: $baseLineHeight;
|
||||
margin-bottom: $line-height-base;
|
||||
}
|
||||
dt,
|
||||
dd {
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin-left: $baseLineHeight / 2;
|
||||
margin-left: $line-height-base / 2;
|
||||
}
|
||||
// Horizontal layout (like forms)
|
||||
.dl-horizontal {
|
||||
@ -161,7 +196,7 @@ dd {
|
||||
|
||||
// Horizontal rules
|
||||
hr {
|
||||
margin: $baseLineHeight 0;
|
||||
margin: $line-height-base 0;
|
||||
border: 0;
|
||||
border-top: 1px solid $hrBorder;
|
||||
border-bottom: 1px solid $white;
|
||||
@ -182,17 +217,17 @@ abbr.initialism {
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
padding: 0 0 0 15px;
|
||||
margin: 0 0 $baseLineHeight;
|
||||
margin: 0 0 $line-height-base;
|
||||
border-left: 5px solid $gray-lighter;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: $baseFontSize * 1.25;
|
||||
font-size: $font-size-base * 1.25;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
color: $gray-light;
|
||||
&:before {
|
||||
content: '\2014 \00A0';
|
||||
@ -232,9 +267,9 @@ blockquote:after {
|
||||
// Addresses
|
||||
address {
|
||||
display: block;
|
||||
margin-bottom: $baseLineHeight;
|
||||
margin-bottom: $line-height-base;
|
||||
font-style: normal;
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
a.external-link {
|
||||
@ -249,7 +284,7 @@ a.external-link {
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: $link-color-hover;
|
||||
color: $link-hover-color;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
// Block level the page header small tag for readability
|
||||
.page-header h1 small {
|
||||
display: block;
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
// Update checkboxes for iOS
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
|
||||
.alert {
|
||||
padding: 8px 35px 13px 14px;
|
||||
margin-bottom: $baseLineHeight;
|
||||
margin-bottom: $line-height-base;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
background-color: $warningBackground;
|
||||
background-color: $state-warning-bg;
|
||||
position: relative;
|
||||
color: $white;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
||||
@ -32,7 +32,7 @@
|
||||
background-color: $infoBackground;
|
||||
}
|
||||
.alert-warning {
|
||||
background-color: $warningBackground;
|
||||
background-color: $state-warning-bg;
|
||||
}
|
||||
|
||||
.page-alert-list {
|
||||
@ -63,6 +63,6 @@
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
font-weight: $fontWeightSemi;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
margin-right: 10px;
|
||||
font-size: $baseFontSize;
|
||||
line-height: $baseLineHeight;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
@ -57,14 +57,14 @@
|
||||
|
||||
.btn-small {
|
||||
padding: 2px 10px;
|
||||
font-size: $fontSizeSmall;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.btn-mini {
|
||||
padding: 2px 6px;
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
font-size: $fontSizeMini;
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
|
||||
// Set the backgrounds
|
||||
|
||||
@ -143,7 +143,7 @@ div.flot-text {
|
||||
|
||||
.panel-title {
|
||||
border: 0px;
|
||||
font-weight: $fontWeightSemi;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
|
||||
margin: (($line-height-base / 2) - 1) 1px; // 8px 1px
|
||||
overflow: hidden;
|
||||
background-color: $dropdownDividerTop;
|
||||
border-bottom: 1px solid $dropdownDividerBottom;
|
||||
@ -73,7 +73,7 @@
|
||||
padding: 3px 20px 3px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
color: $dropdownLinkColor;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ $gf-form-margin: 4px;
|
||||
background-color: $labelBackground;
|
||||
display: block;
|
||||
padding: 8px 7px;
|
||||
font-size: $fontSizeSmall;
|
||||
font-size: $font-size-sm;
|
||||
margin-right: $gf-form-margin;
|
||||
}
|
||||
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
.share-snapshot-info-text {
|
||||
margin: 10px 105px;
|
||||
strong {
|
||||
color: $headingsColor;
|
||||
color: $headings-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,6 +104,7 @@
|
||||
img {
|
||||
width: 30px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
.top-nav-logo-background {
|
||||
display: inline-block;
|
||||
@ -111,8 +112,8 @@
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
background: $iconContainerBackground;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.icon-gf-grafana_wordmark {
|
||||
font-size: 21px;
|
||||
@ -129,7 +130,7 @@
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
padding: 16px 17px 16px 13px;
|
||||
padding: 11px 17px 12px 13px;
|
||||
}
|
||||
|
||||
.fa-th-large {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
.nav {
|
||||
margin-left: 0;
|
||||
margin-bottom: $baseLineHeight;
|
||||
margin-bottom: $line-height-base;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
padding: 3px 15px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
color: $gray-light;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
text-transform: uppercase;
|
||||
@ -109,7 +109,7 @@
|
||||
.nav-tabs > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
border: 1px solid transparent;
|
||||
@include border-radius(4px 4px 0 0);
|
||||
&:hover,
|
||||
@ -139,8 +139,8 @@
|
||||
}
|
||||
.nav .dropdown-toggle:hover .caret,
|
||||
.nav .dropdown-toggle:focus .caret {
|
||||
border-top-color: $link-color-hover;
|
||||
border-bottom-color: $link-color-hover;
|
||||
border-top-color: $link-hover-color;
|
||||
border-bottom-color: $link-hover-color;
|
||||
}
|
||||
/* move down carets for tabs */
|
||||
.nav-tabs .dropdown-toggle .caret {
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
.pagination ul > li > span {
|
||||
float: left; // Collapse white-space
|
||||
padding: 4px 12px;
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
text-decoration: none;
|
||||
background-color: $paginationBackground;
|
||||
border: 1px solid $paginationBorder;
|
||||
@ -100,7 +100,7 @@
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
padding: $paddingSmall;
|
||||
font-size: $fontSizeSmall;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
// Mini
|
||||
@ -108,6 +108,6 @@
|
||||
ul > li > a,
|
||||
ul > li > span {
|
||||
padding: $paddingMini;
|
||||
font-size: $fontSizeMini;
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
@ -224,7 +224,7 @@
|
||||
|
||||
.graph-tooltip-time {
|
||||
text-align: center;
|
||||
font-weight: $fontWeightSemi;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
@ -287,7 +287,7 @@
|
||||
|
||||
.axisLabel {
|
||||
color: $text-color;
|
||||
font-size: $fontSizeSmall;
|
||||
font-size: $font-size-sm;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
@ -60,7 +60,6 @@ $sideMenuWidth: 220px;
|
||||
}
|
||||
|
||||
.sidemenu {
|
||||
font-weight: $baseFontWeight;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
background-color: $dropdownBackground;
|
||||
box-shadow: 0 0 25px 0 rgba(0,0,0,0.4);
|
||||
z-index: 1000;
|
||||
font-size: $baseFontSize;
|
||||
font-size: $font-size-base;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border: 1px solid $tight-form-func-bg;
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
font-size: $baseFontSize * .846;
|
||||
font-size: $font-size-base * .846;
|
||||
font-weight: bold;
|
||||
line-height: 14px; // ensure proper line-height if floated
|
||||
color: $white;
|
||||
|
||||
59
public/sass/mixins/_hover.scss
Normal file
59
public/sass/mixins/_hover.scss
Normal file
@ -0,0 +1,59 @@
|
||||
@mixin hover {
|
||||
@if $enable-hover-media-query {
|
||||
// See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
|
||||
// Currently shimmed by https://github.com/twbs/mq4-hover-shim
|
||||
@media (hover: hover) {
|
||||
&:hover { @content }
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&:hover { @content }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus { @content }
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin plain-hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&,
|
||||
&:focus {
|
||||
@content
|
||||
}
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&,
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover-focus-active {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus,
|
||||
&:active {
|
||||
@content
|
||||
}
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -89,23 +89,23 @@
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@mixin font-shorthand($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
|
||||
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@mixin font-serif($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
|
||||
@include font-family-serif();
|
||||
@include font-shorthand($size, $weight, $lineHeight);
|
||||
}
|
||||
|
||||
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@mixin font-sans-serif($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
|
||||
@include font-family-sans-serif();
|
||||
@include font-shorthand($size, $weight, $lineHeight);
|
||||
}
|
||||
|
||||
@mixin monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
||||
@mixin monospace($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
|
||||
@include font-family-monospace;
|
||||
@include font-shorthand($size, $weight, $lineHeight);
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: $baseLineHeight;
|
||||
line-height: $line-height-base;
|
||||
color: $black;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
@include opacity(20);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user