twbs--bootstrap/docs/assets/scss/_featurettes.scss

98 lines
1.6 KiB
SCSS

.bd-featurette {
padding-top: 3rem;
padding-bottom: 3rem;
font-size: 1rem;
line-height: 1.5;
color: #555;
text-align: center;
background-color: #fff;
border-top: 1px solid #eee;
.highlight {
text-align: left;
}
.lead {
margin-right: auto;
margin-bottom: 2rem;
margin-left: auto;
font-size: 1rem;
text-align: center;
}
@include media-breakpoint-up(sm) {
text-align: left;
}
@include media-breakpoint-up(md) {
.col-sm-6:first-child {
padding-right: ($grid-gutter-width * 1.5);
};
.col-sm-6:last-child {
padding-left: ($grid-gutter-width * 1.5);
}
}
}
.bd-featurette-title {
margin-bottom: .5rem;
font-size: 2rem;
font-weight: normal;
color: #333;
text-align: center;
}
.half-rule {
width: 6rem;
margin: 2.5rem auto;
@include media-breakpoint-up(sm) {
margin-right: 0;
margin-left: 0;
}
}
.bd-featurette h4 {
margin-top: 1rem;
margin-bottom: .5rem;
font-weight: normal;
color: #333;
}
.bd-featurette-img {
display: block;
margin-bottom: 1.25rem;
color: #333;
}
.bd-featurette-img:hover {
color: $brand-primary;
text-decoration: none;
}
.bd-featurette-img img {
display: block;
margin-bottom: 1rem;
}
@media (min-width: 480px) {
.bd-featurette .img-fluid {
margin-top: 2rem;
}
}
@media (min-width: 768px) {
.bd-featurette {
padding-top: 6rem;
padding-bottom: 6rem;
}
.bd-featurette-title {
font-size: 2.5rem;
+ .lead {
font-size: 1.5rem;
}
}
.bd-featurette .lead {
max-width: 80%;
}
.bd-featurette .img-fluid {
margin-top: 0;
}
}