141 lines
3.9 KiB
SCSS
141 lines
3.9 KiB
SCSS
.x-list.settings {
|
|
$icon-size: 24px;
|
|
@include border-radius($panel-border-radius);
|
|
|
|
&.x-list-round .x-scroll-view {
|
|
@include border-radius($panel-border-radius);
|
|
}
|
|
|
|
&.x-list-round.x-list-grouped {
|
|
.x-list-footer-wrap.x-list-item-tpl {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.x-list-header-wrap {
|
|
.x-dock-horizontal {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.x-list-header {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.x-list-footer-wrap {
|
|
&.x-list-item-last {
|
|
.x-dock-horizontal {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.x-list-item {
|
|
.x-dock-horizontal {
|
|
border: 1px solid darken($base-color, 6%);
|
|
border-width: 1px 1px 0 1px;
|
|
background: lighten($base-color, 100%);
|
|
|
|
.x-innerhtml {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
&.x-item-pressed {
|
|
.x-dock-horizontal {
|
|
//@include background-gradient($list-active-color, $list-active-gradient);
|
|
@include background-image(linear-gradient(top, color_stops(lighten($list-active-color, 5%), darken($list-active-color, 10%))));
|
|
@include color-by-background($list-active-color);
|
|
//@include bevel-by-background($list-active-color);
|
|
|
|
.disclosure {
|
|
background-position: -1 * $settinglist-icon-size 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.x-item-selected {
|
|
.x-dock-horizontal {
|
|
color: inherit;
|
|
|
|
.x-list-item-body {
|
|
padding-right: 1.2em;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
width: $settinglist-icon-size;
|
|
height: $settinglist-icon-size;
|
|
position: absolute;
|
|
top: ($global-list-height - $settinglist-icon-size) / 2;
|
|
right: ($global-list-height - $settinglist-icon-size) / 2;
|
|
background-image: url($icons-setting-list-image);
|
|
background-size: $settinglist-image-width $settinglist-image-height;
|
|
background-position: 0 -1 * $settinglist-icon-size;
|
|
}
|
|
}
|
|
|
|
&.x-item-pressed {
|
|
.x-dock-horizontal {
|
|
color: lighten($base-color, 100%);
|
|
|
|
&:after {
|
|
background-position: -1 * $settinglist-icon-size -1 * $settinglist-icon-size;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-icon {
|
|
width: $icon-size;
|
|
height: $icon-size;
|
|
position: absolute;
|
|
}
|
|
|
|
// offset text from icom
|
|
.icon-offset {
|
|
margin-left: $icon-size + 6px;
|
|
}
|
|
|
|
.disclosure {
|
|
right: $icon-size / 2;
|
|
background-image: url($icons-setting-list-image);
|
|
background-size: $settinglist-image-width $settinglist-image-height;
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
.x-list-header-wrap.x-list-footer-wrap {
|
|
.x-dock-body {
|
|
@include border-radius($form-fieldset-radius);
|
|
}
|
|
}
|
|
|
|
.x-list-footer-wrap {
|
|
.x-dock-horizontal {
|
|
border: none;
|
|
background: transparent;
|
|
padding-bottom: $global-list-height * .3;
|
|
|
|
> .x-dock-body {
|
|
border: 1px solid darken($base-color, 6%);
|
|
background: lighten($base-color, 100%);
|
|
}
|
|
}
|
|
|
|
&.x-item-pressed {
|
|
.x-dock-horizontal {
|
|
background: transparent;
|
|
> .x-dock-body {
|
|
@include border-bottom-radius($form-fieldset-radius);
|
|
//@include background-gradient($list-active-color, $list-active-gradient);
|
|
@include background-image(linear-gradient(top, color_stops(lighten($list-active-color, 5%), darken($list-active-color, 10%))));
|
|
@include color-by-background($list-active-color);
|
|
//@include bevel-by-background($list-active-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |