6-page-content-elements edit

/* scss/6-page-content-elements/_broadcast-bar.scss */ /** ===================== broadcast BAR TOP ==================================== **/ .broadcastBarTop { padding: 12px 0 8px; border-bottom: 4px solid var(--color-one-offs-broadcast-border); background: var(--color-one-offs-broadcast-gradient-center); background: -moz-linear-gradient( left, var(--color-one-offs-broadcast-gradient-sides) 5%, var(--color-one-offs-broadcast-gradient-center) 50%, var(--color-one-offs-broadcast-gradient-sides) 95% ); background: -webkit-gradient( linear, left top, right top, color-stop(5%, var(--color-one-offs-broadcast-gradient-sides)), color-stop(50%, var(--color-one-offs-broadcast-gradient-sides)), color-stop(95%, var(--color-one-offs-broadcast-gradient-sides)) ); background: -webkit-linear-gradient( left, var(--color-one-offs-broadcast-gradient-sides) 5%, var(--color-one-offs-broadcast-gradient-center) 50%, var(--color-one-offs-broadcast-gradient-sides) 95% ); background: -o-linear-gradient( left, var(--color-one-offs-broadcast-gradient-sides) 5%, var(--color-one-offs-broadcast-gradient-center) 50%, var(--color-one-offs-broadcast-gradient-sides) 95% ); background: -ms-linear-gradient( left, var(--color-one-offs-broadcast-gradient-sides) 5%, var(--color-one-offs-broadcast-gradient-center) 50%, var(--color-one-offs-broadcast-gradient-sides) 95% ); background: linear-gradient( to right, var(--color-one-offs-broadcast-gradient-sides) 5%, var(--color-one-offs-broadcast-gradient-center) 50%, var(--color-one-offs-broadcast-gradient-sides) 95% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92734a', endColorstr='#{var(--color-one-offs-broadcast-gradient-center)}',GradientType=1 ); } .broadcastBarTop p { margin: 0 10px; padding: 0; } .broadcastBarTop + img + .wm-topbar { top: -1px; } .broadcastBarTop__contents { position: relative; margin: 0 auto; padding: 0; text-align: center; letter-spacing: 0.5px; color: #fff; font-size: 16px; font-weight: 400; line-height: 1.25em; } .broadcastBarTop__contents a { text-decoration: none; color: #fff; font-weight: 800; &:hover { text-decoration: underline; } } // more link .broadcastBarTop__more { display: inline-block; margin-left: 10px; } .broadcastBarTop__more a { position: relative; display: block; padding-right: 15px; white-space: nowrap; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; font-size: 12px; font-weight: 700; } .broadcastBarTop__more a::after { position: absolute; top: 50%; right: -2px; width: 13px; height: 1px; content: ""; transition: all 0.2s linear; transform: translateY(calc(-50% - 0.5px)); background: #fff; } .broadcastBarTop__more a::before { position: absolute; top: 50%; right: -2px; display: inline-block; width: 4px; height: 4px; content: ""; transition: all 0.2s linear; transform: translateY(calc(-50% - 0.5px)) rotate(45deg); border-top: 1px solid #fff; border-right: 1px solid #fff; } .broadcastBarTop__more a:hover::before, .broadcastBarTop__more a:focus::before, .broadcastBarTop__more a:hover::after, .broadcastBarTop__more a:focus::after { right: -6px; } @media screen and (min-width: 1000px) { .broadcastBarTop { padding: 12px 0 10px; } .broadcastBarTop__contents { max-width: 996px; font-size: 18px; } .broadcastBarTop p { max-width: none; padding: 0 150px; font-size: 18px; } .broadcastBarTop__more { position: absolute; top: 50%; right: 2px; display: block; transform: translateY(-50%); } } /** ===================== END: broadcast BAR TOP ==================================== **/