luxolus/open-consul
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity
open-consul/ui-v2/app/styles/components/icons.scss
John Cowen 96ea5b799a WIP: First draft intentions 
1. Listing, filtering by action and searching by source name and
destination name
2. Edit/Create page, edits ping the API double fine, need to work through
creates and deletes
3. Currently uses a `Precedence` intention keyname that doesn't yet
exist in the real API
2018-06-25 12:25:14 -07:00

178 lines
7.4 KiB
SCSS
Raw Blame History

%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,<svg width="23" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="%23a5b0b7"><path d="M9.753 1L1 5.541v10.911l3.288 1.707V7.25l5.465-2.837z"/><path d="M13.247 1v8.688H9.753V6.446l-3.29 1.708v11.131l3.29 1.711v-8.663h3.494v3.22l3.288-1.707V2.708z"/><path d="M13.247 21L22 16.459V5.548l-3.29-1.707v10.91l-5.463 2.837z"/></g></svg>');
width: 23px;
height: 22px;
left: -25px;
margin-top: -11px;
background-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: transparent;
}
%with-chevron::before {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="6" height="9" xmlns="http://www.w3.org/2000/svg"><path fill="%230068FF" d="M5.771 9H3.527L.334 4.834 3.527.674h2.244l-3.193 4.16z" opacity=".33"/></svg>');
width: 6px;
height: 9px;
left: 0;
margin-top: -4px;
background-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,<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: 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: 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,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle stroke="%23BBC4D1" fill="%23FFF" cx="7" cy="7" r="7"/><path fill="%236A7786" d="M6.15 4.677V3.233h1.56v1.444zM6.15 11.374V6.35h1.56v5.023z"/></svg>');
background-color: transparent;
width: 16px;
height: 16px;
}
%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: 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="#{$magenta-800-url-encoded}"/></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-warning-icon-orange {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M13.645 10.092c.24.409.365.88.365 1.37 0 1.392-1.027 2.527-2.294 2.538H2.322c-.824 0-1.592-.487-2.004-1.27a2.761 2.761 0 0 1 0-2.538l4.686-8.904C5.416.505 6.184.018 7.008.018c.824 0 1.592.487 2.004 1.27l4.633 8.804zm-5.989 1.264V9.607H6.344v1.749h1.312zm0-3.048v-4.37H6.344v4.37h1.312z" fill="%23fa8f37"/></svg>');
}
%with-warning-icon-grey {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M13.645 10.092c.24.409.365.88.365 1.37 0 1.392-1.027 2.527-2.294 2.538H2.322c-.824 0-1.592-.487-2.004-1.27a2.761 2.761 0 0 1 0-2.538l4.686-8.904C5.416.505 6.184.018 7.008.018c.824 0 1.592.487 2.004 1.27l4.633 8.804zm-5.989 1.264V9.607H6.344v1.749h1.312zm0-3.048v-4.37H6.344v4.37h1.312z" fill="%23949daa"/></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: transparent;
}
%with-deny-icon {
@extend %pseudo-icon;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="#C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="#C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
width: 16px;
height: 16px;
background-color: transparent;
}
%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: transparent;
}
%with-critical::before {
@extend %with-cross;
border-radius: 20%;
}
Reference in a new issue View git blame Copy permalink