[BUGFIX] Avoid exception of renderType selectCheckBox in workspace
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / module / _viewpage.scss
1 //
2 // Viewpage
3 // ========
4 //
5
6 //
7 // Variables
8 //
9 $viewpage-bg: #494949;
10 $viewpage-resizable-size: 5px;
11 $viewpage-item-bg: #292929;
12 $viewpage-item-color: #fafafa;
13 $viewpage-topbar-height: 40px;
14
15 //
16 // Module
17 //
18 .typo3-module-viewpage {
19 background-color: $viewpage-bg;
20
21 .module {
22 background-color: transparent;
23 }
24
25 .module-body {
26 text-align: center;
27 }
28
29 .ui-resizable-w {
30 left: -$viewpage-resizable-size;
31 height: 100%;
32 width: $viewpage-resizable-size;
33 }
34
35 .ui-resizable-s {
36 bottom: -$viewpage-resizable-size;
37 height: $viewpage-resizable-size;
38 }
39
40 .ui-resizable-e {
41 right: -$viewpage-resizable-size;
42 height: 100%;
43 width: $viewpage-resizable-size;
44 }
45
46 .ui-resizable-se,
47 .ui-resizable-sw {
48 height: $viewpage-resizable-size;
49 width: $viewpage-resizable-size;
50 background-image: none;
51 bottom: -$viewpage-resizable-size;
52 }
53
54 .ui-resizable-sw {
55 left: -$viewpage-resizable-size;
56 }
57
58 .ui-resizable-se {
59 right: -$viewpage-resizable-size;
60 }
61 }
62
63 //
64 // Item
65 //
66 .viewpage-item {
67 position: relative;
68 display: inline-block;
69 background-color: $viewpage-item-bg;
70 box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
71 color: $viewpage-item-color;
72
73 a {
74 color: $viewpage-item-color;
75 }
76
77 iframe {
78 display: block;
79 }
80 }
81
82 //
83 // Topbar
84 //
85 .viewpage-topbar {
86 height: $viewpage-topbar-height;
87 flex-shrink: 0;
88 padding: 0.75em 1em;
89 display: flex;
90 flex-direction: row;
91 justify-content: space-between;
92 align-items: center;
93 }
94
95 .viewpage-topbar-orientation {
96 a {
97 opacity: 0.5;
98 transition: all 0.2s ease-in-out;
99
100 &:hover {
101 opacity: 1;
102 }
103 }
104 }
105
106 .viewpage-topbar-preset {
107 button {
108 background-color: transparent;
109 border: none;
110 padding-left: 20px;
111 padding-right: 20px;
112
113 span {
114 vertical-align: middle;
115 }
116 }
117 }
118
119 .viewpage-topbar-size {
120 input {
121 background-color: transparent;
122 padding-left: 0;
123 padding-right: 0;
124 border: 0;
125 border-bottom: 1px solid rgba($brand-primary, 0.5);
126 transition: all 0.5s ease-in-out;
127
128 &:focus,
129 &:hover {
130 outline: 0;
131 border-bottom-color: rgba($brand-primary, 1);
132 }
133 }
134 }
135
136 //
137 // Resizeable
138 //
139 .viewpage-resizeable {
140 background-color: #fafafa;
141 }
142
143 //
144 // Preset Item
145 //
146 .viewpage-preset-item {
147 display: flex;
148 }
149
150 .viewpage-preset-item-icon {
151 padding-right: 0.5em;
152 }
153
154 .viewpage-preset-item-label {
155 flex: 1 1 auto;
156 }
157
158 .viewpage-preset-item-size {
159 padding-left: 1em;
160 opacity: 0.5;
161 }