punchcard-cms/punchcard

View on GitHub
src/sass/partials/base/_base.scss

Summary

Maintainability
Test Coverage
 
._wrapper {
@include wrapper;
}
 
.base {
&--link {
@include base--link;
}
 
&--h1 {
@include h1;
}
 
&--h2 {
@include h2;
}
 
&--h3 {
font-size: ms(2);
font-weight: setting-get('normal font weight');
}
 
&--h4 {
font-size: ms(1);
font-weight: setting-get('normal font weight');
}
 
&--h5 {
font-size: 1em;
font-weight: setting-get('normal font weight');
}
 
&--h6 {
font-size: ms(-1);
font-weight: setting-get('normal font weight');
}
 
&--blockquote {
border-left: .25em solid setting-get('primary accent color');
color: color('gray', 80);
font-style: italic;
margin-left: 2em;
margin-right: 1em;
padding: 0 1.5em;
}
 
&--dl {
@include dl;
}
 
&--dt {
@include dt;
}
 
&--dd {
@include dd;
}
 
&--li {
margin-top: 0;
}
 
&--ul {
display: block;
list-style: circle;
margin-left: setting-get('rhythm');
 
@include breakpoint(setting-get('fixed container')) {
margin-left: 0;
}
}
 
&--ol {
margin-left: setting-get('rhythm');
 
@include breakpoint(setting-get('fixed container')) {
margin-left: 0;
}
}
 
&--hr {
border: 0 none;
border-top: 2px solid color('grey', 20);
margin: setting-get('rhythm') / .25 0;
width: 15%;
}
 
&--table {
margin-top: setting-get('rhythm') / .5;
width: 100%;
}
 
&--caption {
@include h1;
margin: 0 0 setting-get('rhythm') / .5 0;
text-align: left;
}
 
&--thead {
color: setting-get('white');
}
 
&--tr {
&:nth-of-type(even) {
background-color: color('white');
}
}
 
// TODO: Re-enable and disable nesting for this specifically and revert nesting depth rule once https://github.com/sasstools/sass-lint/pull/677 lands
// &--tr:nth-of-type(even) .base--td::before {
// background-color: color('teal', 70);
// color: setting-get('white');.
// }
 
&--th {
display: none;
font-size: ms(-1);
font-weight: setting-get('bold font weight');
letter-spacing: 1px;
padding: setting-get('rhythm');
text-align: left;
text-transform: uppercase;
@include breakpoint(setting-get('responsive table')) {
background-color: setting-get('primary color');
color: setting-get('primary accent color');
display: table-cell;
}
}
 
&--td {
display: flex;
font-size: ms(-1);
margin: 0;
padding: setting-get('rhythm') / 4 setting-get('rhythm') / 2;
@include breakpoint(setting-get('responsive table')) {
display: table-cell;
font-size: 1em;
padding: setting-get('rhythm');
}
 
&::before {
background-color: setting-get('primary color');
color: setting-get('primary accent color');
content: attr(data-th)'';
display: inline-block;
font-weight: setting-get('bold font weight');
margin: -.5rem .5em -.5rem -.5rem;
min-width: 6.5em;
padding: setting-get('rhythm') / 2;
text-align: right;
width: 6.5em;
word-break: break-all;
 
@include breakpoint(setting-get('responsive table')) {
display: none;
}
}
}
 
&--kbd {
background-color: color('white');
border: 1px solid color('gray', 10);
border-radius: 3px;
font-size: ms(-1);
padding: .2em .5em;
}
 
&--code {
background: color('white');
direction: ltr;
font-family: setting-get('monospace font');
font-size: ms(-1);
hyphens: none;
outline: 0;
overflow-y: overlay;
padding: .05rem .5rem;
tab-size: 2;
text-align: left;
white-space: pre;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
}
 
&--samp {
color: setting-get('secondary color');
}
 
&--pre {
direction: ltr;
display: block;
font-family: setting-get('monospace font');
hyphens: none;
overflow-y: overlay;
tab-size: 2;
text-align: left;
white-space: pre;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
}
 
&--em {
font-weight: setting-get('bold font weight');
}
 
&--b {
font-weight: setting-get('bold font weight');
}
 
&--i {
font-style: italic;
}
 
&--u {
border-bottom: 2px solid setting-get('text color');
text-decoration: none;
}
 
&--strong {
font-weight: setting-get('bold font weight');
}
 
&--sup {
font-size: ms(-1);
position: relative;
top: -.4em;
vertical-align: baseline;
}
 
&--sub {
font-size: ms(-1);
position: relative;
top: .4em;
vertical-align: baseline;
}
 
&--small {
color: color('grey', 50);
font-size: ms(-1);
}
 
&--abbr {
border-bottom: 1px dotted setting-get('text color');
text-decoration: none;
}
 
&--q {
quotes: '“' '”' '‘' '’';
 
&::before {
content: open-quote;
}
 
&::after {
content: close-quote;
}
}
 
&--cite {
&::before {
content: '- ';
}
}
 
&--mark {
background-color: setting-get('primary support color');
}
 
&--dfn {
font-style: italic;
}
 
&--var {
font-weight: setting-get('bold font weight');
}
 
&--button {
@include base--button;
}
}
 
// TODO: Remove once https://github.com/sasstools/sass-lint/pull/677 lands
.base--tr {
&:nth-of-type(even) {
.base--td {
&::before {
background-color: color('teal', 70);
color: setting-get('white');
}
}
}
}