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

Generate themes for different hues

Browse source
This commit is contained in:
Marcos Moura 2016-07-18 11:47:14 -03:00
parent b5e77c36bd
commit 06bc8aecac
4 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/mdBottomBar/mdBottomBar.scss
View file

@ -21,6 +21,7 @@
justify-content: space-between;
flex: 1;
position: relative;
cursor: pointer;
border: none;
background: transparent;
transition: $swift-ease-out;

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

@ -7,7 +7,7 @@
background-color: BACKGROUND-COLOR-50;
&:hover,
&:focus {
{
background-color: BACKGROUND-COLOR-200;
}
}
@ -21,8 +21,7 @@
color: ACCENT-CONTRAST;
background-color: ACCENT-COLOR;
&:hover,
&:focus {
&:hover {
background-color: ACCENT-COLOR-A700;
}
@ -30,8 +29,7 @@
color: BACKGROUND-COLOR-900;
background-color: BACKGROUND-COLOR-50;
&:hover,
&:focus {
&:hover {
background-color: BACKGROUND-COLOR-200;
}
}
@ -47,8 +45,7 @@
background-color: PRIMARY-COLOR;
color: PRIMARY-CONTRAST;
&:hover,
&:focus {
&:hover {
background-color: PRIMARY-COLOR-600;
}
}
@ -67,8 +64,7 @@
background-color: ACCENT-COLOR;
color: ACCENT-CONTRAST;
&:hover,
&:focus {
&:hover {
background-color: ACCENT-COLOR-A700;
}
}
@ -88,8 +84,7 @@
background-color: WARN-COLOR;
color: WARN-CONTRAST;
&:hover,
&:focus {
&:hover {
background-color: WARN-COLOR-600;
}
}

13
src/components/mdTheme/index.js
View file

@ -29,9 +29,20 @@ const createNewStyleElement = (style, name) => {
const parseStyle = (style, theme) => {
VALID_THEME_TYPE.forEach((type) => {
style = style.replace(RegExp('(' + type.toUpperCase() + ')-(COLOR|CONTRAST)-?(A?\\d\\.?\\d*)?', 'g'), (match, paletteType, colorType, hue) => {
let color = palette[theme[type]] || palette[DEFAULT_THEME_COLORS[type]];
let color;
let colorVariant = hue || 500;
if (theme[type]) {
if (typeof theme[type] === 'string') {
color = palette[theme[type]];
} else {
color = palette[theme[type].color] || palette[DEFAULT_THEME_COLORS[type]];
colorVariant = hue || theme[type].hue;
}
} else {
color = palette[DEFAULT_THEME_COLORS[type]];
}
if (colorType === 'COLOR') {
let isDefault = palette[theme[type]];

7
src/main.js
View file

@ -12,13 +12,8 @@ Vue.use(MdButton);
Vue.use(MdIcon);
Vue.use(MdBottomBar);
Vue.use(MdTheme, {
default: {
primary: 'blue',
accent: 'red'
},
'bottom-bar': {
primary: 'teal',
accent: 'red'
primary: 'teal'
}
});