eb7b69cc24
This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
175 lines
6 KiB
SCSS
175 lines
6 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 {
|
||
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-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>');
|
||
}
|