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

Ditch md-icon in favor of bordered element

Browse source
This commit is contained in:
Marcos Moura 2016-08-08 20:21:19 -03:00
parent 1f8d2b1a98
commit 7dd8015fb0
3 changed files with 40 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/mdCheckbox/mdCheckbox.scss
View file

@ -18,6 +18,21 @@ $checkbox-ripple-size: 48px;
border: 2px solid rgba(#000, .54);
transition: $swift-ease-out;
&:after {
width: 6px;
height: 13px;
position: absolute;
top: 0;
left: 5px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
opacity: 0;
transform: rotate(45deg) scale3D(.2, .2, 1);
transition: $swift-ease-in;
content: " ";
}
input {
position: absolute;
left: -999em;
@ -46,29 +61,14 @@ $checkbox-ripple-size: 48px;
height: $checkbox-size;
line-height: $checkbox-size;
}
.md-icon {
width: $checkbox-size;
min-width: 0;
height: $checkbox-size;
min-height: 0;
position: absolute;
top: 4px;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transform: scale3D(.3, .3, 1);
color: #fff;
font-size: $checkbox-size - 4px;
transition: $swift-ease-in;
}
}
.md-checkbox.md-checked {
.md-icon {
opacity: 1;
transform: scale3D(1, 1, 1);
transition: $swift-ease-out;
.md-checkbox-container {
&:after {
opacity: 1;
transform: rotate(45deg) scale3D(1, 1, 1);
transition: $swift-ease-out;
}
}
}

2
src/components/mdCheckbox/mdCheckbox.vue
View file

@ -2,8 +2,6 @@
<div class="md-checkbox" :class="classes">
<div class="md-checkbox-container" @click="toggleCheck" v-md-ink-ripple>
<input type="checkbox" v-model="model" :name="name" :id="id" :disabled="disabled" :value="value">
<md-icon>check</md-icon>
</div>
<label :for="id || name" class="md-checkbox-label">

21
src/docs/pages/Checkbox.vue
View file

@ -2,7 +2,21 @@
<section>
<h2 class="title">Checkbox</h2>
<md-checkbox :model.sync="checked" id="my-test" name="my-test">My beautiful checkbox</md-checkbox>
<div>
<md-checkbox :model.sync="checked0" id="my-test0" name="my-test0">My beautiful checkbox</md-checkbox>
</div>
<div>
<md-checkbox :model.sync="checked1" id="my-test1" name="my-test1" v-md-theme="'indigo'">My beautiful checkbox</md-checkbox>
</div>
<div>
<md-checkbox :model.sync="checked2" id="my-test2" name="my-test2" v-md-theme="'blue'">My beautiful checkbox</md-checkbox>
</div>
<div>
<md-checkbox :model.sync="checked3" id="my-test3" name="my-test3" v-md-theme="'orange'">My beautiful checkbox</md-checkbox>
</div>
</section>
</template>
@ -16,7 +30,10 @@
export default {
data() {
return {
checked: false
checked0: true,
checked1: true,
checked2: true,
checked3: true
};
}
};