@jupyterlab/statusbar 4.0.0-alpha.9 → 4.0.0-beta.1

package/style/base.css

@@ -4,14 +4,77 @@
 |----------------------------------------------------------------------------*/
 
 /*-----------------------------------------------------------------------------
-| Variables
+| Styles
 |----------------------------------------------------------------------------*/
 
-/*-----------------------------------------------------------------------------
+.jp-StatusBar-Widget {
+  display: flex;
+  align-items: center;
+  background: var(--jp-layout-color2);
+  min-height: var(--jp-statusbar-height);
+  justify-content: space-between;
+  padding: 0 10px;
+}
 
-/*-----------------------------------------------------------------------------
-| Styles
-|----------------------------------------------------------------------------*/
+.jp-StatusBar-Left {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.jp-StatusBar-Middle {
+  display: flex;
+  align-items: center;
+}
+
+.jp-StatusBar-Right {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+
+.jp-StatusBar-Item {
+  max-height: var(--jp-statusbar-height);
+  margin: 0 2px;
+  height: var(--jp-statusbar-height);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--jp-ui-font-color1);
+  padding: 0 6px;
+}
+
+.jp-mod-highlighted:hover {
+  background-color: var(--jp-layout-color3);
+}
+
+.jp-mod-clicked {
+  background-color: var(--jp-brand-color1);
+}
+
+.jp-mod-clicked:hover {
+  background-color: var(--jp-brand-color0);
+}
+
+.jp-mod-clicked .jp-StatusBar-TextItem {
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+.jp-StatusBar-HoverItem {
+  box-shadow: '0px 4px 4px rgba(0, 0, 0, 0.25)';
+}
+
+.jp-StatusBar-TextItem {
+  font-size: var(--jp-ui-font-size1);
+  font-family: var(--jp-ui-font-family);
+  line-height: 24px;
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-StatusBar-GroupItem {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
 
 .jp-Statusbar-ProgressCircle svg {
   display: block;

package/lib/style/layout.d.ts

@@ -1,5 +0,0 @@
-import { NestedCSSProperties } from 'typestyle/lib/types';
-export declare const centeredFlex: NestedCSSProperties;
-export declare const leftToRight: NestedCSSProperties;
-export declare const rightToLeft: NestedCSSProperties;
-export declare const equiDistant: NestedCSSProperties;

package/lib/style/layout.js

@@ -1,16 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-export const centeredFlex = {
-    display: 'flex',
-    alignItems: 'center'
-};
-export const leftToRight = {
-    flexDirection: 'row'
-};
-export const rightToLeft = {
-    flexDirection: 'row-reverse'
-};
-export const equiDistant = {
-    justifyContent: 'space-between'
-};
-//# sourceMappingURL=layout.js.map

package/lib/style/layout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/style/layout.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAI3D,MAAM,CAAC,MAAM,YAAY,GAAwB;IAC/C,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAwB;IAC9C,aAAa,EAAE,KAAK;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAwB;IAC9C,aAAa,EAAE,aAAa;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAwB;IAC9C,cAAc,EAAE,eAAe;CAChC,CAAC"}

package/lib/style/statusbar.d.ts

@@ -1,8 +0,0 @@
-export declare const statusBar: string;
-export declare const side: string;
-export declare const leftSide: string;
-export declare const rightSide: string;
-export declare const item: string;
-export declare const clickedItem: string;
-export declare const interactiveItem: string;
-export declare const hoverItem: string;

package/lib/style/statusbar.js

@@ -1,50 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-import { style } from 'typestyle/lib';
-import { centeredFlex, leftToRight, rightToLeft } from './layout';
-import { textItem } from './text';
-import vars from './variables';
-const itemPadding = {
-    paddingLeft: vars.itemPadding,
-    paddingRight: vars.itemPadding
-};
-const interactiveHover = {
-    $nest: {
-        '&:hover': {
-            backgroundColor: vars.hoverColor
-        }
-    }
-};
-const clicked = {
-    backgroundColor: vars.clickColor,
-    $nest: {
-        ['.' + textItem]: {
-            color: vars.textClickColor
-        }
-    }
-};
-export const statusBar = style({
-    background: vars.backgroundColor,
-    minHeight: vars.height,
-    justifyContent: 'space-between',
-    paddingLeft: vars.statusBarPadding,
-    paddingRight: vars.statusBarPadding
-}, centeredFlex);
-export const side = style(centeredFlex);
-export const leftSide = style(leftToRight);
-export const rightSide = style(rightToLeft);
-export const item = style({
-    maxHeight: vars.height,
-    marginLeft: vars.itemMargin,
-    marginRight: vars.itemMargin,
-    height: vars.height,
-    whiteSpace: vars.whiteSpace,
-    textOverflow: vars.textOverflow,
-    color: vars.textColor
-}, itemPadding);
-export const clickedItem = style(clicked);
-export const interactiveItem = style(interactiveHover);
-export const hoverItem = style({
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
-});
-//# sourceMappingURL=statusbar.js.map

package/lib/style/statusbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"statusbar.js","sourceRoot":"","sources":["../../src/style/statusbar.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,IAAI,MAAM,aAAa,CAAC;AAE/B,MAAM,WAAW,GAAG;IAClB,WAAW,EAAE,IAAI,CAAC,WAAW;IAC7B,YAAY,EAAE,IAAI,CAAC,WAAW;CAC/B,CAAC;AAEF,MAAM,gBAAgB,GAAG;IACvB,KAAK,EAAE;QACL,SAAS,EAAE;YACT,eAAe,EAAE,IAAI,CAAC,UAAU;SACjC;KACF;CACF,CAAC;AAEF,MAAM,OAAO,GAAG;IACd,eAAe,EAAE,IAAI,CAAC,UAAU;IAChC,KAAK,EAAE;QACL,CAAC,GAAG,GAAG,QAAQ,CAAC,EAAE;YAChB,KAAK,EAAE,IAAI,CAAC,cAAc;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAC5B;IACE,UAAU,EAAE,IAAI,CAAC,eAAe;IAChC,SAAS,EAAE,IAAI,CAAC,MAAM;IACtB,cAAc,EAAE,eAAe;IAC/B,WAAW,EAAE,IAAI,CAAC,gBAAgB;IAClC,YAAY,EAAE,IAAI,CAAC,gBAAgB;CACpC,EACD,YAAY,CACb,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAE5C,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CACvB;IACE,SAAS,EAAE,IAAI,CAAC,MAAM;IACtB,UAAU,EAAE,IAAI,CAAC,UAAU;IAC3B,WAAW,EAAE,IAAI,CAAC,UAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;IACnB,UAAU,EAAE,IAAI,CAAC,UAAU;IAC3B,YAAY,EAAE,IAAI,CAAC,YAAY;IAC/B,KAAK,EAAE,IAAI,CAAC,SAAS;CACtB,EACD,WAAW,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AAC1C,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC;IAC7B,SAAS,EAAE,iCAAiC;CAC7C,CAAC,CAAC"}

package/lib/style/text.d.ts

@@ -1,3 +0,0 @@
-import { NestedCSSProperties } from 'typestyle/lib/types';
-export declare const baseText: NestedCSSProperties;
-export declare const textItem: string;

package/lib/style/text.js

@@ -1,13 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-import { style } from 'typestyle/lib';
-import vars from './variables';
-export const baseText = {
-    fontSize: vars.fontSize,
-    fontFamily: vars.fontFamily
-};
-export const textItem = style(baseText, {
-    lineHeight: '24px',
-    color: vars.textColor
-});
-//# sourceMappingURL=text.js.map

package/lib/style/text.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/style/text.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,IAAI,MAAM,aAAa,CAAC;AAE/B,MAAM,CAAC,MAAM,QAAQ,GAAwB;IAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ;IACvB,UAAU,EAAE,IAAI,CAAC,UAAU;CAC5B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE;IACtC,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,IAAI,CAAC,SAAS;CACtB,CAAC,CAAC"}

package/lib/style/variables.d.ts

@@ -1,18 +0,0 @@
-import { Property } from 'csstype';
-declare const _default: {
-    hoverColor: string;
-    clickColor: string;
-    backgroundColor: string;
-    height: string;
-    fontSize: string;
-    fontFamily: string;
-    textColor: string;
-    textClickColor: string;
-    itemMargin: string;
-    itemPadding: string;
-    statusBarPadding: string;
-    interItemHalfSpacing: string;
-    whiteSpace: Property.WhiteSpace;
-    textOverflow: string;
-};
-export default _default;

package/lib/style/variables.js

@@ -1,17 +0,0 @@
-export default {
-    hoverColor: 'var(--jp-layout-color3)',
-    clickColor: 'var(--jp-brand-color1)',
-    backgroundColor: 'var(--jp-layout-color2)',
-    height: 'var(--jp-statusbar-height)',
-    fontSize: 'var(--jp-ui-font-size1)',
-    fontFamily: 'var(--jp-ui-font-family)',
-    textColor: 'var(--jp-ui-font-color1)',
-    textClickColor: 'white',
-    itemMargin: '2px',
-    itemPadding: '6px',
-    statusBarPadding: '10px',
-    interItemHalfSpacing: '2px',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-};
-//# sourceMappingURL=variables.js.map

package/lib/style/variables.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"variables.js","sourceRoot":"","sources":["../../src/style/variables.ts"],"names":[],"mappings":"AAIA,eAAe;IACb,UAAU,EAAE,yBAAyB;IACrC,UAAU,EAAE,wBAAwB;IACpC,eAAe,EAAE,yBAAyB;IAC1C,MAAM,EAAE,4BAA4B;IACpC,QAAQ,EAAE,yBAAyB;IACnC,UAAU,EAAE,0BAA0B;IACtC,SAAS,EAAE,0BAA0B;IACrC,cAAc,EAAE,OAAO;IACvB,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,KAAK;IAClB,gBAAgB,EAAE,MAAM;IACxB,oBAAoB,EAAE,KAAK;IAC3B,UAAU,EAAE,QAA+B;IAC3C,YAAY,EAAE,UAAU;CACzB,CAAC"}