@vaadin/vaadin-material-styles - npm Package Compare versions

package.json

		{
		"name": "@vaadin/vaadin-material-styles",
		"version": "21.0.0-beta1",
		"version": "22.0.0-alpha1",
		"description": "Vaadin Material is a complete theme for Vaadin components, inspired by Google’s Material Design guidelines.",
		@@ -34,3 +34,3 @@ "main": "all-imports.js",
		"@polymer/polymer": "^3.0.0",
		"@vaadin/vaadin-themable-mixin": "21.0.0-beta1"
		"@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1"
		},
		@@ -47,3 +47,3 @@ "devDependencies": {
		},
		"gitHead": "7d08834d03228105c2ea72213a385ddf35125f79"
		"gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
		}

typography.d.ts

		@@ -5,2 +5,4 @@ import { CSSResult } from 'lit';

		export const inputs: CSSResult;

		export const typography: CSSResult;

typography.js

		@@ -31,6 +31,2 @@ /**

		const $tpl = document.createElement('template');
		$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
		document.head.appendChild($tpl.content);

		const typography = css`
		@@ -119,6 +115,34 @@ body {
		`;

		registerStyles('', typography, { moduleId: 'material-typography' });

		export { font, typography };
		const inputs = css`
		/* Slotted input styles */
		input[slot='input']::placeholder,
		textarea[slot='textarea']::placeholder {
		color: var(--material-disabled-text-color);
		transition: opacity 0.175s 0.1s;
		opacity: 1;
		}

		[has-label]:not([focused]):not([invalid]):not([theme~='always-float-label']) > input[slot='input']::placeholder,
		[has-label]:not([focused]):not([invalid]):not([theme~='always-float-label']) > input[slot='textarea']::placeholder {
		opacity: 0;
		transition-delay: 0;
		}

		/* Hide the native arrow icons */
		input[slot='input']::-webkit-outer-spin-button,
		input[slot='input']::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
		}
		`;

		const $tpl = document.createElement('template');
		$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}${inputs.toString()}</style>`;
		document.head.appendChild($tpl.content);

		export { font, inputs, typography };

		/* Import Roboto from Google Fonts */
		@@ -125,0 +149,0 @@ if (!window.polymerSkipLoadingFontRoboto) {

version.js

New alerts