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

add styles for input inside toolbar #395

Browse source
This commit is contained in:
Marcos Moura 2017-02-07 12:11:32 -02:00
parent 27b2e3a52a
commit f3ad8bc09e
4 changed files with 69 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/src/pages/components/Toolbar.vue
View file

@ -90,7 +90,11 @@
<md-icon>menu</md-icon>
</md-button>
<h2 class="md-title" style="flex: 1">Default</h2>
<h2 class="md-title">Default</h2>
<md-input-container style="flex: 1">
<md-input placeholder="Search..." />
</md-input-container>
<md-button class="md-icon-button">
<md-icon>favorite</md-icon>

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

@ -1,5 +1,5 @@
.THEME_NAME {
@mixin card-spec($main-color, $second-color, $second-color-hue) {
@mixin card-spec($main-color, $second-color, $second-color-hue, $third-color) {
background-color: $main-color;
color: $second-color;
@ -29,17 +29,21 @@
&:after {
background-color: $second-color;
}
}
input,
textarea {
color: $second-color;
text-shadow: 0 0 0 $second-color;
}
input,
textarea {
color: $second-color;
text-shadow: 0 0 0 $second-color;
label,
.md-icon:not(.md-icon-delete) {
color: $second-color;
&::-webkit-input-placeholder {
color: $third-color;
}
}
label,
.md-icon:not(.md-icon-delete) {
color: $second-color;
}
}
}
@ -47,15 +51,15 @@
background-color: #{'BACKGROUND-COLOR'};
&.md-primary {
@include card-spec(#{'PRIMARY-COLOR'}, #{'PRIMARY-CONTRAST'}, #{'PRIMARY-CONTRAST-0.87'})
@include card-spec(#{'PRIMARY-COLOR'}, #{'PRIMARY-CONTRAST'}, #{'PRIMARY-CONTRAST-0.87'}, #{'PRIMARY-CONTRAST-0.54'})
}
&.md-accent {
@include card-spec(#{'ACCENT-COLOR'}, #{'ACCENT-CONTRAST'}, #{'ACCENT-CONTRAST-0.87'})
@include card-spec(#{'ACCENT-COLOR'}, #{'ACCENT-CONTRAST'}, #{'ACCENT-CONTRAST-0.87'}, #{'ACCENT-CONTRAST-0.54'})
}
&.md-warn {
@include card-spec(#{'WARN-COLOR'}, #{'WARN-CONTRAST'}, #{'WARN-CONTRAST-0.87'})
@include card-spec(#{'WARN-COLOR'}, #{'WARN-CONTRAST'}, #{'WARN-CONTRAST-0.87'}, #{'WARN-CONTRAST-0.54'})
}
.md-card-header,

4
src/components/mdToolbar/mdToolbar.scss
View file

@ -118,6 +118,10 @@
&:first-child {
margin-left: 8px;
}
+ .md-input-container {
margin-left: 24px;
}
}
.md-list {

51
src/components/mdToolbar/mdToolbar.theme
View file

@ -1,21 +1,56 @@
.THEME_NAME {
@mixin toolbar-spec($main-color, $second-color, $third-color) {
background-color: $main-color;
color: $second-color;
.md-input-container {
&.md-input-focused {
input,
textarea {
color: $second-color;
text-shadow: 0 0 0 $second-color;
}
label,
.md-icon:not(.md-icon-delete) {
color: $second-color;
}
}
&:after {
background-color: $second-color;
}
input,
textarea {
color: $second-color;
text-shadow: 0 0 0 $second-color;
&::-webkit-input-placeholder {
color: $third-color;
}
}
label,
.md-icon:not(.md-icon-delete) {
color: $second-color;
}
}
}
&.md-toolbar {
background-color: #{'PRIMARY-COLOR'};
color: #{'PRIMARY-CONTRAST'};
@include toolbar-spec(#{'PRIMARY-COLOR'}, #{'PRIMARY-CONTRAST'}, #{'PRIMARY-CONTRAST-0.54'})
&.md-accent {
background-color: #{'ACCENT-COLOR'};
color: #{'ACCENT-CONTRAST'};
@include toolbar-spec(#{'ACCENT-COLOR'}, #{'ACCENT-CONTRAST'}, #{'ACCENT-CONTRAST-0.54'})
}
&.md-warn {
background-color: #{'WARN-COLOR'};
color: #{'WARN-CONTRAST'};
@include toolbar-spec(#{'WARN-COLOR'}, #{'WARN-CONTRAST'}, #{'WARN-CONTRAST-0.54'})
}
&.md-transparent {
background-color: transparent;
color: #{'BACKGROUND-CONTRAST'};
@include toolbar-spec(transparent, #{'BACKGROUND-CONTRAST'}, #{'BACKGROUND-CONTRAST-0.54'})
}
}
}