action-link.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/action-link.pcss.css
  2. 8.9.x core/themes/claro/css/components/action-link.pcss.css
  3. 10 core/themes/claro/css/components/action-link.pcss.css

Styles for action links.

Contains Action link component and the action-links layout styles.

File

core/themes/claro/css/components/action-link.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Styles for action links.

  4.  *

  5.  * Contains Action link component and the action-links layout styles.

  6.  */

  7. 

  8. /**

  9.  * Action links layout.

  10.  */

  11. .action-links {

  12.   margin: var(--space-l) 0;

  13.   list-style: none;

  14. }

  15. 

  16. .action-links__item {

  17.   display: inline-block;

  18. 

  19.   & + .action-links__item {

  20.     & > .action-link {

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

  22.     }

  23. 

  24.     & > .action-link--small {

  25.       margin-inline-start: var(--space-xs);

  26.     }

  27.   }

  28. }

  29. 

  30. /**

  31.  * The action link component.

  32.  */

  33. .action-link {

  34.   display: inline-block;

  35.   padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);

  36.   cursor: pointer;

  37.   text-decoration: none;

  38.   color: var(--color-gray-800);

  39.   border-radius: var(--button-border-radius-size);

  40.   background-color: var(--color-bg);

  41.   font-size: var(--font-size-base);

  42.   font-weight: 700;

  43.   line-height: var(--space-l);

  44.   /* Bigger line-height needed to prevent the icon from increasing the height */

  45.   -webkit-font-smoothing: antialiased;

  46. 

  47.   /* Action link states */

  48.   &:hover {

  49.     text-decoration: none;

  50.     color: var(--color-absolutezero-hover);

  51.     background-color: var(--color-bgblue-hover);

  52.   }

  53. 

  54.   &:focus {

  55.     position: relative;

  56.     z-index: 1;

  57.     text-decoration: none;

  58.   }

  59. 

  60.   &:active {

  61.     color: var(--color-absolutezero-active);

  62.     background-color: var(--color-bgblue-active);

  63.   }

  64. 

  65.   /**

  66.   * Action link icons with states.

  67.   *

  68.   * We use parent-relative units here to follow the .action-link's font size.

  69.   */

  70. 

  71.   /* Defaults for icons */

  72.   &::before {

  73.     position: relative;

  74.     inset-block-start: 0.125rem;

  75.     /* Set the proper vertical alignment */

  76.     display: inline-block;

  77.     width: 1em;

  78.     height: 1em;

  79.     margin-inline: calc(var(--space-s) - var(--space-m)) 0.5em;

  80.     background-repeat: no-repeat;

  81.     background-position: center;

  82.     background-size: contain;

  83.   }

  84. 

  85.   & + .action-link {

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

  87.   }

  88. 

  89.   /**

  90.   * Action links inside form-actions.

  91.   *

  92.   * Add the same margin for action-link inside form-actions as button has.

  93.   */

  94.   .form-actions &,

  95.   .field-actions 
  96. }

  97. 

  98. .no-touchevents {

  99.   /* Small variant. */

  100.   & .action-link--small {

  101.     padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);

  102.     font-size: var(--font-size-s);

  103.   }

  104. 

  105.   /* Extra small variant. */

  106.   & .action-link--extrasmall {

  107.     padding: 0 var(--space-xs);

  108.     font-size: var(--font-size-s);

  109.   }

  110. 

  111.   & .action-link--small + .action-link--small,

  112.   & .action-link--extrasmall + .action-link--extrasmall {

  113.     margin-inline-start: var(--space-xs);

  114.   }

  115. }

  116. 

  117. /**

  118.  * Action link variants.

  119.  */

  120. /* Danger. */

  121. .action-link--danger {

  122.   color: var(--color-maximumred);

  123. 

  124.   &:hover {

  125.     color: var(--color-maximumred-hover);

  126.     background-color: var(--color-bgred-hover);

  127.   }

  128. 

  129.   &:active {

  130.     color: var(--color-maximumred-active);

  131.     background-color: var(--color-bgred-active);

  132.   }

  133. }

  134. 

  135. .no-touchevents .action-link--small::before,

  136. .no-touchevents .action-link--extrasmall::before {

  137.   inset-block-start: 0.0625rem;

  138.   /* Set the proper vertical alignment */

  139.   width: var(--space-s);

  140.   height: var(--space-s);

  141.   margin-inline: -0.125rem 0.4em;

  142. }

  143. 

  144. .action-link--icon-plus {

  145.   /* Plus */

  146.   &::before {

  147.     content: "";

  148.     background-image: url(../../images/icons/545560/plus.svg);

  149. 

  150.     @media (forced-colors: active) {

  151.       background: linktext !important;

  152.       mask-repeat: no-repeat;

  153.       mask-image: url(../../images/icons/d72222/plus.svg);

  154.     }

  155.   }

  156. 

  157.   &:hover::before {

  158.     background-image: url(../../images/icons/0036b1/plus.svg);

  159.   }

  160. 

  161.   &:active::before {

  162.     background-image: url(../../images/icons/002e9a/plus.svg);

  163.   }

  164. 

  165.   &.action-link--danger {

  166.     /* Plus — danger */

  167.     &::before {

  168.       background-image: url(../../images/icons/d72222/plus.svg);

  169.     }

  170. 

  171.     &:hover::before {

  172.       background-image: url(../../images/icons/c11f1f/plus.svg);

  173.     }

  174. 

  175.     &:active::before {

  176.       background-image: url(../../images/icons/ab1b1b/plus.svg);

  177.     }

  178.   }

  179. }

  180. 

  181. .action-link--icon-trash {

  182.   /* Trash */

  183.   &::before {

  184.     content: "";

  185.     background-image: url(../../images/icons/545560/trash.svg);

  186. 

  187.     @media (forced-colors: active) {

  188.       background: linktext !important;

  189.       mask-repeat: no-repeat;

  190.       mask-image: url(../../images/icons/d72222/trash.svg);

  191.     }

  192.   }

  193. 

  194.   &:hover::before {

  195.     background-image: url(../../images/icons/0036b1/trash.svg);

  196.   }

  197. 

  198.   &:active::before {

  199.     background-image: url(../../images/icons/002e9a/trash.svg);

  200.   }

  201. 

  202.   &.action-link--danger {

  203.     /* Trash — danger */

  204.     &::before {

  205.       background-image: url(../../images/icons/d72222/trash.svg);

  206.     }

  207. 

  208.     &:hover::before {

  209.       background-image: url(../../images/icons/c11f1f/trash.svg);

  210.     }

  211. 

  212.     &:active::before {

  213.       background-image: url(../../images/icons/ab1b1b/trash.svg);

  214.     }

  215.   }

  216. }

  217. 

  218. .action-link--icon-ex {

  219.   /* Ex */

  220.   &::before {

  221.     content: "";

  222.     background-image: url(../../images/icons/545560/ex.svg);

  223. 

  224.     @media (forced-colors: active) {

  225.       background: linktext !important;

  226.       mask-repeat: no-repeat;

  227.       mask-image: url(../../images/icons/d72222/ex.svg);

  228.     }

  229.   }

  230. 

  231.   &:hover::before {

  232.     background-image: url(../../images/icons/0036b1/ex.svg);

  233.   }

  234. 

  235.   &:active::before {

  236.     background-image: url(../../images/icons/002e9a/ex.svg);

  237.   }

  238. 

  239.   &.action-link--danger {

  240.     /* Ex — danger */

  241.     &::before {

  242.       background-image: url(../../images/icons/d72222/ex.svg);

  243.     }

  244. 

  245.     &:hover::before {

  246.       background-image: url(../../images/icons/c11f1f/ex.svg);

  247.     }

  248. 

  249.     &:active::before {

  250.       background-image: url(../../images/icons/ab1b1b/ex.svg);

  251.     }

  252.   }

  253. }

  254. 

  255. .action-link--icon-checkmark {

  256.   /* Checkmark */

  257.   &::before {

  258.     content: "";

  259.     background-image: url(../../images/icons/545560/checkmark.svg);

  260. 

  261.     @media (forced-colors: active) {

  262.       background: linktext !important;

  263.       mask-repeat: no-repeat;

  264.       mask-image: url(../../images/icons/d72222/checkmark.svg);

  265.     }

  266.   }

  267. 

  268.   &:hover::before {

  269.     background-image: url(../../images/icons/0036b1/checkmark.svg);

  270.   }

  271. 

  272.   &:active::before {

  273.     background-image: url(../../images/icons/002e9a/checkmark.svg);

  274.   }

  275. 

  276.   &.action-link--danger {

  277.     /* Checkmark — danger */

  278.     &::before {

  279.       background-image: url(../../images/icons/d72222/checkmark.svg);

  280.     }

  281. 

  282.     &:hover::before {

  283.       background-image: url(../../images/icons/c11f1f/checkmark.svg);

  284.     }

  285. 

  286.     &:active::before {

  287.       background-image: url(../../images/icons/ab1b1b/checkmark.svg);

  288.     }

  289.   }

  290. }

  291. 

  292. .action-link--icon-cog {

  293.   /* Cog */

  294.   &::before {

  295.     content: "";

  296.     background-image: url(../../images/icons/545560/cog.svg);

  297. 

  298.     @media (forced-colors: active) {

  299.       background: linktext !important;

  300.       mask-repeat: no-repeat;

  301.       mask-image: url(../../images/icons/d72222/cog.svg);

  302.     }

  303.   }

  304. 

  305.   &:hover::before {

  306.     background-image: url(../../images/icons/0036b1/cog.svg);

  307.   }

  308. 

  309.   &:active::before {

  310.     background-image: url(../../images/icons/002e9a/cog.svg);

  311.   }

  312. 

  313.   &.action-link--danger {

  314.     /* Cog — danger */

  315.     &::before {

  316.       background-image: url(../../images/icons/d72222/cog.svg);

  317.     }

  318. 

  319.     &:hover::before {

  320.       background-image: url(../../images/icons/c11f1f/cog.svg);

  321.     }

  322. 

  323.     &:active::before {

  324.       background-image: url(../../images/icons/ab1b1b/cog.svg);

  325.     }

  326.   }

  327. }

  328. 

  329. .action-link--icon-show {

  330.   /* Show */

  331.   &::before {

  332.     content: "";

  333.     background-image: url(../../images/icons/545560/show.svg);

  334. 

  335.     @media (forced-colors: active) {

  336.       background: linktext !important;

  337.       mask-repeat: no-repeat;

  338.       mask-image: url(../../images/icons/d72222/show.svg);

  339.     }

  340.   }

  341. 

  342.   &:hover::before {

  343.     background-image: url(../../images/icons/0036b1/show.svg);

  344.   }

  345. 

  346.   &:active::before {

  347.     background-image: url(../../images/icons/002e9a/show.svg);

  348.   }

  349. 

  350.   &.action-link--danger {

  351.     /* Show - danger */

  352.     &::before {

  353.       background-image: url(../../images/icons/d72222/show.svg);

  354.     }

  355. 

  356.     &:hover::before {

  357.       background-image: url(../../images/icons/c11f1f/show.svg);

  358.     }

  359. 

  360.     &:active::before {

  361.       background-image: url(../../images/icons/ab1b1b/show.svg);

  362.     }

  363.   }

  364. }

  365. 

  366. .action-link--icon-hide {

  367.   /* Hide */

  368.   &::before {

  369.     content: "";

  370.     background-image: url(../../images/icons/545560/hide.svg);

  371. 

  372.     @media (forced-colors: active) {

  373.       background: linktext !important;

  374.       mask-repeat: no-repeat;

  375.       mask-image: url(../../images/icons/d72222/hide.svg);

  376.     }

  377.   }

  378. 

  379.   &:hover::before {

  380.     background-image: url(../../images/icons/0036b1/hide.svg);

  381.   }

  382. 

  383.   &:active::before {

  384.     background-image: url(../../images/icons/002e9a/hide.svg);

  385.   }

  386. 

  387.   &.action-link--danger {

  388.     /* Hide - danger */

  389.     &::before {

  390.       background-image: url(../../images/icons/d72222/hide.svg);

  391.     }

  392. 

  393.     &:hover::before {

  394.       background-image: url(../../images/icons/c11f1f/hide.svg);

  395.     }

  396. 

  397.     &:active::before {

  398.       background-image: url(../../images/icons/ab1b1b/hide.svg);

  399.     }

  400.   }

  401. }

  402. 

  403. .action-link--icon-key {

  404.   /* Key */

  405.   &::before {

  406.     content: "";

  407.     background-image: url("../../images/icons/545560/key.svg");

  408. 

  409.     @media (forced-colors: active) {

  410.       background: linktext !important;

  411.       mask-repeat: no-repeat;

  412.       mask-image: url(../../images/icons/d72222/key.svg);

  413.     }

  414.   }

  415. 

  416.   &:hover::before {

  417.     background-image: url("../../images/icons/0036b1/key.svg");

  418.   }

  419. 

  420.   &:active::before {

  421.     background-image: url("../../images/icons/002e9a/key.svg");

  422.   }

  423. 

  424.   &.action-link--danger {

  425.     /* Key — danger */

  426.     &::before {

  427.       background-image: url("../../images/icons/d72222/key.svg");

  428.     }

  429. 

  430.     &:hover::before {

  431.       background-image: url("../../images/icons/c11f1f/key.svg");

  432.     }

  433. 

  434.     &:active::before {

  435.       background-image: url("../../images/icons/ab1b1b/key.svg");

  436.     }

  437.   }

  438. }

  439. 

  440. .action-link--icon-questionmark {

  441.   /* Question Mark */

  442.   &::before {

  443.     content: "";

  444.     background-image: url("../../images/icons/545560/questionmark.svg");

  445. 

  446.     @media (forced-colors: active) {

  447.       background: linktext !important;

  448.       mask-repeat: no-repeat;

  449.       mask-image: url(../../images/icons/d72222/questionmark.svg);

  450.     }

  451.   }

  452. 

  453.   &:hover::before {

  454.     background-image: url("../../images/icons/0036b1/questionmark.svg");

  455.   }

  456. 

  457.   &:active::before {

  458.     background-image: url("../../images/icons/002e9a/questionmark.svg");

  459.   }

  460. 

  461.   &.action-link--danger {

  462.     /* Question Mark - danger */

  463.     &::before {

  464.       background-image: url("../../images/icons/d72222/questionmark.svg");

  465.     }

  466. 

  467.     &:hover::before {

  468.       background-image: url("../../images/icons/c11f1f/questionmark.svg");

  469.     }

  470. 

  471.     &:active::before {

  472.       background-image: url("../../images/icons/ab1b1b/questionmark.svg");

  473.     }

  474.   }

  475. }

  476. 

  477. .action-link--icon-chevron-left {

  478.   &::before {

  479.     display: block;

  480.     content: "";

  481.     background-image: url("../../images/icons/545560/pager-prev.svg");

  482.   }

  483. }

  484. 

  485. @media (min-width: 30em) {

  486.   .action-link--icon-chevron-left {

  487.     &::before {

  488.       display: inline-block;

  489.     }

  490.   }

  491. }

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