Issue #3374131: Tabledrag handle and "dragged" bar not visible in forced... (10f15746) · Commits · project / gin

dist/css/base/gin.css

+35 −2

Original line number	Diff line number	Diff line
		@@ -1575,7 +1575,6 @@ td.webform-has-field-suffix > .form-item > .form-element {

		.tabledrag-handle::after {
		background-image: none;
		background-color: var(--gin-color-text-light);
		-webkit-mask-image: url("../../media/sprite.svg#drag-view");
		mask-image: url("../../media/sprite.svg#drag-view");
		-webkit-mask-repeat: no-repeat;
		@@ -1586,10 +1585,21 @@ td.webform-has-field-suffix > .form-item > .form-element {
		mask-size: 16px 16px;
		}

		@media (forced-colors: none) {
		.tabledrag-handle::after {
		background-color: var(--gin-color-text-light);
		}
		}

		.tabledrag-handle:hover::after {
		transform: scale(1);
		}

		@media (forced-colors: none) {
		.tabledrag-handle:hover::after {
		background-color: var(--gin-color-primary);
		}
		}

		.draggable.drag, .draggable.drag:focus {
		background-color: var(--gin-bg-layer2);
		@@ -1611,6 +1621,29 @@ td.webform-has-field-suffix > .form-item > .form-element {
		box-shadow: inset -6px 0 0 0 var(--gin-color-warning);
		}

		.draggable.drag-previous::after {
		content: "";
		position: absolute;
		height: 100%;
		width: 6px;
		}

		@media (forced-colors: active) {
		.draggable.drag-previous {
		position: relative;
		}

		[dir="ltr"] .draggable.drag-previous::after {
		border-left: 6px solid linktext;
		left: 0;
		}

		[dir="rtl"] .draggable.drag-previous::after {
		border-right: 6px solid linktext;
		right: 0;
		}
		}

		.tabledrag-leaf td,
		.tabledrag-cell {
		vertical-align: top;

+23 −2

Original line number	Diff line number	Diff line
		@@ -52,20 +52,26 @@
		.tabledrag-handle {
		&::after {
		background-image: none;
		background-color: var(--gin-color-text-light);
		mask-image: icon('drag');
		mask-repeat: no-repeat;
		mask-position: center center;
		mask-size: 16px 16px;

		@media (forced-colors: none) {
		background-color: var(--gin-color-text-light);
		}
		}

		&:hover {
		&::after {
		transform: scale(1);

		@media (forced-colors: none) {
		background-color: var(--gin-color-primary);
		}
		}
		}
		}

		.draggable.drag, .draggable.drag:focus {
		background-color: var(--gin-bg-layer2);
		@@ -78,6 +84,21 @@
		.draggable.drag-previous {
		background-color: var(--gin-bg-layer2);
		box-shadow: inset 6px 0 0 0 var(--gin-color-warning);

		&::after {
		content: "";
		position: absolute;
		height: 100%;
		width: 6px;
		}

		@media (forced-colors: active) {
		position: relative;
		&::after {
		border-left: 6px solid linktext;
		left:0
		}
		}
		}

		.tabledrag-leaf td,