200 lines
7.1 KiB
SCSS
200 lines
7.1 KiB
SCSS
/*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-proxy,
|
||
%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-proxy::before {
|
||
@extend %pseudo-icon;
|
||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M2.242 7.138l6.963.774a1 1 0 0 1 .883.883l.774 6.963a1 1 0 0 1-1.104 1.104l-6.963-.774a1 1 0 0 1-.883-.883l-.774-6.963a1 1 0 0 1 1.104-1.104z" stroke="%23BAC1CC" fill="%23FAFBFC"/><path d="M5.242 4.138l6.963.774a1 1 0 0 1 .883.883l.774 6.963a1 1 0 0 1-1.104 1.104l-6.963-.774a1 1 0 0 1-.883-.883l-.774-6.963a1 1 0 0 1 1.104-1.104z" stroke="%238E96A3" fill="%238E96A3"/><path d="M8.242 1.138l6.963.774a1 1 0 0 1 .883.883l.774 6.963a1 1 0 0 1-1.104 1.104l-6.963-.774a1 1 0 0 1-.883-.883l-.774-6.963a1 1 0 0 1 1.104-1.104z" stroke="%23BAC1CC" fill="%23FAFBFC"/></g></svg>');
|
||
width: 18px;
|
||
height: 18px;
|
||
left: 3px;
|
||
margin-top: -9px;
|
||
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,<svg width="16" height="17" xmlns="http://www.w3.org/2000/svg"><g fill="%231563FF"><path d="M1.5 10.6v.156c0-.117-.043-.156-.033-.156H1.5zm0 0V1.5h8v2.97H11V1.344C11 .602 10.343 0 9.533 0H1.467C.657 0 0 .602 0 1.344v9.412c0 .742.657 1.344 1.467 1.344h2.995v-1.5H1.5zm-.033-9.1c-.01 0 .033-.04.033-.156V1.5h-.033zm8.033 0v-.156c0 .117.043.156.033.156H9.5zm0 0v-.156c0 .117.043.156.033.156H9.5zm0 0v2.97H11V1.344C11 .602 10.343 0 9.533 0H1.467C.657 0 0 .602 0 1.344v9.412c0 .742.657 1.344 1.467 1.344h2.995v-1.5H1.5V1.5h8zm-8 0h-.033c-.01 0 .033-.04.033-.156V1.5zm0 9.256c0-.117-.043-.156-.033-.156H1.5v.156z" fill-rule="nonzero"/><path d="M14.4 4.5H5.6c-.083 0-.1.016-.1-.033v10.266c0-.049.017-.033.1-.033h8.8c.083 0 .1-.016.1.033V4.467c0 .049-.017.033-.1.033zm0-1.5c.884 0 1.6.657 1.6 1.467v10.266c0 .81-.716 1.467-1.6 1.467H5.6c-.884 0-1.6-.657-1.6-1.467V4.467C4 3.657 4.716 3 5.6 3h8.8z" fill-rule="nonzero"/><path d="M2.5 8.25H10v1.154H2.5z"/><path d="M10.942 8.705l.001.001-2.827 2.828-.807-.808 2.02-2.02-2.02-2.021.807-.808 2.827 2.827v.001z"/></g></svg>');
|
||
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,<svg width="14" height="13" xmlns="http://www.w3.org/2000/svg"><path d="M4.779 1H1.8c-.439 0-.8.37-.8.833v9.334c0 .463.361.833.8.833h10.4c.439 0 .8-.37.8-.833V3.833C13 3.37 12.639 3 12.2 3H6.35a.5.5 0 0 1-.42-.228L4.78 1z" stroke="%23BBC4D2" fill="none"/></svg>');
|
||
background-color: $color-transparent;
|
||
}
|
||
%with-exit::after {
|
||
@extend %pseudo-icon-bg-img;
|
||
top: 3px;
|
||
right: -8px;
|
||
background-image: $exit-svg;
|
||
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,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="%23FFF"/></svg>');
|
||
}
|
||
%with-inverted-tick {
|
||
@extend %pseudo-icon;
|
||
background-color: $color-transparent;
|
||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="%23#{$magenta-800-no-hash}"/></svg>');
|
||
height: 20px !important;
|
||
width: 16px !important;
|
||
}
|
||
%with-cross {
|
||
@extend %pseudo-icon;
|
||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M4 5.064L1.064 8 0 6.936 2.936 4 0 1.064 1.064 0 4 2.936 6.936 0 8 1.064 5.064 4 8 6.936 6.936 8 4 5.064z" fill="%23FFF"/></svg>');
|
||
}
|
||
%with-minus {
|
||
@extend %pseudo-icon;
|
||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" viewBox="0 0 9 2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" fill-rule="nonzero" d="M0 0h8v2H0z"/></svg>');
|
||
}
|
||
%with-right-arrow-green {
|
||
@extend %pseudo-icon;
|
||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.263.5L8.084 1.637l4.716 4.55H0v1.625h12.8l-4.716 4.55 1.18 1.138L16 7z" fill="%232EB039"/></svg>');
|
||
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,<svg width="13" height="11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23919FA8" d="M7.526.219l-.958.924L10.4 4.84H0v1.32h10.4L6.568 9.857l.958.924L13 5.5z"/></svg>');
|
||
}
|
||
// swap this out for new icons
|
||
%with-error {
|
||
position: relative;
|
||
padding-left: 18px;
|
||
}
|
||
%with-error::before {
|
||
@extend %with-cross;
|
||
margin-top: -0.5em;
|
||
}
|