action-link.pcss.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/action-link.pcss.css
  2. 10 core/themes/claro/css/components/action-link.pcss.css
  3. 11.x 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-gray-800);

  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/002e9a/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. @media (forced-colors: active) {

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

  216.     background: linktext !important;

  217.     mask-repeat: no-repeat;

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

  219.   }

  220. }

  221. 

  222. /* Trash */

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

  224.   content: "";

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

  226. }

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

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

  229. }

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

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

  232. }

  233. 

  234. /* Trash — danger */

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

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

  237. }

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

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

  240. }

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

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

  243. }

  244. 

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

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

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

  248.   }

  249. }

  250. 

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

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

  253.     background: linktext !important;

  254.     mask-repeat: no-repeat;

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

  256.   }

  257. }

  258. 

  259. /* Ex */

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

  261.   content: "";

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

  263. }

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

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

  266. }

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

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

  269. }

  270. 

  271. /* Ex — danger */

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

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

  274. }

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

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

  277. }

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

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

  280. }

  281. 

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

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

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

  285.   }

  286. }

  287. 

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

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

  290.     background: linktext !important;

  291.     mask-repeat: no-repeat;

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

  293.   }

  294. }

  295. 

  296. /* Checkmark */

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

  298.   content: "";

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

  300. }

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

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

  303. }

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

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

  306. }

  307. 

  308. /* Checkmark — danger */

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

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

  311. }

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

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

  314. }

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

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

  317. }

  318. 

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

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

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

  322.   }

  323. }

  324. 

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

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

  327.     background: linktext !important;

  328.     mask-repeat: no-repeat;

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

  330.   }

  331. }

  332. 

  333. /* Cog */

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

  335.   content: "";

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

  337. }

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

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

  340. }

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

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

  343. }

  344. 

  345. /* Cog — danger */

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

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

  348. }

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

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

  351. }

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

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

  354. }

  355. 

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

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

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

  359.   }

  360. }

  361. 

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

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

  364.     background: linktext !important;

  365.     mask-repeat: no-repeat;

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

  367.   }

  368. }

  369. 

  370. /* Show */

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

  372.   content: "";

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

  374. }

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

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

  377. }

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

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

  380. }

  381. 

  382. /* Show - danger */

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

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

  385. }

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

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

  388. }

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

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

  391. }

  392. 

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

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

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

  396.   }

  397. }

  398. 

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

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

  401.     background: linktext !important;

  402.     mask-repeat: no-repeat;

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

  404.   }

  405. }

  406. 

  407. /* Hide */

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

  409.   content: "";

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

  411. }

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

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

  414. }

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

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

  417. }

  418. 

  419. /* Hide - danger */

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

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

  422. }

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

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

  425. }

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

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

  428. }

  429. 

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

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

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

  433.   }

  434. }

  435. 

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

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

  438.     background: linktext !important;

  439.     mask-repeat: no-repeat;

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

  441.   }

  442. }

  443. 

  444. /* Key */

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

  446.   content: "";

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

  448. }

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

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

  451. }

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

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

  454. }

  455. 

  456. /* Key — danger */

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

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

  459. }

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

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

  462. }

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

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

  465. }

  466. 

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

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

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

  470.   }

  471. }

  472. 

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

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

  475.     background: linktext !important;

  476.     mask-repeat: no-repeat;

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

  478.   }

  479. }

  480. 

  481. /* Question Mark */

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

  483.   content: "";

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

  485. }

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

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

  488. }

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

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

  491. }

  492. 

  493. /* Question Mark - danger */

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

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

  496. }

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

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

  499. }

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

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

  502. }

  503. 

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

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

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

  507.   }

  508. }

  509. 

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

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

  512.     background: linktext !important;

  513.     mask-repeat: no-repeat;

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

  515.   }

  516. }

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