56 lines
719 B
Plaintext
56 lines
719 B
Plaintext
<template>
|
|
<div class="col"><slot /></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default class Col {
|
|
props = {
|
|
gap: ''
|
|
}
|
|
|
|
__init__() {
|
|
/* render */
|
|
}
|
|
|
|
mounted() {}
|
|
|
|
unmounted() {}
|
|
|
|
watch() {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
:host {
|
|
// display: flex;
|
|
max-width: 100%;
|
|
}
|
|
.col {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@for $i from 1 through 24 {
|
|
:host([span='#{$i}']) {
|
|
max-width: math.percentage(math.div($i, 24));
|
|
flex: 0 0 math.percentage(math.div($i, 24));
|
|
}
|
|
}
|
|
|
|
$gaps: (
|
|
's': 4px,
|
|
'm': 8px,
|
|
'l': 12px,
|
|
'xl': 16px,
|
|
'xxl': 20px,
|
|
'xxxl': 24px,
|
|
'xxxxl': 28px
|
|
);
|
|
@each $k, $v in $gaps {
|
|
:host([gap='#{$k}']) .col {
|
|
padding: 0 math.div($v, 2);
|
|
}
|
|
}
|
|
</style>
|
JavaScript
95.2%
CSS
4.8%