material.min.css

.checkbox input,.radio{-webkit-appearance:none;border:2px solid #000;outline:none;background-color:#fff;transition:background-color .3s ease;cursor:pointer}.checkbox.medium,.radio.medium{width:20px;height:20px}.checkbox.large,.radio.large{width:26px;height:26px}.checkbox input:disabled,.checkbox input:disabled ~ .tick,.radio:disabled,button:disabled,.pill-checkbox [type="checkbox"]:disabled,.textfield-wrapper input:disabled,.select:disabled{opacity:.4;cursor:not-allowed}.checkbox{height:16px;width:16px;position:relative;margin:3px;display:inline-block}.checkbox input{position:absolute;top:0;left:0;height:100%;width:100%;margin:0;border-radius:3px}.checkbox input:checked{background-color:#000}.checkbox input:checked::before{animation:pulse 0.25s cubic-bezier(0.4, 0, 0.2, 1)}.checkbox input:checked ~ .checkbox-tick{opacity:1}.checkbox input::before{display:block;content:'';position:absolute;transform:translate(-50%, -50%);background-color:rgba(0,0,0,0.2);top:50%;left:50%;border-radius:50%;pointer-events:none;opacity:.2;height:0%;width:0%}.checkbox .checkbox-tick{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAxMi4xMTZsMi4wNTMtMS44OTdjMi40MDEgMS4xNjIgMy45MjQgMi4wNDUgNi42MjIgMy45NjkgNS4wNzMtNS43NTcgOC40MjYtOC42NzggMTQuNjU3LTEyLjU1NWwuNjY4IDEuNTM2Yy01LjEzOSA0LjQ4NC04LjkwMiA5LjQ3OS0xNC4zMjEgMTkuMTk4LTMuMzQzLTMuOTM2LTUuNTc0LTYuNDQ2LTkuNjc5LTEwLjI1MXoiLz48L3N2Zz4=") no-repeat 50% 50%;background-color:#fff;-webkit-mask-size:12px;mask-size:12px;transform:rotate(-6deg);transition:opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1)}.pill-checkbox{width:36px;height:12px;position:relative;background-color:rgba(0,0,0,0.2);border-radius:20px;cursor:pointer;margin:3px;display:inline-block}.pill-checkbox input{position:absolute;top:0;left:0;margin:0;height:100%;width:100%;cursor:pointer;-webkit-appearance:none;outline:none;background:none;border:none}.pill-checkbox input:checked ~ .pill-checkbox--toggle{left:calc(100% - 16px)}.pill-checkbox input:checked ~ .pill-checkbox--toggle::before{animation:pulse .2s ease}.pill-checkbox input:disabled{opacity:.4;cursor:not-allowed}.pill-checkbox:active .pill-checkbox--toggle{transform:translateY(-50%) scale(0.94)}.pill-checkbox .pill-checkbox--toggle{display:block;content:'';position:absolute;height:16px;width:16px;top:50%;left:0;transform:translateY(-50%);transition:all .2s ease;box-shadow:0 0 4px 1px rgba(0,0,0,0.2);background-color:#000;border-radius:50%;pointer-events:none}.pill-checkbox .pill-checkbox--toggle::before{position:absolute;content:'';display:block;top:50%;left:50%;transform:translate(-50%, -50%);height:0%;width:0%;background-color:rgba(0,0,0,0.2);border-radius:50%;pointer-events:none}.pill-checkbox.medium{width:48px;height:14px}.pill-checkbox.medium .pill-checkbox--toggle{height:20px;width:20px}.pill-checkbox.medium input:checked ~ .pill-checkbox--toggle{left:calc(100% - 20px)}.pill-checkbox.large{width:60px;height:16px}.pill-checkbox.large .pill-checkbox--toggle{height:26px;width:26px}.pill-checkbox.large input:checked ~ .pill-checkbox--toggle{left:calc(100% - 26px)}.radio{height:16px;width:16px;border-radius:50%;position:relative;margin:3px}.radio:checked::after{position:absolute;content:'';display:block;height:60%;width:60%;top:50%;left:50%;border-radius:50%;transform:translate(-50%, -50%);background-color:#000}.radio::before{display:block;content:'';position:absolute;transform:translate(-50%, -50%);background-color:rgba(0,0,0,0.2);top:50%;left:50%;border-radius:50%;pointer-events:none;opacity:.2;height:0%;width:0%}.radio:checked::before{animation:pulse .25s ease}select{background:#000 linear-gradient(to bottom, #565555, #000);outline:none;padding:6px 9px;color:#fff;font-family:inherit;border:1px solid #000;border-radius:3px;cursor:pointer;box-shadow:0 1px 2px 1px rgba(0,0,0,0.2);transition:all .2s ease;-webkit-appearance:menulist}select:focus{box-shadow:0 1px 2px 1px rgba(0,0,0,0.2),inset 0 1px 1px 1px rgba(0,0,0,0.2)}select.medium{padding:10px 14px;font-size:14px}select.large{padding:13px 18px;font-size:18px}button{text-transform:uppercase;border:1px solid;padding:10px 20px;border-radius:3px;border-bottom-width:2px;background-color:#000;border-color:#000;cursor:pointer;position:relative;font-size:13px;outline:none;font-weight:600;font-family:inherit;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.5);overflow:hidden;transition:box-shadow .3s ease-in-out, transform .2s ease-in-out;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}button:not(:disabled):hover{box-shadow:0 3px 11px 1px rgba(0,0,0,0.25)}button:not(:disabled)::after{position:absolute;content:'';top:0;left:-200%;display:block;height:100%;width:60%;background-color:rgba(255,255,255,0.3);transform:skewX(-19deg)}button:active{transform:translateY(1px)}button::before{content:'';display:block;position:absolute;background-color:rgba(255,255,255,0.3);bottom:0%;left:50%;transform:translateX(-50%);border-radius:50% 50% 0 0;pointer-events:none}button:active::before,button:focus::before{animation:pulse .45s ease}button:hover::after{animation:button-shine .9s ease}button.medium{padding:15px 30px;font-size:16px}button.large{padding:22px 75px;font-size:18px}.label{padding:3px 5px;margin:3px;text-transform:uppercase;background-color:#000;color:#fff;border-radius:3px;font-size:11px;text-shadow:0 1px 4px rgba(0,0,0,0.3);letter-spacing:0.3px;font-weight:500}.label.rounded{border-radius:10px}.label.medium{padding:4px 6px;font-size:12px}.label.large{padding:6px 8px;font-size:14px}.label.inverted{color:#000;background-color:#fff;border:1px solid #000}.alert{background-color:#000;color:#fff;padding:12px 16px;border-radius:5px;margin:3px 0;border:1px solid #000}.alert.medium{padding:14px 20px;font-size:14px}.alert.large{padding:18px 22px;font-size:16px}.textfield-wrapper{margin-bottom:3px;position:relative}.textfield-wrapper input{border:1px solid #cecece;padding:8px 9px;outline:none;border-radius:3px;-webkit-appearance:none;width:100%;font-family:inherit;background-color:#fff;margin:0}.textfield-wrapper input:focus{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.textfield-wrapper input:focus ~ .textfield-bar{width:calc(100% - 2px)}.textfield-wrapper .textfield-bar{position:absolute;content:'';display:block;height:1px;width:0%;transition:all .3s ease-in-out;left:50%;bottom:0;transform:translateX(-50%);background-color:#000}.textfield-wrapper.medium input{font-size:14px;padding:13px 14px}.textfield-wrapper.large input{font-size:18px;padding:16px 15px}.checkbox.material--red input,.radio.material--red{border-color:#f44336}.button.material--red,.checkbox.material--red input:checked,.radio.material--red:checked::after,.textfield-wrapper.material--red .textfield-bar,.pill-checkbox.material--red .pill-checkbox--toggle,.label.material--red{background-color:#f44336}.button.material--red{border-color:#ea1c0d #ea1c0d #a21309 #ea1c0d}.pill-checkbox.material--red input:disabled ~ .pill-checkbox--toggle{background-color:#fbb4af}.checkbox.material--red input::before,.radio.material--red::before,.pill-checkbox.material--red,.pill-checkbox.material--red .pill-checkbox--toggle::before{background-color:rgba(244,67,54,0.3)}.label.material--red.inverted{background-color:#fff;color:#f44336;border-color:#f44336;text-shadow:0 1px 3px rgba(0,0,0,0.25)}.alert.material--red{background-color:rgba(244,67,54,0.4);color:#a21309;border-color:rgba(244,67,54,0.4)}.select.material--red{background:#f44336 linear-gradient(to bottom, #f32c1e, #d2190b);border-color:#a21309}.checkbox.material--green input,.radio.material--green{border-color:#56da97}.button.material--green,.checkbox.material--green input:checked,.radio.material--green:checked::after,.textfield-wrapper.material--green .textfield-bar,.pill-checkbox.material--green .pill-checkbox--toggle,.label.material--green{background-color:#56da97}.button.material--green{border-color:#2dd07d #2dd07d #209157 #2dd07d}.pill-checkbox.material--green input:disabled ~ .pill-checkbox--toggle{background-color:#bff1d7}.checkbox.material--green input::before,.radio.material--green::before,.pill-checkbox.material--green,.pill-checkbox.material--green .pill-checkbox--toggle::before{background-color:rgba(86,218,151,0.3)}.label.material--green.inverted{background-color:#fff;color:#56da97;border-color:#56da97;text-shadow:0 1px 3px rgba(0,0,0,0.25)}.alert.material--green{background-color:rgba(86,218,151,0.4);color:#209157;border-color:rgba(86,218,151,0.4)}.select.material--green{background:#56da97 linear-gradient(to bottom, #41d58a, #29bb71);border-color:#209157}.checkbox.material--blue input,.radio.material--blue{border-color:#2196f3}.button.material--blue,.checkbox.material--blue input:checked,.radio.material--blue:checked::after,.textfield-wrapper.material--blue .textfield-bar,.pill-checkbox.material--blue .pill-checkbox--toggle,.label.material--blue{background-color:#2196f3}.button.material--blue{border-color:#0c7cd5 #0c7cd5 #08528d #0c7cd5}.pill-checkbox.material--blue input:disabled ~ .pill-checkbox--toggle{background-color:#9acffa}.checkbox.material--blue input::before,.radio.material--blue::before,.pill-checkbox.material--blue,.pill-checkbox.material--blue .pill-checkbox--toggle::before{background-color:rgba(33,150,243,0.3)}.label.material--blue.inverted{background-color:#fff;color:#2196f3;border-color:#2196f3;text-shadow:0 1px 3px rgba(0,0,0,0.25)}.alert.material--blue{background-color:rgba(33,150,243,0.4);color:#08528d;border-color:rgba(33,150,243,0.4)}.select.material--blue{background:#2196f3 linear-gradient(to bottom, #0d8aee, #0a6ebd);border-color:#08528d}.checkbox.material--orange input,.radio.material--orange{border-color:#ff9800}.button.material--orange,.checkbox.material--orange input:checked,.radio.material--orange:checked::after,.textfield-wrapper.material--orange .textfield-bar,.pill-checkbox.material--orange .pill-checkbox--toggle,.label.material--orange{background-color:#ff9800}.button.material--orange{border-color:#cc7a00 #cc7a00 #804c00 #cc7a00}.pill-checkbox.material--orange input:disabled ~ .pill-checkbox--toggle{background-color:#ffcc80}.checkbox.material--orange input::before,.radio.material--orange::before,.pill-checkbox.material--orange,.pill-checkbox.material--orange .pill-checkbox--toggle::before{background-color:rgba(255,152,0,0.3)}.label.material--orange.inverted{background-color:#fff;color:#ff9800;border-color:#ff9800;text-shadow:0 1px 3px rgba(0,0,0,0.25)}.alert.material--orange{background-color:rgba(255,152,0,0.4);color:#804c00;border-color:rgba(255,152,0,0.4)}.select.material--orange{background:#ff9800 linear-gradient(to bottom, #e68900, #b36a00);border-color:#804c00}.checkbox.material--pink input,.radio.material--pink{border-color:#e91e63}.button.material--pink,.checkbox.material--pink input:checked,.radio.material--pink:checked::after,.textfield-wrapper.material--pink .textfield-bar,.pill-checkbox.material--pink .pill-checkbox--toggle,.label.material--pink{background-color:#e91e63}.button.material--pink{border-color:#c1134e #c1134e #7b0c32 #c1134e}.pill-checkbox.material--pink input:disabled ~ .pill-checkbox--toggle{background-color:#f492b4}.checkbox.material--pink input::before,.radio.material--pink::before,.pill-checkbox.material--pink,.pill-checkbox.material--pink .pill-checkbox--toggle::before{background-color:rgba(233,30,99,0.3)}.label.material--pink.inverted{background-color:#fff;color:#e91e63;border-color:#e91e63;text-shadow:0 1px 3px rgba(0,0,0,0.25)}.alert.material--pink{background-color:rgba(233,30,99,0.4);color:#7b0c32;border-color:rgba(233,30,99,0.4)}.select.material--pink{background:#e91e63 linear-gradient(to bottom, #d81558, #aa1145);border-color:#7b0c32}.checkbox.material--yellow input,.radio.material--yellow{border-color:#fdd835}.button.material--yellow,.checkbox.material--yellow input:checked,.radio.material--yellow:checked::after,.textfield-wrapper.material--yellow .textfield-bar,.pill-checkbox.material--yellow .pill-checkbox--toggle,.label.material--yellow{background-color:#fdd835}.button.material--yellow{border-color:#fdce03 #fdce03 #b19002 #fdce03}.pill-checkbox.material--yellow input:disabled ~ .pill-checkbox--toggle{background-color:#fef0b3}.checkbox.material--yellow input::before,.radio.material--yellow::before,.pill-checkbox.material--yellow,.pill-checkbox.material--yellow .pill-checkbox--toggle::before{background-color:rgba(253,216,53,0.3)}.label.material--yellow.inverted{background-color:#fff;color:#fdd835;border-color:#fdd835;text-shadow:0 1px 3px rgba(0,0,0,0.25)}.alert.material--yellow{background-color:rgba(253,216,53,0.4);color:#b19002;border-color:rgba(253,216,53,0.4)}.select.material--yellow{background:#fdd835 linear-gradient(to bottom, #fdd31c, #e3ba02);border-color:#b19002}.checkbox.material--brown input,.radio.material--brown{border-color:#795548}.button.material--brown,.checkbox.material--brown input:checked,.radio.material--brown:checked::after,.textfield-wrapper.material--brown .textfield-bar,.pill-checkbox.material--brown .pill-checkbox--toggle,.label.material--brown{background-color:#795548}.button.material--brown{border-color:#593f35 #593f35 #291d18 #593f35}.pill-checkbox.material--brown input:disabled ~ .pill-checkbox--toggle{background-color:#b89588}.checkbox.material--brown input::before,.radio.material--brown::before,.pill-checkbox.material--brown,.pill-checkbox.material--brown .pill-checkbox--toggle::before{background-color:rgba(121,85,72,0.3)}.label.material--brown.inverted{background-color:#fff;color:#795548;border-color:#795548;text-shadow:0 1px 3px rgba(0,0,0,0.25)}.alert.material--brown{background-color:rgba(121,85,72,0.4);color:#291d18;border-color:rgba(121,85,72,0.4)}.select.material--brown{background:#795548 linear-gradient(to bottom, #694a3e, #49332b);border-color:#291d18}.checkbox.material--grey input,.radio.material--grey{border-color:#9e9e9e}.button.material--grey,.checkbox.material--grey input:checked,.radio.material--grey:checked::after,.textfield-wrapper.material--grey .textfield-bar,.pill-checkbox.material--grey .pill-checkbox--toggle,.label.material--grey{background-color:#9e9e9e}.button.material--grey{border-color:#858585 #858585 #5e5e5e #858585}.pill-checkbox.material--grey input:disabled ~ .pill-checkbox--toggle{background-color:#dedede}.checkbox.material--grey input::before,.radio.material--grey::before,.pill-checkbox.material--grey,.pill-checkbox.material--grey .pill-checkbox--toggle::before{background-color:rgba(158,158,158,0.3)}.label.material--grey.inverted{background-color:#fff;color:#9e9e9e;border-color:#9e9e9e;text-shadow:0 1px 3px rgba(0,0,0,0.25)}.alert.material--grey{background-color:rgba(158,158,158,0.4);color:#5e5e5e;border-color:rgba(158,158,158,0.4)}.select.material--grey{background:#9e9e9e linear-gradient(to bottom, #919191, #787878);border-color:#5e5e5e}.checkbox.material--purple input,.radio.material--purple{border-color:#673ab7}.button.material--purple,.checkbox.material--purple input:checked,.radio.material--purple:checked::after,.textfield-wrapper.material--purple .textfield-bar,.pill-checkbox.material--purple .pill-checkbox--toggle,.label.material--purple{background-color:#673ab7}.button.material--purple{border-color:#512e90 #512e90 #311b56 #512e90}.pill-checkbox.material--purple input:disabled ~ .pill-checkbox--toggle{background-color:#ae94dd}.checkbox.material--purple input::before,.radio.material--purple::before,.pill-checkbox.material--purple,.pill-checkbox.material--purple .pill-checkbox--toggle::before{background-color:rgba(103,58,183,0.3)}.label.material--purple.inverted{background-color:#fff;color:#673ab7;border-color:#673ab7;text-shadow:0 1px 3px rgba(0,0,0,0.25)}.alert.material--purple{background-color:rgba(103,58,183,0.4);color:#311b56;border-color:rgba(103,58,183,0.4)}.select.material--purple{background:#673ab7 linear-gradient(to bottom, #5c34a4, #46287d);border-color:#311b56}@keyframes pulse{0%{height:0%;width:0%}100%{height:300%;width:300%;opacity:.7}}@keyframes button-shine{from{left:-100%}to{left:200%}}