Skip to content

Commit bb432ec

Browse files
jasongroutjasongrout
authored
Merge pull request #3146 from marimeireles/rename-widget
Rename widget>jupyter-widget, but maintaining compatibility
2 parents e234328 + 90949c4 commit bb432ec

File tree

5 files changed

+463
-216
lines changed

5 files changed

+463
-216
lines changed

‎packages/controls/css/lumino.css

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,83 +63,118 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
6363
* We've scoped the rules so that they are consistent with exactly our code.
6464
*/
6565

66-
.jupyter-widgets.widget-tab > .p-TabBar {
66+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar, /* <DEPRECATED> */
67+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar {
6768
display: flex;
6869
-webkit-user-select: none;
6970
-moz-user-select: none;
7071
-ms-user-select: none;
7172
user-select: none;
7273
}
7374

74-
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'] {
75+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar[data-orientation='horizontal'], /* <DEPRECATED> */
76+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar[data-orientation='horizontal'] {
7577
flex-direction: row;
7678
}
7779

78-
.jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'] {
80+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar[data-orientation='vertical'], /* <DEPRECATED> */
81+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar[data-orientation='vertical'] {
7982
flex-direction: column;
8083
}
8184

82-
.jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content {
85+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar > .p-TabBar-content, /* <DEPRECATED> */
86+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar > .p-TabBar-content {
8387
margin: 0;
8488
padding: 0;
8589
display: flex;
8690
flex: 1 1 auto;
8791
list-style-type: none;
8892
}
8993

94+
/* <DEPRECATED> */
9095
.jupyter-widgets.widget-tab
96+
> .p-TabBar[data-orientation='horizontal']
97+
> .p-TabBar-content,
98+
/* <DEPRECATED> */
99+
.jupyter-widgets.jupyter-widget-tab
91100
> .p-TabBar[data-orientation='horizontal']
92101
> .p-TabBar-content {
93102
flex-direction: row;
94103
}
95104

105+
/* <DEPRECATED> */
96106
.jupyter-widgets.widget-tab
107+
> .p-TabBar[data-orientation='vertical']
108+
> .p-TabBar-content,
109+
/* <DEPRECATED> */
110+
.jupyter-widgets.jupyter-widget-tab
97111
> .p-TabBar[data-orientation='vertical']
98112
> .p-TabBar-content {
99113
flex-direction: column;
100114
}
101115

102-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
116+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab, /* <DEPRECATED> */
117+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab {
103118
display: flex;
104119
flex-direction: row;
105120
box-sizing: border-box;
106121
overflow: hidden;
107122
}
108123

109-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon,
110-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon {
124+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabIcon, /* <DEPRECATED> */
125+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabCloseIcon, /* <DEPRECATED> */
126+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabIcon,
127+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabCloseIcon {
111128
flex: 0 0 auto;
112129
}
113130

114-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel {
131+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tabLabel, /* <DEPRECATED> */
132+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tabLabel {
115133
flex: 1 1 auto;
116134
overflow: hidden;
117135
white-space: nowrap;
118136
}
119137

120-
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden {
138+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden, /* <DEPRECATED> */
139+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar .p-TabBar-tab.p-mod-hidden {
121140
display: none !important;
122141
}
123142

124-
.jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab {
143+
/* <DEPRECATED> */ .jupyter-widgets.widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab, /* <DEPRECATED> */
144+
.jupyter-widgets.jupyter-widget-tab > .p-TabBar.p-mod-dragging .p-TabBar-tab {
125145
position: relative;
126146
}
127147

148+
/* <DEPRECATED> */
128149
.jupyter-widgets.widget-tab
150+
> .p-TabBar.p-mod-dragging[data-orientation='horizontal']
151+
.p-TabBar-tab,
152+
/* <DEPRECATED> */
153+
.jupyter-widgets.jupyter-widget-tab
129154
> .p-TabBar.p-mod-dragging[data-orientation='horizontal']
130155
.p-TabBar-tab {
131156
left: 0;
132157
transition: left 150ms ease;
133158
}
134159

160+
/* <DEPRECATED> */
135161
.jupyter-widgets.widget-tab
162+
> .p-TabBar.p-mod-dragging[data-orientation='vertical']
163+
.p-TabBar-tab,
164+
/* <DEPRECATED> */
165+
.jupyter-widgets.jupyter-widget-tab
136166
> .p-TabBar.p-mod-dragging[data-orientation='vertical']
137167
.p-TabBar-tab {
138168
top: 0;
139169
transition: top 150ms ease;
140170
}
141171

172+
/* <DEPRECATED> */
142173
.jupyter-widgets.widget-tab
174+
> .p-TabBar.p-mod-dragging
175+
.p-TabBar-tab.p-mod-dragging,
176+
/* <DEPRECATED> */
177+
.jupyter-widgets.jupyter-widget-tab
143178
> .p-TabBar.p-mod-dragging
144179
.p-TabBar-tab.p-mod-dragging {
145180
transition: none;

‎packages/controls/css/nouislider-custom.css

Lines changed: 42 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,29 @@
1-
/* Custom CSS */
1+
/* Copyright (c) Jupyter Development Team.
2+
* Distributed under the terms of the Modified BSD License.
3+
*/
24

3-
.widget-slider .noUi-connect {
5+
/* Custom CSS for nouislider */
6+
7+
/* <DEPRECATED> */ .widget-slider .noUi-connect, /* <DEPRECATED> */
8+
.jupyter-widget-slider .noUi-connect {
49
background: rgb(33, 150, 243);
510
}
611

7-
.widget-slider .noUi-horizontal {
12+
13+
/* <DEPRECATED> */ .widget-slider .noUi-horizontal, /* <DEPRECATED> */
14+
.jupyter-widget-slider .noUi-horizontal {
815
height: var(--jp-widgets-slider-track-thickness);
916
}
1017

11-
.widget-slider .noUi-vertical {
18+
19+
/* <DEPRECATED> */ .widget-slider .noUi-vertical, /* <DEPRECATED> */
20+
.jupyter-widget-slider .noUi-vertical {
1221
width: var(--jp-widgets-slider-track-thickness);
1322
height: 100%;
1423
}
1524

16-
.widget-slider .noUi-horizontal .noUi-handle {
25+
/* <DEPRECATED> */ .widget-slider .noUi-horizontal .noUi-handle, /* <DEPRECATED> */
26+
.jupyter-widget-slider .noUi-horizontal .noUi-handle {
1727
width: var(--jp-widgets-slider-handle-size);
1828
height: var(--jp-widgets-slider-handle-size);
1929
border-radius: 50%;
@@ -26,7 +36,8 @@
2636
right: calc(var(--jp-widgets-slider-handle-size) / -2);
2737
}
2838

29-
.widget-slider .noUi-vertical .noUi-handle {
39+
/* <DEPRECATED> */ .widget-slider .noUi-vertical .noUi-handle, /* <DEPRECATED> */
40+
.jupyter-widget-slider .noUi-vertical .noUi-handle {
3041
height: var(--jp-widgets-slider-handle-size);
3142
width: var(--jp-widgets-slider-handle-size);
3243
border-radius: 50%;
@@ -39,30 +50,37 @@
3950
top: calc(var(--jp-widgets-slider-handle-size) / -2);
4051
}
4152

42-
.widget-slider .noUi-handle:after {
53+
/* <DEPRECATED> */ .widget-slider .noUi-handle:after, /* <DEPRECATED> */
54+
.jupyter-widget-slider .noUi-handle:after {
4355
content: none;
4456
}
4557

46-
.widget-slider .noUi-handle:before {
58+
59+
/* <DEPRECATED> */ .widget-slider .noUi-handle:before, /* <DEPRECATED> */
60+
.jupyter-widget-slider .noUi-handle:before {
4761
content: none;
4862
}
4963

50-
.widget-slider .noUi-target {
64+
65+
/* <DEPRECATED> */ .widget-slider .noUi-target, /* <DEPRECATED> */
66+
.jupyter-widget-slider .noUi-target {
5167
background: #fafafa;
5268
border-radius: 4px;
5369
border: 1px;
5470
/* box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; */
5571
}
5672

57-
.widget-slider .ui-slider {
73+
/* <DEPRECATED> */ .widget-slider .ui-slider, /* <DEPRECATED> */
74+
.jupyter-widget-slider .ui-slider {
5875
border: var(--jp-widgets-slider-border-width) solid var(--jp-layout-color3);
5976
background: var(--jp-layout-color3);
6077
box-sizing: border-box;
6178
position: relative;
6279
border-radius: 0px;
6380
}
6481

65-
.widget-slider .noUi-handle {
82+
/* <DEPRECATED> */ .widget-slider .noUi-handle, /* <DEPRECATED> */
83+
.jupyter-widget-slider .noUi-handle {
6684
width: var(--jp-widgets-slider-handle-size);
6785
border: 1px solid #d9d9d9;
6886
border-radius: 3px;
@@ -72,29 +90,36 @@
7290
outline: none;
7391
}
7492

75-
.widget-slider .noUi-target:not([disabled]) .noUi-handle:hover,
76-
.widget-slider .noUi-target:not([disabled]) .noUi-handle:focus {
93+
/* <DEPRECATED> */ .widget-slider .noUi-target:not([disabled]) .noUi-handle:hover, /* <DEPRECATED> */
94+
/* <DEPRECATED> */ .widget-slider .noUi-target:not([disabled]) .noUi-handle:focus, /* <DEPRECATED> */
95+
.jupyter-widget-slider .noUi-target:not([disabled]) .noUi-handle:hover,
96+
.jupyter-widget-slider .noUi-target:not([disabled]) .noUi-handle:focus {
7797
background-color: var(--jp-widgets-slider-active-handle-color);
7898
border: var(--jp-widgets-slider-border-width) solid
7999
var(--jp-widgets-slider-active-handle-color);
80100
}
81101

82-
.widget-slider [disabled].noUi-target {
102+
/* <DEPRECATED> */ .widget-slider [disabled].noUi-target, /* <DEPRECATED> */
103+
.jupyter-widget-slider [disabled].noUi-target {
83104
opacity: 0.35;
84105
}
85106

86-
.widget-slider .noUi-connects {
107+
/* <DEPRECATED> */ .widget-slider .noUi-connects, /* <DEPRECATED> */
108+
.jupyter-widget-slider .noUi-connects {
87109
overflow: visible;
88110
z-index: 0;
89111
background: var(--jp-layout-color3);
90112
}
91113

92-
.widget-slider .noUi-vertical .noUi-connect {
114+
115+
/* <DEPRECATED> */ .widget-slider .noUi-vertical .noUi-connect, /* <DEPRECATED> */
116+
.jupyter-widget-slider .noUi-vertical .noUi-connect {
93117
width: calc(100% + 2px);
94118
right: -1px;
95119
}
96120

97-
.widget-slider .noUi-horizontal .noUi-connect {
121+
/* <DEPRECATED */ .widget-slider .noUi-horizontal .noUi-connect, /* <DEPRECATED */
122+
.jupyter-widget-slider .noUi-horizontal .noUi-connect {
98123
height: calc(100% + 2px);
99124
top: -1px;
100125
}

0 commit comments

Comments
 (0)