src/_scss/w98/_icons.scss
@import './var/colors';
@mixin icon($classname: '.icon') {
position: relative;
display: block;
outline: none;
background: none;
border: none;
.icon__icon {
display: block;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
&:focus, &:active, &:active:focus, &.is-active {
outline: none;
.icon__icon {
filter: hue-rotate(70deg) contrast(0.3) saturate(2);
}
.icon__text {
background-color: $blue;
color: white;
outline: 1px dotted white;
outline-offset: -1px;
}
}
}
@mixin icon-explorer($classname: '.icon--explorer') {
@include icon($classname);
width: 58px;
height: 70px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
.icon__icon {
width: 42px;
height: 42px;
margin: 0 auto;
}
.icon__text {
position: absolute;
top: 45px;
left: 0px;
max-height: 28px;
width: 100%;
overflow-y: hidden;
display: inline-block;
}
&:focus, &:active, &:active:focus, &.active, &.clicked {
.icon__text{
max-height: initial;
}
}
}
@mixin icon-list($classname: '.icon--list') {
@include icon($classname);
height: 18px;
margin: 2px;
text-align: left;
display: flex;
align-items: center;
.icon__icon {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 2px;
}
.icon__text {
position: relative;
padding: 2px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: calc(100% - 20px);
padding-bottom: 3px;
}
&:focus, &:active, &:active:focus, &.active, &.clicked {
.icon__text{
max-height: initial;
}
}
}