18F/18f.gsa.gov

View on GitHub
_sass/_styleguide/color-box.scss

Summary

Maintainability
Test Coverage
//color
.color-box-group {
  margin-bottom: 2rem;
}

.color-box {
  width: 70%;
  height: 6rem;
}

.cb-black {
  background: $color-black;
}

.cb-dark {
  background: $color-dark;
}

.cb-medium {
  background: $color-medium;
}

.cb-medium-hover {
  background: $color-medium-hover;
}

.cb-bright {
  background: $color-bright;
}

.cb-bright-hover {
  background: $color-bright-hover;
}

.cb-light {
  background: $color-light;
}

.cb-gray {
  background: color('gray-cool-60');
}

.cb-gray-lightest {
  background: color('gray-cool-5');
}

.cb-inverse {
  background: $color-inverse;
  border: 1px solid color('gray-cool-5');
}

//backgrounds
.styleguide-bg-box {
  border: 1px solid color('gray-cool-5');
  height: 25rem;
  margin-bottom: $theme-site-margins-width;
  padding: $theme-site-margins-width;
  width: 70%;
}

// Box
.box-rem-wrapper {
  align-items: center;
  border: 1px solid color('gray-cool-5');
  display: inline-block;
  padding: $paragraph-margins;
}

.box-rem {
  background: $color-base;
  display: inline-block;
  height: 1rem;
  margin-right: $paragraph-margins;
  width: 1rem;
}

.box-base-wrapper {
  margin-bottom: $theme-site-margins-width;
}