SCSS em to px: Second step

This commit is contained in:
Juan Ferrer 2020-04-02 14:52:02 +02:00
parent 734c86c5f5
commit 559cc5eb8c
53 changed files with 129 additions and 127 deletions

View File

@ -4,7 +4,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.8em;
height: 44px;
border: none;
border-radius: 1px;
font-family: vn-font-bold;
@ -34,13 +34,13 @@
& > vn-icon {
vertical-align: middle;
color: inherit;
font-size: 1.7em;
font-size: 27px;
}
}
&.colored {
color: white;
background-color: $color-button;
box-shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
transition: background 200ms ease-in-out;
&:not(.disabled) {
@ -80,8 +80,8 @@
}
&.round {
border-radius: 50%;
height: 3.8em;
width: 3.8em;
height: 60px;
width: 60px;
& > button > span {
display: none;
@ -100,7 +100,7 @@
}
&.lg {
font-size: 1.2em;
font-size: 19px;
}
}
&.disabled {

View File

@ -8,7 +8,7 @@
display: flex;
margin-bottom: 8px;
align-items: center;
height: 2.4em;
height: 38px;
& > .title {
flex: 1;
@ -41,7 +41,7 @@
& > .day {
width: 14.28%;
height: 2.5em;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
@ -62,9 +62,9 @@
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: .87em;
width: 2.2em;
height: 2.2em;
font-size: .85rem;
width: 35px;
height: 35px;
cursor: pointer;
outline: 0;
transition: background-color 300ms ease-in-out;

View File

@ -5,7 +5,7 @@ vn-chip {
background-color: $color-bg;
color: $color-font;
font-size: .9rem;
margin: .25em;
margin: 4px;
display: inline-flex;
align-items: center;
height: 32px;
@ -13,7 +13,7 @@ vn-chip {
box-sizing: border-box;
&.small {
height: 1.5em;
height: 24px;
& > div {
padding: 9px;
@ -52,7 +52,7 @@ vn-chip {
overflow: hidden;
& > vn-avatar {
margin-left: -0.7em;
margin-left: -11px;
margin-right: 4px;
vertical-align: middle;
height: 32px;
@ -60,8 +60,8 @@ vn-chip {
}
}
& > vn-icon {
margin-right: .12em;
margin-left: -.12em;
margin-right: 1px;
margin-left: -1px;
vertical-align: middle;
opacity: .6;
cursor: pointer;

View File

@ -1,3 +1,3 @@
.vn-confirm .window {
max-width: 30em
max-width: 480px
}

View File

@ -6,9 +6,9 @@ vn-data-viewer {
& > .empty-rows {
display: block;
text-align: center;
padding: 1.5em;
padding: 24px;
box-sizing: border-box;
color: $color-font-secondary;
font-size: 1.4em;
font-size: 22px;
}
}

View File

@ -19,7 +19,7 @@ vn-debug-info {
& > h6 {
font-weight: normal;
color: rgba(255, 255, 255, .5);
font-size: 16px;
font-size: 1rem;
}
ul {
list-style-type: none;
@ -28,10 +28,10 @@ vn-debug-info {
& > li {
margin-top: 3px;
font-size: .95em;
font-size: 15px;
& > span {
padding: .05em 3px;
padding: 1px 3px;
border-radius: 4px;
transition: background-color 200ms ease-in-out;

View File

@ -20,11 +20,11 @@
& > .body > tpl-body {
display: block;
min-width: 16em;
min-width: 256px;
}
& > .buttons > tpl-buttons {
display: block;
margin-top: 1.5em;
margin-top: 24px;
text-align: right;
button,
@ -39,7 +39,7 @@
color: $color-button;
font-family: vn-font-bold;
padding: 11px;
margin: -0.7em;
margin: -1px;
margin-left: 11px;
}
}

View File

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

View File

@ -76,7 +76,7 @@ vn-item,
margin-right: $spacing-md;
& > .vn-icon {
font-size: 1.2em;
font-size: 19px;
}
}
&[side] {
@ -89,7 +89,7 @@ vn-item,
margin-left: 8px;
transition: opacity 250ms ease-out;
padding: 0;
font-size: 1.05em;
font-size: 1rem;
&:hover {
opacity: 1;

View File

@ -4,7 +4,7 @@ vn-pagination {
text-align: center;
& > div > vn-icon-button {
font-size: 32px;
font-size: 2rem;
padding: 0;
}
}

View File

@ -10,7 +10,7 @@
color: $color-font;
opacity: 0;
transform: translateY(-.6em);
transform: translateY(-9px);
transition-property: opacity, transform;
transition-duration: 200ms;
transition-timing-function: ease-in-out;
@ -27,7 +27,7 @@
& > .arrow {
width: 16px;
height: 16px;
margin: -.5em;
margin: -8px;
background-color: $color-bg-panel;
box-shadow: 0 1px 6px $color-shadow;
position: absolute;

View File

@ -1,5 +1,5 @@
vn-scroll-up {
top: 5.5em;
top: 88px;
right: 32px;
display: none;
position: fixed;

View File

@ -2,15 +2,15 @@
vn-searchbar {
display: block;
max-width: 35em;
max-width: 560px;
margin: 0 auto;
.search-params {
flex: 1;
margin: .05em 0;
margin: 1px 0;
overflow: visible;
display: flex;
max-width: 24em;
max-width: 384px;
& > .search-param {
color: rgba(0, 0, 0, .6);
@ -39,7 +39,7 @@ vn-searchbar {
}
.search-panel {
max-height: 48em;
max-height: 768px;
& > form {
padding: $spacing-lg;

View File

@ -1,11 +1,11 @@
@import "variables";
vn-snackbar #shapes {
max-height: 20.625em;
margin-left: -12.5em;
max-height: 330px;
margin-left: -200px;
position: fixed;
z-index: 100;
width: 25em;
width: 400px;
left: 50%;
bottom: 0
}
@ -14,7 +14,7 @@ vn-snackbar .shape {
background-color: rgba(0, 0, 0, .8);
box-shadow: 0 0 6px $color-shadow;
transition: transform 300ms ease-in-out;
transform: translateY(20em);
transform: translateY(320px);
box-sizing: border-box;
border-radius: 3px;
margin-bottom: 15px;
@ -26,8 +26,8 @@ vn-snackbar .shape {
vn-chip {
position: absolute;
left: -1em;
top: -1em;
left: -16px;
top: -16px;
}
}
@ -62,6 +62,6 @@ vn-snackbar .shape {
float: right;
border: none;
padding: 8px;
margin: -.5em
margin: -8px;
}
}

View File

@ -14,7 +14,7 @@ vn-table {
& > vn-thead,
& > thead {
display: table-header-group;
border-bottom: .15em solid $color-spacer;
border-bottom: 2px solid $color-spacer;
& > * > th {
font-weight: normal;
@ -52,7 +52,7 @@ vn-table {
}
& > vn-tfoot,
& > tfoot {
border-top: .15em solid $color-spacer;
border-top: 2px solid $color-spacer;
display: table-footer-group
}
& > * > vn-tr,
@ -103,7 +103,7 @@ vn-table {
text-align: center;
}
&[expand] {
max-width: 25em;
max-width: 400px;
min-width: 0;
}
vn-icon.bright, i.bright {
@ -111,10 +111,10 @@ vn-table {
}
}
& > :last-child {
padding-right: 1.4em;
padding-right: 22px;
}
& > :first-child {
padding-left: 1.4em;
padding-left: 22px;
}
}
& > a.vn-tr {
@ -158,7 +158,7 @@ vn-table {
vn-icon-menu {
display: inline-block;
color: $color-main;
padding: .25em
padding: 4px
}
}
& > [actions] {

View File

@ -11,7 +11,7 @@ vn-treeview-childs {
list-style: none;
ul {
padding-left: 2.2em;
padding-left: 35px;
}
}
}
@ -37,7 +37,7 @@ vn-treeview-childs {
vn-treeview-child {
line-height: 38px;
font-size: 16px;
font-size: 1rem;
display: block;
.node {

View File

@ -12,8 +12,8 @@
padding: 6px;
margin: 3px;
display: inline-flex;
width: 1.5em;
height: 1.5em;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
outline: none;

View File

@ -1,6 +1,6 @@
vn-table vn-dialog[vn-id="uvc"]{
& > div {
min-width: 18em;
min-width: 288px;
align-items: center;
}

View File

@ -2,7 +2,7 @@
@keyframes nothing {}
@keyframes slideIn {
from {
transform: translate3d(-2em, 0, 0);
transform: translate3d(-32px, 0, 0);
opacity: 0;
}
to {

View File

@ -1,10 +1,10 @@
@import "variables";
html {
font-size: $font-size;
background-color: $color-bg;
overflow: auto;
height: 100%;
font-size: $font-size;
}
body {
height: 100%;

View File

@ -48,6 +48,8 @@
html { font-size: 11pt; }
}
html { font-size: 9pt; }
.vn-hide-narrow {
@media (max-width: $mobile-width) {
display: none;

View File

@ -1,17 +1,17 @@
@import "./util";
$menu-width: 16em;
$topbar-height: 3.5em;
$menu-width: 256px;
$topbar-height: 56px;
$mobile-width: 800px;
$font-size: 16px;
$font-size: 1rem;
// Width
$width-xs: 25em;
$width-sm: 34em;
$width-md: 50em;
$width-lg: 80em;
$width-xl: 100em;
$width-xs: 400px;
$width-sm: 544px;
$width-md: 800px;
$width-lg: 1280px;
$width-xl: 1600px;
// Spacing
@ -115,6 +115,6 @@ $color-alert-light: darken($color-alert, 35%);
// Border
$border-thin: .05em solid $color-spacer;
$border-thin-light: .05em solid $color-spacer-light;
$shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);
$border-thin: 1px solid $color-spacer;
$border-thin-light: 1px solid $color-spacer-light;
$shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);

View File

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

View File

@ -16,7 +16,7 @@ vn-home {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
max-width: 44em;
max-width: 704px;
margin: 0 auto;
& > a {
@ -41,7 +41,7 @@ vn-home {
& > vn-icon {
display: block;
font-size: 3.5em;
font-size: 56px;
}
}
& > span {
@ -55,7 +55,7 @@ vn-home {
overflow: hidden;
color: inherit;
margin: 0;
line-height: 1.5em;
line-height: 24px;
/* & > .bind-letter {
color: #FD0;

View File

@ -28,7 +28,7 @@ vn-layout {
display: block;
}
& > .main-title {
font-size: 1.6em;
font-size: 25px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@ -50,7 +50,7 @@ vn-layout {
}
.vn-button {
color: inherit;
font-size: 1.05em;
font-size: 1rem;
padding: 0;
}
}
@ -166,6 +166,6 @@ vn-layout {
}
}
#user {
font-size: 1.5em;
font-size: 24px;
height: auto;
}

View File

@ -7,7 +7,7 @@ vn-login {
margin: 0;
padding: 0;
color: $color-font;
font-size: 1.1em;
font-size: 17px;
font-weight: normal;
background-color: $color-bg-dark;
display: flex;
@ -18,8 +18,8 @@ vn-login {
& > .box {
box-sizing: border-box;
position: absolute;
max-width: 19em;
min-width: 15em;
max-width: 304px;
min-width: 240px;
padding: 48px;
background-color: $color-bg-panel;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .6);
@ -56,7 +56,7 @@ vn-login {
position: absolute;
width: 0;
top: 3px;
right: -.5em;
right: -8px;
overflow: visible;
}
}

View File

@ -11,7 +11,7 @@
color: $color-font-dark;
margin: 0;
text-align: center;
line-height: 1.3em;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -38,7 +38,7 @@
}
& > * {
margin: $spacing-sm;
min-width: 14em;
min-width: 224px;
padding: 0;
}
& > vn-auto {

View File

@ -1,7 +1,7 @@
@import "variables";
.vn-popover .user-popover {
width: 16em;
width: 256px;
& > .profile-card {
display: flex;
@ -33,5 +33,5 @@
float: right;
height: initial;
vertical-align: middle;
font-size: 16px;
font-size: 1rem;
}

View File

@ -3,7 +3,7 @@
form vn-horizontal {
align-items: center;
min-height: 2.8em;
min-height: 44px;
& > * {
box-sizing: border-box;
@ -57,7 +57,7 @@ vn-bg-title {
text-align: center;
padding: 16px;
color: gray;
font-size: 1.3em;
font-size: 20px;
}
.totalBox {
border: 1px solid #CCC;
@ -65,7 +65,7 @@ vn-bg-title {
justify-content: center;
align-items: center;
padding: $spacing-md;
max-width: 14em;
max-width: 224px;
}
.form {
height: 100%;

View File

@ -8,7 +8,7 @@
& > .product {
box-sizing: border-box;
padding: $spacing-sm;
width: 28em;
width: 448px;
overflow: hidden;
& > vn-card {
@ -40,8 +40,8 @@
margin-bottom: 4px;
font-weight: normal;
line-height: initial;
font-size: 1.05em;
max-height:2.4em;
font-size: 1rem;
max-height: 38px;
overflow: hidden;
}
& > h4 {
@ -49,7 +49,7 @@
text-transform: uppercase;
margin-bottom: 4px;
line-height: initial;
font-size: 16px;
font-size: 1rem;
flex: 1;
}
& > .tags {
@ -77,7 +77,7 @@
&:first-child,
&:last-child {
font-size: 1.4em;
font-size: 22px;
}
}

View File

@ -11,7 +11,7 @@
transition: all .5s;
padding: $spacing-sm;
position: relative;
width: 28em;
width: 448px;
.image {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),

View File

@ -1,7 +1,7 @@
@import "variables";
.vn-popover .discount-popover {
width: 16em;
width: 256px;
.header {
background-color: $color-main;

View File

@ -12,7 +12,7 @@ vn-claim-photos {
.empty-rows {
padding: 80px $spacing-md;
font-size: 1.4em
font-size: 22px
}
vn-icon {
@ -25,8 +25,8 @@ vn-claim-photos {
min-height: 100%;
.photo {
width: 32em;
height: 18em;
width: 512px;
height: 288px;
}
}
}

View File

@ -2,9 +2,9 @@
vn-claim-summary {
section.photo {
height: 15.5em
height: 248px;
}
.photo .image {
border-radius: 3px
border-radius: 3px;
}
}

View File

@ -1,7 +1,7 @@
vn-client-descriptor-popover {
vn-client-descriptor {
display: block;
width: 16em;
width: 256px;
& > vn-card{
margin: 0!important;
}

View File

@ -4,7 +4,7 @@ div.vn-dialog {
.container, .container h1 {
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-size: 16px !important;
font-size: 1rem !important;
h1 {
font-weight: bold;
@ -23,7 +23,7 @@ div.vn-dialog {
.title h1 {
font-size: 32px !important;
font-size: 2rem !important;
margin: 0
}

View File

@ -1,5 +1,5 @@
@import "variables";
.SMSDialog {
min-width: 25em
min-width: 400px
}

View File

@ -1,8 +1,8 @@
vn-ticket-descriptor-popover {
vn-ticket-descriptor {
display: block;
width: 16em;
max-height: 28em;
width: 256px;
max-height: 448px;
& > vn-card {
margin: 0!important;

View File

@ -1,5 +1,5 @@
body > .vn-popover vn-item-descriptor {
display: block;
width: 16em;
min-height: 28em;
width: 256px;
min-height: 448px;
}

View File

@ -18,7 +18,7 @@ vn-fetched-tags {
text-transform: uppercase;
line-height: initial;
text-align: center;
font-size: 16px
font-size: 1rem
}
& > vn-auto {
@ -32,7 +32,7 @@ vn-fetched-tags {
margin-left: 6px;
text-align: center;
font-size: 12px;
height: 1.25em;
height: 20px;
padding: 1px;
border-radius: 1px;
width: 64px;

View File

@ -21,7 +21,7 @@ vn-item-summary {
line-height: 1;
}
&:last-child {
font-size: 1.5em;
font-size: 24px;
font-weight: bold;
}
}

View File

@ -15,7 +15,7 @@ vn-order-catalog {
}
}
& > vn-auto {
width: 28em;
width: 448px;
display: flex;
overflow: hidden;

View File

@ -22,7 +22,7 @@
font-size: 12px
}
.vn-input-number {
width: 3.5em;
width: 56px;
}
}
.footer {

View File

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

View File

@ -1,7 +1,7 @@
vn-route-descriptor-popover {
vn-route-descriptor {
display: block;
width: 16em;
width: 256px;
& > vn-card{
margin: 0!important;
}

View File

@ -1,8 +1,8 @@
vn-ticket-descriptor-popover {
vn-ticket-descriptor {
display: block;
width: 16em;
max-height: 28em;
width: 256px;
max-height: 448px;
& > vn-card {
margin: 0!important;

View File

@ -2,7 +2,7 @@
.add-stowaway {
vn-data-viewer {
width: 40em
width: 640px
}
}

View File

@ -19,7 +19,7 @@ vn-ticket-sale {
padding: 8px !important;
& > p {
font-size: 1.2em;
font-size: 19px;
margin: 3px;
}
}
@ -74,11 +74,11 @@ vn-ticket-sale {
vn-table {
overflow-x: hidden;
overflow-y: auto;
max-height: 25em;
width: 30em;
max-height: 400px;
width: 480px;
}
table {
width: 25em
width: 400px
}
}
.edit-price {

View File

@ -1,5 +1,5 @@
@import "variables";
.SMSDialog {
min-width: 25em
min-width: 400px
}

View File

@ -40,7 +40,7 @@ vn-ticket-summary .summary {
padding: 8px;
& > p {
font-size: 1.2em;
font-size: 19px;
margin: 3px;
}
}
@ -48,7 +48,7 @@ vn-ticket-summary .summary {
&.services {
.vn-table > vn-thead .identifier,
.vn-table > vn-tbody .identifier {
min-width: 3.5em
min-width: 56px
}
.vn-table > vn-thead .tax-class,

View File

@ -13,7 +13,7 @@ vn-worker-calendar {
border: 1px solid #ddd;
margin: $spacing-md;
padding: $spacing-xs;
max-width: 18em;
max-width: 288px;
}
}
}

View File

@ -24,7 +24,7 @@ vn-zone-calendar {
justify-content: space-evenly;
& > .vn-calendar {
max-width: 18em;
max-width: 288px;
.day {
&.event .day-number {

View File

@ -7,7 +7,7 @@ vn-zone-delivery-days {
flex-wrap: wrap;
& > vn-calendar {
min-width: 16.5em;
min-width: 264px;
}
}
form {