80ed1a3969562ef388806eb13db34157baadeedb
[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         > .table,
19         > .table-fit {
20                 border: 0;
21                 margin: 0;
22         }
23 }
24
25
26 //
27 // Panel carousel
28 //
29 .panel-carousel {
30         padding: @panel-body-padding;
31 }
32
33
34 //
35 // Panel heading
36 //
37 .panel-heading {
38         position: relative;
39         &[data-toggle="formengine-inline"] {
40                 cursor: pointer;
41         }
42 }
43
44 //
45 // Panel condensed
46 //
47 .panel-condensed {
48         .panel-heading {
49                 padding: 5px;
50         }
51 }
52
53 //
54 // Panel collapse
55 //
56 .panel-heading-collapse-indicator {
57         position: absolute;
58         left: 2px;
59         margin-top: -2px;
60         top: 50%;
61
62 }
63 .panel-collapsed {
64         .panel-heading {
65                 .caret {.transition(all 0.25s ease-in-out);
66                         .rotate(-90deg);
67                 }
68         }
69         .panel-collapse  {
70                 display: none;
71                 visibility: hidden;
72         }
73 }
74 .panel,
75 .panel-collapse {
76         > .alert {
77                 border: none;
78                 border-top: 1px solid @panel-default-border;
79                 margin: 0;
80                 padding: 9px 12px;
81         }
82         > .form-section,
83         > .tab-content > .form-section,
84         > .tab-content > .tab-pane > .form-section {
85                 border-left: 0;
86                 border-right: 0;
87                 border-bottom: 0;
88         }
89         > .nav-tabs {
90                 border-top: 1px solid @panel-default-border;
91                 padding-top: 8px;
92                 > li {
93                         margin-left: -1px;
94                 }
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 }