You are here

Home » API reference » Drupal 10

action-link.pcss.css in Drupal 10

Same filename and directory in other branches
  1. 8 core/themes/claro/css/components/action-link.pcss.css
  2. 9 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. [dir="rtl"] .action-links {

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

  14.   list-style: none;

  15. }

  16. 

  17. .action-links__item {

  18.   display: inline-block;

  19. }

  20. 

  21. .action-links__item + .action-links__item > .action-link {

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

  23. }

  24. [dir="rtl"] .action-links__item + .action-links__item > .action-link {

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

  26.   margin-left: 0;

  27. }

  28. 

  29. .action-links__item + .action-links__item > .action-link--small {

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

  31. }

  32. [dir="rtl"] .action-links__item + .action-links__item > .action-link--small {

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

  34.   margin-left: 0;

  35. }

  36. 

  37. /**

  38.  * The action link component.

  39.  */

  40. .action-link {

  41.   display: inline-block;

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

  43.   cursor: pointer;

  44.   text-decoration: none;

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

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

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

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

  49.   font-weight: 700;

  50.   line-height: var(--space-l); /* Bigger line-height needed to prevent the icon from increasing the height */

  51.   -webkit-font-smoothing: antialiased;

  52. }

  53. 

  54. /* Small variant. */

  55. .no-touchevents .action-link--small {

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

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

  58. }

  59. 

  60. /* Extra small variant. */

  61. .no-touchevents .action-link--extrasmall {

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

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

  64. }

  65. 

  66. .action-link + .action-link {

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

  68. }

  69. [dir="rtl"] .action-link + .action-link {

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

  71.   margin-left: 0;

  72. }

  73. .no-touchevents .action-link--small + .action-link--small,

  74. .no-touchevents .action-link--extrasmall + .action-link--extrasmall {

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

  76. }

  77. [dir="rtl"] .no-touchevents .action-link--small + .action-link--small,

  78. [dir="rtl"] .no-touchevents .action-link--extrasmall + .action-link--extrasmall {

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

  80.   margin-left: 0;

  81. }

  82. 

  83. /**

  84.  * Action links inside form-actions.

  85.  *

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

  87.  */

  88. .form-actions .action-link {

  89.   margin-right: var(--space-s); /* LTR */

  90.   margin-left: 0; /* LTR */

  91. }

  92. [dir="rtl"] .form-actions .action-link {

  93.   margin-right: 0;

  94.   margin-left: var(--space-s);

  95. }

  96. 

  97. /* Action link states */

  98. .action-link:hover {

  99.   text-decoration: none;

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

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

  102. }

  103. .action-link:focus {

  104.   position: relative;

  105.   z-index: 1;

  106.   text-decoration: none;

  107. }

  108. .action-link:active {

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

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

  111. }

  112. 

  113. /**

  114.  * Action link variants.

  115.  */

  116. /* Danger. */

  117. .action-link--danger {

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

  119. }

  120. .action-link--danger:hover {

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

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

  123. }

  124. .action-link--danger:active {

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

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

  127. }

  128. 

  129. /**

  130.  * Action link icons with states.

  131.  *

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

  133.  */

  134. 

  135. /* Defaults for icons */

  136. .action-link::before {

  137.   position: relative;

  138.   top: 0.125rem; /* Set the proper vertical alignment */

  139.   display: inline-block;

  140.   width: 1em;

  141.   height: 1em;

  142.   margin-right: 0.5em; /* LTR */

  143.   margin-left: calc(var(--space-s) - var(--space-m)); /* LTR */

  144.   background-repeat: no-repeat;

  145.   background-position: center;

  146.   background-size: contain;

  147. }

  148. [dir="rtl"] .action-link::before {

  149.   margin-right: calc(var(--space-s) - var(--space-m));

  150.   margin-left: 0.5em;

  151. }

  152. 

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

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

  155.   top: 0.0625rem; /* Set the proper vertical alignment */

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

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

  158. }

  159. 

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

  161.   margin-right: 0.4em; /* LTR */

  162.   margin-left: -0.125rem; /* LTR */

  163. }

  164. [dir="rtl"].no-touchevents .action-link--extrasmall::before {

  165.   margin-right: -0.125rem;

  166.   margin-left: 0.4em;

  167. }

  168. 

  169. /**

  170.  * Hide action link icons for IE11.

  171.  *

  172.  * IE 11 does not display inline svg backgrounds

  173.  */

  174. @media screen and (-ms-high-contrast: active) {

  175.   /* stylelint-disable-next-line selector-type-no-unknown */

  176.   _:-ms-fullscreen,

  177.   .action-link::before {

  178.     display: none;

  179.   }

  180. }

  181. 

  182. /* Plus */

  183. .action-link--icon-plus::before {

  184.   content: "";

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

  186. }

  187. 

  188. .action-link--icon-plus:hover::before {

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

  190. }

  191. .action-link--icon-plus:active::before {

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

  193. }

  194. 

  195. /* Plus — danger */

  196. .action-link--icon-plus.action-link--danger::before {

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

  198. }

  199. .action-link--icon-plus.action-link--danger:hover::before {

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

  201. }

  202. .action-link--icon-plus.action-link--danger:active::before {

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

  204. }

  205. 

  206. @media screen and (-ms-high-contrast: active) {

  207.   .action-link--icon-plus.action-link--icon-plus.action-link--icon-plus::before {

  208.     background-image: url(../../images/icons/windowText/plus.svg);

  209.   }

  210. }

  211. 

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

  213.   .action-link--icon-plus::before {

  214.     background: linktext !important;

  215.     mask-repeat: no-repeat;

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

  217.   }

  218. }

  219. 

  220. /* Trash */

  221. .action-link--icon-trash::before {

  222.   content: "";

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

  224. }

  225. .action-link--icon-trash:hover::before {

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

  227. }

  228. .action-link--icon-trash:active::before {

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

  230. }

  231. 

  232. /* Trash — danger */

  233. .action-link--icon-trash.action-link--danger::before {

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

  235. }

  236. .action-link--icon-trash.action-link--danger:hover::before {

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

  238. }

  239. .action-link--icon-trash.action-link--danger:active::before {

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

  241. }

  242. 

  243. @media screen and (-ms-high-contrast: active) {

  244.   .action-link--icon-trash.action-link--icon-trash.action-link--icon-trash::before {

  245.     background-image: url(../../images/icons/windowText/trash.svg) !important;

  246.   }

  247. }

  248. 

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

  250.   .action-link--icon-trash::before {

  251.     background: linktext !important;

  252.     mask-repeat: no-repeat;

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

  254.   }

  255. }

  256. 

  257. /* Ex */

  258. .action-link--icon-ex::before {

  259.   content: "";

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

  261. }

  262. .action-link--icon-ex:hover::before {

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

  264. }

  265. .action-link--icon-ex:active::before {

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

  267. }

  268. 

  269. /* Ex — danger */

  270. .action-link--icon-ex.action-link--danger::before {

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

  272. }

  273. .action-link--icon-ex.action-link--danger:hover::before {

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

  275. }

  276. .action-link--icon-ex.action-link--danger:active::before {

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

  278. }

  279. 

  280. @media screen and (-ms-high-contrast: active) {

  281.   .action-link--icon-ex.action-link--icon-ex.action-link--icon-ex::before {

  282.     background-image: url(../../images/icons/windowText/ex.svg) !important;

  283.   }

  284. }

  285. 

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

  287.   .action-link--icon-ex::before {

  288.     background: linktext !important;

  289.     mask-repeat: no-repeat;

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

  291.   }

  292. }

  293. 

  294. /* Checkmark */

  295. .action-link--icon-checkmark::before {

  296.   content: "";

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

  298. }

  299. .action-link--icon-checkmark:hover::before {

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

  301. }

  302. .action-link--icon-checkmark:active::before {

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

  304. }

  305. 

  306. /* Checkmark — danger */

  307. .action-link--icon-checkmark.action-link--danger::before {

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

  309. }

  310. .action-link--icon-checkmark.action-link--danger:hover::before {

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

  312. }

  313. .action-link--icon-checkmark.action-link--danger:active::before {

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

  315. }

  316. 

  317. @media screen and (-ms-high-contrast: active) {

  318.   .action-link--icon-checkmark.action-link--icon-checkmark.action-link--icon-checkmark::before {

  319.     background-image: url(../../images/icons/windowText/checkmark.svg) !important;

  320.   }

  321. }

  322. 

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

  324.   .action-link--icon-checkmark::before {

  325.     background: linktext !important;

  326.     mask-repeat: no-repeat;

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

  328.   }

  329. }

  330. 

  331. /* Cog */

  332. .action-link--icon-cog::before {

  333.   content: "";

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

  335. }

  336. .action-link--icon-cog:hover::before {

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

  338. }

  339. .action-link--icon-cog:active::before {

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

  341. }

  342. 

  343. /* Cog — danger */

  344. .action-link--icon-cog.action-link--danger::before {

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

  346. }

  347. .action-link--icon-cog.action-link--danger:hover::before {

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

  349. }

  350. .action-link--icon-cog.action-link--danger:active::before {

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

  352. }

  353. 

  354. @media screen and (-ms-high-contrast: active) {

  355.   .action-link--icon-cog.action-link--icon-cog.action-link--icon-cog::before {

  356.     background-image: url(../../images/icons/windowText/cog.svg) !important;

  357.   }

  358. }

  359. 

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

  361.   .action-link--icon-cog::before {

  362.     background: linktext !important;

  363.     mask-repeat: no-repeat;

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

  365.   }

  366. }

  367. 

  368. /* Show */

  369. .action-link--icon-show::before {

  370.   content: "";

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

  372. }

  373. .action-link--icon-show:hover::before {

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

  375. }

  376. .action-link--icon-show:active::before {

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

  378. }

  379. 

  380. /* Show - danger */

  381. .action-link--icon-show.action-link--danger::before {

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

  383. }

  384. .action-link--icon-show.action-link--danger:hover::before {

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

  386. }

  387. .action-link--icon-show.action-link--danger:active::before {

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

  389. }

  390. 

  391. @media screen and (-ms-high-contrast: active) {

  392.   .action-link--icon-show.action-link--icon-show.action-link--icon-show::before {

  393.     background-image: url(../../images/icons/windowText/show.svg) !important;

  394.   }

  395. }

  396. 

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

  398.   .action-link--icon-show::before {

  399.     background: linktext !important;

  400.     mask-repeat: no-repeat;

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

  402.   }

  403. }

  404. 

  405. /* Hide */

  406. .action-link--icon-hide::before {

  407.   content: "";

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

  409. }

  410. .action-link--icon-hide:hover::before {

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

  412. }

  413. .action-link--icon-hide:active::before {

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

  415. }

  416. 

  417. /* Hide - danger */

  418. .action-link--icon-hide.action-link--danger::before {

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

  420. }

  421. .action-link--icon-hide.action-link--danger:hover::before {

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

  423. }

  424. .action-link--icon-hide.action-link--danger:active::before {

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

  426. }

  427. 

  428. @media screen and (-ms-high-contrast: active) {

  429.   .action-link--icon-hide.action-link--icon-hide.action-link--icon-hide::before {

  430.     background-image: url(../../images/icons/windowText/hide.svg);

  431.   }

  432. }

  433. 

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

  435.   .action-link--icon-hide::before {

  436.     background: linktext !important;

  437.     mask-repeat: no-repeat;

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

  439.   }

  440. }

  441. 

  442. /* Key */

  443. .action-link--icon-key::before {

  444.   content: "";

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

  446. }

  447. .action-link--icon-key:hover::before {

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

  449. }

  450. .action-link--icon-key:active::before {

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

  452. }

  453. 

  454. /* Key — danger */

  455. .action-link--icon-key.action-link--danger::before {

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

  457. }

  458. .action-link--icon-key.action-link--danger:hover::before {

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

  460. }

  461. .action-link--icon-key.action-link--danger:active::before {

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

  463. }

  464. 

  465. @media screen and (-ms-high-contrast: active) {

  466.   .action-link--icon-key.action-link--icon-key.action-link--icon-key::before {

  467.     background-image: url("../../images/icons/windowText/key.svg") !important;

  468.   }

  469. }

  470. 

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

  472.   .action-link--icon-key::before {

  473.     background: linktext !important;

  474.     mask-repeat: no-repeat;

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

  476.   }

  477. }

  478. 

  479. /* Question Mark */

  480. .action-link--icon-questionmark::before {

  481.   content: "";

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

  483. }

  484. .action-link--icon-questionmark:hover::before {

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

  486. }

  487. .action-link--icon-questionmark:active::before {

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

  489. }

  490. 

  491. /* Question Mark - danger */

  492. .action-link--icon-questionmark.action-link--danger::before {

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

  494. }

  495. .action-link--icon-questionmark.action-link--danger:hover::before {

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

  497. }

  498. .action-link--icon-questionmark.action-link--danger:active::before {

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

  500. }

  501. 

  502. @media screen and (-ms-high-contrast: active) {

  503.   .action-link--icon-questionmark.action-link--icon-questionmark.action-link--icon-questionmark::before {

  504.     background-image: url("../../images/icons/windowText/questionmark.svg") !important;

  505.   }

  506. }

  507. 

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

  509.   .action-link--icon-questionmark::before {

  510.     background: linktext !important;

  511.     mask-repeat: no-repeat;

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

  513.   }

  514. }