open-consul/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss

1850 lines
52 KiB
SCSS
Raw Normal View History

%with-alert-circle-fill-icon {
@extend %with-icon, %alert-circle-fill-svg-prop;
background-image: var(--alert-circle-fill-svg);
}
%with-alert-circle-fill-mask {
@extend %with-mask, %alert-circle-fill-svg-prop;
-webkit-mask-image: var(--alert-circle-fill-svg);
mask-image: var(--alert-circle-fill-svg);
}
%with-alert-circle-outline-icon {
@extend %with-icon, %alert-circle-outline-svg-prop;
background-image: var(--alert-circle-outline-svg);
}
%with-alert-circle-outline-mask {
@extend %with-mask, %alert-circle-outline-svg-prop;
-webkit-mask-image: var(--alert-circle-outline-svg);
mask-image: var(--alert-circle-outline-svg);
}
%with-alert-triangle-icon {
@extend %with-icon, %alert-triangle-svg-prop;
background-image: var(--alert-triangle-svg);
}
%with-alert-triangle-mask {
@extend %with-mask, %alert-triangle-svg-prop;
-webkit-mask-image: var(--alert-triangle-svg);
mask-image: var(--alert-triangle-svg);
}
%with-arrow-down-icon {
@extend %with-icon, %arrow-down-svg-prop;
background-image: var(--arrow-down-svg);
}
%with-arrow-down-mask {
@extend %with-mask, %arrow-down-svg-prop;
-webkit-mask-image: var(--arrow-down-svg);
mask-image: var(--arrow-down-svg);
}
%with-arrow-left-icon {
@extend %with-icon, %arrow-left-svg-prop;
background-image: var(--arrow-left-svg);
}
%with-arrow-left-mask {
@extend %with-mask, %arrow-left-svg-prop;
-webkit-mask-image: var(--arrow-left-svg);
mask-image: var(--arrow-left-svg);
}
%with-arrow-right-icon {
@extend %with-icon, %arrow-right-svg-prop;
background-image: var(--arrow-right-svg);
}
%with-arrow-right-mask {
@extend %with-mask, %arrow-right-svg-prop;
-webkit-mask-image: var(--arrow-right-svg);
mask-image: var(--arrow-right-svg);
}
%with-arrow-up-icon {
@extend %with-icon, %arrow-up-svg-prop;
background-image: var(--arrow-up-svg);
}
%with-arrow-up-mask {
@extend %with-mask, %arrow-up-svg-prop;
-webkit-mask-image: var(--arrow-up-svg);
mask-image: var(--arrow-up-svg);
}
%with-bolt-icon {
@extend %with-icon, %bolt-svg-prop;
background-image: var(--bolt-svg);
}
%with-bolt-mask {
@extend %with-mask, %bolt-svg-prop;
-webkit-mask-image: var(--bolt-svg);
mask-image: var(--bolt-svg);
}
%with-box-check-fill-icon {
@extend %with-icon, %box-check-fill-svg-prop;
background-image: var(--box-check-fill-svg);
}
%with-box-check-fill-mask {
@extend %with-mask, %box-check-fill-svg-prop;
-webkit-mask-image: var(--box-check-fill-svg);
mask-image: var(--box-check-fill-svg);
}
%with-box-outline-icon {
@extend %with-icon, %box-outline-svg-prop;
background-image: var(--box-outline-svg);
}
%with-box-outline-mask {
@extend %with-mask, %box-outline-svg-prop;
-webkit-mask-image: var(--box-outline-svg);
mask-image: var(--box-outline-svg);
}
%with-broadcast-icon {
@extend %with-icon, %broadcast-svg-prop;
background-image: var(--broadcast-svg);
}
%with-broadcast-mask {
@extend %with-mask, %broadcast-svg-prop;
-webkit-mask-image: var(--broadcast-svg);
mask-image: var(--broadcast-svg);
}
%with-bug-icon {
@extend %with-icon, %bug-svg-prop;
background-image: var(--bug-svg);
}
%with-bug-mask {
@extend %with-mask, %bug-svg-prop;
-webkit-mask-image: var(--bug-svg);
mask-image: var(--bug-svg);
}
%with-calendar-icon {
@extend %with-icon, %calendar-svg-prop;
background-image: var(--calendar-svg);
}
%with-calendar-mask {
@extend %with-mask, %calendar-svg-prop;
-webkit-mask-image: var(--calendar-svg);
mask-image: var(--calendar-svg);
}
%with-cancel-circle-fill-icon {
@extend %with-icon, %cancel-circle-fill-svg-prop;
background-image: var(--cancel-circle-fill-svg);
}
%with-cancel-circle-fill-mask {
@extend %with-mask, %cancel-circle-fill-svg-prop;
-webkit-mask-image: var(--cancel-circle-fill-svg);
mask-image: var(--cancel-circle-fill-svg);
}
%with-cancel-circle-outline-icon {
@extend %with-icon, %cancel-circle-outline-svg-prop;
background-image: var(--cancel-circle-outline-svg);
}
%with-cancel-circle-outline-mask {
@extend %with-mask, %cancel-circle-outline-svg-prop;
-webkit-mask-image: var(--cancel-circle-outline-svg);
mask-image: var(--cancel-circle-outline-svg);
}
%with-cancel-plain-icon {
@extend %with-icon, %cancel-plain-svg-prop;
background-image: var(--cancel-plain-svg);
}
%with-cancel-plain-mask {
@extend %with-mask, %cancel-plain-svg-prop;
-webkit-mask-image: var(--cancel-plain-svg);
mask-image: var(--cancel-plain-svg);
}
%with-cancel-square-fill-icon {
@extend %with-icon, %cancel-square-fill-svg-prop;
background-image: var(--cancel-square-fill-svg);
}
%with-cancel-square-fill-mask {
@extend %with-mask, %cancel-square-fill-svg-prop;
-webkit-mask-image: var(--cancel-square-fill-svg);
mask-image: var(--cancel-square-fill-svg);
}
%with-cancel-square-outline-icon {
@extend %with-icon, %cancel-square-outline-svg-prop;
background-image: var(--cancel-square-outline-svg);
}
%with-cancel-square-outline-mask {
@extend %with-mask, %cancel-square-outline-svg-prop;
-webkit-mask-image: var(--cancel-square-outline-svg);
mask-image: var(--cancel-square-outline-svg);
}
%with-caret-down-icon {
@extend %with-icon, %caret-down-svg-prop;
background-image: var(--caret-down-svg);
}
%with-caret-down-mask {
@extend %with-mask, %caret-down-svg-prop;
-webkit-mask-image: var(--caret-down-svg);
mask-image: var(--caret-down-svg);
}
%with-caret-up-icon {
@extend %with-icon, %caret-up-svg-prop;
background-image: var(--caret-up-svg);
}
%with-caret-up-mask {
@extend %with-mask, %caret-up-svg-prop;
-webkit-mask-image: var(--caret-up-svg);
mask-image: var(--caret-up-svg);
}
%with-check-circle-fill-icon {
@extend %with-icon, %check-circle-fill-svg-prop;
background-image: var(--check-circle-fill-svg);
}
%with-check-circle-fill-mask {
@extend %with-mask, %check-circle-fill-svg-prop;
-webkit-mask-image: var(--check-circle-fill-svg);
mask-image: var(--check-circle-fill-svg);
}
%with-check-circle-outline-icon {
@extend %with-icon, %check-circle-outline-svg-prop;
background-image: var(--check-circle-outline-svg);
}
%with-check-circle-outline-mask {
@extend %with-mask, %check-circle-outline-svg-prop;
-webkit-mask-image: var(--check-circle-outline-svg);
mask-image: var(--check-circle-outline-svg);
}
%with-check-plain-icon {
@extend %with-icon, %check-plain-svg-prop;
background-image: var(--check-plain-svg);
}
%with-check-plain-mask {
@extend %with-mask, %check-plain-svg-prop;
-webkit-mask-image: var(--check-plain-svg);
mask-image: var(--check-plain-svg);
}
%with-chevron-down-icon {
@extend %with-icon, %chevron-down-svg-prop;
background-image: var(--chevron-down-svg);
}
%with-chevron-down-mask {
@extend %with-mask, %chevron-down-svg-prop;
-webkit-mask-image: var(--chevron-down-svg);
mask-image: var(--chevron-down-svg);
}
%with-chevron-left-icon {
@extend %with-icon, %chevron-left-svg-prop;
background-image: var(--chevron-left-svg);
}
%with-chevron-left-mask {
@extend %with-mask, %chevron-left-svg-prop;
-webkit-mask-image: var(--chevron-left-svg);
mask-image: var(--chevron-left-svg);
}
%with-chevron-right-icon {
@extend %with-icon, %chevron-right-svg-prop;
background-image: var(--chevron-right-svg);
}
%with-chevron-right-mask {
@extend %with-mask, %chevron-right-svg-prop;
-webkit-mask-image: var(--chevron-right-svg);
mask-image: var(--chevron-right-svg);
}
%with-chevron-up-icon {
@extend %with-icon, %chevron-up-svg-prop;
background-image: var(--chevron-up-svg);
}
%with-chevron-up-mask {
@extend %with-mask, %chevron-up-svg-prop;
-webkit-mask-image: var(--chevron-up-svg);
mask-image: var(--chevron-up-svg);
}
%with-clock-fill-icon {
@extend %with-icon, %clock-fill-svg-prop;
background-image: var(--clock-fill-svg);
}
%with-clock-fill-mask {
@extend %with-mask, %clock-fill-svg-prop;
-webkit-mask-image: var(--clock-fill-svg);
mask-image: var(--clock-fill-svg);
}
%with-clock-outline-icon {
@extend %with-icon, %clock-outline-svg-prop;
background-image: var(--clock-outline-svg);
}
%with-clock-outline-mask {
@extend %with-mask, %clock-outline-svg-prop;
-webkit-mask-image: var(--clock-outline-svg);
mask-image: var(--clock-outline-svg);
}
ui: Discovery Chain (#6746) * Add data layer for discovery chain (model/adapter/serializer/repo) * Add routing plus template for routing tab * Add extra deps - consul-api-double upgrade plus ngraph for graphing * Add discovery-chain and related components and helpers: 1. discovery-chain to orchestrate/view controller 2. route-card, splitter-card, resolver card to represent the 3 different node types. 3. route-match helper for easy formatting of route rules 4. dom-position to figure out where things are in order to draw lines 5. svg-curve, simple wrapper around svg's <path d=""> attribute format. 6. data-structs service. This isn't super required but we are using other data-structures provided by other third party npm modules in other yet to be merged PRs. All of these types of things will live here for easy access/injection/changability 7. Some additions to our css-var 'polyfill' for a couple of extra needed rules * Related CSS for discovery chain 1. We add a %card base component here, eventually this will go into our base folder and %stats-card will also use it for a base component. 2. New icon for failovers * ui: Discovery Chain Continued (#6939) 1. Add in the things we use for the animations 2 Use IntersectionObserver so we know when the tab is visible, otherwise the dom-position helper won't work as the dom elements don't have any display. 3. Add some base work for animations and use them a little 4. Try to detect if a resolver is a redirect. Right now this works for datacenters and namespaces, but it can't work for services and subsets - we are awaiting backend support for doing this properly. 5. Add a fake 'this service has no routes' route that says 'Default' 6. redirect icon 7. Add CSS.escape polyfill for Edge
2019-12-17 19:27:28 +00:00
%with-cloud-cross-icon {
@extend %with-icon, %cloud-cross-svg-prop;
background-image: var(--cloud-cross-svg);
ui: Discovery Chain (#6746) * Add data layer for discovery chain (model/adapter/serializer/repo) * Add routing plus template for routing tab * Add extra deps - consul-api-double upgrade plus ngraph for graphing * Add discovery-chain and related components and helpers: 1. discovery-chain to orchestrate/view controller 2. route-card, splitter-card, resolver card to represent the 3 different node types. 3. route-match helper for easy formatting of route rules 4. dom-position to figure out where things are in order to draw lines 5. svg-curve, simple wrapper around svg's <path d=""> attribute format. 6. data-structs service. This isn't super required but we are using other data-structures provided by other third party npm modules in other yet to be merged PRs. All of these types of things will live here for easy access/injection/changability 7. Some additions to our css-var 'polyfill' for a couple of extra needed rules * Related CSS for discovery chain 1. We add a %card base component here, eventually this will go into our base folder and %stats-card will also use it for a base component. 2. New icon for failovers * ui: Discovery Chain Continued (#6939) 1. Add in the things we use for the animations 2 Use IntersectionObserver so we know when the tab is visible, otherwise the dom-position helper won't work as the dom elements don't have any display. 3. Add some base work for animations and use them a little 4. Try to detect if a resolver is a redirect. Right now this works for datacenters and namespaces, but it can't work for services and subsets - we are awaiting backend support for doing this properly. 5. Add a fake 'this service has no routes' route that says 'Default' 6. redirect icon 7. Add CSS.escape polyfill for Edge
2019-12-17 19:27:28 +00:00
}
%with-cloud-cross-mask {
@extend %with-mask, %cloud-cross-svg-prop;
-webkit-mask-image: var(--cloud-cross-svg);
mask-image: var(--cloud-cross-svg);
}
ui: Discovery Chain (#6746) * Add data layer for discovery chain (model/adapter/serializer/repo) * Add routing plus template for routing tab * Add extra deps - consul-api-double upgrade plus ngraph for graphing * Add discovery-chain and related components and helpers: 1. discovery-chain to orchestrate/view controller 2. route-card, splitter-card, resolver card to represent the 3 different node types. 3. route-match helper for easy formatting of route rules 4. dom-position to figure out where things are in order to draw lines 5. svg-curve, simple wrapper around svg's <path d=""> attribute format. 6. data-structs service. This isn't super required but we are using other data-structures provided by other third party npm modules in other yet to be merged PRs. All of these types of things will live here for easy access/injection/changability 7. Some additions to our css-var 'polyfill' for a couple of extra needed rules * Related CSS for discovery chain 1. We add a %card base component here, eventually this will go into our base folder and %stats-card will also use it for a base component. 2. New icon for failovers * ui: Discovery Chain Continued (#6939) 1. Add in the things we use for the animations 2 Use IntersectionObserver so we know when the tab is visible, otherwise the dom-position helper won't work as the dom elements don't have any display. 3. Add some base work for animations and use them a little 4. Try to detect if a resolver is a redirect. Right now this works for datacenters and namespaces, but it can't work for services and subsets - we are awaiting backend support for doing this properly. 5. Add a fake 'this service has no routes' route that says 'Default' 6. redirect icon 7. Add CSS.escape polyfill for Edge
2019-12-17 19:27:28 +00:00
%with-code-icon {
@extend %with-icon, %code-svg-prop;
background-image: var(--code-svg);
}
%with-code-mask {
@extend %with-mask, %code-svg-prop;
-webkit-mask-image: var(--code-svg);
mask-image: var(--code-svg);
}
%with-console-icon {
@extend %with-icon, %console-svg-prop;
background-image: var(--console-svg);
}
%with-console-mask {
@extend %with-mask, %console-svg-prop;
-webkit-mask-image: var(--console-svg);
mask-image: var(--console-svg);
}
%with-copy-action-icon {
@extend %with-icon, %copy-action-svg-prop;
background-image: var(--copy-action-svg);
}
%with-copy-action-mask {
@extend %with-mask, %copy-action-svg-prop;
-webkit-mask-image: var(--copy-action-svg);
mask-image: var(--copy-action-svg);
}
%with-copy-success-icon {
@extend %with-icon, %copy-success-svg-prop;
background-image: var(--copy-success-svg);
}
%with-copy-success-mask {
@extend %with-mask, %copy-success-svg-prop;
-webkit-mask-image: var(--copy-success-svg);
mask-image: var(--copy-success-svg);
}
%with-database-icon {
@extend %with-icon, %database-svg-prop;
background-image: var(--database-svg);
}
%with-database-mask {
@extend %with-mask, %database-svg-prop;
-webkit-mask-image: var(--database-svg);
mask-image: var(--database-svg);
}
%with-delay-icon {
@extend %with-icon, %delay-svg-prop;
background-image: var(--delay-svg);
}
%with-delay-mask {
@extend %with-mask, %delay-svg-prop;
-webkit-mask-image: var(--delay-svg);
mask-image: var(--delay-svg);
}
%with-deny-alt-icon {
@extend %with-icon, %deny-alt-svg-prop;
background-image: var(--deny-alt-svg);
}
%with-deny-alt-mask {
@extend %with-mask, %deny-alt-svg-prop;
-webkit-mask-image: var(--deny-alt-svg);
mask-image: var(--deny-alt-svg);
}
%with-deny-color-icon {
@extend %with-icon, %deny-color-svg-prop;
background-image: var(--deny-color-svg);
}
%with-deny-color-mask {
@extend %with-mask, %deny-color-svg-prop;
-webkit-mask-image: var(--deny-color-svg);
mask-image: var(--deny-color-svg);
}
%with-deny-default-icon {
@extend %with-icon, %deny-default-svg-prop;
background-image: var(--deny-default-svg);
}
%with-deny-default-mask {
@extend %with-mask, %deny-default-svg-prop;
-webkit-mask-image: var(--deny-default-svg);
mask-image: var(--deny-default-svg);
}
%with-disabled-icon {
@extend %with-icon, %disabled-svg-prop;
background-image: var(--disabled-svg);
}
%with-disabled-mask {
@extend %with-mask, %disabled-svg-prop;
-webkit-mask-image: var(--disabled-svg);
mask-image: var(--disabled-svg);
}
%with-docs-icon {
@extend %with-icon, %docs-svg-prop;
background-image: var(--docs-svg);
}
%with-docs-mask {
@extend %with-mask, %docs-svg-prop;
-webkit-mask-image: var(--docs-svg);
mask-image: var(--docs-svg);
}
%with-download-icon {
@extend %with-icon, %download-svg-prop;
background-image: var(--download-svg);
}
%with-download-mask {
@extend %with-mask, %download-svg-prop;
-webkit-mask-image: var(--download-svg);
mask-image: var(--download-svg);
}
%with-edit-icon {
@extend %with-icon, %edit-svg-prop;
background-image: var(--edit-svg);
}
%with-edit-mask {
@extend %with-mask, %edit-svg-prop;
-webkit-mask-image: var(--edit-svg);
mask-image: var(--edit-svg);
}
%with-envelope-sealed-fill-icon {
@extend %with-icon, %envelope-sealed-fill-svg-prop;
background-image: var(--envelope-sealed-fill-svg);
}
%with-envelope-sealed-fill-mask {
@extend %with-mask, %envelope-sealed-fill-svg-prop;
-webkit-mask-image: var(--envelope-sealed-fill-svg);
mask-image: var(--envelope-sealed-fill-svg);
}
%with-envelope-sealed-outline-icon {
@extend %with-icon, %envelope-sealed-outline-svg-prop;
background-image: var(--envelope-sealed-outline-svg);
}
%with-envelope-sealed-outline-mask {
@extend %with-mask, %envelope-sealed-outline-svg-prop;
-webkit-mask-image: var(--envelope-sealed-outline-svg);
mask-image: var(--envelope-sealed-outline-svg);
}
%with-envelope-unsealed--outline-icon {
@extend %with-icon, %envelope-unsealed--outline-svg-prop;
background-image: var(--envelope-unsealed--outline-svg);
}
%with-envelope-unsealed--outline-mask {
@extend %with-mask, %envelope-unsealed--outline-svg-prop;
-webkit-mask-image: var(--envelope-unsealed--outline-svg);
mask-image: var(--envelope-unsealed--outline-svg);
}
%with-envelope-unsealed-fill-icon {
@extend %with-icon, %envelope-unsealed-fill-svg-prop;
background-image: var(--envelope-unsealed-fill-svg);
}
%with-envelope-unsealed-fill-mask {
@extend %with-mask, %envelope-unsealed-fill-svg-prop;
-webkit-mask-image: var(--envelope-unsealed-fill-svg);
mask-image: var(--envelope-unsealed-fill-svg);
}
%with-exit-icon {
@extend %with-icon, %exit-svg-prop;
background-image: var(--exit-svg);
}
%with-exit-mask {
@extend %with-mask, %exit-svg-prop;
-webkit-mask-image: var(--exit-svg);
mask-image: var(--exit-svg);
}
%with-expand-less-icon {
@extend %with-icon, %expand-less-svg-prop;
background-image: var(--expand-less-svg);
}
%with-expand-less-mask {
@extend %with-mask, %expand-less-svg-prop;
-webkit-mask-image: var(--expand-less-svg);
mask-image: var(--expand-less-svg);
}
%with-expand-more-icon {
@extend %with-icon, %expand-more-svg-prop;
background-image: var(--expand-more-svg);
}
%with-expand-more-mask {
@extend %with-mask, %expand-more-svg-prop;
-webkit-mask-image: var(--expand-more-svg);
mask-image: var(--expand-more-svg);
}
%with-file-fill-icon {
@extend %with-icon, %file-fill-svg-prop;
background-image: var(--file-fill-svg);
}
%with-file-fill-mask {
@extend %with-mask, %file-fill-svg-prop;
-webkit-mask-image: var(--file-fill-svg);
mask-image: var(--file-fill-svg);
}
%with-file-outline-icon {
@extend %with-icon, %file-outline-svg-prop;
background-image: var(--file-outline-svg);
}
%with-file-outline-mask {
@extend %with-mask, %file-outline-svg-prop;
-webkit-mask-image: var(--file-outline-svg);
mask-image: var(--file-outline-svg);
}
%with-filter-icon {
@extend %with-icon, %filter-svg-prop;
background-image: var(--filter-svg);
}
%with-filter-mask {
@extend %with-mask, %filter-svg-prop;
-webkit-mask-image: var(--filter-svg);
mask-image: var(--filter-svg);
}
%with-flag-icon {
@extend %with-icon, %flag-svg-prop;
background-image: var(--flag-svg);
}
%with-flag-mask {
@extend %with-mask, %flag-svg-prop;
-webkit-mask-image: var(--flag-svg);
mask-image: var(--flag-svg);
}
%with-folder-fill-icon {
@extend %with-icon, %folder-fill-svg-prop;
background-image: var(--folder-fill-svg);
}
%with-folder-fill-mask {
@extend %with-mask, %folder-fill-svg-prop;
-webkit-mask-image: var(--folder-fill-svg);
mask-image: var(--folder-fill-svg);
}
%with-folder-outline-icon {
@extend %with-icon, %folder-outline-svg-prop;
background-image: var(--folder-outline-svg);
}
%with-folder-outline-mask {
@extend %with-mask, %folder-outline-svg-prop;
-webkit-mask-image: var(--folder-outline-svg);
mask-image: var(--folder-outline-svg);
}
%with-gateway-icon {
@extend %with-icon, %gateway-svg-prop;
background-image: var(--gateway-svg);
}
%with-gateway-mask {
@extend %with-mask, %gateway-svg-prop;
-webkit-mask-image: var(--gateway-svg);
mask-image: var(--gateway-svg);
}
%with-gift-fill-icon {
@extend %with-icon, %gift-fill-svg-prop;
background-image: var(--gift-fill-svg);
}
%with-gift-fill-mask {
@extend %with-mask, %gift-fill-svg-prop;
-webkit-mask-image: var(--gift-fill-svg);
mask-image: var(--gift-fill-svg);
}
%with-gift-outline-icon {
@extend %with-icon, %gift-outline-svg-prop;
background-image: var(--gift-outline-svg);
}
%with-gift-outline-mask {
@extend %with-mask, %gift-outline-svg-prop;
-webkit-mask-image: var(--gift-outline-svg);
mask-image: var(--gift-outline-svg);
}
%with-git-branch-icon {
@extend %with-icon, %git-branch-svg-prop;
background-image: var(--git-branch-svg);
}
%with-git-branch-mask {
@extend %with-mask, %git-branch-svg-prop;
-webkit-mask-image: var(--git-branch-svg);
mask-image: var(--git-branch-svg);
}
%with-git-commit-icon {
@extend %with-icon, %git-commit-svg-prop;
background-image: var(--git-commit-svg);
}
%with-git-commit-mask {
@extend %with-mask, %git-commit-svg-prop;
-webkit-mask-image: var(--git-commit-svg);
mask-image: var(--git-commit-svg);
}
%with-git-pull-request-icon {
@extend %with-icon, %git-pull-request-svg-prop;
background-image: var(--git-pull-request-svg);
}
%with-git-pull-request-mask {
@extend %with-mask, %git-pull-request-svg-prop;
-webkit-mask-image: var(--git-pull-request-svg);
mask-image: var(--git-pull-request-svg);
}
%with-git-repository-icon {
@extend %with-icon, %git-repository-svg-prop;
background-image: var(--git-repository-svg);
}
%with-git-repository-mask {
@extend %with-mask, %git-repository-svg-prop;
-webkit-mask-image: var(--git-repository-svg);
mask-image: var(--git-repository-svg);
}
%with-guide-icon {
@extend %with-icon, %guide-svg-prop;
background-image: var(--guide-svg);
}
%with-guide-mask {
@extend %with-mask, %guide-svg-prop;
-webkit-mask-image: var(--guide-svg);
mask-image: var(--guide-svg);
}
%with-health-icon {
@extend %with-icon, %health-svg-prop;
background-image: var(--health-svg);
}
%with-health-mask {
@extend %with-mask, %health-svg-prop;
-webkit-mask-image: var(--health-svg);
mask-image: var(--health-svg);
}
%with-help-circle-fill-icon {
@extend %with-icon, %help-circle-fill-svg-prop;
background-image: var(--help-circle-fill-svg);
}
%with-help-circle-fill-mask {
@extend %with-mask, %help-circle-fill-svg-prop;
-webkit-mask-image: var(--help-circle-fill-svg);
mask-image: var(--help-circle-fill-svg);
}
%with-help-circle-outline-icon {
@extend %with-icon, %help-circle-outline-svg-prop;
background-image: var(--help-circle-outline-svg);
}
%with-help-circle-outline-mask {
@extend %with-mask, %help-circle-outline-svg-prop;
-webkit-mask-image: var(--help-circle-outline-svg);
mask-image: var(--help-circle-outline-svg);
}
%with-history-icon {
@extend %with-icon, %history-svg-prop;
background-image: var(--history-svg);
}
%with-history-mask {
@extend %with-mask, %history-svg-prop;
-webkit-mask-image: var(--history-svg);
mask-image: var(--history-svg);
}
%with-info-circle-fill-icon {
@extend %with-icon, %info-circle-fill-svg-prop;
background-image: var(--info-circle-fill-svg);
}
%with-info-circle-fill-mask {
@extend %with-mask, %info-circle-fill-svg-prop;
-webkit-mask-image: var(--info-circle-fill-svg);
mask-image: var(--info-circle-fill-svg);
}
%with-info-circle-outline-icon {
@extend %with-icon, %info-circle-outline-svg-prop;
background-image: var(--info-circle-outline-svg);
}
%with-info-circle-outline-mask {
@extend %with-mask, %info-circle-outline-svg-prop;
-webkit-mask-image: var(--info-circle-outline-svg);
mask-image: var(--info-circle-outline-svg);
}
%with-key-icon {
@extend %with-icon, %key-svg-prop;
background-image: var(--key-svg);
}
%with-key-mask {
@extend %with-mask, %key-svg-prop;
-webkit-mask-image: var(--key-svg);
mask-image: var(--key-svg);
}
%with-layers-icon {
@extend %with-icon, %layers-svg-prop;
background-image: var(--layers-svg);
}
%with-layers-mask {
@extend %with-mask, %layers-svg-prop;
-webkit-mask-image: var(--layers-svg);
mask-image: var(--layers-svg);
}
%with-learn-icon {
@extend %with-icon, %learn-svg-prop;
background-image: var(--learn-svg);
}
%with-learn-mask {
@extend %with-mask, %learn-svg-prop;
-webkit-mask-image: var(--learn-svg);
mask-image: var(--learn-svg);
}
%with-link-icon {
@extend %with-icon, %link-svg-prop;
background-image: var(--link-svg);
}
%with-link-mask {
@extend %with-mask, %link-svg-prop;
-webkit-mask-image: var(--link-svg);
mask-image: var(--link-svg);
}
%with-loading-icon {
@extend %with-icon, %loading-svg-prop;
background-image: var(--loading-svg);
}
%with-loading-mask {
@extend %with-mask, %loading-svg-prop;
-webkit-mask-image: var(--loading-svg);
mask-image: var(--loading-svg);
}
%with-lock-closed-fill-icon {
@extend %with-icon, %lock-closed-fill-svg-prop;
background-image: var(--lock-closed-fill-svg);
}
%with-lock-closed-fill-mask {
@extend %with-mask, %lock-closed-fill-svg-prop;
-webkit-mask-image: var(--lock-closed-fill-svg);
mask-image: var(--lock-closed-fill-svg);
}
%with-lock-closed-outline-icon {
@extend %with-icon, %lock-closed-outline-svg-prop;
background-image: var(--lock-closed-outline-svg);
}
%with-lock-closed-outline-mask {
@extend %with-mask, %lock-closed-outline-svg-prop;
-webkit-mask-image: var(--lock-closed-outline-svg);
mask-image: var(--lock-closed-outline-svg);
}
%with-lock-closed-icon {
@extend %with-icon, %lock-closed-svg-prop;
background-image: var(--lock-closed-svg);
}
%with-lock-closed-mask {
@extend %with-mask, %lock-closed-svg-prop;
-webkit-mask-image: var(--lock-closed-svg);
mask-image: var(--lock-closed-svg);
}
%with-lock-disabled-icon {
@extend %with-icon, %lock-disabled-svg-prop;
background-image: var(--lock-disabled-svg);
}
%with-lock-disabled-mask {
@extend %with-mask, %lock-disabled-svg-prop;
-webkit-mask-image: var(--lock-disabled-svg);
mask-image: var(--lock-disabled-svg);
}
%with-lock-open-icon {
@extend %with-icon, %lock-open-svg-prop;
background-image: var(--lock-open-svg);
}
%with-lock-open-mask {
@extend %with-mask, %lock-open-svg-prop;
-webkit-mask-image: var(--lock-open-svg);
mask-image: var(--lock-open-svg);
}
%with-logo-alicloud-color-icon {
@extend %with-icon, %logo-alicloud-color-svg-prop;
background-image: var(--logo-alicloud-color-svg);
}
%with-logo-alicloud-color-mask {
@extend %with-mask, %logo-alicloud-color-svg-prop;
-webkit-mask-image: var(--logo-alicloud-color-svg);
mask-image: var(--logo-alicloud-color-svg);
}
%with-logo-alicloud-monochrome-icon {
@extend %with-icon, %logo-alicloud-monochrome-svg-prop;
background-image: var(--logo-alicloud-monochrome-svg);
}
%with-logo-alicloud-monochrome-mask {
@extend %with-mask, %logo-alicloud-monochrome-svg-prop;
-webkit-mask-image: var(--logo-alicloud-monochrome-svg);
mask-image: var(--logo-alicloud-monochrome-svg);
}
UI: Improved Login/Logout flow inc SSO support (#7790) * 6 new components for new login/logout flow, plus SSO support UI Components: 1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile 2. AuthForm: Authorization form shown when logged out. 3. AuthProfile: Simple presentational component to show the users 'Profile' 4. OidcSelect: A 'select' component for selecting an OIDC provider, dynamically uses either a single select menu or multiple buttons depending on the amount of providers Data Components: 1. JwtSource: Given an OIDC provider URL this component will request a token from the provider and fire an donchange event when it has been retrieved. Used by TokenSource. 2. TokenSource: Given a oidc provider name or a Consul SecretID, TokenSource will use whichever method/API requests required to retrieve Consul ACL Token, which is emitted to the onchange event handler. Very basic README documentation included here, which is likely to be refined somewhat. * CSS required for new auth/SSO UI components * Remaining app code required to tie the new auth/SSO work together * CSS code required to help tie the auth/SSO work together * Test code in order to get current tests passing with new auth/SSO flow ..plus extremely basics/skipped rendering tests for the new components * Treat the secret received from the server as the truth Previously we've always treated what the user typed as the truth, this breaks down when using SSO as the user doesn't type anything to retrieve a token. Therefore we change this so that we use the secret in the API response as the truth. * Make sure removing an dom tree from a buffer only removes its own tree
2020-05-11 15:37:11 +00:00
%with-logo-auth0-color-icon {
@extend %with-icon, %logo-auth0-color-svg-prop;
background-image: var(--logo-auth0-color-svg);
UI: Improved Login/Logout flow inc SSO support (#7790) * 6 new components for new login/logout flow, plus SSO support UI Components: 1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile 2. AuthForm: Authorization form shown when logged out. 3. AuthProfile: Simple presentational component to show the users 'Profile' 4. OidcSelect: A 'select' component for selecting an OIDC provider, dynamically uses either a single select menu or multiple buttons depending on the amount of providers Data Components: 1. JwtSource: Given an OIDC provider URL this component will request a token from the provider and fire an donchange event when it has been retrieved. Used by TokenSource. 2. TokenSource: Given a oidc provider name or a Consul SecretID, TokenSource will use whichever method/API requests required to retrieve Consul ACL Token, which is emitted to the onchange event handler. Very basic README documentation included here, which is likely to be refined somewhat. * CSS required for new auth/SSO UI components * Remaining app code required to tie the new auth/SSO work together * CSS code required to help tie the auth/SSO work together * Test code in order to get current tests passing with new auth/SSO flow ..plus extremely basics/skipped rendering tests for the new components * Treat the secret received from the server as the truth Previously we've always treated what the user typed as the truth, this breaks down when using SSO as the user doesn't type anything to retrieve a token. Therefore we change this so that we use the secret in the API response as the truth. * Make sure removing an dom tree from a buffer only removes its own tree
2020-05-11 15:37:11 +00:00
}
%with-logo-auth0-color-mask {
@extend %with-mask, %logo-auth0-color-svg-prop;
-webkit-mask-image: var(--logo-auth0-color-svg);
mask-image: var(--logo-auth0-color-svg);
UI: Improved Login/Logout flow inc SSO support (#7790) * 6 new components for new login/logout flow, plus SSO support UI Components: 1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile 2. AuthForm: Authorization form shown when logged out. 3. AuthProfile: Simple presentational component to show the users 'Profile' 4. OidcSelect: A 'select' component for selecting an OIDC provider, dynamically uses either a single select menu or multiple buttons depending on the amount of providers Data Components: 1. JwtSource: Given an OIDC provider URL this component will request a token from the provider and fire an donchange event when it has been retrieved. Used by TokenSource. 2. TokenSource: Given a oidc provider name or a Consul SecretID, TokenSource will use whichever method/API requests required to retrieve Consul ACL Token, which is emitted to the onchange event handler. Very basic README documentation included here, which is likely to be refined somewhat. * CSS required for new auth/SSO UI components * Remaining app code required to tie the new auth/SSO work together * CSS code required to help tie the auth/SSO work together * Test code in order to get current tests passing with new auth/SSO flow ..plus extremely basics/skipped rendering tests for the new components * Treat the secret received from the server as the truth Previously we've always treated what the user typed as the truth, this breaks down when using SSO as the user doesn't type anything to retrieve a token. Therefore we change this so that we use the secret in the API response as the truth. * Make sure removing an dom tree from a buffer only removes its own tree
2020-05-11 15:37:11 +00:00
}
%with-logo-aws-color-icon {
@extend %with-icon, %logo-aws-color-svg-prop;
background-image: var(--logo-aws-color-svg);
}
%with-logo-aws-color-mask {
@extend %with-mask, %logo-aws-color-svg-prop;
-webkit-mask-image: var(--logo-aws-color-svg);
mask-image: var(--logo-aws-color-svg);
}
%with-logo-aws-monochrome-icon {
@extend %with-icon, %logo-aws-monochrome-svg-prop;
background-image: var(--logo-aws-monochrome-svg);
}
%with-logo-aws-monochrome-mask {
@extend %with-mask, %logo-aws-monochrome-svg-prop;
-webkit-mask-image: var(--logo-aws-monochrome-svg);
mask-image: var(--logo-aws-monochrome-svg);
}
%with-logo-azure-color-icon {
@extend %with-icon, %logo-azure-color-svg-prop;
background-image: var(--logo-azure-color-svg);
}
%with-logo-azure-color-mask {
@extend %with-mask, %logo-azure-color-svg-prop;
-webkit-mask-image: var(--logo-azure-color-svg);
mask-image: var(--logo-azure-color-svg);
}
%with-logo-azure-dev-ops-color-icon {
@extend %with-icon, %logo-azure-dev-ops-color-svg-prop;
background-image: var(--logo-azure-dev-ops-color-svg);
}
%with-logo-azure-dev-ops-color-mask {
@extend %with-mask, %logo-azure-dev-ops-color-svg-prop;
-webkit-mask-image: var(--logo-azure-dev-ops-color-svg);
mask-image: var(--logo-azure-dev-ops-color-svg);
}
%with-logo-azure-dev-ops-monochrome-icon {
@extend %with-icon, %logo-azure-dev-ops-monochrome-svg-prop;
background-image: var(--logo-azure-dev-ops-monochrome-svg);
}
%with-logo-azure-dev-ops-monochrome-mask {
@extend %with-mask, %logo-azure-dev-ops-monochrome-svg-prop;
-webkit-mask-image: var(--logo-azure-dev-ops-monochrome-svg);
mask-image: var(--logo-azure-dev-ops-monochrome-svg);
}
%with-logo-azure-monochrome-icon {
@extend %with-icon, %logo-azure-monochrome-svg-prop;
background-image: var(--logo-azure-monochrome-svg);
}
%with-logo-azure-monochrome-mask {
@extend %with-mask, %logo-azure-monochrome-svg-prop;
-webkit-mask-image: var(--logo-azure-monochrome-svg);
mask-image: var(--logo-azure-monochrome-svg);
}
%with-logo-bitbucket-color-icon {
@extend %with-icon, %logo-bitbucket-color-svg-prop;
background-image: var(--logo-bitbucket-color-svg);
}
%with-logo-bitbucket-color-mask {
@extend %with-mask, %logo-bitbucket-color-svg-prop;
-webkit-mask-image: var(--logo-bitbucket-color-svg);
mask-image: var(--logo-bitbucket-color-svg);
}
%with-logo-bitbucket-monochrome-icon {
@extend %with-icon, %logo-bitbucket-monochrome-svg-prop;
background-image: var(--logo-bitbucket-monochrome-svg);
}
%with-logo-bitbucket-monochrome-mask {
@extend %with-mask, %logo-bitbucket-monochrome-svg-prop;
-webkit-mask-image: var(--logo-bitbucket-monochrome-svg);
mask-image: var(--logo-bitbucket-monochrome-svg);
}
%with-logo-consul-color-icon {
@extend %with-icon, %logo-consul-color-svg-prop;
background-image: var(--logo-consul-color-svg);
}
%with-logo-consul-color-mask {
@extend %with-mask, %logo-consul-color-svg-prop;
-webkit-mask-image: var(--logo-consul-color-svg);
mask-image: var(--logo-consul-color-svg);
}
%with-logo-ember-circle-color-icon {
@extend %with-icon, %logo-ember-circle-color-svg-prop;
background-image: var(--logo-ember-circle-color-svg);
}
%with-logo-ember-circle-color-mask {
@extend %with-mask, %logo-ember-circle-color-svg-prop;
-webkit-mask-image: var(--logo-ember-circle-color-svg);
mask-image: var(--logo-ember-circle-color-svg);
}
%with-logo-gcp-color-icon {
@extend %with-icon, %logo-gcp-color-svg-prop;
background-image: var(--logo-gcp-color-svg);
}
%with-logo-gcp-color-mask {
@extend %with-mask, %logo-gcp-color-svg-prop;
-webkit-mask-image: var(--logo-gcp-color-svg);
mask-image: var(--logo-gcp-color-svg);
}
%with-logo-gcp-monochrome-icon {
@extend %with-icon, %logo-gcp-monochrome-svg-prop;
background-image: var(--logo-gcp-monochrome-svg);
}
%with-logo-gcp-monochrome-mask {
@extend %with-mask, %logo-gcp-monochrome-svg-prop;
-webkit-mask-image: var(--logo-gcp-monochrome-svg);
mask-image: var(--logo-gcp-monochrome-svg);
}
%with-logo-github-color-icon {
@extend %with-icon, %logo-github-color-svg-prop;
background-image: var(--logo-github-color-svg);
}
%with-logo-github-color-mask {
@extend %with-mask, %logo-github-color-svg-prop;
-webkit-mask-image: var(--logo-github-color-svg);
mask-image: var(--logo-github-color-svg);
}
%with-logo-github-monochrome-icon {
@extend %with-icon, %logo-github-monochrome-svg-prop;
background-image: var(--logo-github-monochrome-svg);
}
%with-logo-github-monochrome-mask {
@extend %with-mask, %logo-github-monochrome-svg-prop;
-webkit-mask-image: var(--logo-github-monochrome-svg);
mask-image: var(--logo-github-monochrome-svg);
}
%with-logo-gitlab-color-icon {
@extend %with-icon, %logo-gitlab-color-svg-prop;
background-image: var(--logo-gitlab-color-svg);
}
%with-logo-gitlab-color-mask {
@extend %with-mask, %logo-gitlab-color-svg-prop;
-webkit-mask-image: var(--logo-gitlab-color-svg);
mask-image: var(--logo-gitlab-color-svg);
}
%with-logo-gitlab-monochrome-icon {
@extend %with-icon, %logo-gitlab-monochrome-svg-prop;
background-image: var(--logo-gitlab-monochrome-svg);
}
%with-logo-gitlab-monochrome-mask {
@extend %with-mask, %logo-gitlab-monochrome-svg-prop;
-webkit-mask-image: var(--logo-gitlab-monochrome-svg);
mask-image: var(--logo-gitlab-monochrome-svg);
}
%with-logo-glimmer-color-icon {
@extend %with-icon, %logo-glimmer-color-svg-prop;
background-image: var(--logo-glimmer-color-svg);
}
%with-logo-glimmer-color-mask {
@extend %with-mask, %logo-glimmer-color-svg-prop;
-webkit-mask-image: var(--logo-glimmer-color-svg);
mask-image: var(--logo-glimmer-color-svg);
}
%with-logo-google-color-icon {
@extend %with-icon, %logo-google-color-svg-prop;
background-image: var(--logo-google-color-svg);
}
%with-logo-google-color-mask {
@extend %with-mask, %logo-google-color-svg-prop;
-webkit-mask-image: var(--logo-google-color-svg);
mask-image: var(--logo-google-color-svg);
}
%with-logo-google-monochrome-icon {
@extend %with-icon, %logo-google-monochrome-svg-prop;
background-image: var(--logo-google-monochrome-svg);
}
%with-logo-google-monochrome-mask {
@extend %with-mask, %logo-google-monochrome-svg-prop;
-webkit-mask-image: var(--logo-google-monochrome-svg);
mask-image: var(--logo-google-monochrome-svg);
}
%with-logo-hashicorp-color-icon {
@extend %with-icon, %logo-hashicorp-color-svg-prop;
background-image: var(--logo-hashicorp-color-svg);
}
%with-logo-hashicorp-color-mask {
@extend %with-mask, %logo-hashicorp-color-svg-prop;
-webkit-mask-image: var(--logo-hashicorp-color-svg);
mask-image: var(--logo-hashicorp-color-svg);
}
%with-logo-jwt-color-icon {
@extend %with-icon, %logo-jwt-color-svg-prop;
background-image: var(--logo-jwt-color-svg);
}
%with-logo-jwt-color-mask {
@extend %with-mask, %logo-jwt-color-svg-prop;
-webkit-mask-image: var(--logo-jwt-color-svg);
mask-image: var(--logo-jwt-color-svg);
}
%with-logo-kubernetes-color-icon {
@extend %with-icon, %logo-kubernetes-color-svg-prop;
background-image: var(--logo-kubernetes-color-svg);
}
%with-logo-kubernetes-color-mask {
@extend %with-mask, %logo-kubernetes-color-svg-prop;
-webkit-mask-image: var(--logo-kubernetes-color-svg);
mask-image: var(--logo-kubernetes-color-svg);
}
%with-logo-kubernetes-monochrome-icon {
@extend %with-icon, %logo-kubernetes-monochrome-svg-prop;
background-image: var(--logo-kubernetes-monochrome-svg);
}
%with-logo-kubernetes-monochrome-mask {
@extend %with-mask, %logo-kubernetes-monochrome-svg-prop;
-webkit-mask-image: var(--logo-kubernetes-monochrome-svg);
mask-image: var(--logo-kubernetes-monochrome-svg);
}
%with-logo-microsoft-color-icon {
@extend %with-icon, %logo-microsoft-color-svg-prop;
background-image: var(--logo-microsoft-color-svg);
}
%with-logo-microsoft-color-mask {
@extend %with-mask, %logo-microsoft-color-svg-prop;
-webkit-mask-image: var(--logo-microsoft-color-svg);
mask-image: var(--logo-microsoft-color-svg);
}
%with-logo-nomad-color-icon {
@extend %with-icon, %logo-nomad-color-svg-prop;
background-image: var(--logo-nomad-color-svg);
}
%with-logo-nomad-color-mask {
@extend %with-mask, %logo-nomad-color-svg-prop;
-webkit-mask-image: var(--logo-nomad-color-svg);
mask-image: var(--logo-nomad-color-svg);
}
%with-logo-oidc-color-icon {
@extend %with-icon, %logo-oidc-color-svg-prop;
background-image: var(--logo-oidc-color-svg);
}
%with-logo-oidc-color-mask {
@extend %with-mask, %logo-oidc-color-svg-prop;
-webkit-mask-image: var(--logo-oidc-color-svg);
mask-image: var(--logo-oidc-color-svg);
}
UI: Improved Login/Logout flow inc SSO support (#7790) * 6 new components for new login/logout flow, plus SSO support UI Components: 1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile 2. AuthForm: Authorization form shown when logged out. 3. AuthProfile: Simple presentational component to show the users 'Profile' 4. OidcSelect: A 'select' component for selecting an OIDC provider, dynamically uses either a single select menu or multiple buttons depending on the amount of providers Data Components: 1. JwtSource: Given an OIDC provider URL this component will request a token from the provider and fire an donchange event when it has been retrieved. Used by TokenSource. 2. TokenSource: Given a oidc provider name or a Consul SecretID, TokenSource will use whichever method/API requests required to retrieve Consul ACL Token, which is emitted to the onchange event handler. Very basic README documentation included here, which is likely to be refined somewhat. * CSS required for new auth/SSO UI components * Remaining app code required to tie the new auth/SSO work together * CSS code required to help tie the auth/SSO work together * Test code in order to get current tests passing with new auth/SSO flow ..plus extremely basics/skipped rendering tests for the new components * Treat the secret received from the server as the truth Previously we've always treated what the user typed as the truth, this breaks down when using SSO as the user doesn't type anything to retrieve a token. Therefore we change this so that we use the secret in the API response as the truth. * Make sure removing an dom tree from a buffer only removes its own tree
2020-05-11 15:37:11 +00:00
%with-logo-okta-color-icon {
@extend %with-icon, %logo-okta-color-svg-prop;
background-image: var(--logo-okta-color-svg);
UI: Improved Login/Logout flow inc SSO support (#7790) * 6 new components for new login/logout flow, plus SSO support UI Components: 1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile 2. AuthForm: Authorization form shown when logged out. 3. AuthProfile: Simple presentational component to show the users 'Profile' 4. OidcSelect: A 'select' component for selecting an OIDC provider, dynamically uses either a single select menu or multiple buttons depending on the amount of providers Data Components: 1. JwtSource: Given an OIDC provider URL this component will request a token from the provider and fire an donchange event when it has been retrieved. Used by TokenSource. 2. TokenSource: Given a oidc provider name or a Consul SecretID, TokenSource will use whichever method/API requests required to retrieve Consul ACL Token, which is emitted to the onchange event handler. Very basic README documentation included here, which is likely to be refined somewhat. * CSS required for new auth/SSO UI components * Remaining app code required to tie the new auth/SSO work together * CSS code required to help tie the auth/SSO work together * Test code in order to get current tests passing with new auth/SSO flow ..plus extremely basics/skipped rendering tests for the new components * Treat the secret received from the server as the truth Previously we've always treated what the user typed as the truth, this breaks down when using SSO as the user doesn't type anything to retrieve a token. Therefore we change this so that we use the secret in the API response as the truth. * Make sure removing an dom tree from a buffer only removes its own tree
2020-05-11 15:37:11 +00:00
}
%with-logo-okta-color-mask {
@extend %with-mask, %logo-okta-color-svg-prop;
-webkit-mask-image: var(--logo-okta-color-svg);
mask-image: var(--logo-okta-color-svg);
UI: Improved Login/Logout flow inc SSO support (#7790) * 6 new components for new login/logout flow, plus SSO support UI Components: 1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile 2. AuthForm: Authorization form shown when logged out. 3. AuthProfile: Simple presentational component to show the users 'Profile' 4. OidcSelect: A 'select' component for selecting an OIDC provider, dynamically uses either a single select menu or multiple buttons depending on the amount of providers Data Components: 1. JwtSource: Given an OIDC provider URL this component will request a token from the provider and fire an donchange event when it has been retrieved. Used by TokenSource. 2. TokenSource: Given a oidc provider name or a Consul SecretID, TokenSource will use whichever method/API requests required to retrieve Consul ACL Token, which is emitted to the onchange event handler. Very basic README documentation included here, which is likely to be refined somewhat. * CSS required for new auth/SSO UI components * Remaining app code required to tie the new auth/SSO work together * CSS code required to help tie the auth/SSO work together * Test code in order to get current tests passing with new auth/SSO flow ..plus extremely basics/skipped rendering tests for the new components * Treat the secret received from the server as the truth Previously we've always treated what the user typed as the truth, this breaks down when using SSO as the user doesn't type anything to retrieve a token. Therefore we change this so that we use the secret in the API response as the truth. * Make sure removing an dom tree from a buffer only removes its own tree
2020-05-11 15:37:11 +00:00
}
%with-logo-oracle-color-icon {
@extend %with-icon, %logo-oracle-color-svg-prop;
background-image: var(--logo-oracle-color-svg);
}
%with-logo-oracle-color-mask {
@extend %with-mask, %logo-oracle-color-svg-prop;
-webkit-mask-image: var(--logo-oracle-color-svg);
mask-image: var(--logo-oracle-color-svg);
}
%with-logo-oracle-monochrome-icon {
@extend %with-icon, %logo-oracle-monochrome-svg-prop;
background-image: var(--logo-oracle-monochrome-svg);
}
%with-logo-oracle-monochrome-mask {
@extend %with-mask, %logo-oracle-monochrome-svg-prop;
-webkit-mask-image: var(--logo-oracle-monochrome-svg);
mask-image: var(--logo-oracle-monochrome-svg);
}
%with-logo-slack-color-icon {
@extend %with-icon, %logo-slack-color-svg-prop;
background-image: var(--logo-slack-color-svg);
}
%with-logo-slack-color-mask {
@extend %with-mask, %logo-slack-color-svg-prop;
-webkit-mask-image: var(--logo-slack-color-svg);
mask-image: var(--logo-slack-color-svg);
}
%with-logo-slack-monochrome-icon {
@extend %with-icon, %logo-slack-monochrome-svg-prop;
background-image: var(--logo-slack-monochrome-svg);
}
%with-logo-slack-monochrome-mask {
@extend %with-mask, %logo-slack-monochrome-svg-prop;
-webkit-mask-image: var(--logo-slack-monochrome-svg);
mask-image: var(--logo-slack-monochrome-svg);
}
%with-logo-terraform-color-icon {
@extend %with-icon, %logo-terraform-color-svg-prop;
background-image: var(--logo-terraform-color-svg);
}
%with-logo-terraform-color-mask {
@extend %with-mask, %logo-terraform-color-svg-prop;
-webkit-mask-image: var(--logo-terraform-color-svg);
mask-image: var(--logo-terraform-color-svg);
}
%with-logo-vault-color-icon {
@extend %with-icon, %logo-vault-color-svg-prop;
background-image: var(--logo-vault-color-svg);
}
%with-logo-vault-color-mask {
@extend %with-mask, %logo-vault-color-svg-prop;
-webkit-mask-image: var(--logo-vault-color-svg);
mask-image: var(--logo-vault-color-svg);
}
%with-logo-vmware-color-icon {
@extend %with-icon, %logo-vmware-color-svg-prop;
background-image: var(--logo-vmware-color-svg);
}
%with-logo-vmware-color-mask {
@extend %with-mask, %logo-vmware-color-svg-prop;
-webkit-mask-image: var(--logo-vmware-color-svg);
mask-image: var(--logo-vmware-color-svg);
}
%with-logo-vmware-monochrome-icon {
@extend %with-icon, %logo-vmware-monochrome-svg-prop;
background-image: var(--logo-vmware-monochrome-svg);
}
%with-logo-vmware-monochrome-mask {
@extend %with-mask, %logo-vmware-monochrome-svg-prop;
-webkit-mask-image: var(--logo-vmware-monochrome-svg);
mask-image: var(--logo-vmware-monochrome-svg);
}
%with-menu-icon {
@extend %with-icon, %menu-svg-prop;
background-image: var(--menu-svg);
}
%with-menu-mask {
@extend %with-mask, %menu-svg-prop;
-webkit-mask-image: var(--menu-svg);
mask-image: var(--menu-svg);
}
%with-mesh-icon {
@extend %with-icon, %mesh-svg-prop;
background-image: var(--mesh-svg);
}
%with-mesh-mask {
@extend %with-mask, %mesh-svg-prop;
-webkit-mask-image: var(--mesh-svg);
mask-image: var(--mesh-svg);
}
%with-message-icon {
@extend %with-icon, %message-svg-prop;
background-image: var(--message-svg);
}
%with-message-mask {
@extend %with-mask, %message-svg-prop;
-webkit-mask-image: var(--message-svg);
mask-image: var(--message-svg);
}
%with-minus-circle-fill-icon {
@extend %with-icon, %minus-circle-fill-svg-prop;
background-image: var(--minus-circle-fill-svg);
}
%with-minus-circle-fill-mask {
@extend %with-mask, %minus-circle-fill-svg-prop;
-webkit-mask-image: var(--minus-circle-fill-svg);
mask-image: var(--minus-circle-fill-svg);
}
%with-minus-circle-outline-icon {
@extend %with-icon, %minus-circle-outline-svg-prop;
background-image: var(--minus-circle-outline-svg);
}
%with-minus-circle-outline-mask {
@extend %with-mask, %minus-circle-outline-svg-prop;
-webkit-mask-image: var(--minus-circle-outline-svg);
mask-image: var(--minus-circle-outline-svg);
}
%with-minus-plain-icon {
@extend %with-icon, %minus-plain-svg-prop;
background-image: var(--minus-plain-svg);
}
%with-minus-plain-mask {
@extend %with-mask, %minus-plain-svg-prop;
-webkit-mask-image: var(--minus-plain-svg);
mask-image: var(--minus-plain-svg);
}
%with-minus-square-fill-icon {
@extend %with-icon, %minus-square-fill-svg-prop;
background-image: var(--minus-square-fill-svg);
}
%with-minus-square-fill-mask {
@extend %with-mask, %minus-square-fill-svg-prop;
-webkit-mask-image: var(--minus-square-fill-svg);
mask-image: var(--minus-square-fill-svg);
}
%with-module-icon {
@extend %with-icon, %module-svg-prop;
background-image: var(--module-svg);
}
%with-module-mask {
@extend %with-mask, %module-svg-prop;
-webkit-mask-image: var(--module-svg);
mask-image: var(--module-svg);
}
%with-more-horizontal-icon {
@extend %with-icon, %more-horizontal-svg-prop;
background-image: var(--more-horizontal-svg);
}
%with-more-horizontal-mask {
@extend %with-mask, %more-horizontal-svg-prop;
-webkit-mask-image: var(--more-horizontal-svg);
mask-image: var(--more-horizontal-svg);
}
%with-more-vertical-icon {
@extend %with-icon, %more-vertical-svg-prop;
background-image: var(--more-vertical-svg);
}
%with-more-vertical-mask {
@extend %with-mask, %more-vertical-svg-prop;
-webkit-mask-image: var(--more-vertical-svg);
mask-image: var(--more-vertical-svg);
}
%with-notification-disabled-icon {
@extend %with-icon, %notification-disabled-svg-prop;
background-image: var(--notification-disabled-svg);
}
%with-notification-disabled-mask {
@extend %with-mask, %notification-disabled-svg-prop;
-webkit-mask-image: var(--notification-disabled-svg);
mask-image: var(--notification-disabled-svg);
}
%with-notification-fill-icon {
@extend %with-icon, %notification-fill-svg-prop;
background-image: var(--notification-fill-svg);
}
%with-notification-fill-mask {
@extend %with-mask, %notification-fill-svg-prop;
-webkit-mask-image: var(--notification-fill-svg);
mask-image: var(--notification-fill-svg);
}
%with-notification-outline-icon {
@extend %with-icon, %notification-outline-svg-prop;
background-image: var(--notification-outline-svg);
}
%with-notification-outline-mask {
@extend %with-mask, %notification-outline-svg-prop;
-webkit-mask-image: var(--notification-outline-svg);
mask-image: var(--notification-outline-svg);
}
%with-outline-icon {
@extend %with-icon, %outline-svg-prop;
background-image: var(--outline-svg);
}
%with-outline-mask {
@extend %with-mask, %outline-svg-prop;
-webkit-mask-image: var(--outline-svg);
mask-image: var(--outline-svg);
}
%with-page-outline-icon {
@extend %with-icon, %page-outline-svg-prop;
background-image: var(--page-outline-svg);
}
%with-page-outline-mask {
@extend %with-mask, %page-outline-svg-prop;
-webkit-mask-image: var(--page-outline-svg);
mask-image: var(--page-outline-svg);
}
%with-partner-icon {
@extend %with-icon, %partner-svg-prop;
background-image: var(--partner-svg);
}
%with-partner-mask {
@extend %with-mask, %partner-svg-prop;
-webkit-mask-image: var(--partner-svg);
mask-image: var(--partner-svg);
}
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 16:18:04 +00:00
%with-path-icon {
@extend %with-icon, %path-svg-prop;
background-image: var(--path-svg);
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 16:18:04 +00:00
}
%with-path-mask {
@extend %with-mask, %path-svg-prop;
-webkit-mask-image: var(--path-svg);
mask-image: var(--path-svg);
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 16:18:04 +00:00
}
%with-play-fill-icon {
@extend %with-icon, %play-fill-svg-prop;
background-image: var(--play-fill-svg);
}
%with-play-fill-mask {
@extend %with-mask, %play-fill-svg-prop;
-webkit-mask-image: var(--play-fill-svg);
mask-image: var(--play-fill-svg);
}
%with-play-outline-icon {
@extend %with-icon, %play-outline-svg-prop;
background-image: var(--play-outline-svg);
}
%with-play-outline-mask {
@extend %with-mask, %play-outline-svg-prop;
-webkit-mask-image: var(--play-outline-svg);
mask-image: var(--play-outline-svg);
}
%with-play-plain-icon {
@extend %with-icon, %play-plain-svg-prop;
background-image: var(--play-plain-svg);
}
%with-play-plain-mask {
@extend %with-mask, %play-plain-svg-prop;
-webkit-mask-image: var(--play-plain-svg);
mask-image: var(--play-plain-svg);
}
%with-plus-circle-fill-icon {
@extend %with-icon, %plus-circle-fill-svg-prop;
background-image: var(--plus-circle-fill-svg);
}
%with-plus-circle-fill-mask {
@extend %with-mask, %plus-circle-fill-svg-prop;
-webkit-mask-image: var(--plus-circle-fill-svg);
mask-image: var(--plus-circle-fill-svg);
}
%with-plus-circle-outline-icon {
@extend %with-icon, %plus-circle-outline-svg-prop;
background-image: var(--plus-circle-outline-svg);
}
%with-plus-circle-outline-mask {
@extend %with-mask, %plus-circle-outline-svg-prop;
-webkit-mask-image: var(--plus-circle-outline-svg);
mask-image: var(--plus-circle-outline-svg);
}
%with-plus-plain-icon {
@extend %with-icon, %plus-plain-svg-prop;
background-image: var(--plus-plain-svg);
}
%with-plus-plain-mask {
@extend %with-mask, %plus-plain-svg-prop;
-webkit-mask-image: var(--plus-plain-svg);
mask-image: var(--plus-plain-svg);
}
%with-plus-square-fill-icon {
@extend %with-icon, %plus-square-fill-svg-prop;
background-image: var(--plus-square-fill-svg);
}
%with-plus-square-fill-mask {
@extend %with-mask, %plus-square-fill-svg-prop;
-webkit-mask-image: var(--plus-square-fill-svg);
mask-image: var(--plus-square-fill-svg);
}
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 16:18:04 +00:00
%with-port-icon {
@extend %with-icon, %port-svg-prop;
background-image: var(--port-svg);
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 16:18:04 +00:00
}
%with-port-mask {
@extend %with-mask, %port-svg-prop;
-webkit-mask-image: var(--port-svg);
mask-image: var(--port-svg);
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 16:18:04 +00:00
}
%with-protocol-icon {
@extend %with-icon, %protocol-svg-prop;
background-image: var(--protocol-svg);
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 16:18:04 +00:00
}
%with-protocol-mask {
@extend %with-mask, %protocol-svg-prop;
-webkit-mask-image: var(--protocol-svg);
mask-image: var(--protocol-svg);
UI Release Merge (1.8-beta-2: ui-staging merge) (#7919) * ui: Styling fixes (#7885) * Move cellHeight to ListCollection js file * Fix composite row border-top-color onHover state * Add empty health check icon to CompositeRow styling * ui: Slightly refactor %composite-rows and reuse ConsulServiceList component (#7886) * ui: Move individual component types into a single %composite-list plus 1. Removes all out separate CSS components (that match HTML components) to favour not having those separate for the moemnt at least 2. Reuses <ConsulServiceList /> component for Terminating Gateways > Linked Services * ui: Tweak breadcrumb spacing for '/' separator * Fix up the tests i.e. services per tab so we can call them all services * ui: Misc discovery chain fixes (#7892) 1. Look for a default splitter before looking for a default resolver in order to route to. 2. Delay adding svg listeners until afterRender (fixes split tooltip) 3. Make router id's consistent for highlighting default routers in when clicking the graph * ui: If an error occurs on the server, surface it in the notification (#7893) * ui: Delete old unused CSS (#7909) This commit deletes CSS that we no longer use and we definitely will not ever use. We also dedup all of our imports here as it turns out SASS doesn't dedupe imports. Strangely this increases out CSS weight by ~1kb instead of reducing but we'd rather keep things deduped as that was the intention * ui: Redesign - Exposed Paths (#7912) * Add new exposed paths icons to codebase * Redesign Exposed Paths and create copy-button hover on Composite Row * Refactor FeedbackDialog and CopyButton * Change this.element to use `{{ref }}` now we don't have an element We changed this to a tagless component with an eye to moving this to a glimmer component, without spotting that this would also remove the `this.element` property. This adds an equivalent using the ref modifier. Co-authored-by: John Cowen <jcowen@hashicorp.com> * ui: Remove box-shadow and pointer cursor from metada list hover effect (#7914) Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>
2020-05-19 16:18:04 +00:00
}
%with-provider-icon {
@extend %with-icon, %provider-svg-prop;
background-image: var(--provider-svg);
}
%with-provider-mask {
@extend %with-mask, %provider-svg-prop;
-webkit-mask-image: var(--provider-svg);
mask-image: var(--provider-svg);
}
%with-public-default-icon {
@extend %with-icon, %public-default-svg-prop;
background-image: var(--public-default-svg);
}
%with-public-default-mask {
@extend %with-mask, %public-default-svg-prop;
-webkit-mask-image: var(--public-default-svg);
mask-image: var(--public-default-svg);
}
%with-public-locked-icon {
@extend %with-icon, %public-locked-svg-prop;
background-image: var(--public-locked-svg);
}
%with-public-locked-mask {
@extend %with-mask, %public-locked-svg-prop;
-webkit-mask-image: var(--public-locked-svg);
mask-image: var(--public-locked-svg);
}
%with-queue-icon {
@extend %with-icon, %queue-svg-prop;
background-image: var(--queue-svg);
}
%with-queue-mask {
@extend %with-mask, %queue-svg-prop;
-webkit-mask-image: var(--queue-svg);
mask-image: var(--queue-svg);
}
%with-radio-button-checked-icon {
@extend %with-icon, %radio-button-checked-svg-prop;
background-image: var(--radio-button-checked-svg);
}
%with-radio-button-checked-mask {
@extend %with-mask, %radio-button-checked-svg-prop;
-webkit-mask-image: var(--radio-button-checked-svg);
mask-image: var(--radio-button-checked-svg);
}
%with-radio-button-unchecked-icon {
@extend %with-icon, %radio-button-unchecked-svg-prop;
background-image: var(--radio-button-unchecked-svg);
}
%with-radio-button-unchecked-mask {
@extend %with-mask, %radio-button-unchecked-svg-prop;
-webkit-mask-image: var(--radio-button-unchecked-svg);
mask-image: var(--radio-button-unchecked-svg);
}
%with-random-icon {
@extend %with-icon, %random-svg-prop;
background-image: var(--random-svg);
}
%with-random-mask {
@extend %with-mask, %random-svg-prop;
-webkit-mask-image: var(--random-svg);
mask-image: var(--random-svg);
}
ui: Discovery Chain (#6746) * Add data layer for discovery chain (model/adapter/serializer/repo) * Add routing plus template for routing tab * Add extra deps - consul-api-double upgrade plus ngraph for graphing * Add discovery-chain and related components and helpers: 1. discovery-chain to orchestrate/view controller 2. route-card, splitter-card, resolver card to represent the 3 different node types. 3. route-match helper for easy formatting of route rules 4. dom-position to figure out where things are in order to draw lines 5. svg-curve, simple wrapper around svg's <path d=""> attribute format. 6. data-structs service. This isn't super required but we are using other data-structures provided by other third party npm modules in other yet to be merged PRs. All of these types of things will live here for easy access/injection/changability 7. Some additions to our css-var 'polyfill' for a couple of extra needed rules * Related CSS for discovery chain 1. We add a %card base component here, eventually this will go into our base folder and %stats-card will also use it for a base component. 2. New icon for failovers * ui: Discovery Chain Continued (#6939) 1. Add in the things we use for the animations 2 Use IntersectionObserver so we know when the tab is visible, otherwise the dom-position helper won't work as the dom elements don't have any display. 3. Add some base work for animations and use them a little 4. Try to detect if a resolver is a redirect. Right now this works for datacenters and namespaces, but it can't work for services and subsets - we are awaiting backend support for doing this properly. 5. Add a fake 'this service has no routes' route that says 'Default' 6. redirect icon 7. Add CSS.escape polyfill for Edge
2019-12-17 19:27:28 +00:00
%with-redirect-icon {
@extend %with-icon, %redirect-svg-prop;
background-image: var(--redirect-svg);
ui: Discovery Chain (#6746) * Add data layer for discovery chain (model/adapter/serializer/repo) * Add routing plus template for routing tab * Add extra deps - consul-api-double upgrade plus ngraph for graphing * Add discovery-chain and related components and helpers: 1. discovery-chain to orchestrate/view controller 2. route-card, splitter-card, resolver card to represent the 3 different node types. 3. route-match helper for easy formatting of route rules 4. dom-position to figure out where things are in order to draw lines 5. svg-curve, simple wrapper around svg's <path d=""> attribute format. 6. data-structs service. This isn't super required but we are using other data-structures provided by other third party npm modules in other yet to be merged PRs. All of these types of things will live here for easy access/injection/changability 7. Some additions to our css-var 'polyfill' for a couple of extra needed rules * Related CSS for discovery chain 1. We add a %card base component here, eventually this will go into our base folder and %stats-card will also use it for a base component. 2. New icon for failovers * ui: Discovery Chain Continued (#6939) 1. Add in the things we use for the animations 2 Use IntersectionObserver so we know when the tab is visible, otherwise the dom-position helper won't work as the dom elements don't have any display. 3. Add some base work for animations and use them a little 4. Try to detect if a resolver is a redirect. Right now this works for datacenters and namespaces, but it can't work for services and subsets - we are awaiting backend support for doing this properly. 5. Add a fake 'this service has no routes' route that says 'Default' 6. redirect icon 7. Add CSS.escape polyfill for Edge
2019-12-17 19:27:28 +00:00
}
%with-redirect-mask {
@extend %with-mask, %redirect-svg-prop;
-webkit-mask-image: var(--redirect-svg);
mask-image: var(--redirect-svg);
}
%with-refresh-alert-icon {
@extend %with-icon, %refresh-alert-svg-prop;
background-image: var(--refresh-alert-svg);
}
%with-refresh-alert-mask {
@extend %with-mask, %refresh-alert-svg-prop;
-webkit-mask-image: var(--refresh-alert-svg);
mask-image: var(--refresh-alert-svg);
}
ui: Discovery Chain (#6746) * Add data layer for discovery chain (model/adapter/serializer/repo) * Add routing plus template for routing tab * Add extra deps - consul-api-double upgrade plus ngraph for graphing * Add discovery-chain and related components and helpers: 1. discovery-chain to orchestrate/view controller 2. route-card, splitter-card, resolver card to represent the 3 different node types. 3. route-match helper for easy formatting of route rules 4. dom-position to figure out where things are in order to draw lines 5. svg-curve, simple wrapper around svg's <path d=""> attribute format. 6. data-structs service. This isn't super required but we are using other data-structures provided by other third party npm modules in other yet to be merged PRs. All of these types of things will live here for easy access/injection/changability 7. Some additions to our css-var 'polyfill' for a couple of extra needed rules * Related CSS for discovery chain 1. We add a %card base component here, eventually this will go into our base folder and %stats-card will also use it for a base component. 2. New icon for failovers * ui: Discovery Chain Continued (#6939) 1. Add in the things we use for the animations 2 Use IntersectionObserver so we know when the tab is visible, otherwise the dom-position helper won't work as the dom elements don't have any display. 3. Add some base work for animations and use them a little 4. Try to detect if a resolver is a redirect. Right now this works for datacenters and namespaces, but it can't work for services and subsets - we are awaiting backend support for doing this properly. 5. Add a fake 'this service has no routes' route that says 'Default' 6. redirect icon 7. Add CSS.escape polyfill for Edge
2019-12-17 19:27:28 +00:00
%with-refresh-default-icon {
@extend %with-icon, %refresh-default-svg-prop;
background-image: var(--refresh-default-svg);
}
%with-refresh-default-mask {
@extend %with-mask, %refresh-default-svg-prop;
-webkit-mask-image: var(--refresh-default-svg);
mask-image: var(--refresh-default-svg);
}
%with-remix-icon {
@extend %with-icon, %remix-svg-prop;
background-image: var(--remix-svg);
}
%with-remix-mask {
@extend %with-mask, %remix-svg-prop;
-webkit-mask-image: var(--remix-svg);
mask-image: var(--remix-svg);
}
%with-ribbon-icon {
@extend %with-icon, %ribbon-svg-prop;
background-image: var(--ribbon-svg);
}
%with-ribbon-mask {
@extend %with-mask, %ribbon-svg-prop;
-webkit-mask-image: var(--ribbon-svg);
mask-image: var(--ribbon-svg);
}
%with-run-icon {
@extend %with-icon, %run-svg-prop;
background-image: var(--run-svg);
}
%with-run-mask {
@extend %with-mask, %run-svg-prop;
-webkit-mask-image: var(--run-svg);
mask-image: var(--run-svg);
}
2019-08-12 15:40:26 +00:00
%with-search-color-icon {
@extend %with-icon, %search-color-svg-prop;
background-image: var(--search-color-svg);
2019-08-12 15:40:26 +00:00
}
%with-search-color-mask {
@extend %with-mask, %search-color-svg-prop;
-webkit-mask-image: var(--search-color-svg);
mask-image: var(--search-color-svg);
}
%with-search-icon {
@extend %with-icon, %search-svg-prop;
background-image: var(--search-svg);
}
%with-search-mask {
@extend %with-mask, %search-svg-prop;
-webkit-mask-image: var(--search-svg);
mask-image: var(--search-svg);
}
%with-settings-icon {
@extend %with-icon, %settings-svg-prop;
background-image: var(--settings-svg);
}
%with-settings-mask {
@extend %with-mask, %settings-svg-prop;
-webkit-mask-image: var(--settings-svg);
mask-image: var(--settings-svg);
}
2021-07-12 13:28:01 +00:00
%with-socket-icon {
@extend %with-icon, %socket-svg-prop;
background-image: var(--socket-svg);
}
%with-socket-mask {
@extend %with-mask, %socket-svg-prop;
-webkit-mask-image: var(--socket-svg);
mask-image: var(--socket-svg);
}
%with-sort-icon {
@extend %with-icon, %sort-svg-prop;
background-image: var(--sort-svg);
}
%with-sort-mask {
@extend %with-mask, %sort-svg-prop;
-webkit-mask-image: var(--sort-svg);
mask-image: var(--sort-svg);
}
%with-source-file-icon {
@extend %with-icon, %source-file-svg-prop;
background-image: var(--source-file-svg);
}
%with-source-file-mask {
@extend %with-mask, %source-file-svg-prop;
-webkit-mask-image: var(--source-file-svg);
mask-image: var(--source-file-svg);
}
%with-star-fill-icon {
@extend %with-icon, %star-fill-svg-prop;
background-image: var(--star-fill-svg);
}
%with-star-fill-mask {
@extend %with-mask, %star-fill-svg-prop;
-webkit-mask-image: var(--star-fill-svg);
mask-image: var(--star-fill-svg);
}
%with-star-outline-icon {
@extend %with-icon, %star-outline-svg-prop;
background-image: var(--star-outline-svg);
}
%with-star-outline-mask {
@extend %with-mask, %star-outline-svg-prop;
-webkit-mask-image: var(--star-outline-svg);
mask-image: var(--star-outline-svg);
}
%with-sub-left-icon {
@extend %with-icon, %sub-left-svg-prop;
background-image: var(--sub-left-svg);
}
%with-sub-left-mask {
@extend %with-mask, %sub-left-svg-prop;
-webkit-mask-image: var(--sub-left-svg);
mask-image: var(--sub-left-svg);
}
%with-sub-right-icon {
@extend %with-icon, %sub-right-svg-prop;
background-image: var(--sub-right-svg);
}
%with-sub-right-mask {
@extend %with-mask, %sub-right-svg-prop;
-webkit-mask-image: var(--sub-right-svg);
mask-image: var(--sub-right-svg);
}
%with-support-icon {
@extend %with-icon, %support-svg-prop;
background-image: var(--support-svg);
}
%with-support-mask {
@extend %with-mask, %support-svg-prop;
-webkit-mask-image: var(--support-svg);
mask-image: var(--support-svg);
}
%with-swap-horizontal-icon {
@extend %with-icon, %swap-horizontal-svg-prop;
background-image: var(--swap-horizontal-svg);
}
%with-swap-horizontal-mask {
@extend %with-mask, %swap-horizontal-svg-prop;
-webkit-mask-image: var(--swap-horizontal-svg);
mask-image: var(--swap-horizontal-svg);
}
%with-swap-vertical-icon {
@extend %with-icon, %swap-vertical-svg-prop;
background-image: var(--swap-vertical-svg);
}
%with-swap-vertical-mask {
@extend %with-mask, %swap-vertical-svg-prop;
-webkit-mask-image: var(--swap-vertical-svg);
mask-image: var(--swap-vertical-svg);
}
%with-tag-icon {
@extend %with-icon, %tag-svg-prop;
background-image: var(--tag-svg);
}
%with-tag-mask {
@extend %with-mask, %tag-svg-prop;
-webkit-mask-image: var(--tag-svg);
mask-image: var(--tag-svg);
}
%with-trash-icon {
@extend %with-icon, %trash-svg-prop;
background-image: var(--trash-svg);
}
%with-trash-mask {
@extend %with-mask, %trash-svg-prop;
-webkit-mask-image: var(--trash-svg);
mask-image: var(--trash-svg);
}
%with-tune-icon {
@extend %with-icon, %tune-svg-prop;
background-image: var(--tune-svg);
}
%with-tune-mask {
@extend %with-mask, %tune-svg-prop;
-webkit-mask-image: var(--tune-svg);
mask-image: var(--tune-svg);
}
%with-unfold-less-icon {
@extend %with-icon, %unfold-less-svg-prop;
background-image: var(--unfold-less-svg);
}
%with-unfold-less-mask {
@extend %with-mask, %unfold-less-svg-prop;
-webkit-mask-image: var(--unfold-less-svg);
mask-image: var(--unfold-less-svg);
}
%with-unfold-more-icon {
@extend %with-icon, %unfold-more-svg-prop;
background-image: var(--unfold-more-svg);
}
%with-unfold-more-mask {
@extend %with-mask, %unfold-more-svg-prop;
-webkit-mask-image: var(--unfold-more-svg);
mask-image: var(--unfold-more-svg);
}
%with-upload-icon {
@extend %with-icon, %upload-svg-prop;
background-image: var(--upload-svg);
}
%with-upload-mask {
@extend %with-mask, %upload-svg-prop;
-webkit-mask-image: var(--upload-svg);
mask-image: var(--upload-svg);
}
%with-user-add-icon {
@extend %with-icon, %user-add-svg-prop;
background-image: var(--user-add-svg);
}
%with-user-add-mask {
@extend %with-mask, %user-add-svg-prop;
-webkit-mask-image: var(--user-add-svg);
mask-image: var(--user-add-svg);
}
%with-user-organization-icon {
@extend %with-icon, %user-organization-svg-prop;
background-image: var(--user-organization-svg);
}
%with-user-organization-mask {
@extend %with-mask, %user-organization-svg-prop;
-webkit-mask-image: var(--user-organization-svg);
mask-image: var(--user-organization-svg);
}
%with-user-plain-icon {
@extend %with-icon, %user-plain-svg-prop;
background-image: var(--user-plain-svg);
}
%with-user-plain-mask {
@extend %with-mask, %user-plain-svg-prop;
-webkit-mask-image: var(--user-plain-svg);
mask-image: var(--user-plain-svg);
}
%with-user-square-fill-icon {
@extend %with-icon, %user-square-fill-svg-prop;
background-image: var(--user-square-fill-svg);
}
%with-user-square-fill-mask {
@extend %with-mask, %user-square-fill-svg-prop;
-webkit-mask-image: var(--user-square-fill-svg);
mask-image: var(--user-square-fill-svg);
}
%with-user-square-outline-icon {
@extend %with-icon, %user-square-outline-svg-prop;
background-image: var(--user-square-outline-svg);
}
%with-user-square-outline-mask {
@extend %with-mask, %user-square-outline-svg-prop;
-webkit-mask-image: var(--user-square-outline-svg);
mask-image: var(--user-square-outline-svg);
}
%with-user-team-icon {
@extend %with-icon, %user-team-svg-prop;
background-image: var(--user-team-svg);
}
%with-user-team-mask {
@extend %with-mask, %user-team-svg-prop;
-webkit-mask-image: var(--user-team-svg);
mask-image: var(--user-team-svg);
}
%with-visibility-hide-icon {
@extend %with-icon, %visibility-hide-svg-prop;
background-image: var(--visibility-hide-svg);
}
%with-visibility-hide-mask {
@extend %with-mask, %visibility-hide-svg-prop;
-webkit-mask-image: var(--visibility-hide-svg);
mask-image: var(--visibility-hide-svg);
}
%with-visibility-show-icon {
@extend %with-icon, %visibility-show-svg-prop;
background-image: var(--visibility-show-svg);
}
%with-visibility-show-mask {
@extend %with-mask, %visibility-show-svg-prop;
-webkit-mask-image: var(--visibility-show-svg);
mask-image: var(--visibility-show-svg);
}
%with-webhook-icon {
@extend %with-icon, %webhook-svg-prop;
background-image: var(--webhook-svg);
}
%with-webhook-mask {
@extend %with-mask, %webhook-svg-prop;
-webkit-mask-image: var(--webhook-svg);
mask-image: var(--webhook-svg);
}