armstrong-react/dist/imports.scss

/*********************************************************************************************
  ARMSTRONG SCSS EXPORTS - IMPORTS
  all scss to be consumed must be exported here.
  EVERYTHING IN HERE WILL BE IMPORTED MULTIPLE TIMES AND SHOULD BE EXPORTING "VIRTUAL" SCSS OR MIXINS
**********************************************************************************************/

//// FIXED WIDTH SITE WIDTH
$fixed-site-width: 960px !default;


//// RESPONSIVE SIZES
$responsive-large: 70rem !default;
$responsive-medium: 55rem !default;
$responsive-small: 45rem !default;
$responsive-xsmall: 35rem !default;

//// FONT SIZES
$font-size-root: 16px !default;

$font-size-xxsmall: 0.6rem !default;
$font-size-xsmall: 0.8rem !default;
$font-size-small: 1rem !default;
$font-size-medium: 1.2rem !default;
$font-size-large: 1.5rem !default;
$font-size-xlarge: 2rem !default;

$font-sizes:(
  xxsmall $font-size-xxsmall,
  xsmall $font-size-xsmall,
  small $font-size-small,
  medium $font-size-medium,
  large $font-size-large,
  xlarge $font-size-xlarge,
);

//// SPACINGS
// Note: If you're adding to this, make sure to update the value and the array
$spacing-xxsmall: 0.25rem !default;
$spacing-xsmall: 0.5rem !default;
$spacing-small: 1rem !default;
$spacing-medium: 2rem !default;
$spacing-large: 3rem !default;
$spacing-xlarge: 4rem !default;

$spacing-sizes: (
  xxsmall $spacing-xxsmall,
  xsmall $spacing-xsmall,
  small $spacing-small,
  medium $spacing-medium,
  large $spacing-large,
  xlarge $spacing-xlarge,
  none 0
) !default;

//// BUTTON & INPUT SPACINGS
$field-padding-vertical: 15px !default;
$field-padding-horizontal: 17px !default;

//// COLORS
$white: #ffffff !default;

$brand-primary: #cd3939 !default;
$brand-secondary: #3d4144 !default;

$gray-base: #4f5c69 !default;

$gray-very-dark: darken($gray-base, 20%) !default;
$gray-dark: darken($gray-base, 15%) !default;
$gray-medium: $gray-base !default;
$gray-light: lighten($gray-base, 50%) !default;
$gray-very-light: lighten($gray-base, 60%) !default;

$color-positive: #00a388 !default;
$color-warning: #f78e52 !default;
$color-negative: #df5a49 !default;
$color-info: #3498d8 !default;

$colors: (
  'positive' $color-positive,
  'warning' $color-warning,
  'negative' $color-negative,
  'info' $color-info,
  'brand-primary' $brand-primary,
  'brand-secondary' $brand-secondary,
  'gray-very-dark' $gray-very-dark,
  'gray-dark' $gray-dark,
  'gray-medium' $gray-medium,
  'gray-light' $gray-light,
  'gray-very-light' $gray-very-light,
  'white' $white
) !default;

//// CORNERS
$corner-radius-small: 5px !default;
$corner-radius-large: 15px !default;

//// FORMS
$form-field-height: 40px !default;
$form-field-bottom-spacing: 10px !default;


//// ANIMATION RELATED
$animation-duration: 350ms !default;
$animation-offset: 55px !default;

@mixin reset-appearance {
    resize: none;
    outline: none;
    -webkit-appearance: none;
        -ms-appearance: none;
}

@mixin button-shadow($color) {
    box-shadow: 0 4px 0 darken($color, 20%);
    &:active:not(:disabled){
      box-shadow: 0 2px 0 darken($color, 20%);
    }
}

// This function allows for ultra flexible easing curves
@mixin cubic-bezier($t1, $t2, $t3, $t4) {
    -webkit-animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
       -moz-animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
         -o-animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
            animation-timing-function: cubic-bezier($t1, $t2, $t3, $t4);
}

%input-disabled{
  color: rgba(0, 0, 0, 0.3);
  background-color: $gray-very-light;
}