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

Styling for architecture page

pull/345/head
cagataycivici 2020-05-13 16:07:00 +03:00
parent 5b0c6aebcb
commit acb75bb036
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,6 +72,11 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 500; font-weight: 500;
color: var(--text-color); color: var(--text-color);
&:first-child,
&.first {
margin-top: 0;
}
} }
a { a {

21
src/views/theming/Theming.vue
View File

@ -8,8 +8,8 @@
</div> </div>
<div class="content-section documentation"> <div class="content-section documentation">
<h3 style="margin-top:0">Architecture</h3> <h3>Architecture</h3>
<img alt="Architecture" src="../../assets/images/architecture.jpg" style="width: 100%; margin-top:16px;" /> <img alt="Architecture" src="../../assets/images/architecture.jpg" class="architecture-image"/>
<p>PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been <p>PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been
separated into core and theme. Core resides inside PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors, paddings separated into core and theme. Core resides inside PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors, paddings
and margins.</p> and margins.</p>
@ -129,9 +129,20 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.designer-image { .designer-image,
.architecture-image {
width: 75%;
margin: 0 auto;
display: block; display: block;
margin-top: 30px; margin-top: 2rem;
margin-bottom: 2rem;
}
@media screen and (max-width: 960px) {
.designer-image,
.architecture-image {
width: 100%;
}
} }
</style> </style>