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

em to rem conversion

pull/345/head
cagataycivici 2020-05-14 11:51:13 +03:00
parent 417516b084
commit 4e6080d505
90 changed files with 294 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/styles/app/_config.scss
View File

@ -106,7 +106,7 @@
} }
.p-grid > div { .p-grid > div {
padding: 1em .5em; padding: 1em .5rem;
text-align: center; text-align: center;
span { span {
@ -140,7 +140,7 @@
} }
.free-themes { .free-themes {
padding: 2em; padding: 2rem;
color: var(--text-color); color: var(--text-color);
background-color: var(--layer-0); background-color: var(--layer-0);
@ -173,7 +173,7 @@
left: 50%; left: 50%;
margin-left: -18px; margin-left: -18px;
margin-top: -18px; margin-top: -18px;
padding: .18em; padding: .18rem;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
background-color: #ffffff; background-color: #ffffff;
border-radius: 50%; border-radius: 50%;
@ -191,7 +191,7 @@
} }
.premium-themes { .premium-themes {
padding: 2em; padding: 2rem;
background-color: #212529; background-color: #212529;
color: #ffffff; color: #ffffff;

14
src/assets/styles/app/_home.scss
View File

@ -43,7 +43,7 @@
margin-left: -50px; margin-left: -50px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px 50px 10px 175px; padding: 10px 50px 10px 175px;
font-size: 1.5em; font-size: 1.5rem;
background-image: linear-gradient(90deg, #445C72 0%, #DBDCDE 100%); background-image: linear-gradient(90deg, #445C72 0%, #DBDCDE 100%);
position: relative; position: relative;
color: #ffffff; color: #ffffff;
@ -89,18 +89,18 @@
display: block; display: block;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
margin-top: 1em; margin-top: 1rem;
} }
p { p {
margin-top: 1em; margin-top: 1rem;
margin-bottom: 2em; margin-bottom: 2rem;
&.features-tagline { &.features-tagline {
color: var(--text-color); color: var(--text-color);
margin-bottom: 0; margin-bottom: 0;
margin-top: -5px; margin-top: -5px;
margin-bottom: 2em; margin-bottom: 2rem;
} }
} }
} }
@ -123,7 +123,7 @@
} }
.p-grid > div { .p-grid > div {
padding: 2em .5em; padding: 2em .5rem;
} }
p { p {
@ -188,7 +188,7 @@
p { p {
line-height: 22px; line-height: 22px;
margin-bottom: 1em; margin-bottom: 1rem;
} }
h3 { h3 {

4
src/assets/styles/app/_icons.scss
View File

@ -4,10 +4,10 @@
} }
.icons-list i { .icons-list i {
font-size: 2em; font-size: 2rem;
} }
.icons-list .p-md-2 { .icons-list .p-md-2 {
padding-bottom: 2em; padding-bottom: 2rem;
} }
} }

6
src/assets/styles/app/_news.scss
View File

@ -32,14 +32,14 @@
color: #f2b837; color: #f2b837;
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
margin: 0 .25em; margin: 0 .25rem;
} }
.helper-text { .helper-text {
background-color: #f2b837; background-color: #f2b837;
color: #212121; color: #212121;
padding: 0 0.2em; padding: 0 0.2rem;
margin-right: 0.3em; margin-right: 0.3rem;
} }
} }

2
src/components/autocomplete/AutoComplete.vue
View File

