js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Split out mobile page styles

Browse Source 
Now each `*.styles.ts` file has a single default export
This commit is contained in:
Lea Verou
2024-12-11 20:40:34 -05:00
parent 8fd897e348
commit 36a397ddaa
3 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/page/page.mobile.styles.ts Normal file
View File

@@ -0,0 +1,13 @@
export default (breakpoint: number) => `
@media screen and (
max-width: ${(Number.isSafeInteger(breakpoint) ? breakpoint.toString() : '768') + 'px'}
) {
[part~='navigation'] {
display: none;
}
:host(:not([disable-navigation-toggle])) slot[name~='navigation-toggle'] {
display: contents;
}
}
`;

14
src/components/page/page.styles.ts
View File

@@ -260,17 +260,3 @@ export default css`
margin-inline-start: var(--wa-space-m);
}
`;
export const mobileStyles = (breakpoint: number) => `
@media screen and (
max-width: ${(Number.isSafeInteger(breakpoint) ? breakpoint.toString() : '768') + 'px'}
) {
[part~='navigation'] {
display: none;
}
:host(:not([disable-navigation-toggle])) slot[name~='navigation-toggle'] {
display: contents;
}
}
`;

3
src/components/page/page.ts
View File

@@ -4,7 +4,8 @@ import { html, isServer } from 'lit';
import { live } from 'lit/directives/live.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import componentStyles from '../../styles/component.styles.js';
import styles, { mobileStyles } from './page.styles.js';
import mobileStyles from './page.mobile.styles.js';
import styles from './page.styles.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import type { CSSResultGroup, PropertyValues } from 'lit';
import type WaDrawer from '../drawer/drawer.js';