chro_ui
Version:
A SCSS - Vue Component Library
1 lines • 12.3 kB
CSS
@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css);.alert{width:calc(100% - 2rem - 2px);height:auto;padding:.75rem 1rem;font-family:inherit;border-radius:5px;text-align:left}.alert.primary{color:#0052cc;background-color:#cce5ff;border:1px solid #80bdff}.alert.warning{color:#ca5c02;background-color:#ffe8cc;border:1px solid #feb981}.alert.error{color:#a42834;background-color:#f7d4d7;border:1px solid #ec939c}.alert.success{color:#28a445;background-color:#dbf0e0;border:1px solid #a5d9b1}.input{width:calc(100% - 16px);background:transparent;transition:all .3s ease;border:2px solid #e0e2e6;border-radius:3.01px;padding:8px 6px;font-size:16px;font-family:inherit,Nunito;color:#31415e}.input:focus{outline:none;background:#fff;border:2px solid #0052cc}.input:disabled{outline:none;cursor:not-allowed;background:#efefef;border:1px solid #e0e2e6;box-sizing:border-box;border-radius:3px;min-height:30px}.loader,.loader:after{border-radius:50%;width:75px;height:75px}.loader{margin:60px auto;font-size:8px;position:relative;text-indent:-9999em;border-top:1.1em solid hsla(0,0%,100%,.2);border-right:1.1em solid hsla(0,0%,100%,.2);border-bottom:1.1em solid hsla(0,0%,100%,.2);border-left:1.1em solid #0052cc;transform:translateZ(0);-webkit-animation:load8 1.1s linear infinite;animation:load8 1.1s linear infinite}@-webkit-keyframes load8{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes load8{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.skeleton{box-shadow:0 4px 10px 0 rgba(33,33,33,.15);border-radius:3px;height:100%;width:100%;position:relative;overflow:hidden;background-color:#c9ccd3}.skeleton:before{content:"";display:block;position:absolute;left:-150px;top:0;height:100%;width:100%;background:linear-gradient(90deg,transparent 0,#d7dadf 50%,transparent);-webkit-animation:load 1s cubic-bezier(.4,0,.2,1) infinite;animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@-webkit-keyframes load{0%{left:-100%}to{left:100%}}@keyframes load{0%{left:-100%}to{left:100%}}.table{font-family:inherit;border-collapse:collapse;width:100%;border-radius:3px;border:1px solid #e0e2e6}.table td{padding:12px 8px 12px 8px;color:inherit;border-bottom:1px solid #e0e2e6;cursor:unset;text-align:left}.table td,.table tr:nth-child(2n){border-radius:3px}.table tr:hover{background:#f8f9fa}.table th{padding:8px;padding-top:12px;padding-bottom:12px;text-align:left;font-size:18px;border-radius:3px;background-color:#fdfdfd;border-bottom:2px solid #e0e2e6;color:#0052cc}.notification{position:fixed;bottom:1rem;right:1rem;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);border-radius:3.1px;padding:8px 10px;color:inherit;background:#fff;display:flex;align-items:flex-start;align-content:flex-start;flex-direction:row;width:15%;min-width:220px;justify-content:space-between;-webkit-animation:display-duration 2s;animation:display-duration 2s}.notification__close{font-size:1.133rem;font-weight:400;cursor:pointer;padding:0 6px 0 1.25rem}.notification__close:hover{font-weight:600}.notification__main__header{font-weight:800;font-size:1.13rem;display:flex;text-align:left}.notification__main__desc{padding-top:.75rem;font-weight:300;display:flex;text-align:left;flex-direction:row;flex-wrap:nowrap;justify-content:space-evenly}.notification.success{border-left:8px solid #28a445}.notification.error{border-left:8px solid #cd3241}.notification.primary{border-left:8px solid #0052cc}@-webkit-keyframes display-duration{0%{opacity:0}to{opacity:1}}@keyframes display-duration{0%{opacity:0}to{opacity:1}}.divider{width:100%;height:3px;background:#e0e2e6;border-radius:8px}.r{display:block;position:relative;padding-left:25px;margin:10px 15px;font-size:18px;line-height:17px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.r,.r input{cursor:pointer}.r input{position:absolute;opacity:0}.rcheckmark{position:absolute;top:0;left:0;height:18px;width:18px;border:1px solid #0052cc;border-radius:50%}.r:hover input~.rcheckmark{background-color:rgba(0,102,255,.05)}.r input:checked~.rcheckmark{background-color:#0052cc}.rcheckmark:after{content:"";position:absolute;display:none}.r input:checked~.rcheckmark:after{display:block}.r .rcheckmark:after{top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#fff}.switch{position:relative;display:inline-block;width:30px;height:15px;margin:15px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e0e2e6}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:11px;width:11px;left:3px;bottom:2px;background-color:#fff}input:checked+.slider{background-color:#0052cc}input:checked+.slider:before{transform:translateX(13px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.button{width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;transition:all .3s ease-in-out;text-align:center;padding:.75rem 1.33rem;margin:0}.button:focus{outline:none}.button-icon{width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;transition:all .3s ease-in-out;text-align:center;padding:.75rem 1.33rem;margin:0}.button-icon:focus{outline:none}.button-icon-primary{width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;transition:all .3s ease-in-out;text-align:center;padding:.75rem 1.33rem;margin:0;background:#0052cc;color:#fff;border:1px solid #0052cc;cursor:pointer;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.button-icon-primary:focus{outline:none}.button-icon-primary:hover{background:#0041a3;border:1px solid #0041a3}.button-icon-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.button-icon-secondary{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;transition:all .3s ease-in-out;text-align:center;padding:.75rem 1.33rem;margin:0;background:#fff;border:1px solid #0052cc;color:#0052cc;cursor:pointer}.button-icon-secondary:focus{outline:none}.button-icon-secondary:hover{background:rgba(0,102,255,.08)}.button-icon-secondary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.button-icon-disabled{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;text-align:center;padding:.75rem 1.33rem;margin:0;color:#ababab;border:1px solid #e0e2e6;cursor:not-allowed;transition:all .3s ease-in-out}.button-icon-disabled:focus{outline:none}.button-icon-simple{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;transition:all .3s ease-in-out;text-align:center;padding:.75rem 1.33rem;margin:0;background:rgba(9,30,66,.04);border:1px solid rgba(9,30,66,.04);color:#31415e;cursor:pointer}.button-icon-simple:focus{outline:none}.button-icon-simple:hover{background:rgba(9,30,67,.1)}.button-icon-simple:focus{background:rgba(12,41,90,.15);box-shadow:0 0 0 .2rem rgba(12,41,90,.45)}.button-primary{width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;transition:all .3s ease-in-out;text-align:center;padding:.75rem 1.33rem;margin:0;background:#0052cc;color:#fff;border:1px solid #0052cc;cursor:pointer}.button-primary:focus{outline:none}.button-primary:hover{background:#0041a3;border:1px solid #0041a3}.button-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.button-secondary{width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;transition:all .3s ease-in-out;text-align:center;padding:.75rem 1.33rem;margin:0;background:#fff;border:1px solid #0052cc;color:#0052cc;cursor:pointer}.button-secondary:focus{outline:none}.button-secondary:hover{background:rgba(0,102,255,.08)}.button-secondary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.button-disabled{width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;text-align:center;padding:.75rem 1.33rem;margin:0;color:#ababab;border:1px solid #e0e2e6;cursor:not-allowed;transition:all .3s ease-in-out}.button-disabled:focus{outline:none}.button-simple{width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;transition:all .3s ease-in-out;text-align:center;padding:.75rem 1.33rem;margin:0}.button-simple:focus{outline:none}.dropbtn{width:100%;box-sizing:border-box;border-radius:3px;font-family:inherit,Nunito,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-style:normal;font-weight:400;font-size:inherit;transition:all .3s ease-in-out;text-align:center;padding:.75rem 1.33rem;margin:0;background:#0052cc;border:1px solid #0052cc;cursor:pointer;color:#fff}.dropbtn:hover{background:#0041a3;border:1px solid #0041a3}.dropbtn:focus{outline:none;box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.dropbtn:focus i{transition:all .3s ease;transform:rotate(-180deg)}.dropbtn:focus .dropdown-content{display:flex}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;flex-direction:column;align-items:center;position:absolute;background-color:#fff;min-width:160px;overflow:auto;font-weight:400;color:#31415e;top:45px;left:0;border:1px solid #e0e2e6;border-radius:5px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);padding:6px}.dropdown-content>div{width:80%}.dropdown-content-item{color:#172b4d;padding:8px 6px;width:80%;margin:3px auto;border-radius:5px;text-decoration:none}.dropdown-content-item>i{transform:rotate(180deg)}.dropdown-content-item:hover{background-color:rgba(9,30,66,.08)}.dropdown-content>a{color:#172b4d;padding:8px 16px;margin:3px;border-radius:5px;text-decoration:none;display:flex}.dropdown-content>a:hover{background-color:rgba(9,30,66,.08)}.chimp{border-radius:25px;padding:.4rem .75rem;font-family:inherit;font-weight:inherit;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.chimp.primary{color:#0052cc;background-color:#cce5ff;border:1px solid #80bdff}.chimp.warning{color:#ca5c02;background-color:#ffe8cc;border:1px solid #feb981}.chimp.error{color:#a42834;background-color:#f7d4d7;border:1px solid #ec939c}.chimp.success{color:#28a445;background-color:#dbf0e0;border:1px solid #a5d9b1}a{color:inherit;text-decoration:none}address{font-style:normal}*,:after,:before{box-sizing:border-box}button{font:inherit}button:focus{outline:none}body{font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.2}h1,h2,h3,h4,h5,h6{margin:0 0 .4rem 0}dl,ol,ul{list-style:none;margin:0;padding:0}