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-inline-start: var(--space-xs);

  22. 

  23.   &:hover .shortcut-action__message,

  24.   &:focus .shortcut-action__message {

  25.     transform: translateY(0);

  26.     opacity: 1;

  27.   }

  28. }

  29. .shortcut-action__message {

  30.   display: inline-block;

  31.   margin-inline-start: var(--space-s);

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

  33.   transition: var(--transition);

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

  35.   vertical-align: top;

  36.   opacity: 0;

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

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

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

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

  41.   backface-visibility: hidden;

  42. }

  43. 

  44. .shortcut-action__icon {

  45.   display: inline-block;

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

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

  48.   vertical-align: -0.0625rem;

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

  50. 

  51.   @nest .shortcut-action--add:hover &, .shortcut-action--add:focus 
  52. 

  53.   @nest .shortcut-action--remove 
  54. 

  55.   @nest .shortcut-action--remove:focus &, .shortcut-action--remove:hover 
  56. 

  57.   @nest [dir="rtl"] 
  58. }