Implemented FlexGrid Demo
cagataycivici
parent
d86d176a10
commit
18ea7da768
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -45,6 +45,7 @@
|
|||
<div>
|
||||
<router-link to="/panel">● Panel</router-link>
|
||||
<router-link to="/fieldset">● Fieldset</router-link>
|
||||
<router-link to="/flexgrid">● FlexGrid</router-link>
|
||||
<router-link to="/toolbar">● Toolbar</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -48,7 +48,7 @@ body {
|
|||
background-color: #f6f6f6;
|
||||
font-family: "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
color: #484848;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -237,7 +237,7 @@ body {
|
|||
display: block;
|
||||
padding: 15px 0px 0px 25px;
|
||||
border-top: solid 1px #e3e9ea;
|
||||
color: #333333;
|
||||
color: #484848;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
|
|
@ -396,8 +396,9 @@ body {
|
|||
}
|
||||
|
||||
&.introduction {
|
||||
@include background-gradient-left2right(#41b883, #50aeae);
|
||||
color: #ffffff;
|
||||
background: url('./assets/images/component-intro-bg.jpg');
|
||||
border-bottom: 1px solid #dadada;
|
||||
color: #484848;
|
||||
|
||||
.feature-intro {
|
||||
h1 {
|
||||
|
|
@ -405,7 +406,7 @@ body {
|
|||
margin: 0 0 20px 0;
|
||||
display: block;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
color: #222222;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -413,6 +414,7 @@ body {
|
|||
margin: 0;
|
||||
line-height: 2em;
|
||||
font-size: 16px;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -494,7 +496,7 @@ body {
|
|||
|
||||
&.documentation {
|
||||
h3 {
|
||||
color: #333333;
|
||||
color: #484848;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 22px;
|
||||
|
|
@ -508,7 +510,7 @@ body {
|
|||
}
|
||||
|
||||
p {
|
||||
color: #333333;
|
||||
color: #484848;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin: 10px 0;
|
||||
|
|
@ -585,7 +587,7 @@ body {
|
|||
|
||||
&.p-highlight a {
|
||||
background: #f5f7f8;
|
||||
color: #333333;
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
&:not(.p-highlight) a:hover {
|
||||
|
|
@ -774,7 +776,7 @@ body {
|
|||
|
||||
h3 {
|
||||
font-size:24px;
|
||||
color: #333333;
|
||||
color: #484848;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
|
@ -805,16 +807,14 @@ body {
|
|||
margin-bottom: 30px;
|
||||
|
||||
&.features-tagline {
|
||||
color: #333333;
|
||||
color: #484848;
|
||||
margin-bottom: 0;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&.features-description {
|
||||
color: #333333;
|
||||
color: #484848;
|
||||
text-align: left;
|
||||
|
||||
|
||||
}
|
||||
|
||||
> a{
|
||||
|
|
@ -862,7 +862,7 @@ body {
|
|||
|
||||
h3 {
|
||||
font-size:24px;
|
||||
color: #333333;
|
||||
color: #484848;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,21 @@ export default new Router({
|
|||
name: 'home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/button',
|
||||
name: 'button',
|
||||
component: () => import('./views/button/ButtonDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/fieldset',
|
||||
name: 'fieldset',
|
||||
component: () => import('./views/fieldset/FieldsetDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/flexgrid',
|
||||
name: 'flexgrid',
|
||||
component: () => import('./views/flexgrid/FlexGridDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/inputtext',
|
||||
name: 'inputtext',
|
||||
|
|
@ -21,21 +36,11 @@ export default new Router({
|
|||
name: 'listbox',
|
||||
component: () => import('./views/listbox/ListBoxDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/button',
|
||||
name: 'button',
|
||||
component: () => import('./views/button/ButtonDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/panel',
|
||||
name: 'panel',
|
||||
component: () => import('./views/panel/PanelDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/fieldset',
|
||||
name: 'fieldset',
|
||||
component: () => import('./views/fieldset/FieldsetDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/textarea',
|
||||
name: 'textarea',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,489 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputText</h1>
|
||||
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
|
||||
Flex Grid CSS is not included in PrimeReact as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>, a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation flexgrid-demo">
|
||||
<h3 class="first">Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Dynamic</h3>
|
||||
<p-button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
|
||||
<p-button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
||||
|
||||
<div style="margin-top: .5em">
|
||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||
<div v-for="col of columns" :key="col" class="p-col">
|
||||
<div class="box">{{col}}</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<h3>Reverse Direction</h3>
|
||||
<div class="p-grid p-dir-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Column Direction</h3>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Reverse Column Direction</h3>
|
||||
<div class="p-grid p-dir-col-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>12 Column Grid</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="box">8</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>MultiLine</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Fixed Width Column</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-fixed" style="width:100px">
|
||||
<div class="box">100px</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">auto</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Responsive</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Start</h3>
|
||||
<div class="p-grid p-justify-start">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - End</h3>
|
||||
<div class="p-grid p-justify-end">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Center</h3>
|
||||
<div class="p-grid p-justify-center">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Between</h3>
|
||||
<div class="p-grid p-justify-between">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Around</h3>
|
||||
<div class="p-grid p-justify-around">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Even</h3>
|
||||
<div class="p-grid p-justify-even">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Start</h3>
|
||||
<div class="p-grid p-align-start vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - End</h3>
|
||||
<div class="p-grid p-align-end vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Center</h3>
|
||||
<div class="p-grid p-align-center vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Stretch</h3>
|
||||
<div class="p-grid p-align-stretch vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Per Column</h3>
|
||||
<div class="p-grid vertical-container">
|
||||
<div class="p-col p-col-align-start">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-col-align-center">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-col-align-end">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Offset</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6 p-offset-3">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col-4 p-offset-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Nested</h3>
|
||||
<div class="p-grid nested-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<div class="box">12</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Panels</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<p-panel header="Godfather">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</p-panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<p-panel header="Godfather">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</p-panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<p-panel header="Godfather">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</p-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Sample Layout</h3>
|
||||
<div class="p-grid sample-layout">
|
||||
<div class="p-col-12 p-md-2">
|
||||
Menu
|
||||
</div>
|
||||
<div class="p-col-12 p-md-10 p-col-nogutter">
|
||||
<div class="p-col-12 p-col-nogutter">
|
||||
Top Bar
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
|
||||
dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
|
||||
In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div>
|
||||
<div class="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
|
||||
tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
|
||||
at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
|
||||
nulla nec, rutrum sapien.</div>
|
||||
<div class="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
|
||||
sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
|
||||
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
|
||||
condimentum eget hendrerit sit amet.</div>
|
||||
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="/demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="/demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="/demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="/demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
||||
|
||||
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
||||
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
||||
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
|
||||
<div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
|
||||
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
Footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [0, 1, 2, 3, 4, 5]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addColumn() {
|
||||
this.columns = [...this.columns, this.columns.length];
|
||||
},
|
||||
removeColumn() {
|
||||
this.columns.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.flexgrid-demo {
|
||||
.box,
|
||||
.sample-layout > div {
|
||||
background-color: #cce4f7;
|
||||
text-align: center;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.box-stretched {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sample-layout {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sample-layout > div {
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
.vertical-container {
|
||||
margin: 0;
|
||||
height: 200px;
|
||||
background: #efefef;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nested-grid .p-col-4 {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.dynamic-box-enter-active, .dynamic-box-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.dynamic-box-enter, .dynamic-box-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dynamic-box-enter, .dynamic-box-leave-to {
|
||||
transform: translateX(30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue