[BUGFIX] Fix orientiation of carets in panels
[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,
67 .panel-collapse {
68     .panel-heading {
69         .caret {
70             @include transition(all 0.25s ease-in-out);
71         }
72
73         .collapsed {
74             .caret {
75                 @include rotate(-90deg);
76             }
77         }
78     }
79
80     > .alert {
81         border: none;
82         border-top: 1px solid $panel-default-border;
83         margin: 0;
84         padding: 9px 12px;
85     }
86
87     > .form-section,
88     > .tab-content > .form-section,
89     > .tab-content > .tab-pane > .form-section {
90         border-left: 0;
91         border-right: 0;
92         border-bottom: 0;
93     }
94
95     > .nav-tabs {
96         border-top: 1px solid $panel-default-border;
97         padding-top: 8px;
98
99         > li {
100             margin-left: -1px;
101         }
102     }
103
104     > .table,
105     > .table-fit {
106         border: 0;
107         margin: 0;
108     }
109 }
110
111 .recordlist {
112     .table-fit {
113         margin-bottom: 0;
114     }
115 }
116
117 //
118 // Panel hover
119 //
120 .panel-hover {
121     .panel-default:hover > .panel-heading {
122         background-color: lighten($panel-default-heading-bg, 3%);
123     }
124 }
125
126 //
127 // Panel space
128 //
129 .panel-space {
130     margin: 3em 0;
131 }
132
133 //
134 // Panel Tab
135 //
136 .panel-tab {
137     border-radius: 0;
138     border: 1px solid $nav-tabs-active-link-hover-border-color;
139     background-color: $nav-tabs-active-link-bg;
140 }
141
142 .panel-tab + .panel-tab,
143 .panel-tab + .form-section {
144     margin-top: -($line-height-computed+1);
145 }
146
147 .tab-pane {
148     > .panel-tab:first-child {
149         border-top: none;
150     }
151 }
152
153 //
154 // Panel large
155 //
156 .panel-lg {
157     .panel-body {
158         padding: $panel-lg-padding;
159     }
160
161     .panel-heading,
162     .panel-footer {
163         padding: ceil($panel-lg-padding * 0.5) $panel-lg-padding;
164     }
165
166     .panel-carousel {
167         padding: $panel-lg-padding;
168     }
169 }