mirror of https://github.com/status-im/consul.git
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
John Cowen
parent
f360137582
commit
5a2fc5bffb
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
%checkbox-group label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
||||
%confirmation-alert > ul > li > * {
|
||||
@extend %internal-button;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
%inline-alert {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
%inline-alert::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
||||
%menu-panel > ul > li > * {
|
||||
@extend %internal-button;
|
||||
}
|
||||
%menu-panel > ul > li.dangerous > * {
|
||||
@extend %internal-button-dangerous;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
/*%stats-card li:not(:last-child) span {*/
|
||||
%stats-card {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import './modal-dialog/index';
|
||||
@import '../base/components/modal-dialog/index';
|
||||
[role='dialog'] {
|
||||
@extend %modal-dialog;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
{{! action groups are block only components, you MUST specify a list of actions in the component body }}
|
||||
{{! therefore if you call this component as an inline component, nothing is produced }}
|
||||
{{#if hasBlock }}
|
||||
<input type="radio" name="actions" id="actions_{{index}}" checked={{if (eq checked 'checked') 'checked' }} onchange={{action onchange}} value={{index}} />
|
||||
<input type="radio" name="actions" id="actions_{{index}}" checked={{if (eq checked 'checked') 'checked'}} onchange={{action onchange}} value={{index}} />
|
||||
<label for="actions_{{index}}">
|
||||
<span>Open</span>
|
||||
<span>Open</span>
|
||||
</label>
|
||||
<label for="actions_close">
|
||||
<span>Close</span>
|
||||
<span>Close</span>
|
||||
</label>
|
||||
{{yield}}
|
||||
<div>
|
||||
{{yield}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue