Skip to content

N
nexpie-grafana-theme
Commit 7c917156 by Torkel Ödegaard
Options

ux(sass): variable refactoring

parent febad7b1
Showing with 709 additions and 235 deletions
public/app/features/dashboard/timepicker/timepicker.html
<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>
......
public/sass/_grafana.scss
......@@ -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";
......
public/sass/_variables.dark.scss
......@@ -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: 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;
$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
$text-muted: darken($link-color,30%);
$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;
......
public/sass/_variables.light.scss
......@@ -39,33 +39,27 @@ $critical: #EC2128;
// Scaffolding
// -------------------------
$body-bg: rgb(20,20,20);
$page-bg: $gray-darker;
$text-color: $gray-lighter;
$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;
$baseFontSize: 14px;
$baseFontWeight: 400;
$fontWeightSemi: 600;
$baseFontFamily: $font-family-sans-serif;
$baseLineHeight: 20px;
$altFontFamily: $font-family-serif;
$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
$headings-color: $text-color;
$abbr-border-color: $gray-light !default;
$text-muted: darken($link-color,30%);
$blockquote-small-color: $gray-light !default;
$blockquote-border-color: $gray-lighter !default;
$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%);
......
public/sass/_variables.scss
// 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;
\ No newline at end of file
public/sass/base/_base.scss deleted 100644 → 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;
}
public/sass/base/_code.scss
......@@ -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
......
public/sass/base/_forms.scss
......@@ -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;
}
......
public/sass/base/_reboot.scss 0 → 100644
// 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;
}
public/sass/base/_type.scss
......@@ -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; }
.lead {
font-size: $lead-font-size;
font-weight: $lead-font-weight;
}
// 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;
}
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
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; }
//
// 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 {
......
public/sass/bootstrap/responsive-767px-max.scss
......@@ -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
......
public/sass/components/_alerts.scss
......@@ -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;
}
public/sass/components/_buttons.scss
......@@ -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
......
public/sass/components/_dashboard.scss
......@@ -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%;
......
public/sass/components/_dropdown.scss
......@@ -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;
......
public/sass/components/_gf-form.scss
......@@ -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;
}
......
public/sass/components/_modals.scss
......@@ -126,7 +126,7 @@
.share-snapshot-info-text {
margin: 10px 105px;
strong {
color: $headingsColor;
color: $headings-color;
font-weight: 500;
}
}
......
public/sass/components/_navbar.scss
......@@ -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 {
......
public/sass/components/_navs.scss
......@@ -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 {
......
public/sass/components/_pagination.scss
......@@ -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;
}
}
public/sass/components/_panel_graph.scss
......@@ -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;
......
public/sass/components/_sidemenu.scss
......@@ -60,7 +60,6 @@ $sideMenuWidth: 220px;
}
.sidemenu {
font-weight: $baseFontWeight;
list-style: none;
margin: 0;
padding: 0;
......
public/sass/components/_submenu.scss
......@@ -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;
......
public/sass/components/_tags.scss
......@@ -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;
......
public/sass/mixins/_hover.scss 0 → 100644
@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
}
}
}
public/sass/mixins/_mixins.scss
......@@ -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);
}
......
public/sass/utils/_utils.scss
......@@ -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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment