add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-blackberry / sass / src / dataview / List.scss

/**\r
 * @class Ext.dataview.List\r
 */\r
\r
.x-list {\r
	background: #fff;\r
}\r
\r
.x-list-item {\r
	border-bottom: 1px solid #F7F3F7;\r
	color: #292429;\r
	font-size: 20px;\r
	padding: 0 10px;\r
	line-height: 38px;\r
}\r
\r
.x-list .x-list-disclosure {\r
	margin-top: 13px;\r
	border: 0;\r
	background: transparent;\r
\r
	&:before {\r
		content: '>';\r
		color: #444;\r
		font-weight: bold;\r
		line-height: 19px;\r
		font-size: 22px;\r
		text-align: center;\r
		position: absolute;\r
		top: 0;\r
		right: 0;\r
		bottom: 0;\r
		left: 0;\r
	}\r
}\r
\r
.x-list .x-list-item.x-item-pressed.x-list-item-tpl,\r
.x-list .x-list-item.x-item-pressed .x-dock-horizontal {\r
	background-color: #ddd;\r
}\r
\r
.x-list .x-list-item.x-item-selected .x-dock-horizontal,\r
.x-list .x-list-item.x-item-selected.x-list-item-tpl {\r
	background-color: $base-color;\r
  	color: white;\r
}\r
\r
.x-list .x-item-selected .x-list-disclosure {\r
	&:before {\r
		color: #000\r
	}\r
	background-color: transparent;\r
}\r
\r
.x-list .x-list-header {\r
	font-weight: normal;\r
	font-size: 14px;\r
	padding: 2px 10px;\r
	border-top-color: #D1D1D1;\r
	border-bottom: 2px solid $highlight-color;\r
	background: transparent;\r
}\r
\r
.x-indexbar {\r
	color: #888;\r
	padding: 3px 0;\r
	@include border-radius(0px);\r
	@include st-box();\r
	height: 100% !important;\r
	background: rgba(255, 255, 255, .75);\r
\r
	& > div {\r
		@include st-box();\r
		@include st-box-flex(1);\r
		color: #8e8e8e;\r
		font-size: .75em\r
	}\r
}\r
\r
$indexbar-indicator-width: 120px;\r
$indexbar-indicator-height: 50px;\r
$indexbar-indicator-background-color: $highlight-color;\r
$indexbar-indicator-font-color: #000;\r
$indexbar-indicator-font-size: 2em;\r
.x-indexbar-indicator {\r
	width: $indexbar-indicator-width;\r
	height: $indexbar-indicator-height;\r
	background-color: $indexbar-indicator-background-color;\r
	position: absolute;\r
	top: 0;\r
	right: 0;\r
	z-index: 100;\r
	border-top-left-radius: 5px;\r
	border-bottom-left-radius: 5px;\r
\r
	.x-indexbar-indicator-inner {\r
		color: $indexbar-indicator-font-color;\r
		line-height: $indexbar-indicator-height;\r
		font-size: $indexbar-indicator-font-size;\r
		padding-left: $indexbar-indicator-width / 6;\r
	}\r
\r
	&:after {\r
		content:'';\r
	  	background-image: url('#{$bb-icons-path}/ic_overflow_tab.png');\r
		background-size: 50%;\r
		background-position: 50%;\r
		background-repeat: no-repeat;\r
		opacity: .5;\r
		width: $indexbar-indicator-width /3;\r
		height: 100%;\r
		position: absolute;\r
		top: 0;\r
		right: 0;\r
	}\r
}\r
\r
.x-indexbar-vertical {\r
	width: 30px;\r
	margin-right: 0px;\r
	@include st-box-align(center);\r
	@include st-box-direction(vertical);\r
	padding-top: .5em;\r
}\r
\r
.x-indexbar-pressed {\r
	background: rgba(255, 255, 255, 1);\r
}\r
\r
.x-list-item-odd {\r
	&.x-list-item-tpl,\r
	.x-dock-horizontal {\r
		background-color: darken(#fff, 5%);\r
		border-bottom: 1px solid darken(#fff, 5%);\r
	}\r
}