You are here

Home » API reference » Drupal 10

shortcut.pcss.css in Drupal 10

Same filename and directory in other branches
  1. 8 core/themes/claro/css/components/shortcut.pcss.css
  2. 9 core/themes/claro/css/components/shortcut.pcss.css

Styling for the shortcut module.

File

core/themes/claro/css/components/shortcut.pcss.css
View source 
  1. /**

  2.  * @file

  3.  * Styling for the shortcut module.

  4.  */

  5. 

  6. :root {

  7.   /**

  8.   * Shortcut action.

  9.   */

  10.   --shortcut-bg-color: var(--color-gray-800);

  11.   --shortcut-border-radius-size: var(--base-border-radius);

  12.   --shortcut-padding-size: calc(0.5 * var(--space-xs)) var(--space-m);

  13.   --shortcut-icon-size: var(--space-l);

  14. }

  15. 

  16. /**

  17.  * Add/remove links.

  18.  */

  19. .shortcut-action {

  20.   display: inline-block;

  21.   margin-left: var(--space-xs); /* LTR */

  22. }

  23. [dir="rtl"] .shortcut-action {

  24.   margin-right: var(--space-xs);

  25. }

  26. .shortcut-action__message {

  27.   display: inline-block;

  28.   margin-left: var(--space-s); /* LTR */

  29.   padding: var(--shortcut-padding-size);

  30.   transition: var(--transition);

  31.   transform: translateY(calc(-1 * var(--space-xs)));

  32.   vertical-align: top;

  33.   opacity: 0;

  34.   color: var(--color-white);

  35.   border-radius: var(--shortcut-border-radius-size);

  36.   background: var(--shortcut-bg-color);

  37.   font-size: var(--font-size-label);

  38.   backface-visibility: hidden;

  39. }

  40. [dir="rtl"] .shortcut-action__message {

  41.   margin-right: var(--space-s);

  42.   margin-left: 0;

  43. }

  44. .shortcut-action:hover .shortcut-action__message,

  45. .shortcut-action:focus .shortcut-action__message {

  46.   transform: translateY(0);

  47.   opacity: 1;

  48. }

  49. 

  50. .shortcut-action__icon {

  51.   display: inline-block;

  52.   width: var(--shortcut-icon-size);

  53.   height: var(--shortcut-icon-size);

  54.   vertical-align: -0.0625rem;

  55.   background: transparent url(../../images/shortcut/favstar.svg) left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;

  56. }

  57. [dir="rtl"] .shortcut-action__icon {

  58.   background-image: url(../../images/shortcut/favstar-rtl.svg);

  59. }

  60. .shortcut-action--add:hover .shortcut-action__icon,

  61. .shortcut-action--add:focus .shortcut-action__icon {

  62.   background-position: calc(-1 * var(--shortcut-icon-size)) top;

  63. }

  64. .shortcut-action--remove .shortcut-action__icon {

  65.   background-position: calc(-2 * var(--shortcut-icon-size)) top;

  66. }

  67. .shortcut-action--remove:focus .shortcut-action__icon,

  68. .shortcut-action--remove:hover .shortcut-action__icon {

  69.   background-position: calc(-3 * var(--shortcut-icon-size)) top;

  70. }