Issue #3356350: [Drupal 10.1] Flickering sidebar nav width on page load (a1b45db1) · Commits · project / gin

dist/css/base/gin.css

+5 −153

Original line number	Diff line number	Diff line
		@@ -770,155 +770,6 @@ details summary {
		}
		}

		.block-system > .views-form .claro-details,
		.view-content .views-form .claro-details {
		box-shadow: none;
		}

		.block-system > .views-form form,
		.view-content .views-form form {
		display: flex;
		flex-direction: column;
		}

		.block-system > .views-form .views-table,
		.view-content .views-form .views-table {
		order: -1;
		margin-top: 0;
		}

		.block-system > .views-form [data-drupal-selector*=edit-header],
		.view-content .views-form [data-drupal-selector*=edit-header] {
		order: 99;
		position: relative;
		}

		[dir="ltr"] .block-system > .views-form [data-drupal-selector*=edit-header],
		[dir="ltr"] .view-content .views-form [data-drupal-selector*=edit-header] {
		left: 0;
		}

		[dir="rtl"] .block-system > .views-form [data-drupal-selector*=edit-header],
		[dir="rtl"] .view-content .views-form [data-drupal-selector*=edit-header] {
		right: 0;
		}

		.block-system > .views-form [data-drupal-selector*=edit-header] > .form-wrapper,
		.view-content .views-form [data-drupal-selector*=edit-header] > .form-wrapper {
		padding: var(--gin-spacing-m);
		}

		[dir="ltr"] .block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] > *,
		[dir="ltr"] .view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] > * {
		margin-right: var(--gin-spacing-xs);
		}

		[dir="rtl"] .block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] > *,
		[dir="rtl"] .view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] > * {
		margin-left: var(--gin-spacing-xs);
		}

		.block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-type--select,
		.block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-actions,
		.view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-type--select,
		.view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-actions {
		flex: 0 0 100%;
		max-width: 100%;
		}

		.block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-actions,
		.view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-actions {
		justify-content: flex-end;
		}

		.block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-type--checkbox,
		.view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-type--checkbox {
		align-self: center;
		}

		.block-system > .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]),
		.view-content .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]) {
		display: block;
		top: 2px;
		margin-top: var(--gin-spacing-xxs);
		line-height: 1.75;
		}

		[dir="ltr"] .block-system > .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]),
		[dir="ltr"] .view-content .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]) {
		float: left;
		margin-right: var(--gin-spacing-m);
		}

		[dir="rtl"] .block-system > .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]),
		[dir="rtl"] .view-content .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]) {
		float: right;
		margin-left: var(--gin-spacing-m);
		}

		.block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
		.view-content .views-form [data-drupal-selector*=edit-header].is-sticky {
		z-index: 4;
		animation: fadeInBottom 320ms 1 forwards;
		}

		.block-system > .views-form [data-drupal-selector*=edit-header],
		.block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo],
		.view-content .views-form [data-drupal-selector*=edit-header],
		.view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo] {
		border: 0 none;
		border-radius: var(--gin-border-m);
		background: rgba(var(--gin-color-sticky-rgb), .95);
		}

		@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
		.block-system > .views-form [data-drupal-selector*=edit-header],
		.block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo],
		.view-content .views-form [data-drupal-selector*=edit-header],
		.view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo] {
		opacity: .999; /* Fix Chrome issue with mask */
		background: rgba(var(--gin-color-sticky-rgb), .9);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		}

		.gin--dark-mode .block-system > .views-form [data-drupal-selector*=edit-header],
		.gin--dark-mode .block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo],
		.gin--dark-mode .view-content .views-form [data-drupal-selector*=edit-header],
		.gin--dark-mode .view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo] {
		background: rgba(27, 27, 29, .8);
		}
		}

		.block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
		.block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo=true],
		.view-content .views-form [data-drupal-selector*=edit-header].is-sticky,
		.view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo=true] {
		opacity: 1;
		position: sticky;
		bottom: var(--gin-spacing-xs);
		box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .03);
		}

		[dir="ltr"] .block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
		[dir="ltr"] .block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo=true],
		[dir="ltr"] .view-content .views-form [data-drupal-selector*=edit-header].is-sticky,
		[dir="ltr"] .view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo=true] {
		left: 0;
		}

		[dir="rtl"] .block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
		[dir="rtl"] .block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo=true],
		[dir="rtl"] .view-content .views-form [data-drupal-selector*=edit-header].is-sticky,
		[dir="rtl"] .view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo=true] {
		right: 0;
		}

		.block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo] .views-bulk-actions__item,
		.view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo] .views-bulk-actions__item {
		color: var(--gin-color-text);
		}

		.views-exposed-form.views-exposed-form {
		padding-top: var(--gin-spacing-xs);
		}
		@@ -2512,6 +2363,11 @@ a.button:active {
		mask-position: center center;
		}

		.dropbutton-widget,
		html.js .dropbutton-widget {
		background-color: transparent;
		}

		.dropbutton {
		border: 2px solid var(--gin-color-primary);
		border-radius: var(--gin-border-m);
		@@ -2776,10 +2632,6 @@ html.js .dropbutton-wrapper:not(.open) .dropbutton__items .dropbutton__item:firs
		display: block;
		}

		html.js .dropbutton-widget {
		background-color: transparent;
		}

		html[dir="ltr"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
		margin-right: 0;
		}

