744 lines
16 KiB
SCSS
744 lines
16 KiB
SCSS
@import "@admin/sass/wysiwyg";
|
|
|
|
.v-toast {
|
|
padding: 20px 20px 60px;
|
|
}
|
|
|
|
.product-form {
|
|
.box {
|
|
.box-header {
|
|
.toggle-accordion {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin: 1px 10px 0 0;
|
|
padding: 0 5px;
|
|
color: #333333;
|
|
|
|
cursor: pointer;
|
|
|
|
&.collapsed {
|
|
i {
|
|
transform: rotateX(180deg);
|
|
}
|
|
}
|
|
|
|
i {
|
|
transition: 150ms ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-body {
|
|
> .form-group {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-responsive {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.accordion-box-content {
|
|
.panel-heading {
|
|
[data-transition="false"] {
|
|
&:after {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.accordion-box-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.insert-template {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
select {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-media-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 20%);
|
|
grid-template-rows: 1fr 1fr;
|
|
margin: -6px;
|
|
}
|
|
|
|
.media-grid-item {
|
|
margin: 6px;
|
|
border: 1px solid #d2d6de;
|
|
border-radius: 3px;
|
|
|
|
&:first-child {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 3;
|
|
}
|
|
|
|
&.handle {
|
|
.image-holder {
|
|
cursor: move;
|
|
}
|
|
}
|
|
|
|
&.media-picker {
|
|
border-width: 2px;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.image-holder {
|
|
height: auto;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding-bottom: 90%;
|
|
border: none;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.variants {
|
|
position: relative;
|
|
|
|
.fade {
|
|
&-enter-active,
|
|
&-leave-active {
|
|
position: absolute;
|
|
transition: 150ms ease-in-out;
|
|
}
|
|
|
|
&-enter,
|
|
&-leave-to {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bulk-edit-variants {
|
|
.product-media-grid {
|
|
margin-bottom: -6px;
|
|
}
|
|
}
|
|
|
|
.variants-group {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.panel-group {
|
|
width: 100%;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.panel-title {
|
|
[data-toggle="collapse"] {
|
|
padding: 12px 15px 13px;
|
|
}
|
|
|
|
.checkbox {
|
|
display: flex;
|
|
min-height: 0;
|
|
padding-top: 0;
|
|
|
|
label {
|
|
min-height: 18px;
|
|
}
|
|
|
|
[type="checkbox"]:checked + label:before,
|
|
[type="checkbox"]:not(:checked) + label:before {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
[type="checkbox"]:checked + label:after,
|
|
[type="checkbox"]:not(:checked) + label:after {
|
|
font-size: 12px;
|
|
line-height: 17px;
|
|
}
|
|
}
|
|
|
|
.switch {
|
|
display: inline-flex;
|
|
margin-right: 25px;
|
|
padding-top: 0;
|
|
|
|
[type="checkbox"] {
|
|
&:checked + label::after {
|
|
left: 14px;
|
|
}
|
|
}
|
|
|
|
label {
|
|
padding-left: 30px;
|
|
|
|
&:before {
|
|
top: 5px;
|
|
height: 10px;
|
|
width: 26px;
|
|
}
|
|
|
|
&:after {
|
|
height: 16px;
|
|
width: 16px;
|
|
top: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-body {
|
|
> .row {
|
|
> .col-sm-4 {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
> .col-sm-8 {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.variant-fields {
|
|
margin-bottom: -10px;
|
|
overflow: hidden;
|
|
|
|
> .row {
|
|
> .col-sm-6 {
|
|
&:nth-child(1) {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.variant-name {
|
|
line-height: 18px;
|
|
}
|
|
|
|
.variant-badge {
|
|
margin-left: 5px;
|
|
|
|
li {
|
|
display: inline-flex;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.label {
|
|
font-size: 11px;
|
|
padding: 5px 8px;
|
|
border-radius: 15px;
|
|
}
|
|
}
|
|
|
|
.variant {
|
|
&-enter-active,
|
|
&-leave-active,
|
|
&-move {
|
|
transition: 150ms ease-in-out;
|
|
}
|
|
|
|
&-enter,
|
|
&-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
&-enter-from {
|
|
opacity: 0;
|
|
scale: 0;
|
|
}
|
|
|
|
&-enter-to {
|
|
opacity: 1;
|
|
scale: 1;
|
|
}
|
|
|
|
&-leave-from {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(4, 25%);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.product-form-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 10px 20px;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.18);
|
|
transition: 150ms ease-in-out;
|
|
z-index: 10;
|
|
|
|
.btn {
|
|
margin-right: 10px;
|
|
padding: 6px 14px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.btn-default {
|
|
border: 1px solid #d9d9d9;
|
|
background: #ffffff;
|
|
|
|
&:hover {
|
|
color: #0068e1;
|
|
border-color: #0074fb;
|
|
}
|
|
}
|
|
|
|
.btn-secondary {
|
|
color: #0068e1;
|
|
background: #ffffff;
|
|
border: 1px solid #0068e1;
|
|
|
|
&.btn-loading {
|
|
&:after {
|
|
border-color: #0068e1;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
&:hover {
|
|
&:after {
|
|
border-color: #ffffff;
|
|
border-right-color: #0068e1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
color: #ffffff;
|
|
background: #0068e1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-form-left-column {
|
|
padding-right: 10px;
|
|
|
|
.box {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-form-right-column {
|
|
padding-left: 10px;
|
|
|
|
.box {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-form-column {
|
|
&.dragging {
|
|
border-radius: 2px;
|
|
outline: 2px dashed #a3b0c2;
|
|
}
|
|
|
|
.alert {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.attachment-wrapper {
|
|
tr {
|
|
td {
|
|
&:nth-child(2),
|
|
&:nth-child(3) {
|
|
min-width: 200px;
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
width: 59px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.choose-file {
|
|
padding: 10px 15px;
|
|
}
|
|
}
|
|
|
|
.product-downloads-wrapper {
|
|
.slide {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.table {
|
|
> tbody {
|
|
> tr {
|
|
> td {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.options {
|
|
.drag-handle {
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
|
|
.choose-file-group {
|
|
display: flex;
|
|
}
|
|
|
|
.downloadable-file-name {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.btn-choose-file {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.ltr {
|
|
&.sidebar-collapse {
|
|
.product-form {
|
|
.product-form-footer {
|
|
left: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-form {
|
|
.product-form-footer {
|
|
left: 250px;
|
|
right: 0;
|
|
|
|
.btn-default {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rtl {
|
|
&.sidebar-collapse {
|
|
.product-form {
|
|
.product-form-footer {
|
|
right: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-form {
|
|
.product-form-footer {
|
|
right: 250px;
|
|
left: 0;
|
|
|
|
.btn-default {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1200px) and (max-width: 1649px) {
|
|
.product-form-right-column {
|
|
.box-body {
|
|
> .form-group {
|
|
margin-bottom: 15px;
|
|
|
|
> .col-sm-3,
|
|
> .col-sm-9 {
|
|
width: 100%;
|
|
}
|
|
|
|
label {
|
|
margin-bottom: 5px;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1650px) {
|
|
.product-form {
|
|
.variants-group {
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(3, 33.33333333333333%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-form-right-column {
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(4, 25%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1500px) {
|
|
.product-form {
|
|
.bulk-edit-variants {
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(4, 25%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1380px) {
|
|
.product-form-right-column {
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(3, 33.33333333333333%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1199px) {
|
|
.product-form-left-column {
|
|
padding-right: 15px;
|
|
|
|
.box {
|
|
&:last-child {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-form-right-column {
|
|
padding-left: 15px;
|
|
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(8, 12.5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 991px) {
|
|
.form-horizontal {
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
|
|
.control-label {
|
|
margin-bottom: 0;
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
|
|
.checkbox,
|
|
.switch {
|
|
padding-top: 8px;
|
|
|
|
label {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-form {
|
|
.product-form-footer {
|
|
position: relative;
|
|
bottom: auto;
|
|
margin-top: 20px;
|
|
padding: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
.ltr,
|
|
.rtl {
|
|
.product-form {
|
|
.product-form-footer {
|
|
left: auto;
|
|
right: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.form-horizontal {
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
|
|
.control-label {
|
|
margin-bottom: 6px;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.checkbox,
|
|
.switch {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.product-form {
|
|
.bulk-edit-variants {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.bulk-edit-variants,
|
|
.variants-group {
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(7, 14.28571428571429%);
|
|
}
|
|
}
|
|
|
|
.variants-group {
|
|
.panel-body {
|
|
> .row {
|
|
> .col-sm-4 {
|
|
padding-right: 15px;
|
|
}
|
|
|
|
> .col-sm-8 {
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.variant-fields {
|
|
margin-top: 15px;
|
|
|
|
> .row {
|
|
> .col-sm-6 {
|
|
&:nth-child(1) {
|
|
padding-right: 15px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-form-right-column {
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(6, 16.66666666666667%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
.product-form {
|
|
.bulk-edit-variants,
|
|
.variants-group {
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(6, 16.66666666666667%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 560px) {
|
|
.product-form .bulk-edit-variants,
|
|
.product-form .variants-group,
|
|
.product-form-right-column {
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(5, 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 420px) {
|
|
.product-form .bulk-edit-variants,
|
|
.product-form .variants-group,
|
|
.product-form-right-column {
|
|
.product-media-grid {
|
|
grid-template-columns: repeat(4, 25%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.box-header {
|
|
padding: 8px 15px;
|
|
}
|
|
|
|
.box-body {
|
|
padding: 15px;
|
|
}
|
|
|
|
.product-downloads-wrapper {
|
|
.table {
|
|
> tbody {
|
|
> tr {
|
|
> td {
|
|
&:nth-child(2) {
|
|
min-width: 280px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 435px) {
|
|
.product-form {
|
|
.accordion-box-content {
|
|
.accordion-box-footer {
|
|
flex-direction: column;
|
|
|
|
> .btn {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 370px) {
|
|
.product-form {
|
|
.product-form-footer {
|
|
flex-direction: column;
|
|
|
|
.btn {
|
|
margin-right: 0;
|
|
margin-bottom: 10px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|