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

122 lines
1.8 KiB
SCSS

/*
* H3 section
*/
.h3-section > .body {
& > pre {
margin: 0;
padding: 16px;
}
& {
background: white;
box-shadow:
0 6px 8px rgba(80, 100, 150, 0.02),
0 1px 2px rgba(80, 100, 150, 0.20);
}
/* Collapse/flush */
@media (max-width: 480px) {
margin: 0 -16px;
box-shadow:
0 1px 1px rgba(80, 100, 150, 0.30);
}
/* Border radius */
@media (min-width: 481px) {
& {
border-radius: 2px;
}
& > :first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
& > :last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
}
}
/*
* 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;
}
}
/* Line divisions */
& > *:not(:first-child) {
border-top: solid 1px $line-color;
}
}
/*
* Prime
*/
.h3-section.-prime > .body {
@media (min-width: 481px) {
border-radius: 2px;
box-shadow:
0 8px 12px rgba($baseB3, 0.1),
0 2px 3px rgba($baseB, 0.18);
}
}