Ändere Tooltip-Hintergrund und Pfeilgröße
This commit is contained in:
1 parent
519ed6b9c1
commit
4edff9e222
3 files changed
+18
-18
No files matched your search
@@ -64,7 +64,7 @@
|
||||
--surface-menu-panel-portal: var(--color-light-grey);
|
||||
--surface-help-icon: var(--color-medium-grey);
|
||||
--surface-help-panel: var(--color-light-grey);
|
||||
--surface-tooltip: var(--color-light-grey);
|
||||
--surface-tooltip: var(--color-white);
|
||||
--surface-pulldown-panel: var(--color-light-grey);
|
||||
--surface-activatable-remove: var(--surface-control-default);
|
||||
--surface-slider-track: var(--color-medium-grey);
|
||||
|
||||
@@ -1295,33 +1295,33 @@
|
||||
}
|
||||
|
||||
.sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel::before {
|
||||
top: calc(var(--spacing-small) * -1);
|
||||
top: calc(var(--spacing-small) * -2);
|
||||
left: 50%;
|
||||
border-width: 0 var(--spacing-small) var(--spacing-small);
|
||||
border-width: 0 calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2);
|
||||
border-color: transparent transparent var(--surface-tooltip);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel::before {
|
||||
bottom: calc(var(--spacing-small) * -1);
|
||||
bottom: calc(var(--spacing-small) * -2);
|
||||
left: 50%;
|
||||
border-width: var(--spacing-small) var(--spacing-small) 0;
|
||||
border-width: calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) 0;
|
||||
border-color: var(--surface-tooltip) transparent transparent;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel::before {
|
||||
top: 50%;
|
||||
right: calc(var(--spacing-small) * -1);
|
||||
border-width: var(--spacing-small) 0 var(--spacing-small) var(--spacing-small);
|
||||
right: calc(var(--spacing-small) * -2);
|
||||
border-width: calc(var(--spacing-small) * 2) 0 calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2);
|
||||
border-color: transparent transparent transparent var(--surface-tooltip);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel::before {
|
||||
top: 50%;
|
||||
left: calc(var(--spacing-small) * -1);
|
||||
border-width: var(--spacing-small) var(--spacing-small) var(--spacing-small) 0;
|
||||
left: calc(var(--spacing-small) * -2);
|
||||
border-width: calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) 0;
|
||||
border-color: transparent var(--surface-tooltip) transparent transparent;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@@ -1336,33 +1336,33 @@
|
||||
}
|
||||
|
||||
.sg-tooltip-panel[data-tooltip-portal="true"][data-tooltip-placement="bottom"]::before {
|
||||
top: calc(var(--spacing-small) * -1);
|
||||
top: calc(var(--spacing-small) * -2);
|
||||
left: var(--tooltip-arrow-offset);
|
||||
border-width: 0 var(--spacing-small) var(--spacing-small);
|
||||
border-width: 0 calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2);
|
||||
border-color: transparent transparent var(--surface-tooltip);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.sg-tooltip-panel[data-tooltip-portal="true"][data-tooltip-placement="top"]::before {
|
||||
bottom: calc(var(--spacing-small) * -1);
|
||||
bottom: calc(var(--spacing-small) * -2);
|
||||
left: var(--tooltip-arrow-offset);
|
||||
border-width: var(--spacing-small) var(--spacing-small) 0;
|
||||
border-width: calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) 0;
|
||||
border-color: var(--surface-tooltip) transparent transparent;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.sg-tooltip-panel[data-tooltip-portal="true"][data-tooltip-placement="left"]::before {
|
||||
top: var(--tooltip-arrow-offset);
|
||||
right: calc(var(--spacing-small) * -1);
|
||||
border-width: var(--spacing-small) 0 var(--spacing-small) var(--spacing-small);
|
||||
right: calc(var(--spacing-small) * -2);
|
||||
border-width: calc(var(--spacing-small) * 2) 0 calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2);
|
||||
border-color: transparent transparent transparent var(--surface-tooltip);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.sg-tooltip-panel[data-tooltip-portal="true"][data-tooltip-placement="right"]::before {
|
||||
top: var(--tooltip-arrow-offset);
|
||||
left: calc(var(--spacing-small) * -1);
|
||||
border-width: var(--spacing-small) var(--spacing-small) var(--spacing-small) 0;
|
||||
left: calc(var(--spacing-small) * -2);
|
||||
border-width: calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) 0;
|
||||
border-color: transparent var(--surface-tooltip) transparent transparent;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user