vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update spacing demo

pull/345/head
cagataycivici 2020-06-17 22:38:02 +03:00
parent 878348cdee
commit 53c78c054b
2 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/styles/app/_content.scss
View File

@ -23,10 +23,9 @@
} }
a { a {
background-color: var(--primary-color-text); text-decoration: none;
color: var(--primary-color); color: $linkColor;
border-radius: 3px; font-weight: 600;
padding: 2px 4px;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -141,7 +140,7 @@
a { a {
text-decoration: none; text-decoration: none;
color: $linkColor; color: $linkColor;
font-weight: 500; font-weight: 600;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;

78
src/views/spacing/SpacingDemo.vue
View File

@ -10,48 +10,52 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-6"> <div class="p-col-12 p-md-6">
<h5>Use Case 1</h5> <div class="card">
<p>Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap <h5>Use Case 1</h5>
they are displayed on top of each other whereas with spacing this issue can easily be resolved. <p>Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap
</p> they are displayed on top of each other whereas with spacing this issue can easily be resolved.
</p>
<h6>Without Spacing</h6> <h6>Without Spacing</h6>
<Button type="button" label="Button 1" style="width:250px" /> <Button type="button" label="Button 1" style="width:250px" />
<Button type="button" label="Button 2" style="width:250px" /> <Button type="button" label="Button 2" style="width:250px" />
<h6>With Spacing</h6> <h6>With Spacing</h6>
<Button type="button" label="Button 1" style="width:250px" class="p-mr-2 p-mb-2" /> <Button type="button" label="Button 1" style="width:250px" class="p-mr-2 p-mb-2" />
<Button type="button" label="Button 2" style="width:250px" class="p-mr-2"/> <Button type="button" label="Button 2" style="width:250px" class="p-mr-2"/>
</div>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="p-col-12 p-md-6">
<h5>Use Case 2</h5> <div class="card">
<p>Spacing utilities also work seamlessly with responsive PrimeFlex grid utilty. Example below demonstrates a case where on a smaller screen inputs receive a margin to position themselves <h5>Use Case 2</h5>
separately in stacked mode, reduce the dimension of the window to view the difference. <p>Spacing utilities also work seamlessly with responsive PrimeFlex grid utilty. Example below demonstrates a case where on a smaller screen inputs receive a margin to position themselves
</p> separately in stacked mode, reduce the dimension of the window to view the difference.
</p>
<h6>Without Spacing</h6> <h6>Without Spacing</h6>
<div class="p-grid p-formgrid p-fluid"> <div class="p-grid p-formgrid p-fluid">
<div class="p-col-12 p-lg-4"> <div class="p-col-12 p-lg-4">
<InputText /> <InputText />
</div>
<div class="p-col-12 p-lg-4">
<InputText />
</div>
<div class="p-col-12 p-lg-4">
<InputText />
</div>
</div> </div>
<div class="p-col-12 p-lg-4">
<InputText />
</div>
<div class="p-col-12 p-lg-4">
<InputText />
</div>
</div>
<h6>With Spacing</h6> <h6>With Spacing</h6>
<div class="p-grid p-formgrid p-fluid"> <div class="p-grid p-formgrid p-fluid">
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"> <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
<InputText /> <InputText />
</div> </div>
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"> <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
<InputText /> <InputText />
</div> </div>
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"> <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
<InputText /> <InputText />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -73,7 +77,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
p { .card {
line-height: 1.5; min-height: 100%;
} }
</style> </style>