form--select.pcss.css
Same filename in this branch
Same filename and directory in other branches
- 10 core/themes/claro/css/components/form--select.pcss.css
- 11.x core/themes/claro/css/components/form--select.pcss.css
- 9 core/themes/claro/css/components/form--select.pcss.css
- 8.9.x core/themes/claro/css/components/form--select.pcss.css
- 11.x core/themes/admin/css/components/form--select.pcss.css
- 11.x core/themes/default_admin/css/components/form--select.pcss.css
Select input elements.
File
-
core/
themes/ default_admin/ css/ components/ form--select.pcss.css
View source
- /**
- * @file
- * Select input elements.
- */
-
- .form-element--type-select {
- padding-inline-end: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);
- background-image: url(../../images/icons/545560/chevron-down.svg);
- background-repeat: no-repeat;
- background-position: 100% 50%;
- background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
-
- /**
- * Select states.
- */
- &:focus {
- background-image: url(../../images/icons/003ecc/chevron-down.svg);
- }
- &[disabled] {
- background-image: url(../../images/icons/8e929c/chevron-down.svg);
- }
-
- &:dir(rtl) {
- background-position: 0 50%;
- }
-
- .gin--dark-mode
-
- .no-touchevents
- }
- }
-
- @media (forced-colors: active) {
- .form-element--type-select,
- .form-element--type-select:focus,
- .form-element--type-select[disabled] {
- padding-inline-end: var(--input-padding-horizontal);
- background-image: none;
- appearance: revert; /* Revert appearance value for modern browsers. */
- }
- }
-
- .form-element--type-select--small {
- min-height: 2.25rem;
- background-position: 100% 52%;
- font-size: var(--gin-font-size-xs);
- line-height: 1.4;
- padding-block: 0.474rem;
- /* 0.79rem * 1.2 / 2 */
-
- &:dir(rtl) {
- background-position: 0% 52%;
- }
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.