ui: Various CSS amends (#8708)
* ui: Various CSS amends 1. Split out %icon-definition from %composite-row 2. Add hover effect to node listing 3. Fix up proxy level list components 4. Rename our various pills to use a 100-900 scale 5. Reogranize other icon related things (consul-kind and consul-external-source) * Fix up upstream test
This commit is contained in:
John Cowen
GitHub
parent
d97fb3f35c
commit
d8fb480ca1
|
|
@ -1,7 +1,7 @@
|
|||
<ul data-test-proxy-exposed-paths>
|
||||
{{#each items as |path|}}
|
||||
<li>
|
||||
<div>
|
||||
<div class="header">
|
||||
{{#let (concat address ':' path.Path) as |combinedAddress|}}
|
||||
<p class="combined-address">
|
||||
<span>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</p>
|
||||
{{/let}}
|
||||
</div>
|
||||
<div>
|
||||
<div class="detail">
|
||||
{{#if path.Protocol}}
|
||||
<dl class="protocol">
|
||||
<dt>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,17 @@
|
|||
{{#if item}}
|
||||
{{#let (if _externalSource _externalSource (service/external-source item)) as |externalSource|}}
|
||||
{{#let (service/external-source item) as |externalSource|}}
|
||||
{{#if externalSource}}
|
||||
{{#if (has-block)}}
|
||||
{{yield
|
||||
(component 'consul-external-source' item=item _externalSource=externalSource)
|
||||
}}
|
||||
{{else}}
|
||||
<span data-test-external-source={{externalSource}} class="consul-external-source {{externalSource}}">
|
||||
{{#if label}}
|
||||
{{label}}
|
||||
<span data-test-external-source={{externalSource}} class="consul-external-source {{externalSource}}">
|
||||
{{#if label}}
|
||||
{{label}}
|
||||
{{else}}
|
||||
{{#if (eq externalSource 'aws')}}
|
||||
Registered via {{uppercase externalSource}}
|
||||
{{else}}
|
||||
{{#if (eq externalSource 'aws')}}
|
||||
<span>Registered via {{uppercase externalSource}}</span>
|
||||
{{else}}
|
||||
<span>Registered via {{capitalize externalSource}}</span>
|
||||
{{/if}}
|
||||
Registered via {{capitalize externalSource}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
{{#if item.Kind}}
|
||||
{{#let (titleize (humanize item.Kind)) as |Name|}}
|
||||
{{#if (has-block)}}
|
||||
{{yield
|
||||
(component 'consul-kind' item=item withInfo=withInfo)
|
||||
}}
|
||||
{{else}}
|
||||
{{#if withInfo}}
|
||||
<dl class="tooltip-panel">
|
||||
<dt>
|
||||
<span data-test-kind={{item.Kind}} class="consul-kind gateway">
|
||||
<span>{{Name}}</span>
|
||||
<span data-test-kind={{item.Kind}} class="consul-kind">
|
||||
{{Name}}
|
||||
</span>
|
||||
</dt>
|
||||
<dd>
|
||||
|
|
@ -86,10 +81,9 @@
|
|||
</dd>
|
||||
</dl>
|
||||
{{else}}
|
||||
<span data-test-kind={{item.Kind}} class="consul-kind gateway">
|
||||
<span>{{Name}}</span>
|
||||
<span data-test-kind={{item.Kind}} class="consul-kind">
|
||||
{{Name}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -61,14 +61,17 @@
|
|||
</dl>
|
||||
{{/if}}
|
||||
{{#if (and checks item.Port)}}
|
||||
<dl>
|
||||
<dl class="port">
|
||||
<dt>
|
||||
Port
|
||||
</dt>
|
||||
<dd data-test-service-port={{item.Port}}>
|
||||
<CopyButton
|
||||
@value={{item.Port}}
|
||||
@name="Port"
|
||||
/>
|
||||
</dt>
|
||||
<dd data-test-service-port={{item.Port}}>:{{item.Port}}</dd>
|
||||
:{{item.Port}}
|
||||
</dd>
|
||||
</dl>
|
||||
{{/if}}
|
||||
{{#if checks}}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<ul data-test-proxy-upstreams>
|
||||
{{#each items as |item|}}
|
||||
<li>
|
||||
<div>
|
||||
<div class="header">
|
||||
<p data-test-destination-name>
|
||||
{{item.DestinationName}}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="detail">
|
||||
{{#if (env 'CONSUL_NSPACES_ENABLED')}}
|
||||
{{#if (not-eq item.DestinationType 'prepared_query')}}
|
||||
<dl class="nspace">
|
||||
|
|
|
|||
|
|
@ -1,40 +1,23 @@
|
|||
%pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px 5px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
%pill button {
|
||||
padding: 0;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
%pill::before {
|
||||
margin-right: 4px;
|
||||
font-size: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
%increased-pill {
|
||||
%pill-200 {
|
||||
@extend %pill;
|
||||
padding: 5px 10px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
%pill-500 {
|
||||
@extend %pill;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
%pill-700 {
|
||||
@extend %pill;
|
||||
padding: 4px 8px;
|
||||
min-width: 87px;
|
||||
}
|
||||
%reduced-pill {
|
||||
background-color: $gray-100;
|
||||
padding: 0 8px;
|
||||
border-radius: $decor-radius-100;
|
||||
display: inline-block;
|
||||
}
|
||||
%reduced-pill > span {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
color: $gray-500;
|
||||
}
|
||||
%reduced-pill::before {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 2px;
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
%reduced-pill.leader::before {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,3 @@
|
|||
%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;
|
||||
}
|
||||
%reduced-pill::before {
|
||||
@extend %as-pseudo;
|
||||
}
|
||||
%reduced-pill.kubernetes::before {
|
||||
@extend %with-kubernetes-logo-color-icon;
|
||||
}
|
||||
%reduced-pill.terraform::before {
|
||||
@extend %with-terraform-logo-color-icon;
|
||||
}
|
||||
%reduced-pill.nomad::before {
|
||||
@extend %with-nomad-logo-color-icon;
|
||||
}
|
||||
%reduced-pill.consul::before {
|
||||
@extend %with-consul-logo-color-icon;
|
||||
}
|
||||
%reduced-pill.aws::before {
|
||||
@extend %with-logo-aws-color-icon;
|
||||
}
|
||||
%reduced-pill.gateway::before {
|
||||
@extend %with-gateway-mask;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%reduced-pill.leader::before {
|
||||
@extend %with-star-outline-mask;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,15 @@
|
|||
/**/
|
||||
|
||||
@import './components/card/index';
|
||||
@import './components/list-row/index';
|
||||
@import './components/expanded-single-select/index';
|
||||
|
||||
@import './components/icon-definition';
|
||||
@import './components/form-elements';
|
||||
@import './components/breadcrumbs';
|
||||
@import './components/anchors';
|
||||
@import './components/progress';
|
||||
@import './components/buttons';
|
||||
@import './components/list-row';
|
||||
@import './components/composite-row';
|
||||
@import './components/secret-button';
|
||||
@import './components/tabs';
|
||||
|
|
|
|||
|
|
@ -1,19 +1,13 @@
|
|||
@import './app-view/index';
|
||||
|
||||
main {
|
||||
@extend %app-view;
|
||||
}
|
||||
%app-view-actions label + div {
|
||||
/* We need this extra to allow tooltips to show */
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
main {
|
||||
@extend %app-view;
|
||||
}
|
||||
%app-view > div > header {
|
||||
@extend %app-view-header;
|
||||
}
|
||||
%app-view > div > div {
|
||||
@extend %app-view-content;
|
||||
}
|
||||
%app-view > div.unauthorized,
|
||||
%app-view > div.error {
|
||||
@extend %app-view-error;
|
||||
|
|
@ -25,9 +19,6 @@ main {
|
|||
%app-view-actions button {
|
||||
@extend %button-compact;
|
||||
}
|
||||
%app-view-content div > dl {
|
||||
@extend %form-row;
|
||||
}
|
||||
[role='tabpanel'] > p:only-child,
|
||||
%app-view-content > p:only-child {
|
||||
@extend %app-view-content-empty;
|
||||
|
|
|
|||
|
|
@ -7,16 +7,13 @@
|
|||
align-items: center;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 4;
|
||||
}
|
||||
%app-view-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
%app-view-header dl {
|
||||
float: left;
|
||||
}
|
||||
/* units */
|
||||
%app-view {
|
||||
margin-top: 50px;
|
||||
|
|
@ -37,11 +34,6 @@
|
|||
%app-view-actions > *:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
%app-view-header dl {
|
||||
margin-top: 19px;
|
||||
margin-bottom: 23px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
/* content */
|
||||
%app-view-content h2 {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
/* hoverable rows */
|
||||
%composite-row.linkable,
|
||||
.consul-service-instance-list > ul > li:not(:first-child),
|
||||
.consul-node-list > ul > li:not(:first-child),
|
||||
.consul-token-list > ul > li:not(:first-child),
|
||||
.consul-policy-list > ul > li:not(:first-child),
|
||||
.consul-role-list > ul > li:not(:first-child) {
|
||||
|
|
@ -29,8 +30,67 @@
|
|||
.consul-service-list li > div:first-child > dl:first-child dd {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.consul-service-list .detail,
|
||||
.consul-service-instance-list .detail {
|
||||
overflow-x: visible !important;
|
||||
}
|
||||
.consul-intention-permission-list > ul,
|
||||
.proxy-exposed-paths > ul,
|
||||
.proxy-upstreams > ul {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
.consul-service-instance-list .port dt,
|
||||
.consul-service-instance-list .port dt::before {
|
||||
display: none;
|
||||
}
|
||||
.consul-service-instance-list .port .copy-button {
|
||||
margin-right: 0;
|
||||
}
|
||||
// Copy Button
|
||||
%composite-row .copy-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
%composite-row-header .copy-button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
%composite-row-detail .copy-button {
|
||||
margin-right: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
%composite-row .copy-button button {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
/* buttons need to be displayed in order for the tooltip */
|
||||
/* to track them */
|
||||
%composite-row-header .copy-button button {
|
||||
opacity: 0;
|
||||
}
|
||||
%composite-row-header:hover .copy-button button {
|
||||
opacity: 1;
|
||||
}
|
||||
%composite-row .copy-button button:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
%composite-row-detail > .consul-kind:first-child,
|
||||
%composite-row-detail > .consul-external-source:first-child {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
%composite-row-detail .policy::before {
|
||||
@extend %with-file-fill-mask, %as-pseudo;
|
||||
margin-right: 3px;
|
||||
}
|
||||
%composite-row-detail .role::before {
|
||||
@extend %with-user-plain-mask, %as-pseudo;
|
||||
margin-right: 3px;
|
||||
}
|
||||
%composite-row-detail .policy-management::before {
|
||||
margin-right: 3px;
|
||||
}
|
||||
%composite-row-header .policy-management dd::before,
|
||||
%composite-row-detail .policy-management::before {
|
||||
@extend %with-star-fill-mask, %as-pseudo;
|
||||
background-color: var(--brand-600);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,31 +17,3 @@
|
|||
%with-composite-row-intent:active {
|
||||
@extend %list-row-intent;
|
||||
}
|
||||
%list-row-header > dl:first-child {
|
||||
@extend %list-row-header-icon;
|
||||
}
|
||||
|
||||
// TODO: %defined-by-icon
|
||||
// Copy Button
|
||||
%composite-row .copy-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
%composite-row .copy-button button {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
%composite-row-detail .copy-button {
|
||||
margin-right: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
%composite-row-header .copy-button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
/* buttons need to be displayed in order for the tooltip */
|
||||
/* to track them */
|
||||
%composite-row-header .copy-button button {
|
||||
opacity: 0;
|
||||
}
|
||||
%composite-row-header:hover .copy-button button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,3 +25,12 @@
|
|||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
%composite-row-header:nth-last-child(2) {
|
||||
grid-column-start: header;
|
||||
grid-column-end: actions;
|
||||
}
|
||||
%composite-row-detail:last-child {
|
||||
grid-column-start: detail;
|
||||
grid-column-end: actions;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +0,0 @@
|
|||
// TODO: %defined-by-icon
|
||||
|
||||
%composite-row-detail .policy::before {
|
||||
@extend %with-file-fill-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
margin-right: 3px;
|
||||
}
|
||||
%composite-row-detail .role::before {
|
||||
@extend %with-user-plain-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
margin-right: 3px;
|
||||
}
|
||||
%composite-row-detail .policy-management::before {
|
||||
margin-right: 3px;
|
||||
}
|
||||
%composite-row-detail .policy-management::before,
|
||||
%composite-row-header .policy-management dd::before {
|
||||
@extend %with-star-fill-mask, %as-pseudo;
|
||||
background-color: var(--brand-600);
|
||||
}
|
||||
// Health Checks
|
||||
%composite-row-detail dl.passing dt::before,
|
||||
%composite-row-header .passing dd::before {
|
||||
@extend %with-check-circle-fill-color-mask, %as-pseudo;
|
||||
background-color: $green-500;
|
||||
}
|
||||
%composite-row-detail dl.warning dt::before,
|
||||
%composite-row-header .warning dd::before {
|
||||
@extend %with-alert-triangle-color-mask, %as-pseudo;
|
||||
background-color: $orange-500;
|
||||
}
|
||||
%composite-row-detail dl.critical dt::before,
|
||||
%composite-row-header .critical dd::before {
|
||||
@extend %with-cancel-square-fill-color-mask, %as-pseudo;
|
||||
background-color: $red-500;
|
||||
}
|
||||
%composite-row-detail dl.empty dt::before,
|
||||
%composite-row-header .empty dd::before {
|
||||
@extend %with-minus-square-fill-color-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
|
||||
%composite-row-header [rel='me'] dd::before {
|
||||
@extend %with-check-circle-fill-mask, %as-pseudo;
|
||||
background-color: $blue-500;
|
||||
}
|
||||
// Metadata
|
||||
%composite-row .node a {
|
||||
color: $gray-500;
|
||||
}
|
||||
%composite-row .node a:hover {
|
||||
color: $color-action;
|
||||
text-decoration: underline;
|
||||
}
|
||||
%composite-row dl.node dt::before {
|
||||
@extend %with-git-commit-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row dl.address dt::before {
|
||||
@extend %with-public-default-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row dl.proxy dt::before {
|
||||
@extend %with-swap-horizontal-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row-detail dl.nspace dt::before {
|
||||
@extend %with-folder-outline-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row-detail dl.datacenter dt::before {
|
||||
@extend %with-user-organization-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row-detail dl.path dt::before {
|
||||
@extend %with-path-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row-detail dl.port dt::before {
|
||||
@extend %with-port-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row-detail dl.protocol dt::before {
|
||||
@extend %with-protocol-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row-detail dl.lock-delay dt::before {
|
||||
@extend %with-delay-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row-detail dl.ttl dt::before {
|
||||
@extend %with-history-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row-detail dl.behavior dt::before {
|
||||
@extend %with-info-circle-outline-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
%composite-row-detail dl.checks dt::before {
|
||||
@extend %with-health-mask, %as-pseudo;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
// In this case we do not need a background on the icon
|
||||
%composite-row .combined-address .copy-button button:hover,
|
||||
%composite-row-detail dt .copy-button button:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
|
@ -5,12 +5,15 @@
|
|||
%consul-intention-list td.destination {
|
||||
@extend %tbody-th;
|
||||
}
|
||||
%consul-intention-list td strong {
|
||||
@extend %pill-700;
|
||||
}
|
||||
%consul-intention-list td.intent-allow strong {
|
||||
@extend %increased-pill, %pill-allow;
|
||||
@extend %pill-allow;
|
||||
}
|
||||
%consul-intention-list td.intent-deny strong {
|
||||
@extend %increased-pill, %pill-deny;
|
||||
@extend %pill-deny;
|
||||
}
|
||||
%consul-intention-list td.intent-l7-rules strong {
|
||||
@extend %increased-pill, %pill-l7;
|
||||
@extend %pill-l7;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,12 @@
|
|||
%consul-intention-permission-list > ul > li {
|
||||
@extend %list-row, %list-row-detail;
|
||||
}
|
||||
%consul-intention-permission-list strong {
|
||||
@extend %pill-500;
|
||||
}
|
||||
%consul-intention-permission-list .intent-allow {
|
||||
@extend %pill, %pill-allow;
|
||||
@extend %pill-allow;
|
||||
}
|
||||
%consul-intention-permission-list .intent-deny {
|
||||
@extend %pill, %pill-deny;
|
||||
@extend %pill-deny;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@extend %with-tooltip;
|
||||
}
|
||||
%route-card > header ul li {
|
||||
@extend %pill, %frame-gray-900;
|
||||
@extend %pill-500, %frame-gray-900;
|
||||
}
|
||||
%discovery-chain-tween {
|
||||
transition-duration: 0.1s;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import './filter-bar/index';
|
||||
@import './expanded-single-select/index';
|
||||
.filter-bar {
|
||||
@extend %filter-bar;
|
||||
}
|
||||
|
|
@ -11,12 +10,6 @@
|
|||
%filter-bar [role='menuitem'] {
|
||||
justify-content: normal !important;
|
||||
}
|
||||
html.template-acl.template-list .filter-bar {
|
||||
@extend %filter-bar-reversed;
|
||||
}
|
||||
html.template-acl.template-list .filter-bar [role='radiogroup'] {
|
||||
@extend %expanded-single-select;
|
||||
}
|
||||
%filter-bar span::before {
|
||||
margin-right: 9px;
|
||||
opacity: 0.4;
|
||||
|
|
@ -27,19 +20,3 @@ html.template-acl.template-list .filter-bar [role='radiogroup'] {
|
|||
color: $blue-500;
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
||||
%filter-bar .value-passing span::before {
|
||||
@extend %with-check-circle-fill-icon, %as-pseudo;
|
||||
}
|
||||
%filter-bar .value-warning span::before {
|
||||
@extend %with-alert-triangle-icon, %as-pseudo;
|
||||
}
|
||||
%filter-bar .value-critical span::before {
|
||||
@extend %with-cancel-square-fill-icon, %as-pseudo;
|
||||
}
|
||||
%filter-bar .value-allow span::before {
|
||||
@extend %with-arrow-right-icon, %as-pseudo;
|
||||
}
|
||||
%filter-bar .value-deny span::before {
|
||||
@extend %with-deny-icon, %as-pseudo;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
@import './icon-definition/index';
|
||||
|
||||
%icon-definition.passing dt::before,
|
||||
%composite-row-header .passing dd::before {
|
||||
@extend %with-check-circle-fill-mask, %as-pseudo;
|
||||
color: $green-500;
|
||||
}
|
||||
%icon-definition.warning dt::before,
|
||||
%composite-row-header .warning dd::before {
|
||||
@extend %with-alert-triangle-mask, %as-pseudo;
|
||||
color: $orange-500;
|
||||
}
|
||||
%icon-definition.critical dt::before,
|
||||
%composite-row-header .critical dd::before {
|
||||
@extend %with-cancel-square-fill-mask, %as-pseudo;
|
||||
color: $red-500;
|
||||
}
|
||||
%icon-definition.empty dt::before,
|
||||
%composite-row-header .empty dd::before {
|
||||
@extend %with-minus-square-fill-mask, %as-pseudo;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
%composite-row-header [rel='me'] dd::before {
|
||||
@extend %with-check-circle-fill-mask, %as-pseudo;
|
||||
color: $blue-500;
|
||||
}
|
||||
|
||||
%icon-definition.node dt::before {
|
||||
@extend %with-git-commit-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.address dt::before {
|
||||
@extend %with-public-default-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.proxy dt::before {
|
||||
@extend %with-swap-horizontal-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.nspace dt::before {
|
||||
@extend %with-folder-outline-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.datacenter dt::before {
|
||||
@extend %with-user-organization-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.path dt::before {
|
||||
@extend %with-path-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.port dt::before {
|
||||
@extend %with-port-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.protocol dt::before {
|
||||
@extend %with-protocol-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.lock-delay dt::before {
|
||||
@extend %with-delay-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.ttl dt::before {
|
||||
@extend %with-history-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.behavior dt::before {
|
||||
@extend %with-info-circle-outline-mask, %as-pseudo;
|
||||
}
|
||||
%icon-definition.checks dt::before {
|
||||
@extend %with-health-mask, %as-pseudo;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
%icon-definition {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
%icon-definition {
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
%icon-definition > dt {
|
||||
align-self: center;
|
||||
}
|
||||
%icon-definition > dt > * {
|
||||
display: none;
|
||||
}
|
||||
%icon-definition > dd {
|
||||
margin-left: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
%icon-definition {
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import './list-row/index';
|
||||
.list-row {
|
||||
@extend %list-row;
|
||||
}
|
||||
|
|
@ -1,2 +1,8 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
%list-row-detail dl {
|
||||
@extend %icon-definition;
|
||||
}
|
||||
%list-row-header > dl:first-child {
|
||||
@extend %list-row-header-icon;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,15 @@
|
|||
/* whilst this isn't in the designs this makes our temporary rollover look better */
|
||||
padding-left: 12px;
|
||||
}
|
||||
%list-row dl {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
%list-row-detail,
|
||||
%list-row-header-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
%list-row-header dt {
|
||||
display: none;
|
||||
}
|
||||
%list-row-header dd::before {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
%list-row-detail,
|
||||
%list-row-header {
|
||||
|
|
@ -14,11 +20,6 @@
|
|||
flex-wrap: nowrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
%list-row-detail ul,
|
||||
%list-row-detail dl,
|
||||
%list-row-header dl {
|
||||
display: inline-flex;
|
||||
}
|
||||
%list-row-header *,
|
||||
%list-row-detail * {
|
||||
white-space: nowrap;
|
||||
|
|
@ -29,20 +30,3 @@
|
|||
%list-row-detail > span {
|
||||
margin-right: 18px;
|
||||
}
|
||||
%list-row-detail dl.node dt::before {
|
||||
margin-top: 3px;
|
||||
}
|
||||
%list-row-detail dl dt::before {
|
||||
margin-right: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
%list-row-header-icon {
|
||||
margin-right: 6px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
%list-row-header dt {
|
||||
display: none;
|
||||
}
|
||||
%list-row-header dd::before {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,3 +21,10 @@
|
|||
%list-row-detail {
|
||||
color: $gray-500;
|
||||
}
|
||||
%list-row-detail a {
|
||||
color: inherit;
|
||||
}
|
||||
%list-row-detail a:hover {
|
||||
color: $color-action;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,3 +10,9 @@ html.template-with-modal {
|
|||
%modal-dialog table {
|
||||
min-height: 149px;
|
||||
}
|
||||
// TODO: float right here is too specific, this is currently used just for the role/policy selectors
|
||||
label.type-dialog {
|
||||
@extend %anchor;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,47 +1,15 @@
|
|||
%pill-allow:before,
|
||||
%pill-deny:before,
|
||||
%pill-l7:before {
|
||||
@extend %as-pseudo;
|
||||
margin-right: 5px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
%pill-allow {
|
||||
color: $green-800;
|
||||
background-color: $green-100;
|
||||
}
|
||||
%pill-allow::before {
|
||||
@extend %with-arrow-right-color-mask;
|
||||
}
|
||||
%pill-deny {
|
||||
color: $red-800;
|
||||
background-color: $red-100;
|
||||
}
|
||||
%pill-deny::before {
|
||||
@extend %with-deny-color-mask;
|
||||
}
|
||||
%pill-l7 {
|
||||
@extend %frame-gray-900;
|
||||
}
|
||||
%pill-l7::before {
|
||||
@extend %with-layers-mask;
|
||||
}
|
||||
td strong {
|
||||
@extend %pill, %frame-gray-900;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
span.policy-service-identity,
|
||||
span.policy-node-identity,
|
||||
.consul-external-source,
|
||||
.consul-kind,
|
||||
.leader {
|
||||
@extend %reduced-pill;
|
||||
@extend %pill-200, %frame-gray-600;
|
||||
}
|
||||
span.policy-service-identity::before,
|
||||
span.policy-node-identity::before {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
vertical-align: baseline;
|
||||
align-self: start;
|
||||
font-size: inherit;
|
||||
}
|
||||
span.policy-node-identity::before {
|
||||
content: 'Node Identity: ';
|
||||
|
|
@ -49,3 +17,58 @@ span.policy-node-identity::before {
|
|||
span.policy-service-identity::before {
|
||||
content: 'Service Identity: ';
|
||||
}
|
||||
%pill.kubernetes::before {
|
||||
@extend %with-kubernetes-logo-color-icon, %as-pseudo;
|
||||
}
|
||||
%pill.terraform::before {
|
||||
@extend %with-terraform-logo-color-icon, %as-pseudo;
|
||||
}
|
||||
%pill.nomad::before {
|
||||
@extend %with-nomad-logo-color-icon, %as-pseudo;
|
||||
}
|
||||
%pill.consul::before {
|
||||
@extend %with-consul-logo-color-icon, %as-pseudo;
|
||||
}
|
||||
%pill.aws::before {
|
||||
@extend %with-logo-aws-color-icon, %as-pseudo;
|
||||
}
|
||||
%pill.consul-kind::before {
|
||||
@extend %with-gateway-mask, %as-pseudo;
|
||||
}
|
||||
%pill.leader::before {
|
||||
@extend %with-star-outline-mask, %as-pseudo;
|
||||
}
|
||||
%pill-allow:before,
|
||||
%pill-deny:before,
|
||||
%pill-l7:before {
|
||||
@extend %as-pseudo;
|
||||
margin-right: 5px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
%pill-allow,
|
||||
%pill-deny,
|
||||
%pill-l7 {
|
||||
text-transform: capitalize;
|
||||
font-weight: $typo-weight-normal;
|
||||
font-size: $typo-size-600;
|
||||
}
|
||||
%pill-allow {
|
||||
color: $green-800;
|
||||
background-color: $green-100;
|
||||
}
|
||||
%pill-deny {
|
||||
color: $red-800;
|
||||
background-color: $red-100;
|
||||
}
|
||||
%pill-l7 {
|
||||
@extend %frame-gray-900;
|
||||
}
|
||||
%pill-allow::before {
|
||||
@extend %with-arrow-right-color-mask;
|
||||
}
|
||||
%pill-deny::before {
|
||||
@extend %with-deny-color-mask;
|
||||
}
|
||||
%pill-l7::before {
|
||||
@extend %with-layers-mask;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,19 +10,6 @@
|
|||
right: 5px;
|
||||
}
|
||||
|
||||
/*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;
|
||||
|
||||
--kubernetes-icon: #{$kubernetes-logo-color-svg};
|
||||
--terraform-icon: #{$terraform-logo-color-svg};
|
||||
--nomad-icon: #{$nomad-logo-color-svg};
|
||||
--consul-icon: #{$consul-logo-color-svg};
|
||||
--aws-icon: #{$aws-logo-color-svg};
|
||||
}
|
||||
table.consul-metadata-list tbody tr {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
%tooltip-panel {
|
||||
margin: 0 !important;
|
||||
}
|
||||
%tooltip-panel dd > div {
|
||||
top: auto !important;
|
||||
overflow: visible;
|
||||
}
|
||||
%tooltip-panel,
|
||||
%tooltip-panel dt {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
%tooltip-panel dd > div.menu-panel {
|
||||
top: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
%tooltip-panel dd {
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-top: 10px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
%tooltip-panel dt {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* This is the top chevron */
|
||||
%tooltip-panel dd > div::before {
|
||||
@extend %as-pseudo;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
%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 */
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
@import 'routes/dc/settings/index';
|
||||
@import 'routes/dc/services/index';
|
||||
@import 'routes/dc/nodes/index';
|
||||
@import 'routes/dc/intention/index';
|
||||
@import 'routes/dc/kv/index';
|
||||
@import 'routes/dc/acls/index';
|
||||
@import 'routes/dc/acls/tokens/index';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
td a.is-management::after {
|
||||
@extend %with-star-fill-mask, %as-pseudo;
|
||||
background-color: var(--swatch-brand-600, $black);
|
||||
height: 16px;
|
||||
top: 2px;
|
||||
padding-left: 32px;
|
||||
html.template-acl.template-list main td strong {
|
||||
@extend %pill-500, %frame-gray-900;
|
||||
margin-right: 3px;
|
||||
}
|
||||
html.template-acl.template-list .filter-bar {
|
||||
@extend %filter-bar-reversed;
|
||||
}
|
||||
html.template-acl.template-list .filter-bar [role='radiogroup'] {
|
||||
@extend %expanded-single-select;
|
||||
}
|
||||
@media #{$--horizontal-tabs} {
|
||||
.template-policy.template-list main header .actions,
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
// TODO: Move this out of here and into probably modal
|
||||
.type-dialog {
|
||||
@extend %anchor;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
.template-token.template-edit main dd {
|
||||
display: flex;
|
||||
}
|
||||
.template-token.template-edit main dl {
|
||||
@extend %form-row;
|
||||
}
|
||||
|
|
@ -1,21 +1,3 @@
|
|||
html.template-node.template-show .sessions td:last-child {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
html.template-node.template-show .sessions td:first-child {
|
||||
@extend %tbody-th;
|
||||
}
|
||||
html.template-node.template-list .unhealthy h2 {
|
||||
margin-bottom: 0.7em;
|
||||
}
|
||||
html.template-node.template-show #meta-data table tr {
|
||||
cursor: default;
|
||||
}
|
||||
html.template-node.template-show #services table tbody td em {
|
||||
display: inline-block;
|
||||
}
|
||||
.healthy > div > ul > li {
|
||||
padding-top: 16px;
|
||||
}
|
||||
.healthy h2 {
|
||||
margin-bottom: 0em !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
@media #{$--horizontal-tabs} {
|
||||
.template-service.template-show main header .actions {
|
||||
position: relative;
|
||||
top: 48px;
|
||||
margin-top: 0;
|
||||
}
|
||||
/* instance detail dl text*/
|
||||
html.template-instance.template-show .app-view > header dl {
|
||||
float: left;
|
||||
margin-top: 19px;
|
||||
margin-bottom: 23px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
html.template-instance.template-show .app-view > header dt {
|
||||
font-weight: $typo-weight-bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,7 +82,6 @@ pre code,
|
|||
%button {
|
||||
font-weight: $typo-weight-semibold;
|
||||
}
|
||||
%app-view-header dt,
|
||||
%menu-panel dt,
|
||||
%route-card section dt,
|
||||
%route-card header:not(.short) dd,
|
||||
|
|
|
|||
|
|
@ -26,8 +26,9 @@
|
|||
{{#let (sort-by (comparator 'service' sort) filtered) as |sorted|}}
|
||||
<ChangeableSet @dispatcher={{searchable 'service' sorted}} @terms={{search}}>
|
||||
<BlockSlot @name="set" as |searched|>
|
||||
<ConsulServiceList
|
||||
<ConsulUpstreamList
|
||||
@items={{searched}}
|
||||
@dc={{dc}}
|
||||
@nspace={{nspace}}
|
||||
/>
|
||||
</BlockSlot>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default function(visitable, attribute, collection, text, intentions, filt
|
|||
intentions: intentions(),
|
||||
};
|
||||
page.tabs.upstreamsTab = {
|
||||
services: collection('.consul-service-list > ul > li:not(:first-child)', {
|
||||
services: collection('.consul-upstream-list > ul > li:not(:first-child)', {
|
||||
name: text('[data-test-service-name]'),
|
||||
}),
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue