mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-03 04:54:43 +00:00
start reactive themes
This commit is contained in:
Marcos Moura
parent
bf06ffce6b
commit
895b247cf0
54 changed files with 496 additions and 394 deletions
268
docs/src/App.vue
268
docs/src/App.vue
|
|
@ -1,172 +1,176 @@
|
|||
<template>
|
||||
<div class="container" v-md-theme="theme">
|
||||
<md-sidenav class="main-sidebar md-left md-fixed" ref="main-sidebar">
|
||||
<md-toolbar class="vue-material-logo" v-md-theme="'white'">
|
||||
<router-link exact to="/">
|
||||
<img :src="logo" alt="Vue">
|
||||
<span>Vue Material</span>
|
||||
</router-link>
|
||||
</md-toolbar>
|
||||
<md-theme :md-name="theme">
|
||||
<div class="container">
|
||||
<md-sidenav class="main-sidebar md-left md-fixed" ref="main-sidebar">
|
||||
<md-theme md-name="white">
|
||||
<md-toolbar class="vue-material-logo">
|
||||
<router-link exact to="/">
|
||||
<img :src="logo" alt="Vue">
|
||||
<span>Vue Material</span>
|
||||
</router-link>
|
||||
</md-toolbar>
|
||||
</md-theme>
|
||||
|
||||
<div class="main-sidebar-links">
|
||||
<md-list class="md-dense">
|
||||
<md-list-item>
|
||||
<router-link exact to="/">Introduction</router-link>
|
||||
</md-list-item>
|
||||
<div class="main-sidebar-links">
|
||||
<md-list class="md-dense">
|
||||
<md-list-item>
|
||||
<router-link exact to="/">Introduction</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/getting-started">Getting Started</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<router-link exact to="/getting-started">Getting Started</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/themes/configuration">Themes</router-link>
|
||||
<md-list-item>
|
||||
<router-link exact to="/themes/configuration">Themes</router-link>
|
||||
|
||||
<!-- <span>Themes</span>
|
||||
<!-- <span>Themes</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/themes/configuration">Configuration</router-link>
|
||||
</md-list-item>
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/themes/configuration">Configuration</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/themes/dynamic-themes">Dynamic Theme</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand> -->
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/themes/dynamic-themes">Dynamic Theme</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand> -->
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span>Components</span>
|
||||
<md-list-item>
|
||||
<span>Components</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/avatar">Avatar</router-link>
|
||||
</md-list-item>
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/avatar">Avatar</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/bottom-bar">Bottom Bar</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/bottom-bar">Bottom Bar</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/button">Button</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/button">Button</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/button-toggle">Button Toggle</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/button-toggle">Button Toggle</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/card">Card</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/card">Card</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/checkbox">Checkbox</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/checkbox">Checkbox</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/dialog">Dialog</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/dialog">Dialog</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/icon">Icon</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/icon">Icon</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/input">Input</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/input">Input</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/list">List</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/list">List</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/menu">Menu</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/menu">Menu</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/radio">Radio</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/radio">Radio</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/ink-ripple">Ink Ripple</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/ink-ripple">Ink Ripple</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/select">Select</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/select">Select</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/sidenav">Sidenav</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/sidenav">Sidenav</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/spinner">Spinner</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/spinner">Spinner</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/subheader">Subheader</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/subheader">Subheader</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/switch">Switch</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/switch">Switch</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/tabs">Tabs</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/tabs">Tabs</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/table">Table</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/table">Table</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/toolbar">Toolbar</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/toolbar">Toolbar</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/tooltip">Tooltip</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/tooltip">Tooltip</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/whiteframe">Whiteframe</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/whiteframe">Whiteframe</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/ui-elements/typography">Typography</router-link>
|
||||
<md-list-item>
|
||||
<router-link exact to="/ui-elements/typography">Typography</router-link>
|
||||
|
||||
<!-- <span>UI Elements</span>
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
</md-list-item>
|
||||
<!-- <span>UI Elements</span>
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/ui-elements/grid-system">Grid System</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand> -->
|
||||
</md-list-item>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/ui-elements/grid-system">Grid System</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand> -->
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/changelog">Changelog</router-link>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<router-link exact to="/changelog">Changelog</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/about">About</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</md-sidenav>
|
||||
<md-list-item>
|
||||
<router-link exact to="/about">About</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</md-sidenav>
|
||||
|
||||
<transition name="md-router">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</div>
|
||||
<transition name="md-router">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</div>
|
||||
</md-theme>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<div class="example-box">
|
||||
<md-card class="example-box-card">
|
||||
<md-toolbar class="md-dense" v-md-theme="'white'">
|
||||
<h3 class="md-title">{{ cardTitle }}</h3>
|
||||
</md-toolbar>
|
||||
<md-theme md-name="white">
|
||||
<md-toolbar class="md-dense">
|
||||
<h3 class="md-title">{{ cardTitle }}</h3>
|
||||
</md-toolbar>
|
||||
</md-theme>
|
||||
|
||||
<md-card-area>
|
||||
<md-tabs md-right :md-dynamic-height="false" class="md-transparent example-tabs">
|
||||
|
|
|
|||
|
|
@ -353,19 +353,19 @@
|
|||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<div v-md-theme="'green'">
|
||||
<md-theme md-name="green">
|
||||
<md-input-container>
|
||||
<label>Green - Input</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</md-theme>
|
||||
|
||||
<div v-md-theme="'cyan'">
|
||||
<md-theme md-name="red">
|
||||
<md-input-container>
|
||||
<label>Cyan - Textarea</label>
|
||||
<label>Red - Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</md-theme>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -176,6 +176,25 @@
|
|||
<md-option value="verdana">Verdana</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="apples">Apples</md-option>
|
||||
<md-option value="bananas">Bananas</md-option>
|
||||
<md-option value="peaches">Peaches</md-option>
|
||||
<md-option value="oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="carrots">Carrots</md-option>
|
||||
<md-option value="cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
<md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
|
||||
|
|
@ -227,6 +246,25 @@
|
|||
<md-option value="verdana">Verdana</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="apples">Apples</md-option>
|
||||
<md-option value="bananas">Bananas</md-option>
|
||||
<md-option value="peaches">Peaches</md-option>
|
||||
<md-option value="oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="carrots">Carrots</md-option>
|
||||
<md-option value="cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
<md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
|
||||
|
|
@ -252,25 +290,6 @@
|
|||
<example-box card-title="Multiple">
|
||||
<div class="multiple" slot="demo">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="apples">Apples</md-option>
|
||||
<md-option value="bananas">Bananas</md-option>
|
||||
<md-option value="peaches">Peaches</md-option>
|
||||
<md-option value="oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="carrots">Carrots</md-option>
|
||||
<md-option value="cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="users">Users</label>
|
||||
<md-select name="users" id="users" multiple v-model="users">
|
||||
|
|
@ -300,25 +319,6 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="apples">Apples</md-option>
|
||||
<md-option value="bananas">Bananas</md-option>
|
||||
<md-option value="peaches">Peaches</md-option>
|
||||
<md-option value="oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="carrots">Carrots</md-option>
|
||||
<md-option value="cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="users">Users</label>
|
||||
<md-select name="users" id="users" multiple v-model="users">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@
|
|||
<docs-component>
|
||||
<div slot="description">
|
||||
<p>Subheaders may be displayed inline with tiles or associated with content. They are typically related to filtering or sorting criteria.</p>
|
||||
<p>The following classes can be applied to change the color palette:</p>
|
||||
<ul class="md-body-2">
|
||||
<li><code>md-primary</code></li>
|
||||
<li><code>md-accent</code></li>
|
||||
<li><code>md-warn</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@
|
|||
|
||||
<example-box card-title="Fixed">
|
||||
<div slot="demo">
|
||||
<md-tabs :md-dynamic-height="false" md-fixed>
|
||||
<md-tabs :md-dynamic-height="false" md-fixed class="md-accent">
|
||||
<md-tab id="movies" md-label="Movies">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
|
||||
<example-box card-title="Centered with Text and Icon">
|
||||
<div slot="demo">
|
||||
<md-tabs :md-dynamic-height="false" md-centered>
|
||||
<md-tabs :md-dynamic-height="false" md-centered class="md-warn">
|
||||
<md-tab md-label="Movies" md-icon="ondemand_video">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
|
@ -273,7 +273,7 @@
|
|||
|
||||
<example-box card-title="Aligned to the right with only icons">
|
||||
<div slot="demo">
|
||||
<md-tabs :md-dynamic-height="false" md-right>
|
||||
<md-tabs :md-dynamic-height="false" md-right class="md-transparent">
|
||||
<md-tab md-icon="phone">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,26 @@
|
|||
<template>
|
||||
<page-content page-title="Themes - Dynamic Themes">
|
||||
|
||||
<md-theme :md-name="theme">
|
||||
<md-toolbar></md-toolbar>
|
||||
<md-input-container>
|
||||
<md-input v-model="theme"></md-input>
|
||||
</md-input-container>
|
||||
<md-button class="md-primary md-raised">Test</md-button>
|
||||
<md-radio class="md-primary" :md-value="true" v-model="radio">Test</md-radio>
|
||||
<md-checkbox class="md-primary" v-model="radio">Test</md-checkbox>
|
||||
</md-theme>
|
||||
</page-content>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
theme: 'red',
|
||||
radio: true
|
||||
})
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-avatar,
|
||||
&.md-avatar {
|
||||
&.md-primary {
|
||||
&.md-avatar-icon {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<template>
|
||||
<div class="md-avatar">
|
||||
<div class="md-avatar" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdAvatar.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-bottom-bar,
|
||||
&.md-bottom-bar {
|
||||
&.md-fixed {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-bottom-bar" :class="classes">
|
||||
<div class="md-bottom-bar" :class="[themeClass, classes]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,10 +7,13 @@
|
|||
<style lang="scss" src="./mdBottomBar.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdShift: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return this.mdShift ? 'md-shift' : 'md-fixed';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-button:not([disabled]),
|
||||
&.md-button:not([disabled]) {
|
||||
&.md-raised {
|
||||
&:not(.md-icon-button) {
|
||||
|
|
|
|||
|
|
@ -1,41 +1,40 @@
|
|||
<template>
|
||||
<button class="md-button" :class="[themeClass]" :type="type" :disabled="disabled" @click="$emit('click', $event)" v-if="!href">
|
||||
<md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
|
||||
<slot></slot>
|
||||
</button>
|
||||
|
||||
<a class="md-button" :class="[themeClass]" :href="href" :disabled="disabled" :target="target" :rel="newRel" @click="$emit('click', $event)" v-else>
|
||||
<md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
|
||||
<slot></slot>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdButton.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
href: String,
|
||||
type: String,
|
||||
target: String,
|
||||
rel: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
},
|
||||
disabled: Boolean
|
||||
},
|
||||
render(createElement) {
|
||||
let isDisabled = Boolean(this.disabled);
|
||||
let hasLink = Boolean(this.href);
|
||||
let tag = 'button';
|
||||
let options = {
|
||||
staticClass: 'md-button',
|
||||
attrs: {
|
||||
type: this.type || 'button',
|
||||
disabled: isDisabled
|
||||
},
|
||||
on: {
|
||||
click: ($event) => {
|
||||
this.$emit('click', $event);
|
||||
}
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
newRel() {
|
||||
if (this.target === '_blank') {
|
||||
return this.rel || 'noopener';
|
||||
}
|
||||
};
|
||||
let ripple = createElement('md-ink-ripple', {
|
||||
attrs: {
|
||||
mdDisabled: isDisabled
|
||||
}
|
||||
});
|
||||
|
||||
if (hasLink) {
|
||||
tag = 'a';
|
||||
options.attrs.href = this.href;
|
||||
delete options.attrs.type;
|
||||
return this.rel;
|
||||
}
|
||||
|
||||
return createElement(tag, options, [...this.$slots.default, ripple]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-button-toggle,
|
||||
&.md-button-toggle {
|
||||
.md-button {
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-button-group md-button-toggle">
|
||||
<div class="md-button-toggle" :class="[themeClass]" >
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,12 +7,15 @@
|
|||
<style lang="scss" src="./mdButtonToggle.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
let onClickButton;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdSingle: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
mounted() {
|
||||
this.$children.forEach((child) => {
|
||||
let element = child.$el;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,22 @@
|
|||
.THEME_NAME {
|
||||
.md-card,
|
||||
&.md-card {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
||||
&.md-primary {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
|
||||
.md-card-header,
|
||||
.md-card-actions {
|
||||
.md-icon-button {
|
||||
|
|
@ -37,20 +51,5 @@
|
|||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-primary {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-card" :class="classes">
|
||||
<div class="md-card" :class="[themeClass, classes]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,10 +7,13 @@
|
|||
<style lang="scss" src="./mdCard.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdWithHover: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-checkbox,
|
||||
&.md-checkbox {
|
||||
&.md-checked {
|
||||
.md-checkbox-container {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-checkbox" :class="classes">
|
||||
<div class="md-checkbox" :class="[themeClass, classes]">
|
||||
<div class="md-checkbox-container" @click.stop="toggleCheck" v-md-ink-ripple="disabled" tabindex="0">
|
||||
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value" tabindex="-1">
|
||||
</div>
|
||||
|
|
@ -13,6 +13,8 @@
|
|||
<style lang="scss" src="./mdCheckbox.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: String,
|
||||
|
|
@ -20,6 +22,7 @@
|
|||
id: String,
|
||||
disabled: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
checked: this.value
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.THEME_NAME {
|
||||
.md-dialog,
|
||||
&.md-dialog {
|
||||
&.md-dialog-container .md-dialog {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
color: #{'BACKGROUND-CONTRAST'};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-dialog-container" :class="classes" @keyup.esc="mdEscToClose && close()" tabindex="0">
|
||||
<div class="md-dialog-container" :class="[themeClass, classes]" @keyup.esc="mdEscToClose && close()" tabindex="0">
|
||||
<div class="md-dialog" ref="dialog" :style="styles" :class="dialogClasses">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
<style lang="scss" src="./mdDialog.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import transitionEndEventName from '../../core/utils/transitionEndEventName';
|
||||
|
||||
export default {
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
default: false
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
data: () => ({
|
||||
active: false,
|
||||
transitionOff: false,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-icon,
|
||||
&.md-icon {
|
||||
&.md-primary {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<template>
|
||||
<i class="md-icon material-icons">
|
||||
<i class="md-icon material-icons" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</i>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdIcon.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-input-container,
|
||||
&.md-input-container {
|
||||
&.md-input-invalid {
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-input-container" :class="classes">
|
||||
<div class="md-input-container" :class="[themeClass, classes]">
|
||||
<slot></slot>
|
||||
|
||||
<span class="md-count" v-if="enableCounter">{{ inputLength }} / {{ counterLength }}</span>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
<style lang="scss" src="./mdInputContainer.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import isArray from '../../core/utils/isArray';
|
||||
|
||||
export default {
|
||||
|
|
@ -20,6 +21,7 @@
|
|||
mdInline: Boolean,
|
||||
mdHasPassword: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-list,
|
||||
&.md-list {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
color: #{'BACKGROUND-CONTRAST'};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<template>
|
||||
<ul class="md-list">
|
||||
<ul class="md-list" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdList.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ $menu-base-width: 56px;
|
|||
position: absolute;
|
||||
z-index: 120;
|
||||
transform: scale(.9, .85) translateZ(0);
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: $material-shadow-2dp;
|
||||
opacity: 0;
|
||||
|
|
@ -26,7 +25,6 @@ $menu-base-width: 56px;
|
|||
margin .2s $swift-ease-in-timing-function,
|
||||
transform 0s .25s $swift-ease-in-timing-function;
|
||||
will-change: transform, opacity, width;
|
||||
color: rgba(#212121, .87);
|
||||
|
||||
&.md-direction-bottom-right {
|
||||
margin-top: -20px;
|
||||
|
|
@ -107,17 +105,8 @@ $menu-base-width: 56px;
|
|||
font-size: 16px;
|
||||
line-height: 1.2em;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.md-highlighted {
|
||||
.md-button:not([disabled]) {
|
||||
background-color: rgba(#000, .12);
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
color: rgba(#000, .38);
|
||||
}
|
||||
|
||||
.md-list-item-holder {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
.THEME_NAME {
|
||||
.md-menu,
|
||||
&.md-menu {
|
||||
&.md-menu-content {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
color: #{'BACKGROUND-CONTRAST'};
|
||||
|
||||
.md-menu-item {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.md-highlighted {
|
||||
.md-button:not([disabled]) {
|
||||
background-color: #{'BACKGROUND-CONTRAST-0.12'};
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: #{'BACKGROUND-CONTRAST-0.38'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="md-menu-content"
|
||||
:class="[themeClass]"
|
||||
@keydown.esc.prevent="close"
|
||||
@keydown.tab.prevent="close"
|
||||
@keydown.up.prevent="highlightItem('up')"
|
||||
|
|
@ -15,6 +16,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -23,6 +26,7 @@
|
|||
itemsAmount: 0
|
||||
};
|
||||
},
|
||||
mixins: [theme],
|
||||
methods: {
|
||||
close() {
|
||||
this.highlighted = false;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-radio,
|
||||
&.md-radio {
|
||||
.md-radio-container:after {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-radio" :class="classes">
|
||||
<div class="md-radio" :class="[themeClass, classes]">
|
||||
<div class="md-radio-container" @click="toggleCheck" v-md-ink-ripple="disabled">
|
||||
<input type="radio" :name="name" :id="id" :disabled="disabled" :value="value">
|
||||
</div>
|
||||
|
|
@ -13,6 +13,8 @@
|
|||
<style lang="scss" src="./mdRadio.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: String,
|
||||
|
|
@ -24,6 +26,7 @@
|
|||
},
|
||||
disabled: Boolean
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ $select-height: 32px;
|
|||
right: 0;
|
||||
transform: translateY(-50%) scaleY(0.45) scaleX(0.85);
|
||||
transition: $swift-linear;
|
||||
color: rgba(#000, .54);
|
||||
content: "\25BC";
|
||||
}
|
||||
|
||||
|
|
@ -47,10 +46,6 @@ $select-height: 32px;
|
|||
pointer-events: none;
|
||||
user-select: none;
|
||||
user-drag: none;
|
||||
|
||||
&:after {
|
||||
color: rgba(#000, .38);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
@ -80,47 +75,6 @@ $select-height: 32px;
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.md-select-menu {
|
||||
min-width: 156px;
|
||||
max-width: 100%;
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: stretch;
|
||||
align-content: stretch;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
z-index: 7;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: $material-shadow-2dp;
|
||||
opacity: 0;
|
||||
transform: scale3D(.85, .7, 1);
|
||||
transition: opacity .25s $swift-ease-in-timing-function,
|
||||
top .25s $swift-ease-in-timing-function,
|
||||
transform 0s .25s $swift-ease-in-timing-function;
|
||||
color: rgba(#212121, .87);
|
||||
|
||||
> * {
|
||||
opacity: 0;
|
||||
transition: $swift-ease-out;
|
||||
transition-duration: .25s;
|
||||
}
|
||||
}
|
||||
|
||||
.md-select-menu-container {
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: stretch;
|
||||
align-content: stretch;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.md-subheader {
|
||||
color: rgba(#757575, .87);
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
.THEME_NAME {
|
||||
.md-select-content,
|
||||
&.md-select {
|
||||
&:after {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
}
|
||||
|
||||
&:after {
|
||||
color: #{'BACKGROUND-CONTRAST-0.38'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-select-content {
|
||||
.md-menu-item {
|
||||
&.md-selected,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="md-select" :class="classes">
|
||||
<div class="md-select" :class="[themeClass, classes]">
|
||||
<md-menu :md-close-on-select="!multiple">
|
||||
<span class="md-select-value" md-menu-trigger ref="value">{{ selectedText || multipleText || placeholder }}</span>
|
||||
|
||||
<md-menu-content class="md-select-content" :class="contentClasses">
|
||||
<md-menu-content class="md-select-content" :class="[themeClass, contentClasses]">
|
||||
<slot></slot>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
<style lang="scss" src="./mdSelect.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import getClosestVueParent from '../../core/utils/getClosestVueParent';
|
||||
import isArray from '../../core/utils/isArray';
|
||||
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
placeholder: String,
|
||||
mdMenuClass: String
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
selectedValue: null,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-sidenav,
|
||||
&.md-sidenav {
|
||||
.md-sidenav-content {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-sidenav" :class="classes" @keyup.esc="close" tabindex="0">
|
||||
<div class="md-sidenav" :class="[themeClass, classes]" @keyup.esc="close" tabindex="0">
|
||||
<div class="md-sidenav-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -11,12 +11,15 @@
|
|||
<style lang="scss" src="./mdSidenav.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mdVisible: false
|
||||
};
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return this.mdVisible && 'md-active';
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
transition-duration: 1.8s;
|
||||
|
||||
.md-spinner-draw {
|
||||
animation: spinner-initial-rotate 1.79s $swift-ease-out-timing-function infinite;
|
||||
animation: spinner-initial-rotate 1.75s $swift-ease-out-timing-function infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-spinner,
|
||||
&.md-spinner {
|
||||
.md-spinner-path {
|
||||
stroke: #{'PRIMARY-COLOR'}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<transition name="md-spinner" appear>
|
||||
<div class="md-spinner" :class="classes" :style="styles">
|
||||
<div class="md-spinner" :class="[themeClass, classes]":style="styles">
|
||||
<svg class="md-spinner-draw" viewBox="25 25 50 50">
|
||||
<circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-dasharray="dashProgress">
|
||||
</svg>
|
||||
|
|
@ -11,6 +11,8 @@
|
|||
<style lang="scss" src="./mdSpinner.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdSize: {
|
||||
|
|
@ -23,6 +25,7 @@
|
|||
default: 0
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
.THEME_NAME {
|
||||
.md-subheader,
|
||||
&.md-subheader {
|
||||
|
||||
&.md-primary {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
<template>
|
||||
<li class="md-subheader" :class="[themeClass]" v-if="$parent.$options._componentTag === 'md-list'">
|
||||
<slot></slot>
|
||||
</li>
|
||||
|
||||
<div class="md-subheader" :class="[themeClass]" v-else>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdSubheader.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
render(createElement) {
|
||||
let tag = 'div';
|
||||
let options = {
|
||||
staticClass: 'md-subheader'
|
||||
};
|
||||
|
||||
if (this.$parent.$options._componentTag === 'md-list') {
|
||||
tag = 'li';
|
||||
}
|
||||
|
||||
return createElement(tag, options, this.$slots.default);
|
||||
}
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-switch,
|
||||
&.md-switch {
|
||||
&.md-checked {
|
||||
.md-switch-container {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-switch" :class="classes">
|
||||
<div class="md-switch" :class="[themeClass, classes]">
|
||||
<div class="md-switch-container" @click="toggleSwitch">
|
||||
<div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled">
|
||||
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value">
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
<style lang="scss" src="./mdSwitch.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
let fullThreshold = 75;
|
||||
let initialThreshold = '-1px';
|
||||
|
||||
|
|
@ -30,6 +32,7 @@
|
|||
default: 'button'
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
leftPos: initialThreshold,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
.THEME_NAME {
|
||||
.md-table,
|
||||
&.md-table {
|
||||
|
||||
}
|
||||
|
||||
.md-table-card,
|
||||
&.md-table-card {
|
||||
.md-toolbar {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
|
@ -12,7 +10,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.md-table-alternate-header,
|
||||
&.md-table-alternate-header {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-table">
|
||||
<div class="md-table" :class="[themeClass]">
|
||||
<table>
|
||||
<slot></slot>
|
||||
</table>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
<style lang="scss" src="./mdTable.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import getClosestVueParent from '../../core/utils/getClosestVueParent';
|
||||
|
||||
export default {
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
mdSortType: String,
|
||||
mdSort: String
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
sortType: this.mdSortType,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-table-alternate-header" :class="classes">
|
||||
<div class="md-table-alternate-header" :class="[themeClass, classes]">
|
||||
<md-toolbar>
|
||||
<div class="md-counter">
|
||||
<span ref="counter">{{ tableInstance.numberOfSelected }}</span>
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
import getClosestVueParent from '../../core/utils/getClosestVueParent';
|
||||
|
||||
export default {
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
default: 'selected'
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
data() {
|
||||
return {
|
||||
classes: {},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<template>
|
||||
<md-card class="md-table-card">
|
||||
<md-card class="md-table-card" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</md-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,95 +1,94 @@
|
|||
.THEME_NAME {
|
||||
.md-tabs,
|
||||
&.md-tabs {
|
||||
.md-tabs-navigation {
|
||||
> .md-tabs-navigation {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'PRIMARY-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'PRIMARY-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
&.md-transparent {
|
||||
.md-tabs-navigation {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'};
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
color: #{'PRIMARY-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'BACKGROUND-CONTRAST-0.26'}
|
||||
color: #{'PRIMARY-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-transparent {
|
||||
> .md-tabs-navigation {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'};
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'BACKGROUND-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
.md-tabs-navigation {
|
||||
> .md-tabs-navigation {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'ACCENT-CONTRAST-0.54'};
|
||||
.md-tab-header {
|
||||
color: #{'ACCENT-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'ACCENT-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'ACCENT-CONTRAST-0.26'}
|
||||
.md-tab-indicator {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
.md-tabs-navigation {
|
||||
> .md-tabs-navigation {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
color: #{'WARN-CONTRAST-0.54'};
|
||||
.md-tab-header {
|
||||
color: #{'WARN-CONTRAST-0.54'};
|
||||
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'WARN-CONTRAST'};
|
||||
&.md-active,
|
||||
&:focus {
|
||||
color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'WARN-CONTRAST-0.26'}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
color: #{'WARN-CONTRAST-0.26'}
|
||||
.md-tab-indicator {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md-tabs" :class="tabClasses">
|
||||
<div class="md-tabs" :class="[themeClass, tabClasses]">
|
||||
<md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
|
||||
<button
|
||||
v-for="header in tabList"
|
||||
|
|
@ -31,6 +31,8 @@
|
|||
<style lang="scss" src="./mdTabs.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdFixed: Boolean,
|
||||
|
|
@ -45,6 +47,7 @@
|
|||
default: 0
|
||||
}
|
||||
},
|
||||
mixins: [theme],
|
||||
data: () => ({
|
||||
tabList: {},
|
||||
activeTab: null,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.THEME_NAME {
|
||||
.md-toolbar,
|
||||
&.md-toolbar {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<template>
|
||||
<div class="md-toolbar">
|
||||
<div class="md-toolbar" :class="[themeClass]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdToolbar.scss"></style>
|
||||
|
||||
<script>
|
||||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -137,6 +137,27 @@ const registerDirective = (element, { value, oldValue }) => {
|
|||
|
||||
export default function install(Vue) {
|
||||
Vue.directive('mdTheme', registerDirective);
|
||||
Vue.component('md-theme', {
|
||||
props: {
|
||||
mdTag: String,
|
||||
mdName: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
name: 'md-theme'
|
||||
}),
|
||||
render(render) {
|
||||
if (this.mdTag || this.$slots.default.length > 1) {
|
||||
return render(this.mdTag || 'div', {
|
||||
staticClass: 'md-theme'
|
||||
}, this.$slots.default);
|
||||
}
|
||||
|
||||
return this.$slots.default[0];
|
||||
}
|
||||
});
|
||||
|
||||
Vue.material.theme = {
|
||||
register(name, spec) {
|
||||
|
|
|
|||
26
src/core/components/mdTheme/mixin.js
Normal file
26
src/core/components/mdTheme/mixin.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
export default {
|
||||
data: () => ({
|
||||
closestThemedParent: false
|
||||
}),
|
||||
methods: {
|
||||
getClosestThemedParent($parent) {
|
||||
if (!$parent || !$parent.$el || $parent._uid === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($parent.name === 'md-theme' && $parent.mdName) {
|
||||
return $parent;
|
||||
}
|
||||
|
||||
return this.getClosestThemedParent($parent.$parent);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
themeClass() {
|
||||
return 'md-theme-' + (this.closestThemedParent.mdName || 'default');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.closestThemedParent = this.getClosestThemedParent(this.$parent);
|
||||
}
|
||||
};
|
||||
Loading…
Reference in a new issue