Skip to content

Commit d080cdd

Browse files
marcosmouramarcosmoura
authored
Merge pull request #306 from marcosmoura/improvement/mdInkRipple
Improvement/md ink ripple
2 parents 8db86ef + a2511ac commit d080cdd

File tree

19 files changed

+273
-197
lines changed

19 files changed

+273
-197
lines changed

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@ You don't need to include any other library to work with vue-material. The focus
102102
* <a href="http://vuejs.org" target="_blank">vue</a>
103103
* <a href="http://www.jacklmoore.com/autosize/" target="_blank">autosize</a>
104104
* <a href="https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill" target="_blank">element.scrollintoviewifneeded-polyfill</a>
105-
* <a href="https://github.com/lazd/scopedQuerySelectorShim" target="_blank">scopedQuerySelectorShim</a>
106105

107106
## License
108107
MIT

‎docs/src/pages/About.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,6 @@
5555
<li>
5656
<a href="https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill" rel="noopener" target="_blank">element.scrollintoviewifneeded-polyfill</a>
5757
</li>
58-
59-
<li>
60-
<a href="https://github.com/lazd/scopedQuerySelectorShim" rel="noopener" target="_blank">scopedQuerySelectorShim</a>
61-
</li>
6258
</ul>
6359
</section>
6460

‎docs/src/pages/components/BottomBar.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@
6060
<md-table-cell><code>String</code></md-table-cell>
6161
<md-table-cell>Create a anchor on the item - In this case the generated tag will be <code>&lt;a&gt;</code>.</md-table-cell>
6262
</md-table-row>
63+
64+
<md-table-row>
65+
<md-table-cell>disabled</md-table-cell>
66+
<md-table-cell><code>Boolean</code></md-table-cell>
67+
<md-table-cell>Disable the item and prevent his actions. Default <code>false</code></md-table-cell>
68+
</md-table-row>
6369
</md-table-body>
6470
</md-table>
6571
</api-table>

‎docs/src/pages/components/Card.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -362,8 +362,10 @@
362362
</md-card>
363363

364364
<md-card md-with-hover>
365-
<md-card-media v-md-ink-ripple>
365+
<md-card-media>
366366
<img src="assets/card-image-1.jpg" alt="People">
367+
368+
<md-ink-ripple />
367369
</md-card-media>
368370

369371
<md-card-actions>
@@ -425,8 +427,10 @@
425427
&lt;/md-card&gt;
426428

427429
&lt;md-card md-with-hover&gt;
428-
&lt;md-card-media v-md-ink-ripple&gt;
430+
&lt;md-card-media&gt;
429431
&lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
432+
433+
&lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
430434
&lt;/md-card-media&gt;
431435

432436
&lt;md-card-actions&gt;

‎docs/src/pages/components/Checkbox.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,20 @@
8989

9090
<example-box card-title="Themes">
9191
<div slot="demo">
92-
<md-checkbox md-name="orange" id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
93-
<md-checkbox md-name="green" id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
94-
<md-checkbox md-name="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
95-
<md-checkbox md-name="indigo" id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
96-
<md-checkbox md-name="brown" id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
92+
<md-checkbox md-theme="orange" id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
93+
<md-checkbox md-theme="green" id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
94+
<md-checkbox md-theme="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
95+
<md-checkbox md-theme="indigo" id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
96+
<md-checkbox md-theme="brown" id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
9797
</div>
9898

9999
<div slot="code">
100100
<code-block lang="xml">
101-
&lt;md-checkbox md-name=&quot;orange&quot; id=&quot;my-test5&quot; name=&quot;my-test5&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Orange&lt;/md-checkbox&gt;
102-
&lt;md-checkbox md-name=&quot;green&quot; id=&quot;my-test6&quot; name=&quot;my-test6&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Green&lt;/md-checkbox&gt;
103-
&lt;md-checkbox md-name=&quot;light-blue&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Light Blue&lt;/md-checkbox&gt;
104-
&lt;md-checkbox md-name=&quot;indigo&quot; id=&quot;my-test8&quot; name=&quot;my-test8&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Indigo&lt;/md-checkbox&gt;
105-
&lt;md-checkbox md-name=&quot;brown&quot; id=&quot;my-test9&quot; name=&quot;my-test9&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot; disabled&gt;Primary Brown Disabled&lt;/md-checkbox&gt;
101+
&lt;md-checkbox md-theme=&quot;orange&quot; id=&quot;my-test5&quot; name=&quot;my-test5&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Orange&lt;/md-checkbox&gt;
102+
&lt;md-checkbox md-theme=&quot;green&quot; id=&quot;my-test6&quot; name=&quot;my-test6&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Green&lt;/md-checkbox&gt;
103+
&lt;md-checkbox md-theme=&quot;light-blue&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Light Blue&lt;/md-checkbox&gt;
104+
&lt;md-checkbox md-theme=&quot;indigo&quot; id=&quot;my-test8&quot; name=&quot;my-test8&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Indigo&lt;/md-checkbox&gt;
105+
&lt;md-checkbox md-theme=&quot;brown&quot; id=&quot;my-test9&quot; name=&quot;my-test9&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot; disabled&gt;Primary Brown Disabled&lt;/md-checkbox&gt;
106106
</code-block>
107107
</div>
108108
</example-box>

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@
7777
"ora": "^0.4.0",
7878
"raw-loader": "^0.5.1",
7979
"sass-loader": "^4.1.1",
80-
"scopedQuerySelectorShim": "lazd/scopedQuerySelectorShim",
8180
"url-loader": "^0.5.7",
8281
"vue-hot-reload-api": "^2.0.7",
8382
"vue-html-loader": "^1.2.3",

