root
/
jenkins
mirror of https://github.com/jenkinsci/jenkins.git
1
0
Fork 0
Code Issues Actions 5 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;
outline: none;
margin: 0;
padding: 0.5rem 0.8rem;
padding: 0.5rem 0.85rem;
font-size: 0.8rem;
font-weight: 500;
text-decoration: none !important;
background: transparent;
color: var(--text-color) !important;
z-index: 0;
border-radius: 6px;
border-radius: 10px;
cursor: pointer;
min-height: 36px;
white-space: nowrap;
@ -39,7 +39,8 @@
}
&::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 {
@ -55,13 +56,14 @@
}
&::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 {
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
}
}
@ -78,10 +80,6 @@
opacity: 1;
}
&::after {
opacity: 0.2;
}
&:hover {
&::before {
opacity: 0.9;
@ -93,6 +91,9 @@
&::before {
opacity: 0.8;
}
&::after {
opacity: 0.3;
}
}
}
@ -100,36 +101,8 @@
&::before {
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 {
display: flex;
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 {
display: flex;
align-items: center;
@ -22,7 +24,7 @@
content: "";
position: absolute;
inset: 0;
border-radius: 8px;
border-radius: 12px;
background: currentColor;
opacity: 0;
transition: var(--standard-transition);
@ -42,6 +44,7 @@
padding: 0!important;
min-width: 0!important;
aspect-ratio: 1;
height: @min-button-size;
}
}
@ -51,9 +54,8 @@
align-items: center;
justify-content: center;
aspect-ratio: 1;
height: 36px;
width: 36px;
border-radius: 6px;
height: @min-button-size;
border-radius: 10px;
font-weight: var(--btn-link-font-weight);
font-size: var(--btn-font-size);
@ -61,7 +63,7 @@
content: "";
position: absolute;
inset: 0;
border-radius: 6px;
border-radius: inherit;
background: currentColor;
opacity: 0.05;
}