dist/css/components/tableselect.css

0 → 100644

+149 −0

Original line number	Diff line number	Diff line
		.block-system > .views-form .claro-details,
		.view-content .views-form .claro-details {
		box-shadow: none;
		}

		.block-system > .views-form form,
		.view-content .views-form form {
		display: flex;
		flex-direction: column;
		}

		.block-system > .views-form .views-table,
		.view-content .views-form .views-table {
		order: -1;
		margin-top: 0;
		}

		.block-system > .views-form [data-drupal-selector*=edit-header],
		.view-content .views-form [data-drupal-selector*=edit-header] {
		order: 99;
		position: relative;
		}

		[dir="ltr"] .block-system > .views-form [data-drupal-selector*=edit-header],
		[dir="ltr"] .view-content .views-form [data-drupal-selector*=edit-header] {
		left: 0;
		}

		[dir="rtl"] .block-system > .views-form [data-drupal-selector*=edit-header],
		[dir="rtl"] .view-content .views-form [data-drupal-selector*=edit-header] {
		right: 0;
		}

		.block-system > .views-form [data-drupal-selector*=edit-header] > .form-wrapper,
		.view-content .views-form [data-drupal-selector*=edit-header] > .form-wrapper {
		padding: var(--gin-spacing-m);
		}

		[dir="ltr"] .block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] > *,
		[dir="ltr"] .view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] > * {
		margin-right: var(--gin-spacing-xs);
		}

		[dir="rtl"] .block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] > *,
		[dir="rtl"] .view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] > * {
		margin-left: var(--gin-spacing-xs);
		}

		.block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-type--select,
		.block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-actions,
		.view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-type--select,
		.view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-actions {
		flex: 0 0 100%;
		max-width: 100%;
		}

		.block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-actions,
		.view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-actions {
		justify-content: flex-end;
		}

		.block-system > .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-type--checkbox,
		.view-content .views-form [data-drupal-selector=edit-header] [data-drupal-selector=edit-views-bulk-operations-bulk-form] .form-type--checkbox {
		align-self: center;
		}

		.block-system > .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]),
		.view-content .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]) {
		display: block;
		top: 2px;
		margin-top: var(--gin-spacing-xxs);
		line-height: 1.75;
		}

		[dir="ltr"] .block-system > .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]),
		[dir="ltr"] .view-content .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]) {
		float: left;
		margin-right: var(--gin-spacing-m);
		}

		[dir="rtl"] .block-system > .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]),
		[dir="rtl"] .view-content .views-form [data-drupal-selector*=edit-header] .form-item__label:not([for=edit-select-all]) {
		float: right;
		margin-left: var(--gin-spacing-m);
		}

		.block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
		.view-content .views-form [data-drupal-selector*=edit-header].is-sticky {
		z-index: 4;
		animation: fadeInBottom 320ms 1 forwards;
		}

		.block-system > .views-form [data-drupal-selector*=edit-header],
		.block-system > .views-form .views-bulk-actions,
		.view-content .views-form [data-drupal-selector*=edit-header],
		.view-content .views-form .views-bulk-actions {
		border: 0 none;
		border-radius: var(--gin-border-m);
		background: rgba(var(--gin-color-sticky-rgb), .95);
		}

		@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
		.block-system > .views-form [data-drupal-selector*=edit-header],
		.block-system > .views-form .views-bulk-actions,
		.view-content .views-form [data-drupal-selector*=edit-header],
		.view-content .views-form .views-bulk-actions {
		opacity: .999; /* Fix Chrome issue with mask */
		background: rgba(var(--gin-color-sticky-rgb), .9);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		}

		.gin--dark-mode .block-system > .views-form [data-drupal-selector*=edit-header],
		.gin--dark-mode .block-system > .views-form .views-bulk-actions,
		.gin--dark-mode .view-content .views-form [data-drupal-selector*=edit-header],
		.gin--dark-mode .view-content .views-form .views-bulk-actions {
		background: rgba(27, 27, 29, .8);
		}
		}

		.block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
		.block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo=true],
		.view-content .views-form [data-drupal-selector*=edit-header].is-sticky,
		.view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo=true] {
		opacity: 1;
		position: sticky;
		bottom: var(--gin-spacing-xs);
		box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .03);
		}

		[dir="ltr"] .block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
		[dir="ltr"] .block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo=true],
		[dir="ltr"] .view-content .views-form [data-drupal-selector*=edit-header].is-sticky,
		[dir="ltr"] .view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo=true] {
		left: 0;
		}

		[dir="rtl"] .block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
		[dir="rtl"] .block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo=true],
		[dir="rtl"] .view-content .views-form [data-drupal-selector*=edit-header].is-sticky,
		[dir="rtl"] .view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo=true] {
		right: 0;
		}

		.block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo] .views-bulk-actions__item,
		.view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo] .views-bulk-actions__item {
		color: var(--gin-color-text);
		}

