[FEATURE] Add TypeScript and CSS for new imageManipulation
[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 }