SCSS px to em: rem for font-size

This commit is contained in:
Juan Ferrer 2020-04-02 15:11:42 +02:00
parent 559cc5eb8c
commit 2249f68d6e
33 changed files with 63 additions and 64 deletions

View File

@ -34,7 +34,7 @@
& > vn-icon { & > vn-icon {
vertical-align: middle; vertical-align: middle;
color: inherit; color: inherit;
font-size: 27px; font-size: 1.68rem;
} }
} }
&.colored { &.colored {
@ -88,19 +88,19 @@
} }
&.xs { &.xs {
font-size: 8px; font-size: .5rem;
} }
&.sm { &.sm {
font-size: 11px; font-size: .7rem;
} }
&.md { &.md {
font-size: 14px; font-size: .875rem;
} }
&.lg { &.lg {
font-size: 19px; font-size: 1.2rem;
} }
} }
&.disabled { &.disabled {

View File

@ -25,7 +25,7 @@
margin-bottom: 8px; margin-bottom: 8px;
padding: 8px 0; padding: 8px 0;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: .75rem;
text-align: center; text-align: center;
& > section { & > section {

View File

@ -9,6 +9,6 @@ vn-data-viewer {
padding: 24px; padding: 24px;
box-sizing: border-box; box-sizing: border-box;
color: $color-font-secondary; color: $color-font-secondary;
font-size: 22px; font-size: 1.375rem;
} }
} }

View File

@ -28,7 +28,7 @@ vn-debug-info {
& > li { & > li {
margin-top: 3px; margin-top: 3px;
font-size: 15px; font-size: .94rem;
& > span { & > span {
padding: 1px 3px; padding: 1px 3px;

View File

@ -25,7 +25,7 @@
color: #888; color: #888;
border-radius: 50%; border-radius: 50%;
background-color: rgba(255, 255, 255, .8); background-color: rgba(255, 255, 255, .8);
font-size: 18px; font-size: 1.125rem;
&:hover { &:hover {
color: $color-font; color: $color-font;

View File

@ -135,7 +135,7 @@
align-items: center; align-items: center;
& > vn-icon { & > vn-icon {
font-size: 24px; font-size: 1.5rem;
} }
} }
& > .prepend > prepend { & > .prepend > prepend {
@ -248,7 +248,7 @@
top: 5px; top: 5px;
color: $color-primary; color: $color-primary;
padding: 0; padding: 0;
font-size: 12px; font-size: .75rem;
} }
& > .control > * { & > .control > * {
&[type=time], &[type=time],
@ -298,7 +298,7 @@
padding: 4px 0; padding: 4px 0;
height: 12px; height: 12px;
color: rgba(0, 0, 0, .4); color: rgba(0, 0, 0, .4);
font-size: 12px; font-size: .75rem;
transform: translateY(-12px); transform: translateY(-12px);
transition-property: opacity, transform, color; transition-property: opacity, transform, color;
transition-duration: 200ms; transition-duration: 200ms;

View File

@ -1,6 +1,6 @@
vn-icon { vn-icon {
display: inline-block; display: inline-block;
font-size: 18pt; font-size: 1.5rem;
text-align: center; text-align: center;
outline: 0; outline: 0;

View File

@ -4,6 +4,6 @@ vn-label-value > section {
& > vn-icon { & > vn-icon {
vertical-align: middle; vertical-align: middle;
color: $color-font-secondary; color: $color-font-secondary;
font-size: 19px font-size: 1.2rem
} }
} }

View File

@ -76,7 +76,7 @@ vn-item,
margin-right: $spacing-md; margin-right: $spacing-md;
& > .vn-icon { & > .vn-icon {
font-size: 19px; font-size: 1.2rem;
} }
} }
&[side] { &[side] {

View File

@ -37,7 +37,7 @@
.vn-range { .vn-range {
& > label { & > label {
font-size: 12px; font-size: .75rem;
&.main { &.main {
color: $color-button; color: $color-button;

View File

@ -21,7 +21,7 @@
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-size: 24px; /* Preferred icon size */ font-size: 1.5rem; /* Preferred icon size */
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
text-transform: none; text-transform: none;

View File

@ -1,5 +1,5 @@
@import "variables"; @import "variables";
/*
// Desktop - Laptop 1360x768 // Desktop - Laptop 1360x768
@media (max-resolution: 119dpi) and (min-device-width: 1340px) and (max-device-width: 1899px) @media (max-resolution: 119dpi) and (min-device-width: 1340px) and (max-device-width: 1899px)
{ {
@ -47,8 +47,7 @@
{ {
html { font-size: 11pt; } html { font-size: 11pt; }
} }
*/
html { font-size: 9pt; }
.vn-hide-narrow { .vn-hide-narrow {
@media (max-width: $mobile-width) { @media (max-width: $mobile-width) {

View File

@ -3,40 +3,40 @@
/* Headings */ /* Headings */
.text-h1, h1 { .text-h1, h1 {
font-size: 32pt; font-size: 2.3rem;
} }
.text-h2, h2 { .text-h2, h2 {
font-size: 28pt; font-size: 2.25rem;
} }
.text-h3, h3 { .text-h3, h3 {
font-size: 24pt; font-size: 2rem;
} }
.text-h4, h4 { .text-h4, h4 {
font-size: 20pt; font-size: 1.6rem;
} }
.text-h5, h5 { .text-h5, h5 {
font-size: 16pt; font-size: 1.3rem;
} }
.text-h6, h6 { .text-h6, h6 {
font-size: 14pt; font-size: 1.125rem;
} }
.text-subtitle1 { .text-subtitle1 {
font-size: 13pt; font-size: 1.06rem;
} }
.text-subtitle2 { .text-subtitle2 {
font-size: 12pt; font-size: 1rem;
} }
.text-body1 { .text-body1 {
font-size: 11pt; font-size: .875rem;
} }
.text-body2 { .text-body2 {
font-size: 11pt; font-size: .875rem;
} }
.text-caption { .text-caption {
font-size: 11pt; font-size: .875rem;
} }
.text-overline { .text-overline {
font-size: 10pt; font-size: .8rem;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {

View File

@ -1,9 +1,9 @@
@import "./util"; @import "./util";
$font-size: 12pt;
$menu-width: 256px; $menu-width: 256px;
$topbar-height: 56px; $topbar-height: 56px;
$mobile-width: 800px; $mobile-width: 800px;
$font-size: 1rem;
// Width // Width

View File

@ -26,7 +26,7 @@
padding: 10px; padding: 10px;
} }
vn-icon { vn-icon {
font-size: 28px; font-size: 1.75rem;
} }
} }
} }
@ -51,7 +51,7 @@
& > vn-icon { & > vn-icon {
padding: $spacing-sm; padding: $spacing-sm;
color: $color-marginal; color: $color-marginal;
font-size: 24px; font-size: 1.5rem;
&.bright { &.bright {
color: $color-main; color: $color-main;
@ -70,7 +70,7 @@
margin: 0 $spacing-sm; margin: 0 $spacing-sm;
& > vn-icon { & > vn-icon {
font-size: 28px; font-size: 1.75rem;
padding: 0; padding: 0;
} }
} }

View File

@ -41,17 +41,17 @@ vn-home {
& > vn-icon { & > vn-icon {
display: block; display: block;
font-size: 56px; font-size: 3.5rem;
} }
} }
& > span { & > span {
font-size: 14px; font-size: .875rem;
text-align: center; text-align: center;
} }
& > h4 { & > h4 {
max-width: 100%; max-width: 100%;
text-align: center; text-align: center;
font-size: 12pt; font-size: 1rem;
overflow: hidden; overflow: hidden;
color: inherit; color: inherit;
margin: 0; margin: 0;

View File

@ -28,7 +28,7 @@ vn-layout {
display: block; display: block;
} }
& > .main-title { & > .main-title {
font-size: 25px; font-size: 1.56rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -166,6 +166,6 @@ vn-layout {
} }
} }
#user { #user {
font-size: 24px; font-size: 1.5rem;
height: auto; height: auto;
} }

View File

@ -7,7 +7,7 @@ vn-login {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $color-font; color: $color-font;
font-size: 17px; font-size: 1.1rem;
font-weight: normal; font-weight: normal;
background-color: $color-bg-dark; background-color: $color-bg-dark;
display: flex; display: flex;

View File

@ -25,7 +25,7 @@
h4 { h4 {
margin-bottom: $spacing-md; margin-bottom: $spacing-md;
text-transform: uppercase; text-transform: uppercase;
font-size: 15pt; font-size: 1.25rem;
line-height: 1; line-height: 1;
padding: 7px; padding: 7px;
padding-bottom: 4px; /* Bottom line-height fix */ padding-bottom: 4px; /* Bottom line-height fix */

View File

@ -8,7 +8,7 @@
align-items: center; align-items: center;
& > vn-icon { & > vn-icon {
font-size: 80px; font-size: 5rem;
color: $color-font-bg-marginal; color: $color-font-bg-marginal;
} }
& > div { & > div {

View File

@ -57,7 +57,7 @@ vn-bg-title {
text-align: center; text-align: center;
padding: 16px; padding: 16px;
color: gray; color: gray;
font-size: 20px; font-size: 1.25rem;
} }
.totalBox { .totalBox {
border: 1px solid #CCC; border: 1px solid #CCC;
@ -115,7 +115,7 @@ html [scrollable] {
@extend %active; @extend %active;
&.small { &.small {
font-size: 11px font-size: .7rem
} }
} }

View File

@ -57,12 +57,12 @@
height: 48px; height: 48px;
& > vn-label-value { & > vn-label-value {
font-size: 12px; font-size: .75rem;
} }
} }
} }
.footer { .footer {
font-size: 12px; font-size: .75rem;
& > .price { & > .price {
overflow: hidden; overflow: hidden;
@ -77,7 +77,7 @@
&:first-child, &:first-child,
&:last-child { &:last-child {
font-size: 22px; font-size: 1.375rem;
} }
} }
@ -87,7 +87,7 @@
} }
& > .priceKg { & > .priceKg {
color: $color-font-secondary; color: $color-font-secondary;
font-size: 12px; font-size: .75rem;
} }
} }
} }

View File

@ -14,7 +14,7 @@
} }
.simulatorTitle { .simulatorTitle {
margin-bottom: 0; margin-bottom: 0;
font-size: 12px; font-size: .75rem;
color: $color-main; color: $color-main;
} }
vn-label-value { vn-label-value {

View File

@ -12,11 +12,11 @@ vn-claim-photos {
.empty-rows { .empty-rows {
padding: 80px $spacing-md; padding: 80px $spacing-md;
font-size: 22px font-size: 1.375rem
} }
vn-icon { vn-icon {
font-size: 48px font-size: 3rem
} }
} }

View File

@ -16,7 +16,7 @@ div.vn-dialog {
} }
footer p { footer p {
font-size: 10px !important; font-size: .625rem !important;
line-height: 10px; line-height: 10px;
} }
} }

View File

@ -31,7 +31,7 @@ vn-fetched-tags {
color: $color-font-secondary; color: $color-font-secondary;
margin-left: 6px; margin-left: 6px;
text-align: center; text-align: center;
font-size: 12px; font-size: .75rem;
height: 20px; height: 20px;
padding: 1px; padding: 1px;
border-radius: 1px; border-radius: 1px;

View File

@ -12,7 +12,7 @@ vn-item-summary {
color: $color-font-dark; color: $color-font-dark;
p { p {
font-size: 12px; font-size: .75rem;
text-align: center; text-align: center;
margin: 0; margin: 0;
@ -21,7 +21,7 @@ vn-item-summary {
line-height: 1; line-height: 1;
} }
&:last-child { &:last-child {
font-size: 24px; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
} }
} }

View File

@ -4,7 +4,7 @@ vn-item-waste {
.header { .header {
margin-bottom: 16px; margin-bottom: 16px;
text-transform: uppercase; text-transform: uppercase;
font-size: 15pt; font-size: 1.25rem;
line-height: 1; line-height: 1;
padding: 7px; padding: 7px;
padding-bottom: 7px; padding-bottom: 7px;

View File

@ -34,7 +34,7 @@ vn-order-catalog vn-side-menu div {
color: #FFF color: #FFF
} }
& > i:before { & > i:before {
font-size: 32pt; font-size: 2.6rem;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }

View File

@ -19,7 +19,7 @@
} }
.price-kg { .price-kg {
color: $color-font-secondary; color: $color-font-secondary;
font-size: 12px font-size: .75rem
} }
.vn-input-number { .vn-input-number {
width: 56px; width: 56px;

View File

@ -12,7 +12,7 @@ vn-order-summary .summary{
padding: 8px !important; padding: 8px !important;
& > p { & > p {
font-size: 19px; font-size: 1.2rem;
margin: 3px; margin: 3px;
} }
} }

View File

@ -19,7 +19,7 @@ vn-ticket-sale {
padding: 8px !important; padding: 8px !important;
& > p { & > p {
font-size: 19px; font-size: 1.2rem;
margin: 3px; margin: 3px;
} }
} }
@ -97,7 +97,7 @@ vn-ticket-sale {
p.simulatorTitle { p.simulatorTitle {
margin-bottom: 0; margin-bottom: 0;
font-size: 12px; font-size: .75rem;
color: $color-main; color: $color-main;
} }
vn-label-value { vn-label-value {

View File

@ -40,7 +40,7 @@ vn-ticket-summary .summary {
padding: 8px; padding: 8px;
& > p { & > p {
font-size: 19px; font-size: 1.2rem;
margin: 3px; margin: 3px;
} }
} }