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