[FEATURE] Confirm modal on closing an editform with unsaved changes
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / 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
53 &.t3-modal-danger .modal-header {
54 background-color: @modal-danger-bg;
55 color: @modal-danger-color;
56 border-bottom-color: @modal-danger-border;
57 }
58 .close {
59 color: inherit;
60 padding: 0;
61 margin: 0;
62 text-shadow: rgba(0,0,0,0.5) 0px 0px 3px;
63 .opacity(0.5);
64 .user-select('none');
65 &:hover,
66 &:active,
67 &:hover {
68 box-shadow: none;
69 outline: none;
70 background: none;
71 .opacity(1);
72 }
73 }
74 }
75 .modal-header,
76 .modal-footer {
77 padding: 10px 15px;
78 }
79 .modal-footer .btn {
80 margin-right: 0;
81 min-width: 100px;
82 }
83 .modal-content {
84 .transition(margin-top .1s ease-in);
85 border: none;
86 overflow: hidden;
87 }