Issue #3374194: Dropbutton issues in forced colors mode (22f96554) · Commits · project / gin

dist/css/base/gin.css

+65 −14

Original line number	Diff line number	Diff line
		@@ -2474,6 +2474,12 @@ html.js .dropbutton-widget {
		white-space: nowrap;
		}

		@media (forced-colors: active) {
		.dropbutton__item:first-of-type > *, .dropbutton__toggle {
		border-width: 0 !important;
		}
		}

		.dropbutton__item:first-of-type > * {
		padding: calc(.875rem - 1px) calc(var(--gin-spacing-l) - 1px);
		}
		@@ -2496,6 +2502,7 @@ html.js .dropbutton-widget {
		background-color: var(--gin-color-primary);
		}

		@media not (forced-colors: active) {
		.dropbutton__toggle::before {
		background-image: none;
		background-color: var(--gin-color-primary);
		@@ -2512,6 +2519,7 @@ html.js .dropbutton-widget {
		.dropbutton__toggle:hover::before, .dropbutton__toggle:active::before, .dropbutton__toggle:focus::before {
		background-color: var(--gin-color-button-text);
		}
		}

		.dropbutton .dropbutton__items {
		position: absolute;
		@@ -2542,6 +2550,12 @@ html.js .dropbutton-widget {
		left: auto;
		}

		@media (forced-colors: active) {
		.dropbutton .dropbutton__items {
		border: 1px solid linktext;
		}
		}

		.dropbutton > .dropbutton__items > .dropbutton__item:first-of-type > a,
		.dropbutton > .dropbutton__items > .dropbutton__item:first-of-type > input,
		.dropbutton > .dropbutton__items > .dropbutton__item:first-of-type > .button {
		@@ -2637,6 +2651,43 @@ html.js .dropbutton-widget {
		border-radius: var(--gin-border-s);
		}

		@media (forced-colors: active) {
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > a:hover, .dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > a:active, .dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > a:focus,
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > input:hover,
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > input:active,
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > input:focus,
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > .button:hover,
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > .button:active,
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > .button:focus, .dropbutton .dropbutton__items > .dropbutton__item > a:hover, .dropbutton .dropbutton__items > .dropbutton__item > a:active, .dropbutton .dropbutton__items > .dropbutton__item > a:focus,
		.dropbutton .dropbutton__items > .dropbutton__item > input:hover,
		.dropbutton .dropbutton__items > .dropbutton__item > input:active,
		.dropbutton .dropbutton__items > .dropbutton__item > input:focus,
		.dropbutton .dropbutton__items > .dropbutton__item > .button:hover,
		.dropbutton .dropbutton__items > .dropbutton__item > .button:active,
		.dropbutton .dropbutton__items > .dropbutton__item > .button:focus, .dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > a:hover, .dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > a:active, .dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > a:focus,
		.dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > input:hover,
		.dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > input:active,
		.dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > input:focus,
		.dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > .button:hover,
		.dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > .button:active,
		.dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > .button:focus {
		outline: 2px solid transparent;
		outline-offset: -2px;
		}
		}

		@media (forced-colors: active) {
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > a:focus,
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > input:focus,
		.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item > .button:focus, .dropbutton .dropbutton__items > .dropbutton__item > a:focus,
		.dropbutton .dropbutton__items > .dropbutton__item > input:focus,
		.dropbutton .dropbutton__items > .dropbutton__item > .button:focus, .dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > a:focus,
		.dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > input:focus,
		.dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item > .button:focus {
		outline-style: dotted;
		}
		}

		.dropbutton > .dropbutton__item:first-of-type > a:hover, .dropbutton > .dropbutton__item:first-of-type > a:active, .dropbutton > .dropbutton__item:first-of-type > a:focus,
		.dropbutton > .dropbutton__item:first-of-type > input:hover,
		.dropbutton > .dropbutton__item:first-of-type > input:active,

styles/base/_dropbutton.scss

+33 −12

Original line number	Diff line number	Diff line
		@@ -43,6 +43,10 @@ html.js .dropbutton-widget {
		&__toggle {
		background: none;
		white-space: nowrap;

		@media (forced-colors: active) {
		border-width: 0 !important;
		}
		}

		&__item:first-of-type > * {
		@@ -59,6 +63,7 @@ html.js .dropbutton-widget {
		background-color: var(--gin-color-primary);
		}

		@media not (forced-colors: active) {
		&::before {
		background-image: none;
		background-color: var(--gin-color-primary);
		@@ -74,6 +79,7 @@ html.js .dropbutton-widget {
		background-color: var(--gin-color-button-text);
		}
		}
		}

		& &__items {
		position: absolute;
		@@ -90,6 +96,10 @@ html.js .dropbutton-widget {
		left: 0;
		right: auto;
		}

		@media (forced-colors: active) {
		border: 1px solid linktext;
		}
		}

		& > &__items > .dropbutton__item:first-of-type {
		@@ -142,6 +152,17 @@ html.js .dropbutton-widget {
		color: var(--gin-color-button-text);
		background: var(--gin-color-primary);
		border-radius: var(--gin-border-s);

		@media (forced-colors: active) {
		outline: 2px solid transparent;
		outline-offset: -2px;
		}
		}

		&:focus {
		@media (forced-colors: active) {
		outline-style: dotted;
		}
		}
		}
		}