mirror of
https://github.com/jenkinsci/jenkins.git
synced 2026-10-26 19:15:09 +00:00
Init
This commit is contained in:
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;
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ const TOOLTIP_BASE = {
|
||||
arrow: false,
|
||||
theme: "tooltip",
|
||||
animation: "tooltip",
|
||||
duration: 250,
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -94,7 +94,9 @@
|
||||
|
||||
&:not(:disabled) {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
&:focus-visible,
|
||||
&[aria-describedby],
|
||||
&[aria-expanded="true"] {
|
||||
&::before {
|
||||
background-color: var(--item-background--hover);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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%;
|
||||
|
||||
Reference in new issue
Block a user