Variables

Global default variables for all Basscss modules.

:root {
  --form-field-font-size: 1rem;
  --form-field-height: 2.25rem;
  --form-field-padding-y: .5rem;
  --form-field-padding-x: .5rem;
  --button-font-size: inherit;
  --button-font-weight: bold;
  --button-line-height: 1.125rem;
  --button-padding-y: .5rem;
  --button-padding-x: 1rem;
  --bold-font-weight: bold;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --table-header-font-weight: var(--bold-font-weight);
  --table-cell-padding-x: var(--space-2);
  --table-cell-padding-y: .25rem;
  --font-family: 'Helvetica Neue', Helvetica, sans-serif;
  --line-height: 1.5;
  --heading-font-family: var(--font-family);
  --heading-font-weight: bold;
  --heading-line-height: 1.25;
  --monospace-font-family: 'Source Code Pro', Consolas, monospace;
  --h1: 2rem;
  --h2: 1.5rem;
  --h3: 1.25rem;
  --h4: 1rem;
  --h5: .875rem;
  --h6: .75rem;
  --container-width: 64em;
  --aqua: #7fdbff;
  --blue: #0074d9;
  --navy: #001f3f;
  --teal: #39cccc;
  --green: #2ecc40;
  --olive: #3d9970;
  --lime: #01ff70;
  --yellow: #ffdc00;
  --orange: #ff851b;
  --red: #ff4136;
  --fuchsia: #f012be;
  --purple: #b10dc9;
  --maroon: #85144b;
  --white: #fff;
  --silver: #ddd;
  --gray: #aaa;
  --black: #222;
  --darken-1: rgba(#000,.0625);
  --darken-2: rgba(#000,.125);
  --darken-3: rgba(#000,.25);
  --darken-4: rgba(#000,.5);
  --border-color: var(--darken-2);
  --border-width: 1px;
  --border-radius: 3px;
  --dark-gray: var(--black);
  --mid-gray: var(--gray);
  --light-gray: var(--silver);
  --lighter-gray: #eee;
  --range-thumb-width: var(--form-field-padding-x);
  --range-thumb-height: calc( var(--form-field-height) - (var(--form-field-padding-y) * 2) );
  --range-track-height: calc( var(--form-field-padding-y) / 2 );
  --range-thumb-offset: calc( var(--range-thumb-height) / -2 + (var(--range-track-height) / 2) );
  --hover-background-color: var(--darken-1);
}