From bd3028572ac30f5eee21ea9d4f979c0c9b5c565c Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue, 28 Dec 2021 20:08:59 +0000 Subject: [PATCH] Split out form files --- war/src/main/less/abstracts/theme.less | 1 + war/src/main/less/base-styles-v2.less | 10 +- war/src/main/less/base/style.less | 2 +- war/src/main/less/form/checkbox.less | 143 ++++ war/src/main/less/form/codemirror.less | 33 + war/src/main/less/form/input.less | 21 + war/src/main/less/form/layout.less | 140 ++++ war/src/main/less/form/radio.less | 123 ++++ war/src/main/less/form/search.less | 112 +++ war/src/main/less/form/select.less | 66 ++ war/src/main/less/form/toggle-switch.less | 91 +++ war/src/main/less/modules/form.less | 826 ---------------------- 12 files changed, 740 insertions(+), 828 deletions(-) create mode 100644 war/src/main/less/form/checkbox.less create mode 100644 war/src/main/less/form/codemirror.less create mode 100644 war/src/main/less/form/input.less create mode 100644 war/src/main/less/form/layout.less create mode 100644 war/src/main/less/form/radio.less create mode 100644 war/src/main/less/form/search.less create mode 100644 war/src/main/less/form/select.less create mode 100644 war/src/main/less/form/toggle-switch.less delete mode 100644 war/src/main/less/modules/form.less diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less index d1cfc0059610..7d1df86a01c4 100644 --- a/war/src/main/less/abstracts/theme.less +++ b/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; diff --git a/war/src/main/less/base-styles-v2.less b/war/src/main/less/base-styles-v2.less index ac08c8be0dc0..bced19e42f9e 100644 --- a/war/src/main/less/base-styles-v2.less +++ b/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'; diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less index 18b211ed1e0c..c4cc81b17b8b 100644 --- a/war/src/main/less/base/style.less +++ b/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: ""; diff --git a/war/src/main/less/form/checkbox.less b/war/src/main/less/form/checkbox.less new file mode 100644 index 000000000000..226067380b73 --- /dev/null +++ b/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; +} diff --git a/war/src/main/less/form/codemirror.less b/war/src/main/less/form/codemirror.less new file mode 100644 index 000000000000..225c9d854c40 --- /dev/null +++ b/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; + } +} diff --git a/war/src/main/less/form/input.less b/war/src/main/less/form/input.less new file mode 100644 index 000000000000..492083bf3fe4 --- /dev/null +++ b/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); + } +} diff --git a/war/src/main/less/form/layout.less b/war/src/main/less/form/layout.less new file mode 100644 index 000000000000..0cdebc519859 --- /dev/null +++ b/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); + } + } +} diff --git a/war/src/main/less/form/radio.less b/war/src/main/less/form/radio.less new file mode 100644 index 000000000000..ee668b3d45f9 --- /dev/null +++ b/war/src/main/less/form/radio.less @@ -0,0 +1,123 @@ +.jenkins-radio-help-wrapper { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.jenkins-radio { + margin-top: 3px; + + &:not(:last-of-type) { + margin-bottom: calc(var(--section-padding) / 3); + } + + &__input { + position: absolute; + opacity: 0; + + &:hover { + & + label { + &::before { + box-shadow: 0 0 0 10px transparent, inset 0 0 0 5px var(--input-border-hover); + } + } + } + + &:focus, + &:active { + & + label { + &::before { + transition: box-shadow var(--elastic-transition); + box-shadow: 0 0 0 5px var(--focus-input-glow), inset 0 0 0 8px var(--focus-input-border); + } + } + } + + &:checked { + & + label { + &::before { + box-shadow: 0 0 0 10px transparent, inset 0 0 0 8px var(--focus-input-border); + } + } + } + + &:disabled { + & + label { + cursor: not-allowed; + + &::before { + opacity: 0.35; + } + } + } + } + + &__label { + position: relative; + display: inline-block; + margin-bottom: 0; + padding: 0 0 5px 32px; + cursor: pointer; + font-weight: 600; + // remove 300ms pause on mobile + touch-action: manipulation; + + &::before { + content: ""; + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + + width: 22px; + height: 22px; + + border-radius: 50%; + background: transparent; + box-shadow: 0 0 0 10px transparent, inset 0 0 0 2px var(--input-border); + + transition: box-shadow var(--standard-transition); + } + } + + &__description { + margin: 0 0 0 32px; + color: var(--text-color-secondary); + line-height: 1.66; + } + + &__children { + position: relative; + margin-top: 0; + opacity: 0; + padding-left: 32px; + transition: var(--standard-transition); + visibility: hidden; + max-height: 0; + + &::after { + content: ""; + position: absolute; + top: 0; + left: 10px; + bottom: 0; + width: 2px; + background: var(--input-border); + border-radius: 2px; + transition: var(--standard-transition); + } + + &:focus-within { + &::after { + background: var(--focus-input-border); + } + } + } + + &__input:checked + &__label + &__children { + visibility: visible; + margin-top: 10px; + opacity: 1; + max-height: none; + } +} diff --git a/war/src/main/less/form/search.less b/war/src/main/less/form/search.less new file mode 100644 index 000000000000..4ee208fb52f1 --- /dev/null +++ b/war/src/main/less/form/search.less @@ -0,0 +1,112 @@ +.jenkins-search { + position: relative; + max-width: 420px; + + &__input { + appearance: none; + display: block; + background: var(--input-color); + border: 2px solid var(--input-border); + border-radius: var(--form-input-border-radius); + width: 100%; + margin: 0; + padding: 0 4px 0 29px; + line-height: 30px; + box-shadow: var(--form-input-glow); + transition: var(--standard-transition); + + // Safari adds unwanted padding - let's remove it + &::-webkit-search-decoration { + -webkit-appearance: none; + } + + // By default the clear text button doesn't change the cursor on hover - lets turn it into a pointer + &::-webkit-search-cancel-button:hover { + cursor: pointer; + } + + &:hover { + border-color: var(--input-border-hover); + } + + &:active, + &:focus { + outline: none; + border-color: var(--focus-input-border); + box-shadow: var(--form-input-glow--focus); + } + } + + &__icon { + position: absolute; + top: 9px; + left: 9px; + width: 16px; + height: 16px; + fill: var(--input-border-hover); + transition: var(--standard-transition); + } + + &::before { + content: ""; + position: absolute; + top: 17px; + left: 17px; + width: 0; + height: 0; + color: inherit; + border: 2px solid currentColor; + border-radius: 100%; + opacity: 0; + transition: var(--standard-transition); + } + + &::after { + content: ""; + position: absolute; + top: 17px; + left: 17px; + width: 0; + height: 0; + color: inherit; + border: 2px solid currentColor; + border-radius: 100%; + clip-path: inset(0 0 50% 50%); + opacity: 0; + transition: var(--standard-transition); + animation: loading-spinner 1s infinite linear; + + @media (prefers-reduced-motion) { + animation-duration: 2s; + } + } + + &--loading { + .jenkins-search__icon { + opacity: 0; + transform: scale(0); + } + + &::before { + opacity: 0.2; + top: 9px; + left: 9px; + width: 16px; + height: 16px; + } + + &::after { + opacity: 1; + top: 9px; + left: 9px; + width: 16px; + height: 16px; + } + } + + &:focus-within { + .jenkins-search__icon { + fill: var(--focus-input-border); + } + } +} diff --git a/war/src/main/less/form/select.less b/war/src/main/less/form/select.less new file mode 100644 index 000000000000..acdedfc17728 --- /dev/null +++ b/war/src/main/less/form/select.less @@ -0,0 +1,66 @@ +.jenkins-select { + position: relative; + width: 100%; + + &::after { + content: ""; + position: absolute; + top: 0; + right: 13px; + bottom: 0; + width: 12px; + background-color: currentColor; + mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='336px' height='192px' viewBox='0 0 336 192' 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%3cg id='arrow' transform='translate(0.000000, 0.000000)' fill='%23FF0000' fill-rule='nonzero'%3e%3cpath d='M7.02943725,7.02943725 C16.3053957,-2.24652118 31.2852799,-2.34214962 40.6788451,6.74255194 L40.9705627,7.02943725 L168,134.059 L295.029437,7.02943725 C304.305396,-2.24652118 319.28528,-2.34214962 328.678845,6.74255194 L328.970563,7.02943725 C338.246521,16.3053957 338.34215,31.2852799 329.257448,40.6788451 L328.970563,40.9705627 L184.970563,184.970563 C175.694604,194.246521 160.71472,194.34215 151.321155,185.257448 L151.029437,184.970563 L7.02943725,40.9705627 C-2.34314575,31.5979797 -2.34314575,16.4020203 7.02943725,7.02943725 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e"); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + pointer-events: none; + } + + &__input { + appearance: none; + display: block; + border: 2px solid var(--input-border); + padding: 8px; + width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255 + max-width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255 + border-radius: 6px; + box-shadow: 0 0 0 10px transparent; + transition: var(--standard-transition); + min-height: 38px; + + &:hover { + border-color: var(--input-border-hover); + } + + &:active, + &:focus { + outline: none; + border-color: var(--focus-input-border); + box-shadow: 0 0 0 5px var(--focus-input-glow); + } + + &:disabled { + pointer-events: none; + } + } +} + +.jenkins-multi-select { + position: relative; + width: 100%; + border: 2px solid var(--input-border); + border-radius: var(--form-input-border-radius); + box-shadow: 0 0 0 10px transparent; + transition: var(--standard-transition); + outline: none; + + &:focus { + border-color: var(--focus-input-border); + box-shadow: 0 0 0 5px var(--focus-input-glow); + } + + &:disabled { + pointer-events: none; + } +} diff --git a/war/src/main/less/form/toggle-switch.less b/war/src/main/less/form/toggle-switch.less new file mode 100644 index 000000000000..d0ba6dd8a6af --- /dev/null +++ b/war/src/main/less/form/toggle-switch.less @@ -0,0 +1,91 @@ +.jenkins-toggle-switch { + position: relative; + display: inline-block; +} + +.jenkins-toggle-switch 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::before { + background-color: var(--focus-input-border); + } + + &:checked + label::after { + left: 25px; + color: var(--focus-input-border); + transform: rotate(0deg); + } + + &:active + label::before, + &:focus + label::before { + box-shadow: 0 0 0 5px var(--focus-input-glow); + } +} + +.jenkins-toggle-switch label { + position: relative; + display: flex; + align-items: flex-start; + justify-content: flex-start; + margin: 0; + cursor: pointer; + line-height: 30px; + font-weight: bold; + + &::before { + display: inline-block; + content: ""; + position: relative; + min-width: 50px; + min-height: 30px; + background: var(--input-border); + border-radius: 19px; + transition: 0.2s ease; + margin-right: 15px; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 10px transparent; + } + + &::after { + content: "✓"; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 5px; + left: 5px; + width: 20px; + height: 20px; + background: var(--background); + border-radius: 19px; + color: transparent; + transition: 0.2s ease; + transform: rotate(-90deg); + font-size: 12px; + font-weight: bold; + padding-top: 2px; + box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1); + } + + &:hover::before { + background-color: var(--input-border-hover); + } + + &:active, + &:focus { + &::before { + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 5px var(--focus-input-glow); + } + } +} diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less deleted file mode 100644 index da818716d167..000000000000 --- a/war/src/main/less/modules/form.less +++ /dev/null @@ -1,826 +0,0 @@ -.jenkins-form { - max-width: var(--form-item-max-width); -} - -.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-fieldset { - border: none; - margin: 0; - padding: 0; - - .jenkins-form-item:last-of-type { - margin-bottom: 0; - } -} - -.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-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); - } -} - -.jenkins-search { - position: relative; - max-width: 420px; - - &__input { - appearance: none; - display: block; - background: var(--input-color); - border: 2px solid var(--input-border); - border-radius: var(--form-input-border-radius); - width: 100%; - margin: 0; - padding: 0 4px 0 29px; - line-height: 30px; - box-shadow: var(--form-input-glow); - transition: var(--standard-transition); - - // Safari adds unwanted padding - let's remove it - &::-webkit-search-decoration { - -webkit-appearance: none; - } - - // By default the clear text button doesn't change the cursor on hover - lets turn it into a pointer - &::-webkit-search-cancel-button:hover { - cursor: pointer; - } - - &:hover { - border-color: var(--input-border-hover); - } - - &:active, - &:focus { - outline: none; - border-color: var(--focus-input-border); - box-shadow: var(--form-input-glow--focus); - } - } - - &__icon { - position: absolute; - top: 9px; - left: 9px; - width: 16px; - height: 16px; - fill: var(--input-border-hover); - transition: var(--standard-transition); - } - - &::before { - content: ""; - position: absolute; - top: 17px; - left: 17px; - width: 0; - height: 0; - color: inherit; - border: 2px solid currentColor; - border-radius: 100%; - opacity: 0; - transition: var(--standard-transition); - } - - &::after { - content: ""; - position: absolute; - top: 17px; - left: 17px; - width: 0; - height: 0; - color: inherit; - border: 2px solid currentColor; - border-radius: 100%; - clip-path: inset(0 0 50% 50%); - opacity: 0; - transition: var(--standard-transition); - animation: loading-spinner 1s infinite linear; - - @media (prefers-reduced-motion) { - animation-duration: 2s; - } - } - - &--loading { - .jenkins-search__icon { - opacity: 0; - transform: scale(0); - } - - &::before { - opacity: 0.2; - top: 9px; - left: 9px; - width: 16px; - height: 16px; - } - - &::after { - opacity: 1; - top: 9px; - left: 9px; - width: 16px; - height: 16px; - } - } - - &:focus-within { - .jenkins-search__icon { - fill: var(--focus-input-border); - } - } -} - -@keyframes loading-spinner { - to { - transform: rotate(360deg); - } -} - -.jenkins-select { - position: relative; - width: 100%; - - &::after { - content: ""; - position: absolute; - top: 0; - right: 13px; - bottom: 0; - width: 12px; - background-color: currentColor; - mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='336px' height='192px' viewBox='0 0 336 192' 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%3cg id='arrow' transform='translate(0.000000, 0.000000)' fill='%23FF0000' fill-rule='nonzero'%3e%3cpath d='M7.02943725,7.02943725 C16.3053957,-2.24652118 31.2852799,-2.34214962 40.6788451,6.74255194 L40.9705627,7.02943725 L168,134.059 L295.029437,7.02943725 C304.305396,-2.24652118 319.28528,-2.34214962 328.678845,6.74255194 L328.970563,7.02943725 C338.246521,16.3053957 338.34215,31.2852799 329.257448,40.6788451 L328.970563,40.9705627 L184.970563,184.970563 C175.694604,194.246521 160.71472,194.34215 151.321155,185.257448 L151.029437,184.970563 L7.02943725,40.9705627 C-2.34314575,31.5979797 -2.34314575,16.4020203 7.02943725,7.02943725 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e"); - mask-size: contain; - mask-repeat: no-repeat; - mask-position: center; - pointer-events: none; - } - - &__input { - appearance: none; - display: block; - border: 2px solid var(--input-border); - padding: 8px; - width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255 - max-width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255 - border-radius: 6px; - box-shadow: 0 0 0 10px transparent; - transition: var(--standard-transition); - min-height: 38px; - - &:hover { - border-color: var(--input-border-hover); - } - - &:active, - &:focus { - outline: none; - border-color: var(--focus-input-border); - box-shadow: 0 0 0 5px var(--focus-input-glow); - } - - &:disabled { - pointer-events: none; - } - } -} - -.jenkins-multi-select { - position: relative; - width: 100%; - border: 2px solid var(--input-border); - border-radius: var(--form-input-border-radius); - box-shadow: 0 0 0 10px transparent; - transition: var(--standard-transition); - outline: none; - - &:focus { - border-color: var(--focus-input-border); - box-shadow: 0 0 0 5px var(--focus-input-glow); - } - - &:disabled { - pointer-events: none; - } -} - -.jenkins-radio-help-wrapper { - display: flex; - align-items: center; - justify-content: flex-start; -} - -.jenkins-radio { - margin-top: 3px; - - &:not(:last-of-type) { - margin-bottom: calc(var(--section-padding) / 2); - } - - &__input { - position: absolute; - opacity: 0; - } - - &__label { - position: relative; - display: inline-block; - margin-bottom: 0; - padding: 0 0 5px 32px; - cursor: pointer; - font-weight: 600; - // remove 300ms pause on mobile - touch-action: manipulation; - - &::before { - content: ""; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - - width: 22px; - height: 22px; - - border: 2px solid var(--input-border); - border-radius: 50%; - background: transparent; - box-shadow: var(--form-input-glow); - - transition: var(--standard-transition); - } - - &:hover::before { - border-width: 5px; - border-color: var(--input-border-hover); - } - } - - &__input:focus + &__label:before, &__input:active + &__label:before { - border-width: 8px; - border-color: var(--focus-input-border); - box-shadow: var(--form-input-glow--focus); - } - - &__input:checked + &__label:before { - border-width: 8px; - border-color: var(--focus-input-border); - } - - &__description { - margin: 0 0 0 32px; - color: var(--text-color-secondary); - line-height: 1.66; - } - - &__children { - position: relative; - margin-top: 0; - opacity: 0; - padding-left: 32px; - transition: var(--standard-transition); - visibility: hidden; - max-height: 0; - - &::after { - content: ""; - position: absolute; - top: 0; - left: 10px; - bottom: 0; - width: 2px; - background: var(--input-border); - border-radius: 2px; - transition: var(--standard-transition); - } - - &:focus-within { - &::after { - background: var(--focus-input-border); - } - } - } - - &__input:checked + &__label + &__children { - visibility: visible; - margin-top: 10px; - opacity: 1; - max-height: none; - } -} - -// Align help buttons correctly with checkboxes - -.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: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5); - 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; -} - -.jenkins-toggle-switch { - position: relative; - display: inline-block; -} - -.jenkins-toggle-switch 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:before { - background-color: var(--focus-input-border); - } - - &:checked + label:after { - left: 25px; - color: var(--focus-input-border); - transform: rotate(0deg); - } - - &:active + label:before, &:focus + label:before { - box-shadow: 0 0 0 5px var(--focus-input-glow); - } -} - -.jenkins-toggle-switch label { - position: relative; - display: flex; - align-items: flex-start; - justify-content: flex-start; - margin: 0; - cursor: pointer; - line-height: 30px; - font-weight: bold; - - &::before { - display: inline-block; - content: ""; - position: relative; - min-width: 50px; - min-height: 30px; - background: var(--input-border); - border-radius: 19px; - transition: 0.2s ease; - margin-right: 15px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 10px transparent; - } - - &::after { - content: "✓"; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 5px; - left: 5px; - width: 20px; - height: 20px; - background: var(--background); - border-radius: 19px; - color: transparent; - transition: 0.2s ease; - transform: rotate(-90deg); - font-size: 12px; - font-weight: bold; - padding-top: 2px; - box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1); - } - - &:hover::before { - background-color: var(--input-border-hover); - } - - &:active, &:focus { - &::before { - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 5px var(--focus-input-glow); - } - } -} - -.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); - } - } -} - -.jenkins-toggle-switch { - position: relative; - display: inline-block; -} - -.jenkins-toggle-switch 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%); - - &:disabled { - & + label { - cursor: default; - - &::before { - opacity: 0.25 !important; - background-color: var(--input-border) !important; - box-shadow: none !important; - } - - &::after { - opacity: 0.5 !important; - } - } - } - - &:checked + label::before { - background-color: var(--focus-input-border); - } - - &:checked + label::after { - left: 25px; - color: var(--focus-input-border); - transform: rotate(0deg); - } - - &:active + label::before, &:focus + label::before { - box-shadow: 0 0 0 5px var(--focus-input-glow); - } -} - -.jenkins-toggle-switch label { - position: relative; - display: flex; - align-items: flex-start; - justify-content: flex-start; - margin: 0; - cursor: pointer; - line-height: 30px; - font-weight: bold; - - &::before { - display: inline-block; - content: ""; - position: relative; - min-width: 50px; - min-height: 30px; - background: var(--input-border); - border-radius: 19px; - transition: 0.2s ease; - margin-right: 15px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 10px transparent; - } - - &::after { - content: "✓"; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 5px; - left: 5px; - width: 20px; - height: 20px; - background: var(--background); - border-radius: 19px; - color: transparent; - transition: 0.2s ease; - transform: rotate(-90deg); - font-size: 12px; - padding-top: 2px; - box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1); - } - - &:hover::before { - background-color: var(--input-border-hover); - } - - &:active, &:focus { - &::before { - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 0 5px var(--focus-input-glow); - } - } -} - -.CodeMirror-scroll { - 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; - } -}