mirror of
https://github.com/bigchaindb/site.git
synced 2024-12-24 18:36:11 +01:00
233 lines
7.5 KiB
SCSS
233 lines
7.5 KiB
SCSS
//
|
|
// Variables
|
|
// ---
|
|
// bigchain.io
|
|
//
|
|
|
|
//
|
|
// Colors
|
|
//
|
|
$brand-main-blue: #275B82 !default;
|
|
$brand-main-blue-dark: #101A25 !default;
|
|
|
|
$brand-main-gray: #70859B !default;
|
|
|
|
$brand-main-brown: #B56D00 !default;
|
|
$brand-main-light: #FFFFFF !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-blue !default;
|
|
$brand-success: #388250 !default;
|
|
$brand-info: #3E91CE !default;
|
|
$brand-warning: #8E8E24 !default;
|
|
$brand-danger: #8F3B39 !default;
|
|
|
|
|
|
//
|
|
// Typography
|
|
//
|
|
$font-family-fira: 'Fira Sans', 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.875rem !default;
|
|
$font-size-xs: 0.75rem !default;
|
|
|
|
$font-size-h1: 3rem !default;
|
|
$font-size-h2: 2.5rem !default;
|
|
$font-size-h3: 2rem !default;
|
|
$font-size-h4: 1.5rem !default;
|
|
$font-size-h5: $font-size-base !default;
|
|
$font-size-h6: 0.85rem !default;
|
|
|
|
$line-height: 1.5 !default;
|
|
|
|
$headings-font-family: $font-family-fira !default;
|
|
$headings-font-weight: $font-weight-light !default;
|
|
$headings-line-height: 1.2 !default;
|
|
$headings-color: $brand-main-gray !default;
|
|
|
|
|
|
//
|
|
// Scaffolding
|
|
//
|
|
$body-bg: #fff !default;
|
|
$text-color: $gray-dark !default;
|
|
|
|
$link-color: $brand-main-brown !default;
|
|
$link-hover-color: darken($link-color, 15%) !default;
|
|
|
|
|
|
//
|
|
// Responsive breakpoints
|
|
//
|
|
$screen-sm-min: 35em !default;
|
|
$screen-md-min: 45em !default;
|
|
$screen-lg-min: 75em !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.5 !default;
|
|
|
|
$border-radius: .15rem !default;
|
|
$border-radius-lg: .2rem !default;
|
|
$border-radius-sm: .1rem !default;
|
|
|
|
$component-active-color: #fff !default;
|
|
$component-active-bg: $brand-primary !default;
|
|
|
|
|
|
//
|
|
// Grid
|
|
//
|
|
$gutter-space: ($spacer * 2) !default;
|
|
|
|
|
|
//
|
|
// Code
|
|
//
|
|
$code-color: #c7254e !default;
|
|
$code-bg: #f9f2f4 !default;
|
|
|
|
$kbd-color: #fff !default;
|
|
$kbd-bg: #333 !default;
|
|
|
|
$pre-bg: #f5f5f5 !default;
|
|
$pre-color: $gray-dark !default;
|
|
$pre-scrollable-max-height: 340px !default;
|
|
|
|
|
|
//
|
|
// Buttons
|
|
//
|
|
$btn-font-family: $font-family-avenir;
|
|
$btn-font-weight: $font-weight-normal !default;
|
|
|
|
$btn-padding-x: 1.5rem !default;
|
|
$btn-padding-y: .375rem !default;
|
|
|
|
$btn-primary-color: #fff !default;
|
|
$btn-primary-bg: $brand-primary !default;
|
|
$btn-primary-border: $btn-primary-bg !default;
|
|
|
|
$btn-secondary-color: $gray-dark !default;
|
|
$btn-secondary-bg: #fff !default;
|
|
$btn-secondary-border: #fff !default;
|
|
|
|
$btn-info-color: #fff !default;
|
|
$btn-info-bg: $brand-info !default;
|
|
$btn-info-border: $btn-info-bg !default;
|
|
|
|
$btn-success-color: #fff !default;
|
|
$btn-success-bg: $brand-success !default;
|
|
$btn-success-border: $btn-success-bg !default;
|
|
|
|
$btn-warning-color: #fff !default;
|
|
$btn-warning-bg: $brand-warning !default;
|
|
$btn-warning-border: $btn-warning-bg !default;
|
|
|
|
$btn-danger-color: #fff !default;
|
|
$btn-danger-bg: $brand-danger !default;
|
|
$btn-danger-border: $btn-danger-bg !default;
|
|
|
|
$btn-link-disabled-color: $gray-light !default;
|
|
|
|
$btn-padding-x-sm: .75rem !default;
|
|
$btn-padding-y-sm: .25rem !default;
|
|
|
|
$btn-padding-x-lg: 1.25rem !default;
|
|
$btn-padding-y-lg: .75rem !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;
|
|
|
|
|
|
//
|
|
// 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: rgba(255,255,255,.1) !default;
|
|
$input-bg-disabled: $gray-lighter !default;
|
|
|
|
$input-color: $gray !default;
|
|
$input-border-color: $gray-lighter !default;
|
|
|
|
$input-border-focus: #66afe9 !default;
|
|
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
|
|
|
|
$input-color-placeholder: #999 !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;
|