Skip to content

Commit adf6ff2

Browse files
martinRenoumartinRenou
authored
Fix Tabs and Accordions CSS when using lab 4 (#3931)
1 parent 39d72d3 commit adf6ff2

File tree

2 files changed

+55
-27
lines changed

2 files changed

+55
-27
lines changed

‎packages/controls/css/phosphor.css

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
3131
*/
3232

3333
/*
34-
* The following section is derived from https://github.com/phosphorjs/phosphor/blob/23b9d075ebc5b73ab148b6ebfc20af97f85714c4/packages/widgets/style/tabbar.css
34+
* The following section is derived from https://github.com/phosphorjs/phosphor/blob/23b9d075ebc5b73ab148b6ebfc20af97f85714c4/packages/widgets/style/tabbar.css
3535
* We've scoped the rules so that they are consistent with exactly our code.
3636
*/
3737

38-
.jupyter-widgets.widget-tab > .p-TabBar {
38+
.jupyter-widgets.widget-tab > .p-TabBar,
39+
.jupyter-widgets.widget-tab > .lm-TabBar {
3940
display: flex;
4041
-webkit-user-select: none;
4142
-moz-user-select: none;
@@ -44,17 +45,20 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
4445
}
4546

4647

47-
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'] {
48+
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'],
49+
.jupyter-widgets.widget-tab > .lm-TabBar[data-orientation='horizontal'] {
4850
flex-direction: row;
4951
}
5052

5153

52-
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'] {
54+
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'],
55+
.jupyter-widgets.widget-tab > .lm-TabBar[data-orientation='vertical'] {
5356
flex-direction: column;
5457
}
5558

5659

57-
.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content {
60+
.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content,
61+
.jupyter-widgets.widget-tab > .lm-TabBar > .lm-TabBar-content {
5862
margin: 0;
5963
padding: 0;
6064
display: flex;
@@ -63,17 +67,20 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
6367
}
6468

6569

66-
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'] > .p-TabBar-content {
70+
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'] > .p-TabBar-content,
71+
.jupyter-widgets.widget-tab > .lm-TabBar[data-orientation='horizontal'] > .lm-TabBar-content {
6772
flex-direction: row;
6873
}
6974

7075

71-
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'] > .p-TabBar-content {
76+
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'] > .p-TabBar-content,
77+
.jupyter-widgets.widget-tab > .lm-TabBar[data-orientation='vertical'] > .lm-TabBar-content {
7278
flex-direction: column;
7379
}
7480

7581

76-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
82+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab,
83+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tab {
7784
display: flex;
7885
flex-direction: row;
7986
box-sizing: border-box;
@@ -82,41 +89,49 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
8289

8390

8491
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon,
85-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon {
92+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon,
93+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tabIcon,
94+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tabCloseIcon {
8695
flex: 0 0 auto;
8796
}
8897

8998

90-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel {
99+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel,
100+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tabLabel {
91101
flex: 1 1 auto;
92102
overflow: hidden;
93103
white-space: nowrap;
94104
}
95105

96106

97-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden {
107+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden,
108+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tab.lm-mod-hidden {
98109
display: none !important;
99110
}
100111

101112

102-
.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab {
113+
.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab,
114+
.jupyter-widgets.widget-tab > .lm-TabBar.lm-mod-dragging .lm-TabBar-tab {
103115
position: relative;
104116
}
105117

106118

107-
.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging[data-orientation='horizontal'] .p-TabBar-tab {
119+
.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging[data-orientation='horizontal'] .p-TabBar-tab,
120+
.jupyter-widgets.widget-tab > .lm-TabBar.lm-mod-dragging[data-orientation='horizontal'] .lm-TabBar-tab {
108121
left: 0;
109122
transition: left 150ms ease;
110123
}
111124

112125

113-
.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging[data-orientation='vertical'] .p-TabBar-tab {
126+
.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging[data-orientation='vertical'] .p-TabBar-tab,
127+
.jupyter-widgets.widget-tab > .lm-TabBar.lm-mod-dragging[data-orientation='vertical'] .lm-TabBar-tab {
114128
top: 0;
115129
transition: top 150ms ease;
116130
}
117131

118132

119-
.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab.p-mod-dragging {
133+
.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab.p-mod-dragging,
134+
.jupyter-widgets.widget-tab > .lm-TabBar.lm-mod-dragging .lm-TabBar-tab.lm-mod-dragging {
120135
transition: none;
121136
}
122137

‎packages/controls/css/widgets-base.css

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -420,7 +420,7 @@
420420
flex-shrink: 1;
421421
outline: none !important;
422422
}
423-
423+
424424
.widget-text input[type="text"], .widget-text input[type="password"], .widget-textarea textarea {
425425
padding: var(--jp-widgets-input-padding) calc( var(--jp-widgets-input-padding) * 2);
426426
}
@@ -893,13 +893,15 @@
893893
flex-direction: column;
894894
}
895895

896-
.jupyter-widgets.widget-tab > .p-TabBar {
896+
.jupyter-widgets.widget-tab > .p-TabBar,
897+
.jupyter-widgets.widget-tab > .lm-TabBar {
897898
/* Necessary so that a tab can be shifted down to overlay the border of the box below. */
898899
overflow-x: visible;
899900
overflow-y: visible;
900901
}
901902

902-
.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content {
903+
.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content,
904+
.jupyter-widgets.widget-tab > .lm-TabBar > .lm-TabBar-content {
903905
/* Make sure that the tab grows from bottom up */
904906
align-items: flex-end;
905907
min-width: 0;
@@ -918,12 +920,14 @@
918920
overflow: auto;
919921
}
920922

921-
.jupyter-widgets.widget-tab > .p-TabBar {
923+
.jupyter-widgets.widget-tab > .p-TabBar,
924+
.jupyter-widgets.widget-tab > .lm-TabBar {
922925
font: var(--jp-widgets-font-size) Helvetica, Arial, sans-serif;
923926
min-height: calc(var(--jp-widgets-horizontal-tab-height) + var(--jp-border-width));
924927
}
925928

926-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
929+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab,
930+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tab {
927931
flex: 0 1 var(--jp-widgets-horizontal-tab-width);
928932
min-width: 35px;
929933
min-height: calc(var(--jp-widgets-horizontal-tab-height) + var(--jp-border-width));
@@ -937,7 +941,8 @@
937941
position: relative;
938942
}
939943

940-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current {
944+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current,
945+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tab.lm-mod-current {
941946
color: var(--jp-ui-font-color0);
942947
/* We want the background to match the tab content background */
943948
background: var(--jp-layout-color1);
@@ -946,7 +951,8 @@
946951
overflow: visible;
947952
}
948953

949-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current:before {
954+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-current:before,
955+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tab.lm-mod-current:before {
950956
position: absolute;
951957
top: calc(-1 * var(--jp-border-width));
952958
left: calc(-1 * var(--jp-border-width));
@@ -956,29 +962,36 @@
956962
background: var(--jp-brand-color1);
957963
}
958964

959-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab:first-child {
965+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab:first-child,
966+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tab:first-child {
960967
margin-left: 0;
961968
}
962969

963-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab:hover:not(.p-mod-current) {
970+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab:hover:not(.p-mod-current),
971+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
964972
background: var(--jp-layout-color1);
965973
color: var(--jp-ui-font-color1);
966974
}
967975

968-
.jupyter-widgets.widget-tab > .p-TabBar .p-mod-closable > .p-TabBar-tabCloseIcon {
976+
.jupyter-widgets.widget-tab > .p-TabBar .p-mod-closable > .p-TabBar-tabCloseIcon,
977+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-mod-closable > .lm-TabBar-tabCloseIcon {
969978
margin-left: 4px;
970979
}
971980

972981
/* This font-awesome strategy may not work across FA4 and FA5, but we don't
973982
actually support closable tabs, so it really doesn't matter */
974-
.jupyter-widgets.widget-tab > .p-TabBar .p-mod-closable > .p-TabBar-tabCloseIcon:before {
983+
.jupyter-widgets.widget-tab > .p-TabBar .p-mod-closable > .p-TabBar-tabCloseIcon:before,
984+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-mod-closable > .lm-TabBar-tabCloseIcon:before {
975985
font-family: FontAwesome;
976986
content: '\f00d'; /* close */
977987
}
978988

979989
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon,
980990
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel,
981-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon {
991+
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon,
992+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tabIcon,
993+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tabLabel,
994+
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tabCloseIcon {
982995
line-height: var(--jp-widgets-horizontal-tab-height);
983996
}
984997

0 commit comments

Comments
 (0)