Polish forms components and split out CSS files #6259
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -169,15 +169,6 @@ | |
| span.highlight { | ||
| background-color: #ffff00; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -51,45 +51,45 @@ h6, | |
| line-height: var(--line-height-heading); | ||
| font-weight: bold; | ||
| display: block; | ||
| margin-top: 0; | ||
| margin-bottom: var(--section-padding); | ||
|
Comment on lines
+54
to
+55
There was a problem hiding this comment. @janfaracik This change seems intended to fix some particular problem, but it's unclear which problem it was intended to fix and in fact it causes a new problem as described in JENKINS-69549 and #7078. In order to ensure that the fix for that bug doesn't re-expose whatever problem this original change was intended to fix, it would be helpful to know what specifically this original change was intended to fix. |
||
| } | ||
|
|
||
| h1, | ||
| .h1 { | ||
| font-size: 1.6rem; | ||
| } | ||
|
|
||
| h2, | ||
| .h2 { | ||
| font-size: 1.4rem; | ||
| } | ||
|
|
||
| h3, | ||
| .h3 { | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| h4, | ||
| .h4 { | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| h5, | ||
| .h5 { | ||
| font-size: 0.8rem; | ||
| } | ||
|
|
||
| h6, | ||
| .h6 { | ||
| font-size: 0.6rem; | ||
| } | ||
|
|
||
| .jenkins-description { | ||
| color: var(--text-color-secondary); | ||
| line-height: 1.66; | ||
| margin-top: 0; | ||
| margin-bottom: var(--section-padding); | ||
| } | ||
|
|
||
| .jenkins-label { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: var(--form-label-font-weight); | ||
|
|
||
| &::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; | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LOVE all of this