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