SCSS px to em - First step
This commit is contained in:
parent
c43727aef9
commit
734c86c5f5
|
|
@ -6,7 +6,7 @@
|
|||
justify-content: center;
|
||||
height: 2.8em;
|
||||
border: none;
|
||||
border-radius: .1em;
|
||||
border-radius: 1px;
|
||||
font-family: vn-font-bold;
|
||||
text-transform: uppercase;
|
||||
font-size: .87rem;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
& > button {
|
||||
width: 100%;
|
||||
padding: 0 1em;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
|
@ -88,15 +88,15 @@
|
|||
}
|
||||
|
||||
&.xs {
|
||||
font-size: .5em;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
&.sm {
|
||||
font-size: .7em;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&.md {
|
||||
font-size: .9em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.lg {
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
& > div {
|
||||
& > .header {
|
||||
display: flex;
|
||||
margin-bottom: .5em;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
height: 2.4em;
|
||||
|
||||
& > .title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: .2em 0;
|
||||
padding: 3px 0;
|
||||
}
|
||||
& > .vn-button {
|
||||
color: inherit;
|
||||
|
|
@ -22,10 +22,10 @@
|
|||
& > .weekdays {
|
||||
display: flex;
|
||||
color: $color-font-secondary;
|
||||
margin-bottom: .5em;
|
||||
padding: .5em 0;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px 0;
|
||||
font-weight: bold;
|
||||
font-size: .8em;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
|
||||
& > section {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@import "variables";
|
||||
|
||||
vn-chip {
|
||||
border-radius: 1em;
|
||||
border-radius: 16px;
|
||||
background-color: $color-bg;
|
||||
color: $color-font;
|
||||
font-size: .9rem;
|
||||
margin: .25em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 2em;
|
||||
height: 32px;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ vn-chip {
|
|||
height: 1.5em;
|
||||
|
||||
& > div {
|
||||
padding: .6em;
|
||||
padding: 9px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -46,17 +46,17 @@ vn-chip {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 .7em;
|
||||
padding: 0 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
& > vn-avatar {
|
||||
margin-left: -0.7em;
|
||||
margin-right: .3em;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
& > vn-icon {
|
||||
|
|
@ -76,6 +76,6 @@ vn-chip {
|
|||
|
||||
vn-avatar {
|
||||
display: inline-block;
|
||||
min-width: 2em;
|
||||
min-width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
vn-debug-info {
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
left: 1em;
|
||||
padding: 1em;
|
||||
min-width: 8em;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
padding: 16px;
|
||||
min-width: 128px;
|
||||
background-color: #3f51b5;
|
||||
color: $color-font-dark;
|
||||
border-radius: 4px;
|
||||
|
|
@ -19,7 +19,7 @@ vn-debug-info {
|
|||
& > h6 {
|
||||
font-weight: normal;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
font-size: 1em;
|
||||
font-size: 16px;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
|
|
@ -27,11 +27,11 @@ vn-debug-info {
|
|||
margin: 0;
|
||||
|
||||
& > li {
|
||||
margin-top: .2em;
|
||||
margin-top: 3px;
|
||||
font-size: .95em;
|
||||
|
||||
& > span {
|
||||
padding: .05em .2em;
|
||||
padding: .05em 3px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 200ms ease-in-out;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
text-transform: uppercase;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: .1em;
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .3em;
|
||||
padding: 4px;
|
||||
color: #666;
|
||||
}
|
||||
& > form {
|
||||
|
|
@ -35,12 +35,12 @@
|
|||
text-transform: uppercase;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: .1em;
|
||||
border-radius: 1px;
|
||||
color: $color-button;
|
||||
font-family: vn-font-bold;
|
||||
padding: .7em;
|
||||
padding: 11px;
|
||||
margin: -0.7em;
|
||||
margin-left: .7em;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
display: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
top: .6em;
|
||||
height: 1em;
|
||||
right: 8px;
|
||||
top: 9px;
|
||||
height: 16px;
|
||||
color: #888;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, .8);
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
}
|
||||
& > .list {
|
||||
max-height: 20em;
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
|
||||
ul {
|
||||
|
|
@ -46,13 +46,13 @@
|
|||
}
|
||||
li, .status {
|
||||
@extend %clickable;
|
||||
padding: .6em;
|
||||
padding: 9px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
|
||||
& > input[type=checkbox] {
|
||||
margin: 0;
|
||||
margin-right: .6em;
|
||||
margin-right: 9px;
|
||||
}
|
||||
&.active {
|
||||
@extend %active;
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
}
|
||||
}
|
||||
&.standout {
|
||||
border-radius: .1em;
|
||||
border-radius: 1px;
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
padding: 0 12px;
|
||||
transition-property: background-color, color;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
color: $color-button;
|
||||
|
||||
& > button {
|
||||
padding: .2em !important;
|
||||
padding: 3px !important;
|
||||
}
|
||||
&:focus {
|
||||
opacity: .6;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ ul.menu {
|
|||
@extend %clickable;
|
||||
display: block;
|
||||
color: inherit;
|
||||
padding: .6em 2em;
|
||||
padding: 9px 32px;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
@ -86,7 +86,7 @@ vn-item,
|
|||
|
||||
& > .vn-button {
|
||||
opacity: .4;
|
||||
margin-left: .5em;
|
||||
margin-left: 8px;
|
||||
transition: opacity 250ms ease-out;
|
||||
padding: 0;
|
||||
font-size: 1.05em;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
vn-multi-check {
|
||||
.vn-check {
|
||||
margin-bottom: .8em
|
||||
margin-bottom: 12px
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ vn-pagination {
|
|||
text-align: center;
|
||||
|
||||
& > div > vn-icon-button {
|
||||
font-size: 2em;
|
||||
font-size: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -21,21 +21,21 @@
|
|||
}
|
||||
& > .window {
|
||||
position: absolute;
|
||||
box-shadow: 0 .1em .4em $color-shadow;
|
||||
box-shadow: 0 1px 6px $color-shadow;
|
||||
z-index: 0;
|
||||
|
||||
& > .arrow {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -.5em;
|
||||
background-color: $color-bg-panel;
|
||||
box-shadow: 0 .1em .4em $color-shadow;
|
||||
box-shadow: 0 1px 6px $color-shadow;
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
& > .content {
|
||||
border-radius: .1em;
|
||||
border-radius: 1px;
|
||||
background-color: $color-bg-panel;
|
||||
height: inherit;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -19,14 +19,14 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
padding: 1em;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > .window {
|
||||
position: relative;
|
||||
box-shadow: 0 0 .4em $color-shadow;
|
||||
box-shadow: 0 0 6px $color-shadow;
|
||||
background-color: $color-bg-panel;
|
||||
border-radius: .2em;
|
||||
border-radius: 3px;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
background: transparent;
|
||||
border-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
margin: .2em 0;
|
||||
margin: 3px 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
vn-scroll-up {
|
||||
top: 5.5em;
|
||||
right: 2em;
|
||||
right: 32px;
|
||||
display: none;
|
||||
position: fixed;
|
||||
}
|
||||
|
|
@ -15,11 +15,11 @@ vn-searchbar {
|
|||
& > .search-param {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
padding: .1em .4em;
|
||||
margin-left: .2em;
|
||||
padding: 1px 6px;
|
||||
margin-left: 3px;
|
||||
display: inline-block;
|
||||
border-radius: .8em;
|
||||
max-width: 12em;
|
||||
border-radius: 12px;
|
||||
max-width: 192px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@ vn-snackbar #shapes {
|
|||
|
||||
vn-snackbar .shape {
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
box-shadow: 0 0 .4em $color-shadow;
|
||||
box-shadow: 0 0 6px $color-shadow;
|
||||
transition: transform 300ms ease-in-out;
|
||||
transform: translateY(20em);
|
||||
box-sizing: border-box;
|
||||
border-radius: .2em;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
padding: .8em;
|
||||
padding: 12px;
|
||||
|
||||
& > .text {
|
||||
text-align: center;
|
||||
|
|
@ -55,13 +55,13 @@ vn-snackbar .shape {
|
|||
& > button {
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
margin-left: .5em;
|
||||
margin-left: 8px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: $color-main;
|
||||
float: right;
|
||||
border: none;
|
||||
padding: .5em;
|
||||
padding: 8px;
|
||||
margin: -.5em
|
||||
}
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@ vn-table {
|
|||
& > * > a.vn-tr,
|
||||
& > * > tr {
|
||||
display: table-row;
|
||||
height: 3em;
|
||||
height: 48px;
|
||||
}
|
||||
vn-thead, vn-tbody, vn-tfoot,
|
||||
thead, tbody, tfoot {
|
||||
|
|
@ -69,8 +69,8 @@ vn-table {
|
|||
& > vn-th,
|
||||
& > th {
|
||||
color: $color-font-light;
|
||||
padding-top: 1em;
|
||||
padding-bottom: .8em;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
& > vn-th,
|
||||
& > vn-td,
|
||||
|
|
@ -86,14 +86,14 @@ vn-table {
|
|||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
text-align: left;
|
||||
padding: .6em .5em;
|
||||
padding: 9px 8px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 5em;
|
||||
max-width: 80px;
|
||||
|
||||
&[number] {
|
||||
text-align: right;
|
||||
width: 6em;
|
||||
width: 96px;
|
||||
}
|
||||
&[center] {
|
||||
text-align: center;
|
||||
|
|
@ -123,7 +123,7 @@ vn-table {
|
|||
}
|
||||
vn-tbody > *,
|
||||
tbody > * {
|
||||
border-bottom: .1em solid $color-spacer-light;
|
||||
border-bottom: 1px solid $color-spacer-light;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
|
|
@ -134,8 +134,8 @@ vn-table {
|
|||
& > vn-td,
|
||||
& > td {
|
||||
.chip {
|
||||
padding: .3em;
|
||||
border-radius: .3em;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
color: $color-font-bg;
|
||||
|
||||
&.notice {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ vn-td-editable {
|
|||
|
||||
text {
|
||||
border: 1px dashed rgba(0, 0, 0, .15);
|
||||
border-radius: 1em;
|
||||
border-radius: 16px;
|
||||
padding: 5px 10px;
|
||||
min-height: 15px;
|
||||
display: block;
|
||||
|
|
@ -36,16 +36,16 @@ vn-td-editable {
|
|||
left: 0;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding: .6em;
|
||||
padding: 9px;
|
||||
overflow: visible;
|
||||
|
||||
& > field {
|
||||
flex: 1;
|
||||
background-color: $color-bg-panel;
|
||||
padding: .5em;
|
||||
box-shadow: 0 0 .4em rgba(0, 0, 0, .2);
|
||||
border-radius: .1em;
|
||||
min-width: 6em;
|
||||
padding: 8px;
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, .2);
|
||||
border-radius: 1px;
|
||||
min-width: 96px;
|
||||
|
||||
& > * {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
height: 20px;
|
||||
min-width: 20px;
|
||||
margin: 6px 0;
|
||||
margin-right: .6em;
|
||||
margin-right: 9px;
|
||||
border: 2px solid #666;
|
||||
}
|
||||
& > .btn > .focus-mark {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
z-index: 150;
|
||||
background-color: $color-bg-dark;
|
||||
color: $color-active-font;
|
||||
border-radius: .2em;
|
||||
border-radius: 3px;
|
||||
|
||||
&.show {
|
||||
display: inherit;
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
& > span {
|
||||
@extend %clickable;
|
||||
border-radius: 50%;
|
||||
padding: .4em;
|
||||
margin: .2em;
|
||||
padding: 6px;
|
||||
margin: 3px;
|
||||
display: inline-flex;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.vn-draggable,
|
||||
[vn-droppable] {
|
||||
border: 2px dashed transparent;
|
||||
border-radius: .5em;
|
||||
border-radius: 8px;
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
width: inherit;
|
||||
height: inherit;
|
||||
box-sizing: border-box;
|
||||
padding: 1em;
|
||||
padding: 16px;
|
||||
|
||||
& > img {
|
||||
cursor: zoom-out;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: .2em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,5 +19,5 @@
|
|||
/* Border Radius */
|
||||
|
||||
.border-radius {
|
||||
border-radius: .3em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
h1, h2, h3, h4, h5, h6 {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: .3em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@import "./variables";
|
||||
|
||||
.vn-descriptor {
|
||||
box-shadow: 0 .1em .2em $color-shadow;
|
||||
box-shadow: 0 1px 3px $color-shadow;
|
||||
|
||||
& > .header {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
vn-home {
|
||||
display: block;
|
||||
padding: .5em;
|
||||
padding: 8px;
|
||||
|
||||
& > div {
|
||||
& > h6 {
|
||||
|
|
@ -27,10 +27,10 @@ vn-home {
|
|||
color: $color-font-dark;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 8em;
|
||||
width: 8em;
|
||||
margin: .5em;
|
||||
padding: 1em;
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
|
|
@ -45,7 +45,7 @@ vn-home {
|
|||
}
|
||||
}
|
||||
& > span {
|
||||
font-size: .9em;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
& > h4 {
|
||||
|
|
|
|||
|
|
@ -7,24 +7,24 @@ vn-layout {
|
|||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 .1em .2em $color-shadow;
|
||||
box-shadow: 0 1px 3px $color-shadow;
|
||||
height: $topbar-height;
|
||||
padding: 0 1em;
|
||||
padding: 0 16px;
|
||||
justify-content: space-between;
|
||||
|
||||
& > .side {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 5em;
|
||||
width: 80px;
|
||||
transition: width 200ms;
|
||||
}
|
||||
& > .start {
|
||||
padding-right: 1em;
|
||||
padding-right: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
& > .logo > img {
|
||||
height: 2em;
|
||||
height: 32px;
|
||||
display: block;
|
||||
}
|
||||
& > .main-title {
|
||||
|
|
@ -32,17 +32,17 @@ vn-layout {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-left: .4em;
|
||||
padding-left: 6px;
|
||||
}
|
||||
& > vn-spinner {
|
||||
padding: 0 .4em;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
& > vn-slot {
|
||||
flex: auto;
|
||||
}
|
||||
& > .end {
|
||||
padding-left: 1em;
|
||||
padding-left: 16px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.show-menu {
|
||||
|
|
@ -66,7 +66,7 @@ vn-layout {
|
|||
}
|
||||
&.left-menu {
|
||||
& > vn-topbar > .start {
|
||||
width: 5em + $menu-width;
|
||||
width: 80px + $menu-width;
|
||||
}
|
||||
& > .main-view {
|
||||
padding-left: $menu-width;
|
||||
|
|
@ -74,13 +74,13 @@ vn-layout {
|
|||
}
|
||||
&.right-menu {
|
||||
& > vn-topbar > .end {
|
||||
width: 5em + $menu-width;
|
||||
width: 80px + $menu-width;
|
||||
}
|
||||
& > .main-view {
|
||||
padding-right: $menu-width;
|
||||
}
|
||||
[fixed-bottom-right] {
|
||||
right: 4em + $menu-width;
|
||||
right: 64px + $menu-width;
|
||||
}
|
||||
}
|
||||
& > .main-view {
|
||||
|
|
@ -94,8 +94,8 @@ vn-layout {
|
|||
}
|
||||
[fixed-bottom-right] {
|
||||
position: fixed;
|
||||
bottom: 2em;
|
||||
right: 2em;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
}
|
||||
&.ng-enter {
|
||||
vn-side-menu {
|
||||
|
|
@ -133,7 +133,7 @@ vn-layout {
|
|||
padding-right: 0;
|
||||
}
|
||||
[fixed-bottom-right] {
|
||||
right: 2em;
|
||||
right: 32px;
|
||||
}
|
||||
}
|
||||
ui-view > * {
|
||||
|
|
@ -150,17 +150,17 @@ vn-layout {
|
|||
& > li {
|
||||
@extend %clickable-light;
|
||||
background-color: $color-main;
|
||||
margin-bottom: .6em;
|
||||
padding: .8em;
|
||||
border-radius: .1em;
|
||||
min-width: 8em;
|
||||
margin-bottom: 9px;
|
||||
padding: 12px;
|
||||
border-radius: 1px;
|
||||
min-width: 128px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
& > vn-icon {
|
||||
padding-right: .3em;
|
||||
padding-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@ vn-login {
|
|||
position: absolute;
|
||||
max-width: 19em;
|
||||
min-width: 15em;
|
||||
padding: 3em;
|
||||
padding: 48px;
|
||||
background-color: $color-bg-panel;
|
||||
box-shadow: 0 0 1em 0 rgba(0, 0, 0, .6);
|
||||
border-radius: .5em;
|
||||
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .6);
|
||||
border-radius: 8px;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
padding-bottom: 1em;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
& > form {
|
||||
& > .vn-textfield {
|
||||
|
|
@ -40,7 +40,7 @@ vn-login {
|
|||
}
|
||||
}
|
||||
& > .footer {
|
||||
margin-top: 2em;
|
||||
margin-top: 32px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ vn-login {
|
|||
& > .spinner-wrapper {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
top: .2em;
|
||||
top: 3px;
|
||||
right: -.5em;
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@ vn-login {
|
|||
background-color: $color-bg-panel;
|
||||
|
||||
& > .box {
|
||||
padding: 1em;
|
||||
padding: 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ vn-side-menu > .menu {
|
|||
width: $menu-width;
|
||||
min-width: $menu-width;
|
||||
background-color: $color-bg-panel;
|
||||
box-shadow: 0 .1em .2em $color-shadow;
|
||||
box-shadow: 0 1px 3px $color-shadow;
|
||||
overflow: auto;
|
||||
top: $topbar-height;
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
padding-bottom: 4px; /* Bottom line-height fix */
|
||||
font-weight: lighter;
|
||||
background-color: $color-main-light;
|
||||
border-bottom: .1em solid $color-main;
|
||||
border-bottom: 1px solid $color-main;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
vn-label-value > section {
|
||||
margin-bottom: .3em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
p:after {
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@
|
|||
|
||||
& > div {
|
||||
display: flex;
|
||||
padding-bottom: .5em;
|
||||
padding-bottom: 8px;
|
||||
|
||||
& > .user {
|
||||
flex: 1;
|
||||
max-width: 8em;
|
||||
max-width: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,5 +33,5 @@
|
|||
float: right;
|
||||
height: initial;
|
||||
vertical-align: middle;
|
||||
font-size: 1em;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@ form vn-horizontal {
|
|||
vn-bg-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
padding: 16px;
|
||||
color: gray;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
|
@ -98,7 +98,7 @@ vn-tool-bar {
|
|||
display: flex;
|
||||
|
||||
& > * {
|
||||
margin-right: .6em;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
html [scrollable] {
|
||||
|
|
@ -115,7 +115,7 @@ html [scrollable] {
|
|||
@extend %active;
|
||||
|
||||
&.small {
|
||||
font-size: .7em
|
||||
font-size: 11px
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
|
||||
& > vn-card {
|
||||
display: flex;
|
||||
height: 12em;
|
||||
height: 192px;
|
||||
|
||||
.image {
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -32,12 +32,12 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: .8em;
|
||||
padding: 12px;
|
||||
|
||||
& > h3 {
|
||||
font-family: vn-font;
|
||||
margin: 0;
|
||||
margin-bottom: .3em;
|
||||
margin-bottom: 4px;
|
||||
font-weight: normal;
|
||||
line-height: initial;
|
||||
font-size: 1.05em;
|
||||
|
|
@ -47,22 +47,22 @@
|
|||
& > h4 {
|
||||
color: $color-font-secondary;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .3em;
|
||||
margin-bottom: 4px;
|
||||
line-height: initial;
|
||||
font-size: 1em;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
& > .tags {
|
||||
padding-bottom: .2em;
|
||||
height: 3em;
|
||||
padding-bottom: 3px;
|
||||
height: 48px;
|
||||
|
||||
& > vn-label-value {
|
||||
font-size: .8em;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
font-size: .8em;
|
||||
font-size: 12px;
|
||||
|
||||
& > .price {
|
||||
overflow: hidden;
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
}
|
||||
& > .priceKg {
|
||||
color: $color-font-secondary;
|
||||
font-size: .8em;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@
|
|||
}
|
||||
.actions {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em
|
||||
right: 16px;
|
||||
top: 16px
|
||||
}
|
||||
}
|
||||
.photo:hover .image {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
vn-claim-basic-data vn-date-picker {
|
||||
padding-left: 5em;
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@ vn-claim-photos {
|
|||
.drop-zone {
|
||||
color: $color-font-secondary;
|
||||
box-sizing: border-box;
|
||||
border-radius: .5em;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
min-height: 100%;
|
||||
|
||||
.empty-rows {
|
||||
padding: 5em $spacing-md;
|
||||
padding: 80px $spacing-md;
|
||||
font-size: 1.4em
|
||||
}
|
||||
|
||||
vn-icon {
|
||||
font-size: 3em
|
||||
font-size: 48px
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ vn-claim-summary {
|
|||
height: 15.5em
|
||||
}
|
||||
.photo .image {
|
||||
border-radius: .2em
|
||||
border-radius: 3px
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ div.vn-dialog {
|
|||
|
||||
.container, .container h1 {
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-size: 1em !important;
|
||||
font-size: 16px !important;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
|
|
@ -12,7 +12,7 @@ div.vn-dialog {
|
|||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0
|
||||
margin: 16px 0
|
||||
}
|
||||
|
||||
footer p {
|
||||
|
|
@ -23,7 +23,7 @@ div.vn-dialog {
|
|||
|
||||
|
||||
.title h1 {
|
||||
font-size: 2em !important;
|
||||
font-size: 32px !important;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ vn-fetched-tags {
|
|||
& > vn-one {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 5em;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
& > vn-one:nth-child(2) h3 {
|
||||
|
|
@ -18,25 +18,25 @@ vn-fetched-tags {
|
|||
text-transform: uppercase;
|
||||
line-height: initial;
|
||||
text-align: center;
|
||||
font-size: 1em
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
& > vn-auto {
|
||||
display: flex;
|
||||
padding-left: .4em;
|
||||
min-width: 12em;
|
||||
padding-left: 6px;
|
||||
min-width: 192px;
|
||||
|
||||
& > .inline-tag {
|
||||
display: inline-block;
|
||||
color: $color-font-secondary;
|
||||
margin-left: .4em;
|
||||
margin-left: 6px;
|
||||
text-align: center;
|
||||
font-size: .8em;
|
||||
font-size: 12px;
|
||||
height: 1.25em;
|
||||
padding: .1em;
|
||||
border-radius: .1em;
|
||||
width: 4em;
|
||||
min-width: 4em;
|
||||
padding: 1px;
|
||||
border-radius: 1px;
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
border: 1px solid $color-spacer;
|
||||
|
||||
&.empty {
|
||||
|
|
@ -48,7 +48,7 @@ vn-fetched-tags {
|
|||
flex-direction: column;
|
||||
|
||||
& > vn-one {
|
||||
padding-bottom: .2em
|
||||
padding-bottom: 3px
|
||||
}
|
||||
& > vn-auto {
|
||||
white-space: initial;
|
||||
|
|
@ -57,7 +57,7 @@ vn-fetched-tags {
|
|||
justify-content: center;
|
||||
|
||||
& > .inline-tag {
|
||||
margin: .1em;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,20 +9,20 @@ vn-item-product {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
.image {
|
||||
height: 7em;
|
||||
width: 7em;
|
||||
height: 112px;
|
||||
width: 112px;
|
||||
|
||||
& > img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: .2em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
vn-label-value:first-of-type section{
|
||||
margin-top: .6em;
|
||||
margin-top: 9px;
|
||||
}
|
||||
vn-fetched-tags vn-horizontal{
|
||||
margin-top: .9em;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ vn-item-summary {
|
|||
}
|
||||
|
||||
.item-state {
|
||||
padding: .4em;
|
||||
padding: 6px;
|
||||
background-color: $color-main;
|
||||
color: $color-font-dark;
|
||||
|
||||
p {
|
||||
font-size: .8em;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ vn-item-summary {
|
|||
padding: 0;
|
||||
|
||||
&:nth-child(1) {
|
||||
border-right: .1em solid white;
|
||||
border-right: 1px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ vn-item-waste {
|
|||
padding-bottom: 4px;
|
||||
font-weight: lighter;
|
||||
background-color: #fde6ca;
|
||||
border-bottom: .1em solid #f7931e;
|
||||
border-bottom: 1px solid #f7931e;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -19,7 +19,7 @@ vn-item-waste {
|
|||
|
||||
vn-table vn-th.waste-family,
|
||||
vn-table vn-td.waste-family {
|
||||
max-width: 4em;
|
||||
width: 4em
|
||||
max-width: 64px;
|
||||
width: 64px
|
||||
}
|
||||
}
|
||||
|
|
@ -35,8 +35,8 @@ vn-order-catalog vn-side-menu div {
|
|||
}
|
||||
& > i:before {
|
||||
font-size: 32pt;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -49,6 +49,6 @@ vn-order-catalog vn-side-menu div {
|
|||
max-width: 100%;
|
||||
}
|
||||
vn-autocomplete[vn-id="type"] .list {
|
||||
max-height: 20em
|
||||
max-height: 320px
|
||||
}
|
||||
}
|
||||
|
|
@ -14,12 +14,12 @@
|
|||
.prices {
|
||||
vn-table {
|
||||
.warehouse {
|
||||
width: 3em;
|
||||
max-width: 3em;
|
||||
width: 48px;
|
||||
max-width: 48px;
|
||||
}
|
||||
.price-kg {
|
||||
color: $color-font-secondary;
|
||||
font-size: .8em
|
||||
font-size: 12px
|
||||
}
|
||||
.vn-input-number {
|
||||
width: 3.5em;
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@ vn-order-summary .summary{
|
|||
max-width: $width-lg;
|
||||
|
||||
& > div > vn-horizontal > vn-one {
|
||||
min-width: 10em !important;
|
||||
min-width: 160px !important;
|
||||
|
||||
&.taxes {
|
||||
border: $border-thin-light;
|
||||
text-align: right;
|
||||
padding: .5em !important;
|
||||
padding: 8px !important;
|
||||
|
||||
& > p {
|
||||
font-size: 1.2em;
|
||||
margin: .2em;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,23 +3,23 @@
|
|||
vn-ticket-components {
|
||||
.vn-table > tbody {
|
||||
&:not(:last-child) {
|
||||
border-bottom: .1em solid $color-spacer-light;
|
||||
border-bottom: 1px solid $color-spacer-light;
|
||||
}
|
||||
& > tr {
|
||||
border-bottom: none;
|
||||
|
||||
&.components {
|
||||
height: 1em;
|
||||
height: 16px;
|
||||
|
||||
& > td {
|
||||
padding-top: .1em;
|
||||
padding-bottom: .1em;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
&:nth-child(2) > td {
|
||||
padding-top: 1em;
|
||||
padding-top: 16px;
|
||||
}
|
||||
&:last-child > td {
|
||||
padding-bottom: 1em;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@ vn-ticket-sale {
|
|||
}
|
||||
}
|
||||
.taxes {
|
||||
max-width: 10em;
|
||||
max-width: 160px;
|
||||
border: $border-thin-light;
|
||||
text-align: right;
|
||||
padding: .5em !important;
|
||||
padding: 8px !important;
|
||||
|
||||
& > p {
|
||||
font-size: 1.2em;
|
||||
margin: .2em;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
vn-dialog.edit {
|
||||
|
|
@ -61,11 +61,11 @@ vn-ticket-sale {
|
|||
vn-horizontal {
|
||||
& > vn-one:nth-child(1) {
|
||||
border-right: 1px solid $color-bg;
|
||||
padding-right: 1em;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
& > vn-one:nth-child(2) {
|
||||
margin-left: 1em
|
||||
margin-left: 16px
|
||||
}
|
||||
}
|
||||
vn-table, table {
|
||||
|
|
|
|||
|
|
@ -32,16 +32,16 @@ vn-ticket-summary .summary {
|
|||
}
|
||||
|
||||
& > vn-horizontal > vn-one {
|
||||
min-width: 10em;
|
||||
min-width: 160px;
|
||||
|
||||
&.taxes {
|
||||
border: $border-thin-light;
|
||||
text-align: right;
|
||||
padding: .5em;
|
||||
padding: 8px;
|
||||
|
||||
& > p {
|
||||
font-size: 1.2em;
|
||||
margin: .2em;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ vn-ticket-summary .summary {
|
|||
|
||||
.vn-table > vn-thead .tax-class,
|
||||
.vn-table > vn-tbody .tax-class {
|
||||
min-width: 11em;
|
||||
min-width: 176px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ vn-worker-time-control {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: .3em 0;
|
||||
padding: 4px 0;
|
||||
|
||||
& > vn-icon {
|
||||
color: $color-font-secondary;
|
||||
padding-right: .1em;
|
||||
padding-right: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue