%pseudo-icon {
width: 1em;
height: 1em;
position: absolute;
top: 50%;
margin-top: -0.6em;
display: block;
content: '';
background-repeat: no-repeat;
background-position: center center;
background-color: currentColor;
visibility: visible;
}
%with-dot {
content: '';
display: block;
position: absolute;
border-radius: 100%;
width: 3px;
height: 3px;
background-color: currentColor;
visibility: visible;
top: 50%;
left: 50%;
pointer-events: none;
}
%with-folder {
text-indent: 30px;
}
%with-hashicorp,
%with-folder,
%with-chevron,
%with-clipboard,
%with-right-arrow {
position: relative;
}
%with-chevron {
padding-left: 10px;
display: inline-block;
}
%with-hashicorp::before {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 23px;
height: 22px;
left: -25px;
margin-top: -11px;
background-color: $ui-color-transparent;
}
%with-clipboard {
padding-left: 38px !important;
}
%with-clipboard::before {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 16px;
height: 17px;
left: 12px;
margin-top: -8px;
background-color: $ui-color-transparent;
}
%with-chevron::before {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 6px;
height: 9px;
left: 0;
margin-top: -4px;
background-color: $ui-color-transparent;
}
%with-folder::before {
@extend %pseudo-icon;
width: 12px;
height: 12px;
top: 50%;
margin-top: -6px;
left: 2px;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-color: $ui-color-transparent;
}
%with-magnifier {
position: relative;
}
%with-magnifier::before {
@extend %pseudo-icon;
cursor: pointer; // autosearch
top: 50%;
left: 50%;
margin-left: -0.2em;
margin-top: -0.2em;
font-size: 3em;
width: 0.35em;
height: 0.35em;
border: 0.05em solid;
border-radius: 0.35em;
border-color: currentColor;
background-color: $ui-color-transparent;
}
%with-magnifier::after {
@extend %pseudo-icon;
font-size: 3em;
top: 50%;
left: 50%;
margin-top: 0.13em;
margin-left: 0.07em;
border-width: 0;
width: 0.18em;
height: 0.05em;
transform: rotate(45deg);
}
%with-info {
position: relative;
padding-right: 23px;
}
%with-info::after {
@extend %pseudo-icon;
right: 0;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-color: $ui-color-transparent;
width: 16px;
height: 16px;
}
%with-tick {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
%with-inverted-tick {
@extend %pseudo-icon;
background-color: $ui-color-transparent;
background-image: url('data:image/svg+xml;charset=UTF-8,');
height: 20px !important;
width: 16px !important;
}
%with-cross {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
%with-warning-icon-orange {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
%with-warning-icon-grey {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
%with-right-arrow-green {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 16px;
height: 14px;
background-color: $ui-color-transparent;
}
%with-right-arrow-grey {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
%with-deny-icon {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
width: 16px;
height: 16px;
background-color: $ui-color-transparent;
}
%with-deny-icon-grey {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
%with-deny::before {
@extend %with-deny-icon;
}
%with-allow::before {
@extend %with-right-arrow-green;
}
%with-passing::before {
@extend %with-tick;
border-radius: 100%;
}
%with-warning::before {
@extend %with-warning-icon-orange;
background-color: $ui-color-transparent;
}
%with-critical::before {
@extend %with-cross;
border-radius: 20%;
}