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

package/css/themes/custom/dsgov/table-grid-dsgov.css

@@ -2,24 +2,23 @@
 table.table thead th,
 table.table tbody td {
     padding: var(--distanceSmall, 15px) var(--distanceMedium, 20px);
-    color: var(--textColorLight30, #3c3c3c);
+    color: var(--textColorLight30, #2d2d2d);
     border-width: 0;
 }
 
 table.table thead th {
-    background: var(--colorLight30, #e5e5e5);
-    color: var(--textColorLight30, #3c3c3c);
+    background: var(--colorStable40, #f8f8f8);
+    color: var(--textColorLight30, #2d2d2d);
 }
 
 table.table thead th {
     font-weight: 500;
-    font-size: 17px;
+    font-size: var(--textNormalSize, 16.8px);
     text-transform: initial;
     border-top: 0;
     margin: 0;
     white-space: normal;
     vertical-align: top;
-    color: var(--colorDefault40, #1351b4);
 }
 
 table.table thead th {
@@ -44,37 +43,62 @@ table.table.table-bordered tbody td:first-child {
 table.table.table-bordered,
 table.table.table-bordered thead th,
 table.table.table-bordered tbody td {
-    border-color: var(--colorLight50, #c2c2c2);
+    border-color: var(--colorLight50, #dfdfdf);
     border-width: 1px;
     border-left-width: 0;
     border-right-width: 0;
 }
 
+.k-grid-header th.k-header .k-icon {
+    opacity: 1;
+}
+
 /* Grid */
+.k-grid table tbody tr.k-state-selected td,
+.k-grid table tbody tr.k-state-selected:hover td,
+.k-grid table tbody tr.k-state-selected {
+    background: var(--colorDefault40, #1351b4);
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.k-grid table tr.k-state-selected .k-button span:before {
+    color: var(--textColorDefault40, #ffffff);
+}
 
 .k-grid table thead th.k-header,
 .k-grid table tbody td {
     padding: var(--distanceSmall, 15px) var(--distanceMedium, 20px);
-    color: var(--textColor40, #383838);
-    border-color: var(--colorLight50, #c2c2c2);
+    color: var(--textColor40, #333333);
+    border-color: var(--colorLight50, #dfdfdf);
     border-left: 0;
 }
 
 .k-grid table thead th.k-header {
-    background: var(--colorLight10, #f5f5f5);
-    border-bottom: 1px solid var(--colorLight50, #c2c2c2);
+    background: var(--colorStable40, #f8f8f8);
+    border-bottom: 1px solid var(--colorStable50, #d9d9d9);
 }
 
 .k-grid table thead th.k-header,
 .k-grid table thead th.k-header a.k-link {
-    font-weight: 500;
-    font-size: 17px;
+    font-weight: 400;
+    font-size: var(--textNormalSize, 16.8px);
     text-transform: initial;
     border-top: 0;
     margin: 0;
     white-space: normal;
-    vertical-align: top;
-    color: var(--textColor40, #383838);
+}
+
+.k-grid-header th.k-header:focus,
+.k-grid-header th.k-header:hover,
+.k-grid-header th.k-header:focus .k-link,
+.k-grid-header th.k-header:focus a,
+.k-grid-header th.k-header:focus .k-icon,
+.k-grid-header th.k-header:focus .k-tool-icon,
+.k-grid-header th.k-header:hover .k-link,
+.k-grid-header th.k-header:hover a,
+.k-grid-header th.k-header:hover .k-icon,
+.k-grid-header th.k-header:hover .k-tool-icon {
+    color: var(--textColor40, #333333);
 }
 
 .k-grid {
@@ -88,6 +112,7 @@ table.table.table-bordered tbody td {
 .k-grid .k-grid-pager {
     background: transparent;
     border: 0;
+    border-bottom: 1px solid var(--colorLight50, #dfdfdf);
 }
 
 .k-grid .k-header.k-grid-toolbar {
@@ -102,24 +127,13 @@ table.table.table-bordered tbody td {
     background: var(--backgroundColor40, #FFFFFF);
 }
 
-.k-grid .k-header .k-button {
-    border: 1px solid var(--colorDefault40, #1351b4);
+.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 {
     color: var(--colorDefault40, #1351b4);
-    background: var(--backgroundColor40, #ffffff);
-}
-
-.k-grid .k-header .k-button:focus,
-.k-grid .k-header .k-button:hover {
-    background: var(--colorPrimary10, #d6daeb);
-    color: var(--colorPrimary40, #1351b4);
-    border: 1px solid var(--colorPrimary40, #1351b4);
-}
-
-.k-grid .k-header .k-button.active,
-.k-grid .k-header .k-button:active {
-    background: var(--colorPrimary20, #aeb7da);
-    color: var(--colorPrimary40, #1351b4);
-    border: 1px solid var(--colorPrimary40, #1351b4);
 }
 
 .k-grid .k-header .k-button-icontext .k-icon {
@@ -127,10 +141,11 @@ table.table.table-bordered tbody td {
 }
 
 .k-grid .k-header .crn-grid-title {
-    color: var(--textColorLight30, #3c3c3c);
+    color: var(--textColorLight40, #333333);
     padding: 8px 24px;
     padding-left: 0;
-    font-weight: 700;
+    font-weight: 600;
+    font-size: var(--textMediumSize, 24.19px);
 }
 
 .k-state-selected,
@@ -140,12 +155,12 @@ table.table.table-bordered tbody td {
 .k-grid td.k-state-selected:hover,
 .k-grid tr.k-state-selected:hover td {
     background: initial;
-    border-color: var(--colorLight50, #C7C7C7);
+    border-color: var(--colorLight50, #dfdfdf);
     box-shadow: none;
 }
 
 .k-pager-numbers li {
-    margin: 0 4px;
+    margin: 0 2px;
 }
 
 .k-grid .k-grid-pager .k-pager-sizes .k-icon:hover {
@@ -158,16 +173,20 @@ table.table.table-bordered tbody td {
 .k-grid .k-grid-pager .k-icon:hover,
 .k-pager-wrap .k-link:hover,
 .k-grid .k-pager-numbers .k-state-selected:hover {
-    border: 1px solid transparent;
+    border: 0;
     background: var(--colorDefault10, #d6daeb);
     color: var(--colorDefault40, #1351b4);
 }
 
+.k-grid-header th.k-header .k-grid-filter:hover .k-icon {
+    color: var(--colorDefault40, #1351b4);
+}
+
 .k-grid .k-pager-numbers .k-state-selected:hover,
 .k-grid .k-pager-numbers .k-state-selected {
     color: var(--textColorDefault40, #FFFFFF);
-    border: 1px solid var(--colorDefault40, #1351b4);
-    background: var(--colorDefault40, #1351b4);
+    border-color: var(--colorDefault60, #1351b4);
+    background: var(--colorDefault60, #1351b4);
 }
 
 .k-grid table .k-button {
@@ -179,11 +198,22 @@ table.table.table-bordered tbody td {
 }
 
 .k-grid table .k-button:hover {
-    background: var(--colorDefault10, #d6daeb);
+    background: var(--backgroundColor40, #ffffff);
+}
+
+.k-grid table tr.k-state-selected .k-button:hover span:before {
+    color: var(--colorDefault40, #1351b4);
+}
+
+.k-grid .k-pager-numbers .k-link:link,
+.k-grid .k-pager-numbers .k-link:visited,
+.k-grid .k-pager-numbers .k-nav-current.k-state-hover .k-link,
+.k-pager-wrap>.k-link>.k-icon {
+    color: var(--textColor40, #333333);
 }
 
 .k-grid-toolbar .k-button {
-    font-size: var(--textNormalSize, 16px);
+    font-size: var(--textNormalSize, 16.8px);
 }
 
 .k-grid table .k-button span {
@@ -195,7 +225,7 @@ table.table.table-bordered tbody td {
 
 .k-grid table .k-button span:before {
     color: var(--colorDefault40, #1351b4);
-    font-size: 20px;
+    font-size: var(--textMediumSize, 24.19px);
 }
 
 .k-grid table .k-button .k-i-edit:before {
@@ -211,7 +241,7 @@ table.table.table-bordered tbody td {
 .k-grid .k-grid-pager .k-icon.k-i-arrow-60-left:before,
 .k-grid .k-grid-pager .k-icon.k-i-arrow-60-right:before {
     font-family: "Material Icons";
-    font-size: var(--textNormalSize, 20px);
+    font-size: var(--textNormalSize, 16.8px);
     font-weight: 800;
     transform: none;
 }
@@ -220,7 +250,7 @@ table.table.table-bordered tbody td {
 .k-grid-toolbar .k-button,
 .k-grid-header th.k-header>.k-link,
 .k-grid tr td {
-    font-size: var(--textNormalSize, 14px);
+    font-size: var(--textNormalSize, 16.8px);
     font-family: var(--fontFamily, "Roboto", "Helvetica Neue", "Arial", sans-serif);
 }
 
@@ -234,7 +264,7 @@ table.table.table-bordered tbody td {
 
 .k-icon.k-i-arrow-60-down:before {
     font-family: "Material Icons";
-    font-size: var(--textNormalSize, 20px);
+    font-size: var(--textNormalSize, 16.8px);
     font-weight: 800;
     content: '\e313';
 }
@@ -258,7 +288,6 @@ table.table.table-bordered tbody td {
     background: var(--backgroundColor40, #FFFFFF);
     border: 0;
     width: min-content;
-
 }
 
 .k-grid .k-dropdown .k-dropdown-wrap.k-state-hover,
@@ -268,20 +297,21 @@ table.table.table-bordered tbody td {
 }
 
 .k-grid .k-dropdown .k-dropdown-wrap .k-input {
-    color: var(--colorDefault40, #1351b4);
     margin: 0;
+    border: 0;
 }
 
 .k-pager-sizes .k-widget.k-dropdown {
     padding-left: 64px;
-    border-left: 1px solid var(--colorLight50, #c2c2c2);
+    border: 0;
+    border-left: 1px solid var(--colorLight50, #dfdfdf);
     display: grid;
     align-items: center;
     border-radius: 0;
 }
 
 .k-pager-info {
-    border-right: 1px solid var(--colorLight50, #c2c2c2);
+    border-right: 1px solid var(--colorLight50, #dfdfdf);
     padding-right: 10px;
     margin-right: 6px;
 }
@@ -294,7 +324,6 @@ table.table.table-bordered tbody td {
 
 .k-pager-wrap>.k-link>.k-icon {
     margin-top: -7px;
-    margin-top: 0;
 }
 
 .k-link.k-pager-nav {
@@ -303,19 +332,44 @@ table.table.table-bordered tbody td {
     border-radius: var(--borderRadiusMedium, 20px);
 }
 
-.k-pager-nav.k-pager-first+.k-link,
 .k-pager-wrap .k-link.k-pager-last,
 .k-pager-numbers .k-link,
 .k-pager-numbers .k-state-selected,
 .k-link.k-pager-nav {
     color: var(--colorDefault40, #1351b4);
-    border: 1px solid transparent;
+    border: 0;
     border-radius: var(--borderRadiusMedium, 20px);
+    background: transparent;
+}
+
+.k-pager-nav.k-pager-first+.k-link,
+.k-pager-wrap .k-link.k-pager-last {
+    border: 0;
+}
+
+.k-link.k-pager-nav:hover {
+    border: inherit;
+    border-color: transparent;
+}
+
+@media only screen and (max-width: 1024px) {
+
+    .k-webkit .k-pager-numbers .k-current-page .k-link {
+        border: 1px solid var(--colorLight50, #dfdfdf);
+    }
+
+    .k-webkit .k-pager-nav.k-pager-first+.k-link {
+        border: 0;
+        border-radius: 50%;
+    }
+
 }
 
 .k-link.k-pager-nav:hover {
     color: var(--colorDefault40, #1351b4);
     background: var(--colorDefault10, #d6daeb);
+    border: 0;
+    border-radius: 50%;
 }
 
 .k-link.k-pager-nav.k-state-disabled .k-icon:hover {
@@ -324,7 +378,6 @@ table.table.table-bordered tbody td {
 
 .k-link.k-pager-nav .k-icon.k-i-arrow-60-right {
     margin-left: -3px;
-    margin-top: 0;
 }
 
 .k-grid .k-grid-pager .k-link.k-pager-refresh {
@@ -345,22 +398,21 @@ table.table.table-bordered tbody td {
 .k-i-arrow-end-right:before {
     content: "\e5dd";
     font-family: "Material Icons";
-    font-size: var(--textNormalSize, 20px);
+    font-size: var(--textNormalSize, 16.8px);
     font-weight: 800;
 }
 
 .k-i-arrow-end-left:before {
     content: "\e5dc";
     font-family: "Material Icons";
-    font-size: var(--textNormalSize, 20px);
+    font-size: var(--textNormalSize, 16.8px);
     font-weight: 800;
 }
 
 .k-grid table thead th.k-header a.k-link {
     display: inline;
     padding: 0;
-    color: var(--colorDefault40, #383838);
-    font-weight: 400;
+    margin: 3px 0;
 }
 
 .k-grid table thead th.k-header a.k-link .k-icon {
@@ -372,22 +424,21 @@ table.table.table-bordered tbody td {
 .k-grid table thead th.k-header a.k-grid-filter {
     width: 24px;
     height: 24px;
-    padding: 3px;
     border-radius: var(--borderRadiusMedium, 20px);
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid transparent;
-    color: var(--colorDefault40, #1351b4);
+    border: 0;
+    padding: 3px;
+    margin: 0;
 }
 
 .k-grid table thead th.k-header a.k-link .k-icon {
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
     padding: 3px;
     border-radius: var(--borderRadiusMedium, 20px);
-    margin-top: -7px;
-    color: var(--textColor40, #383838);
+    margin-top: 0;
 }
 
 .k-grid table thead th.k-header a.k-link .k-icon:hover {
@@ -395,10 +446,8 @@ table.table.table-bordered tbody td {
     color: var(--colorDefault40, #1351b4);
 }
 
-.k-grid table thead th.k-header a.k-link .k-icon,
-.k-grid table thead th.k-header,
-.k-grid-header th.k-header .k-icon{
-    color: var(--colorDefault40, #1351b4);
+.k-grid-header th.k-header .k-icon {
+    padding: 3px;
 }
 
 .k-alt,
@@ -409,7 +458,7 @@ table.table.table-bordered tbody td {
 }
 
 .k-grid .k-grid-pager {
-    border-top: 1px solid var(--colorLight50, #c2c2c2);
+    border-top: 1px solid var(--colorLight50, #dfdfdf);
 }
 
 .k-i-sort-asc-sm:before {
@@ -428,9 +477,35 @@ thead.k-grid-header th.k-header:first-child,
 .k-rtl .k-grid-header:first-child th.k-header:first-child,
 .k-rtl thead.k-grid-header th.k-header:first-child,
 thead.k-grid-header th.k-header:last-child {
-    border-radius: 0;
+    border-radius: var(--borderRadiusNone, 0);
 }
 
 .k-pager-sizes .k-dropdown-wrap .k-input {
     line-height: inherit;
+}
+
+.k-grid .k-grid-header .k-header div {
+    padding: 0;
+}
+
+.k-listbox .k-item,
+.k-popup .k-list .k-item,
+.k-grid .k-widget select,
+.k-pager-sizes .k-dropdown-wrap .k-input,
+.k-grid .k-widget {
+    color: var(--textColor40, #333333);
+    border: 0;
+    padding: 4px;
+}
+
+.k-grid .k-widget {
+    padding: 8px 16px;
+}
+
+.k-popup .k-list .k-item:last-child {
+    border: 0;
+}
+
+.k-popup .k-list .k-item.k-virtual-item {
+    line-height: var(--textNormalSize, 16.8px);
 }

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

@@ -94,4 +94,13 @@
         color: var(--textColor40, #222222);
     }
 
+}
+
+/* Collapsible menu */
+#iconCollapsibleMenu {
+    color: var(--textColor30, #7f7f7f);
+}
+
+label.labelCollapsibleMenu {
+    background: var(--colorDefault40, #f0f0f0);
 }