mirror of https://github.com/status-im/consul.git
ui: Use structure-icons as much as possible (#6851)
* ui: Delete a bunch of CSS that we recently moved elsewhere * ui: Add some masking placeholders * Switch out hashicorp logo for one from structure-icons * Change copy-button to use new copy-action icon * Change secret-button to use new visibility-hide/show icons * New folder icon for KVs * Cleanup some of the icons we no longer use * Switch from %with-exit to standard-like %with-exit-icon * Move all chevrons to use structure-icons properly * Use star-fill as much as possible * Remove the remaining icons from icons/index plus the file itself
This commit is contained in:
John Cowen
GitHub
parent
06d09d11f1
commit
13eb536e24
|
|
@ -34,6 +34,14 @@
|
|||
padding-top: calc(0.4em - 1px) !important;
|
||||
padding-bottom: calc(0.4em - 1px) !important;
|
||||
}
|
||||
%copy-button:empty {
|
||||
padding: 5px !important;
|
||||
margin-right: 0;
|
||||
margin-top: -5px;
|
||||
}
|
||||
%copy-button:not(:empty)::before {
|
||||
margin-right: 10px;
|
||||
}
|
||||
%internal-button {
|
||||
padding: 0.9em 1em;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -15,15 +15,11 @@
|
|||
min-height: 17px;
|
||||
}
|
||||
%copy-button::before {
|
||||
@extend %with-copy-action-icon;
|
||||
@extend %as-pseudo;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
@extend %with-copy-action-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%copy-button:not(:empty) {
|
||||
padding-left: 38px !important;
|
||||
%copy-button:not(:empty)::before {
|
||||
margin-right: 10px;
|
||||
}
|
||||
%primary-button,
|
||||
%secondary-button,
|
||||
|
|
@ -44,7 +40,8 @@
|
|||
color: $color-action;
|
||||
background-color: $gray-050;
|
||||
}
|
||||
%copy-button:disabled {
|
||||
%copy-button:hover::before {
|
||||
background-color: $blue-500;
|
||||
}
|
||||
%copy-button:active {
|
||||
background-color: $gray-200;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@ $edit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns=
|
|||
$exit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 19V5h5.944V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-5.98h-2V19H5zm9-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="%23000"/></svg>');
|
||||
$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l2.3 2.3-2.89 2.87 1.42 1.42L8.7 16.7 11 19v-6H5zm14-2l-2.3-2.3 2.89-2.87-1.42-1.42L15.3 7.3 13 5v6h6z" fill="%23000"/></svg>');
|
||||
$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 4l2.3 2.3-2.89 2.87 1.42 1.42L17.7 7.7 20 10V4h-6zm-4 16l-2.3-2.3 2.89-2.87-1.42-1.42L6.3 16.3 4 14v6h6z" fill="%23000"/></svg>');
|
||||
$eye-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg"><path d="M10.229 1.301A3.493 3.493 0 0 1 11.5 4a3.493 3.493 0 0 1-1.271 2.699c1.547-.431 3.008-1.326 4.393-2.699-1.385-1.373-2.846-2.268-4.393-2.699zM5.771 6.7A3.493 3.493 0 0 1 4.5 4c0-1.086.495-2.057 1.271-2.699C4.224 1.732 2.763 2.627 1.378 4c1.385 1.373 2.846 2.268 4.393 2.699zM8 8C5.054 8 2.388 6.667 0 4c2.388-2.667 5.054-4 8-4 2.946 0 5.612 1.333 8 4-2.388 2.667-5.054 4-8 4zm.965-4.25a1 1 0 1 0 .07-2 1 1 0 0 0-.07 2z" fill="%237C8896"/></svg>');
|
||||
$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.714 7.714L14.43 3.43h-10v17.14h14.285V7.714zM20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zM5.857 17.714h10v-1.428h-10v1.428zm0-2.857h10V13.43h-10v1.428zm0-2.857h10v-1.429h-10V12zm0-4.286h5.714V6.286H5.857v1.428z" fill="%23000"/></svg>');
|
||||
$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zm-1.429.714H14.43V3.43h-10v17.14h14.285V7.714z" fill="%23000"/></svg>');
|
||||
$filter-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" fill="%23000"/></svg>');
|
||||
|
|
|
|||
|
|
@ -98,6 +98,11 @@
|
|||
background-image: $check-circle-fill-svg;
|
||||
}
|
||||
|
||||
%with-check-circle-fill-mask {
|
||||
@extend %with-mask;
|
||||
mask-image: $check-circle-fill-svg;
|
||||
}
|
||||
|
||||
%with-check-circle-outline-icon {
|
||||
@extend %with-icon;
|
||||
background-image: $check-circle-outline-svg;
|
||||
|
|
@ -178,6 +183,10 @@
|
|||
@extend %with-icon;
|
||||
background-image: $copy-action-svg;
|
||||
}
|
||||
%with-copy-action-mask {
|
||||
@extend %with-mask;
|
||||
mask-image: $copy-action-svg;
|
||||
}
|
||||
|
||||
%with-copy-success-icon {
|
||||
@extend %with-icon;
|
||||
|
|
@ -229,11 +238,6 @@
|
|||
background-image: $expand-more-svg;
|
||||
}
|
||||
|
||||
%with-eye-icon {
|
||||
@extend %with-icon;
|
||||
background-image: $eye-svg;
|
||||
}
|
||||
|
||||
%with-file-fill-icon {
|
||||
@extend %with-icon;
|
||||
background-image: $file-fill-svg;
|
||||
|
|
@ -269,6 +273,11 @@
|
|||
background-image: $folder-outline-svg;
|
||||
}
|
||||
|
||||
%with-folder-outline-mask {
|
||||
@extend %with-mask;
|
||||
mask-image: $folder-outline-svg;
|
||||
}
|
||||
|
||||
%with-git-branch-icon {
|
||||
@extend %with-icon;
|
||||
background-image: $git-branch-svg;
|
||||
|
|
@ -289,6 +298,10 @@
|
|||
background-image: $hashicorp-logo-svg;
|
||||
}
|
||||
|
||||
%with-hashicorp-logo-mask {
|
||||
@extend %with-mask;
|
||||
mask-image: $hashicorp-logo-svg;
|
||||
}
|
||||
%with-help-circle-fill-icon {
|
||||
@extend %with-icon;
|
||||
background-image: $help-circle-fill-svg;
|
||||
|
|
@ -473,6 +486,11 @@
|
|||
background-image: $star-fill-svg;
|
||||
}
|
||||
|
||||
%with-star-fill-mask {
|
||||
@extend %with-mask;
|
||||
mask-image: $star-fill-svg;
|
||||
}
|
||||
|
||||
%with-star-outline-icon {
|
||||
@extend %with-icon;
|
||||
background-image: $star-outline-svg;
|
||||
|
|
@ -572,8 +590,16 @@
|
|||
@extend %with-icon;
|
||||
background-image: $visibility-hide-svg;
|
||||
}
|
||||
%with-visibility-hide-mask {
|
||||
@extend %with-mask;
|
||||
mask-image: $visibility-hide-svg;
|
||||
}
|
||||
|
||||
%with-visibility-show-icon {
|
||||
@extend %with-icon;
|
||||
background-image: $visibility-show-svg;
|
||||
}
|
||||
%with-visibility-show-mask {
|
||||
@extend %with-mask;
|
||||
mask-image: $visibility-show-svg;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import '../base/components/anchors/index';
|
||||
a[rel*='external'] {
|
||||
@extend %with-exit;
|
||||
a[rel*='external']::after {
|
||||
@extend %with-exit-icon, %as-pseudo;
|
||||
margin-left: 8px;
|
||||
}
|
||||
%main-content label a[rel*='help'] {
|
||||
color: $gray-400;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
/*TODO: Rename this to %app-view-brand-icon or similar */
|
||||
%with-external-source-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
%app-view h2,
|
||||
%app-view fieldset {
|
||||
border-bottom: $decor-border-200;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
@import '../base/components/buttons/index';
|
||||
%copy-button {
|
||||
@extend %with-clipboard;
|
||||
}
|
||||
button[type='submit'],
|
||||
a.type-create {
|
||||
@extend %primary-button;
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
%checkbox-group span {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
min-width: 50px;
|
||||
}
|
||||
%checkbox-group label {
|
||||
margin-right: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
%checkbox-group label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
%form-row {
|
||||
margin-bottom: 1.4em;
|
||||
}
|
||||
%form-element {
|
||||
@extend %form-row;
|
||||
}
|
||||
%form-element,
|
||||
%form-element > em,
|
||||
%form-element > span,
|
||||
%form-element textarea {
|
||||
display: block;
|
||||
}
|
||||
%form-element a {
|
||||
display: inline;
|
||||
}
|
||||
%form-element > em > code {
|
||||
display: inline-block;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'] {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
%form-element textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
%form-element > span {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
%form-element > span + em {
|
||||
margin-top: -0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
%form-element textarea {
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 70px;
|
||||
padding: 0.625em 15px;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'] {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: 2.25em;
|
||||
}
|
||||
%form-element > em {
|
||||
margin-top: 2px;
|
||||
}
|
||||
%form-element > em > code {
|
||||
padding: 0 4px;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'],
|
||||
%form-element textarea {
|
||||
padding: 17px 13px;
|
||||
}
|
||||
%form-element textarea {
|
||||
padding: 6px 13px;
|
||||
}
|
||||
%form-element > span {
|
||||
margin-bottom: 0.4em !important;
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
%form-element > strong {
|
||||
@extend %with-error;
|
||||
}
|
||||
%form-element-error > input,
|
||||
%form-element-error > textarea {
|
||||
border: $decor-border-100;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'],
|
||||
%form-element textarea {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
box-shadow: inset 0 4px 1px rgba(0, 0, 0, 0.06);
|
||||
border-radius: $decor-radius-100;
|
||||
border: $decor-border-100;
|
||||
}
|
||||
%form-element [type='text']:focus,
|
||||
%form-element [type='password']:focus,
|
||||
%form-element textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
%form-element > em > code {
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
%form-element-error > input {
|
||||
border-color: $color-failure !important;
|
||||
}
|
||||
%form-element > strong {
|
||||
color: $color-failure;
|
||||
}
|
||||
%form-element > em {
|
||||
color: $gray-400;
|
||||
}
|
||||
%form-element > em > code {
|
||||
background-color: $gray-200;
|
||||
color: $magenta-600;
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
%form-element > span {
|
||||
color: $black;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'],
|
||||
%form-element textarea {
|
||||
color: $gray-500;
|
||||
}
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'],
|
||||
%form-element textarea {
|
||||
border-color: $gray-300;
|
||||
}
|
||||
%form-element [type='text']:hover,
|
||||
%form-element [type='password']:hover,
|
||||
%form-element textarea:hover {
|
||||
border-color: $gray-500;
|
||||
}
|
||||
%form-element [type='text']:focus,
|
||||
%form-element [type='password']:focus,
|
||||
%form-element textarea:focus {
|
||||
border-color: $blue-500;
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
@import './freetext-filter/index';
|
||||
@import './icons/index';
|
||||
.freetext-filter {
|
||||
@extend %freetext-filter;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
@import './healthcheck-info/index';
|
||||
@import './icons/index';
|
||||
tr .healthcheck-info {
|
||||
%table tr .healthcheck-info {
|
||||
@extend %healthcheck-info;
|
||||
}
|
||||
// TODO: Look at why we can't have the zeros in the healthcheck-info
|
||||
td span.zero {
|
||||
%table td span.zero {
|
||||
@extend %with-minus-square-fill-color-icon;
|
||||
background-position: left center;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,11 @@
|
|||
}
|
||||
|
||||
%stats-card-icon:last-child {
|
||||
/* TODO: In order to get rid of our colored star */
|
||||
/* this needs to use a %mask, and we are already using */
|
||||
/* our before/after psuedo elements for the tooltip */
|
||||
/* so this will need reworking slighly before we can */
|
||||
/* get rid of our hardcoded magenta star icon */
|
||||
@extend %with-star-icon;
|
||||
}
|
||||
%stats-card header > .zero {
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
/*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-folder {
|
||||
text-indent: 30px;
|
||||
}
|
||||
%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-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>');
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
%modal-dialog > div > div {
|
||||
@extend %modal-window;
|
||||
}
|
||||
%with-modal {
|
||||
overflow: hidden;
|
||||
}
|
||||
%modal-dialog {
|
||||
z-index: 500;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
%modal-control,
|
||||
%modal-control + * {
|
||||
display: none;
|
||||
}
|
||||
%modal-control:checked + * {
|
||||
display: block;
|
||||
}
|
||||
%modal-dialog > label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
%modal-dialog > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
%modal-window.overflowing {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
%modal-window {
|
||||
max-width: 855px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
%modal-window > * {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
%modal-window > div {
|
||||
overflow-y: auto;
|
||||
max-height: 80vh;
|
||||
padding: 20px 23px;
|
||||
}
|
||||
%modal-window > footer,
|
||||
%modal-window > header {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
%modal-window table {
|
||||
height: 150px !important;
|
||||
}
|
||||
%modal-window tbody {
|
||||
max-height: 100px;
|
||||
}
|
||||
%modal-window > header {
|
||||
position: relative;
|
||||
}
|
||||
%modal-window > header [for='modal_close'] {
|
||||
float: right;
|
||||
text-indent: -9000px;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
%modal-dialog > label {
|
||||
background-color: rgba($white, 0.9);
|
||||
}
|
||||
%modal-window {
|
||||
box-shadow: 2px 8px 8px 0 rgba($black, 0.1);
|
||||
}
|
||||
%modal-window {
|
||||
/*%frame-gray-000*/
|
||||
background-color: $white;
|
||||
border: $decor-border-100;
|
||||
border-color: $gray-300;
|
||||
}
|
||||
%modal-window > footer,
|
||||
%modal-window > header {
|
||||
@extend %frame-gray-800;
|
||||
}
|
||||
%modal-window > footer {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
%modal-window > header {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
%modal-window > header [for='modal_close'] {
|
||||
@extend %bg-icon;
|
||||
background-image: $cancel-plain-svg;
|
||||
background-size: 80%;
|
||||
|
||||
cursor: pointer;
|
||||
/*%frame-gray-050??*/
|
||||
background-color: $gray-050;
|
||||
border: $decor-border-100;
|
||||
border-color: $gray-300;
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
|
|
@ -1,5 +1,14 @@
|
|||
%footer > a:first-child {
|
||||
@extend %with-hashicorp;
|
||||
position: relative;
|
||||
}
|
||||
%footer > a:first-child::before {
|
||||
@extend %with-hashicorp-logo-mask, %as-pseudo;
|
||||
background-color: $gray-400;
|
||||
font-size: 1.4em;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.7em;
|
||||
left: -25px;
|
||||
}
|
||||
%footer {
|
||||
border-top: $decor-border-100;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
/* TODO: All of these folders should be self contained */
|
||||
/* figure out what the best way to deal with 'icons' is */
|
||||
/* most probably a centralized module */
|
||||
@import '../icons/index';
|
||||
@import './loader';
|
||||
@import './main-header-horizontal';
|
||||
@import '../main-nav-horizontal/index';
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import './layout';
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
%radio-group {
|
||||
overflow: hidden;
|
||||
}
|
||||
%radio-group label {
|
||||
float: left;
|
||||
}
|
||||
%radio-group label > span {
|
||||
float: right;
|
||||
}
|
||||
%radio-group {
|
||||
padding-left: 1px;
|
||||
}
|
||||
%radio-group label:not(:last-child) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
%radio-group label > span {
|
||||
margin-left: 1em;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
%radio-group label,
|
||||
%radio-group label > span {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
|
@ -3,9 +3,19 @@
|
|||
@extend %secret-button;
|
||||
}
|
||||
%secret-button {
|
||||
visibility: hidden;
|
||||
@extend %with-eye;
|
||||
position: relative;
|
||||
}
|
||||
%secret-button span {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
%secret-button em {
|
||||
margin-left: 22px;
|
||||
}
|
||||
%secret-button span::before {
|
||||
@extend %with-visibility-show-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%secret-button input:checked + span::before {
|
||||
@extend %with-visibility-hide-mask;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@
|
|||
%secret-button input {
|
||||
display: none;
|
||||
}
|
||||
%secret-button input + em {
|
||||
%secret-button input ~ em {
|
||||
visibility: hidden;
|
||||
font-style: normal;
|
||||
}
|
||||
%secret-button input:checked + em {
|
||||
%secret-button input:checked ~ em {
|
||||
@extend %user-select-text;
|
||||
visibility: visible;
|
||||
cursor: auto;
|
||||
}
|
||||
%secret-button input + em::before {
|
||||
%secret-button input ~ em::before {
|
||||
display: inline;
|
||||
visibility: visible;
|
||||
content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
|
||||
}
|
||||
%secret-button input:checked + em::before {
|
||||
%secret-button input:checked ~ em::before {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import './icons/index';
|
||||
@import '../base/components/table/index';
|
||||
table {
|
||||
@extend %table, %table-flex;
|
||||
|
|
@ -19,8 +18,11 @@ html.template-service.template-list main th:first-child {
|
|||
text-indent: 28px;
|
||||
}
|
||||
|
||||
td.folder {
|
||||
@extend %with-folder;
|
||||
td.folder::before {
|
||||
@extend %with-folder-outline-mask, %as-pseudo;
|
||||
background-color: $gray-300;
|
||||
margin-top: 1px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
table:not(.sessions) tbody tr {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
%tabular-details-toggle-button {
|
||||
@extend %with-chevron-down;
|
||||
%tabular-details-toggle-button::before {
|
||||
@extend %with-chevron-down-icon, %as-pseudo;
|
||||
}
|
||||
%tabular-details td:only-child {
|
||||
cursor: default;
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
%toggle label {
|
||||
position: relative;
|
||||
}
|
||||
%toggle input {
|
||||
display: none;
|
||||
}
|
||||
%toggle label span {
|
||||
display: inline-block;
|
||||
padding-left: 34px;
|
||||
}
|
||||
%toggle label span::before,
|
||||
%toggle label span::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
top: 50%;
|
||||
}
|
||||
%toggle label span::before {
|
||||
left: 0px;
|
||||
width: 24px;
|
||||
height: 12px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
%toggle label span::after {
|
||||
margin-top: -3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
%toggle label input:checked + span::after,
|
||||
%toggle-negative label input + span::after {
|
||||
left: 14px;
|
||||
}
|
||||
%toggle label span::after,
|
||||
%toggle-negative label input:checked + span::after {
|
||||
left: 2px;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
/* TODO: Maybe move this to reset? */
|
||||
%toggle label span {
|
||||
cursor: pointer;
|
||||
}
|
||||
%toggle label span::after {
|
||||
border-radius: $decor-radius-full;
|
||||
}
|
||||
%toggle label span::before {
|
||||
border-radius: 7px;
|
||||
}
|
||||
%toggle-negative {
|
||||
border: 0;
|
||||
}
|
||||
%toggle.type-negative {
|
||||
@extend %toggle-negative;
|
||||
}
|
||||
%toggle label span {
|
||||
color: $gray-900;
|
||||
}
|
||||
%toggle label span::after {
|
||||
background-color: $white;
|
||||
}
|
||||
%toggle label input:checked + span::before,
|
||||
%toggle-negative label input + span::before {
|
||||
background-color: $blue-500;
|
||||
}
|
||||
%toggle label span::before,
|
||||
%toggle-negative label input:checked + span::before {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
td a.is-management {
|
||||
@extend %with-star-after;
|
||||
}
|
||||
td a.is-management::after {
|
||||
@extend %with-star-fill-mask, %as-pseudo;
|
||||
background-color: $magenta-600;
|
||||
height: 16px;
|
||||
top: 2px;
|
||||
padding-left: 32px;
|
||||
|
|
|
|||
|
|
@ -5,14 +5,12 @@
|
|||
float: right;
|
||||
}
|
||||
%token-yours {
|
||||
text-indent: 20px;
|
||||
color: $blue-500;
|
||||
padding-left: 15px;
|
||||
}
|
||||
%token-yours::after {
|
||||
@extend %with-tick;
|
||||
border-radius: 100%;
|
||||
%token-yours::before {
|
||||
@extend %with-check-circle-fill-mask, %as-pseudo;
|
||||
background-color: $blue-500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.me ~ :nth-last-child(2) {
|
||||
@extend %token-yours;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@
|
|||
position: relative;
|
||||
}
|
||||
#urls_service span::after {
|
||||
@extend %with-tick;
|
||||
background-color: $green-500;
|
||||
border-radius: 100%;
|
||||
top: 13px;
|
||||
@extend %with-check-circle-fill-color-icon, %as-pseudo;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
}
|
||||
#urls_service span::after {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<label class="type-reveal">
|
||||
<span>Reveal</span>
|
||||
<input type="checkbox" />
|
||||
<span>Reveal</span>
|
||||
<em>{{yield}}</em>
|
||||
</label>
|
||||
Loading…
Reference in New Issue