Standalone Link
Mixins
standalone-link
@mixin standalone-link() { ... }
@mixin standalone-link() { @include standalone-link-variant; display: inline-flex; align-items: flex-start; justify-content: flex-start; }
standalone-link-variant
@mixin standalone-link-variant($size) { ... }
@mixin standalone-link-variant($size) { $style: 'paragraph-2'; @if $size == 'medium' { $style: 'paragraph-1'; } @include typography.style-as($style); @include link.link; font-weight: settings.$link-font-weight; }
Description
Standalone link font size styles
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$size | — none | String | — none |
Requires
- [variable]
size
- [variable]
link-font-weight
Used by
- [mixin]
standalone-link
standalone-link-icon-svg
@mixin standalone-link-icon-svg($size) { ... }
@mixin standalone-link-icon-svg($size) { $style: 'paragraph-2'; @if $size == 'medium' { $style: 'paragraph-1'; } $font-size: typography.get($style, 'font-size'); $line-height: typography.get($style, 'line-height'); display: block; width: calc(#{$line-height} * #{$font-size}); height: calc(#{$line-height} * #{$font-size}); fill: settings.$link-icon-color; }
Description
Standalone link icon svg styles
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$size | — none | String | — none |
Requires
- [function]
get
- [variable]
size
- [variable]
link-icon-color
standalone-link-label
@mixin standalone-link-label() { ... }
@mixin standalone-link-label() { padding-right: spacing.get('s1'); }
Variables
link-icon-color
$link-icon-color: currentColor !default;
Description
Standalone link icon color
Type
Color
link-font-weight
$link-font-weight: 600 !default;