@triptease/tt-date-range-picker 6.3.2 → 6.4.0
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/dist/cjs/src/styles.js
CHANGED
|
@@ -5,6 +5,7 @@ const lit_1 = require("lit");
|
|
|
5
5
|
exports.styles = (0, lit_1.css) `
|
|
6
6
|
:host {
|
|
7
7
|
position: relative;
|
|
8
|
+
anchor-name: --date-range-picker;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
:host(:state(disabled)) {
|
|
@@ -66,5 +67,13 @@ exports.styles = (0, lit_1.css) `
|
|
|
66
67
|
margin-top: var(--space-scale-1);
|
|
67
68
|
flex-direction: row-reverse;
|
|
68
69
|
}
|
|
70
|
+
|
|
71
|
+
@supports (position-anchor: --date-range-picker) {
|
|
72
|
+
[part='dialog'] {
|
|
73
|
+
position-anchor: --date-range-picker;
|
|
74
|
+
position: fixed;
|
|
75
|
+
z-index: 1;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
69
78
|
`;
|
|
70
79
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n position: relative;\n anchor-name: --date-range-picker;\n }\n\n :host(:state(disabled)) {\n pointer-events: none;\n opacity: 0.5;\n }\n\n tt-side-panel::part(side-panel) {\n border-right: 1px solid var(--color-border-200);\n }\n\n tt-side-panel:empty {\n display: none;\n }\n\n [part='container'] {\n padding: var(--space-scale-1) var(--space-scale-1-5);\n gap: var(--space-scale-1);\n }\n\n [part='controls'] {\n display: flex;\n border: 1px solid var(--color-border-200);\n border-radius: var(--border-radius);\n width: fit-content;\n height: var(--date-picker-height, fit-content);\n background-color: var(--color-surface-100);\n font-size: var(--font-size-200);\n color: var(--color-text-400);\n align-items: stretch;\n justify-content: space-around;\n padding: 0;\n\n &[aria-invalid='true'] {\n outline: 2px solid var(--color-alert-strong);\n }\n\n button {\n border: 0;\n padding-inline: var(--space-scale-1);\n background-color: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n border-left: 1px solid var(--color-border-200);\n box-sizing: border-box;\n color: var(--color-text-400);\n }\n\n &:has(+ tt-dialog[open]) .show-calendar svg,\n .show-calendar:hover svg {\n color: var(--color-primary-400);\n }\n }\n\n [part='dialog']::part(dialog) {\n margin-top: var(--space-scale-1);\n flex-direction: row-reverse;\n }\n\n @supports (position-anchor: --date-range-picker) {\n [part='dialog'] {\n position-anchor: --date-range-picker;\n position: fixed;\n z-index: 1;\n }\n }\n`;\n"]}
|
package/dist/esm/src/styles.js
CHANGED
|
@@ -2,6 +2,7 @@ import { css } from 'lit';
|
|
|
2
2
|
export const styles = css `
|
|
3
3
|
:host {
|
|
4
4
|
position: relative;
|
|
5
|
+
anchor-name: --date-range-picker;
|
|
5
6
|
}
|
|
6
7
|
|
|
7
8
|
:host(:state(disabled)) {
|
|
@@ -63,5 +64,13 @@ export const styles = css `
|
|
|
63
64
|
margin-top: var(--space-scale-1);
|
|
64
65
|
flex-direction: row-reverse;
|
|
65
66
|
}
|
|
67
|
+
|
|
68
|
+
@supports (position-anchor: --date-range-picker) {
|
|
69
|
+
[part='dialog'] {
|
|
70
|
+
position-anchor: --date-range-picker;
|
|
71
|
+
position: fixed;
|
|
72
|
+
z-index: 1;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
66
75
|
`;
|
|
67
76
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n position: relative;\n anchor-name: --date-range-picker;\n }\n\n :host(:state(disabled)) {\n pointer-events: none;\n opacity: 0.5;\n }\n\n tt-side-panel::part(side-panel) {\n border-right: 1px solid var(--color-border-200);\n }\n\n tt-side-panel:empty {\n display: none;\n }\n\n [part='container'] {\n padding: var(--space-scale-1) var(--space-scale-1-5);\n gap: var(--space-scale-1);\n }\n\n [part='controls'] {\n display: flex;\n border: 1px solid var(--color-border-200);\n border-radius: var(--border-radius);\n width: fit-content;\n height: var(--date-picker-height, fit-content);\n background-color: var(--color-surface-100);\n font-size: var(--font-size-200);\n color: var(--color-text-400);\n align-items: stretch;\n justify-content: space-around;\n padding: 0;\n\n &[aria-invalid='true'] {\n outline: 2px solid var(--color-alert-strong);\n }\n\n button {\n border: 0;\n padding-inline: var(--space-scale-1);\n background-color: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n border-left: 1px solid var(--color-border-200);\n box-sizing: border-box;\n color: var(--color-text-400);\n }\n\n &:has(+ tt-dialog[open]) .show-calendar svg,\n .show-calendar:hover svg {\n color: var(--color-primary-400);\n }\n }\n\n [part='dialog']::part(dialog) {\n margin-top: var(--space-scale-1);\n flex-direction: row-reverse;\n }\n\n @supports (position-anchor: --date-range-picker) {\n [part='dialog'] {\n position-anchor: --date-range-picker;\n position: fixed;\n z-index: 1;\n }\n }\n`;\n"]}
|