blog/themes/hello-friend-ng/assets/scss/_header.scss

63 lines
1.1 KiB
SCSS

.header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 20px;
// Default
background: $light-background-header;
@media (prefers-color-scheme: dark) {
background: $dark-background-header;
}
@media (prefers-color-scheme: light) {
background: $light-background-header;
}
[data-theme=dark] & {
background: $dark-background-header;
}
[data-theme=light] & {
background: $light-background-header;
}
&__right {
display: flex;
flex-direction: row;
align-items: center;
@media #{$media-size-phone} {
flex-direction: row-reverse;
}
}
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
width: 760px;
max-width: 100%;
}
}
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
cursor: pointer;
}
.theme-toggler {
fill: currentColor;
}
.not-selectable {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}