mirror of https://github.com/bigchaindb/site.git
248 lines
7.5 KiB
SCSS
248 lines
7.5 KiB
SCSS
//
|
|
// Variables
|
|
// ---
|
|
// bigchaindb.com
|
|
//
|
|
|
|
//
|
|
// Colors
|
|
//
|
|
$brand-main-green: #39ba91 !default;
|
|
$brand-main-blue: #074354 !default;
|
|
$brand-main-gray: #445261 !default;
|
|
$brand-main-blue-dark: #101a25 !default;
|
|
|
|
$brand-main-violet: #b581cf !default;
|
|
$brand-main-blue-light: #bfe6ec !default;
|
|
$brand-main-gray-light: #cad2da !default;
|
|
$brand-main-gray-lighter: #e8ebef !default;
|
|
|
|
$gray: $brand-main-gray !default;
|
|
$gray-light: lighten($brand-main-gray, 35%) !default;
|
|
$gray-dark: darken($brand-main-gray, 5%) !default;
|
|
|
|
$brand-primary: $brand-main-green !default;
|
|
|
|
// alerts
|
|
$brand-success: #388250 !default;
|
|
$brand-info: #3e91ce !default;
|
|
$brand-warning: #8e8e24 !default;
|
|
$brand-danger: #c9726a !default;
|
|
|
|
|
|
//
|
|
// Typography
|
|
//
|
|
$font-family-base: 'europa', 'Avenir Next', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
|
|
$font-family-monospace: menlo, monaco, consolas, 'Courier New', monospace !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: 18px !default;
|
|
$font-size-root-lg: 20px !default;
|
|
|
|
$font-size-base: 1rem !default;
|
|
$font-size-lg: 1.2rem !default;
|
|
$font-size-sm: .85rem !default;
|
|
$font-size-xs: .65rem !default;
|
|
|
|
$font-size-h1: 2.7rem !default;
|
|
$font-size-h2: 2.3rem !default;
|
|
$font-size-h3: 1.8rem !default;
|
|
$font-size-h4: 1.45rem !default;
|
|
$font-size-h5: $font-size-lg !default;
|
|
$font-size-h6: $font-size-base !default;
|
|
|
|
$line-height: 1.5 !default;
|
|
|
|
$headings-font-family: inherit !default;
|
|
$headings-font-weight: $font-weight-light !default;
|
|
$headings-line-height: 1.2 !default;
|
|
$headings-color: $brand-main-blue-light !default;
|
|
|
|
|
|
//
|
|
// Scaffolding
|
|
//
|
|
$body-bg: $brand-main-gray !default;
|
|
$text-color: $brand-main-gray-light !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: 58em !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: .1rem !default;
|
|
|
|
$component-active-color: $brand-main-blue !default;
|
|
$component-active-bg: $brand-primary !default;
|
|
|
|
|
|
//
|
|
// Grid
|
|
//
|
|
$gutter-space: ($spacer * 3) !default;
|
|
|
|
|
|
//
|
|
// Code
|
|
//
|
|
$code-color: $brand-main-gray-light !default;
|
|
$code-bg: darken($gray-dark, 5%) !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: 28rem !default;
|
|
|
|
|
|
//
|
|
// Tables
|
|
//
|
|
$table-cell-padding: .75rem !default;
|
|
$table-sm-cell-padding: .3rem !default;
|
|
|
|
$table-bg: $gray-dark !default;
|
|
$table-bg-accent: $gray-dark !default;
|
|
|
|
$table-border-width: 1px !default;
|
|
$table-border-color: $gray-light !default;
|
|
|
|
//
|
|
// Buttons
|
|
//
|
|
$btn-font-family: inherit;
|
|
$btn-font-weight: $font-weight-bold !default;
|
|
|
|
$btn-padding-x: 2rem !default;
|
|
$btn-padding-y: .5rem !default;
|
|
|
|
$btn-primary-color: $brand-main-blue !default;
|
|
$btn-primary-bg: $brand-primary !default;
|
|
|
|
$btn-secondary-color: $brand-main-blue !default;
|
|
$btn-secondary-bg: $gray-light !default;
|
|
|
|
$btn-blue-color: $brand-main-blue-light !default;
|
|
$btn-blue-bg: $brand-main-blue !default;
|
|
|
|
$btn-blue-light-color: $brand-main-blue !default;
|
|
$btn-blue-light-bg: $brand-main-blue-light !default;
|
|
|
|
$btn-violet-color: darken($brand-main-violet, 45%) !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: inherit !default;
|
|
$input-font-weight: $font-weight-normal !default;
|
|
|
|
$input-padding-x: .5rem !default;
|
|
$input-padding-y: 0 !default;
|
|
|
|
$input-padding-x-sm: .5rem !default;
|
|
$input-padding-y-sm: 0 !default;
|
|
|
|
$input-bg: transparent !default;
|
|
$input-bg-disabled: $gray-dark !default;
|
|
|
|
$input-color: $text-color !default;
|
|
$input-border-color: $gray-light !default;
|
|
|
|
$input-border-focus: $text-color !default;
|
|
$input-color-placeholder: $gray-light !default;
|
|
|
|
|
|
//
|
|
// Form states and alerts
|
|
//
|
|
$state-success-text: #fff !default;
|
|
$state-success-bg: rgba($brand-primary, .4) !default;
|
|
|
|
$state-info-text: #fff !default;
|
|
$state-info-bg: rgba($brand-main-blue-light, .2) !default;
|
|
|
|
$state-warning-text: #fff !default;
|
|
$state-warning-bg: rgba($brand-warning, .4) !default;
|
|
|
|
$state-danger-text: #fff !default;
|
|
$state-danger-bg: rgba($brand-danger, .4) !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-info-bg: $state-info-bg !default;
|
|
$alert-info-text: $state-info-text !default;
|
|
|
|
$alert-warning-bg: $state-warning-bg !default;
|
|
$alert-warning-text: $state-warning-text !default;
|
|
|
|
$alert-danger-bg: $state-danger-bg !default;
|
|
$alert-danger-text: $state-danger-text !default;
|