@nuralyui/tabs 0.0.7 → 0.0.8
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.
- package/package.json +1 -1
- package/tabs.style.d.ts.map +1 -1
- package/tabs.style.js +6 -4
- package/tabs.style.js.map +1 -1
package/package.json
CHANGED
package/tabs.style.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.style.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"tabs.style.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+LlB,CAAC"}
|
package/tabs.style.js
CHANGED
|
@@ -5,7 +5,7 @@ export const styles = css `
|
|
|
5
5
|
height: 100%;
|
|
6
6
|
}
|
|
7
7
|
.tabs-container{
|
|
8
|
-
background-color:var(--hybrid-tabs-container-background-color);
|
|
8
|
+
background-color:var(--hybrid-tabs-container-background-color, var(--hybrid-tabs-container-background-local-color));
|
|
9
9
|
height: 100%;
|
|
10
10
|
}
|
|
11
11
|
.tab-labels,
|
|
@@ -127,13 +127,13 @@ export const styles = css `
|
|
|
127
127
|
}
|
|
128
128
|
.tab-label.active {
|
|
129
129
|
color: var(--hybrid-tabs-label-active);
|
|
130
|
-
|
|
130
|
+
background-color: var(--hybrid-tabs-label-active-background-color); /* Added background color */
|
|
131
131
|
}
|
|
132
132
|
.add-tab-icon{
|
|
133
133
|
--hybrid-icon-color:var(--hybrid-tabs-add-icon-color);
|
|
134
134
|
}
|
|
135
135
|
:host{
|
|
136
|
-
--hybrid-tabs-container-background-color:#ffffff;
|
|
136
|
+
--hybrid-tabs-container-background-local-color:#ffffff;
|
|
137
137
|
--hybrid-tabs-container-box-shadow:none;
|
|
138
138
|
--hybrid-tabs-dragging-start-border:1px dashed black;
|
|
139
139
|
--hybrid-tabs-dragging-enter-background-color:#1661b1;
|
|
@@ -178,14 +178,16 @@ export const styles = css `
|
|
|
178
178
|
--hybrid-tabs-label-active: #000000;
|
|
179
179
|
--hybrid-tabs-label-color:gray;
|
|
180
180
|
--hybrid-tabs-add-icon-color: #000000;
|
|
181
|
+
--hybrid-tabs-label-active-background-color: transparent; /* Added variable */
|
|
181
182
|
}
|
|
182
183
|
@media (prefers-color-scheme: dark) {
|
|
183
184
|
:host{
|
|
184
|
-
--hybrid-tabs-container-background-color: #
|
|
185
|
+
--hybrid-tabs-container-background-local-color: #3e3e3e;
|
|
185
186
|
--hybrid-tabs-content-background-color: #2d2d2d;
|
|
186
187
|
--hybrid-tabs-label-hover-color: #aaa;
|
|
187
188
|
--hybrid-tabs-label-active:#ffffff;
|
|
188
189
|
--hybrid-tabs-add-icon-color: #ffffff;
|
|
190
|
+
--hybrid-tabs-label-active-background-color: #2d2d2d; /* Dark mode background */
|
|
189
191
|
}
|
|
190
192
|
}
|
|
191
193
|
`;
|
package/tabs.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+LxB,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styles = css`\n :host{\n display: block;\n height: 100%;\n }\n .tabs-container{\n background-color:var(--hybrid-tabs-container-background-color, var(--hybrid-tabs-container-background-local-color));\n height: 100%;\n }\n .tab-labels,\n .tabs-container {\n display: flex;\n }\n\n .tabs-container {\n box-shadow: var(--hybrid-tabs-container-box-shadow);\n }\n\n .dragging-start {\n border: var(--hybrid-tabs-dragging-start-border);\n }\n .dragging-enter {\n background-color: var(--hybrid-tabs-dragging-enter-background-color);\n }\n .vertical-align > .tab-content {\n border: var(--hybrid-tabs-va-enter-border);\n border-left: var(--hybrid-tabs-va-enter-border-left);\n }\n .vertical-align.right-align > .tab-content {\n border: var(--hybrid-tabs-va-ra-border);\n border-right: var(--hybrid-tabs-va-ra-border-right);\n }\n\n .tab-label {\n cursor: var(--hybrid-tabs-label-cursor);\n padding: var(--hybrid-tabs-label-padding);\n border-bottom: var(--hybrid-tabs-label-border-bottom);\n transition: var(--hybrid-tabs-label-transition);\n user-select: var(--hybrid-tabs-label-user-select);\n color:var(--hybrid-tabs-label-color);\n }\n\n .tab-label:hover {\n color: var(--hybrid-tabs-label-hover-color);\n }\n\n .tab-label.active {\n color: var(--hybrid-tabs-label-active-hover-color);\n }\n\n .tab-content {\n padding: var(--hybrid-tabs-content-padding);\n flex-grow: 1;\n background-color: var(--hybrid-tabs-content-background-color);\n border-top: var(--hybrid-tabs-content-border-top);\n max-height:100vh;\n overflow-y:auto;\n overflow-x:hidden;\n }\n .right-align > .tab-labels {\n flex-direction: var(--hybrid-tabs-right-align-labels-flex-direction);\n align-self: var(--hybrid-tabs-right-align-labels-align-self);\n }\n\n .center-align > .tab-labels {\n align-self: var(--hybrid-tabs-center-align-labels-align-self);\n }\n .vertical-align {\n flex-direction: var(--hybrid-tabs-vertical-align-flex-direction);\n }\n .horizontal-align {\n flex-direction: var(--hybrid-tabs-halign-flex-direction);\n }\n\n .vertical-align.right-align {\n flex-direction: var(--hybrid-tabs-valign-right-align-flex-direction);\n }\n\n .tab-label:hover,\n .tab-label.active {\n border-bottom: var(--hybrid-tabs-label-active-border-bottom);\n border-color: var(--hybrid-tabs-label-active-border-color);\n }\n\n .tab-label.active {\n color: var(--hybrid-tabs-label-active-hover-color);\n }\n\n .vertical-align .tab-label {\n border: var(--hybrid-tabs-vertical-align-label-border);\n border-right: var(--hybrid-tabs-vertical-align-label-border-right);\n }\n\n .vertical-align.right-align .tab-label {\n border: var(--hybrid-tabs-valign-ralign-label-border);\n border-left: var(--hybrid-tabs-valign-ralign-label-border-left);\n }\n\n .vertical-align .tab-label:hover,\n .vertical-align .tab-label.active {\n border: var(--hybrid-tabs-vertical-align-label-border-active);\n border-right: var(--hybrid-tabs-vertical-align-label-border-right-active);\n border-color: var(--hybrid-tabs-vertical-align-label-border-color-active);\n }\n .vertical-align.right-align .tab-label:hover,\n .vertical-align.right-align .tab-label.active {\n border: var(--hybrid-tabs-valign-ralign-label-border-active);\n border-left: var(--hybrid-tabs-valign-ralign-label-border-left-active);\n border-color: var(--hybrid-tabs-valign-ralign-label-border-color-active);\n }\n\n .close-icon {\n font-size: var(--hybrid-tabs-add-icon-font-size);\n vertical-align: bottom;\n margin-left: var(--hybrid-tabs-add-icon-margin-left);\n }\n\n .add-tab-label {\n font-size: var(--hybrid-tabs-add-label-font-size);\n text-align: var(--hybrid-tabs-add-label-text-align);\n }\n .dragging {\n border: var(--hybrid-tabs-dragging-border) !important;\n opacity: 0.8;\n color: #464646 !important;\n }\n .tab-label.active {\n color: var(--hybrid-tabs-label-active);\n background-color: var(--hybrid-tabs-label-active-background-color); /* Added background color */\n } \n .add-tab-icon{\n --hybrid-icon-color:var(--hybrid-tabs-add-icon-color);\n }\n :host{\n --hybrid-tabs-container-background-local-color:#ffffff;\n --hybrid-tabs-container-box-shadow:none;\n --hybrid-tabs-dragging-start-border:1px dashed black;\n --hybrid-tabs-dragging-enter-background-color:#1661b1;\n --hybrid-tabs-va-enter-border: none;\n --hybrid-tabs-va-enter-border-left: 1px solid #ccc;\n --hybrid-tabs-va-ra-border:none;\n --hybrid-tabs-va-ra-border-right:1px solid #ccc;\n --hybrid-tabs-label-cursor:pointer;\n --hybrid-tabs-label-padding: 7px 7px 5px 7px;\n --hybrid-tabs-label-border-bottom: 2px solid transparent;\n --hybrid-tabs-label-transition: border-color 0.1s ease;\n --hybrid-tabs-label-user-select: none;\n --hybrid-tabs-label-hover-color: #1661b1;\n --hybrid-tabs-label-active-hover-color:#006afe;\n --hybrid-tabs-content-padding:10px;\n --hybrid-tabs-content-background-color: #fff;\n --hybrid-tabs-content-border-top: 1px solid #ccc;\n --hybrid-tabs-right-align-labels-flex-direction:row-reverse;\n --hybrid-tabs-right-align-labels-align-self: end;\n --hybrid-tabs-center-align-labels-align-self:center;\n --hybrid-tabs-vertical-align-flex-direction:row;\n --hybrid-tabs-halign-flex-direction:column;\n --hybrid-tabs-valign-right-align-flex-direction:row-reverse;\n --hybrid-tabs-label-active-border-bottom:2px solid transparent;\n --hybrid-tabs-label-active-border-color: rgb(0, 106, 254);\n --hybrid-tabs-label-active-hover-color: #006afe;\n --hybrid-tabs-vertical-align-label-border: #006afe;\n --hybrid-tabs-vertical-align-label-border-right: 2px solid transparent;\n --hybrid-tabs-valign-ralign-label-border: none;\n --hybrid-tabs-valign-ralign-label-border-left: 2px solid transparent;\n --hybrid-tabs-vertical-align-label-border-active: none;\n --hybrid-tabs-vertical-align-label-border-right-active: 2px solid transparent;\n --hybrid-tabs-vertical-align-label-border-color-active: rgb(0, 106, 254);\n --hybrid-tabs-valign-ralign-label-border-active: none;\n --hybrid-tabs-valign-ralign-label-border-left-active: 2px solid transparent;\n --hybrid-tabs-valign-ralign-label-border-color-active: rgb(0, 106, 254);\n --hybrid-tabs-add-icon-font-size: 13px;\n --hybrid-tabs-add-icon-margin-left: 5px;\n --hybrid-tabs-add-label-font-size: 13px;\n --hybrid-tabs-add-label-text-align: center;\n --hybrid-tabs-dragging-border: 1px dashed gray;\n --hybrid-tabs-label-active: #000000;\n --hybrid-tabs-label-color:gray;\n --hybrid-tabs-add-icon-color: #000000;\n --hybrid-tabs-label-active-background-color: transparent; /* Added variable */\n }\n @media (prefers-color-scheme: dark) {\n :host{\n --hybrid-tabs-container-background-local-color: #3e3e3e;\n --hybrid-tabs-content-background-color: #2d2d2d;\n --hybrid-tabs-label-hover-color: #aaa;\n --hybrid-tabs-label-active:#ffffff; \n --hybrid-tabs-add-icon-color: #ffffff;\n --hybrid-tabs-label-active-background-color: #2d2d2d; /* Dark mode background */\n }\n }\n`;"]}
|