]> git.proxmox.com Git - extjs.git/blame - extjs/examples/kitchensink/classic/sass/src/view/thumbnails/Thumbnails.scss
add extjs 6.0.1 sources
[extjs.git] / extjs / examples / kitchensink / classic / sass / src / view / thumbnails / Thumbnails.scss
CommitLineData
6527f429
DM
1$kitchensink-thumbnail-background-color: #888;\r
2$kitchensink-thumbnail-color: #fff;\r
3\r
4@if $theme-name == 'theme-crisp' or $theme-name == 'theme-crisp-touch' {\r
5 $kitchensink-thumbnail-background-color: #2a3f5d;\r
6} @else if $theme-name == 'theme-neptune' or $theme-name == 'theme-neptune-touch' {\r
7 $kitchensink-thumbnail-background-color: #3892d3;\r
8 $kitchensink-thumbnail-color: #b8d8f0;\r
9} @else if $theme-name == 'theme-classic' {\r
10 $kitchensink-thumbnail-background-color: #275287;\r
11} @else if $theme-name == 'theme-triton' {\r
12 $kitchensink-thumbnail-background-color: darken($base-color, 5%);\r
13}\r
14\r
15$kitchensink-thumbnail-size: 96px;\r
16\r
17.thumbnails {\r
18 display: table;\r
19}\r
20\r
21.thumbnail-item {\r
22 float: left;\r
23 width: $kitchensink-thumbnail-size + 20;\r
24 height: $kitchensink-thumbnail-size + 60;\r
25 margin-right: 20px;\r
26 cursor: pointer;\r
27 overflow: hidden;\r
28}\r
29\r
30.thumbnail-text {\r
31 text-align: center;\r
32}\r
33\r
34.thumbnail-icon-wrap {\r
35 width: $kitchensink-thumbnail-size;\r
36 height: $kitchensink-thumbnail-size;\r
37 text-align: center;\r
38 font-size: $kitchensink-thumbnail-size;\r
39 line-height: $kitchensink-thumbnail-size;\r
40 font-family: Sencha-Examples;\r
41 margin: 0 auto 8px;\r
42 position: relative;\r
43 overflow: hidden;\r
44 color: $kitchensink-thumbnail-background-color;\r
45}\r
46\r
47.thumbnail-icon {\r
48 position: absolute;\r
49 top: 0;\r
50 left: 0;\r
51 height: 100%;\r
52 width: 100%;\r
53 text-align: center;\r
54 font-size: $kitchensink-thumbnail-size / 2;\r
55 line-height: $kitchensink-thumbnail-size;\r
56 color: $kitchensink-thumbnail-color;\r
57 overflow: hidden;\r
58}\r
59\r
60.x-rtl.thumbnails {\r
61 .thumbnail-item {\r
62 direction: ltr;\r
63 float: right;\r
64 margin-right: 0;\r
65 margin-left: 20px;\r
66 }\r
67 .thumbnail-text {\r
68 direction: rtl;\r
69 }\r
70}\r