376 lines
8.6 KiB
CSS
376 lines
8.6 KiB
CSS
/*
|
|
* DO NOT EDIT THIS FILE.
|
|
* See the following change record for more information,
|
|
* https://www.drupal.org/node/3084859
|
|
* @preserve
|
|
*/
|
|
|
|
/**
|
|
* @file
|
|
* Replacement styles for table drag.
|
|
*
|
|
* Replaces core's tabledrag.module.css.
|
|
*
|
|
* @see tabledrag.js
|
|
*/
|
|
|
|
body.drag {
|
|
cursor: move;
|
|
}
|
|
|
|
/* The block region's title row in table. */
|
|
|
|
.region-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Empty region message row in table. */
|
|
|
|
.region-message {
|
|
color: #82828c;
|
|
}
|
|
|
|
/* If the region is populated, we shouldn't display the empty message. */
|
|
|
|
.region-message.region-populated {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Remove border-bottom from abbr element. Class is duplicated in the selector
|
|
* to increase weight to be able to win normalize.css selectors.
|
|
*/
|
|
|
|
.tabledrag-changed.tabledrag-changed {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Don't display the abbreviation of 'add-new' table rows. */
|
|
|
|
.add-new .tabledrag-changed {
|
|
display: none;
|
|
}
|
|
|
|
.draggable .tabledrag-changed {
|
|
position: relative;
|
|
left: -0.5rem; /* LTR */
|
|
}
|
|
|
|
[dir="rtl"] .draggable .tabledrag-changed {
|
|
right: -0.5rem; /* LTR */
|
|
left: auto;
|
|
}
|
|
|
|
.tabledrag-cell--only-drag .tabledrag-changed {
|
|
width: 1.5rem;
|
|
min-width: 1.5rem;
|
|
}
|
|
|
|
/**
|
|
* Draggable row state colors.
|
|
*/
|
|
|
|
.draggable.drag,
|
|
.draggable.drag:focus {
|
|
background-color: #fe7;
|
|
}
|
|
|
|
.draggable.drag-previous {
|
|
background-color: #ffb;
|
|
}
|
|
|
|
/**
|
|
* Reduce the spacing of draggable table cells.
|
|
*/
|
|
|
|
.draggable-table td:first-child ~ td,
|
|
.draggable-table th:first-child ~ th {
|
|
padding-left: 0 /* LTR */;
|
|
}
|
|
|
|
[dir="rtl"] .draggable-table td:first-child ~ td,
|
|
[dir="rtl"] .draggable-table th:first-child ~ th {
|
|
padding-right: 0;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
/* Auto width for weight selects and number inputs. */
|
|
|
|
.draggable td .form-element--type-select[name$="][_weight]"], /* Multiple field */
|
|
.draggable td .term-weight, /* Taxonomy term list */
|
|
.draggable td .field-weight /* Field UI table */ {
|
|
width: auto;
|
|
}
|
|
|
|
/**
|
|
* Handle styles.
|
|
*/
|
|
|
|
.tabledrag-handle {
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: visible;
|
|
cursor: move;
|
|
text-align: center;
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
.tabledrag-handle::after {
|
|
display: inline-block;
|
|
width: 1.0625rem;
|
|
height: 1.0625rem;
|
|
margin-left: -1rem; /* LTR */
|
|
padding: 0.5rem 1rem;
|
|
content: "";
|
|
transition: transform 0.1s ease-in-out 0s;
|
|
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3e%3cpath fill='%23222330' d='M14.103 5.476a.5.5 0 00-.701-.053.526.526 0 00-.082.713l1.1 1.346H8.512V1.62l1.32 1.113a.501.501 0 00.732-.054.528.528 0 00-.085-.744L8.328.119a.5.5 0 00-.647 0L5.529 1.935a.527.527 0 00-.085.744.504.504 0 00.732.054l1.32-1.113v5.862H1.588L2.68 6.136a.526.526 0 00-.1-.68.5.5 0 00-.675.02L.117 7.67a.525.525 0 000 .66l1.788 2.194a.5.5 0 00.702.053.526.526 0 00.081-.713l-1.1-1.346h5.908v5.862l-1.32-1.113a.501.501 0 00-.698.082.526.526 0 00.051.716l2.152 1.817v-.001a.5.5 0 00.647 0l2.151-1.816a.526.526 0 00.052-.716.501.501 0 00-.699-.082l-1.32 1.113V8.518h5.908l-1.091 1.346a.527.527 0 00.022.776.504.504 0 00.752-.116l1.78-2.194a.527.527 0 000-.66z'/%3e%3c/svg%3e") no-repeat center;
|
|
}
|
|
|
|
[dir="rtl"] .tabledrag-handle::after {
|
|
margin-right: -1rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
@media screen and (-ms-high-contrast: active) {
|
|
.tabledrag-handle::after {
|
|
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M14.103 5.476a.5.5 0 00-.701-.053.526.526 0 00-.082.713l1.1 1.346H8.512V1.62l1.32 1.113a.501.501 0 00.732-.054.528.528 0 00-.085-.744L8.328.119a.5.5 0 00-.647 0L5.529 1.935a.527.527 0 00-.085.744.504.504 0 00.732.054l1.32-1.113v5.862H1.588L2.68 6.136a.526.526 0 00-.1-.68.5.5 0 00-.675.02L.117 7.67a.525.525 0 000 .66l1.788 2.194a.5.5 0 00.702.053.526.526 0 00.081-.713l-1.1-1.346h5.908v5.862l-1.32-1.113a.501.501 0 00-.698.082.526.526 0 00.051.716l2.152 1.817v-.001a.5.5 0 00.647 0l2.151-1.816a.526.526 0 00.052-.716.501.501 0 00-.699-.082l-1.32 1.113V8.518h5.908l-1.091 1.346a.527.527 0 00.022.776.504.504 0 00.752-.116l1.78-2.194a.527.527 0 000-.66z'/%3e%3c/svg%3e");
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
.tabledrag-handle::after,
|
|
.tabledrag-disabled .tabledrag-handle.tabledrag-handle.tabledrag-handle::after {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.tabledrag-handle:hover::after,
|
|
.tabledrag-handle:focus::after,
|
|
.draggable.drag .tabledrag-handle::after {
|
|
transform: scale(1.25);
|
|
}
|
|
|
|
.tabledrag-handle:focus {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.tabledrag-handle:focus::before {
|
|
display: block;
|
|
width: 2rem; /* Same as height. */
|
|
height: 2rem; /* Hande svg height + its vertical padding */
|
|
margin: 0 -0.5rem -2rem; /* Bottom: handle height as negative value. */
|
|
content: "";
|
|
border-radius: 2px;
|
|
outline: 2px dotted transparent;
|
|
box-shadow: 0 0 0 3px #26a769;
|
|
}
|
|
|
|
/* Disabled tabledrag handle. */
|
|
|
|
.tabledrag-disabled .tabledrag-handle {
|
|
cursor: default;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.tabledrag-disabled .tabledrag-handle.tabledrag-handle::before {
|
|
content: normal;
|
|
}
|
|
|
|
/**
|
|
* Enhancements for touch-capable screens.
|
|
*/
|
|
|
|
/**
|
|
* Increase handle size.
|
|
*/
|
|
|
|
.touchevents .tabledrag-handle::after {
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
|
|
.touchevents .draggable .menu-item__link {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
/**
|
|
* Wrapper of the toggle weight button (styled as a link).
|
|
*/
|
|
|
|
.tabledrag-toggle-weight-wrapper {
|
|
text-align: right; /* LTR */
|
|
}
|
|
|
|
[dir="rtl"] .tabledrag-toggle-weight-wrapper {
|
|
text-align: left;
|
|
}
|
|
|
|
/**
|
|
* Keep crowded tabledrag cells vertically centered.
|
|
*/
|
|
|
|
.tabledrag-cell {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/**
|
|
* If the first table cell is empty (like in a multiple field widget table),
|
|
* we can save some space for the following cells.
|
|
* If it isn't empty (Field UI table, taxonomy term overview page), this CSS
|
|
* class won't be added.
|
|
*/
|
|
|
|
.tabledrag-cell--only-drag {
|
|
width: 1px; /* This forces this cell to use the smallest possible width. */
|
|
padding-right: 0; /* LTR */
|
|
}
|
|
|
|
[dir="rtl"] .tabledrag-cell--only-drag {
|
|
padding-right: 1rem;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.tabledrag-cell-content {
|
|
display: table;
|
|
height: 100%;
|
|
}
|
|
|
|
.tabledrag-cell-content > * {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tabledrag-cell-content__item {
|
|
padding-right: 0.5rem; /* LTR */
|
|
}
|
|
|
|
[dir="rtl"] .tabledrag-cell-content__item {
|
|
padding-right: 0;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.tabledrag-cell-content__item:empty {
|
|
display: none;
|
|
}
|
|
|
|
.tabledrag-cell-content .indentation,
|
|
[dir="rtl"] .tabledrag-cell-content .indentation {
|
|
float: none;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.tabledrag-cell-content .tree {
|
|
min-height: 100%; /* Using simply 'height: 100%' would make IE11 rendering ugly. */
|
|
}
|
|
|
|
/**
|
|
* Safari (at least version 13.0) thinks that if we define a width or height for
|
|
* and SVG, then we refer to the elements total size inside the SVG.
|
|
* We only want to inherit the height of the parent element.
|
|
*/
|
|
|
|
/* stylelint-disable-next-line unit-allowed-list */
|
|
|
|
@media not all and (min-resolution: 0.001dpcm) {
|
|
@supports (-webkit-appearance: none) {
|
|
.tabledrag-cell-content .tree {
|
|
overflow: visible;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabledrag-cell-content .tabledrag-handle::after {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/**
|
|
* Indentation.
|
|
*/
|
|
|
|
.indentation {
|
|
position: relative;
|
|
left: -0.25rem; /* LTR */
|
|
float: left; /* LTR */
|
|
width: 1.5625rem; /* 25px */
|
|
height: 1.5625rem; /* 25px */
|
|
background: none !important;
|
|
line-height: 0;
|
|
}
|
|
|
|
[dir="rtl"] .indentation {
|
|
right: -0.25rem;
|
|
left: auto;
|
|
float: right;
|
|
}
|
|
|
|
/**
|
|
* Tree is the visual representation for the simultaneously moved draggable
|
|
* rows.
|
|
*
|
|
* These rules are styling the inline SVG that is placed inside the .indentation
|
|
* element.
|
|
*/
|
|
|
|
.tree {
|
|
width: 1.5625rem; /* 25px */
|
|
height: 1.5625rem; /* 25px */
|
|
}
|
|
|
|
.tree__item {
|
|
display: none;
|
|
}
|
|
|
|
/* LTR tree child. */
|
|
|
|
.tree-child path:not(.tree__item-child-ltr) {
|
|
display: none;
|
|
}
|
|
|
|
.tree-child path.tree__item-child-ltr {
|
|
display: block;
|
|
}
|
|
|
|
/* RTL tree child. */
|
|
|
|
[dir="rtl"] .tree-child path:not(.tree__item-child-rtl) {
|
|
display: none;
|
|
}
|
|
|
|
[dir="rtl"] .tree-child path.tree__item-child-rtl {
|
|
display: block;
|
|
}
|
|
|
|
/* Last LTR tree child. */
|
|
|
|
.tree-child-last path:not(.tree__item-child-last-ltr) {
|
|
display: none;
|
|
}
|
|
|
|
.tree-child-last path.tree__item-child-last-ltr {
|
|
display: block;
|
|
}
|
|
|
|
/* Last RTL tree child. */
|
|
|
|
[dir="rtl"] .tree-child-last path:not(.tree__item-child-last-rtl) {
|
|
display: none;
|
|
}
|
|
|
|
[dir="rtl"] .tree-child-last path.tree__item-child-last-rtl {
|
|
display: block;
|
|
}
|
|
|
|
/* Horizontal line. */
|
|
|
|
.tree-child-horizontal path:not(.tree__item-horizontal) {
|
|
display: none;
|
|
}
|
|
|
|
.tree-child-horizontal path.tree__item-horizontal {
|
|
display: block;
|
|
}
|