$listpaging-padding: dynamic(13px 0);
$listpaging-padding-big: dynamic($listpaging-padding);
$listpaging-background-color: dynamic(null);
$listpaging-disabled-background-color: dynamic(null);
$listpaging-border-width: dynamic(null);
$listpaging-border-style: dynamic(null);
$listpaging-border-color: dynamic(null);
$listpaging-message-text-align: dynamic(center);
$listpaging-message-color: dynamic($active-color);
$listpaging-disabled-message-color: dynamic($color);
$listpaging-message-font-size: dynamic($font-size);
$listpaging-message-font-size-big: dynamic($font-size-big);
$listpaging-spinner-font-size: dynamic(180%);
$listpaging-spinner-font-size-big: dynamic($listpaging-spinner-font-size);
$listpaging-spinner-margin: dynamic(0 auto);
@mixin listpaging-ui(
$ui: null,
$xtype: listpaging,
$padding: null,
$padding-big: null,
$background-color: null,
$disabled-background-color: null,
$border-width: null,
$border-style: null,
$border-color: null,
$message-text-align: null,
$message-color: null,
$disabled-message-color: null,
$message-font-size: null,
$message-font-size-big: null,
$spinner-font-size: null,
$spinner-font-size-big: null,
$spinner-margin: null
) {
$ui-suffix: ui-suffix($ui);
.#{$prefix}#{$xtype}#{$ui-suffix} {
padding: $padding;
background-color: $background-color;
@include border($border-width, $border-style, $border-color);
.#{$prefix}big & {
padding: $padding-big;
}
&.#{$prefix}disabled {
background-color: $disabled-background-color;
.#{$prefix}message {
color: $disabled-message-color;
}
}
.#{$prefix}message {
color: $message-color;
text-align: $message-text-align;
font-size: $message-font-size;
.#{$prefix}big & {
font-size: $message-font-size-big;
}
}
.#{$prefix}loading-spinner {
font-size: $spinner-font-size;
margin: $spinner-margin;
.#{$prefix}big & {
font-size: $spinner-font-size-big;
}
}
}
}