156 lines
3.8 KiB
SCSS
156 lines
3.8 KiB
SCSS
/*
|
|
* Application dataview
|
|
*/
|
|
|
|
@mixin iconview-create-icon($cls, $index, $iconsize) {
|
|
.x-dataview-item .icon.#{$cls}-#{$index} {
|
|
background-position: 0 -1 * $index * $iconsize;
|
|
}
|
|
|
|
.x-dataview-item {
|
|
&.x-item-selected,
|
|
&.x-item-pressed {
|
|
.icon.#{$cls}-#{$index} {
|
|
background-position: -1 * $iconsize -1 * $index * $iconsize;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin bullet-icon($index) {
|
|
@include iconview-create-icon(bullet, $index, $bullet-icon-size);
|
|
}
|
|
|
|
@mixin numbering-icon($index) {
|
|
@include iconview-create-icon(numbering, $index, $numbering-icon-size);
|
|
}
|
|
|
|
@mixin outline-icon($index) {
|
|
@include iconview-create-icon(outline, $index, $outline-icon-size);
|
|
}
|
|
|
|
.x-dataview {
|
|
&.icon-view {
|
|
.x-dataview-inner.x-scroll-scroller {
|
|
width: auto !important;
|
|
height: auto !important;
|
|
|
|
.x-dataview-container {
|
|
margin-top: 12px;
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
|
|
.x-dataview-item {
|
|
display: inline-block;
|
|
|
|
&.x-item-pressed,
|
|
&.x-item-selected {
|
|
.item-inner {
|
|
@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);
|
|
}
|
|
}
|
|
|
|
.item-inner {
|
|
display: inline-block;
|
|
width: 77px;
|
|
height: 77px;
|
|
border: 1px solid darken($base-color, 6%);
|
|
background: lighten($base-color, 100%);
|
|
margin: -1px;
|
|
|
|
&.top-left {
|
|
@include border-top-left-radius($form-fieldset-radius);
|
|
}
|
|
|
|
&.top-right {
|
|
@include border-top-right-radius($form-fieldset-radius);
|
|
}
|
|
|
|
&.bottom-left {
|
|
@include border-bottom-left-radius($form-fieldset-radius);
|
|
}
|
|
|
|
&.bottom-right {
|
|
@include border-bottom-right-radius($form-fieldset-radius);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bullets {
|
|
@include bullet-icon(0);
|
|
@include bullet-icon(1);
|
|
@include bullet-icon(2);
|
|
@include bullet-icon(3);
|
|
@include bullet-icon(4);
|
|
@include bullet-icon(5);
|
|
@include bullet-icon(6);
|
|
@include bullet-icon(7);
|
|
|
|
.item-inner {
|
|
.text {
|
|
margin-top: 1.4em;
|
|
text-align: center;
|
|
}
|
|
|
|
.icon {
|
|
width: $bullet-icon-size;
|
|
height: $bullet-icon-size;
|
|
margin: 1.4em auto;
|
|
background-image: url($icons-bullets-image);
|
|
background-size: $bullet-icon-image-width $bullet-icon-image-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.numbering {
|
|
@include numbering-icon(0);
|
|
@include numbering-icon(1);
|
|
@include numbering-icon(2);
|
|
@include numbering-icon(3);
|
|
@include numbering-icon(4);
|
|
@include numbering-icon(5);
|
|
@include numbering-icon(6);
|
|
@include numbering-icon(7);
|
|
|
|
.item-inner {
|
|
.text {
|
|
position: relative;
|
|
top: 1.4em;
|
|
text-align: center;
|
|
}
|
|
|
|
.icon {
|
|
width: $numbering-icon-size;
|
|
height: $numbering-icon-size;
|
|
margin: 0 auto;
|
|
background-image: url($icons-numbering-image);
|
|
background-size: $numbering-icon-image-width $numbering-icon-image-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.outline {
|
|
@include outline-icon(0);
|
|
@include outline-icon(1);
|
|
@include outline-icon(2);
|
|
|
|
.item-inner {
|
|
.text {
|
|
position: relative;
|
|
top: 1.4em;
|
|
text-align: center;
|
|
}
|
|
|
|
.icon {
|
|
width: $outline-icon-size;
|
|
height: $outline-icon-size;
|
|
margin: 0 auto;
|
|
background-image: url($icons-outline-image);
|
|
background-size: $outline-icon-image-width $outline-icon-image-height;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |