Файловый менеджер

Файловый менеджер - Редактировать - /home/harasnat/www/labour/wp-content/plugins/events-manager/includes/css/partials/_list-tables.scss

Назад
/// Styles the em-list-tables classes used both in front and backend, providing a consistent UI on both sides. /// Whether stylesheet is intended for front-end use or WP Admin area, in which case different styling is loaded. /// @param {boolean} $frontend $frontend: true !default; .em-list-table { position: relative; // for spinners to load correctly margin: 15px 0; .em-list-table-triggers { margin-right: 5px; .em-list-table-trigger { float: left; display: block; margin: 2px 5px 0 5px; width: 24px; height: 36px; background-position: 50% 50%; background-size: 24px; &:hover, &:focus { outline: none; box-shadow: none; } } } .em-list-table-error-notice { clear: both; } // Table styling is mainly on the front-end, in the backend we let WP take over and apply its WP_List_Table CSS to allow a consistent looking UI &.frontend { // Sorting elements, alternate table colors and styling are front-end only div.table-wrap { } // Pagination elements only modified in front-end, let WP do it's thing backend div.tablenav { .tablenav-pages { float:right; grid-area: pagination; text-wrap: nowrap; text-align: right; margin: 0 0 15px; &.no-pages, &.one-page { @if $frontend { padding-top: 18px; } .pagination-links { display: none; visibility: hidden; } } .button { padding: 0 12px !important; margin: 0 !important; &.disabled { display: none; } } input.current-page { width: auto !important; margin: 0 !important; } } } } // WP Admin area-specific styling &.backend { div.tablenav { > .actions { .actions { vertical-align: middle; } } } } &.has-filter { div.tablenav { margin-bottom: 0; .actions.filters { margin-bottom: 15px; } } } div.tablenav { clear: both; width: 100%; margin-bottom: 12px; > br.clear { display: none; visibility: hidden; } > .actions { display: block; float: left; margin: 0 0 15px; text-align: left; &:last-child { margin-bottom: 0; } &.filters { clear: left; } .actions { display: inline-block; float: none; margin-right: 0; padding-right: 0; vertical-align: top; &:not(:last-child, :first-child) { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--border-color-softer); } &:last-child { margin-left: 10px; } :last-of-type { margin-right: 0; } &.bulkactions-input { text-wrap: nowrap; } } input, select, button { max-width: 12.5rem; min-height: auto; margin: 0 6px 0 0 !important; } button.filters-trigger, button.small-expand-trigger { width: 25px; height: 25px; background-size: 25px; padding: 0 12.5px !important; margin: 0 !important; background-repeat: no-repeat; background-position: center center; background-color: transparent !important; text-indent: -10000px !important; border: 0 !important; background-image: var(--icon-filter-hide); opacity: 0.5; &.hidden { display: inline-block !important; visibility: visible !important; background-image: var(--icon-filter); opacity: 1; } &:active, &:focus { border: none !important; box-shadow: none !important; outline: none !important; } } button.small-expand-trigger { display: none; visibility: hidden; } } select { width: auto !important; padding-right: 30px !important; } // special bottom stuff &.bottom { margin-top: 15px; align-items: start; .tablenav-pages { &.no-pages, &.one-page { padding-top: 0; } } } @if $frontend { } @else { .em-list-table-trigger { height: 25px; margin-top: 0; } } } div.table-wrap { overflow-x: auto; border: 1px solid var(--border-color); margin: 0; clear: both; margin-top:5px; font-size: 14px; .check-column { text-wrap: nowrap; padding: 10px 0 10px 10px !important; button.em-tooltip-ddm { font-family: "Arial", sans-serif !important; transform: rotate(-90deg) !important; border: 0 !important; background: none !important; width: 22px !important; height: 1px !important; font-size: 16px !important; line-height: 3px !important; font-weight: bold !important; color: #aaa !important; padding: 0 0 10px 6px !important; cursor: pointer !important; &:active, &:focus { border: none !important; box-shadow: none !important; } } } thead { .check-column { padding: 0 0 0 3px; } } table { width: 100%; margin: 0 !important; border: 0 !important; } .toggle-row { display: none; visibility: hidden; } tr { transition: opacity 800ms ease-out; &.loading { pointer-events: none; cursor: not-allowed; td:not(.check-column) { opacity: 0.5; } .check-column { input { opacity: 0.3; } button { background: var(--icon-spinner) 3px 0 no-repeat; background-size: 16px; text-indent: -99999px; overflow: hidden; } } } &.faded-out { opacity: 0; } } td.column-primary { .em-list-table-row-responsive-meta { display: none; visibility: hidden; } .primary-column-content { display: inline-block; } } @if $frontend { thead, tfoot { td.manage-column { vertical-align: middle; label { position: absolute; } } th { vertical-align: center; } } tbody { td { vertical-align: top; } > :nth-child(odd) { background-color: #fafafa; } > .selected { background-color: #f6f6f6; } } tfoot { display: none; td, th { border-bottom: 0 !important; } } th { font-weight: normal; vertical-align: top; padding: 10px 12px !important; &.sortable, &.sorted { a { display: grid; grid-gap: 10px; grid-template-columns: auto 15px; align-items: center; color: var(--text-color-normal) !important; &:hover { color: var(--text-color-normal); text-decoration: none; } .sorting-indicators { display: grid; grid-template-columns: 1fr; grid-template-rows: min-content; .sorting-indicator { display: block; width: 12px; height: 12px; background-size: 12px; background-repeat: no-repeat; &.asc { background-image: var(--icon-chevron-up); } &.desc { background-image: var(--icon-chevron-down); } } } } &:hover { &.asc .sorting-indicator.asc, &.desc .sorting-indicator.desc { opacity: 0.2; } &.asc .sorting-indicator.desc, &.desc .sorting-indicator.asc { opacity: 1 !important; } } &.sorted { &.asc .sorting-indicator.desc, &.desc .sorting-indicator.asc { opacity: 0.2; } } } } td { padding: 11px 12px !important; &.column-primary { text-wrap: nowrap; } } } .em-icon { width: 18px; height: 18px; margin-right: 5px; background-size: 18px; &.em-icon-updated { background : green; -webkit-mask-image: var(--icon-updated); mask-image: var(--icon-updated); } &.em-icon-cross-circle { background : red; -webkit-mask-image: var(--icon-cross-circle); mask-image: var(--icon-cross-circle); } &.em-icon-trash { background : red; -webkit-mask-image: var(--icon-trash); mask-image: var(--icon-trash); } } .em-list-table-col-tooltip { .em-tooltip-content { padding: 10px; section { margin: 0 0 12px !important; &:last-of-type { margin-bottom: 0 !important; } header { padding-bottom: 2px; border-bottom: 1px solid #dedede; margin-bottom: 10px; } footer { margin-top: 5px; p { margin: 0 0 5px !important; padding: 0 !important; } } dl { display: grid; grid-template-columns: max-content max-content; margin: 0 0 10px !important; padding: 0 !important; &:last-child { margin-bottom: 0 !important; } dt, dd { margin: 0 !important; padding: 3px 0 !important; } dd { padding-left: 15px !important; } dt { font-weight: bold; } &.tabular-data { dt { font-weight: normal; padding: 8px 0 !important; } dd { padding: 8px 0 0 15px !important; } dt, dd { border-bottom : 1px solid #dedede; &:first-of-type { border-top: 0 !important; padding-top: 0 !important; } &:last-of-type { border-bottom: 0 !important; padding-bottom: 0 !important; } } } } div.general-data { margin: 0 0 10px !important; &:last-child { margin-bottom: 0 !important; } } } } .tippy-box { max-width: none !important; } a.em-tooltip { color: var(--text-color-softer) !important; border-bottom: 2px dotted #ccc; padding-bottom: 2px; text-wrap: nowrap; &:hover { cursor: pointer; text-decoration: none !important; } } } /* Special Pricing Rules / td.booking_price, td.ticket_price, td.ticket_total, td.total_paid, td.price-col { text-wrap: nowrap; } } &.no-checkboxes { div.tablenav { > .actions { margin-right: 15px; .actions { margin-right: 5px; } &.filters { clear: none; } } } .em-list-table-triggers { } } / Handle small and medium sized list boxes, with mixins to allow for optimal sizes in admin area / @mixin size-medium-nav { div.tablenav { // spread filter out across whole screen, on one or more lines, with center alignment > .actions, > .tablenav-pages { display: flex; float: none; text-align: center; justify-content: center; justify-items: center; align-items: center; } > .filters { border-width: 1px 0; border-style: solid; border-color: var(--border-color); padding: 10px 0; > { width : 100% !important; max-width: none !important; float: none; } > button, .button { width: auto !important; } } // navigation pages go on their own line > .tablenav-pages { gap: 8px; &.no-pages, &.one-page { padding-top: 0; } } } } @mixin size-small-nav { div.tablenav { > .actions.filters { display: block; > * { width: 90% !important; max-width: none; margin: 5px 5% !important; } } } } @mixin size-small-table { button.small-expand-trigger { display: inline-block !important; visibility: visible !important; width: 15px; background-image: var(--icon-expand) !important; opacity: 0.5; &.expanded { background-image: var(--icon-collapse) !important; opacity: 1; } } &.no-checkboxes { .wp-list-table { thead th:not(:nth-child(-n+1)) { display: none !important; overflow: hidden; } } tbody { td:not(.check-column) { &:not(:nth-child(-n+1))::before { display: inline-block; overflow: hidden; width: 35%; content: attr(data-colname); white-space: nowrap; text-overflow: ellipsis; border: 0; vertical-align: middle; } } } } &.has-checkboxes { .wp-list-table { thead th:not(:nth-child(-n+2)) { display: none !important; overflow: hidden; } } tbody { td:not(.check-column) { &:not(:nth-child(-n+2))::before { display: inline-block; overflow: hidden; width: 35%; content: attr(data-colname); white-space: nowrap; text-overflow: ellipsis; border: 0; vertical-align: middle; } } } } .wp-list-table { tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) { position: relative; clear: both; width: auto !important; } thead th.column-primary { content: ''; } tbody { th.check-column { width: 77px; } td:not(.check-column) { display: block !important; overflow: hidden; &:not(.column-primary) { display: none !important; } &:not(.column-primary, :last-child) { border: 0 !important; padding-top: 5px !important; padding-bottom: 5px !important; } &:last-child { padding-top: 5px !important; padding-bottom: 10px !important; } } td, th { vertical-align: top; } tr.expanded { td.column-primary { // primary col border shouldn't be shown if there's no responsive meta &:not(:has(.em-list-table-row-responsive-meta)) { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; } } } td.column-primary { &:not(:has(.em-list-table-row-responsive-meta)) { .primary-column-content { border-bottom: 0; } } button.toggle-row { display: inline-block !important; visibility: visible !important; float: right; width: 10px !important; height: 15px !important; background-size: 15px; padding: 0 5px !important; margin: 0 0 0 5px !important; background-repeat: no-repeat; background-position: center center; background-color: transparent !important; text-indent: -10000px !important; border: 0 !important; background-image: var(--icon-chevron-down); &.expanded { background-image: var(--icon-chevron-up); } &:active, &:focus { border: none !important; box-shadow: none !important; outline: none !important; } :focus:before { box-shadow: none; outline: none; } } .em-list-table-row-responsive-meta { float: left; clear: left; display: block; visibility: visible; } .primary-column-content { float: left; clear: left; margin-bottom: 8px; border-bottom: 1px solid var(--border-color-softer); padding-bottom: 5px; } } tr.expanded { td:not(:first-child, .column-primary) { display: block !important; } td.column-primary { margin: 0 13px 10px 11px !important; padding-left: 0 !important; padding-right: 0 !important; } } } } } @mixin size-xsmall-nav { // break up the bulk action and buttons div.tablenav { > .actions, > .tablenav-pages { display: block; .bulkactions-input { display: block; margin-top: 15px; select { float: none; } } } } } @if $frontend { &.size-medium, &.size-small, &.size-xsmall { @include size-medium-nav; } &.size-small, &.size-xsmall { @include size-small-table; @include size-small-nav; } &.size-xsmall { @include size-xsmall-nav; } } @else { a.em-list-table-trigger { &:last-of-type { margin-right: 5px !important; } } div.tablenav { > .actions { button.filters-trigger, button.small-expand-trigger { } } } // This is the key to making the list tables responsive in an EM-fashioned way @media screen and (max-width: 782px) { @include size-medium-nav; @include size-small-table; &.size-small, &.size-xsmall { @include size-small-nav; } } @media screen and (max-width: 480px ) { @include size-xsmall-nav; } } } .em-list-table-cols { display: grid; width: 100%; grid-template-columns: 1fr 1fr; grid-gap: 20px; p { margin-bottom: 15px !important; } .em-list-table-cols-selected { .item { width: 100%; display: flex; flex-wrap: nowrap; flex-direction: row-reverse; align-items: center; cursor: pointer; margin: 0 0 8px 0; padding: 5px 0 5px 8px; border-radius: calc(0.25rem - 1px); background: #dff4fd; border: 1px solid #97dbf9; color: #0095c3; &.sortable-ghost { // remove contents and make barder dotted border-style: dotted; opacity: 0.4; } > span { flex: 1 1 auto; } .remove { flex: 0 0 auto; color: inherit !important; background-color: inherit !important; text-decoration: none; vertical-align: middle; display: inline-block; padding: 0; border: none; box-sizing: border-box; margin-right: 10px; } } } .em-list-table-cols-select{ .selectize-input.items { .item { display: none !important; } input { margin-top: 0 !important; } } .selectize-dropdown { .optgroup:before { display:none; } .optgroup-header { display: block; width: 95%; padding: 0 0 6px; margin: 10px auto 6px; border-bottom: 1px solid #ddd; } .optgroup:first-child { .optgroup-header { margin-top: 5px; } } } } } .em-bookings-table { @if $frontend { .em-bookings-table-views-selection + .actions { margin-left: 5px !important; } } .em-bookings-table-views { display: inline-block; [data-view="bookings"] { background-image: var(--icon-tickets) !important; background-size: 30px !important; } [data-view="tickets"] { background-image: var(--icon-ticket) !important; } [data-view="attendees"] { background-image: var(--icon-attendees) !important; } [data-view="multiple-bookings"] { background-image: var(--icon-multiple) !important; } .em-bookings-table-views-trigger { display: block; width: 42px; background: var(--icon-point-down) 30px 6px no-repeat; background-size: 14px; padding: 0 15px 0 0; margin: 0; cursor: pointer; .em-bookings-table-view-option { display: block; width: 25px; height: 25px; background-size: 25px; background-repeat: no-repeat; background-position: center center; background-color: transparent !important; text-indent: -10000px !important; padding: 0 !important; border: 0 !important; } } .em-bookings-table-views-options { display:none; } .tippy-content .em-bookings-table-views-options { display: block; } .em-bookings-table-views-options-list { display: block !important; padding: 0 !important; margin: 5px 0 !important; border: none !important; background: transparent !important; cursor: pointer !important; overflow: visible !important; label.em-bookings-table-view-option { display: block !important; padding: 5px 10px 5px 40px !important; margin: 0 !important; background-repeat: no-repeat !important; background-size: 18px !important; background-position: 10px center !important; background-color: transparent !important; &:hover, &.focused { background-color: #efefef !important; } &:checked, &.checked { background-color: #cee0ea !important; } input[type="radio"] { @include screen-reader-only(); } &[data-view="bookings"], &[data-view="mulitple-bookings"] { background-size: 24px !important; background-position: 6px center !important; } } &:focus { border: none !important; outline: none !important; } } } @if $frontend { } @else { .em-bookings-table-views-trigger { padding-top: 3px; } } td.column-actions { text-wrap: nowrap; a { display: inline-block; text-indent: -9999px; background-size : 18px; width: 18px; height: 18px; margin: 0 6px 0 0; &:last-of-type { margin-right: 0; } :focus { box-shadow: none; outline: none; } &[data-row_action="delete"] { background: var(--icon-trash) no-repeat; } &[data-row_action="approve"] { background: var(--icon-checkmark-circle) no-repeat; } &[data-row_action="unapprove"] { background: var(--icon-undo) no-repeat; } &[data-row_action="reject"], &[data-row_action="cancel"] { background: var(--icon-cross-circle) no-repeat; } &[data-row_action="checkin"] { background: var(--icon-enter) no-repeat; } &[data-row_action="checkout"] { background: var(--icon-exit) no-repeat; } &.em-list-table-row-edit { background: var(--icon-edit) no-repeat; } } } } /* The selection modal of columns for the bookings table */ &.em-list-table-settings { .em-list-table-settings-remember { text-align: right; input[type="checkbox"] { margin-left: 10px; } [data-tippy-root] { text-align: center; } } } // Stop cols for booking cols selector for very small screens only @media only screen and (max-width: 800px) { .em-list-table-cols-selected { .item { display: block; } } } // Stop cols for booking cols selector for very small screens only @media only screen and (max-width: 380px) { .em-list-table-cols-selected { .item { display: block; } } }

| ver. 1.4 | Github | .