├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .github
└── workflows
│ └── ci.yml
├── .gitignore
├── .gitpod.yml
├── .prettierignore
├── .prettierrc
├── .stylelintignore
├── .stylelintrc
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── commitlint.config.js
├── lerna.json
├── logo
├── banner.png
├── banner.psd
├── logo-128.png
├── logo-192.png
├── logo-500.png
├── logo-512.png
├── logo.svg
├── maskable_icon.png
└── svelte-materialify.svg
├── package.json
├── packages
├── api-generator
│ ├── dist
│ │ └── index.js
│ ├── helpers
│ │ └── generate.js
│ ├── package.json
│ └── src
│ │ ├── Alert.json
│ │ ├── AppBar.json
│ │ ├── Avatar.json
│ │ ├── Badge.json
│ │ ├── Breadcrumbs.json
│ │ ├── Button.json
│ │ ├── ButtonGroup.json
│ │ ├── ButtonGroupItem.json
│ │ ├── Card.json
│ │ ├── CardActions.json
│ │ ├── CardSubtitle.json
│ │ ├── CardText.json
│ │ ├── CardTitle.json
│ │ ├── Carousel.json
│ │ ├── CarouselItem.json
│ │ ├── Checkbox.json
│ │ ├── Chip.json
│ │ ├── Col.json
│ │ ├── Container.json
│ │ ├── DataTable.json
│ │ ├── DataTableBody.json
│ │ ├── DataTableCell.json
│ │ ├── DataTableHead.json
│ │ ├── DataTableRow.json
│ │ ├── Dialog.json
│ │ ├── Divider.json
│ │ ├── ExpansionPanel.json
│ │ ├── ExpansionPanels.json
│ │ ├── Footer.json
│ │ ├── Icon.json
│ │ ├── Input.json
│ │ ├── ItemGroup.json
│ │ ├── Lazy.json
│ │ ├── List.json
│ │ ├── ListGroup.json
│ │ ├── ListItem.json
│ │ ├── ListItemGroup.json
│ │ ├── MaterialApp.json
│ │ ├── MaterialAppMin.json
│ │ ├── Menu.json
│ │ ├── NavigationDrawer.json
│ │ ├── Overlay.json
│ │ ├── ProgressCircular.json
│ │ ├── ProgressLinear.json
│ │ ├── Radio.json
│ │ ├── Row.json
│ │ ├── Select.json
│ │ ├── SlideGroup.json
│ │ ├── SlideItem.json
│ │ ├── Slider.json
│ │ ├── Snackbar.json
│ │ ├── Subheader.json
│ │ ├── Switch.json
│ │ ├── Tab.json
│ │ ├── TabContent.json
│ │ ├── Table.json
│ │ ├── Tabs.json
│ │ ├── TextField.json
│ │ ├── Textarea.json
│ │ ├── Tooltip.json
│ │ ├── VirtualList.json
│ │ ├── Window.json
│ │ ├── WindowItem.json
│ │ ├── all.json
│ │ └── index.js
├── docs
│ ├── .gitignore
│ ├── package.json
│ ├── rollup.config.js
│ ├── scripts
│ │ ├── examples.js
│ │ ├── preprocess.js
│ │ └── worker.js
│ ├── src
│ │ ├── client.js
│ │ ├── components
│ │ │ ├── Meta.svelte
│ │ │ ├── doc
│ │ │ │ ├── Alert.svelte
│ │ │ │ ├── Example.svelte
│ │ │ │ ├── Layout.svelte
│ │ │ │ ├── Markup.svelte
│ │ │ │ ├── Playground.svelte
│ │ │ │ └── RelatedPages.svelte
│ │ │ └── navigation
│ │ │ │ ├── LeftNavigationDrawer.svelte
│ │ │ │ ├── Loading.svelte
│ │ │ │ ├── RightNavigationDrawer.svelte
│ │ │ │ └── SiteNavigation.svelte
│ │ ├── examples
│ │ │ ├── Alert
│ │ │ │ ├── border.svelte
│ │ │ │ ├── coloredBorder.svelte
│ │ │ │ ├── colors.svelte
│ │ │ │ ├── dense.svelte
│ │ │ │ ├── dismissible.svelte
│ │ │ │ ├── icon.svelte
│ │ │ │ ├── outlined.svelte
│ │ │ │ ├── text.svelte
│ │ │ │ └── transition.svelte
│ │ │ ├── AppBar
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── collapse.svelte
│ │ │ │ ├── dense.svelte
│ │ │ │ └── drawer.svelte
│ │ │ ├── Avatar
│ │ │ │ ├── size.svelte
│ │ │ │ ├── tile.svelte
│ │ │ │ └── types.svelte
│ │ │ ├── Badge
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── notifications.svelte
│ │ │ │ └── offset.svelte
│ │ │ ├── Breadcrumbs
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── customDivider.svelte
│ │ │ │ └── slots.svelte
│ │ │ ├── Button
│ │ │ │ ├── block.svelte
│ │ │ │ ├── depressed.svelte
│ │ │ │ ├── fab.svelte
│ │ │ │ ├── icon.svelte
│ │ │ │ ├── outlined.svelte
│ │ │ │ ├── raised.svelte
│ │ │ │ ├── rounded.svelte
│ │ │ │ ├── sizing.svelte
│ │ │ │ ├── text.svelte
│ │ │ │ └── tile.svelte
│ │ │ ├── ButtonGroup
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── mandatory.svelte
│ │ │ │ ├── multiple.svelte
│ │ │ │ └── selectable.svelte
│ │ │ ├── Card
│ │ │ │ ├── customActions.svelte
│ │ │ │ ├── grids.svelte
│ │ │ │ ├── horizontal.svelte
│ │ │ │ ├── information.svelte
│ │ │ │ └── outlined.svelte
│ │ │ ├── Checkbox
│ │ │ │ ├── colors.svelte
│ │ │ │ ├── groups.svelte
│ │ │ │ └── states.svelte
│ │ │ ├── Chip
│ │ │ │ ├── closable.svelte
│ │ │ │ ├── colored.svelte
│ │ │ │ ├── icon.svelte
│ │ │ │ ├── label.svelte
│ │ │ │ ├── outlined.svelte
│ │ │ │ └── sizes.svelte
│ │ │ ├── ClickOutside
│ │ │ │ └── usage.svelte
│ │ │ ├── DataTable
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── column-sorting.svelte
│ │ │ │ ├── fixed-header.svelte
│ │ │ │ ├── pagination.svelte
│ │ │ │ ├── progress-indicator.svelte
│ │ │ │ └── row-selection.svelte
│ │ │ ├── Dialog
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── fullscreen.svelte
│ │ │ │ ├── modal.svelte
│ │ │ │ └── nested.svelte
│ │ │ ├── Divider
│ │ │ │ ├── horizontal.svelte
│ │ │ │ ├── inset.svelte
│ │ │ │ └── vertical.svelte
│ │ │ ├── ExpansionPanels
│ │ │ │ ├── accordion.svelte
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── customIcon.svelte
│ │ │ │ ├── disabled.svelte
│ │ │ │ ├── externalControl.svelte
│ │ │ │ ├── inset.svelte
│ │ │ │ ├── multiple.svelte
│ │ │ │ └── popout.svelte
│ │ │ ├── Footer
│ │ │ │ ├── absolute.svelte
│ │ │ │ ├── company.svelte
│ │ │ │ └── padless.svelte
│ │ │ ├── Grid
│ │ │ │ ├── _wrapper.svelte
│ │ │ │ ├── align.svelte
│ │ │ │ ├── breakpoint.svelte
│ │ │ │ ├── margin.svelte
│ │ │ │ ├── offset.svelte
│ │ │ │ └── usage.svelte
│ │ │ ├── Icon
│ │ │ │ ├── color.svelte
│ │ │ │ ├── disabled.svelte
│ │ │ │ └── types.svelte
│ │ │ ├── Intersect
│ │ │ │ └── usage.svelte
│ │ │ ├── Jump
│ │ │ │ └── usage.svelte
│ │ │ ├── List
│ │ │ │ ├── avatar.svelte
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── dense.svelte
│ │ │ │ ├── disabled.svelte
│ │ │ │ ├── navigation.svelte
│ │ │ │ ├── nested.svelte
│ │ │ │ └── subheading.svelte
│ │ │ ├── ListItemGroup
│ │ │ │ ├── activeClass.svelte
│ │ │ │ ├── controls.svelte
│ │ │ │ ├── mandatory.svelte
│ │ │ │ ├── multiple.svelte
│ │ │ │ └── usage.svelte
│ │ │ ├── Menu
│ │ │ │ ├── absolute.svelte
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── contentClick.svelte
│ │ │ │ ├── hover.svelte
│ │ │ │ ├── offsets.svelte
│ │ │ │ └── transitions.svelte
│ │ │ ├── NavigationDrawer
│ │ │ │ ├── colored.svelte
│ │ │ │ ├── mini.svelte
│ │ │ │ ├── right.svelte
│ │ │ │ └── temporary.svelte
│ │ │ ├── Overlay
│ │ │ │ ├── absolute.svelte
│ │ │ │ ├── color.svelte
│ │ │ │ ├── loader.svelte
│ │ │ │ ├── opacity.svelte
│ │ │ │ └── usage.svelte
│ │ │ ├── ProgressCircular
│ │ │ │ ├── color.svelte
│ │ │ │ ├── indeterminate.svelte
│ │ │ │ ├── rotate.svelte
│ │ │ │ ├── size.svelte
│ │ │ │ └── usage.svelte
│ │ │ ├── ProgressLinear
│ │ │ │ ├── indeterminate.svelte
│ │ │ │ ├── reversed.svelte
│ │ │ │ ├── slots.svelte
│ │ │ │ ├── stream.svelte
│ │ │ │ ├── striped.svelte
│ │ │ │ └── usage.svelte
│ │ │ ├── Radio
│ │ │ │ ├── colors.svelte
│ │ │ │ ├── groups.svelte
│ │ │ │ └── states.svelte
│ │ │ ├── Ripple
│ │ │ │ ├── center.svelte
│ │ │ │ ├── components.svelte
│ │ │ │ └── customColor.svelte
│ │ │ ├── Select
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── chips.svelte
│ │ │ │ ├── disabled.svelte
│ │ │ │ ├── icons.svelte
│ │ │ │ ├── multiple.svelte
│ │ │ │ └── namevalue.svelte
│ │ │ ├── SlideGroup
│ │ │ │ ├── activeClass.svelte
│ │ │ │ ├── centerActive.svelte
│ │ │ │ ├── mandatory.svelte
│ │ │ │ └── multiple.svelte
│ │ │ ├── Slider
│ │ │ │ ├── colors.svelte
│ │ │ │ ├── disabled.svelte
│ │ │ │ ├── icons.svelte
│ │ │ │ ├── inverseLabel.svelte
│ │ │ │ ├── minMax.svelte
│ │ │ │ ├── range.svelte
│ │ │ │ ├── readonly.svelte
│ │ │ │ ├── step.svelte
│ │ │ │ └── thumb.svelte
│ │ │ ├── Snackbar
│ │ │ │ ├── actions.svelte
│ │ │ │ ├── timeout.svelte
│ │ │ │ └── variants.svelte
│ │ │ ├── Subheader
│ │ │ │ ├── grid.svelte
│ │ │ │ ├── inset.svelte
│ │ │ │ └── usage.svelte
│ │ │ ├── Switch
│ │ │ │ ├── colors.svelte
│ │ │ │ ├── dense.svelte
│ │ │ │ ├── groups.svelte
│ │ │ │ ├── inset.svelte
│ │ │ │ └── states.svelte
│ │ │ ├── Tabs
│ │ │ │ ├── centeredActive.svelte
│ │ │ │ ├── extension.svelte
│ │ │ │ ├── fixedTabs.svelte
│ │ │ │ ├── grow.svelte
│ │ │ │ ├── icons.svelte
│ │ │ │ └── vertical.svelte
│ │ │ ├── TextField
│ │ │ │ ├── clearable.svelte
│ │ │ │ ├── counter.svelte
│ │ │ │ ├── dense.svelte
│ │ │ │ ├── disabled.svelte
│ │ │ │ ├── icons.svelte
│ │ │ │ ├── label.svelte
│ │ │ │ ├── password.svelte
│ │ │ │ ├── validation.svelte
│ │ │ │ └── variants.svelte
│ │ │ ├── Textarea
│ │ │ │ ├── counter.svelte
│ │ │ │ ├── grow.svelte
│ │ │ │ ├── icons.svelte
│ │ │ │ ├── noResize.svelte
│ │ │ │ └── variants.svelte
│ │ │ ├── Tooltip
│ │ │ │ ├── alignment.svelte
│ │ │ │ ├── variants.svelte
│ │ │ │ └── visibility.svelte
│ │ │ ├── Touch
│ │ │ │ └── usage.svelte
│ │ │ ├── Windows
│ │ │ │ ├── basic.svelte
│ │ │ │ ├── reverse.svelte
│ │ │ │ └── vertical.svelte
│ │ │ ├── border-radius
│ │ │ │ ├── corner.svelte
│ │ │ │ ├── side.svelte
│ │ │ │ └── sizes.svelte
│ │ │ ├── elevation
│ │ │ │ └── elevations.svelte
│ │ │ ├── flex
│ │ │ │ ├── align.svelte
│ │ │ │ ├── alignContent.svelte
│ │ │ │ ├── alignSelf.svelte
│ │ │ │ ├── direction.svelte
│ │ │ │ └── justify.svelte
│ │ │ ├── float
│ │ │ │ └── float.svelte
│ │ │ ├── spacing
│ │ │ │ └── playground.svelte
│ │ │ └── typography
│ │ │ │ ├── alignment.svelte
│ │ │ │ ├── decoration.svelte
│ │ │ │ ├── opacity.svelte
│ │ │ │ ├── transform.svelte
│ │ │ │ ├── typography.svelte
│ │ │ │ └── weight.svelte
│ │ ├── playground
│ │ │ ├── Alert.svelte
│ │ │ ├── AppBar.svelte
│ │ │ ├── Avatar.svelte
│ │ │ ├── Breadcrumbs.svelte
│ │ │ ├── Button.svelte
│ │ │ ├── Card.svelte
│ │ │ ├── Chip.svelte
│ │ │ ├── Icon.svelte
│ │ │ └── NavigationDrawer.svelte
│ │ ├── routes
│ │ │ ├── _error.svelte
│ │ │ ├── _layout.svelte
│ │ │ ├── actions
│ │ │ │ ├── click-outside.md
│ │ │ │ ├── intersect.md
│ │ │ │ ├── jump.md
│ │ │ │ ├── ripple.md
│ │ │ │ └── touch.md
│ │ │ ├── api
│ │ │ │ ├── [slug].json.js
│ │ │ │ └── [slug].svelte
│ │ │ ├── components
│ │ │ │ ├── alerts.md
│ │ │ │ ├── app-bar.md
│ │ │ │ ├── autocomplete.md
│ │ │ │ ├── avatars.md
│ │ │ │ ├── badges.md
│ │ │ │ ├── breadcrumbs.md
│ │ │ │ ├── button-groups.md
│ │ │ │ ├── buttons.md
│ │ │ │ ├── cards.md
│ │ │ │ ├── carousels.md
│ │ │ │ ├── checkboxes.md
│ │ │ │ ├── chips.md
│ │ │ │ ├── data-table.md
│ │ │ │ ├── dialog.md
│ │ │ │ ├── dividers.md
│ │ │ │ ├── expansion-panels.md
│ │ │ │ ├── footer.md
│ │ │ │ ├── grid.md
│ │ │ │ ├── icons.md
│ │ │ │ ├── lazy.md
│ │ │ │ ├── list-item-groups.md
│ │ │ │ ├── lists.md
│ │ │ │ ├── material-app.md
│ │ │ │ ├── menus.md
│ │ │ │ ├── navigation-drawer.md
│ │ │ │ ├── overlay.md
│ │ │ │ ├── progress-circular.md
│ │ │ │ ├── progress-linear.md
│ │ │ │ ├── radio.md
│ │ │ │ ├── selects.md
│ │ │ │ ├── slide-groups.md
│ │ │ │ ├── sliders.md
│ │ │ │ ├── snackbars.md
│ │ │ │ ├── subheader.md
│ │ │ │ ├── switches.md
│ │ │ │ ├── tabs.md
│ │ │ │ ├── text-field.md
│ │ │ │ ├── textarea.md
│ │ │ │ ├── tooltips.md
│ │ │ │ ├── virtual-lists.md
│ │ │ │ └── windows.md
│ │ │ ├── getting-started
│ │ │ │ ├── contributing.md
│ │ │ │ ├── installation.md
│ │ │ │ └── usage.md
│ │ │ ├── index.svelte
│ │ │ ├── sitemap.xml.js
│ │ │ └── styles
│ │ │ │ ├── border-radius.md
│ │ │ │ ├── colors.md
│ │ │ │ ├── content.md
│ │ │ │ ├── display-helpers.md
│ │ │ │ ├── elevation.md
│ │ │ │ ├── flex.md
│ │ │ │ ├── float.md
│ │ │ │ ├── reset.md
│ │ │ │ ├── spacing.md
│ │ │ │ └── text-and-typography.md
│ │ ├── server.js
│ │ ├── service-worker.js
│ │ ├── template.html
│ │ └── util
│ │ │ ├── links.js
│ │ │ ├── routes.js
│ │ │ └── stores.js
│ ├── static
│ │ ├── favicon.png
│ │ ├── logo-192.png
│ │ ├── logo-512.png
│ │ ├── manifest.json
│ │ ├── maskable_icon.png
│ │ ├── prism
│ │ │ ├── material-dark.css
│ │ │ └── material-light.css
│ │ ├── robots.txt
│ │ ├── styles.css
│ │ └── svelte-logo.png
│ └── theme
│ │ └── _material-theme.scss
└── svelte-materialify
│ ├── .gitignore
│ ├── @types
│ ├── Alert.d.ts
│ ├── AppBar.d.ts
│ ├── Avatar.d.ts
│ ├── Badge.d.ts
│ ├── Breadcrumbs.d.ts
│ ├── Button.d.ts
│ ├── Card.d.ts
│ ├── CardActions.d.ts
│ ├── CardSubtitle.d.ts
│ ├── CardText.d.ts
│ ├── CardTitle.d.ts
│ ├── Checkbox.d.ts
│ ├── Chip.d.ts
│ ├── ClickOutside.d.ts
│ ├── Col.d.ts
│ ├── Container.d.ts
│ ├── DataTable.d.ts
│ ├── DataTableBody.d.ts
│ ├── DataTableCell.d.ts
│ ├── DataTableHead.d.ts
│ ├── DataTableRow.d.ts
│ ├── Dialog.d.ts
│ ├── Divider.d.ts
│ ├── ExpansionPanel.d.ts
│ ├── ExpansionPanels.d.ts
│ ├── Footer.d.ts
│ ├── Icon.d.ts
│ ├── Input.d.ts
│ ├── Intersect.d.ts
│ ├── ItemGroup.d.ts
│ ├── Jump.d.ts
│ ├── List.d.ts
│ ├── ListGroup.d.ts
│ ├── ListItem.d.ts
│ ├── ListItemGroup.d.ts
│ ├── MaterialApp.d.ts
│ ├── MaterialAppMin.d.ts
│ ├── Menu.d.ts
│ ├── NavigationDrawer.d.ts
│ ├── Overlay.d.ts
│ ├── ProgressCircular.d.ts
│ ├── ProgressLinear.d.ts
│ ├── Radio.d.ts
│ ├── Ripple.d.ts
│ ├── Row.d.ts
│ ├── Select.d.ts
│ ├── Slider.d.ts
│ ├── Snackbar.d.ts
│ ├── Subheader.d.ts
│ ├── Switch.d.ts
│ ├── Tab.d.ts
│ ├── TabContent.d.ts
│ ├── Table.d.ts
│ ├── Tabs.d.ts
│ ├── TextField.d.ts
│ ├── Textarea.d.ts
│ ├── Tooltip.d.ts
│ ├── Touch.d.ts
│ ├── VirtualList.d.ts
│ ├── Window.d.ts
│ ├── WindowItem.d.ts
│ ├── index.d.ts
│ └── shared.d.ts
│ ├── CHANGELOG.md
│ ├── babel.config.js
│ ├── jest.config.js
│ ├── package.json
│ ├── preprocess.js
│ ├── rollup.config.js
│ ├── src
│ ├── actions
│ │ ├── ClickOutside
│ │ │ └── index.js
│ │ ├── Intersect
│ │ │ └── index.js
│ │ ├── Jump
│ │ │ ├── index.js
│ │ │ └── jump.js
│ │ ├── Ripple
│ │ │ ├── index.js
│ │ │ └── material-ripple.js
│ │ └── Touch
│ │ │ └── index.js
│ ├── components
│ │ ├── Alert
│ │ │ ├── Alert.scss
│ │ │ ├── Alert.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── AppBar
│ │ │ ├── AppBar.scss
│ │ │ ├── AppBar.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Avatar
│ │ │ ├── Avatar.scss
│ │ │ ├── Avatar.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Badge
│ │ │ ├── Badge.scss
│ │ │ ├── Badge.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Breadcrumbs
│ │ │ ├── Breadcrumbs.scss
│ │ │ ├── Breadcrumbs.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Button
│ │ │ ├── Button.scss
│ │ │ ├── Button.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── ButtonGroup
│ │ │ ├── ButtonGroup.scss
│ │ │ ├── ButtonGroup.svelte
│ │ │ ├── ButtonGroupItem.scss
│ │ │ ├── ButtonGroupItem.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Card
│ │ │ ├── Card.scss
│ │ │ ├── Card.svelte
│ │ │ ├── CardActions.scss
│ │ │ ├── CardActions.svelte
│ │ │ ├── CardSubtitle.scss
│ │ │ ├── CardSubtitle.svelte
│ │ │ ├── CardText.scss
│ │ │ ├── CardText.svelte
│ │ │ ├── CardTitle.scss
│ │ │ ├── CardTitle.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Checkbox
│ │ │ ├── Checkbox.scss
│ │ │ ├── Checkbox.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Chip
│ │ │ ├── Chip.scss
│ │ │ ├── Chip.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── DataTable
│ │ │ ├── DataTable.scss
│ │ │ ├── DataTable.svelte
│ │ │ ├── DataTableBody.scss
│ │ │ ├── DataTableBody.svelte
│ │ │ ├── DataTableCell.scss
│ │ │ ├── DataTableCell.svelte
│ │ │ ├── DataTableHead.scss
│ │ │ ├── DataTableHead.svelte
│ │ │ ├── DataTableRow.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Dialog
│ │ │ ├── Dialog.scss
│ │ │ ├── Dialog.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Divider
│ │ │ ├── Divider.scss
│ │ │ ├── Divider.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── ExpansionPanels
│ │ │ ├── ExpansionPanel.scss
│ │ │ ├── ExpansionPanel.svelte
│ │ │ ├── ExpansionPanels.scss
│ │ │ ├── ExpansionPanels.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Footer
│ │ │ ├── Footer.scss
│ │ │ ├── Footer.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Grid
│ │ │ ├── Col.scss
│ │ │ ├── Col.svelte
│ │ │ ├── Container.svelte
│ │ │ ├── Row.scss
│ │ │ ├── Row.svelte
│ │ │ └── index.js
│ │ ├── Icon
│ │ │ ├── Icon.scss
│ │ │ ├── Icon.svelte
│ │ │ └── index.js
│ │ ├── Input
│ │ │ ├── Input.scss
│ │ │ ├── Input.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── ItemGroup
│ │ │ ├── ItemGroup.scss
│ │ │ ├── ItemGroup.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Lazy
│ │ │ ├── Lazy.svelte
│ │ │ └── index.js
│ │ ├── List
│ │ │ ├── List.scss
│ │ │ ├── List.svelte
│ │ │ ├── ListGroup.scss
│ │ │ ├── ListGroup.svelte
│ │ │ ├── ListItem.scss
│ │ │ ├── ListItem.svelte
│ │ │ ├── ListItemGroup.scss
│ │ │ ├── ListItemGroup.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── MaterialApp
│ │ │ ├── MaterialApp.scss
│ │ │ ├── MaterialApp.svelte
│ │ │ ├── MaterialAppMin.scss
│ │ │ ├── MaterialAppMin.svelte
│ │ │ └── index.js
│ │ ├── Menu
│ │ │ ├── Menu.scss
│ │ │ ├── Menu.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── NavigationDrawer
│ │ │ ├── NavigationDrawer.scss
│ │ │ ├── NavigationDrawer.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Overlay
│ │ │ ├── Overlay.scss
│ │ │ ├── Overlay.svelte
│ │ │ └── index.js
│ │ ├── ProgressCircular
│ │ │ ├── ProgressCircular.scss
│ │ │ ├── ProgressCircular.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── ProgressLinear
│ │ │ ├── ProgressLinear.scss
│ │ │ ├── ProgressLinear.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Radio
│ │ │ ├── Radio.scss
│ │ │ ├── Radio.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Select
│ │ │ ├── Select.scss
│ │ │ ├── Select.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── SlideGroup
│ │ │ ├── SlideGroup.scss
│ │ │ ├── SlideGroup.svelte
│ │ │ ├── SlideItem.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Slider
│ │ │ ├── Slider.scss
│ │ │ ├── Slider.svelte
│ │ │ ├── _variables.scss
│ │ │ ├── index.js
│ │ │ └── nouislider.min.js
│ │ ├── Snackbar
│ │ │ ├── Snackbar.scss
│ │ │ ├── Snackbar.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Subheader
│ │ │ ├── Subheader.scss
│ │ │ ├── Subheader.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Switch
│ │ │ ├── Switch.scss
│ │ │ ├── Switch.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Table
│ │ │ ├── Table.scss
│ │ │ ├── Table.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Tabs
│ │ │ ├── Tab.scss
│ │ │ ├── Tab.svelte
│ │ │ ├── TabContent.svelte
│ │ │ ├── Tabs.scss
│ │ │ ├── Tabs.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── TextField
│ │ │ ├── TextField.scss
│ │ │ ├── TextField.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Textarea
│ │ │ ├── Textarea.scss
│ │ │ ├── Textarea.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── Tooltip
│ │ │ ├── Tooltip.scss
│ │ │ ├── Tooltip.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ │ ├── VirtualList
│ │ │ ├── VirtualList.svelte
│ │ │ └── index.js
│ │ └── Window
│ │ │ ├── Window.scss
│ │ │ ├── Window.svelte
│ │ │ ├── WindowItem.scss
│ │ │ ├── WindowItem.svelte
│ │ │ ├── _variables.scss
│ │ │ └── index.js
│ ├── index.d.ts
│ ├── index.js
│ ├── internal
│ │ ├── BackgroundColor
│ │ │ └── index.js
│ │ ├── Class
│ │ │ └── index.js
│ │ ├── Icons
│ │ │ ├── close.js
│ │ │ ├── down.js
│ │ │ ├── next.js
│ │ │ └── prev.js
│ │ ├── Style
│ │ │ └── index.js
│ │ ├── TextColor
│ │ │ └── index.js
│ │ └── uid
│ │ │ └── index.js
│ ├── styles
│ │ ├── _global.scss
│ │ ├── _theme.scss
│ │ ├── _variables.scss
│ │ ├── elements
│ │ │ ├── _blockquote.scss
│ │ │ ├── _code.scss
│ │ │ ├── _global.scss
│ │ │ ├── _headings.scss
│ │ │ ├── _index.scss
│ │ │ └── _lists.scss
│ │ ├── generic
│ │ │ ├── _color.scss
│ │ │ ├── _display.scss
│ │ │ ├── _elevation.scss
│ │ │ ├── _flex.scss
│ │ │ ├── _float.scss
│ │ │ ├── _index.scss
│ │ │ ├── _radius.scss
│ │ │ ├── _reset.scss
│ │ │ ├── _spacing.scss
│ │ │ └── _typography.scss
│ │ └── tools
│ │ │ ├── _breakpoints.scss
│ │ │ ├── _colors.scss
│ │ │ ├── _elevation.scss
│ │ │ ├── _functions.scss
│ │ │ └── _index.scss
│ └── utils
│ │ ├── breakpoints.js
│ │ └── colors.js
│ ├── svelte.config.js
│ ├── tests
│ ├── Alert
│ │ └── spec.js
│ ├── AppBar
│ │ ├── slots_are_proper.svelte
│ │ └── spec.js
│ ├── Breadcrumbs
│ │ ├── custom_divider.svelte
│ │ └── spec.js
│ ├── Button
│ │ └── spec.js
│ └── internal
│ │ └── spec.js
│ └── theme
│ └── _material-theme.scss
├── svelte-materialify.code-workspace
├── vercel.json
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | __sapper__
2 | *.config.js
3 | static
4 | dist
5 | Example.svelte
6 | compiled
7 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 |
3 | # Common formats
4 | *.html text
5 | *.xml text
6 | *.css text
7 | *.scss text
8 | *.js text
9 | *.properties text
10 | *.rtf text
11 | *.yaml text
12 | *.yml text
13 | *.md text
14 |
15 | LICENSE text
16 |
17 | *.svelte text
18 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 | on:
3 | push:
4 | paths:
5 | - 'packages/**'
6 | pull_request:
7 | paths:
8 | - 'packages/**'
9 |
10 | jobs:
11 | test:
12 | name: tests
13 | runs-on: ubuntu-latest
14 | timeout-minutes: 10
15 | strategy:
16 | matrix:
17 | node-version: [10, 12, 14]
18 | steps:
19 | - uses: actions/checkout@v2
20 | - uses: actions/setup-node@v1
21 | with:
22 | node-version: ${{ matrix.node-version }}
23 | - uses: actions/cache@v2
24 | with:
25 | path: |
26 | node_modules
27 | **/node_modules
28 | key: ${{ runner.os }}-${{ hashFiles('./yarn.lock') }}
29 | - run: yarn --frozen-lockfile --non-interactive
30 | - run: yarn lint
31 | name: Lint
32 | - run: yarn test --ci
33 | name: Test
34 | env:
35 | CI: true
36 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | .env
4 |
5 | # IDE user config
6 | .vscode/
7 | .idea/
8 | .vs/
9 |
10 | # Logs
11 | yarn-error.log
12 | npm-debug.log
13 | lerna-debug.log
14 |
15 | .vercel
16 |
--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
1 | workspaceLocation: '.'
2 | tasks:
3 | - init: npm install && cd site && npm install
4 | command: npm run site:dev
5 |
6 | ports:
7 | - port: 3000
8 | onOpen: open-preview
9 |
10 | vscode:
11 | extensions:
12 | - svelte.svelte-vscode@101.8.0:bqS+9pqxtG4yfb1Fq21D0w==
13 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | __sapper__
2 | dist
3 | static
4 | compiled
5 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "svelteSortOrder": "scripts-styles-markup",
3 | "svelteStrictMode": false,
4 | "svelteBracketNewLine": false,
5 | "svelteAllowShorthand": true,
6 | "svelteIndentScriptAndStyle": true,
7 | "singleQuote": true,
8 | "semi": true,
9 | "trailingComma": "all",
10 | "printWidth": 90,
11 | "endOfLine": "lf"
12 | }
13 |
--------------------------------------------------------------------------------
/.stylelintignore:
--------------------------------------------------------------------------------
1 | _reset.scss
2 | _material-theme.scss
3 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: ['@commitlint/config-conventional'],
3 | rules: { 'scope-case': [0, 'always', 'lower-case'] },
4 | };
5 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "packages": [
3 | "packages/*"
4 | ],
5 | "version": "0.3.11",
6 | "npmClient": "yarn",
7 | "useWorkspaces": true,
8 | "command": {
9 | "publish": {
10 | "message": "chore(release): publish %s"
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/logo/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/logo/banner.png
--------------------------------------------------------------------------------
/logo/banner.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/logo/banner.psd
--------------------------------------------------------------------------------
/logo/logo-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/logo/logo-128.png
--------------------------------------------------------------------------------
/logo/logo-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/logo/logo-192.png
--------------------------------------------------------------------------------
/logo/logo-500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/logo/logo-500.png
--------------------------------------------------------------------------------
/logo/logo-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/logo/logo-512.png
--------------------------------------------------------------------------------
/logo/maskable_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/logo/maskable_icon.png
--------------------------------------------------------------------------------
/packages/api-generator/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-materialify-api",
3 | "version": "0.3.11",
4 | "private": true,
5 | "license": "MIT",
6 | "main": "dist/index.js",
7 | "module": "dist/index.js",
8 | "scripts": {
9 | "api": "node helpers/generate.js"
10 | },
11 | "devDependencies": {
12 | "@rollup/plugin-json": "^4.1.0",
13 | "globby": "^11.0.2",
14 | "json-format": "1.0.1",
15 | "rollup": "^2.38.4",
16 | "rollup-plugin-terser": "^7.0.2",
17 | "sveltedoc-parser": "^3.0.5"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/api-generator/src/Carousel.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "name": "Carousel",
4 | "data": [
5 | {
6 | "visibility": "public",
7 | "description": null,
8 | "keywords": [],
9 | "name": "value",
10 | "kind": "let",
11 | "static": false,
12 | "readonly": false,
13 | "type": {
14 | "kind": "type",
15 | "text": "number",
16 | "type": "number"
17 | },
18 | "defaultValue": 0,
19 | "bind": [
20 | {
21 | "source": "Window",
22 | "property": "value"
23 | }
24 | ]
25 | }
26 | ],
27 | "computed": [],
28 | "methods": [],
29 | "components": [],
30 | "description": null,
31 | "keywords": [],
32 | "events": [],
33 | "slots": [
34 | {
35 | "name": "default",
36 | "description": null,
37 | "visibility": "public",
38 | "parameters": []
39 | }
40 | ],
41 | "refs": []
42 | }
43 |
--------------------------------------------------------------------------------
/packages/api-generator/src/CarouselItem.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "name": "CarouselItem",
4 | "data": [],
5 | "computed": [],
6 | "methods": [],
7 | "components": [],
8 | "description": null,
9 | "keywords": [],
10 | "events": [],
11 | "slots": [
12 | {
13 | "name": "default",
14 | "description": null,
15 | "visibility": "public",
16 | "parameters": []
17 | }
18 | ],
19 | "refs": []
20 | }
21 |
--------------------------------------------------------------------------------
/packages/api-generator/src/DataTable.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "name": "DataTable",
4 | "data": [
5 | {
6 | "visibility": "public",
7 | "description": null,
8 | "keywords": [],
9 | "name": "class",
10 | "kind": "const",
11 | "static": false,
12 | "readonly": true,
13 | "type": {
14 | "kind": "type",
15 | "text": "string",
16 | "type": "string"
17 | },
18 | "localName": "klass"
19 | }
20 | ],
21 | "computed": [],
22 | "methods": [],
23 | "components": [],
24 | "description": null,
25 | "keywords": [],
26 | "events": [],
27 | "slots": [
28 | {
29 | "name": "default",
30 | "description": null,
31 | "visibility": "public",
32 | "parameters": []
33 | }
34 | ],
35 | "refs": []
36 | }
37 |
--------------------------------------------------------------------------------
/packages/api-generator/src/DataTableBody.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "name": "DataTableBody",
4 | "data": [
5 | {
6 | "visibility": "public",
7 | "description": null,
8 | "keywords": [],
9 | "name": "class",
10 | "kind": "const",
11 | "static": false,
12 | "readonly": true,
13 | "type": {
14 | "kind": "type",
15 | "text": "string",
16 | "type": "string"
17 | },
18 | "localName": "klass"
19 | }
20 | ],
21 | "computed": [],
22 | "methods": [],
23 | "components": [],
24 | "description": null,
25 | "keywords": [],
26 | "events": [],
27 | "slots": [
28 | {
29 | "name": "default",
30 | "description": null,
31 | "visibility": "public",
32 | "parameters": []
33 | }
34 | ],
35 | "refs": []
36 | }
37 |
--------------------------------------------------------------------------------
/packages/api-generator/src/DataTableHead.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "name": "DataTableHead",
4 | "data": [
5 | {
6 | "visibility": "public",
7 | "description": null,
8 | "keywords": [],
9 | "name": "class",
10 | "kind": "const",
11 | "static": false,
12 | "readonly": true,
13 | "type": {
14 | "kind": "type",
15 | "text": "string",
16 | "type": "string"
17 | },
18 | "localName": "klass"
19 | }
20 | ],
21 | "computed": [],
22 | "methods": [],
23 | "components": [],
24 | "description": null,
25 | "keywords": [],
26 | "events": [],
27 | "slots": [
28 | {
29 | "name": "default",
30 | "description": null,
31 | "visibility": "public",
32 | "parameters": []
33 | }
34 | ],
35 | "refs": []
36 | }
37 |
--------------------------------------------------------------------------------
/packages/api-generator/src/DataTableRow.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "name": "DataTableRow",
4 | "data": [
5 | {
6 | "visibility": "public",
7 | "description": null,
8 | "keywords": [],
9 | "name": "class",
10 | "kind": "const",
11 | "static": false,
12 | "readonly": true,
13 | "type": {
14 | "kind": "type",
15 | "text": "string",
16 | "type": "string"
17 | },
18 | "localName": "klass"
19 | }
20 | ],
21 | "computed": [],
22 | "methods": [],
23 | "components": [],
24 | "description": null,
25 | "keywords": [],
26 | "events": [],
27 | "slots": [
28 | {
29 | "name": "default",
30 | "description": null,
31 | "visibility": "public",
32 | "parameters": []
33 | }
34 | ],
35 | "refs": []
36 | }
37 |
--------------------------------------------------------------------------------
/packages/api-generator/src/MaterialApp.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "name": "MaterialApp",
4 | "data": [
5 | {
6 | "visibility": "public",
7 | "description": null,
8 | "keywords": [],
9 | "name": "theme",
10 | "kind": "let",
11 | "static": false,
12 | "readonly": false,
13 | "type": {
14 | "kind": "type",
15 | "text": "string",
16 | "type": "string"
17 | },
18 | "defaultValue": "light"
19 | }
20 | ],
21 | "computed": [],
22 | "methods": [],
23 | "components": [],
24 | "description": null,
25 | "keywords": [],
26 | "events": [],
27 | "slots": [
28 | {
29 | "name": "default",
30 | "description": null,
31 | "visibility": "public",
32 | "parameters": []
33 | }
34 | ],
35 | "refs": []
36 | }
37 |
--------------------------------------------------------------------------------
/packages/api-generator/src/MaterialAppMin.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "name": "MaterialAppMin",
4 | "data": [
5 | {
6 | "visibility": "public",
7 | "description": null,
8 | "keywords": [],
9 | "name": "theme",
10 | "kind": "let",
11 | "static": false,
12 | "readonly": false,
13 | "type": {
14 | "kind": "type",
15 | "text": "string",
16 | "type": "string"
17 | },
18 | "defaultValue": "light"
19 | }
20 | ],
21 | "computed": [],
22 | "methods": [],
23 | "components": [],
24 | "description": null,
25 | "keywords": [],
26 | "events": [],
27 | "slots": [
28 | {
29 | "name": "default",
30 | "description": null,
31 | "visibility": "public",
32 | "parameters": []
33 | }
34 | ],
35 | "refs": []
36 | }
37 |
--------------------------------------------------------------------------------
/packages/docs/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /src/node_modules/@sapper/
4 | yarn-error.log
5 | /cypress/screenshots/
6 | __sapper__
7 |
--------------------------------------------------------------------------------
/packages/docs/src/client.js:
--------------------------------------------------------------------------------
1 | import * as sapper from '@sapper/app';
2 |
3 | sapper.start({
4 | target: document.querySelector('#root'),
5 | });
6 |
--------------------------------------------------------------------------------
/packages/docs/src/components/doc/Alert.svelte:
--------------------------------------------------------------------------------
1 |
28 |
29 |
31 |
33 |
--------------------------------------------------------------------------------
/packages/docs/src/components/navigation/Loading.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
20 |
21 | {#if !$markdown}
22 |
25 | {/if}
26 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Alert/transition.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | (alert = !alert)}>Toggle
10 |
11 |
18 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem molestiae voluptates
19 | et quae rem autem quasi officia odit suscipit dolor.
20 |
21 | {/if}
22 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/AppBar/basic.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
11 |
12 | Title
13 |
14 | Item
15 |
16 |
17 |
18 |
20 |
21 | Item 1
22 | Item 2
23 | Item 3
24 |
25 |
26 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/AppBar/collapse.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
13 |
14 | Title
15 |
16 |
18 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/AppBar/dense.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
11 |
12 | Title
13 |
14 | Item
15 |
16 |
18 |
19 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/AppBar/drawer.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
21 |
23 |
24 | Click The Menu
25 |
26 |
Content
27 |
28 |
7 |
8 |
10 |
11 |
MS
12 |
7 |
8 |
10 |
11 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Badge/notifications.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {
12 | value += 1;
13 | }}>
14 | Notify
15 |
16 | {
19 | value = 0;
20 | }}>
21 | Clear Notifications
22 |
23 |
24 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Badge/offset.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | Button
9 |
10 |
12 |
13 |
14 |
16 |
17 |
19 |
13 | -
14 |
15 |
16 |
17 |
18 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Breadcrumbs/slots.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | {#if item.href}
13 |
14 | {item.text.toUpperCase()}
15 |
16 | {:else}
17 |
18 | {item.text.toUpperCase()}
19 |
20 | {/if}
21 |
22 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Button/block.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Block
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Button/depressed.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Default
7 | Red
8 | Primary
9 | Disabled
10 |
11 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Button/fab.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
11 |
13 |
14 |
16 |
17 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Button/icon.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
11 |
13 |
14 |
16 |
17 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Button/outlined.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Default
7 | Red
8 | Primary
9 | Disabled
10 |
11 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Button/raised.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Default
7 | Red
8 | Primary
9 | Disabled
10 |
11 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Button/rounded.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Rounded
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Button/text.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Default
7 | Red
8 | Primary
9 | Disabled
10 |
11 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Button/tile.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/ButtonGroup/multiple.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | Left
10 | Center
11 | Right
12 | Justify
13 |
14 |
18 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/ButtonGroup/selectable.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | Left
10 | Center
11 | Right
12 | Justify
13 |
14 |
18 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Card/grids.svelte:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/src/examples/Card/grids.svelte
--------------------------------------------------------------------------------
/packages/docs/src/examples/Card/information.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | Word of the Day
9 | be•nev•o•lent
10 |
11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, qui
12 | quaerat rerum incidunt nisi ducimus?
13 |
14 |
15 |
16 | Learn More
17 |
18 |
19 |
6 |
7 |
8 | OVERLINE
9 | Headline
11 |
13 |
14 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, qui quaerat
15 | rerum incidunt nisi ducimus?
16 |
17 |
18 | Button
19 |
20 |
21 |
red
6 | blue
7 |
9 | secondary
10 | error
11 | success
12 |
13 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Checkbox/groups.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 | Value 1
10 | Value 2
11 | Value 3
12 | Value 4
13 |
14 | Value: {group}
16 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Checkbox/states.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | On
6 | Off
7 | Disabled
8 | Disabled On
9 | Indeterminate
10 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Chip/closable.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {#if !active}
10 | (active = true)}>Reset
11 | {/if}
12 | {
16 | timesClosed += 1;
17 | }}>
18 | Closable
19 |
20 |
21 | Times Closed: {timesClosed}
22 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Chip/colored.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Default
7 | Primary
8 | Secondary
9 | Red
10 | Green
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Chip/icon.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | Mudit
10 |
11 |
12 | Premium
13 |
15 |
16 | 1
17 | Messages
18 |
20 |
Confirmed
21 |
22 |
23 |
25 | Confirmed
26 |
27 |
6 | Default
7 | Primary
8 | Secondary
9 | Red
10 | Green
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Chip/outlined.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | Default
8 |
9 | Primary
11 |
12 | Secondary
13 | Red
14 | Green
15 |
16 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Chip/sizes.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | x-small
7 | small
8 | default
9 | large
10 | x-large
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/ClickOutside/usage.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
28 | Click
29 | {active ? 'Outside' : 'Me'}
30 |
31 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/DataTable/column-sorting.svelte:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/src/examples/DataTable/column-sorting.svelte
--------------------------------------------------------------------------------
/packages/docs/src/examples/DataTable/fixed-header.svelte:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/src/examples/DataTable/fixed-header.svelte
--------------------------------------------------------------------------------
/packages/docs/src/examples/DataTable/pagination.svelte:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/src/examples/DataTable/pagination.svelte
--------------------------------------------------------------------------------
/packages/docs/src/examples/DataTable/progress-indicator.svelte:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/src/examples/DataTable/progress-indicator.svelte
--------------------------------------------------------------------------------
/packages/docs/src/examples/DataTable/row-selection.svelte:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/src/examples/DataTable/row-selection.svelte
--------------------------------------------------------------------------------
/packages/docs/src/examples/Dialog/basic.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | Open Dialog
13 |
14 |
15 |
16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem aperiam quia esse impedit
17 | libero mollitia tempore nisi dolore ut, quasi incidunt sunt sapiente vero iusto
18 | necessitatibus eius nulla dignissimos laboriosam.
19 |
20 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Dialog/nested.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | (active1 = true)}>Open Dialog 1
10 | (active2 = true)}>Open Dialog 2
11 |
12 |
13 |
14 | (active2 = true)}>Open Dialog 2
15 | This is Dialog 1
17 |
18 |
19 |
20 | This is Dialog 2
21 |
22 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste quia possimus tempore
23 | maxime vel, fugiat neque ab accusamus numquam incidunt?
24 |
25 |
26 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Divider/horizontal.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Subheader
8 | Item 1
9 | Item 2
11 | Item 3
13 | Item 4
15 |
16 |
17 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Divider/vertical.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Title
7 | Home
9 |
10 | News
11 | Blog
13 | Contact Us
15 |
16 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Footer/absolute.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Svelte Materialify is Powerful
7 |
8 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Footer/company.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
18 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Footer/padless.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Svelte Materialify is Powerful
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Grid/_wrapper.svelte:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Grid/breakpoint.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Equal Width
8 |
9 | Equal Width
11 |
12 |
13 |
15 | .col-12.col-sm-6.col-md-8
17 |
18 | .col-12.col-sm-6.col-md-4
20 |
21 |
22 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Grid/margin.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | .col-md-4
8 |
9 | .col-md-4.ml-auto
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Grid/offset.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | .col-4
8 |
9 | .col-4.offset-4
11 |
12 |
13 |
15 | .col-4.offset-6.offset-md-4
17 |
18 |
19 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Grid/usage.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Icon/color.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
21 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Icon/disabled.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
22 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/List/basic.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | List Item
9 | List Item With a subtitle
10 |
11 | List Item (icon)
12 |
13 |
15 |
16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, saepe. Quis nam non
17 | perferendis doloremque?
18 |
19 |
20 |
21 |
7 |
8 | Filter
9 |
10 |
11 |
12 |
14 | Item 1
15 |
16 |
17 |
18 |
20 | Item 2
21 |
22 |
23 |
24 |
26 | Item 3
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/List/disabled.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | Filter
9 |
10 |
11 |
12 |
14 | Item 1
15 |
16 |
17 |
18 |
20 | Item 2
21 |
22 |
23 |
24 |
26 | Item 3
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/ListItemGroup/activeClass.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
11 |
12 |
13 |
14 |
15 |
16 | Item 1
18 |
19 |
20 |
21 | Item 2
23 |
24 |
25 |
26 | Item 3
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/ListItemGroup/mandatory.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Item 1
8 | Item 2
9 | Item 3
10 | Item 4
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/ListItemGroup/multiple.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Item 1
8 | Item 2
9 | Item 3
10 | Item 4
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/ListItemGroup/usage.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 | Item 1
12 |
13 |
14 |
15 | Item 2
17 |
18 |
19 |
20 | Item 3
22 |
23 |
24 |
25 | Item 4
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Menu/absolute.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
11 | Option 1
12 | Option 2
13 | This is Cool
14 |
15 |
16 |
6 |
7 |
8 | Activate
9 |
10 |
11 | Option 1
12 | Option 2
13 | This is Cool
14 |
15 |
16 |
Close on Click
8 |
10 |
11 |
12 | Activate
13 |
14 |
15 | Option 1
16 | Option 2
17 | This is Cool
18 |
19 |
20 |
6 |
7 |
8 | Activate
9 |
10 |
11 | Option 1
12 | Option 2
13 | This is Cool
14 |
15 |
16 |
Offset X
9 | Offset Y
10 |
11 |
13 |
14 |
15 | Activate
16 |
17 |
18 | Option 1
19 | Option 2
20 | This is Cool
21 |
22 |
23 |
9 |
10 |
11 | Activate
12 |
13 |
14 | Option 1
15 | Option 2
16 | This is Cool
17 |
18 |
19 |
18 | {
21 | active = true;
22 | }}>
23 | Show Overlay
24 |
25 | {
29 | active = false;
30 | }} />
31 |
32 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Overlay/color.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
16 |
17 |
18 | {
21 | active = true;
22 | }}>
23 | Show Overlay
24 |
25 | {
30 | active = false;
31 | }} />
32 |
33 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Overlay/loader.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {
12 | active = true;
13 | }}>
14 | Launch Application
15 |
17 |
18 |
19 | {
22 | active = false;
23 | }}>
24 |
26 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Overlay/opacity.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
16 |
17 |
18 | {
21 | active = true;
22 | }}>
23 | Show Overlay
24 |
25 |
26 | {
30 | active = false;
31 | }}>
32 | Close
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Overlay/usage.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {
11 | active = true;
12 | }}>
13 | Show Overlay
14 |
15 |
16 |
17 | {
20 | active = false;
21 | }} />
22 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/ProgressCircular/color.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
25%
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/ProgressLinear/stream.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
8 | red
9 | secondary
10 | success
11 | blue
12 |
13 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Radio/groups.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Value 1
9 | Value 2
10 | Value 3
11 |
12 | Value: {group}
14 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Radio/states.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | On
9 | Off
10 | Disabled
11 | Disabled On
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Ripple/center.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | HTML element with centered ripple
7 |
8 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Ripple/components.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | With Default Ripple
7 | With No Ripple
8 | With Center Ripple
9 | With Red Ripple
10 |
11 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Ripple/customColor.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#each colors as color}
9 |
10 | Item with '{color}' color ripple.
11 |
12 | {/each}
13 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Select/basic.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Regular
10 | Filled
11 |
12 | Outlined
15 |
16 |
17 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Select/chips.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 | Regular
16 | Filled
17 |
18 | Multiple
20 | Multiple Outlined
21 |
22 |
23 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Select/disabled.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 | Regular
15 | Filled
16 |
17 | Outlined
20 |
21 |
22 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Select/icons.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
16 |
17 |
19 | Regular
20 |
21 |
22 |
24 | Regular
25 |
26 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Select/multiple.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 | Regular
16 | Filled
17 |
18 | Outlined
21 |
22 |
23 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Select/namevalue.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 | Regular
15 | chosen value: {value}
16 |
17 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/SlideGroup/activeClass.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
17 |
18 |
19 |
20 |
22 | {#each Array(15) as _, i}
23 |
24 | {i + 1}
25 |
26 | {/each}
27 |
28 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/SlideGroup/centerActive.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
16 |
17 |
18 | {#each Array(15) as _, i}
19 |
20 | {i + 1}
21 |
22 | {/each}
23 |
24 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/SlideGroup/mandatory.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {#each Array(10) as _, i}
7 |
8 | Button {i + 1}
9 |
10 | {/each}
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/SlideGroup/multiple.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {#each Array(10) as _, i}
7 |
8 | Button {i + 1}
9 |
10 | {/each}
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Slider/colors.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Red
6 | Secondary
7 | Green (with thumb)
8 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Slider/disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Disabled
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Slider/icons.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 | Icon
11 |
12 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Slider/inverseLabel.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Inverse Label
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Slider/minMax.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 | Default Slider
11 |
12 |
13 |
15 |
16 |
17 | Range
18 |
19 |
20 |
22 |
23 |
25 |
26 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Slider/range.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Range
6 |
7 |
8 | Range
9 |
10 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Slider/readonly.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Readonly
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Slider/step.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Ticks
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Slider/thumb.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 | Show thumb when using slider
11 | Always show thumb label
14 | Custom thumb label
17 | Vertical
20 |
8 | {
10 | snackbar = true;
11 | }}>
12 | Click
13 |
14 |
15 |
16 |
17 | Here are some actions
18 |
19 | Accept
20 | {
24 | snackbar = false;
25 | }}>
26 | Dismiss
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Snackbar/timeout.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {
10 | snackbar = true;
11 | }}>
12 | Click
13 |
14 |
15 |
16 |
17 | Timeout is 3secs
18 | {
21 | snackbar = false;
22 | }}>
23 | Dismiss
24 |
25 |
26 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Snackbar/variants.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Tile
7 | Outlined
8 | Text
9 | Rounded
10 | Normal
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Subheader/inset.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | Subheader
8 | {#each Array(3) as _, i}
9 |
10 |
11 |
13 | List Item
14 | {i + 1}
15 |
16 | {/each}
17 |
18 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Subheader/usage.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Subheader
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Switch/colors.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | red
6 | blue
7 |
9 | secondary
10 | error
11 | success
12 |
13 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Switch/dense.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | Dense {values[0]}
8 | Dense {values[1]}
9 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Switch/groups.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 | Value 1
10 | Value 2
11 | Value 3
12 | Value 4
13 |
14 | Value: {group}
16 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Switch/inset.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | Inset {values[0]}
8 | Inset {values[1]}
9 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Switch/states.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | On
6 | Off
7 | Disabled
8 | Disabled On
9 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Tabs/centeredActive.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | {#each Array(20) as _, i}
8 | Item {i + 1}
9 | {/each}
10 |
11 |
12 | {#each Array(20) as _, i}
13 |
14 |
18 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan, diam et
19 | elementum gravida, arcu mi fermentum nibh, vel dapibus ligula orci non est. Morbi
20 | commodo sagittis finibus. Maecenas in volutpat massa. Nullam vulputate metus
21 | velit, quis interdum elit imperdiet ut. Suspendisse et sagittis erat, euismod
22 | vulputate enim. Etiam feugiat sit amet justo vitae commodo.
23 |
24 |
25 | {/each}
26 |
27 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Tabs/fixedTabs.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Option
8 | Another Selection
9 | Some Items
10 | Another Selection
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Tabs/grow.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Item 1
8 | Item 2
9 | Item 3
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Tabs/icons.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
12 |
13 |
16 |
17 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/TextField/clearable.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Regular
10 | Filled
12 |
13 | Outlined
15 |
19 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/TextField/counter.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Regular
10 | Filled
12 |
13 | Outlined
15 |
19 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/TextField/dense.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Filled
8 | Regular
10 | Filled
12 |
13 | Outlined
15 | Outlined
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/TextField/disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Regular
8 | Filled
9 | Outlined
10 | Regular
14 | Filled
15 | Outlined
16 |
19 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/TextField/label.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | This is the bold label.
6 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/TextField/password.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | Password
10 | {
13 | show = !show;
14 | }}>
15 |
17 |
18 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/TextField/validation.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 | Title
18 |
19 | Email
21 |
22 |
23 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/TextField/variants.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Regular
8 | Filled
9 | Outlined
10 | Regular
14 | Filled
15 | Outlined
16 |
19 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Textarea/counter.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Tooltip/alignment.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
8 | Left
9 | Left tooltip
10 |
11 |
12 |
14 | Top
15 | Top tooltip
16 |
17 |
18 |
20 | Bottom
21 | Bottom tooltip
22 |
23 |
24 |
26 | Right
27 | Right tooltip
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Tooltip/variants.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | Button
9 | Tooltip
10 |
11 |
12 |
13 | Tooltip
15 |
16 |
17 |
18 | This text has a tooltip
19 | Tooltip
20 |
21 |
22 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Tooltip/visibility.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | (show = !show)}>Toggle
11 |
12 |
14 | Programmatic tooltip
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Touch/usage.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
20 |
21 |
22 | X: {x}
23 | Y: {y}
24 |
25 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/Windows/basic.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
16 |
17 |
18 |
19 |
20 |
Window Item 1
21 |
22 |
23 |
24 |
25 |
Window Item 2
26 |
27 |
28 |
29 |
30 |
Window Item 3
31 |
32 |
33 |
34 |
36 | Left
37 | Right
38 |
39 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/border-radius/corner.svelte:
--------------------------------------------------------------------------------
1 |
2 |
.rounded-tl-xl
3 |
.rounded-tr-xl
4 |
.rounded-bl-xl
5 |
.rounded-br-xl
6 |
2 |
.rounded-t-xl
3 |
.rounded-r-xl
4 |
.rounded-b-xl
5 |
.rounded-l-xl
6 |
2 |
.rounded-0
3 |
.rounded-pill
4 |
.rounded-circle
5 |
8 |
.rounded-sm
9 |
.rounded
10 |
.rounded-lg
11 |
.rounded-xl
12 |
6 |
7 | {#each Array(25) as _, n}
8 |
11 |
--------------------------------------------------------------------------------
/packages/docs/src/examples/flex/alignSelf.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Start
4 |
End
5 |
Center
6 |
Baseline
7 |
Auto
8 |
Stretch
9 |
10 |
2 |
Float left
3 |
4 |
Float right
5 |
6 |
Float left in SM and up
7 |
8 |
Float right in MD and up
9 |
10 |
Float left in MD and float right in down
11 |
12 |
2 |
Left aligned text on all viewport sizes.
3 |
Center aligned text on all viewport sizes.
4 |
Right aligned text on all viewport sizes.
5 |
Right aligned text on viewports sized SM (small) or wider.
6 |
Right aligned text on viewports sized MD (medium) or wider.
7 |
Right aligned text on viewports sized LG (large) or wider.
8 |
9 | Right aligned text on viewports sized XL (extra-large) or wider.
10 |
11 |
2 |
Primary Text
3 |
Secondary Text
4 |
Disabled Text
5 |
2 |
Lowercased text.
3 |
Uppercased text.
4 |
cap ital ized text.
5 |
2 |
Heading 1
3 |
Heading 2
4 |
Heading 3
5 |
Heading 4
6 |
Heading 5
7 |
Heading 6
8 |
Subtitle 1
9 |
Subtitle 2
10 |
Body 1
11 |
Body 2
12 |
Button
13 |
Caption
14 |
Overline
15 |
2 |
Black text.
3 |
Bold text.
4 |
Medium weight text.
5 |
Normal weight text.
6 |
Light weight text.
7 |
Thin weight text.
8 |
Italic text.
9 |
26 |
27 | {#if values.icon}
28 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/docs/src/playground/Breadcrumbs.svelte:
--------------------------------------------------------------------------------
1 |
25 |
26 |
27 |
28 | {values.divider[0]}
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/_error.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
30 |
31 |
32 | {status}
33 |
34 |
35 | {status}
36 |
37 | {error.message}
38 |
39 | {#if dev && error.stack}
40 | {error.stack}
41 | {/if}
42 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/actions/click-outside.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Click Outside action
3 | description: The ClickOutside action calls a function when something outside of the target element is clicked on.
4 | keywords: click outside, click action, svelte click action, svelte materialify click
5 | related:
6 | - actions/ripple
7 | - actions/intersect
8 | - components/menus
9 | ---
10 |
11 | # ClickOutside
12 |
13 | The `ClickOutside` directive calls a function when something outside of the target element is clicked on. This is used internally by components like `Menu` and `Dalog`.
14 |
15 | ## Usage
16 |
17 | The `ClickOutside` action allows you to provide a handler to be invoked when the user clicks outside of the target element.
18 |
18 | {#each ['-', '-sm-', '-md-', '-lg-', '-xl-'] as bp}
19 | .float{bp}left
20 | .float{bp}right
21 | .float{bp}none
22 | {/each}
23 |
24 |
--------------------------------------------------------------------------------
/packages/docs/src/server.js:
--------------------------------------------------------------------------------
1 | import sirv from 'sirv';
2 | import polka from 'polka';
3 | import compression from 'compression';
4 | import * as sapper from '@sapper/server';
5 |
6 | const { PORT, NODE_ENV } = process.env;
7 | const dev = NODE_ENV === 'development';
8 |
9 | polka() // You can also use Express
10 | .use(compression({ threshold: 0 }), sirv('static', { dev }), sapper.middleware())
11 | .listen(PORT, (err) => {
12 | // eslint-disable-next-line no-console
13 | if (err) console.log('error', err);
14 | });
15 |
--------------------------------------------------------------------------------
/packages/docs/src/util/links.js:
--------------------------------------------------------------------------------
1 | export default {
2 | star: 'https://github.com/TheComputerM/svelte-materialify/stargazers',
3 | docs: 'https://github.com/TheComputerM/svelte-materialify/tree/master/packages/docs',
4 | };
5 |
--------------------------------------------------------------------------------
/packages/docs/src/util/stores.js:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 |
3 | const theme = writable('light');
4 |
5 | export { theme };
6 |
7 | const markdown = writable(false);
8 |
9 | export { markdown };
10 |
11 | const hashURL = writable(process.browser ? window.location.href : '');
12 |
13 | export { hashURL };
14 |
--------------------------------------------------------------------------------
/packages/docs/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/static/favicon.png
--------------------------------------------------------------------------------
/packages/docs/static/logo-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/static/logo-192.png
--------------------------------------------------------------------------------
/packages/docs/static/logo-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/static/logo-512.png
--------------------------------------------------------------------------------
/packages/docs/static/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "background_color": "#ffffff",
3 | "theme_color": "#651fff",
4 | "name": "Svelte Materialify",
5 | "short_name": "Svelte Material",
6 | "display": "minimal-ui",
7 | "start_url": "/",
8 | "icons": [
9 | {
10 | "src": "logo-192.png",
11 | "sizes": "192x192",
12 | "type": "image/png"
13 | },
14 | {
15 | "src": "maskable_icon.png",
16 | "sizes": "196x196",
17 | "type": "image/png",
18 | "purpose": "any maskable"
19 | },
20 | {
21 | "src": "logo-512.png",
22 | "sizes": "512x512",
23 | "type": "image/png"
24 | }
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/packages/docs/static/maskable_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/static/maskable_icon.png
--------------------------------------------------------------------------------
/packages/docs/static/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow: /api/
--------------------------------------------------------------------------------
/packages/docs/static/svelte-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/static/svelte-logo.png
--------------------------------------------------------------------------------
/packages/docs/theme/_material-theme.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/docs/theme/_material-theme.scss
--------------------------------------------------------------------------------
/packages/svelte-materialify/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | compiled
3 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/AppBar.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface AppBarProps {
4 | /** classes added to the appbar */
5 | class?: string;
6 | /** height of the appbar */
7 | height?: string | number;
8 | /** removes the border radius */
9 | tile?: boolean;
10 | /** removes the box shadow */
11 | flat?: boolean;
12 | /** reduces the height */
13 | dense?: boolean;
14 | /** increases the height */
15 | prominent?: boolean;
16 | /** makes the positon of the appbar fixed */
17 | fixed?: boolean;
18 | /** makes the positon of the appbar absolute */
19 | absolute?: boolean;
20 | /** collapses the appbar reducing its maximum width */
21 | collapsed?: boolean;
22 | /** styles added to the appbar */
23 | style?: string;
24 | }
25 |
26 | declare class AppBar extends SvelteComponent {}
27 |
28 | export default AppBar;
29 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Avatar.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface AvatarProps {
4 | /** classes to add to avatar */
5 | class?: string;
6 | /** height and width of the avatar. */
7 | size?: string | number;
8 | /** removes border radius */
9 | tile?: boolean;
10 | /** styles applied to the avatar */
11 | style?: string;
12 | }
13 |
14 | declare class Avatar extends SvelteComponent {}
15 |
16 | export default Avatar;
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Badge.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 | import { TransitionConfig } from 'svelte/transition';
3 |
4 | interface BadgeProps {
5 | /** classes to add to avatar */
6 | class?: string;
7 | value?: string;
8 | active?: boolean;
9 | bordered?: boolean;
10 | dot?: boolean;
11 | tile?: boolean;
12 | bottom?: boolean;
13 | left?: boolean;
14 | label?: string;
15 | transition?: (node: Element, options: any) => TransitionConfig;
16 | offsetX?: number | string;
17 | offsetY?: number | string;
18 | /** styles applied to the avatar */
19 | style?: string;
20 | }
21 |
22 | declare class Badge extends SvelteComponent {}
23 |
24 | export default Badge;
25 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Breadcrumbs.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface BreadcrumbItem {
4 | disabled?: boolean;
5 | href?: string;
6 | text: string;
7 | class?: string;
8 | props?: object;
9 | }
10 |
11 | interface BreadcrumbsProps {
12 | /** classes added to the component */
13 | class?: string;
14 | /** array of objects for each breadcrumb */
15 | items: BreadcrumbItem[];
16 | /** makes the breadcrumb large */
17 | large?: boolean;
18 | /** styles to add to the breadcrumb */
19 | style?: string;
20 | }
21 |
22 | declare class Breadcrumbs extends SvelteComponent {
23 | $$slot_def: {
24 | item?: BreadcrumbItem,
25 | };
26 | }
27 |
28 | export default Breadcrumbs;
29 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Card.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface CardProps {
4 | /** classes added to the card */
5 | class?: string;
6 | /** remove box shadow from card */
7 | flat?: boolean;
8 | /** remove border radius */
9 | tile?: boolean;
10 | /** adds a thin border */
11 | outlined?: boolean;
12 | /** makes the card more elevated */
13 | raised?: boolean;
14 | /** add border radius to opposite corners */
15 | shaped?: boolean;
16 | /** more elevation on hover */
17 | hover?: boolean;
18 | /** card with button-like functionality */
19 | link?: boolean;
20 | /** shows the linear progress bar */
21 | loading?: boolean;
22 | /** disables the card and lowers opacity */
23 | disabled?: boolean;
24 | /** styles added the card */
25 | style?: string;
26 | }
27 |
28 | declare class Card extends SvelteComponent {}
29 |
30 | export default Card;
31 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/CardActions.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface CardActionsProps {
4 | class?: string;
5 | style?: string;
6 | }
7 |
8 | declare class CardActions extends SvelteComponent {}
9 | export default CardActions;
10 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/CardSubtitle.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface CardSubtitleProps {
4 | class?: string;
5 | style?: string;
6 | }
7 |
8 | declare class CardSubtitle extends SvelteComponent {}
9 | export default CardSubtitle;
10 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/CardText.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface CardTextProps {
4 | class?: string;
5 | style?: string;
6 | }
7 |
8 | declare class CardText extends SvelteComponent {}
9 | export default CardText;
10 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/CardTitle.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface CardTitleProps {
4 | class?: string;
5 | style?: string;
6 | }
7 |
8 | declare class CardTitle extends SvelteComponent {}
9 | export default CardTitle;
10 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/ClickOutside.d.ts:
--------------------------------------------------------------------------------
1 | interface ClickOutsideOptions {
2 | include?: HTMLElement[];
3 | }
4 |
5 | interface ClickOutsideReturn {
6 | destroy(): void;
7 | }
8 |
9 | declare function ClickOutside(
10 | node: HTMLElement,
11 | options: ClickOutsideOptions,
12 | ): ClickOutsideReturn;
13 |
14 | export default ClickOutside;
15 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Container.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface ContainerProps {
4 | /** classes added to the container */
5 | class?: string;
6 | /** styles added to the container */
7 | style?: string;
8 | /** fluid extends the container across all viewports and device sizes*/
9 | fluid?: boolean;
10 | }
11 |
12 | declare class Container extends SvelteComponent {}
13 |
14 | export default Container;
15 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/DataTable.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface DataTableProps {
4 | /** classes added to the table */
5 | class?: string;
6 | }
7 |
8 | declare class DataTable extends SvelteComponent {}
9 |
10 | export default DataTable;
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/DataTableBody.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface DataTableBodyProps {
4 | /** classes added to the table body */
5 | class?: string;
6 | }
7 |
8 | declare class DataTableBody extends SvelteComponent {}
9 |
10 | export default DataTableBody;
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/DataTableCell.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface DataTableCellProps {
4 | /** classes added to the table cell */
5 | class?: string;
6 | /** whether the cell contains numeric values */
7 | numeric?: boolean;
8 | }
9 |
10 | declare class DataTableCell extends SvelteComponent {}
11 |
12 | export default DataTableCell;
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/DataTableHead.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface DataTableHeadProps {
4 | /** classes added to the table head */
5 | class?: string;
6 | }
7 |
8 | declare class DataTableHead extends SvelteComponent {}
9 |
10 | export default DataTableHead;
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/DataTableRow.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface DataTableRowProps {
4 | /** classes added to the table row */
5 | class?: string;
6 | }
7 |
8 | declare class DataTableRow extends SvelteComponent {}
9 |
10 | export default DataTableRow;
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Dialog.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 | import { OverlayProps } from './Overlay';
3 | import { TransitionConfig } from 'svelte/transition';
4 |
5 | interface DialogProps {
6 | class?: string;
7 | /** controls whether the dialog is visible or hidden */
8 | active?: boolean;
9 | /** clicking outside of the dialog will not deactivate it */
10 | persistent?: boolean;
11 | /** disables the ability to open the dialog */
12 | disabled?: boolean;
13 | /** sets the width for the dialog */
14 | width?: string | number;
15 | /** changes dialog for fullscreen display */
16 | fullscreen?: boolean;
17 | /** transition of the dialog */
18 | transition?: (node: Element, options: any) => TransitionConfig;
19 | /** props for the overlay */
20 | overlay?: OverlayProps;
21 | }
22 |
23 | declare class Dialog extends SvelteComponent {}
24 |
25 | export default Dialog;
26 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Divider.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface DividerProps {
4 | /** inset moves divider 72px to the right */
5 | inset?: boolean;
6 | /** vertical makes divider to a vertical divider */
7 | vertical?: boolean;
8 | /** classes added to the divider */
9 | class?: string;
10 | /** styles added to the divider */
11 | style?: string;
12 | }
13 |
14 | declare class Divider extends SvelteComponent {}
15 |
16 | export default Divider;
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/ExpansionPanel.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface ExpansionPanelProps {
4 | /** classes added to the ExpansionPanel */
5 | class?: string;
6 |
7 | // Options for the slide transition.
8 | slideOpts?: Object;
9 |
10 | // Make the panel readonly.
11 | readonly?: boolean;
12 |
13 | // Disable the panel.
14 | disabled?: boolean;
15 |
16 | // Styles to add to the panel.
17 | style?: string;
18 |
19 | }
20 |
21 | declare class ExpansionPanel extends SvelteComponent {
22 | $$slot_def: {
23 | active?: boolean,
24 | };
25 | }
26 |
27 | export default ExpansionPanel;
28 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Footer.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface FooterProps {
4 | /** Classes added to the footer. */
5 | class?: string;
6 |
7 | /** Position the footer absolutely at the bottom of its parent container. */
8 | absolute?: boolean;
9 |
10 | /** Removes all default padding from the footer component. */
11 | paddless?: boolean;
12 |
13 | /** Prevent the footer from being as large as its container when the absolute prop is present. */
14 | inset?: boolean;
15 |
16 | /** Fix footer at the bottom of its parent container. */
17 | fixed?: boolean;
18 |
19 | /** Styles to add to the footer. */
20 | style?: string;
21 | }
22 |
23 | declare class Footer extends SvelteComponent { }
24 |
25 | export default Footer;
26 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Icon.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface IconProps {
4 | /** classes added to the icon */
5 | class?: string;
6 | /** size of the icon */
7 | size?: string | number;
8 | /** degress by which to rotate the icon */
9 | rotate?: number;
10 | /** makes the icon spin */
11 | spin?: boolean;
12 | /** disables the icon */
13 | disabled?: boolean;
14 | /** svg path for the icon */
15 | path?: any;
16 | /** label for the icon */
17 | label?: any;
18 | /** styles added to the icon */
19 | style?: string;
20 | }
21 |
22 | declare class Icon extends SvelteComponent {}
23 |
24 | export default Icon;
25 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Input.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | export interface InputProps {
4 | /** classes added to the input */
5 | class?: string;
6 | /** value of the input */
7 | value?: any;
8 | /** color of the input */
9 | color?: string;
10 | /** makes the input dense */
11 | dense?: boolean;
12 | /** makes the input readonly */
13 | readonly?: boolean;
14 | /** disables the input */
15 | disabled?: boolean;
16 | /** */
17 | counter?: boolean | number;
18 | hint?: string;
19 | messages?: string[];
20 | messagesCount?: number;
21 | error?: boolean;
22 | }
23 |
24 | declare class Input extends SvelteComponent {}
25 |
26 | export default Input;
27 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Intersect.d.ts:
--------------------------------------------------------------------------------
1 | interface IntersectOptions {
2 | once?: boolean;
3 | root?: HTMLElement;
4 | rootMargin?: string;
5 | threshold?: number | number[];
6 | }
7 |
8 | interface IntersectReturn {
9 | destroy(): void;
10 | }
11 |
12 | declare function Intersect(node: HTMLElement, options: IntersectOptions): IntersectReturn;
13 |
14 | export default Intersect;
15 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/ItemGroup.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | export interface ItemGroupProps {
4 | /** classes added to item group */
5 | class?: string;
6 | /** class to add to item when active */
7 | activeClass?: string;
8 | /** value of the group */
9 | value?: any;
10 | /** allows to select multiple items */
11 | multiple?: boolean;
12 | /** makes sure atleast one item is selected */
13 | mandatory?: boolean;
14 | /** max number of selection */
15 | max?: number;
16 | /** styles added to item group */
17 | style?: string;
18 | }
19 |
20 | declare class ItemGroup extends SvelteComponent {}
21 |
22 | export default ItemGroup;
23 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Jump.d.ts:
--------------------------------------------------------------------------------
1 | interface JumpOptions {
2 | target?: HTMLElement;
3 | duration?: number;
4 | offset?: number;
5 | callback?(): void;
6 | easing?(): number;
7 | }
8 |
9 | interface JumpReturn {
10 | update(): void;
11 | destroy(): void;
12 | }
13 |
14 | declare function Jump(node: HTMLElement, options: JumpOptions): JumpReturn;
15 |
16 | export default Jump;
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/List.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface ListProps {
4 | /** classes added to the list */
5 | class?: string;
6 | /** reduces padding og list items */
7 | dense?: boolean;
8 | /** disables the list */
9 | disabled?: boolean;
10 | /** removes box shadow from the list */
11 | flat?: boolean;
12 | /** adds border radius to the list */
13 | rounded?: boolean;
14 | /** makes the list items navigation style */
15 | nav?: boolean;
16 | /** adds a thin outline to the list */
17 | outlined?: boolean;
18 | /** styles to add to the list */
19 | style?: string;
20 | }
21 |
22 | declare class List extends SvelteComponent {}
23 |
24 | export default List;
25 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/ListItem.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 | import { RippleOptions } from './Ripple';
3 |
4 | interface ListItemProps {
5 | /** classes added to the listitem */
6 | class?: string;
7 | /** classes added when active */
8 | activeClass?: string;
9 | /** specify active state */
10 | active?: boolean;
11 | /** value to use in ListItemGroup */
12 | value?: any;
13 | /** makes the listitem dense */
14 | dense?: boolean;
15 | /** disables the listitem */
16 | disabled?: boolean;
17 | /** makes text selectable if true */
18 | selectable?: boolean;
19 | /** there is no word wrap */
20 | multiline?: boolean;
21 | /** options for the ripple action */
22 | ripple?: RippleOptions;
23 | /** styles added to listitem */
24 | style?: string;
25 | }
26 |
27 | declare class ListItem extends SvelteComponent {}
28 |
29 | export default ListItem;
30 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/ListItemGroup.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 | import { ItemGroupProps } from './ItemGroup';
3 |
4 | interface ListItemGroupProps extends ItemGroupProps {}
5 |
6 | declare class ListItemGroup extends SvelteComponent {}
7 |
8 | export default ListItemGroup;
9 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/MaterialApp.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface MaterialAppProps {
4 | /** theme for the app */
5 | theme?: 'light' | 'dark';
6 | }
7 |
8 | declare class MaterialApp extends SvelteComponent {}
9 |
10 | export default MaterialApp;
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/MaterialAppMin.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface MaterialAppMinProps {
4 | /** theme for the app */
5 | theme?: 'light' | 'dark';
6 | }
7 |
8 | declare class MaterialAppMin extends SvelteComponent {}
9 |
10 | export default MaterialAppMin;
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Overlay.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | export interface OverlayProps {
4 | /** classes added to overlay */
5 | class?: string;
6 | /** overlay is visible or not */
7 | active?: boolean;
8 | /** the opacity of the overlay */
9 | opacity?: number;
10 | /** the color of the overlay */
11 | color?: string;
12 | /** the z-index of the overlay */
13 | index?: number;
14 | /** makes the position of overlay absolute */
15 | absolute?: boolean;
16 | /** options passed to the fade transition */
17 | fadeOptions?: any;
18 | /** styles added to the overlay */
19 | style?: string;
20 | }
21 |
22 | declare class Overlay extends SvelteComponent {}
23 |
24 | export default Overlay;
25 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/ProgressCircular.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface ProgressCircularProps {
4 | class?: string;
5 | indeterminate?: boolean;
6 | color?: string;
7 | rotate?: number;
8 | size?: number;
9 | value?: number;
10 | width?: number;
11 | style?: string;
12 | }
13 |
14 | declare class ProgressCircular extends SvelteComponent {}
15 |
16 | export default ProgressCircular;
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/ProgressLinear.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface ProgressCircularProps {
4 | class?: string;
5 | value?: number;
6 | active?: boolean;
7 | indeterminate?: boolean;
8 | height?: string;
9 | backgroundColor?: string;
10 | backgroundOpacity?: number;
11 | color?: string;
12 | buffer?: number;
13 | reversed?: boolean;
14 | stream?: boolean;
15 | rounded?: boolean;
16 | striped?: boolean;
17 | style?: string;
18 | }
19 |
20 | declare class ProgressCircular extends SvelteComponent {}
21 |
22 | export default ProgressCircular;
23 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Radio.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | export interface RadioProps {
4 | /** Classes to add to radio wrapper. */
5 | class?: string;
6 | /** Color of the radio when active. */
7 | color?: string;
8 | /** Disables the radio. */
9 | disabled?: boolean;
10 | /** Bind radio to a group. */
11 | group?: string | number | string[];
12 | /** Value of the radio. */
13 | value?: string | number | string[];
14 | /** Id of the radio. */
15 | id?: string;
16 | /** Styles to add to radio wrapper. */
17 | style?: string;
18 | /** DOM reference to radio input element. */
19 | inputElement?: Element;
20 | }
21 |
22 | declare class Radio extends SvelteComponent {}
23 |
24 | export default Radio;
25 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Ripple.d.ts:
--------------------------------------------------------------------------------
1 | export interface RippleOptions {
2 | color?: string;
3 | class?: string;
4 | opacity?: number;
5 | centered?: boolean;
6 | spreadingDuration?: string;
7 | spreadingDelay?: string;
8 | spreadingTimingFunction?: string;
9 | clearingDuration?: string;
10 | clearingDelay?: string;
11 | clearingTimingFunction?: string;
12 | }
13 |
14 | interface RippleReturn {
15 | update(): void;
16 | destroy(): void;
17 | }
18 |
19 | declare function Ripple(node: HTMLElement, options: RippleOptions): RippleReturn;
20 |
21 | export default Ripple;
22 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Row.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface RowProps {
4 | /** dense reduces standard gutter */
5 | dense?: boolean;
6 | /** noGutters removes gutter completely */
7 | noGutters?: boolean;
8 | /** classes added to the row */
9 | class?: string;
10 | /** styles added to the row */
11 | style?: string;
12 | }
13 |
14 | declare class Row extends SvelteComponent {}
15 |
16 | export default Row;
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Subheader.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | export interface SubheaderProps {
4 | /** Classes to add to the subheader. */
5 | class?: string;
6 | /** Styles to add to the subheader. */
7 | style?: string;
8 | /** Whether to move the subheader to the right. */
9 | inset?: boolean;
10 | }
11 |
12 | declare class Subheader extends SvelteComponent {}
13 |
14 | export default Subheader;
15 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Tab.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | export interface TabProps {
4 | class?: string;
5 | value?: any;
6 | activeClass?: string;
7 | disabled?: boolean;
8 | }
9 |
10 | declare class Tab extends SvelteComponent {}
11 |
12 | export default Tab;
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/TabContent.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | export interface TabContentProps {
4 | class?: string;
5 | style?: string;
6 | }
7 |
8 | declare class TabContent extends SvelteComponent {}
9 |
10 | export default TabContent;
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Table.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface TableProps {
4 | /** dense reduces standard gutter */
5 | dense?: boolean;
6 | /** Make the header be sticky and remain visible through scrolling */
7 | fixedHeader?: boolean;
8 | /** classes added to the table */
9 | class?: string;
10 | /** styles added to the table */
11 | style?: string;
12 | }
13 |
14 | declare class Table extends SvelteComponent {}
15 |
16 | export default Table;
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Tabs.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | export interface TabsProps {
4 | class?: string;
5 | value?: number;
6 | centerActive?: boolean;
7 | showArrows?: boolean;
8 | fixedTabs?: boolean;
9 | grow?: boolean;
10 | centered?: boolean;
11 | right?: boolean;
12 | icons?: boolean;
13 | slider?: boolean;
14 | sliderClass?: string;
15 | ripple?: any;
16 | vertical?: boolean;
17 | }
18 |
19 | declare class Tabs extends SvelteComponent {}
20 |
21 | export default Tabs;
22 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Tooltip.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface TooltipProps {
4 | /** classes added to the tooltip */
5 | class?: string;
6 | /** color of the tooltip when active */
7 | color?: string;
8 | /** controls whether the component is visible or hidden */
9 | active?: boolean;
10 | /** aligns the component towards the top */
11 | top?: boolean;
12 | /** aligns the component towards the bottom */
13 | bottom?: boolean;
14 | /** aligns the component towards the left */
15 | left?: boolean;
16 | /** aligns the component towards the right */
17 | right?: boolean;
18 | }
19 |
20 | declare class Tooltip extends SvelteComponent {}
21 |
22 | export default Tooltip;
23 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Touch.d.ts:
--------------------------------------------------------------------------------
1 | interface TouchReturn {
2 | destroy(): void;
3 | }
4 |
5 | declare function Touch(node: HTMLElement): TouchReturn;
6 |
7 | export default Touch;
8 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/Window.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface WindowProps {
4 | /** Classes added to the window. */
5 | class?: string;
6 |
7 | /** Class to add to the activated window item */
8 | activeClass?: string;
9 |
10 | /** Value of the window */
11 | value?: number;
12 |
13 | /** Whether orientation of the window is vertical. Defaults to `false`. */
14 | vertical?: boolean;
15 |
16 | /** Whether the window is reverse. Defaults to `false`. */
17 | reverse?: boolean;
18 |
19 | /** Whether the window is continuous. Defaults to `true`. */
20 | continuous?: boolean;
21 | }
22 |
23 | declare class Window extends SvelteComponent {}
24 |
25 | export default Window;
26 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/WindowItem.d.ts:
--------------------------------------------------------------------------------
1 | import { SvelteComponent } from './shared';
2 |
3 | interface WindowItemProps {
4 | /** Classes added to the window item. */
5 | class?: string;
6 |
7 | /** Styles to add to the window item. */
8 | style?: string;
9 | }
10 |
11 | declare class WindowItem extends SvelteComponent {}
12 |
13 | export default WindowItem;
14 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/@types/shared.d.ts:
--------------------------------------------------------------------------------
1 | type LocalSvelteProps = {
2 | children?: any;
3 | class?: string;
4 | } & Record;
5 |
6 | /**
7 | * Local svelte class for adding typescript definitions for svelte components
8 | *
9 | */
10 | export declare class SvelteComponent {
11 | constructor(props: Props & LocalSvelteProps);
12 | $on(event: string, callback: (event: CustomEvent) => void): () => void;
13 | $$prop_def: Props & LocalSvelteProps;
14 | render: undefined;
15 | context: undefined;
16 | setState: undefined;
17 | forceUpdate: undefined;
18 | props: undefined;
19 | state: undefined;
20 | refs: undefined;
21 | }
22 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | targets: {
7 | node: 'current',
8 | },
9 | },
10 | ],
11 | ],
12 | };
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | transform: {
3 | '^.+\\.svelte$': 'svelte-jester',
4 | '^.+\\.js$': 'babel-jest',
5 | },
6 | testMatch: ['**/tests/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
7 | moduleFileExtensions: ['js', 'svelte'],
8 | setupFilesAfterEnv: ['@testing-library/jest-dom'],
9 | moduleNameMapper: {
10 | '@s/(.*)$': '/src/$1',
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/actions/ClickOutside/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Click Outside
3 | * @param {Node} node
4 | */
5 | export default (node, _options = {}) => {
6 | const options = { include: [], ..._options };
7 |
8 | function detect({ target }) {
9 | if (!node.contains(target) || options.include.some((i) => target.isSameNode(i))) {
10 | node.dispatchEvent(new CustomEvent('clickOutside'));
11 | }
12 | }
13 | document.addEventListener('click', detect, { passive: true, capture: true });
14 | return {
15 | destroy() {
16 | document.removeEventListener('click', detect);
17 | },
18 | };
19 | };
20 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/actions/Intersect/index.js:
--------------------------------------------------------------------------------
1 | export default (node, options) => {
2 | const settings = { once: false, ...options };
3 | const observer = new IntersectionObserver((entries) => {
4 | const entry = entries[0];
5 | const intersecting = entry.isIntersecting;
6 | if (intersecting) {
7 | node.dispatchEvent(
8 | new CustomEvent('intersect', {
9 | detail: entry,
10 | }),
11 | );
12 | if (settings.once) {
13 | observer.unobserve(node);
14 | }
15 | }
16 | }, settings);
17 | observer.observe(node);
18 | return {
19 | destroy() {
20 | observer.unobserve(node);
21 | },
22 | };
23 | };
24 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/actions/Jump/index.js:
--------------------------------------------------------------------------------
1 | import jump from './jump';
2 |
3 | export default (node, _options = {}) => {
4 | let options = _options;
5 | let target = options.target || node.getAttribute('data-target') || node.href;
6 | const Jump = () => {
7 | jump(target, options);
8 | };
9 |
10 | node.addEventListener('pointerdown', Jump);
11 |
12 | return {
13 | update(newOptions) {
14 | options = newOptions;
15 | target = options.target || node.getAttribute('data-target') || node.href;
16 | if (!options) node.removeEventListener('pointerdown', Jump);
17 | },
18 | destroy() {
19 | node.removeEventListener('pointerdown', Jump);
20 | },
21 | };
22 | };
23 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Alert/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $alert-border-opacity: 0.26 !default;
4 | $alert-border-radius: $border-radius-root !default;
5 | $alert-border-width: 4px !default;
6 | $alert-dense-border-width: medium !default;
7 | $alert-font-size: 16px !default;
8 | $alert-margin: 16px !default;
9 | $alert-padding: 16px !default;
10 | $alert-outline: thin solid currentColor !default;
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Alert/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Alert.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/AppBar/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $app-bar-border-radius: 4px !default;
4 | $app-bar-elevation: 4 !default;
5 | $app-bar-scrolled-title-padding-bottom: 9px !default;
6 | $app-bar-transition: 0.25s map-get($transitions, 'fast-out-slow-in') !default;
7 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/AppBar/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './AppBar.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Avatar/Avatar.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-avatar {
4 | align-items: center;
5 | display: inline-flex;
6 | justify-content: center;
7 | line-height: normal;
8 | position: relative;
9 | text-align: center;
10 | vertical-align: middle;
11 | overflow: hidden;
12 | width: var(--s-avatar-size);
13 | height: var(--s-avatar-size);
14 |
15 | @include has-theme-bg {
16 | color: map-deep-get($material-dark-theme, 'text', 'primary');
17 | }
18 |
19 | &:not(.tile) {
20 | border-radius: $avatar-border-radius;
21 | }
22 |
23 | .s-icon,
24 | img,
25 | svg {
26 | color: inherit;
27 | border-radius: inherit;
28 | display: inline-flex;
29 | height: inherit;
30 | width: inherit;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Avatar/Avatar.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
13 |
14 |
15 |
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Avatar/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $avatar-border-radius: 50% !default;
4 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Avatar/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Avatar.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Badge/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $badge-border-radius: 10px !default;
4 | $badge-bordered-width: 2px !default;
5 | $badge-color: material-color('shades', 'white') !default;
6 | $badge-dot-border-radius: 4.5px;
7 | $badge-dot-border-width: 1.5px !default;
8 | $badge-dot-height: 9px !default;
9 | $badge-dot-width: 9px !default;
10 | $badge-font-family: $body-font-family !default;
11 | $badge-font-size: 12px !default;
12 | $badge-height: 20px !default;
13 | $badge-icon-margin: 0 -2px !default;
14 | $badge-icon-padding: 4px 6px !default;
15 | $badge-letter-spacing: 0 !default;
16 | $badge-line-height: 1 !default;
17 | $badge-min-width: 20px !default;
18 | $badge-padding: 4px 6px !default;
19 | $badge-right: auto !default;
20 | $badge-top: auto !default;
21 | $badge-wrapper-margin: 0 4px !default;
22 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Badge/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Badge.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Breadcrumbs/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $breadcrumbs-flex: 0 1 auto !default;
4 | $breadcrumbs-padding: 18px 12px !default;
5 | $breadcrumbs-even-child-padding: 0 12px !default;
6 | $breadcrumbs-item-font-size: 14px !default;
7 | $breadcrumbs-item-large-font-size: 16px !default;
8 | $breadcrumbs-margin: 0 !default;
9 | $breadcrumbs-padding: 0 14px !default;
10 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Breadcrumbs/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Breadcrumbs.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Button/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Button.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroup.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-btn-group {
4 | border-radius: $btn-group-border-radius;
5 | display: inline-flex;
6 | max-width: 100%;
7 | flex: 0 1 auto;
8 | position: relative;
9 | transition: $primary-transition;
10 |
11 | &:not(.elevated) {
12 | .s-btn-group-item.s-btn {
13 | box-shadow: none;
14 | }
15 | }
16 |
17 | &.borderless {
18 | .s-btn-group-item.s-btn {
19 | border-width: 0;
20 | }
21 | }
22 |
23 | &.tile {
24 | border-radius: 0;
25 | }
26 |
27 | &.rounded {
28 | border-radius: $btn-group-round-border-radius;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroupItem.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-btn-group-item {
4 | border-radius: 0;
5 | border-style: solid;
6 | border-width: thin;
7 | opacity: $btn-group-btn-opacity;
8 | padding: $btn-group-btn-padding;
9 |
10 | &:first-child {
11 | border-top-left-radius: inherit;
12 | border-bottom-left-radius: inherit;
13 | }
14 |
15 | &:last-child {
16 | border-top-right-radius: inherit;
17 | border-bottom-right-radius: inherit;
18 | }
19 |
20 | &:not(:first-child) {
21 | border-left-width: 0;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroupItem.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
27 |
28 |
35 |
37 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ButtonGroup/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $btn-group-border-radius: $border-radius-root !default;
4 | $btn-group-btn-padding: 0 12px !default;
5 | $btn-group-btn-opacity: 0.8 !default;
6 | $btn-group-round-border-radius: 24px !default;
7 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ButtonGroup/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './ButtonGroup.svelte';
2 | export { default as ButtonGroupItem } from './ButtonGroupItem.svelte';
3 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Card/CardActions.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-card-actions {
4 | align-items: center;
5 | display: flex;
6 | padding: $card-actions-padding;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Card/CardActions.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 |
10 |
11 |
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Card/CardSubtitle.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-card-subtitle {
4 | color: var(--theme-text-secondary);
5 | font-size: $card-text-font-size;
6 | font-weight: $card-text-font-weight;
7 | line-height: $card-text-line-height;
8 | letter-spacing: $card-text-letter-spacing;
9 | padding: $card-subtitle-padding;
10 |
11 | + .s-card-text {
12 | padding-top: $card-adjacent-sibling-text-padding-top;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Card/CardSubtitle.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 |
10 |
11 |
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Card/CardText.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-card-text {
4 | width: 100%;
5 | color: var(--theme-text-secondary);
6 | font-size: $card-text-font-size;
7 | font-weight: $card-text-font-weight;
8 | line-height: $card-text-line-height;
9 | letter-spacing: $card-text-letter-spacing;
10 | padding: $card-subtitle-padding;
11 | }
12 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Card/CardText.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 |
10 |
11 |
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Card/CardTitle.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-card-title {
4 | align-items: center;
5 | display: flex;
6 | flex-wrap: wrap;
7 | font-size: $card-title-font-size;
8 | font-weight: $card-title-font-weight;
9 | letter-spacing: $card-title-letter-spacing;
10 | line-height: $card-title-line-height;
11 | word-break: $card-title-word-break;
12 | padding: $card-subtitle-padding;
13 |
14 | + .s-card-subtitle,
15 | + .s-card-title {
16 | padding-top: $card-adjacent-sibling-text-padding-top;
17 | margin-top: $card-title-adjacent-sibling-subtitle-margin-top;
18 | }
19 |
20 | + .s-card-subtitle {
21 | margin-top: $card-title-adjacent-sibling-subtitle-margin-top;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Card/CardTitle.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 |
10 |
11 |
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Card/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Card.svelte';
2 | export { default as CardActions } from './CardActions.svelte';
3 | export { default as CardSubtitle } from './CardSubtitle.svelte';
4 | export { default as CardText } from './CardText.svelte';
5 | export { default as CardTitle } from './CardTitle.svelte';
6 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Checkbox/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $checkbox-disabled-opacity: 0.6 !default;
4 | $checkbox-size: 18px !default;
5 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Checkbox/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Checkbox.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Chip/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Chip.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/DataTable.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-tbl {
4 | border-color: $tbl-border-color;
5 | border-style: solid;
6 | border-width: $tbl-border-width;
7 | border-radius: $tbl-border-radius;
8 | display: inline-flex;
9 |
10 | table {
11 | border-collapse: collapse;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/DataTable.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
8 |
9 |
14 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/DataTableBody.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-tbl-body {
4 | .s-tbl-row {
5 | border-top-color: $tbl-border-color;
6 | border-top-style: solid;
7 | border-top-width: $tbl-border-width;
8 |
9 | &:hover {
10 | background-color: $tbl-background-hover;
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/DataTableBody.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
8 |
9 |
10 |
12 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/DataTableCell.scss:
--------------------------------------------------------------------------------
1 | .s-tbl-cell {
2 | padding-left: 16px;
3 | padding-right: 16px;
4 |
5 | &.numeric {
6 | text-align: right;
7 | }
8 | }
9 |
10 | th.s-tbl-cell {
11 | height: 56px;
12 | text-align: left;
13 | }
14 |
15 | td.s-tbl-cell {
16 | height: 52px;
17 | }
18 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/DataTableCell.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
14 |
15 | {#if isTableHead}
16 |
17 |
19 | {:else}
20 |
21 |
23 | {/if}
24 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/DataTableHead.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-tbl-head {
4 | font-weight: $tbl-head-font-weight;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/DataTableHead.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
12 |
13 |
14 |
16 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/DataTableRow.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
9 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $tbl-border-color: var(--theme-dividers);
4 | $tbl-border-radius: $border-radius-root !default;
5 | $tbl-border-width: 1px;
6 | $tbl-background-hover: var(--theme-datatables-row-hover);
7 | $tbl-head-font-weight: map-get($font-weights, 'medium');
8 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/DataTable/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './DataTable.svelte';
2 | export { default as DataTableHead } from './DataTableHead.svelte';
3 | export { default as DataTableBody } from './DataTableBody.svelte';
4 | export { default as DataTableRow } from './DataTableRow.svelte';
5 | export { default as DataTableCell } from './DataTableCell.svelte';
6 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Dialog/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $dialog-border-radius: $border-radius-root !default;
4 | $dialog-card-subtitle-padding: 0 24px 20px !default;
5 | $dialog-card-text-padding: 0 24px 20px !default;
6 | $dialog-card-title-font-size: map-deep-get($headings, 'h6', 'size') !default;
7 | $dialog-card-title-font-weight: map-deep-get($headings, 'h6', 'weight') !default;
8 | $dialog-card-title-letter-spacing: map-deep-get(
9 | $headings,
10 | 'h6',
11 | 'letter-spacing'
12 | ) !default;
13 | $dialog-card-title-padding: 16px 24px 10px !default;
14 | $dialog-elevation: 24 !default;
15 | $dialog-margin: 24px !default;
16 | $dialog-max-height: 90% !default;
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Dialog/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Dialog.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Divider/Divider.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
11 |
12 |
13 |
15 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Grid/index.js:
--------------------------------------------------------------------------------
1 | export { default as Container } from './Container.svelte';
2 | export { default as Row } from './Row.svelte';
3 | export { default as Col } from './Col.svelte';
4 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Icon/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Icon.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Input/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $input-font-size: 16px !default;
4 | $input-letter-spacing: normal !default;
5 | $input-text-align: left !default;
6 | $input-max-height: 32px !default;
7 | $input-label-height: 20px !default;
8 | $input-label-letter-spacing: 20px !default;
9 | $input-prepend-append-outer-margin: 9px !default;
10 | $input-icon-height: 24px !default;
11 | $input-icon-min-width: 24px !default;
12 | $input-icon-width: 24px !default;
13 | $input-slot-margin-bottom: 8px !default;
14 | $input-dense-slot-margin-bottom: 4px !default;
15 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Input/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Input.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ItemGroup/ItemGroup.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-item-group {
4 | flex: 0 1 auto;
5 | position: relative;
6 | max-width: 100%;
7 | transition: $item-group-transition;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ItemGroup/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $item-group-transition: $primary-transition !default;
4 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ItemGroup/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './ItemGroup.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Lazy/Lazy.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 | {#if visible}
16 |
21 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Lazy/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Lazy.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/List/List.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
23 |
24 |
35 |
37 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/List/ListGroup.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-list-group {
4 | flex: 0 1 auto;
5 | position: relative;
6 | max-width: 100%;
7 |
8 | &.disabled {
9 | pointer-events: none;
10 | color: var(--theme-text-disabled);
11 | }
12 | }
13 |
14 | .s-list-group__activator.active:not(:hover):not(:focus)::before {
15 | opacity: 0;
16 | }
17 |
18 | .s-list-group__items {
19 | &.offset {
20 | .s-list-item {
21 | padding-left: var(--s-list-group-offset) !important;
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/List/ListItemGroup.scss:
--------------------------------------------------------------------------------
1 | .s-list-item-group {
2 | .s-list-item.active {
3 | color: inherit;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/List/ListItemGroup.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
20 |
21 |
30 |
32 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/List/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './List.svelte';
2 | export { default as ListGroup } from './ListGroup.svelte';
3 | export { default as ListItemGroup } from './ListItemGroup.svelte';
4 | export { default as ListItem } from './ListItem.svelte';
5 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/MaterialApp/MaterialApp.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/global';
2 |
3 | .s-app {
4 | min-height: 100%;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/MaterialApp/MaterialApp.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
7 |
8 |
9 |
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/MaterialApp/MaterialAppMin.scss:
--------------------------------------------------------------------------------
1 | @use '../../styles/theme';
2 | @use '../../styles/generic/reset';
3 | @use '../../styles/generic/color';
4 |
5 | .s-app {
6 | min-height: 100%;
7 | }
8 |
9 | .s-ripple-container {
10 | position: relative;
11 | overflow: hidden;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/MaterialApp/MaterialAppMin.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
7 |
8 |
9 |
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/MaterialApp/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './MaterialApp.svelte';
2 | export { default as MaterialAppMin } from './MaterialAppMin.svelte';
3 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Menu/Menu.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-menu__wrapper {
4 | position: relative;
5 | display: inline-flex;
6 | justify-content: center;
7 | align-items: center;
8 |
9 | [slot='activator'] {
10 | width: 100%;
11 | }
12 | }
13 |
14 | .s-menu {
15 | background-color: var(--theme-surface);
16 | backface-visibility: hidden;
17 | position: absolute;
18 | contain: content;
19 | max-height: $menu-max-height;
20 | overflow: auto;
21 | @include elevation($menu-content-elevation);
22 |
23 | &:not(.tile) {
24 | border-radius: $menu-content-border-radius;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Menu/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $menu-content-border-radius: $border-radius-root !default;
4 | $menu-content-elevation: 8 !default;
5 | $menu-max-height: 350px;
6 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Menu/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Menu.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/NavigationDrawer/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $navigation-drawer-border-width: 1px !default;
4 | $navigation-drawer-mobile-temporary-elevation: 16 !default;
5 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/NavigationDrawer/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './NavigationDrawer.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Overlay/Overlay.scss:
--------------------------------------------------------------------------------
1 | .s-overlay {
2 | align-items: center;
3 | border-radius: inherit;
4 | display: flex;
5 | justify-content: center;
6 | position: fixed;
7 | top: 0;
8 | left: 0;
9 | right: 0;
10 | bottom: 0;
11 | pointer-events: auto;
12 |
13 | &.absolute {
14 | position: absolute;
15 | }
16 | }
17 |
18 | .s-overlay__scrim {
19 | border-radius: inherit;
20 | bottom: 0;
21 | height: 100%;
22 | left: 0;
23 | position: absolute;
24 | right: 0;
25 | top: 0;
26 | transition: inherit;
27 | width: 100%;
28 | will-change: opacity;
29 | }
30 |
31 | .s-overlay__content {
32 | position: relative;
33 | }
34 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Overlay/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Overlay.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ProgressCircular/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $progress-circular-rotate-animation: progress-circular-rotate 1.4s linear infinite !default;
4 | $progress-circular-rotate-dash: progress-circular-dash 1.4s ease-in-out infinite !default;
5 | $process-circular-intermediate-svg-transition: all 0.2s ease-in-out !default;
6 | $progress-circular-underlay-stroke: rgba(material-color('shades', 'black'), 0.1) !default;
7 | $progress-circular-overlay-transition: all 0.6s ease-in-out !default;
8 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ProgressCircular/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './ProgressCircular.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ProgressLinear/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $progress-linear-border-radius: $border-radius-root !default;
4 | $progress-linear-stream-opacity: 0.3 !default;
5 | $progress-linear-stream-border-width: 4px !default;
6 | $progress-linear-stripe-gradient: linear-gradient(
7 | 135deg,
8 | hsla(0, 0%, 100%, 0.25) 25%,
9 | transparent 0,
10 | transparent 50%,
11 | hsla(0, 0%, 100%, 0.25) 0,
12 | hsla(0, 0%, 100%, 0.25) 75%,
13 | transparent 0,
14 | transparent
15 | ) !default;
16 | $progress-linear-stripe-background-size: 40px 40px !default;
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/ProgressLinear/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './ProgressLinear.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Radio/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $radio-size: 18px !default;
4 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Radio/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Radio.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Select/Select.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-select {
4 | max-width: 100%;
5 | position: relative;
6 |
7 | .s-menu__wrapper,
8 | .s-menu {
9 | width: 100%;
10 | }
11 |
12 | &:not(.disabled) {
13 | input,
14 | .s-menu__wrapper {
15 | cursor: pointer;
16 | }
17 | }
18 |
19 | &.chips {
20 | .s-text-field__wrapper.filled .s-text-field__input {
21 | padding-top: 24px;
22 | }
23 |
24 | input {
25 | margin: 0;
26 | display: none;
27 | }
28 |
29 | .s-chip {
30 | margin: $select-chip-margin;
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Select/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Select.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/SlideGroup/SlideGroup.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-slide-group {
4 | display: flex;
5 | }
6 |
7 | .s-slide-group__content {
8 | display: flex;
9 | flex: 1 0 auto;
10 | position: relative;
11 | transition: $primary-transition;
12 | white-space: nowrap;
13 | }
14 |
15 | .s-slide-group__wrapper {
16 | contain: content;
17 | display: flex;
18 | flex: 1 1 auto;
19 | overflow: hidden;
20 | touch-action: none;
21 | }
22 |
23 | .s-slide-group__next,
24 | .s-slide-group__prev {
25 | align-items: center;
26 | display: flex;
27 | flex: 0 1 $slide-group-control-basis;
28 | justify-content: center;
29 | min-width: $slide-group-control-basis;
30 | cursor: pointer;
31 |
32 | &.disabled {
33 | pointer-events: none;
34 | opacity: 0.5;
35 |
36 | &.hide-disabled-arrows {
37 | visibility: hidden;
38 | opacity: 0;
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/SlideGroup/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $slide-group-control-basis: 52px !default;
4 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/SlideGroup/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './SlideGroup.svelte';
2 | export { default as SlideItem } from './SlideItem.svelte';
3 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Slider/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Slider.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Snackbar/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $snackbar-absolute-z-index: 1 !default;
4 | $snackbar-background-color: #333333 !default;
5 | $snackbar-border-radius: $border-radius-root !default;
6 | $snackbar-btn-padding: 0 8px !default;
7 | $snackbar-color: hsla(0, 0%, 100%, 0.87) !default;
8 | $snackbar-font-size: map-deep-get($headings, 'body-2', 'size') !default;
9 | $snackbar-font-weight: map-deep-get($headings, 'body-2', 'weight') !default;
10 | $snackbar-letter-spacing: map-deep-get($headings, 'body-2', 'letter-spacing') !default;
11 | $snackbar-line-height: map-deep-get($headings, 'body-2', 'line-height') !default;
12 | $snackbar-padding: 14px 16px !default;
13 | $snackbar-elevation: 6 !default;
14 | $snackbar-wrapper-margin: 8px !default;
15 | $snackbar-wrapper-min-height: 48px !default;
16 | $snackbar-wrapper-min-width: 344px !default;
17 | $snackbar-z-index: 1000 !default;
18 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Snackbar/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Snackbar.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Subheader/Subheader.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-subheader {
4 | align-items: center;
5 | display: flex;
6 | height: $subheader-item-single-height;
7 | font-size: map-deep-get($headings, 'body-2', 'size');
8 | font-weight: map-deep-get($headings, 'body-2', 'weight');
9 | padding: 0 $subheader-right-padding 0 $subheader-left-padding;
10 | color: var(--theme-text-secondary);
11 |
12 | &.inset {
13 | margin-left: $subheader-inset-margin;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Subheader/Subheader.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
10 |
11 |
14 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Subheader/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $subheader-inset-margin: 56px !default;
4 | $subheader-item-single-height: 48px !default;
5 | $subheader-left-padding: 16px !default;
6 | $subheader-right-padding: 16px !default;
7 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Subheader/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Subheader.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Switch/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Switch.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Table/Table.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
11 |
12 |
17 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Table/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Table.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Tabs/TabContent.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Tabs/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Tabs.svelte';
2 | export { default as Tab } from './Tab.svelte';
3 | export { default as TabContent } from './TabContent.svelte';
4 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/TextField/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './TextField.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Textarea/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $textarea-line-height: 1.75rem !default;
4 | $textarea-min-height: 32px !default;
5 | $textarea-padding: 0 !default;
6 | $textarea-icon-margin-top: 2px !default;
7 | $textarea-filled-icon-margin-top: 28px !default;
8 | $textarea-outlined-icon-margin-top: 18px !default;
9 | $textarea-solo-icon-margin-top: 8px !default;
10 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Textarea/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Textarea.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Tooltip/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $tooltip-background-color: rgba(material-color('grey', 'darken-2'), 0.9) !default;
4 | $tooltip-text-color: material-color('shades', 'white') !default;
5 | $tooltip-border-radius: $border-radius-root !default;
6 | $tooltip-font-size: 14px !default;
7 | $tooltip-transition-timing-function: map-get($transitions, 'linear-out-slow-in') !default;
8 | $tooltip-transition-enter-duration: 300ms !default;
9 | $tooltip-transition-leave-duration: 300ms !default;
10 | $tooltip-padding: 5px 16px !default;
11 | $tooltip-z-index: 1000 !default;
12 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Tooltip/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Tooltip.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/VirtualList/VirtualList.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 | {#each items as item}
16 |
17 |
18 | {item.text}
19 | {item.subtitle || ''}
20 |
21 |
22 | {#if item.items}
23 |
27 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/VirtualList/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './VirtualList.svelte';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Window/WindowItem.scss:
--------------------------------------------------------------------------------
1 | @import './variables';
2 |
3 | .s-window-item {
4 | position: relative;
5 | display: none;
6 | align-items: center;
7 | width: 100%;
8 | float: left;
9 | margin-right: -100%;
10 | backface-visibility: hidden;
11 | transition: 0.3s $window-transition-function;
12 |
13 | &.active,
14 | &.next,
15 | &.prev {
16 | display: block;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Window/WindowItem.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
19 |
20 |
21 |
23 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Window/_variables.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/variables';
2 |
3 | $window-transition-function: cubic-bezier(0.25, 0.8, 0.5, 1) !default;
4 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/components/Window/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './Window.svelte';
2 | export { default as WindowItem } from './WindowItem.svelte';
3 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../@types/index';
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/internal/Class/index.js:
--------------------------------------------------------------------------------
1 | const filter = (classes) => classes.filter((x) => !!x);
2 | const format = (classes) => classes.split(' ').filter((x) => !!x);
3 |
4 | /**
5 | * @param node {Element}
6 | * @param classes {Array}
7 | */
8 | export default (node, _classes) => {
9 | let classes = _classes;
10 | node.classList.add(...format(filter(classes).join(' ')));
11 | return {
12 | update(_newClasses) {
13 | const newClasses = _newClasses;
14 | newClasses.forEach((klass, i) => {
15 | if (klass) node.classList.add(...format(klass));
16 | else if (classes[i]) node.classList.remove(...format(classes[i]));
17 | });
18 | classes = newClasses;
19 | },
20 | };
21 | };
22 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/internal/Icons/close.js:
--------------------------------------------------------------------------------
1 | export default 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/internal/Icons/down.js:
--------------------------------------------------------------------------------
1 | export default 'M7,10L12,15L17,10H7Z';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/internal/Icons/next.js:
--------------------------------------------------------------------------------
1 | export default 'M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/internal/Icons/prev.js:
--------------------------------------------------------------------------------
1 | export default 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z';
2 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/internal/Style/index.js:
--------------------------------------------------------------------------------
1 | function format(input) {
2 | if (typeof input === 'number') return `${input}px`;
3 | return input;
4 | }
5 |
6 | /**
7 | * @param node {Element}
8 | * @param styles {Object}
9 | */
10 | export default (node, _styles) => {
11 | let styles = _styles;
12 | Object.entries(styles).forEach(([key, value]) => {
13 | if (value) node.style.setProperty(`--s-${key}`, format(value));
14 | });
15 |
16 | return {
17 | update(newStyles) {
18 | Object.entries(newStyles).forEach(([key, value]) => {
19 | if (value) {
20 | node.style.setProperty(`--s-${key}`, format(value));
21 | delete styles[key];
22 | }
23 | });
24 |
25 | Object.keys(styles).forEach((name) => node.style.removeProperty(`--s-${name}`));
26 |
27 | styles = newStyles;
28 | },
29 | };
30 | };
31 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/internal/uid/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // Shamefully ripped from https://github.com/lukeed/uid
3 | let IDX = 36;
4 | let HEX = '';
5 | while (IDX--) HEX += IDX.toString(36);
6 |
7 | export default (len) => {
8 | let str = '';
9 | let num = len || 11;
10 | while (num--) str += HEX[(Math.random() * 36) | 0];
11 | return str;
12 | };
13 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/_global.scss:
--------------------------------------------------------------------------------
1 | @use './theme';
2 |
3 | @import './generic/index';
4 | @import './elements/index';
5 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/elements/_blockquote.scss:
--------------------------------------------------------------------------------
1 | @use '../variables' as *;
2 |
3 | blockquote {
4 | padding: $spacer * 4 0 $spacer * 4 $spacer * 6;
5 | font-size: $blockquote-font-size;
6 | font-weight: $blockquote-font-weight;
7 | }
8 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/elements/_code.scss:
--------------------------------------------------------------------------------
1 | @use '../variables' as *;
2 |
3 | code,
4 | kbd {
5 | border-radius: $code-kbd-border-radius;
6 | font-size: $code-kbd-font-size;
7 | font-weight: $code-kbd-font-weight;
8 | }
9 |
10 | code {
11 | background-color: $code-background-color;
12 | color: $code-color;
13 | padding: $code-padding;
14 | }
15 |
16 | kbd {
17 | background: $kbd-background-color;
18 | color: $kbd-color;
19 | padding: $kbd-padding;
20 | }
21 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/elements/_global.scss:
--------------------------------------------------------------------------------
1 | @use '../variables' as *;
2 |
3 | html,
4 | body {
5 | height: 100%;
6 | }
7 |
8 | html {
9 | font-size: $font-size-root;
10 | overflow-x: hidden;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
15 | }
16 |
17 | body {
18 | font-family: $body-font-family;
19 | line-height: $line-height-root;
20 | }
21 |
22 | p {
23 | margin-bottom: $spacer * 4;
24 | }
25 |
26 | .s-ripple-container {
27 | position: relative;
28 | overflow: hidden;
29 | }
30 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/elements/_index.scss:
--------------------------------------------------------------------------------
1 | @use './global';
2 | @use './blockquote';
3 | @use './code';
4 | @use './headings';
5 | @use './lists';
6 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/elements/_lists.scss:
--------------------------------------------------------------------------------
1 | @use '../variables' as *;
2 |
3 | ul,
4 | ol {
5 | padding-left: $spacer * 6;
6 | }
7 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/generic/_display.scss:
--------------------------------------------------------------------------------
1 | @use '../tools/breakpoints' as *;
2 |
3 | @each $display in ('none', 'inline', 'inline-block', 'block', 'flex', 'inline-flex') {
4 | .d-#{$display} {
5 | display: unquote($display);
6 | }
7 | }
8 |
9 | @each $display in ('none', 'inline', 'inline-block', 'block', 'flex', 'inline-flex') {
10 | @include create_breakpoints() using ($screen_size) {
11 | .d-#{$screen_size}-#{$display} {
12 | display: unquote($display);
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/generic/_elevation.scss:
--------------------------------------------------------------------------------
1 | @use '../tools/elevation';
2 |
3 | @for $i from 0 through 24 {
4 | .elevation-#{$i} {
5 | @include elevation.elevation($i, $important: true);
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/generic/_float.scss:
--------------------------------------------------------------------------------
1 | @use '../tools/breakpoints' as *;
2 |
3 | .float-left {
4 | float: left;
5 | }
6 |
7 | .float-right {
8 | float: right;
9 | }
10 |
11 | .float-none {
12 | float: none;
13 | }
14 |
15 | @include create_breakpoints() using ($screen_size) {
16 | .float-#{$screen_size}-left {
17 | float: left;
18 | }
19 | .float-#{$screen_size}-right {
20 | float: right;
21 | }
22 | .float-#{$screen_size}-none {
23 | float: none;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/generic/_index.scss:
--------------------------------------------------------------------------------
1 | @use './reset';
2 | @use './elevation';
3 | @use './color';
4 | @use './typography';
5 | @use './radius';
6 | @use './spacing';
7 | @use './display';
8 | @use './flex';
9 | @use './float';
10 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/tools/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | @use '../variables' as *;
2 |
3 | @mixin create_breakpoints(
4 | $screens: (
5 | 'sm',
6 | 'md',
7 | 'lg',
8 | 'xl',
9 | )
10 | ) {
11 | $_breakpoints: (
12 | 'sm': map-get($display-breakpoints, 'sm-and-up'),
13 | 'md': map-get($display-breakpoints, 'md-and-up'),
14 | 'lg': map-get($display-breakpoints, 'lg-and-up'),
15 | 'xl': map-get($display-breakpoints, 'xl-only'),
16 | );
17 | @each $screen_size in $screens {
18 | @if map-has-key($_breakpoints, $screen_size) {
19 | @media #{map-get($_breakpoints, $screen_size)} {
20 | @content ($screen_size);
21 | }
22 | }
23 | }
24 | }
25 |
26 | /*
27 | Usage:
28 | @include create_breakpoints() using ($screen_size) {
29 | .class-#{screen_size} {property: value}
30 | }
31 | */
32 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/src/styles/tools/_index.scss:
--------------------------------------------------------------------------------
1 | @import './functions';
2 | @import './colors';
3 | @import './elevation';
4 | @import './breakpoints';
5 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/svelte.config.js:
--------------------------------------------------------------------------------
1 | const sveltePreprocess = require('svelte-preprocess');
2 |
3 | module.exports = {
4 | preprocess: sveltePreprocess({
5 | scss: {
6 | includePaths: ['theme'],
7 | },
8 | }),
9 | };
10 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/tests/AppBar/slots_are_proper.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Title
7 | X
8 | AppBar Content
9 | Extension
10 |
11 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/tests/Breadcrumbs/custom_divider.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | -
8 |
9 |
--------------------------------------------------------------------------------
/packages/svelte-materialify/theme/_material-theme.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheComputerM/svelte-materialify/75be9ff464df88bf594a139bbcb815377f2692be/packages/svelte-materialify/theme/_material-theme.scss
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "cleanUrls": true,
4 | "trailingSlash": true
5 | }
6 |
--------------------------------------------------------------------------------