_sass/_styleguide/color-box.scss
//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;
}