/** * @class Ext.dataview.pullrefresh.Bar */ /** * @var $pullrefreshbar-width */$pullrefreshbar-width: dynamic(null); $pullrefreshbar-min-height: dynamic(52px);$pullrefreshbar-min-height-big: dynamic(67px);$pullrefreshbar-color: dynamic($color);$pullrefreshbar-background-color: dynamic($neutral-light-color);$pullrefreshbar-font-size: dynamic(26px);$pullrefreshbar-font-size-big: dynamic(30px);$pullrefreshbar-border-width: dynamic(null);$pullrefreshbar-border-style: dynamic(null);$pullrefreshbar-border-color: dynamic(null); $pullrefreshbar-arrow-width: dynamic(13px);$pullrefreshbar-arrow-icon: dynamic($fa-var-long-arrow-down);$pullrefreshbar-arrow-icon-color: dynamic($base-color);$pullrefreshbar-arrow-icon-font-size: dynamic(250%);$pullrefreshbar-arrow-icon-font-size-big: dynamic($pullrefreshbar-arrow-icon-font-size); $pullrefreshbar-bottom-box-shadow: dynamic(0 2px 4px 0 rgba(0, 0, 0, .2)); $pullrefreshbar-text-margin: dynamic(0 0 0 26px);$pullrefreshbar-text-margin-big: dynamic($pullrefreshbar-text-margin); $pullrefreshbar-spinner-font-size: dynamic(null);$pullrefreshbar-spinner-font-size-big: dynamic($pullrefreshbar-spinner-font-size);$pullrefreshbar-spinner-padding: dynamic(null);$pullrefreshbar-spinner-padding-big: dynamic(null);$pullrefreshbar-spinner-background-color: dynamic(null);$pullrefreshbar-spinner-border-radius: dynamic(null);$pullrefreshbar-spinner-border-radius-big: dynamic(null); @mixin pullrefreshbar-ui( $xtype: pullrefreshbar, $ui: null, $width: null, $min-height: null, $min-height-big: null, $color: null, $background-color: null, $font-size: null, $font-size-big: null, $border-width: null, $border-style: null, $border-color: null, $arrow-width: null, $bottom-box-shadow: null, $arrow-icon: null, $arrow-icon-color: null, $arrow-icon-font-size: null, $arrow-icon-font-size-big: null, $text-margin: null, $text-margin-big: null, $spinner-font-size: null, $spinner-font-size-big: null, $spinner-padding: null, $spinner-padding-big: null, $spinner-background-color: null, $spinner-border-radius: null, $spinner-border-radius-big: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { width: $width; min-height: $min-height; background-color: $background-color; @include border($border-width, $border-style, $border-color); @if $enable-big { .#{$prefix}big & { min-height: $min-height-big; } } &.#{$prefix}pullrefresh-overlay { box-shadow: $bottom-box-shadow; } .#{$prefix}pullrefreshbar-loading-wrap { padding: $spinner-padding; background-color: $spinner-background-color; @include border-radius($spinner-border-radius); // Remember, states come from the base and are "x-pullrefresh" // not "x-pullrefreshbar" .#{$prefix}pullrefresh-loading { font-size: $spinner-font-size; } @if $enable-big { .#{$prefix}big & { font-size: $spinner-font-size-big; padding: $spinner-padding-big; @include border-radius($spinner-border-radius-big); .#{$prefix}pullrefresh-loading { font-size: $spinner-font-size-big; } } } } .#{$prefix}pullrefreshbar-info-wrap { margin: $text-margin; @if $enable-big { .#{$prefix}big & { margin: $text-margin-big; } } } @if $arrow-icon != null { .#{$prefix}pullrefreshbar-arrow { width: $arrow-width; color: $arrow-icon-color; font-size: $arrow-icon-font-size; @include font-icon($arrow-icon); @include rotate(180); transition: all 0.5s; @if $enable-big { .#{$prefix}big & { font-size: $arrow-icon-font-size-big; } } } &.#{$prefix}pullrefresh-pulling .#{$prefix}pullrefreshbar-arrow { @include rotate(0); } } }}