<dom-module id="flexbox-row">
<style type="text/css">
:host {
display: block;
background-color: red;
height: 100px;
}
.row.altura-completa{
height: 100vh;
}
:host([middle]) .row{
-webkit-align-items: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}
:host([center]) .row{
-webkit-justify-content: center;
-ms-flex-pack:center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
}
</style>
<template>
<div class="row altura-completa">
<p>
<content></content>
</p>
</div>
</template>
<script>
<style type="text/css">
:host {
display: block;
background-color: red;
height: 100px;
}
.row.altura-completa{
height: 100vh;
}
:host([middle]) .row{
-webkit-align-items: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}
:host([center]) .row{
-webkit-justify-content: center;
-ms-flex-pack:center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
}
</style>
<template>
<div class="row altura-completa">
<p>
<content></content>
</p>
</div>
</template>
<script>
Polymer({
is: "flexbox-row"
})
</script>
</dom-module>
is: "flexbox-row"
})
</script>
</dom-module>