@clayui/pagination
Advanced tools
Changelog
3.43.0 (2021-12-29)
white-space: normal
(2cc5b51)white-space: normal
(bca3c47)clay-label-variant
check if parameter is map to avoid not a map error (2153059)clay-dropdown-item-variant
split up &.autofit-row
and .autofit-row
(a314710)clay-dropdown-menu-variant
allow customizing .dropdown-item
(45cb0e5)clay-nav-variant
don't set to empty map (22f183d)clay-nav-variant
to output selectors related to nav (743d75a)$btn-palette
/ $btn-outline-palette
(3d46a41)$btn-sizes
and $btn-monospaced-sizes
(a29764a)dropdown-menu-width-shrink
(1d86dfa)clay-css
mixin pattern (d79e115)dropdown-menu-width-shrink
(b5f9a8d)clay-form-control-variant
adds input-group-inset-item
(391e5d9)clay-input-group-variant
, clay-input-group-item-variant
(6e02e60)clay-css
mixin pattern (03881e7)shrink
modifier support to DropDown.Menu (e770a1f)indicatorLabel
API to indicate the position of the indicator label (bb43ff8)Changelog
3.42.0 (2021-12-15)
.dropdown-toggle-split
should use calc to calculate padding (8d88a2d), closes #4499clay-navbar-variant
to use new keys (8aa1044)clay-navbar-variant
to use new keys (4f4ba86)border-color
and border-style
for Management Bar and Navigation Bar base (e67c284)clay-button-variant
unbundles .show
from .active
(73227a0)clay-toggle-switch-bar-variant
adds .button-icon-off
selector (6d3e8fe), closes #4486clay-link
and clay-close
Removes the .show > &
selector (9b523cf)clay-navbar-variant
convert to clay-css
mixin pattern (59b722b)clay-navbar-variant
don't output properties if param is empty map (e6230e7)simple-toggle-switch
(8f86cd6), closes #4484clay-css
mixin (d40ef1f)clay-tooltip-variant
mixin (df4011e)clay-button-variant
adds option to style ::before
and ::after
(4003b59)clay-navbar-variant
should be able to output clay-navbar-size
selectors (ffaee2a)clay-pagination-items-per-page-variant
and clay-pagination-variant
(84fff62)clay-popover-variant
(9dc84b1)clay-tooltip-variant
(5bb6319)clay-css
mixin (6a5c2f6)clay-tooltip-variant
mixin (20f89e5)@clayui/css: We previously output navbar-expand-{sm|md|lg|xl}
for the variants of:
We only output those that are needed namely, navbar-expand-md
. If you relied upon other breakpoints you will need to declare them in the respective Sass map or set:
$application-bar-base: (
media-breakpoint-down: $c-unset,
media-breakpoint-up: $c-unset,
);
to revert back to the old way.
clay-navbar-variant
output border-color: transparent
and border-style: solid
by default. This has been removed to reduce unnecessary CSS. You will need to declare them in your Sass map if you relied upon it.Changelog
3.41.0 (2021-12-02)
select.form-control
size and multiple styles should match Lexicon (b357b31)select.form-control
size and multiple styles should match Lexicon (7e73f27)clay-link
nested disabled:(active: ())
should output styles (4492f57)a
tag to use clay-link
mixin (47d6130)a
tag to use clay-link
mixin (45536f4)clay-form-validation-variant
to generate states (91bbc2a)clay-form-validation-variant
to generate states (3efaea8)clay-css
adds more text decoration properties (ef06c5b), closes #4447clay-link
add option to style ::before and ::after (330931e)clay-link
adds customization for :link
and :visited
(8a45963)clay-select-variant
adds more configuration options (983de0f)clay-form-validation-variant
adds more selectors (99a311b)clay-form-validation-variant
(22e2d02)Changelog
3.40.0 (2021-11-17)
atlas-variables.scss
and base-variables.scss
should be Sass partials. The CSS equivalent shouldn't be created since these files are only meant to be consumed by .scss
files. (5aaa87e).c-kbd-group > .c-kbd
, .c-kbd-group-sm > .c-kbd
, and .c-kbd-group-lg > .c-kbd
from their respective Sass map variables (5a9ad67), closes #4367clay-card-variant
instead of deprecated mixins to generate styles for .card-type-asset
, .image-card
, .user-card
, .card-type-directory
(7a8b6f7).btn
and .form-control
z-index styles to input-group-prepend
and input-group-append
. Input Groups input disappears when focused inside a modal with iframe. (07f17ce)clay-card-variant
instead of deprecated mixins to generate styles for .card-type-asset
, .image-card
, .user-card
, .card-type-directory
(e244162)$lexicon-icon
, $lexicon-icon-sm
, $lexicon-icon-lg
, $lexicon-icon-xl
Sass maps (efe1b80).btn
and .form-control
z-index styles to input-group-prepend
and input-group-append
. Input Groups input disappears when focused inside a modal with iframe. (64bd8c8)clay-label-variant
hover and focus keys should be nested in href
. The values are output for the selectors .label[href]
, .label[type]
, and .label[tabindex]
. (c9e6442), closes #4383clay-card-variant
adds option to output styles for: (c3e4149)clay-card-variant
adds options to configure &.hover
, &.focus
, and &:disabled, &.disabled
(16affad)clay-card-variant
inlines the setter
's that aren't providing any mapping from old keys to new keys (f0627a8)clay-card-variant
moves the selector &.card, .card
(b2f0f19)clay-card-variant
should be able to output selectors for clay-card-type-asset-variant
, but removes the default values generated in clay-card-type-asset-variant
so it doesn't pollute the final CSS with unused rule-sets. (7bb6050)clay-card-variant
should be able to output selectors for clay-card-type-asset
, but removes the default values generated in clay-card-type-asset
so it doesn't pollute the final CSS with unused rule-sets. (0a3bba0)clay-css
should generate will-change
property (b176c5b)clay-dropdown-item-variant
adds option to output styles for ::before
and ::after
pseudo elements for default, hover, focus, active, .active, and disabled states (8369276), closes #4403clay-label-variant
target [tabindex] instead of [tabindex="0"] so styles still apply when an element is disabled with negative tabindex (734470e)clay-link
changes [@at-root](https://github.com/at-root) { button#{&} { :focus {} } }
to &[type]:focus
this causes issues for compound selectors. It will generate button.a .compound-selector
instead of .a button.compound-selector
. This fix targets the type
attribute which should be on every button element. (5ca9e6d)clay-link
to use newer property names and nesting (d6a25df).alert-fluid
to use clay-alert-variant
mixin (15f9355).alert-fluid
to use clay-alert-variant
mixin (3f3f34e)$cadmin-dropdown-menu
and generate styles for .dropdown-menu
using clay-dropdown-menu-variant
(bbc031a).dropdown-toggle
, .dropdown-subheader
, .dropdown-caption
, .dropdown-item-text
, .dropdown-section
, .dropdown-divider
, .dropdown-action
, and dropdown-menu positional utilities to use Sass maps instead of variables (1f11eba)$dropdown-menu
Sass map and generate properties using it (a0d2382).dropdown-toggle
, .dropdown-subheader
, .dropdown-caption
, .dropdown-item-text
, .dropdown-section
, .dropdown-divider
, .dropdown-action
, and dropdown-menu positional utilities to use Sass maps instead of variables (0cb1ce7).form-fieldset
and .form-legend
to provide alternative fieldset and legend styles without overriding all fieldset
and legend
elements (3fc7449)clay-alert-variant
adds option to pass in styles to &.alert-dismissible
, &.alert-dismissible .container-fluid
, .alert-indicator .lexicon-icon
, and .container-fluid
(807c612)clay-css
if parameter is not type map don't do anything (b994e78)clay-dropdown-menu-variant
add customizing &::before
, &::after
, and &.show
(57903de)clay-link
and clay-button-variant
adds option to customize inline-item
, inline-item-before
, inline-item-middle
and inline-item-after
in default, hover, focus, active, active-class, and disabled states. (84fb0d0), closes #4413fieldset
and legend
styles in Sass maps $fieldset
and $legend
(92e8254)Changelog
3.39.0 (2021-10-29)
clay-div
a function that uses /
as a division operation if the function div()
does not exist (87aec12)$dropdown-item-base
keys to newer nested keys pattern and remove duplicate $dropdown-item-base
(6fc1833)/ 2
to * 0.5
as work around for dart-sass
deprecation message (aa74003)/
to multiplication as work around for dart-sass
deprecation message (f9948ec)dropdown-menu::after
padding hack for Firefox. This is no longer an issue. (54a0b08)$dropdown-item-base
keys to newer nested keys pattern (502ea21)clay-dropdown-item-variant
update to accept newer nested keys pattern and deprecate keys: (bcc0e89)clay-dropdown-menu-variant
removes dropdown-menu::after
padding hack for Firefox (a7e2c18)calc()
for calculating widths and sizes instead of Sass division /
and don't use Sass percentage function (1b2e127)yarn develop
command of the clayui.com (fa0d8c0)heading
, maps
, order-ascending
and order-descending
SVG icons and update geolocation
SVG icon (319f37f)custom-control
, custom-checkbox
, and custom-radio
convert to using Sass map pattern (c8826b2)$cadmin-sticker-sizes
Sass map to generate sticker sizes and use Sass placeholders for sticker sizes for easier extends (2630c54)custom-control
, custom-checkbox
, and custom-radio
convert to using Sass map pattern (d60970d)clay-sticker-variant
expand mixin to include most use cases in Clay and make it compatible with deprecated clay-sticker-size
mixin (3e703ed)clay-custom-control-input-variant
and clay-custom-control-variant
mixins (3060c0b)clay-label-variant
to provide selectors that are generated by clay-label-size
(deprecated) and conver to using new Sass map key pattern while still supporting older key names (c0c9a1c)$sticker-sizes
Sass map to generate sticker sizes and use Sass placeholders for sticker sizes for easier extends (2da3013)clay-sticker-variant
and clay-css
mixins for more customizability (f8adb74)sizing
API to Select component (2c7848d)heading
, maps
, order-ascending
, order-descending
and geolocation
SVG icons (a34f3be)Changelog
3.38.0 (2021-10-22)
clay-css
mixin pattern (adbc3ed).btn-group
inside .alert-inline
and increase space between alert-inline buttons and close (48px) (1fb3075).alert-inline .alert-indicator
so it's more centered with the text (6991050)alert-indicator
and text should be 8px (abb1ad9)$alert-indicator-font-size
instead of $alert-font-size
when calculating spacing for the .alert-indicator
(10809da)$badge-close
Sass map to use newer keys for hover and focus (485862c)border-color
is the wrong value. Table Row Variants scoped $border-color
variable was overwriting global $border-color
variable (834209a)clay-css
mixin pattern (915c748).btn-group
inside .alert-inline
and increase space between alert-inline buttons and close (48px) (f6c7a02)modal-body
should have border-top to create separation when components are inserted between modal-header
and modal-body
(b5b33c0)clay-darken
, clay-lighten
, clay-adjust-hue
, clay-desaturate
, clay-saturate
, clay-mix
, clay-blue
, clay-green
, clay-red
. It converts CSS Custom Property fallback values to the correct type before running them through the Sass functions. (189e281)math-sign
uses deprecated [@elseif](https://github.com/elseif)
syntax, changed to [@else](https://github.com/else) if
(bd22a48), closes #4353modal-body
should have border-top to create separation when components are inserted between modal-header
and modal-body
(b3f648e)modal-header
increase z-index so it appears on top of modal-body
. modal-header
border gets hidden by modal-body
border due to last commit. (fd3ae71)node-sass
and add new build file (80f6ec2)onLoadMore
API to TreeView (ff972d7).badge
, .badge-pill
, and badge variants to use clay-badge-variant
mixin (8c9d4eb).badge
and badge variants to use clay-badge-variant
mixin (a2b04b2)$enable-clay-color-functions-process-fallback
and $cadmin-enable-clay-color-functions-process-fallback
variables. This forces Clay color functions to return the CSS Custom Property instead of processing the fallback color and returning a hex value. (15a6bc1)clay-alert-variant
adds option to configure .alert-indicator
(0c9f913)clay-alert-variant
adds option to pass in styles to .alert-indicator + .lead
(ff5146b)clay-badge-variant
(dc52ed1)Changelog
3.37.0 (2021-10-06)
$alert-*-btn
variant Sass maps to use newer keys (ecdd38a)clay-alert-variant
mixin to generate alert variant styles (9be70d7)alert-inline
should have more space between text and top / bottom borders (29c4764)$alert-font-size
to 0.875rem
and change $alert-indicator-font-size
to 1rem
(21d33ed)sticker-light
and sticker-dark
(adcd19f)$alert-*-btn
variant Sass maps to use newer keys and update $cadmin-alert-palette
to use $alert-*
variant Sass maps (6a4a100)clay-alert-variant
mixin to generate alert variant styles (3410faf).form-feedback-group
, .form-feedback-item
,.form-feedback-indicator
, and .form-text
(db26016), closes #4298fieldset[disabled] .form-control
should use values from the $cadmin-input
Sass map and move rule-set closer to the .form-control
rule-set (0504ff2)label.disabled
should use properties declared in $cadmin-input-label
map and move the label.disabled
rule-set closer to the label
rule-set (d00b97b)url("data:image/svg+xml,<svg></svg>")
to use clay-svg-url
(c1cd8a2)clay-form-control-variant
to style Danger, Warning, Success readonly inputs instead of clay-button-variant
(23ed8cb)fieldset[disabled] .form-control
should use values from the $input
Sass map and move rule-set closer to the .form-control
rule-set (9ffc635)label.disabled
should use properties declared in $input-label
map and move the label.disabled
rule-set closer to the label
rule-set (0ea7c72)math-sign
should return a negative calc value if a CSS custom property is passed in (e824c5d)escape-svg
function (e8ffa5d)$enable-hover-media-query
, $caret-width
, $caret-vertical-align
, $caret-spacing
, $emphasized-link-hover-darken-percentage
(54d39f9)$escaped-characters
variable (9b93ca0)math-sign
function (835a62a)clay-alert-variant
mixin and deprecate Bootstrap's alert-variant
mixin (a3f1722)treeview-dropping-bottom
, treeview-dropping-inside
and treeview-dropping-top
(f0b4c5e).alert-inline
, alert-autofit-stacked
, alert-autofit-stacked-sm-down
, alert-autofit-stacked-xs-down
, alert-indicator-start
(7738e78).alert-inline
, alert-autofit-stacked
, alert-autofit-stacked-sm-down
, alert-autofit-stacked-xs-down
, alert-indicator-start
(b60b0c7)$cadmin-input-danger
, $cadmin-input-warning
, $cadmin-input-success
, $cadmin-input-danger-select
, $cadmin-input-warning-select
, $cadmin-input-success-select
Sass maps with clay-form-control-variant
and clay-select-variant
for more customization options (df1e426)$input-danger
, $input-warning
, $input-success
, $input-danger-select
, $input-warning-select
, $input-success-select
Sass maps with clay-form-control-variant
and clay-select-variant
for more customization options (c23c8f5)sticker-light
now has a light font color and sticker-dark
has a dark font color. All instances of sticker-light
should be updated to use sticker-dark
and all instances of sticker-dark
should be updated to use sticker-light
. If you do not want to make this change in your markup, you can revert back to the original styles with:$sticker-light-bg: $dark !default;
$sticker-light-color: $white !default;
$sticker-dark-bg: $dark !default;
$sticker-dark-color: $white !default;
See issue https://github.com/liferay/clay/issues/4310 for more context.
Changelog
3.36.0 (2021-09-23)
.btn-monospaced
icons are off center by a pixel, use display: inline-flex
to center and remove padding. If you need items to display inline in .btn-monospaced
wrap them in a span
tag. (ece0b5b)clay-enable-transitions
should return $transitions
instead of $transition
(ca2d59a)clay-enable-transitions
the variable $enable-transitions
isn't available in Cadmin, use $enable
instead (bd4e1c5)clay-button-variant
adds option to style :disabled:focus
, mostly for removing focus shadow on disabled .btn
(bb942f9)clay-button-variant
c-inner should work if mobile sizes are enabled (a0a005c)clay-button-variant
remove outputting a.btn, button.btn { cursor: pointer; }
we can pass it in directly to .btn
(d5a1942)width
property of the Menu (f29681e)closeOnClickOutside
API support to DropDown (ece1061)expanderIcons
API to change icons throughout the structure (455002c).btn-lg
and .btn-sm
to use clay-button-variant
mixin (f6b3e95).btn-unstyled
, .btn-monospaced
, .btn-monospaced-lg
, .btn-monospaced-sm
, .btn-outline-borderless
to use clay-button-variant
mixin (4c16ce5).btn
to use clay-button-variant
mixin (617befc).btn
, .btn-lg
, .btn-sm
, .btn-monospaced
, .btn-monospaced-sm
, .btn-monospaced-lg
, .btn-unstyled
, and .btn-outline-borderless
to use clay-button-variant
mixin (8481f19)starts-with($str1, $str2)
. A function that determines whether the string $str1
begins with the characters of the specified string $str2
. (6ddef3e)clay-css
if transition has a value other than null
or none
, it should output a prefers-reduced-motion media query (95b5c08)clay-css
should output any CSS Custom Properties passed into it. (a78ddfa), closes #4252