mirror of https://github.com/jenkinsci/jenkins.git
Initial
This commit is contained in:
Jan Faracik
parent
4eb00bef36
commit
41d45b5e1f
|
|
@ -25,23 +25,17 @@ THE SOFTWARE.
|
||||||
<!-- list of feed links -->
|
<!-- list of feed links -->
|
||||||
<?jelly escape-by-default='true'?>
|
<?jelly escape-by-default='true'?>
|
||||||
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
|
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
|
||||||
<div align="right">
|
<div class="jenkins-buttons-row jenkins-buttons-row--invert">
|
||||||
<a href="rss" class="yui-button link-button">
|
<a href="rss" class="jenkins-button jenkins-button--transparent">
|
||||||
<span class="leading-icon">
|
<l:icon src="symbol-rss" />
|
||||||
<l:icon src="symbol-rss" />
|
|
||||||
</span>
|
|
||||||
<span>${%All}</span>
|
<span>${%All}</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="rss?level=SEVERE" class="yui-button link-button">
|
<a href="rss?level=SEVERE" class="jenkins-button jenkins-button--transparent">
|
||||||
<span class="leading-icon">
|
<l:icon src="symbol-rss" />
|
||||||
<l:icon src="symbol-rss" />
|
|
||||||
</span>
|
|
||||||
<span>${%SEVERE}</span>
|
<span>${%SEVERE}</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="rss?level=WARNING" class="yui-button link-button">
|
<a href="rss?level=WARNING" class="jenkins-button jenkins-button--transparent">
|
||||||
<span class="leading-icon">
|
<l:icon src="symbol-rss" />
|
||||||
<l:icon src="symbol-rss" />
|
|
||||||
</span>
|
|
||||||
<span>${%WARNING}</span>
|
<span>${%WARNING}</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -41,10 +41,8 @@ THE SOFTWARE.
|
||||||
|
|
||||||
<l:hasPermission permission="${permission}">
|
<l:hasPermission permission="${permission}">
|
||||||
<div class="jenkins-buttons-row jenkins-buttons-row--invert">
|
<div class="jenkins-buttons-row jenkins-buttons-row--invert">
|
||||||
<a class="yui-button link-button" id="description-link" href="editDescription" onclick="return replaceDescription();">
|
<a class="jenkins-button jenkins-button--transparent" id="description-link" href="editDescription" onclick="return replaceDescription();">
|
||||||
<span class="leading-icon">
|
<l:icon src="symbol-edit" />
|
||||||
<l:icon src="symbol-edit" />
|
|
||||||
</span>
|
|
||||||
<j:choose>
|
<j:choose>
|
||||||
<j:when test="${empty(it.description)}">
|
<j:when test="${empty(it.description)}">
|
||||||
${%add description}
|
${%add description}
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@ THE SOFTWARE.
|
||||||
</j:when>
|
</j:when>
|
||||||
<j:otherwise>
|
<j:otherwise>
|
||||||
<li>
|
<li>
|
||||||
<a class="yui-button link-button" href="${rootURL}/iconSize?${sz}">
|
<a class="jenkins-button jenkins-button--transparent" href="${rootURL}/iconSize?${sz}">
|
||||||
${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
|
${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -55,8 +55,6 @@ THE SOFTWARE.
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<d:invokeBody />
|
||||||
<d:invokeBody />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</j:jelly>
|
</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"
|
<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">
|
xmlns:t="/lib/hudson" xmlns:f="/lib/form">
|
||||||
<div id="rss-bar" class="jenkins-buttons-row jenkins-buttons-row--invert">
|
<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="${rootURL}/legend" class="jenkins-button jenkins-button--transparent">${%Legend}</a>
|
||||||
<a href="rssAll" class="yui-button link-button">
|
<a href="rssAll" class="jenkins-button jenkins-button--transparent">
|
||||||
<span class="leading-icon">
|
<l:icon src="symbol-rss" />
|
||||||
<l:icon src="symbol-rss" />
|
|
||||||
</span>
|
|
||||||
<span>Atom feed ${%for all}</span>
|
<span>Atom feed ${%for all}</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="rssFailed" class="yui-button link-button">
|
<a href="rssFailed" class="jenkins-button jenkins-button--transparent">
|
||||||
<span class="leading-icon">
|
<l:icon src="symbol-rss" />
|
||||||
<l:icon src="symbol-rss" />
|
|
||||||
</span>
|
|
||||||
<span>Atom feed ${%for failures}</span>
|
<span>Atom feed ${%for failures}</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="rssLatest" class="yui-button link-button">
|
<a href="rssLatest" class="jenkins-button jenkins-button--transparent">
|
||||||
<span class="leading-icon">
|
<l:icon src="symbol-rss" />
|
||||||
<l:icon src="symbol-rss" />
|
|
||||||
</span>
|
|
||||||
<span>Atom feed ${%for just latest builds}</span>
|
<span>Atom feed ${%for just latest builds}</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1413,6 +1413,7 @@ table.progress-bar.red td.progress-bar-done {
|
||||||
.logrecord-container {
|
.logrecord-container {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
margin-bottom: var(--section-padding);
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,302 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
padding: 0.5rem;
|
||||||
|
min-width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
padding: 0.625rem;
|
||||||
|
|
||||||
|
.svg-icon,
|
||||||
|
i {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,133 +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;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
background: rgba(125, 125, 125, 0.25);
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -1,323 +1,142 @@
|
||||||
@import '../abstracts/theme.less';
|
.jenkins-button {
|
||||||
|
appearance: none;
|
||||||
// Button: variant mixins
|
position: relative;
|
||||||
|
|
||||||
.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;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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;
|
||||||
|
white-space: nowrap;
|
||||||
|
gap: 1ch;
|
||||||
|
|
||||||
& > span {
|
&::before,
|
||||||
display: inline-block;
|
&::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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-icon,
|
&::before {
|
||||||
i {
|
background: currentColor;
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
vertical-align: top;
|
|
||||||
flex-shrink: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.leading-icon {
|
&::after {
|
||||||
display: flex;
|
box-shadow: inset 0 -1px 0 rgb(125, 125, 125), 0 0 0 10px transparent;
|
||||||
margin-right: 0.25rem;
|
}
|
||||||
|
|
||||||
svg {
|
&:hover {
|
||||||
width: 16px;
|
&::before {
|
||||||
height: 16px;
|
opacity: 0.1125;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.trailing-icon {
|
&:active,
|
||||||
margin-left: 0.25rem;
|
&: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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.yui-button.danger button,
|
.jenkins-button--primary {
|
||||||
input[type="button"].danger,
|
color: var(--button-color--primary) !important;
|
||||||
input[type="reset"].danger,
|
font-weight: 600;
|
||||||
input[type="submit"].danger {
|
|
||||||
.button-danger();
|
|
||||||
}
|
|
||||||
|
|
||||||
.yui-button.primary button,
|
&::before,
|
||||||
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 {
|
&::after {
|
||||||
display: inline-block;
|
color: var(--primary);
|
||||||
margin-left: 0.4em;
|
}
|
||||||
vertical-align: 0.1875em;
|
|
||||||
content: "";
|
&::before {
|
||||||
border-top: 0.35em solid;
|
opacity: 1;
|
||||||
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 {
|
&::after {
|
||||||
border-bottom: 0.35em solid;
|
opacity: 0.2;
|
||||||
border-top: 0;
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
&::before {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
&::before {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icon buttons
|
.jenkins-button--transparent {
|
||||||
|
&::before {
|
||||||
.yui-button.icon-button button,
|
opacity: 0;
|
||||||
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();
|
&::after {
|
||||||
}
|
color: transparent;
|
||||||
|
box-shadow: inset 0 -1px 0 transparent, 0 0 0 10px transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.yui-button.icon-button.large-button button,
|
&:hover,
|
||||||
a.yui-button.icon-button.large-button {
|
&:active,
|
||||||
padding: 0.5rem;
|
&:focus {
|
||||||
min-width: 2.5rem;
|
&::after {
|
||||||
height: 2.5rem;
|
color: currentColor;
|
||||||
padding: 0.625rem;
|
}
|
||||||
|
|
||||||
.svg-icon,
|
|
||||||
i {
|
|
||||||
width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
|
||||||
.jenkins-button {
|
.jenkins-button {
|
||||||
margin-left: 0!important;
|
margin-left: 0!important;
|
||||||
margin-right: 1rem!important;
|
margin-right: 0.5rem!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yui-button {
|
.yui-button {
|
||||||
|
|
@ -334,7 +153,7 @@ a.yui-button.icon-button.large-button {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
.jenkins-button {
|
.jenkins-button {
|
||||||
margin-left: 1rem!important;
|
margin-left: 0.5rem!important;
|
||||||
margin-right: 0!important;
|
margin-right: 0!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,45 +3,51 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
|
|
||||||
&__items {
|
&__items {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
margin-right: 0.2rem;
|
|
||||||
|
.jenkins-button {
|
||||||
.yui-button {
|
|
||||||
margin: 0!important;
|
margin: 0!important;
|
||||||
padding: 0!important;
|
padding: 0!important;
|
||||||
width: 32px!important;
|
|
||||||
height: 32px!important;
|
|
||||||
min-width: 0!important;
|
min-width: 0!important;
|
||||||
|
aspect-ratio: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.jenkins-icon-size__items-item {
|
.jenkins-icon-size__items-item {
|
||||||
height: 32px;
|
position: relative;
|
||||||
width: 32px;
|
display: flex;
|
||||||
border-radius: 4px;
|
align-items: center;
|
||||||
line-height: 32px;
|
justify-content: center;
|
||||||
background: var(--btn-link-bg--hover);
|
aspect-ratio: 1;
|
||||||
text-align: center;
|
height: 36px;
|
||||||
|
width: 36px;
|
||||||
|
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);
|
||||||
}
|
|
||||||
|
&::before {
|
||||||
& > * {
|
content: "";
|
||||||
margin-right: 0.5rem;
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: currentColor;
|
||||||
|
opacity: 0.05;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@ html {
|
||||||
@import './modules/badges';
|
@import './modules/badges';
|
||||||
@import './modules/breadcrumbs';
|
@import './modules/breadcrumbs';
|
||||||
@import './modules/buttons';
|
@import './modules/buttons';
|
||||||
@import './modules/buttons-temp';
|
@import './modules/buttons-deprecated';
|
||||||
@import './modules/content-blocks';
|
@import './modules/content-blocks';
|
||||||
@import './modules/icon-size';
|
@import './modules/icon-size';
|
||||||
@import './modules/icons';
|
@import './modules/icons';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue