first init
This commit is contained in:
arifal
277
resources/scss/plugins/_gridjs.scss
Executable file
277
resources/scss/plugins/_gridjs.scss
Executable file
@@ -0,0 +1,277 @@
|
||||
//
|
||||
// _gridjs.scss
|
||||
//
|
||||
|
||||
.gridjs-container {
|
||||
color: var(--#{$prefix}body-color);
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gridjs-wrapper {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
border-radius: 0px;
|
||||
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), .075);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-footer {
|
||||
border: none !important;
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.gridjs-table {
|
||||
width: 100%;
|
||||
table-layout: auto !important;
|
||||
}
|
||||
|
||||
.gridjs-tbody,
|
||||
td.gridjs-td {
|
||||
background-color: $table-bg;
|
||||
}
|
||||
|
||||
th.gridjs-th {
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
padding: $table-cell-padding-y * 0.5 $table-cell-padding-x;
|
||||
}
|
||||
|
||||
td.gridjs-td {
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
padding: $table-cell-padding-y $table-cell-padding-x;
|
||||
}
|
||||
|
||||
th {
|
||||
&.gridjs-th {
|
||||
border-top: 0;
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), .75);
|
||||
|
||||
}
|
||||
|
||||
&.gridjs-th-sort {
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), .85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-head {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.gridjs-footer {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
border-top: 0;
|
||||
background-color: $table-bg;
|
||||
}
|
||||
|
||||
.gridjs-summary {
|
||||
color: $text-muted;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.gridjs-pagination {
|
||||
|
||||
.gridjs-pages button {
|
||||
background-color: transparent;
|
||||
color: var(--#{$prefix}link-color);
|
||||
border: $border-width solid var(--#{$prefix}border-color);
|
||||
border-right: none;
|
||||
outline: none;
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
user-select: none;
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:hover:disabled,
|
||||
&[disabled] {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: $card-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $card-bg;
|
||||
color: var(--#{$prefix}link-hover-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:last-child,
|
||||
&:first-child {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.gridjs-currentPage {
|
||||
background-color: $component-active-bg;
|
||||
color: $component-active-color;
|
||||
border-color: $component-active-bg;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-search {
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
&::before {
|
||||
content: "\ebf7";
|
||||
font-family: "boxicons";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 10px;
|
||||
font-size: 18px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
input.gridjs-input {
|
||||
border-color: $input-border-color;
|
||||
background-color: $input-bg;
|
||||
color: $input-color;
|
||||
line-height: $input-line-height;
|
||||
padding: $input-padding-y $input-padding-x $input-padding-y $input-padding-x * 2.5;
|
||||
border-radius: $input-border-radius;
|
||||
@include font-size($input-font-size);
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: $input-focus-border-color;
|
||||
background-color: $input-focus-bg;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
th.gridjs-th {
|
||||
.gridjs-th-content {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
button.gridjs-sort {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
th.gridjs-th-sort .gridjs-th-content {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
&.gridjs-sort-asc,
|
||||
&.gridjs-sort-desc {
|
||||
background-size: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// gridjs selection
|
||||
.gridjs-tr-selected {
|
||||
td {
|
||||
background-color: $table-active-bg;
|
||||
}
|
||||
|
||||
.gridjs-td .gridjs-checkbox[type=checkbox] {
|
||||
background-color: $form-check-input-checked-bg-color;
|
||||
border-color: $form-check-input-checked-border-color;
|
||||
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image),
|
||||
var(--#{$prefix}gradient);
|
||||
}
|
||||
|
||||
@else {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-td {
|
||||
.gridjs-checkbox {
|
||||
width: $form-check-input-width;
|
||||
height: $form-check-input-width;
|
||||
vertical-align: top;
|
||||
background-color: $form-check-input-bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
border: $form-check-input-border;
|
||||
appearance: none;
|
||||
// color-adjust: exact; // Keep themed appearance for print
|
||||
@include transition($form-check-transition);
|
||||
|
||||
&[type="checkbox"] {
|
||||
@include border-radius($form-check-input-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-border-none {
|
||||
|
||||
td.gridjs-td,
|
||||
th.gridjs-th {
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-loading-bar {
|
||||
background-color: $card-bg;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
button {
|
||||
|
||||
&.gridjs-sort-neutral,
|
||||
&.gridjs-sort-asc,
|
||||
&.gridjs-sort-desc {
|
||||
filter: $btn-close-white-filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user