View file File name : masthead-style.scss Content :@import './calypso-mixins'; @import './calypso-colors'; .jp-masthead { padding: 40px 0; background-color: $white; text-align: center; @media (max-width: rem( 782px ) ) { padding: 0 rem( 24px ); .jetpack-masterbar & { padding-left: rem( 64px ); } } } .jp-masthead__inside-container { display: flex; flex-wrap: wrap; margin: 0 auto; width: 100%; max-width: rem( 1040px ); padding-bottom: rem( 6px ); @media (max-width: 1250px) { max-width: 95%; } } .jp-masthead__logo-container { flex-grow: 0; flex-shrink: 0; padding: rem( 11px ) 0 0; @include breakpoint( "<480px" ) { margin-right: rem( 16px ); } } .jp-masthead__logo-link { display: inline-block; outline: none; vertical-align: middle; &:focus { line-height: 0; // fixes rectangle gap box-shadow: 0 0 0 2px $blue-light; } & + code { margin: 0 10px; padding: 5px 9px; border-radius: 2px; background: #e6ecf1; color: #647a88; } } .jp-masthead__nav { display: flex; flex-wrap: nowrap; flex-grow: 1; flex-shrink: 0; text-align: right; margin-top: rem( 6px ); padding: rem( 4px ) 0; .dops-button-group { flex-grow: 1; align-self: center; /* This fixes an unwanted space between the buttons in the network settings caused by a line break. */ /* Fixed here to keep PHP code readable. It's safe: .dops-button and .dops-button.is-compact specify a font size. */ font-size: 0; } @include breakpoint( "<480px" ) { text-align: left; } } #sandbox-domain-badge { background: #d63638; text-transform: uppercase; letter-spacing: 0.2em; text-shadow: none; font-size: 9px; font-weight: bold; cursor: pointer; color: #ffffff; }