core/app/assets/stylesheets/refinery/site_bar.scss
#site_bar {
background: #404650;
#site_bar_content {
color: white;
font-family: Arial;
font-size: 0.9em;
font-weight: normal;
margin: 0 auto;
max-width: 1200px;
padding: 0.8em 0.8em 0.5em;
position: relative;
zoom: 1;
&:before,
&:after { content: ""; display: table; }
&:after { clear: both; }
a {
color: white;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
#editor_switch {
text-align: center;
a {
display: inline-block;
margin-right: 0.3em;
margin-bottom: 0.5em;
padding: 0em 1em 0em;
}
@media screen and (min-width: 480px) {
text-align: left;
}
}
#site_bar_refinery_cms_logo {
display: block;
text-align: center;
@media screen and (min-width: 480px) {
left: 40%;
max-width: 20%;
position: absolute;
top: 0.35em;
}
@media screen and (min-width: 768px) {
left: 45%;
max-width: 10%;
}
img {
max-width: 40%;
@media screen and (min-width: 480px) {
max-width: 80%;
}
@media screen and (min-width: 768px) {
max-width: 100%;
}
}
}
#site_bar_branding, #editor_switch {
display: block;
margin-top: 0.5em;
@media screen and (min-width: 480px) {
margin-top: 0.25em;
}
}
#site_bar_branding {
text-align: center;
@media screen and (min-width: 480px) {
text-align: right;
}
#site_bar_company_name {
display: block;
font-weight: bold;
@media screen and (min-width: 480px) {
display: inline-block;
}
}
#logout {
display: block;
margin-left: 0.9em;
@media screen and (min-width: 480px) {
display: inline-block;
}
}
}
}
}
@media screen and (min-width: 480px) {
#site_bar {
#site_bar_content {
#editor_switch {
float: left;
width: 40%;
}
#site_bar_branding {
float: right;
width: 40%;
}
}
}
}
@media screen and (min-width: 768px) {
#site_bar {
#site_bar_content {
#editor_switch {
width: 45%;
}
#site_bar_branding {
width: 45%;
}
}
}
}