tgb-component-library/dist/tgb-component-library.css

Tagboard reusable component library for Vue 3 services.

@import url(https://d1azc1qln24ryf.cloudfront.net/61472/Navbar/style-cf.css?iw1va);.application-launcher{position:relative;line-height:60px}.application-launcher:hover .application-launcher-icon{opacity:1}.application-launcher-icon{width:22px;border-radius:2px;vertical-align:middle;opacity:.8;transition:all .3s ease-in-out}.launcher-dropdown{position:absolute;right:-200%;background-color:#d9d8e6;text-align:center}.launcher-dropdown .dropdown-item{padding:3vh 2vw;display:flex;flex-direction:row}.launcher-dropdown .launcher-dropdown-icon{margin-right:25px;padding-top:8px}.dark .launcher-dropdown{background:#272727;color:#fff;border:1px solid #323232;box-shadow:0 4px 8px #000;border-radius:3px}.dark .launcher-dropdown .dropdown-item:hover{background:#2bacca}.account-dropdown{position:relative;line-height:60px}.account-dropdown-icon{width:35px;border-radius:100%;vertical-align:middle;transition:all .3s ease-in-out}.account-dropdown-menu{background-color:#fff;border:0 1px 1px solid #d9d8e6;border-radius:2px;position:absolute;right:0;top:100%;white-space:nowrap}.account-dropdown-menu .account-dropdown-item{padding:12px 30px}.dark .account-dropdown-menu{background:#272727;color:#fff;border:1px solid #323232;box-shadow:0 4px 8px #000;border-radius:3px}.dark .account-dropdown-menu div:hover{background:#2bacca}.dropdown-links{list-style-type:none;padding:0;margin:0;text-align:left}.dropdown-link{color:#2c3e50;padding:5px 15px;line-height:25px;border-bottom:1px solid transparent;white-space:nowrap;font-size:.9em;min-width:150px;opacity:1}.dropdown-link:hover{background-color:#efefef;color:#2bacca}.dropdown-link a{text-decoration:none}.navbar,.navbar-account-container,.navbar-brand-container,.navbar-links-container{display:flex;align-items:center}.navbar{padding:0 15px;height:60px;border-bottom:1px solid #d9d8e6}.navbar.dark{background:#303030;color:#fff}.navbar.dark .navbar-brand{color:#9aaaad}.navbar-brand-container{margin-right:15px}.navbar-brand-container .navbar-logo{height:45px;border-radius:3px}.navbar-brand-container .navbar-brand{display:flex;font-size:1.1em;padding:0 5%;font-weight:600;white-space:nowrap;color:#6a7b7f}.navbar-links-container .navbar-links{display:flex;flex-direction:row;align-items:center;font-size:.9em}.navbar-links-container .nav-link{padding:0 2%;transition:all .3s ease-in-out}.navbar-links-container .nav-link.active,.navbar-links-container .nav-link:hover{color:#2bacca;cursor:pointer}.navbar-links-container .underline .nav-link.active,.navbar-links-container .underline .nav-link:hover{border-bottom:1px solid #2bacca}.navbar-links-container .nav-icon{margin:0 6px}.navbar-links-container .nav-icon:last-child{margin-right:0}.navbar-links-container .nav-icon:hover{opacity:1;cursor:pointer}.navbar-links-container .help-icon{width:22px;height:auto;vertical-align:middle}.navbar-links-left{flex-grow:1}@media (max-width:767px){.navbar-brand{font-size:.8em}.navbar-logo{height:30px}.navbar-links-container{position:relative;display:flex;align-items:center}.navbar-links{flex-direction:column;justify-content:center;text-align:left;position:fixed;height:100vh;width:50vw;left:-50%;top:0;background-color:#d9d8e6;border-radius:2px;z-index:9}.dark .navbar-links{background:#303030;color:#fff}.nav-link{padding:10% 0}.nav-link:hover{color:#2bacca;cursor:pointer}.nav-link.active{color:#2bacca;font-weight:600}}.burger-menu{position:relative;display:flex;flex-direction:column;justify-content:space-around;width:1.5rem;height:1.5rem;background:transparent;border:none;cursor:pointer;padding:0;z-index:10;margin-left:.5%;margin-right:4%}.burger-menu:focus{outline:none}.burger-menu div{width:1.5rem;height:.2rem;background:#6a7b7f;border-radius:10px;transition:all .3s linear;position:relative;transform-origin:1px}.dark .burger-menu div{background:#9aaaad}