cheatsheets/_sass/2017/components/h3-section.scss

102 lines
1.5 KiB
SCSS

/*
* H3 section
*/
.h3-section > .body {
& > pre {
margin: 0;
padding: 16px;
}
& {
background: white;
box-shadow:
0 6px 8px rgba(80, 100, 150, 0.06),
0 1px 2px rgba(80, 100, 150, 0.30);
}
@media (max-width: 480px) {
margin: 0 -16px;
box-shadow:
0 1px 1px rgba(80, 100, 150, 0.30);
}
}
/*
* Children
*/
.h3-section > .body {
/* Lists */
& > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
& > ul > li {
padding: 8px;
padding-left: 32px + 4px;
position: relative;
}
& > ul > li::before {
content: '';
position: absolute;
display: inline-block;
width: 4px;
height: 4px;
background: $gray-text;
border-radius: 50%;
left: 16px;
top: 16px + 2px;
}
& > ul > li + li {
border-top: solid 1px $line-color;
}
/* Paragraphs */
& > p {
padding: 16px;
margin: 0;
}
/* Description paragraphs */
& > pre ~ p,
& > ul ~ p,
& > iframe ~ p,
& > table ~ p {
background: $gray-bg;
color: $gray-text;
/* Links */
& a,
& a:visited {
color: $text-color;
text-decoration: none;
border-bottom: solid 1px $line-color;
}
& a:hover {
color: $baseB-400;
}
}
/* Line divisions */
& > *:not(:first-child) {
border-top: solid 1px $line-color;
}
}
/*
* Prime
*/
.h3-section.-prime > .body {
border-radius: 2px;
box-shadow:
0 8px 12px rgba($baseB-600, 0.3),
0 2px 3px rgba($baseB-400, 0.35);
}