gin-focus.pcss.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-focus.pcss.css
@import "media-queries.pcss.css";

.page-wrapper *:focus,
.ui-dialog *:focus,
.dropbutton .dropbutton__item > *:focus,
.dropbutton .dropbutton__item > *:focus:hover,
.dropbutton__items > .dropbutton__item:first-of-type > *:focus,
.dropbutton__items > .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus,
.dropbutton__items > .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus:hover,
.form-boolean:focus:active,
.form-boolean:focus:hover,
.cke.cke_chrome.cke_focus,
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a:focus,
.form-element:focus,
.form-element:hover:focus,
.form-element.error:hover:focus,
.form-actions .action-link:focus,
.paragraphs-tabs-wrapper .field-multiple-table .draggable.drag,
.layout-paragraphs-field .layout-paragraphs-actions input.layout-paragraphs-edit:focus,
.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,
.toolbar-box .toolbar-handle:focus,
.field-option:has(.field-option-radio:checked),
.field-option:focus-within,
.subfield-option:has(.field-option-radio:checked),
.subfield-option:focus-within,
#edit-submit.form-submit:focus,
.toolbar-dropdown__menu .toolbar-dropdown__link:focus {
  outline: none;
  box-shadow:
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus);
}

.admin-item__link:focus {
  border-radius: calc(var(--gin-border-xs) / 2);
}

.gin-details:focus,
.gin-details:focus:hover,
.gin-details__summary:focus,
.gin-details__summary:focus:hover {
  box-shadow: none;
}

.gin-details__summary {
  &::after {
    box-shadow:
      inset 0 0 0 1px var(--gin-color-focus-border),
      inset 0 0 0 4px var(--gin-color-focus);
  }
}

.tabs__link:focus {
  border: 1px solid transparent;
  box-shadow:
    inset 0 0 0 1px var(--gin-color-focus-border),
    inset 0 0 0 4px var(--gin-color-focus);
}

.vertical-tabs__menu-link:focus::after,
.tabs__trigger:focus {
  border: var(--gin-border-xs) solid var(--gin-color-focus);
  box-shadow: none;
}

@media (--admin-small) {
  .is-horizontal .tabs__link:focus,
  .is-horizontal .tabs--primary .tabs__link:focus {
    box-shadow:
      0 0 0 1px var(--gin-color-focus-border),
      0 0 0 4px var(--gin-color-focus);
  }
}

.vertical-tabs__menu-link:focus,
.vertical-tabs__menu-item:focus {
  outline: 0;
  box-shadow: none;
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-focus.pcss.css

View source 
  1. @import "media-queries.pcss.css";

  2. 

  3. .page-wrapper *:focus,

  4. .ui-dialog *:focus,

  5. .dropbutton .dropbutton__item > *:focus,

  6. .dropbutton .dropbutton__item > *:focus:hover,

  7. .dropbutton__items > .dropbutton__item:first-of-type > *:focus,

  8. .dropbutton__items > .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus,

  9. .dropbutton__items > .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus:hover,

  10. .form-boolean:focus:active,

  11. .form-boolean:focus:hover,

  12. .cke.cke_chrome.cke_focus,

  13. .horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a:focus,

  14. .form-element:focus,

  15. .form-element:hover:focus,

  16. .form-element.error:hover:focus,

  17. .form-actions .action-link:focus,

  18. .paragraphs-tabs-wrapper .field-multiple-table .draggable.drag,

  19. .layout-paragraphs-field .layout-paragraphs-actions input.layout-paragraphs-edit:focus,

  20. .layout-paragraphs-field .layout-paragraphs-actions input.layout-paragraphs-remove:focus,

  21. .ck .ck.ck-button:active,

  22. .ck .ck.ck-button:focus,

  23. .ck .ck.ck-button:active:focus,

  24. .toolbar-box .toolbar-handle:focus,

  25. .field-option:has(.field-option-radio:checked),

  26. .field-option:focus-within,

  27. .subfield-option:has(.field-option-radio:checked),

  28. .subfield-option:focus-within,

  29. #edit-submit.form-submit:focus,

  30. .toolbar-dropdown__menu .toolbar-dropdown__link:focus {

  31.   outline: none;

  32.   box-shadow:

  33.     0 0 0 1px var(--gin-color-focus-border),

  34.     0 0 0 4px var(--gin-color-focus);

  35. }

  36. 

  37. .admin-item__link:focus {

  38.   border-radius: calc(var(--gin-border-xs) / 2);

  39. }

  40. 

  41. .gin-details:focus,

  42. .gin-details:focus:hover,

  43. .gin-details__summary:focus,

  44. .gin-details__summary:focus:hover {

  45.   box-shadow: none;

  46. }

  47. 

  48. .gin-details__summary {

  49.   &::after {

  50.     box-shadow:

  51.       inset 0 0 0 1px var(--gin-color-focus-border),

  52.       inset 0 0 0 4px var(--gin-color-focus);

  53.   }

  54. }

  55. 

  56. .tabs__link:focus {

  57.   border: 1px solid transparent;

  58.   box-shadow:

  59.     inset 0 0 0 1px var(--gin-color-focus-border),

  60.     inset 0 0 0 4px var(--gin-color-focus);

  61. }

  62. 

  63. .vertical-tabs__menu-link:focus::after,

  64. .tabs__trigger:focus {

  65.   border: var(--gin-border-xs) solid var(--gin-color-focus);

  66.   box-shadow: none;

  67. }

  68. 

  69. @media (--admin-small) {

  70.   .is-horizontal .tabs__link:focus,

  71.   .is-horizontal .tabs--primary .tabs__link:focus {

  72.     box-shadow:

  73.       0 0 0 1px var(--gin-color-focus-border),

  74.       0 0 0 4px var(--gin-color-focus);

  75.   }

  76. }

  77. 

  78. .vertical-tabs__menu-link:focus,

  79. .vertical-tabs__menu-item:focus {

  80.   outline: 0;

  81.   box-shadow: none;

  82. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.