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

150 lines
3.1 KiB
SCSS
Raw Normal View History

/* ==========================================================================
Navicons
========================================================================== */
2017-03-07 23:12:17 +02:00
.navicon-button {
display: inline-block;
position: relative;
padding: 1.8125rem 1rem;
background-color: $navicon-nav-bg-close;
transition: $navicon-duration/2;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
2017-03-07 23:12:17 +02:00
@include breakpoint($medium) {
2017-03-09 17:19:36 +02:00
margin-right: 2rem;
2017-03-07 23:12:17 +02:00
}
@include breakpoint($large) {
2017-03-09 17:19:36 +02:00
margin-right: 5vw;
2017-03-07 23:12:17 +02:00
}
&.open {
background-color: $navicon-nav-bg-open;
}
.navicon:before, .navicon:after {
transition: $navicon-duration/2;
}
&:hover {
transition: $navicon-duration;
.navicon:before, .navicon:after {
transition: $navicon-duration/2;
}
.navicon:before { top: (2.5 * $navicon-height); }
.navicon:after { top: (-2.5 * $navicon-height); }
}
}
.navicon {
position: relative;
width: $navicon-width;
height: $navicon-height;
background: $navicon-content-bg;
transition: $navicon-duration;
border-radius: $navicon-width;
&:before, &:after {
display: block;
content: "";
height: $navicon-height;
width: $navicon-width;
background: $navicon-content-bg;
position: absolute;
z-index: -1;
transition: $navicon-duration $navicon-duration/2;
border-radius: $navicon-width;
}
&:before { top: (2 * $navicon-height); }
&:after { top: (-2 * $navicon-height); }
}
.open:not(.steps) .navicon:before,
.open:not(.steps) .navicon:after {
top: 0 !important;
}
.open .navicon:before,
.open .navicon:after {
transition: $navicon-duration;
}
/* Minus */
.open {
-ms-transform: scale($navicon-toggled-size);
transform: scale($navicon-toggled-size);
2017-03-07 23:12:17 +02:00
}
/* Arrows */
.open.larr .navicon,
.open.rarr .navicon,
.open.uarr .navicon {
&:before, &:after {
width: (0.6 * $navicon-width);
}
&:before {
-ms-transform: rotate(35deg);
transform: rotate(35deg);
-ms-transform-origin: left top;
transform-origin: left top;
2017-03-07 23:12:17 +02:00
}
&:after {
-ms-transform: rotate(-35deg);
transform: rotate(-35deg);
-ms-transform-origin: left bottom;
transform-origin: left bottom;
2017-03-07 23:12:17 +02:00
}
}
.open.uarr {
-ms-transform: scale($navicon-toggled-size) rotate(90deg);
transform: scale($navicon-toggled-size) rotate(90deg);
2017-03-07 23:12:17 +02:00
}
/* Arrows */
.open.rarr .navicon {
&:before {
transform: translate3d(1em, 0, 0) rotate(-35deg);
-ms-transform-origin: right top;
transform-origin: right top;
2017-03-07 23:12:17 +02:00
}
&:after {
transform: translate3d(1em, 0, 0) rotate(35deg);
-ms-transform-origin: right bottom;
transform-origin: right bottom;
2017-03-07 23:12:17 +02:00
}
}
/* × and + */
.open.plus,
.open.x {
.navicon {
background: transparent;
&:before {
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
2017-03-07 23:12:17 +02:00
}
&:after {
-ms-transform: rotate(45deg);
transform: rotate(45deg);
2017-03-07 23:12:17 +02:00
}
}
}
.open.plus {
-ms-transform: scale($navicon-toggled-size) rotate(45deg);
transform: scale($navicon-toggled-size) rotate(45deg);
2017-03-07 23:12:17 +02:00
}