You are here

Home » API reference » Drupal 9

action-link.pcss.css in Drupal 9

Same filename and directory in other branches
  1. 8 core/themes/claro/css/components/action-link.pcss.css
  2. 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. @import "../base/variables.pcss.css";

  9. 

  10. /**

  11.  * Action links layout.

  12.  */

  13. .action-links,

  14. [dir="rtl"] .action-links {

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

  16.   list-style: none;

  17. }

  18. 

  19. .action-links__item {

  20.   display: inline-block;

  21. }

  22. 

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

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

  25. }

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

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

  28.   margin-left: 0;

  29. }

  30. 

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

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

  33. }

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

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

  36.   margin-left: 0;

  37. }

  38. 

  39. /**

  40.  * The action link component.

  41.  */

  42. .action-link {

  43.   display: inline-block;

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

  45.   cursor: pointer;

  46.   text-decoration: none;

  47.   color: var(--color-davysgray);

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

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

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

  51.   font-weight: 700;

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

  53.   -webkit-font-smoothing: antialiased;

  54. }

  55. 

  56. /* Small variant. */

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

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

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

  60. }

  61. 

  62. /* Extra small variant. */

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

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

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

  66. }

  67. 

  68. .action-link + .action-link {

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

  70. }

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

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

  73.   margin-left: 0;

  74. }

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

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

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

  78. }

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

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

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

  82.   margin-left: 0;

  83. }

  84. 

  85. /**

  86.  * Action links inside form-actions.

  87.  *

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

  89.  */

  90. .form-actions .action-link {

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

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

  93. }

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

  95.   margin-right: 0;

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

  97. }

  98. 

  99. /* Action link states */

  100. .action-link:hover {

  101.   text-decoration: none;

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

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

  104. }

  105. .action-link:focus {

  106.   position: relative;

  107.   z-index: 1;

  108.   text-decoration: none;

  109. }

  110. .action-link:active {

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

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

  113. }

  114. 

  115. /**

  116.  * Action link variants.

  117.  */

  118. /* Danger. */

  119. .action-link--danger {

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

  121. }

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

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

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

  125. }

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

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

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

  129. }

  130. 

  131. /**

  132.  * Action link icons with states.

  133.  *

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

  135.  */

  136. 

  137. /* Defaults for icons */

  138. .action-link::before {

  139.   position: relative;

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

  141.   display: inline-block;

  142.   width: 1em;

  143.   height: 1em;

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

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

  146.   background-repeat: no-repeat;

  147.   background-position: center;

  148.   background-size: contain;

  149. }

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

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

  152.   margin-left: 0.5em;

  153. }

  154. 

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

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

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

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

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

  160. }

  161. 

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

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

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

  165. }

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

  167.   margin-right: -0.125rem;

  168.   margin-left: 0.4em;

  169. }

  170. 

  171. /**

  172.  * Hide action link icons for IE11.

  173.  *

  174.  * IE 11 does not display inline svg backgrounds

  175.  */

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

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

  178.   _:-ms-fullscreen,

  179.   .action-link::before {

  180.     display: none;

  181.   }

  182. }

  183. 

  184. /* Plus */

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

  186.   content: "";

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

  188. }

  189. 

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

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

  192. }

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

  194.   background-image: url(../../images/icons/00309e/plus.svg);

  195. }

  196. 

  197. /* Plus — danger */

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

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

  200. }

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

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

  203. }

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

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

  206. }

  207. 

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

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

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

  211.   }

  212. }

  213. 

  214. /* Trash */

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

  216.   content: "";

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

  218. }

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

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

  221. }

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

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

  224. }

  225. 

  226. /* Trash — danger */

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

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

  229. }

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

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

  232. }

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

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

  235. }

  236. 

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

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

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

  240.   }

  241. }

  242. 

  243. /* Ex */

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

  245.   content: "";

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

  247. }

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

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

  250. }

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

  252.   background-image: url(../../images/icons/00309e/ex.svg);

  253. }

  254. 

  255. /* Ex — danger */

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

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

  258. }

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

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

  261. }

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

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

  264. }

  265. 

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

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

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

  269.   }

  270. }

  271. 

  272. /* Checkmark */

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

  274.   content: "";

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

  276. }

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

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

  279. }

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

  281.   background-image: url(../../images/icons/00309e/checkmark.svg);

  282. }

  283. 

  284. /* Checkmark — danger */

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

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

  287. }

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

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

  290. }

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

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

  293. }

  294. 

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

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

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

  298.   }

  299. }

  300. 

  301. /* Cog */

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

  303.   content: "";

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

  305. }

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

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

  308. }

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

  310.   background-image: url(../../images/icons/00309e/cog.svg);

  311. }

  312. 

  313. /* Cog — danger */

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

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

  316. }

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

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

  319. }

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

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

  322. }

  323. 

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

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

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

  327.   }

  328. }

  329. 

  330. /* Show */

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

  332.   content: "";

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

  334. }

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

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

  337. }

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

  339.   background-image: url(../../images/icons/00309e/show.svg);

  340. }

  341. 

  342. /* Show - danger */

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

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

  345. }

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

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

  348. }

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

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

  351. }

  352. 

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

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

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

  356.   }

  357. }

  358. 

  359. /* Hide */

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

  361.   content: "";

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

  363. }

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

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

  366. }

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

  368.   background-image: url(../../images/icons/00309e/hide.svg);

  369. }

  370. 

  371. /* Hide - danger */

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

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

  374. }

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

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

  377. }

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

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

  380. }

  381. 

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

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

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

  385.   }

  386. }

  387. 

  388. /* Key */

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

  390.   content: "";

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

  392. }

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

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

  395. }

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

  397.   background-image: url("../../images/icons/00309e/key.svg");

  398. }

  399. 

  400. /* Key — danger */

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

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

  403. }

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

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

  406. }

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

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

  409. }

  410. 

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

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

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

  414.   }

  415. }

  416. 

  417. /* Question Mark */

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

  419.   content: "";

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

  421. }

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

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

  424. }

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

  426.   background-image: url("../../images/icons/00309e/questionmark.svg");

  427. }

  428. 

  429. /* Question Mark - danger */

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

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

  432. }

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

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

  435. }

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

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

  438. }

  439. 

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

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

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

  443.   }

  444. }