datat.fi/_sass/basically-basic/_navicons.scss

149 lines
3.6 KiB
SCSS
Raw Normal View History

/* ==========================================================================
Navicons
========================================================================== */
2017-03-07 23:12:17 +02:00
.navicon-button {
display: inline-block;
position: relative;
padding: 0.90625rem 0;
min-height: $site-image-height;
-webkit-transition: $navicon-duration / 2;
2017-03-16 20:34:29 +02:00
transition: $navicon-duration / 2;
border: 0;
outline: none;
2017-03-07 23:12:17 +02:00
background-color: $navicon-nav-bg-close;
2017-03-29 22:12:28 +03:00
line-height: 5 * $navicon-height;
2017-03-07 23:12:17 +02:00
cursor: pointer;
2017-03-16 20:34:29 +02:00
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
2017-03-16 20:34:29 +02:00
user-select: none;
2017-03-07 23:12:17 +02:00
&.open {
background-color: $navicon-nav-bg-open;
}
2017-03-16 20:34:29 +02:00
.navicon::before,
.navicon::after {
-webkit-transition-duration: $navicon-duration / 2;
2017-03-16 21:13:21 +02:00
transition-duration: $navicon-duration / 2;
2017-03-07 23:12:17 +02:00
}
&:hover {
-webkit-transition-duration: $navicon-duration;
2017-03-16 21:13:21 +02:00
transition-duration: $navicon-duration;
2017-03-07 23:12:17 +02:00
2017-03-16 20:34:29 +02:00
.navicon::before,
.navicon::after {
-webkit-transition-duration: $navicon-duration / 2;
2017-03-16 21:13:21 +02:00
transition-duration: $navicon-duration / 2;
2017-03-07 23:12:17 +02:00
}
.navicon::before {
top: (2.5 * $navicon-height);
}
.navicon::after {
top: (-2.5 * $navicon-height);
}
2017-03-07 23:12:17 +02:00
}
}
.navicon {
position: relative;
width: $navicon-width;
height: $navicon-height;
-webkit-transition-duration: $navicon-duration;
2017-03-16 21:13:21 +02:00
transition-duration: $navicon-duration;
2017-03-07 23:12:17 +02:00
border-radius: $navicon-width;
2017-03-16 20:34:29 +02:00
background: $navicon-content-bg;
2017-03-07 23:12:17 +02:00
2017-03-16 20:34:29 +02:00
&::before,
&::after {
2017-03-07 23:12:17 +02:00
display: block;
2017-03-16 20:34:29 +02:00
position: absolute;
2017-03-07 23:12:17 +02:00
width: $navicon-width;
2017-03-16 20:34:29 +02:00
height: $navicon-height;
-webkit-transition-duration: $navicon-duration $navicon-duration / 2;
2017-03-16 21:13:21 +02:00
transition-duration: $navicon-duration $navicon-duration / 2;
2017-03-16 20:34:29 +02:00
border-radius: $navicon-width;
2017-03-07 23:12:17 +02:00
background: $navicon-content-bg;
content: "";
2017-03-07 23:12:17 +02:00
}
&::before {
top: (2 * $navicon-height);
}
&::after {
top: (-2 * $navicon-height);
}
2017-03-07 23:12:17 +02:00
}
2017-03-16 20:34:29 +02:00
.open:not(.steps) .navicon::before,
.open:not(.steps) .navicon::after {
2017-03-07 23:12:17 +02:00
top: 0 !important;
}
.open {
-webkit-transform: scale($navicon-toggled-size);
-ms-transform: scale($navicon-toggled-size);
2017-03-16 20:34:29 +02:00
transform: scale($navicon-toggled-size);
2017-03-07 23:12:17 +02:00
.navicon::before,
.navicon::after {
-webkit-transition-duration: $navicon-duration;
transition-duration: $navicon-duration;
2017-03-07 23:12:17 +02:00
}
/* Arrows */
&.larr .navicon,
&.rarr .navicon,
&.uarr .navicon {
&::before,
&::after {
width: (0.6 * $navicon-width);
}
2017-03-07 23:12:17 +02:00
&::before {
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
}
2017-03-07 23:12:17 +02:00
&::after {
-webkit-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
transform: rotate(-35deg);
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
}
2017-03-07 23:12:17 +02:00
}
&.uarr {
-webkit-transform: scale($navicon-toggled-size) rotate(90deg);
-ms-transform: scale($navicon-toggled-size) rotate(90deg);
transform: scale($navicon-toggled-size) rotate(90deg);
2017-03-07 23:12:17 +02:00
}
&.rarr .navicon {
2017-03-16 20:34:29 +02:00
&::before {
-webkit-transform: translate3d(1em, 0, 0) rotate(-35deg);
transform: translate3d(1em, 0, 0) rotate(-35deg);
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
2017-03-07 23:12:17 +02:00
}
2017-03-16 20:34:29 +02:00
&::after {
-webkit-transform: translate3d(1em, 0, 0) rotate(35deg);
transform: translate3d(1em, 0, 0) rotate(35deg);
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
2017-03-07 23:12:17 +02:00
}
}
2017-03-16 20:34:29 +02:00
}