cronapp-framework-js/css/themes/custom/theme-general/menu-vertical-retratil.css

Javascript library for CronApp's projects

/* Collapsible menu customization */
#iconCollapsibleMenu {
    color: var(--colorDefault40, #3b448e);
    font-size: var(--textNormalSize, 14px);
}

label.labelCollapsibleMenu {
    position: absolute;
    z-index: 999999999;
    padding: 8px;
    font-size: var(--textBigSize, 24px);
    border-radius: 50%;
    background: var(--textColorDefault40, #ffffff);
    box-shadow: 0px 0px 6px 0 rgb(0 0 0 / 22%);
    -moz-box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.22);
    -webkit-box-shadow: 0px 0px 6px 0 rgb(0 0 0 / 22%);
    left: 66px;
    top: 20px;
    height: var(--textExtraBigSize, 30px);
    width: var(--textExtraBigSize, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
}

label.labelCollapsibleMenu:hover {
    cursor: pointer;
}

.k-checkbox:checked + .k-checkbox-label:hover:before,
.k-checkbox:checked + .k-checkbox-label:before {
    border-color: var(--textColorDefault40, #ffffff);
}

.collapsibleNavbar,
#iconCollapsibleMenu,
.main-view-retratil,
label.labelCollapsibleMenu,
.collapsible-menu-hide {
    transition: all .3s linear;
}

.crn-navigator-retratil:not(.crn-navigator-vertical) #crn-navbar-logo,
#checkCollapsibleMenu {
    display: none;
}

#view-canvas .crn-navigator-retratil .navbar-default .navbar-brand,
#view-canvas .crn-navigator-retratil.navbar-default .navbar-brand,
.collapsible-menu-hide {
    width: 75px;
}

.collapsible-menu-hide.crn-navigator-retratil .navbar .container-fluid .navbar-header .navbar-brand #crn-navbar-logo,
.collapsible-menu-hide.crn-navigator-retratil.navbar .container-fluid .navbar-header .navbar-brand #crn-navbar-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(var(--textNormalSize, 14px) * 2.25);
    transition: width .4s, height .4s;
}

.main-view-retratil.main-view-vertical {
    margin-left: calc(75px + 2vw);
    width: calc(100vw - 75px - 5vw);
}

.crn-navigator-retratil.collapsible-menu-hide cron-dynamic-menu ul li[data-component="crn-menu-item"] .dropdown-toggle {
    min-width: calc(var(--menuItemIconWidth) - 30px) !important;
}

/* Efeito check */
#checkCollapsibleMenu:checked ~ .collapsible-menu-ergon {
    transform: translateX(272px);
}

#checkCollapsibleMenu:checked ~ .labelCollapsibleMenu {
    transform: translateX(185px) rotate(180deg);
}

#checkCollapsibleMenu:checked ~ .collapsible-menu-hide {
    width: 270px;
    overflow-x: hidden;
    z-index: 2;
}

#checkCollapsibleMenu:checked ~ #crn-navbar-logo {
    height: calc(var(--textNormalSize, 14px) * 2.25);
    width: 100%;
}

#checkCollapsibleMenu:checked ~ .main-view-vertical {
    width: calc(100vw - var(--menuVerticalWidth, 170px) - 5vw);
    margin-left: calc(var(--menuVerticalWidth) + 2vw);
}

#view-canvas .crn-navigator-retratil.collapsible-menu-hide .navbar-default #navbar .navbar-nav li a span,
#view-canvas .crn-navigator-retratil.collapsible-menu-hide .navbar-default #navbar2 .navbar-nav li a span,
.crn-navigator-retratil.collapsible-menu-hide cron-dynamic-menu ul li[data-component="crn-menu-item"] .dropdown-toggle span,
.crn-navigator-retratil.collapsible-menu-hide cron-dynamic-menu ul .nav-item span,
#view-canvas .crn-navigator-retratil.collapsible-menu-hide.navbar-default #navbar .navbar-nav li a span,
#view-canvas .crn-navigator-retratil.collapsible-menu-hide.navbar-default #navbar2 .navbar-nav li a span {
    display: none;
}

#view-canvas .crn-navigator-retratil.collapsible-menu-hide .navbar-default #navbar .navbar-nav li,
#view-canvas .crn-navigator-retratil.collapsible-menu-hide .navbar-default #navbar2 .navbar-nav li,
#view-canvas .crn-navigator-retratil.collapsible-menu-hide.navbar-default #navbar .navbar-nav li,
#view-canvas .crn-navigator-retratil.collapsible-menu-hide.navbar-default #navbar2 .navbar-nav li{
    width: 100%;
}

#view-canvas .crn-navigator-retratil.collapsible-menu-hide .navbar-default #navbar .navbar-nav li a,
#view-canvas .crn-navigator-retratil.collapsible-menu-hide .navbar-default #navbar2 .navbar-nav li a,
#view-canvas .crn-navigator-retratil.collapsible-menu-hide.navbar-default #navbar .navbar-nav li,
#view-canvas .crn-navigator-retratil.collapsible-menu-hide.navbar-default #navbar2 .navbar-nav li{
    justify-content: center;
    display: flex;
}

.crn-navigator-retratil.collapsible-menu-hide cron-dynamic-menu ul li[data-component="crn-menu-item"] .dropdown-toggle,
.crn-navigator-retratil.collapsible-menu-hide cron-dynamic-menu ul .nav-item .dropdown-toggle {
    text-align: center;
    padding: 10px 16px;
}

#checkCollapsibleMenu:checked ~ .crn-navigator-retratil.collapsible-menu-hide cron-dynamic-menu ul li[data-component="crn-menu-item"] .dropdown-toggle,
#checkCollapsibleMenu:checked ~ .crn-navigator-retratil.collapsible-menu-hide cron-dynamic-menu ul .nav-item .dropdown-toggle {
    text-align: left;
    pointer-events: initial;
    display: flex;
}

#checkCollapsibleMenu:checked ~ .crn-navigator-retratil.collapsible-menu-hide cron-dynamic-menu ul li[data-component="crn-menu-item"] .dropdown-toggle span,
#checkCollapsibleMenu:checked ~ .crn-navigator-retratil.collapsible-menu-hide cron-dynamic-menu ul .nav-item span {
    display: block;
}

.crn-navigator-retratil-left{
    float: left;
}