ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495)

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.
This commit is contained in:
John Cowen 2019-11-25 17:43:25 +00:00 committed by John Cowen
parent f360137582
commit 5a2fc5bffb
41 changed files with 629 additions and 140 deletions

View File

@ -82,7 +82,7 @@ const change = function(e) {
const dom = get(this, 'dom');
const $tr = dom.closest('tr', e.currentTarget);
const $group = dom.sibling(e.currentTarget, 'ul');
const $group = dom.sibling(e.currentTarget, 'div');
const groupRect = $group.getBoundingClientRect();
const groupBottom = groupRect.top + $group.clientHeight;

View File

@ -1,7 +1,18 @@
@import '../toggle-button/index';
@import '../menu-panel/index';
@import '../confirmation-alert/index';
@import './skin';
@import './layout';
%action-group label:first-of-type {
%action-group > div {
@extend %menu-panel;
}
%action-group > label:first-of-type {
@extend %toggle-button;
}
%action-group .confirmation-alert {
@extend %confirmation-alert;
}
%action-group .type-delete {
@extend %internal-button-dangerous;
}

View File

@ -4,75 +4,36 @@
width: 30px;
height: 30px;
}
%action-group label span {
%action-group > div {
transition: min-height 150ms;
min-height: 0;
width: 192px;
}
%action-group .confirmation-alert {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
%action-group > label span {
display: none;
}
%action-group label {
%action-group > label {
display: block;
height: 100%;
}
%action-group label:last-of-type {
%action-group > label:last-of-type {
position: absolute;
width: 100%;
z-index: -1;
top: 0;
}
%action-group-action {
width: 170px;
padding: 10px 10px;
text-align: left;
}
/* this is actually the group */
%action-group ul {
position: absolute;
padding: 1px;
}
%action-group li > * {
@extend %action-group-action;
}
%action-group ul::before {
position: absolute;
content: '';
display: block;
width: 10px;
height: 10px;
}
%action-group ul:not(.left) {
right: 0px;
}
%action-group ul:not(.left)::before {
right: 9px;
}
%action-group ul.left {
left: 0px;
}
%action-group ul.left::before {
left: 9px;
}
%action-group ul:not(.above) {
top: 23px;
}
%action-group ul:not(.above)::before {
top: -6px;
transform: rotate(45deg);
}
%action-group ul.above {
bottom: 23px;
}
%action-group ul.above::before {
bottom: -6px;
transform: rotate(225deg);
}
%action-group li {
position: relative;
z-index: 1;
}
%action-group input[type='radio'],
%action-group input[type='radio'] ~ ul,
%action-group input[type='radio'] ~ div,
%action-group input[type='radio'] ~ .with-confirmation > ul {
display: none;
}
%action-group input[type='radio']:checked ~ ul,
%action-group input[type='radio']:checked ~ div,
%action-group input[type='radio']:checked ~ .with-confirmation > ul {
display: block;
}
@ -80,3 +41,17 @@
%action-group input[type='radio']:checked ~ label[for='actions_close'] {
z-index: 1;
}
%action-group input[type='checkbox'] {
@extend %action-group-confirm-toggle;
}
%action-group-confirm-toggle {
display: none;
}
%action-group-confirm-toggle + div > ul,
%action-group-confirm-toggle + div > ul + div {
transition: transform 150ms;
}
%action-group-confirm-toggle:checked + div > ul,
%action-group-confirm-toggle:checked + div > ul + div {
transform: translateX(-100%);
}

View File

@ -2,38 +2,11 @@
/* frame-gray */
background-color: $gray-050;
}
%action-group label,
%action-group-action {
%action-group > label {
cursor: pointer;
}
%action-group label:first-of-type::after {
%action-group > label:first-of-type::after {
@extend %with-more-horizontal-icon;
@extend %as-pseudo;
opacity: 0.7;
}
%action-group ul {
border: $decor-border-100;
border-radius: $decor-radius-100;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
}
%action-group ul::before {
border-top: $decor-border-100;
border-left: $decor-border-100;
}
%action-group ul,
%action-group ul::before {
border-color: $color-action;
}
%action-group-action {
background-color: $white;
}
%action-group-action:hover {
@extend %frame-blue-800;
}
%action-group ul,
%action-group ul::before {
background-color: $white;
}
%action-group li {
list-style-type: none;
}

View File

@ -6,3 +6,18 @@
%breadcrumbs strong {
@extend %breadcrumb-selected;
}
%breadcrumbs-milestone {
@extend %breadcrumbs;
}
%breadcrumbs-milestone li:first-child > * {
@extend %breadcrumb-milestone;
}
%breadcrumbs-filesystem {
@extend %breadcrumbs;
}
%breadcrumbs-filesystem li:not(:first-child) > * {
@extend %breadcrumb-path;
}
%breadcrumbs-filesystem li:first-child > * {
@extend %breadcrumb-folder;
}

View File

@ -2,10 +2,25 @@
list-style-type: none;
}
%breadcrumb::before {
content: '';
line-height: 1;
font-size: 0.7em;
margin-top: 0.1em;
margin-top: 0.2em;
}
%breadcrumb::before {
content: '';
}
%breadcrumb-milestone::before {
content: '';
}
%breadcrumb-path::before {
content: '/';
}
%breadcrumb-folder::before {
position: relative;
top: 2px;
margin-top: -4px;
@extend %with-folder-outline-color-icon;
@extend %as-pseudo;
}
%breadcrumb {
color: $color-action;

View File

@ -38,3 +38,9 @@
padding-top: calc(0.35em - 1px) !important;
height: 2.3em !important;
}
%internal-button {
padding: 0.75rem 1rem;
text-align: center;
display: inline-block;
box-sizing: border-box;
}

View File

@ -1,10 +1,12 @@
/* decor */
%button {
%button,
%internal-button {
@extend %user-select-none;
cursor: pointer;
white-space: nowrap;
}
%button:disabled {
%button:disabled,
%internal-button:disabled {
cursor: default;
box-shadow: none;
}
@ -92,3 +94,21 @@
%dangerous-button:hover:active {
@extend %frame-red-900;
}
%internal-button-dangerous {
@extend %frame-red-300;
}
%internal-button-dangerous-intent {
@extend %frame-red-700;
}
%internal-button-intent {
background-color: $gray-100;
}
%internal-button:focus,
%internal-button:hover {
@extend %internal-button-intent;
}
%internal-button-dangerous:focus,
%internal-button-dangerous:hover {
@extend %internal-button-dangerous-intent;
}

View File

@ -0,0 +1,2 @@
@import './skin';
@import './layout';

View File

@ -0,0 +1,14 @@
/* TODO: This is positioning the group */
/* probably should be in a special %form class*/
%checkbox-group {
@extend %form-row;
}
%checkbox-group span {
display: inline-block;
margin-left: 10px;
min-width: 50px;
}
%checkbox-group label {
margin-right: 10px;
white-space: nowrap;
}

View File

@ -0,0 +1,3 @@
%checkbox-group label {
cursor: pointer;
}

View File

@ -0,0 +1,6 @@
@import './skin';
@import './layout';
%confirmation-alert > ul > li > * {
@extend %internal-button;
}

View File

@ -0,0 +1,14 @@
%confirmation-alert > div {
padding: 1rem;
}
%confirmation-alert > ul {
display: flex;
margin: 0;
padding: 4px;
}
%confirmation-alert > ul > li {
width: 50%;
}
%confirmation-alert > ul > li > * {
width: 100%;
}

View File

@ -0,0 +1,26 @@
%confirmation-alert {
background-color: $white;
}
%confirmation-alert > div {
background-color: $yellow-050;
border-top-left-radius: $decor-radius-200;
border-top-right-radius: $decor-radius-200;
}
%confirmation-alert > ul {
list-style: none;
}
%confirmation-alert > ul > li > * {
cursor: pointer;
}
%confirmation-alert > ul > li > *:hover,
%confirmation-alert > ul > li > *:focus {
background-color: $gray-100;
}
%confirmation-alert > ul > .dangerous > * {
@extend %frame-red-300;
}
%confirmation-alert > ul > .dangerous > *:hover,
%confirmation-alert > ul > .dangerous > *:focus {
@extend %frame-red-700;
}

View File

@ -0,0 +1,27 @@
@import './skin';
@import './layout';
/* TODO: This is positioning the element */
/* probably should be in a special %form class*/
%form-element {
@extend %form-row;
}
%form-element > span {
@extend %form-element-label;
}
%form-element > em {
@extend %form-element-note;
}
%form-element-error > strong {
@extend %inline-alert-error;
}
%form-element [type='text'],
%form-element [type='password'],
%form-element textarea {
@extend %form-element-text-input;
}
%form-element-text-input:hover {
@extend %form-element-text-input-hover;
}
%form-element-text-input:focus {
@extend %form-element-text-input-focus;
}

View File

@ -0,0 +1,52 @@
%form-element,
%form-element-label,
%form-element-note,
%form-element textarea {
display: block;
}
%form-element a {
display: inline;
}
%form-element-note > 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-row {
margin-bottom: 1.4em;
}
%form-element-label {
margin-bottom: 0.3em;
}
%form-element [type='text'],
%form-element [type='password'] {
max-width: 100%;
width: 100%;
/* height: 2.25em; */
height: 0;
padding: 17px 13px;
}
%form-element textarea {
max-width: 100%;
min-width: 100%;
min-height: 70px;
padding: 6px 13px;
}
%form-element-note {
margin-top: 2px;
}
/* this is for label span em input */
%form-element-label + em {
margin-top: -0.5em;
margin-bottom: 0.5em;
}
%form-element-note > code {
padding: 0 4px;
}

View File

@ -0,0 +1,45 @@
%form-element-note {
font-style: normal;
}
%form-element-label {
font-weight: $typo-weight-semibold;
}
%form-element-text-input {
-moz-appearance: none;
-webkit-appearance: none;
box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.06);
border-radius: $decor-radius-100;
border: $decor-border-100;
outline: none;
}
%form-element-text-input::placeholder {
color: $gray-400;
}
%form-element-note > code {
border-radius: $decor-radius-100;
}
%form-element-error > input,
%form-element-error > textarea {
border-color: $color-failure !important;
}
%form-element-text-input {
color: $gray-500;
border-color: $gray-300;
}
%form-element-text-input-hover {
border-color: $gray-500;
}
%form-element-text-input-focus {
border-color: $blue-500;
}
%form-element-label {
color: $black;
}
%form-element-note {
color: $gray-400;
}
%form-element-note > code {
background-color: $gray-200;
/* consul color but its a code looking style?*/
color: $magenta-600;
}

View File

@ -0,0 +1,2 @@
@import './skin';
@import './layout';

View File

@ -0,0 +1,10 @@
%inline-alert {
position: relative;
padding-left: 20px;
}
%inline-alert::before {
position: absolute;
top: 50%;
left: 0;
margin-top: -8px;
}

View File

@ -0,0 +1,39 @@
%inline-alert {
font-style: normal;
font-weight: normal;
}
%inline-alert-success,
%inline-alert-info,
%inline-alert-error,
%inline-alert-warning {
@extend %inline-alert;
}
%inline-alert {
color: inherit;
}
%inline-alert-error {
color: $color-failure;
}
%inline-alert::before {
font-size: 14px;
}
%inline-alert-success::before {
@extend %with-check-circle-fill-color-icon;
@extend %as-pseudo;
}
%inline-alert-error::before {
@extend %with-cancel-square-fill-color-icon;
@extend %as-pseudo;
}
%inline-alert-warning::before {
@extend %with-alert-triangle-color-icon;
@extend %as-pseudo;
/* the warning triangle always looks */
/* too low just because its a triangle */
/* this tweak make it look better */
margin-top: -9px;
}
%inline-alert-info::before {
@extend %with-info-circle-fill-color-icon;
@extend %as-pseudo;
}

View File

@ -0,0 +1,9 @@
@import './skin';
@import './layout';
%menu-panel > ul > li > * {
@extend %internal-button;
}
%menu-panel > ul > li.dangerous > * {
@extend %internal-button-dangerous;
}

View File

@ -0,0 +1,28 @@
%menu-panel {
position: absolute;
overflow: hidden;
}
%menu-panel:not(.left) {
right: 0px;
}
%menu-panel.left {
left: 0px;
}
%menu-panel:not(.above) {
top: 28px;
}
%menu-panel.above {
bottom: 28px;
}
%menu-panel > ul {
margin: 0;
padding: 4px 0;
}
%menu-panel > ul,
%menu-panel > ul > li,
%menu-panel > ul > li > * {
width: 100%;
}
%menu-panel > ul > li > * {
text-align: left !important;
}

View File

@ -0,0 +1,12 @@
%menu-panel {
border: $decor-border-100;
border-radius: $decor-radius-200;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
}
%menu-panel {
border-color: $gray-300;
background-color: $white;
}
%menu-panel > ul > li {
list-style-type: none;
}

View File

@ -0,0 +1,2 @@
@import './skin';
@import './layout';

View File

@ -0,0 +1,75 @@
%with-modal {
overflow: hidden;
}
/*TODO: %display-toggle?*/
%modal-control,
%modal-control + * {
display: none;
}
%modal-control:checked + * {
display: block;
}
%modal-dialog > div > div {
@extend %modal-window;
}
%modal-dialog {
z-index: 500;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
%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%;
}
/*TODO: Should these be here? */
%modal-window table {
height: 150px !important;
}
%modal-window tbody {
max-height: 100px;
}
/**/
%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 > header {
position: relative;
}
%modal-window > header [for='modal_close'] {
float: right;
text-indent: -9000px;
width: 23px;
height: 23px;
}

View File

@ -0,0 +1,32 @@
%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 %with-cancel-plain-icon;
cursor: pointer;
border: $decor-border-100;
/*%frame-gray-050??*/
background-color: $gray-050;
border-color: $gray-300;
border-radius: $decor-radius-100;
}

View File

@ -0,0 +1,2 @@
@import './skin';
@import './layout';

View File

@ -0,0 +1,23 @@
%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;
}

View File

@ -0,0 +1,2 @@
@import './skin';
@import './layout';

View File

@ -0,0 +1,36 @@
%sliding-toggle label {
position: relative;
}
%sliding-toggle input {
display: none;
}
%sliding-toggle label span {
display: inline-block;
padding-left: 34px;
}
%sliding-toggle label span::before,
%sliding-toggle label span::after {
position: absolute;
display: block;
content: '';
top: 50%;
}
%sliding-toggle label span::before {
left: 0px;
width: 24px;
height: 12px;
margin-top: -5px;
}
%sliding-toggle label span::after {
margin-top: -3px;
width: 8px;
height: 8px;
}
%sliding-toggle label input:checked + span::after,
%sliding-toggle-negative label input + span::after {
left: 14px;
}
%sliding-toggle label span::after,
%sliding-toggle-negative label input:checked + span::after {
left: 2px;
}

View File

@ -0,0 +1,30 @@
/* TODO: Maybe move this to reset? */
%sliding-toggle label span {
cursor: pointer;
}
%sliding-toggle label span::after {
border-radius: $decor-radius-full;
}
%sliding-toggle label span::before {
border-radius: 7px;
}
%sliding-toggle-negative {
border: 0;
}
%sliding-toggle.type-negative {
@extend %sliding-toggle-negative;
}
%sliding-toggle label span {
color: $gray-900;
}
%sliding-toggle label span::after {
background-color: $white;
}
%sliding-toggle label input:checked + span::before,
%sliding-toggle-negative label input + span::before {
background-color: $blue-500;
}
%sliding-toggle label span::before,
%sliding-toggle-negative label input:checked + span::before {
background-color: $gray-300;
}

View File

@ -1,4 +1,3 @@
/*%stats-card li:not(:last-child) span {*/
%stats-card {
position: relative;
}

View File

@ -32,7 +32,7 @@ $code-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns=
$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.82 3C13.4 1.84 12.3 1 11 1c-1.3 0-2.4.84-2.82 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM9 13H6v2h3v-2zm-3 6h5v-2H6v2zM6 9v2h6V9H6zm5-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm9.003 10H23v2h-2.997v2H18v4H4V5h2v1.007h10V5h2v5.992h2.003V13zm0 0H15.99v-3L12 14l3.99 4v-3h4.013v-2z" fill="%23000"/></svg>');
$copy-success-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.82 3C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16.025c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM12 3c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 15l-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10l-8 8z" fill="%23000"/></svg>');
$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 16" width="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>');
$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 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>');
$deny-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23000" d="M7.79 2.992l-.737.711L10 6.547H2v1.016h8l-2.947 2.843.736.711L12 7.055z"/><rect stroke="%23000" 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="%23000" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
$disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="%23000"/></svg>');
$docs-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.5 11H20v9.5c0 .786-.714 1.5-1.5 1.5h-14c-.786 0-1.5-.714-1.5-1.5v-17C3 2.714 3.714 2 4.5 2H13v1.5H4.5v17h14V11zM7 17.714h9v-1.428H7v1.428zm0-2.857h9V13.43H7v1.428zM7 12h9v-1.429H7V12zm0-4.286V6.286h5v1.428H7zM17 2.5V1h6v6h-1.5V3.429L18 7l-1-1 3.5-3.5H17z" fill="%23000"/></svg>');
@ -47,6 +47,7 @@ $file-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24
$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>');
$flag-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.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" fill="%23000"/></svg>');
$folder-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="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="%23000"/></svg>');
$folder-outline-color-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 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%231563ff"/></svg>');
$folder-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 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%23000"/></svg>');
$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.286 9.699a1.556 1.556 0 0 1-1.543-1.543c0-.836.707-1.543 1.543-1.543.835 0 1.543.707 1.543 1.543 0 .835-.708 1.543-1.543 1.543M8.57 19.984a1.556 1.556 0 0 1-1.542-1.543c0-.835.707-1.542 1.542-1.542.836 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543m0-15.955c.849 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543a1.564 1.564 0 0 1-1.54-1.543c0-.835.707-1.542 1.542-1.542m10.286 4.114a2.563 2.563 0 0 0-2.571-2.572A2.562 2.562 0 0 0 15 10.354v.386c-.026.669-.296 1.26-.81 1.774-.514.515-1.106.785-1.774.81-1.067.026-1.903.206-2.572.58V7.783A2.563 2.563 0 0 0 8.56 3 2.552 2.552 0 0 0 6 5.571a2.571 2.571 0 0 0 1.286 2.212v8.434C6.527 16.667 6 17.49 6 18.43A2.563 2.563 0 0 0 8.571 21a2.563 2.563 0 0 0 2.572-2.571c0-.682-.257-1.286-.682-1.749.116-.077.618-.526.759-.604.321-.142.72-.219 1.209-.219 1.35-.064 2.507-.578 3.535-1.607 1.029-1.029 1.543-2.546 1.607-3.883h-.025c.784-.463 1.311-1.286 1.311-2.224" fill="%23000"/></svg>');
$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.971a2.82 2.82 0 0 1-2.829-2.828A2.82 2.82 0 0 1 12 9.314a2.82 2.82 0 0 1 2.829 2.829A2.82 2.82 0 0 1 12 14.97zm4.963-4.114C16.384 8.646 14.39 7 12 7s-4.384 1.646-4.963 3.857H3v2.572h4.037C7.616 15.64 9.61 17.286 12 17.286s4.384-1.646 4.963-3.857H21v-2.572h-4.037z" fill="%23000"/></svg>');
@ -82,8 +83,8 @@ $plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 2
$queue-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9H2v2h17V9zm0-5H2v2h17V4zM2 16h13v-2H2v2zm20 4v-6l-5 3 5 3z" fill="%23000"/></svg>');
$refresh-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="%23000"/></svg>');
$run-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="structure-icon-run"><style>.structure-icon-run {animation: structure-icon-run-simple-spin 1s infinite linear;}.structure-icon-run-progress {animation: structure-icon-run-fancy-spin 3s infinite linear;fill: transparent;opacity: 0.66;stroke-dasharray: 16 16;transform-origin: 50% 50%;}@keyframes structure-icon-run-fancy-spin {0% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}50% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}100% {stroke-dasharray: 4 32;}}@keyframes structure-icon-run-simple-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="8" stroke="%23000" stroke-width="4"/><circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" class="structure-icon-run-progress"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g></svg>');
$search-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23000"/></svg>');
$search-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%231563ff"/></svg>');
$search-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23000"/></svg>');
$service-identity-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M6.5 13a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm11-3a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm-4 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z" id="a"/></defs><use fill="%239E2159" xlink:href="%23a" fill-rule="evenodd"/></svg>');
$settings-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" fill="%23000"/></svg>');
$star-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="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="%23000"/></svg>');

View File

@ -243,6 +243,11 @@
background-image: $folder-fill-svg;
}
%with-folder-outline-color-icon {
@extend %with-icon;
background-image: $folder-outline-color-svg;
}
%with-folder-outline-icon {
@extend %with-icon;
background-image: $folder-outline-svg;
@ -418,15 +423,16 @@
background-image: $run-svg;
}
%with-search-icon {
@extend %with-icon;
background-image: $search-svg;
}
%with-search-color-icon {
@extend %with-icon;
background-image: $search-color-svg;
}
%with-search-icon {
@extend %with-icon;
background-image: $search-svg;
}
%with-service-identity-icon {
@extend %with-icon;
background-image: $service-identity-svg;

View File

@ -8,9 +8,6 @@
top: 8px;
right: 15px;
}
%action-group ul.above {
bottom: 35px;
}
%action-group ul:not(.above) {
top: 35px;
%action-group .type-delete {
@extend %internal-button-dangerous;
}

View File

@ -1,9 +1,10 @@
/*TODO: This remains a mix of form-elements */
/* form-elements should probably be a collection of these */
@import './form-elements/index';
@import './toggle/index';
@import './radio-group/index';
@import './checkbox-group/index';
@import '../base/components/inline-alert/index';
@import '../base/components/form-elements/index';
@import '../base/components/sliding-toggle/index';
@import '../base/components/radio-group/index';
@import '../base/components/checkbox-group/index';
label span {
@extend %user-select-none;
}
@ -15,7 +16,7 @@ label span {
@extend %form-element;
}
.type-toggle {
@extend %form-element, %toggle;
@extend %form-element, %sliding-toggle;
}
%form-element,
%radio-group,
@ -37,6 +38,6 @@ form table,
fieldset > p {
color: $gray-400;
}
%toggle + .checkbox-group {
%sliding-toggle + .checkbox-group {
margin-top: -1em;
}

View File

@ -58,8 +58,7 @@
%with-hashicorp,
%with-folder,
%with-chevron,
%with-clipboard,
%with-right-arrow {
%with-clipboard {
position: relative;
}
%with-chevron {
@ -169,31 +168,7 @@
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;
}

View File

@ -1,4 +1,4 @@
@import './modal-dialog/index';
@import '../base/components/modal-dialog/index';
[role='dialog'] {
@extend %modal-dialog;
}

View File

@ -26,7 +26,8 @@ h3,
letter-spacing: -0.05em;
}
%button {
%button,
%internal-button {
font-family: $typo-family-sans;
}
/* Weighting */
@ -96,6 +97,7 @@ body,
pre code,
input,
textarea,
%internal-button,
%action-group-action,
%tbody-th {
font-size: $typo-size-600;

View File

@ -8,5 +8,7 @@
<label for="actions_close">
<span>Close</span>
</label>
<div>
{{yield}}
</div>
{{/if}}