site/_src/_assets/styles/bigchain/_variables.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;

$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 * 3) !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-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;