luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

Merge pull request #12738 from hashicorp/ui/bugfix/safari-icons 

ui: Fixup icons not displaying in Safari
This commit is contained in:
Evan Rowe 2022-04-15 14:00:07 -07:00 committed by GitHub
parent 449a0f855c 42a0f204ac
commit 59d0ec3be3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/packages/consul-ui/app/components/breadcrumbs/skin.scss
View File

@ -8,6 +8,7 @@
} }
%crumbs::before { %crumbs::before {
text-decoration: none; text-decoration: none;
background-color: var(--transparent);
} }
%breadcrumb-milestone::before { %breadcrumb-milestone::before {
@extend %with-chevron-left-mask, %as-pseudo; @extend %with-chevron-left-mask, %as-pseudo;

1
ui/packages/consul-ui/app/components/csv-list/index.scss
View File

@ -14,4 +14,5 @@
content: var(--csv-list-separator); content: var(--csv-list-separator);
vertical-align: initial; vertical-align: initial;
margin-right: 0.3em; margin-right: 0.3em;
background-color: var(--transparent);
} }

2
ui/packages/consul-ui/app/components/empty-state/skin.scss
View File

@ -23,7 +23,7 @@
%empty-state[class*='status-'] header::before { %empty-state[class*='status-'] header::before {
@extend %as-pseudo; @extend %as-pseudo;
} }
%empty-state header::before { %empty-state[class*='status-'] header::before {
@extend %with-alert-circle-outline-mask; @extend %with-alert-circle-outline-mask;
} }
%empty-state.status-404 header::before { %empty-state.status-404 header::before {

1
ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
View File

@ -47,6 +47,7 @@
display: block; display: block;
margin-top: -0.5rem; margin-top: -0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background-color: var(--transparent);
} }
%main-nav-vertical-popover-menu-trigger { %main-nav-vertical-popover-menu-trigger {
border: var(--decor-border-100); border: var(--decor-border-100);

1
ui/packages/consul-ui/app/components/secret-button/layout.scss
View File

@ -17,6 +17,7 @@
display: inline; display: inline;
visibility: visible; visibility: visible;
content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■'; content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
background-color: var(--transparent);
} }
%secret-button input:checked ~ em::before { %secret-button input:checked ~ em::before {
display: none; display: none;

2
ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
View File

@ -6,7 +6,7 @@
@extend %as-pseudo; @extend %as-pseudo;
width: 12px; width: 12px;
height: 12px; height: 12px;
background: white; background-color: rgb(var(--tone-gray-000));
border-top: 1px solid rgb(var(--tone-gray-300)); border-top: 1px solid rgb(var(--tone-gray-300));
border-right: 1px solid rgb(var(--tone-gray-300)); border-right: 1px solid rgb(var(--tone-gray-300));
transform: rotate(-45deg); transform: rotate(-45deg);

5
ui/packages/consul-ui/app/components/tooltip/index.scss
View File

@ -45,6 +45,7 @@
&::before { &::before {
border-color: var(--transparent); border-color: var(--transparent);
border-style: solid; border-style: solid;
background-color: var(--transparent);
} }
} }
@ -52,23 +53,27 @@
&::before { &::before {
border-width: var(--size) var(--size) 0; border-width: var(--size) var(--size) 0;
border-top-color: initial; border-top-color: initial;
background-color: var(--transparent);
} }
} }
%tooltip-tail-bottom { %tooltip-tail-bottom {
&::before { &::before {
border-width: 0 var(--size) var(--size); border-width: 0 var(--size) var(--size);
border-bottom-color: initial; border-bottom-color: initial;
background-color: var(--transparent);
} }
} }
%tooltip-tail-left { %tooltip-tail-left {
&::before { &::before {
border-width: var(--size) 0 var(--size) var(--size); border-width: var(--size) 0 var(--size) var(--size);
border-left-color: initial; border-left-color: initial;
background-color: var(--transparent);
} }
} }
%tooltip-tail-right { %tooltip-tail-right {
&::before { &::before {
border-width: var(--size) var(--size) var(--size) 0; border-width: var(--size) var(--size) var(--size) 0;
border-right-color: initial; border-right-color: initial;
background-color: var(--transparent);
} }
} }

4
ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss
View File

@ -8,12 +8,12 @@
*::before { *::before {
animation-name: var(--icon-name-start, var(--icon-name)), animation-name: var(--icon-name-start, var(--icon-name)),
var(--icon-size-start, var(--icon-size, icon-000)); var(--icon-size-start, var(--icon-size, icon-000));
background-color: var(--icon-color-start, var(--icon-color)); background-color: var(--icon-color-start, var(--icon-color, currentColor));
} }
*::after { *::after {
animation-name: var(--icon-name-end, var(--icon-name)), animation-name: var(--icon-name-end, var(--icon-name)),
var(--icon-size-end, var(--icon-size, icon-000)); var(--icon-size-end, var(--icon-size, icon-000));
background-color: var(--icon-color-end, var(--icon-color)); background-color: var(--icon-color-end, var(--icon-color, currentColor));
} }
[style*='--icon-color-start']::before { [style*='--icon-color-start']::before {