sass-site/source/assets/css/regions/_banner.scss

54 lines
881 B
SCSS
Raw Normal View History

2013-10-09 12:30:53 +02:00
.banner {
@include padding-leader;
@include padding-trailer;
2013-02-09 04:10:33 +01:00
2013-10-09 12:30:53 +02:00
* { vertical-align: middle; }
2013-02-09 04:10:33 +01:00
2018-10-24 00:06:39 +02:00
.sl-l-container { position: relative; }
2013-02-09 04:10:33 +01:00
}
2013-10-09 12:30:53 +02:00
.site-brand {
@include font-size-regular;
margin: 0;
line-height: 0;
2013-10-10 22:21:47 +02:00
text-align: left;
2013-02-11 03:39:30 +01:00
2013-10-09 12:30:53 +02:00
img {
2018-10-24 00:06:39 +02:00
transition-property: height;
2013-10-09 12:30:53 +02:00
height: rhythm(2);
2013-02-11 03:39:30 +01:00
}
2013-02-09 04:10:33 +01:00
2018-10-27 08:06:47 +02:00
@include sl-breakpoint--medium {
2013-10-12 17:51:13 +02:00
@include span(3);
2013-02-09 04:10:33 +01:00
2013-10-09 12:30:53 +02:00
img { height: rhythm(4); }
}
}
2013-02-09 04:10:33 +01:00
2013-10-09 12:30:53 +02:00
.banner-toggle {
position: absolute;
top: 0;
2013-10-10 22:21:47 +02:00
right: $gutter-width;
2013-02-09 04:10:33 +01:00
2013-10-09 12:30:53 +02:00
button {
@extend %clear-button;
2013-10-10 22:21:47 +02:00
@include square($column-width);
2013-10-09 12:30:53 +02:00
padding: 0;
2012-11-29 18:33:08 +01:00
}
2013-10-09 12:30:53 +02:00
.icon-bar {
@include leader(.25);
@include trailer(.25);
display: block;
margin: {
right: auto;
left: auto;
2013-02-09 04:10:33 +01:00
}
width: sl-px-to-rem(32px);
height: sl-px-to-rem(2px);
background-color: $color-primary;
2012-11-29 18:33:08 +01:00
}
2013-02-11 03:39:30 +01:00
2018-10-27 08:06:47 +02:00
@include sl-breakpoint--medium { display: none; }
2013-02-11 03:39:30 +01:00
}