resources/lib/codex/mixins/link.less

   1 // Link Styles
   2 //
   3 // Per ADR 04, Codex Links are implemented as a re-usable Less mixin rather
   4 // than a Vue.js component. Users who wish to apply the Codex Link styles to
   5 // elements on a page should call the mixin inside of the relevant selector in
   6 // their own stylesheets. Variants (underlined links, red links) can be accessed
   7 // by adding the appropriate modifier class (.is-underlined and .is-red-link,
   8 // respectively).
   9 //
  10 // Code that needs to customize these modifier classes or otherwise customize the
  11 // selectors used for these modifiers can use the following sub-mixins:
  12 // - cdx-mixin-link-base(): base link styles
  13 // - cdx-mixin-link-underlined(): underlined link (-base must also be applied)
  14 // - cdx-mixin-link-red(): red link (-base must also be applied)
  15 //
  16 // Example usage:
  17 //
  18 // .my-link-class {
  19 //     .cdx-mixin-link-base();
  20 //
  21 //     &.custom-underlined-class {
  22 //         .cdx-mixin-link-underlined();
  23 //     }
  24 //
  25 //     &.custom-red-link-class {
  26 //         .cdx-mixin-link-red();
  27 //     }
  28 // }
  29 //
  30 // Link styles can be used inside of other Vue components, or anywhere that Less
  31 // is available; JS is not required.
  32
  33 .cdx-mixin-link-base() {
  34         color: @color-progressive;
  35         border-radius: @border-radius-base;
  36         text-decoration: @text-decoration-none;
  37
  38         &:visited {
  39                 color: @color-visited;
  40
  41                 &:hover {
  42                         color: @color-visited--hover;
  43                 }
  44
  45                 &:active {
  46                         color: @color-visited--active;
  47                 }
  48         }
  49
  50         &:hover {
  51                 color: @color-progressive--hover;
  52                 text-decoration: @text-decoration-underline;
  53         }
  54
  55         &:active {
  56                 color: @color-progressive--active;
  57                 text-decoration: @text-decoration-underline;
  58         }
  59
  60         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  61         &:focus-visible {
  62                 outline: @border-style-base @border-width-thick @outline-color-progressive--focus;
  63         }
  64
  65         @supports not selector( :focus-visible ) {
  66                 &:focus {
  67                         outline: @border-style-base @border-width-thick @outline-color-progressive--focus;
  68                 }
  69         }
  70
  71         // Style external link icon.
  72         // HACK: Make sure this doesn't apply to placeholder icons in TypeaheadSearch (T372420).
  73         .cdx-icon:not( .cdx-thumbnail__placeholder__icon--vue ):last-child {
  74                 // Note, `@min-size-icon-x-small` & `@size-icon-small` are an approximation in our current
  75                 // 16/14 base font theme environment.
  76                 // We're faking it to make it, `@min-size-icon-x-small` is `12px` in both themes,
  77                 // `@size-icon-small` is `1em`, achieving the desired size.
  78                 min-width: @min-size-icon-x-small;
  79                 min-height: @min-size-icon-x-small;
  80                 width: @size-icon-small;
  81                 height: @size-icon-small;
  82                 padding-left: @spacing-25;
  83                 vertical-align: middle;
  84         }
  85 }
  86
  87 .cdx-mixin-link-underlined() {
  88         text-decoration: @text-decoration-underline;
  89 }
  90
  91 .cdx-mixin-link-red() {
  92         color: @color-link-red;
  93
  94         &:visited {
  95                 color: @color-link-red--visited;
  96
  97                 &:hover {
  98                         color: @color-link-red--visited--hover;
  99                 }
 100
 101                 &:active {
 102                         color: @color-link-red--visited--active;
 103                 }
 104         }
 105
 106         &:hover {
 107                 color: @color-link-red--hover;
 108                 text-decoration: @text-decoration-underline;
 109         }
 110
 111         &:active {
 112                 color: @color-link-red--active;
 113                 text-decoration: @text-decoration-underline;
 114         }
 115
 116         &:focus {
 117                 outline-color: @outline-color-progressive--focus;
 118         }
 119 }
 120
 121 .cdx-mixin-link() {
 122         .cdx-mixin-link-base();
 123
 124         // stylelint-disable-next-line selector-class-pattern
 125         &.is-underlined {
 126                 .cdx-mixin-link-underlined();
 127         }
 128
 129         // stylelint-disable-next-line selector-class-pattern
 130         &.is-red-link {
 131                 .cdx-mixin-link-red();
 132         }
 133 }