lbry-desktop/ui/scss/component/section.scss

89 lines
1.6 KiB
SCSS
Raw Normal View History

2019-09-26 18:07:11 +02:00
.section {
2019-09-30 23:48:30 +02:00
margin-top: var(--spacing-large);
2019-09-26 18:07:11 +02:00
&:first-of-type {
margin-top: 0;
}
}
.section--padded {
2019-10-03 23:40:54 +02:00
padding: var(--spacing-medium);
}
2019-09-26 18:07:11 +02:00
.section--small {
max-width: 35rem;
}
.section__header {
margin-bottom: var(--spacing-large);
2019-09-26 18:07:11 +02:00
}
.section__flex {
display: flex;
align-items: flex-start;
& > :first-child {
margin-right: var(--spacing-large);
}
}
2019-09-30 23:48:30 +02:00
.section__flex-wrap {
@extend .section__flex;
flex-wrap: wrap;
margin-bottom: var(--spacing-large);
& > * {
2019-09-30 23:48:30 +02:00
margin-bottom: var(--spacing-large);
}
}
2019-09-26 18:07:11 +02:00
.section__title {
text-align: left;
2019-11-22 22:13:00 +01:00
font-size: var(--font-title);
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-light);
2019-09-26 18:07:11 +02:00
}
2019-09-30 23:48:30 +02:00
.section__title--small {
@extend .section__title;
font-size: var(--font-body);
margin-top: var(--spacing-small);
}
2019-09-26 18:07:11 +02:00
.section__title--large {
@extend .section__title;
2019-09-30 23:48:30 +02:00
margin-right: var(--spacing-medium);
display: inline-block;
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-bold);
2019-09-26 18:07:11 +02:00
font-size: var(--font-heading);
}
2019-11-22 22:13:00 +01:00
.section__subtitle--status {
@extend .section__subtitle;
padding: var(--spacing-small);
background-color: var(--color-text-warning);
2019-09-26 18:07:11 +02:00
}
.section__divider {
display: flex;
flex-direction: column;
2019-11-22 22:13:00 +01:00
hr {
margin: var(--spacing-large) 0;
}
2019-09-26 18:07:11 +02:00
p {
2019-11-22 22:13:00 +01:00
color: var(--color-subtitle);
2019-09-26 18:07:11 +02:00
text-align: center;
2019-11-22 22:13:00 +01:00
font-size: var(--font-large);
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-base);
2019-09-26 18:07:11 +02:00
background-color: var(--color-background);
2019-11-22 22:13:00 +01:00
transform: translateY(-150%);
2019-09-26 18:07:11 +02:00
padding: 0 var(--spacing-large);
display: inline-block;
margin: auto;
}
}
.section__body {
2019-11-22 22:13:00 +01:00
margin-top: var(--spacing-medium);
2019-09-26 18:07:11 +02:00
}