frontend-tutorial-framework/src/app/sidebar/sidebar.component.scss

32 lines
699 B
SCSS

@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout.scss";
.tfw-ide-pin {
button {
background-color: white;
width: 50px;
height: auto;
padding: 0;
margin-bottom: 5vh;
cursor: pointer;
border: 1px solid $tao-gray-200;
transition: all 0.18s ease;
box-shadow: 0 4px 8px 0 rgba($tao-gray-500, 0.2), 0 4px 10px 0 rgba($tao-gray-500, 0.09);
&:hover,
&:focus,
&:active,
&.active {
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.4), 0 8px 20px 0 rgba($tao-blue-500, 0.39);
border: 1px solid $tao-blue-200;
}
&:focus,
&:active,
&.active {
outline: none;
width: 48px;
}
}
}