summaryrefslogtreecommitdiffstats
path: root/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
blob: 75ce9e1094226ae4d2ca00ece267f0358c3958b2 (plain)
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
@mixin reindeer-tabsheet-minimal-style($primaryStyleName : v-tabsheet) {

/**
 * Tabsheet "minimal" style --------------
 */

/* Minimal tabsheet on blue background */
.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div,
.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem,
.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected  {
	border-color: #7c8a91;
}
.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
	color: #7c8a91;
}
.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
	color: #BCD3DE;
	background: #778d98;
}
.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
	background: #4f6874;
}

/* Default & white styles */
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div,
.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div {
	border-bottom: 1px solid #bfbfbf;
	height: auto;
	background: transparent;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell,
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd {
	height: auto;
	background: transparent;
	padding-left: 0;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem,
.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem {
	border: none;
	border-bottom: 1px solid #bfbfbf;
	color: #4d748f;
	padding: 0;
	height: auto;
	background: transparent;
	text-shadow: none;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption {
	padding: 5px 16px;
	height: auto;
	background: transparent;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell-selected {
	background: transparent;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected,
.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected {
	background: transparent;
	border: 1px solid #bfbfbf;
	border-bottom: none;
	color: #222;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption {
	background: transparent;
	padding: 4px 15px 6px 15px;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption-closable,
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption-closable {
	padding-right: 6px;
}
.#{$primaryStyleName}-content-minimal,
.white .#{$primaryStyleName}-content-minimal {
	border: none;
}
.#{$primaryStyleName}-content-minimal .#{$primaryStyleName}-tabsheetpanel {
	background: transparent;
}
.#{$primaryStyleName}-deco-minimal,
.white .#{$primaryStyleName}-deco-minimal {
	height: 0;
	border: none;
}
.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller {
	margin-top: -20px;
	height: 17px;
	padding: 0;
	border: none;
	background: transparent;
}
.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller button {
	margin-top: 0;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close,
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover,
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
	text-indent: 0;
	background: transparent;
	margin-left: 3px;
	margin-right: -3px;
	padding: 0;
	color: #999;
	width: 14px;
	height: 14px;
	line-height: 14px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
	margin-top: 1px;
}
.v-ff & .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
	margin-top: -15px;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover,
.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
	color: #fff;
	background: #aaa;
}
.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active,
.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
	background: #777;
}

/* Minimal tabsheet on black background */
.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div,
.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem,
.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected  {
	border-color: #3e4044;
	color: #6a7f89;
}
.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected {
	color: #c9ccce;
}
.black .#{$primaryStyleName}-content-minimal,
.black .#{$primaryStyleName}-content-bar {
	color: #c9ccce;
	text-shadow: #000 0 0 1px;
}
.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
	color: #72787c;
}
.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
	color: #1d2021;
	background: #4d5154;
}
.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
	background: #626669;
}

}