roobie/dist/roobie.components.css

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

.accordion{width:100%;background-color:var(--bg1)}.accordion-header{background-color:transparent;color:var(--t2);cursor:pointer;padding:var(--pad5);width:100%;border:var(--bdr1);outline:0;text-align:left;font-size:var(--fnts3);transition:.3s ease-in-out}.accordion-header:hover{background-color:rgba(114,114,114,.05)}.accordion-header:after{content:"\003E";float:right;font-family:var(--fntf1);font-size:var(--fnts4);margin-top:-5px;color:var(--t2);transition:.3s ease-in-out;transform:scale(1,1.5)}.accordion-header.accordion-active{background-color:var(--bg1);border:var(--bdr1)}.accordion-header.accordion-active:after{content:"\003E";transform:rotate(90deg) scale(1,1.5)}.accordion-panel{background-color:var(--bg2);display:none;padding:var(--pad4);overflow:hidden;animation-name:fade;animation-duration:.3s;box-shadow:var(--in1)}.alert{display:flex;align-items:center;justify-content:space-between;border-radius:var(--br3);padding:var(--pad4);margin:var(--mrg1);background-color:var(--bg2)}.alert:after{align-self:flex-end;content:"\2715";color:var(--t1);font-family:var(--fntf1);font-size:var(--fnts4);cursor:pointer}.alert-primary{background-color:var(--primary)}.alert-secondary{background-color:var(--secondary)}.alert-outline{border:var(--bdr1)}.alert-success{background-color:var(--success);color:var(--black)}.alert-warning{background-color:var(--warning);color:var(--black)}.alert-danger{background-color:var(--danger);color:var(--black)}.alert-info{background-color:var(--info);color:var(--black)}.btn{width:auto;height:auto;padding:var(--pad3);text-decoration:none;border-radius:var(--br2);margin:var(--mrg1);cursor:pointer;color:var(--t2);display:inline-flex;justify-content:center;align-items:center;border:none;font-size:var(--fnts3);font-family:var(--fntf1);background-color:var(--bg1)}.btn:hover{background-color:currentBackgroundColor;filter:brightness(95%)}.btn-primary{background-color:var(--primary)}.btn-secondary{background-color:var(--secondary)}.btn-outline{border:var(--bdr1)}.btn-success{background-color:var(--success);color:var(--black)}.btn-warning{background-color:var(--warning);color:var(--black)}.btn-danger{background-color:var(--danger);color:var(--black)}.btn-info{background-color:var(--info);color:var(--black)}.card{display:flex;flex-flow:column nowrap;border-radius:var(--br2);border:var(--bdr1);padding:var(--pad4);margin:var(--mrg2)}.card-content{margin:var(--mrg2) 0;width:100%;flex:1}.card-actions{display:flex;flex-flow:row wrap;justify-content:flex-end}.carousel{position:relative;display:flex;flex-flow:column nowrap;margin:var(--mrg2);text-align:center;border-radius:var(--br2)}.carousel-slide{display:none;background-color:var(--bg3);animation-name:fade;animation-duration:var(--animation-duration);height:100%}.carousel-active{background-color:var(--bg1)!important;border:var(--bdr1)}.carousel-next,.carousel-previous{cursor:pointer;position:absolute;top:50%;transform:translate(0,-50%);padding:var(--pad3);color:var(--t1);background-color:var(--bg1);font-weight:700;font-size:var(--fnts4);transition:.6s ease;border-radius:0 var(--br2) var(--br2) 0;user-select:none}.carousel-next{right:0;border-radius:var(--br2) 0 0 var(--br2)}.carousel-next:hover,.carousel-previous:hover{background-color:var(--bg3);opacity:90%}.carousel-info{color:var(--t2);font-size:var(--fnts4);position:absolute;bottom:20px;width:100%;text-align:center}.carousel-indicators{position:absolute;bottom:0;width:100%}.carousel-indicators span{cursor:pointer;height:10px;width:50px;margin:0 2px;background-color:var(--bg2);transition:background-color .6s ease;display:inline-block;box-shadow:var(--in)}.carousel-indicators span:hover{background-color:var(--bg6)}@media screen and (max-width:800px){.carousel,.carousel-slide{width:100%!important}}.chip,.chiph{display:inline-flex;width:auto;height:auto;border:1px solid transparent;padding:1px var(--pad3);border:var(--bdr1);border-radius:var(--br6);margin:var(--mrg1);font-size:var(--fnts3);color:var(--t3);background-color:var(--bg2)}.chiph:hover{box-shadow:var(--box1);cursor:default;opacity:90%}.drp{font-size:var(--fnts3);position:relative}.drp:focus .drp-cnt,.drp:hover .drp-cnt{display:block;animation-name:fade;animation-duration:.5s}.drp-btn{width:auto;height:auto;padding:var(--pad2);text-decoration:none;border-radius:var(--br3);margin:var(--mrg1);cursor:pointer;color:var(--t2)}.drp-btn:hover{opacity:90%}.drp-cnt{display:none;position:absolute;top:100%;left:0;background-color:var(--bg1);min-width:var(--drp-min-width);width:auto;box-shadow:var(--box2);border-radius:var(--br2);font-size:var(--fnts3);z-index:10}.drp-title{margin:0;padding:var(--pad2);color:var(--t1)}.drp-cnt p{margin-top:0;font-size:var(--fnts2);color:var(--t5)}.drp-cnt a{padding:var(--pad3);color:var(--t1);display:block;margin:0;border-radius:var(--br2)}.drp-cnt a:hover{background-color:var(--bg2);cursor:pointer}.emphasis{background-color:var(--bg2);color:var(--t2);border-radius:var(--br2);padding:var(--pad3);margin:var(--mrg1);border-left:5px solid var(--bg3)}.emphasis-primary{border-color:var(--primary)}.emphasis-secondary{border-color:var(--secondary)}.emphasis-success{border-color:var(--success)}.emphasis-warning{border-color:var(--warning)}.emphasis-danger{border-color:var(--danger)}.emphasis-info{border-color:var(--info)}.icon{width:20px;height:20px}.icon-trash{content:url(icons/trash.svg)}.icon-plus{content:url(icons/plus.svg)}.icon-minus{content:url(icons/minus.svg)}.icon-heart-empty{content:url(icons/heart-empty.svg)}.icon-heart{content:url(icons/heart.svg)}.icon-mail{content:url(icons/mail.svg)}.icon-search{content:url(icons/search.svg)}.icon-star-empty{content:url(icons/star-empty.svg)}.icon-star{content:url(icons/star.svg)}.icon-user{content:url(icons/user.svg)}.icon-phone{content:url(icons/phone.svg)}.icon-attach{content:url(icons/attach.svg)}.icon-right{content:url(icons/right.svg)}.icon-left{content:url(icons/left.svg)}.icon-cog-2{content:url(icons/cog.svg)}.icon-help{content:url(icons/help.svg)}.icon-facebook{content:url(icons/facebook.svg)}.icon-linkedin{content:url(icons/linkedin.svg)}.icon-left-open{content:url(icons/left-open.svg)}.icon-ok{content:url(icons/ok.svg)}.icon-cancel{content:url(icons/cancel.svg)}.icon-right-open{content:url(icons/right-open.svg)}.icon-up-open{content:url(icons/up-open.svg)}.icon-down-open{content:url(icons/down-open.svg)}.icon-pause{content:url(icons/pause.svg)}.icon-stop{content:url(icons/stop.svg)}.icon-play{content:url(icons/play.svg)}.icon-cw{content:url(icons/cw.svg)}.icon-up{content:url(icons/up.svg)}.icon-down{content:url(icons/down.svg)}.icon-zoom-in{content:url(icons/zoom-in.svg)}.icon-zoom-out{content:url(icons/zoom-out.svg)}.icon-eject{content:url(icons/eject.svg)}.icon-align-right{content:url(icons/align-right.svg)}.icon-align-center{content:url(icons/align-center.svg)}.icon-align-left{content:url(icons/align-left.svg)}.icon-align-justify{content:url(icons/align-justify.svg)}.icon-github-text{content:url(icons/github-text.svg)}.icon-github{content:url(icons/github.svg)}.icon-flag{content:url(icons/flag.svg)}.icon-location{content:url(icons/location.svg)}.icon-thumbs-down{content:url(icons/thumbs-down.svg)}.icon-thumbs-up{content:url(icons/thumbs-up.svg)}.icon-bell{content:url(icons/bell.svg)}.icon-comment{content:url(icons/comment.svg)}.icon-apps{content:url(icons/apps.svg)}.icon-list{content:url(icons/list.svg)}.icon-menu{content:url(icons/menu.svg)}.icon-menu-outline{content:url(icons/menu-outline.svg)}.icon-camera{content:url(icons/camera.svg)}.input{display:inline-flex;width:250px;padding:var(--pad3);background-color:var(--bg2);border-radius:var(--br4);margin:var(--mrg1);font-size:var(--fnts4);font:500 var(--fnts3) var(--fntf1);border:none;color:var(--t2);transition:width .5s ease-in-out}input:focus,select:focus,textarea:focus{outline-offset:0!important;outline:0!important}.input-outline{border:var(--bdr2)!important}.input-expand:focus{width:500px}::placeholder{color:var(--t5);opacity:1}:-ms-input-placeholder{color:var(--t5)}::-ms-input-placeholder{color:var(--t5)}@media screen and (max-width:800px){.input{width:100%!important}}.ul,.ul-cnt{list-style-type:none;width:auto;padding-inline-start:0;margin:var(--mrg2);padding:0;border-radius:var(--br2)}.ul li{color:var(--t5);text-decoration:none;height:auto;padding:var(--pad3);background-color:var(--bg2);display:flex;flex-flow:column nowrap;cursor:pointer}.ul-cnt li{color:var(--t5);text-decoration:none;height:auto;padding:var(--pad4);background-color:var(--bg2);display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center}.ul-cnt li a{margin:var(--mrg2) 0}.ul li span{font-size:var(--fnts2);color:var(--t5)}.ul li+li,.ul-cnt li+li{border-top:var(--bdr2)}.ul li:hover,.ul-cnt li:hover{color:var(--t1)}nav{background-color:var(--bg1)}.nav-top{top:0;left:0;right:0;height:auto}.nav-row{width:100%;height:auto;display:flex;flex-direction:row;align-items:center}.nav-col{height:100%;width:auto;display:flex;flex-direction:column}.nav-title{margin:var(--mrg4);font-size:var(--fnts4);color:var(--t1);font-weight:700;text-decoration:none}.nav-heading{margin:var(--mrg2);margin-bottom:0;font-size:var(--fnts3);color:var(--t1)}.nav-item{padding:var(--pad3);text-decoration:none;color:var(--t2);cursor:pointer}.nav-item:hover{filter:opacity(80%)}.path{display:inline-flex;list-style-type:none;width:auto;padding-inline-start:0;margin:var(--mrg2)}.path-item{color:var(--a1)}.path-item:hover{cursor:pointer;color:var(--t1)}.path-item+.path-item::before{content:var(--path-divider);margin:0 var(--mrg2);color:var(--t5);cursor:text}.select{position:relative;font-family:Arial;margin:var(--mrg1);width:200px;font-family:var(--fntf1)}.select select{display:none}.select-selected{background-color:var(--primary);border-radius:var(--br2)}.is-selected,.select-items div:hover{background-color:var(--primary);filter:brightness(120%)}.select-selected:after{position:absolute;content:"";top:16px;right:10px;width:0;height:0;border:5px solid transparent;border-color:var(--t1) transparent transparent transparent}.select-selected.select-active:after{border-color:transparent transparent var(--t1) transparent;top:10px}.select-items div,.select-selected{color:var(--t1);padding:8px 16px;border:1px solid transparent;border-color:transparent transparent rgba(0,0,0,.1) transparent;cursor:pointer}.select-items{position:absolute;background-color:var(--primary);top:100%;left:0;right:0;z-index:var(--z6);border-radius:var(--br2)}.table{width:auto!important;border:var(--bdr1)}.table td,.table th,.table tr{border:none}.table th{color:var(--t1);background-color:var(--bg4)}.table td{color:var(--t3)}.table tr:nth-child(even){background-color:var(--bg1)}.table tr:nth-child(odd){background-color:var(--bg2)}.toggle{position:relative;display:inline-block;width:45px}.toggle input{opacity:0;width:0;height:0}.toggle .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg5);transition:.4s;box-shadow:var(--in1)}.toggle .slider:before{position:absolute;content:"";height:22px;width:22px;left:0;bottom:-1px;background-color:var(--t1);transition:.4s}.toggle input:checked+.slider{background-color:var(--primary);box-shadow:var(--in1)}.toggle input:checked+.slider:before{-webkit-transform:translateX(23px);-ms-transform:translateX(23px);transform:translateX(23px)}.toggle .slider.round{border-radius:34px}.toggle .slider.round:before{border-radius:50%}.tooltip-text{visibility:hidden;min-width:120px;background-color:var(--bg2);text-align:center;padding:var(--pad2) 0;border-radius:var(--br3);position:absolute;z-index:1;pointer-events:none}.tooltip-right{top:-10px;left:105%}.tooltip-left{top:-10px;right:105%}.tooltip-top{width:120px;bottom:100%;left:50%;margin-left:-60px}.tooltip-bottom{width:120px;top:100%;left:50%;margin-left:-60px}.tooltipt-top::after{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--bg2) transparent transparent transparent}.tooltip-bottom::after{content:" ";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent var(--bg2) transparent}.tooltip-left::after{content:" ";position:absolute;top:50%;left:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent transparent transparent var(--bg2)}.tooltip-right::after{content:" ";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent var(--bg2) transparent transparent}