cronapp-framework-js 3.0.0-SP.9 → 3.1.0

package/css/themes/custom/nature/grid-nature.css

@@ -0,0 +1,396 @@
+.k-grid-header .k-header {
+    position: relative;
+    vertical-align: bottom;
+    padding: 12px;
+    background: var(--backgroundColor10, #f1f1f1);
+    color: var(--textColor40, #393939);
+}
+
+.k-grid-header:first-child th.k-header:first-child,
+.k-rtl thead.k-grid-header th.k-header:last-child,
+thead.k-grid-header th.k-header:first-child {
+    border-radius: 0;
+}
+
+.k-grid-header th.k-with-icon .k-link {
+    float: left;
+    color: var(--textColorDefault40, #ffffff);
+    padding: 12px 0;
+}
+
+.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,
+.k-header>.k-grid-filter,
+.k-header>.k-header-column-menu {
+    padding: 12px;
+    border-radius: 0;
+}
+
+.k-grid-header .k-link .k-icon.k-i-sort-asc-sm,
+.k-grid-header .k-link .k-icon.k-i-sort-desc-sm {
+    margin-top: 0;
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.crn-grid-title {
+    color: var(--textColor40, #0f2e07);
+}
+
+.k-grid-toolbar .k-button {
+    transition: 200ms;
+    border: 0;
+    box-shadow: none;
+    background: var(--colorDefault40, #336825);
+    border-color: transparent;
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.k-grid-toolbar .k-button.k-state-hover:focus,
+.k-grid-toolbar .k-button.k-state-hover:hover,
+.k-grid-toolbar .k-button:focus,
+.k-grid-toolbar .k-button:hover {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorDefault40, #336825);
+    border-color: transparent;
+    outline: none;
+}
+
+.k-grid-toolbar .k-button.active,
+.k-grid-toolbar .k-button:active {
+    background: var(--colorDefault50, #234d18);
+}
+
+.k-grid-toolbar {
+    padding: 14px;
+    border-width: 0 0 1px;
+    background: var(--backgroundColor, #dcefdc);
+}
+
+.k-editor,
+.k-grid,
+.k-menu,
+.k-scheduler,
+.k-grid-header:first-child,
+.k-grid-toolbar:first-child,
+.k-grid>.k-grouping-header,
+.k-grid-pager,
+.k-scheduler-footer,
+.k-scheduler>.k-scheduler-toolbar:first-child {
+    border-radius: 0;
+}
+
+.k-grid-header {
+    font-size: 16px;
+}
+
+.k-grid-header th.k-header,
+.k-grid-header th.k-header .k-link,
+.k-grid-header th.k-header a,
+.k-grid-header th.k-header .k-icon,
+.k-grid-header th.k-header .k-tool-icon {
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.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(--colorDefault20, #8fc63e);
+}
+
+.k-grid-header .k-header {
+    position: relative;
+    vertical-align: bottom;
+    padding: 12px;
+    background: var(--colorDefault40, #336825);
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.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 {
+    background: var(--backgroundColor40, #f1f1f1);
+    color: var(--textColor40, #ffffff);
+}
+
+.k-pager-wrap .k-state-selected {
+    color: var(--textColor40, #ffffff);
+    background: var(--colorDefault40, #336825);
+    border-radius: 999px;
+}
+
+.k-grid-pager {
+    padding: 10px;
+    border-width: 1px 0 0;
+    border-color: inherit;
+    font-size: inherit;
+}
+
+.k-pager-wrap .k-link:hover,
+.k-pager-wrap .k-pager-nav:hover,
+.k-pager-wrap .k-link:focus,
+.k-pager-wrap .k-pager-nav:focus {
+    background: var(--colorDefault40, #336825);
+}
+
+.k-pager-wrap .k-pager-nav {
+    color: var(--textColor40, #0f2e07);
+}
+
+.k-pager-wrap {
+    background: var(--backgroundColor40, #dcefdc);
+}
+
+.k-pager-nav.k-pager-first+.k-link {
+    border: 0;
+}
+
+.k-autocomplete.k-state-default,
+.k-dropdown-wrap,
+.k-dropdown-wrap.k-state-default,
+.k-multiselect-wrap,
+.k-numeric-wrap.k-state-default,
+.k-picker-wrap.k-state-default {
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid var(--textColor, #0f2e07);
+    box-shadow: none;
+}
+
+.k-popup .k-list .k-state-focused {
+    box-shadow: none;
+    background: var(--backgroundColor50, #dfdfdf);
+    color: var(--textColor, #0f2e07);
+}
+
+.k-button-icontext .k-icon,
+.k-button-icontext .k-image,
+.k-button-icontext .k-sprite {
+    margin: 0;
+}
+
+.k-button-icontext .k-icon {
+    margin-bottom: 2px;
+}
+
+.k-grid tbody .k-button:hover,
+.k-grid tbody .k-button:focus {
+    background: var(--colorDefault20, #8fc63e);
+    color: var(--textColorPrimary40, #ffffff);
+    border-color: transparent;
+}
+
+.k-grid tr td {
+    border-left: 0;
+}
+
+.k-grid-header th.k-header {
+    border: 1px solid var(--colorDefault40, #336825);
+}
+
+/* Filter - Grid */
+.k-grid table .k-button {
+    box-shadow: none;
+}
+
+.k-grid-footer,
+.k-group,
+.k-group-footer td,
+.k-grouping-header,
+.k-pager-wrap,
+.k-popup {
+    color: var(--textColor10, #ffffff);
+    background: var(--colorDefault40, #336825);
+}
+
+.k-filter-menu-container .k-action-buttons button {
+    box-shadow: none;
+    background: transparent;
+    color: var(--textColor40, #0f2e07);
+}
+
+.k-filter-menu-container .k-action-buttons button:focus,
+.k-filter-menu-container .k-action-buttons button:hover {
+    box-shadow: none;
+    border-color: transparent;
+}
+
+.k-filter-menu-container .k-action-buttons button.k-primary {
+    color: var(--textColor40, #0f2e07);
+}
+
+.k-filter-menu-container .k-action-buttons button:hover {
+    color: var(--textColor40, #0f2e07);
+    background: var(--backgroundColor40, #dcefdc);
+}
+
+.k-filter-menu-container .k-action-buttons .k-primary:hover {
+    color: var(--textColor40, #0f2e07);
+    background: var(--backgroundColor40, #dcefdc);
+}
+
+/* Pagination - Grid */
+.k-pager-wrap .k-link.k-pager-last,
+.k-pager-nav.k-pager-first+.k-link,
+.k-pager-wrap .k-link {
+    border-color: var(--colorDefault50, #343c7c);
+}
+
+.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, #393939);
+}
+
+.k-grid .k-pager-numbers .k-state-selected {
+    background: var(--colorPrimary40, #008aed);
+    color: var(--textColorPrimary40, #ffffff);
+    border-color: var(--colorPrimary40, #008aed);
+}
+
+.k-pager-wrap .k-link.k-pager-last,
+.k-pager-wrap .k-pager-nav,
+.k-pager-wrap .k-pager-numbers .k-link,
+.k-pager-wrap .k-pager-numbers .k-state-selected,
+.k-pager-wrap>.k-link {
+    border-color: transparent;
+    border: 0;
+    box-shadow: none;
+}
+
+.k-pager-wrap .k-link.k-pager-last,
+.k-pager-wrap .k-pager-nav {
+    border-radius: 50%;
+}
+
+/* refresh icon */
+.k-pager-wrap>.k-link.k-pager-refresh {
+    border-radius: 50%;
+    color: var(--colorDefault40, #336825);
+}
+
+.k-pager-wrap>.k-link.k-pager-refresh .k-icon {
+    color: var(--colorDefault40, #336825);
+}
+
+.k-pager-wrap>.k-link.k-pager-refresh .k-icon:hover {
+    color: var(--colorDefault40, #336825);
+}
+
+.k-pager-wrap>.k-link.k-pager-refresh:hover .k-icon {
+    color: var(--textcolorPrimary40, #ffffff);
+}
+
+/* Header's checkbox */
+.k-grid .k-grid-header .k-header .k-checkbox-label:before {
+    border-color: var(--textColorDefault40, #ffffff);
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.k-grid .k-grid-header .k-header {
+    padding: var(--distanceExtraSmall, 10px) var(--distanceMedium, 20px);
+}
+
+.k-grid-header th.k-header:hover {
+    color: var(--colorDefault20, #8fc63e);
+}
+
+.k-grid-filter .k-icon,
+.k-header .k-icon:hover {
+    color: var(--colorDefault20, #8fc63e);
+}
+
+.k-pager-wrap .k-link {
+    background: transparent;
+    color: var(--colorDefault40, #336825);
+}
+
+.k-grid .k-pager-numbers .k-state-selected {
+    background: var(--colorDefault40, #336825);
+    border-radius: 0px;
+}
+
+.k-pager-sizes .k-dropdown-wrap .k-input {
+    background: transparent;
+    border-radius: 0px;
+
+}
+
+.k-grid-toolbar:first-child {
+    background: var(--backgroundColor, #dcefdc);
+    border: none;
+}
+
+.k-state-default>.k-select {
+    background: transparent;
+}
+
+.k-pager-wrap .k-link.k-state-disabled:hover {
+    background: var(--colorDefault40, #336825);
+    color: var(--textColor10, #ffffff);
+    border-radius: 0px;
+}
+
+.k-pager-wrap {
+    background: var(--backgroundColor10, #ffffff);
+}
+
+.k-pager-wrap>.k-link>.k-icon:hover {
+    color: var(--textColor10, #ffffff);
+}
+
+.navbar-nav>li>a:hover {
+    background: var(--colorDefault40, #336825);
+    color: var(--textColor10, #ffffff);
+}
+
+.nav .open>a {
+    background: var(--colorDefault40, #336825);
+    color: var(--textColor10, #ffffff);
+}
+
+.dropdown-menu>li>a:focus,
+.dropdown-menu>li>a:hover {
+    color: var(--textColor10, #ffffff);
+    text-decoration: none;
+    background-color: var(--colorDefault40, #336825);
+}
+
+.k-grid tbody td>.k-grid-delete {
+    background: var(--colorDanger40, #b70002);
+    color: var(--textColor10, #ffffff);
+}
+
+.k-grid tbody td>.k-grid-delete:hover,
+.k-grid tbody td>.k-grid-delete:active {
+    background: var(--colorDanger50, #8b0002);
+    color: var(--textColor10, #ffffff);
+}
+
+.k-icon .k-i-reloaded {
+    color: var(--textColor10, #ffffff);
+    background-color: var(--colorDefault40, #336825);
+}
+
+.k-button .k-icon {
+    margin-bottom: 6px;
+}
+
+.tool-bar.k-button:hover{
+    border-radius: 0px;
+}
+
+.k-grid-toolbar .k-button-icontext .k-icon {
+    margin-top: 3px;
+}

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

@@ -0,0 +1,98 @@
+.navbar .navbar-brand img[src="node_modules/cronapp-framework-js/img/cronapp-logo-login.png"] {
+    filter: brightness(0) invert(1);
+}
+
+.navbar {
+    background: var(--colorDefault40, #336825);
+    border-bottom: none;
+}
+
+.navbar-inverse {
+    background: var(--colorDefault40, #336825);
+    border: none
+}
+
+.navbar-inverse .badge {
+    background: #ffffff;
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.navbar-default #navbar .navbar-nav li a,
+.navbar-default #navbar2 .navbar-nav li a {
+    color: var(--textColorDefault40, #ffffff);
+    font-size: var(--textNormalSize, 12px);
+}
+
+.navbar-default #navbar .navbar-nav li a:hover,
+.navbar-default #navbar2 .navbar-nav li a:hover,
+.navbar-default #navbar .navbar-nav li .dropdown-menu li a:hover,
+.navbar-default #navbar2 .navbar-nav li .dropdown-menu li a:hover,
+.navbar-default .navbar-nav>.open>a,
+.navbar-default .navbar-nav>.open>a:focus,
+.navbar-default .navbar-nav>.open>a:hover {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorDefault30, #669a17);
+}
+
+.navbar-default #navbar .navbar-nav li .dropdown-menu li a:hover,
+.navbar-default #navbar2 .navbar-nav li .dropdown-menu li a:hover {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorDefault40, #336825);
+    border-radius: 0;
+}
+
+.dropdown-menu {
+    color: var(--textColor40, #0f2e07);
+    font-size: var(--textMediumSize, 16px);
+    background: var(--backgroundColor, #dcefdc);
+}
+
+.navbar-default #navbar .navbar-nav li .dropdown-menu a,
+.navbar-default #navbar2 .navbar-nav li .dropdown-menu a {
+    color: var(--textColor40, #0f2e07);
+    margin: 0;
+}
+
+.navbar-default #navbar2 .navbar-nav .dropdown-menu {
+    margin-top: -1px;
+}
+
+.navbar-default .navbar-toggle {
+    border-color: var(--colorPrimary40, #008aed);
+}
+
+/* Menu mobile */
+.navbar-default .navbar-toggle {
+    border-color: var(--colorDefault40, #336825);
+}
+
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+    border-color: transparent;
+}
+
+.navbar-default .navbar-toggle:focus,
+.navbar-default .navbar-toggle:hover {
+    background: var(---backgroundColor, #dcefdc);
+    border-color: transparent;
+}
+
+@media (max-width: 767px) {
+
+    #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 {
+        color: var(--textColorPrimary40, #ffffff);
+    }
+}
+
+.nav .open>a,
+.nav .open>a:hover {
+    background: var(--backgroundColor10, #ffffff);
+    color: var(--textColor, #0f2e07);
+}
+
+.nav .open>a,
+.nav .open>a:focus {
+    background: var(--backgroundColor10, #ffffff);
+    color: var(--textColor, #0f2e07);
+}

package/css/themes/custom/nature/panel-nature.css

@@ -0,0 +1,72 @@
+.panel {
+    background: var(--backgroundColor10, #ffffff);
+    box-shadow: none;
+    border: none;
+    padding-top: 0px !important;
+}
+
+.panel-footer {
+    color: var(---textColor40, #0f2e07);
+    background: var(--backgroundColor50, #d1d7dC);
+    border: none;
+}
+
+/* Default */
+.panel-default .panel-heading {
+    color: var(--textColorPrimary40, #ffffff);
+    background: var(--colorDefault40, #336825);
+}
+
+/* Primary */
+.panel-primary>.panel-heading {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorPrimary40, #008aed);
+}
+
+/* Sucess */
+.panel-success>.panel-heading {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorSuccess40, #10d13a);
+}
+
+/* Info */
+.panel-info>.panel-heading {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorCalm40, #24a9c3);
+}
+
+/* Warning */
+.panel-warning>.panel-heading {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorWarning40, #fd7903);
+}
+
+/* Danger */
+.panel-danger>.panel-heading {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorDanger40, #b70002);
+}
+
+/* Light */
+.panel-light>.panel-heading {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorLight40, #96a6b3);
+}
+
+/* Royal */
+.panel-royal>.panel-heading {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorRoyal40, #111a47);
+}
+
+/* Stable */
+.panel-stable>.panel-heading {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorStable40, #3a484b);
+}
+
+/* Dark */
+.panel-dark>.panel-heading {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorDark40, #111d23);
+}