@launchpad-ui/form 0.3.4 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.RequiredAsterisk{
|
|
1
|
+
.RequiredAsterisk{color:var(--color-system-red-700)}
|
|
2
2
|
/*# sourceMappingURL=RequiredAsterisk.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"AAAA","sources":["src/styles/RequiredAsterisk.css"],"sourcesContent":[".RequiredAsterisk {\n
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAAA","sources":["src/styles/RequiredAsterisk.css"],"sourcesContent":[".RequiredAsterisk {\n color: var(--color-system-red-700);\n}\n"],"names":[]}
|
package/dist/styles/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.CompactTextField{width:100%;position:relative}.CompactTextField .Form-label{color:var(--color-text);opacity:0;pointer-events:none;background-color:var(--color-background);transform-origin:0 0;z-index:1;padding:0 3px;transition:all .1s ease-in-out;position:absolute;top:-2px;left:10px}.CompactTextField.is-active .Form-label{border-radius:var(--border-radius);opacity:1;pointer-events:auto;transform:matrix(.9,0,0,.9,0,-8)}.FieldSet{border:none;margin:2rem 0;padding:0}.Form-group{margin:2rem 0}.Form--increasedErrorMargin .Form-group{margin:2.8rem 0}.Form--inline .Form-group{vertical-align:middle;margin:0;display:inline-block}.Form .Form-group:first-child{margin-top:0}.Form .Form-group:last-child{margin-bottom:0}.Form--inline .Form-group+.Form-group,.Form--inline .Form-group+.Button{margin-left:1rem}.Form-label{font-size:1.3rem;font-family:var(--font-family-base);word-break:break-word}.Form-label--disabled{color:var(--color-gray-800)}.Form-labelOptional{color:var(--color-text-subtle-primary);fill:var(--color-text-subtle-primary);margin-left:.4em}.Form-group .Form-label{align-items:center;margin-bottom:.2rem;display:flex}.u-d-inline .Form-label+.Form-label{margin-left:1rem}.Form-group .Form-label+.Form-label{margin-top:.5rem}.Form .Form-error{background:var(--color-system-red-600);color:var(--color-white);font-weight:var(--font-weight-regular);border-radius:var(--border-radius);padding:.7rem 1.4rem}.Form-fieldError{color:var(--color-system-red-600);font-size:1.3rem}.Form--increasedErrorMargin .Form-fieldError{min-height:2.8rem}.Form-label .Form-fieldError{float:right}.Form:not(.Form--inline) .Form-fieldError{text-align:left;padding-top:.5rem;display:block}.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError{padding-top:.1rem;padding-bottom:.5rem}.Form .is-invalid .Form-label{color:var(--color-system-red-600)}::placeholder{color:var(--color-gray-600)}.Form .is-invalid .Select-control,.Form .is-invalid .CustomSelect>div,.Form .is-invalid .FormInput{border-color:var(--color-system-red-600)}.Form--increasedErrorMargin .Form-group.is-invalid{margin-bottom:0}.Form--increasedErrorMargin .Form-group.is-invalid+.Form-group,.Form--increasedErrorMargin .Form-group.is-invalid+.Form-hint{margin-top:0}.FormField-hint{color:var(--color-text-subtle-primary);fill:var(--color-text-subtle-primary);margin:0;font-size:1.3rem}.Form .FormField .Form-label,.Form .FormField .is-invalid .Form-label{color:var(--color-text)}.FormField-errorMessage{color:var(--color-system-red-600);font-size:1.3rem}.FormField.Form-group{margin:1rem 0}.FormField.Form-group:first-child{margin-top:0}.Form-hint{font-size:1.3rem;font-weight:var(--font-weight-regular);color:var(--color-text-subtle-primary);margin-top:.3rem;display:block}.FormInput{width:100%;font-size:1.3rem;font-family:var(--font-family-base);line-height:var(--line-height-base);background-color:var(--color-background-field);color:var(--color-text);border:1px solid var(--color-gray-500);border-radius:var(--border-radius);padding:.6rem 1rem;transition:all .1s linear;display:block}.FormInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}input.FormInput,select.FormInput{height:3.2rem}.FormInput.is-disabled,input.FormInput:disabled,select.FormInput:disabled,input.FormInput:read-only{background-color:var(--color-white-100)}.FormInput.is-disabled:hover,.FormInput:disabled:hover{cursor:not-allowed}textarea.FormInput{min-height:2.5em;resize:none}textarea.FormInput:disabled,textarea.FormInput:read-only{background-color:var(--color-white-100)}input.FormInput::-webkit-autofill{box-shadow:0 0 0 50px var(--color-background-field)inset}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}input.FormInput--tiny{height:2.4rem;padding:.1rem .6rem}.FormInput.is-focused,.FormInput:focus{border-color:var(--color-focus);outline:0;box-shadow:0 0 0 3px #405bff1a}.FormInput[readonly],.FormInput[readonly]:focus{color:var(--color-text-subtle-primary);border-color:var(--color-gray-500);box-shadow:none}.Form-checkbox{flex-shrink:0;align-self:flex-start;margin-top:.4rem;margin-right:.5rem}.Form-radio{margin-right:.5rem}.FormInput-select{-webkit-appearance:none;appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>");background-position:right .4em top 50%,0 0;background-repeat:no-repeat;background-size:2rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:2rem}.FormInput-number{min-width:4.5rem}.FormInput-suffixContainer{border:1px solid var(--color-gray-500);border-radius:var(--border-radius);transition:all .1s linear;display:inline-flex;overflow:hidden}.FormInput-suffixContainer:focus-within{border-color:var(--color-focus);box-shadow:0 0 0 3px #405bff1a}.FormInput-suffixContainer .FormInput{border-radius:var(--border-radius)0 0 var(--border-radius);border:none}.FormInput-suffixContainer .FormInput:focus{box-shadow:none}.FormInput-suffixContainer label.FormInput-suffix{background-color:var(--color-gray-100);color:var(--color-gray-500);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}input.FormInput-suffix::-webkit-outer-spin-button,input.FormInput-suffix::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input.FormInput-suffix[type=number]{-webkit-appearance:textfield;appearance:textfield}.IconField{position:relative}.IconField .FormInput{padding-left:3rem}.FormInput~.Icon{fill:var(--color-gray-600);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.InputGroup{display:flex}.InputGroup>*+*{margin-left:1rem}.RequiredAsterisk{
|
|
1
|
+
.CompactTextField{width:100%;position:relative}.CompactTextField .Form-label{color:var(--color-text);opacity:0;pointer-events:none;background-color:var(--color-background);transform-origin:0 0;z-index:1;padding:0 3px;transition:all .1s ease-in-out;position:absolute;top:-2px;left:10px}.CompactTextField.is-active .Form-label{border-radius:var(--border-radius);opacity:1;pointer-events:auto;transform:matrix(.9,0,0,.9,0,-8)}.FieldSet{border:none;margin:2rem 0;padding:0}.Form-group{margin:2rem 0}.Form--increasedErrorMargin .Form-group{margin:2.8rem 0}.Form--inline .Form-group{vertical-align:middle;margin:0;display:inline-block}.Form .Form-group:first-child{margin-top:0}.Form .Form-group:last-child{margin-bottom:0}.Form--inline .Form-group+.Form-group,.Form--inline .Form-group+.Button{margin-left:1rem}.Form-label{font-size:1.3rem;font-family:var(--font-family-base);word-break:break-word}.Form-label--disabled{color:var(--color-gray-800)}.Form-labelOptional{color:var(--color-text-subtle-primary);fill:var(--color-text-subtle-primary);margin-left:.4em}.Form-group .Form-label{align-items:center;margin-bottom:.2rem;display:flex}.u-d-inline .Form-label+.Form-label{margin-left:1rem}.Form-group .Form-label+.Form-label{margin-top:.5rem}.Form .Form-error{background:var(--color-system-red-600);color:var(--color-white);font-weight:var(--font-weight-regular);border-radius:var(--border-radius);padding:.7rem 1.4rem}.Form-fieldError{color:var(--color-system-red-600);font-size:1.3rem}.Form--increasedErrorMargin .Form-fieldError{min-height:2.8rem}.Form-label .Form-fieldError{float:right}.Form:not(.Form--inline) .Form-fieldError{text-align:left;padding-top:.5rem;display:block}.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError{padding-top:.1rem;padding-bottom:.5rem}.Form .is-invalid .Form-label{color:var(--color-system-red-600)}::placeholder{color:var(--color-gray-600)}.Form .is-invalid .Select-control,.Form .is-invalid .CustomSelect>div,.Form .is-invalid .FormInput{border-color:var(--color-system-red-600)}.Form--increasedErrorMargin .Form-group.is-invalid{margin-bottom:0}.Form--increasedErrorMargin .Form-group.is-invalid+.Form-group,.Form--increasedErrorMargin .Form-group.is-invalid+.Form-hint{margin-top:0}.FormField-hint{color:var(--color-text-subtle-primary);fill:var(--color-text-subtle-primary);margin:0;font-size:1.3rem}.Form .FormField .Form-label,.Form .FormField .is-invalid .Form-label{color:var(--color-text)}.FormField-errorMessage{color:var(--color-system-red-600);font-size:1.3rem}.FormField.Form-group{margin:1rem 0}.FormField.Form-group:first-child{margin-top:0}.Form-hint{font-size:1.3rem;font-weight:var(--font-weight-regular);color:var(--color-text-subtle-primary);margin-top:.3rem;display:block}.FormInput{width:100%;font-size:1.3rem;font-family:var(--font-family-base);line-height:var(--line-height-base);background-color:var(--color-background-field);color:var(--color-text);border:1px solid var(--color-gray-500);border-radius:var(--border-radius);padding:.6rem 1rem;transition:all .1s linear;display:block}.FormInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}input.FormInput,select.FormInput{height:3.2rem}.FormInput.is-disabled,input.FormInput:disabled,select.FormInput:disabled,input.FormInput:read-only{background-color:var(--color-white-100)}.FormInput.is-disabled:hover,.FormInput:disabled:hover{cursor:not-allowed}textarea.FormInput{min-height:2.5em;resize:none}textarea.FormInput:disabled,textarea.FormInput:read-only{background-color:var(--color-white-100)}input.FormInput::-webkit-autofill{box-shadow:0 0 0 50px var(--color-background-field)inset}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}input.FormInput--tiny{height:2.4rem;padding:.1rem .6rem}.FormInput.is-focused,.FormInput:focus{border-color:var(--color-focus);outline:0;box-shadow:0 0 0 3px #405bff1a}.FormInput[readonly],.FormInput[readonly]:focus{color:var(--color-text-subtle-primary);border-color:var(--color-gray-500);box-shadow:none}.Form-checkbox{flex-shrink:0;align-self:flex-start;margin-top:.4rem;margin-right:.5rem}.Form-radio{margin-right:.5rem}.FormInput-select{-webkit-appearance:none;appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>");background-position:right .4em top 50%,0 0;background-repeat:no-repeat;background-size:2rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:2rem}.FormInput-number{min-width:4.5rem}.FormInput-suffixContainer{border:1px solid var(--color-gray-500);border-radius:var(--border-radius);transition:all .1s linear;display:inline-flex;overflow:hidden}.FormInput-suffixContainer:focus-within{border-color:var(--color-focus);box-shadow:0 0 0 3px #405bff1a}.FormInput-suffixContainer .FormInput{border-radius:var(--border-radius)0 0 var(--border-radius);border:none}.FormInput-suffixContainer .FormInput:focus{box-shadow:none}.FormInput-suffixContainer label.FormInput-suffix{background-color:var(--color-gray-100);color:var(--color-gray-500);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}input.FormInput-suffix::-webkit-outer-spin-button,input.FormInput-suffix::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input.FormInput-suffix[type=number]{-webkit-appearance:textfield;appearance:textfield}.IconField{position:relative}.IconField .FormInput{padding-left:3rem}.FormInput~.Icon{fill:var(--color-gray-600);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.InputGroup{display:flex}.InputGroup>*+*{margin-left:1rem}.RequiredAsterisk{color:var(--color-system-red-700)}
|
|
2
2
|
/*# sourceMappingURL=styles.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,+CAKA,8OAcA,0ICnBA,8CCAA,0BAMA,wDAIA,8EAMA,2CAIA,6CAIA,yFAKA,uFAMA,kDAIA,kHAMA,4EAMA,qDAIA,qDAIA,iLAQA,oEAOA,+DAIA,yCAIA,0FAMA,uGAKA,gEAIA,0CAIA,4IAMA,mEAIA,0IC/GA,uHAOA,8FAKA,2EAKA,oCAIA,+CCrBA,yICEA,2TAcA,oEAKA,+CAKA,4IAOA,0EAKA,gDAKA,iGAKA,2FAKA,oNAQA,uFAOA,2FAOA,kDAIA,wDAKA,gHAOA,0IAOA,uFAOA,+BAIA,weAUA,mCAIA,mKAQA,uGAKA,6GAKA,4DAIA,uMAUA,qJAOA,sFClKA,6BAIA,wCAIA,2GCRA,yBAIA,iCCJA","sources":["src/styles/styles.css","src/styles/CompactTextField.css","src/styles/FieldSet.css","src/styles/Form.css","src/styles/FormField.css","src/styles/FormHint.css","src/styles/FormInput.css","src/styles/IconField.css","src/styles/InputGroup.css","src/styles/RequiredAsterisk.css"],"sourcesContent":["@import './CompactTextField.css';\n@import './FieldSet.css';\n@import './Form.css';\n@import './FormField.css';\n@import './FormHint.css';\n@import './FormInput.css';\n@import './IconField.css';\n@import './InputGroup.css';\n@import './RequiredAsterisk.css';\n",".CompactTextField {\n position: relative;\n width: 100%;\n}\n\n.CompactTextField .Form-label {\n position: absolute;\n top: -2px;\n left: 10px;\n padding: 0 3px;\n color: var(--color-text);\n opacity: 0;\n pointer-events: none;\n background-color: var(--color-background);\n transform-origin: 0 0; /* preserve left alignment after scaling */\n transition: all 100ms ease-in-out;\n z-index: 1; /* Fixes layout issue in Firefox */\n}\n\n.CompactTextField.is-active .Form-label {\n border-radius: var(--border-radius);\n opacity: 1;\n pointer-events: auto;\n transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */\n}\n",".FieldSet {\n border: none;\n margin: 2rem 0;\n padding: 0;\n}\n",".Form-group {\n margin: 2rem 0;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-group {\n margin: 2.8rem 0;\n}\n\n.Form--inline .Form-group {\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n}\n\n.Form .Form-group:first-child {\n margin-top: 0;\n}\n\n.Form .Form-group:last-child {\n margin-bottom: 0;\n}\n\n.Form--inline .Form-group + .Form-group,\n.Form--inline .Form-group + .Button {\n margin-left: 1rem;\n}\n\n.Form-label {\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n word-break: break-word;\n}\n\n.Form-label--disabled {\n color: var(--color-gray-800);\n}\n\n.Form-labelOptional {\n margin-left: 0.4em;\n color: var(--color-text-subtle-primary);\n fill: var(--color-text-subtle-primary);\n}\n\n.Form-group .Form-label {\n display: flex;\n align-items: center;\n margin-bottom: 0.2rem;\n}\n\n.u-d-inline .Form-label + .Form-label {\n margin-left: 1rem;\n}\n\n.Form-group .Form-label + .Form-label {\n margin-top: 0.5rem;\n}\n\n.Form .Form-error {\n background: var(--color-system-red-600);\n color: var(--color-white);\n font-weight: var(--font-weight-regular);\n padding: 0.7rem 1.4rem;\n border-radius: var(--border-radius);\n}\n\n.Form-fieldError {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-fieldError {\n min-height: 2.8rem;\n}\n\n.Form-label .Form-fieldError {\n float: right;\n}\n\n.Form:not(.Form--inline) .Form-fieldError {\n display: block;\n padding-top: 0.5rem;\n text-align: left;\n}\n\n.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {\n padding-top: 0.1rem;\n padding-bottom: 0.5rem;\n}\n\n.Form .is-invalid .Form-label {\n color: var(--color-system-red-600);\n}\n\n::placeholder {\n color: var(--color-gray-600);\n}\n\n.Form .is-invalid .Select-control,\n.Form .is-invalid .CustomSelect > div,\n.Form .is-invalid .FormInput {\n border-color: var(--color-system-red-600);\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid {\n margin-bottom: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {\n margin-top: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {\n margin-top: 0;\n}\n",".FormField-hint {\n margin: 0;\n font-size: 1.3rem;\n color: var(--color-text-subtle-primary);\n fill: var(--color-text-subtle-primary);\n}\n\n.Form .FormField .Form-label,\n.Form .FormField .is-invalid .Form-label {\n color: var(--color-text);\n}\n\n.FormField-errorMessage {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n.FormField.Form-group {\n margin: 1rem 0;\n}\n\n.FormField.Form-group:first-child {\n margin-top: 0;\n}\n",".Form-hint {\n display: block;\n margin-top: 0.3rem;\n font-size: 1.3rem;\n font-weight: var(--font-weight-regular);\n color: var(--color-text-subtle-primary);\n}\n","/* stylelint-disable no-descending-specificity */\n\n.FormInput {\n display: block;\n width: 100%;\n padding: 0.6rem 1rem;\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n background-color: var(--color-background-field);\n color: var(--color-text);\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n transition: all 100ms linear;\n}\n\n.FormInput:placeholder-shown {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\ninput.FormInput,\nselect.FormInput {\n height: 3.2rem;\n}\n\n.FormInput.is-disabled,\ninput.FormInput:disabled,\nselect.FormInput:disabled,\ninput.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\n.FormInput.is-disabled:hover,\n.FormInput:disabled:hover {\n cursor: not-allowed;\n}\n\ntextarea.FormInput {\n min-height: 2.5em;\n resize: none;\n}\n\ntextarea.FormInput:disabled,\ntextarea.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\ninput.FormInput::-webkit-autofill {\n box-shadow: 0 0 0 50px var(--color-background-field) inset;\n}\n\n/* Hide the type=search cancel button in Webkit for consistency */\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n display: none;\n}\n\n/* Hide the type=search cancel button in IE for consistency */\ninput[type='text']::-ms-clear,\ninput[type='text']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='search']::-ms-clear,\ninput[type='search']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='checkbox']:disabled {\n pointer-events: none;\n}\n\ninput.FormInput--tiny {\n padding: 0.1rem 0.6rem;\n height: 2.4rem;\n}\n\n.FormInput.is-focused,\n.FormInput:focus {\n outline: 0;\n border-color: var(--color-focus);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput[readonly],\n.FormInput[readonly]:focus {\n color: var(--color-text-subtle-primary);\n border-color: var(--color-gray-500);\n box-shadow: none;\n}\n\n.Form-checkbox {\n align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */\n flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */\n margin-right: 0.5rem;\n margin-top: 0.4rem;\n}\n\n.Form-radio {\n margin-right: 0.5rem;\n}\n\n.FormInput-select {\n appearance: none;\n background: transparent;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>');\n background-size: 2rem;\n background-repeat: no-repeat;\n background-position: right 0.4em top 50%, 0 0;\n padding-right: 2rem;\n}\n\n.FormInput-number {\n min-width: 4.5rem;\n}\n\n.FormInput-suffixContainer {\n display: inline-flex;\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n overflow: hidden;\n transition: all 0.1s linear;\n}\n\n.FormInput-suffixContainer:focus-within {\n border-color: var(--color-focus);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput-suffixContainer .FormInput {\n border: none;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n}\n\n.FormInput-suffixContainer .FormInput:focus {\n box-shadow: none;\n}\n\n.FormInput-suffixContainer label.FormInput-suffix {\n padding: 0 2px;\n background-color: var(--color-gray-100);\n color: var(--color-gray-500);\n cursor: text;\n display: inline-flex;\n align-items: center;\n position: initial;\n}\n\ninput.FormInput-suffix::-webkit-outer-spin-button,\ninput.FormInput-suffix::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput.FormInput-suffix[type='number'] {\n appearance: textfield;\n}\n\n/* stylelint-enable no-descending-specificity */\n",".IconField {\n position: relative;\n}\n\n.IconField .FormInput {\n padding-left: 3rem;\n}\n\n.FormInput ~ .Icon {\n position: absolute;\n fill: var(--color-gray-600);\n top: 50%;\n transform: translateY(-50%);\n left: 1rem;\n}\n",".InputGroup {\n display: flex;\n}\n\n.InputGroup > * + * {\n margin-left: 1rem;\n}\n",".RequiredAsterisk {\n
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,+CAKA,8OAcA,0ICnBA,8CCAA,0BAMA,wDAIA,8EAMA,2CAIA,6CAIA,yFAKA,uFAMA,kDAIA,kHAMA,4EAMA,qDAIA,qDAIA,iLAQA,oEAOA,+DAIA,yCAIA,0FAMA,uGAKA,gEAIA,0CAIA,4IAMA,mEAIA,0IC/GA,uHAOA,8FAKA,2EAKA,oCAIA,+CCrBA,yICEA,2TAcA,oEAKA,+CAKA,4IAOA,0EAKA,gDAKA,iGAKA,2FAKA,oNAQA,uFAOA,2FAOA,kDAIA,wDAKA,gHAOA,0IAOA,uFAOA,+BAIA,weAUA,mCAIA,mKAQA,uGAKA,6GAKA,4DAIA,uMAUA,qJAOA,sFClKA,6BAIA,wCAIA,2GCRA,yBAIA,iCCJA","sources":["src/styles/styles.css","src/styles/CompactTextField.css","src/styles/FieldSet.css","src/styles/Form.css","src/styles/FormField.css","src/styles/FormHint.css","src/styles/FormInput.css","src/styles/IconField.css","src/styles/InputGroup.css","src/styles/RequiredAsterisk.css"],"sourcesContent":["@import './CompactTextField.css';\n@import './FieldSet.css';\n@import './Form.css';\n@import './FormField.css';\n@import './FormHint.css';\n@import './FormInput.css';\n@import './IconField.css';\n@import './InputGroup.css';\n@import './RequiredAsterisk.css';\n",".CompactTextField {\n position: relative;\n width: 100%;\n}\n\n.CompactTextField .Form-label {\n position: absolute;\n top: -2px;\n left: 10px;\n padding: 0 3px;\n color: var(--color-text);\n opacity: 0;\n pointer-events: none;\n background-color: var(--color-background);\n transform-origin: 0 0; /* preserve left alignment after scaling */\n transition: all 100ms ease-in-out;\n z-index: 1; /* Fixes layout issue in Firefox */\n}\n\n.CompactTextField.is-active .Form-label {\n border-radius: var(--border-radius);\n opacity: 1;\n pointer-events: auto;\n transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */\n}\n",".FieldSet {\n border: none;\n margin: 2rem 0;\n padding: 0;\n}\n",".Form-group {\n margin: 2rem 0;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-group {\n margin: 2.8rem 0;\n}\n\n.Form--inline .Form-group {\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n}\n\n.Form .Form-group:first-child {\n margin-top: 0;\n}\n\n.Form .Form-group:last-child {\n margin-bottom: 0;\n}\n\n.Form--inline .Form-group + .Form-group,\n.Form--inline .Form-group + .Button {\n margin-left: 1rem;\n}\n\n.Form-label {\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n word-break: break-word;\n}\n\n.Form-label--disabled {\n color: var(--color-gray-800);\n}\n\n.Form-labelOptional {\n margin-left: 0.4em;\n color: var(--color-text-subtle-primary);\n fill: var(--color-text-subtle-primary);\n}\n\n.Form-group .Form-label {\n display: flex;\n align-items: center;\n margin-bottom: 0.2rem;\n}\n\n.u-d-inline .Form-label + .Form-label {\n margin-left: 1rem;\n}\n\n.Form-group .Form-label + .Form-label {\n margin-top: 0.5rem;\n}\n\n.Form .Form-error {\n background: var(--color-system-red-600);\n color: var(--color-white);\n font-weight: var(--font-weight-regular);\n padding: 0.7rem 1.4rem;\n border-radius: var(--border-radius);\n}\n\n.Form-fieldError {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-fieldError {\n min-height: 2.8rem;\n}\n\n.Form-label .Form-fieldError {\n float: right;\n}\n\n.Form:not(.Form--inline) .Form-fieldError {\n display: block;\n padding-top: 0.5rem;\n text-align: left;\n}\n\n.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {\n padding-top: 0.1rem;\n padding-bottom: 0.5rem;\n}\n\n.Form .is-invalid .Form-label {\n color: var(--color-system-red-600);\n}\n\n::placeholder {\n color: var(--color-gray-600);\n}\n\n.Form .is-invalid .Select-control,\n.Form .is-invalid .CustomSelect > div,\n.Form .is-invalid .FormInput {\n border-color: var(--color-system-red-600);\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid {\n margin-bottom: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {\n margin-top: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {\n margin-top: 0;\n}\n",".FormField-hint {\n margin: 0;\n font-size: 1.3rem;\n color: var(--color-text-subtle-primary);\n fill: var(--color-text-subtle-primary);\n}\n\n.Form .FormField .Form-label,\n.Form .FormField .is-invalid .Form-label {\n color: var(--color-text);\n}\n\n.FormField-errorMessage {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n.FormField.Form-group {\n margin: 1rem 0;\n}\n\n.FormField.Form-group:first-child {\n margin-top: 0;\n}\n",".Form-hint {\n display: block;\n margin-top: 0.3rem;\n font-size: 1.3rem;\n font-weight: var(--font-weight-regular);\n color: var(--color-text-subtle-primary);\n}\n","/* stylelint-disable no-descending-specificity */\n\n.FormInput {\n display: block;\n width: 100%;\n padding: 0.6rem 1rem;\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n background-color: var(--color-background-field);\n color: var(--color-text);\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n transition: all 100ms linear;\n}\n\n.FormInput:placeholder-shown {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\ninput.FormInput,\nselect.FormInput {\n height: 3.2rem;\n}\n\n.FormInput.is-disabled,\ninput.FormInput:disabled,\nselect.FormInput:disabled,\ninput.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\n.FormInput.is-disabled:hover,\n.FormInput:disabled:hover {\n cursor: not-allowed;\n}\n\ntextarea.FormInput {\n min-height: 2.5em;\n resize: none;\n}\n\ntextarea.FormInput:disabled,\ntextarea.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\ninput.FormInput::-webkit-autofill {\n box-shadow: 0 0 0 50px var(--color-background-field) inset;\n}\n\n/* Hide the type=search cancel button in Webkit for consistency */\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n display: none;\n}\n\n/* Hide the type=search cancel button in IE for consistency */\ninput[type='text']::-ms-clear,\ninput[type='text']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='search']::-ms-clear,\ninput[type='search']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='checkbox']:disabled {\n pointer-events: none;\n}\n\ninput.FormInput--tiny {\n padding: 0.1rem 0.6rem;\n height: 2.4rem;\n}\n\n.FormInput.is-focused,\n.FormInput:focus {\n outline: 0;\n border-color: var(--color-focus);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput[readonly],\n.FormInput[readonly]:focus {\n color: var(--color-text-subtle-primary);\n border-color: var(--color-gray-500);\n box-shadow: none;\n}\n\n.Form-checkbox {\n align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */\n flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */\n margin-right: 0.5rem;\n margin-top: 0.4rem;\n}\n\n.Form-radio {\n margin-right: 0.5rem;\n}\n\n.FormInput-select {\n appearance: none;\n background: transparent;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>');\n background-size: 2rem;\n background-repeat: no-repeat;\n background-position: right 0.4em top 50%, 0 0;\n padding-right: 2rem;\n}\n\n.FormInput-number {\n min-width: 4.5rem;\n}\n\n.FormInput-suffixContainer {\n display: inline-flex;\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n overflow: hidden;\n transition: all 0.1s linear;\n}\n\n.FormInput-suffixContainer:focus-within {\n border-color: var(--color-focus);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput-suffixContainer .FormInput {\n border: none;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n}\n\n.FormInput-suffixContainer .FormInput:focus {\n box-shadow: none;\n}\n\n.FormInput-suffixContainer label.FormInput-suffix {\n padding: 0 2px;\n background-color: var(--color-gray-100);\n color: var(--color-gray-500);\n cursor: text;\n display: inline-flex;\n align-items: center;\n position: initial;\n}\n\ninput.FormInput-suffix::-webkit-outer-spin-button,\ninput.FormInput-suffix::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput.FormInput-suffix[type='number'] {\n appearance: textfield;\n}\n\n/* stylelint-enable no-descending-specificity */\n",".IconField {\n position: relative;\n}\n\n.IconField .FormInput {\n padding-left: 3rem;\n}\n\n.FormInput ~ .Icon {\n position: absolute;\n fill: var(--color-gray-600);\n top: 50%;\n transform: translateY(-50%);\n left: 1rem;\n}\n",".InputGroup {\n display: flex;\n}\n\n.InputGroup > * + * {\n margin-left: 1rem;\n}\n",".RequiredAsterisk {\n color: var(--color-system-red-700);\n}\n"],"names":[]}
|