mirror of
https://github.com/jenkinsci/jenkins.git
synced 2026-10-26 19:15:09 +00:00
Update buttons to use new classes on the dashboard (#6799)
Co-authored-by: Alexander Brandes <mc.cache@web.de>
This commit is contained in:
Jan FaracikandAlexander Brandes authored and GitHub committed
1 parent
90230f6aff
commit
cb232e8a7c
17 files changed
+572
-527
No files matched your search
@@ -25,23 +25,17 @@ THE SOFTWARE.
|
||||
<!-- list of feed links -->
|
||||
<?jelly escape-by-default='true'?>
|
||||
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
|
||||
<div align="right">
|
||||
<a href="rss" class="yui-button link-button">
|
||||
<span class="leading-icon">
|
||||
<l:icon src="symbol-rss" />
|
||||
</span>
|
||||
<div class="jenkins-buttons-row jenkins-buttons-row--invert">
|
||||
<a href="rss" class="jenkins-button jenkins-button--tertiary">
|
||||
<l:icon src="symbol-rss" />
|
||||
<span>${%All}</span>
|
||||
</a>
|
||||
<a href="rss?level=SEVERE" class="yui-button link-button">
|
||||
<span class="leading-icon">
|
||||
<l:icon src="symbol-rss" />
|
||||
</span>
|
||||
<a href="rss?level=SEVERE" class="jenkins-button jenkins-button--tertiary">
|
||||
<l:icon src="symbol-rss" />
|
||||
<span>${%SEVERE}</span>
|
||||
</a>
|
||||
<a href="rss?level=WARNING" class="yui-button link-button">
|
||||
<span class="leading-icon">
|
||||
<l:icon src="symbol-rss" />
|
||||
</span>
|
||||
<a href="rss?level=WARNING" class="jenkins-button jenkins-button--tertiary">
|
||||
<l:icon src="symbol-rss" />
|
||||
<span>${%WARNING}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -110,7 +110,7 @@ THE SOFTWARE.
|
||||
</j:choose>
|
||||
|
||||
<a href="#" onclick="return revokeToken(this)"
|
||||
class="jenkins-button jenkins-button--transparent jenkins-button--destructive token-revoke"
|
||||
class="jenkins-button jenkins-button--tertiary jenkins-button--destructive token-revoke"
|
||||
data-message-if-legacy-revoked="${%RevokedToken}"
|
||||
data-confirm="${%ConfirmRevokeSingle}"
|
||||
data-target-url="${descriptor.descriptorFullUrl}/revoke">
|
||||
@@ -136,7 +136,7 @@ THE SOFTWARE.
|
||||
<div class="controls-container">
|
||||
<l:copyButton text="" clazz="jenkins-hidden" tooltip="${%CopyToken}" iconOnly="true" />
|
||||
<a href="#" onclick="return revokeToken(this)"
|
||||
class="jenkins-button jenkins-button--transparent jenkins-button--destructive token-revoke hidden-button"
|
||||
class="jenkins-button jenkins-button--tertiary jenkins-button--destructive token-revoke hidden-button"
|
||||
data-confirm="${%ConfirmRevokeSingle}"
|
||||
data-target-url="${descriptor.descriptorFullUrl}/revoke">
|
||||
<local:revokeIcon title="${%RevokeToken}" />
|
||||
|
||||
@@ -41,10 +41,8 @@ THE SOFTWARE.
|
||||
|
||||
<l:hasPermission permission="${permission}">
|
||||
<div class="jenkins-buttons-row jenkins-buttons-row--invert">
|
||||
<a class="yui-button link-button" id="description-link" href="editDescription" onclick="return replaceDescription();">
|
||||
<span class="leading-icon">
|
||||
<l:icon src="symbol-edit" />
|
||||
</span>
|
||||
<a class="jenkins-button jenkins-button--tertiary" id="description-link" href="editDescription" onclick="return replaceDescription();">
|
||||
<l:icon src="symbol-edit" />
|
||||
<j:choose>
|
||||
<j:when test="${empty(it.description)}">
|
||||
${%add description}
|
||||
|
||||
@@ -28,16 +28,15 @@ THE SOFTWARE.
|
||||
<div class="jenkins-icon-size">
|
||||
<d:taglib uri="local">
|
||||
<d:tag name="iconSizeLink">
|
||||
<st:nbsp/>
|
||||
<j:choose>
|
||||
<j:when test="${sz==iconSize}">
|
||||
<li class="jenkins-icon-size__items-item">
|
||||
<li class="jenkins-icon-size__items-item" tooltip="${title}">
|
||||
${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
|
||||
</li>
|
||||
</j:when>
|
||||
<j:otherwise>
|
||||
<li>
|
||||
<a class="yui-button link-button" href="${rootURL}/iconSize?${sz}">
|
||||
<a class="jenkins-button jenkins-button--tertiary" href="${rootURL}/iconSize?${sz}" tooltip="${title}">
|
||||
${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -55,8 +54,6 @@ THE SOFTWARE.
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<d:invokeBody />
|
||||
</div>
|
||||
<d:invokeBody />
|
||||
</div>
|
||||
</j:jelly>
|
||||
@@ -26,23 +26,17 @@ THE SOFTWARE.
|
||||
<j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout"
|
||||
xmlns:t="/lib/hudson" xmlns:f="/lib/form">
|
||||
<div id="rss-bar" class="jenkins-buttons-row jenkins-buttons-row--invert">
|
||||
<a href="${rootURL}/legend" class="yui-button link-button rss-bar-legend-link">${%Legend}</a>
|
||||
<a href="rssAll" class="yui-button link-button">
|
||||
<span class="leading-icon">
|
||||
<l:icon src="symbol-rss" />
|
||||
</span>
|
||||
<a href="${rootURL}/legend" class="jenkins-button jenkins-button--tertiary">${%Legend}</a>
|
||||
<a href="rssAll" class="jenkins-button jenkins-button--tertiary">
|
||||
<l:icon src="symbol-rss" />
|
||||
<span>Atom feed ${%for all}</span>
|
||||
</a>
|
||||
<a href="rssFailed" class="yui-button link-button">
|
||||
<span class="leading-icon">
|
||||
<l:icon src="symbol-rss" />
|
||||
</span>
|
||||
<a href="rssFailed" class="jenkins-button jenkins-button--tertiary">
|
||||
<l:icon src="symbol-rss" />
|
||||
<span>Atom feed ${%for failures}</span>
|
||||
</a>
|
||||
<a href="rssLatest" class="yui-button link-button">
|
||||
<span class="leading-icon">
|
||||
<l:icon src="symbol-rss" />
|
||||
</span>
|
||||
<a href="rssLatest" class="jenkins-button jenkins-button--tertiary">
|
||||
<l:icon src="symbol-rss" />
|
||||
<span>Atom feed ${%for just latest builds}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -46,7 +46,7 @@ THE SOFTWARE.
|
||||
</st:documentation>
|
||||
|
||||
<!-- 'copy-button' class is for backwards compatability -->
|
||||
<button class="copy-button jenkins-button ${attrs.iconOnly == 'true' ? 'jenkins-button--transparent' : ''} jenkins-copy-button ${attrs.clazz}"
|
||||
<button class="copy-button jenkins-button ${attrs.iconOnly == 'true' ? 'jenkins-button--tertiary' : ''} jenkins-copy-button ${attrs.clazz}"
|
||||
text="${attrs.text}"
|
||||
message="${attrs.message ?: '%Copied'}"
|
||||
tooltip="${attrs.tooltip ?: '%Copy'}"
|
||||
|
||||
@@ -4,18 +4,22 @@
|
||||
// e.g. .jenkins-!-color-blue, .jenkins-!-color-light-blue, .jenkins-!-color-dark-blue
|
||||
each(@colors, {
|
||||
.jenkins-\!-color-light-@{key} {
|
||||
--color: ~"var(--light-@{key})";
|
||||
color: ~"var(--light-@{key})" !important;
|
||||
}
|
||||
.jenkins-\!-color-@{key} {
|
||||
--color: ~"var(--@{key})";
|
||||
color: ~"var(--@{key})" !important;
|
||||
}
|
||||
.jenkins-\!-color-dark-@{key} {
|
||||
--color: ~"var(--dark-@{key})";
|
||||
color: ~"var(--dark-@{key})" !important;
|
||||
}
|
||||
});
|
||||
|
||||
each(@semantics, {
|
||||
.jenkins-\!-@{key}-color {
|
||||
--color: @value;
|
||||
color: @value !important;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
content: "";
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border-radius: 10px;
|
||||
border-radius: 0.66rem;
|
||||
transition: var(--standard-transition);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -87,7 +87,8 @@
|
||||
|
||||
&:focus-visible {
|
||||
&::after {
|
||||
box-shadow: 0 0 0 0.33rem var(--text-color);
|
||||
box-shadow: 0 0 0 0.33rem var(--text-color) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -313,10 +313,16 @@
|
||||
--call-to-action-link-color: #000;
|
||||
--call-to-action-text-color: var(--alert-info-text-color);
|
||||
|
||||
// Default button
|
||||
--button-background: hsla(240, 0.25, 0.75, 0.1);
|
||||
--button-background--hover: hsla(240, 0.25, 0.75, 0.175);
|
||||
--button-background--active: hsla(240, 0.25, 0.75, 0.25);
|
||||
--button-box-shadow--focus: hsla(240, 0.25, 0.75, 0.1);
|
||||
|
||||
// Variables for sidebar items, card items
|
||||
--item-background--hover: hsla(240, 0.15, 0.6, 0.075);
|
||||
--item-background--active: hsla(240, 0.15, 0.6, 0.15);
|
||||
--item-box-shadow--focus: var(--item-background--hover);
|
||||
--item-background--hover: hsla(240, 0.25, 0.75, 0.15);
|
||||
--item-background--active: hsla(240, 0.25, 0.75, 0.225);
|
||||
--item-box-shadow--focus: hsla(240, 0.25, 0.75, 0.105);
|
||||
|
||||
// Colors
|
||||
each(@colors, {
|
||||
|
||||
@@ -1295,6 +1295,7 @@ table.progress-bar.red td.progress-bar-done {
|
||||
.logrecord-container {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--section-padding);
|
||||
|
||||
pre {
|
||||
padding-top: 0;
|
||||
|
||||
@@ -0,0 +1,277 @@
|
||||
@import "../abstracts/theme.less";
|
||||
|
||||
// Button: variant mixins
|
||||
|
||||
.button-danger() {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--danger-hover);
|
||||
border-color: var(--danger-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--focus-btn-danger);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--danger-active);
|
||||
border-color: var(--danger-active);
|
||||
}
|
||||
}
|
||||
|
||||
.button-primary() {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--btn-primary-bg);
|
||||
border-color: var(--btn-primary-bg);
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--btn-primary-bg-hover);
|
||||
border-color: var(--btn-primary-bg-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--focus-btn-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--btn-primary-bg-active);
|
||||
border-color: var(--btn-primary-bg-active);
|
||||
}
|
||||
}
|
||||
|
||||
.button-secondary() {
|
||||
color: var(--btn-secondary-color);
|
||||
border-color: var(--btn-secondary-border);
|
||||
background-color: var(--btn-secondary-bg);
|
||||
|
||||
&:focus {
|
||||
color: var(--btn-secondary-color--focus);
|
||||
border-color: var(--btn-secondary-border--focus);
|
||||
background-color: var(--btn-secondary-bg--focus);
|
||||
box-shadow: 0 0 0 0.2rem var(--focus-btn-secondary);
|
||||
}
|
||||
|
||||
// Hover MUST be AFTER the focus declaration for this outlined button.
|
||||
// Otherwise, the hover styles will not be applied when hovering over a focused element
|
||||
&:hover {
|
||||
color: var(--btn-secondary-color--hover);
|
||||
border-color: var(--btn-secondary-border--hover);
|
||||
background-color: var(--btn-secondary-bg--hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--btn-secondary-color--active);
|
||||
border-color: var(--btn-secondary-border--active);
|
||||
background-color: var(--btn-secondary-bg--active);
|
||||
}
|
||||
}
|
||||
|
||||
.button-link {
|
||||
color: var(--primary);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
font-weight: var(--btn-link-font-weight);
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--btn-link-color--hover);
|
||||
background-color: var(--btn-link-bg--hover);
|
||||
border-color: var(--btn-link-bg--hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--btn-link-color--active);
|
||||
background-color: var(--btn-link-bg--active);
|
||||
border-color: var(--btn-link-bg--active);
|
||||
}
|
||||
}
|
||||
|
||||
.button-disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Button styles
|
||||
|
||||
.yui-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.yui-button .first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.yui-button button, input[type="button"], input[type="reset"], input[type="submit"], a.yui-button:link, a.yui-button:visited {
|
||||
box-sizing: border-box;
|
||||
// vertical padding:
|
||||
// 0.375rem == 6px == 32px (target height) - 4px (borders) - 16 (line) / 2
|
||||
padding: 0.375rem 1rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
min-width: 4.5rem;
|
||||
min-height: 2rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: var(--btn-font-size);
|
||||
line-height: var(--btn-line-height);
|
||||
font-weight: var(--btn-font-weight);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
color 0.15s ease-in-out,
|
||||
background-color 0.15s ease-in-out,
|
||||
border-color 0.15s ease-in-out;
|
||||
|
||||
.button-secondary();
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.svg-icon, i {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 1rem;
|
||||
vertical-align: top;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.leading-icon {
|
||||
display: flex;
|
||||
margin-right: 0.25rem;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.trailing-icon {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.yui-button.danger button, input[type="button"].danger, input[type="reset"].danger, input[type="submit"].danger {
|
||||
.button-danger();
|
||||
}
|
||||
|
||||
.yui-button.primary button, input[type="button"].primary, input[type="reset"].primary, input[type="submit"].primary {
|
||||
.button-primary();
|
||||
}
|
||||
|
||||
.yui-button.link-button button, input[type="button"].link-button, input[type="reset"].link-button, input[type="submit"].link-button {
|
||||
.button-link();
|
||||
}
|
||||
|
||||
.yui-button.large-button button, input[type="button"].large-button,
|
||||
input[type="reset"].large-button, input[type="submit"].large-button, a.yui-button.large-button {
|
||||
// vertical padding
|
||||
// 0.5rem == 8px == 40px (target height) - 4px (borders) - 20 (line) / 2
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 6.5rem;
|
||||
min-height: 2.5rem;
|
||||
font-size: var(--btn-large-font-size);
|
||||
line-height: var(--btn-large-line-height);
|
||||
|
||||
.svg-icon, i {
|
||||
vertical-align: top;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.yui-button-disabled button, .yui-button button:disabled, input[type="button"]:disabled,
|
||||
input[type="reset"]:disabled, input[type="submit"]:disabled, .yui-button-disabled input[type="button"],
|
||||
.yui-button-disabled input[type="reset"], .yui-button-disabled input[type="submit"] {
|
||||
.button-disabled();
|
||||
}
|
||||
|
||||
a.yui-button {
|
||||
&.primary {
|
||||
.button-primary();
|
||||
}
|
||||
|
||||
&.danger {
|
||||
.button-danger();
|
||||
}
|
||||
|
||||
&.link-button {
|
||||
.button-link();
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.button-disabled();
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown buttons
|
||||
.yui-button.yui-menu-button button, .yui-button.yui-split-button button {
|
||||
// These buttons have a caret as the :after element
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: 0.4em;
|
||||
vertical-align: 0.1875em;
|
||||
content: "";
|
||||
border-top: 0.35em solid;
|
||||
border-right: 0.35em solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: 0.35em solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.yui-button.yui-menu-button.yui-menu-button-active button, .yui-button.yui-split-button.yui-split-button-active button {
|
||||
&::after {
|
||||
border-bottom: 0.35em solid;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon buttons
|
||||
|
||||
.yui-button.icon-button button, a.yui-button.icon-button:link, a.yui-button.icon-button:visited {
|
||||
padding: 0.25rem;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
.svg-icon, i {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.button-link();
|
||||
}
|
||||
|
||||
.yui-button.icon-button.large-button button, a.yui-button.icon-button.large-button {
|
||||
min-width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0.625rem;
|
||||
|
||||
.svg-icon, i {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
@@ -1,187 +0,0 @@
|
||||
.jenkins-button {
|
||||
appearance: none;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none !important;
|
||||
background: transparent;
|
||||
color: var(--text-color) !important;
|
||||
z-index: 0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
min-height: 36px;
|
||||
text-shadow: 0 1px 0 var(--background);
|
||||
white-space: nowrap;
|
||||
gap: 1ch;
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
opacity: 0.075;
|
||||
border-radius: inherit;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 10px transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.1125;
|
||||
}
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
&::before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 5px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.jenkins-button--primary {
|
||||
color: var(--button-color--primary) !important;
|
||||
font-weight: 600;
|
||||
text-shadow: none;
|
||||
|
||||
&::before, &::after {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
&::before {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jenkins-button--transparent {
|
||||
&::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;
|
||||
}
|
||||
});
|
||||
|
||||
.jenkins-validate-button__container {
|
||||
&__status {
|
||||
.validation-error-area {
|
||||
min-height: 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.validation-error-area--visible {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.jenkins-copy-button {
|
||||
.jenkins-copy-button__icon {
|
||||
position: relative;
|
||||
width: 0.9rem;
|
||||
height: 1.125rem;
|
||||
transition: var(--standard-transition);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
border: 0.1rem solid currentColor;
|
||||
border-radius: 0.2rem;
|
||||
transition: var(--standard-transition);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 4%;
|
||||
left: 1%;
|
||||
clip-path: polygon(100% 0, 100% 22.5%, 22.5% 22.5%, 32.5% 100%, 0 100%, 0 0);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 4%;
|
||||
right: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.jenkins-copy-button__icon {
|
||||
&::before {
|
||||
transform: translate(7%, 4.5%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate(-7%, -4.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.jenkins-copy-button__icon {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,288 +1,165 @@
|
||||
@import "../abstracts/theme.less";
|
||||
.jenkins-button {
|
||||
--item-background--hover: var(--button-background--hover);
|
||||
--item-background--active: var(--button-background--active);
|
||||
--item-box-shadow--focus: var(--button-box-shadow--focus);
|
||||
|
||||
// Button: variant mixins
|
||||
|
||||
.button-danger() {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--danger-hover);
|
||||
border-color: var(--danger-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--focus-btn-danger);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--danger-active);
|
||||
border-color: var(--danger-active);
|
||||
}
|
||||
}
|
||||
|
||||
.button-primary() {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--btn-primary-bg);
|
||||
border-color: var(--btn-primary-bg);
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--btn-primary-bg-hover);
|
||||
border-color: var(--btn-primary-bg-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--focus-btn-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--btn-text-color);
|
||||
background-color: var(--btn-primary-bg-active);
|
||||
border-color: var(--btn-primary-bg-active);
|
||||
}
|
||||
}
|
||||
|
||||
.button-secondary() {
|
||||
color: var(--btn-secondary-color);
|
||||
border-color: var(--btn-secondary-border);
|
||||
background-color: var(--btn-secondary-bg);
|
||||
|
||||
&:focus {
|
||||
color: var(--btn-secondary-color--focus);
|
||||
border-color: var(--btn-secondary-border--focus);
|
||||
background-color: var(--btn-secondary-bg--focus);
|
||||
box-shadow: 0 0 0 0.2rem var(--focus-btn-secondary);
|
||||
}
|
||||
|
||||
// Hover MUST be AFTER the focus declaration for this outlined button.
|
||||
// Otherwise, the hover styles will not be applied when hovering over a focused element
|
||||
&:hover {
|
||||
color: var(--btn-secondary-color--hover);
|
||||
border-color: var(--btn-secondary-border--hover);
|
||||
background-color: var(--btn-secondary-bg--hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--btn-secondary-color--active);
|
||||
border-color: var(--btn-secondary-border--active);
|
||||
background-color: var(--btn-secondary-bg--active);
|
||||
}
|
||||
}
|
||||
|
||||
.button-link {
|
||||
color: var(--primary);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
font-weight: var(--btn-link-font-weight);
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--btn-link-color--hover);
|
||||
background-color: var(--btn-link-bg--hover);
|
||||
border-color: var(--btn-link-bg--hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--btn-link-color--active);
|
||||
background-color: var(--btn-link-bg--active);
|
||||
border-color: var(--btn-link-bg--active);
|
||||
}
|
||||
}
|
||||
|
||||
.button-disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Button styles
|
||||
|
||||
.yui-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.yui-button .first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.yui-button button, input[type="button"], input[type="reset"], input[type="submit"], a.yui-button:link, a.yui-button:visited {
|
||||
box-sizing: border-box;
|
||||
// vertical padding:
|
||||
// 0.375rem == 6px == 32px (target height) - 4px (borders) - 16 (line) / 2
|
||||
padding: 0.375rem 1rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
min-width: 4.5rem;
|
||||
min-height: 2rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: var(--btn-font-size);
|
||||
line-height: var(--btn-line-height);
|
||||
font-weight: var(--btn-font-weight);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
color 0.15s ease-in-out,
|
||||
background-color 0.15s ease-in-out,
|
||||
border-color 0.15s ease-in-out;
|
||||
|
||||
.button-secondary();
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
.item();
|
||||
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none !important;
|
||||
background: transparent;
|
||||
color: var(--text-color) !important;
|
||||
border-radius: 0.66rem;
|
||||
cursor: pointer;
|
||||
min-height: 36px;
|
||||
white-space: nowrap;
|
||||
gap: 1ch;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
&::before {
|
||||
background: var(--button-background);
|
||||
}
|
||||
|
||||
.svg-icon, i {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 1rem;
|
||||
vertical-align: top;
|
||||
flex-shrink: 1;
|
||||
svg {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
|
||||
.leading-icon {
|
||||
display: flex;
|
||||
margin-right: 0.25rem;
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
filter: saturate(0.6);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
.jenkins-button--primary {
|
||||
color: var(--button-color--primary) !important;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
background: var(--primary) !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: 0 0 0 0.66rem var(--primary);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.trailing-icon {
|
||||
margin-left: 0.25rem;
|
||||
&:active,
|
||||
&:focus {
|
||||
&::before {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: 0 0 0 0.33rem var(--primary);
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yui-button.danger button, input[type="button"].danger, input[type="reset"].danger, input[type="submit"].danger {
|
||||
.button-danger();
|
||||
}
|
||||
|
||||
.yui-button.primary button, input[type="button"].primary, input[type="reset"].primary, input[type="submit"].primary {
|
||||
.button-primary();
|
||||
}
|
||||
|
||||
.yui-button.link-button button, input[type="button"].link-button, input[type="reset"].link-button, input[type="submit"].link-button {
|
||||
.button-link();
|
||||
}
|
||||
|
||||
.yui-button.large-button button, input[type="button"].large-button,
|
||||
input[type="reset"].large-button, input[type="submit"].large-button, a.yui-button.large-button {
|
||||
// vertical padding
|
||||
// 0.5rem == 8px == 40px (target height) - 4px (borders) - 20 (line) / 2
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 6.5rem;
|
||||
min-height: 2.5rem;
|
||||
font-size: var(--btn-large-font-size);
|
||||
line-height: var(--btn-large-line-height);
|
||||
|
||||
.svg-icon, i {
|
||||
vertical-align: top;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
.jenkins-button--tertiary {
|
||||
&::before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.yui-button-disabled button, .yui-button button:disabled, input[type="button"]:disabled,
|
||||
input[type="reset"]:disabled, input[type="submit"]:disabled, .yui-button-disabled input[type="button"],
|
||||
.yui-button-disabled input[type="reset"], .yui-button-disabled input[type="submit"] {
|
||||
.button-disabled();
|
||||
}
|
||||
// Support for custom colors
|
||||
// Modifier classes must include 'color' in name to work
|
||||
.jenkins-button[class*="color"] {
|
||||
background: transparent;
|
||||
color: var(--color) !important;
|
||||
|
||||
a.yui-button {
|
||||
&.primary {
|
||||
.button-primary();
|
||||
&::before {
|
||||
background: currentColor !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
.button-danger();
|
||||
}
|
||||
|
||||
&.link-button {
|
||||
.button-link();
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.button-disabled();
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown buttons
|
||||
.yui-button.yui-menu-button button, .yui-button.yui-split-button button {
|
||||
// These buttons have a caret as the :after element
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: 0.4em;
|
||||
vertical-align: 0.1875em;
|
||||
content: "";
|
||||
border-top: 0.35em solid;
|
||||
border-right: 0.35em solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: 0.35em solid transparent;
|
||||
box-shadow: 0 0 0 0.66rem currentColor;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
&::before {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: 0 0 0 0.33rem currentColor;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yui-button.yui-menu-button.yui-menu-button-active button, .yui-button.yui-split-button.yui-split-button-active button {
|
||||
.jenkins-button--primary[class*="color"] {
|
||||
background: transparent;
|
||||
color: var(--background) !important;
|
||||
|
||||
&::before {
|
||||
background: var(--color) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-bottom: 0.35em solid;
|
||||
border-top: 0;
|
||||
box-shadow: 0 0 0 0.66rem var(--color);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
&::before {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: 0 0 0 0.33rem var(--color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon buttons
|
||||
|
||||
.yui-button.icon-button button, a.yui-button.icon-button:link, a.yui-button.icon-button:visited {
|
||||
padding: 0.25rem;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
.svg-icon, i {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.button-link();
|
||||
}
|
||||
|
||||
.yui-button.icon-button.large-button button, a.yui-button.icon-button.large-button {
|
||||
min-width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0.625rem;
|
||||
|
||||
.svg-icon, i {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
.jenkins-button--tertiary[class*="color"] {
|
||||
&::before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional button related classes
|
||||
.jenkins-buttons-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.jenkins-button {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 1rem !important;
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.yui-button {
|
||||
@@ -299,7 +176,7 @@ a.yui-button {
|
||||
justify-content: flex-end;
|
||||
|
||||
.jenkins-button {
|
||||
margin-left: 1rem !important;
|
||||
margin-left: 0.5rem !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
@@ -314,3 +191,68 @@ a.yui-button {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jenkins-copy-button {
|
||||
.jenkins-copy-button__icon {
|
||||
position: relative;
|
||||
width: 0.9rem;
|
||||
height: 1.125rem;
|
||||
transition: var(--standard-transition);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
border: 0.1rem solid currentColor;
|
||||
border-radius: 0.2rem;
|
||||
transition: var(--standard-transition);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 4%;
|
||||
left: 1%;
|
||||
clip-path: polygon(100% 0, 100% 22.5%, 22.5% 22.5%, 32.5% 100%, 0 100%, 0 0);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 4%;
|
||||
right: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.jenkins-copy-button__icon {
|
||||
&::before {
|
||||
transform: translate(7%, 4.5%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate(-7%, -4.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.jenkins-copy-button__icon {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jenkins-validate-button__container {
|
||||
&__status {
|
||||
.validation-error-area {
|
||||
min-height: 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.validation-error-area--visible {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
.jenkins-icon-size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 2rem 0;
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 32px;
|
||||
margin-right: 0.2rem;
|
||||
|
||||
.yui-button {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.jenkins-icon-size__items-item {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 4px;
|
||||
line-height: 32px;
|
||||
background: var(--btn-link-bg--hover);
|
||||
text-align: center;
|
||||
font-weight: var(--btn-link-font-weight);
|
||||
font-size: var(--btn-font-size);
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
@min-button-size: 36px;
|
||||
|
||||
.jenkins-icon-size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 2rem 0;
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
ol {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
gap: 0.25rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 0.8rem;
|
||||
background: var(--button-background);
|
||||
opacity: 0;
|
||||
transition: var(--standard-transition);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
inset: -0.2rem;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
.jenkins-button {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
min-width: 0 !important;
|
||||
aspect-ratio: 1;
|
||||
height: @min-button-size;
|
||||
}
|
||||
}
|
||||
|
||||
.jenkins-icon-size__items-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
height: @min-button-size;
|
||||
border-radius: 10px;
|
||||
font-weight: var(--btn-link-font-weight);
|
||||
font-size: var(--btn-font-size);
|
||||
background: var(--button-background--hover);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -28,7 +28,7 @@
|
||||
@import "./form/checkbox";
|
||||
@import "./form/input";
|
||||
@import "./form/layout";
|
||||
@import "./modules/buttons-temp";
|
||||
@import "./modules/buttons";
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
|
||||
@@ -20,9 +20,8 @@
|
||||
@import "./modules/badges";
|
||||
@import "./modules/breadcrumbs";
|
||||
@import "./modules/buttons";
|
||||
@import "./modules/buttons-temp";
|
||||
@import "./modules/buttons-deprecated";
|
||||
@import "./modules/content-blocks";
|
||||
@import "./modules/icon-size";
|
||||
@import "./modules/icons";
|
||||
@import "./modules/page-footer";
|
||||
@import "./modules/page-header";
|
||||
@@ -37,6 +36,7 @@
|
||||
@import "./modules/tabs";
|
||||
@import "./modules/tooltips";
|
||||
@import "./pages/about";
|
||||
@import "./pages/dashboard";
|
||||
@import "./pages/manage-jenkins";
|
||||
@import "./pages/plugin-manager";
|
||||
@import "./pages/setupWizardFirstUser";
|
||||
|
||||
Reference in new issue
Block a user