@alaskaairux/auro-interruption
Version:
Auro custom auro-interruption element
115 lines (114 loc) • 2.21 kB
CSS
:host([fixed]) .heading{
margin:calc(16px + 12px) 0;
}
:host([fixed]) .heading--display{
font-size:44px;
line-height:54px;
}
@media screen and (min-width: 1024px){
:host([fixed]) .heading--display{
font-size:48px;
line-height:60px;
}
}
@media screen and (min-width: 1232px){
:host([fixed]) .heading--display{
font-size:56px;
line-height:68px;
}
}
:host([fixed]) .heading--800{
font-size:32px;
line-height:38px;
}
@media screen and (min-width: 1024px){
:host([fixed]) .heading--800{
font-size:36px;
line-height:42px;
}
}
@media screen and (min-width: 1232px){
:host([fixed]) .heading--800{
font-size:40px;
line-height:48px;
}
}
:host([fixed]) .heading--700{
font-size:28px;
line-height:34px;
}
@media screen and (min-width: 1024px){
:host([fixed]) .heading--700{
font-size:32px;
line-height:38px;
}
}
@media screen and (min-width: 1232px){
:host([fixed]) .heading--700{
font-size:36px;
line-height:44px;
}
}
:host([fixed]) .heading--600{
margin:16px 0;
font-size:26px;
line-height:30px;
}
@media screen and (min-width: 1024px){
:host([fixed]) .heading--600{
font-size:28px;
line-height:34px;
}
}
@media screen and (min-width: 1232px){
:host([fixed]) .heading--600{
font-size:28px;
line-height:36px;
}
}
:host([fixed]) .heading--500{
margin:16px 0;
font-size:22px;
line-height:26px;
}
@media screen and (min-width: 1024px){
:host([fixed]) .heading--500{
font-size:24px;
line-height:30px;
}
}
@media screen and (min-width: 1232px){
:host([fixed]) .heading--500{
font-size:24px;
line-height:32px;
}
}
:host([fixed]) .heading--400{
margin:12px 0;
font-size:20px;
line-height:26px;
}
:host([fixed]) .heading--300{
margin:12px 0;
font-size:18px;
line-height:26px;
}
:host([fixed]) .dialog-footer{
padding-top:32px;
}
:host([fixed]) .dialog-header{
padding-top:64px;
}
:host([fixed]) .dialog-header--action{
border-radius:6px;
}
:host([fixed]) :host([unformatted]) .dialog-header--action{
top:32px;
right:32px;
}
@media screen and (min-width: 1024px){
:host([fixed]) :host([unformatted]) .dialog-header--action{
top:64px;
right:64px;
}
}