UNPKG

@guardian/threads

Version:
119 lines (101 loc) 2.03 kB
.head { display: flex; flex: 0 0 auto; padding: 0 var(--sp-base); background: var(--color-primary); color: var(--color-primary-text); min-height: 38px; position: relative; z-index: 9999999; -webkit-app-region: drag; box-sizing: border-box; height: var(--size-header); border-bottom: 1px solid var(--color-border); } .head[data-transparent='true'] { border-bottom-color: var(--color-border-light); background: var(--non-semantic-color-neutral-98); } .container { display: flex; align-items: stretch; height: 100%; width: 100%; } .container[data-centered] { width: 68em; margin: auto; } .thumbnail { --avi: calc(var(--size-header) * 0.6); height: var(--avi); width: var(--avi); display: block; background: var(--non-semantic-color-neutral-100); background-size: cover; background-position: center center; border-radius: 100%; } .titles { display: flex; flex-direction: column; line-height: 1; margin-left: calc(var(--sp-base) * 0.75); } .title { font-size: var(--fs-large); font-weight: 800; } .subtitle { font-size: var(--fs-small); } .chip { display: flex; align-items: center; justify-content: flex-start; padding: var(--sp-vertical) 0; border-right: 1px solid transparent; } .chip[data-has-border='true'] { border-right: 1px solid var(--color-border); } .chipHome { composes: chip; width: var(--size-header); margin: var(--sp-vertical) calc(var(--sp-base) * 0.75) var(--sp-vertical) calc(-1 * var(--sp-base)); padding: 0 var(--sp-base); box-sizing: border-box; justify-content: center; display: flex; } .chip[data-elastic='true'] { flex: 1 1 auto; } .toolbar { position: relative; display: flex; } .toolbar > * { margin-left: var(--sp-base); } .toolset, .menu { composes: toolbar; } .menu { margin: var(--sp-vertical) calc(var(--sp-base) * 4); } .logo { width: 26px; height: 30px; } .textLogo { display: flex; align-items: center; height: calc(var(--size-vertical-base) * 1.66); padding: 0; margin: 0; font-weight: 700; font-size: var(--fs-large); }