cronapp-framework-js 2.9.3 → 2.9.4-RC.3

package/css/themes/custom/dsgov/navbar-dsgov.css

@@ -1,27 +1,43 @@
+/* Fixar o menu no topo */
+#main-nav-bar.crn-navigator-horizontal {
+    position: fixed;
+    width: 100%;
+    z-index: 900;
+}
+
 .navbar img[src="node_modules/cronapp-framework-js/dist/img/img-user.svg"] {
     background: var(--colorDefault40, #1351b4);
 }
 
 .navbar.navbar-default {
     background: var(--backgroundColor40, #ffffff);
-    box-shadow: 0 1px 6px rgb(0 0 0 / 16%);
     border: 0;
+    box-shadow: 0 1px 6px rgb(0 0 0 / 16%);
+}
+
+.crn-navigator-vertical .navbar.navbar-default {
+    box-shadow: none;
 }
 
 .navbar.navbar-default .container-fluid {
     display: flex;
     justify-content: space-between;
-    padding: 0 var(--menuSideSize);
+    padding: 0 var(--menuSideSize, 20px);
 }
 
 .navbar.navbar-default .container-fluid #navbar {
     width: 100%;
 }
 
-
 .navbar.navbar-default .container-fluid #navbar .navbar-nav .nav,
 .crn-navigator-horizontal .navbar.navbar-default .container-fluid #navbar .navbar-nav {
-    float: right !important;
+    display: flex;
+    justify-content: flex-end;
+}
+
+#main-nav-bar.crn-navigator-vertical .navbar.navbar-default .container-fluid #navbar .navbar-nav .nav,
+#main-nav-bar.crn-navigator-vertical .crn-navigator-horizontal .navbar.navbar-default .container-fluid #navbar .navbar-nav {
+    display: block;
 }
 
 .navbar.navbar-default .container-fluid #navbar2 .navbar-nav>li>a,
@@ -72,7 +88,7 @@
 .navbar.navbar-default .navbar-nav>.open>a:focus,
 .navbar.navbar-default .navbar-nav>.open>a:hover {
     color: var(--colorDefault50, #11479e);
-    background: transparent;
+    background: var(--colorDefault10, #d6daeb);
 }
 
 .navbar.navbar-default .container-fluid #navbar .navbar-nav li .dropdown-menu li a:hover,
@@ -94,17 +110,6 @@
     top: auto;
 }
 
-.navbar.navbar-default .container-fluid #navbar .navbar-nav li .dropdown-menu a,
-.navbar.navbar-default .container-fluid #navbar2 .navbar-nav li .dropdown-menu a,
-#main-nav-bar .navbar.navbar-default .container-fluid #navbar .navbar-nav li .dropdown-menu a,
-#main-nav-bar .navbar.navbar-default .container-fluid #navbar2 .navbar-nav li .dropdown-menu a {
-    color: var(--colorDefault40, #1351b4);
-    padding-top: 10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--backgroundColor50, #dfdfdf);
-    justify-content: flex-start;
-}
-
 .navbar.navbar-default .container-fluid #navbar .navbar-nav .dropdown-menu li:last-child a,
 .navbar.navbar-default .container-fluid #navbar2 .navbar-nav .dropdown-menu li:last-child a {
     border: 0;
@@ -116,18 +121,18 @@
     border-bottom: 1px solid var(--backgroundColor50, #dfdfdf);
 }
 
-#main-nav-bar.crn-navigator-vertical .navbar-default .container-fluid #navbar .navbar-nav .dropdown-menu li:last-child a,
-#main-nav-bar.crn-navigator-vertical .navbar-default .container-fluid #navbar2 .navbar-nav .dropdown-menu li:last-child a {
-    border-bottom: 1px solid var(--backgroundColor50, #dfdfdf);
-}
-
 #main-nav-bar.crn-navigator-horizontal .navbar-default .container-fluid #navbar .navbar-nav .dropdown-menu li:last-child a,
 #main-nav-bar.crn-navigator-horizontal .navbar-default .container-fluid #navbar2 .navbar-nav .dropdown-menu li:last-child a {
     border-bottom: 0;
 }
 
