11/*
22Copyright 2017 Travis Ralston
33Copyright 2019 New Vector Ltd
4+ Copyright 2021 The Matrix.org Foundation C.I.C.
45
56Licensed under the Apache License, Version 2.0 (the "License");
67you may not use this file except in compliance with the License.
@@ -20,19 +21,100 @@ limitations under the License.
2021 padding : 0 0 0 16px ;
2122 display : flex ;
2223 flex-direction : column ;
23- position : absolute ;
2424 top : 0 ;
2525 bottom : 0 ;
2626 left : 0 ;
2727 right : 0 ;
2828 margin-top : 8px ;
2929}
3030
31+ .mx_TabbedView_tabsOnLeft {
32+ flex-direction : column ;
33+ position : absolute ;
34+
35+ .mx_TabbedView_tabLabels {
36+ width : 170px ;
37+ max-width : 170px ;
38+ position : fixed ;
39+ }
40+
41+ .mx_TabbedView_tabPanel {
42+ margin-left : 240px ; // 170px sidebar + 70px padding
43+ flex-direction : column ;
44+ }
45+
46+ .mx_TabbedView_tabLabel_active {
47+ background-color : $tab-label-active-bg-color ;
48+ color : $tab-label-active-fg-color ;
49+ }
50+
51+ .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon ::before {
52+ background-color : $tab-label-active-icon-bg-color ;
53+ }
54+
55+ .mx_TabbedView_maskedIcon {
56+ width : 16px ;
57+ height : 16px ;
58+ margin-left : 8px ;
59+ margin-right : 16px ;
60+ }
61+
62+ .mx_TabbedView_maskedIcon ::before {
63+ mask-size : 16px ;
64+ width : 16px ;
65+ height : 16px ;
66+ }
67+ }
68+
69+ .mx_TabbedView_tabsOnTop {
70+ flex-direction : column ;
71+
72+ .mx_TabbedView_tabLabels {
73+ display : flex ;
74+ margin-bottom : 8px ;
75+ }
76+
77+ .mx_TabbedView_tabLabel {
78+ padding-left : 0px ;
79+ padding-right : 52px ;
80+
81+ .mx_TabbedView_tabLabel_text {
82+ font-size : 15px ;
83+ color : $tertiary-fg-color ;
84+ }
85+ }
86+
87+ .mx_TabbedView_tabPanel {
88+ flex-direction : row ;
89+ }
90+
91+ .mx_TabbedView_tabLabel_active {
92+ color : $accent-color ;
93+ .mx_TabbedView_tabLabel_text {
94+ color : $accent-color ;
95+ }
96+ }
97+
98+ .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon ::before {
99+ background-color : $accent-color ;
100+ }
101+
102+ .mx_TabbedView_maskedIcon {
103+ width : 22px ;
104+ height : 22px ;
105+ margin-left : 0px ;
106+ margin-right : 8px ;
107+ }
108+
109+ .mx_TabbedView_maskedIcon ::before {
110+ mask-size : 22px ;
111+ width : inherit ;
112+ height : inherit ;
113+ }
114+ }
115+
31116.mx_TabbedView_tabLabels {
32- width : 170px ;
33- max-width : 170px ;
34117 color : $tab-label-fg-color ;
35- position : fixed ;
36118}
37119
38120.mx_TabbedView_tabLabel {
@@ -46,43 +128,25 @@ limitations under the License.
46128 position : relative ;
47129}
48130
49- .mx_TabbedView_tabLabel_active {
50- background-color : $tab-label-active-bg-color ;
51- color : $tab-label-active-fg-color ;
52- }
53-
54131.mx_TabbedView_maskedIcon {
55- margin-left : 8px ;
56- margin-right : 16px ;
57- width : 16px ;
58- height : 16px ;
59132 display : inline-block ;
60133}
61134
62135.mx_TabbedView_maskedIcon ::before {
63136 display : inline-block ;
64- background-color : $tab-label- icon-bg -color ;
137+ background-color : $icon-button -color ;
65138 mask-repeat : no-repeat ;
66- mask-size : 16px ;
67- width : 16px ;
68- height : 16px ;
69139 mask-position : center ;
70140 content : ' ' ;
71141}
72142
73- .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon ::before {
74- background-color : $tab-label-active-icon-bg-color ;
75- }
76-
77143.mx_TabbedView_tabLabel_text {
78144 vertical-align : middle ;
79145}
80146
81147.mx_TabbedView_tabPanel {
82- margin-left : 240px ; // 170px sidebar + 70px padding
83148 flex-grow : 1 ;
84149 display : flex ;
85- flex-direction : column ;
86150 min-height : 0 ; // firefox
87151}
88152
0 commit comments