[BUGFIX] Correct visual nesting of tables in collapsible panels
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _element_panel.less
1 //
2 // Variables
3 //
4 @panel-lg-padding:          35px;
5
6
7 //
8 // Panel
9 //
10 .panel {
11         .box-shadow(0px 2px 0px rgba(0, 0, 0, 0.1));
12         &.ui-sortable-helper {
13                 border-style: dashed;
14         }
15         .panel-heading {
16                 font-weight: bold;
17         }
18 }
19
20
21 //
22 // Panel carousel
23 //
24 .panel-carousel {
25         padding: @panel-body-padding;
26 }
27
28
29 //
30 // Panel heading
31 //
32 .panel-heading {
33         position: relative;
34         &[data-toggle="formengine-inline"] {
35                 cursor: pointer;
36         }
37 }
38
39 //
40 // Panel condensed
41 //
42 .panel-condensed {
43         .panel-heading {
44                 padding: 5px;
45         }
46 }
47
48 //
49 // Panel collapse
50 //
51 .panel-heading-collapse-indicator {
52         position: absolute;
53         left: 2px;
54         margin-top: -2px;
55         top: 50%;
56
57 }
58 .panel-collapsed {
59         .panel-heading {
60                 .caret {.transition(all 0.25s ease-in-out);
61                         .rotate(-90deg);
62                 }
63         }
64         .panel-collapse  {
65                 display: none;
66                 visibility: hidden;
67         }
68 }
69 .panel,
70 .panel-collapse {
71         > .alert {
72                 border: none;
73                 border-top: 1px solid @panel-default-border;
74                 margin: 0;
75                 padding: 9px 12px;
76         }
77         > .form-section,
78         > .tab-content > .form-section,
79         > .tab-content > .tab-pane > .form-section {
80                 border-left: 0;
81                 border-right: 0;
82                 border-bottom: 0;
83         }
84         > .nav-tabs {
85                 border-top: 1px solid @panel-default-border;
86                 padding-top: 8px;
87                 > li {
88                         margin-left: -1px;
89                 }
90         }
91         > .table,
92         > .table-fit {
93                 border: 0;
94                 margin: 0;
95         }
96 }
97
98 //
99 // Panel hover
100 //
101 .panel-hover {
102         .panel-default:hover > .panel-heading  {
103                 background-color: lighten(@panel-default-heading-bg, 3%);
104         }
105 }
106
107 //
108 // Panel space
109 //
110 .panel-space {
111         margin: 3em 0;
112 }
113
114 //
115 // Panel Tab
116 //
117 .panel-tab {
118         border-radius: 0;
119         border: 1px solid @nav-tabs-active-link-hover-border-color;
120         background-color: @nav-tabs-active-link-bg;
121 }
122 .panel-tab + .panel-tab,
123 .panel-tab + .form-section {
124         margin-top: -(@line-height-computed+1);
125 }
126 .tab-pane {
127         > .panel-tab:first-child {
128                 border-top: none;
129         }
130 }
131
132
133 //
134 // Panel large
135 //
136 .panel-lg {
137         .panel-body {
138                 padding: @panel-lg-padding;
139         }
140         .panel-heading,
141         .panel-footer {
142                 padding: ceil(@panel-lg-padding * 0.5) @panel-lg-padding;
143         }
144         .panel-carousel {
145                 padding: @panel-lg-padding;
146         }
147 }