@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
330 lines (271 loc) • 7.83 kB
CSS
.gform-admin .gform-data-grid {
background: #fff;
border: 1px solid #d3d3e0;
border-radius: 3px;
box-shadow: 0 2px 2px rgba(58, 58, 87, 0.0596411);
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
}
.gform-admin .gform-data-grid * {
box-sizing: border-box;
}
.gform-admin .gform-data-grid__header {
display: flex;
justify-content: space-between;
padding-block: 1.25rem;
padding-inline: 1.5rem;
}
.gform-admin .gform-data-grid__controls {
border-block-start: 1px solid #d3d3e0;
display: flex;
flex-direction: column-reverse;
inline-size: 100%;
}
@media (min-width: 40.625rem) {
.gform-admin .gform-data-grid__controls {
flex-direction: row
}
}
.gform-admin .gform-data-grid__controls-inner {
padding-block: 1rem;
padding-inline: 1.5rem;
}
.gform-admin .gform-data-grid__controls-inner--left:not(:last-child) {
border-block-start: 1px solid #d3d3e0;
}
@media (min-width: 40.625rem) {
.gform-admin .gform-data-grid__controls-inner--left:not(:last-child) {
border-block-start: 0
}
}
.gform-admin .gform-data-grid__controls-inner--right {
display: flex;
gap: 0.75rem;
}
@media (min-width: 40.625rem) {
.gform-admin .gform-data-grid__controls-inner--right {
margin-inline-start: auto
}
}
.gform-admin .gform-data-grid__controls-search, .gform-admin .gform-data-grid__controls-bulk-actions {
align-items: center;
display: flex;
gap: 0.75rem;
inline-size: 100%;
}
.gform-admin .gform-data-grid__controls-search {
justify-content: flex-end;
}
@media (min-width: 40.625rem) {
.gform-admin .gform-data-grid__controls-search {
max-inline-size: 28.75rem
}
}
.gform-admin .gform-data-grid__controls-bulk-actions {
justify-content: flex-start;
}
@media (min-width: 40.625rem) {
.gform-admin .gform-data-grid__controls-bulk-actions {
max-inline-size: 25rem
}
}
.gform-admin .gform-data-grid__controls-search-input, .gform-admin .gform-data-grid__controls-bulk-actions-select {
flex-grow: 1;
}
.gform-admin .gform-data-grid__controls-search-input .gform-input {
inline-size: 100%;
}
.gform-admin .gform-data-grid__controls-simple-filters {
position: relative;
}
.gform-admin .gform-data-grid__controls-simple-filters-list-item--reset.gform-data-grid__controls-simple-filters-list-item:last-child { /* extra selectors to override droplist styles */
margin-block-end: calc(0.25rem * -1);
}
.gform-admin .gform-data-grid__controls-simple-filters-list-item--reset .gform-droplist__item-trigger-text {
color: #175cff;
padding: 0;
text-align: center;
}
.gform-admin .gform-data-grid__controls-simple-filters-count {
align-items: center;
background: #175cff;
block-size: 0.875rem;
border-radius: 0.125rem;
color: #fff;
display: flex;
inline-size: 0.875rem;
inset-block-start: -2px;
inset-inline-end: -2px;
justify-content: center;
position: absolute;
}
.gform-admin .gform-data-grid__active-filters {
align-items: center;
border-block-start: 1px solid #d3d3e0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
padding-block: 0.5rem;
padding-inline: 1.5rem;
}
.gform-admin .gform-data-grid__controls-date-filters--has-filter {
position: relative;
}
.gform-admin .gform-data-grid__controls-date-filters--has-filter::after {
background: #175cff;
block-size: 0.875rem;
border-radius: 50%;
content: "";
display: block;
inline-size: 0.875rem;
inset-block-start: -2px;
inset-inline-end: -2px;
position: absolute;
}
.gform-admin .gform-data-grid__controls-date-filters-calendar {
inset-inline-end: 0;
}
.gform-admin .gform-data-grid__select-notice {
align-items: center;
border-block-start: 1px solid #d3d3e0;
display: flex;
flex-direction: row;
gap: 1rem;
justify-content: center;
min-block-size: 2.6875rem;
padding: 0.375rem 1.5rem;
}
.gform-admin .gform-data-grid__select-notice .gform-data-grid__bold-text {
font-weight: 600;
}
.gform-admin .gform-data-grid__column-row {
background: #f6f9fc;
border-block-start: 1px solid #d3d3e0;
display: flex;
flex-direction: row;
padding-inline: 0.75rem;
width: 100%;
}
.gform-admin .gform-data-grid__column {
align-items: center;
display: flex;
overflow: hidden;
padding-block: 0.75rem;
padding-inline: 0.75rem;
}
.gform-admin .gform-data-grid__column .gform-text {
color: #5b5e80;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.gform-admin .gform-data-grid__column--bulk-select {
flex: none;
padding-inline-end: 0.25rem;
}
.gform-admin .gform-data-grid__column-sort-button {
block-size: auto;
}
.gform-admin .gform-data-grid__column-sort-button-icon {
color: #9092b0;
font-size: 1.25rem;
}
.gform-admin .gform-data-grid__data-row {
border-block-start: 1px solid #d3d3e0;
display: flex;
flex-direction: row;
padding-inline: 0.75rem;
width: 100%;
}
.gform-admin .gform-data-grid__data-row .gform-data-grid__column {
padding-block: 1.25rem;
padding-inline: 0.75rem;
}
.gform-admin .gform-data-grid__data-row .gform-data-grid__column--row-select {
flex: none;
padding-inline-end: 0.25rem;
}
.gform-admin .gform-data-grid--highlight-hover .gform-data-grid__data-row:hover {
background: #f9f9f9;
}
.gform-admin .gform-data-grid--highlight-selected .gform-data-grid__data-row.gform-data-grid__data-row--selected {
background: #f6f9fc;
}
.gform-admin .gform-data-grid--highlight-selected .gform-data-grid__data-row.gform-data-grid__data-row--selected:hover {
background: #f6f9fc;
}
.gform-admin .gform-data-grid--equal-grid .gform-data-grid__column-row, .gform-admin .gform-data-grid--equal-grid .gform-data-grid__data-row {
justify-content: space-between;
}
.gform-admin .gform-input-wrapper--theme-cosmos.gform-data-grid__bulk-select-checkbox .gform-input--checkbox + .gform-label::before, .gform-admin .gform-input-wrapper--theme-cosmos.gform-data-grid__row-select-checkbox .gform-input--checkbox + .gform-label::before {
margin: 0; /* extra selectors to override checkbox styles */
}
.gform-admin .gform-data-grid__data {
position: relative;
}
.gform-admin .gform-data-grid__no-data-message {
align-items: center;
background: #fff;
border: 1px solid #f4f5fb;
border-radius: 3px;
box-shadow: var(--gravitysmtp-admin-box-shadow-mega);
display: flex;
flex-direction: column;
justify-content: center;
left: 50%;
padding: 1.5rem;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
}
.gform-admin .gform-data-grid__pagination {
align-items: center;
border-block-start: 1px solid #d3d3e0;
display: flex;
flex-direction: row;
justify-content: center;
padding: 1.25rem 1.5rem;
}
.gform-admin .gform-data-grid__loader {
background-color: #e4e9eb;
block-size: 22px;
border-radius: 11px;
opacity: 1;
}
.gform-admin .gform-data-grid__loader.gform-data-grid__loader--animating {
animation: gravitysmtpOpacityCycle 1s ease-in-out infinite;
animation-delay: -0.5s;
}
.gform-admin .gform-data-grid--empty .gform-data-grid__pagination {
block-size: 4.8125rem;
}
.gform-admin .gform-data-grid--empty .gform-pagination {
display: none;
}
.gform-admin .gform-data-grid--loading .gform-data-grid__pagination {
opacity: 0.5;
position: relative;
}
.gform-admin .gform-data-grid--loading .gform-data-grid__pagination::after {
block-size: 100%;
content: "";
display: block;
inline-size: 100%;
inset-block-start: 0;
inset-inline-start: 0;
position: absolute;
}
@keyframes gravitysmtpOpacityCycle {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/*# sourceMappingURL=data-grid.css.map */