diff --git a/ui-v2/app/styles/base/components/anchors/index.scss b/ui-v2/app/styles/base/components/anchors/index.scss index eb8b9d1b26..262abb9669 100644 --- a/ui-v2/app/styles/base/components/anchors/index.scss +++ b/ui-v2/app/styles/base/components/anchors/index.scss @@ -19,6 +19,8 @@ } %anchor { @extend %anchor-decoration; + cursor: pointer; + background-color: $transparent; } %anchor:hover, %anchor:focus { @@ -26,4 +28,5 @@ } %anchor:active { @extend %anchor-active; + outline: 0; } diff --git a/ui-v2/app/styles/components/empty-state/index.scss b/ui-v2/app/styles/components/empty-state/index.scss index 65729024e4..8f7d52ec6a 100644 --- a/ui-v2/app/styles/components/empty-state/index.scss +++ b/ui-v2/app/styles/components/empty-state/index.scss @@ -1,11 +1,14 @@ -@import './skin'; @import './layout'; +@import './skin'; %empty-state header :first-child { @extend %empty-state-header; } %empty-state header :nth-child(2) { @extend %empty-state-subheader; } +%empty-state-anchor { + @extend %anchor; +} %empty-state > ul > li > *, %empty-state > ul > li > label > button { @extend %empty-state-anchor; diff --git a/ui-v2/app/styles/components/empty-state/layout.scss b/ui-v2/app/styles/components/empty-state/layout.scss index fbd84a9384..a8b28364a6 100644 --- a/ui-v2/app/styles/components/empty-state/layout.scss +++ b/ui-v2/app/styles/components/empty-state/layout.scss @@ -17,5 +17,13 @@ justify-content: space-between; margin-top: 1.5em; - padding-top: 0.5em; + padding-top: 0.6em; + border-top: 1px solid; +} +%empty-state-anchor { + display: inline-flex; + align-items: center; +} +%empty-state-anchor::before { + margin-top: -1px; } diff --git a/ui-v2/app/styles/components/empty-state/skin.scss b/ui-v2/app/styles/components/empty-state/skin.scss index 9add676b57..d573f2c0fd 100644 --- a/ui-v2/app/styles/components/empty-state/skin.scss +++ b/ui-v2/app/styles/components/empty-state/skin.scss @@ -1,31 +1,42 @@ +%empty-state { + color: $gray-500; +} +%empty-state > ul { + border-color: $gray-300; +} %empty-state-header { border-bottom: none; } -%empty-state header { - color: $gray-500; -} +/* Icons */ %empty-state header::before { - background-color: $gray-500; font-size: 2.6em; position: relative; top: -3px; float: left; margin-right: 10px; } -%empty-state-anchor { - @extend %anchor; -} %empty-state-anchor::before { margin-right: 0.5em; - background-color: $blue-500; font-size: 0.9em; } -%empty-state.unauthorized header::before { - @extend %with-alert-circle-outline-mask, %as-pseudo; +%empty-state[class*='status-'] header::before { + @extend %as-pseudo; +} +%empty-state.status- header::before { + @extend %with-alert-circle-outline-mask; +} +%empty-state.status-404 header::before { + @extend %with-help-circle-outline-mask; +} +%empty-state.status-403 header::before { + @extend %with-disabled-mask; } %empty-state .docs-link > *::before { @extend %with-docs-mask, %as-pseudo; } +%empty-state .back-link > *::before { + @extend %with-chevron-left-mask, %as-pseudo; +} %empty-state .learn-link > *::before { @extend %with-learn-mask, %as-pseudo; } diff --git a/ui-v2/app/styles/components/form-elements.scss b/ui-v2/app/styles/components/form-elements.scss index 4cb436e336..4d04ceda2f 100644 --- a/ui-v2/app/styles/components/form-elements.scss +++ b/ui-v2/app/styles/components/form-elements.scss @@ -11,8 +11,8 @@ label span { .has-error { @extend %form-element-error; } -%modal-dialog .type-text, -%app-view-content .type-text { +%main-content .type-password, +%main-content .type-text { @extend %form-element; } .type-toggle { diff --git a/ui-v2/app/styles/components/notice.scss b/ui-v2/app/styles/components/notice.scss index 6b74e61f22..140825dc57 100644 --- a/ui-v2/app/styles/components/notice.scss +++ b/ui-v2/app/styles/components/notice.scss @@ -21,6 +21,9 @@ .notice.warning { @extend %notice-warning; } +.notice.error { + @extend %notice-error; +} .notice.info { @extend %notice-info; }