cronapp-framework-js/css/themes/custom/dsgov/table-grid-dsgov.css

Javascript library for CronApp's projects

/* Tables */
table.table thead th,
table.table tbody td {
    padding: var(--distanceSmall, 15px) var(--distanceMedium, 20px);
    color: var(--textColorLight30, #3c3c3c);
    border-width: 0;
}

table.table thead th {
    background: var(--colorLight30, #e5e5e5);
    color: var(--textColorLight30, #3c3c3c);
}

table.table thead th {
    font-weight: 500;
    font-size: 17px;
    text-transform: initial;
    border-top: 0;
    margin: 0;
    white-space: normal;
    vertical-align: top;
    color: var(--colorDefault40, #1351b4);
}

table.table thead th {
    border-bottom: 0;
}

table.table.table-bordered {
    border: 1px solid;
}

table.table.table-bordered thead th,
table.table.table-bordered tbody td {
    border-right: 0;
    border-bottom: 0;
}

table.table.table-bordered thead th:first-child,
table.table.table-bordered tbody td:first-child {
    border-left: 0;
}

table.table.table-bordered,
table.table.table-bordered thead th,
table.table.table-bordered tbody td {
    border-color: var(--colorLight50, #c2c2c2);
    border-width: 1px;
    border-left-width: 0;
    border-right-width: 0;
}

/* Grid */
.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);
    border-left: 0;
}

.k-grid table thead th.k-header {
    background: var(--colorLight10, #f5f5f5);
    border-bottom: 1px solid var(--colorLight50, #c2c2c2);
}

.k-grid table thead th.k-header,
.k-grid table thead th.k-header a.k-link {
    font-weight: 500;
    font-size: 17px;
    text-transform: initial;
    border-top: 0;
    margin: 0;
    white-space: normal;
    vertical-align: top;
    color: var(--textColor40, #383838);
}

.k-grid {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow-y: auto;
}

.k-grid .k-header,
.k-grid .k-grid-pager {
    background: transparent;
    border: 0;
}

.k-grid .k-header.k-grid-toolbar {
    padding: var(--distanceMedium, 20px);
}

.k-pager-wrap .k-pager-refresh,
.k-dropdown-wrap.k-state-default,
.k-header,
.k-pager-wrap,
.k-grid-toolbar {
    background: var(--backgroundColor40, #FFFFFF);
}

.k-grid .k-header .k-button {
    border: 1px solid var(--colorDefault40, #1351b4);
    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 {
    margin-top: -7px;
}

.k-grid .k-header .crn-grid-title {
    color: var(--textColorLight30, #3c3c3c);
    padding: 8px 24px;
    padding-left: 0;
    font-weight: 700;
}

.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: initial;
    border-color: var(--colorLight50, #C7C7C7);
    box-shadow: none;
}

.k-pager-numbers li {
    margin: 0 4px;
}

.k-grid .k-grid-pager .k-pager-sizes .k-icon:hover {
    border-radius: var(--borderRadiusMedium, 20px);
    padding: 3px;
    margin-left: 4px;
}

.k-grid table thead th.k-header a.k-grid-filter:hover,
.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;
    background: var(--colorDefault10, #d6daeb);
    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);
}

.k-grid table .k-button {
    height: 35px;
    min-width: 35px;
    display: inline-flex;
    margin-right: 5px;
}

.k-button.k-grid-edit,
.k-button.k-grid-delete {
    background: transparent;
    color: var(--colorDefault40, #1351b4);
}

.k-button .k-custom-command .k-button-with-label .btn .btn-primary .k-grid {
    color: var(--colorDefault40, #1351b4);
}

.k-icon .k-i-edit {
    color: var(--colorDefault40, #1351b4);
}

.k-grid-toolbar .k-button {
    font-size: var(--textNormalSize, 16px);
}

.k-grid table .k-button span {
    margin: 0;
    height: inherit;
    line-height: 1.5;
}

.k-grid table .k-button span:before {
    font-size: 20px;
}

.k-grid table .k-button .k-i-edit:before {
    content: "\F044";
    font-family: "FontAwesome";
}

.k-grid table .k-button .k-i-close:before {
    content: "\f1f8";
    font-family: "FontAwesome";
}

.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-weight: 800;
    transform: none;
}

.k-grid table thead th.k-header a.k-link,
.k-grid-toolbar .k-button,
.k-grid-header th.k-header>.k-link,
.k-grid tr td {
    font-size: var(--textNormalSize, 14px);
    font-family: var(--fontFamily, "Roboto", "Helvetica Neue", "Arial", sans-serif);
}

.k-grid .k-grid-pager .k-icon.k-i-arrow-60-left:before {
    content: '\e314';
}

.k-grid .k-grid-pager .k-icon.k-i-arrow-60-right:before {
    content: '\e315';
}

.k-icon.k-i-arrow-60-down:before {
    font-family: "Material Icons";
    font-size: var(--textNormalSize, 20px);
    font-weight: 800;
    content: '\e313';
}

.k-grid .k-grid-pager .k-icon:before {
    color: var(--colorDefault40, #1351b4);
}

.k-grid .k-grid-pager .k-icon.k-i-arrow-60-down {
    margin-top: -9px;
    display: contents;
}

.k-grid .k-dropdown {
    background: transparent;
    min-width: 150px;
}

.k-grid .k-dropdown .k-dropdown-wrap {
    border-radius: var(--borderRadiusMedium, 20px);
    background: var(--backgroundColor40, #FFFFFF);
    border: 0;
    width: min-content;
}

.k-grid .k-dropdown .k-dropdown-wrap.k-state-hover,
.k-grid .k-dropdown .k-dropdown-wrap.k-state-focused,
.k-grid .k-dropdown .k-dropdown-wrap.k-state-active {
    background: var(--colorLight10, #FFFFFF);
}

.k-grid .k-dropdown .k-dropdown-wrap .k-input {
    color: var(--colorDefault40, #1351b4);
    margin: 0;
}

.k-pager-sizes .k-widget.k-dropdown {
    padding-left: 64px;
    border-left: 1px solid var(--colorLight50, #c2c2c2);
    display: grid;
    align-items: center;
    border-radius: 0;
}

.k-pager-info {
    border-right: 1px solid var(--colorLight50, #c2c2c2);
    padding-right: 10px;
    margin-right: 6px;
}

.k-pager-sizes .k-widget.k-dropdown::after {
    content: 'Exibir';
    margin-left: -51px;
    margin-top: -30px;
}

.k-pager-wrap>.k-link>.k-icon {
    margin-top: -7px;
    margin-top: 0;
}

.k-link.k-pager-nav {
    color: var(--colorDefault40, #1351b4);
    border: 0;
    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-radius: var(--borderRadiusMedium, 20px);
}

.k-link.k-pager-nav:hover {
    color: var(--colorDefault40, #1351b4);
    background: var(--colorDefault10, #d6daeb);
}

.k-link.k-pager-nav.k-state-disabled .k-icon:hover {
    background: transparent;
}

.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 {
    border-radius: var(--borderRadiusFull, 99999px);
    background: transparent;
    color: var(--colorDefault40, #1351b4);
    border: 0;
}

.k-grid .k-grid-pager .k-link.k-pager-refresh:hover {
    background: var(--colorDefault10, #d6daeb);
}

.k-grid .k-grid-pager .k-link.k-pager-refresh .k-icon {
    margin-top: -10px;
}

.k-i-arrow-end-right:before {
    content: "\e5dd";
    font-family: "Material Icons";
    font-size: var(--textNormalSize, 20px);
    font-weight: 800;
}

.k-i-arrow-end-left:before {
    content: "\e5dc";
    font-family: "Material Icons";
    font-size: var(--textNormalSize, 20px);
    font-weight: 800;
}

.k-grid table thead th.k-header a.k-link {
    display: inline;
    padding: 0;
    color: var(--colorDefault40, #383838);
    font-weight: 400;
}

.k-grid table thead th.k-header a.k-link .k-icon {
    margin-left: var(--distanceExtraSmall, 10px);
    line-height: 1;
    margin-top: -10px;
}

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

.k-grid table thead th.k-header a.k-link .k-icon {
    width: 24px;
    height: 24px;
    padding: 3px;
    border-radius: var(--borderRadiusMedium, 20px);
    margin-top: -7px;
    color: var(--textColor40, #383838);
}

.k-grid table thead th.k-header a.k-link .k-icon:hover {
    background: var(--colorDefault10, #d6daeb);
    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-alt,
.k-pivot-layout>tbody>tr:first-child>td:first-child,
.k-resource.k-alt,
.k-separator {
    background: initial;
}

.k-grid .k-grid-pager {
    border-top: 1px solid var(--colorLight50, #c2c2c2);
}

.k-i-sort-asc-sm:before {
    content: '\f176';
    font-family: "FontAwesome";
}

.k-i-sort-desc-sm:before {
    content: '\f175';
    font-family: "FontAwesome";
}

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

.k-pager-sizes .k-dropdown-wrap .k-input {
    line-height: inherit;
}