app/assets/stylesheets/layouts/admin.scss
@import "../global/variables";
.admin-layout-top {
width: 100%;
.logo {
max-width: $content-width;
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
img {
max-width: 200px;
padding: 20px;
margin-top: 10px;
}
.text {
padding: 0 20px 0 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
a {
text-decoration: none;
color: #000;
border: 2px solid $color-green;
padding: 8px 10px;
font-size: 14px;
margin: 2px;
&:not(:first-of-type) {
margin-left: 7px;
}
&:hover {
color: white;
background-color: $color-green;
transition: all 100ms;
}
}
}
}
.pattern {
background-image: image-url("session/motif.jpg");
min-height: 60px;
width: 100%;
.wrapper {
max-width: $content-width;
margin: auto;
padding: 20px 0 20px 55px;
display: flex;
flex-wrap: wrap;
a {
color: #000;
&:not(:last-of-type) {
padding: 0 20px 0 0;
}
}
}
}
@media only screen and (max-width: $mobile-width) {
.logo {
img {
max-width: 100%;
width: 75px;
padding: 0px;
margin: 8px 8px 8px $mobile-padding;
}
.text {
padding: 0 20px 0 0;
}
}
}
}