META-INF.resources._unstyled.css.clay.mixins._links.scss Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.frontend.theme.unstyled
Show all versions of com.liferay.frontend.theme.unstyled
Liferay Frontend Theme Unstyled
The newest version!
////
/// @group Links
////
/// A mixin for creating a link component. This generally should be used with the `a` or `button` element.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// (
/// enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
/// before: (
/// // .link::before
/// ),
/// after: (
/// // .link::after
/// ),
/// link: (
/// // .link:link
/// before: (
/// // .link:link::before
/// ),
/// after: (
/// // .link:link::after
/// ),
/// inline-item: (
/// // .link:link .inline-item
/// ),
/// inline-item:-before (
/// // .link:link .inline-item-before
/// ),
/// inline-item-middle: (
/// // .link:link .inline-item-middle
/// ),
/// inline-item-after: (
/// // .link:link .inline-item-after
/// ),
/// ),
/// visited: (
/// // .link:visited
/// before: (
/// // .link:visited::before
/// ),
/// after: (
/// // .link:visited::after
/// ),
/// inline-item: (
/// // .link:visited .inline-item
/// ),
/// inline-item:-before (
/// // .link:visited .inline-item-before
/// ),
/// inline-item-middle: (
/// // .link:visited .inline-item-middle
/// ),
/// inline-item-after: (
/// // .link:visited .inline-item-after
/// ),
/// ),
/// hover: (
/// // .link:hover
/// before: (
/// // .link:hover::before
/// ),
/// after: (
/// // .link:hover::after
/// ),
/// inline-item: (
/// // .link:hover .inline-item
/// ),
/// inline-item:-before (
/// // .link:hover .inline-item-before
/// ),
/// inline-item-middle: (
/// // .link:hover .inline-item-middle
/// ),
/// inline-item-after: (
/// // .link:hover .inline-item-after
/// ),
/// ),
/// focus: (
/// // .link:focus
/// before: (
/// // .link:focus::before
/// ),
/// after: (
/// // .link:focus::after
/// ),
/// inline-item: (
/// // .link:focus .inline-item
/// ),
/// inline-item:-before (
/// // .link:focus .inline-item-before
/// ),
/// inline-item-middle: (
/// // .link:focus .inline-item-middle
/// ),
/// inline-item-after: (
/// // .link:focus .inline-item-after
/// ),
/// ),
/// active: (
/// // .link:active
/// before: (
/// // .link:active::before
/// ),
/// after: (
/// // .link:active::after
/// ),
/// inline-item: (
/// // .link:active .inline-item
/// ),
/// inline-item:-before (
/// // .link:active .inline-item-before
/// ),
/// inline-item-middle: (
/// // .link:active .inline-item-middle
/// ),
/// inline-item-after: (
/// // .link:active .inline-item-after
/// ),
/// ),
/// active-class: (
/// // .link.active
/// before: (
/// // .link.active::before
/// ),
/// after: (
/// // .link.active::after
/// ),
/// inline-item: (
/// // .link.active .inline-item
/// ),
/// inline-item:-before (
/// // .link.active .inline-item-before
/// ),
/// inline-item-middle: (
/// // .link.active .inline-item-middle
/// ),
/// inline-item-after: (
/// // .link.active .inline-item-after
/// ),
/// ),
/// disabled: (
/// // .link:disabled, .link.disabled
/// before: (
/// // .link:disabled::before, .link.disabled::before
/// ),
/// after: (
/// // .link:disabled::after, .link.disabled::after
/// ),
/// active: (
/// // .link:disabled:active, .link.disabled:active
/// before: (
/// // .link:disabled:active::before, .link.disabled:active::before
/// ),
/// after: (
/// // .link:disabled:active::after, .link.disabled:active::after
/// ),
/// ),
/// inline-item: (
/// // .link:disabled .inline-item
/// ),
/// inline-item:-before (
/// // .link:disabled .inline-item-before
/// ),
/// inline-item-middle: (
/// // .link:disabled .inline-item-middle
/// ),
/// inline-item-after: (
/// // .link:disabled .inline-item-after
/// ),
/// ),
/// btn-focus: (
/// // .link[type]:focus
/// ),
/// show: (
/// // .link[aria-expanded='true'], .link.show, .show .link
/// before: (
/// // .link.show::before
/// ),
/// after: (
/// // .link.show::after, .link.disabled::after
/// ),
/// ),
/// c-inner: (
/// enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
/// // .link > .c-inner
/// ),
/// inline-item: (
/// // .link .inline-item
/// ),
/// inline-item-before: (
/// // .link .inline-item-before
/// ),
/// inline-item-middle: (
/// // .link .inline-item-middle
/// inline-item-middle: (
/// // .link .inline-item-middle + .inline-item-middle
/// ),
/// ),
/// inline-item-after: (
/// // .link .inline-item-after
/// ),
/// lexicon-icon: (
/// // .link .lexicon-icon
/// ),
/// )
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null}, // deprecated after 3.9.0
/// hover-bg: {Color | String | Null}, // deprecated after 3.9.0
/// hover-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// hover-color: {Color | String | Null}, // deprecated after 3.9.0
/// hover-opacity: {Number | String | Null}, // deprecated after 3.9.0
/// hover-text-decoration: {String | Null}, // deprecated after 3.9.0
/// hover-z-index: {Number | String | Null}, // deprecated after 3.9.0
/// focus-bg: {Color | String | Null}, // deprecated after 3.9.0
/// focus-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// focus-border-radius: {Number | String | List | Null}, // deprecated after 3.9.0
/// focus-box-shadow: {String | List | Null}, // deprecated after 3.9.0
/// focus-color: {Color | String | Null}, // deprecated after 3.9.0
/// focus-opacity: {Number | String | Null}, // deprecated after 3.9.0
/// focus-outline: {Number | String | Null}, // deprecated after 3.9.0
/// focus-text-decoration: {String | Null}, // deprecated after 3.9.0
/// focus-z-index: {Number | String | Null}, // deprecated after 3.9.0
/// active-bg: {Color | String | Null}, // deprecated after 3.9.0
/// active-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// active-color: {Color | String | Null}, // deprecated after 3.9.0
/// active-font-weight: {Number | String | Null}, // deprecated after 3.9.0
/// active-z-index: {Number | String | Null}, // deprecated after 3.9.0
/// active-class-bg: {Color | String | Null}, // deprecated after 3.9.0
/// active-class-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// active-class-color: {Color | String | Null}, // deprecated after 3.9.0
/// active-class-font-weight: {Number | String | Null}, // deprecated after 3.9.0
/// active-class-z-index: {Number | String | Null}, // deprecated after 3.9.0
/// disabled-bg: {Color | String | Null}, // deprecated after 3.9.0
/// disabled-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// disabled-box-shadow: {String | List | Null}, // deprecated after 3.9.0
/// disabled-color: {Color | String | Null}, // deprecated after 3.9.0
/// disabled-cursor: {String | Null}, // deprecated after 3.9.0
/// disabled-opacity: {Number | String | Null}, // deprecated after 3.9.0
/// disabled-pointer-events: {String | Null}, // deprecated after 3.9.0
/// disabled-text-decoration: {String | Null}, // deprecated after 3.9.0
/// disabled-active: {Map | Null}, // deprecated after 3.39.0
/// btn-focus-box-shadow: {String | List | Null}, // deprecated after 3.9.0
/// btn-focus-outline: {Number | String | Null}, // deprecated after 3.9.0
/// btn-focus: {Map | Null}, // deprecated after 3.39.0
/// lexicon-icon-font-size: {Number | String | Null}, // deprecated after 3.9.0
/// lexicon-icon-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// lexicon-icon-margin-left: {Number | String | Null}, // deprecated after 3.9.0
/// lexicon-icon-margin-right: {Number | String | Null}, // deprecated after 3.9.0
/// lexicon-icon-margin-top: {Number | String | Null}, // deprecated after 3.9.0
@mixin clay-link($map) {
@if (type-of($map) == 'map') {
$enabled: setter(map-get($map, enabled), true);
$_enable-focus-visible: if(
variable-exists(enable-focus-visible),
$enable-focus-visible,
if(
variable-exists(cadmin-enable-focus-visible),
$cadmin-enable-focus-visible,
true
)
);
$_c-prefers-focus-selector: if(
$_enable-focus-visible,
'.c-prefers-focus &:focus',
''
);
@if (variable-exists(cadmin-enable-focus-visible)) and
($_enable-focus-visible)
{
$_c-prefers-focus-selector: clay-insert-before(
'.cadmin',
'.c-prefers-focus '
);
}
$base: map-merge(
$map,
(
background-color:
setter(map-get($map, bg), map-get($map, background-color)),
)
);
$hover: setter(map-get($map, hover), ());
$hover: map-merge(
$hover,
(
background-color:
setter(
map-get($map, hover-bg),
map-get($hover, background-color)
),
border-color:
setter(
map-get($map, hover-border-color),
map-get($hover, border-color)
),
color:
setter(map-get($map, hover-color), map-get($hover, color)),
opacity:
setter(
map-get($map, hover-opacity),
map-get($hover, opacity)
),
text-decoration:
setter(
map-get($map, hover-text-decoration),
map-get($hover, text-decoration)
),
z-index:
setter(
map-get($map, hover-z-index),
map-get($hover, z-index)
),
)
);
$focus: setter(map-get($map, focus), ());
$focus: map-merge(
$focus,
(
background-color:
setter(
map-get($map, focus-bg),
map-get($focus, background-color)
),
border-color:
setter(
map-get($map, focus-border-color),
map-get($focus, border-color)
),
border-radius:
setter(
map-get($map, focus-border-radius),
map-get($focus, border-radius)
),
box-shadow:
setter(
map-get($map, focus-box-shadow),
map-get($focus, box-shadow)
),
color:
setter(map-get($map, focus-color), map-get($focus, color)),
opacity:
setter(
map-get($map, focus-opacity),
map-get($focus, opacity)
),
outline:
setter(
map-get($map, focus-outline),
map-get($focus, outline)
),
text-decoration:
setter(
map-get($map, focus-text-decoration),
map-get($focus, text-decoration)
),
z-index:
setter(
map-get($map, focus-z-index),
map-get($focus, z-index)
),
)
);
$active: setter(map-get($map, active), ());
$active: map-merge(
$active,
(
background-color:
setter(
map-get($map, active-bg),
map-get($active, background-color)
),
border-color:
setter(
map-get($map, active-border-color),
map-get($active, border-color)
),
color:
setter(
map-get($map, active-color),
map-get($active, color)
),
font-weight:
setter(
map-get($map, active-font-weight),
map-get($active, font-weight)
),
z-index:
setter(
map-get($map, active-z-index),
map-get($active, z-index)
),
)
);
$active-class: setter(map-get($map, active-class), ());
$active-class: map-merge(
$active-class,
(
background-color:
setter(
map-get($map, active-class-bg),
map-get($active-class, background-color),
map-get($active, background-color)
),
border-color:
setter(
map-get($map, active-class-border-color),
map-get($active-class, border-color),
map-get($active, border-color)
),
color:
setter(
map-get($map, active-class-color),
map-get($active-class, color),
map-get($active, color)
),
font-weight:
setter(
map-get($map, active-class-font-weight),
map-get($active-class, font-weight),
map-get($active, font-weight)
),
z-index:
setter(
map-get($map, active-class-z-index),
map-get($active-class, z-index),
map-get($active, z-index)
),
)
);
$disabled: setter(map-get($map, disabled), ());
$disabled: map-merge(
$disabled,
(
background-color:
setter(
map-get($map, disabled-bg),
map-get($disabled, background-color)
),
border-color:
setter(
map-get($map, disabled-border-color),
map-get($disabled, border-color)
),
box-shadow:
setter(
map-get($map, disabled-box-shadow),
map-get($disabled, box-shadow)
),
color:
setter(
map-get($map, disabled-color),
map-get($disabled, color)
),
cursor:
setter(
map-get($map, disabled-cursor),
map-get($disabled, cursor)
),
opacity:
setter(
map-get($map, disabled-opacity),
map-get($disabled, opacity)
),
pointer-events:
setter(
map-get($map, disabled-pointer-events),
map-get($disabled, pointer-events)
),
text-decoration:
setter(
map-get($map, disabled-text-decoration),
map-get($disabled, text-decoration)
),
)
);
$disabled-active: setter(map-get($disabled, active), ());
$disabled-active: map-deep-merge(
$disabled-active,
map-get($map, disabled-active)
);
$disabled-active: map-merge(
$disabled-active,
(
pointer-events:
setter(
map-get($map, disabled-active-pointer-events),
map-get($disabled-active, pointer-events)
),
)
);
$show: setter(map-get($map, show), ());
$show: map-merge($active-class, $show);
$btn-focus: setter(map-get($map, btn-focus), ());
$btn-focus: map-merge(
$btn-focus,
(
box-shadow:
setter(
map-get($map, btn-focus-box-shadow),
map-get($btn-focus, box-shadow)
),
outline:
setter(
map-get($map, btn-focus-outline),
map-get($btn-focus, outline)
),
)
);
$lexicon-icon: setter(map-get($map, lexicon-icon), ());
$lexicon-icon: map-merge(
$lexicon-icon,
(
font-size:
setter(
map-get($map, lexicon-icon-font-size),
map-get($lexicon-icon, font-size)
),
margin-bottom:
setter(
map-get($map, lexicon-icon-margin-bottom),
map-get($lexicon-icon, margin-bottom)
),
margin-left:
setter(
map-get($map, lexicon-icon-margin-left),
map-get($lexicon-icon, margin-left)
),
margin-right:
setter(
map-get($map, lexicon-icon-margin-right),
map-get($lexicon-icon, margin-right)
),
margin-top:
setter(
map-get($map, lexicon-icon-margin-top),
map-get($lexicon-icon, margin-top)
),
)
);
$c-inner: setter(map-get($map, c-inner), ());
$c-inner: map-merge(
(
enabled:
if(
variable-exists(enable-c-inner),
$enable-c-inner,
if(
variable-exists(cadmin-enable-c-inner),
$cadmin-enable-c-inner,
true
)
),
margin-bottom: math-sign(map-get($map, padding-bottom)),
margin-left: math-sign(map-get($map, padding-left)),
margin-right: math-sign(map-get($map, padding-right)),
margin-top: math-sign(map-get($map, padding-top)),
),
$c-inner
);
@if ($enabled) {
@include clay-css($base);
&::before {
@include clay-css(map-get($map, before));
}
&::after {
@include clay-css(map-get($map, after));
}
&:link {
$_link: setter(map-get($map, link), ());
@include clay-css($_link);
&::before {
@include clay-css(map-get($_link, before));
}
&::after {
@include clay-css(map-get($_link, after));
}
.inline-item {
@include clay-css(map-get($_link, inline-item));
}
.inline-item-before {
@include clay-css(map-get($_link, inline-item-before));
}
.inline-item-middle {
@include clay-css(map-get($_link, inline-item-middle));
}
.inline-item-after {
@include clay-css(map-get($_link, inline-item-after));
}
}
&:visited {
$_visited: setter(map-get($map, visited), ());
@include clay-css($_visited);
&::before {
@include clay-css(map-get($_visited, before));
}
&::after {
@include clay-css(map-get($_visited, after));
}
.inline-item {
@include clay-css(map-get($_visited, inline-item));
}
.inline-item-before {
@include clay-css(map-get($_visited, inline-item-before));
}
.inline-item-middle {
@include clay-css(map-get($_visited, inline-item-middle));
}
.inline-item-after {
@include clay-css(map-get($_visited, inline-item-after));
}
}
&:hover,
&.hover {
@include clay-css($hover);
&::before {
@include clay-css(map-get($hover, before));
}
&::after {
@include clay-css(map-get($hover, after));
}
.inline-item {
@include clay-css(map-get($hover, inline-item));
}
.inline-item-before {
@include clay-css(map-get($hover, inline-item-before));
}
.inline-item-middle {
@include clay-css(map-get($hover, inline-item-middle));
}
.inline-item-after {
@include clay-css(map-get($hover, inline-item-after));
}
}
@at-root {
&.focus,
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
@include clay-css($focus);
&::before {
@include clay-css(map-get($focus, before));
}
&::after {
@include clay-css(map-get($focus, after));
}
.inline-item {
@include clay-css(map-get($focus, inline-item));
}
.inline-item-before {
@include clay-css(map-get($focus, inline-item-before));
}
.inline-item-middle {
@include clay-css(map-get($focus, inline-item-middle));
}
.inline-item-after {
@include clay-css(map-get($focus, inline-item-after));
}
}
}
&:active {
@include clay-css($active);
&::before {
@include clay-css(map-get($active, before));
}
&::after {
@include clay-css(map-get($active, after));
}
@at-root {
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
$_active-focus: setter(map-get($active, focus), ());
@include clay-css($_active-focus);
&::before {
@include clay-css(map-get($_active-focus, before));
}
&::after {
@include clay-css(map-get($_active-focus, after));
}
}
}
.inline-item {
@include clay-css(map-get($active, inline-item));
}
.inline-item-before {
@include clay-css(map-get($active, inline-item-before));
}
.inline-item-middle {
@include clay-css(map-get($active, inline-item-middle));
}
.inline-item-after {
@include clay-css(map-get($active, inline-item-after));
}
}
&.active {
@include clay-css($active-class);
&::before {
@include clay-css(map-get($active-class, before));
}
&::after {
@include clay-css(map-get($active-class, after));
}
@at-root {
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
$_active-class-focus: setter(
map-get($active-class, focus),
()
);
@include clay-css($_active-class-focus);
&::before {
@include clay-css(
map-get($_active-class-focus, before)
);
}
&::after {
@include clay-css(
map-get($_active-class-focus, after)
);
}
}
}
.inline-item {
@include clay-css(map-get($active-class, inline-item));
}
.inline-item-before {
@include clay-css(
map-get($active-class, inline-item-before)
);
}
.inline-item-middle {
@include clay-css(
map-get($active-class, inline-item-middle)
);
}
.inline-item-after {
@include clay-css(
map-get($active-class, inline-item-after)
);
}
}
&:disabled,
&.disabled {
@include clay-css($disabled);
&::before {
@include clay-css(map-get($disabled, before));
}
&::after {
@include clay-css(map-get($disabled, after));
}
@at-root {
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
$_disabled-focus: setter(map-get($disabled, focus), ());
@include clay-css($_disabled-focus);
&::before {
@include clay-css(
map-get($_disabled-focus, before)
);
}
&::after {
@include clay-css(map-get($_disabled-focus, after));
}
}
}
&:active {
@include clay-css($disabled-active);
&::before {
@include clay-css(map-get($disabled-active, before));
}
&::after {
@include clay-css(map-get($disabled-active, after));
}
}
.inline-item {
@include clay-css(map-get($disabled, inline-item));
}
.inline-item-before {
@include clay-css(map-get($disabled, inline-item-before));
}
.inline-item-middle {
@include clay-css(map-get($disabled, inline-item-middle));
}
.inline-item-after {
@include clay-css(map-get($disabled, inline-item-after));
}
}
&[type] {
@at-root {
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
@include clay-css($btn-focus);
}
}
}
&[aria-expanded='true'],
&.show {
@include clay-css($show);
&::before {
@include clay-css(map-get($show, before));
}
&::after {
@include clay-css(map-get($show, after));
}
&:hover {
$_show-hover: setter(map-get($show, hover), ());
@include clay-css($_show-hover);
&::before {
@include clay-css(map-get($_show-hover, before));
}
&::after {
@include clay-css(map-get($_show-hover, after));
}
}
@at-root {
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
$_show-focus: setter(map-get($show, focus), ());
@include clay-css($_show-focus);
&::before {
@include clay-css(map-get($_show-focus, before));
}
&::after {
@include clay-css(map-get($_show-focus, after));
}
}
}
.inline-item {
@include clay-css(map-get($show, inline-item));
}
.inline-item-before {
@include clay-css(map-get($show, inline-item-before));
}
.inline-item-middle {
@include clay-css(map-get($show, inline-item-middle));
}
.inline-item-after {
@include clay-css(map-get($show, inline-item-after));
}
}
@if (map-get($c-inner, enabled)) {
> .c-inner {
@include clay-css($c-inner);
}
}
.inline-item {
@include clay-css(map-get($map, inline-item));
}
.inline-item-before {
@include clay-css(map-get($map, inline-item-before));
}
.inline-item-middle {
@include clay-css(map-get($map, inline-item-middle));
+ .inline-item-middle {
@include clay-css(
map-deep-get(
$map,
inline-item-middle,
inline-item-middle
)
);
}
}
.inline-item-after {
@include clay-css(map-get($map, inline-item-after));
}
.lexicon-icon {
@include clay-css($lexicon-icon);
}
$c-link-variants: map-get($map, c-link-variants);
@if ($c-link-variants) {
@each $key, $value in $c-link-variants {
@if not clay-is-map-unset($value) {
$selector: if(
starts-with($key, '.') or starts-with($key, '#'),
$key,
str-insert($key, '.', 1)
);
&#{$selector} {
@include clay-link($value);
}
}
}
}
}
}
}
/// A mixin for styling a text element (e.g., h1, div, span). This is used in Clay CSS for `*-title`, `*-subtitle`, and `*-tertiary-title` elements.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
/// See Mixin `clay-css` for available keys to pass into the base selector
/// link: {Map | Null}, // See Mixin `clay-css` for available keys
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// clay-link: {Map | Null}, // deprecated after 3.9.0 maps to link
/// @todo
/// - Add @example
/// - Add @link to documentation
@mixin clay-text-typography($map) {
@if (type-of($map) == 'map') {
$enabled: setter(map-get($map, enabled), true);
@if ($enabled) {
$clay-link: setter(map-get($map, clay-link), ());
$link: setter(map-get($map, link), ());
$link: map-merge($link, $clay-link);
$href: setter(map-get($map, href), ());
$href: map-deep-merge($href, $link);
@include clay-css($map);
&::before {
@include clay-css(map-get($map, before));
}
&::after {
@include clay-css(map-get($map, after));
}
&:first-child {
@include clay-css(map-get($map, first-child));
}
&:last-child {
@include clay-css(map-get($map, last-child));
}
&[href],
a[href] {
@include clay-link($href);
}
}
}
}
/// Shortcut for mixin `clay-text-typography`
/// @param {Map} $map - A map of `key: value` pairs.
@mixin clay-title($map) {
@include clay-text-typography($map);
}