mirror of
https://github.com/grafana/grafana.git
synced 2024-11-26 19:00:54 -06:00
230 lines
6.8 KiB
SCSS
230 lines
6.8 KiB
SCSS
// Options
|
|
//
|
|
// Quickly modify global styling by enabling or disabling optional features.
|
|
|
|
$enable-flex: true !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,
|
|
// adapting to different screen sizes, for use in media queries.
|
|
|
|
$grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default;
|
|
|
|
// Grid containers
|
|
//
|
|
// Define the maximum width of `.container` for different screen sizes.
|
|
|
|
$container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default;
|
|
|
|
// Grid columns
|
|
//
|
|
// Set the number of columns and specify the width of the gutters.
|
|
|
|
$grid-columns: 12 !default;
|
|
$grid-gutter-width: 30px !default;
|
|
|
|
$enable-flex: true;
|
|
|
|
// Typography
|
|
// -------------------------
|
|
|
|
$font-family-sans-serif: "Roboto", 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: 13px !default;
|
|
|
|
$font-size-lg: 18px !default;
|
|
$font-size-md: 14px !default;
|
|
$font-size-sm: 12px !default;
|
|
$font-size-xs: 10px !default;
|
|
|
|
$line-height-base: 1.5 !default;
|
|
$font-weight-semi-bold: 500;
|
|
|
|
$font-size-h1: 2rem !default;
|
|
$font-size-h2: 1.75rem !default;
|
|
$font-size-h3: 1.5rem !default;
|
|
$font-size-h4: 1.3rem !default;
|
|
$font-size-h5: 1.2rem !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: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
$headings-font-weight: 400 !default;
|
|
$headings-line-height: 1.1 !default;
|
|
|
|
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
|
$blockquote-border-width: 0.25rem !default;
|
|
|
|
$hr-border-width: $border-width !default;
|
|
$dt-font-weight: bold !default;
|
|
$list-inline-padding: 5px !default;
|
|
|
|
// Components
|
|
//
|
|
// Define common padding and border radius sizes and more.
|
|
|
|
$line-height-lg: (4 / 3) !default;
|
|
$line-height-sm: 1.5 !default;
|
|
|
|
$border-radius: 3px !default;
|
|
$border-radius-lg: 5px !default;
|
|
$border-radius-sm: 2px!default;
|
|
|
|
$caret-width: 0.3em !default;
|
|
$caret-width-lg: $caret-width !default;
|
|
|
|
// Page
|
|
|
|
$page-sidebar-width: 11rem;
|
|
$page-sidebar-margin: 4rem;
|
|
|
|
// 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: 4px 10px !default;
|
|
$table-sm-cell-padding: 0.3rem !default;
|
|
|
|
// Forms
|
|
$input-padding-x: 10px !default;
|
|
$input-padding-y: 8px !default;
|
|
$input-line-height: 18px !default;
|
|
|
|
$input-btn-border-width: 1px;
|
|
$input-border-radius: 0 $border-radius $border-radius 0 !default;
|
|
$input-border-radius-lg: 0 $border-radius-lg $border-radius-lg 0 !default;
|
|
$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
|
|
|
|
$label-border-radius: $border-radius 0 0 $border-radius !default;
|
|
$label-border-radius-lg: $border-radius-lg 0 0 $border-radius-lg !default;
|
|
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
|
|
|
|
$input-padding-x-sm: 7px !default;
|
|
$input-padding-y-sm: 4px !default;
|
|
|
|
$input-padding-x-lg: 20px !default;
|
|
$input-padding-y-lg: 10px !default;
|
|
|
|
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2))
|
|
!default;
|
|
$input-height-lg: (
|
|
($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)
|
|
)
|
|
!default;
|
|
$input-height-sm: (
|
|
($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)
|
|
)
|
|
!default;
|
|
|
|
$form-group-margin-bottom: $spacer-y !default;
|
|
$gf-form-margin: 0.2rem;
|
|
|
|
$cursor-disabled: not-allowed !default;
|
|
|
|
// Form validation icons
|
|
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E")
|
|
!default;
|
|
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E")
|
|
!default;
|
|
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E")
|
|
!default;
|
|
|
|
// Z-index master list
|
|
// -------------------------
|
|
// Used for a bird's eye view of components dependent on the z-axis
|
|
// Try to avoid customizing these :)
|
|
$zindex-dropdown: 1000;
|
|
$zindex-navbar-fixed: 1020;
|
|
$zindex-sidemenu: 1025;
|
|
$zindex-tooltip: 1030;
|
|
$zindex-modal-backdrop: 1040;
|
|
$zindex-modal: 1050;
|
|
$zindex-typeahead: 1060;
|
|
|
|
// Buttons
|
|
//
|
|
|
|
$btn-padding-x: 1rem !default;
|
|
$btn-padding-y: 0.7rem !default;
|
|
$btn-line-height: 1 !default;
|
|
$btn-font-weight: 500 !default;
|
|
|
|
$btn-padding-x-sm: 0.5rem !default;
|
|
$btn-padding-y-sm: 0.25rem !default;
|
|
|
|
$btn-padding-x-lg: 21px !default;
|
|
$btn-padding-y-lg: 11px !default;
|
|
|
|
$btn-padding-x-xl: 21px !default;
|
|
$btn-padding-y-xl: 11px !default;
|
|
|
|
$btn-border-radius: 2px;
|
|
|
|
$btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
|
|
|
|
// sidemenu
|
|
$side-menu-width: 60px;
|
|
|
|
// dashboard
|
|
$panel-margin: 10px;
|
|
$dashboard-padding: $panel-margin * 2;
|
|
$panel-padding: 0px 10px 5px 10px;
|
|
|
|
// tabs
|
|
$tabs-padding: 10px 15px 9px;
|
|
|
|
$external-services: (
|
|
github: (bgColor: #464646, borderColor: #393939, icon: ""),
|
|
google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ""),
|
|
grafanacom: (bgColor: inherit, borderColor: #393939, icon: ""),
|
|
oauth: (bgColor: inherit, borderColor: #393939, icon: "")
|
|
)
|
|
!default;
|