This commit is contained in:
Jan Faracik committed 2025-03-20 10:22:07 +00:00
1 parent 4e5280778f
commit ce11fd1fb3
8 files changed
+45 -20

No files matched your search

@@ -13,6 +13,7 @@ function dropdown() {
appendTo: document.body,
offset: [0, 0],
animation: "dropdown",
duration: 250,
onShow: (instance) => {
const referenceParent = instance.reference.parentNode;
+1
View File
@@ -5,6 +5,7 @@ const TOOLTIP_BASE = {
arrow: false,
theme: "tooltip",
animation: "tooltip",
duration: 250,
};
/**
+3 -1
View File
@@ -94,7 +94,9 @@
&:not(:disabled) {
&:hover,
&:focus-visible {
&:focus-visible,
&[aria-describedby],
&[aria-expanded="true"] {
&::before {
background-color: var(--item-background--hover);
}
+4 -4
View File
@@ -137,7 +137,7 @@ $semantics: (
--jenkins-border-width: 1.5px;
--jenkins-border-color: color-mix(
in sRGB,
var(--text-color-secondary) 12%,
var(--text-color-secondary) 15%,
var(--card-background)
);
--jenkins-border-color--subtle: color-mix(
@@ -212,14 +212,14 @@ $semantics: (
}
// Tooltips
--tooltip-backdrop-filter: saturate(2) blur(20px);
--tooltip-backdrop-filter: contrast(1.1) saturate(2) blur(20px);
--tooltip-color: var(--text-color);
--tooltip-box-shadow:
0 0 8px 2px rgb(0 0 50 / 0.05), var(--jenkins-border--subtle-shadow),
0 10px 50px rgb(0 0 20 / 0.1);
0 10px 50px rgb(0 0 20 / 0.1), inset 0 -1px 2px rgb(255 255 255 / 0.025);
// Dropdowns
--dropdown-backdrop-filter: saturate(1.5) blur(20px);
--dropdown-backdrop-filter: contrast(1.1) saturate(2) blur(20px);
--dropdown-box-shadow:
var(--jenkins-border--subtle-shadow), 0 10px 30px rgb(0 0 20 / 0.1),
0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025);
+7 -1
View File
@@ -63,7 +63,13 @@
.jenkins-button--tertiary {
--button-background: transparent !important;
&:not(:hover, &:active, &:focus) {
&:not(
:hover,
&:active,
&:focus,
&[aria-describedby],
&[aria-expanded="true"]
) {
&::before {
border-color: transparent;
}
+19 -6
View File
@@ -7,7 +7,7 @@ $dropdown-padding: 0.375rem;
border-radius: $dropdown-border-radius;
box-shadow: var(--dropdown-box-shadow);
outline: none !important;
background: color-mix(in sRGB, var(--background) 85%, transparent);
background: color-mix(in sRGB, var(--card-background) 85%, transparent);
backdrop-filter: var(--dropdown-backdrop-filter);
max-width: unset !important;
max-height: 75vh;
@@ -25,17 +25,30 @@ $dropdown-padding: 0.375rem;
}
.tippy-box[data-animation="dropdown"][data-state="hidden"] {
$translate: 5px;
$scale: 0.99;
opacity: 0;
transform: scale(0.975);
transform: scale($scale);
&[data-placement^="top"] {
transform-origin: bottom;
transform: translateY(10px) scale(0.975);
transform: translateY($translate) scale($scale);
}
&[data-placement^="bottom"] {
transform-origin: top;
transform: translateY(-10px) scale(0.975);
transform: translateY(-$translate) scale($scale);
}
&[data-placement^="left"] {
transform-origin: right;
transform: translateX($translate) scale($scale);
}
&[data-placement^="right"] {
transform-origin: left;
transform: translateX(-$translate) scale($scale);
}
}
@@ -203,11 +216,11 @@ $dropdown-padding: 0.375rem;
&__chevron {
position: absolute;
top: 0;
right: 0.125rem;
right: 0.1875rem;
bottom: 0;
background: var(--text-color-secondary);
width: 1rem;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='40' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
+9 -7
View File
@@ -8,7 +8,7 @@
max-width: min(50vw, 1000px) !important;
white-space: pre-line;
z-index: 0;
background: color-mix(in sRGB, var(--background) 85%, transparent);
background: color-mix(in sRGB, var(--card-background) 85%, transparent);
backdrop-filter: var(--tooltip-backdrop-filter);
.tippy-content {
@@ -67,17 +67,20 @@
}
.tippy-box[data-animation="tooltip"][data-state="hidden"] {
$translate: 2px;
$scale: 0.99;
opacity: 0;
transform: scale(0.995);
transform: scale($scale);
&[data-placement^="top"] {
transform-origin: bottom;
transform: translateY(2px) scale(0.995);
transform: translateY($translate) scale($scale);
}
&[data-placement^="bottom"] {
transform-origin: top;
transform: translateY(-2px) scale(0.995);
transform: translateY(-$translate) scale($scale);
}
}
@@ -100,9 +103,8 @@
content: "";
position: absolute;
inset: 0;
border-radius: 0.375rem;
border: var(--jenkins-border-width) solid var(--text-color-secondary);
opacity: 0.2;
border-radius: 0.3rem;
border: var(--jenkins-border-width) solid var(--input-border);
}
svg {
+1 -1
View File
@@ -210,7 +210,7 @@
height: 1px; // Setting to 0 caused the items not to render initially in Chrome
opacity: 0;
transition: var(--standard-transition);
background: color-mix(in sRGB, var(--background) 85%, transparent);
background: color-mix(in sRGB, var(--card-background) 85%, transparent);
backdrop-filter: var(--dropdown-backdrop-filter);
visibility: collapse;
scale: 95%;