Issue #3375729 by Harish1688, Mukeysh, djsagar, saschaeggi: The autocomplete... (0f4f88ae) · Commits · project / gin

dist/css/base/gin.css

+9 −4

Original line number	Diff line number	Diff line
		@@ -1488,18 +1488,19 @@ td.webform-has-field-suffix > .form-item > .form-element {
		border-bottom: 0;
		}

		.field-multiple-table thead .label {
		.field-multiple-table thead .field-label .label,
		.field-multiple-table thead .form-item__label--multiple-value-form {
		display: inline-block;
		font-size: var(--gin-font-size-l);
		font-weight: var(--gin-font-weight-bold);
		letter-spacing: -0.025em;
		line-height: 1.33333em;
		color: var(--gin-color-primary-active);
		padding: 0;
		margin: var(--gin-spacing-xs) 0;
		padding: var(--gin-spacing-xs) 0;
		margin: 0;
		}

		.field-multiple-table tr .form-item {
		.field-multiple-table tr .form-item:not(:last-of-type) {
		margin-bottom: var(--gin-spacing-m);
		}

		@@ -1507,6 +1508,10 @@ td.webform-has-field-suffix > .form-item > .form-element {
		margin-top: 0;
		}

		table td.field-plugin-summary-cell {
		vertical-align: middle;
		}

		.draggable a.tabledrag-handle {
		float: none;
		vertical-align: middle;

dist/css/components/ajax.css

+10 −10

Original line number	Diff line number	Diff line
		@keyframes gin-throbber {
		0% {
		transform: rotateZ(0);
		}

		100% {
		transform: rotateZ(360deg);
		}
		}

		.ajax-progress__throbber, .ajax-progress__throbber--fullscreen,
		.ui-dialog .ajax-progress__throbber,
		.media-library-item .ajax-progress__throbber {
		@@ -115,16 +125,6 @@
		right: .25em;
		}

		@keyframes gin-throbber {
		0% {
		transform: rotateZ(0);
		}

		100% {
		transform: rotateZ(360deg);
		}
		}

		.claro-autocomplete__message {
		color: var(--gin-color-primary);
		}

dist/css/components/autocomplete.css

+45 −0

Original line number	Diff line number	Diff line
		@@ -39,6 +39,51 @@ a.ui-button:active,
		border: 1px solid var(--gin-border-color);
		}

		.js .form-autocomplete {
		transition: var(--gin-transition), background-position none;
		}

		.js .form-autocomplete.is-autocompleting,
		.js input.form-autocomplete.ui-autocomplete-loading,
		div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open {
		background-image: none;
		}

		.form-autocomplete.is-autocompleting + .claro-autocomplete__message,
		div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open {
		display: block;
		}

		.form-autocomplete.is-autocompleting + .claro-autocomplete__message::after,
		div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open::after {
		content: "";
		position: absolute;
		top: 35px;
		display: block;
		border: 2px solid var(--gin-bg-input);
		border-radius: 50%;
		border-top: 2px solid var(--gin-color-primary);
		width: 14px;
		height: 14px;
		animation: gin-throbber 1s linear infinite;
		}

		[dir="ltr"] .form-autocomplete.is-autocompleting + .claro-autocomplete__message::after,
		[dir="ltr"] div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open::after {
		right: 12px;
		text-align: right;
		}

		[dir="rtl"] .form-autocomplete.is-autocompleting + .claro-autocomplete__message::after,
		[dir="rtl"] div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open::after {
		left: 12px;
		text-align: left;
		}

		div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open::after {
		top: 2px;
		}

		div.autocomplete-deluxe-multiple {
		color: var(--gin-color-text);
		background: var(--gin-bg-input);

styles/base/_table.scss

+9 −4

Original line number	Diff line number	Diff line
		@@ -223,19 +223,20 @@ td.webform-has-field-suffix > .form-item > .form-element {
		border-bottom: 0;
		}

		.label {
		.field-label .label,
		.form-item__label--multiple-value-form {
		display: inline-block;
		font-size: var(--gin-font-size-l);
		font-weight: var(--gin-font-weight-bold);
		letter-spacing: -0.025em;
		line-height: 1.33333em;
		color: var(--gin-color-primary-active);
		padding: 0;
		margin: var(--gin-spacing-xs) 0;
		padding: var(--gin-spacing-xs) 0;
		margin: 0;
		}
		}

		tr .form-item {
		tr .form-item:not(:last-of-type) {
		margin-bottom: var(--gin-spacing-m);
		}
		}
		@@ -243,3 +244,7 @@ td.webform-has-field-suffix > .form-item > .form-element {
		.gin-layer-wrapper .views-table {
		margin-top: 0;
		}

		table td.field-plugin-summary-cell {
		vertical-align: middle;
		}

styles/components/ajax.scss

+9 −9

Original line number	Diff line number	Diff line
		@keyframes gin-throbber {
		0% {
		transform: rotateZ(0);
		}
		100% {
		transform: rotateZ(360deg);
		}
		}

		// Normal Throbber
		.ajax-progress {
		&__throbber {
		@@ -97,15 +106,6 @@
		}
		}

		@keyframes gin-throbber {
		0% {
		transform: rotateZ(0);
		}
		100% {
		transform: rotateZ(360deg);
		}
		}

		.claro-autocomplete__message {
		color: var(--gin-color-primary);
		}