@nuralyui/tabs 0.0.8 → 0.0.9
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 +8 -5
- 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,yBAkMlB,CAAC"}
|
package/tabs.style.js
CHANGED
|
@@ -5,6 +5,7 @@ export const styles = css `
|
|
|
5
5
|
height: 100%;
|
|
6
6
|
}
|
|
7
7
|
.tabs-container{
|
|
8
|
+
border-radius: var(--hybrid-tabs-border-radius, var(--hybrid-tabs-border-radius-local));
|
|
8
9
|
background-color:var(--hybrid-tabs-container-background-color, var(--hybrid-tabs-container-background-local-color));
|
|
9
10
|
height: 100%;
|
|
10
11
|
}
|
|
@@ -51,8 +52,9 @@ export const styles = css `
|
|
|
51
52
|
|
|
52
53
|
.tab-content {
|
|
53
54
|
padding: var(--hybrid-tabs-content-padding);
|
|
55
|
+
margin: var(--hybrid-tabs-content-maring);
|
|
54
56
|
flex-grow: 1;
|
|
55
|
-
background-color: var(--hybrid-tabs-content-background-color);
|
|
57
|
+
background-color: var(--hybrid-tabs-content-background-color, var(--hybrid-tabs-content-background-color-local));
|
|
56
58
|
border-top: var(--hybrid-tabs-content-border-top);
|
|
57
59
|
max-height:100vh;
|
|
58
60
|
overflow-y:auto;
|
|
@@ -134,6 +136,7 @@ export const styles = css `
|
|
|
134
136
|
}
|
|
135
137
|
:host{
|
|
136
138
|
--hybrid-tabs-container-background-local-color:#ffffff;
|
|
139
|
+
--hybrid-tabs-border-radius-local:0px;
|
|
137
140
|
--hybrid-tabs-container-box-shadow:none;
|
|
138
141
|
--hybrid-tabs-dragging-start-border:1px dashed black;
|
|
139
142
|
--hybrid-tabs-dragging-enter-background-color:#1661b1;
|
|
@@ -142,14 +145,14 @@ export const styles = css `
|
|
|
142
145
|
--hybrid-tabs-va-ra-border:none;
|
|
143
146
|
--hybrid-tabs-va-ra-border-right:1px solid #ccc;
|
|
144
147
|
--hybrid-tabs-label-cursor:pointer;
|
|
145
|
-
--hybrid-tabs-label-padding:
|
|
148
|
+
--hybrid-tabs-label-padding: 3px 7px 5px 7px;
|
|
146
149
|
--hybrid-tabs-label-border-bottom: 2px solid transparent;
|
|
147
150
|
--hybrid-tabs-label-transition: border-color 0.1s ease;
|
|
148
151
|
--hybrid-tabs-label-user-select: none;
|
|
149
152
|
--hybrid-tabs-label-hover-color: #1661b1;
|
|
150
153
|
--hybrid-tabs-label-active-hover-color:#006afe;
|
|
151
|
-
--hybrid-tabs-content-padding:
|
|
152
|
-
--hybrid-tabs-content-background-color: #fff;
|
|
154
|
+
--hybrid-tabs-content-padding:5px;
|
|
155
|
+
--hybrid-tabs-content-background-color-local: #fff;
|
|
153
156
|
--hybrid-tabs-content-border-top: 1px solid #ccc;
|
|
154
157
|
--hybrid-tabs-right-align-labels-flex-direction:row-reverse;
|
|
155
158
|
--hybrid-tabs-right-align-labels-align-self: end;
|
|
@@ -183,7 +186,7 @@ export const styles = css `
|
|
|
183
186
|
@media (prefers-color-scheme: dark) {
|
|
184
187
|
:host{
|
|
185
188
|
--hybrid-tabs-container-background-local-color: #3e3e3e;
|
|
186
|
-
--hybrid-tabs-content-background-color: #2d2d2d;
|
|
189
|
+
--hybrid-tabs-content-background-color-local: #2d2d2d;
|
|
187
190
|
--hybrid-tabs-label-hover-color: #aaa;
|
|
188
191
|
--hybrid-tabs-label-active:#ffffff;
|
|
189
192
|
--hybrid-tabs-add-icon-color: #ffffff;
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkMxB,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styles = css`\n :host{\n display: block;\n height: 100%;\n }\n .tabs-container{\n border-radius: var(--hybrid-tabs-border-radius, var(--hybrid-tabs-border-radius-local));\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 margin: var(--hybrid-tabs-content-maring);\n flex-grow: 1;\n background-color: var(--hybrid-tabs-content-background-color, var(--hybrid-tabs-content-background-color-local));\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-border-radius-local:0px;\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: 3px 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:5px;\n --hybrid-tabs-content-background-color-local: #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-local: #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`;"]}
|