Files
old-wiaas-legacy/api-wiaas/client/js/components/packages/packages.less
2018-06-11 11:09:35 +02:00

1455 lines
25 KiB
Plaintext

@eye-open-color: #2184be;
@eye-close-color: #C11B17;
@layer-background: rgba(255, 255, 255, 0.7);
.module-layer {
position: relative;
margin-top: 1%;
background: @layer-background;
margin-bottom: 3%;
padding-bottom: 2%;
}
.packages-lists {
display: inline-block;
border: 1px solid #000;
border-radius: 5px;
width: 95%;
height: 200px;
overflow-y: overlay;
}
.dropzone-packages {
display: inline-block;
width: 100%;
padding: 0 2%;
}
.packages-countries {
display: block;
font-size: 110%;
padding-left: 1%;
padding-top: 1%;
}
.allowed-drop-zone {
background: rgba(223, 240, 216, 0.5);
border: 3px dashed #000;
}
.create-packages-name-description {
display: block;
padding-left: 1%;
padding-top: 1%;
.create-package-name,
.create-package-reference {
display: inline-block;
margin-top: 1%;
padding-left: 1%;
}
.create-package-description {
display: inline-block;
margin-top: 1%;
padding-left: 1%;
}
.package-label {
vertical-align: top;
display: inline-block;
}
}
#upload-image-cdn-container {
.upload-image-title {
text-align: center;
padding-bottom: 1.5%;
}
.drop-box {
margin-top: 2%;
color: #337ab7;
border: 5px dashed #337ab7;
border-radius: 10px;
text-align: center;
vertical-align: middle;
font-size: 130%;
padding: 6% 0;
cursor: pointer;
}
.dragover {
border: 5px dashed #4CC417;
}
.image-characteristic {
padding-bottom: 1%;
}
.use-same-image-for-market {
padding-left: 2%;
}
.image-url-label {
font-weight: bold;
}
}
.images-from-cdn-container {
border: 1px solid #000;
border-radius: 5px;
height: 400px;
overflow: auto;
padding: 1%;
white-space: nowrap;
}
.display-small-image {
padding-bottom: 2%;
display: inline-block;
}
.image-from-cdn {
width: 60px;
height: 39px;
}
.cover-image-from-cdn {
width: 100px;
height: 75px;
}
.url-from-cdn {
display: inline-block;
white-space: nowrap;
}
.cover-image-url-text {
margin: 2% 0;
}
.image-label {
padding-left: 0;
}
.create-package-title {
display: inline-block;
width: 35%;
margin-bottom: 1%;
font-weight: bold;
font-size: 120%;
}
.steps-container {
position: relative;
}
.draggable-icon {
color: #3c763d;
left: 28%;
top: 50%;
font-size: 200%;
text-align: center;
position: absolute;
}
.draggable-icon-steps {
color: #3c763d;
left: 34%;
top: 50%;
font-size: 200%;
text-align: center;
position: absolute;
}
.draggable-icon-template {
color: #3c763d;
right: 0;
top: 45%;
font-size: 200%;
text-align: center;
}
.create-packages-from-template-container {
height: 400px;
overflow: hidden;
}
#product-info-fields {
border: 1px solid #000;
border-radius: 5px;
padding: 5% 0;
min-height: 300px;
font-size: 90%;
}
.product-info-label {
display: inline-block;
width: 40%;
margin-left: 2%;
font-weight: bold;
}
.product-info-text {
display: inline-block;
width: 55%;
}
.create-packages {
vertical-align: top;
}
.create-package-list {
display: inline-block;
width: 95%;
border: 1px solid #000;
border-radius: 5px;
height: 400px;
overflow-y: overlay;
}
.create-package-list-from-template {
display: inline-block;
width: 95%;
border: 1px solid #000;
border-radius: 5px;
overflow-y: scroll;
}
.create-package-row {
width: 100%;
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
cursor: pointer;
}
.not-available-prdocut {
background: rgba(255, 166, 47, 0.3);
}
.create-package-products-display {
display: block;
font-size: 100%;
.create-package-header {
display: inline;
width: 25%;
font-weight: bold;
}
.create-package-product {
width: 70%;
display: inline;
}
}
.create-package-products-info-display {
display: inline;
width: 100%;
font-size: 90%;
.create-package-header {
display: inline;
width: 15%;
font-weight: bold;
}
.create-package-product-info {
display: inline;
width: 30%;
}
}
.product-quantity-box {
font-size: 90%;
.product-quantity {
width: 20%;
}
}
.create-package-row:hover {
background: rgba(223, 240, 216, 0.5);
}
.create-package-row .dndDraggingSource {
display: none;
}
.create-package-row .dndPlaceholder {
background-color: #ddd;
display: block;
}
.create-package-row.selected {
background-color: #dff0d8;
color: #3c763d;
}
.add-products-by-template {
width: 90%;
min-height: 40px;
margin: 2%;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.real-product-in-package {
width: 95%;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
margin: 2%;
padding: 1%;
}
#packages-list {
overflow: hidden;
}
#add-installation-companies-container {
margin-top: 1%;
.installation-companies-list {
.packages-lists;
}
.installation-companies-list-title {
font-weight: bold;
font-size: 120%;
}
.create-packages-lists-container {
display: inline-block;
}
}
#edit-package-installation-companies-container {
margin-top: 1%;
.installation-companies-list {
.packages-lists;
}
.installation-companies-list-title {
font-weight: bold;
font-size: 120%;
}
.create-packages-lists-container {
display: inline-block;
}
}
#create-template-packages-container {
margin-top: 2%;
margin-left: 1%;
.create-packages-titles {
margin-top: 1%;
}
}
#create-template-draggable-icon {
color: #3c763d;
left: 29.5%;
font-size: 200%;
text-align: center;
position: absolute;
}
.create-processes-name-description {
padding-left: 1%;
display: block;
font-size: 110%;
.add-step-label {
cursor: pointer;
}
.create-processes-name {
display: block;
margin-top: 2%;
}
.create-package-name-input {
display: inline-block;
}
.create-process-steps-add-button {
margin-top: 2%;
}
}
.create-process-notice {
width: 98%;
margin-left: 1%;
margin-top: 1%;
}
.select-group {
display: block;
font-size: 110%;
padding-left: 1%;
margin-top: 1%;
}
.create-process-steps-container {
margin-top: 2%;
position: relative;
.create-processes-title {
margin-bottom: 2%;
width: 95%;
font-weight: bold;
font-size: 120%;
}
#product-info-fields {
border: 1px solid #000;
border-radius: 5px;
padding: 5% 0;
min-height: 300px;
font-size: 90%;
}
.product-info-label {
display: inline-block;
width: 40%;
margin-left: 2%;
font-weight: bold;
}
.product-info-text {
display: inline-block;
width: 55%;
}
.create-process-steps {
display: inline-block;
vertical-align: top;
width: 35%;
}
#create-processes-step-dragndrop-process {
margin-left: 10%;
}
.create-processes-list {
display: inline-block;
width: 95%;
border: 1px solid #000;
border-radius: 5px;
height: 400px;
overflow-y: auto;
background: #FFF;
}
}
.create-processes-row {
width: 100%;
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
cursor: pointer;
font-weight: bold;
}
.create-processes-row:hover {
background: rgba(223, 240, 216, 0.5);
}
.create-processes-row .dndDraggingSource {
display: none;
}
.create-processes-row .dndPlaceholder {
background-color: #ddd;
display: block;
}
.create-processes-row.selected {
background-color: #dff0d8;
color: #3c763d;
}
.create-processes-products-display {
display: inline-block;
width: 100%;
font-size: 100%;
padding-left: 2%;
.create-processes-header {
display: inline;
width: 25%;
font-weight: bold;
}
.create-processes-product {
width: 70%;
display: inline;
padding-left: 2%;
}
}
.create-processes-step-number {
border-right: 2px solid black;
width: 10%;
text-align: center;
display: inline-block;
}
.create-processes-button {
width: 100%;
padding-top: 1%;
padding-bottom: 2%;
}
#edit-packages {
.module-layer;
#all-edit-packages-container {
padding: 2%;
position: relative;
.draggable-icon {
color: #3c763d;
left: 29%;
font-size: 200%;
text-align: center;
position: absolute;
}
}
#edit-package-templates-container {
padding: 2%;
position: relative;
}
.draggable-icon {
left: 29%;
}
.edit-buttons {
padding-left: 2%;
padding-bottom: 2%;
}
.reset-button {
min-width: 20%;
}
.edit-package-description-text {
height: 200px;
}
.edit-packages {
position: relative;
}
}
.view-package-process-layer {
.module-layer;
padding: 1%;
.search-process-label {
display: inline-block;
margin-left: 2%;
}
.search-process-input {
margin-left: 2%;
width: 30%;
}
.search-package-process-button {
margin-left: 2%;
}
.glyphicon-eye-open {
color: @eye-open-color;
}
.glyphicon-eye-close {
color: @eye-close-color;
}
.package-layer {
border-bottom: 2px solid rgb(59, 185, 255);
padding-bottom: 1%;
}
.process-info-container {
margin-top: 1%;
vertical-align: top;
border: 2px solid #000;
border-radius: 5px;
padding: 2%;
}
.package-name {
display: inline-block;
width: 96%;
padding: 2%;
text-align: center;
font-weight: bold;
font-size: 120%;
}
.process-name {
display: inline-block;
width: 96%;
padding: 2%;
text-align: center;
font-weight: bold;
}
.step-number {
width: 10%;
display: inline-block;
text-align: center;
font-weight: bold;
}
.process-step {
width: 70%;
display: inline;
border-left: 1px solid #000;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 2%;
}
.process-steps {
height: 30em;
overflow-x: auto;
}
.package-process-row {
width: 100%;
background-color: #fff;
border-top: 1px solid #ddd;
display: block;
padding: 2%;
}
.package-process-details {
float: left;
}
}
#set-package-price-layer {
.module-layer;
.product-category-title {
margin: 5px 0;
font-weight: bold;
}
}
#packages-layer {
.module-layer;
td.info-control {
position: relative;
}
td.info-control:before {
left: 9px;
height: 14px;
width: 14px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 14px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
text-align: center;
font-family: 'Courier New', Courier, monospace;
line-height: 14px;
content: '+';
background-color: #31b131;
cursor: pointer;
}
tr.shown td.info-control:before {
content: '-';
background-color: #d33333;
cursor: pointer;
}
.packages-details-layer {
padding: 1% 0;
}
.package-header {
font-weight: bold;
text-align: center;
}
.big-title {
font-weight: bold;
font-size: 110%;
padding: 2% 0;
}
.small-title {
font-weight: bold;
padding: 5px 0;
}
.warning-message {
font-size: 90%;
}
.warning-icon {
cursor: pointer;
margin-left: 2%;
}
.edit-icon {
font-size: 120%;
cursor: pointer;
margin-left: 5%;
}
.small-price-icon {
font-size: 60%;
}
.set-price-text {
color: #4863A0;
}
.edit-price-text {
color: #437C17;
}
.unavailable-products {
color: #a94442;
}
.margin-exceded {
display: inline-block;
color: #FFA62F;
}
}
#my-packages-layer {
.module-layer;
.unavailable-products {
display: inline-block;
color: #a94442;
}
.margin-exceded {
display: inline-block;
color: #FFA62F;
}
td.info-control {
position: relative;
}
td.info-control:before {
left: 9px;
height: 14px;
width: 14px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 14px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
text-align: center;
font-family: 'Courier New', Courier, monospace;
line-height: 14px;
content: '+';
background-color: #31b131;
cursor: pointer;
}
tr.shown td.info-control:before {
content: '-';
background-color: #d33333;
cursor: pointer;
}
.customer-name {
font-weight: bold;
font-size: 140%;
}
.comission-headers {
font-weight: bold;
padding-top: 1%;
}
.price-group {
padding-top: 2%;
border-bottom: 2px solid rgb(59, 185, 255);
}
.price-group:nth-child(odd) {
background: rgba(59, 185, 255, 0.1);
}
.pay-type {
font-weight: bold;
}
.price-col {
display: inline-block;
width: 15%;
}
.price-col-small {
display: inline-block;
width: 15%;
}
.no-icon {
display: none;
}
.glyphicon-eye-open {
color: @eye-open-color;
}
.glyphicon-eye-close {
color: @eye-close-color;
}
.packages-details-layer {
padding: 1% 0;
}
.package-header {
font-weight: bold;
text-align: center;
}
.big-title {
font-weight: bold;
font-size: 110%;
padding: 2% 0;
}
.small-title {
font-weight: bold;
padding: 5px 0;
}
.warning-message {
font-size: 90%;
}
.warning-icon {
cursor: pointer;
margin-left: 2%;
}
.edit-icon {
font-size: 120%;
cursor: pointer;
margin-left: 5%;
}
}
#select-packages-steps {
.step {
display: inline-block;
padding: 1%;
border-radius: 5px;
cursor: default;
}
.active-step {
background: #2184be;
color: #FFF;
}
.inactive-step {
background: #eee;
color: #aaa;
}
.done-step {
background: #9dc8e2;
color: #FFF;
}
.step-link {
display: inline-block;
background: #2184be;
width: 30px;
height: 2px;
}
}
#choose-customers {
max-height: 500px;
.customer-select-layer {
max-height: 40rem;
overflow-y: auto;
}
.customer-row {
padding: 3%;
border: 1px solid #000;
cursor: pointer;
}
.customer-row:hover {
background: rgba(59, 185, 255, 1);
}
.selected-customer {
background: rgba(59, 185, 255, 0.6);
}
.not-selected {
background: #FFF;
}
.select-customer-for-pricing {
width: 30rem;
margin-bottom: 3rem;
}
}
#action-buttons {
margin-top: 2%;
margin-bottom: 10%;
.prev-btn {
float: right;
margin-right: 3%;
}
.next-btn {
float: right;
margin-right: 5%;
}
.save-btn {
float: right;
margin-right: 5%;
}
}
#select-package-layer {
background: @layer-background;
}
#select-packages-all {
.product-category-title {
margin: 5px 0;
font-weight: bold;
}
.customer-name {
font-weight: bold;
font-size: 140%;
}
.comission-headers {
font-weight: bold;
margin-bottom: 2%;
}
.comissions-row {
margin-bottom: 1%;
padding-bottom: 1%;
border-bottom: 2px solid rgb(59, 185, 255);
}
.pay-type {
font-weight: bold;
}
.pay-group:nth-child(odd) {
background: rgba(59, 185, 255, 0.2);
}
.comission-header {
font-weight: bold;
margin-bottom: 2%;
}
.pay-comission-row {
margin-top: 3px;
padding-bottom: 5px;
}
.pay-comission-col-small {
vertical-align: top;
display: inline-block;
}
.visible-glyph {
cursor: pointer;
font-size: 140%;
}
.glyphicon-eye-open {
color: @eye-open-color;
}
.glyphicon-eye-close {
color: @eye-close-color;
}
.recurent-box {
position: relative;
}
.recurent-tip {
position: absolute;
display: block;
z-index: 9999;
bottom: 3.5em;
}
.recurent-info {
cursor: default;
}
}
#packages-per-pay-type {
h3 {
font-weight: bold;
}
.pay-type {
font-size: 140%;
font-weight: bold;
margin: 1% 0;
}
.price-header {
font-weight: bold;
}
.price-col {
vertical-align: top;
}
.price-group {
padding: 0 0 1% 1%;
border-bottom: 2px solid rgb(59, 185, 255);
}
.price-group:nth-child(odd) {
background: rgba(59, 185, 255, 0.1);
}
.price-small-group {
margin-bottom: 1%;
}
.split-error {
color: #E42217;
}
.btn-extra-text {
display: none;
}
.pay-type-btn:hover .btn-extra-text {
display: inline-block;
}
.pay-type-selection {
margin: 1% 0;
width: 50%;
}
.price-checkbox {
cursor: pointer;
width: 15px;
height: 15px;
}
}
#total-costs {
margin-top: 1%;
margin-bottom: 1%;
.price-header {
font-weight: bold;
}
h3 {
font-weight: bold;
}
}
#comission-split {
margin-top: 1%;
margin-bottom: 3%;
h3 {
font-weight: bold;
margin-bottom: 3%;
}
.user-layer {
display: inline-block;
width: 12%;
text-align: center;
vertical-align: top;
font-weight: bold;
}
.user-icon {
font-size: 220%;
color: #337ab7;
}
.commission-range-layer {
display: inline-block;
width: 40%;
}
.split-percent-sign {
font-size: 130%;
font-weight: bold;
}
.range-input {
display: inline-block;
width: 50%;
margin-left: 5%;
}
.small-input {
display: inline-block;
width: 15%;
}
}
#installation-products-container {
margin-top: 1%;
position: relative;
.create-packages-from-template-installation-container {
height: 200px;
overflow: hidden;
}
.installation-list {
display: inline-block;
width: 95%;
border: 1px solid #000;
border-radius: 5px;
min-height: 200px;
overflow-y: overlay;
}
}
#create-package-from-template-container {
min-height: 200px;
position: relative;
.arrows-icon-without-virtual {
margin-top: 6%;
}
.disable-installation {
background: #ccc;
}
.list-by-category {
display: inline-block;
width: 95%;
border: 1px solid #000;
border-radius: 5px;
overflow: overlay;
height: 400px;
}
.add-products-by-template {
width: 90%;
min-height: 40px;
margin: 2%;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.add-additional-products-by-template {
width: 90%;
min-height: 40px;
margin: 2%;
border: 1px dashed #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
text-align: center;
font-size: 120%;
font-weight: bold;
color: #ddd;
}
.create-packages-from-template-container {
height: 300px;
overflow: hidden;
}
.products-per-category-container {
margin-top: 2%;
}
}
.create-from-template-btn {
padding-top: 2%;
margin-bottom: 2%;
}
#add-virtual-products-container {
margin-top: 1%;
width: 100%;
border-top: 2px solid rgb(59, 185, 255);
border-bottom: 2px solid rgb(59, 185, 255);
background: rgba(59, 185, 255, 0.1);
padding: 2% 0;
margin-bottom: 2%;
.label-value-pair {
margin-bottom: 2%;
}
}
#create-packages-container {
min-height: 400px;
margin-top: 2%;
margin-left: 1%;
position: relative;
.products-per-category-container {
margin-top: 2%;
}
.create-packages-titles {
margin-top: 1%;
}
.create-packages-container {
height: 400px;
overflow: hidden;
}
.create-packages {
vertical-align: top;
}
.list-by-category {
display: inline-block;
width: 95%;
border: 1px solid #000;
border-radius: 5px;
overflow: overlay;
height: 400px;
}
.create-package-description-text {
height: 150px;
}
}
.packages-buttons {
display: inline;
padding-top: 2%;
margin-bottom: 2%;
}
#edit-package-templates {
.module-layer;
}
#update-packages-templates-container {
min-height: 300px;
margin-top: 2%;
margin-left: 1%;
position: relative;
.products-per-category-container {
margin-top: 2%;
}
.create-packages-titles {
margin-top: 1%;
}
.create-packages-container {
height: 300px;
overflow: hidden;
}
.create-packages {
vertical-align: top;
}
.list-by-category {
display: inline-block;
width: 95%;
border: 1px solid #000;
border-radius: 5px;
overflow: overlay;
height: 300px;
}
.create-package-description-text {
height: 150px;
}
}
#create-packages {
.module-layer;
}
#create-packages-templates {
.module-layer;
}
#add-new-virtual-product-template {
padding-left: 1%;
}
.arrows-icon {
color: #3c763d;
left: 28%;
font-size: 200%;
text-align: center;
position: absolute;
top: 50%;
}
.meeting-dates {
margin-top: 1%;
}
#set-additional-installation-days-container {
margin-top: 2%;
margin-bottom: 1%;
.days-input {
margin-left: 1%;
}
}
#set-additional-installation-days-from-template-container {
margin-top: 2%;
margin-bottom: 1%;
.days-input {
margin-left: 1%;
}
}
#package-optios-layer {
.module-layer;
.options-header {
padding: 1%;
text-align: center;
background: #337ab7;
color: #FFF;
font-size: 120%;
font-weight: bold;
}
.options-big-container {
height: 445px;
overflow: hidden;
}
.options-container {
border: 2px solid #337ab7;
border-radius: 10px;
}
.options-list {
min-height: 400px;
height: 400px;
overflow-x: auto;
overflow-y: scroll;
}
.package-layer {
padding: 1%;
border-bottom: 2px solid #337ab7;
cursor: pointer;
}
.option-row {
padding: 2% 1%;
border-bottom: 2px solid #337ab7;
cursor: move;
}
.option-row:hover,
.package-layer:hover {
background: rgba(59, 185, 255, 0.5);
}
.selected-package {
background: rgba(59, 185, 255, 1);
}
.option-group {
margin: 2%;
padding-top: 2%;
border: 2px solid #337ab7;
min-height: 100px;
}
.option-group-name {
padding-left: 2%;
font-weight: bold;
font-size: 110%;
padding-bottom: 2%;
border-bottom: 2px solid #337ab7;
}
.glyphicon-pencil {
cursor: pointer;
}
.add-btn {
margin: 2%;
}
.remove-group {
float: right;
font-size: 70%;
margin-right: 2px;
}
.default-value {
display: inline-block;
float: right;
font-size: 70%;
}
.default-btn {
float: right;
font-size: 70%;
}
}