mirror of
https://github.com/status-im/consul.git
synced 2025-02-22 10:28:31 +00:00
d0405ba8b9
* Move almost everything to use %frames * Fix pill styles of ACL types * Remove horizontal scrollbars from dom recycling scroller component * Make text areas look ok in Firefox * Remove ember-bulma-css * New form elements, break out %toggle * %button design tweaks * %form-element design tweaks * Better hashicorp logo * Small screen CSS improvements (#4624) 1. Reduce header size when there are no breadcrumbs 2. Make the filters toggleable, closed by default 3. Reduce the size of the footer on small screens 4. Hide all non-primary columns for forms 5. Slightly change the layout of various items, mainly buttons within forms 6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small screens
219 lines
8.9 KiB
SCSS
219 lines
8.9 KiB
SCSS
/*TODO: The old pseudo-icon was to specific */
|
|
/* make a temporary one with the -- prefix */
|
|
/* to make it more reusable temporarily */
|
|
%--pseudo-icon {
|
|
display: block;
|
|
content: '';
|
|
visibility: visible;
|
|
position: absolute;
|
|
top: 50%;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
%pseudo-icon-bg-img {
|
|
@extend %--pseudo-icon;
|
|
background-size: contain;
|
|
background-color: transparent;
|
|
}
|
|
%pseudo-icon-css {
|
|
@extend %--pseudo-icon;
|
|
width: 1em;
|
|
height: 1em;
|
|
margin-top: -0.6em;
|
|
background-color: currentColor;
|
|
}
|
|
%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: $ui-white;
|
|
}
|
|
%with-hashicorp::before {
|
|
@extend %pseudo-icon;
|
|
opacity: .45;
|
|
background-image: $hashicorp-svg;
|
|
background-size: cover;
|
|
width: 20px;
|
|
height: 20px;
|
|
left: -25px;
|
|
margin-top: -10px;
|
|
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,<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: $ui-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: $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,<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: $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,<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: $ui-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: $ui-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-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-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: $ui-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>');
|
|
}
|
|
%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="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" 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="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
|
|
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,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23919FA8" d="M7.79 2.992l-.737.711L10 6.547H2v1.016h8l-2.947 2.843.736.711L12 7.055z"/><rect stroke="%23919FA8" stroke-width="1.5" x=".75" y=".75" width="12.5" height="12.5" rx="6.25"/><path d="M3.063 3.063l7.874 7.874" stroke="%23919FA8" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
|
|
}
|
|
%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%;
|
|
}
|
|
%with-no-healthchecks::before {
|
|
@extend %with-minus;
|
|
border-radius: 20%;
|
|
}
|