META-INF.resources._unstyled.css.clay.mixins._panels.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 panels
////
/// A mixin to create Panel variants. You can base your variant off `.panel` or create your own base class (e.g., `` or ``).
/// @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
/// header: {Map | Null}, // See Mixin `clay-css` for available keys
/// header-collapsed: {Map | Null}, // See Mixin `clay-css` for available keys
/// header-c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
/// header-link: {Map | Null}, // See Mixin `clay-link` for available keys
/// title: {Map | Null}, // See Mixin `clay-css` for available keys
/// collapse-icon: {Map | Null}, // See Mixin `clay-css` for available keys
/// body: {Map | Null}, // See Mixin `clay-css` for available keys
/// footer: {Map | Null}, // See Mixin `clay-css` for available keys
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null}, // deprecated after 3.9.0
/// header-bg: {Color | String | Null}, // deprecated after 3.9.0
/// header-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// header-border-style: {String | List | Null}, // deprecated after 3.9.0
/// header-border-width: {Number | String | List | Null}, // deprecated after 3.9.0
/// header-color: {Color | String | Null}, // deprecated after 3.9.0
/// header-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// header-margin-left: {Number | String | Null}, // deprecated after 3.9.0
/// header-margin-right: {Number | String | Null}, // deprecated after 3.9.0
/// header-margin-top: {Number | String | Null}, // deprecated after 3.9.0
/// header-padding-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// header-padding-left: {Number | String | Null}, // deprecated after 3.9.0
/// header-padding-right: {Number | String | Null}, // deprecated after 3.9.0
/// header-padding-top: {Number | String | Null}, // deprecated after 3.9.0
/// header-transition: {String | List | Null}, // deprecated after 3.9.0
/// header-collapsed-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// title-font-size: {Number | String | Null}, // deprecated after 3.9.0
/// title-font-weight: {Number | String | Null}, // deprecated after 3.9.0
/// title-text-transform: {String | List | Null}, // deprecated after 3.9.0
/// collapse-icon-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// collapse-icon-font-size: {Number | String | Null}, // deprecated after 3.9.0
/// collapse-icon-left: {Number | String | Null}, // deprecated after 3.9.0
/// collapse-icon-right: {Number | String | Null}, // deprecated after 3.9.0
/// collapse-icon-top: {Number | String | Null}, // deprecated after 3.9.0
/// body-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// body-margin-left: {Number | String | Null}, // deprecated after 3.9.0
/// body-margin-right: {Number | String | Null}, // deprecated after 3.9.0
/// body-margin-top: {Number | String | Null}, // deprecated after 3.9.0
/// body-padding-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// body-padding-left: {Number | String | Null}, // deprecated after 3.9.0
/// body-padding-right: {Number | String | Null}, // deprecated after 3.9.0
/// body-padding-top: {Number | String | Null}, // deprecated after 3.9.0
/// footer-bg: {Color | String | Null}, // deprecated after 3.9.0
/// footer-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
/// footer-color: {Color | String | Null}, // deprecated after 3.9.0
/// @todo
/// - Add @example
/// - Add @link to documentation
@mixin clay-panel-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)),
)
);
$header: setter(map-get($map, panel-header), map-get($map, header), ());
$header: map-merge(
$header,
(
background-color:
setter(
map-get($map, header-bg),
map-get($header, background-color)
),
border-color:
setter(
map-get($map, header-border-color),
map-get($header, border-color)
),
border-style:
setter(
map-get($map, header-border-style),
map-get($header, border-style)
),
border-width:
setter(
map-get($map, header-border-width),
map-get($header, border-width)
),
color:
setter(
map-get($map, header-color),
map-get($header, color)
),
margin-bottom:
setter(
map-get($map, header-margin-bottom),
map-get($header, margin-bottom)
),
margin-left:
setter(
map-get($map, header-margin-left),
map-get($header, margin-left)
),
margin-right:
setter(
map-get($map, header-margin-right),
map-get($header, margin-right)
),
margin-top:
setter(
map-get($map, header-margin-top),
map-get($header, margin-top)
),
padding-bottom:
setter(
map-get($map, header-padding-bottom),
map-get($header, padding-bottom)
),
padding-left:
setter(
map-get($map, header-padding-left),
map-get($header, padding-left)
),
padding-right:
setter(
map-get($map, header-padding-right),
map-get($header, padding-right)
),
padding-top:
setter(
map-get($map, header-padding-top),
map-get($header, padding-top)
),
transition:
setter(
map-get($map, header-transition),
map-get($header, transition)
),
)
);
$old-header-collapsed: setter(map-get($map, header-collapsed), ());
$header-collapsed: setter(map-get($header, collapsed), ());
$header-collapsed: map-merge($header-collapsed, $old-header-collapsed);
$header-collapsed: map-merge(
$header-collapsed,
(
border-color:
setter(
map-get($map, header-collapsed-border-color),
map-get($header-collapsed, border-color)
),
)
);
$old-header-c-inner: setter(map-get($map, header-c-inner), ());
$header-c-inner: setter(map-get($header, c-inner), ());
$header-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,
null
)
),
margin-bottom: math-sign(map-get($header, padding-bottom)),
margin-left: math-sign(map-get($header, padding-left)),
margin-right: math-sign(map-get($header, padding-right)),
margin-top: math-sign(map-get($header, padding-top)),
),
$header-c-inner
);
$old-header-link: setter(map-get($map, header-link), ());
$header-link: setter(map-get($header, link), ());
$header-link: map-deep-merge($header-link, $old-header-link);
$title: setter(map-get($map, panel-title), map-get($map, title), ());
$title: map-merge(
$title,
(
font-size:
setter(
map-get($map, title-font-size),
map-get($title, font-size)
),
font-weight:
setter(
map-get($map, title-font-weight),
map-get($title, font-weight)
),
text-transform:
setter(
map-get($map, title-text-transform),
map-get($title, text-transform)
),
)
);
$collapse-icon: setter(map-get($map, collapse-icon), ());
$collapse-icon: map-merge(
$collapse-icon,
(
bottom:
setter(
map-get($map, collapse-icon-bottom),
map-get($collapse-icon, bottom)
),
font-size:
setter(
map-get($map, collapse-icon-font-size),
map-get($collapse-icon, font-size)
),
left:
setter(
map-get($map, collapse-icon-left),
map-get($collapse-icon, left)
),
right:
setter(
map-get($map, collapse-icon-right),
map-get($collapse-icon, right)
),
top:
setter(
map-get($map, collapse-icon-top),
map-get($collapse-icon, top)
),
)
);
$body: setter(map-get($map, panel-body), map-get($map, body), ());
$body: map-merge(
$body,
(
margin-bottom:
setter(
map-get($map, body-margin-bottom),
map-get($body, margin-bottom)
),
margin-left:
setter(
map-get($map, body-margin-left),
map-get($body, margin-left)
),
margin-right:
setter(
map-get($map, body-margin-right),
map-get($body, margin-right)
),
margin-top:
setter(
map-get($map, body-margin-top),
map-get($body, margin-top)
),
padding-bottom:
setter(
map-get($map, body-padding-bottom),
map-get($body, padding-bottom)
),
padding-left:
setter(
map-get($map, body-padding-left),
map-get($body, padding-left)
),
padding-right:
setter(
map-get($map, body-padding-right),
map-get($body, padding-right)
),
padding-top:
setter(
map-get($map, body-padding-top),
map-get($body, padding-top)
),
)
);
$footer: setter(map-get($map, panel-footer), map-get($map, footer), ());
$footer: map-merge(
$footer,
(
background-color:
setter(
map-get($map, footer-bg),
map-get($footer, background-color)
),
border-color:
setter(
map-get($map, footer-border-color),
map-get($footer, border-color)
),
color:
setter(
map-get($map, footer-color),
map-get($footer, color)
),
)
);
@if ($enabled) {
@include clay-css($base);
.panel-header {
@include clay-css($header);
@if (map-get($header-c-inner, enabled)) {
.c-inner {
@include clay-css($header-c-inner);
}
}
&.collapsed {
@include clay-css($header-collapsed);
}
&.panel-header-link {
@include clay-link($header-link);
}
&.collapse-icon {
$_panel-header: setter(map-get($map, panel-header), ());
@include clay-css(
map-get($_panel-header, '&.collapse-icon')
);
}
&:not(.collapse-icon-middle) {
.collapse-icon-closed,
.collapse-icon-open {
@include clay-css($collapse-icon);
}
}
&.collapse-icon-middle {
$_collapse-icon-middle: setter(
map-get($map, collapse-icon-middle),
()
);
@include clay-css($_collapse-icon-middle);
.collapse-icon-closed,
.collapse-icon-open {
@include clay-css(
map-get($_collapse-icon-middle, collapse-icon)
);
}
}
.panel-group & {
+ .panel-collapse > .panel-body {
border-color: map-get($base, border-color);
}
}
}
.panel-title {
@include clay-css($title);
}
.panel-body {
@include clay-css($body);
}
.panel-footer {
@include clay-css($footer);
}
// For Focus Box Shadow
@at-root {
.panel-group.panel-group-flush & {
.panel-header-link {
&,
&.collapsed {
border-radius: map-get($header-link, border-radius);
}
}
}
}
@content;
}
}
}