Split out form files

war/src/main/less/abstracts/theme.less

@@ -283,6 +283,7 @@
 
   // Animations
   --standard-transition: 0.2s ease;
+  --elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);
 
   // Pop out menus
   --menu-text-color: black;

war/src/main/less/base-styles-v2.less

@@ -26,12 +26,20 @@ html {
 @import './base/visibility-utils';
 @import './base/yui-compatibility';
 
+@import './form/checkbox';
+@import './form/codemirror';
+@import './form/input';
+@import './form/layout';
+@import './form/radio';
+@import './form/search';
+@import './form/select';
+@import './form/toggle-switch';
+
 @import './modules/app-bar';
 @import './modules/badges';
 @import './modules/buttons';
 @import './modules/content-blocks';
 @import './modules/draggable-card';
-@import './modules/form';
 @import './modules/icon-size';
 @import './modules/icons';
 @import './modules/manage-jenkins';

war/src/main/less/base/style.less

@@ -1063,7 +1063,7 @@ table.fingerprint-in-build td {
   position: relative;
   padding-left: 32px;
   transition: var(--standard-transition);
-  margin-top: 0.66rem;
+  margin-top: calc(var(--section-padding) / 3);
 
   &::after {
     content: "";

war/src/main/less/form/checkbox.less

@@ -0,0 +1,143 @@
+.jenkins-checkbox-help-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.jenkins-checkbox + a.jenkins-help-button {
+  vertical-align: top;
+}
+
+.jenkins-checkbox {
+  position: relative;
+  display: inline-flex;
+}
+
+.jenkins-checkbox input {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+
+  // If margin is set to a negative value it can cause text to be announced in
+  // the wrong order in VoiceOver for OSX
+  margin: 0;
+  padding: 0;
+
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+
+  &:checked {
+    & + label {
+      &:active,
+      &:focus {
+        &::before {
+          box-shadow: 0 0 0 5px var(--focus-input-glow), inset 0 0 0 12px var(--focus-input-border);
+        }
+      }
+    }
+
+    & + label {
+      &::before {
+        box-shadow: 0 0 0 10px transparent, inset 0 0 0 12px var(--focus-input-border);
+      }
+
+      &::after {
+        transform: scale(1);
+      }
+    }
+  }
+
+  &:disabled {
+    & + label {
+      cursor: not-allowed;
+
+      &::before {
+        opacity: 0.35 !important;
+        box-shadow: 0 0 0 10px transparent, inset 0 0 0 2px var(--input-border) !important;
+      }
+    }
+
+    &:checked {
+      & + label {
+        &::before {
+          box-shadow: 0 0 0 10px transparent, inset 0 0 0 12px var(--focus-input-border) !important;
+        }
+
+        &::after {
+          transform: scale(1) !important;
+        }
+      }
+    }
+  }
+}
+
+.jenkins-checkbox label {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 0;
+  cursor: pointer;
+  line-height: 22px;
+  font-weight: 600;
+
+  &::before {
+    content: "";
+    display: inline-block;
+    position: relative;
+    min-width: 22px;
+    min-height: 22px;
+    border-radius: 6px;
+    transition: var(--standard-transition);
+    margin-right: 11px;
+    box-shadow: 0 0 0 10px transparent, inset 0 0 0 2px var(--input-border);
+  }
+
+  &::after {
+    content: "";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 22px;
+    height: 22px;
+    background: var(--background);
+    mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='384px' height='320px' viewBox='0 0 384 320' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ePath%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cpath d='M327.917546,10.9278525 C339.555371,-2.37251966 359.771775,-3.72027991 373.072147,7.91754577 C386.239516,19.4389932 387.692129,39.368305 376.427694,52.671077 L376.082454,53.0721475 L152.082454,309.072147 C140.014868,322.863675 118.889432,323.700972 105.767743,311.015951 L105.372583,310.627417 L9.372583,214.627417 C-3.12419433,202.13064 -3.12419433,181.86936 9.372583,169.372583 C21.7443926,157.000773 41.7261905,156.877055 54.2501999,169.001429 L54.627417,169.372583 L126.441,241.186 L327.917546,10.9278525 Z' id='Path' fill='%23FF0000' fill-rule='nonzero'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
+    mask-size: 10px 10px;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    transition: var(--elastic-transition);
+    transform: scale(0);
+  }
+
+  &:empty {
+    &::before {
+      margin-right: 0;
+    }
+  }
+
+  &:hover {
+    &::before {
+      box-shadow: 0 0 0 10px transparent, inset 0 0 0 5px var(--input-border-hover);
+    }
+  }
+
+  &:active,
+  &:focus {
+    &::before {
+      box-shadow: 0 0 0 5px var(--focus-input-glow), inset 0 0 0 5px var(--focus-input-border);
+    }
+  }
+}
+
+.jenkins-checkbox__description {
+  margin-top: 0.3rem;
+  margin-left: 34px;
+  margin-bottom: 1rem;
+  color: var(--text-color-secondary);
+  line-height: 1.66;
+}

war/src/main/less/form/codemirror.less

@@ -0,0 +1,33 @@
+.CodeMirror-scroll {
+  // CodeMirror text boxes may be resized both horizontally and vertically to ensure
+  // users have enough space to write scripts
+  resize: both;
+}
+
+.CodeMirror {
+  display: block;
+  background: var(--input-color);
+  border: 2px solid var(--input-border);
+  border-radius: var(--form-input-border-radius);
+  width: 100%;
+  box-shadow: var(--form-input-glow);
+  transition: var(--standard-transition);
+  cursor: text;
+
+  &:hover {
+    border-color: var(--input-border-hover);
+  }
+
+  &:active,
+  &:focus-within {
+    outline: none;
+    border-color: var(--focus-input-border);
+    box-shadow: var(--form-input-glow--focus);
+  }
+
+  textarea {
+    background: transparent;
+    border: none;
+    outline: none;
+  }
+}

war/src/main/less/form/input.less

@@ -0,0 +1,21 @@
+.jenkins-input {
+  display: block;
+  background: var(--input-color);
+  border: 2px solid var(--input-border);
+  padding: var(--form-input-padding);
+  border-radius: var(--form-input-border-radius);
+  width: 100%;
+  box-shadow: var(--form-input-glow);
+  transition: var(--standard-transition);
+
+  &:hover {
+    border-color: var(--input-border-hover);
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+    border-color: var(--focus-input-border);
+    box-shadow: var(--form-input-glow--focus);
+  }
+}

war/src/main/less/form/layout.less

@@ -0,0 +1,140 @@
+.jenkins-form {
+  max-width: var(--form-item-max-width);
+}
+
+.jenkins-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+
+  .jenkins-form-item:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.jenkins-form-item {
+  max-width: var(--form-item-max-width);
+  margin-bottom: var(--section-padding);
+
+  // Workaround for float:right button controls
+  // (eg Global Credentials' Verify Configuration button being hidden by the floating submit bar)
+  &::after {
+    content: " "; /* Older browser do not support empty content */
+    visibility: hidden;
+    display: block;
+    height: 0;
+    clear: both;
+  }
+
+  &--tight + .jenkins-form-item--tight {
+    margin-top: -0.9rem;
+  }
+
+  &--small {
+    max-width: var(--form-item-max-width--small);
+  }
+
+  &--medium {
+    max-width: var(--form-item-max-width--medium);
+  }
+}
+
+.jenkins-form-label {
+  display: flex;
+  align-items: center;
+  font-weight: var(--form-label-font-weight);
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}
+
+.jenkins-form-description {
+  display: block;
+  // Tweaked margin so that it appears visually centred when placed next to `.jenkins-form-label`
+  margin: -0.2rem 0 0.8rem 0;
+  color: var(--text-color-secondary);
+  line-height: 1.66;
+}
+
+.jenkins-quote {
+  position: relative;
+  display: flex;
+  line-height: 38px;
+
+  &::before {
+    content: "";
+    position: relative;
+    width: 2px;
+    background: var(--input-border);
+    margin-right: 1rem;
+    border-radius: 2px;
+  }
+
+  &--monospace {
+    font-family: monospace;
+  }
+}
+
+.jenkins-help-button {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+  margin-left: 1ch;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 20px;
+  color: var(--text-color)!important;
+  border-radius: 100%;
+
+  &::before {
+    content: "?";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: var(--text-color);
+    opacity: 0.1;
+    border-radius: inherit;
+    transition: var(--standard-transition);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border: 1px solid rgba(125, 125, 125, 0.35);
+    box-shadow: var(--form-input-glow);
+    border-radius: inherit;
+    opacity: 0.1;
+    transition: var(--standard-transition);
+  }
+
+  &:hover {
+    text-decoration: none;
+
+    &::before {
+      opacity: 0.2;
+    }
+  }
+
+  &:active, &:focus {
+    outline: none;
+    text-decoration: none;
+
+    &::before {
+      opacity: 0.3;
+    }
+
+    &::after {
+      box-shadow: 0 0 0 5px var(--text-color);
+    }
+  }
+}