/*TODO: The old pseudo-icon was to specific */
/* make a temporary one with the -- prefix */
/* to make it more reusable temporarily */
%bg-icon {
background-repeat: no-repeat;
background-position: center;
}
%--pseudo-icon {
display: inline-block;
content: '';
visibility: visible;
background-repeat: no-repeat;
background-position: center;
}
%pseudo-icon-bg-img {
@extend %--pseudo-icon;
position: relative;
background-size: contain;
background-color: transparent;
}
%pseudo-icon-css {
@extend %--pseudo-icon;
display: block;
position: absolute;
top: 50%;
width: 1em;
height: 1em;
margin-top: -0.6em;
background-color: currentColor;
}
/* %pseudo-icon-mask, %pseudo-icon-overlay ?*/
%pseudo-icon {
@extend %pseudo-icon-css;
}
%with-external-source-icon {
background-repeat: no-repeat;
background-size: contain;
width: 18px;
height: 18px;
}
%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 {
background-color: $white;
}
%with-hashicorp::before {
@extend %pseudo-icon;
opacity: 0.45;
background-image: $hashicorp-logo-svg;
background-size: cover;
width: 20px;
height: 20px;
left: -25px;
margin-top: -10px;
background-color: $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: $color-transparent;
}
%with-chevron::before {
@extend %pseudo-icon;
content: '❮';
width: 6px;
background-color: transparent;
left: 0;
font-size: 0.7rem;
}
%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: $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: $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: $color-transparent;
width: 16px;
height: 16px;
}
/*TODO: All chevrons need merging */
%with-chevron-down::before {
@extend %pseudo-icon-bg-img;
background-image: $chevron-svg;
width: 10px;
height: 6px;
}
%with-star-before::before,
%with-star-after::after {
@extend %pseudo-icon-bg-img;
background-image: $star-svg;
width: 10px;
height: 9px;
}
%with-star-before::before {
padding-right: 12px;
}
%with-star-after::after {
padding-left: 22px;
}
%with-star {
@extend %with-star-before;
}
%with-eye::before {
@extend %pseudo-icon-bg-img;
background-image: $eye-svg;
width: 16px;
height: 8px;
padding-right: 12px;
}
%with-tick {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
%with-inverted-tick {
@extend %pseudo-icon;
background-color: $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-minus {
@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: $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: $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: $color-transparent;
}
%with-critical::before {
@extend %with-cross;
border-radius: 20%;
}
%with-no-healthchecks::before {
@extend %with-minus;
border-radius: 20%;
}
%with-error {
position: relative;
padding-left: 18px;
}
%with-error::before {
@extend %with-cross;
margin-top: -0.5em;
}