diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss index 880d0e98a0..d02427ff38 100644 --- a/ui/packages/consul-ui/app/components/app/index.scss +++ b/ui/packages/consul-ui/app/components/app/index.scss @@ -34,7 +34,7 @@ main { z-index: 10; } main { - top: var(--chrome-height); + margin-top: var(--chrome-height); transition-property: margin-left; } diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs index 0c5c4e4f84..931de3cc62 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs @@ -7,10 +7,11 @@ <:home-nav> + > Consul - + + + @@ -153,6 +154,11 @@ {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}} + + + Consul v{{env 'CONSUL_VERSION'}} + + {{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}} - - +

Log in with a different token

@@ -268,21 +274,6 @@ <:content-info> - - © {{env 'CONSUL_COPYRIGHT_YEAR'}} HashiCorp - -

- Consul {{env 'CONSUL_VERSION'}} -

- - Documentation - {{{concat ''}}} diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss index 2177b780e2..7dfe157913 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss @@ -14,7 +14,7 @@ %main-nav-vertical li.nspaces, %main-nav-vertical li.dcs { margin-bottom: 25px; - padding: 0 20px; + padding: 0 26px; } // TODO: We no longer have the rule that menu-panel buttons only contain two // items, left and right aligned. We should remove this and look to use @@ -37,5 +37,5 @@ } %main-nav-vertical-menu-panel { - min-width: 260px; + min-width: 248px; } diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss index 89853ab8b8..5e2060ae40 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss @@ -2,14 +2,16 @@ cursor: pointer; border-right: $decor-border-400; border-color: $transparent; - font-size: $typo-size-600; + @extend %p1; } %main-nav-vertical-action > a { color: inherit; font-size: inherit; } %main-nav-vertical [role="separator"] { + @extend %p3; text-transform: uppercase; + font-weight: $typo-weight-medium; } %main-nav-vertical-action-intent { text-decoration: underline; diff --git a/ui/packages/consul-ui/app/components/menu-panel/skin.scss b/ui/packages/consul-ui/app/components/menu-panel/skin.scss index 0948b81ca8..b7d542b2f3 100644 --- a/ui/packages/consul-ui/app/components/menu-panel/skin.scss +++ b/ui/packages/consul-ui/app/components/menu-panel/skin.scss @@ -6,8 +6,20 @@ %menu-panel > ul > li { list-style-type: none; } +%menu-panel dt { + font-weight: $typo-weight-bold; +} +%menu-panel dl, +%menu-panel-header { + @extend %p2; +} %menu-panel-separator { + @extend %p3; text-transform: uppercase; + font-weight: $typo-weight-medium; +} +%menu-panel dt span { + font-weight: $typo-weight-normal; } %menu-panel-header + ul, %menu-panel-separator:not(:first-child) { @@ -20,11 +32,15 @@ border-color: var(--gray-300); background-color: var(--gray-000); } +%menu-panel dt, %menu-panel dd { - color: $gray-500; + color: var(--gray-800); +} +%menu-panel dt span { + color: var(--gray-600); } %menu-panel-separator { - color: var(--gray-400); + color: var(--gray-600); } %menu-panel-header + ul, %menu-panel-separator:not(:first-child) { diff --git a/ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss index ea7794a028..8ad6757add 100644 --- a/ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss @@ -151,7 +151,7 @@ } %frame-red-300 { @extend %frame-border-000; - background-color: $white; + background-color: $transparent; border-color: $red-500; color: $red-500; } diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index 51765dab26..38e3b62b42 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -38,7 +38,6 @@ @import './components/brand-loader'; @import './components/loader'; -@import './components/footer'; /**/ diff --git a/ui/packages/consul-ui/app/styles/components/footer.scss b/ui/packages/consul-ui/app/styles/components/footer.scss deleted file mode 100644 index 5b52981207..0000000000 --- a/ui/packages/consul-ui/app/styles/components/footer.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import './footer/index'; -#wrapper > footer { - @extend %footer; -} diff --git a/ui/packages/consul-ui/app/styles/components/footer/index.scss b/ui/packages/consul-ui/app/styles/components/footer/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui/packages/consul-ui/app/styles/components/footer/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui/packages/consul-ui/app/styles/components/footer/layout.scss b/ui/packages/consul-ui/app/styles/components/footer/layout.scss deleted file mode 100644 index 681af2a3a0..0000000000 --- a/ui/packages/consul-ui/app/styles/components/footer/layout.scss +++ /dev/null @@ -1,33 +0,0 @@ -%footer { - display: flex; - justify-content: center; - position: relative; - z-index: 1; -} -%footer > * { - display: block; -} -@media #{$--tall-footer} { - %footer { - padding-top: 12px; - padding-bottom: 12px; - } -} -@media #{$--wide-footer} { - %footer { - padding-left: 12px; - padding-right: 12px; - } - %footer > * { - padding: 11px; - } -} -@media #{$--lt-wide-footer} { - %footer > :first-child { - padding: 5px; - margin-left: 20px; - } - %footer > :not(:first-child) { - display: none; - } -} diff --git a/ui/packages/consul-ui/app/styles/components/footer/skin.scss b/ui/packages/consul-ui/app/styles/components/footer/skin.scss deleted file mode 100644 index c27b02f8e0..0000000000 --- a/ui/packages/consul-ui/app/styles/components/footer/skin.scss +++ /dev/null @@ -1,25 +0,0 @@ -/* This layout is to do with the logo */ -%footer > a:first-child { - position: relative; -} -%footer > a:first-child::before { - position: absolute; - top: 50%; - margin-top: -0.7em; - left: -25px; -} -%footer > a:first-child::before { - @extend %with-hashicorp-logo-mask, %as-pseudo; - background-color: $gray-400; - font-size: 1.4em; -} -%footer { - border-top: $decor-border-100; -} -%footer { - border-color: $gray-200; - background-color: $white; -} -%footer > * { - color: $gray-400; -} diff --git a/ui/packages/consul-ui/app/styles/layout.scss b/ui/packages/consul-ui/app/styles/layout.scss index 1efec26447..4cfd9ea373 100644 --- a/ui/packages/consul-ui/app/styles/layout.scss +++ b/ui/packages/consul-ui/app/styles/layout.scss @@ -54,13 +54,13 @@ html:not(.has-nspaces) [class*='nspace-'] { } #wrapper { @extend %viewport-container; -} -#wrapper { - @extend %with-sticky-footer; + display: flex; + min-height: 100vh; + flex-direction: column; } main { - @extend %with-sticky-footer-content; position: relative; + flex: 1; } main, #wrapper > footer { diff --git a/ui/packages/consul-ui/app/styles/layouts/containers.scss b/ui/packages/consul-ui/app/styles/layouts/containers.scss deleted file mode 100644 index 56cad4306c..0000000000 --- a/ui/packages/consul-ui/app/styles/layouts/containers.scss +++ /dev/null @@ -1,66 +0,0 @@ -$ideal-viewport-width-num: 1260; -$ideal-viewport-width: #{$ideal-viewport-width-num}px; -$ideal-content-width-num: 1150; -$ideal-content-width: #{$ideal-content-width-num}px; -$ideal-viewport-padding-num: 24; -$ideal-viewport-padding: #{$ideal-viewport-padding-num}px; -$minimum-viewport-padding: 10px; -$ideal-content-padding: 33px; - -// workaround bulma's sweeping box-sizing -// so we can verify the ideal widths are the same - -%viewport-container { - box-sizing: content-box; -} -%viewport-container { - margin-left: auto; - margin-right: auto; -} -%modal-dialog > *, -%content-container > * { - box-sizing: border-box; -} -%content-container-restricted { - max-width: $ideal-content-width; -} -%viewport-container { - padding-left: 25px; - padding-right: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100)); -} -%content-container { - padding-left: calc(24vw / (#{$ideal-viewport-width-num} / 100)); - padding-right: calc(24vw / (#{$ideal-viewport-width-num} / 100)); -} -@media #{$--min-padding} { - %viewport-container { - padding-left: $minimum-viewport-padding; - padding-right: $minimum-viewport-padding; - } -} -@media #{$--max-padding} { - %viewport-container { - padding-left: $ideal-viewport-padding; - padding-right: $ideal-viewport-padding; - } - %content-container { - padding-left: $ideal-viewport-padding; - padding-right: $ideal-viewport-padding; - } -} -fieldset [role='group'] { - display: flex; - flex-wrap: wrap; - flex-direction: row; -} -[role='group'] fieldset { - width: 50%; -} -[role='group'] fieldset:not(:first-of-type) { - padding-left: 20px; - border-left: 1px solid; - border-left: $gray-500; -} -[role='group'] fieldset:not(:last-of-type) { - padding-right: 20px; -} diff --git a/ui/packages/consul-ui/app/styles/layouts/index.scss b/ui/packages/consul-ui/app/styles/layouts/index.scss index 65c78ee584..892a73f4d4 100644 --- a/ui/packages/consul-ui/app/styles/layouts/index.scss +++ b/ui/packages/consul-ui/app/styles/layouts/index.scss @@ -1,2 +1,33 @@ -@import './with-sticky-footer'; -@import './containers'; +// workaround bulma's sweeping box-sizing + +%viewport-container { + box-sizing: content-box; +} +%modal-dialog > *, +%content-container > * { + box-sizing: border-box; +} +%content-container-restricted { + max-width: 1260px; +} +%viewport-container { + padding-left: 25px; + padding-right: 25px; +} + +fieldset [role='group'] { + display: flex; + flex-wrap: wrap; + flex-direction: row; +} +[role='group'] fieldset { + width: 50%; +} +[role='group'] fieldset:not(:first-of-type) { + padding-left: 20px; + border-left: 1px solid; + border-left: $gray-500; +} +[role='group'] fieldset:not(:last-of-type) { + padding-right: 20px; +} diff --git a/ui/packages/consul-ui/app/styles/layouts/with-sticky-footer.scss b/ui/packages/consul-ui/app/styles/layouts/with-sticky-footer.scss deleted file mode 100644 index 9690ace049..0000000000 --- a/ui/packages/consul-ui/app/styles/layouts/with-sticky-footer.scss +++ /dev/null @@ -1,8 +0,0 @@ -%with-sticky-footer { - display: flex; - min-height: 100vh; - flex-direction: column; -} -%with-sticky-footer-content { - flex: 1; -} diff --git a/ui/packages/consul-ui/app/styles/themes.scss b/ui/packages/consul-ui/app/styles/themes.scss index 62cf0bb670..cfb289768e 100644 --- a/ui/packages/consul-ui/app/styles/themes.scss +++ b/ui/packages/consul-ui/app/styles/themes.scss @@ -6,9 +6,6 @@ %main-nav-horizontal { @extend %theme-dark; } -%main-nav-horizontal .menu-panel { - @extend %theme-light; -} %main-nav-vertical .nspaces .menu-panel > div { @extend %theme-light; } diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss index 0577d9f2f6..d495ded5e0 100644 --- a/ui/packages/consul-ui/app/styles/typography.scss +++ b/ui/packages/consul-ui/app/styles/typography.scss @@ -31,7 +31,6 @@ pre code, %tab-section p { @extend %p1; } -%menu-panel dl, %empty-state-anchor, .type-dialog, %table td p, @@ -40,7 +39,6 @@ pre code, %form-element-label, %stats-card header a span, %footer, -%menu-panel-header, %app-view h1 span.kind-proxy { @extend %p2; } @@ -49,7 +47,6 @@ pre code, %button, %main-content p, %form-element-note, -%menu-panel-separator, %form-element-error > strong { @extend %p3; } @@ -67,15 +64,11 @@ pre code, %button { font-weight: $typo-weight-semibold; } -%menu-panel dt, %route-card section dt, %route-card header:not(.short) dd, %splitter-card > header { font-weight: $typo-weight-bold; } -%menu-panel-separator { - font-weight: $typo-weight-medium; -} /**/ /* resets */ diff --git a/ui/packages/consul-ui/app/styles/variables/custom-query.scss b/ui/packages/consul-ui/app/styles/variables/custom-query.scss index c93bfb414a..4b228471d3 100644 --- a/ui/packages/consul-ui/app/styles/variables/custom-query.scss +++ b/ui/packages/consul-ui/app/styles/variables/custom-query.scss @@ -15,12 +15,6 @@ $--lt-horizontal-tabs: '(max-width: 614px)'; $--min-padding: '(max-width: 600px)'; $--max-padding: '(min-width: 1260px)'; -$--tall-footer: '(min-height: 668px)'; -$--lt-tall-footer: '(max-height: 667px)'; - -$--wide-footer: '(min-width: 421px)'; -$--lt-wide-footer: '(max-width: 420px)'; - $--spacious-page-header: '(min-width: 850px)'; $--lt-spacious-page-header: '(max-width: 849px)';