[TASK] Unify element- and linkbrowser styling
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / component / _elementbrowser.scss
1 //
2 // Element Browser
3 //
4
5 //
6 // Usage
7 // --------------
8 //
9 // <div class="element-browser">
10 //     <div class="element-browser-panel element-browser-title">
11 //         ...
12 //     </div>
13 //     <div class="element-browser-panel element-browser-tabs">
14 //         <ul class="nav nav-tabs" role="tablist">
15 //             <li class="active"><a href="#">Page 1</a></li>
16 //             <li class="active"><a href="#">Page 2</a></li>
17 //             <li class="active"><a href="#">Page 3</a></li>
18 //         </ul>
19 //     </div>
20 //     <div class="element-browser-panel element-browser-attributes">
21 //         ...
22 //     </div>
23 //     <div class="element-browser-panel element-browser-main">
24 //         <div class="element-browser-main-sidebar">
25 //             <div class="element-browser-body">
26 //                 ...
27 //             </div>
28 //         </div>
29 //         <div class="element-browser-main-content">
30 //             <div class="element-browser-body">
31 //                 ...
32 //             </div>
33 //         </div>
34 //     </div>
35 // </div>
36 //
37
38 //
39 // Variables
40 //
41 $elementbrowser-breakpoint: 600px;
42
43 //
44 // Component
45 //
46 .element-browser {
47     display: flex;
48     flex-wrap: nowrap;
49     flex-direction: column;
50     width: 100%;
51
52     @media (min-width: $elementbrowser-breakpoint) {
53         height: 100vh;
54     }
55
56     h3 {
57         font-size: 1.2em;
58     }
59 }
60
61 .element-browser-body {
62     overflow: auto;
63     height: 100%;
64     padding: ($grid-gutter-width / 2);
65
66     > *:first-child {
67         margin-top: 0;
68     }
69
70     > *:last-child {
71         margin-bottom: 0;
72     }
73 }
74
75 .element-browser-title {
76     padding: ($grid-gutter-width / 2);
77     color: #fff;
78     background-color: #292929;
79
80     a {
81         color: inherit;
82         text-decoration: underline;
83     }
84 }
85
86 .element-browser-tabs {
87     .nav-tabs {
88         padding: ($grid-gutter-width / 2);
89         padding-bottom: 0;
90     }
91 }
92
93 .element-browser-attributes {
94     padding: ($grid-gutter-width / 2);
95     border-bottom: 1px solid #ddd;
96
97     > .form-horizontal:last-child .form-group {
98         margin-bottom: 0;
99     }
100 }
101
102 .element-browser-main {
103     @media (min-width: $elementbrowser-breakpoint) {
104         display: flex;
105         flex-wrap: nowrap;
106         flex: 1 auto;
107     }
108 }
109
110 .element-browser-main-sidebar {
111     background-color: #f2f2f2;
112
113     @media (min-width: $elementbrowser-breakpoint) {
114         flex-shrink: 0;
115         width: 260px;
116         border-right: 1px solid #ddd;
117     }
118
119     @media (min-width: $elementbrowser-breakpoint * 1.2) {
120         width: 280px;
121     }
122
123     @media (min-width: $elementbrowser-breakpoint * 1.4) {
124         width: 300px;
125     }
126
127     @media (min-width: $elementbrowser-breakpoint * 1.6) {
128         width: 320px;
129     }
130
131     .list-tree {
132         li:last-child:before {
133             background-color: #f2f2f2;
134         }
135     }
136
137     .list-tree-control > .fa:before {
138         background-color: #f2f2f2;
139     }
140 }
141
142 .element-browser-main-content {
143     @media (min-width: $elementbrowser-breakpoint) {
144         overflow: auto;
145         flex: 1 auto;
146     }
147 }