[TASK] Streamline taskmanager
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / Component / panel.less
1 //
2 // Panel
3 // ======
4 // Additions and enhancements of the bootstrap panel component. This file
5 // needs to be included directly after the bootstrap panel definitions.
6 //
7 //
8 // Normal Usage
9 // ------------
10 //
11 // <div class="panel panel-default">
12 //   <div class="panel-heading">
13 //     <div class="panel-heading-right">
14 //       <a href="#panelContentId" class="panel-heading-collapse" role="button" data-toggle="collapse" aria-expanded="true">
15 //         <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-view-list-collapse" data-identifier="actions-view-list-collapse">
16 //           ... IconAPI ...
17 //         </span>
18 //       </a>
19 //     </div>
20 //     <div class="panel-heading-left">
21 //       <a href="#" class="panel-title">
22 //         ... Title ...
23 //       </a>
24 //     </div>
25 //   </div>
26 //   <div id="panelContentId" class="panel-collapse collapse in" aria-expanded="true">
27 //     <div class="panel-body">
28 //       ... Content ...
29 //     </div>
30 //   </div>
31 // </div>
32 //
33 //
34
35
36 //
37 // Variables
38 //
39 @panel-active-text:          #fff;
40 @panel-active-border:        #444;
41 @panel-active-heading-bg:    #666;
42
43 //
44 // Heading
45 //
46 .panel-heading {
47         &:extend(.clearfix all);
48         a,
49         a:hover,
50         a:focus
51         a:active {
52                 text-decoration: none;
53                 color: inherit;
54         }
55 }
56 .panel-heading-left {
57         float: left;
58 }
59 .panel-heading-right {
60         float: right;
61 }
62
63 //
64 // Title
65 //
66 .panel-title {
67         font-size: @font-size-base;
68 }
69 .panel-title-icon,
70 .panel-title-name {
71         display: inline-block;
72         vertical-align: middle;
73 }
74
75 //
76 // Body
77 //
78 .panel-body {
79         > *:last-child {
80                 margin-bottom: 0;
81         }
82 }
83
84 //
85 // Additional Variations
86 //
87 .panel-active {
88         .panel-variant(@panel-active-border; @panel-active-text; @panel-active-heading-bg; @panel-active-border);
89 }