From c7a6877346068c2d3e98499e05e357a1ba107b3e Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Tue, 5 May 2020 13:35:18 +0300 Subject: [PATCH] Sizing support --- public/themes/luna-amber/theme.css | 37 ++++++++++++++----------- public/themes/luna-green/theme.css | 37 ++++++++++++++----------- public/themes/luna-pink/theme.css | 37 ++++++++++++++----------- public/themes/nova-colored/theme.css | 37 ++++++++++++++----------- public/themes/nova-dark/theme.css | 37 ++++++++++++++----------- public/themes/nova-light/theme.css | 37 ++++++++++++++----------- public/themes/nova-vue/theme.css | 37 ++++++++++++++----------- public/themes/rhea/theme.css | 37 ++++++++++++++----------- public/themes/saga-blue/theme.css | 39 +++++++++++++++------------ public/themes/saga-green/theme.css | 39 +++++++++++++++------------ public/themes/saga-orange/theme.css | 39 +++++++++++++++------------ public/themes/saga-purple/theme.css | 39 +++++++++++++++------------ src/assets/styles/app.scss | 19 ++++++++++++- src/views/button/ButtonDemo.vue | 7 +++++ src/views/button/ButtonDoc.vue | 7 +++++ src/views/inputtext/InputTextDemo.vue | 13 +++++---- src/views/inputtext/InputTextDoc.vue | 7 +++++ 17 files changed, 303 insertions(+), 202 deletions(-) diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index c3ac5d022..e50866d5c 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.857em 0; } .p-datepicker table th { @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #dedede; background: #585858; padding: 0.429em 0.429em; @@ -845,7 +851,7 @@ border-color: #FFB300; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 20px; color: #dedede; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #FFB300; border: 1px solid #FFB300; padding: 0.429em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #212121; background: #FFB300; border: 1px solid #FFB300; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-treetable .p-treetable-footer { @@ -2157,7 +2162,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 700; - font-size: 14px; + font-size: 1em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: auto; @@ -2736,7 +2741,7 @@ background: #191919; min-width: 28px; height: 28px; - font-size: 16px; + font-size: 1.143em; z-index: 1; border-radius: 50%; } @@ -3313,7 +3318,7 @@ padding: 0.571em 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 050bae5ef..ece7b1d53 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.857em 0; } .p-datepicker table th { @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #dedede; background: #585858; padding: 0.429em 0.429em; @@ -845,7 +851,7 @@ border-color: #1ea04c; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 20px; color: #dedede; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #1ea04c; border: 1px solid #1ea04c; padding: 0.429em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #1ea04c; border: 1px solid #1ea04c; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-treetable .p-treetable-footer { @@ -2157,7 +2162,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 700; - font-size: 14px; + font-size: 1em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: auto; @@ -2736,7 +2741,7 @@ background: #191919; min-width: 28px; height: 28px; - font-size: 16px; + font-size: 1.143em; z-index: 1; border-radius: 50%; } @@ -3313,7 +3318,7 @@ padding: 0.571em 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 09ee0e9df..39d5cec01 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.857em 0; } .p-datepicker table th { @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #dedede; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #dedede; background: #585858; padding: 0.429em 0.429em; @@ -845,7 +851,7 @@ border-color: #cc285c; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 20px; color: #dedede; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #cc285c; border: 1px solid #cc285c; padding: 0.429em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #cc285c; border: 1px solid #cc285c; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-treetable .p-treetable-footer { @@ -2157,7 +2162,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 700; - font-size: 14px; + font-size: 1em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: auto; @@ -2736,7 +2741,7 @@ background: #191919; min-width: 28px; height: 28px; - font-size: 16px; + font-size: 1.143em; z-index: 1; border-radius: 50%; } @@ -3313,7 +3318,7 @@ padding: 0.571em 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css index 673733340..ae6e3d0b6 100644 --- a/public/themes/nova-colored/theme.css +++ b/public/themes/nova-colored/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.857em 0; } .p-datepicker table th { @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #333333; background: #ffffff; padding: 0.429em 0.429em; @@ -845,7 +851,7 @@ border-color: #007ad9; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 20px; color: #333333; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #007ad9; border: 1px solid #007ad9; padding: 0.429em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #007ad9; border: 1px solid #007ad9; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-treetable .p-treetable-footer { @@ -2157,7 +2162,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 700; - font-size: 14px; + font-size: 1em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: auto; @@ -2736,7 +2741,7 @@ background: #ffffff; min-width: 28px; height: 28px; - font-size: 16px; + font-size: 1.145em; z-index: 1; border-radius: 50%; } @@ -3313,7 +3318,7 @@ padding: 0.571em 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css index db8e16f9d..e8f67d6f5 100644 --- a/public/themes/nova-dark/theme.css +++ b/public/themes/nova-dark/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.857em 0; } .p-datepicker table th { @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #333333; background: #ffffff; padding: 0.429em 0.429em; @@ -845,7 +851,7 @@ border-color: #007ad9; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 20px; color: #333333; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #007ad9; border: 1px solid #007ad9; padding: 0.429em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #007ad9; border: 1px solid #007ad9; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-treetable .p-treetable-footer { @@ -2157,7 +2162,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 700; - font-size: 14px; + font-size: 1em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: auto; @@ -2736,7 +2741,7 @@ background: #ffffff; min-width: 28px; height: 28px; - font-size: 16px; + font-size: 1.145em; z-index: 1; border-radius: 50%; } @@ -3313,7 +3318,7 @@ padding: 0.571em 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css index c87a65d24..4ad9dd364 100644 --- a/public/themes/nova-light/theme.css +++ b/public/themes/nova-light/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.857em 0; } .p-datepicker table th { @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #333333; background: #ffffff; padding: 0.429em 0.429em; @@ -845,7 +851,7 @@ border-color: #007ad9; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 20px; color: #333333; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #007ad9; border: 1px solid #007ad9; padding: 0.429em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #007ad9; border: 1px solid #007ad9; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-treetable .p-treetable-footer { @@ -2157,7 +2162,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 700; - font-size: 14px; + font-size: 1em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: auto; @@ -2736,7 +2741,7 @@ background: #ffffff; min-width: 28px; height: 28px; - font-size: 16px; + font-size: 1.145em; z-index: 1; border-radius: 50%; } @@ -3313,7 +3318,7 @@ padding: 0.571em 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 505a4c794..13248f3cc 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.857em 0; } .p-datepicker table th { @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #333333; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #333333; background: #ffffff; padding: 0.429em 0.429em; @@ -845,7 +851,7 @@ border-color: #41b883; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 20px; color: #333333; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #41b883; border: 1px solid #41b883; padding: 0.429em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #41b883; border: 1px solid #41b883; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 0.857em 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-treetable .p-treetable-footer { @@ -2157,7 +2162,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 700; - font-size: 14px; + font-size: 1em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: auto; @@ -2736,7 +2741,7 @@ background: #ffffff; min-width: 28px; height: 28px; - font-size: 16px; + font-size: 1.145em; z-index: 1; border-radius: 50%; } @@ -3313,7 +3318,7 @@ padding: 0.571em 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 52e5999a1..cb86f5c6d 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 2px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #666666; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.857em 0; } .p-datepicker table th { @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #666666; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #666666; background: #f4f4f4; padding: 0.429em 0.429em; @@ -845,7 +851,7 @@ border-color: #7B95A3; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 20px; color: #666666; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #7B95A3; border: 1px solid #7B95A3; padding: 0.429em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 2px; } @@ -1253,7 +1258,7 @@ padding: 0.857em 1em; border-top-left-radius: 2px; border-top-right-radius: 2px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 0.857em 1em; border-top-left-radius: 2px; border-top-right-radius: 2px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #7B95A3; border: 1px solid #7B95A3; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 2px; display: flex; @@ -1820,7 +1825,7 @@ padding: 0.857em 1em; border-top-left-radius: 2px; border-top-right-radius: 2px; - font-size: 14px; + font-size: 1em; font-weight: 700; } .p-treetable .p-treetable-footer { @@ -2157,7 +2162,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 700; - font-size: 14px; + font-size: 1em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: auto; @@ -2736,7 +2741,7 @@ background: #ffffff; min-width: 28px; height: 28px; - font-size: 16px; + font-size: 1.143em; z-index: 1; border-radius: 50%; } @@ -3313,7 +3318,7 @@ padding: 0.571em 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index b3cd10c0a..d7f4a7e4a 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.5em 0; } .p-datepicker table th { @@ -240,10 +246,10 @@ margin-top: 0.2em; } .p-datepicker .p-timepicker span { - font-size: 1.286em; + font-size: 1.25em; } .p-datepicker .p-timepicker > div { - padding: 0 0.429em; + padding: 0 0.5em; } .p-datepicker.p-datepicker-timeonly .p-timepicker { border-top: 0 none; @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #495057; background: #ffffff; padding: 0.5em 0.5em; @@ -845,7 +851,7 @@ border-color: #3498DB; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 14px; color: #495057; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #3498DB; border: 1px solid #3498DB; padding: 0.5em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #3498DB; border: 1px solid #3498DB; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-treetable .p-treetable-footer { @@ -2174,7 +2179,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 600; - font-size: 18px; + font-size: 1.25em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2em; @@ -3347,7 +3352,7 @@ padding: 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 9dc8ee873..05a484bf2 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.5em 0; } .p-datepicker table th { @@ -240,10 +246,10 @@ margin-top: 0.2em; } .p-datepicker .p-timepicker span { - font-size: 1.286em; + font-size: 1.25em; } .p-datepicker .p-timepicker > div { - padding: 0 0.429em; + padding: 0 0.5em; } .p-datepicker.p-datepicker-timeonly .p-timepicker { border-top: 0 none; @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #495057; background: #ffffff; padding: 0.5em 0.5em; @@ -845,7 +851,7 @@ border-color: #1ABC9C; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 14px; color: #495057; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #1ABC9C; border: 1px solid #1ABC9C; padding: 0.5em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #1ABC9C; border: 1px solid #1ABC9C; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-treetable .p-treetable-footer { @@ -2174,7 +2179,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 600; - font-size: 18px; + font-size: 1.25em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2em; @@ -3347,7 +3352,7 @@ padding: 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 5b94a3470..42e46423b 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.5em 0; } .p-datepicker table th { @@ -240,10 +246,10 @@ margin-top: 0.2em; } .p-datepicker .p-timepicker span { - font-size: 1.286em; + font-size: 1.25em; } .p-datepicker .p-timepicker > div { - padding: 0 0.429em; + padding: 0 0.5em; } .p-datepicker.p-datepicker-timeonly .p-timepicker { border-top: 0 none; @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #495057; background: #ffffff; padding: 0.5em 0.5em; @@ -845,7 +851,7 @@ border-color: #F39C12; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 14px; color: #495057; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #F39C12; border: 1px solid #F39C12; padding: 0.5em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #F39C12; border: 1px solid #F39C12; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-treetable .p-treetable-footer { @@ -2174,7 +2179,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 600; - font-size: 18px; + font-size: 1.25em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2em; @@ -3347,7 +3352,7 @@ padding: 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index e2b4661b9..5dce9fd4e 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -5,10 +5,16 @@ .p-component { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; font-weight: normal; text-decoration: none; } +.p-component.p-component-sm { + font-size: 0.75rem; +} +.p-component.p-component-lg { + font-size: 1.25rem; +} .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); @@ -24,7 +30,7 @@ } .p-link { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; border-radius: 3px; } @@ -73,7 +79,7 @@ } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -177,7 +183,7 @@ margin-right: 0.5em; } .p-datepicker table { - font-size: 14px; + font-size: 1rem; margin: 0.5em 0; } .p-datepicker table th { @@ -240,10 +246,10 @@ margin-top: 0.2em; } .p-datepicker .p-timepicker span { - font-size: 1.286em; + font-size: 1.25em; } .p-datepicker .p-timepicker > div { - padding: 0 0.429em; + padding: 0 0.5em; } .p-datepicker.p-datepicker-timeonly .p-timepicker { border-top: 0 none; @@ -361,7 +367,7 @@ } .p-chips .p-chips-multiple-container .p-chips-input-token input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; + font-size: 1rem; color: #495057; padding: 0; margin: 0; @@ -629,7 +635,7 @@ } .p-inputtext { - font-size: 14px; + font-size: 1rem; color: #495057; background: #ffffff; padding: 0.5em 0.5em; @@ -845,7 +851,7 @@ border-color: #9B59B6; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { - font-size: 12px; + font-size: 0.75em; transition-duration: 0.2s; } .p-radiobutton .p-radiobutton-box.p-highlight { @@ -863,7 +869,6 @@ } .p-rating .p-rating-icon { - font-size: 14px; color: #495057; margin-left: 0.5em; transition: color 0.2s, box-shadow 0.2s; @@ -1057,7 +1062,7 @@ background: #9B59B6; border: 1px solid #9B59B6; padding: 0.5em 1em; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; } @@ -1253,7 +1258,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-datatable .p-datatable-footer { @@ -1390,7 +1395,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-dataview .p-dataview-content { @@ -1442,7 +1447,7 @@ color: #ffffff; background: #9B59B6; border: 1px solid #9B59B6; - font-size: 14px; + font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s; border-radius: 3px; display: flex; @@ -1820,7 +1825,7 @@ padding: 1em; border-top-left-radius: 3px; border-top-right-radius: 3px; - font-size: 18px; + font-size: 1.25em; font-weight: 600; } .p-treetable .p-treetable-footer { @@ -2174,7 +2179,7 @@ } .p-dialog .p-dialog-titlebar .p-dialog-title { font-weight: 600; - font-size: 18px; + font-size: 1.25em; } .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon { width: 2em; @@ -3347,7 +3352,7 @@ padding: 1em; } .p-terminal .p-terminal-input { - font-size: 14px; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index b69f421d0..21297381e 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -14,6 +14,10 @@ $focusBorderColor:#8dcdff; +html { + font-size: 14px; +} + body { margin: 0px; height: 100%; @@ -25,7 +29,6 @@ body { color: #495057; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: 14px; } @@ -538,6 +541,20 @@ a { } } + .component-sizes { + display: inline-flex; + flex-direction: column; + + .p-component { + margin-bottom: 1em; + flex: 0 0 auto; + + &:last-child{ + margin-bottom: 0; + } + } + } + &.content-submenu { background-color: #3e5265; padding: 15px 30px; diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue index 2ad5237e4..ac5763645 100755 --- a/src/views/button/ButtonDemo.vue +++ b/src/views/button/ButtonDemo.vue @@ -45,6 +45,13 @@