[TASK] Improve layout of ImageManipulation preview
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _element_modal.less
1 //
2 // Modals
3 //
4
5 // Modal notice
6 @modal-notice-bg: @btn-default-bg;
7 @modal-notice-color: @btn-default-color;
8 @modal-notice-border: @btn-default-border;
9
10 // Modal info
11 @modal-info-bg: @btn-info-bg;
12 @modal-info-color: @btn-info-color;
13 @modal-info-border: @btn-info-border;
14
15 // Modal success
16 @modal-success-bg: @btn-success-bg;
17 @modal-success-color: @btn-success-color;
18 @modal-success-border: @btn-success-border;
19
20 // Modal warning
21 @modal-warning-bg: @btn-warning-bg;
22 @modal-warning-color: @btn-warning-color;
23 @modal-warning-border: @btn-warning-border;
24
25 // Modal danger
26 @modal-danger-bg: @btn-danger-bg;
27 @modal-danger-color: @btn-danger-color;
28 @modal-danger-border: @btn-danger-border;
29
30 // Modal styling
31 .modal {
32 &.t3-modal-notice .modal-header {
33 background-color: @modal-notice-bg;
34 color: @modal-notice-color;
35 border-bottom-color: @modal-notice-border;
36 }
37 &.t3-modal-info .modal-header {
38 background-color: @modal-info-bg;
39 color: @modal-info-color;
40 border-bottom-color: @modal-info-border;
41 }
42 &.t3-modal-success .modal-header {
43 background-color: @modal-success-bg;
44 color: @modal-success-color;
45 border-bottom-color: @modal-success-border;
46 }
47 &.t3-modal-warning .modal-header {
48 background-color: @modal-warning-bg;
49 color: @modal-warning-color;
50 border-bottom-color: @modal-warning-border;
51 }
52 &.t3-modal-danger .modal-header {
53 background-color: @modal-danger-bg;
54 color: @modal-danger-color;
55 border-bottom-color: @modal-danger-border;
56 }
57 .close {
58 color: inherit;
59 padding: 0;
60 margin: 0;
61 text-shadow: rgba(0,0,0,0.5) 0px 0px 3px;
62 .opacity(0.5);
63 .user-select('none');
64 &:hover,
65 &:active,
66 &:hover {
67 box-shadow: none;
68 outline: none;
69 background: none;
70 .opacity(1);
71 }
72 }
73 }
74 .modal-header,
75 .modal-footer {
76 padding: 10px 15px;
77 }
78 .modal-footer .btn {
79 margin-right: 0;
80 min-width: 100px;
81 }
82 .modal-content {
83 .transition(margin-top .1s ease-in);
84 border: none;
85
86 .loadmessage {
87 text-align: center;
88 color: @gray-darker;
89 }
90 }
91
92 .modal-resize {
93 &.fade .modal-dialog {
94 .transition-property(~"height, width");
95 .transition-duration(.35s);
96 .transition-timing-function(ease);
97 }
98 }
99
100 /**
101 * Cropper modal component styles
102 */
103 .modal-image-manipulation {
104 width: 90vw;
105 height: 90vh;
106 .modal-panel {
107 display: flex;
108 max-height: 80vh;
109 overflow: visible;
110 }
111 .modal-panel-body {
112 background-image: data-uri("../Images/cropper-background.png");
113 display: flex;
114 align-items: center;
115 justify-content: center;
116 }
117 .modal-panel .modal-panel-body {
118 max-height: 100%;
119 width: 100% !important;
120 }
121
122 .modal-panel .modal-panel-sidebar {
123 min-width: 300px;
124 max-height: 100%;
125 overflow: auto;
126 -webkit-overflow-scrolling: touch;
127 }
128
129 .modal-panel .modal-panel-sidebar-right {
130 background-color: #212424;
131 position: relative;
132 }
133
134 .modal-panel .modal-footer {
135 position: absolute;
136 bottom: 0;
137 right: 0;
138 width: 100%;
139 }
140 .modal-body {
141 .col-lg-12 {
142 padding-right: 450px;
143 .panel {
144 margin: 0;
145 width: 400px;
146 position: absolute;
147 top: 0px;
148 right: 15px;
149 }
150 }
151 }
152 }
153
154 .modal.modal-dark {
155
156 color: #FFF;
157 .modal-content {
158 overflow: hidden;
159 background-color: #212424;
160 }
161 .modal-header {
162 color: #FFF;
163 background-color: #484848;
164 border-bottom-color: #000000;
165 }
166 .modal-body, .modal-footer {
167 background-color: #212424;
168 color: #FFF;
169 }
170 .modal-footer {
171 border-top: 1px solid #000000;
172 }
173 }
174
175 // Modal as panel
176 .modal-panel {
177 .modal-panel-body {
178 float: left;
179 width: 400px;
180 }
181 .modal-panel-sidebar-right {
182 width: 300px;
183 float: right;
184 border-left: 1px solid #000000;
185 }
186 }
187
188 .modal-image-manipulation {
189 .modal-panel-body {
190 padding: 20px;
191 img {
192 max-width: 100%;
193 }
194 }
195 }