cronapp-framework-js/css/themes/custom/material/grid-material.css

Javascript library for CronApp's projects

.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(--colorDefault40, #3b448e);
}

.k-grid-toolbar .k-button {
    text-transform: uppercase;
    transition: 200ms;
    border: 0;
    box-shadow: none;
    background: var(--colorDefault40, #3b448e);
    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(--colorDefault70, #343c7c);
    border-color: transparent;
    outline: none;
}

.k-grid-toolbar .k-button.active,
.k-grid-toolbar .k-button:active {
    background: var(--colorDefault10, #d8d9e3);
}

.k-grid-toolbar {
    padding: 14px;
    border-width: 0 0 1px;
    background: var(--backgroundColor10, #fbfbfb);
}

.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(--colorWarning40, #ffc900);
}

.k-grid-header .k-header {
    position: relative;
    vertical-align: bottom;
    padding: 12px;
    background: var(--colorDefault40, #3b448e);
    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: #fff;
    background: var(--colorDefault40, #3b448e);
    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: rgba(0, 0, 0, 0.07);
}

.k-pager-wrap .k-pager-nav {
    color: #000;
}

.k-pager-wrap {
    background: var(--backgroundColor40);
}

.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(--textColor30, #393939);
    box-shadow: none;
}

.k-popup .k-list .k-state-focused {
    box-shadow: none;
    background: var(--backgroundColor50, #dfdfdf);
    color: var(--textColor40, #393939);
}

.k-button-icontext .k-icon,
.k-button-icontext .k-image,
.k-button-icontext .k-sprite {
    margin: 0;
}

.k-grid tbody .btn .btn-primary:hover,
.k-grid tbody .k-button:focus {
    background: var(--colorPrimary40, #5665be);
    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, #3b448e);
}

/* 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 {
    background: var(--backgroundColor10, #fbfbfb);
}

.k-filter-menu-container .k-action-buttons button {
    box-shadow: none;
    background: transparent;
    color: var(--textColor40, #393939);
}

.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(--colorPrimary40, #3b448e);
}

.k-filter-menu-container .k-action-buttons button:hover {
    color: var(--textColor40, #393939);
    background: var(--backgroundColor50, #bbbbbb);
}

.k-filter-menu-container .k-action-buttons .k-primary:hover {
    color: var(--colorPrimary40, #3b448e);
    background: var(--colorDefault10, #b3b5ca);
}

/* 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, #3f51b5);
    color: var(--textColorPrimary40, #ffffff);
    border-color: var(--colorPrimary40, #3f51b5);
}

.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 {
    background: transparent;
    border-radius: 50%;
}

.k-pager-wrap>.k-link.k-pager-refresh .k-icon {
    color: var(--colorPrimary40, #3f51b5);
}

.k-pager-wrap>.k-link.k-pager-refresh:hover {
    background: var(--colorPrimary40, #3f51b5);
}

.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);
}