@ -437,7 +437,7 @@ export default {
.p-autocomplete-loader { .p-autocomplete-loader {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
} }
.p-autocomplete-dd .p-autocomplete-input { .p-autocomplete-dd .p-autocomplete-input {

2
src/components/badge/Badge.css
View File

@ -11,7 +11,7 @@
} }
.p-tag.p-tag-rounded { .p-tag.p-tag-rounded {
border-radius: 10em; border-radius: 10rem;
} }
.p-overlay-badge { .p-overlay-badge {

2
src/components/datatable/DataTable.vue
View File

@ -1926,7 +1926,7 @@ export default {
top: 0; top: 0;
right: 0; right: 0;
margin: 0; margin: 0;
width: .5em; width: .5rem;
height: 100%; height: 100%;
padding: 0px; padding: 0px;
cursor:col-resize; cursor:col-resize;

2
src/components/dialog/Dialog.vue
View File

@ -332,7 +332,7 @@ export default {
.p-dialog-topright .p-dialog, .p-dialog-topright .p-dialog,
.p-dialog-bottomleft .p-dialog, .p-dialog-bottomleft .p-dialog,
.p-dialog-bottomright .p-dialog { .p-dialog-bottomright .p-dialog {
margin: .75em; margin: .75rem;
transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
} }
.p-dialog-top .p-dialog-enter-active, .p-dialog-top .p-dialog-enter-active,

4
src/components/dropdown/Dropdown.vue
View File

@ -466,7 +466,7 @@ export default {
.p-dropdown-clear-icon { .p-dropdown-clear-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
} }
.p-dropdown-trigger { .p-dropdown-trigger {
@ -529,7 +529,7 @@ input.p-dropdown-label {
.p-dropdown-filter-icon { .p-dropdown-filter-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
} }
.p-fluid .p-dropdown { .p-fluid .p-dropdown {

118
src/components/editor/Editor.vue
View File

@ -177,7 +177,7 @@ export default {
} }
.ql-editor ol, .ql-editor ol,
.ql-editor ul { .ql-editor ul {
padding-left: 1.5em; padding-left: 1.5rem;
} }
.ql-editor ol > li, .ql-editor ol > li,
.ql-editor ul > li { .ql-editor ul > li {
@ -209,24 +209,24 @@ export default {
.ql-editor li::before { .ql-editor li::before {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
width: 1.2em; width: 1.2rem;
} }
.ql-editor li:not(.ql-direction-rtl)::before { .ql-editor li:not(.ql-direction-rtl)::before {
margin-left: -1.5em; margin-left: -1.5rem;
margin-right: 0.3em; margin-right: 0.3rem;
text-align: right; text-align: right;
} }
.ql-editor li.ql-direction-rtl::before { .ql-editor li.ql-direction-rtl::before {
margin-left: 0.3em; margin-left: 0.3rem;
margin-right: -1.5em; margin-right: -1.5rem;
} }
.ql-editor ol li:not(.ql-direction-rtl), .ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) { .ql-editor ul li:not(.ql-direction-rtl) {
padding-left: 1.5em; padding-left: 1.5rem;
} }
.ql-editor ol li.ql-direction-rtl, .ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl { .ql-editor ul li.ql-direction-rtl {
padding-right: 1.5em; padding-right: 1.5rem;
} }
.ql-editor ol li { .ql-editor ol li {
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
@ -314,112 +314,112 @@ export default {
content: counter(list-9, decimal) '. '; content: counter(list-9, decimal) '. ';
} }
.ql-editor .ql-indent-1:not(.ql-direction-rtl) { .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
padding-left: 3em; padding-left: 3rem;
} }
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) { .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
padding-left: 4.5em; padding-left: 4.5rem;
} }
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
padding-right: 3em; padding-right: 3rem;
} }
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
padding-right: 4.5em; padding-right: 4.5rem;
} }
.ql-editor .ql-indent-2:not(.ql-direction-rtl) { .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
padding-left: 6em; padding-left: 6rem;
} }
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) { .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
padding-left: 7.5em; padding-left: 7.5rem;
} }
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
padding-right: 6em; padding-right: 6rem;
} }
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
padding-right: 7.5em; padding-right: 7.5rem;
} }
.ql-editor .ql-indent-3:not(.ql-direction-rtl) { .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
padding-left: 9em; padding-left: 9rem;
} }
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) { .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
padding-left: 10.5em; padding-left: 10.5rem;
} }
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
padding-right: 9em; padding-right: 9rem;
} }
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
padding-right: 10.5em; padding-right: 10.5rem;
} }
.ql-editor .ql-indent-4:not(.ql-direction-rtl) { .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
padding-left: 12em; padding-left: 12rem;
} }
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) { .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
padding-left: 13.5em; padding-left: 13.5rem;
} }
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
padding-right: 12em; padding-right: 12rem;
} }
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
padding-right: 13.5em; padding-right: 13.5rem;
} }
.ql-editor .ql-indent-5:not(.ql-direction-rtl) { .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
padding-left: 15em; padding-left: 15rem;
} }
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) { .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
padding-left: 16.5em; padding-left: 16.5rem;
} }
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
padding-right: 15em; padding-right: 15rem;
} }
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
padding-right: 16.5em; padding-right: 16.5rem;
} }
.ql-editor .ql-indent-6:not(.ql-direction-rtl) { .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
padding-left: 18em; padding-left: 18rem;
} }
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) { .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
padding-left: 19.5em; padding-left: 19.5rem;
} }
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
padding-right: 18em; padding-right: 18rem;
} }
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
padding-right: 19.5em; padding-right: 19.5rem;
} }
.ql-editor .ql-indent-7:not(.ql-direction-rtl) { .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
padding-left: 21em; padding-left: 21rem;
} }
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) { .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
padding-left: 22.5em; padding-left: 22.5rem;
} }
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
padding-right: 21em; padding-right: 21rem;
} }
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
padding-right: 22.5em; padding-right: 22.5rem;
} }
.ql-editor .ql-indent-8:not(.ql-direction-rtl) { .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
padding-left: 24em; padding-left: 24rem;
} }
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) { .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
padding-left: 25.5em; padding-left: 25.5rem;
} }
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
padding-right: 24em; padding-right: 24rem;
} }
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
padding-right: 25.5em; padding-right: 25.5rem;
} }
.ql-editor .ql-indent-9:not(.ql-direction-rtl) { .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
padding-left: 27em; padding-left: 27rem;
} }
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) { .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
padding-left: 28.5em; padding-left: 28.5rem;
} }
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
padding-right: 27em; padding-right: 27rem;
} }
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
padding-right: 28.5em; padding-right: 28.5rem;
} }
.ql-editor .ql-video { .ql-editor .ql-video {
display: block; display: block;
@ -480,13 +480,13 @@ export default {
font-family: Monaco, Courier New, monospace; font-family: Monaco, Courier New, monospace;
} }
.ql-editor .ql-size-small { .ql-editor .ql-size-small {
font-size: 0.75em; font-size: 0.75rem;
} }
.ql-editor .ql-size-large { .ql-editor .ql-size-large {
font-size: 1.5em; font-size: 1.5rem;
} }
.ql-editor .ql-size-huge { .ql-editor .ql-size-huge {
font-size: 2.5em; font-size: 2.5rem;
} }
.ql-editor .ql-direction-rtl { .ql-editor .ql-direction-rtl {
direction: rtl; direction: rtl;
@ -707,22 +707,22 @@ export default {
display: none; display: none;
} }
.ql-snow .ql-editor h1 { .ql-snow .ql-editor h1 {
font-size: 2em; font-size: 2rem;
} }
.ql-snow .ql-editor h2 { .ql-snow .ql-editor h2 {
font-size: 1.5em; font-size: 1.5rem;
} }
.ql-snow .ql-editor h3 { .ql-snow .ql-editor h3 {
font-size: 1.17em; font-size: 1.17rem;
} }
.ql-snow .ql-editor h4 { .ql-snow .ql-editor h4 {
font-size: 1em; font-size: 1rem;
} }
.ql-snow .ql-editor h5 { .ql-snow .ql-editor h5 {
font-size: 0.83em; font-size: 0.83rem;
} }
.ql-snow .ql-editor h6 { .ql-snow .ql-editor h6 {
font-size: 0.67em; font-size: 0.67rem;
} }
.ql-snow .ql-editor a { .ql-snow .ql-editor a {
text-decoration: underline; text-decoration: underline;
@ -888,22 +888,22 @@ export default {
content: 'Heading 6'; content: 'Heading 6';
} }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
font-size: 2em; font-size: 2rem;
} }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
font-size: 1.5em; font-size: 1.5rem;
} }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
font-size: 1.17em; font-size: 1.17rem;
} }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
font-size: 1em; font-size: 1rem;
} }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
font-size: 0.83em; font-size: 0.83rem;
} }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
font-size: 0.67em; font-size: 0.67rem;
} }
.ql-snow .ql-picker.ql-font { .ql-snow .ql-picker.ql-font {
width: 108px; width: 108px;

56
src/components/fullcalendar/FullCalendar.vue
View File

@ -71,7 +71,7 @@ export default {
body .fc { body .fc {
/* extra precedence to overcome jqui */ /* extra precedence to overcome jqui */
font-size: 1em; } font-size: 1rem; }
/* Colors /* Colors
--------------------------------------------------------------------------------------------------*/ --------------------------------------------------------------------------------------------------*/
@ -99,10 +99,10 @@ body .fc {
box-sizing: border-box; box-sizing: border-box;
/* dimensions */ /* dimensions */
margin: 0; margin: 0;
height: 2.1em; height: 2.1rem;
padding: 0 .6em; padding: 0 .6rem;
/* text & cursor */ /* text & cursor */
font-size: 1em; font-size: 1rem;
/* normalize */ /* normalize */
white-space: nowrap; white-space: nowrap;
cursor: pointer; } cursor: pointer; }
@ -130,9 +130,9 @@ body .fc {
.fc button .fc-icon { .fc button .fc-icon {
/* non-theme */ /* non-theme */
position: relative; position: relative;
top: -0.05em; top: -0.05rem;
/* seems to be a good adjustment across browsers */ /* seems to be a good adjustment across browsers */
margin: 0 .2em; margin: 0 .2rem;
vertical-align: middle; } vertical-align: middle; }
/* /*
@ -266,7 +266,7 @@ hr.fc-divider {
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
font-size: 1em; font-size: 1rem;
/* normalize cross-browser */ } /* normalize cross-browser */ }
.fc th { .fc th {
@ -392,7 +392,7 @@ temporary rendered events).
/* for resize handle and other inner positioning */ /* for resize handle and other inner positioning */
display: block; display: block;
/* make the <a> tag block */ /* make the <a> tag block */
font-size: .85em; font-size: .85rem;
line-height: 1.3; line-height: 1.3;
border-radius: 3px; border-radius: 3px;
border: 1px solid #3a87ad; border: 1px solid #3a87ad;
@ -612,7 +612,7 @@ tr:first-child > td > .fc-day-grid-event {
/* "more" link that represents hidden events */ /* "more" link that represents hidden events */
a.fc-more { a.fc-more {
margin: 1px 3px; margin: 1px 3px;
font-size: .85em; font-size: .85rem;
cursor: pointer; cursor: pointer;
text-decoration: none; } text-decoration: none; }
@ -691,9 +691,9 @@ TODO: more distinction between this file and common.css
--------------------------------------------------------------------------------------------------*/ --------------------------------------------------------------------------------------------------*/
.fc-icon { .fc-icon {
display: inline-block; display: inline-block;
height: 1em; height: 1rem;
line-height: 1em; line-height: 1rem;
font-size: 1em; font-size: 1rem;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
@ -764,7 +764,7 @@ NOTE: use percentage font sizes or else old IE chokes
border-style: solid; } border-style: solid; }
.fc-unthemed .fc-popover .fc-header .fc-close { .fc-unthemed .fc-popover .fc-header .fc-close {
font-size: .9em; font-size: .9rem;
margin-top: 2px; } margin-top: 2px; }
/* List View /* List View
@ -864,10 +864,10 @@ NOTE: use percentage font sizes or else old IE chokes
text-align: center; } text-align: center; }
.fc-toolbar.fc-header-toolbar { .fc-toolbar.fc-header-toolbar {
margin-bottom: 1em; } margin-bottom: 1rem; }
.fc-toolbar.fc-footer-toolbar { .fc-toolbar.fc-footer-toolbar {
margin-top: 1em; } margin-top: 1rem; }
.fc-toolbar .fc-left { .fc-toolbar .fc-left {
float: left; } float: left; }
@ -882,7 +882,7 @@ NOTE: use percentage font sizes or else old IE chokes
.fc .fc-toolbar > * > * { .fc .fc-toolbar > * > * {
/* extra precedence to override button border margins */ /* extra precedence to override button border margins */
float: left; float: left;
margin-left: .75em; } margin-left: .75rem; }
/* the first thing within each left/center/right section */ /* the first thing within each left/center/right section */
.fc .fc-toolbar > * > :first-child { .fc .fc-toolbar > * > :first-child {
@ -934,11 +934,11 @@ NOTE: use percentage font sizes or else old IE chokes
.fc-basicWeek-view .fc-content-skeleton, .fc-basicWeek-view .fc-content-skeleton,
.fc-basicDay-view .fc-content-skeleton { .fc-basicDay-view .fc-content-skeleton {
/* there may be week numbers in these views, so no padding-top */ /* there may be week numbers in these views, so no padding-top */
padding-bottom: 1em; padding-bottom: 1rem;
/* ensure a space at bottom of cell for user selecting/clicking */ } /* ensure a space at bottom of cell for user selecting/clicking */ }
.fc-basic-view .fc-body .fc-row { .fc-basic-view .fc-body .fc-row {
min-height: 4em; min-height: 4rem;
/* ensure that all rows are at least this tall */ } /* ensure that all rows are at least this tall */ }
/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */ /* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
@ -979,7 +979,7 @@ NOTE: use percentage font sizes or else old IE chokes
border-radius: 0 0 0 3px; } border-radius: 0 0 0 3px; }
.fc-basic-view .fc-day-top .fc-week-number { .fc-basic-view .fc-day-top .fc-week-number {
min-width: 1.5em; min-width: 1.5rem;
text-align: center; text-align: center;
background-color: #f2f2f2; background-color: #f2f2f2;
color: #808080; } color: #808080; }
@ -991,7 +991,7 @@ NOTE: use percentage font sizes or else old IE chokes
.fc-basic-view td.fc-week-number > * { .fc-basic-view td.fc-week-number > * {
/* work around the way we do column resizing and ensure a minimum width */ /* work around the way we do column resizing and ensure a minimum width */
display: inline-block; display: inline-block;
min-width: 1.25em; } min-width: 1.25rem; }
/* AgendaView all-day area /* AgendaView all-day area
--------------------------------------------------------------------------------------------------*/ --------------------------------------------------------------------------------------------------*/
@ -1001,11 +1001,11 @@ NOTE: use percentage font sizes or else old IE chokes
/* so the "more.." popover will be over the time grid */ } /* so the "more.." popover will be over the time grid */ }
.fc-agenda-view .fc-day-grid .fc-row { .fc-agenda-view .fc-day-grid .fc-row {
min-height: 3em; min-height: 3rem;
/* all-day section will never get shorter than this */ } /* all-day section will never get shorter than this */ }
.fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton { .fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
padding-bottom: 1em; padding-bottom: 1rem;
/* give space underneath events for clicking/selecting days */ } /* give space underneath events for clicking/selecting days */ }
/* TimeGrid axis running down the side (for both the all-day area and the slot area) /* TimeGrid axis running down the side (for both the all-day area and the slot area)
@ -1086,7 +1086,7 @@ NOTE: use percentage font sizes or else old IE chokes
/* TimeGrid Slats (lines that run horizontally) /* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/ --------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-slats td { .fc-time-grid .fc-slats td {
height: 1.5em; height: 1.5rem;
border-bottom: 0; border-bottom: 0;
/* each cell is responsible for its top border */ } /* each cell is responsible for its top border */ }
@ -1173,7 +1173,7 @@ be a descendant of the grid when it is being dragged.
padding: 0 1px; } padding: 0 1px; }
.fc-time-grid-event .fc-time { .fc-time-grid-event .fc-time {
font-size: .85em; font-size: .85rem;
white-space: nowrap; } white-space: nowrap; }
/* short mode, where time and title are on the same line */ /* short mode, where time and title are on the same line */
@ -1200,7 +1200,7 @@ be a descendant of the grid when it is being dragged.
/* seperate with a dash, wrapped in nbsp's */ } /* seperate with a dash, wrapped in nbsp's */ }
.fc-time-grid-event.fc-short .fc-title { .fc-time-grid-event.fc-short .fc-title {
font-size: .85em; font-size: .85rem;
/* make the title text the same size as the time */ /* make the title text the same size as the time */
padding: 0; padding: 0;
/* undo padding from above */ } /* undo padding from above */ }
@ -1405,12 +1405,12 @@ be a descendant of the grid when it is being dragged.
/* use a more border-friendly method for this... */ } /* use a more border-friendly method for this... */ }
.fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td { .fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td {
/* only works in newer browsers */ /* only works in newer browsers */
padding-bottom: 1em; padding-bottom: 1rem;
/* ...gives space within the skeleton. also ensures min height in a way */ } /* ...gives space within the skeleton. also ensures min height in a way */ }
.fc tbody .fc-row .fc-content-skeleton table { .fc tbody .fc-row .fc-content-skeleton table {
/* provides a min-height for the row, but only effective for IE, which exaggerates this value, /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
making it look more like 3em. for other browers, it will already be this tall */ making it look more like 3em. for other browers, it will already be this tall */
height: 1em; } height: 1rem; }
/* Undo month-view event limiting. Display all events and hide the "more" links /* Undo month-view event limiting. Display all events and hide the "more" links
--------------------------------------------------------------------------------------------------*/ --------------------------------------------------------------------------------------------------*/
.fc-more-cell, .fc-more-cell,
@ -1442,7 +1442,7 @@ be a descendant of the grid when it is being dragged.
position: static; } position: static; }
/* in case there are no events, we still want some height */ /* in case there are no events, we still want some height */
.fc-time-grid .fc-content-skeleton table { .fc-time-grid .fc-content-skeleton table {
height: 4em; } height: 4rem; }
/* kill the horizontal spacing made by the event container. event margins will be done below */ /* kill the horizontal spacing made by the event container. event margins will be done below */
.fc-time-grid .fc-event-container { .fc-time-grid .fc-event-container {
margin: 0 !important; } margin: 0 !important; }

