bulma-addons
Version:
Addons for Bulma CSS framework
1 lines • 14.6 kB
CSS
/*! https://mubaidr.github.io/bulma-addons | MIT License | github.com/mubaidr/bulma-addons */.checkbox{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox>[type=checkbox]{cursor:pointer;display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:1;width:1.5em;height:1.5em;top:.25em;padding:0;margin:0;visibility:hidden}.checkbox>[type=checkbox]:disabled{cursor:not-allowed}.checkbox>[type=checkbox]:disabled:before{opacity:.75;background-color:#b5b5b5;border-color:#b5b5b5}.checkbox>[type=checkbox]:disabled:checked:before{background-color:#b5b5b5;border-color:#b5b5b5}.checkbox>[type=checkbox]:before{visibility:visible;content:'';height:100%;width:100%;position:absolute;top:0;left:0;background-color:#fff;border:2px solid #dbdbdb;border-radius:2px;-webkit-transition:all .25s ease-out;transition:all .25s ease-out}.checkbox>[type=checkbox]:after{visibility:visible;display:none;content:'';position:absolute;left:.5em;top:10%;height:66%;width:33%;border:solid #fff;border-width:0 2px 2px 0;-webkit-transform:rotate(30deg);transform:rotate(30deg)}.checkbox>[type=checkbox]:checked:before{background-color:#b5b5b5;border-color:#b5b5b5}.checkbox>[type=checkbox]:checked:after{display:block}.checkbox:hover>[type=checkbox]:not(:disabled):before{border-color:rgba(0,0,0,.5)}.checkbox .checkbox.is-white>[type=checkbox]:checked:before{background-color:#fff;border-color:#fcfcfc}.checkbox .checkbox.is-black>[type=checkbox]:checked:before{background-color:#0a0a0a;border-color:#080808}.checkbox .checkbox.is-light>[type=checkbox]:checked:before{background-color:#f5f5f5;border-color:#f2f2f2}.checkbox .checkbox.is-dark>[type=checkbox]:checked:before{background-color:#363636;border-color:#333}.checkbox .checkbox.is-primary>[type=checkbox]:checked:before{background-color:#00d1b2;border-color:#00ccad}.checkbox .checkbox.is-link>[type=checkbox]:checked:before{background-color:#3273dc;border-color:#2e70dc}.checkbox .checkbox.is-info>[type=checkbox]:checked:before{background-color:#3298dc;border-color:#2e96dc}.checkbox .checkbox.is-success>[type=checkbox]:checked:before{background-color:#48c774;border-color:#44c571}.checkbox .checkbox.is-warning>[type=checkbox]:checked:before{background-color:#ffdd57;border-color:#ffdc52}.checkbox .checkbox.is-danger>[type=checkbox]:checked:before{background-color:#f14668;border-color:#f14164}.radio{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio>[type=radio]{display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:1;width:1.5em;height:1.5em;top:.25em;padding:0;margin:0;visibility:hidden}.radio>[type=radio]:disabled{cursor:not-allowed}.radio>[type=radio]:disabled:before{opacity:.75;border-color:#b5b5b5}.radio>[type=radio]:disabled:checked:before{border-color:#b5b5b5}.radio>[type=radio]:disabled:checked:after{background-color:#b5b5b5}.radio>[type=radio]:before{visibility:visible;content:'';height:100%;width:100%;position:absolute;top:0;left:0;border-radius:50%;background-color:#fff;border:2px solid #dbdbdb;-webkit-transition:all .25s ease-out;transition:all .25s ease-out}.radio>[type=radio]:after{visibility:visible;display:none;content:'';position:absolute;left:25%;top:25%;border-radius:100%;height:50%;width:50%;background-color:#363636}.radio>[type=radio]:checked:before{border-color:#b5b5b5}.radio>[type=radio]:checked:after{display:block}.radio:hover>[type=radio]:not(:checked):not(:disabled):before{border-color:rgba(0,0,0,.5)}.radio .radio.is-white>[type=radio]:checked:before{border-color:#00d1b2}.radio .radio.is-black>[type=radio]:checked:before{border-color:#00d1b2}.radio .radio.is-light>[type=radio]:checked:before{border-color:#00d1b2}.radio .radio.is-dark>[type=radio]:checked:before{border-color:#00d1b2}.radio .radio.is-primary>[type=radio]:checked:before{border-color:#00d1b2}.radio .radio.is-link>[type=radio]:checked:before{border-color:#00d1b2}.radio .radio.is-info>[type=radio]:checked:before{border-color:#00d1b2}.radio .radio.is-success>[type=radio]:checked:before{border-color:#00d1b2}.radio .radio.is-warning>[type=radio]:checked:before{border-color:#00d1b2}.radio .radio.is-danger>[type=radio]:checked:before{border-color:#00d1b2}.toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:inline-block}.toggle *{cursor:pointer}.toggle>[type=checkbox]{display:inline-block;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1;width:3.5em;height:1.5em;top:.25em;padding:0;margin:0;visibility:hidden}.toggle>[type=checkbox]:disabled{cursor:not-allowed}.toggle>[type=checkbox]:disabled:before{opacity:.75;border-color:#b5b5b5}.toggle>[type=checkbox]:disabled:after{background-color:#b5b5b5}.toggle>[type=checkbox]:disabled:checked:before{background-color:#b5b5b5;border-color:#b5b5b5}.toggle>[type=checkbox]:disabled:checked:after{background-color:#fff}.toggle>[type=checkbox]:before{visibility:visible;content:'';height:100%;width:100%;position:absolute;top:0;left:0;background-color:#fff;border:2px solid #dbdbdb;border-radius:10px}.toggle>[type=checkbox]:after{visibility:visible;content:'';position:absolute;left:10%;top:20%;border-radius:50%;height:60%;width:25%;background-color:#363636;-webkit-transition:left .25s ease-out;transition:left .25s ease-out}.toggle>[type=checkbox]:checked:before{background-color:#00d1b2;border-color:#00ccad}.toggle>[type=checkbox]:checked:after{left:65%;background-color:#fff}.toggle:hover>[type=checkbox]:not(:disabled):before{border-color:rgba(0,0,0,.5)}.toggle .toggle.is-white>[type=checkbox]:checked:before{background-color:#fff;border-color:#fcfcfc}.toggle .toggle.is-black>[type=checkbox]:checked:before{background-color:#0a0a0a;border-color:#080808}.toggle .toggle.is-light>[type=checkbox]:checked:before{background-color:#f5f5f5;border-color:#f2f2f2}.toggle .toggle.is-dark>[type=checkbox]:checked:before{background-color:#363636;border-color:#333}.toggle .toggle.is-primary>[type=checkbox]:checked:before{background-color:#00d1b2;border-color:#00ccad}.toggle .toggle.is-link>[type=checkbox]:checked:before{background-color:#3273dc;border-color:#2e70dc}.toggle .toggle.is-info>[type=checkbox]:checked:before{background-color:#3298dc;border-color:#2e96dc}.toggle .toggle.is-success>[type=checkbox]:checked:before{background-color:#48c774;border-color:#44c571}.toggle .toggle.is-warning>[type=checkbox]:checked:before{background-color:#ffdd57;border-color:#ffdc52}.toggle .toggle.is-danger>[type=checkbox]:checked:before{background-color:#f14668;border-color:#f14164}.custom-loader{position:relative;width:48px;height:48px;display:inline-block}.custom-loader.is-small{width:24px;height:24px}.custom-loader.is-medium{width:96px;height:96px}.custom-loader.is-large{width:144px;height:144px}.custom-loader .dot{position:absolute;width:100%;height:100%;opacity:0;-webkit-transform:rotate(225deg);transform:rotate(225deg);-webkit-animation:orbit 7.15s infinite;animation:orbit 7.15s infinite}.custom-loader .dot .inner-dot{position:absolute;width:15%;height:15%;background:#363636;left:0;top:0;border-radius:50%}.custom-loader .dot:nth-child(1){-webkit-animation-delay:.31s;animation-delay:.31s}.custom-loader .dot:nth-child(2){-webkit-animation-delay:.62s;animation-delay:.62s}.custom-loader .dot:nth-child(3){-webkit-animation-delay:.93s;animation-delay:.93s}.custom-loader .dot:nth-child(4){-webkit-animation-delay:1.24s;animation-delay:1.24s}.custom-loader .dot:nth-child(5){-webkit-animation-delay:1.55s;animation-delay:1.55s}.custom-loader.is-white .dot .inner-dot{background-color:#fff}.custom-loader.is-black .dot .inner-dot{background-color:#0a0a0a}.custom-loader.is-light .dot .inner-dot{background-color:#f5f5f5}.custom-loader.is-dark .dot .inner-dot{background-color:#363636}.custom-loader.is-primary .dot .inner-dot{background-color:#00d1b2}.custom-loader.is-link .dot .inner-dot{background-color:#3273dc}.custom-loader.is-info .dot .inner-dot{background-color:#3298dc}.custom-loader.is-success .dot .inner-dot{background-color:#48c774}.custom-loader.is-warning .dot .inner-dot{background-color:#ffdd57}.custom-loader.is-danger .dot .inner-dot{background-color:#f14668}@-webkit-keyframes orbit{0%{opacity:1;-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}7%{opacity:1;-webkit-transform:rotate(300deg);transform:rotate(300deg);-webkit-animation-timing-function:linear;animation-timing-function:linear;origin:0}30%{opacity:1;-webkit-transform:rotate(410deg);transform:rotate(410deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;origin:7%}39%{opacity:1;-webkit-transform:rotate(645deg);transform:rotate(645deg);-webkit-animation-timing-function:linear;animation-timing-function:linear;origin:30%}70%{opacity:1;-webkit-transform:rotate(770deg);transform:rotate(770deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;origin:39%}75%{opacity:1;-webkit-transform:rotate(900deg);transform:rotate(900deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;origin:70%}76%{opacity:0;-webkit-transform:rotate(900deg);transform:rotate(900deg)}100%{opacity:0;-webkit-transform:rotate(900deg);transform:rotate(900deg)}}@keyframes orbit{0%{opacity:1;-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}7%{opacity:1;-webkit-transform:rotate(300deg);transform:rotate(300deg);-webkit-animation-timing-function:linear;animation-timing-function:linear;origin:0}30%{opacity:1;-webkit-transform:rotate(410deg);transform:rotate(410deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;origin:7%}39%{opacity:1;-webkit-transform:rotate(645deg);transform:rotate(645deg);-webkit-animation-timing-function:linear;animation-timing-function:linear;origin:30%}70%{opacity:1;-webkit-transform:rotate(770deg);transform:rotate(770deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;origin:39%}75%{opacity:1;-webkit-transform:rotate(900deg);transform:rotate(900deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;origin:70%}76%{opacity:0;-webkit-transform:rotate(900deg);transform:rotate(900deg)}100%{opacity:0;-webkit-transform:rotate(900deg);transform:rotate(900deg)}}.is-highlighted{box-shadow:0 1px 25px #b5b5b5}.is-highlighted .is-highlighted.is-white{box-shadow:0 1px 25px #e6e6e6}.is-highlighted .is-highlighted.is-black{box-shadow:0 1px 25px #000}.is-highlighted .is-highlighted.is-light{box-shadow:0 1px 25px #dbdbdb}.is-highlighted .is-highlighted.is-dark{box-shadow:0 1px 25px #1c1c1c}.is-highlighted .is-highlighted.is-primary{box-shadow:0 1px 25px #009e86}.is-highlighted .is-highlighted.is-link{box-shadow:0 1px 25px #205bbc}.is-highlighted .is-highlighted.is-info{box-shadow:0 1px 25px #207dbc}.is-highlighted .is-highlighted.is-success{box-shadow:0 1px 25px #34a85c}.is-highlighted .is-highlighted.is-warning{box-shadow:0 1px 25px #ffd324}.is-highlighted .is-highlighted.is-danger{box-shadow:0 1px 25px #ee1742}.navigation-view{background-color:#fff;position:fixed;top:0;left:0;height:100%;width:280px;max-width:280px;min-width:280px;-webkit-transition:width 258ms ease-out,-webkit-transform 258ms ease-out;transition:width 258ms ease-out,-webkit-transform 258ms ease-out;transition:transform 258ms ease-out,width 258ms ease-out;transition:transform 258ms ease-out,width 258ms ease-out,-webkit-transform 258ms ease-out;-webkit-transform:translateX(-110%);transform:translateX(-110%);box-shadow:0 0 50px rgba(0,0,0,.5);z-index:37;background-color:#f5f5f5}.navigation-view.is-active{-webkit-transform:translateX(0);transform:translateX(0)}.navigation-view .navbar-burger{display:block;min-width:75px}.navigation-view .menu{box-shadow:none;width:100%;max-height:90%;max-height:calc(100% - 3.2rem);overflow-y:auto;overflow-x:hidden}.navigation-view .menu .menu-label{padding-left:1em}.navigation-view .menu .menu-list a{border-radius:0}.navigation-view.is-static{border-right:1px solid rgba(0,0,0,.15);min-width:75px;max-width:280px;width:0;-webkit-transform:translateX(0);transform:translateX(0);box-shadow:none;-webkit-transition:none;transition:none}.navigation-view.is-static .menu-label{visibility:hidden}.navigation-view.is-static .menu-list a{height:40px;overflow:hidden;text-overflow:ellipsis;text-align:center}.navigation-view.is-static .menu-list a span.icon{margin-bottom:1em}.navigation-view.is-static.is-active{width:100%;box-shadow:0 0 50px rgba(0,0,0,.5);-webkit-transition:width 258ms ease-out,-webkit-transform 258ms ease-out;transition:width 258ms ease-out,-webkit-transform 258ms ease-out;transition:transform 258ms ease-out,width 258ms ease-out;transition:transform 258ms ease-out,width 258ms ease-out,-webkit-transform 258ms ease-out}.navigation-view.is-static.is-active .menu-label{visibility:visible}.navigation-view.is-static.is-active .menu-list a{text-align:left}@media screen and (min-width:1024px){.navigation-view.is-static{width:100%;box-shadow:none}.navigation-view.is-static .menu-label{visibility:visible}.navigation-view.is-static .menu-list a{text-align:left}.navigation-view.is-static .navbar-burger{cursor:default;opacity:0;z-index:-999}}.navigation-view.is-dark{border-right:1px solid rgba(0,0,0,.15)}.navigation-view.is-dark>.menu{background-color:#242424}.navigation-view.is-dark>.menu .menu-label{color:#b5b5b5}.navigation-view.is-dark>.menu .menu-list a{color:#f5f5f5}.navigation-view.is-dark>.menu .menu-list a:hover:not(.is-active){color:#363636}body.has-static-navigation-view{padding-left:75px}@media screen and (min-width:1024px){body.has-static-navigation-view{padding-left:280px}}.notification.is-top-left{width:320px;margin:1em;position:fixed;top:0;left:0;z-index:40}.notification.is-top-right{width:320px;margin:1em;position:fixed;top:0;right:0;z-index:40}.notification.is-top-center{width:320px;margin:1em;position:fixed;top:0;left:50%;margin-left:-160px;z-index:40}.notification.is-bottom-left{width:320px;margin:1em;position:fixed;bottom:0;left:0;z-index:40}.notification.is-bottom-right{width:320px;margin:1em;position:fixed;bottom:0;right:0;z-index:40}.notification.is-bottom-center{width:320px;margin:1em;position:fixed;bottom:0;left:50%;margin-left:-160px;z-index:40}