‎src/components/mdBottomBar/mdBottomBar.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@
4545
}
4646
}
4747

48+
&[disabled] {
49+
opacity: .38;
50+
}
51+
4852
.md-bottom-bar.md-shift & {
4953
min-width: 56px;
5054
max-width: 96px;

‎src/components/mdBottomBar/mdBottomBar.theme‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
.md-bottom-bar-item {
77
color: #{'BACKGROUND-CONTRAST-0.54'};
88

9-
&:hover:not(.md-active) {
9+
&:hover:not([disabled]):not(.md-active) {
1010
color: #{'BACKGROUND-CONTRAST-0.87'};
1111
}
1212

@@ -47,7 +47,7 @@
4747
.md-bottom-bar-item {
4848
color: #{'PRIMARY-CONTRAST-0.54'};
4949

50-
&:hover:not(.md-active) {
50+
&:hover:not([disabled]):not(.md-active) {
5151
color: #{'PRIMARY-CONTRAST-0.87'};
5252
}
5353

@@ -62,7 +62,7 @@
6262
.md-bottom-bar-item {
6363
color: #{'ACCENT-CONTRAST-0.54'};
6464

65-
&:hover:not(.md-active) {
65+
&:hover:not([disabled]):not(.md-active) {
6666
color: #{'ACCENT-CONTRAST-0.87'};
6767
}
6868

@@ -78,7 +78,7 @@
7878
.md-bottom-bar-item {
7979
color: #{'WARN-CONTRAST-0.54'};
8080

81-
&:hover:not(.md-active) {
81+
&:hover:not([disabled]):not(.md-active) {
8282
color: #{'WARN-CONTRAST-0.87'};
8383
}
8484

@@ -94,7 +94,7 @@
9494
.md-bottom-bar-item {
9595
color: #{'BACKGROUND-CONTRAST-0.54'};
9696

97-
&:hover:not(.md-active) {
97+
&:hover:not([disabled]):not(.md-active) {
9898
color: #{'BACKGROUND-CONTRAST-0.87'};
9999
}
100100

‎src/components/mdBottomBar/mdBottomBarItem.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
<template>
2-
<a :href="href" class="md-bottom-bar-item" :class="classes" v-md-ink-ripple @click="setActive" v-if="href">
2+
<a :href="href" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-if="href">
33
<md-icon>{{ mdIcon }}</md-icon>
44

5+
<md-ink-ripple :md-disabled="disabled" />
6+
57
<span class="md-text">
68
<slot></slot>
79
</span>
810
</a>
911

10-
<button type="button" class="md-bottom-bar-item" :class="classes" v-md-ink-ripple @click="setActive" v-else>
12+
<button type="button" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-else>
1113
<md-icon>{{ mdIcon }}</md-icon>
1214

15+
<md-ink-ripple :md-disabled="disabled" />
16+
1317
<span class="md-text">
1418
<slot></slot>
1519
</span>
@@ -21,6 +25,7 @@
2125
props: {
2226
mdIcon: String,
2327
mdActive: Boolean,
28+
disabled: String,
2429
href: String
2530
},
2631
data() {

‎src/components/mdCheckbox/mdCheckbox.theme‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,25 @@
99
border-color: #{'ACCENT-CONTRAST'};
1010
}
1111
}
12+
}
1213

13-
.md-ink-ripple {
14-
color: #{'ACCENT-COLOR'};
15-
}
14+
.md-ink-ripple {
15+
color: #{'ACCENT-COLOR'};
16+
}
1617

17-
.md-ripple {
18-
opacity: .38;
19-
}
18+
.md-ripple {
19+
opacity: .26;
2020
}
2121

22-
&.md-primary.md-checked {
23-
.md-checkbox-container {
24-
background-color: #{'PRIMARY-COLOR'};
25-
border-color: #{'PRIMARY-COLOR'};
22+
&.md-primary {
23+
&.md-checked {
24+
.md-checkbox-container {
25+
background-color: #{'PRIMARY-COLOR'};
26+
border-color: #{'PRIMARY-COLOR'};
2627

27-
&:after {
28-
border-color: #{'PRIMARY-CONTRAST'};
28+
&:after {
29+
border-color: #{'PRIMARY-CONTRAST'};
30+
}
2931
}
3032
}
3133

@@ -34,13 +36,15 @@
3436
}
3537
}
3638

37-
&.md-warn.md-checked {
38-
.md-checkbox-container {
39-
background-color: #{'WARN-COLOR'};
40-
border-color: #{'WARN-COLOR'};
39+
&.md-warn {
40+
&.md-checked {
41+
.md-checkbox-container {
42+
background-color: #{'WARN-COLOR'};
43+
border-color: #{'WARN-COLOR'};
4144

42-
&:after {
43-
border-color: #{'WARN-CONTRAST'};
45+
&:after {
46+
border-color: #{'WARN-CONTRAST'};
47+
}
4448
}
4549
}
4650

0 commit comments

Comments
 (0)