1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 18:36:11 +01:00
site/_src/_assets/styles/bigchain/_sections.scss

108 lines
2.2 KiB
SCSS

.section {
padding-top: ($spacer * 2);
padding-bottom: ($spacer * 2);
// use this so animated elements coming in from outside of screen
// don't affect layout
overflow: hidden;
// vertically center everything
display: flex;
align-items: center;
min-height: 420px;
.row { flex: 1; }
@media ($screen-sm) {
padding-top: ($spacer * 4);
padding-bottom: ($spacer * 4);
}
}
.section-header {
margin-bottom: ($spacer * 4);
}
.section-title,
.section-description {
text-align: center;
@media ($screen-sm) {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.section-title {
font-size: $font-size-h2;
margin-top: 0;
margin-bottom: ($spacer * 2);
// the bottom line
&:after {
content: "";
height: 2px;
width: 5rem;
display: block;
margin: ($spacer * 2) auto 0 auto;
background: $gray-lighter;
}
}
.section-description {
font-size: $font-size-lg;
color: $headings-color;
margin-bottom: 0;
+ .section-description {
margin-top: $spacer;
}
}
.section-actions {
margin-top: $spacer;
.btn {
margin-left: 5px;
margin-right: 5px;
min-width: 200px;
}
}
//
// Section backgrounds
//
.background--blue {
background: $brand-main-blue; // fallback
background: linear-gradient(to bottom right, $brand-main-blue 0%, lighten($brand-main-blue, 10%) 100%);
.section-title,
.section-description { color: #fff }
}
.background--dark {
background: $brand-main-blue-dark; // fallback
background: linear-gradient(to bottom right, $brand-main-blue-dark 0%, lighten($brand-main-blue-dark, 10%) 100%);
.section-title,
.section-description { color: #fff }
}
.background--light {
background: $gray-lightest; // fallback
background: linear-gradient(to bottom right, $gray-lightest 0%, lighten($gray-lightest, 10%) 100%);
}
.background--gray {
background: $brand-main-gray; // fallback
background: linear-gradient(to bottom right, $brand-main-gray 0%, lighten($brand-main-gray, 10%) 100%);
.section-title,
.section-description,
.form-control,
.form-label { color: #fff }
}