.modal-mask { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; top: 0; position: fixed; width: 100%; z-index: 1000; } .modal-mask .modal-content { border: none; box-shadow: 0 0 4px 0 rgba(86, 86, 86, 0.5); left: 50%; max-height: 90%; padding: 40px 20px; top: 50%; transform: translate(-50%, -50%); width: 900px; } .modal-mask .modal-content .btn-close { background-color: #fff; border: none; border-radius: 100%; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); padding-left: 9px; position: absolute; top: -15px; opacity: 1; right: -15px; height: 40px; width: 40px; } .modal-mask .modal-content .btn-close:after { color: #a3a3a3; content: "\00D7"; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } .modal-mask .modal-content .modal-body { margin-bottom: 20px; max-height: calc(100vh - 120px); padding: 0 20px; width: 100%; } .modal-mask .modal-content .modal-body .photos { list-style: none; border: 1px solid #e6e6e6; padding: 5px; position: relative; } .modal-mask .modal-content .modal-body .photos .photo { align-items: center; display: flex; display: block\0; justify-content: center; padding-top: 100%; text-align: center\0; vertical-align: text-top; } .modal-mask .modal-content .modal-body .photos .photo img { left: 50%; max-height: 100%; max-width: 100%; position: absolute; top: 50%; transform: translate(-50%, -50%); } .modal-mask .modal-content .modal-body .photos .photo-button { background-color: rgba(255, 255, 255, 0.7); border-radius: 100%; cursor: pointer; height: 30px; position: absolute; top: 50%; transform: translateY(-50%); width: 30px; z-index: 10; } .modal-mask .modal-content .modal-body .photos .photo-button:after { border: 0px solid #A3A3A3; border-width: 2px 2px 0 0; content: ""; display: block; height: 30%; left: 50%; position: absolute; top: 50%; width: 30%; } .modal-mask .modal-content .modal-body .photos .photo-button.photo-prev { left: 10px; } .modal-mask .modal-content .modal-body .photos .photo-button.photo-prev:after { transform: translate(-35%, -50%) rotate(-135deg); } .modal-mask .modal-content .modal-body .photos .photo-button.photo-next { right: 10px; } .modal-mask .modal-content .modal-body .photos .photo-button.photo-next:after { transform: translate(-75%, -50%) rotate(45deg); } .modal-mask .modal-content .modal-body .title { font-size: 20px; font-weight: 500; } .modal-mask .modal-content .modal-body .brief { font-size: 14px; font-weight: 500; letter-spacing: 0.3px; color: #9A9EA2; } .modal-mask .modal-content .modal-body .price-title { font-size: 14px; font-weight: 500; letter-spacing: 0.26px; color: #9a9ea2; } .modal-mask .modal-content .modal-body .variant-price { font-size: 24px; font-weight: bold; color: #D50000; } .modal-mask .modal-content .modal-body .variant-del-price { font-size: 14px; font-weight: 500; letter-spacing: 0.26px; color: #9a9ea2; margin: 5px; } .modal-mask .modal-content .modal-body .product-thumbnail { width: 76px; height: 76px; padding: 2px; overflow: hidden; display: inline-block; cursor: pointer; border: 1px solid transparent; } .modal-mask .modal-content .modal-body .product-thumbnail.focus { border: 1px solid grey; border-radius: 2px; } .modal-mask .modal-content .modal-body .product-thumbnail img { object-fit: cover; width: 100%; height: 100%; } .modal-mask .modal-content .modal-body .variant-quantity { display: flex; flex-direction: column; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant { display: flex; flex-direction: row; flex: 1 0 0; margin-bottom: 18px; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant.hide { display: none; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant.normal select { height: 40px; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option { margin: 10px 0; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .title { flex: 0 0 100%; margin-bottom: 6px; color: #565656; font-size: 14px; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image { display: flex; flex: 0 0 100%; flex-wrap: wrap; align-items: center; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option { display: block; position: relative; justify-content: center; align-items: center; width: 40px; height: 40px; margin: 0 3px; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.focus, .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.selected { width: 46px; height: 46px; margin: 0; padding: 2px; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.focus { border: 1px solid #E2E2E2; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.selected { border: 1px solid #624D4A; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option.disabled { opacity: 0.2; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .color-image .image-option img { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 4px); } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .advance .option { display: inline-block; min-width: 50px; margin-right: 10px; margin-bottom: 10px; padding: 5px 24px; color: #624D4A; border: 1px solid #624D4A; border-radius: 5px; font-size: 14px; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .advance .option.selected { color: #ffffff; background-color: #624D4A; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant-options .product-variant-option .advance .option.disabled { color: #A3A3A3; background-color: #F9F9F9; border-color: #A3A3A3; opacity: 0.7; } .modal-mask .modal-content .modal-body .variant-quantity .product-quantity { border-radius: 5px; flex: 1 0 0; height: 40px; } .modal-mask .modal-content .modal-body .variant-quantity .product-quantity .btn { border: 1px solid #e2e2e2; height: 40px; } @media (min-width: 769px) { .modal-mask .modal-content .modal-body .variant-quantity .product-quantity .btn.add-down:hover, .modal-mask .modal-content .modal-body .variant-quantity .product-quantity .btn.add-up:hover { border-color: #624D4A; color: #624D4A; } } .modal-mask .modal-content .modal-body .add-button-wrapper { margin-top: 10px; } .modal-mask .modal-content .modal-body .section-heading { margin: 50px 0 30px; } .modal-mask .modal-content .modal-body .ckeditor img { max-width: 100%; } .modal-mask .modal-content .btn.add-button { background-color: #ffffff; border: solid 1px #624D4A; border-radius: 3px; color: #624D4A; height: 40px; cursor: pointer; width: 100%; } @media (min-width: 769px) { .modal-mask .modal-content .btn.add-button:hover { background-color: #624D4A; color: #fff; } } .modal-mask .modal-content .btn.add-button.selected { background-color: #624D4A; color: #fff; } .modal-mask .modal-content .btn.add-button.adding { cursor: not-allowed; } .modal-mask .modal-content .btn.add-button.secondary { background: #ABB4BB; border-color: #ABB4BB; border-radius: 5px; color: #ffffff; transition: all ease-in-out .15s; text-align: center; } .modal-mask .modal-content .btn.add-button.secondary:hover { background: #86919B; border-color: #86919B; } .modal-mask .modal-content .btn.add-button:disabled { color: #A3A3A3; background: #F9F9F9; border-color: #E2E2E2; opacity: .7; } .modal-mask .modal-content .btn.add-button.btn-default { display: block; } .modal-mask .modal-content .btn.add-button.btn-mobile { display: none; } @media (max-width: 991px) { .modal-mask .modal-content { width: 750px; } } @media (max-width: 768px) { .modal-mask .modal-content { width: 90%; } .modal-mask .modal-content .modal-body .variant-quantity { flex-wrap: wrap; } .modal-mask .modal-content .modal-body .variant-quantity .product-variant { flex: 0 0 100%; margin-bottom: 15px; } .modal-mask .modal-content .modal-body .variant-quantity .product-quantity { flex: 0 0 100%; } } @media (max-width: 576px) { .modal-mask .modal-content { border-radius: 10px 10px 0 0; height: calc(100% - 80px); padding: 24px 0px 48px; top: 80px; transform: translateX(-50%); width: 101%; } .modal-mask .modal-content.only-description { padding-bottom: 0px; } .modal-mask .modal-content .btn-close { right: 10px; top: -55px; } .modal-mask .modal-content .modal-body .section-heading { margin-top: 30px; } .modal-mask .modal-content .btn.add-button.btn-default { display: none; } .modal-mask .modal-content .btn.add-button.btn-mobile { bottom: 16px; display: block; margin: 0 20px; position: fixed; width: calc(100% - 40px); z-index: 100; } } @media (min-width: 577px) { .modal-enter-active, .modal-leave-active { transition: opacity .5s; } .modal-enter, .modal-leave-to { opacity: 0; } } @media (max-width: 576px) { .modal-enter-active, .modal-leave-active { transition: all .5s; } .modal-enter, .modal-leave-to { padding-top: 100vh; opacity: 0; } }