Basscss / Docs

Variables

Global default variables for all Basscss modules.

:root {
  --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; 
  --bold-font-weight: bold; 
  --space-1: .5rem; 
  --space-2: 1rem; 
  --space-3: 2rem; 
  --space-4: 4rem; 
  --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; 
  --table-header-font-weight: var(--bold-font-weight); 
  --table-cell-padding-x: var(--space-2); 
  --table-cell-padding-y: .25rem; 
  --container-width: 64em; 
  --blue: #0076df; 
  --red: #ff4919; 
  --green: #00df3f; 
  --yellow: #ffcf00; 
  --dark-gray: #333; 
  --mid-gray: #777; 
  --light-gray: #ccc; 
  --lighter-gray: #eee; 
  --darken-1: rgba(#000,.0625); 
  --darken-2: rgba(#000,.125); 
  --darken-3: rgba(#000,.25); 
  --darken-4: rgba(#000,.5); 
  --border-color: var(--light-gray); 
  --border-width: 1px; 
  --border-radius: 3px; 
  --hover-background-color: var(--darken-1); 
}