Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
80 lines (70 sloc) 1.4 KB
<template>
<section>
<div class="layout"
:data-clear="clear" >
<div class="float">
<button-style
id="clear"
:content='clear ? "clearfix" : "no fix"'
@click="toggleClear" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis laudantium ea tenetur quas incidunt. Voluptatibus veritatis, rerum vitae illum, recusandae quis. Recusandae quisquam sunt id, eius debitis quos animi hic.
</div>
<div class="next">Next! (not floating)</div>
<div class="last">Last! (floating)</div>
</div>
</section>
</template>
<script>
import ButtonStyle from '~/components/utility/ButtonStyle.vue';
export default {
components: {
ButtonStyle,
},
data() {
return {
clear: false
}
},
methods: {
toggleClear() {
this.clear = !this.clear;
}
},
}
</script>
<style lang="scss" scoped>
.layout {
background: white;
border: 1px solid;
margin: 2em;
padding: 1rem;
}
[data-clear] {
&::after {
background: red;
clear: both;
content: 'this is my clearfix';
display: table;
}
}
.float {
border: 1px solid red;
float: left;
margin-right: 1em;
resize: both;
overflow: auto;
padding: 0.5rem;
}
.next,
.last {
border: 1px solid blue;
margin-bottom: 1em;
padding: 0.5rem;
}
.last {
float: left;
}
button {
font: inherit;
}
</style>
You can’t perform that action at this time.