mirror of https://github.com/bigchaindb/site.git
250 lines
8.0 KiB
SCSS
250 lines
8.0 KiB
SCSS
//
|
|
// Variables
|
|
// ---
|
|
// bigchain.io
|
|
//
|
|
|
|
//
|
|
// Colors
|
|
//
|
|
$brand-main-blue: #074354 !default;
|
|
$brand-main-blue-light: #BFE6EC !default;
|
|
$brand-main-blue-dark: #101A25 !default;
|
|
$brand-main-green: #54C695 !default;
|
|
$brand-main-gray: #70859B !default;
|
|
$brand-main-violet: #B581CF !default;
|
|
|
|
$gray-darker: darken($brand-main-gray, 25%) !default;
|
|
$gray-dark: darken($brand-main-gray, 20%) !default;
|
|
$gray: $brand-main-gray !default;
|
|
$gray-light: lighten($brand-main-gray, 20%) !default;
|
|
$gray-lighter: lighten($brand-main-gray, 30%) !default;
|
|
$gray-lightest: lighten($brand-main-gray, 40%) !default;
|
|
|
|
$brand-primary: $brand-main-green !default;
|
|
$brand-success: #388250 !default;
|
|
$brand-info: #3E91CE !default;
|
|
$brand-warning: #8E8E24 !default;
|
|
$brand-danger: #c9726a !default;
|
|
|
|
|
|
//
|
|
// Typography
|
|
//
|
|
$font-family-noto: 'Noto Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
|
|
$font-family-avenir: 'Avenir Next', 'Helvetica Neue', 'Arial', sans-serif !default;
|
|
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
|
|
$font-family-base: $font-family-avenir !default;
|
|
|
|
$font-weight-light: 300 !default;
|
|
$font-weight-normal: 400 !default;
|
|
$font-weight-bold: 600 !default;
|
|
$font-weight-base: $font-weight-normal !default;
|
|
|
|
$font-size-root: 16px !default;
|
|
$font-size-root-lg: 18px !default;
|
|
|
|
$font-size-base: 1rem !default;
|
|
$font-size-lg: 1.25rem !default;
|
|
$font-size-sm: 0.8rem !default;
|
|
$font-size-xs: 0.65rem !default;
|
|
|
|
$font-size-h1: 2.5rem !default;
|
|
$font-size-h2: 2rem !default;
|
|
$font-size-h3: 1.5rem !default;
|
|
$font-size-h4: 1.2rem !default;
|
|
$font-size-h5: $font-size-base !default;
|
|
$font-size-h6: 0.85rem !default;
|
|
|
|
$line-height: 1.5 !default;
|
|
|
|
$headings-font-family: $font-family-noto !default;
|
|
$headings-font-weight: $font-weight-normal !default;
|
|
$headings-line-height: 1.2 !default;
|
|
$headings-color: $brand-main-blue-light !default;
|
|
|
|
|
|
//
|
|
// Scaffolding
|
|
//
|
|
$body-bg: $gray-dark !default;
|
|
$text-color: $gray-lightest !default;
|
|
|
|
$link-color: inherit !default;
|
|
$link-hover-color: #fff !default;
|
|
$link-hover-bg: rgba($brand-primary, .8) !default;
|
|
|
|
|
|
//
|
|
// Responsive breakpoints
|
|
//
|
|
$screen-sm-min: 40em !default;
|
|
$screen-md-min: 50em !default;
|
|
$screen-lg-min: 85em !default;
|
|
|
|
$screen-sm: 'min-width: #{$screen-sm-min}';
|
|
$screen-md: 'min-width: #{$screen-md-min}';
|
|
$screen-lg: 'min-width: #{$screen-lg-min}';
|
|
|
|
|
|
//
|
|
// Components
|
|
//
|
|
$spacer: 1rem !default;
|
|
$line-height-lg: (4 / 3) !default;
|
|
$line-height-sm: 1.3 !default;
|
|
$line-height-xs: 1.2 !default;
|
|
|
|
$border-radius: .15rem !default;
|
|
$border-radius-lg: .2rem !default;
|
|
$border-radius-sm: .1rem !default;
|
|
$border-radius-xs: .05rem !default;
|
|
|
|
$component-active-color: #fff !default;
|
|
$component-active-bg: $brand-primary !default;
|
|
|
|
|
|
//
|
|
// Grid
|
|
//
|
|
$gutter-space: ($spacer * 2) !default;
|
|
|
|
|
|
//
|
|
// Code
|
|
//
|
|
$code-color: $text-color !default;
|
|
$code-bg: $gray-darker !default;
|
|
|
|
$kbd-color: $code-color !default;
|
|
$kbd-bg: $code-bg !default;
|
|
|
|
$pre-bg: $code-bg !default;
|
|
$pre-color: $code-color !default;
|
|
$pre-scrollable-max-height: 340px !default;
|
|
|
|
|
|
//
|
|
// Tables
|
|
//
|
|
$table-cell-padding: .75rem !default;
|
|
$table-sm-cell-padding: .3rem !default;
|
|
|
|
$table-bg: $gray-darker !default;
|
|
$table-bg-accent: $gray-darker !default;
|
|
|
|
$table-border-width: 1px !default;
|
|
$table-border-color: $gray !default;
|
|
|
|
//
|
|
// Buttons
|
|
//
|
|
$btn-font-family: $font-family-noto;
|
|
$btn-font-weight: $font-weight-normal !default;
|
|
|
|
$btn-padding-x: 2rem !default;
|
|
$btn-padding-y: .5rem !default;
|
|
|
|
$btn-primary-color: #fff !default;
|
|
$btn-primary-bg: $brand-primary !default;
|
|
|
|
$btn-secondary-color: #fff !default;
|
|
$btn-secondary-bg: $brand-main-gray !default;
|
|
|
|
$btn-blue-color: #fff !default;
|
|
$btn-blue-bg: $brand-main-blue !default;
|
|
|
|
$btn-violet-color: #fff !default;
|
|
$btn-violet-bg: $brand-main-violet !default;
|
|
|
|
$btn-info-color: #fff !default;
|
|
$btn-info-bg: $brand-info !default;
|
|
|
|
$btn-success-color: #fff !default;
|
|
$btn-success-bg: $brand-success !default;
|
|
|
|
$btn-warning-color: #fff !default;
|
|
$btn-warning-bg: $brand-warning !default;
|
|
|
|
$btn-danger-color: #fff !default;
|
|
$btn-danger-bg: $brand-danger !default;
|
|
|
|
$btn-link-disabled-color: $gray-light !default;
|
|
|
|
$btn-padding-x-xs: .75rem !default;
|
|
$btn-padding-y-xs: .15rem !default;
|
|
|
|
$btn-padding-x-sm: 1.25rem !default;
|
|
$btn-padding-y-sm: .4rem !default;
|
|
|
|
$btn-padding-x-lg: 3rem !default;
|
|
$btn-padding-y-lg: 1rem !default;
|
|
|
|
// Allows for customizing button radius independently from global border radius
|
|
$btn-border-radius: $border-radius !default;
|
|
$btn-border-radius-lg: $border-radius-lg !default;
|
|
$btn-border-radius-sm: $border-radius-sm !default;
|
|
$btn-border-radius-xs: $border-radius-xs !default;
|
|
|
|
|
|
//
|
|
// Forms
|
|
//
|
|
$input-font: $font-family-avenir !default;
|
|
$input-font-weight: $font-weight-normal !default;
|
|
|
|
$input-padding-x: .5rem !default;
|
|
$input-padding-y: 0 !default;
|
|
|
|
$input-bg: transparent !default;
|
|
$input-bg-disabled: $gray-darker !default;
|
|
|
|
$input-color: $text-color !default;
|
|
$input-border-color: $gray !default;
|
|
|
|
$input-border-focus: $gray-light !default;
|
|
$input-color-placeholder: $gray !default;
|
|
|
|
|
|
//
|
|
// Form states and alerts
|
|
//
|
|
$state-success-text: $brand-success !default;
|
|
$state-success-bg: lighten($brand-success, 40%) !default;
|
|
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
|
|
|
|
$state-info-text: $brand-info !default;
|
|
$state-info-bg: lighten($brand-info, 30%) !default;
|
|
$state-info-border: darken(adjust-hue($state-info-bg, -10), 5%) !default;
|
|
|
|
$state-warning-text: $brand-warning !default;
|
|
$state-warning-bg: lighten($brand-warning, 40%) !default;
|
|
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
|
|
|
|
$state-danger-text: $brand-danger !default;
|
|
$state-danger-bg: lighten($brand-danger, 40%) !default;
|
|
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
|
|
|
|
|
|
//
|
|
// Alerts
|
|
//
|
|
$alert-padding: $spacer !default;
|
|
$alert-border-radius: $border-radius !default;
|
|
|
|
$alert-success-bg: $state-success-bg !default;
|
|
$alert-success-text: $state-success-text !default;
|
|
$alert-success-border: $state-success-border !default;
|
|
|
|
$alert-info-bg: $state-info-bg !default;
|
|
$alert-info-text: $state-info-text !default;
|
|
$alert-info-border: $state-info-border !default;
|
|
|
|
$alert-warning-bg: $state-warning-bg !default;
|
|
$alert-warning-text: $state-warning-text !default;
|
|
$alert-warning-border: $state-warning-border !default;
|
|
|
|
$alert-danger-bg: $state-danger-bg !default;
|
|
$alert-danger-text: $state-danger-text !default;
|
|
$alert-danger-border: $state-danger-border !default;
|