-.navbar.navbar-default .container-fluid #navbar .navbar-nav .dropdown-menu {
-    margin-top: -4px;
+#main-nav-bar.crn-navigator-vertical .navbar.navbar-default .container-fluid #navbar .navbar-nav .dropdown-menu {
+    background: var(--colorStable40, #f8f8f8);
+}
+
+#main-nav-bar.crn-navigator-vertical .container-fluid #navbar .navbar-nav .dropdown-menu {
+    padding-left: 11px;
+    margin-left: 0;
 }
 
 .navbar.navbar-default .container-fluid #navbar2 .navbar-nav .dropdown-menu {
@@ -148,7 +153,7 @@
 
 #main-nav-bar.crn-navigator-vertical .navbar-default .container-fluid {
     flex-wrap: unset;
-    padding: 0 var(--menuItemPaddingSize, 15px);
+    padding: 0;
 }
 
 .navbar.navbar-default .navbar-brand {
@@ -194,7 +199,76 @@
     border-color: transparent;
 }
 
+.navbar-nav>li>a,
+.navbar-nav>li>a:hover {
+    display: flex;
+    align-items: center;
+}
+
+/* Dynamic Menu */
+.nav>li>a:focus,
+.nav>li>a:hover {
+    color: var(--colorDefault40, #1351b4);
+    background: var(--colorDefault10, #d6daeb);
+}
+
+.nav .open>a,
+.nav .open>a:focus,
+.nav .open>a:hover {
+    background: var(--colorDefault10, #d6daeb);
+    border-color: transparent;
+}
+
+.dropdown-menu li a {
+    color: var(--colorDefault40, #1351b4);
+    border-bottom: 1px solid var(--backgroundColor50, #dfdfdf);
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.dropdown-menu li:last-child a {
+    border-bottom: 0;
+}
+
+.navbar>.container .navbar-brand,
+.navbar>.container-fluid .navbar-brand,
+.navbar-default .navbar-brand {
+    margin-left: 0;
+}
+
+.dropdown-menu>li>a:focus,
+.dropdown-menu>li>a:hover {
+    color: var(--colorDefault40, #1351b4);
+    background: var(--colorDefault10, #d6daeb);
+    border-radius: 0;
+}
+
+
+#main-view.container-fluid {
+    padding-top: 68px;
+    margin-top: 0;
+}
+
+.navbar.navbar-default .container-fluid #navbar .navbar-nav li .dropdown-menu a,
+.navbar.navbar-default .container-fluid #navbar2 .navbar-nav li .dropdown-menu a,
+#main-nav-bar .navbar.navbar-default .container-fluid #navbar .navbar-nav li .dropdown-menu a,
+#main-nav-bar .navbar.navbar-default .container-fluid #navbar2 .navbar-nav li .dropdown-menu a {
+    color: var(--colorDefault40, #1351b4);
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border: 0;
+    justify-content: flex-start;
+}
+
 @media (max-width: 767px) {
+
+    #main-nav-bar.crn-navigator-vertical {
+        position: fixed;
+        width: 100%;
+        z-index: 900;
+        box-shadow: none;
+    }
+
     .navbar.navbar-default .container-fluid #navbar .navbar-nav {
         float: none !important;
     }
@@ -239,25 +313,63 @@
 
     .navbar-default .container-fluid #navbar2 .navbar-nav .dropdown-menu,
     .navbar-default .container-fluid #navbar .navbar-nav .dropdown-menu {
-        background: var(--colorLight10);
+        background: var(--colorLight10, #ffffff);
     }
 
-    .navbar.navbar-default .container-fluid #navbar .navbar-nav li.open>a,
-    .navbar.navbar-default .container-fluid #navbar2 .navbar-nav li.open>a,
-    .navbar.navbar-default .container-fluid #navbar .navbar-nav li .dropdown-menu a,
-    .navbar.navbar-default .container-fluid #navbar2 .navbar-nav li .dropdown-menu a,
-    #main-nav-bar .navbar-default .container-fluid #navbar .navbar-nav li.open>a,
-    #main-nav-bar .navbar-default .container-fluid #navbar2 .navbar-nav li.open>a,
-    #main-nav-bar .navbar-default .container-fluid #navbar .navbar-nav li .dropdown-menu a,
-    #main-nav-bar .navbar-default .container-fluid #navbar2 .navbar-nav li .dropdown-menu a {
-        border: 0;
+    .navbar.navbar-default .container-fluid,
+    .navbar.navbar-default .container-fluid #navbar .navbar-nav .nav,
+    .crn-navigator-horizontal .navbar.navbar-default .container-fluid #navbar .navbar-nav {
+        display: block;
     }
 
-    #main-nav-bar.crn-navigator-vertical {
-        width: auto;
+    #main-nav-bar .navbar-default .container-fluid {
+        padding: 0;
     }
 
-    .navbar.navbar-default .container-fluid {
-        display: block;
+
+    .navbar>.container .navbar-brand,
+    .navbar>.container-fluid .navbar-brand,
+    .navbar-default .navbar-brand {
+        margin-left: 15px;
+    }
+
+    .navbar-default .navbar-toggle,
+    .navbar.navbar-default .container-fluid .navbar-header {
+        margin-right: 4px;
+    }
+
+    .container-fluid>.navbar-collapse {
+        margin-right: 0;
+        margin-left: 0;
+    }
+
+    .navbar.navbar-default .container-fluid #navbar .navbar-nav {
+        margin-bottom: 0;
     }
+
+    .navbar.navbar-default .container-fluid #navbar2 .navbar-nav .dropdown-menu {
+        margin-top: 0;
+    }
+
+
+    #main-nav-bar.crn-navigator-horizontal .navbar-default .container-fluid #navbar2 .navbar-nav li.dropdown:last-child:not(.open) a,
+    #main-nav-bar.crn-navigator-vertical .navbar-default .container-fluid #navbar .navbar-nav .dropdown-menu li:last-child a,
+    #main-nav-bar.crn-navigator-vertical .navbar-default .container-fluid #navbar .navbar-nav li.dropdown:last-child:not(.open) a {
+        border-bottom: 0;
+    }
+
+}
+
+/* Collapsible menu */
+#main-nav-bar.crn-navigator-vertical.collapsible-menu-hide {
+    width: 75px;
+}
+
+#checkCollapsibleMenu:checked~#main-nav-bar.crn-navigator-vertical.collapsible-menu-hide {
+    width: 270px;
+}
+
+#main-nav-bar.crn-navigator-vertical.collapsible-menu-hide img.user-avatar {
+    height: var(--menuItemIconWidth);
+    width: auto;
 }

