access-nyc-patterns/dist/components/filter/filter.css

User Interface Patterns for Benefits Access

.c-filter__header{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#fff;font-size:inherit;font-family:inherit;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;text-align:left;border:none;background:#118df0;border-radius:5px;display:block;width:100%;padding:18px 24px;cursor:pointer}.c-filter__header:active,.c-filter__header:focus,.c-filter__header:hover,.c-filter__header:link,.c-filter__header:visited{color:#fff}.c-filter__header:after{height:0;width:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.4em solid #fff;content:"";float:right;margin-top:.5em}.c-filter__header.active{border-radius:5px 5px 0 0}.c-filter__header.active:after{height:0;width:0;border-bottom:.4em solid #fff;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:0;content:"";float:right;margin-top:.5em}.c-filter__list{-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;list-style:none;margin:20;max-height:0;overflow:hidden;padding:0;visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.c-filter__list.active{visibility:visible;max-height:2000px}.c-filter__item{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font-size:inherit;font-family:inherit;text-align:left;cursor:pointer;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#112e51;display:block;width:100%;margin:0;padding:16px 24px;text-decoration:none}.c-filter-list li:last-child .c-filter__item{border-radius:0 0 5px 5px}.c-filter a.c-filter__item:not(.btn),.c-filter button.c-filter__item,.c-filter label.c-filter__item{color:#fff;text-decoration:none;-webkit-transition:background .2s ease-in;-o-transition:background .2s ease-in;transition:background .2s ease-in}.c-filter a.c-filter__item:not(.btn):visited,.c-filter button.c-filter__item:visited,.c-filter label.c-filter__item:visited{color:#fff;text-decoration:none}.c-filter a.c-filter__item:not(.btn).focused,.c-filter a.c-filter__item:not(.btn):active,.c-filter a.c-filter__item:not(.btn):focus,.c-filter a.c-filter__item:not(.btn):hover,.c-filter button.c-filter__item.focused,.c-filter button.c-filter__item:active,.c-filter button.c-filter__item:focus,.c-filter button.c-filter__item:hover,.c-filter label.c-filter__item.focused,.c-filter label.c-filter__item:active,.c-filter label.c-filter__item:focus,.c-filter label.c-filter__item:hover{color:#fff;background:#184e9e;cursor:pointer}.c-filter a.c-filter__item:not(.btn).active.focused,.c-filter a.c-filter__item:not(.btn).active:active,.c-filter a.c-filter__item:not(.btn).active:focus,.c-filter a.c-filter__item:not(.btn).active:hover,.c-filter button.c-filter__item.active.focused,.c-filter button.c-filter__item.active:active,.c-filter button.c-filter__item.active:focus,.c-filter button.c-filter__item.active:hover,.c-filter label.c-filter__item.active.focused,.c-filter label.c-filter__item.active:active,.c-filter label.c-filter__item.active:focus,.c-filter label.c-filter__item.active:hover{background:#112e51;cursor:default}