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 {
background-color: var(--primary-color-text);
color: var(--primary-color);
border-radius: 3px;
padding: 2px 4px;
text-decoration: none;
color: $linkColor;
font-weight: 600;
&:hover {
text-decoration: underline;
@ -141,7 +140,7 @@
a {
text-decoration: none;
color: $linkColor;
font-weight: 500;
font-weight: 600;
&:hover {
text-decoration: underline;

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

@ -10,6 +10,7 @@
<div class="content-section implementation">
<div class="p-grid">
<div class="p-col-12 p-md-6">
<div class="card">
<h5>Use Case 1</h5>
<p>Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap
they are displayed on top of each other whereas with spacing this issue can easily be resolved.
@ -23,7 +24,9 @@
<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"/>
</div>
</div>
<div class="p-col-12 p-md-6">
<div class="card">
<h5>Use Case 2</h5>
<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
separately in stacked mode, reduce the dimension of the window to view the difference.
@ -57,6 +60,7 @@
</div>
</div>
</div>
</div>
<SpacingDoc />
</div>
@ -73,7 +77,7 @@ export default {
</script>
<style scoped>
p {
line-height: 1.5;
.card {
min-height: 100%;
}
</style>