package/css/themes/custom/dsgov/option-dsgov.css

@@ -0,0 +1,144 @@
+.k-radio:checked+.k-radio-label:after {
+    top: 4.3px;
+    left: 4.4px;
+}
+
+.k-radio:checked+.k-radio-label:after {
+    width: calc(var(--textMediumSize, 16px) - 6px);
+    height: calc(var(--textMediumSize, 16px) - 6px);
+}
+
+.k-radio:hover+.k-radio-label::before,
+.option-default .k-radio:hover+.k-radio-label::before,
+.k-radio-label:before {
+    border-width: 1.5px;
+}
+
+.k-radio:focus+.k-radio-label::before,
+.option-default .k-radio:focus+.k-radio-label::before,
+.k-radio:focus:hover+.k-radio-label::before,
+.option-default .k-radio:focus:hover+.k-radio-label::before,
+.option-primary .k-radio:focus+.k-radio-label::before,
+.option-primary .k-radio:focus:hover+.k-radio-label::before,
+.option-success .k-radio:focus+.k-radio-label::before,
+.option-success .k-radio:focus:hover+.k-radio-label::before,
+.option-info .k-radio:focus+.k-radio-label::before,
+.option-info .k-radio:focus:hover+.k-radio-label::before,
+.option-warning .k-radio:focus+.k-radio-label::before,
+.option-warning .k-radio:focus:hover+.k-radio-label::before,
+.option-danger .k-radio:focus+.k-radio-label::before,
+.option-danger .k-radio:focus:hover+.k-radio-label::before,
+.option-light .k-radio:focus+.k-radio-label::before,
+.option-light .k-radio:focus:hover+.k-radio-label::before,
+.option-stable .k-radio:focus+.k-radio-label::before,
+.option-stable .k-radio:focus:hover+.k-radio-label::before,
+.option-royal .k-radio:focus+.k-radio-label::before,
+.option-royal .k-radio:focus:hover+.k-radio-label::before,
+.option-dark .k-radio:focus+.k-radio-label::before,
+.option-dark .k-radio:focus:hover+.k-radio-label::before,
+.option-success .k-radio:focus+.k-radio-label::before {
+    box-shadow: 0 0 0 2px var(--colorWarning50, #dfb306);
+    border-color: var(--colorWarning50, #dfb306);
+    border-width: 1.5px;
+}
+
+/* Default */
+
+.k-radio:focus+.k-radio-label::before,
+.k-radio:hover+.k-radio-label::before,
+.option-default .k-radio:focus+.k-radio-label::before,
+.option-default .k-radio:hover+.k-radio-label::before,
+k-radio:checked+.k-radio-label:before,
+.option-default .k-radio:checked+.k-radio-label:before,
+.k-radio-label:before,
+.option-default .k-radio-label:before {
+    border-color: var(--colorLight70, #8c8c8c);
+}
+
+.k-radio-label:after,
+.k-radio:checked+.k-radio-label:after,
+.option-default .k-radio-label:after,
+.option-default .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Primary */
+.option-primary .k-radio-label:after,
+.option-primary .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Success */
+.option-success .k-radio-label:after,
+.option-success .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Info */
+.option-info .k-radio-label:after,
+.option-info .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Warning */
+.option-warning .k-radio-label:after,
+.option-warning .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Danger */
+.option-danger .k-radio-label:after,
+.option-danger .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Light */
+.option-light .k-radio-label:before,
+.option-light .k-radio:checked+.k-radio-label:before {
+    border-color: var(--colorLight60, #bbbbbb);
+}
+
+.option-light .k-radio-label:after,
+.option-light .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Stable */
+.option-stable .k-radio-label:before,
+.option-stable .k-radio:checked+.k-radio-label:before {
+    border-color: var(--colorStable60, #b6b6b6);
+}
+
+.option-stable .k-radio-label:after,
+.option-stable .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Royal */
+.option-royal .k-radio-label:after,
+.option-royal .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Dark */
+.option-dark .k-radio-label:after,
+.option-dark .k-radio:checked+.k-radio-label:after {
+    background: var(--colorDefault40, #1351b4);
+}
+
+/* Efeito hover */
+.k-radio:hover+.k-radio-label::before,
+.option-default .k-radio:hover+.k-radio-label::before,
+.option-primary .k-radio:hover+.k-radio-label::before,
+.option-success .k-radio:hover+.k-radio-label::before,
+.option-info .k-radio:hover+.k-radio-label::before,
+.option-warning .k-radio:hover+.k-radio-label::before,
+.option-danger .k-radio:hover+.k-radio-label::before,
+.option-light .k-radio:hover+.k-radio-label::before,
+.option-stable .k-radio:hover+.k-radio-label::before,
+.option-royal .k-radio:hover+.k-radio-label::before,
+.option-dark .k-radio:hover+.k-radio-label::before {
+    background: var(--colorDefault10, #d6daeb);
+    box-shadow: none;
+    border-width: 1.5px;
+}