access-nyc-patterns
Version:
User Interface Patterns for Benefits Access
1 lines • 17.6 kB
CSS
.fsBody,html{font-size:22px;line-height:1.4;font-family:Noto Sans,sans-serif}.fsBody{color:initial;background-color:#fff;padding:8px 0 0}.fsBody ol,.fsBody p,.fsBody ul{margin-top:0;margin-bottom:.36rem}.fsBody .fsPage{min-width:auto}.fsBody .fsForm{font-size:.72rem;background-color:#fff;margin:0;max-width:1200px;min-height:100%;min-width:320px;width:auto;padding:0 24px 24px}.fsBody .fsForm .fsSectionHeader{margin:0;padding:0;background-color:transparent}.fsBody .fsForm .fsSectionHeading{font-weight:400;line-height:1.3;font-family:Noto Serif,serif;color:#112e51;font-size:1.45rem;text-align:left;border-bottom:1px solid;border-color:#505c66;padding-bottom:32px;margin-bottom:24px;padding-top:32px}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField,.fsBody .fsForm textarea.fsField{color:initial;font-family:inherit;font-size:inherit;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #505c66;border-radius:0;display:block;max-width:100%;min-width:200px;width:100%;margin:0;cursor:pointer;color:#505c66;padding:18px;max-width:100%;min-width:200px;height:auto}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField:-ms-input-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField::-ms-input-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField:-ms-input-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField::-ms-input-placeholder,.fsBody .fsForm textarea.fsField:-ms-input-placeholder,.fsBody .fsForm textarea.fsField::-ms-input-placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField::-webkit-input-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField::-webkit-input-placeholder,.fsBody .fsForm textarea.fsField::-webkit-input-placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField::-moz-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField::-moz-placeholder,.fsBody .fsForm textarea.fsField::-moz-placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField:-ms-input-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField:-ms-input-placeholder,.fsBody .fsForm textarea.fsField:-ms-input-placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField::-ms-input-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField::-ms-input-placeholder,.fsBody .fsForm textarea.fsField::-ms-input-placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField::placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField::placeholder,.fsBody .fsForm textarea.fsField::placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsFieldName{width:100%}.fsBody .fsForm select.fsField,.fsBody .fsForm select.fsField:not([multiple=multiple]){color:initial;font-family:inherit;font-size:inherit;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #505c66;border-radius:0;display:block;max-width:100%;min-width:200px;width:100%;margin:0;cursor:pointer;background-color:#fff;background-image:url(https://cdn.jsdelivr.net/gh/CityOfNewYork/ACCESS-NYC-PATTERNS@v0.7.0/dist/svg/icon-ui-chevron-down.svg);background-position:right .5rem center;background-repeat:no-repeat;background-size:24px 24px;padding:18px 2.8rem 18px 18px;display:inline-block;float:none;height:auto;width:auto}.fsBody .fsForm select.fsField::-ms-expand,.fsBody .fsForm select.fsField:not([multiple=multiple])::-ms-expand{display:none}.fsBody .fsForm .fsFieldRow{margin-bottom:24px}.fsBody .fsForm [fs-field-type=checkbox] .fsOptionLabel.vertical,.fsBody .fsForm [fs-field-type=radio] .fsOptionLabel.vertical{display:-webkit-box;display:-ms-flexbox;display:flex}.fsBody .fsForm [fs-field-type=checkbox] .fsOptionLabel.horizontal,.fsBody .fsForm [fs-field-type=radio] .fsOptionLabel.horizontal{font-size:22px;font-weight:700;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;background:#fff;border:1px solid #505c66;border-radius:8px;cursor:pointer;line-height:30px;margin-right:12px;position:relative;display:inline-block;padding:8px;margin-bottom:0}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content select.fsField,.fsBody .fsForm [fs-field-type=datetime] .fieldset-content select.fsField:not([multiple=multiple]),.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup select.fsField,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup select.fsField:not([multiple=multiple]){width:100%;margin-bottom:8px}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content .fsCalendarPickerLink,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup .fsCalendarPickerLink{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content .ui-datepicker-trigger,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup .ui-datepicker-trigger{display:none}.fsBody .fsForm .fsLabel{display:inline-block;font-size:22px;font-weight:700;vertical-align:top;color:initial;margin-bottom:18px;display:block;max-width:100%}.fsBody .fsForm .fsRequiredMarker{color:#c6252b}.fsBody .fsForm .fieldset-content>:last-child,.fsBody .fsForm .fsSubFieldGroup>:last-child{margin-bottom:0}.fsBody .fsForm .fsSupporting{font-size:medium;font-weight:400;font-style:normal;line-height:normal;color:initial}.fsBody .fsForm .fsCurrency~input.fsField{max-width:100%;min-width:200px;width:100%}.fsBody .fsForm .fsCurrencyPrefix{color:#0d6d3b;font-size:22px;font-weight:700;position:absolute;line-height:57px;margin-left:10px;pointer-events:none;width:auto}.fsBody .fsForm .fsCurrencyPrefix+input:not([type=checkbox]):not([type=radio]).fsField{padding-left:30px}.fsBody .fsForm .fsOptionLabel{font-size:22px;font-weight:700;padding-left:6px;padding-top:6px;padding-bottom:6px;cursor:pointer;display:block;margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:30px;color:initial;border:none;background:none}.fsBody .fsForm .fsOptionLabel input[type=checkbox],.fsBody .fsForm .fsOptionLabel input[type=radio]{top:auto;border:none;width:30px;height:30px;min-width:30px;margin-right:12px;overflow:visible}.fsBody .fsForm .fsOptionLabel input[type=radio]:before{-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;background:#fff;border:1px solid #505c66;border-radius:50%;content:"";display:inline-block;width:30px;height:30px;min-width:30px;margin-right:12px;display:block}.fsBody .fsForm .fsOptionLabel input[type=radio]:checked:before{background-color:#184e9e}.fsBody .fsForm .fsOptionLabel input[type=radio]:checked:before,.fsBody .fsForm .fsOptionLabel input[type=radio]:focus:before{-webkit-box-shadow:0 0 0 2px #184e9e inset,0 0 0 4px #fff inset;box-shadow:inset 0 0 0 2px #184e9e,inset 0 0 0 4px #fff;border:0}.fsBody .fsForm .fsOptionLabel input[type=checkbox]:before{-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;background:#fff;border:1px solid #505c66;border-radius:8px;content:"";display:inline-block;width:30px;height:30px;min-width:30px;margin-right:12px;display:block}.fsBody .fsForm .fsOptionLabel input[type=checkbox]:checked:before{background:#184e9e url(https://cdn.jsdelivr.net/gh/CityOfNewYork/ACCESS-NYC-PATTERNS@v0.7.0/dist/svg/icon-checkmark-white.svg) no-repeat;background-size:cover;border:0}.fsBody .fsForm .fsOptionLabel input[type=checkbox]:focus:before{border:0;-webkit-box-shadow:0 0 0 1px #fff,0 0 0 3px #184e9e;box-shadow:0 0 0 1px #fff,0 0 0 3px #184e9e}.fsBody .fsForm .fsValidationError{background-color:initial;-webkit-box-shadow:none;box-shadow:none}.fsBody .fsForm .fsValidationError .fieldset-content,.fsBody .fsForm .fsValidationError .fsSubFieldGroup{position:relative}.fsBody .fsForm .fsValidationError .fieldset-content:before,.fsBody .fsForm .fsValidationError .fsSubFieldGroup:before{position:absolute;top:-12px;bottom:-24px;left:-19px;border-left:3px solid #c6252b;content:"";display:block;width:0}.fsBody .fsForm .fsValidationError select.fsField,.fsBody .fsForm .fsValidationError select.fsField:not([multiple=multiple]){color:initial;border-color:#c6252b;background-image:url(https://cdn.jsdelivr.net/gh/CityOfNewYork/ACCESS-NYC-PATTERNS@v0.7.0/dist/svg/icon-ui-chevron-down.svg)}.fsBody .fsForm .fsValidationError input:not([type=checkbox]):not([type=radio]).fsField,.fsBody .fsForm .fsValidationError input:not([type=checkbox]):not([type=radio]).fsOtherField,.fsBody .fsForm .fsValidationError textarea.fsField{color:initial;border-color:#c6252b}.fsBody .fsForm .fsValidationError input[type=checkbox]:before,.fsBody .fsForm .fsValidationError input[type=radio]:before{border-color:#505c66}.fsBody .fsForm .fsValidationError .fsLabel,.fsBody .fsForm .fsValidationError .fsOptionLabel{color:initial}.fsBody .fsForm .fsFieldFocused:not(.fsValidationError).fsSpan100{margin:0;padding:0}.fsBody .fsForm [fs-field-type=richtext]{font-size:.72rem;background:#eef3f7;border:1px solid #d1d5d9;padding:24px}.fsBody .fsForm [fs-field-type=richtext]>p:last-child{margin-bottom:0}.fsBody .fsForm [fs-field-type=richtext] small{font-size:.54rem;line-height:1.4;margin:0;display:inline-block}.fsBody .fsForm .fsNextButton,.fsBody .fsForm .fsPreviousButton,.fsBody .fsForm .fsSubmitButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:background .2s ease-in,color .2s ease-in;-o-transition:background .2s ease-in,color .2s ease-in;transition:background .2s ease-in,color .2s ease-in;font-weight:700;font-size:1.09rem;line-height:1.3;font-family:Noto Sans,sans-serif;line-height:1;background-color:#fff;border:0;border-radius:5px;display:inline-block;padding:16px 24px;text-align:center;text-decoration:none;cursor:pointer;border-radius:5px;font-size:1.09rem;width:auto;height:auto}.fsBody .fsForm .fsNextButton .icon,.fsBody .fsForm .fsPreviousButton .icon,.fsBody .fsForm .fsSubmitButton .icon{vertical-align:middle}.fsBody .fsForm .fsNextButton .fsFull,.fsBody .fsForm .fsPreviousButton .fsFull,.fsBody .fsForm .fsSubmitButton .fsFull{display:block}.fsBody .fsForm .fsNextButton:before,.fsBody .fsForm .fsPreviousButton:before,.fsBody .fsForm .fsSubmitButton:before{content:""}.fsBody .fsForm .fsSubmitButton{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-top:0;clear:both}.fsBody .fsForm .fsSubmitButton,.fsBody .fsForm .fsSubmitButton:link,.fsBody .fsForm .fsSubmitButton:visited{color:#fff;background-color:#184e9e}.fsBody .fsForm .fsSubmitButton:active,.fsBody .fsForm .fsSubmitButton:focus,.fsBody .fsForm .fsSubmitButton:hover{color:#fff;background-color:#1658b9}.fsBody .fsForm .fsPreviousButton{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;padding-left:40px;margin-bottom:32px}.fsBody .fsForm .fsPreviousButton,.fsBody .fsForm .fsPreviousButton:link,.fsBody .fsForm .fsPreviousButton:visited{color:#fff;background-color:#184e9e}.fsBody .fsForm .fsPreviousButton:active,.fsBody .fsForm .fsPreviousButton:focus,.fsBody .fsForm .fsPreviousButton:hover{color:#fff;background-color:#1658b9}.fsBody .fsForm .fsPreviousButton:before{content:"";position:absolute;display:inline-block;border-bottom:.3em solid transparent;border-right:.4em solid;border-right-color:inherit;border-top:.3em solid transparent;top:50%;margin-top:-.3em;margin-left:24px;left:-.3em}.fsBody .fsForm .fsNextButton{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;padding-right:40px;margin-bottom:32px}.fsBody .fsForm .fsNextButton,.fsBody .fsForm .fsNextButton:link,.fsBody .fsForm .fsNextButton:visited{color:#fff;background-color:#184e9e}.fsBody .fsForm .fsNextButton:active,.fsBody .fsForm .fsNextButton:focus,.fsBody .fsForm .fsNextButton:hover{color:#fff;background-color:#1658b9}.fsBody .fsForm .fsNextButton:after{content:"";position:absolute;display:inline-block;border-bottom:.3em solid transparent;border-left:.4em solid;border-left-color:inherit;border-top:.3em solid transparent;top:50%;margin-top:-.3em;margin-right:24px;right:-.3em}.fsBody .fsForm .fsCalendarPickerLink{display:none;color:initial;font-family:inherit;font-size:inherit;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;display:block;max-width:100%;min-width:200px;width:100%;color:#505c66;padding:18px;color:transparent;background-image:url(https://cdn.jsdelivr.net/gh/CityOfNewYork/ACCESS-NYC-PATTERNS@v0.7.0/dist/svg/icon-ui-calendar.svg);background-repeat:no-repeat;background-position:50%;background-size:24px 24px;border-radius:5px;border:2px solid #184e9e;cursor:pointer;height:auto;margin:0 0 8px}.fsBody .fsForm .fsCalendarPickerLink:-ms-input-placeholder,.fsBody .fsForm .fsCalendarPickerLink::-ms-input-placeholder{color:#505c66}.fsBody .fsForm .fsCalendarPickerLink::-webkit-input-placeholder{color:#505c66}.fsBody .fsForm .fsCalendarPickerLink::-moz-placeholder{color:#505c66}.fsBody .fsForm .fsCalendarPickerLink:-ms-input-placeholder{color:#505c66}.fsBody .fsForm .fsCalendarPickerLink::-ms-input-placeholder{color:#505c66}.fsBody .fsForm .fsCalendarPickerLink::placeholder{color:#505c66}.fsBody .fsForm .ui-datepicker-trigger{display:none}.fsBody .fsForm div.fsProgress{margin:0;position:fixed;top:0;left:0;width:100%}.fsBody .fsForm div.fsProgress .fsProgressBarContainer{background-color:#fff;height:8px}.fsBody .fsForm div.fsProgress .fsProgressText{display:none}.fsBody .fsForm div.fsProgress .fsProgressBar{background-color:#118df0}.fsBody .fsForm .fsPagination{margin-top:0;padding-top:16px;padding-bottom:0}.fsBody .fsForm #fsSubmissionCheckmark{background-image:url(https://cdn.jsdelivr.net/gh/CityOfNewYork/ACCESS-NYC-PATTERNS@v0.7.0/dist/svg/icon-success-green.svg);margin:24px 0}.fsBody .fsForm #fsSubmissionCheckmark+.fsSectionHeading{text-align:center;border:none}@media screen and (min-width:480px){.fsBody .fsForm [fs-field-type=name] .fieldset-content,.fsBody .fsForm [fs-field-type=name] .fsSubFieldGroup{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.fsBody .fsForm [fs-field-type=name] .fieldset-content .fsSubField,.fsBody .fsForm [fs-field-type=name] .fsSubFieldGroup .fsSubField{-webkit-box-flex:1;-ms-flex:1;flex:1;width:calc(50% - 16px);max-width:calc(50% - 16px);-ms-flex-preferred-size:calc(50% - 16px);flex-basis:calc(50% - 16px);margin:0}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content select.fsField,.fsBody .fsForm [fs-field-type=datetime] .fieldset-content select.fsField:not([multiple=multiple]),.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup select.fsField,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup select.fsField:not([multiple=multiple]){-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:calc(33.33% - 16px);flex-basis:calc(33.33% - 16px);width:calc(33.33% - 16px);max-width:calc(33.33% - 16px);min-width:inherit;margin-right:0}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content .fsCalendarPickerLink,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup .fsCalendarPickerLink{margin-top:-8px}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content .ui-datepicker-trigger,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup .ui-datepicker-trigger{display:none}.fsBody .fsForm .fsCalendarPickerLink{width:24px;min-width:24px;height:24px;border:0;padding:0}}@media screen and (min-width:768px){.fsBody .fsForm .fsSectionHeading{font-size:1.81rem}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField,.fsBody .fsForm textarea.fsField{width:auto}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsFieldName{width:100%}.fsBody .fsForm [fs-field-type=name] .fieldset-content,.fsBody .fsForm [fs-field-type=name] .fsSubFieldGroup{max-width:100%;width:447px}}@media screen and (min-width:960px){.fsBody{background-color:#eef3f7;padding-left:96px;padding-right:96px}.fsBody .fsForm{border:1px solid #d1d5d9;padding-left:32px;padding-right:32px;padding-bottom:32px;margin:64px auto}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup{width:447px}}@media screen and (max-width:480px){.fsBody .fsForm .fsSubmitButton{width:100%;display:block;float:none}}