@import '../global';
/**
* @class Ext.dataview.List
*/
/**
* @var {color} $list-color
* Text color for list rows.
*/
$list-color: #000 !default;
/**
* @var {color} $list-bg-color
* Background-color for list rows.
*/
$list-bg-color: #f7f7f7 !default;
/**
* @var {color} $include-list-highlights
* Optionally disable all list gradients, text-shadows, and box-shadows. Useful for CSS debugging,
* non-performant browsers, or minimalist designs.
*/
$include-list-highlights: $include-highlights !default;
/**
* @var {boolean} $list-zebrastripe
* Optionally zebra-stripe the list (alternating background colors).
*/
$list-zebrastripe: false !default;
/**
* @var {color} $list-pressed-color
* Background-color for pressed list rows.
*/
$list-pressed-color: lighten($active-color, 50%) !default;
/**
* @var {color} $list-active-color
* Background-color for selected list rows.
*/
$list-active-color: $active-color !default;
/**
* @var {string} $list-active-gradient
* Gradient style for selected list rows.
*/
$list-active-gradient: $base-gradient !default;
* @var {color} $list-header-bg-color
* Background-color for list header rows (in grouped lists).
*/
$list-header-bg-color: lighten(saturate($base-color, 10%), 20%) !default;
* @var {string} $list-header-gradient
* Gradient style for list header rows (in grouped lists).
*/
$list-header-gradient: $base-gradient !default;
/**
* @var {measurement} $list-disclosure-size
* Default size (width/height) for disclosure icons.
*/
$list-disclosure-size: 1.7em;
/**
* @var {measurement} $list-disclosure-round-size
* Default size (width/height) for disclosure icons in a list with a `round` ui.
*/
$list-disclosure-round-size: 1.5em;
/**
* @var {measurement} $list-round-padding
* Default padding for lists with a `round` ui.
*/
$list-round-padding: 13px !default;
/**
* Includes default list styles.
*/
@mixin sencha-list {
.x-list {
position: relative;
background-color: $list-bg-color;
overflow: hidden;
.x-list-inner {
width: 100% !important;
}
.x-list-disclosure {
overflow: visible;
-webkit-mask: 0 0 theme_image($theme-name, "disclosure.png") no-repeat;
-webkit-mask-size: $list-disclosure-size;
@include background-gradient(saturate($active-color, 10%));
width: $list-disclosure-size;
height: $list-disclosure-size;
margin: 0.5em 0.5em 0 0;
}
.x-list-emptytext {
text-align: center;
pointer-events: none;
font-size: #333333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
}
&.x-list-indexed .x-list-disclosure {
margin-right: 1.8em;
}
.x-item-selected .x-list-disclosure {
background: #fff none;
}
.x-list-scrolldock-hidden {
display: none;
}
.x-list-item {
position: absolute !important;
left: 0;
top: 0;
color: $list-color;
width: 100%;
&.x-item-pressed {
.x-dock-horizontal {
background: $list-pressed-color none;
}
}
&.x-item-selected .x-dock-horizontal {
@include background-gradient($list-active-color, $list-active-gradient);
@include color-by-background($list-active-color);
@include bevel-by-background($list-active-color);
}
> .x-dock {
height: auto;
}
}
}
.x-list-item-body {
min-height: $global-list-height;
padding: 0.65em 0.8em;
}
.x-list-header-swap {
position: absolute;
left: 0;
width: 100%;
z-index: 2 !important;
}
.x-ios .x-list-header-swap {
@include transform(translate3d(0, 0, 0));
}
.x-list-item .x-list-header {
display: none;
}
.x-list-grouped .x-list-header-wrap .x-list-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
}
.x-list-normal {
&.x-list-grouped .x-list-header-wrap .x-dock-horizontal {
padding-top: 26px;
}
.x-list-header-wrap .x-item-header,
.x-list-header {
@include background-gradient($list-header-bg-color, $list-header-gradient);
@include color-by-background($list-header-bg-color, 30%);
@include bevel-by-background($list-header-bg-color);
border-top: 1px solid $list-header-bg-color;
border-bottom: 1px solid darken($list-header-bg-color, 20%);
font-weight: bold;
font-size: 0.8em;
padding: 0.2em 1.02em;
@include bevel-by-background($list-header-bg-color);
}
@if $list-zebrastripe {
.x-list-item {
.x-dock-horizontal {
border-top: 1px solid transparent;
}
&:nth-child(even) .x-dock-horizontal {
background-color: darken($list-bg-color, 5%);
}
&.x-list-footer-wrap:nth-child(odd) .x-dock-horizontal {
border-bottom: 1px solid darken($list-bg-color, 5%);
}
}
} @else {
.x-list-item {
.x-dock-horizontal {
border-top: 1px solid darken($list-bg-color, 10%);
}
&.x-list-footer-wrap .x-dock-horizontal {
border-bottom: 1px solid darken($list-bg-color, 10%);
}
}
}
.x-list-item {
@if $include-list-highlights {
&.x-item-pressed .x-dock-horizontal {
border-top-color: $list-pressed-color;
background-color: $list-pressed-color;
}
&.x-item-selected .x-dock-horizontal {
border-top-color: $list-active-color;
border-bottom: 1px solid darken($list-active-color, 15%);
}
}
}
}
.x-list-normal.x-list-grouped .x-list-item.x-list-header-wrap .x-dock-horizontal {
border-top: 0;
}
.x-list-round {
&.x-list-grouped .x-list-header-wrap .x-dock-horizontal {
padding-top: 31px;
}
.x-scroll-view {
background-color: #eee !important;
// @todo No !important plz
}
.x-list-header-swap {
padding-right: $list-round-padding;
}
.x-list-inner .x-scroll-container {
top: $list-round-padding;
left: $list-round-padding;
bottom: $list-round-padding;
right: $list-round-padding;
width: auto !important;
height: auto !important;
}
.x-list-disclosure {
overflow: hidden;
-webkit-mask: 0 0 theme_image($theme-name, "disclosure2.png") no-repeat;
-webkit-mask-size: $list-disclosure-round-size;
@include background-gradient(lighten(desaturate($base-color, 10), 10));
width: $list-disclosure-round-size;
height: $list-disclosure-round-size;
margin: 0.5em 0.5em 0 0;
}
.x-list-header {
color: #777;
font-size: 1em;
font-weight: bold;
padding-left: 26px;
line-height: 1.7em;
// background: rgba(238,238,238,.8);
@include background-image(linear-gradient(top, rgba(238, 238, 238, 1), rgba(238, 238, 238, .9) 30%, rgba(238, 238, 238, .4)));
}
.x-list-container {
padding: $list-round-padding $list-round-padding 0 $list-round-padding;
.x-list-header {
padding-left: $list-round-padding;
background-image: none;
}
}
&.x-list-ungrouped,
&.x-list-grouped {
.x-list-item .x-dock-horizontal {
//border: solid #DDDDDD;
border: 1px solid darken($list-bg-color, 10%);
border-width: 1px 1px 0 1px;
background: $list-bg-color;
}
}
&.x-list-ungrouped {
.x-list-item {
&:first-child {
@if $include-border-radius { @include border-top-radius($form-fieldset-radius); }
}
&:last-child {
@if $include-border-radius { @include border-bottom-radius($form-fieldset-radius); }
border-width: 1px;
margin-bottom: $list-round-padding;
}
}
}
&.x-list-grouped {
.x-list-header-wrap {
.x-dock-horizontal {
@if $include-border-radius { @include border-top-radius($form-fieldset-radius); }
}
.x-list-header {
border: 1px solid darken($list-bg-color, 10%);
border-width: 1px 1px 0 1px;
@if $include-border-radius { @include border-top-radius($form-fieldset-radius); }
}
}
.x-list-footer-wrap {
background: transparent;
.x-dock-horizontal {
border: none;
background: transparent;
padding-bottom: $list-round-padding;
> .x-dock-body {
border: 1px solid darken($list-bg-color, 10%);
background: $list-bg-color;
@if $include-border-radius { @include border-bottom-radius($form-fieldset-radius); }
}
}
}
}
}
.x-dataview-inlineblock {
.x-dataview-item, .x-data-item {
display: inline-block !important;
}
}
.x-dataview-nowrap {
.x-dataview-container {
white-space: nowrap !important;
}
}
.x-list-inlineblock {
.x-list-item {
display: inline-block !important;
}
}
.x-list-nowrap {
.x-list-inner {
width: auto;
}
.x-list-container {
white-space: nowrap !important;
}
}
}
@mixin sencha-list-paging {
.x-list-paging {
padding: 1em 0;
.x-loading-spinner {
display: none;
margin: auto;
}
.x-list-paging-msg {
text-align: center;
color: $active-color;
clear: both;
@if $include-border-radius { @include border-radius(6px); }
}
&.x-loading {
padding: 0.5em;
.x-loading-spinner {
display: block;
}
.x-list-paging-msg {
display: none;
}
}
}
}
@mixin sencha-list-pullrefresh {
.x-list-pullrefresh {
@include display-box;
@include box-orient(horizontal);
@include box-align(center);
@include box-pack(center);
position: absolute;
top: -5em;
left: 0;
width: 100%;
height: 4.5em;
.x-loading-spinner {
display: none;
}
}
.x-list-pullrefresh-arrow {
width: 2.5em;
height: 4.5em;
background: center center theme_image($theme-name, "pullarrow.png") no-repeat;
background-size: 2em 3em;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 200ms;
@include rotate(0deg);
}
.x-android-2 .x-list-pullrefresh-arrow {
-webkit-transition-property: none;
-webkit-transition-duration: 0;
}
.x-list-pullrefresh-release .x-list-pullrefresh-arrow {
@include rotate(-180deg);
}
.x-list-pullrefresh-wrap {
width: 20em;
font-size: 0.7em;
}
.x-list-pullrefresh-message {
font-weight: bold;
font-size: 1.3em;
margin-bottom: 0.1em;
text-align: center;
}
.x-list-pullrefresh-updated {
text-align: center;
}
.x-list-pullrefresh-loading {
*.x-loading-spinner {
display: block;
}
.x-list-pullrefresh-arrow {
display: none;
}
}
.x-android-2 .x-list-pullrefresh-loading {
*.x-loading-spinner {
display: none;
}
}
}