From 165cac3d0e929bc56cff22933ee5b3acb2fafd74 Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Wed, 6 Jan 2021 11:19:31 +0100 Subject: [PATCH] refactor(admin-ui): Remove hard-coded hex color values --- .../breadcrumb/breadcrumb.component.scss | 2 +- .../user-menu/user-menu.component.scss | 4 --- .../form-field/form-field.component.scss | 19 ----------- .../prosemirror/prosemirror.scss | 32 +++++++++---------- .../select-toggle.component.scss | 2 +- 5 files changed, 18 insertions(+), 41 deletions(-) diff --git a/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss b/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss index c55f4ef879..e06b1bfb25 100644 --- a/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss +++ b/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss @@ -14,7 +14,7 @@ li:not(:last-child)::after { content: '›'; top: 0; - color: #7e7e7e; + color: var(--color-grey-400); margin-left: 10px; } } diff --git a/packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.scss b/packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.scss index 490b0b8903..20cfdfe706 100644 --- a/packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.scss +++ b/packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.scss @@ -18,7 +18,3 @@ .trigger clr-icon { color: white; } -.btn.btn-outline:hover { - background-color: #e1f1f62e; -} - diff --git a/packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.scss index b7f74845d6..d859ef2674 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.scss +++ b/packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.scss @@ -75,25 +75,6 @@ element.style { .tooltip.tooltip-sm > .tooltip-content, .tooltip .tooltip-content.tooltip-sm { width: 5rem; } -.tooltip.tooltip-top-left > .tooltip-content, .tooltip .tooltip-content.tooltip-top-left { - color: #fff; - font-size: 0.541667rem; - font-weight: 400; - letter-spacing: normal; - background: #000; - border-radius: 0.125rem; - line-height: 0.75rem; - margin: 0; - padding: 0.375rem 0.5rem; - width: 10rem; - position: absolute; - top: auto; - bottom: 100%; - right: 50%; - left: auto; - border-bottom-right-radius: 0; - margin-bottom: 0.666667rem; -} .tooltip:hover > .tooltip-content { right: 12px; diff --git a/packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/prosemirror.scss b/packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/prosemirror.scss index fb4aad4e0e..fd1fcdbc65 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/prosemirror.scss +++ b/packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/prosemirror.scss @@ -31,7 +31,7 @@ } .ProseMirror-selectednode { - outline: 2px solid #8cf; + outline: 2px solid var(--color-primary-500); } /* Make sure li selections wrap around markers */ @@ -47,7 +47,7 @@ right: -2px; top: -2px; bottom: -2px; - border: 2px solid #8cf; + border: 2px solid var(--color-primary-500); pointer-events: none; } @@ -72,7 +72,7 @@ } .ProseMirror-menuseparator { - border-right: 1px solid #ddd; + border-right: 1px solid var(--color-grey-300); margin-right: 3px; } @@ -110,8 +110,8 @@ .ProseMirror-menu-submenu { position: absolute; background: white; - color: #666; - border: 1px solid #aaa; + color: var(--color-grey-600); + border: 1px solid var(--color-grey-300); padding: 2px; } @@ -126,7 +126,7 @@ } .ProseMirror-menu-dropdown-item:hover { - background: #f2f2f2; + background: var(--color-grey-100); } .ProseMirror-menu-submenu-wrap { @@ -153,12 +153,12 @@ } .ProseMirror-menu-active { - background: #eee; + background: var(--color-grey-100); border-radius: 4px; } .ProseMirror-menu-active { - background: #eee; + background: var(--color-grey-100); border-radius: 4px; } @@ -176,12 +176,12 @@ border-top-right-radius: inherit; position: relative; min-height: 1em; - color: #666; + color: var(--color-grey-600); padding: 1px 6px; top: 0; left: 0; right: 0; - background: white; + background: var(--color-grey-100); z-index: 10; -moz-box-sizing: border-box; box-sizing: border-box; @@ -243,7 +243,7 @@ .ProseMirror blockquote { padding-left: 1em; - border-left: 3px solid #eee; + border-left: 3px solid var(--color-grey-100); margin-left: 0; margin-right: 0; } @@ -262,12 +262,12 @@ margin: 0; font-weight: normal; font-size: 100%; - color: #444; + color: var(--color-grey-500); } .ProseMirror-prompt input[type='text'], .ProseMirror-prompt textarea { - background: #eee; + background: var(--color-grey-100); border: none; outline: none; } @@ -280,7 +280,7 @@ position: absolute; left: 2px; top: 1px; - color: #666; + color: var(--color-grey-400); border: none; background: transparent; padding: 0; @@ -292,8 +292,8 @@ } .ProseMirror-invalid { - background: #ffc; - border: 1px solid #cc7; + background: var(--color-warning-200); + border: 1px solid var(--color-warning-300); border-radius: 4px; padding: 5px 10px; position: absolute; diff --git a/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss index 61e72e0121..f671109591 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss +++ b/packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss @@ -47,7 +47,7 @@ &:focus { outline: none; - box-shadow: 0 0 2px 2px #6bc1e3; + box-shadow: 0 0 2px 2px var(--color-primary-500); } &.disabled {