From 6a95f146eab141854c4159e1d69db564a59925ea Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 23 Dec 2016 16:35:08 -0200 Subject: [PATCH] fix grey/white theme colors #233 --- docs/src/pages/components/Icon.vue | 24 +++++++++---------- docs/src/pages/components/InkRipple.vue | 2 +- docs/src/routes.js | 5 ---- src/components/mdButton/mdButton.theme | 10 ++++---- .../mdButtonToggle/mdButtonToggle.theme | 20 ++++++++-------- src/components/mdCard/mdCard.theme | 4 ++-- src/components/mdDialog/mdDialog.theme | 2 +- src/components/mdList/mdList.theme | 4 ++-- src/components/mdMenu/mdMenu.theme | 2 +- src/components/mdSidenav/mdSidenav.theme | 2 +- src/components/mdTable/mdTable.theme | 6 ++--- src/components/mdTooltip/mdTooltip.vue | 13 ++++------ src/core/components/mdTheme/index.js | 2 +- src/core/stylesheets/core.theme | 2 +- 14 files changed, 44 insertions(+), 54 deletions(-) diff --git a/docs/src/pages/components/Icon.vue b/docs/src/pages/components/Icon.vue index ac38f4a..608c0cc 100644 --- a/docs/src/pages/components/Icon.vue +++ b/docs/src/pages/components/Icon.vue @@ -23,17 +23,17 @@
home - home - home - home + menu + people + access_time
<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>
@@ -41,17 +41,17 @@
home - home - home - home + menu + people + access_time
<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>
diff --git a/docs/src/pages/components/InkRipple.vue b/docs/src/pages/components/InkRipple.vue index f99c1f5..6953270 100644 --- a/docs/src/pages/components/InkRipple.vue +++ b/docs/src/pages/components/InkRipple.vue @@ -28,7 +28,7 @@
- +
diff --git a/docs/src/routes.js b/docs/src/routes.js index 97a0f35..1382410 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -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', diff --git a/src/components/mdButton/mdButton.theme b/src/components/mdButton/mdButton.theme index 5c22515..2b0652b 100644 --- a/src/components/mdButton/mdButton.theme +++ b/src/components/mdButton/mdButton.theme @@ -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'}; diff --git a/src/components/mdButtonToggle/mdButtonToggle.theme b/src/components/mdButtonToggle/mdButtonToggle.theme index 795b1b1..775cca4 100644 --- a/src/components/mdButtonToggle/mdButtonToggle.theme +++ b/src/components/mdButtonToggle/mdButtonToggle.theme @@ -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'}; } } diff --git a/src/components/mdCard/mdCard.theme b/src/components/mdCard/mdCard.theme index 8deede5..4795ec4 100644 --- a/src/components/mdCard/mdCard.theme +++ b/src/components/mdCard/mdCard.theme @@ -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'}; } } } diff --git a/src/components/mdDialog/mdDialog.theme b/src/components/mdDialog/mdDialog.theme index e30a741..82770aa 100644 --- a/src/components/mdDialog/mdDialog.theme +++ b/src/components/mdDialog/mdDialog.theme @@ -1,6 +1,6 @@ .THEME_NAME { &.md-dialog-container .md-dialog { - background-color: #{'BACKGROUND-COLOR-A100'}; + background-color: #{'BACKGROUND-COLOR'}; color: #{'BACKGROUND-CONTRAST'}; } } diff --git a/src/components/mdList/mdList.theme b/src/components/mdList/mdList.theme index a03f35c..593fb0c 100644 --- a/src/components/mdList/mdList.theme +++ b/src/components/mdList/mdList.theme @@ -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 { diff --git a/src/components/mdMenu/mdMenu.theme b/src/components/mdMenu/mdMenu.theme index 50978c4..05d709a 100644 --- a/src/components/mdMenu/mdMenu.theme +++ b/src/components/mdMenu/mdMenu.theme @@ -1,6 +1,6 @@ .THEME_NAME { &.md-menu-content { - background-color: #{'BACKGROUND-COLOR-A100'}; + background-color: #{'BACKGROUND-COLOR'}; color: #{'BACKGROUND-CONTRAST'}; .md-menu-item { diff --git a/src/components/mdSidenav/mdSidenav.theme b/src/components/mdSidenav/mdSidenav.theme index 9c75afd..ac88abf 100644 --- a/src/components/mdSidenav/mdSidenav.theme +++ b/src/components/mdSidenav/mdSidenav.theme @@ -1,7 +1,7 @@ .THEME_NAME { &.md-sidenav { .md-sidenav-content { - background-color: #{'BACKGROUND-COLOR-A100'}; + background-color: #{'BACKGROUND-COLOR'}; color: #{'BACKGROUND-CONTRAST'}; } } diff --git a/src/components/mdTable/mdTable.theme b/src/components/mdTable/mdTable.theme index 2f6ec71..296560b 100644 --- a/src/components/mdTable/mdTable.theme +++ b/src/components/mdTable/mdTable.theme @@ -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'}; diff --git a/src/components/mdTooltip/mdTooltip.vue b/src/components/mdTooltip/mdTooltip.vue index 5a0b1bd..316b94c 100644 --- a/src/components/mdTooltip/mdTooltip.vue +++ b/src/components/mdTooltip/mdTooltip.vue @@ -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(); diff --git a/src/core/components/mdTheme/index.js b/src/core/components/mdTheme/index.js index 041488b..543f6a0 100644 --- a/src/core/components/mdTheme/index.js +++ b/src/core/components/mdTheme/index.js @@ -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 = { diff --git a/src/core/stylesheets/core.theme b/src/core/stylesheets/core.theme index 23c5d89..3f3b6de 100644 --- a/src/core/stylesheets/core.theme +++ b/src/core/stylesheets/core.theme @@ -14,7 +14,7 @@ } body.THEME_NAME { - background-color: #{'BACKGROUND-COLOR-A100'}; + background-color: #{'BACKGROUND-COLOR'}; color: #{'BACKGROUND-CONTRAST-0.87'}; }