diff --git a/ui-v2/app/styles/base/color/frame-placeholders.scss b/ui-v2/app/styles/base/color/frame-placeholders.scss index fa1aa302a4..d31afd33bc 100644 --- a/ui-v2/app/styles/base/color/frame-placeholders.scss +++ b/ui-v2/app/styles/base/color/frame-placeholders.scss @@ -83,12 +83,24 @@ background-color: $yellow-050; border-color: $color-warning; } +%frame-yellow-800 { + @extend %frame-border-000; + background-color: $yellow-500; + border-color: $yellow-800; + color: $white; +} %frame-green-500 { @extend %frame-border-000; background-color: $green-050; border-color: $green-500; color: $green-500; } +%frame-green-800 { + @extend %frame-border-000; + background-color: $green-500; + border-color: $green-800; + color: $white; +} %frame-blue-500 { @extend %frame-border-000; background-color: $blue-050; @@ -143,6 +155,12 @@ border-color: $red-800; color: $white; } +%frame-red-800 { + @extend %frame-border-000; + background-color: $red-500; + border-color: $red-800; + color: $white; +} %frame-red-900 { @extend %frame-border-000; background-color: $red-700; @@ -155,3 +173,69 @@ border-color: $magenta-600; color: $magenta-600; } +%frame-magenta-800 { + @extend %frame-border-000; + background-color: $magenta-500; + border-color: $magenta-800; + color: $white; +} +%frame-steel-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $steel-600; + color: $steel-600; +} +%frame-steel-800 { + @extend %frame-border-000; + background-color: $steel-500; + border-color: $steel-800; + color: $white; +} +%frame-cobalt-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $cobalt-600; + color: $cobalt-600; +} +%frame-cobalt-800 { + @extend %frame-border-000; + background-color: $cobalt-500; + border-color: $cobalt-800; + color: $white; +} +%frame-indigo-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $indigo-600; + color: $indigo-600; +} +%frame-indigo-800 { + @extend %frame-border-000; + background-color: $indigo-500; + border-color: $indigo-800; + color: $white; +} +%frame-teal-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $teal-600; + color: $teal-600; +} +%frame-teal-800 { + @extend %frame-border-000; + background-color: $teal-500; + border-color: $teal-800; + color: $white; +} +%frame-cyan-300 { + @extend %frame-border-000; + background-color: $white; + border-color: $cyan-600; + color: $cyan-600; +} +%frame-cyan-800 { + @extend %frame-border-000; + background-color: $cyan-500; + border-color: $cyan-800; + color: $white; +} diff --git a/ui-v2/app/styles/base/components/action-group/index.scss b/ui-v2/app/styles/base/components/action-group/index.scss new file mode 100644 index 0000000000..8f8357d067 --- /dev/null +++ b/ui-v2/app/styles/base/components/action-group/index.scss @@ -0,0 +1,7 @@ +@import '../toggle-button/index'; +@import './skin'; +@import './layout'; + +%action-group label:first-of-type { + @extend %toggle-button; +} diff --git a/ui-v2/app/styles/components/action-group/layout.scss b/ui-v2/app/styles/base/components/action-group/layout.scss similarity index 82% rename from ui-v2/app/styles/components/action-group/layout.scss rename to ui-v2/app/styles/base/components/action-group/layout.scss index 6c51241feb..44cab04720 100644 --- a/ui-v2/app/styles/components/action-group/layout.scss +++ b/ui-v2/app/styles/base/components/action-group/layout.scss @@ -1,20 +1,11 @@ -%action-group label span { - display: none; -} -%action-group-action { - width: 170px; - padding: 10px 10px; - text-align: left; -} -%action-group li > * { - @extend %action-group-action; -} %action-group { + display: inline-block; + position: relative; width: 30px; height: 30px; - position: absolute; - top: 8px; - right: 15px; +} +%action-group label span { + display: none; } %action-group label { display: block; @@ -26,29 +17,47 @@ 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; - right: 0px; padding: 1px; } +%action-group li > * { + @extend %action-group-action; +} %action-group ul::before { position: absolute; - right: 9px; 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: 35px; + top: 23px; } %action-group ul:not(.above)::before { top: -6px; transform: rotate(45deg); } %action-group ul.above { - bottom: 35px; + bottom: 23px; } %action-group ul.above::before { bottom: -6px; @@ -67,6 +76,7 @@ %action-group input[type='radio']:checked ~ .with-confirmation > ul { display: block; } +/*TODO: If anything this is %toggle-button*/ %action-group input[type='radio']:checked ~ label[for='actions_close'] { z-index: 1; } diff --git a/ui-v2/app/styles/components/action-group/skin.scss b/ui-v2/app/styles/base/components/action-group/skin.scss similarity index 82% rename from ui-v2/app/styles/components/action-group/skin.scss rename to ui-v2/app/styles/base/components/action-group/skin.scss index 344fa9319c..d9ffcfb222 100644 --- a/ui-v2/app/styles/components/action-group/skin.scss +++ b/ui-v2/app/styles/base/components/action-group/skin.scss @@ -1,6 +1,3 @@ -%action-group label:first-of-type { - @extend %toggle-button; -} %action-group input[type='radio']:checked + label:first-of-type { /* frame-gray */ background-color: $gray-050; @@ -10,12 +7,13 @@ cursor: pointer; } %action-group label:first-of-type::after { - @extend %with-more-horizontal-icon, %as-pseudo; + @extend %with-more-horizontal-icon; + @extend %as-pseudo; opacity: 0.7; } %action-group ul { border: $decor-border-100; - border-radius: $radius-small; + border-radius: $decor-radius-100; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21); } %action-group ul::before { @@ -36,3 +34,6 @@ %action-group ul::before { background-color: $white; } +%action-group li { + list-style-type: none; +} diff --git a/ui-v2/app/styles/base/components/anchors/index.scss b/ui-v2/app/styles/base/components/anchors/index.scss new file mode 100644 index 0000000000..eb8b9d1b26 --- /dev/null +++ b/ui-v2/app/styles/base/components/anchors/index.scss @@ -0,0 +1,29 @@ +%anchor-decoration, +%anchor-decoration-active { + text-decoration: none; +} +%anchor-decoration-intent { + text-decoration: underline; +} +%anchor, +%anchor-intent, +%anchor-active { + color: $color-action; +} +%anchor-decoration:hover, +%anchor-decoration:focus { + @extend %anchor-decoration-intent; +} +%anchor-decoration:active { + @extend %anchor-decoration-active; +} +%anchor { + @extend %anchor-decoration; +} +%anchor:hover, +%anchor:focus { + @extend %anchor-intent; +} +%anchor:active { + @extend %anchor-active; +} diff --git a/ui-v2/app/styles/base/components/breadcrumbs/index.scss b/ui-v2/app/styles/base/components/breadcrumbs/index.scss new file mode 100644 index 0000000000..074420f1da --- /dev/null +++ b/ui-v2/app/styles/base/components/breadcrumbs/index.scss @@ -0,0 +1,8 @@ +@import './skin'; +@import './layout'; +%breadcrumbs li > * { + @extend %breadcrumb; +} +%breadcrumbs strong { + @extend %breadcrumb-selected; +} diff --git a/ui-v2/app/styles/base/components/breadcrumbs/layout.scss b/ui-v2/app/styles/base/components/breadcrumbs/layout.scss new file mode 100644 index 0000000000..1b3faf25cf --- /dev/null +++ b/ui-v2/app/styles/base/components/breadcrumbs/layout.scss @@ -0,0 +1,11 @@ +%breadcrumbs { + display: inline-flex; +} +%breadcrumbs li > * { + display: inline-flex; + align-items: center; +} +%breadcrumbs li > *::before, +%breadcrumbs li { + margin-right: 0.5em; +} diff --git a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss new file mode 100644 index 0000000000..853da9dedf --- /dev/null +++ b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss @@ -0,0 +1,21 @@ +%breadcrumbs li { + list-style-type: none; +} +%breadcrumb::before { + content: '❮'; + line-height: 1; + font-size: 0.7em; + margin-top: 0.1em; +} +%breadcrumb { + color: $color-action; +} +%breadcrumb-selected { + color: $gray-400; +} +%breadcrumb::before { + color: rgba($color-action, 0.5); +} +%breadcrumb-selected::before { + color: $gray-300; +} diff --git a/ui-v2/app/styles/components/action-group/index.scss b/ui-v2/app/styles/base/components/buttons/index.scss similarity index 100% rename from ui-v2/app/styles/components/action-group/index.scss rename to ui-v2/app/styles/base/components/buttons/index.scss diff --git a/ui-v2/app/styles/components/buttons/layout.scss b/ui-v2/app/styles/base/components/buttons/layout.scss similarity index 97% rename from ui-v2/app/styles/components/buttons/layout.scss rename to ui-v2/app/styles/base/components/buttons/layout.scss index 249ef1c502..33c64218cf 100644 --- a/ui-v2/app/styles/components/buttons/layout.scss +++ b/ui-v2/app/styles/base/components/buttons/layout.scss @@ -32,7 +32,7 @@ margin-right: 8px; } %button-compact { - // @extend %button; + /* @extend %button;*/ padding-left: calc(1.6em - 1px) !important; padding-right: calc(1.6em - 1px) !important; padding-top: calc(0.35em - 1px) !important; diff --git a/ui-v2/app/styles/components/buttons/skin.scss b/ui-v2/app/styles/base/components/buttons/skin.scss similarity index 89% rename from ui-v2/app/styles/components/buttons/skin.scss rename to ui-v2/app/styles/base/components/buttons/skin.scss index 0ba5ebcd34..5c506b6f93 100644 --- a/ui-v2/app/styles/components/buttons/skin.scss +++ b/ui-v2/app/styles/base/components/buttons/skin.scss @@ -9,9 +9,17 @@ box-shadow: none; } %copy-button { - @extend %button, %with-clipboard; + @extend %button; min-height: 17px; } +%copy-button::before { + @extend %with-copy-action-icon; + @extend %as-pseudo; + width: 16px; + height: 16px; + position: absolute; + left: 12px; +} %copy-button:not(:empty) { padding-left: 38px !important; } @@ -20,7 +28,7 @@ %dangerous-button { @extend %button; border-width: 1px; - border-radius: $radius-small; + border-radius: $decor-radius-100; box-shadow: 0 3px 1px 0 rgba($black, 0.12); } /* color */ diff --git a/ui-v2/app/styles/components/breadcrumbs/index.scss b/ui-v2/app/styles/base/components/notice/index.scss similarity index 100% rename from ui-v2/app/styles/components/breadcrumbs/index.scss rename to ui-v2/app/styles/base/components/notice/index.scss diff --git a/ui-v2/app/styles/components/notice/layout.scss b/ui-v2/app/styles/base/components/notice/layout.scss similarity index 87% rename from ui-v2/app/styles/components/notice/layout.scss rename to ui-v2/app/styles/base/components/notice/layout.scss index f2e9a9a777..2e101a21f1 100644 --- a/ui-v2/app/styles/components/notice/layout.scss +++ b/ui-v2/app/styles/base/components/notice/layout.scss @@ -2,7 +2,6 @@ position: relative; padding: 1em; padding-left: 45px; - margin-bottom: 1em; } %notice::before { position: absolute; diff --git a/ui-v2/app/styles/components/notice/skin.scss b/ui-v2/app/styles/base/components/notice/skin.scss similarity index 64% rename from ui-v2/app/styles/components/notice/skin.scss rename to ui-v2/app/styles/base/components/notice/skin.scss index c2488b3b2e..8feda9124e 100644 --- a/ui-v2/app/styles/components/notice/skin.scss +++ b/ui-v2/app/styles/base/components/notice/skin.scss @@ -1,5 +1,5 @@ %notice { - border-radius: $radius-small; + border-radius: $decor-radius-100; border-width: 1px; } %notice-success, @@ -10,19 +10,19 @@ @extend %notice; } %notice-success { - @extend %frame-green-500, %with-passing; + @extend %frame-green-500; } %notice-info { - @extend %frame-blue-500, %with-passing; /* needs a better info button*/ + @extend %frame-blue-500; } %notice-highlight { - @extend %frame-gray-800, %with-star; + @extend %frame-gray-800; } %notice-warning { - @extend %frame-yellow-500, %with-warning; + @extend %frame-yellow-500; } %notice-error { - @extend %frame-red-500, %with-critical; + @extend %frame-red-500; } %notice-highlight::before { /* %with-star, bigger */ diff --git a/ui-v2/app/styles/components/buttons/index.scss b/ui-v2/app/styles/base/components/pill/index.scss similarity index 100% rename from ui-v2/app/styles/components/buttons/index.scss rename to ui-v2/app/styles/base/components/pill/index.scss diff --git a/ui-v2/app/styles/base/components/pill/layout.scss b/ui-v2/app/styles/base/components/pill/layout.scss new file mode 100644 index 0000000000..6b4b05f39b --- /dev/null +++ b/ui-v2/app/styles/base/components/pill/layout.scss @@ -0,0 +1,11 @@ +%pill { + display: inline-flex; + align-items: center; + padding: 1px 5px; + position: relative; +} +%pill button { + padding: 0; + height: 10px; + margin-right: 3px; +} diff --git a/ui-v2/app/styles/base/components/pill/skin.scss b/ui-v2/app/styles/base/components/pill/skin.scss new file mode 100644 index 0000000000..e238b47d60 --- /dev/null +++ b/ui-v2/app/styles/base/components/pill/skin.scss @@ -0,0 +1,14 @@ +%pill { + border-radius: $decor-radius-100; +} +%pill button { + background-color: $transparent; + /* font-size: 0; */ + cursor: pointer; +} +%pill button::before { + @extend %with-cancel-plain-icon; + @extend %as-pseudo; + width: 10px; + height: 10px; +} diff --git a/ui-v2/app/styles/components/notice/index.scss b/ui-v2/app/styles/base/components/table/index.scss similarity index 100% rename from ui-v2/app/styles/components/notice/index.scss rename to ui-v2/app/styles/base/components/table/index.scss diff --git a/ui-v2/app/styles/base/components/table/layout.scss b/ui-v2/app/styles/base/components/table/layout.scss new file mode 100644 index 0000000000..a900ac867f --- /dev/null +++ b/ui-v2/app/styles/base/components/table/layout.scss @@ -0,0 +1,48 @@ +%table { + width: 100%; + border-collapse: collapse; +} +%table-flex tr { + display: flex; +} +%table-flex tr > * { + flex: 1 1 auto; + display: inline-flex; + align-items: center; +} +%table caption, +%table thead th { + text-align: left; +} +%table-actions { + width: 60px !important; +} +%table th.actions input { + display: none; +} +%table th.actions { + text-align: right; +} +%table td a { + display: block; +} +%table td:not(.actions), +%table td:not(.actions) > * { + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; +} +%table td { + height: 50px; +} +%table caption { + margin-bottom: 0.8em; +} +%table th { + padding-bottom: 0.6em; +} +%table th:not(.actions), +%table td:not(.actions), +%table td a { + padding-right: 0.9em; +} diff --git a/ui-v2/app/styles/base/components/table/skin.scss b/ui-v2/app/styles/base/components/table/skin.scss new file mode 100644 index 0000000000..99e5c49b95 --- /dev/null +++ b/ui-v2/app/styles/base/components/table/skin.scss @@ -0,0 +1,24 @@ +%table th, +%table td { + border-bottom: $decor-border-100; +} +%table th { + border-color: $gray-300; +} +%table td { + border-color: $gray-200; + color: $gray-500; +} +%table th, +%table td strong { + color: $gray-600; +} +/* TODO: Add to native selector `tbody th` - will involve moving all + * current th's to `thead th` and changing the templates + */ +%tbody-th { + color: $gray-900; +} +%table td:first-child { + @extend %tbody-th; +} diff --git a/ui-v2/app/styles/base/components/tabs/index.scss b/ui-v2/app/styles/base/components/tabs/index.scss new file mode 100644 index 0000000000..cfb5d586ca --- /dev/null +++ b/ui-v2/app/styles/base/components/tabs/index.scss @@ -0,0 +1,26 @@ +@import './skin'; +@import './layout'; +%tab-nav li a { + @extend %tab-button; +} +%tab-nav li:not(.selected) a:hover, +%tab-nav li:not(.selected) a:focus { + @extend %tab-button-intent; +} +%tab-nav li:not(.selected) a:active { + @extend %tab-button-active; +} +/* TODO: need to add an empty class here */ +%tab-nav .selected a { + @extend %tab-button-selected; +} +%display-state, +%display-state + * { + display: none; +} +%display-state:checked + * { + display: block; +} +%tab-section > input[type='radio'] { + @extend %display-state; +} diff --git a/ui-v2/app/styles/base/components/tabs/layout.scss b/ui-v2/app/styles/base/components/tabs/layout.scss new file mode 100644 index 0000000000..36df93be92 --- /dev/null +++ b/ui-v2/app/styles/base/components/tabs/layout.scss @@ -0,0 +1,18 @@ +%tab-nav { + clear: both; +} +%tab-nav ul { + padding: 0; + margin: 0; + display: inline-flex; + align-items: center; +} +%tab-button { + padding-left: 16px; + padding-right: 16px; +} +%tab-button { + display: inline-block; + padding-top: 13px; + padding-bottom: 13px; +} diff --git a/ui-v2/app/styles/components/tabs/skin.scss b/ui-v2/app/styles/base/components/tabs/skin.scss similarity index 68% rename from ui-v2/app/styles/components/tabs/skin.scss rename to ui-v2/app/styles/base/components/tabs/skin.scss index 1538bcf0d8..1f98e69188 100644 --- a/ui-v2/app/styles/components/tabs/skin.scss +++ b/ui-v2/app/styles/base/components/tabs/skin.scss @@ -7,26 +7,26 @@ /* %frame-gray-something */ border-color: $gray-200; } +%tab-nav ul { + list-style-type: none; +} %tab-nav label { cursor: pointer; } -%tab-nav a { +%tab-button { white-space: nowrap; + text-decoration: none; } -%tab-nav a { +%tab-button { border-bottom: $decor-border-200; } -%tab-nav a { +%tab-button { border-color: $color-transparent; color: $gray-500; } -%tab-nav li:not(.selected) a:hover, -%tab-nav li:not(.selected) a:focus, -%tab-nav li:not(.selected) a:active { +%tab-button-intent, +%tab-button-active { /* %frame-gray-something */ border-color: $color-transparent; background-color: $gray-100; } -%tab-nav .selected a { - @extend %frame-magenta-300; -} diff --git a/ui-v2/app/styles/components/pill/index.scss b/ui-v2/app/styles/base/components/toggle-button/index.scss similarity index 100% rename from ui-v2/app/styles/components/pill/index.scss rename to ui-v2/app/styles/base/components/toggle-button/index.scss diff --git a/ui-v2/app/styles/base/components/toggle-button/layout.scss b/ui-v2/app/styles/base/components/toggle-button/layout.scss new file mode 100644 index 0000000000..6e36aa2b3d --- /dev/null +++ b/ui-v2/app/styles/base/components/toggle-button/layout.scss @@ -0,0 +1,9 @@ +/* TODO: This should be merged with ghost-button*/ +%toggle-button { + min-width: 30px; + min-height: 30px; + /* center */ + display: inline-flex; + align-items: center; + justify-content: center; +} diff --git a/ui-v2/app/styles/components/toggle-button/skin.scss b/ui-v2/app/styles/base/components/toggle-button/skin.scss similarity index 52% rename from ui-v2/app/styles/components/toggle-button/skin.scss rename to ui-v2/app/styles/base/components/toggle-button/skin.scss index bc993a5566..d85580d364 100644 --- a/ui-v2/app/styles/components/toggle-button/skin.scss +++ b/ui-v2/app/styles/base/components/toggle-button/skin.scss @@ -1,11 +1,17 @@ %toggle-button { - border-radius: $radius-small; + border-radius: $decor-radius-100; cursor: pointer; } +%toggle-button-intent { + background-color: $gray-050; +} +%toggle-button-active { + background-color: $gray-100; +} %toggle-button:hover, %toggle-button:focus { - background-color: $gray-050; + @extend %toggle-button-intent; } %toggle-button:active { - background-color: $gray-100; + @extend %toggle-button-active; } diff --git a/ui-v2/app/styles/base/components/tooltip/index.scss b/ui-v2/app/styles/base/components/tooltip/index.scss new file mode 100644 index 0000000000..5ecc1283e8 --- /dev/null +++ b/ui-v2/app/styles/base/components/tooltip/index.scss @@ -0,0 +1,32 @@ +@import './skin'; +@import './layout'; + +%with-pseudo-tooltip, +%with-tooltip { + @extend %tooltip; +} +%with-pseudo-tooltip::before, +%with-tooltip [role='tooltip'] { + @extend %tooltip-bubble; +} +%with-pseudo-tooltip::after, +%with-tooltip [role='tooltip']::after { + @extend %tooltip-tail; +} + +%with-pseudo-tooltip::after, +%with-pseudo-tooltip::before, +%with-tooltip [role='tooltip']::after, +%with-tooltip [role='tooltip'] { + @extend %blink-in-fade-out; +} +%with-pseudo-tooltip:hover::after, +%with-pseudo-tooltip:hover::before, +%with-pseudo-tooltip:focus::after, +%with-pseudo-tooltip:focus::before, +%with-tooltip:hover [role='tooltip']::after, +%with-tooltip:hover [role='tooltip'], +%with-tooltip:focus [role='tooltip']::after, +%with-tooltip:focus [role='tooltip'] { + @extend %blink-in-fade-out-active; +} diff --git a/ui-v2/app/styles/base/components/tooltip/layout.scss b/ui-v2/app/styles/base/components/tooltip/layout.scss new file mode 100644 index 0000000000..33c7d91b87 --- /dev/null +++ b/ui-v2/app/styles/base/components/tooltip/layout.scss @@ -0,0 +1,48 @@ +%tooltip { + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: text-top; +} +%tooltip-bubble, +%tooltip-tail { + position: absolute; + z-index: 1; +} +%tooltip-bubble { + padding: 12px; + white-space: nowrap; + content: attr(data-tooltip); + text-indent: 0; + /* TODO: should this be hardcoded here ? */ + font-size: 14px; + /* structure */ + min-width: 192px; +} +%tooltip-bubble { + /* TODO: structure says left aligned, check this is correct */ + text-align: center; +} + +%tooltip-tail { + content: ''; + transform: scale(1, 0.5); + width: 0; + height: 0; +} +/* TODO: positioning */ +%tooltip-bubble { + bottom: calc(100% + 5px); +} +%tooltip-tail { + left: 50%; + margin-left: -9px; + bottom: -13px; +} +/* TODO: Try and use the same vertical positioning all tooltips */ +/* this is only for pseudo tooltips be want to avoid */ +/* specifiying pseudo in this file */ +%tooltip::after { + bottom: calc(100% - 7px); +} diff --git a/ui-v2/app/styles/base/components/tooltip/skin.scss b/ui-v2/app/styles/base/components/tooltip/skin.scss new file mode 100644 index 0000000000..04c19a939e --- /dev/null +++ b/ui-v2/app/styles/base/components/tooltip/skin.scss @@ -0,0 +1,19 @@ +%tooltip-bubble, +%tooltip-tail { + color: $white; + background-color: $gray-500; +} +%tooltip-tail { + background-color: transparent !important; + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-top: 18px solid $gray-500; +} +%tooltip-bubble { + font-weight: normal; + border-radius: $decor-radius-200; + /* this isn't quite like the values in structure */ + /* but this looks closer visually */ + /* TODO: try and get this closer to structure */ + box-shadow: 0 2px 5px 0 rgba($black, 0.31); +} diff --git a/ui-v2/app/styles/base/icons/base-placeholders.scss b/ui-v2/app/styles/base/icons/base-placeholders.scss index 6e49492576..0d873f2e59 100644 --- a/ui-v2/app/styles/base/icons/base-placeholders.scss +++ b/ui-v2/app/styles/base/icons/base-placeholders.scss @@ -10,4 +10,4 @@ width: 1.2em; height: 1.2em; vertical-align: text-top; -} \ No newline at end of file +} diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index 1be5ffae1b..ba1359ed43 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -1,99 +1,101 @@ -$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); -$calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); -$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); $chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,'); $chevron-svg: url('data:image/svg+xml;charset=UTF-8,'); -$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$code-svg: url('data:image/svg+xml;charset=UTF-8,'); +$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$code-svg: url('data:image/svg+xml;charset=UTF-8,'); $consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); -$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); -$disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); -$download-svg: url('data:image/svg+xml;charset=UTF-8,'); -$edit-svg: url('data:image/svg+xml;charset=UTF-8,'); -$exit-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,'); +$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); +$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); +$disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); +$docs-svg: url('data:image/svg+xml;charset=UTF-8,'); +$download-svg: url('data:image/svg+xml;charset=UTF-8,'); +$edit-svg: url('data:image/svg+xml;charset=UTF-8,'); +$exit-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,'); -$flag-svg: url('data:image/svg+xml;charset=UTF-8,'); -$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-pull-request-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,'); +$flag-svg: url('data:image/svg+xml;charset=UTF-8,'); +$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,'); +$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,'); +$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,'); $hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); -$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$history-svg: url('data:image/svg+xml;charset=UTF-8,'); -$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$history-svg: url('data:image/svg+xml;charset=UTF-8,'); +$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$link-svg: url('data:image/svg+xml;charset=UTF-8,'); +$learn-svg: url('data:image/svg+xml;charset=UTF-8,'); +$link-svg: url('data:image/svg+xml;charset=UTF-8,'); $loading-svg: url('data:image/svg+xml;charset=UTF-8,'); -$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,'); -$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); -$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); -$menu-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,'); +$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); +$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); +$menu-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-svg: url('data:image/svg+xml;charset=UTF-8,'); -$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); -$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); +$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); +$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); $nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$queue-svg: url('data:image/svg+xml;charset=UTF-8,'); -$refresh-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$queue-svg: url('data:image/svg+xml;charset=UTF-8,'); +$refresh-svg: url('data:image/svg+xml;charset=UTF-8,'); $run-svg: url('data:image/svg+xml;charset=UTF-8,'); -$search-svg: url('data:image/svg+xml;charset=UTF-8,'); +$search-svg: url('data:image/svg+xml;charset=UTF-8,'); $service-identity-svg: url('data:image/svg+xml;charset=UTF-8,'); -$settings-svg: url('data:image/svg+xml;charset=UTF-8,'); -$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$settings-svg: url('data:image/svg+xml;charset=UTF-8,'); +$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $star-svg: url('data:image/svg+xml;charset=UTF-8,'); -$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); -$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); -$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); -$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); +$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); +$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); $terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,'); -$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,'); -$trash-svg: url('data:image/svg+xml;charset=UTF-8,'); -$tune-svg: url('data:image/svg+xml;charset=UTF-8,'); -$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,'); -$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,'); -$upload-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-team-svg: url('data:image/svg+xml;charset=UTF-8,'); -$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); -$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,'); +$trash-svg: url('data:image/svg+xml;charset=UTF-8,'); +$tune-svg: url('data:image/svg+xml;charset=UTF-8,'); +$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,'); +$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,'); +$upload-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$user-team-svg: url('data:image/svg+xml;charset=UTF-8,'); +$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); +$visibility-show-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 f6d41b9308..98c0dec3ec 100644 --- a/ui-v2/app/styles/base/icons/icon-placeholders.scss +++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss @@ -153,6 +153,11 @@ background-image: $disabled-svg; } +%with-docs-icon { + @extend %with-icon; + background-image: $docs-svg; +} + %with-download-icon { @extend %with-icon; background-image: $download-svg; @@ -263,6 +268,11 @@ background-image: $kubernetes-logo-color-svg; } +%with-learn-icon { + @extend %with-icon; + background-image: $learn-svg; +} + %with-link-icon { @extend %with-icon; background-image: $link-svg; diff --git a/ui-v2/app/styles/base/typography/base-placeholders.scss b/ui-v2/app/styles/base/typography/base-placeholders.scss new file mode 100644 index 0000000000..f153f07b4c --- /dev/null +++ b/ui-v2/app/styles/base/typography/base-placeholders.scss @@ -0,0 +1,51 @@ +%typo-body { + font-size: $typo-size-600; + font-family: $typo-family-sans; + line-height: $typo-lead-700; +} +%typo-header { + line-height: $typo-lead-200; +} +%h1, +%h2, +%h3, +%h4, +%h5, +%h6 { + @extend %typo-header; +} +%h1 { + font-weight: $typo-weight-bold; +} +%h2, +%h3 { + font-weight: $typo-weight-semibold; +} +%h1 { + font-size: $typo-size-100; +} +%h2 { + font-size: $typo-size-200; +} +%h3 { + font-size: $typo-size-300; +} +%typo-p { + line-height: inherit; + font-size: inherit; +} +%p, +%p1, +%p2, +%p3 { + @extend %typo-p; +} +%p1 { + font-size: $typo-size-600; +} +%p2 { + font-size: $typo-size-700; +} +%p3 { + font-size: $typo-size-800; +} diff --git a/ui-v2/app/styles/base/typography/base-variables.scss b/ui-v2/app/styles/base/typography/base-variables.scss index 1d7b7ad13f..b0fbdc8d44 100644 --- a/ui-v2/app/styles/base/typography/base-variables.scss +++ b/ui-v2/app/styles/base/typography/base-variables.scss @@ -16,7 +16,7 @@ $typo-weight-medium: 500; $typo-weight-semibold: 600; $typo-weight-bold: 700; $typo-lead-000: 0; -$type-lead-050: 1; +$typo-lead-050: 1; $typo-lead-100: 1.2; $typo-lead-200: 1.25; $typo-lead-300: 1.28; diff --git a/ui-v2/app/styles/base/typography/index.scss b/ui-v2/app/styles/base/typography/index.scss index 6da895b1bf..7dc7ac5a75 100644 --- a/ui-v2/app/styles/base/typography/index.scss +++ b/ui-v2/app/styles/base/typography/index.scss @@ -1,2 +1,3 @@ @import './base-variables'; @import './semantic-variables'; +@import './base-placeholders'; diff --git a/ui-v2/app/styles/components/action-group.scss b/ui-v2/app/styles/components/action-group.scss index 49aec84eb9..93c2a53d38 100644 --- a/ui-v2/app/styles/components/action-group.scss +++ b/ui-v2/app/styles/components/action-group.scss @@ -1,4 +1,16 @@ -@import './action-group/index'; +@import '../base/components/action-group/index'; .action-group { @extend %action-group; } +/* This needs to go into table */ +%action-group { + position: absolute; + top: 8px; + right: 15px; +} +%action-group ul.above { + bottom: 35px; +} +%action-group ul:not(.above) { + top: 35px; +} diff --git a/ui-v2/app/styles/components/anchors.scss b/ui-v2/app/styles/components/anchors.scss index ad56af1bfc..ae0f360345 100644 --- a/ui-v2/app/styles/components/anchors.scss +++ b/ui-v2/app/styles/components/anchors.scss @@ -1,4 +1,5 @@ -@import './anchors/index'; +@import '../base/components/anchors/index'; +// TODO: This should go, its for links in tables/action-groups %main-content a { color: $gray-900; } diff --git a/ui-v2/app/styles/components/anchors/index.scss b/ui-v2/app/styles/components/anchors/index.scss deleted file mode 100644 index 9cd1c30b9d..0000000000 --- a/ui-v2/app/styles/components/anchors/index.scss +++ /dev/null @@ -1,10 +0,0 @@ -%anchor:hover, -%anchor:focus { - text-decoration: underline; -} -%anchor, -%anchor:hover, -%anchor:focus, -%anchor:active { - color: $color-action; -} diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss index 359583699a..9d6403b5c4 100644 --- a/ui-v2/app/styles/components/app-view.scss +++ b/ui-v2/app/styles/components/app-view.scss @@ -1,6 +1,6 @@ @import './app-view/index'; @import './filter-bar/index'; -@import './buttons/index'; +@import '../base/components/buttons/index'; main { @extend %app-view; } @@ -18,9 +18,7 @@ main { // TODO: This should be its own component %app-view h1 span[data-tooltip] { @extend %with-external-source-icon; - // TODO: Look to remove this, right now its needed but this - // should automaticaly vertically center - margin-top: 20px; + margin-top: 13px; } %app-view h1 span.kind-proxy { @extend %frame-gray-900; diff --git a/ui-v2/app/styles/components/breadcrumbs.scss b/ui-v2/app/styles/components/breadcrumbs.scss index 56e537ed1e..3ac07023c2 100644 --- a/ui-v2/app/styles/components/breadcrumbs.scss +++ b/ui-v2/app/styles/components/breadcrumbs.scss @@ -1,4 +1,8 @@ -@import './breadcrumbs/index'; +@import '../base/components/breadcrumbs/index'; main header nav:first-child { + position: absolute; + top: -38px; +} +main header nav:first-child ol { @extend %breadcrumbs; } diff --git a/ui-v2/app/styles/components/breadcrumbs/layout.scss b/ui-v2/app/styles/components/breadcrumbs/layout.scss deleted file mode 100644 index 8b13474d80..0000000000 --- a/ui-v2/app/styles/components/breadcrumbs/layout.scss +++ /dev/null @@ -1,10 +0,0 @@ -%breadcrumbs { - position: absolute; - top: -38px; // %app-view:margin-top - 15px; -} -%breadcrumbs ol { - display: flex; -} -%breadcrumbs li { - margin-right: 5px; -} diff --git a/ui-v2/app/styles/components/breadcrumbs/skin.scss b/ui-v2/app/styles/components/breadcrumbs/skin.scss deleted file mode 100644 index fb86355e92..0000000000 --- a/ui-v2/app/styles/components/breadcrumbs/skin.scss +++ /dev/null @@ -1,18 +0,0 @@ -%breadcrumbs li > * { - @extend %with-chevron; -} -%breadcrumbs li > strong::before { - color: $gray-300; -} -%breadcrumbs li > a::before { - color: rgba($color-action, 0.5); -} -%breadcrumbs ol { - list-style-type: none; -} -%breadcrumbs a { - color: $color-action; -} -%breadcrumbs strong { - color: $gray-400; -} diff --git a/ui-v2/app/styles/components/buttons.scss b/ui-v2/app/styles/components/buttons.scss index 9047a583db..0e264bef7f 100644 --- a/ui-v2/app/styles/components/buttons.scss +++ b/ui-v2/app/styles/components/buttons.scss @@ -1,4 +1,7 @@ -@import './buttons/index'; +@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/index.scss b/ui-v2/app/styles/components/index.scss index 3493041c17..b446c927aa 100644 --- a/ui-v2/app/styles/components/index.scss +++ b/ui-v2/app/styles/components/index.scss @@ -2,7 +2,6 @@ @import './anchors'; @import './progress'; @import './buttons'; -@import './toggle-button'; @import './secret-button'; @import './tabs'; @import './pill'; @@ -31,4 +30,4 @@ @import './feedback-dialog'; @import './modal-dialog'; @import './notice'; -@import './with-tooltip'; +@import './tooltip'; diff --git a/ui-v2/app/styles/components/notice.scss b/ui-v2/app/styles/components/notice.scss index 3d0a22d22e..463d473f8d 100644 --- a/ui-v2/app/styles/components/notice.scss +++ b/ui-v2/app/styles/components/notice.scss @@ -1,4 +1,24 @@ -@import './notice/index'; +@import '../base/components/notice/index'; +%notice { + margin-bottom: 1em; +} +/* These need replacing with new icons */ +%notice-success { + @extend %with-passing; +} +%notice-info { + @extend %with-passing; /* needs a better info button*/ +} +%notice-highlight { + @extend %with-star; +} +%notice-warning { + @extend %with-warning; +} +%notice-error { + @extend %with-critical; +} +/**/ .notice.warning { @extend %notice-warning; } diff --git a/ui-v2/app/styles/components/pill.scss b/ui-v2/app/styles/components/pill.scss index 8b2771a6dd..016e265422 100644 --- a/ui-v2/app/styles/components/pill.scss +++ b/ui-v2/app/styles/components/pill.scss @@ -1,4 +1,4 @@ -@import './pill/index'; +@import '../base/components/pill/index'; td strong, %tag-list span { @extend %pill; diff --git a/ui-v2/app/styles/components/pill/layout.scss b/ui-v2/app/styles/components/pill/layout.scss deleted file mode 100644 index 325dc503fb..0000000000 --- a/ui-v2/app/styles/components/pill/layout.scss +++ /dev/null @@ -1,8 +0,0 @@ -%pill { - display: inline-block; - padding: 1px 5px; -} -%pill button { - padding: 0; - margin-right: 3px; -} diff --git a/ui-v2/app/styles/components/pill/skin.scss b/ui-v2/app/styles/components/pill/skin.scss deleted file mode 100644 index a0ca72d168..0000000000 --- a/ui-v2/app/styles/components/pill/skin.scss +++ /dev/null @@ -1,13 +0,0 @@ -%pill { - border-radius: $radius-small; -} -%pill button { - background-color: transparent; - font-size: 0; - cursor: pointer; -} -%pill button::before { - @extend %with-cancel-plain-icon, %as-pseudo; - width: 10px; - height: 10px; -} diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss index 760a7799e0..c2f7be881d 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -1,5 +1,8 @@ @import './icons/index'; -@import './table/index'; +@import '../base/components/table/index'; +table { + @extend %table, %table-flex; +} html.template-service.template-list td:first-child a span, html.template-node.template-show #services td:first-child a span, @@ -29,33 +32,20 @@ table:not(.sessions) td:first-child { th { overflow: visible; } -th span { - @extend %tooltip; - margin-left: 2px; - vertical-align: text-top; -} th span::after { @extend %with-info-circle-outline-icon, %as-pseudo; opacity: 0.6; } -th span em::after { - @extend %tooltip-tail; - @extend %blink-in-fade-out; - top: auto !important; - bottom: -13px; +th span { + @extend %with-tooltip; + margin-left: 2px; } th span em { - @extend %tooltip-bubble; - @extend %blink-in-fade-out; width: 250px; font-style: normal; white-space: normal !important; } -th span:hover em::after, -th span:hover em { - @extend %blink-in-fade-out-active; -} /* ideally these would be in route css files, but left here as they */ /* accomplish the same thing (hide non-essential columns for tables) */ @media #{$--lt-medium-table} { @@ -68,6 +58,10 @@ th span:hover em { } } @media #{$--lt-wide-table} { + /* hide actions on narrow screens, you can always click in do everything from there */ + tr > .actions { + display: none; + } html.template-intention.template-list tr > :nth-last-child(2) { display: none; } diff --git a/ui-v2/app/styles/components/table/index.scss b/ui-v2/app/styles/components/table/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui-v2/app/styles/components/table/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui-v2/app/styles/components/table/layout.scss b/ui-v2/app/styles/components/table/layout.scss deleted file mode 100644 index da345c6153..0000000000 --- a/ui-v2/app/styles/components/table/layout.scss +++ /dev/null @@ -1,48 +0,0 @@ -table { - width: 100%; -} -%table-actions { - width: 60px !important; -} -th.actions input { - display: none; -} -th.actions { - text-align: right; -} -table tr { - display: flex; -} -table td { - display: inline-flex; - align-items: center; - height: 50px; -} -table td a { - display: block; -} -table caption { - text-align: left; - margin-bottom: 0.8em; -} -table th { - padding-bottom: 0.6em; -} -table th:not(.actions), -table td:not(.actions), -table td a { - padding-right: 0.9em; -} -th, -td:not(.actions), -td:not(.actions) a { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} -/* hide actions on narrow screens, you can always click in do everything from there */ -@media #{$--lt-wide-table} { - tr > .actions { - display: none; - } -} diff --git a/ui-v2/app/styles/components/table/skin.scss b/ui-v2/app/styles/components/table/skin.scss deleted file mode 100644 index ceac149fbc..0000000000 --- a/ui-v2/app/styles/components/table/skin.scss +++ /dev/null @@ -1,23 +0,0 @@ -th, -td { - border-bottom: $decor-border-100; -} -th { - border-color: $gray-300; -} -td { - border-color: $gray-200; - color: $gray-500; -} -th, -td strong { - color: $gray-600; -} -// TODO: Add to native selector `tbody th` - will involve moving all -// current th's to `thead th` and changing the templates -%tbody-th { - color: $gray-900; -} -td:first-child { - @extend %tbody-th; -} diff --git a/ui-v2/app/styles/components/tabs.scss b/ui-v2/app/styles/components/tabs.scss index 64a1b9138e..7891006d7d 100644 --- a/ui-v2/app/styles/components/tabs.scss +++ b/ui-v2/app/styles/components/tabs.scss @@ -1,7 +1,12 @@ -@import './tabs/index'; +@import '../base/components/tabs/index'; .tab-nav { @extend %tab-nav; } .tab-section { @extend %tab-section; + /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */ + margin-top: 0 !important; +} +%tab-button-selected { + @extend %frame-magenta-300; } diff --git a/ui-v2/app/styles/components/tabs/index.scss b/ui-v2/app/styles/components/tabs/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui-v2/app/styles/components/tabs/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui-v2/app/styles/components/tabs/layout.scss b/ui-v2/app/styles/components/tabs/layout.scss deleted file mode 100644 index 7b20b1aa1f..0000000000 --- a/ui-v2/app/styles/components/tabs/layout.scss +++ /dev/null @@ -1,34 +0,0 @@ -%tab-section { - /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */ - margin-top: 0 !important; -} -%tab-nav { - clear: both; -} -@media #{$--horizontal-tabs} { - %tab-nav ul { - display: flex; - align-items: center; - } - %tab-nav a { - padding-left: 16px; - padding-right: 16px; - } -} -@media #{$--lt-horizontal-tabs} { - %tab-nav li { - width: 100%; - } -} -%tab-nav a { - display: block; - padding-top: 13px; - padding-bottom: 13px; -} -%tab-section > input[type='radio'], -%tab-section > input[type='radio'] + * { - display: none; -} -%tab-section > input[type='radio']:checked + * { - display: block; -} diff --git a/ui-v2/app/styles/components/tabular-details/layout.scss b/ui-v2/app/styles/components/tabular-details/layout.scss index 1cf49f1cb3..cb9f0669c6 100644 --- a/ui-v2/app/styles/components/tabular-details/layout.scss +++ b/ui-v2/app/styles/components/tabular-details/layout.scss @@ -12,6 +12,9 @@ position: absolute; top: 8px; } +%tabular-details-toggle-button span { + display: none; +} %tabular-details td > label { @extend %tabular-details-toggle-button; right: 2px; diff --git a/ui-v2/app/styles/components/toggle-button.scss b/ui-v2/app/styles/components/toggle-button.scss deleted file mode 100644 index 86d395e6f1..0000000000 --- a/ui-v2/app/styles/components/toggle-button.scss +++ /dev/null @@ -1 +0,0 @@ -@import './toggle-button/index'; diff --git a/ui-v2/app/styles/components/toggle-button/index.scss b/ui-v2/app/styles/components/toggle-button/index.scss deleted file mode 100644 index 07dc13fdcb..0000000000 --- a/ui-v2/app/styles/components/toggle-button/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin.scss'; -@import './layout.scss'; diff --git a/ui-v2/app/styles/components/toggle-button/layout.scss b/ui-v2/app/styles/components/toggle-button/layout.scss deleted file mode 100644 index 9d0294d3a2..0000000000 --- a/ui-v2/app/styles/components/toggle-button/layout.scss +++ /dev/null @@ -1,11 +0,0 @@ -%toggle-button { - width: 30px; - height: 30px; - /* center */ - display: flex; - align-items: center; - justify-content: center; -} -%toggle-button span { - display: none; -} diff --git a/ui-v2/app/styles/components/tooltip.scss b/ui-v2/app/styles/components/tooltip.scss new file mode 100644 index 0000000000..22f5059fbd --- /dev/null +++ b/ui-v2/app/styles/components/tooltip.scss @@ -0,0 +1,12 @@ +@import '../base/components/tooltip/index'; +%app-view h1 span[data-tooltip] { + @extend %with-pseudo-tooltip; + text-indent: -9000px; + font-size: 0; +} +/* override structure min-width for the moment */ +/* TODO: Clarify whether these should actually use */ +/* the min-width from structure */ +%tooltip-bubble { + min-width: 0; +} diff --git a/ui-v2/app/styles/components/with-tooltip.scss b/ui-v2/app/styles/components/with-tooltip.scss deleted file mode 100644 index c4e536ff12..0000000000 --- a/ui-v2/app/styles/components/with-tooltip.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import './with-tooltip/index'; -%app-view h1 span[data-tooltip] { - @extend %with-pseudo-tooltip; -} diff --git a/ui-v2/app/styles/components/with-tooltip/index.scss b/ui-v2/app/styles/components/with-tooltip/index.scss deleted file mode 100644 index bca4c98e29..0000000000 --- a/ui-v2/app/styles/components/with-tooltip/index.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import './skin'; -@import './layout'; -%with-pseudo-tooltip { - @extend %tooltip; -} -%with-pseudo-tooltip::before { - @extend %tooltip-bubble; -} -%with-pseudo-tooltip::after { - @extend %tooltip-tail; -} -%with-pseudo-tooltip { - text-indent: -9000px; - font-size: 0; - top: -7px; -} - -%with-pseudo-tooltip::after, -%with-pseudo-tooltip::before { - @extend %blink-in-fade-out; -} -%with-pseudo-tooltip:hover::after, -%with-pseudo-tooltip:hover::before, -%with-pseudo-tooltip:focus::after, -%with-pseudo-tooltip:focus::before { - @extend %blink-in-fade-out-active; -} diff --git a/ui-v2/app/styles/components/with-tooltip/layout.scss b/ui-v2/app/styles/components/with-tooltip/layout.scss deleted file mode 100644 index 130823941b..0000000000 --- a/ui-v2/app/styles/components/with-tooltip/layout.scss +++ /dev/null @@ -1,35 +0,0 @@ -%tooltip { - position: relative; - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: text-top; -} -%tooltip-bubble, -%tooltip-tail { - position: absolute; - z-index: 1; -} -%tooltip-bubble { - padding: 10px; - bottom: calc(100% + 5px); - text-align: center; - white-space: nowrap; - content: attr(data-tooltip); - // incase you are using text-indent to hide the - // text of the element %with-tooltip - text-indent: 0; -} -%tooltip-tail { - content: ''; - left: 50%; - margin-left: -10px; - top: -10px; - transform: scale(1, 0.5); - width: 0; - height: 0; - background-color: transparent !important; - border-left: 9px solid transparent; - border-right: 9px solid transparent; - border-top: 18px solid $gray-800; -} diff --git a/ui-v2/app/styles/components/with-tooltip/skin.scss b/ui-v2/app/styles/components/with-tooltip/skin.scss deleted file mode 100644 index b4a17d7c5a..0000000000 --- a/ui-v2/app/styles/components/with-tooltip/skin.scss +++ /dev/null @@ -1,9 +0,0 @@ -%tooltip-bubble, -%tooltip-tail { - color: $white; - background-color: $gray-800; -} -%tooltip-bubble { - border-radius: $decor-radius-200; - box-shadow: 0 3px 1px 0 rgba($black, 0.12); -} diff --git a/ui-v2/app/templates/components/token-list.hbs b/ui-v2/app/templates/components/token-list.hbs index 684764598c..63a95009f4 100644 --- a/ui-v2/app/templates/components/token-list.hbs +++ b/ui-v2/app/templates/components/token-list.hbs @@ -22,7 +22,7 @@ {{if item.Local 'local' 'global'}} - {{item.Description}} +

{{item.Description}}

{{/block-slot}} {{/tabular-collection}} diff --git a/ui-v2/app/templates/dc/acls/policies/index.hbs b/ui-v2/app/templates/dc/acls/policies/index.hbs index 3e5211ea4b..e374d70727 100644 --- a/ui-v2/app/templates/dc/acls/policies/index.hbs +++ b/ui-v2/app/templates/dc/acls/policies/index.hbs @@ -43,7 +43,7 @@ {{join ', ' (policy/datacenters item)}} - {{item.Description}} +

{{item.Description}}

{{/block-slot}} {{#block-slot 'actions' as |index change checked|}} diff --git a/ui-v2/app/templates/dc/acls/roles/index.hbs b/ui-v2/app/templates/dc/acls/roles/index.hbs index c61c667214..15847270b2 100644 --- a/ui-v2/app/templates/dc/acls/roles/index.hbs +++ b/ui-v2/app/templates/dc/acls/roles/index.hbs @@ -40,7 +40,7 @@ {{item.Name}} - {{item.Description}} +

{{item.Description}}

{{#each item.Policies as |item|}} diff --git a/ui-v2/app/templates/dc/acls/tokens/index.hbs b/ui-v2/app/templates/dc/acls/tokens/index.hbs index e9a3f7fcc9..22519b8827 100644 --- a/ui-v2/app/templates/dc/acls/tokens/index.hbs +++ b/ui-v2/app/templates/dc/acls/tokens/index.hbs @@ -48,11 +48,11 @@ {{if item.Local 'local' 'global' }} - {{default item.Description item.Name}} +

{{default item.Description item.Name}}

{{#if (token/is-legacy item) }} - Legacy tokens have embedded rules. +

Legacy tokens have embedded rules.

{{ else }} {{#each (append item.Policies item.Roles) as |item|}} {{item.Name}} diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs index a2534e03b9..f98287b3f6 100644 --- a/ui-v2/app/templates/dc/services/index.hbs +++ b/ui-v2/app/templates/dc/services/index.hbs @@ -23,7 +23,8 @@ }} {{#block-slot 'header'}} Service - Health ChecksThe number of health checks for the service on all nodes + Type + Health ChecksThe number of health checks for the service on all nodes Tags {{/block-slot}} {{#block-slot 'row'}} diff --git a/ui-v2/package.json b/ui-v2/package.json index ff673c2122..99483182e5 100644 --- a/ui-v2/package.json +++ b/ui-v2/package.json @@ -14,6 +14,7 @@ "lint:dev:js": "eslint -c .dev.eslintrc.js --fix ./*.js ./.*.js app config lib server tests", "lint:js": "eslint -c .eslintrc.js --fix ./*.js ./.*.js app config lib server tests", "format:js": "prettier --write \"{app,config,lib,server,tests}/**/*.js\" ./*.js ./.*.js", + "format:css": "prettier --write \"app/styles/**/*.*\"", "start": "ember serve --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020}", "start:api": "api-double --dir ./node_modules/@hashicorp/consul-api-double", "test": "ember test --test-port=${EMBER_TEST_PORT:-7357}",