survey-sdgs/public/assets/scss/layouts/_sidebar-arrow.scss

42 lines
1.2 KiB
SCSS
Executable File

// Down arrow
.sidebar-nav .has-arrow {
position: relative;
&::after {
position: absolute;
content: "";
width: 7px;
height: 7px;
border-width: 1px 0 0 1px;
border-style: solid;
border-color: var(--bs-dark-text-emphasis);
margin-left: 10px;
-webkit-transform: rotate(135deg) translate(0, -50%);
-ms-transform: rotate(135deg) translate(0, -50%);
-o-transform: rotate(135deg) translate(0, -50%);
transform: rotate(135deg) translate(0, -50%);
-webkit-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
top: 22px;
right: 15px;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
}
.sidebar-nav li.active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after,
.sidebar-nav .has-arrow[aria-expanded="true"]::after {
top: 18px;
margin-top: 1px;
border-color: var(--bs-white);
-webkit-transform: rotate(-135deg) translate(0, -50%);
-ms-transform: rotate(-135deg) translate(0, -50%);
-o-transform: rotate(-135deg) translate(0, -50%);
transform: rotate(-135deg) translate(0, -50%);
}