#root-shop, #root-shop > div { width: 100%; height: calc(100vh - 40px - 2.625rem); /* .pb-md-3 + .pt-md-3 + img.height + .navbar-brand.paddings */ overflow: hidden; } button { outline: none!important; } #root-shop { .layout { .rfqFeedback { display: flex; align-items: center; padding: 2rem 3rem; text-align: center; /*position: absolute; width: 350px;*/ background: white; /*left: calc(100%/2 - 350px/2);*/ -webkit-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75); box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75); /*top: calc(50% - 50px);*/ border: 1px solid $brand-color; font-size: .9rem; button { background-color: inherit; align-self: center; border: 0; position: absolute; right: 10px; top: 10px; img { width: 15px; } } .btn.btn-primary.disabled { background-color: gray; } .btn-outline-primary, .btn-outline-primary:hover { color: $btn-primary-2; border-color: $btn-primary-2; background-color: inherit; } } display: flex; > aside.aside { flex: 2; background-color: $color-primary; overflow-y: scroll; overflow-x: hidden; position: relative; /*padding-bottom: 4rem!important;*/ } > aside.aside:after { position: fixed; bottom: 0; height: 100px; width: calc(2 / 6 * 100%); content: ""; background: linear-gradient( to top, rgba(13, 53, 71, 1), rgba(13, 53, 71, 0) ); pointer-events: none; } > section.main { flex: 4; max-width: calc(4 / 6 * 100%); overflow-y: scroll; } } .productItem { display: flex; color: white; padding: 3rem 2rem 1rem; .content { flex: 1; display: flex; flex-direction: column; > *:not(:last-child) { margin-bottom: 20px; } img { height: 400px; align-self: center; border: 0; } h3 { color: white; } button { background-color: inherit; align-self: center; border: 0; img { width: 40px; height: auto; } } .price { align-self: flex-start; padding: .5rem 1rem; border: 2px solid $btn-primary-2; border-radius: 3px; font-weight: 700; } ul { font-size: .8rem; margin: 0; padding-left: 20px; li::before { color: white; } li { padding: .3rem 0; } } .ds { display: flex; font-size: .8rem; margin: 0; padding-left: 0px; a { flex: 1; display: flex; flex-direction: column; color: $link-primary-dark; text-decoration: underline; &:hover { color: $link-secondary-dark; text-decoration: none; } } } } } .backlog-container { padding-bottom: 4rem; } .rule { margin-bottom: .3rem; font-size: .8rem; img { width: 20px; } } .panel { padding: 3rem; overflow: hidden; h2 { padding-bottom: .5rem; } .btn-outline-primary, .btn-outline-primary:hover { color: $btn-primary-2; border-color: $btn-primary-2; background-color: inherit; } .control { display: flex; font-size: .8rem; > p { width: 50%; padding-right: 30px; } .crate-mode { text-align: right; width: 50%; a { cursor: pointer; margin-right: 1rem; color: inherit; text-decoration: none; padding-bottom: 5px; } a.active { font-weight: 700; border-bottom: 3px solid $btn-primary-2; } } } .summary { display: flex; margin: 2rem 0; > .summary-price { /*flex: 1;*/ font-size: .8rem; width: 50%; table { /*max-width: 450px;*/ } .summary-remove-all { padding-bottom: 1rem; .item-card-name { color: $btn-primary-2; } } .item-card-name { font-weight: 700; } .price { text-align: right; } .item-card-name > div, .price > div { display: inline; } .item-card-name, .price { > .alert-warning, .alert-info { background-color: inherit; height: inherit; width: 20px; padding-bottom: 3px; } .alert-info { padding-bottom: 0; } } .overlayVariant { min-width: 100px; max-height: 150px; min-height: 50px; overflow-y: scroll; position: absolute; display: flex; align-items: start; text-align: left; background-color: white; color: black; flex-direction: column; cursor: pointer; p { font-size: .875rem; margin: 0; } } thead, tbody, tfoot { display: block; /*max-height: 200px; overflow-y: auto;*/ tr { display: table; table-layout: fixed; width: 100%; } tr.hoverable { cursor: pointer; } tr.hoverable:hover, tr.hoverable.selected { background-color: $color-hover; } td { padding: 1px 5px; } } tfoot { color: $btn-primary-2; font-size: 1.2rem; td { padding: 1.2rem 0; } } button { background-color: inherit; border: 0; margin-left: 20px; img { width: 20px; height: auto; } } } > .summary-form { /*flex: 1;*/ width: 50%; display: flex; flex-direction: column; align-items: flex-end; form { display: flex; flex-direction: column; width: 90%; input:not([type="submit"]), input:not(.submit), textarea { border: 1px solid $color-secondary; border-radius: 3px; margin: 0 0 .5rem; padding: .4rem; outline: none; } input[type="submit"], .btn-cla { /*background-color: $btn-primary-2;*/ font-weight: 700; color: white; border: 0; border-radius: 3px; outline: none; } .error { color: #e53e3e; padding-bottom: 1em; } .errorField { border: 1px solid #e53e3e !important; } .btn-outline-primary, .btn-outline-primary:hover { color: $btn-primary-2; border-color: $btn-primary-2; background-color: inherit; } } } } .crate { position: relative; .crate-products { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); padding: .5rem .5rem 1rem; .items-cart-list { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; /* img.height + .items-cart-list.padding + .items-cart-list.div.padding + h6.font-size*_base.h6.line-height + progress-container.warning.height + + bootstrap.h6.margin-bottom + progress-container.height */ min-height: calc(350px + 17px + 10px + 0.6rem*1.1 + 24px + 0.5rem + 22px); background-color: #ebebeb; padding: 5px 5px 12px; position: relative; > div { display: flex; flex-direction: column; /*max-width: 96px;*/ max-width: 132px; justify-content: flex-start; align-content: center; align-items: center; margin-right: 8px; flex-shrink: 0; padding: 5px 3px; } h6 { font-size: .6rem; text-align: center; white-space: nowrap; } img { /*height: 250px;*/ height: 350px; border: 0; flex-shrink: 0; } .nbr-connectors, .nbr-clocks { width: 100%; height: 6px; margin-top: 5px; border: 1px solid #0d3547; > div { height: 100%; width: 0%; } } .nbr-connectors > div { background-color: $brand-color; } .nbr-clocks > div { background-color: #d689bf; } .progress-container { width: 100%; text-align: center; position: relative; height: 22px; &.warning { height: 24px; } > .alert-warning, .alert-info { background-color: inherit; height: inherit; width: 20px; padding-bottom: 3px; } } .overlayRemove { bottom: 0; width: 100%; height: 70px; margin-top: -70px; display: flex; align-items: center; justify-content: center; background-color: $brand-color; color: white; flex-direction: column; cursor: pointer; img { width: 20px; height: 20px; } p { font-size: .65rem; margin: 0; } } .overlayVariant { top: 24px; width: 140px; min-height: 40px; max-height: 320px; overflow-y: scroll; position: absolute; display: flex; align-items: start; text-align: left; background-color: white; color: black; flex-direction: column; cursor: pointer; padding: 0.2rem 0; p { font-size: .65rem; margin: 0; } div { margin: 0.1rem 0.2rem; font-size: 0.75rem; input { padding: 0; font-size: 0.75rem; line-height: 1.1; } label { margin-bottom: 0.1rem; } .options-icon { display: inline; height: .875rem; margin-right: 0.2rem; margin-left: 0.2rem; } } .form-check { min-height: 1rem; } &.hd68-idc, &.stabilizer, &.clocker { width: 85px; left: -11px; // (card width (63) - overlay width (85)) / 2 } } } .overlay-smallcard { left: -38.5px; // (card width (63) - overlay width (140)) / 2 } .overlay-bigcard { left: -7px; // (card width (126) - overlay width (140)) / 2 } .hovered { box-shadow: 0 0 5px rgba(255, 0, 0, .8); } } .crate-info { padding: 1rem 0 0; } } } .arrow_box { position: relative; background: #c75e5e; border: 2px solid #c75e5e; } .arrow_box:after, .arrow_box:before { top: 100%; left: 5%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(199, 94, 94, 0); border-top-color: #c75e5e; border-width: 10px; margin-left: -10px; } .arrow_box:before { border-color: rgba(199, 94, 94, 0); border-top-color: #c75e5e; border-width: 10px; margin-left: -10px; } } .k-popup-connectors, .k-popup-warning { background-color: $color-primary; color: white; font-weight: 700; font-size: .6rem; padding: .8rem 1rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); text-align: left; p { margin-bottom: 0; } p + p { padding-bottom: 8px; } } .k-popup-connectors { min-width: 200px; } .k-popup-warning { background-color: #c75e5e; min-width: 300px; .rule.warning { display: flex; font-size: .75rem; img { margin-right: 10px; height: 100%; } } }