luyadev/luya-module-cms

#luya-cms-toolbar-wrapper {
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateY(-100%);
    transition: 0.25s ease transform;
    z-index: 10000;
}

#luya-cms-toolbar-wrapper * {
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
}

#luya-cms-toolbar-wrapper .material-icons {
    font-family: "Material Icons" !important;
    font-size: 24px !important;
}

@media screen and (max-width: 900px) {
    #luya-cms-toolbar-wrapper {
        display: none;
    }
}

#luya-cms-toolbar-wrapper.luya-cms-toolbar-wrapper--open {
    transform: translateY(0);
}

/* ==================================================
 * TOOLBAR
 * ================================================== */

#luya-cms-toolbar {
    background-color: #FFF;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    height: 50px;
    position: relative;
    width: 100%;
    z-index: 1000;
}

#luya-cms-toolbar:after {
    clear: both;
    content: "";
    display: table;
}

/* ==================================================
 * LOGO
 * ================================================== */

.luya-cms-toolbar__logo {
    display: inline-block;
    font-size: 10px !important;
    padding: 11px 15px;
    text-align: center;
    vertical-align: middle;
    float: left;
}

.luya-cms-toolbar__logo a {
    color: #333;
    text-decoration: none
}

.luya-cms-toolbar__logo-version {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.luya-cms-toolbar__logo-svg {
    display: inline-block;
    height: 28px;
    vertical-align: middle;
    width: 31px;
}

/* ==================================================
 * No bullets
 * ================================================== */

.luya-cms-toolbar__no-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
}

.luya-cms-toolbar__no-bullets li:not(:first-of-type) {
    margin-top: 5px;
}

/* ==================================================
 * BUTTON
 * ================================================== */

.luya-cms-toolbar__button {
    color: #E50060;
    display: inline-block;
    float: left;
    line-height: 1;
    margin: 0;
    vertical-align: middle;
}

.luya-cms-toolbar__button a,
.luya-cms-toolbar__button .luya-cms-toolbar__button-text {
    color: #333;
    display: block;
    font-size: 14px !important;
    height: 100%;
    padding: 12px 25px;
    text-decoration: none !important;
    transition: 0.25s ease color, 0.35s ease background-color, 0.25s ease box-shadow;
    width: 100%;
}

.luya-cms-toolbar__button a:hover,
.luya-cms-toolbar__button a.open {
    background-color: #E50060;
    color: #FFF;
}

.luya-cms-toolbar__button--info {
    background-color: #f0f0f0;
}

.luya-cms-toolbar__button--info i {
    color: #000;
}

.luya-cms-toolbar__button span,
.luya-cms-toolbar__button i {
    vertical-align: middle;
}

.luya-cms-toolbar__button a .material-icons {
    transition: 0.25s ease transform;
}

.luya-cms-toolbar-wrapper--open .luya-cms-toolbar__button a.open .material-icons {
    transform: rotate(180deg);
}

.luya-cms-toolbar__pull-right {
    float: right;
}

.luya-cms-toolbar__margin-left {
    margin-left: 10px;
}

/* ==================================================
 * Badge
 * ================================================== */

.luya-cms-toolbar__badge {
    background-color: #f0f0f0;
    border-radius: 5px;
    color: #000;
    display: inline-block;
    font-size: 12px !important;
    line-height: 1;
    padding: 2px 8px;
    text-align: center;
}

.luya-cms-toolbar__badge + span {
    margin-left: 7px;
}

.luya-cms-toolbar__badge--danger {
    background-color: #bc2d14;
    color: #fff;
}

.luya-cms-toolbar__badge--success {
    background-color: #64CC2A;
    color: #fff;
}

.luya-cms-toolbar__badge--warning {
    background-color: #d0be5d;
    color: #fff;
}

/* ==================================================
 * TOGGLER
 * ================================================== */

.luya-cms-toolbar-container__toggler {
    background-color: #E50060;
    border-radius: 0 0 5px 5px;
    bottom: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    position: absolute;
    right: 19px;
    transform: translateY(100%);
    z-index: 1500;
}

.luya-cms-toolbar-container__toggler a {
    text-decoration: none !important;
}

.luya-cms-toolbar-container__toggler-badge {
    background-color: #E50060;
    border-radius: 50%;
    bottom: -15px;
    color: #fff;
    height: 25px;
    left: -15px;
    line-height: 25px;
    opacity: 1;
    position: absolute;
    text-align: center;
    transition: 0.5s ease-in-out opacity;
    width: 25px;
}

.luya-cms-toolbar-wrapper--open .luya-cms-toolbar-container__toggler-badge {
    opacity: 0;
}

/* ====================
 * Arrows
 * ==================== */

.luya-cms-toolbar__arrow {
    color: #fff;
    display: block;
    transition: 0.25s ease transform;
}

.luya-cms-toolbar-wrapper--open .luya-cms-toolbar__arrow {
    transform: rotate(180deg);
}

/* ==================================================
 * Toolbar container
 * ================================================== */

.luya-cms-toolbar__container {
    background-color: #fff;
    padding: 25px;
    position: absolute;
    transform: translateY(-100%);
    transition: 0.25s ease transform, 0.25s ease box-shadow;
    width: 100%;
    z-index: 500;
}

.luya-cms-toolbar-wrapper--open .luya-cms-toolbar__container.luya-cms-toolbar__container--open {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    transform: translateY(0);
}

/* ==================================================
 * List
 * ================================================== */

.luya-cms-toolbar__list-entry {
    display: block;
}

.luya-cms-toolbar__list-entry-left,
.luya-cms-toolbar__list-entry-right {
    display: inline-block;
    vertical-align: top;
}

.luya-cms-toolbar__list-entry-left {
    min-width: 250px;
}

.luya-cms-toolbar__list-entry label {
    font-weight: bold;
}

/* ==================================================
 * Text colors
 * ================================================== */

.luya-cms-toolbar__text {
}

.luya-cms-toolbar__text--danger {
    color: #FF4E50;
}

.luya-cms-toolbar__text--success {
    color: #64CC2A;
}

.luya-cms-toolbar__text--warning {
    color: #E50060;
}