cronapp-framework-js 3.0.0-SP.3 → 3.0.0-SP.31

package/css/themes/custom/material-round/grid-material-round.css

@@ -94,9 +94,7 @@
 .k-state-selected,
 .k-state-selected:link,
 .k-state-selected:visited,
-.k-tool.k-state-selected,
-.k-grid td.k-state-selected:hover,
-.k-grid tr.k-state-selected:hover td {
+.k-tool.k-state-selected {
     background: var(--colorDefault40, #442b69);
     color: var(--textColorDefault40, #fffef9);
 }
@@ -164,7 +162,6 @@
 }
 
 /*Buttons*/
-
 .btn.btn-default:focus,
 .btn.btn-default:hover {
     background: var(--colorDefault20, #b9abce);
@@ -310,6 +307,8 @@ thead.k-grid-header th.k-header:last-child {
 
 .k-grid tr td {
     border-radius: 10px;
+    background: var(--backgroundColor10, #fffef9);
+    color: var(--textColor40, #434343);
 }
 
 .carousel-control .glyphicon-chevron-left,
@@ -359,11 +358,6 @@ label {
     border-radius: 20px;
 }
 
-.k-dropdown-wrap .k-input:focus:hover {
-    background: var(--colorDefault20, #b9abce);
-    border-radius: 20px;
-}
-
 .k-webkit .k-pager-numbers .k-current-page .k-link {
     background: var(--colorDefault40, #487b4e);
     border-color: var(--colorDefault40, #487b4e);
@@ -388,10 +382,13 @@ label {
 
 .k-pager-sizes .k-dropdown-wrap .k-input {
     background: var(--colorDefault40, #487b4e);
-    color: var(--texColorPrimary40, #fffef9);
+    color: var(--textColorPrimary40, #fffef9);
     border-color: var(--colorDefault40, #487b4e);
     border-radius: 10px;
-    margin-left: -4px;
+    text-indent: initial;
+    margin-left: -3px;
+    width: auto;
+    text-align: center;
 }
 
 .k-dropdown-wrap .k-input {
@@ -401,7 +398,6 @@ label {
 .k-state-default>.k-select {
     background: transparent;
     border: unset;
-    margin-right: -2px;
 }
 
 .k-pager-wrap .k-link.k-state-disabled:hover {
@@ -423,19 +419,80 @@ label {
 
 .k-dropdown-wrap,
 .k-dropdown-wrap.k-state-default {
+    background: var(--backgroundColor10, #fffef9);
     border-bottom: none;
+    border-radius: 20px;
+}
+
+.k-dropdown-wrap {
+    background: transparent;
+    border-radius: 20px;
+}
+
+/*Caixa seleção multipla*/
+
+.k-multiselect.k-state-border-down .k-multiselect-wrap,
+.k-list-container .k-popup .k-group .k-reset {
+    border-radius: 20px;
+    border: transparent;
+}
+
+#taglist-padrao-do-tema-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up,
+#taglist-secundario-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up,
+#taglist-sucesso-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up,
+#taglist-informacao-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up,
+#taglist-aviso-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up,
+#taglist-perigo-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up,
+#taglist-claro-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up,
+#taglist-estavel-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up,
+#taglist-real-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up,
+#taglist-escuro-list.k-list-container.k-popup.k-group.k-reset.k-state-border-up {
+    border-radius: 20px;
+}
+
+#cron-crn-enterprise-combobox-multiple-default-list.k-list-container.k-popup.k-group.k-reset,
+#cron-crn-enterprise-combobox-multiple-primary-list.k-list-container.k-popup.k-group.k-reset,
+#cron-crn-enterprise-combobox-multiple-success-list.k-list-container.k-popup.k-group.k-reset,
+#cron-crn-enterprise-combobox-multiple-info-list.k-list-container.k-popup.k-group.k-reset,
+#cron-crn-enterprise-combobox-multiple-warning-list.k-list-container.k-popup.k-group.k-reset,
+#cron-crn-enterprise-combobox-multiple-danger-list.k-list-container.k-popup.k-group.k-reset,
+#cron-crn-enterprise-combobox-multiple-light-list.k-list-container.k-popup.k-group.k-reset,
+#cron-crn-enterprise-combobox-multiple-stable-list.k-list-container.k-popup.k-group.k-reset,
+#cron-crn-enterprise-combobox-multiple-royal-list.k-list-container.k-popup.k-group.k-reset,
+#cron-crn-enterprise-combobox-multiple-dark-list.k-list-container.k-popup.k-group.k-reset {
+    border-radius: 20px;
+}
+
+
+.k-list-container .kpopup .k-group .k-reset .k-state-border-up #cron-crn-enterprise-combobox-multiple-658028-list {
+    border-radius: 20px;
 }
 
 .k-popup .k-list .k-state-focused {
     box-shadow: none;
     background: var(--colorStable30, #dbdbdb);
+    border-radius: 20px;
 }
 
+#cron-crn-enterprise-autocomplete-207639-list.k0list-container.k-popup.k-group.k-reset.k-state-border-up {
+    border-radius: 20px;
+}
+
+
 .k-list>.k-state-hover {
     box-shadow: none;
     background: var(--colorStable20, #e6e6e6);
 }
 
+.k-combobox .k-state-default .k-input {
+    box-shadow: none;
+}
+
+.k-popup .k-list .k-item, .k-list>.k-state-hover, .k-state-hover:hover {
+    color: var(--textColor40, #434343);
+    border-radius: 20px;
+}
+
 .k-i-check:before,
 .k-i-cancel:before {
     left: 1px;
@@ -443,6 +500,7 @@ label {
 
 .k-autocomplete.k-state-default {
     border-bottom: none;
+    border-radius: 20px;
 }
 
 cron-grid .k-tooltip span:before {
@@ -464,16 +522,14 @@ cron-grid .k-tooltip span:before {
 .k-calendar .k-link.k-nav-fast,
 .k-calendar .k-header .k-link.k-nav-next,
 .k-calendar .k-header .k-link.k-nav-prev {
-    background: var(--colorDefault40, #442b69);
-    color: var(--textColorDefault40, #fffef9);
+    background: var(--backgroundColor70, #d9d9d9);
+    color: var(--textColor40, #434343);
     font-size: 12px;
     font-style: normal;
     font-weight: 700;
-
 }
 
 .k-calendar .k-content .k-link {
-    color: white;
     display: block;
     overflow: hidden;
     min-height: 1.8333em;
@@ -482,10 +538,22 @@ cron-grid .k-tooltip span:before {
     color: var(--textColor40, #434343);
 }
 
-.k-calendar-container.k-popup.k-group.k-reset.k-state-border-up {
+.k-calendar-container.k-popup.k-group.k-reset.k-state-border-up,
+.k-calendar .k-header {
     background: var(--backgroundColor70, #d9d9d9);
 }
 
+.k-calendar .k-link {
+    background: var(--backgroundColor10, #fffef9);
+}
+
+.k-calendar .k-footer .k-nav-today {
+    background: var(--backgroundColor70, #d9d9d9);
+}
+
+.k-calendar-container>.k-calendar {
+    background: var(--backgroundColor70, #d9d9d9);
+}
 
 .k-button.k-scheduler-delete {
     background: var(--colorDanger40, #e34646);
@@ -525,6 +593,34 @@ cron-grid .k-tooltip span:before {
     background: var(--colorDefault40, #442b69);
 }
 
+/* Calendar*/
+.k-calendar .k-content,
+.k-calendar .k-content th {
+    text-align: center;
+}
+
+td .k-calendar .k-today.k-state-selected,
+.k-calendar .k-state-focused,
+.k-calendar td.k-state-focused a.k-link,
+.gridcell {
+    background: var(--colorDefault40, #442b69);
+    color: var(--textColorDefault40, #fffef9);
+    box-shadow: none;
+}
+
+.k-calendar .k-state-focused,
+.k-calendar td.k-state-focused {
+    box-shadow: unset;
+}
+
+.k-calendar .k-state-focused:hover,
+.k-calendar td.k-state-focused:hover > a.k-link {
+    background: var(--colorDefault20, #b9abce);
+    color: var(--textColorDefault40, #fffef9);
+    border-radius: 5px;
+    box-shadow: unset;
+}
+
 .k-calendar.kstate-selected.k-state-hover.k-link {
     background: var(--colorDefault40, #442b69);
     color: var(--textColorDefault40, #fffef9);
@@ -533,14 +629,44 @@ cron-grid .k-tooltip span:before {
 .k-calendar th {
     background: var(--colorDefault40, #442b69);
     color: var(--textColorDefault40, #fffef9);
+    border: solid 1px #fffef9;
+    border-radius: 5px;
+}
+
+.k-calendar.k-today.k-state-selected {
+    background: var(--colorDefault40, #442b69);
+    color: var(--textColorDefault40, #fffef9);
+}
+
+.k-calendar .k-state-selected .k-link {
+    background: var(--colorDefault40, #442b69);
+    color: var(--textColorDefault40, #fffef9);
+    box-shadow: transparent;
+    border: unset;
 }
 
 .k-calendar .k-state-selected.k-state-hover .k-link {
+    background: var(--colorDefault20, #b9abce);
+    color: var(--textColorDefault40, #fffef9);
+    box-shadow: transparent;
+    border: unset;
+}
+
+.k-calendar-container.k-group {
+    border: unset;
+}
+
+td.k-state-focused.k-state-selected {
     background: var(--colorDefault40, #442b69);
     color: var(--textColorDefault40, #fffef9);
     box-shadow: unset;
 }
 
+.k-link-selected {
+    background: var(--colorDefault40, #442b69);
+    color: var(--textColorDefault40, #fffef9);
+}
+
 span.k-icon.k-i-calendar::before,
 .k-i-clock:before {
     color: var(--colorDefault40, #442b69);
@@ -565,6 +691,36 @@ td.k-today {
     box-shadow: unset;
 }
 
-.k-icon k-i-close::before {
+.k-icon k-i-close::before,
+.k-nav-next {
     color: var(--colorDefault40, #442b69);
+}
+
+.k-webkit .k-pager-numbers .k-current-page .k-link {
+    width: 3.2em;
+    padding: 0 0.429em 0 0.714em;
+    border-radius: 4px;
+    border-right: 1px solid #cccccc;
+    color: var(--textColorDefault40, #fffef9);
+}
+
+.k-link .k-state-selected .k-state-focused {
+    background: var(--colorDefault40, #442b69);
+    color: var(--textColorDefault40, #fffef9);
+}
+
+.k-calendar .k-content .k-link:hover,
+.k-scheduler-edit-form .k-edit-field .k-button:hover {
+    background: var(--colorDefault20, #b9abce);
+    color: var(--textColorDefault40, #fffef9);
+}
+
+.k-scheduler-edit-form .k-edit-field .k-button:active {
+    background: var(--colorDefault70, #25183a);
+    color: var(--textColorDefault70, #fffef9);
+}
+
+.k-calendar .k-content {
+    border: transparent;
+    width: calc(200px - 1%) !important;
 }

package/css/themes/custom/materialui/custom-materialui.css

@@ -30,6 +30,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;

package/css/themes/custom/navigator/custom-navigator.css

@@ -11,11 +11,20 @@
 }
 
 .crn-navigator-vertical .navbar-default #navbar .navbar-nav li .dropdown-menu a,
-.crn-navigator-vertical .navbar-default #navbar2 .navbar-nav li .dropdown-menu a {
+.crn-navigator-vertical .navbar-default #navbar2 .navbar-nav li .dropdown-menu a,
+.crn-navigator-vertical.navbar-default #navbar .navbar-nav li .dropdown-menu a,
+.crn-navigator-vertical.navbar-default #navbar2 .navbar-nav li .dropdown-menu a {
     color: var(--textColor10, #111111);
     margin: 0;
 }
 
+.main-view-vertical {
+    display: inline-block;
+    width: calc(100vw - var(--menuVerticalCollapsedWidth, 225px) - 4vw);
+    margin-left: calc(225px + 2vw);
+    margin-top: 5.5vh;
+}
+
 @media only screen and (min-width: 768px) {
     .main-view-vertical {
         display: inline-block;
@@ -40,7 +49,8 @@
         background: var(--colorDefault40, #0f172a);
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-header {
         padding-left: 15px;
     }
 
@@ -48,11 +58,13 @@
         width: 100%;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>#navbar {
+    .crn-navigator-vertical>.navbar>.container-fluid>#navbar,
+    .crn-navigator-vertical.navbar>.container-fluid>#navbar {
         width: 100%;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid {
+    .crn-navigator-vertical>.navbar>.container-fluid,
+    .crn-navigator-vertical.navbar>.container-fluid {
         padding-right: 0;
         padding-left: 0;
         display: flex;
@@ -63,16 +75,22 @@
     .crn-navigator-vertical>.navbar>.container-fluid .navbar-collapse,
     .crn-navigator-vertical>.navbar>.container-fluid .navbar-header,
     .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse,
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header,
+    .crn-navigator-vertical.navbar>.container-fluid .navbar-collapse,
+    .crn-navigator-vertical.navbar>.container-fluid .navbar-header,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-header{
         margin-right: 0;
         margin-left: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header>.navbar-toggle {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header>.navbar-toggle,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-header>.navbar-toggle {
         display: none;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse.collapse {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse.collapse,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse.collapse {
         padding-right: 0;
         padding-left: 0;
         overflow-x: visible;
@@ -82,7 +100,8 @@
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse.in {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse.in,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse.in{
         overflow-y: auto;
         display: block;
     }
@@ -94,31 +113,39 @@
         box-shadow: none;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav {
         float: none;
         margin: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
         line-height: 20px;
     }
 
     .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu .dropdown-header,
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu .dropdown-header,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a{
         padding: 5px 15px 5px 25px;
     }
 
-    .crn-navigator-vertical .navbar>.container-fluid>.navbar-collapse>.navbar-nav>li>a {
+    .crn-navigator-vertical .navbar>.container-fluid>.navbar-collapse>.navbar-nav>li>a,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>li>a{
         padding-top: 15px;
         padding-bottom: 15px;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>li {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>li,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>li{
         float: none;
     }
 
     .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu,
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
         position: static;
         float: none;
         width: auto;
@@ -133,37 +160,44 @@
     }
 
     .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a:hover,
-    .crn-navigator-vertical>.navbar>.navbar-nav .open .dropdown-menu>li>a:focus {
+    .crn-navigator-vertical>.navbar>.navbar-nav .open .dropdown-menu>li>a:focus,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a:hover,
+    .crn-navigator-vertical.navbar>.navbar-nav .open .dropdown-menu>li>a:focus {
         color: #fff;
         background: #282d57;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .dropdown-menu {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .dropdown-menu,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .dropdown-menu{
         margin-left: 11px;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right {
         float: none !important;
         margin-right: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right .dropdown-menu {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right .dropdown-menu,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right .dropdown-menu {
         left: 0;
         right: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right img {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right img,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right img{
         margin-left: 0;
         margin-top: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header>.navbar-brand img {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header>.navbar-brand img,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-header>.navbar-brand img{
         margin-top: 0;
     }
 }
 
 @media only screen and (max-width: 400px) {
-    .main-view {
+    .main-view.main-view-horizontal {
         padding: 0px !important;
         margin: 0px;
         width: 100% !important;
@@ -171,8 +205,33 @@
     .k-scheduler-phone {
         overflow-y: auto !important;
     }
+
+    #main-nav-bar > nav {
+        margin-top: 0px !important;
+    }
 }
 
+@media only screen and (max-width: 767px) {
+    .crn-navigator-vertical {
+        height: 100%;
+        position: fixed;
+    }
+
+    #navbar, #navbar2 {
+        overflow-x: hidden;
+    }
+
+    /* adjusting the margin of the retractable menu submenu */
+    .crn-navigator-retratil .dropdown-menu .dropdown-submenu {
+        margin-left: 25px;
+    }
+
+    /*hide the retractable menu arrow, as there is no space to "detach" */
+    #main-nav-bar > label {
+        display: none;
+    }
+
+}
 
 /**** Changing scroll bar  ****/
 .crn-navigator-vertical::-webkit-scrollbar {

package/css/themes/custom/paper/custom-paper.css

@@ -37,6 +37,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;

package/css/themes/custom/readable/custom-readable.css

@@ -37,6 +37,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;

package/css/themes/custom/sandstone/custom-sandstone.css

@@ -37,6 +37,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;

package/css/themes/custom/simplex/custom-simplex.css

@@ -37,6 +37,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;

package/css/themes/custom/slate/custom-slate.css

@@ -36,6 +36,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;

package/css/themes/custom/spacelab/custom-spacelab.css

@@ -37,6 +37,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;

package/css/themes/custom/superhero/custom-superhero.css

@@ -38,6 +38,7 @@
 
     /* Menus - Sizes and Distances */
     --menuVerticalWidth: 270px;
+    --menuVerticalCollapsedWidth: 225px;
     --menuSideSize: 20px;
     --menuItemBarSize: 6px;
     --menuElementOverallPadding: 10px;