How to use @vaadin/vaadin-themable-mixin - 10 common examples
To help you get started, we’ve selected a few @vaadin/vaadin-themable-mixin examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
appreciated / vaadin-app-layout / app-layout-addon / src / main / resources / META-INF / resources / frontend / com / github / appreciated / app-layout / left / left-responsive-overlay.js View on Github 
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import {html, PolymerElement} from '@polymer/polymer';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin';
import {ElementMixin} from '@vaadin/vaadin-element-mixin';
import '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-icons/vaadin-icons.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/iron-media-query/iron-media-query.js';
class AppLayoutLeftResponsiveOverlay extends ElementMixin(ThemableMixin(PolymerElement)) {
static get template() {
return html`<style>
:root {
--paper-badge-background: var(--app-layout-badge-background);
--paper-badge-text-color: var(--app-layout-badge-font-color);
--primary-color: var(--app-layout-primary-color);
}
slot[name="app-bar-content"]::slotted(*) {
pointer-events: inherit;
}
app-header {
right: 0px !important;
/* Since the app-bar is visually behind the drawer its background needs to be darker */</style>~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
*/
import {registerStyles, css} from '@vaadin/vaadin-themable-mixin/register-styles.js';
registerStyles("vaadin-login-form-wrapper",
// language=css
css`
:host {
background: none;
}
[part="form"] {
padding: 0;
}
[part="form-title"] {
display: none;
}
`);* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
class ThemedComponent extends ThemableMixin(PolymerElement) {
static get template() {
return html`
<div>Just a div</div>
`;
}
static get is() { return 'themed-component' }
}
customElements.define(ThemedComponent.is, ThemedComponent);Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import {html, PolymerElement} from '@polymer/polymer';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin';
import {ElementMixin} from '@vaadin/vaadin-element-mixin';
import '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-icons/vaadin-icons.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/iron-media-query/iron-media-query.js';
class AppLayoutLeftResponsiveHybridOverlayNoAppBar extends ElementMixin(ThemableMixin(PolymerElement)) {
static get template() {
return html`<style>
:root {
--paper-badge-background: var(--app-layout-badge-background);
--paper-badge-text-color: var(--app-layout-badge-font-color);
--primary-color: var(--app-layout-primary-color);
}
slot[name="app-bar-content"]::slotted(*) {
pointer-events: inherit;
}
app-header {
right: 0px !important;
background: var(--app-layout-bar-background-base-color);
top: 0px;</style>Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import {html, PolymerElement} from '@polymer/polymer';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin';
import {ElementMixin} from '@vaadin/vaadin-element-mixin';
import '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-icons/vaadin-icons.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/iron-media-query/iron-media-query.js';
class AppLayoutLeftResponsiveSmall extends ElementMixin(ThemableMixin(PolymerElement)) {
static get template() {
return html`<style>
:root {
--paper-badge-background: var(--app-layout-badge-background);
--paper-badge-text-color: var(--app-layout-badge-font-color);
--primary-color: var(--app-layout-primary-color);
--app-layout-bar-padding: var(--app-layout-bar-padding-small);
}
slot[name="app-bar-content"]::slotted(*) {
pointer-events: inherit;
}
app-header {
right: 0px !important;</style>The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import {html, PolymerElement} from '@polymer/polymer';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin';
import {ElementMixin} from '@vaadin/vaadin-element-mixin';
import '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-icons/vaadin-icons.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
class AppLayoutLeftResponsiveOverlayNoAppBar extends ElementMixin(ThemableMixin(PolymerElement)) {
static get template() {
return html`<style>
:root {
--paper-badge-background: var(--app-layout-badge-background);
--paper-badge-text-color: var(--app-layout-badge-font-color);
--primary-color: var(--app-layout-primary-color);
}
slot[name="app-bar-content"]::slotted(*) {
pointer-events: inherit;
}
app-header {
right: 0px !important;
background: var(--app-layout-bar-background-base-color);</style>The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import {html, PolymerElement} from '@polymer/polymer';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin';
import {ElementMixin} from '@vaadin/vaadin-element-mixin';
import '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-icons/vaadin-icons.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
class AppLayoutLeft extends ElementMixin(ThemableMixin(PolymerElement)) {
static get template() {
return html`
<style>
:root {
--paper-badge-background: var(--app-layout-badge-background);
--paper-badge-text-color: var(--app-layout-badge-font-color);
--primary-color: var(--app-layout-primary-color);
--app-drawer-scrim-background: rgba(0, 0, 0, 0);
}
slot[name="app-bar-content"]::slotted(*) {
pointer-events: inherit;
}
#content {</style>The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import {html, PolymerElement} from '@polymer/polymer';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin';
import {ElementMixin} from '@vaadin/vaadin-element-mixin';
import '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-icons/vaadin-icons.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
class AppLayoutLeftOverlay extends ElementMixin(ThemableMixin(PolymerElement)) {
static get is() {
return 'app-layout-left-overlay'
}
static get template() {
return html`
<style>
:root {
--paper-badge-background: var(--app-layout-badge-background);
--paper-badge-text-color: var(--app-layout-badge-font-color);
--primary-color: var(--app-layout-primary-color);
}
slot[name="app-bar-content"]::slotted(*) {
pointer-events: inherit;
}</style>Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import {html, PolymerElement} from '@polymer/polymer';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin';
import {ElementMixin} from '@vaadin/vaadin-element-mixin';
import '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-icons/vaadin-icons.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/iron-media-query/iron-media-query.js';
class AppLayoutLeftResponsiveHybrid extends ElementMixin(ThemableMixin(PolymerElement)) {
static get template() {
return html`<style>
:root {
--paper-badge-background: var(--app-layout-badge-background);
--paper-badge-text-color: var(--app-layout-badge-font-color);
--primary-color: var(--app-layout-primary-color);
}
slot[name="app-bar-content"]::slotted(*) {
pointer-events: inherit;
}
app-header {
right: 0px !important;
background: var(--app-layout-bar-background-base-color);</style>Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import {html, PolymerElement} from '@polymer/polymer';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin';
import {ElementMixin} from '@vaadin/vaadin-element-mixin';
import '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-icons/vaadin-icons.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/iron-media-query/iron-media-query.js';
class AppLayoutLeftResponsive extends ElementMixin(ThemableMixin(PolymerElement)) {
static get template() {
return html`<style>
:root {
--paper-badge-background: var(--app-layout-badge-background);
--paper-badge-text-color: var(--app-layout-badge-font-color);
--primary-color: var(--app-layout-primary-color);
}
slot[name="app-bar-content"]::slotted(*) {
pointer-events: inherit;
}
app-header {
right: 0px !important;
background: var(--app-layout-bar-background-base-color);
top: 0px;</style>@vaadin/vaadin-themable-mixin
vaadin-themable-mixin
