Issue #3357237: [admin_toolbar] 3.3.1 compatibility issues (fc06460f) · Commits · project / gin

dist/css/base/gin.css

+7 −8

Original line number	Diff line number	Diff line
		@@ -1849,6 +1849,10 @@ td.webform-has-field-suffix > .form-item > .form-element {
		background-color: var(--gin-color-primary);
		}

		.gin--dark-mode .form-boolean--type-checkbox:checked {
		background-image: url("../../media/sprite.svg#checked-view");
		}

		.form-boolean--type-checkbox:checked:hover {
		background-color: var(--gin-color-primary-hover);
		}
		@@ -2321,13 +2325,6 @@ tr .form-item {
		transition: var(--gin-transition);
		}

		.gin--dark-mode .button,
		.gin--dark-mode .button:not(:focus),
		.gin--dark-mode .form-actions .button,
		.gin--dark-mode .action-link--icon-trash.action-link {
		box-shadow: 0 2px 18px var(--gin-shadow-button);
		}

		.button:hover,
		.button:not(:focus):hover,
		.form-actions .button:hover,
		@@ -3117,6 +3114,7 @@ a.button.button--danger:active:before {
		border-radius: var(--gin-border-m);
		border-color: transparent !important;
		transition: var(--gin-transition);
		box-shadow: none;
		}

		[dir="ltr"] .messages .button--dismiss {
		@@ -3454,7 +3452,8 @@ hr {
		.layout-paragraphs-field .layout-paragraphs-actions input.layout-paragraphs-remove:focus,
		.ck .ck.ck-button:active,
		.ck .ck.ck-button:focus,
		.ck .ck.ck-button:active:focus {
		.ck .ck.ck-button:active:focus,
		.toolbar-box .toolbar-handle:focus {
		outline: none;
		box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
		}

dist/css/components/toolbar.css

+71 −11

Original line number	Diff line number	Diff line
		@@ -494,6 +494,11 @@ body.gin--classic-toolbar {
		background: #5a5a61;
		}

		.toolbar-tray-horizontal .menu-item.hover-intent,
		.toolbar-tray-horizontal .menu-item--expanded {
		background-color: transparent;
		}

		.toolbar-tray-horizontal ul li.menu-item .menu-item {
		background: transparent;
		border-left: none;
		@@ -501,15 +506,7 @@ body.gin--classic-toolbar {
		border-bottom: 0 none;
		}

		.toolbar-tray-horizontal ul li.menu-item--expanded {
		background-color: transparent;
		}

		[dir=rtl] .toolbar-tray-horizontal ul li.menu-item--expanded {
		background-color: transparent;
		}

		.toolbar-tray-horizontal ul li.menu-item--expanded.hover-intent ul {
		.toolbar-tray-horizontal ul li.menu-item--expanded.hover-intent ul, .toolbar-tray-horizontal ul li.menu-item--expanded:focus-within ul {
		box-shadow: 0 8px 14px rgba(0, 0, 0, .15);
		}

		@@ -603,7 +600,8 @@ body.gin--classic-toolbar {
		padding-right: 3.25em;
		}

		.toolbar .toolbar-tray-vertical .toolbar-menu a:hover, .toolbar .toolbar-tray-vertical .toolbar-menu a:focus,
		.toolbar .toolbar-tray-vertical .toolbar-menu a:visited, .toolbar .toolbar-tray-vertical .toolbar-menu a:hover, .toolbar .toolbar-tray-vertical .toolbar-menu a:focus,
		.toolbar .toolbar-tray-vertical .toolbar-menu span:visited,
		.toolbar .toolbar-tray-vertical .toolbar-menu span:hover,
		.toolbar .toolbar-tray-vertical .toolbar-menu span:focus {
		color: var(--gin-color-text);
		@@ -796,8 +794,70 @@ body.gin--classic-toolbar {
		}

		.ui-autocomplete.admin-toolbar-search-autocomplete-list .ui-menu-item-wrapper.ui-state-active {
		color: var(--gin-color-button-text);
		background-color: var(--gin-color-primary);
		border: 0 none;
		}

		.ui-autocomplete.admin-toolbar-search-autocomplete-list .ui-menu-item-wrapper.ui-state-active, .ui-autocomplete.admin-toolbar-search-autocomplete-list .ui-menu-item-wrapper.ui-state-active a {
		color: var(--gin-color-button-text);
		}

		.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle, .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-handle.responsive-preview-icon {
		position: absolute;
		top: 1.1875rem;
		width: 1rem;
		height: 1rem;
		padding: 0;
		}

		[dir="ltr"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle, [dir="ltr"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-handle.responsive-preview-icon {
		right: .5rem;
		}

		[dir="rtl"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle, [dir="rtl"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-handle.responsive-preview-icon {
		left: .5rem;
		}

		.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle::before, .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-handle.responsive-preview-icon::before {
		top: 0;
		-webkit-mask-size: 12px 12px;
		mask-size: 12px 12px;
		}

		[dir="ltr"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle::before, [dir="ltr"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-handle.responsive-preview-icon::before {
		left: 0;
		}

		[dir="rtl"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle::before, [dir="rtl"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-handle.responsive-preview-icon::before {
		right: 0;
		}

		.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box .toolbar-handle {
		position: absolute;
		top: 0;
		width: 39px;
		height: 100%;
		padding: 0;
		background: none;
		}

		[dir="ltr"] .toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box .toolbar-handle {
		right: 0;
		}

		[dir="rtl"] .toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box .toolbar-handle {
		left: 0;
		}

		.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box .toolbar-handle:focus {
		box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 4px var(--gin-color-focus);
		}

		.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box .toolbar-handle::before {
		display: none !important;
		}

		.toolbar-tray-horizontal .toolbar-icon:not(.toolbar-handle), .toolbar-tray-horizontal .responsive-preview-icon:not(.toolbar-handle) {
		width: 100%;
		}

dist/css/layout/classic_toolbar.css

+16 −5

Original line number	Diff line number	Diff line
		@@ -51,6 +51,22 @@
		border-bottom: 1px solid var(--gin-border-color);
		}

		[dir="ltr"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box a {
		padding-right: 2.25em;
		}

		[dir="rtl"] .toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box a {
		padding-left: 2.25em;
		}

		.toolbar-tray-horizontal .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {
		top: .75rem;
		}

		.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {
		width: 100%;
		}

		.toolbar-tray a,
		.toolbar-tray span,
		.toolbar .toolbar-menu .toolbar-menu a,
		@@ -121,15 +137,10 @@
		display: none !important;
		}

		.toolbar .level-2 > ul,
		.gin--dark-mode .toolbar .toolbar-toggle-orientation {
		background-color: var(--gin-bg-layer2);
		}

		.toolbar .level-3 > ul {
		background-color: var(--gin-bg-app);
		}

		.gin--classic-toolbar .page-wrapper__node-edit-form .layout-region-node-secondary {
		padding-top: var(--gin-toolbar-y-offset);
		}

dist/css/layout/horizontal_toolbar.css

+23 −22

Original line number	Diff line number	Diff line
		@@ -40,25 +40,22 @@
		}

		.toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon,
		.toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon {
		.toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon:not(.toolbar-handle) {
		padding-top: 20px;
		padding-bottom: 20px;
		white-space: nowrap;
		}

		[dir="ltr"] .toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon,
		[dir="ltr"] .toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon {
		[dir="ltr"] .toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon:not(.toolbar-handle) {
		padding-left: 3em;
		padding-right: 2.25em;
		}

		[dir="rtl"] .toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon,
		[dir="rtl"] .toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon {
		[dir="rtl"] .toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon:not(.toolbar-handle) {
		padding-right: 3em;
		}

		.toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon::before,
		.toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon::before {
		margin-top: -1px;
		padding-left: 2.25em;
		}

		[dir="ltr"] .toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon:not(.toolbar-handle)::before {
		@@ -69,20 +66,24 @@
		right: var(--gin-spacing-s);
		}

		.toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu .toolbar-icon.toolbar-handle {
		width: 48px;
		.toolbar .toolbar-bar .toolbar-toggle-orientation {
		display: none !important;
		}

		.toolbar-tray-vertical .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {
		width: 3rem;
		}

		[dir="ltr"] .toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu .toolbar-icon.toolbar-handle:before {
		[dir="ltr"] .toolbar-tray-vertical .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle:before {
		left: var(--gin-spacing-m);
		}

		[dir="rtl"] .toolbar .toolbar-bar .toolbar-menu-administration > .toolbar-menu .toolbar-icon.toolbar-handle:before {
		[dir="rtl"] .toolbar-tray-vertical .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle:before {
		right: var(--gin-spacing-m);
		}

		.toolbar .toolbar-bar .toolbar-toggle-orientation {
		display: none !important;
		.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {
		width: 100%;
		}

		.toolbar-horizontal .toolbar-tray {
		@@ -90,6 +91,7 @@
		}

		.toolbar .toolbar-menu,
		.toolbar-horizontal .menu-item > .toolbar-menu,
		.toolbar-horizontal .toolbar-tray .menu-item--expanded.menu-item--expanded,
		.toolbar .toolbar-tray {
		background-color: var(--gin-bg-layer);
		@@ -132,13 +134,17 @@
		background: var(--gin-color-primary);
		}

		.toolbar .toolbar-tray .hover-intent > .toolbar-icon {
		.toolbar .toolbar-tray .hover-intent > .toolbar-icon,
		.toolbar .toolbar-tray .hover-intent > .toolbar-box > .toolbar-icon:not(.toolbar-handle) {
		color: var(--gin-color-primary-hover);
		background-color: var(--gin-bg-item-hover);
		}

		.toolbar .toolbar-tray .hover-intent > .toolbar-icon::before {
		background: var(--gin-color-primary);
		.toolbar .toolbar-tray .hover-intent > .toolbar-icon::before,
		.toolbar .toolbar-tray .hover-intent > .toolbar-icon + .toolbar-handle::before,
		.toolbar .toolbar-tray .hover-intent > .toolbar-box > .toolbar-icon:not(.toolbar-handle)::before,
		.toolbar .toolbar-tray .hover-intent > .toolbar-box > .toolbar-icon:not(.toolbar-handle) + .toolbar-handle::before {
		background-color: var(--gin-color-primary);
		}

		.toolbar-tray-horizontal a:focus,
		@@ -153,15 +159,10 @@
		display: none !important;
		}

		.toolbar .level-2 > ul,
		.gin--dark-mode .toolbar .toolbar-toggle-orientation {
		background-color: var(--gin-bg-layer2);
		}

		.toolbar .level-3 > ul {
		background-color: var(--gin-bg-app);
		}

		@media (min-width: 64em) {
		.gin--classic-toolbar table.sticky-header {
		margin-top: 0;

dist/css/layout/toolbar.css

+22 −7

Original line number	Diff line number	Diff line
		@@ -223,6 +223,7 @@
		@media (max-width: 60.99em) {
		.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
		.toolbar .toolbar-tray a.is-active {
		width: 100%;
		background: var(--gin-color-primary-light);
		}
		}
		@@ -369,18 +370,25 @@ a.toolbar-menu__trigger,
		width: var(--gin-toolbar-width);
		}

		.toolbar-tray-horizontal .toolbar-menu-administration ul li.menu-item--expanded .menu-item.hover-intent ul {
		.toolbar-tray-horizontal .toolbar-menu-administration ul li.menu-item--expanded .menu-item.hover-intent ul,
		.toolbar-tray-horizontal .toolbar-menu-administration ul li.menu-item--expanded .menu-item:focus-within ul {
		margin-top: 0;
		}

		[dir="ltr"] .toolbar-tray-horizontal .toolbar-menu-administration ul li.menu-item--expanded .menu-item.hover-intent ul {
		[dir="ltr"] .toolbar-tray-horizontal .toolbar-menu-administration ul li.menu-item--expanded .menu-item.hover-intent ul,
		[dir="ltr"] .toolbar-tray-horizontal .toolbar-menu-administration ul li.menu-item--expanded .menu-item:focus-within ul {
		margin-left: calc(var(--gin-toolbar-width) - 2px);
		}

		[dir="rtl"] .toolbar-tray-horizontal .toolbar-menu-administration ul li.menu-item--expanded .menu-item.hover-intent ul {
		[dir="rtl"] .toolbar-tray-horizontal .toolbar-menu-administration ul li.menu-item--expanded .menu-item.hover-intent ul,
		[dir="rtl"] .toolbar-tray-horizontal .toolbar-menu-administration ul li.menu-item--expanded .menu-item:focus-within ul {
		margin-right: calc(var(--gin-toolbar-width) - 2px);
		}

		.toolbar-tray-horizontal .toolbar-menu-administration .toolbar-icon.toolbar-handle {
		display: none !important;
		}

		.toolbar-vertical .toolbar-menu-administration {
		width: var(--gin-toolbar-width);
		}
		@@ -567,6 +575,9 @@ a.toolbar-menu__trigger,

		.toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu .menu-item .toolbar-icon {
		font-size: var(--gin-font-size);
		display: block;
		width: 100%;
		max-width: calc(100% - var(--gin-spacing-l));
		margin: .25em var(--gin-spacing-s);
		border-radius: var(--gin-border-m);
		overflow: hidden;
		@@ -599,22 +610,26 @@ a.toolbar-menu__trigger,
		background-size: 100% 40px, 100% 40px, 100% 24px, 100% 24px;
		}

		.toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu {
		.toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu,
		.toolbar-menu-administration .menu-item:focus-within > .toolbar-menu {
		z-index: 2;
		display: block;
		}

		[dir="ltr"] .toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu {
		[dir="ltr"] .toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu,
		[dir="ltr"] .toolbar-menu-administration .menu-item:focus-within > .toolbar-menu {
		border-right: 1px solid rgba(0, 0, 0, .075);
		box-shadow: 7px 0 16px rgba(0, 0, 0, .075), -12px 0 0 0 var(--gin-bg-layer);
		}

		[dir="rtl"] .toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu {
		[dir="rtl"] .toolbar-menu-administration .menu-item.hover-intent > .toolbar-menu,
		[dir="rtl"] .toolbar-menu-administration .menu-item:focus-within > .toolbar-menu {
		border-left: 1px solid rgba(0, 0, 0, .075);
		box-shadow: -7px 0 16px rgba(0, 0, 0, .075), 12px 0 0 0 var(--gin-bg-layer);
		}

		.toolbar-menu-administration .menu-item .menu-item:hover > .toolbar-icon {
		.toolbar-menu-administration .menu-item .menu-item:hover > .toolbar-icon,
		.toolbar-menu-administration .menu-item .menu-item:hover > .toolbar-box .toolbar-icon {
		color: var(--gin-color-primary-hover);
		background: var(--gin-color-primary-light);
		}