1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
@import "table";
$v-grid-row-background-color: valo-table-background-color() !default;
$v-grid-row-stripe-background-color: scale-color($v-grid-row-background-color, $lightness: if(color-luminance($v-grid-row-background-color) < 10, 4%, -4%)) !default;
$v-grid-border: valo-border($color: $v-grid-row-background-color, $strength: 0.8) !default;
$v-grid-cell-focused-border: max(2px, first-number($v-border)) solid $v-selection-color !default;
$v-grid-row-height: $v-table-row-height !default;
$v-grid-row-selected-background-color: $v-selection-color !default;
$v-grid-header-font-size: $v-table-header-font-size !default;
$v-grid-header-background-color: $v-background-color !default;
$v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default;
@import "../../base/grid/grid";
/**
*
*
* @param {string} $primary-stylename (v-grid) -
*
* @group grid
*/
@mixin valo-grid ($primary-stylename: v-grid) {
@include base-grid($primary-stylename);
.#{$primary-stylename} {
@include user-select(text);
background-color: $v-background-color;
}
.#{$primary-stylename}-header .#{$primary-stylename}-cell {
@include valo-gradient($v-grid-header-background-color);
text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-header-background-color), $background-color: $v-grid-header-background-color);
}
.#{$primary-stylename}-footer .#{$primary-stylename}-cell {
@include valo-gradient($v-grid-footer-background-color);
text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-footer-background-color), $background-color: $v-grid-footer-background-color);
}
.#{$primary-stylename}-header-deco {
@include valo-gradient($v-grid-header-background-color);
}
.#{$primary-stylename}-footer-deco,
.#{$primary-stylename}-horizontal-scrollbar-deco {
@include valo-gradient($v-grid-footer-background-color);
}
// Selected
.#{$primary-stylename}-row-selected {
> .#{$primary-stylename}-cell {
@include valo-gradient($v-selection-color);
color: valo-font-color($v-selection-color);
text-shadow: valo-text-shadow($font-color: valo-font-color($v-selection-color), $background-color: $v-selection-color);
border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%);
}
> .#{$primary-stylename}-cell-focused:before {
border-color: adjust-color($v-selection-color, $lightness: 20%);
}
}
.v-editor-row-save,
.v-editor-row-cancel {
@include valo-button-static-style;
@include valo-button-style($unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
}
// Customize scrollbars
.#{$primary-stylename}-scroller {
&::-webkit-scrollbar {
border: none;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 4px solid transparent;
background: if(is-dark-color($v-grid-header-background-color), rgba(255,255,255,.3), rgba(0,0,0,.3));
-webkit-background-clip: content-box;
background-clip: content-box;
}
}
.#{$primary-stylename}-scroller-vertical {
border: $v-grid-border;
border-left: none;
&::-webkit-scrollbar-thumb {
min-height: 30px;
}
}
.#{$primary-stylename}-scroller-horizontal {
border: $v-grid-border;
border-top: none;
&::-webkit-scrollbar-thumb {
min-width: 30px;
}
}
}
|
