diff --git a/core/src/main/resources/hudson/model/Job/configure.jelly b/core/src/main/resources/hudson/model/Job/configure.jelly
index 343cf60985f150cb13aaaeadb253335ae18a036c..9536d55a4e8196bc73b81d3e678becbd7baa25ef 100644
--- a/core/src/main/resources/hudson/model/Job/configure.jelly
+++ b/core/src/main/resources/hudson/model/Job/configure.jelly
@@ -65,8 +65,8 @@ THE SOFTWARE.
-
-
+
+
diff --git a/core/src/main/resources/hudson/model/ListView/newJobButtonBar.jelly b/core/src/main/resources/hudson/model/ListView/newJobButtonBar.jelly
index c7af6102595074fc682a6cadc184704c8bf5d1c4..9d46702b160c328a66b1da743d61bffb48e4d263 100644
--- a/core/src/main/resources/hudson/model/ListView/newJobButtonBar.jelly
+++ b/core/src/main/resources/hudson/model/ListView/newJobButtonBar.jelly
@@ -24,6 +24,8 @@ THE SOFTWARE.
-
+
+
+
diff --git a/core/src/main/resources/hudson/model/View/newJobButtonBar.jelly b/core/src/main/resources/hudson/model/View/newJobButtonBar.jelly
index 2b4ee0c185d54783ff5fe0931a03312d51b590ec..e18031993c34be9667a6fb9ff7962bb471c32860 100644
--- a/core/src/main/resources/hudson/model/View/newJobButtonBar.jelly
+++ b/core/src/main/resources/hudson/model/View/newJobButtonBar.jelly
@@ -24,5 +24,7 @@ THE SOFTWARE.
-
+
+
+
diff --git a/core/src/main/resources/lib/form/advanced.jelly b/core/src/main/resources/lib/form/advanced.jelly
index df25a069cc5524893fc5698624069321d0d72b3a..215822afa2b4eb1217d523985eafba67d20676f6 100644
--- a/core/src/main/resources/lib/form/advanced.jelly
+++ b/core/src/main/resources/lib/form/advanced.jelly
@@ -47,7 +47,7 @@ THE SOFTWARE.
-
+
diff --git a/core/src/main/resources/lib/form/apply.jelly b/core/src/main/resources/lib/form/apply.jelly
index dfe5c24f87c6cef3959410af17490f4e8e5bd5d7..837f066560e54e7ab3c56b735693af24b37f5929 100644
--- a/core/src/main/resources/lib/form/apply.jelly
+++ b/core/src/main/resources/lib/form/apply.jelly
@@ -35,8 +35,15 @@ THE SOFTWARE.
The text of the apply button.
+
+
+ Set to "true" to enable the large variant of the button
+
-
-
\ No newline at end of file
+
+
diff --git a/core/src/main/resources/lib/form/submit.jelly b/core/src/main/resources/lib/form/submit.jelly
index 9eb6324917fc6d26748757c6aa3c7ce5f5525f3c..b66898ecee3e9f1b194f907cc0208886a75381ad 100644
--- a/core/src/main/resources/lib/form/submit.jelly
+++ b/core/src/main/resources/lib/form/submit.jelly
@@ -36,6 +36,14 @@ THE SOFTWARE.
The text of the submit button. Something like "submit", "OK", etc.
+
+
+ Set to "true" to enable the large variant of the button
+
-
+
+
diff --git a/core/src/main/resources/lib/layout/copyButton/copyButton.css b/core/src/main/resources/lib/layout/copyButton/copyButton.css
index 3dfb91706dd67c48d3784c181ffa6ad0ad925880..04c35214d131a79aa372b9f2901a9a478ed78b8a 100644
--- a/core/src/main/resources/lib/layout/copyButton/copyButton.css
+++ b/core/src/main/resources/lib/layout/copyButton/copyButton.css
@@ -9,8 +9,10 @@
background-repeat: no-repeat;
width: 20px;
height: 20px;
+ min-height: 0;
+ min-width: 0;
padding: 0;
- border: none;
+ border: none;
}
#jenkins .copy-button button:hover,
#jenkins .copy-button button:active {
diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
index 2b4bea8553d7e2b1acb07ddd879faed95f48132a..9a7624a262fd8c09e5400f0b3df838832230627f 100644
--- a/core/src/main/resources/lib/layout/layout.jelly
+++ b/core/src/main/resources/lib/layout/layout.jelly
@@ -153,9 +153,7 @@ THE SOFTWARE.
-
-
diff --git a/test/src/test/java/hudson/PluginManagerCheckUpdateCenterTest.java b/test/src/test/java/hudson/PluginManagerCheckUpdateCenterTest.java
index 20aed4d006ca768e668c2833dd2857f461afb2e2..4acd2838cce774534f2a3b7c69ffc73059a76715 100644
--- a/test/src/test/java/hudson/PluginManagerCheckUpdateCenterTest.java
+++ b/test/src/test/java/hudson/PluginManagerCheckUpdateCenterTest.java
@@ -1,8 +1,7 @@
package hudson;
import com.gargoylesoftware.htmlunit.Page;
-import com.gargoylesoftware.htmlunit.html.DomNodeList;
-import com.gargoylesoftware.htmlunit.html.HtmlButton;
+import com.gargoylesoftware.htmlunit.html.HtmlAnchor;
import com.gargoylesoftware.htmlunit.html.HtmlElement;
import com.gargoylesoftware.htmlunit.html.HtmlElementUtil;
import com.gargoylesoftware.htmlunit.html.HtmlPage;
@@ -26,8 +25,10 @@ import org.xml.sax.SAXException;
import javax.servlet.ServletException;
import java.io.IOException;
+import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
+import java.util.stream.Collectors;
import static org.hamcrest.CoreMatchers.is;
import static org.junit.Assert.assertEquals;
@@ -108,10 +109,14 @@ public class PluginManagerCheckUpdateCenterTest {
}
}
- private HtmlButton getCheckNow(HtmlPage page){
- DomNodeList elements = page.getElementById("bottom-sticker").getElementsByTagName("button");
+ private HtmlAnchor getCheckNow(HtmlPage page){
+ List elements = page.getElementById("bottom-sticker")
+ .getElementsByTagName("a")
+ .stream()
+ .filter(link -> link.getAttribute("href").equals("checkUpdatesServer"))
+ .collect(Collectors.toList());
assertEquals(1, elements.size());
- return (HtmlButton) elements.get(0);
+ return (HtmlAnchor) elements.get(0);
}
/**
diff --git a/war/src/main/js/widgets/add/addform.less b/war/src/main/js/widgets/add/addform.less
index 0be5c4674b4ddcad499da1b586db2f459f8a19dc..534af9e12e1f64674f0caef0c15293c2220155b7 100644
--- a/war/src/main/js/widgets/add/addform.less
+++ b/war/src/main/js/widgets/add/addform.less
@@ -39,38 +39,6 @@
min-width: auto;
margin-right: 0px;
}
-
- button[type=submit] {
- padding: 5px 20px;
- background-color: rgb(204, 221, 238);
- border-color: rgb(102, 153, 204);
- border-radius: 3px;
- border-width: 1px;
- border-style: solid;
- color: rgb(80, 80, 80);
- font-weight: bold;
- font-size: @font-size-sm;
- line-height: 27px;
- }
-
- button[type=submit]:hover:not(.disabled), button[type=submit]:focus:not(.disabled) {
- background-color: rgb(68, 119, 136);
- border-color: rgb(51, 85, 102);
- color: rgb(238, 238, 238);
- cursor: pointer;
- }
-
- button[type=submit]:active:not(.disabled){
- box-shadow: inset 0px 1px 6px 2px #1b2b33;
- }
-
- button[type=submit].disabled {
- background-color: #ccc;
- border-color: #aaa;
- color: rgb(140, 140, 140);
- cursor: auto;
- opacity: 0.75;
- }
}
}
diff --git a/war/src/main/js/widgets/config/tabbar.less b/war/src/main/js/widgets/config/tabbar.less
index 3cd09586a8376ed59dd6216c52a2fa16264f7676..e0ff40de71ff84e187dcc539f5db1a18b69cf36d 100644
--- a/war/src/main/js/widgets/config/tabbar.less
+++ b/war/src/main/js/widgets/config/tabbar.less
@@ -148,29 +148,6 @@
right:0;
z-index:2;
}
- .yui-button.primary{
- button{
- background:@middle-blue;
- border-color:@dark-blue;
- }
- }
- .yui-button.yui-button-disabled{
- button{
- background:@light-background;
- border-color:@solid-border;
- color:@solid-border;
- }
- }
-
- .yui-button{
- margin-right:10px;
-
- button{
- padding:5px 20px;
- background:@pale-blue;
- border-color:@line-blue;
- }
- }
}
.section-header{
@@ -207,8 +184,7 @@
textarea.setting-input {
display:block;
}
-
- .yui-button button,
+
input[type='email'].setting-input,
input[type='password'].setting-input,
input[type='text'].setting-input{
@@ -217,15 +193,7 @@
padding:0 5px;
.border-radius(@radius);
}
- .yui-button button{
- padding:0 10px;
- box-sizing:content-box;
- }
-
- .yui-button button.hetero-list-add{
- padding-right:25px;
- }
-
+
select:not([multiple]){
height:@input-line-height;
line-height:@input-line-height;
@@ -320,6 +288,8 @@
line-height: 12px !important;
display: inline-block;
font-size: 8px;
+ min-width: 0;
+ min-height: 0;
}
button:focus,
diff --git a/war/src/main/less/abstracts/colors.less b/war/src/main/less/abstracts/colors.less
index 38270e6dbc7d79d12c5e664407d0e49218fc98c7..2733da1ffd0061d596d79fe4b31d673a5d1df1e2 100644
--- a/war/src/main/less/abstracts/colors.less
+++ b/war/src/main/less/abstracts/colors.less
@@ -1,14 +1,28 @@
@white: #fff;
+@black: #333;
+
+@primary: #0587d4;
+@secondary: #4D545D;
+@success: #138347;
+@danger: #CC0003;
+@warning: #EA6B19;
+@focus: #3FB3F7;
+
+// State colors
+@primary-hover: #0B6AA2;
+@primary-active: #095683;
+@danger-hover: #EB383B;
+@danger-active: #B50003;
// Page header colors
@logo-bg: @white;
-@brand-link-color: #4d545d;
+@brand-link-color: @secondary;
@header-link-color: @white;
@header-link-color-active: #f5f5f5;
-@header-link-outline: #3FB3F7;
+@header-link-outline: @focus;
@search-input-color: @brand-link-color;
@search-background: @white;
-@search-box-completion-bg: #0587d4;
+@search-box-completion-bg: @primary;
@search-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3);
// Header classic colors
@@ -17,11 +31,11 @@
@header-link-bg-classic-active: lighten(@header-bg-classic, 20%);
// Header new UI colors
-@header-bg-v2: #0587d4;
-@brand-link-color-hover-v2: #0B6AA2;
-@brand-link-color-active-v2: #095683;
-@header-link-bg-hover-v2: #0B6AA2;
-@header-link-bg-active-v2: #095683;
+@header-bg-v2: @primary;
+@brand-link-color-hover-v2: @primary-hover;
+@brand-link-color-active-v2: @primary-active;
+@header-link-bg-hover-v2: @primary-hover;
+@header-link-bg-active-v2: @primary-active;
// Header dimensions
@header-item-border-radius: 4px;
@@ -43,7 +57,7 @@
@alert-success-icon-color: #4caf50;
@alert-success-bg-color: #d4edda;
@alert-success-border-color: #c3e6cb;
-@alert-success-color: #155724;
+@alert-success-color: @success;
@alert-warn-icon-color: #ff9800;
@alert-warn-bg-color: #fff3cd;
@@ -56,6 +70,15 @@
@alert-err-color: #721c24;
// Typography
-@text-color: #333;
-@text-color-primary: #0B6AA2;
-@text-color-primary-accent: #095683;
+@text-color: @black;
+@text-color-primary: @primary;
+@text-color-primary-accent: @primary-active;
+@text-color-grey-light: #747C82;
+@text-inactive: @text-color-grey-light;
+
+// Buttons
+@btn-primary-bg: @primary-hover;
+@btn-primary-bg-hover: @primary;
+@btn-primary-bg-active: @primary-active;
+@btn-secondary-color: @secondary;
+@btn-secondary-border: #9BA7AF;
diff --git a/war/src/main/less/base-styles-v2.less b/war/src/main/less/base-styles-v2.less
index fe53e626ba76a7134945c64b2ce019a507c8db03..49e9392617b76db55fcb09ab61db3dcd8fa9bd87 100644
--- a/war/src/main/less/base-styles-v2.less
+++ b/war/src/main/less/base-styles-v2.less
@@ -21,9 +21,7 @@ html {
@import './base/layout-commons.less';
@import './base/style.less';
-// Keep page header code in this bundle to avoid loading multiple files
-// that are always needed
+@import './modules/buttons.less';
@import './modules/page-header.less';
@import './modules/page-footer.less';
-
@import './modules/manage-jenkins.less';
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index 06dc213011c1bd5609f3f61f8cba3dfb223e80c6..fdffbf0e1f625ad00a34d096088bcdfa40cc5232 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -1294,16 +1294,6 @@ TABLE.fingerprint-in-build TD {
background-color: #e8eeee;
}
-#plugins input.uninstall {
- font-size: @font-size-xs;
- padding: 3px 5px;
- border-radius: 1px;
- font-weight: bold;
- background-color: #4b758b;
- color: #eee;
- border: 1px solid #5788a1;
-}
-
#plugins tr.has-dependents input.uninstall {
background-color: #e0e0e0;
border: 1px solid #cccccc;
@@ -1792,129 +1782,6 @@ select.select-ajax-pending {
margin-top: 6px;
}
-#bottom-sticker .yui-button {
- margin-right: 20px;
-}
-
-/* This level of nesting is technically unnecessary, but to override the
- * default Yahoo styles. */
-#jenkins .yui-button {
- border-width: 0;
- border-style: none;
- border-color: transparent;
- background: none;
- text-decoration: none;
-}
-
-#jenkins .yui-button .first-child {
- border-width: 0;
- border-style: none;
- border-color: transparent;
-}
-#jenkins .yui-button .btn,
-#jenkins .yui-button button {
- font-size: @font-size-xs;
- padding: 3px 20px;
- *border: 0;
- border-radius: 1px;
-
- border: 1px solid #cccccc;
- background-color: #e0e0e0;
-
- color: #505050;
- font-weight: bold;
-}
-
-#jenkins .yui-button .hetero-list-add {
- padding-right: 35px;
-}
-
-#jenkins .yui-button .btn:hover,
-#jenkins .yui-button button:hover,
-#jenkins .yui-button .hover
-{
- background-color: #d0d0d0;
- border: 1px solid #c0c0c0;
-}
-
-#jenkins .yui-button .btn:active,
-#jenkins .yui-button button:active,
-#jenkins .yui-button .active {
- background-color: #bbb;
- box-shadow: inset 0px 1px 6px 2px #929292;
- border: 1px solid #bbb;
-}
-
-#jenkins .yui-button .btn.disabled,
-#jenkins .yui-button button[disabled],
-#jenkins .yui-button button[disabled]:hover,
-#jenkins .yui-button button[disabled]:active,
-#jenkins .yui-button .disabled {
- background-color: #e5e5e5;
- color: #999;
- border: 1px solid #d2d2d2;
-}
-
-/* Color overrides */
-#jenkins .yui-button.primary .btn,
-#jenkins .yui-button.primary button {
- background-color: #4b758b;
- color: #eee;
- border: 1px solid #5788a1;
-}
-#jenkins .yui-button.primary .btn:hover,
-#jenkins .yui-button.primary button:hover,
-#jenkins .yui-button.primary .hover
-{
- background-color: #3f6275;
- border: 1px solid #5788a1;
-}
-#jenkins .yui-button.primary .btn:active,
-#jenkins .yui-button.primary button:active,
-#jenkins .yui-button.primary .active
-{
- background-color: #33505f;
- border: 1px solid #3f6275;
- box-shadow: inset 0px 1px 6px 2px #1b2b33;
-}
-
-#jenkins .yui-button.primary button:disabled,
-#jenkins .yui-button.primary .disabled
-{
- background-color: #adc6d3;
- color: #fff;
- border: 1px solid #a2becd;
-}
-
-#jenkins .yui-button.danger button {
- background-color: #d24939;
- color: #eee;
- border: 1px solid #be3a2b;
-}
-
-#jenkins .yui-button.danger button:hover,
-#jenkins .yui-button.danger .hover
-{
- background-color: #a23225;
- border: 1px solid #942e22;
-}
-
-#jenkins .yui-button.danger button:active,
-#jenkins .yui-button.danger .active
-{
- background-color: #942e22;
- border: 1px solid #6b2118;
- box-shadow: inset 0px 1px 6px 2px #79251b;
-}
-
-#jenkins .yui-button.danger button:disabled,
-#jenkins .yui-button.danger .disabled
-{
- background-color: #e5958c;
- color: #f8f8f8;
- border: 1px solid #e39280;
-}
-
.i18n {
display: none;
}
diff --git a/war/src/main/less/modules/buttons.less b/war/src/main/less/modules/buttons.less
new file mode 100644
index 0000000000000000000000000000000000000000..c5f55f614136db234717ea1459345efc889cd18f
--- /dev/null
+++ b/war/src/main/less/modules/buttons.less
@@ -0,0 +1,285 @@
+@import '../abstracts/colors.less';
+@import '../abstracts/font.less';
+
+// Button variant mixins
+
+.button-danger() {
+ color: @white;
+ background-color: @danger;
+ border-color: @danger;
+
+ &:hover,
+ &:focus {
+ color: @white;
+ background-color: @danger-hover;
+ border-color: @danger-hover;
+ }
+
+ &:active {
+ color: @white;
+ background-color: @danger-active;
+ border-color: @danger-active;
+ }
+}
+
+.button-primary() {
+ color: @white;
+ background-color: @btn-primary-bg;
+ border-color: @btn-primary-bg;
+
+ &:hover,
+ &:focus {
+ color: @white;
+ background-color: @btn-primary-bg-hover;
+ border-color: @btn-primary-bg-hover;
+ }
+
+ &:active {
+ color: @white;
+ background-color: @btn-primary-bg-active;
+ border-color: @btn-primary-bg-active;
+ }
+}
+
+.button-secondary() {
+ color: @btn-secondary-color;
+ border-color: @btn-secondary-border;
+ background-color: @white;
+
+ &:hover,
+ &:focus {
+ color: @primary-hover;
+ border-color: @primary-hover;
+ }
+
+ &:active {
+ color: @primary-active;
+ border-color: @primary-active;
+ }
+}
+
+.button-link {
+ color: @primary;
+ background-color: transparent;
+ border-color: transparent;
+
+ &:hover,
+ &:focus {
+ color: @primary-hover;
+ background-color: #f8f8f8;
+ border-color: #f8f8f8;
+ }
+
+ &:active {
+ color: @primary-active;
+ background-color: #EAEFF2;
+ border-color: #EAEFF2;
+ }
+}
+
+.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;
+ display: inline-block;
+ // 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: @font-size-xs;
+ line-height: 1rem;
+ font-weight: bold;
+ text-align: center;
+ vertical-align: middle;
+ text-decoration: none;
+
+ border: 2px solid;
+ border-radius: 4px;
+
+ transition: all 0.15s ease-in-out;
+
+ .button-secondary();
+
+ &:focus {
+ outline: none;
+ box-shadow: 0 0 0 0.2rem rgba(@focus, 0.5);
+ }
+
+ 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 {
+ margin-right: 0.25rem;
+ }
+
+ .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: @font-size-sm;
+ line-height: 1.25rem;
+
+ .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;
+ }
+}