root
/
jenkins
mirror of https://github.com/jenkinsci/jenkins.git
1
0
Fork 0
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Update button styling

This commit is contained in:
Jan Faracik 2022-06-04 00:15:05 +01:00
parent 45c9d078be
commit 0c8d538242
2 changed files with 18 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
war/src/main/less/modules/buttons.less
View File

@ -7,14 +7,14 @@
border: none; border: none;
outline: none; outline: none;
margin: 0; margin: 0;
padding: 0.5rem 0.8rem; padding: 0.5rem 0.85rem;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
text-decoration: none !important; text-decoration: none !important;
background: transparent; background: transparent;
color: var(--text-color) !important; color: var(--text-color) !important;
z-index: 0; z-index: 0;
border-radius: 6px; border-radius: 10px;
cursor: pointer; cursor: pointer;
min-height: 36px; min-height: 36px;
white-space: nowrap; white-space: nowrap;
@ -39,7 +39,8 @@
} }
&::after { &::after {
box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 10px transparent; opacity: 0;
box-shadow: 0 0 0 10px currentColor;
} }
&:hover { &:hover {
@ -55,13 +56,14 @@
} }
&::after { &::after {
box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 5px currentColor; opacity: 0.075;
box-shadow: 0 0 0 5px currentColor;
} }
} }
svg { svg {
width: 16px; width: 1rem;
height: 16px; height: 1rem;
} }
} }
@ -78,10 +80,6 @@
opacity: 1; opacity: 1;
} }
&::after {
opacity: 0.2;
}
&:hover { &:hover {
&::before { &::before {
opacity: 0.9; opacity: 0.9;
@ -93,6 +91,9 @@
&::before { &::before {
opacity: 0.8; opacity: 0.8;
} }
&::after {
opacity: 0.3;
}
} }
} }
@ -100,36 +101,8 @@
&::before { &::before {
opacity: 0; opacity: 0;
} }
&::after {
color: transparent;
box-shadow: inset 0 -1px 0 transparent, 0 0 0 10px transparent;
}
&:hover,
&:active,
&:focus {
&::after {
color: currentColor;
}
}
} }
@variants: {
destructive: var(--red);
}
each(@variants, {
.jenkins-button--@{key} {
color: @value !important;
&::after {
background: rgba(125, 125, 125, 0.25);
opacity: 0.1;
}
}
});
.jenkins-buttons-row { .jenkins-buttons-row {
display: flex; display: flex;
align-items: center; align-items: center;

12
war/src/main/less/modules/icon-size.less
View File

@ -1,3 +1,5 @@
@min-button-size: 36px;
.jenkins-icon-size { .jenkins-icon-size {
display: flex; display: flex;
align-items: center; align-items: center;
@ -22,7 +24,7 @@
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 8px; border-radius: 12px;
background: currentColor; background: currentColor;
opacity: 0; opacity: 0;
transition: var(--standard-transition); transition: var(--standard-transition);
@ -42,6 +44,7 @@
padding: 0!important; padding: 0!important;
min-width: 0!important; min-width: 0!important;
aspect-ratio: 1; aspect-ratio: 1;
height: @min-button-size;
} }
} }
@ -51,9 +54,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
aspect-ratio: 1; aspect-ratio: 1;
height: 36px; height: @min-button-size;
width: 36px; border-radius: 10px;
border-radius: 6px;
font-weight: var(--btn-link-font-weight); font-weight: var(--btn-link-font-weight);
font-size: var(--btn-font-size); font-size: var(--btn-font-size);
@ -61,7 +63,7 @@
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 6px; border-radius: inherit;
background: currentColor; background: currentColor;
opacity: 0.05; opacity: 0.05;
} }