@omegagrid/tabs 0.10.9 → 0.10.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.style.d.ts","sourceRoot":"","sources":["../../src/components/tabs.style.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"tabs.style.d.ts","sourceRoot":"","sources":["../../src/components/tabs.style.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,yBAuMjB,CAAC"}
|
|
@@ -31,41 +31,49 @@ export const style = css `
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
:host([position="top"]) .tab {
|
|
34
|
-
border-top:
|
|
34
|
+
border-top: 2px solid transparent;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
:host([position="bottom"]) .tab {
|
|
38
|
-
border-bottom:
|
|
38
|
+
border-bottom: 2px solid transparent;
|
|
39
39
|
}
|
|
40
|
-
|
|
40
|
+
|
|
41
41
|
:host([position="bottom"]) .tab.active {
|
|
42
42
|
top: -1px;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
:host([position="top"]) .tab:hover
|
|
45
|
+
:host([position="top"]) .tab:hover {
|
|
46
|
+
border-top-color: var(--og-border-color-3);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:host([position="top"]) .tab.active {
|
|
46
50
|
border-top-color: var(--og-accent-color);
|
|
47
51
|
}
|
|
48
52
|
|
|
49
|
-
:host([position="bottom"]) .tab:hover
|
|
53
|
+
:host([position="bottom"]) .tab:hover {
|
|
54
|
+
border-bottom-color: var(--og-border-color-3);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:host([position="bottom"]) .tab.active {
|
|
50
58
|
border-bottom-color: var(--og-accent-color);
|
|
51
59
|
}
|
|
52
60
|
|
|
53
61
|
.marker {
|
|
54
62
|
display: none;
|
|
55
63
|
position: absolute;
|
|
56
|
-
height:
|
|
64
|
+
height: 2px;
|
|
57
65
|
background-color: var(--og-accent-color);
|
|
58
|
-
transition: left 0.2s, width 0.2s;
|
|
66
|
+
transition: left 0.2s ease, width 0.2s ease;
|
|
59
67
|
}
|
|
60
68
|
|
|
61
69
|
:host([position="top"]) .marker {
|
|
62
70
|
top: 0px;
|
|
63
|
-
bottom: auto;
|
|
71
|
+
bottom: auto;
|
|
64
72
|
}
|
|
65
73
|
|
|
66
74
|
:host([position="bottom"]) .marker {
|
|
67
75
|
bottom: 0px;
|
|
68
|
-
top: auto;
|
|
76
|
+
top: auto;
|
|
69
77
|
}
|
|
70
78
|
|
|
71
79
|
:host(.inactive) .tab.active {
|
|
@@ -87,12 +95,17 @@ export const style = css `
|
|
|
87
95
|
padding-left: 7px;
|
|
88
96
|
padding-right: 7px;
|
|
89
97
|
position: relative;
|
|
98
|
+
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
.tab.closable {
|
|
93
102
|
padding-right: 20px;
|
|
94
103
|
}
|
|
95
104
|
|
|
105
|
+
.tab:hover {
|
|
106
|
+
background-color: var(--og-tab-background-color-active);
|
|
107
|
+
}
|
|
108
|
+
|
|
96
109
|
.tab.active {
|
|
97
110
|
background-color: var(--og-tab-background-color-active);
|
|
98
111
|
height: ${constants.TAB_PANEL_HEIGHT}px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../src/components/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;gBAOR,SAAS,CAAC,gBAAgB;iBACzB,SAAS,CAAC,gBAAgB;;;;;;;;;YAS/B,SAAS,CAAC,gBAAgB,GAAG,CAAC;;;;;;;;YAQ9B,SAAS,CAAC,gBAAgB,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../src/components/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;gBAOR,SAAS,CAAC,gBAAgB;iBACzB,SAAS,CAAC,gBAAgB;;;;;;;;;YAS/B,SAAS,CAAC,gBAAgB,GAAG,CAAC;;;;;;;;YAQ9B,SAAS,CAAC,gBAAgB,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAkF9B,SAAS,CAAC,gBAAgB;;;;;;;;;;;aAWzB,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFrE,CAAC","sourcesContent":["import { device } from \"@omegagrid/core\";\nimport constants from \"../constants\";\nimport { css, unsafeCSS } from \"lit\";\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tcolor: var(--og-text-color);\n\t\tmin-height: ${constants.TAB_PANEL_HEIGHT}px;\n\t\tline-height: ${constants.TAB_PANEL_HEIGHT}px;\n\t\tbackground: var(--og-tab-panel-background-color);\n\t\tborder-bottom: 1px solid var(--og-tab-border-color);\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tfont-size: var(--og-font-size);\n\t}\n\n\t.tabs {\n\t\theight: ${constants.TAB_PANEL_HEIGHT - 1}px;\n\t\tflex: 1;\n\t\twhite-space: nowrap;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\tog-container {\n\t\theight: ${constants.TAB_PANEL_HEIGHT - 1}px;\n\t\tflex: 1;\n\t}\n\n\t:host([position=\"top\"]) .tab {\n\t\tborder-top: 2px solid transparent;\n\t}\n\n\t:host([position=\"bottom\"]) .tab {\n\t\tborder-bottom: 2px solid transparent;\n\t}\n\n\t:host([position=\"bottom\"]) .tab.active {\n\t\ttop: -1px;\n\t}\n\n\t:host([position=\"top\"]) .tab:hover {\n\t\tborder-top-color: var(--og-border-color-3);\n\t}\n\n\t:host([position=\"top\"]) .tab.active {\n\t\tborder-top-color: var(--og-accent-color);\n\t}\n\n\t:host([position=\"bottom\"]) .tab:hover {\n\t\tborder-bottom-color: var(--og-border-color-3);\n\t}\n\n\t:host([position=\"bottom\"]) .tab.active {\n\t\tborder-bottom-color: var(--og-accent-color);\n\t}\n\n\t.marker {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\theight: 2px;\n\t\tbackground-color: var(--og-accent-color);\n\t\ttransition: left 0.2s ease, width 0.2s ease;\n\t}\n\n\t:host([position=\"top\"]) .marker {\n\t \ttop: 0px;\n\t\tbottom: auto;\n\t}\n\n\t:host([position=\"bottom\"]) .marker {\n\t \tbottom: 0px;\n\t\ttop: auto;\n\t}\n\n\t:host(.inactive) .tab.active {\n\t\tborder-top-color: var(--og-tab-border-color);\n\t\tborder-bottom-color: var(--og-tab-border-color);\n\t}\n\n\t:host([tabsize=\"stretch\"]) .tab.last {\n\t\tborder-right-width: 0;\n\t}\n\n\t.tab {\n\t\tborder-right: 1px solid var(--og-tab-border-color);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\theight: 100%;\n\t\tbackground: var(--og-tab-background-color);\n\t\tcursor: pointer;\n\t\tpadding-left: 7px;\n\t\tpadding-right: 7px;\n\t\tposition: relative;\n\t\ttransition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n\t}\n\n\t.tab.closable {\n\t\tpadding-right: 20px;\n\t}\n\n\t.tab:hover {\n\t\tbackground-color: var(--og-tab-background-color-active);\n\t}\n\n\t.tab.active {\n\t\tbackground-color: var(--og-tab-background-color-active);\n\t\theight: ${constants.TAB_PANEL_HEIGHT}px;\n\t\tcolor: var(--og-text-color-3);\n\t}\n\n\t.tab:hover og-close {\n\t\tdisplay: block;\n\t}\n\n\tog-close {\n\t\tposition: absolute;\n\t\tright: 2px;\n\t\tdisplay: ${unsafeCSS(device.detect() == \"mobile\" ? \"block\" : \"none\")};\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tfont-size: 10px;\n\t\tline-height: 16px;\n\t\tmargin: 7px 0 0 5px;\n\t}\n\n\t.tab-save-mark {\n\t\theight: 16px;\n\t\tline-height: 16px;\n\t\tmargin: 6px 0 0 5px;\n\t}\n\n\t.tab.closable:hover .tab-save-mark {\n\t\tdisplay: none;\n\t}\n\n\t.tab.closable .tab-save-mark {\n\t\tposition: absolute;\n\t\tright: 5px;\n\t}\n\n\t.tab.unsaved {\n\t\tcolor: #959d00;\n\t}\n\n\t:host([tabAlign=\"center\"]) .tab-text {\n\t\ttext-align: center;\n\t}\n\n\t:host([tabAlign=\"right\"]) .tab-text {\n\t\ttext-align: right;\n\t}\n\n\t.tab-text {\n\t\tflex: 1;\n\t}\n\n\t.tab-text og-icon {\n\t\tdisplay: inline;\n\t}\n\n\t.tab-x og-icon {\n\t\tdisplay: block;\n\t}\n\n\t.tab-x:hover {\n\t\tbackground-color: var(--og-accent-color-alpha-30);\n\t}\n\n\t.empty {\n\t\tflex: 1;\n\t\theight: 100%;\n\t}\n\t\n\t.buttons {\n\t\tflex: 0;\n\t\theight: 100%;\n\t\tpadding: 0 10px 0 10px;\n\t}\n\n\t.buttons og-icon {\n\t\tcursor: pointer;\n\t}\n\n\t.buttons og-icon:hover {\n\t\tcolor: var(--og-text-color-2)\n\t}\n\n\t#overlay {\n\t\tbackground-color: var(--og-accent-color);\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t#btnAdd {\n\t\tmargin-left: 5px;\n\t\tline-height: 0;\n\t}\n\n`;"]}
|
package/dist/constants.js
CHANGED
package/dist/constants.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE7D,eAAe;IACd,gBAAgB,EAAE,EAAE;IACpB,gBAAgB,EAAE,CAAC;IACnB,GAAG,aAAa;CAChB,CAAA","sourcesContent":["import { constants as coreConstants } from '@omegagrid/core';\n\nexport default {\n\tTAB_PANEL_HEIGHT: 30,\n\tTAB_PANEL_BORDER:
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE7D,eAAe;IACd,gBAAgB,EAAE,EAAE;IACpB,gBAAgB,EAAE,CAAC;IACnB,GAAG,aAAa;CAChB,CAAA","sourcesContent":["import { constants as coreConstants } from '@omegagrid/core';\n\nexport default {\n\tTAB_PANEL_HEIGHT: 30,\n\tTAB_PANEL_BORDER: 2,\n\t...coreConstants\n}"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/tabs",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.11",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Universal tabbed layout component",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"_prepublish": "yarn test && yarn lint"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@omegagrid/core": "^0.10.
|
|
30
|
+
"@omegagrid/core": "^0.10.11",
|
|
31
31
|
"lit": "^3.1.1",
|
|
32
32
|
"lit-html": "^3.1.1",
|
|
33
33
|
"ts-debounce": "^4.0.0"
|