Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-05 22:14:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix grey/white theme colors #233

Browse source
This commit is contained in:
Marcos Moura 2016-12-23 16:35:08 -02:00
parent 41c49aeabb
commit 64a75ae4f4
14 changed files with 44 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
docs/src/pages/components/Icon.vue
View file

@ -23,17 +23,17 @@
<example-box card-title="Default">
<div slot="demo">
<md-icon>home</md-icon>
<md-icon class="md-primary">home</md-icon>
<md-icon class="md-accent">home</md-icon>
<md-icon class="md-warn">home</md-icon>
<md-icon class="md-primary">menu</md-icon>
<md-icon class="md-accent">people</md-icon>
<md-icon class="md-warn">access_time</md-icon>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-icon&gt;home&lt;/md-icon&gt;
&lt;md-icon class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon class=&quot;md-accent&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon class=&quot;md-warn&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon class=&quot;md-primary&quot;&gt;menu&lt;/md-icon&gt;
&lt;md-icon class=&quot;md-accent&quot;&gt;people&lt;/md-icon&gt;
&lt;md-icon class=&quot;md-warn&quot;&gt;access_time&lt;/md-icon&gt;
</code-block>
</div>
</example-box>
@ -41,17 +41,17 @@
<example-box card-title="Themes">
<div slot="demo">
<md-icon md-theme="light-blue" class="md-primary">home</md-icon>
<md-icon md-theme="green" class="md-primary">home</md-icon>
<md-icon md-theme="brown" class="md-primary">home</md-icon>
<md-icon md-theme="orange" class="md-primary">home</md-icon>
<md-icon md-theme="green" class="md-primary">menu</md-icon>
<md-icon md-theme="brown" class="md-primary">people</md-icon>
<md-icon md-theme="orange" class="md-primary">access_time</md-icon>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-icon md-theme=&quot;light-blue&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;green&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;brown&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;orange&quot; class=&quot;md-primary&quot;&gt;home&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;green&quot; class=&quot;md-primary&quot;&gt;menu&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;brown&quot; class=&quot;md-primary&quot;&gt;people&lt;/md-icon&gt;
&lt;md-icon md-theme=&quot;orange&quot; class=&quot;md-primary&quot;&gt;access_time&lt;/md-icon&gt;
</code-block>
</div>
</example-box>

2
docs/src/pages/components/InkRipple.vue
View file

@ -28,7 +28,7 @@
</div>
<div slot="example">
<example-box card-title="As a component">
<example-box card-title="Default">
<div slot="demo">
<div class="has-ripple">
<md-ink-ripple></md-ink-ripple>

5
docs/src/routes.js
View file

@ -153,11 +153,6 @@ const components = [
name: 'components:spinner',
component: Spinner
},
{
path: '/components/switch',
name: 'components:switch',
component: Switch
},
{
path: '/components/subheader',
name: 'components:subheader',

10
src/components/mdButton/mdButton.theme
View file

@ -2,8 +2,8 @@
&.md-button:not([disabled]) {
&.md-raised {
&:not(.md-icon-button) {
color: #{'BACKGROUND-COLOR-900'};
background-color: #{'BACKGROUND-COLOR-50'};
color: #{'BACKGROUND-CONTRAST'};
background-color: #{'BACKGROUND-COLOR'};
&:hover {
background-color: #{'BACKGROUND-COLOR-200'};
@ -11,7 +11,7 @@
}
&.md-icon-button:not(.md-raised) {
color: #{'BACKGROUND-COLOR'};
color: #{'BACKGROUND-CONTRAST'};
}
}
@ -24,8 +24,8 @@
}
&.md-clean {
color: #{'BACKGROUND-COLOR-900'};
background-color: #{'BACKGROUND-COLOR-50'};
color: #{'BACKGROUND-CONTRAST'};
background-color: #{'BACKGROUND-COLOR'};
&:hover {
background-color: #{'BACKGROUND-COLOR-200'};

20
src/components/mdButtonToggle/mdButtonToggle.theme
View file

@ -12,15 +12,15 @@
}
.md-toggle {
color: #{'BACKGROUND-CONTRAST-600'};
background-color: #{'BACKGROUND-COLOR-500'};
color: #{'BACKGROUND-CONTRAST-0.54'};
background-color: #{'BACKGROUND-CONTRAST-0.26'};
&:hover:not([disabled]) {
background-color: #{'BACKGROUND-COLOR-600'};
background-color: #{'BACKGROUND-CONTRAST-0.38'};
}
+ .md-toggle:after {
background-color: #{'BACKGROUND-COLOR-600'};
background-color: #{'BACKGROUND-CONTRAST-0.12'};
}
}
@ -29,11 +29,11 @@
background-color: #{'PRIMARY-COLOR'};
&:hover:not([disabled]) {
background-color: #{'PRIMARY-COLOR-600'};
background-color: #{'PRIMARY-COLOR'};
}
+ .md-toggle:after {
background-color: #{'PRIMARY-COLOR-700'};
background-color: #{'PRIMARY-COLOR-600'};
}
}
@ -42,11 +42,11 @@
background-color: #{'ACCENT-COLOR'};
&:hover:not([disabled]) {
background-color: #{'ACCENT-COLOR-600'};
background-color: #{'ACCENT-COLOR'};
}
+ .md-toggle:after {
background-color: #{'ACCENT-COLOR-700'};
background-color: #{'ACCENT-COLOR-600'};
}
}
@ -55,11 +55,11 @@
background-color: #{'WARN-COLOR'};
&:hover:not([disabled]) {
background-color: #{'WARN-COLOR-600'};
background-color: #{'WARN-COLOR'};
}
+ .md-toggle:after {
background-color: #{'WARN-COLOR-700'};
background-color: #{'WARN-COLOR-600'};
}
}

