xinny/src/app/atoms/header/Header.scss
2021-07-28 18:45:52 +05:30

63 lines
1.3 KiB
SCSS

.header {
padding: {
left: var(--sp-normal);
right: var(--sp-extra-tight);
}
width: 100%;
height: var(--header-height);
border-bottom: 1px solid var(--bg-surface-border);
display: flex;
align-items: center;
[dir=rtl] & {
padding: {
left: var(--sp-extra-tight);
right: var(--sp-normal);
}
}
&__title-wrapper {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
margin: 0 var(--sp-tight);
&:first-child {
margin-left: 0;
[dir=rtl] & {
margin-right: 0;
}
}
& > .text:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
& > .text-b3{
flex: 1;
min-width: 0;
margin-top: var(--sp-ultra-tight);
margin-left: var(--sp-tight);
padding-left: var(--sp-tight);
border-left: 1px solid var(--bg-surface-border);
max-height: calc(2 * var(--lh-b3));
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
[dir=rtl] & {
margin-left: 0;
padding-left: 0;
border-left: none;
margin-right: var(--sp-tight);
padding-right: var(--sp-tight);
border-right: 1px solid var(--bg-surface-border);
}
}
}
}