4
src/components/galleria/Galleria.vue
View File

@ -195,7 +195,7 @@ export default {
.p-galleria-preview-nav-button { .p-galleria-preview-nav-button {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -404,7 +404,7 @@ export default {
.p-galleria-mask .p-galleria-preview-nav-button { .p-galleria-mask .p-galleria-preview-nav-button {
position: fixed; position: fixed;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
} }
/* Keyboard Support */ /* Keyboard Support */

6
src/components/inputtext/InputText.css
View File

@ -35,7 +35,7 @@
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
transition-property: all; transition-property: all;
transition-timing-function: ease; transition-timing-function: ease;
line-height: 1; line-height: 1;
@ -45,7 +45,7 @@
.p-float-label input.p-filled ~ label, .p-float-label input.p-filled ~ label,
.p-float-label .p-inputwrapper-focus ~ label, .p-float-label .p-inputwrapper-focus ~ label,
.p-float-label .p-inputwrapper-filled ~ label { .p-float-label .p-inputwrapper-filled ~ label {
top: -.75em; top: -.75rem;
font-size: 12px; font-size: 12px;
} }
@ -63,5 +63,5 @@
.p-input-icon-right > i { .p-input-icon-right > i {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
} }

2
src/components/listbox/Listbox.vue
View File

@ -253,7 +253,7 @@ export default {
.p-listbox-filter-icon { .p-listbox-filter-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
} }
.p-listbox-filter { .p-listbox-filter {

2
src/components/megamenu/MegaMenu.vue
View File

@ -371,7 +371,7 @@ export default {
.p-megamenu-col-6, .p-megamenu-col-6,
.p-megamenu-col-12 { .p-megamenu-col-12 {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0.5em; padding: 0.5rem;
} }
.p-megamenu-col-2 { .p-megamenu-col-2 {

2
src/components/multiselect/MultiSelect.vue
View File

@ -482,7 +482,7 @@ export default {
.p-multiselect-filter-icon { .p-multiselect-filter-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
} }
.p-multiselect-filter-container .p-inputtext { .p-multiselect-filter-container .p-inputtext {

4
src/components/orderlist/OrderList.vue
View File

@ -318,8 +318,8 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: auto; overflow: auto;
min-height: 12em; min-height: 12rem;
max-height: 24em; max-height: 24rem;
} }
.p-orderlist-item { .p-orderlist-item {

2
src/components/organizationchart/OrganizationChart.vue
View File

@ -97,7 +97,7 @@ export default {
.p-organizationchart-table > tbody > tr > td { .p-organizationchart-table > tbody > tr > td {
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
padding: 0 .75em; padding: 0 .75rem;
} }
.p-organizationchart-node-content { .p-organizationchart-node-content {

2
src/components/overlaypanel/OverlayPanel.vue
View File

@ -195,7 +195,7 @@ export default {
.p-overlaypanel:after, .p-overlaypanel:before { .p-overlaypanel:after, .p-overlaypanel:before {
bottom: 100%; bottom: 100%;
left: 1.25em; left: 1.25rem;
content: " "; content: " ";
height: 0; height: 0;
width: 0; width: 0;

4
src/components/picklist/PickList.vue
View File

@ -495,8 +495,8 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: auto; overflow: auto;
min-height: 12em; min-height: 12rem;
max-height: 24em; max-height: 24rem;
} }
.p-picklist-item { .p-picklist-item {

22
src/components/sidebar/Sidebar.vue
View File

@ -168,14 +168,14 @@ export default {
.p-sidebar-left { .p-sidebar-left {
top: 0; top: 0;
left: 0; left: 0;
width: 20em; width: 20rem;
height: 100%; height: 100%;
} }
.p-sidebar-right { .p-sidebar-right {
top: 0; top: 0;
right: 0; right: 0;
width: 20em; width: 20rem;
height: 100%; height: 100%;
} }
@ -183,14 +183,14 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 10em; height: 10rem;
} }
.p-sidebar-bottom { .p-sidebar-bottom {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 10em; height: 10rem;
} }
.p-sidebar-full { .p-sidebar-full {
@ -234,32 +234,32 @@ export default {
.p-sidebar-left.p-sidebar-sm, .p-sidebar-left.p-sidebar-sm,
.p-sidebar-right.p-sidebar-sm { .p-sidebar-right.p-sidebar-sm {
width: 20em; width: 20rem;
} }
.p-sidebar-left.p-sidebar-md, .p-sidebar-left.p-sidebar-md,
.p-sidebar-right.p-sidebar-md { .p-sidebar-right.p-sidebar-md {
width: 40em; width: 40rem;
} }
.p-sidebar-left.p-sidebar-lg, .p-sidebar-left.p-sidebar-lg,
.p-sidebar-right.p-sidebar-lg { .p-sidebar-right.p-sidebar-lg {
width: 60em; width: 60rem;
} }
.p-sidebar-top.p-sidebar-sm, .p-sidebar-top.p-sidebar-sm,
.p-sidebar-bottom.p-sidebar-sm { .p-sidebar-bottom.p-sidebar-sm {
height: 10em; height: 10rem;
} }
.p-sidebar-top.p-sidebar-md, .p-sidebar-top.p-sidebar-md,
.p-sidebar-bottom.p-sidebar-md { .p-sidebar-bottom.p-sidebar-md {
height: 20em; height: 20rem;
} }
.p-sidebar-top.p-sidebar-lg, .p-sidebar-top.p-sidebar-lg,
.p-sidebar-bottom.p-sidebar-lg { .p-sidebar-bottom.p-sidebar-lg {
height: 30em; height: 30rem;
} }
@media screen and (max-width: 64em) { @media screen and (max-width: 64em) {
@ -267,7 +267,7 @@ export default {
.p-sidebar-left.p-sidebar-md, .p-sidebar-left.p-sidebar-md,
.p-sidebar-right.p-sidebar-lg, .p-sidebar-right.p-sidebar-lg,
.p-sidebar-right.p-sidebar-md { .p-sidebar-right.p-sidebar-md {
width: 20em; width: 20rem;
} }
} }
</style> </style>

2
src/components/terminal/Terminal.vue
View File

@ -62,7 +62,7 @@ export default {
<style> <style>
.p-terminal { .p-terminal {
height: 18em; height: 18rem;
overflow: auto; overflow: auto;
} }

2
src/components/toast/Toast.vue
View File

@ -96,7 +96,7 @@ export default {
<style> <style>
.p-toast { .p-toast {
position: fixed; position: fixed;
width: 25em; width: 25rem;
} }
.p-toast-message { .p-toast-message {

18
src/components/tooltip/Tooltip.css
View File

@ -1,13 +1,13 @@
.p-tooltip { .p-tooltip {
position:absolute; position:absolute;
display:none; display:none;
padding: .25em .5em; padding: .25em .5rem;
max-width: 12.5em; max-width: 12.5rem;
} }
.p-tooltip.p-tooltip-right, .p-tooltip.p-tooltip-right,
.p-tooltip.p-tooltip-left { .p-tooltip.p-tooltip-left {
padding: 0 .25em; padding: 0 .25rem;
} }
.p-tooltip.p-tooltip-top, .p-tooltip.p-tooltip-top,
@ -30,15 +30,15 @@
.p-tooltip-right .p-tooltip-arrow { .p-tooltip-right .p-tooltip-arrow {
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -.25em; margin-top: -.25rem;
border-width: .25em .25em .25em 0; border-width: .25em .25em .25em 0;
} }
.p-tooltip-left .p-tooltip-arrow { .p-tooltip-left .p-tooltip-arrow {
top: 50%; top: 50%;
right: 0; right: 0;
margin-top: -.25em; margin-top: -.25rem;
border-width: .25em 0 .25em .25em; border-width: .25em 0 .25em .25rem;
} }
.p-tooltip.p-tooltip-top { .p-tooltip.p-tooltip-top {
@ -48,13 +48,13 @@
.p-tooltip-top .p-tooltip-arrow { .p-tooltip-top .p-tooltip-arrow {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -.25em; margin-left: -.25rem;
border-width: .25em .25em 0; border-width: .25em .25em 0;
} }
.p-tooltip-bottom .p-tooltip-arrow { .p-tooltip-bottom .p-tooltip-arrow {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -.25em; margin-left: -.25rem;
border-width: 0 .25em .25em; border-width: 0 .25em .25rem;
} }

4
src/components/tree/Tree.vue
View File

@ -319,12 +319,12 @@ export default {
.p-tree-filter-icon { .p-tree-filter-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -.5em; margin-top: -.5rem;
} }
.p-tree-loading { .p-tree-loading {
position: relative; position: relative;
min-height: 4em; min-height: 4rem;
} }
.p-tree .p-tree-loading-mask { .p-tree .p-tree-loading-mask {

2
src/components/treetable/TreeTable.vue
View File

@ -956,7 +956,7 @@ export default {
top: 0; top: 0;
right: 0; right: 0;
margin: 0; margin: 0;
width: .5em; width: .5rem;
height: 100%; height: 100%;
padding: 0px; padding: 0px;
cursor:col-resize; cursor:col-resize;

2
src/views/accordion/AccordionDemo.vue
View File

@ -134,7 +134,7 @@ export default {
} }
span { span {
margin: 0 .5em; margin: 0 .5rem;
} }
} }

2
src/views/accordion/AccordionDoc.vue
View File

@ -391,7 +391,7 @@ export default {
} }
span { span {
margin: 0 .5em; margin: 0 .5rem;
} }
} }
</CodeHighlight> </CodeHighlight>

2
src/views/blockui/BlockUIDemo.vue
View File

@ -69,6 +69,6 @@ export default {
} }
button { button {
margin-right: .5em; margin-right: .5rem;
} }
</style> </style>

2
src/views/button/ButtonDoc.vue
View File

@ -241,7 +241,7 @@ import Button from 'primevue/button';
<CodeHighlight lang="css"> <CodeHighlight lang="css">
button { button {
margin-right: .5em; margin-right: .5rem;
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>

2
src/views/card/CardDemo.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<Card style="width: 25em; margin-bottom: 2em"> <Card style="width: 25rem; margin-bottom: 2em">
<template slot="title"> <template slot="title">
Simple Card Simple Card
</template> </template>

2
src/views/card/CardDoc.vue
View File

@ -81,7 +81,7 @@ import Card from 'primevue/card';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;Card style="width: 25em; margin-bottom: 2em"&gt; &lt;Card style="width: 25rem; margin-bottom: 2em"&gt;
&lt;template slot="title"&gt; &lt;template slot="title"&gt;
Simple Card Simple Card
&lt;/template&gt; &lt;/template&gt;

8
src/views/carousel/CarouselDemo.vue
View File

@ -145,7 +145,7 @@ export default {
> .p-grid { > .p-grid {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
border-radius: 3px; border-radius: 3px;
margin: .3em; margin: .3rem;
text-align: center; text-align: center;
padding: 2em 0 2.25em 0; padding: 2em 0 2.25em 0;
} }
@ -163,7 +163,7 @@ export default {
} }
button { button {
margin-left: .5em; margin-left: .5rem;
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
@ -187,7 +187,7 @@ export default {
&.p-carousel-item-start { &.p-carousel-item-start {
.car-details { .car-details {
> .p-grid { > .p-grid {
margin-left: .6em; margin-left: .6rem;
} }
} }
} }
@ -195,7 +195,7 @@ export default {
&.p-carousel-item-end { &.p-carousel-item-end {
.car-details { .car-details {
> .p-grid { > .p-grid {
margin-right: .6em; margin-right: .6rem;
} }
} }
} }

8
src/views/carousel/CarouselDoc.vue
View File

@ -397,7 +397,7 @@ export default {
> .p-grid { > .p-grid {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
border-radius: 3px; border-radius: 3px;
margin: .3em; margin: .3rem;
text-align: center; text-align: center;
padding: 2em 0 2.25em 0; padding: 2em 0 2.25em 0;
} }
@ -415,7 +415,7 @@ export default {
} }
button { button {
margin-left: .5em; margin-left: .5rem;
&amp;:first-child { &amp;:first-child {
margin-left: 0; margin-left: 0;
@ -439,7 +439,7 @@ export default {
&amp;.p-carousel-item-start { &amp;.p-carousel-item-start {
.car-details { .car-details {
> .p-grid { > .p-grid {
margin-left: .6em; margin-left: .6rem;
} }
} }
} }
@ -447,7 +447,7 @@ export default {
&amp;.p-carousel-item-end { &amp;.p-carousel-item-end {
.car-details { .car-details {
> .p-grid { > .p-grid {
margin-right: .6em; margin-right: .6rem;
} }
} }
} }

2
src/views/checkbox/CheckboxDemo.vue
View File

@ -79,6 +79,6 @@ export default {
} }
label { label {
margin-left: .5em; margin-left: .5rem;
} }
</style> </style>

6
src/views/datatable/DataTableCrudDemo.vue
View File

@ -261,14 +261,14 @@ export default {
<style scoped> <style scoped>
.p-cardialog-content { .p-cardialog-content {
padding: 1em; padding: 1rem;
} }
.p-cardialog-content .p-col-4 { .p-cardialog-content .p-col-4 {
padding: .75em; padding: .75rem;
} }
.p-cardialog-content .p-col-8 { .p-cardialog-content .p-col-8 {
padding: .5em; padding: .5rem;
} }
</style> </style>

6
src/views/datatable/DataTableDemo.vue
View File

@ -97,7 +97,7 @@
<InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/> <InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/>
</template> </template>
</Column> </Column>
<Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center; overflow: visible"> <Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body> <template #body>
<Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button> <Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button>
</template> </template>
@ -183,7 +183,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.customer-badge { .customer-badge {
border-radius: 2px; border-radius: 2px;
padding: .25em .5em; padding: .25em .5rem;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
font-size: 12px; font-size: 12px;
@ -230,7 +230,7 @@ export default {
} }
span { span {
margin-top: .125em; margin-top: .125rem;
} }
} }

12
src/views/datatable/DataTableDoc.vue
View File

@ -1633,10 +1633,10 @@ export default {
clear: left; clear: left;
.p-column-title { .p-column-title {
padding: .4em; padding: .4rem;
min-width: 30%; min-width: 30%;
display: inline-block; display: inline-block;
margin: -.4em 1em -.4em -.4em; margin: -.4em 1em -.4em -.4rem;
font-weight: bold; font-weight: bold;
} }
} }
@ -1692,7 +1692,7 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.year-cell { .year-cell {
padding: 0.429em 0.857em; padding: 0.429em 0.857rem;
&amp;.old-car { &amp;.old-car {
background-color: #41b783; background-color: #41b783;
@ -2473,7 +2473,7 @@ export default {
&lt;InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/&gt; &lt;InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt; &lt;Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
&lt;template #body&gt; &lt;template #body&gt;
&lt;Button type="button" icon="pi pi-cog" class="p-button-secondary"&gt;&lt;/Button&gt; &lt;Button type="button" icon="pi pi-cog" class="p-button-secondary"&gt;&lt;/Button&gt;
&lt;/template&gt; &lt;/template&gt;
@ -2553,7 +2553,7 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.customer-badge { .customer-badge {
border-radius: 2px; border-radius: 2px;
padding: .25em .5em; padding: .25em .5rem;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
font-size: 12px; font-size: 12px;
@ -2600,7 +2600,7 @@ export default {
} }
span { span {
margin-top: .125em; margin-top: .125rem;
} }
} }

6
src/views/datatable/DataTableEditDemo.vue
View File

@ -346,7 +346,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
/deep/ .p-datatable th, /deep/ .p-datatable th,
/deep/ .p-datatable td { /deep/ .p-datatable td {
height: 3.5em; height: 3.5rem;
} }
.p-dropdown-car-option { .p-dropdown-car-option {
@ -355,12 +355,12 @@ export default {
align-items: center; align-items: center;
img { img {
margin-right: .5em; margin-right: .5rem;
width: 24px; width: 24px;
} }
span { span {
margin-top: .125em; margin-top: .125rem;
} }
} }
</style> </style>

4
src/views/datatable/DataTableFilterDemo.vue
View File

@ -197,13 +197,13 @@ export default {
.p-dropdown-car-option { .p-dropdown-car-option {
img { img {
vertical-align: middle; vertical-align: middle;
margin-right: .5em; margin-right: .5rem;
width: 24px; width: 24px;
} }
span { span {
float: right; float: right;
margin-top: .125em; margin-top: .125rem;
} }
} }
</style> </style>

8
src/views/datatable/DataTableResponsiveDemo.vue
View File

@ -117,10 +117,10 @@ export default {
clear: left; clear: left;
.p-column-title { .p-column-title {
padding: .4em; padding: .4rem;
min-width: 30%; min-width: 30%;
display: inline-block; display: inline-block;
margin: -.4em 1em -.4em -.4em; margin: -.4em 1em -.4em -.4rem;
font-weight: bold; font-weight: bold;
} }
} }
@ -176,10 +176,10 @@ export default {
border: 0 none; border: 0 none;
.p-column-title { .p-column-title {
padding: .4em; padding: .4rem;
min-width: 30%; min-width: 30%;
display: inline-block; display: inline-block;
margin: -.4em 1em -.4em -.4em; margin: -.4em 1em -.4em -.4rem;
font-weight: bold; font-weight: bold;
} }
} }

6
src/views/datatable/DataTableRowExpandDemo.vue
View File

@ -156,10 +156,10 @@ export default {
text-align: left; text-align: left;
button { button {
min-width: 10em; min-width: 10rem;
&:first-child { &:first-child {
margin-right: .5em; margin-right: .5rem;
} }
} }
} }
@ -168,7 +168,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 2em; padding: 2rem;
& > div { & > div {
display: flex; display: flex;

2
src/views/datatable/DataTableRowGroupDemo.vue
View File

@ -217,7 +217,7 @@ export default {
.p-row-toggler { .p-row-toggler {
vertical-align: middle; vertical-align: middle;
margin-right: .25em; margin-right: .25rem;
} }
} }

8
src/views/datatable/DataTableStateDemo.vue
View File

@ -283,24 +283,24 @@ export default {
} }
.p-column-filter { .p-column-filter {
margin-top: .5em; margin-top: .5rem;
} }
.p-multiselect { .p-multiselect {
width: 100%; width: 100%;
margin-top: .5em; margin-top: .5rem;
} }
.p-dropdown-car-option { .p-dropdown-car-option {
img { img {
vertical-align: middle; vertical-align: middle;
margin-right: .5em; margin-right: .5rem;
width: 24px; width: 24px;
} }
span { span {
float: right; float: right;
margin-top: .125em; margin-top: .125rem;
} }
} }
</style> </style>

4
src/views/datatable/DataTableStyleDemo.vue
View File

@ -69,7 +69,7 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.year-cell { .year-cell {
padding: 0.429em 0.857em; padding: 0.429em 0.857rem;
&amp;.old-car { &amp;.old-car {
background-color: #41b783; background-color: #41b783;
@ -116,7 +116,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.year-cell { .year-cell {
padding: 0.429em 0.857em; padding: 0.429em 0.857rem;
&.old-car { &.old-car {
background-color: #41b783; background-color: #41b783;

10
src/views/dataview/DataViewDemo.vue
View File

@ -102,7 +102,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.p-dropdown { .p-dropdown {
width: 12em; width: 12rem;
font-weight: normal; font-weight: normal;
} }
@ -111,7 +111,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 2em; padding: 2rem;
& > div { & > div {
display: flex; display: flex;
@ -124,13 +124,13 @@ export default {
} }
.car-detail { .car-detail {
padding: 0 1em 1em 1em; padding: 0 1em 1em 1rem;
border-bottom: 1px solid #d9dad9; border-bottom: 1px solid #d9dad9;
margin: 1em; margin: 1rem;
} }
.p-panel-content { .p-panel-content {
padding: 1em; padding: 1rem;
} }
} }

10
src/views/dataview/DataViewDoc.vue
View File

@ -498,7 +498,7 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.p-dropdown { .p-dropdown {
width: 12em; width: 12rem;
font-weight: normal; font-weight: normal;
} }
@ -507,7 +507,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 2em; padding: 2rem;
border-bottom: 1px solid #d9dad9; border-bottom: 1px solid #d9dad9;
&amp; > div { &amp; > div {
@ -521,13 +521,13 @@ export default {
} }
.car-detail { .car-detail {
padding: 0 1em 1em 1em; padding: 0 1em 1em 1rem;
border-bottom: 1px solid #d9dad9; border-bottom: 1px solid #d9dad9;
margin: 1em; margin: 1rem;
} }
.p-panel-content { .p-panel-content {
padding: 1em; padding: 1rem;
} }
} }

4
src/views/dropdown/DropdownDemo.vue
View File

@ -75,7 +75,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.p-dropdown { .p-dropdown {
width: 12em; width: 12rem;
} }
.p-dropdown-car-option, .p-dropdown-car-option,
@ -85,7 +85,7 @@ export default {
align-items: center; align-items: center;
img { img {
margin-right: .5em; margin-right: .5rem;
width: 24px; width: 24px;
} }

4
src/views/dropdown/DropdownDoc.vue
View File

@ -356,7 +356,7 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.p-dropdown { .p-dropdown {
width: 12em; width: 12rem;
} }
.p-dropdown-car-option, .p-dropdown-car-option,
@ -366,7 +366,7 @@ export default {
align-items: center; align-items: center;
img { img {
margin-right: .5em; margin-right: .5rem;
width: 24px; width: 24px;
} }

6
src/views/flexgrid/FlexGridDemo.vue
View File

@ -453,8 +453,8 @@ export default {
.sample-layout > div { .sample-layout > div {
background-color: #c2c8ce; background-color: #c2c8ce;
text-align: center; text-align: center;
padding-top: 1em; padding-top: 1rem;
padding-bottom: 1em; padding-bottom: 1rem;
border-radius: 4px; border-radius: 4px;
} }
@ -478,7 +478,7 @@ export default {
} }
.nested-grid .p-col-4 { .nested-grid .p-col-4 {
padding-bottom: 1em; padding-bottom: 1rem;
} }
.dynamic-box-enter-active, .dynamic-box-leave-active { .dynamic-box-enter-active, .dynamic-box-leave-active {

6
src/views/flexgrid/FlexGridDoc.vue
View File

@ -1043,8 +1043,8 @@ export default {
.sample-layout > div { .sample-layout > div {
background-color: #f1f1f1; background-color: #f1f1f1;
text-align: center; text-align: center;
padding-top: 1em; padding-top: 1rem;
padding-bottom: 1em; padding-bottom: 1rem;
border-radius: 4px; border-radius: 4px;
} }
@ -1068,7 +1068,7 @@ export default {
} }
.nested-grid .p-col-4 { .nested-grid .p-col-4 {
padding-bottom: 1em; padding-bottom: 1rem;
} }
.dynamic-box-enter-active, .dynamic-box-leave-active { .dynamic-box-enter-active, .dynamic-box-leave-active {

4
src/views/galleria/GalleriaCaptionDemo.vue
View File

@ -18,7 +18,7 @@
</div> </div>
</template> </template>
<template #previewCaption="{item}"> <template #previewCaption="{item}">
<h4 style="margin-bottom: .5em;">{{item.title}}</h4> <h4 style="margin-bottom: .5rem;">{{item.title}}</h4>
<p>{{item.alt}}</p> <p>{{item.alt}}</p>
</template> </template>
</Galleria> </Galleria>
@ -39,7 +39,7 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewCaption="{item}"&gt; &lt;template #previewCaption="{item}"&gt;
&lt;h4 style="margin-bottom: .5em;"&gt;{{item.title}}&lt;/h4&gt; &lt;h4 style="margin-bottom: .5rem;"&gt;{{item.title}}&lt;/h4&gt;
&lt;p&gt;{{item.alt}}&lt;/p&gt; &lt;p&gt;{{item.alt}}&lt;/p&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;

14
src/views/galleria/GalleriaDemo.vue
View File

@ -174,8 +174,8 @@ export default {
> button { > button {
background-color: transparent; background-color: transparent;
padding: .3em; padding: .3rem;
margin: .2em; margin: .2rem;
border: 0 none; border: 0 none;
border-radius: 0; border-radius: 0;
color: #ffffff; color: #ffffff;
@ -189,8 +189,8 @@ export default {
flex-grow: 1; flex-grow: 1;
> span { > span {
font-size: .9em; font-size: .9rem;
padding-left: .829em; padding-left: .829rem;
&.title { &.title {
font-weight: bold; font-weight: bold;
@ -204,9 +204,9 @@ export default {
.p-galleria-preview-container { .p-galleria-preview-container {
.p-galleria-preview-nav-button { .p-galleria-preview-nav-button {
top: 50%; top: 50%;
height: 20em; height: 20rem;
width: 4em; width: 4rem;
margin-top: -10em; margin-top: -10rem;
} }
} }
} }

14
src/views/galleria/GalleriaDoc.vue
View File

@ -488,8 +488,8 @@ export default {
> button { > button {
background-color: transparent; background-color: transparent;
padding: .3em; padding: .3rem;
margin: .2em; margin: .2rem;
border: 0 none; border: 0 none;
border-radius: 0; border-radius: 0;
color: #ffffff; color: #ffffff;
@ -503,8 +503,8 @@ export default {
flex-grow: 1; flex-grow: 1;
> span { > span {
font-size: .9em; font-size: .9rem;
padding-left: .829em; padding-left: .829rem;
&.title { &.title {
font-weight: bold; font-weight: bold;
@ -518,9 +518,9 @@ export default {
.p-galleria-preview-container { .p-galleria-preview-container {
.p-galleria-preview-nav-button { .p-galleria-preview-nav-button {
top: 50%; top: 50%;
height: 20em; height: 20rem;
width: 4em; width: 4rem;
margin-top: -10em; margin-top: -10rem;
} }
} }
} }

24
src/views/galleria/GalleriaIndicatorDemo.vue
View File

@ -63,7 +63,7 @@
</template> </template>
</Galleria> </Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="top"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="top">
<template #header> <template #header>
Top Top
@ -78,7 +78,7 @@
</template> </template>
</Galleria> </Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left">
<template #header> <template #header>
Left Left
@ -93,7 +93,7 @@
</template> </template>
</Galleria> </Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="right"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="right">
<template #header> <template #header>
Right Right
@ -128,7 +128,7 @@
</template> </template>
</Galleria> </Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@ -145,7 +145,7 @@
</template> </template>
</Galleria> </Galleria>
<Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2" <Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;" class="custom-indicator-galleria2"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@ -156,7 +156,7 @@
</div> </div>
</template> </template>
<template #indicator="{index}"> <template #indicator="{index}">
<div style="padding: .2em; cursor: pointer"> <div style="padding: .2rem; cursor: pointer">
<img :src="images2[index].thumbnailImageSrc" :alt="images2[index].alt" style="display: block"/> <img :src="images2[index].thumbnailImageSrc" :alt="images2[index].alt" style="display: block"/>
</div> </div>
</template> </template>
@ -229,7 +229,7 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="top"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="top"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Top Top
@ -244,7 +244,7 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Left Left
@ -259,7 +259,7 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="right"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="right"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Right Right
@ -294,7 +294,7 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
@ -311,7 +311,7 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2" &lt;Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;" class="custom-indicator-galleria2"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
@ -322,7 +322,7 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #indicator="{index}"&gt; &lt;template #indicator="{index}"&gt;
&lt;div style="padding: .2em; cursor: pointer"&gt; &lt;div style="padding: .2rem; cursor: pointer"&gt;
&lt;img :src="images2[index].thumbnailImageSrc" :alt="images2[index].alt" style="display: block"/&gt; &lt;img :src="images2[index].thumbnailImageSrc" :alt="images2[index].alt" style="display: block"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

12
src/views/galleria/GalleriaThumbnailDemo.vue
View File

@ -35,7 +35,7 @@
</template> </template>
</Galleria> </Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2em;"> <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2rem;">
<template #header> <template #header>
Right Right
</template> </template>
@ -49,7 +49,7 @@
</template> </template>
</Galleria> </Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2em;"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2rem;">
<template #header> <template #header>
Top Top
</template> </template>
@ -63,7 +63,7 @@
</template> </template>
</Galleria> </Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="bottom" style="max-width: 520px; margin-top: 2em;"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="bottom" style="max-width: 520px; margin-top: 2rem;">
<template #header> <template #header>
Bottom Bottom
</template> </template>
@ -110,7 +110,7 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2em;"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2rem;"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Right Right
&lt;/template&gt; &lt;/template&gt;
@ -124,7 +124,7 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2em;"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2rem;"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Top Top
&lt;/template&gt; &lt;/template&gt;
@ -138,7 +138,7 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="bottom" style="max-width: 520px; margin-top: 2em;"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="bottom" style="max-width: 520px; margin-top: 2rem;"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Bottom Bottom
&lt;/template&gt; &lt;/template&gt;

2
src/views/icons/Icons.vue
View File

@ -91,7 +91,7 @@ export default {
<style lang="css" scoped> <style lang="css" scoped>
.icon-filter { .icon-filter {
width: 100%; width: 100%;
padding: 1em; padding: 1rem;
margin: 16px 0 26px 0; margin: 16px 0 26px 0;
} }
</style> </style>

2
src/views/inplace/InplaceDemo.vue
View File

@ -22,7 +22,7 @@
<Inplace> <Inplace>
<template #display> <template #display>
<span class="pi pi-search" style="vertical-align: middle"></span> <span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5em; vertical-align: middle">View Picture</span> <span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
</template> </template>
<template #content> <template #content>
<img src="demo/images/nature/nature1.jpg" /> <img src="demo/images/nature/nature1.jpg" />

4
src/views/inplace/InplaceDoc.vue
View File

@ -15,7 +15,7 @@ import Inplace from 'primevue/inplace';
&lt;Inplace&gt; &lt;Inplace&gt;
&lt;template #display&gt; &lt;template #display&gt;
&lt;span class="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt; &lt;span class="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt;
&lt;span style="margin-left:.5em; vertical-align: middle"&gt;View Picture&lt;/span&gt; &lt;span style="margin-left:.5rem; vertical-align: middle"&gt;View Picture&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #content&gt; &lt;template #content&gt;
&lt;img src="demo/images/nature/nature1.jpg" /&gt; &lt;img src="demo/images/nature/nature1.jpg" /&gt;
@ -185,7 +185,7 @@ export default {
&lt;Inplace&gt; &lt;Inplace&gt;
&lt;template #display&gt; &lt;template #display&gt;
&lt;span className="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt; &lt;span className="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt;
&lt;span style="margin-left:.5em; vertical-align: middle"&gt;View Picture&lt;/span&gt; &lt;span style="margin-left:.5rem; vertical-align: middle"&gt;View Picture&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #content&gt; &lt;template #content&gt;
&lt;img src="demo/images/nature/nature1.jpg" /&gt; &lt;img src="demo/images/nature/nature1.jpg" /&gt;

2
src/views/inputnumber/InputNumberDemo.vue
View File

@ -148,6 +148,6 @@ export default {
<style scoped> <style scoped>
.p-inputnumber { .p-inputnumber {
margin-top: 1em; margin-top: 1rem;
} }
</style> </style>

4
src/views/message/MessageDemo.vue
View File

@ -71,10 +71,10 @@ export default {
<style scoped> <style scoped>
button.p-button { button.p-button {
margin-right: .5em; margin-right: .5rem;
} }
.p-inputtext { .p-inputtext {
margin-right: .5em; margin-right: .5rem;
} }
</style> </style>

4
src/views/message/MessageDoc.vue
View File

@ -287,11 +287,11 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
button.p-button { button.p-button {
margin-right: .5em; margin-right: .5rem;
} }
.p-inputtext { .p-inputtext {
margin-right: .25em; margin-right: .25rem;
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>

4
src/views/orderlist/OrderListDemo.vue
View File

@ -63,13 +63,13 @@ export default {
.p-caritem-vin { .p-caritem-vin {
font-weight: 600; font-weight: 600;
display: block; display: block;
margin-bottom: .25em; margin-bottom: .25rem;
} }
img { img {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-right: .5em; margin-right: .5rem;
} }
} }
</style> </style>

4
src/views/orderlist/OrderListDoc.vue
View File

@ -219,13 +219,13 @@ export default {
.p-caritem-vin { .p-caritem-vin {
font-weight: 600; font-weight: 600;
display: block; display: block;
margin-bottom: .25em; margin-bottom: .25rem;
} }
img { img {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-right: .5em; margin-right: .5rem;
} }
} }
</CodeHighlight> </CodeHighlight>

2
src/views/organizationchart/OrganizationChartDemo.vue
View File

@ -185,7 +185,7 @@ export default {
} }
.node-header, .node-content { .node-header, .node-content {
padding: .5em .7em; padding: .5em .7rem;
} }
.node-header { .node-header {

2
src/views/organizationchart/OrganizationChartDoc.vue
View File

@ -655,7 +655,7 @@ export default {
} }
.node-header, .node-content { .node-header, .node-content {
padding: .5em .7em; padding: .5em .7rem;
} }
.node-header { .node-header {

2
src/views/paginator/PaginatorDemo.vue
View File

@ -65,6 +65,6 @@ export default {
.image-gallery { .image-gallery {
text-align: center; text-align: center;
padding: 1em; padding: 1rem;
} }
</style> </style>

2
src/views/paginator/PaginatorDoc.vue
View File

@ -293,7 +293,7 @@ export default {
.image-gallery { .image-gallery {
text-align: center; text-align: center;
padding: 1em; padding: 1rem;
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>

2
src/views/panelmenu/PanelMenuDemo.vue
View File

@ -148,6 +148,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.p-panelmenu { .p-panelmenu {
width: 22em; width: 22rem;
} }
</style> </style>

4
src/views/picklist/PickListDemo.vue
View File

@ -66,13 +66,13 @@ export default {
.p-caritem-vin { .p-caritem-vin {
font-weight: 600; font-weight: 600;
display: block; display: block;
margin-bottom: .25em; margin-bottom: .25rem;
} }
img { img {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-right: .5em; margin-right: .5rem;
} }
} }
</style> </style>

4
src/views/picklist/PickListDoc.vue
View File

@ -281,13 +281,13 @@ export default {
.p-caritem-vin { .p-caritem-vin {
font-weight: 600; font-weight: 600;
display: block; display: block;
margin-bottom: .25em; margin-bottom: .25rem;
} }
img { img {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-right: .5em; margin-right: .5rem;
} }
} }
</CodeHighlight> </CodeHighlight>

2
src/views/radiobutton/RadioButtonDemo.vue
View File

@ -70,6 +70,6 @@ export default {
} }
label { label {
margin-left: .5em; margin-left: .5rem;
} }
</style> </style>

2
src/views/selectbutton/SelectButtonDemo.vue
View File

@ -70,7 +70,7 @@ export default {
img { img {
width: 24px; width: 24px;
margin-right: .5em; margin-right: .5rem;
} }
} }
</style> </style>

2
src/views/selectbutton/SelectButtonDoc.vue
View File

@ -214,7 +214,7 @@ export default {
img { img {
width: 24px; width: 24px;
margin-right: .5em; margin-right: .5rem;
} }
} }
</CodeHighlight> </CodeHighlight>

4
src/views/slider/SliderDemo.vue
View File

@ -50,10 +50,10 @@ export default {
<style scoped> <style scoped>
.p-slider-horizontal, .p-inputtext { .p-slider-horizontal, .p-inputtext {
width: 14em; width: 14rem;
} }
.p-slider-vertical { .p-slider-vertical {
height: 14em; height: 14rem;
} }
</style> </style>

4
src/views/slider/SliderDoc.vue
View File

@ -213,11 +213,11 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.p-slider-horizontal, .p-inputtext { .p-slider-horizontal, .p-inputtext {
width: 14em; width: 14rem;
} }
.p-slider-vertical { .p-slider-vertical {
height: 14em; height: 14rem;
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>

2
src/views/splitbutton/SplitButtonDemo.vue
View File

@ -75,6 +75,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.p-splitbutton { .p-splitbutton {
margin-right: .5em; margin-right: .5rem;
} }
</style> </style>

2
src/views/splitbutton/SplitButtonDoc.vue
View File

@ -255,7 +255,7 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.p-splitbutton { .p-splitbutton {
margin-right: .5em; margin-right: .5rem;
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>

4
src/views/tabmenu/TabMenuDemo.vue
View File

@ -41,7 +41,7 @@ export default {
/deep/ .tabmenudemo-content { /deep/ .tabmenudemo-content {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 1em; padding: 1rem;
h1 { h1 {
font-weight: 400; font-weight: 400;
@ -49,7 +49,7 @@ export default {
} }
i { i {
margin-right: .5em; margin-right: .5rem;
} }
} }
</style> </style>

4
src/views/tabview/TabViewDemo.vue
View File

@ -140,12 +140,12 @@ export default {
} }
span { span {
margin: 0 .5em; margin: 0 .5rem;
} }
} }
.p-button { .p-button {
margin-right: .25em; margin-right: .25rem;
} }
.p-tabview p { .p-tabview p {

2
src/views/tabview/TabViewDoc.vue
View File

@ -359,7 +359,7 @@ export default {
} }
span { span {
margin: 0 .5em; margin: 0 .5rem;
} }
} }
</CodeHighlight> </CodeHighlight>

2
src/views/tree/TreeDemo.vue
View File

@ -69,6 +69,6 @@ export default {
<style scoped> <style scoped>
button { button {
margin-right: .5em; margin-right: .5rem;
} }
</style> </style>

2
src/views/tree/TreeFilterDemo.vue
View File

@ -115,6 +115,6 @@ export default {
<style scoped> <style scoped>
button { button {
margin-right: .5em; margin-right: .5rem;
} }
</style> </style>

2
src/views/tree/TreeLazyDemo.vue
View File

@ -161,6 +161,6 @@ export default {
<style scoped> <style scoped>
button { button {
margin-right: .5em; margin-right: .5rem;
} }
</style> </style>

2
src/views/tree/TreeSelectionDemo.vue
View File

@ -119,6 +119,6 @@ export default {
<style scoped> <style scoped>
button { button {
margin-right: .5em; margin-right: .5rem;
} }
</style> </style>

2
src/views/tree/TreeTemplatingDemo.vue
View File

@ -103,7 +103,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
button { button {
margin-right: .5em; margin-right: .5rem;
} }
/deep/ .p-tree { /deep/ .p-tree {

2
src/views/treetable/TreeTableDemo.vue
View File

@ -91,6 +91,6 @@ export default {
<style scoped> <style scoped>
button { button {
margin-right: .5em; margin-right: .5rem;
} }
</style> </style>

2
src/views/treetable/TreeTableDoc.vue
View File

@ -1246,7 +1246,7 @@ export default {
.sm-visible { .sm-visible {
display: inline; display: inline;
margin-right: .5em; margin-right: .5rem;
} }
} }
} }

4
src/views/treetable/TreeTableResponsiveDemo.vue
View File

@ -78,7 +78,7 @@ export default {
.sm-visible { .sm-visible {
display: inline; display: inline;
margin-right: .5em; margin-right: .5rem;
} }
} }
} }
@ -122,7 +122,7 @@ export default {
.sm-visible { .sm-visible {
display: inline; display: inline;
margin-right: .5em; margin-right: .5rem;
} }
} }
} }

2
src/views/tristatecheckbox/TriStateCheckboxDemo.vue
View File

@ -44,6 +44,6 @@ export default {
label { label {
font-weight: bold; font-weight: bold;
margin-left: .5em; margin-left: .5rem;
} }
</style> </style>