META-INF.resources._unstyled.css.clay.mixins._labels.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 Labels
////
/// A mixin for creating `.label` size variants.
/// @deprecated use `clay-label-variant` instead
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// border-width: {Number | String | List | Null}, // Default: $label-border-width
/// font-size: {Number | String | Null},
/// height: {Number | String | Null},
/// line-height: {Number | String | Null},
/// margin-bottom: {Number | String | Null},
/// margin-left: {Number | String | Null},
/// margin-right: {Number | String | Null},
/// margin-top: {Number | String | Null},
/// padding-x: {Number | String | Null},
/// padding-y: {Number | String | Null},
/// text-transform: {String | List | Null},
/// item-spacer-x: {Number | String | Null},
/// item-spacer-y: {Number | String | Null},
/// lexicon-icon-height: {Number | String | Null}, // Default: map-get($map, lexicon-icon-width)
/// lexicon-icon-margin-top: {Number | String | Null},
/// lexicon-icon-width: {Number | String | Null},
/// sticker-border-radius: {Number | String | List | Null},
/// sticker-size: {Number | String | Null},
/// close: {Map | Null}, // Pass parameters to `clay-close` mixin
/// c-inner: {Map | Null}, // Pass parameters to `clay-css` mixin
@mixin clay-label-size($map) {
@if (type-of($map) == 'map') {
$enabled: setter(map-get($map, enabled), true);
$base: setter($map, ());
$base: map-merge(
$base,
(
border-width:
setter(
map-get($base, border-width),
if(
variable-exists(label-border-width),
$label-border-width,
if(
variable-exists(cadmin-label-border-width),
$cadmin-label-border-width,
null
)
)
),
padding-bottom:
setter(
map-get($map, padding-y),
map-get($base, padding-bottom)
),
padding-left:
setter(
map-get($map, padding-x),
map-get($base, padding-left)
),
padding-right:
setter(
map-get($map, padding-x),
map-get($base, padding-right)
),
padding-top:
setter(
map-get($map, padding-y),
map-get($base, padding-top)
),
)
);
$label-item: setter(map-get($map, label-item), ());
$label-item: map-merge(
$label-item,
(
margin-bottom:
setter(
map-get($map, item-spacer-y),
map-get($label-item, margin-bottom)
),
margin-top:
setter(
map-get($map, item-spacer-y),
map-get($label-item, margin-top)
),
)
);
$label-item-before: setter(map-get($map, label-item-before), ());
$label-item-before: map-merge(
$label-item-before,
(
margin-right:
setter(
map-get($map, item-spacer-x),
map-get($label-item-before, margin-right)
),
)
);
$label-item-after: setter(map-get($map, label-item-after), ());
$label-item-after: map-merge(
$label-item-after,
(
margin-left:
setter(
map-get($map, item-spacer-x),
map-get($label-item-after, margin-left)
),
)
);
$lexicon-icon: setter(map-get($map, lexicon-icon), ());
$lexicon-icon: map-merge(
$lexicon-icon,
(
height:
setter(
map-get($map, lexicon-icon-height),
map-get($lexicon-icon, height),
map-get($lexicon-icon, width)
),
margin-top:
setter(
map-get($map, lexicon-icon-margin-top),
map-get($lexicon-icon, margin-top)
),
width:
setter(
map-get($map, lexicon-icon-width),
map-get($lexicon-icon, width)
),
)
);
$sticker: setter(map-get($map, sticker), ());
$sticker: map-merge(
$sticker,
(
border-radius:
setter(
map-get($map, sticker-border-radius),
map-get($sticker, border-radius)
),
height:
setter(
map-get($map, sticker-size),
map-get($sticker, height)
),
line-height:
setter(
map-get($map, sticker-size),
map-get($sticker, line-height)
),
width:
setter(
map-get($map, sticker-size),
map-get($sticker, width)
),
)
);
$sticker-overlay: setter(map-get($map, sticker-overlay), ());
$sticker-overlay: map-merge(
$sticker-overlay,
(
border-radius:
setter(
map-get($sticker-overlay, border-radius),
map-get($sticker, border-radius)
),
)
);
$c-inner: setter(map-get($map, c-inner), ());
$c-inner: map-deep-merge(
$c-inner,
(
enabled:
if(
variable-exists(enable-c-inner),
$enable-c-inner,
if(
variable-exists(cadmin-enable-c-inner),
$cadmin-enable-c-inner,
true
)
),
margin-bottom:
setter(
map-get($c-inner, margin-bottom),
math-sign(map-get($base, padding-bottom))
),
margin-left:
setter(
map-get($c-inner, margin-left),
math-sign(map-get($base, padding-left))
),
margin-right:
setter(
map-get($c-inner, margin-right),
math-sign(map-get($base, padding-right))
),
margin-top:
setter(
map-get($c-inner, margin-top),
math-sign(map-get($base, padding-top))
),
)
);
@if ($enabled) {
@include clay-css($base);
// Inline Item in Labels are deprecated in v2.0.0-rc.11 use .label-item
// pattern instead
.inline-item {
a,
.btn-unstyled,
.close {
margin-top: map-get($lexicon-icon, margin-top);
}
.lexicon-icon {
@include clay-css($lexicon-icon);
}
}
.label-item {
@include clay-css($label-item);
.lexicon-icon {
@include clay-css($lexicon-icon);
}
}
.label-item-expand {
@include clay-css(map-get($map, label-item-expand));
}
.label-item-before {
@include clay-css($label-item-before);
}
.label-item-after {
@include clay-css($label-item-after);
}
.close {
@include clay-close(map-get($map, close));
}
.sticker {
@include clay-css($sticker);
}
.sticker-overlay {
@include clay-css($sticker-overlay);
}
@if (map-get($c-inner, enabled)) {
> .c-inner {
@include clay-css($c-inner);
}
}
}
}
}
/// A mixin for creating `.label` variants.
/// @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
/// disabled: (
/// // .your-variant-name:disabled, .your-variant-name.disabled
/// ),
/// href: (
/// // .your-variant-name[href], .your-variant-name[type], .your-variant-name[tabindex='0']
/// ),
/// lexicon-icon: (
/// // .your-variant-name .lexicon-icon
/// ),
/// label-item: (
/// // .your-variant-name .label-item
/// lexicon-icon: (
/// // This inherits from `lexicon-icon` unless you overwrite or unset it
/// // .your-variant-name .label-item .lexicon-icon
/// ),
/// ),
/// label-item-before: (
/// // .your-variant-name .label-item-before
/// ),
/// label-item-after: (
/// // .your-variant-name .label-item-after
/// ),
/// link: (
/// // .your-variant-name a, .your-variant-name .btn-unstyled
/// hover: (),
/// focus: (),
/// active: (),
/// active-class: (),
/// show: (),
/// disabled: (
/// active: (),
/// ),
/// c-inner: (),
/// lexicon-icon: (),
/// ),
/// close: (
/// hover: (),
/// focus: (),
/// active: (),
/// active-class: (),
/// disabled: (
/// active: (),
/// ),
/// c-inner: (),
/// lexicon-icon: (),
/// ),
/// sticker: (
/// // .your-variant-name .sticker
/// ),
/// sticker-overlay: (
/// // .your-variant-name .sticker-overlay
/// ),
/// c-inner: (),
/// )
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null}, // deprecated after 3.7.0
/// hover-bg: {Color | String | Null}, // deprecated after 3.7.0
/// hover-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
/// hover-color: {Color | String | Null}, // deprecated after 3.7.0
/// hover-text-decoration: {String | Null}, // deprecated after 3.7.0
/// focus-bg: {Color | String | Null}, // deprecated after 3.7.0
/// focus-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
/// focus-box-shadow: {String | List | Null}, // deprecated after 3.7.0
/// focus-color: {Color | String | Null}, // deprecated after 3.7.0
/// focus-outline: {Number | String | Null}, // deprecated after 3.7.0
/// focus-text-decoration: {String | Null}, // deprecated after 3.7.0
/// disabled-bg: {Color | String | Null}, // deprecated after 3.7.0
/// disabled-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
/// disabled-box-shadow: {String | List | Null}, // deprecated after 3.7.0
/// disabled-color: {Color | String | Null}, // deprecated after 3.7.0
/// link-color: {Color | String | Null}, // deprecated after 3.7.0
/// link-text-decoration: {String | Null}, // deprecated after 3.7.0
/// link-hover-color: {Color | String | Null}, // deprecated after 3.7.0
/// link-hover-text-decoration: {String | Null}, // deprecated after 3.7.0
/// link-hover: {Map | Null}, // deprecated after 3.38.0
@mixin clay-label-variant($map) {
@if (type-of($map) == 'map') {
$enabled: setter(map-get($map, enabled), true);
$base: map-merge(
$map,
(
background-color:
setter(map-get($map, bg), map-get($map, background-color)),
padding-bottom:
setter(
map-get($map, padding-y),
map-get($map, padding-bottom)
),
padding-left:
setter(
map-get($map, padding-x),
map-get($map, padding-left)
),
padding-right:
setter(
map-get($map, padding-x),
map-get($map, padding-right)
),
padding-top:
setter(
map-get($map, padding-y),
map-get($map, padding-top)
),
)
);
$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)
),
)
);
$href: setter(map-get($map, href), ());
$href: map-deep-merge(
$href,
(
hover: (
background-color:
setter(
map-get($map, hover-bg),
map-deep-get($map, hover, background-color),
map-deep-get($href, hover, background-color)
),
border-color:
setter(
map-get($map, hover-border-color),
map-deep-get($map, hover, border-color),
map-deep-get($href, hover, border-color)
),
color:
setter(
map-get($map, hover-color),
map-deep-get($map, hover, color),
map-deep-get($href, hover, color)
),
text-decoration:
setter(
map-get($map, hover-text-decoration),
map-deep-get($map, hover, text-decoration),
map-deep-get($href, hover, text-decoration)
),
),
focus: (
background-color:
setter(
map-get($map, focus-bg),
map-deep-get($map, focus, background-color),
map-deep-get($href, focus, background-color)
),
border-color:
setter(
map-get($map, focus-border-color),
map-deep-get($map, focus, border-color),
map-deep-get($href, focus, border-color)
),
box-shadow:
setter(
map-get($map, focus-box-shadow),
map-deep-get($map, focus, box-shadow),
map-deep-get($href, focus, box-shadow)
),
color:
setter(
map-get($map, focus-color),
map-deep-get($map, focus, color),
map-deep-get($href, focus, color)
),
outline:
setter(
map-get($map, focus-outline),
map-deep-get($map, focus, outline),
map-deep-get($href, focus, outline)
),
text-decoration:
setter(
map-get($map, focus-text-decoration),
map-deep-get($map, focus, text-decoration),
map-deep-get($href, focus, text-decoration)
),
),
)
);
$lexicon-icon: setter(map-get($map, lexicon-icon), ());
$lexicon-icon: map-merge(
$lexicon-icon,
(
height:
setter(
map-get($map, lexicon-icon-height),
map-get($lexicon-icon, height),
map-get($lexicon-icon, width)
),
margin-top:
setter(
map-get($map, lexicon-icon-margin-top),
map-get($lexicon-icon, margin-top)
),
width:
setter(
map-get($map, lexicon-icon-width),
map-get($lexicon-icon, width)
),
)
);
$label-item: setter(map-get($map, label-item), ());
$label-item: map-merge(
$label-item,
(
margin-bottom:
setter(
map-get($map, item-spacer-y),
map-get($label-item, margin-bottom)
),
margin-top:
setter(
map-get($map, item-spacer-y),
map-get($label-item, margin-top)
),
lexicon-icon: (
height:
setter(
map-get($map, lexicon-icon-height),
map-get($lexicon-icon, height),
map-get($lexicon-icon, width),
map-deep-get($label-item, lexicon-icon, height),
map-deep-get($label-item, lexicon-icon, width)
),
margin-top:
setter(
map-get($map, lexicon-icon-margin-top),
map-get($lexicon-icon, margin-top),
map-deep-get($label-item, lexicon-icon, margin-top)
),
width:
setter(
map-get($map, lexicon-icon-width),
map-get($lexicon-icon, width),
map-deep-get($label-item, lexicon-icon, width)
),
),
)
);
$label-item-before: setter(map-get($map, label-item-before), ());
$label-item-before: map-merge(
$label-item-before,
(
margin-right:
setter(
map-get($map, item-spacer-x),
map-get($label-item-before, margin-right)
),
)
);
$label-item-after: setter(map-get($map, label-item-after), ());
$label-item-after: map-merge(
$label-item-after,
(
margin-left:
setter(
map-get($map, item-spacer-x),
map-get($label-item-after, margin-left)
),
)
);
$link: setter(map-get($map, link), ());
$link: map-deep-merge(
$link,
(
color: setter(map-get($map, link-color), map-get($link, color)),
text-decoration:
setter(
map-get($map, link-text-decoration),
map-get($link, text-decoration)
),
hover: (
color:
setter(
map-get($map, link-hover-color),
map-deep-get($link, hover, color)
),
text-decoration:
setter(
map-get($map, link-hover-text-decoration),
map-deep-get($link, hover, text-decoration)
),
),
)
);
$sticker: setter(map-get($map, sticker), ());
$sticker: map-merge(
$sticker,
(
border-radius:
setter(
map-get($map, sticker-border-radius),
map-get($sticker, border-radius)
),
height:
setter(
map-get($map, sticker-size),
map-get($sticker, height)
),
line-height:
setter(
map-get($map, sticker-size),
map-get($sticker, line-height)
),
width:
setter(
map-get($map, sticker-size),
map-get($sticker, width)
),
)
);
$sticker-overlay: setter(map-get($map, sticker-overlay), ());
$sticker-overlay: map-merge(
$sticker-overlay,
(
border-radius:
setter(
map-get($sticker-overlay, border-radius),
map-get($sticker, border-radius)
),
)
);
$c-inner: setter(map-get($map, c-inner), ());
$c-inner: map-deep-merge(
$c-inner,
(
enabled:
setter(
if(
variable-exists(enable-c-inner),
$enable-c-inner,
if(
variable-exists(cadmin-enable-c-inner),
$cadmin-enable-c-inner,
true
)
)
),
margin-bottom:
setter(
map-get($c-inner, margin-bottom),
math-sign(map-get($map, padding-bottom))
),
margin-left:
setter(
map-get($c-inner, margin-left),
math-sign(map-get($map, padding-left))
),
margin-right:
setter(
map-get($c-inner, margin-right),
math-sign(map-get($map, padding-right))
),
margin-top:
setter(
map-get($c-inner, margin-top),
math-sign(map-get($map, padding-top))
),
)
);
@if ($enabled) {
@include clay-css($map);
&:disabled,
&.disabled {
@include clay-css($disabled);
}
&[href],
&[type],
&[tabindex] {
@include clay-link($href);
}
.lexicon-icon {
@include clay-css($lexicon-icon);
}
.label-item {
@include clay-css($label-item);
.lexicon-icon {
@include clay-css($lexicon-icon);
}
}
.label-item-expand {
@include clay-css(map-get($map, label-item-expand));
}
.label-item-before {
@include clay-css($label-item-before);
}
.label-item-after {
@include clay-css($label-item-after);
}
a,
.btn-unstyled {
@include clay-link($link);
}
.close {
@include clay-close(map-get($map, close));
}
.sticker {
@include clay-css($sticker);
}
.sticker-overlay {
@include clay-css($sticker-overlay);
}
@if (map-get($c-inner, enabled)) {
> .c-inner {
@include clay-css($c-inner);
}
}
}
}
}