5e1b421dc957766430b761d09b8a214c255f5caa
[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 .modal-image-manipulation {
101         .modal-body {
102                 .col-lg-12 {
103                         padding-right: 450px;
104                         .panel {
105                                 margin: 0;
106                                 width: 400px;
107                                 position: absolute;
108                                 top: 0px;
109                                 right: 15px;
110                         }
111                 }
112         }
113 }
114
115 .modal.modal-dark {
116
117         color: #FFF;
118         .modal-content {
119                 overflow: hidden;
120                 background-color: #212424;
121         }
122         .modal-header {
123                 color: #FFF;
124                 background-color: #484848;
125                 border-bottom-color: #000000;
126         }
127         .modal-body, .modal-footer {
128                 background-color: #212424;
129                 color: #FFF;
130         }
131         .modal-footer {
132                 border-top: none;
133         }
134 }
135
136 // Modal as panel
137 .modal-panel {
138         .modal-panel-body {
139                 float: left;
140                 width: 400px;
141         }
142         .modal-panel-sidebar-right {
143                 width: 300px;
144                 float: right;
145                 border-left: 1px solid #000000;
146         }
147 }
148
149 .modal-image-manipulation {
150         .modal-panel-body {
151                 padding: 20px;
152                 img {
153                         max-width: 100%;
154                 }
155         }
156 }