4
src/components/mdCard/mdCard.theme
View file

@ -1,6 +1,6 @@
.THEME_NAME {
&.md-card {
background-color: #{'BACKGROUND-COLOR-A100'};
background-color: #{'BACKGROUND-COLOR'};
&.md-primary {
background-color: #{'PRIMARY-COLOR'};
@ -75,7 +75,7 @@
.md-card-expand {
.md-card-actions {
background-color: #{'BACKGROUND-COLOR-A100'};
background-color: #{'BACKGROUND-COLOR'};
}
}
}

2
src/components/mdDialog/mdDialog.theme
View file

@ -1,6 +1,6 @@
.THEME_NAME {
&.md-dialog-container .md-dialog {
background-color: #{'BACKGROUND-COLOR-A100'};
background-color: #{'BACKGROUND-COLOR'};
color: #{'BACKGROUND-CONTRAST'};
}
}

4
src/components/mdList/mdList.theme
View file

@ -1,6 +1,6 @@
.THEME_NAME {
&.md-list {
background-color: #{'BACKGROUND-COLOR-A100'};
background-color: #{'BACKGROUND-COLOR'};
color: #{'BACKGROUND-CONTRAST'};
&.md-transparent {
@ -50,7 +50,7 @@
.md-list-item-expand {
.md-list-item-container {
background-color: #{'BACKGROUND-COLOR-A100'};
background-color: #{'BACKGROUND-COLOR'};
&:hover,
&:focus {

2
src/components/mdMenu/mdMenu.theme
View file

@ -1,6 +1,6 @@
.THEME_NAME {
&.md-menu-content {
background-color: #{'BACKGROUND-COLOR-A100'};
background-color: #{'BACKGROUND-COLOR'};
color: #{'BACKGROUND-CONTRAST'};
.md-menu-item {

2
src/components/mdSidenav/mdSidenav.theme
View file

@ -1,7 +1,7 @@
.THEME_NAME {
&.md-sidenav {
.md-sidenav-content {
background-color: #{'BACKGROUND-COLOR-A100'};
background-color: #{'BACKGROUND-COLOR'};
color: #{'BACKGROUND-CONTRAST'};
}
}

6
src/components/mdTable/mdTable.theme
View file

@ -5,13 +5,13 @@
&.md-table-card {
.md-toolbar {
background-color: #{'BACKGROUND-COLOR-A100'};
color: #{'BACKGROUND-CONTRAST-A100'};
background-color: #{'BACKGROUND-COLOR'};
color: #{'BACKGROUND-CONTRAST'};
}
}
&.md-table-alternate-header {
background-color: #{'BACKGROUND-COLOR-A100'};
background-color: #{'BACKGROUND-COLOR'};
.md-toolbar {
background-color: #{'ACCENT-COLOR-A100-0.2'};

13
src/components/mdTooltip/mdTooltip.vue
View file

@ -59,15 +59,10 @@
},
methods: {
removeTooltips() {
const tooltips = [...this.rootElement.querySelectorAll('.md-tooltip')];
tooltips.forEach((tooltip) => {
if (tooltip.parentNode) {
tooltip.parentNode.removeChild(tooltip);
}
});
this.tooltipElement.removeEventListener(transitionEndEventName, this.removeTooltips);
if (this.tooltipElement.parentNode) {
this.tooltipElement.removeEventListener(transitionEndEventName, this.removeTooltips);
this.tooltipElement.parentNode.removeChild(this.tooltipElement);
}
},
calculateTooltipPosition() {
let position = this.parentElement.getBoundingClientRect();

2
src/core/components/mdTheme/index.js
View file

@ -6,7 +6,7 @@ const VALID_THEME_TYPE = ['primary', 'accent', 'background', 'warn', 'hue-1', 'h
const DEFAULT_THEME_COLORS = {
primary: 'indigo',
accent: 'pink',
background: 'grey',
background: 'white',
warn: 'deep-orange'
};
/*const DEFAULT_HUES = {

2
src/core/stylesheets/core.theme
View file

@ -14,7 +14,7 @@
}
body.THEME_NAME {
background-color: #{'BACKGROUND-COLOR-A100'};
background-color: #{'BACKGROUND-COLOR'};
color: #{'BACKGROUND-CONTRAST-0.87'};
}