@jaredpdesigns/pasta/controls.css

Pasta provides a great starting place for web projects. It combines light styling for common web elements, yummy!

@layer props{:root{--control__font-size:var(--type__size--m);--control__line-height:var(--type__lineheight--l);--control__padding--block:var(--size__s);--control__padding--inline:var(--size__m);--control__radius:var(--size__s);--control__size:clamp(var(--size__xl),var(--type__size--target),var(--size__xxl))}}@layer reset{input,button,textarea,select{font:inherit}fieldset{border:none}}@layer config{details:not([class]),details.styled{--radius:var(--size__s);border:var(--size__xxs) solid var(--color__base--light);border-radius:var(--radius)}details:not([class]) summary,details.styled summary{border-radius:var(--radius);font-size:var(--type__size--m);line-height:var(--type__lineheight--l);list-style:revert;padding-block:var(--size__s);padding-inline:var(--size__m)}details:not([class]) summary::marker,details.styled summary::marker{color:var(--color__base--mid)}details:not([class]) summary+*,details.styled summary+*{background-color:var(--color__base--ghost);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);border-block-start:var(--size__xxs) solid var(--color__base--light);padding-block:var(--size__s);padding-inline:var(--size__m)}details:not([class])[open] summary,details.styled[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}}@layer reset{:where(*[class^="button__"],*[class^="control__"] input,*[class^="control__"] select){all:unset;box-sizing:border-box;display:revert}:where(*[class^="button__"],*[class^="control__"] input,*[class^="control__"] select):before,:where(*[class^="button__"],*[class^="control__"] input,*[class^="control__"] select):after{box-sizing:border-box}.button__primary,.button__secondary,.button__tertiary{--color__bg:var(--color__highlight);--color__border:var(--color__highlight);--color__type:var(--color__contrast--fixed);align-items:center;background-color:var(--color__bg);border-color:var(--color__border);border-radius:var(--control__radius);color:var(--color__type);cursor:pointer;display:inline-flex;font-size:var(--control__font-size);gap:var(--size__s);justify-content:center;line-height:var(--control__line-height)}.button__primary:focus,.button__primary:hover,.button__primary:focus-visible,.button__secondary:focus,.button__secondary:hover,.button__secondary:focus-visible,.button__tertiary:focus,.button__tertiary:hover,.button__tertiary:focus-visible{transition:all 0.375s ease-in;transition-property:background-color,border-color,color,opacity}.button__primary[disabled],.button__secondary[disabled],.button__tertiary[disabled]{cursor:not-allowed}.button__primary,.button__secondary{border:var(--size__xxs) solid var(--color__border);padding-block:var(--control__padding--block);padding-inline:var(--control__padding--inline)}.button__primary.button__micro,.button__secondary.button__micro{padding-block:calc(var(--control__padding--block) / 2);padding-inline:calc(var(--control__padding--inline) / 2)}.button__primary:focus:not([disabled]),.button__primary:hover:not([disabled]){--color__bg:var(--color__highlight--ish)}.button__primary[disabled]{--color__bg:var(--color__highlight--mid)}.button__secondary,.button__tertiary{--color__type:var(--color__base--ish)}.button__secondary:focus:not([disabled]),.button__secondary:hover:not([disabled]),.button__tertiary:focus:not([disabled]),.button__tertiary:hover:not([disabled]){--color__type:var(--color__base)}.button__secondary{--color__bg:var(--color__contrast--adaptive);--color__border:var(--color__base--light)}.button__secondary:focus:not([disabled]),.button__secondary:hover:not([disabled]){--color__border:var(--color__base--semi)}.button__secondary[disabled]{--color__bg:var(--color__base--ghost)}.button__tertiary{--color__bg:transparent}.button__tertiary:focus:not([disabled]),.button__tertiary:hover:not([disabled]){opacity:0.75}.button__tertiary[disabled]{opacity:0.5}.control__input legend,.control__select legend,.control__checkbox legend,.control__radio legend,.control__toggle legend,.control__input label,.control__select label{color:var(--color__base--ish);display:block;font-size:var(--type__size--xs);font-weight:600;letter-spacing:var(--size__xxs);line-height:var(--type__lineheight--l);text-transform:uppercase}.control__input legend+*,.control__select legend+*,.control__checkbox legend+*,.control__radio legend+*,.control__toggle legend+*,.control__input label+*,.control__select label+*{margin-block-start:var(--size__s)}.control__input input,.control__input select,.control__input textarea,.control__select input,.control__select select,.control__select textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color__contrast--adaptive);border:var(--size__xxs) solid var(--color__base--semi);border-radius:var(--control__radius);color:var(--color__base);font-size:var(--control__font-size);line-height:var(--control__line-height);min-height:var(--control__size);padding-block:var(--control__padding--block);padding-inline:var(--control__padding--inline);width:100%}.control__input input::-moz-placeholder, .control__input select::-moz-placeholder, .control__input textarea::-moz-placeholder, .control__select input::-moz-placeholder, .control__select select::-moz-placeholder, .control__select textarea::-moz-placeholder{color:var(--color__base--mid)}.control__input input::placeholder,.control__input select::placeholder,.control__input textarea::placeholder,.control__select input::placeholder,.control__select select::placeholder,.control__select textarea::placeholder{color:var(--color__base--mid)}.control__input input:hover,.control__input select:hover,.control__input textarea:hover,.control__select input:hover,.control__select select:hover,.control__select textarea:hover{background-color:var(--color__highlight--ghost);border-color:var(--color__highlight);transition:all 0.375s ease-in;transition-property:background-color,border-color,color}.control__input input[disabled],.control__input select[disabled],.control__input textarea[disabled],.control__select input[disabled],.control__select select[disabled],.control__select textarea[disabled]{background-color:var(--color__base--ghost);color:var(--color__base--ish);cursor:not-allowed}.control__input input[disabled]::-moz-placeholder, .control__input select[disabled]::-moz-placeholder, .control__input textarea[disabled]::-moz-placeholder, .control__select input[disabled]::-moz-placeholder, .control__select select[disabled]::-moz-placeholder, .control__select textarea[disabled]::-moz-placeholder{color:var(--color__base--semi)}.control__input input[disabled]::placeholder,.control__input select[disabled]::placeholder,.control__input textarea[disabled]::placeholder,.control__select input[disabled]::placeholder,.control__select select[disabled]::placeholder,.control__select textarea[disabled]::placeholder{color:var(--color__base--semi)}.control__input input[disabled]:hover,.control__input select[disabled]:hover,.control__input textarea[disabled]:hover,.control__select input[disabled]:hover,.control__select select[disabled]:hover,.control__select textarea[disabled]:hover{background-color:var(--color__base--ghost);border-color:var(--color__base--semi);cursor:not-allowed}.control__input select,.control__select select{text-indent:0.01px;text-overflow:""}.control__input select::-ms-expand,.control__select select::-ms-expand{display:none}.control__select span{display:block;position:relative}.control__select span:after{background-color:var(--color__base--semi);block-size:var(--size__m);content:"";display:block;inline-size:var(--size__m);inset-block-start:50%;inset-inline-end:var(--control__padding--inline);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.0000258,16.5154845 L22.7701434,8.9931316 C23.8785204,7.76160154 25.7753899,7.6617663 27.00692,8.77014336 C28.2384501,9.87852042 28.3382853,11.7753899 27.2299082,13.00692 L18.2299082,23.00692 C17.0381813,24.3310611 14.9618703,24.3310611 13.7701434,23.00692 L4.77014336,13.00692 C3.6617663,11.7753899 3.76160154,9.87852042 4.9931316,8.77014336 C6.22466167,7.6617663 8.12153118,7.76160154 9.22990824,8.9931316 L16.0000258,16.5154845 Z'%3E%3C/path%3E%3C/svg%3E") center /contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.0000258,16.5154845 L22.7701434,8.9931316 C23.8785204,7.76160154 25.7753899,7.6617663 27.00692,8.77014336 C28.2384501,9.87852042 28.3382853,11.7753899 27.2299082,13.00692 L18.2299082,23.00692 C17.0381813,24.3310611 14.9618703,24.3310611 13.7701434,23.00692 L4.77014336,13.00692 C3.6617663,11.7753899 3.76160154,9.87852042 4.9931316,8.77014336 C6.22466167,7.6617663 8.12153118,7.76160154 9.22990824,8.9931316 L16.0000258,16.5154845 Z'%3E%3C/path%3E%3C/svg%3E") center /contain no-repeat;position:absolute;transform:translateY(-50%)}.control__checkbox label,.control__radio label,.control__toggle label{align-items:center;cursor:pointer;display:inline-flex;grid-auto-flow:column}.control__checkbox label>span,.control__radio label>span,.control__toggle label>span{align-items:center;display:inline-flex}.control__checkbox label+label,.control__radio label+label,.control__toggle label+label{margin-inline-start:var(--size__m)}.control__checkbox input[type="checkbox"],.control__checkbox input[type="radio"],.control__radio input[type="checkbox"],.control__radio input[type="radio"],.control__toggle input[type="checkbox"],.control__toggle input[type="radio"]{opacity:0}.control__checkbox input[type="checkbox"]:focus-visible+span:before,.control__checkbox input[type="radio"]:focus-visible+span:before,.control__radio input[type="checkbox"]:focus-visible+span:before,.control__radio input[type="radio"]:focus-visible+span:before,.control__toggle input[type="checkbox"]:focus-visible+span:before,.control__toggle input[type="radio"]:focus-visible+span:before{outline:var(--outline__size) var(--outline__style) var(--outline__color);outline-offset:var(--outline__offset,var(--outline__size))}.control__checkbox input[type="checkbox"]+span:before,.control__checkbox input[type="radio"]+span:before,.control__radio input[type="checkbox"]+span:before,.control__radio input[type="radio"]+span:before,.control__toggle input[type="checkbox"]+span:before,.control__toggle input[type="radio"]+span:before{--size:calc(var(--size__m) + var(--size__s));align-items:center;background-color:var(--color__contrast--adaptive);background-position:center;background-repeat:no-repeat;border:var(--size__xxs) solid var(--color__base--semi);color:var(--color__base--semi);content:"";display:inline-flex;height:var(--size);justify-content:center;margin-right:var(--size__s);width:var(--size)}.control__checkbox input[type="checkbox"]:hover+span:before,.control__checkbox input[type="radio"]:hover+span:before,.control__radio input[type="checkbox"]:hover+span:before,.control__radio input[type="radio"]:hover+span:before,.control__toggle input[type="checkbox"]:hover+span:before,.control__toggle input[type="radio"]:hover+span:before{border-color:var(--color__base--mid);transition:all 0.375s ease-in;transition-property:background,border-color,color}.control__checkbox input[type="checkbox"]:checked+span:before,.control__checkbox input[type="radio"]:checked+span:before,.control__radio input[type="checkbox"]:checked+span:before,.control__radio input[type="radio"]:checked+span:before,.control__toggle input[type="checkbox"]:checked+span:before,.control__toggle input[type="radio"]:checked+span:before{background-color:var(--color__highlight)}.control__checkbox input[type="checkbox"]:checked:hover+span:before,.control__checkbox input[type="radio"]:checked:hover+span:before,.control__radio input[type="checkbox"]:checked:hover+span:before,.control__radio input[type="radio"]:checked:hover+span:before,.control__toggle input[type="checkbox"]:checked:hover+span:before,.control__toggle input[type="radio"]:checked:hover+span:before{background-color:var(--color__highlight--dark)}.control__checkbox input[type="checkbox"][disabled]+span,.control__checkbox input[type="radio"][disabled]+span,.control__radio input[type="checkbox"][disabled]+span,.control__radio input[type="radio"][disabled]+span,.control__toggle input[type="checkbox"][disabled]+span,.control__toggle input[type="radio"][disabled]+span{color:var(--color__base--mid);cursor:not-allowed}.control__checkbox input[type="checkbox"][disabled]+span:before,.control__checkbox input[type="radio"][disabled]+span:before,.control__radio input[type="checkbox"][disabled]+span:before,.control__radio input[type="radio"][disabled]+span:before,.control__toggle input[type="checkbox"][disabled]+span:before,.control__toggle input[type="radio"][disabled]+span:before{background-color:var(--color__base--ghost);border-color:var(--color__base--light)}.control__checkbox input[type="checkbox"][disabled]:checked+span:before,.control__checkbox input[type="radio"][disabled]:checked+span:before,.control__radio input[type="checkbox"][disabled]:checked+span:before,.control__radio input[type="radio"][disabled]:checked+span:before,.control__toggle input[type="checkbox"][disabled]:checked+span:before,.control__toggle input[type="radio"][disabled]:checked+span:before{background-color:var(--color__base--mid);color:var(--color__base--mid)}.control__checkbox input[type="checkbox"]+span:before,.control__radio input[type="checkbox"]+span:before,.control__toggle input[type="checkbox"]+span:before{border-radius:calc(var(--control__radius) / 2);font-size:var(--type__size--xs);font-weight:bold}.control__checkbox input[type="radio"]+span:before,.control__radio input[type="radio"]+span:before,.control__toggle input[type="radio"]+span:before{border-radius:50%}.control__checkbox input[type="radio"]:checked+span:before,.control__radio input[type="radio"]:checked+span:before,.control__toggle input[type="radio"]:checked+span:before{box-shadow:inset 0 0 0 calc(var(--size__xxs) * 2) var(--color__contrast)}.control__checkbox input[type="radio"]:checked:focus-visible+span:before,.control__radio input[type="radio"]:checked:focus-visible+span:before,.control__toggle input[type="radio"]:checked:focus-visible+span:before{outline:var(--outline__size) var(--outline__style) var(--outline__color);outline-offset:var(--outline__offset,var(--outline__size))}.control__checkbox span,.control__radio span,.control__toggle span{color:var(--color__base);font-size:var(--control__font-size);line-height:var(--control__line-height);position:relative}.control__checkbox input[type="checkbox"]:checked+span:after,.control__checkbox input[type="checkbox"]:indeterminate+span:after{block-size:var(--size__m);content:"";display:block;inline-size:var(--size__m);inset-inline-start:var(--size__xs);position:absolute}.control__checkbox input[type="checkbox"]:checked+span:after{background-color:white;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22.5041679,5.33621823 C23.4232253,3.95763217 25.2858333,3.58511056 26.6644194,4.50416794 C28.0430055,5.42322532 28.4155271,7.28583334 27.4964697,8.66441941 L15.4964697,26.6644194 C14.3090036,28.4456186 11.6916341,28.4456186 10.5041679,26.6644194 L4.50416794,17.6644194 C3.58511056,16.2858333 3.95763217,14.4232253 5.33621823,13.5041679 C6.7148043,12.5851106 8.57741233,12.9576322 9.4964697,14.3362182 L13.0003188,19.5919919 L22.5041679,5.33621823 Z'%3E%3C/path%3E%3C/svg%3E") center /contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22.5041679,5.33621823 C23.4232253,3.95763217 25.2858333,3.58511056 26.6644194,4.50416794 C28.0430055,5.42322532 28.4155271,7.28583334 27.4964697,8.66441941 L15.4964697,26.6644194 C14.3090036,28.4456186 11.6916341,28.4456186 10.5041679,26.6644194 L4.50416794,17.6644194 C3.58511056,16.2858333 3.95763217,14.4232253 5.33621823,13.5041679 C6.7148043,12.5851106 8.57741233,12.9576322 9.4964697,14.3362182 L13.0003188,19.5919919 L22.5041679,5.33621823 Z'%3E%3C/path%3E%3C/svg%3E") center /contain no-repeat}.control__checkbox input[type="checkbox"]:indeterminate+span:after{background-color:var(--color__base--semi);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25,13 C26.6568542,13 28,14.3431458 28,16 C28,17.6568542 26.6568542,19 25,19 L7,19 C5.34314575,19 4,17.6568542 4,16 C4,14.3431458 5.34314575,13 7,13 L25,13 Z'%3E%3C/path%3E%3C/svg%3E") center /contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25,13 C26.6568542,13 28,14.3431458 28,16 C28,17.6568542 26.6568542,19 25,19 L7,19 C5.34314575,19 4,17.6568542 4,16 C4,14.3431458 5.34314575,13 7,13 L25,13 Z'%3E%3C/path%3E%3C/svg%3E") center /contain no-repeat}.control__toggle input[type="checkbox"]+span:before{border-radius:calc(var(--size) / 2);width:var(--size__xl)}.control__toggle input[type="checkbox"]+span:after{background-color:var(--color__base--semi);border-radius:50%;content:"";display:block;height:var(--size__m);inset-inline-start:calc(var(--size__xs));position:absolute;width:var(--size__m)}.control__toggle input[type="checkbox"][disabled]+span:before{background-color:var(--color__base--ghost)}.control__toggle input[type="checkbox"][disabled]+span:after{background-color:var(--color__base--light)}.control__toggle input[type="checkbox"]:checked+span:after{background-color:var(--color__contrast);transform:scale(1.375) translateX(calc(100% - (var(--size__xs) + var(--size__xxs))))}.control__toggle input[type="checkbox"]:hover+span:after{transition:all 0.375s ease-in;transition-property:background-color,transform}}