Skip to content

Commit ee6b3d4

Browse files
marcosmouramarcosmoura
committed
remove ripple directive and use the new component
1 parent 08ea631 commit ee6b3d4

File tree

13 files changed

+75
-162
lines changed

13 files changed

+75
-162
lines changed

‎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>

‎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

‎src/components/mdCheckbox/mdCheckbox.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<div class="md-checkbox" :class="[themeClass, classes]">
3-
<div class="md-checkbox-container" @click.stop="toggleCheck" v-md-ink-ripple="disabled" tabindex="0">
3+
<div class="md-checkbox-container" @click.stop="toggleCheck" tabindex="0">
44
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value" tabindex="-1">
5+
<md-ink-ripple :md-disabled="disabled" />
56
</div>
67

78
<label :for="id || name" class="md-checkbox-label" v-if="$slots.default">

‎src/components/mdRadio/mdRadio.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<div class="md-radio" :class="[themeClass, classes]">
3-
<div class="md-radio-container" @click="toggleCheck" v-md-ink-ripple="disabled">
3+
<div class="md-radio-container" @click="toggleCheck">
44
<input type="radio" :name="name" :id="id" :disabled="disabled" :value="value">
5+
<md-ink-ripple :md-disabled="disabled" />
56
</div>
67

78
<label :for="id || name" class="md-radio-label" v-if="$slots.default">

‎src/components/mdSwitch/mdSwitch.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
22
<div class="md-switch" :class="[themeClass, classes]">
33
<div class="md-switch-container" @click="toggle($event)">
4-
<div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled">
4+
<div class="md-switch-thumb" :style="styles">
55
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value">
66
<button :type="type" class="md-switch-holder"></button>
7+
<md-ink-ripple :md-disabled="disabled" />
78
</div>
89
</div>
910

0 commit comments

Comments
 (0)