ngx-admin/src/app/pages/ui-features/typography/typography.component.scss
2017-07-20 18:16:35 +03:00

100 lines
1.7 KiB
SCSS

@import '../../../@theme/styles/variables';
@include nga-install-component() {
.font-secondary .font-header .name {
font-size: 4.5rem;
line-height: 4rem;
font-weight: nga-theme(font-weight-bold);
}
.font-main .font-header .name {
font-size: 3rem;
font-weight: nga-theme(font-weight-bold);
}
.font-row {
&:first-child {
margin-bottom: 2rem;
}
.header {
align-items: baseline;
}
p {
margin: 0;
}
}
.header {
display: flex;
align-items: center;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid nga-theme(separator);
color: nga-theme(color-fg-heading);
&:last-child {
border-bottom: none;
padding: 0;
margin: 0;
}
div:first-child {
flex-basis: 50%;
line-height: 1;
align-items: flex-end;
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
}
}
.variants {
flex: 1;
display: flex;
justify-content: space-between;
align-items: flex-end;
span {
padding-left: 1rem;
font-size: 1.5rem;
}
}
.detail {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: flex-end;
color: nga-theme(color-fg);
}
}
.colors {
display: flex;
flex-direction: column;
.item {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
&:last-child {
margin-bottom: 0;
}
}
.color {
width: 86px;
height: 60px;
border-top-right-radius: 1rem;
border-bottom-left-radius: 1rem;
margin-right: 1rem;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.25rem;
}
}
}