dist/css/components/toolbar.css

+19 −2

Original line number	Diff line number	Diff line
		@@ -7,14 +7,14 @@ body.gin--classic-toolbar {
		[dir="ltr"] body.gin--vertical-toolbar,
		[dir="ltr"] body.gin--horizontal-toolbar,
		[dir="ltr"] body.gin--classic-toolbar {
		padding-left: var(--gin-toolbar-x-offset, 256px);
		padding-left: var(--gin-toolbar-x-offset, 256px) !important;
		margin-left: 0;
		}

		[dir="rtl"] body.gin--vertical-toolbar,
		[dir="rtl"] body.gin--horizontal-toolbar,
		[dir="rtl"] body.gin--classic-toolbar {
		padding-right: var(--gin-toolbar-x-offset, 256px);
		padding-right: var(--gin-toolbar-x-offset, 256px) !important;
		margin-right: 0;
		}

		@@ -867,3 +867,20 @@ body.gin--classic-toolbar {
		width: 100%;
		}

		.toolbar-loading #toolbar-item-administration-tray {
		background-color: transparent;
		}

		[dir="ltr"] .toolbar-loading #toolbar-item-administration-tray {
		border-right: 0;
		}

		[dir="rtl"] .toolbar-loading #toolbar-item-administration-tray {
		border-left: 0;
		}

		.toolbar-loading #toolbar-item-administration-tray .menu-item + .menu-item {
		border-left: 0;
		border-right: 0;
		}

dist/css/layout/classic_toolbar.css

+11 −4

Original line number	Diff line number	Diff line
		@@ -183,10 +183,6 @@
		}
		}

		#toolbar-item-administration-tray {
		box-shadow: 0 0 4px rgba(0, 0, 0, .1);
		}

		@media (min-width: 64em) {
		#toolbar-item-administration-tray .toolbar-logo img {
		max-height: 21px;
		@@ -233,3 +229,14 @@
		padding-right: var(--gin-spacing-xl);
		}

		#toolbar-item-administration-tray,
		.toolbar-loading #toolbar-item-administration-tray {
		border-bottom: 1px solid var(--gin-border-color);
		box-shadow: 0 0 4px rgba(0, 0, 0, .1);
		}

		#toolbar-item-administration-tray .toolbar-lining,
		.toolbar-loading #toolbar-item-administration-tray .toolbar-lining {
		background-color: var(--gin-bg-layer);
		}

dist/css/layout/horizontal_toolbar.css

+10 −8

Original line number	Diff line number	Diff line
		@@ -169,14 +169,6 @@
		}
		}

		#toolbar-item-administration-tray {
		box-shadow: 0 0 4px rgba(0, 0, 0, .1), 0 2px 6px 2px rgba(0, 0, 0, .03);
		}

		.gin--dark-mode #toolbar-item-administration-tray {
		box-shadow: 0 0 4px rgba(0, 0, 0, .3);
		}

		#toolbar-item-administration-tray .toolbar-logo {
		display: flex;
		height: 100%;
		@@ -321,3 +313,13 @@
		background: var(--gin-color-primary-light);
		}

		#toolbar-item-administration-tray,
		.toolbar-loading #toolbar-item-administration-tray {
		box-shadow: 0 0 4px rgba(0, 0, 0, .1), 0 2px 6px 2px rgba(0, 0, 0, .03);
		}

		.gin--dark-mode #toolbar-item-administration-tray,
		.gin--dark-mode .toolbar-loading #toolbar-item-administration-tray {
		box-shadow: 0 0 4px rgba(0, 0, 0, .3);
		}