diff --git a/ui-v2/app/styles/base/components/buttons/layout.scss b/ui-v2/app/styles/base/components/buttons/layout.scss index 7a82c84d15..42a70eb8ae 100644 --- a/ui-v2/app/styles/base/components/buttons/layout.scss +++ b/ui-v2/app/styles/base/components/buttons/layout.scss @@ -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; diff --git a/ui-v2/app/styles/base/components/buttons/skin.scss b/ui-v2/app/styles/base/components/buttons/skin.scss index cbbf4fa3c1..7db009cb42 100644 --- a/ui-v2/app/styles/base/components/buttons/skin.scss +++ b/ui-v2/app/styles/base/components/buttons/skin.scss @@ -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; diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index baf188481a..400fefb7e9 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -42,7 +42,6 @@ $edit-svg: url('data:image/svg+xml;charset=UTF-8,'); $expand-less-svg: url('data:image/svg+xml;charset=UTF-8,'); $expand-more-svg: url('data:image/svg+xml;charset=UTF-8,'); -$eye-svg: url('data:image/svg+xml;charset=UTF-8,'); $file-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $file-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $filter-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss index 532ad17acf..c3af9e1d76 100644 --- a/ui-v2/app/styles/base/icons/icon-placeholders.scss +++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss @@ -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; +} diff --git a/ui-v2/app/styles/components/anchors.scss b/ui-v2/app/styles/components/anchors.scss index 705ef7e2c7..0a8a9215b5 100644 --- a/ui-v2/app/styles/components/anchors.scss +++ b/ui-v2/app/styles/components/anchors.scss @@ -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; diff --git a/ui-v2/app/styles/components/app-view/skin.scss b/ui-v2/app/styles/components/app-view/skin.scss index 20cbf18e11..511d08cf13 100644 --- a/ui-v2/app/styles/components/app-view/skin.scss +++ b/ui-v2/app/styles/components/app-view/skin.scss @@ -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; diff --git a/ui-v2/app/styles/components/buttons.scss b/ui-v2/app/styles/components/buttons.scss index f6491db018..5d95ff1aa6 100644 --- a/ui-v2/app/styles/components/buttons.scss +++ b/ui-v2/app/styles/components/buttons.scss @@ -1,7 +1,4 @@ @import '../base/components/buttons/index'; -%copy-button { - @extend %with-clipboard; -} button[type='submit'], a.type-create { @extend %primary-button; diff --git a/ui-v2/app/styles/components/checkbox-group/index.scss b/ui-v2/app/styles/components/checkbox-group/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui-v2/app/styles/components/checkbox-group/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui-v2/app/styles/components/checkbox-group/layout.scss b/ui-v2/app/styles/components/checkbox-group/layout.scss deleted file mode 100644 index 903108fe85..0000000000 --- a/ui-v2/app/styles/components/checkbox-group/layout.scss +++ /dev/null @@ -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; -} diff --git a/ui-v2/app/styles/components/checkbox-group/skin.scss b/ui-v2/app/styles/components/checkbox-group/skin.scss deleted file mode 100644 index 5ae8b1a222..0000000000 --- a/ui-v2/app/styles/components/checkbox-group/skin.scss +++ /dev/null @@ -1,3 +0,0 @@ -%checkbox-group label { - cursor: pointer; -} diff --git a/ui-v2/app/styles/components/form-elements/index.scss b/ui-v2/app/styles/components/form-elements/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui-v2/app/styles/components/form-elements/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui-v2/app/styles/components/form-elements/layout.scss b/ui-v2/app/styles/components/form-elements/layout.scss deleted file mode 100644 index 0f52ccfa76..0000000000 --- a/ui-v2/app/styles/components/form-elements/layout.scss +++ /dev/null @@ -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; -} diff --git a/ui-v2/app/styles/components/form-elements/skin.scss b/ui-v2/app/styles/components/form-elements/skin.scss deleted file mode 100644 index ce13bff2c6..0000000000 --- a/ui-v2/app/styles/components/form-elements/skin.scss +++ /dev/null @@ -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; -} diff --git a/ui-v2/app/styles/components/freetext-filter.scss b/ui-v2/app/styles/components/freetext-filter.scss index 5b870ed586..92ff1d5cbb 100644 --- a/ui-v2/app/styles/components/freetext-filter.scss +++ b/ui-v2/app/styles/components/freetext-filter.scss @@ -1,5 +1,4 @@ @import './freetext-filter/index'; -@import './icons/index'; .freetext-filter { @extend %freetext-filter; } diff --git a/ui-v2/app/styles/components/healthcheck-info.scss b/ui-v2/app/styles/components/healthcheck-info.scss index 3cffc7e460..5207349bb3 100644 --- a/ui-v2/app/styles/components/healthcheck-info.scss +++ b/ui-v2/app/styles/components/healthcheck-info.scss @@ -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; diff --git a/ui-v2/app/styles/components/healthchecked-resource.scss b/ui-v2/app/styles/components/healthchecked-resource.scss index 2017a081a9..1f04593e5a 100644 --- a/ui-v2/app/styles/components/healthchecked-resource.scss +++ b/ui-v2/app/styles/components/healthchecked-resource.scss @@ -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 { diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss deleted file mode 100644 index 9994f7e558..0000000000 --- a/ui-v2/app/styles/components/icons/index.scss +++ /dev/null @@ -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,'); - 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,'); - 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,'); -} diff --git a/ui-v2/app/styles/components/modal-dialog/index.scss b/ui-v2/app/styles/components/modal-dialog/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui-v2/app/styles/components/modal-dialog/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui-v2/app/styles/components/modal-dialog/layout.scss b/ui-v2/app/styles/components/modal-dialog/layout.scss deleted file mode 100644 index fb12c1c666..0000000000 --- a/ui-v2/app/styles/components/modal-dialog/layout.scss +++ /dev/null @@ -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; -} diff --git a/ui-v2/app/styles/components/modal-dialog/skin.scss b/ui-v2/app/styles/components/modal-dialog/skin.scss deleted file mode 100644 index ef15cac407..0000000000 --- a/ui-v2/app/styles/components/modal-dialog/skin.scss +++ /dev/null @@ -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; -} diff --git a/ui-v2/app/styles/components/product/footer.scss b/ui-v2/app/styles/components/product/footer.scss index 6192d6e24e..50750abe73 100644 --- a/ui-v2/app/styles/components/product/footer.scss +++ b/ui-v2/app/styles/components/product/footer.scss @@ -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; diff --git a/ui-v2/app/styles/components/product/index.scss b/ui-v2/app/styles/components/product/index.scss index 18e574d0f2..0cfc8c3de4 100644 --- a/ui-v2/app/styles/components/product/index.scss +++ b/ui-v2/app/styles/components/product/index.scss @@ -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'; diff --git a/ui-v2/app/styles/components/radio-group/index.scss b/ui-v2/app/styles/components/radio-group/index.scss deleted file mode 100644 index 0820684ccb..0000000000 --- a/ui-v2/app/styles/components/radio-group/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './layout'; diff --git a/ui-v2/app/styles/components/radio-group/layout.scss b/ui-v2/app/styles/components/radio-group/layout.scss deleted file mode 100644 index 120a5bf4ce..0000000000 --- a/ui-v2/app/styles/components/radio-group/layout.scss +++ /dev/null @@ -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; -} diff --git a/ui-v2/app/styles/components/secret-button.scss b/ui-v2/app/styles/components/secret-button.scss index 1a84124a77..4b8c3f5851 100644 --- a/ui-v2/app/styles/components/secret-button.scss +++ b/ui-v2/app/styles/components/secret-button.scss @@ -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; +} diff --git a/ui-v2/app/styles/components/secret-button/layout.scss b/ui-v2/app/styles/components/secret-button/layout.scss index 20b9eb5127..1393e5efeb 100644 --- a/ui-v2/app/styles/components/secret-button/layout.scss +++ b/ui-v2/app/styles/components/secret-button/layout.scss @@ -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; } diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss index ad6f8003c2..442040e746 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -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; diff --git a/ui-v2/app/styles/components/tabular-details/skin.scss b/ui-v2/app/styles/components/tabular-details/skin.scss index 643c26fe6d..23d50798ec 100644 --- a/ui-v2/app/styles/components/tabular-details/skin.scss +++ b/ui-v2/app/styles/components/tabular-details/skin.scss @@ -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; diff --git a/ui-v2/app/styles/components/toggle/index.scss b/ui-v2/app/styles/components/toggle/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui-v2/app/styles/components/toggle/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui-v2/app/styles/components/toggle/layout.scss b/ui-v2/app/styles/components/toggle/layout.scss deleted file mode 100644 index 3a839b494b..0000000000 --- a/ui-v2/app/styles/components/toggle/layout.scss +++ /dev/null @@ -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; -} diff --git a/ui-v2/app/styles/components/toggle/skin.scss b/ui-v2/app/styles/components/toggle/skin.scss deleted file mode 100644 index 80c0bf3687..0000000000 --- a/ui-v2/app/styles/components/toggle/skin.scss +++ /dev/null @@ -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; -} diff --git a/ui-v2/app/styles/routes/dc/acls/index.scss b/ui-v2/app/styles/routes/dc/acls/index.scss index 420091a1b5..490516773b 100644 --- a/ui-v2/app/styles/routes/dc/acls/index.scss +++ b/ui-v2/app/styles/routes/dc/acls/index.scss @@ -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; diff --git a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss b/ui-v2/app/styles/routes/dc/acls/tokens/index.scss index 4ad7cd7ba8..b4bcd1f8c8 100644 --- a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss +++ b/ui-v2/app/styles/routes/dc/acls/tokens/index.scss @@ -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; diff --git a/ui-v2/app/styles/routes/dc/settings/index.scss b/ui-v2/app/styles/routes/dc/settings/index.scss index f239fc0c84..3f97998b70 100644 --- a/ui-v2/app/styles/routes/dc/settings/index.scss +++ b/ui-v2/app/styles/routes/dc/settings/index.scss @@ -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 { diff --git a/ui-v2/app/templates/components/secret-button.hbs b/ui-v2/app/templates/components/secret-button.hbs index ea4072a384..539810f735 100644 --- a/ui-v2/app/templates/components/secret-button.hbs +++ b/ui-v2/app/templates/components/secret-button.hbs @@ -1,5 +1,5 @@ \ No newline at end of file