Your IP : 3.144.6.254
.accordion-steps {
@include columnizerParent;
&__content {
@include columnizer(9);
@include w768 (){
@include columnizer(12);
}
.accordion-step {
width: 100%;
@include mbot(1);
border: 1px solid #aba9a6;
&__header {
background: #e1e1e1;
@include padding(0.5);
@include pleft(1);
@include pright(1);
}
&__title-count {
@include inline-block;
background: #999794;
@include padding(0.25);
@include pleft(0.5);
@include pright(0.5);
@include border-radius(50%);
position: relative;
}
&__title {
@include inline-block;
@include mleft(1);
}
&__title-wrapper {
@include inline-block;
}
&__settings {
display: none;
float: right;
@include mtop(0.25);
a {
text-decoration: none;
border-bottom: 1px dashed;
&:hover {
border-bottom: none;
}
}
}
&__content {
display: none;
border-top: 1px solid #bdbbb8;
@include clearfix;
@include padding(1);
@include pleft(1);
@include pright(1);
}
&__footer {
display: none;
@include mtop(1);
@include clearfix;
.accordion-step-coupon {
float: left;
}
}
&__next, &__prev {
@extend .button;
}
&__next {
float: right;
}
&__prev {
float: left;
}
.accordion-step-coupon {
&__title {
font-weight: bold;
@include mbot(0.25);
}
&__input {
position: relative;
@include inline-block;
@include fa-icon($fa-var-chevron-right);
&:before {
right: 6px;
top: 7px;
position: absolute;
color: #c2c0bd;
cursor: pointer;
}
}
&.is-infooter {
float: left;
}
}
&__submit {
&.is-active {
display: block;
}
display: none;
text-align: right;
}
// Состояния шагов
&.bx-active {
.accordion-step__content {
display: block;
}
.accordion-step__footer {
display: block;
}
}
&.bx-step-completed {
border-color: green;
.accordion-step__title-count {
@include fa-icon($fa-var-check-circle);
&:before {
bottom: 0px;
right: -4px;
position: absolute;
}
}
.accordion-step__settings {
@include inline-block;
}
.accordion-step__footer {
display: none;
}
}
&__table-fade{
position:relative;
}
&__item-table{
margin-bottom:10px;
min-width:100%;
display:table;
}
}
}
&__agreement{
float:left;
text-align:left;
}
&__result {
position: relative;
box-sizing: border-box;
@include columnizer(3);
@include w768 (){
@include columnizer(12);
}
.accordion-steps-result {
position: relative;
background: #e1e1e1;
@include padding(1);
@include pleft(1);
@include pright(1);
opacity: 1;
-webkit-transition: opacity .2s ease;
-moz-transition: opacity .2s ease;
-o-transition: opacity .2s ease;
transition: opacity .2s ease;
&.is-fixed {
position: fixed;
top: 15px;
@include box-sizing();
}
&.is-fixed-bottom {
opacity: 0;
}
@include w768 (){
&.is-fixed {
position: relative;
top: 0;
}
&.is-fixed-bottom {
opacity: 1;
}
width: 100% !important;
@include box-sizing();
}
&__item {
@include clearfix;
border-bottom: 1px solid black;
@include padding(1);
&:first-child {
padding-top: 0;
}
}
&__footer {
@include clearfix;
@include ptop(1);
.accordion-steps-result__value {
@include fontsize(20px);
font-weight: bold;
}
}
&__label {
font-weight: bold;
float: left;
}
&__value {
float: right;
}
&__base {
&.is-discount {
color: #c2c0bd;
text-decoration: line-through;
}
}
}
}
&__submit {
@include w768 (){
margin-bottom: 20px;
padding-left: 20px;
display: inline-block;
}
.js-make-order {
display: inline-block;
float: right;
@include w768 (){
display: none;
}
}
}
.is-disabled{
opacity: 0.7;
cursor: not-allowed;
}
.form-standart {
&__title {
margin-left: 0;
margin-right: 0;
}
&__field {
display: block;
padding: 0;
@include margin(15/10);
}
&__label {
font-weight: bold;
display: block;
padding: 0;
width: auto;
text-align: left;
@include margin(10/20);
}
&__item {
display: block;
padding: 0;
}
&__inputs {
width: 100%;
float: none;
margin-right: 0;
}
}
// Стили из стандартного компонента
.accordion-step .accordion-step__title-count:after {
counter-increment: heading;
content: counter(heading);
}
.accordion-step__item-tr{
display:table-row;
}
.accordion-step__item-td{
display:table-cell;
vertical-align: top;
padding-top:10px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
border-top: 1px dotted #e5e5e5;
}
@media (min-width:769px){
.accordion-step__item-td{
padding-left: 7px;
padding-right:7px;
padding-bottom:10px;
}
}
.accordion-step__item-table .accordion-step__item-tr:first-child .accordion-step__item-td{border-top: none}
.accordion-step__item-img-block{
float:left;
padding-right:15px;
}
.bx-step-completed .accordion-step__item-img-block {
width: 48px;
padding-bottom:10px;
padding-right:10px;
}
.accordion-step__item-imgcontainer {
//border-radius: 4px;
//border: 1px solid #ddd;
padding-top: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.accordion-step__item-content{}
.accordion-step__item-title {
font-weight: bold;
padding-bottom:5px;
}
.accordion-step__item-td-title {
line-height: 20px;
color: #7c7c7c;
padding-bottom: 3px;
font-size: 12px;
}
.accordion-step__item-td-text {
line-height: 25px;
vertical-align: middle;
}
.accordion-step.bx-step-warning .accordion-step-title-count{
background:#f8c11a;
border-color:#f8c11a;
}
.accordion-step.bx-step-warning .accordion-step-title-count:after{
color:#000;
}
.accordion-step.bx-step-warning {
border: 1px solid #CCBE71;
}
.accordion-step.bx-step-warning .accordion-step-title-count:before {
display:block;background-position:center -37px;
}
.accordion-step.bx-step-error .accordion-step-title-count{
background:#db4c4c;border-color:#db4c4c;
}
.accordion-step.bx-step-error .accordion-step-title-count:after{
color:#fff;
}
.accordion-step.bx-step-error {
border: 1px solid #db4a29;
}
.accordion-step.bx-step-error .accordion-step-title-count:before {
display:block;background-position:center -20px;
}
.accordion-step__coupon-item{}
.accordion-step__coupon-item strong:first-child{ margin-left:10px;}
.accordion-step__coupon-item strong {
white-space: nowrap;
margin-right: 20px;
position: relative;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
display: inline-block;
letter-spacing: -0.5px
}
.accordion-step__coupon-item strong.accordion-step__coupon-item-danger {color: #A94442;}
.accordion-step__coupon-item strong.accordion-step__coupon-item-success{color: #3ba428;}
.accordion-step__coupon-item strong.accordion-step__coupon-item-used{color: #777;}
.accordion-step__coupon-item-danger-mess,
.accordion-step__coupon-item-mess {
display: none;
position: absolute;
left: 0;
min-width: 100%;
top: 100%;
font-weight: normal;
padding: 6px 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
text-transform: none;
color: #333;
letter-spacing: normal;
z-index: 1;
}
.accordion-step__coupon-item strong:hover .accordion-step__coupon-item-mess,
.accordion-step__coupon-item strong:hover .accordion-step__coupon-item-danger-mess {
display: block;
}
.accordion-step__coupon-remove {
display: inline-block;
height:20px;
width: 20px;
margin-left: 10px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANhJREFUeNpEkM0KwjAQhGdr/Dv6Nj6EXkRvehTfRhS868lWWigU9OFEHGeTqIF0dydftrMJp0s1McMdwJ5AY0iLKaxVbwGbBxgeJKaCS4NjbJxQvlE4a/ektUFX9w5JCNolEzQmGCHlT8VjEFQjdvrBN0EOF4oOrXS5Cxmqs7NKVSEroPHlkLLOLRX4r5HOjenf3tE7DDyjxCLNx032ZFovSe80BK7Sl9IQmJ4gT4foSfowe+47jGx+xzidQxY9Zd/+/cLbIC8ztW9VHBL0fXDWGdeDc/ERYABB6E45iF95UQAAAABJRU5ErkJggg==) no-repeat center;
cursor: pointer;
vertical-align:middle;
position:relative;
top:-1px;
}
@media (min-width:1200px) {
.accordion-step__.accordion-step__pp-company:nth-child(4n+1) {clear: both;}
}
@media (min-width:992px) and (max-width:1199px) {
.accordion-step__.accordion-step__pp-company:nth-child(3n+1) {clear: both;}
}
@media (min-width:768px) and (max-width:991px) {
.accordion-step__.accordion-step__pp-company:nth-child(3n+1) {clear: both;}
}
@media (max-width:767px) {
.accordion-step__.accordion-step__pp-company:nth-child(2n+1) {clear: both;}
}
@media (min-width:481px) and (max-width:766px) {
.accordion-step__desc-container .accordion-step__pp-company-logo {
width: 100%;
padding-top: 0
}
.accordion-step__desc-container .accordion-step__pp-company-smalltitle {display: none; }
.accordion-step__list-termin {width: 30%;}
}
@media (max-width:480px) {
.accordion-step__pp-company-logo {width: 45%;}
.accordion-step__pp-company-title {display: none;}
.accordion-step__item-container {border-right: none;}
.accordion-step__desc-container {}
.accordion-step__desc-container .accordion-step__pp-company-logo {
width: 100%;
padding-top: 0
}
.accordion-step__desc-container .accordion-step__pp-company-smalltitle {display: none;}
.accordion-step__list-termin {width: 40%;}
}
/*pay*/
.accordion-step__pp-company {
padding-bottom: 20px;
z-index: 100;
position: relative;
&.is-hidden {
display: none;
}
}
.accordion-step__.accordion-step__pp-company {
padding: 7px;
border: 1px solid transparent;
-webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
}
.accordion-step__desc-container {padding-top: 7px;}
.accordion-step__desc-container .accordion-step__pp-company {
background: #f8fafc;
border: 1px solid #d5dadc;
padding: 7px 15px;
}
.accordion-step__pp-company-logo {padding-top: 6px;}
.accordion-step__pp-company-graf-container {
border: 2px solid #c3cace;
border-radius: 2px;
position: relative;
background: #fff;
width: auto;
height: 0;
/*margin-bottom: 10px;*/
padding-top: 50%;
}
.accordion-step__pp-company.bx-selected .accordion-step__pp-company-graf-container {border-color: #00bb06;}
.accordion-step__inner-ps.bx-selected .accordion-step__pp-company-graf-container {border-color: #00bb03;}
.accordion-step__pp-company.bx-bd-error .accordion-step__pp-company-graf-container {border-color: #db4a29;}
.accordion-step__pp-company.bx-bd-waring .accordion-step__pp-company-graf-container {border-color: #CCBE71;}
input[type=checkbox].accordion-step__pp-company-checkbox {
position: absolute;
top: 7px;
left: 7px;
margin: 0;
padding: 0;
z-index: 100;
}
.accordion-step__pp-company-image {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.accordion-step__desc-container .accordion-step__pp-company-logo {max-width: 150px;}
.accordion-step__pp-company-smalltitle {
padding-top: 9px;
color: #a3a3a3;
font-size: 11px;
text-align: center;
padding-bottom: 5px;
}
.accordion-step__pp-company-title {
font-size: 19px;
font-weight: bold;
}
.accordion-step__pp-company-subTitle {
font-size: 15px;
font-weight: bold;
}
.accordion-step__pp-company-desc {
font-size: 13px;
padding-top: 10px;
line-height: 17px;
}
.accordion-step__pp-company-selected{
padding:4px 0;
}
.accordion-step__pp-company-selected strong{
margin-left:10px;
display: inline-block;
vertical-align: top;
}
ul.accordion-step__list {
margin: 10px 0;
padding: 0;
list-style: none;
font-size: 13px;
color: #000;
}
ul.accordion-step__list li {
clear: both;
padding: 5px 0;
}
.accordion-step__list-termin {
color: #8d8d8d;
display: block;
}
.accordion-step__list-description {display: block;}
.accordion-step__pp-delivery-cost {
position: absolute;
font-size: 14px;
line-height: 14px;
color: #fff;
padding: 2px 4px;
right: -2px;
bottom: -2px;
border-radius: 1px;
background: rgba(0, 0, 0, .5);
}
.accordion-step__field .form-control{background: #fff;}
.accordion-step__pp-company-block .checkbox label,
.accordion-step__pp-company-block .form-group label{font-size:13px;}
.accordion-step__pp-company-block .form-control{font-size:13px;}
.accordion-step__price{
text-align:right;
padding: 4px 0;
}
.accordion-step.bx-step-good {
-webkit-animation: animationBorderStep ease 5s;
-moz-animation: animationBorderStep ease 5s;
-o-animation: animationBorderStep ease 5s;
animation: animationBorderStep ease 5s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes animationBorderStep {0%{border-color:#70BB18}100%{border-color: #91cedc}}
@-moz-keyframes animationBorderStep {0%{border-color:#70BB18}100%{border-color: #91cedc}}
@-ms-keyframes animationBorderStep {0%{border-color:#70BB18}100%{border-color: #91cedc}}
@-o-keyframes animationBorderStep {0%{border-color:#70BB18}100%{border-color: #91cedc}}
@keyframes animationBorderStep {0%{border-color:#70BB18}100%{border-color: #91cedc}}
.accordion-step.bx-step-bad {
-webkit-animation: animationBorderStepBad ease 5s;
-moz-animation: animationBorderStepBad ease 5s;
-o-animation: animationBorderStepBad ease 5s;
animation: animationBorderStepBad ease 5s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes animationBorderStepBad {0%{border-color:#db4a29}100%{border-color: #91cedc}}
@-moz-keyframes animationBorderStepBad {0%{border-color:#db4a29}100%{border-color: #91cedc}}
@-ms-keyframes animationBorderStepBad {0%{border-color:#db4a29}100%{border-color: #91cedc}}
@-o-keyframes animationBorderStepBad {0%{border-color:#db4a29}100%{border-color: #91cedc}}
@keyframes animationBorderStepBad {0%{border-color:#db4a29}100%{border-color: #91cedc}}
/* Новые стили */
.accordion-step__pp {
@include columnizerParent();
@include clearfix();
}
.accordion-step__item-container {
@include columnizer(9);
float: left;
padding-right: 20px;
box-sizing: border-box;
}
.accordion-step__pp-desc-container {
@include columnizer(3);
float: right;
}
.accordion-step__item-container .accordion-step__pp-company {
@include columnizer(3);
padding: 7px;
display: inline-block;
}
.accordion-step__pp-company-selected {
float: left;
}
.accordion-step__pp-price {
float: right;
}
.icon-success {
position: absolute;
left: 16px;
width: 21px;
height: 21px;
background-size: contain;
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjEgMjEiPjxzdHlsZT4uc3Qwe2ZpbGw6IzcxYmEyNH08L3N0eWxlPjxwYXRoIGlkPSJGb3JtYV8xIiBjbGFzcz0ic3QwIiBkPSJNMTAuNSAwQzQuNyAwIDAgNC43IDAgMTAuNVM0LjcgMjEgMTAuNSAyMSAyMSAxNi4zIDIxIDEwLjUgMTYuMyAwIDEwLjUgMHpNOSAxNS40bC01LTQuOSAyLTIgMyAzIDYtNS45IDIgMi04IDcuOHoiLz48L3N2Zz4=);
}
.icon-warning {
position: absolute;
left: 16px;
width: 22px;
height: 20px;
background-size: contain;
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjIgMjAiPjxzdHlsZT4uc3Qwe2ZpbGw6I2RlYTcxMn08L3N0eWxlPjxwYXRoIGlkPSJGb3JtYV8xIiBjbGFzcz0ic3QwIiBkPSJNMjEuNyAxNi43TDEyLjkgMS4xQzEyLjMuMSAxMS0uMyAxMCAuM2MtLjQuMi0uNy41LS45LjhMLjMgMTYuN2MtLjQuNy0uNCAxLjUgMCAyLjIuNC43IDEuMSAxLjEgMS45IDEuMWgxNy43Yy44IDAgMS41LS40IDEuOS0xLjEuMy0uNy4zLTEuNS0uMS0yLjJ6bS0xMC43LjhjLS44IDAtMS40LS42LTEuNS0xLjQgMC0uOC42LTEuNCAxLjQtMS41LjggMCAxLjQuNiAxLjUgMS40IDAgLjgtLjYgMS41LTEuNCAxLjV6bTEuNC02LjJjMCAuOC0uNiAxLjQtMS40IDEuNHMtMS40LS42LTEuNC0xLjRWNC43YzAtLjQuMy0uNy43LS43aDEuNWMuNCAwIC43LjMuNy43bC0uMSA2LjZ6Ii8+PC9zdmc+);
}
.accordion-step__tooltip.accordion-step__tooltip-static{
position: relative;
z-index: 0;
margin-bottom: 5px;
}
.accordion-step__tooltip.accordion-step__tooltip-static .tooltip-arrow{left:20px;}
.accordion-step__tooltip .tooltip-inner{max-width: 300px; padding: 2px 5px}
.accordion-step__tooltip.accordion-step__tooltip-danger .tooltip-arrow{border-top-color:#F2DEDE;}
.accordion-step__tooltip.accordion-step__tooltip-danger .tooltip-inner{background:#F2DEDE;color:#A94442;}
.accordion-step__tooltip.accordion-step__tooltip-warning .tooltip-arrow{border-top-color:#FCF8E3;}
.accordion-step__tooltip.accordion-step__tooltip-warning .tooltip-inner{background:#FCF8E3;color:#8A6D3B;}
.accordion-step__tooltip.accordion-step__tooltip-success .tooltip-arrow{border-top-color:#dff0d8;}
.accordion-step__tooltip.accordion-step__tooltip-success .tooltip-inner{background:#dff0d8;color:#3c763d;}
.accordion-step__tooltip.accordion-step__tooltip-coupon{display:none;}
.accordion-step__coupon-item-used:hover .accordion-step__tooltip,
.accordion-step__coupon-item-danger:hover .accordion-step__tooltip,
.accordion-step__coupon-item-success:hover .accordion-step__tooltip{
display:block;
opacity:1;
bottom:100%;
}
.accordion-step__tooltip-coupon {
top: -25px;
position: absolute;
left: 0;
font-size: 12px;
}
.accordion-step__tooltip-coupon>span{
display:block;
text-transform:none;
}
.is-alert{
border: none;
border-radius: 1px;
font-size: 14px;
padding: 15px;
margin-bottom: 20px;
}
.is-alert-success {
color: #3C763D;
background-color: #DFF0D8;
border-color: #D6E9C6;
}
.is-alert-warning {
color: #8A6D3B;
background-color: #FCF8E3;
border-color: #FAEBCC;
}
.is-alert-danger {
color: #A94442;
background-color: #F2DEDE;
border-color: #EBCCD1;
}
.accordion-step__reference {
color: #9a9a9a;
font-size: 11px;
padding-top: 10px;
padding-bottom: 20px;
}
.accordion-step__scu-container{
position:relative;
height:35px;
overflow:hidden;
}
.accordion-step__scu-container:after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:25px;
}
.bx-selected .accordion-step__scu-container{height:auto;}
.bx-selected .accordion-step__scu-container:after{height: 0;}
@media (max-width: 768px) {
.accordion-step__scu-container{height:auto;}
.accordion-step__scu-container:after{height: 0;}
}
.accordion-step__scu-container .accordion-step__item-td-title{line-height:20px;}
.accordion-step__scu-container .accordion-step__item-td-title,
.accordion-step__scu-container .accordion-step__item-td-text{
float: left;
font-size:13px;
padding-right:5px;
line-height:19px;
vertical-align: middle;
padding-bottom:3px;
}
.accordion-step__scu-container .accordion-step__item-td-title{clear: both;}
@media (min-width:768px){
.accordion-step__scu-container .accordion-step__item-td-title, .accordion-step__scu-container .accordion-step__item-td-text {
padding-bottom:0;
line-height:20px;
}
}
.accordion-step__coupon-item-fixed .bx-soa-coupon-block {
font-weight:normal;
}
.accordion-step__coupon-item-fixed .bx-soa-coupon-label,
.accordion-step__coupon-item-fixed .accordion-step__coupon-item {
font-weight: normal;
padding-top: 0;
line-height: 20px;
}
.bx-soa-item-properties .accordion-step__item-td-title,
.bx-soa-item-properties .accordion-step__item-td-text{ text-align:center;}
.bx-soa-item-properties.bx-text-right .accordion-step__item-td-title,
.bx-soa-item-properties.bx-text-right .accordion-step__item-td-text{ text-align:right;}
.accordion-step__item-td-text input[type="number"] {
height: 25px;
line-height: 20px;
}
.accordion-step__item-td-text .bx-price {white-space: nowrap;}
.bx-price-old {
white-space: nowrap;
text-decoration: line-through;
color: #B8B8B8;
font-size: 13px;
}
.accordion-step__item-td-control {
padding-bottom: 5px;
font-size: 11px;
}
@media (max-width:991px){
.bx-soa-item-table,
.bx-soa-item-table>tbody,
.accordion-step__item-tr,
.accordion-step__item-td{display:block;}
.accordion-step__item-tr.bx-soa-item-info-container,
.accordion-step__item-tr .accordion-step__item-td{border:none;}
.accordion-step__item-tr{
border-top: 1px dotted #e5e5e5;
padding-bottom:15px;
padding-top:10px;
overflow:hidden;
}
.accordion-step__item-tr.accordion-step__item-tr-first{border:none;}
.accordion-step__item-block{ overflow:hidden;}
.bx-soa-item-properties.bx-text-right .accordion-step__item-td-title,
.bx-soa-item-properties.bx-text-right .accordion-step__item-td-text{ text-align:center;}
}
@media (min-width:581px) and (max-width:991px){
.bx-soa-item-properties{float:left; padding-bottom:10px;}
.accordion-step__item-td-title,
.bx-soa-item-nth-4p1,
.accordion-step__item-tr{clear:both;}
}
@media (max-width:580px){
.accordion-step__item-td {line-height: 17px;}
.accordion-step__item-img-block{
float:none;
max-width: 160px;
margin: 0 auto;
padding-right:0;
}
.accordion-step.bx-step-completed .accordion-step__item-img-block{float:left;}
.accordion-step__item-content{padding-top:15px;}
.accordion-step.bx-step-completed .accordion-step__item-content{padding-top:0;}
.accordion-step__scu-container{padding-top:10px;}
.accordion-step__item-td-title,
.accordion-step__item-td-text{
line-height:20px;
display:inline-block !important;
padding: 2px 5px;
text-align: left;
vertical-align:middle;
font-size:13px;
}
.accordion-step__item-td-title:after {content: ":"}
.bx-soa-item-properties {padding:0;}
}
@media (min-width: 580px) {
.accordion-step__item-img-block {
width: 85px;
margin: 0;
}
}
// Аккуратненько сложу это тут. Это оставшийся стили компонента, которые могут потребоваться для кастомизации.
/* Advanced info */
.bx-soa-item-info-container{
position:relative;
height:35px;
}
.bx-soa-item-info-container .accordion-step__item-td{
border:none;
position:absolute;
/*left:20px;*/
/*right:20px;*/
/*padding:0 20px;*/
}
.bx-soa-item-info-container .bx-soa-item-info-block {
height: 0;
overflow: hidden;
margin-bottom: 10px;
}
.bx-soa-item-info-block.bx-active {
padding-top: 10px;
height: auto;
}
.bx-soa-info-block{
border:none;
max-width:100%;
}
.bx-soa-info-line {line-height: 15px;}
.bx-soa-info-title {
color: #7c7c7c;
font-size: 12px;
padding:4px 0;
vertical-align:top;
}
.bx-soa-info-text {
display: inline-block;
font-size:12px;
padding:4px 10px;
vertical-align:top;
}
@media (max-width:580px){
.bx-soa-item-info-container .accordion-step__item-td{
position:static;
left:auto;
right:auto;
padding:0;
}
.bx-soa-item-info-container{
position:relative;
height:auto !important;
min-height:0;
}
}
/* Coupon */
.bx-soa-coupon {
border-top: 1px solid #e5e5e5;
padding-top: 10px;
margin-top: 10px;
}
.bx-soa-coupon-label {
display: inline-block;
font-weight: bold;
font-size: 13px;
color: #000;
padding-right: 10px;
vertical-align: top;
}
.bx-selected .bx-soa-coupon-label{padding-top: 7px;}
.bx-soa-coupon-block {
vertical-align: middle;
line-height: 34px;
}
.bx-soa-coupon-input {
display: inline-block;
position:relative;
}
.bx-soa-coupon-input:after {
content:"";
display:block;
width: 8px;
height:8px;
background-color:transparent;
border-right: 2px solid #8da3ad;
border-bottom:2px solid #8da3ad;
position:absolute;
right:10px;
top:50%;
margin-top:-4px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
cursor:pointer;
}
.bx-soa-coupon-input input[type=text].accordion-step__form-control {
border: 1px solid #CCD5DB;
background-color: #f8fafc;
background-image: none;
border-radius: 2px;
outline: none;
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
box-shadow: none;
}
.bx-soa-coupon-input input[type=text].accordion-step__form-control:focus {
border-color: rgb(99, 116, 126);
outline: none;
box-shadow: none;
}
.bx-step-completed .bx-soa-coupon-list {
padding-top: 0;
line-height: 20px;
}
/* pickup */
.bx-soa-pickup-preview-img {
height: 76px;
border: 1px solid #ddd;
border-radius: 1px;
padding: 1px;
margin-left:10px;
float: right;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.bx-soa-pickup-subTitle {
font-size: 15px;
font-weight: bold;
padding-bottom: 10px;
}
.bx-soa-pickup-list {
margin-bottom: 20px;
}
.bx-soa-pickup-list .bx-soa-pickup-list-item {
border-top: 1px solid #dcdfe2;
padding: 16px 35px;
font-size: 13px;
position: relative;
-webkit-transition: background .2s ease;
-moz-transition: background .2s ease;
-o-transition: background .2s ease;
transition: background .2s ease;
cursor: pointer;
}
.bx-soa-pickup-list-item.bx-selected {background: #f8fafc;}
.bx-soa-pickup-list .bx-soa-pickup-list-item:last-child {border-bottom: 1px solid #dcdfe2;}
.bx-soa-pickup-l-item-adress {
padding-left: 15px;
color: #25495e;
font-weight: bold;
line-height: 17px;
min-height: 17px;
position: relative;
padding-right: 100px;
}
.bx-soa-pickup-l-item-adress:before {
height: 17px;
width: 18px;
content: "";
top: 50%;
left: -5px;
margin-top: -8px;
position: absolute;
background: url(images/sprite.png) no-repeat center -54px;
}
.bx-soa-pickup-list-item .bx-soa-pickup-l-item-detail {
padding-top: 20px;
display: none;
}
.bx-soa-pickup-list-item.bx-selected .bx-soa-pickup-l-item-detail {display: block;}
.bx-soa-pickup-l-item-detail {
padding-left: 100px;
position: relative;
min-height: 80px;
}
.bx-soa-pickup-l-item-detail.no-image {padding-left: 20px;}
.bx-soa-pickup-l-item-btn {
position: absolute;
top: 10px;
right: 5px;
}
.bx-soa-pickup-list-item.bx-selected .bx-soa-pickup-l-item-btn {
}
.bx-soa-pickup-list-item.bx-selected .bx-soa-pickup-l-item-btn.no-image {padding-left: 20px;}
.bx-soa-pickup-l-item-name {font-weight: bold;}
.bx-soa-pickup-l-item-img {
position: absolute;
top: 23px;
left: 0;
max-width: 90px;
max-height: 90px;
height: auto;
width: auto;
}
/*Sidebar*/
.bx-soa-sidebar {
position: relative;
height: 100%;
}
.accordion-steps-result__total-button-container{
display: none;
padding-top: 20px;
text-align: center;
@include w768 (){
display: block;
}
}
.accordion-steps-result__total-button-container>.btn{
width: 100%;
}
.bx-soa-more {
border-top: 1px solid #e5e5e5;
padding-top: 10px;
margin-top: 10px;
}
.bx-soa-price-not-calc{
border-bottom:1px dashed;
color:#F55450;
text-decoration:none;
cursor: pointer;
}
.bx-soa-price-not-calc:active,
.bx-soa-price-not-calc:hover{
border-color:transparent;
color:#A94442;
}
/* SCU */
.accordion-step__scu-container{overflow:hidden;}
.accordion-step__item-content .accordion-step__scu-container {max-width: 200px;}
.bx-scu-block {}
.bx-scu-list {
margin: 0;
padding: 0 5px;
}
.bx-scu-itemlist {
list-style: none;
padding: 0;
overflow: hidden;
margin: 0 -5px;
min-width: 40px;
}
.bx-scu-item {
float: left;
width: 20%;
padding: 5px;
}
.bx-img-item {
float: left;
width: 50%;
padding: 5px;
min-width: 30px;
max-width: 50px;
}
@media (max-width: 580px){
.bx-img-item {
width: 45px;
}
}
.bx-img-itemColor {
position: absolute;
top: 3px;
right: 3px;
left: 3px;
bottom:3px;
background-size: contain;
-webkit-background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.bx-scu-itemColorBlock {
position: relative;
padding-top: 100%;
cursor: pointer;
outline: 1px solid #c0cfda;
-webkit-transition: outline .2s ease;
-moz-transition: outline .2s ease;
-o-transition: outline .2s ease;
transition: outline .2s ease;
}
.bx-scu-itemColorBlock:hover {outline: 1px solid #006cc0;}
.bx-scu-itemColorBlock.selected {outline: 2px solid #006cc0;}
.bx-scu-itemColor {
position: absolute;
top: 3px;
right: 3px;
left: 3px;
bottom: 3px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.bx-scu-itemTextBlock {
position: relative;
cursor: pointer;
outline: 1px solid #c0cfda;
-webkit-transition: outline .2s ease;
-moz-transition: outline .2s ease;
-o-transition: outline .2s ease;
transition: outline .2s ease;
}
.bx-scu-itemTextBlock:hover {outline: 1px solid #006cc0;}
.bx-scu-itemTextBlock.selected {outline: 2px solid #006cc0;}
.bx-scu-itemText {
vertical-align: middle;
text-align: center;
font-size: 11px;
line-height: 18px;
white-space: nowrap;
text-transform: uppercase;
text-overflow: ellipsis;
overflow: hidden;
}
h3.bx-title {
font-size: 15px;
font-weight: bold;
}
.bx-soa-reg-block {
background: #f8fafc;
padding: 25px 20px;
}
.bx-soa-reg-block p {
color: #595a5b;
font-size: 13px;
margin: 0 0 10px;
padding: 0;
}
.bx-soa-auth .accordion-step__reference {border-top: 1px solid #f2f2f2;}
/*REGION*/
.accordion-step__sls .quick-location-tag,
.bx-slst .quick-location-tag {
display: inline-block;
background: #d0ecf1;
border-radius: 3px;
padding: 10px 20px 11px;
margin: 10px 2px;
cursor: pointer;
vertical-align: middle;
font-size: 15px;
line-height: 20px;
height: auto;
color: #333;
border: none;
-webkit-transition: background 200ms ease;
-moz-transition: background 200ms ease;
-o-transition: background 200ms ease;
transition: background 200ms ease;
}
.accordion-step__sls .quick-location-tag:hover,
.bx-slst .quick-location-tag:hover {background-color: #e3f4f7;}
.accordion-step__sls .quick-location-tag:first-child,
.bx-slst .quick-location-tag:first-child {margin-left: 0;}
.accordion-step__sls .quick-location-tag:last-child,
.bx-slst .quick-location-tag:last-child {margin-right: 0;}
.bx-soa-location-offered small {color: #737373;}
.bx-soa-location-selected {
padding-top: 12px;
padding-bottom: 22px;
}
.accordion-step__customer-label,
.bx-soa-custom-label,
.form-group label {
position: relative;
font-size: 14px;
font-weight: 500;
padding-bottom: 2px;
color: #000;
}
.accordion-step__customer-label-container small,
.bx-soa-custom-label-container small,
.form-group label small {color: #737373;}
/*FIELDS*/
.form-group .accordion-step__form-control:focus {border-color: #63747e}
.bx-soa-location-input-container {position: relative;}
.accordion-step__customer-tel-input-container {position: relative;}
.accordion-step__customer-tel-input-container {height: 41px;}
.bx-soa-location-input {padding: 10px 40px 11px;}
.accordion-step__customer-tel-input {padding: 10px 11px 10px 50px;}
.bx-soa-location-input-container:before {
content: " ";
position: absolute;
left: 8px;
bottom: 9px;
top: 9px;
width: 20px;
background-size: contain;
}
.accordion-step__form-control {
width: 100%;
box-sizing: border-box;
}
.accordion-step__customer-field {
margin-bottom: 20px;
}
.accordion-step__customer-field label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
.bx-soa-service-small{
color: #a3a3a3;
font-size: 11px;
}
/*CHECKBOX*/
.bx-soa-changeCostSign {
-webkit-animation: changeCostSign ease .4s;
-moz-animation: changeCostSign ease .4s;
-o-animation: changeCostSign ease .4s;
animation: changeCostSign ease .4s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes changeCostSign {0%{opacity:1}40%{opacity:0}60%{opacity:0}100%{opacity:1}}
@-moz-keyframes changeCostSign {0%{opacity:1}40%{opacity:0}60%{opacity:0}100%{opacity:1}}
@-ms-keyframes changeCostSign {0%{opacity:1}40%{opacity:0}60%{opacity:0}100%{opacity:1}}
@-o-keyframes changeCostSign {0%{opacity:1}40%{opacity:0}60%{opacity:0}100%{opacity:1}}
@keyframes changeCostSign {0%{opacity:1}40%{opacity:0}60%{opacity:0}100%{opacity:1}}
.accordion-step__sls.accordion-step__form-control {padding: 0;}
.accordion-step__sls .bx-ui-sls-pane,
.bx-slst .bx-ui-combobox-dropdown{border: 1px solid #bdbdbd;}
.accordion-step__sls .dropdown-fade2white,
.bx-slst .dropdown-fade2white{top:1px;}
.accordion-step__sls .accordion-step__form-control.dropdown-block,
.bx-slst .accordion-step__form-control.dropdown-block{
background-color: #f8fafc;
border: 1px solid #d5dadc;
box-shadow: none;
}
.has-error .accordion-step__sls .accordion-step__form-control.dropdown-block,
.has-error .bx-slst .accordion-step__form-control.dropdown-block{
border-color: #a94442;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}
.bx-slst .accordion-step__form-control .bx-ui-combobox-container .bx-combobox-fake-as-input{padding-top: 7px;}
.bx-bd-error {border-color: #db4a29;}
.bx-bd-waring {border-color: #CCBE71;}
.wsnw{white-space: nowrap;}
.bx-step-opacity {
opacity: 0;
-webkit-animation: animationBorderStepOpacity ease 1s;
-moz-animation: animationBorderStepOpacity ease 1s;
-o-animation: animationBorderStepOpacity ease 1s;
animation: animationBorderStepOpacity ease 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@-webkit-keyframes animationBorderStepOpacity{ 0%{opacity:0} 100%{opacity:100} }
@-moz-keyframes animationBorderStepOpacity{ 0%{opacity:0} 100%{opacity:100} }
@-ms-keyframes animationBorderStepOpacity{ 0%{opacity:0} 100%{opacity:100} }
@-o-keyframes animationBorderStepOpacity{ 0%{opacity:0} 100%{opacity:100} }
@keyframes animationBorderStepOpacity{ 0%{opacity:0} 100%{opacity:100} }
/* MAPS */
ymaps h3{
margin: 6px 0 10px 0;
}
/* AUTH */
.bx-authform{
margin: 0 0 25px;
}
/*block*/
.bx-authform-formgroup-container{
margin-bottom: 25px;
}
.bx-authform-content-container,
.bx-authform-label-container{
font-size:13px;
color: #5a6c77;
padding-bottom: 2px;
}
.bx-authform-input-container{
position: relative;
}
.bx-authform-psw-protected{
height: 38px;
width: 38px;
position: absolute;
right: 1px;
top: 50%;
margin-top: -19px;
background: url(images/sprite.png) no-repeat center;
-webkit-background-size: 11px auto;
background-size: 11px auto;
}
.bx-authform-psw-protected-desc{
display: none;
background: #fff;
position: absolute;
width: 250px;
left: 50%;
margin-left: -125px;
bottom: 100%;
margin-bottom: 14px;
border:1px solid #f0f1f2;
padding: 10px 20px;
font-size: 14px;
z-index: 110;
box-shadow: 0 6px 9px 0 rgba(0,0,0,.1)
}
.bx-authform-psw-protected:hover .bx-authform-psw-protected-desc{display: block;}
.bx-authform-psw-protected-desc>span{
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 14px;
display: block;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAOCAYAAAAxDQxDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjIzNzExNDdGRkJFMTFFNDg4RDM4NEY3NjNFRDYwRDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjIzNzExNDhGRkJFMTFFNDg4RDM4NEY3NjNFRDYwRDUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMjM3MTE0NUZGQkUxMUU0ODhEMzg0Rjc2M0VENjBENSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMjM3MTE0NkZGQkUxMUU0ODhEMzg0Rjc2M0VENjBENSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PodxyuQAAAFASURBVHjarJS/SgNBEMZ3x00glj6DL2Fn5UtYi7WdlYUIYhGwCYgPYBeIjbUvIYikCxaCGk/wZvf2n98dCiEm521y2xwzOzO/m5tvTn5knyrG+LLZ6211ux3R5rHWCtZGhBBOCbaTUu7kzM9FYVuDeO+FNsWjD+EQ9S/px/8EY7ctmHVO5KwzwM5Iymu4pjRzP24D5tAJs34D7Bzm3a+f5uLWgpWfCzMZY+YHG0QXqDVdBloZZp0VXzmXAriCOZq/pyV5STB0Eo0pHqCufXQygCs2BTWCxUrC5eDZO+f7iL+BSy+KpX9ethZWSVibCSDHiLutK0QNPv9CGIpDXWaCPTkioj5c7+uC/sBctSccMfjBrITrjsQvKEXB25DufUepDPtyAnvYNFElrkrVGZZxD89hSqJaYflL2Gtq0rcAAwDa/ePzqfelnAAAAABJRU5ErkJggg==) no-repeat center bottom;
}
.bx-authform-input-container input[type="text"],
.bx-authform-input-container input[type="password"] {
display: block;
width: 100%;
font-size: 18px;
height: 38px;
margin: 0;
padding: 0 4px;
border: 1px solid #CCD5DB;
border-radius: 2px;
background: #f8fafc;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bx-authform-input-container input[type="text"].bx-empty-field,
.bx-authform-input-container input[type="password"].bx-empty-field{
border-color: #dd4b39;
}
span.bx-authform-starrequired{
color: #d93333;
}
.bx-authform-formgroup-container .bx-captcha{
margin-bottom: 10px;
}
.bx-authform-link-container,
.bx-authform-description-container{
padding-bottom: 10px;
font-size: 13px;
color: #292d2e;
}
.bx-authform-description-container{
font-size: 13px;
color: #5a6c77;
}
.bx-authform-link-container{margin-bottom: 20px;}
/* PAGINATION */
.bx-pagination {
margin: 10px 0;
}
.bx-pagination .bx-pagination-container {
text-align: center;
position: relative;
}
.bx-pagination .bx-pagination-container ul {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
.bx-pagination .bx-pagination-container ul li {
display: inline-block;
margin: 0 2px 15px 2px;
}
.bx-pagination .bx-pagination-container ul li span{
-webkit-transition: color .3s ease, background-color .3s ease, border-color .3s ease;
-moz-transition: color .3s ease, background-color .3s ease, border-color .3s ease;
-ms-transition: color .3s ease, background-color .3s ease, border-color .3s ease;
-o-transition: color .3s ease, background-color .3s ease, border-color .3s ease;
transition: color .3s ease, background-color .3s ease, border-color .3s ease;
background: #eff0f1;
padding: 0 8px;
display: block;
height: 32px;
min-width: 32px;
line-height: 32px;
color: #444;
font-size: 14px;
border-radius: 16px;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bx-pagination .bx-pagination-container ul li a {
text-decoration: none;
display: block;
border-radius: 16px;
display: block;
height: 32px;
min-width: 32px;
line-height: 32px;
color: #444;
vertical-align: middle;
}
.bx-pagination .bx-pagination-container ul li a:hover span{
background: #DADADA;
}
.bx-pagination .bx-pagination-container ul li.bx-active span{
background: #0083d1;
color: #fff;
}
.bx-pagination .bx-pagination-container ul li.bx-pag-all a span,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev a span,
.bx-pagination .bx-pagination-container ul li.bx-pag-next a span {
background: #fff;
border: 2px solid #eff0f1;
line-height: 28px;
padding: 0 18px;
color: #444;
}
.bx-pagination .bx-pagination-container ul li.bx-pag-all span,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev span,
.bx-pagination .bx-pagination-container ul li.bx-pag-next span{
color: #aab1b4;
background: #fff;
border: 2px solid #eff0f1;
line-height: 28px;
padding: 0 18px;
}
.bx-pagination .bx-pagination-container ul li.bx-pag-all a:hover span,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev a:hover span,
.bx-pagination .bx-pagination-container ul li.bx-pag-next a:hover span {
background: #fff;
border-color: #DADADA;
color: #000;
}
.bx-pagination.bx-green .bx-pagination-container ul li.bx-active span{
background: #3bc915;
color: #fff;
}
.bx-pagination.bx-yellow .bx-pagination-container ul li.bx-active span{
background: #F9A91D;
color: #fff;
}
.bx-pagination.bx-red .bx-pagination-container ul li.bx-active span{
background: #E22B2B;
color: #fff;
}
#loading_screen{
position:fixed;
z-index: 1150;
left:50%;
top:50%;
margin-left: -32px;
margin-top: -32px;
width:64px;
height:64px;
}
.bx-soa-empty-cart-image{
width:131px;
height:116px;
margin:50px auto 42px;
background:url(images/empty_cart.svg) no-repeat center;
-webkit-background-size:contain;
background-size:contain;
}
.bx-soa-empty-cart-text{
font-size:36px;
text-align:center;
color:#bababa;
margin-bottom:42px;
}
.bx-soa-empty-cart-desc{
text-align:center;
color:#000;
font-size:16px;
margin-bottom:42px;
}
.soa-property-container .input-group-addon{
background:#fff;
}
.input-group-addon .bx-calendar{
background:url(images/calendar.svg) no-repeat center;
display: inline-block;
width: 18px;
background-size: 18px auto;
height: 18px;
}
}
@media #{$media-phone-landscape} {
.accordion-steps {
&__content {
.accordion-step {
&__content {
padding: 10px;
}
&__item-tr {
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
}
&__item-td-title {
padding-left: 0;
}
&__item-td-text {
padding-left: 0;
}
&__pp {
margin-left: 0;
}
&__item-container {
width: auto;
float: none;
margin-left: 0;
padding-right: 0;
margin-left: -7px;
margin-right: -7px;
.accordion-step__pp-company {
width: 25%;
margin-left: 0;
}
}
&__pp-desc-container {
float: none;
width: auto;
margin-left: 0;
clear: left;
.accordion-step__pp-company-logo {
display: none;
}
.accordion-step__pp-list-termin,
.accordion-step__pp-list-description {
display: inline;
}
.accordion-step__pp-company {
padding-bottom: 0;
}
}
}
}
}
}
@media #{$media-phone} {
.accordion-steps {
&__content {
.accordion-step {
&__item-container {
.accordion-step__pp-company {
width: 50%;
margin-left: 0;
}
}
}
}
}
}
// Да, дожно быть именно тут.
#bx-soa-order {
counter-reset: heading;
}
.address-detail {
&__caption {
font-weight: 700;
font-size: 175%;
@include mbot(20/20);
}
&__cols {
@include columnizerParent();
}
&__left-col {
@include columnizer(6)
}
&__right-col {
@include columnizer(6)
}
&__contact-holder {
@include margin(30/20);
}
&__contact-items {
}
&__contact-item {
display: table;
width: 100%;
@include margin(10/20);
}
&__contact-label {
width: 30%;
display: table-cell;
}
&__contact-value {
display: table-cell;
&.is-important {
font-size: 125%;
}
}
&__routes-holder {
@include margin(30/20);
}
&__route {
@include margin(30/20);
}
&__route-title {
font-size: 125%;
@include mbot(15/20);
}
&__map {
height: 500px;
@include margin(20/20);
}
}
.advantages-grid {
@include clearfix;
&__title {
margin-bottom: 25px;
text-align: center;
font-size: 28px;
font-weight: bold;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
@include columnizerParent();
margin-top: - getcolumnmargin();
}
&__item {
position: relative;
@include columnizer(3);
margin-top: getcolumnmargin();
padding-left: 90px;
@include clearfix;
&:nth-child(4n+1) {
clear: left;
}
}
&__icon-holder {
position: absolute;
top: 0;
left: 0;
}
&__icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: lightblue;
overflow: hidden;
&-img {
max-width: 100%;
max-height: 100%;
}
}
&__name {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
}
@mixin _state_is3cols ($mod: '') {
.advantages-grid#{$mod} {
.advantages-grid {
&__item {
@include columnizer(4);
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
}
}
@mixin _state_is2cols ($mod: '') {
.advantages-grid#{$mod} {
.advantages-grid {
&__list {
@include columnizerParent(6);
margin-top: - getcolumnmargin(6);
}
&__item {
@include columnizer(3, 6);
margin-top: getcolumnmargin(6);
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
}
@mixin _state_flat ($mod: '') {
.advantages-grid#{$mod} {
.advantages-grid {
&__list {
margin-top: 0;
}
&__item {
@include columnizer(12);
@include margin(20/20);
}
}
}
}
@mixin _state_nocontent ($mod: '') {
.advantages-grid__item#{$mod} {
display: table-row;
padding-left: 0px;
.advantages-grid {
&__icon-holder {
position: relative;
display: table-cell;
width: 90px;
}
&__content-holder {
display: table-cell;
vertical-align: middle;
}
&__name {
margin: 0px;
}
}
}
}
@mixin adaptive() {
.advantages-grid {
@media #{$media-phone-landscape} {
&__list {
margin-top: -20px;
}
&__item {
margin-top: 20px;
@include columnizer(6);
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__list {
margin-left: 0;
margin-top: 0;
}
&__item {
display: block;
float: none;
width: auto;
margin-left: 0;
}
}
}
}
@include _state_is3cols('.is-3cols');
@include _state_is2cols('.is-2cols');
@include _state_flat('.is-flat');
@include _state_nocontent('.is-nocontent');
@include adaptive();
.advantages-grid.is-3cols {
@include adaptive;
}
.articles-list {
&__item {
@include clearfix;
@include mbot(20/20);
padding-bottom: 10px;
}
&__thumbnail {
float: left;
width: 160px;
margin-right: 20px;
}
&__content {
overflow: hidden;
}
&__thumb-holder {
border-radius: 5px;
}
&__thumb-link {
display: inline-block;
vertical-align: top;
}
&__thumb-img {
display: inline-block;
max-width: 100%;
background: #F0F0F0;
vertical-align: top;
}
&__title {
@include mbot(10/20);
}
&__title-link {
font-size: 18/14*100%;
font-weight: bold;
text-decoration: none;
color: #0099ff;
&:hover {
opacity: .8;
}
}
&__description {
@include margin(10/20);
}
&__tags {
margin: 0;
padding: 0;
}
&__tag {
display: inline-block;
margin: 0 7px 7px 0;
border-radius: 4px;
vertical-align: top;
}
&__tag-link {
display: block;
padding: 0 15px;
border-radius: 4px;
background: #eea546;
text-decoration: none;
color: white;
&:visited {
color: white;
}
&:hover, &:visited:hover {
color: white;
opacity: .8;
}
}
&__items {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
@include margin(20/20);
}
@media #{$media-phone} {
&__thumbnail {
width: 100px;
margin-right: 1em;
margin-bottom: 0.5 * $bm;
}
&__content {
overflow: visible;
}
&__description {
clear: left;
}
}
}
// Стандартная форма
.auth-form {
&__title {
@include mtop(2);
@include mbot(1.5);
font-size: 30/14*100%;
line-height: (41/30);
font-weight: 700;
text-align: center;
}
&__plate {
@include the-plate();
}
&__fields-list {
display: table;
width: 100%;
}
&__field {
display: table-row;
&.is-error {
.auth-form__error {
display: block;
}
}
&.is-none {
.auth-form__none {
display: block;
}
}
&.js-pass-change {
display: none;
}
}
&__label {
display: table-cell;
vertical-align: top;
text-align: right;
padding: 20px 10px 0 0;
width: 20%;
&.is-captcha {
padding-top: 100px;
}
}
&__item {
display: table-cell;
vertical-align: top;
padding: 15px 0 15px 10px;
@include clearfix;
input[type='text'],
input[type='email'],
input[type='password'],
textarea {
width: 100%;
}
}
&__add-link {
display: inline-block;
margin-left: 1em;
}
&__list {
list-style: none;
margin: 5px 0;
padding: 0;
&.is-horizontal {
margin: 0;
.auth-form__list-item {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 1.5em;
}
}
}
&__list-item {
@include margin(10/20);
}
&__error {
display: none;
color: $color-status-error;
}
&__none {
display: none;
color: $color-status-error;
}
&__ok {
display: none;
margin-top: 5px;
}
&__remark {
margin-top: 5px;
margin-bottom: 20px;
font-size: 85%;
}
&__inputs {
float: left;
width: 45%;
margin-right: 5%;
}
&__message {
float: left;
max-width: 35%;
margin-top: 3px;
}
&__link-items {
list-style: none;
margin: 0;
padding: 0;
@include margin(10/20);
text-align: center;
white-space: nowrap;
}
&__link-item {
display: inline-block;
&:before {
content: ' | ';
margin-left: .5em;
margin-right: .5em;
}
&:first-child:before {
content: none;
}
}
&__captcha {
display: table;
@include margin(10/20);
}
&__captcha-img {
display: table-cell;
vertical-align: middle;
width: 80%;
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
}
&__captcha-reload {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
padding-left: 15px;
}
&__captcha-link {
font-size: 0;
color: transparent;
&:before {
@include fa-icon($fa-var-refresh, true);
font-size: 18px;
color: #333;
}
}
&__socials-holder {
padding: 15px 25px 25px;
background-color: #ccc;
@include mobile-overflow();
}
&__socials-caption {
font-weight: bold;
font-size: 18/14*100%;
text-align: center;
}
&__socials {
text-align: center;
@include margin(20/20);
}
&__socials-item {
display: inline-block;
vertical-align: middle;
margin-right: .25em;
margin-left: .25em;
}
&__socials-link {
display: inline-block;
width: 50px;
height: 50px;
background-color: #eee;
color: black;
border-radius: 50%;
text-align: center;
&.is-ok {
@include fa-icon($fa-var-google-plus);
line-height: 50px;
font-size: 20px;
}
&.is-vk {
@include fa-icon($fa-var-vk);
line-height: 50px;
font-size: 20px;
}
&.is-tw {
@include fa-icon($fa-var-twitter);
line-height: 50px;
font-size: 20px;
}
&.is-fb {
@include fa-icon($fa-var-facebook);
line-height: 50px;
font-size: 20px;
}
}
&__common-error {
text-align: center;
}
&__common-error-text {
color: $color-status-error;
}
.select2-container {
min-width: 100%;
max-width: 100%;
}
input[type="submit"] {
width: 100%;
box-sizing: border-box;
}
@media #{$media-phone-landscape} {
&__plate {
padding: 20px 10px;
}
&__title {
@include mobile-form-title();
}
}
}
// Состояние: Под полем с ошибкой, отодвигает ниже стоящие поля E2
@mixin _state_e2 ($mod: '') {
.auth-form#{$mod: ''} {
.auth-form {
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
}
}
}
// Состояние: Под полем с ошибкой, не отодвигает ниже стоящие поля E3
@mixin _state_e3 ($mod: '') {
.auth-form#{$mod: ''} {
.auth-form {
&__inputs {
width: auto;
float: none;
max-width: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
margin-left: 0;
position: absolute;
}
}
}
}
// Состояние: Вертикальная (подпись сверху, поле снизу) VER
@mixin _state_ver ($mod: '') {
.auth-form#{$mod: ''} {
.auth-form {
&__title {
margin-left: 0;
margin-right: 0;
}
&__field {
display: block;
padding: 0;
@include margin(20/20);
}
&__label {
display: block;
padding: 0;
width: auto;
text-align: left;
@include margin(10/20);
}
&__item {
display: block;
padding: 0;
}
}
}
}
// Состояние:
@mixin _state_pla ($mod: '') {
.auth-form#{$mod: ''} {
.auth-form {
&__label {
display: none;
}
}
}
}
@include _state_ver();
@include _state_pla();
@include _state_e2();
.auth-block {
&__caption {
@include mtop(3);
@include mbot(2.5);
font-family: $font-base;
font-size: 30/12*100%;
line-height: (41/30);
font-weight: 700;
}
&__form {
@include margin(20/20);
max-width: 400px;
}
@media #{$media-phone-landscape} {
&__form {
max-width: none;
}
}
}
.auth-link {
display: inline-block;
vertical-align: middle;
&__items {
margin: 0;
padding: 0;
list-style: none;
}
&__item {
display: inline-block;
vertical-align: top;
margin-left: 2em;
&:first-child {
margin-left: 0;
}
}
&__link {
border-bottom: 1px dashed white;
text-decoration: none;
color: white;
&:visited, &:hover, &:visited:hover {
color: white;
}
&:hover {
border-bottom: 1px solid white;
}
}
&__user-link {
@include fa-icon($fa-var-user);
display: inline-block;
vertical-align: top;
text-decoration: none;
color: white;
&:visited, &:hover, &:visited:hover {
color: white;
}
&:before {
margin-right: .8em;
}
}
&__user-name {
border-bottom: 1px solid white;
color: white;
&:hover {
border-bottom: 1px solid transparent;
}
}
&.is-inverted {
.auth-link {
&__link,
&__user-link,
&__user-name {
border-color: $color-black;
color: $color-black;
&:visited, &:hover, &:visited:hover {
color: $color-black;
}
}
}
}
}
.b2b-modal {
box-sizing: border-box;
max-width: 750px;
&__holder {
position: relative;
@include the-plate();
}
&__title {
font-size: 24/14*100%;
font-weight: bold;
@include mbot(20/20);
}
&__product {
display: table;
box-sizing: border-box;
width: 100%;
}
&__product-content {
display: table-row;
}
&__thumb {
display: table-cell;
width: 40%;
padding-right: 10px;
text-align: center;
}
&__thumb-link {
display: inline-block;
vertical-align: top;
}
&__thumb-img {
display: block;
max-width: 100%;
}
&__props-holder {
display: table-cell;
width: 60%;
padding-left: 10px;
}
&__props {
display: table;
width: 100%;
box-sizing: border-box;
}
&__prop-row {
display: table-row;
}
&__prop-name {
width: 60%;
display: table-cell;
font-weight: bold;
padding-bottom: 10px;
}
&__prop-value {
width: 40%;
display: table-cell;
padding-bottom: 10px;
}
@media #{$media-phone} {
&__product,
&__product-content,
&__thumb,
&__props-holder {
display: block;
width: auto;
padding: 0;
margin: 0;
}
&__thumb {
margin-bottom: $bm;
}
}
}
.b2b-table {
&__title {
margin-bottom: 5px;
color: #999999;
font-size: 12/14*100%;
}
&__table {
margin-bottom: 20px;
box-sizing: border-box;
width: 100%;
}
&__head {
font-size: 12/14*100%;
background: #F0F0F0;
color: #999999;
}
&__th {
padding: 2px 0px;
border: none;
}
&__th-info {
width: 1%;
}
&__th-name {
width: 30%;
}
&__body {
font-size: 11/14*100%;
}
&__tr {
}
&__td {
padding: 7px 5px;
@include thin-border-bottom;
vertical-align: middle;
}
&__info-link {
position: relative;
display: block;
font-size: 14/14*100%;
margin: 0px 5px;
@include fa-icon($fa-var-info);
}
&__link {
text-decoration: none;
}
&__modal {
display: none;
}
&__percent,
&__stock,
&__reserve,
&__balance {
max-width: 3em;
text-align: right;
}
&__price {
text-align: right;
font-size: 120%;
}
&__date {
text-align: center;
}
&__name {
min-width: 30%;
width: 30%;
}
&__quantity {
text-align: center;
}
@media #{$media-phone-landscape} {
&__table-wrapper {
@include mobile-overflow(false);
width: auto;
overflow-x: scroll;
}
&__table {
min-width: 800px;
}
&__td, &__th {
padding-left: 10px;
padding-right: 10px;
}
}
}
.back-link {
&__link:before {
content: '\2190';
display: inline-block;
margin-right: 0.5em;
text-decoration: none;
}
}
.booklets-list {
&.main {
.booklets-list {
&__item {
list-style-type: none;
margin: {
top: 2.5%;
bottom: 0;
}
&:first-child {
margin-left: 0;
}
}
&__title {
font-size: 16px;
padding: 5px 5px 7px;
color: $background;
font-weight: bold;
}
}
}
&__items {
@include columnizerParent;
margin-top: -2.5%;
margin-left: 0;
margin-right: 0;
}
&__item {
@include columnizer(2);
margin-top: 2.5%;
&:nth-child(6n+1) {
clear: left;
}
}
&__text{
font-size: 13px;
color: #000;
text-align: left;
margin: 5px 0;
}
&__bg-holder {
text-align: left;
@include clearfix
}
&__bg {
max-width: 100%;
height: auto;
vertical-align: top;
}
&__content-holder {
background-color: rgba(255,255,255,.6);
transition: .3s bottom;
}
&__title {
padding: 5px 10px 7px;
text-align: left;
font-weight: 600;
}
&__booklet-link {
position: relative;
display: block;
}
&__booklet-img {
width: 100%;
height: auto;
min-height: 100%;
}
&__type,
&__size {
//float: left;
margin-right: 5px;
color: #696969;
text-align: left;
font-size: 12px;
padding-left: 3px;
}
&__download-link {
text-decoration: none;
//float: right;
text-align: center;
background-color: $accent;
color: #fff;
transition: background-color .25s;
font-weight: bold;
padding: 9px 30px;
display: block;
border-radius: 4px;
margin-top: 10px;
&:hover{
background-color: $accent-hover;
color: #fff;
}
}
@media #{$media-phone-landscape} {
&__item {
@include columnizer(4);
margin-top: 2.5%;
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__item {
@include columnizer(6);
margin-top: 2.5%;
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
@media screen and (max-width: 400px) {
&__item {
width: 100%;
margin: 2.5% 0 0;
padding: 5%;
}
}
}
.brands-detail {
&__title,
&__recomend-title
{
font-size: 150%;
font-weight: bold;
@include mbot(10/20);
}
&__image-holder {
//padding: 5px;
//border: 1px solid #f2f2f2;
@include margin(10/20);
//border-radius: 5px;
}
&__main-image {
max-width: 100%;
height: auto;
display: block;
}
&__date {
font-style: italic;
@include margin(10/20);
}
&__content {
@include margin(20/20);
}
&__back-holder {
@include margin(20/20);
}
&__back {
text-decoration: none;
&:before {
content: '←';
margin-right: .5em;
}
}
}
.brands-list {
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__items {
@include columnizerParent();
margin-top: - getcolumnmargin();
}
&__item {
@include columnizer(6);
margin-top: getcolumnmargin();
@include clearfix;
&:nth-child(2n+1) {
clear: left;
}
}
&__logo {
float: left;
width: 150px;
margin-right: 20px;
text-align: center;
}
&__info {
overflow: hidden;
}
&__logo-link {
display: inline-block;
vertical-align: top;
}
&__logo-img {
display: block;
max-width: 100%;
}
&__company {
@include mbot(15/20);
}
&__description {
@include mbot(15/20);
}
&__view {
text-decoration: none;
color: #0099FF;
&:hover {
text-decoration: underline;
}
}
@media #{$media-phone-landscape} {
&__items {
margin-left: 0;
margin-top: 0;
}
&__item {
float: none;
width: auto;
margin-left: 0;
@include margin;
}
&__view {
display: none;
}
}
@media #{$media-phone} {
&__logo {
width: 100px;
margin-right: 1em;
}
}
}
.brands-tiles {
&__items {
@include columnizerParent;
margin-top: -2.5%;
}
&__item {
@include columnizer(3);
margin-top: 2.5%;
&:nth-child(4n+1) {
clear: left;
}
}
&__bg-holder {
text-align: center;
}
&__bg {
max-width: 100%;
height: auto;
vertical-align: top;
}
&__content-holder {
transition: .3s bottom;
}
&__title {
padding: 5px 10px 7px;
text-align: center;
font-weight: 600;
}
@media #{$media-phone-landscape} {
&__item {
@include columnizer(4);
margin-top: 2.5%;
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__item {
@include columnizer(6);
margin-top: 2.5%;
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
// Breadcrumbs
.breadcrumbs {
//font-style: italic;
color: #999999;
margin-bottom: 30px;
margin-top: 15px;
margin-left: $base-vertical-margin;
&__list {
list-style: none;
margin-left: 0;
}
&__item {
display: inline;
&:before {
content: "/";
margin: 0 5px;
}
&:first-child:before {
display: none;
}
}
&__link {
text-decoration: underline;
color: #999999;
&:hover {
text-decoration: none;
color: #999999;
}
}
@media #{$media-phone-landscape} {
font-size: 90%;
&__item:last-child {
display: none;
}
}
}
//For content-area
.content-area {
.breadcrumbs {
margin-left: 0;
padding: 0 2%;
&__list {
list-style: none;
margin-left: 0;
padding-left: 0;
}
&__link {
text-decoration: underline;
color: #999999;
&:hover {
text-decoration: none;
color: #999999;
}
}
}
}
.buttons-icon {
text-align: right;
&__button{
display: inline-block;
width: 30px;
height: 30px;
vertical-align: baseline;
background: $color-button-primary-bg;
font-size: 22px;
text-decoration: none;
color: $color-button-primary-text;
text-align: center;
&:hover {
background: lighten($color-button-primary-bg, 20%);
color: $color-button-primary-text;
}
&:visited {
color: $color-button-primary-text;
}
&.is-rss{
background: #ee8208;
@include fa-icon($fa-var-rss);
line-height: 30px;
}
}
}
.buyer-questionary {
}
.cart-items {
&.is-disabled {
opacity: 0.3;
}
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__table {
@include mbot(40/20);
display: table;
box-sizing: border-box;
width: 100%;
}
&__table-head {
display: table-row;
background: #ececec;
}
&__table-item {
display: table-row;
}
&__table-cell {
display: table-cell;
padding: 15px 10px;
border-bottom: 1px solid #ccc;
vertical-align: middle;
width: 1%;
&.is-head {
font-size: 90%;
padding: 20px 10px;
font-weight: bold;
border-bottom: none;
}
}
&__cell-number {
width: 5%;
text-align: center;
}
&__cell-order {
@include clearfix;
width: 45%;
}
&__order-thumb {
vertical-align: middle;
width: 25%;
margin-right: 5%;
text-align: center;
display: inline-block;
}
&__thumb-link {
display: inline-block;
}
&__thumb-img {
display: block;
max-width: 100%;
}
&__order-options {
display: inline-block;
width: 65%;
}
&__order-name {
@include mbot(20/20);
}
&__name-link {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&__amount-label {
display: inline-block;
vertical-align: middle;
}
&__amount-counter {
display: inline-block;
max-width: 80px;
vertical-align: middle;
}
&__cell-price {
width: 15%;
text-align: right;
}
&__cell-quantity {
text-align: center;
width: 155px;
}
&__price-discount {
font-style: italic;
}
&__price-old {
@include mbot(15/20);
white-space: nowrap;
color: rgba(0, 0, 0, .4);
text-decoration: line-through;
}
&__price-value {
white-space: nowrap;
font-size: 20/14*100%;
font-weight: bold;
}
&__cell-coupon {
width: 10%;
text-align: center;
}
&__cell-total {
width: 15%;
text-align: right;
}
&__total-value {
white-space: nowrap;
font-size: 20/14*100%;
font-weight: bold;
}
&__cell-remove {
width: 1%;
text-align: center;
}
&__cell-buttons {
white-space: nowrap;
}
&__remove-order {
@include fa-icon($fa-var-times);
padding: .3em .5em;
border-radius: 6px;
background: grey;
color: white;
cursor: pointer;
display: inline-block;
&:hover {
opacity: .7;
}
}
&__delay {
margin-left: 10px;
font-size: 90%;
color: #ccc;
}
&__footer {
display: table;
width: 100%;
}
&__total-and-coupon,
&__buttons {
display: table-row;
}
&__back,
&__coupon-holder {
display: table-cell;
width: 50%;
vertical-align: top;
padding-bottom: $bm;
}
&__back {
padding-top: 1em;
}
&__back-link {
text-decoration: none;
&:hover {
text-decoration: underline;
color: darkblue;
}
}
&__result,
&__checkout-holder {
display: table-cell;
width: 50%;
text-align: right;
vertical-align: top;
padding-bottom: $bm;
}
&__result-info {
@include mbot(20/20);
}
&__result-sum {
font-size: 22/14*100%;
}
&__sum-old {
white-space: nowrap;
text-decoration: line-through;
color: #ccc;
font-size: 20px;
}
&__sum-actual {
white-space: nowrap;
font-weight: bold;
}
&__result-full {
font-size: 22/14*100%;
}
&__full-label {
font-size: 28px;
}
&__full-price {
white-space: nowrap;
font-weight: bold;
font-size: 28px;
}
&__checkout {
text-align: center;
@extend .button-primary;
@extend .button-big;
}
&__sku-holder {
@include margin(30/20);
}
&__sku-caption {
font-size: 12/14*100%;
@include margin(5/20);
}
&__sku {
@include margin(20/20);
}
&__sku-item {
display: inline-block;
margin-right: .5em;
}
&__color {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid white;
&.is-active {
outline: 1px solid gray;
}
}
&__size {
display: inline-block;
padding: 5px;
font-size: 12/14*100%;
background-color: #eee;
color: black;
&.is-active {
background-color: gray;
color: white;
}
}
&__sku-selected {
font-size: 90%;
display: none;
}
&__sku-selected-link {
@include pseudo-link;
}
&__coupon {
.coupon-list {
.coupon {
display: block;
padding: 10px;
text-transform: uppercase;
border: 1px solid #e2e2e2;
position: relative;
margin-top: 10px;
.coupon_text {
font-weight: normal;
margin: 0px;
}
.notes {
position: absolute;
top: 0;
right: 1em;
font-size: 12px;
color: #fff;
padding: .1em 1em;
text-transform: none;
margin: 0;
}
.notes.bad {
background-color: #ff1217;
}
.notes.good {
background-color: #00ff00;
}
.notes.disabled {
background-color: #7c7d7d;
}
.close {
position: absolute;
right: .2em;
top: 0;
line-height: 1;
font-weight: bold;
cursor: pointer;
}
}
.coupon.bad {
border-color: #ff1217;
color: #ff1217;
}
.coupon.good {
border-color: #00ff00;
color: #00ff00;
}
.coupon.disabled {
border-color: #7c7d7d;
color: #7c7d7d;
}
}
}
&__coupon-title {
display: block;
}
&__coupon-apply {
margin-left: 10px;
}
&__empty {
&-wrap {
width: 500px;
text-align: center;
margin: 40px auto;
}
&-img {
color: #ccc;
position: relative;
display: block;
font-size: 140/14*100%;
@include fa-icon($fa-var-shopping-cart);
}
&-text {
font-size: 18/14*100%;
@include mbot(10/20);
}
}
@media #{$media-phone-landscape} {
&__table-item,
&__table-cell,
&__table {
display: block;
padding: 0;
width: auto;
border: none;
}
&__table-head {
display: none;
}
&__table-item {
padding-bottom: 10px;
@include thin-border-bottom;
margin-bottom: 10px;
position: relative;
}
&__order-thumb,
&__order-options {
vertical-align: top;
}
&__order-thumb {
width: 15%;
margin-right: 3%;
}
&__order-options {
width: 80%;
}
&__sku-holder {
margin-top: 20px;
display: none;
&.is-visible {
display: block;
}
}
&__sku-selected {
display: block;
&.is-hidden {
display: none;
}
}
&__cell-order {
margin-bottom: 20px;
padding-right: 20px;
}
&__cell-price,
&__cell-quantity,
&__cell-total {
width: 30%;
max-width: 100px;
display: inline-block;
vertical-align: middle;
}
&__cell-remove {
position: absolute;
right: 0;
top: 0;
}
&__price-discount {
display: none;
}
&__price-old {
margin-bottom: 0;
}
&__footer {
display: block;
width: auto;
}
&__total-and-coupon {
display: block;
width: auto;
}
&__buttons {
display: block;
width: auto;
}
&__coupon-holder,
&__result {
display: block;
width: auto;
}
&__back {
display: block;
width: auto;
}
&__checkout-holder {
display: block;
width: auto;
}
&__inline-label {
display: none;
}
&__price-value, &__total-value {
font-size: 120%;
}
&__coupon-apply {
padding-left: 15px;
padding-right: 15px;
width: 36%;
}
&__result-btn {
text-align: center;
}
&__checkout {
width: 100%;
}
&__back {
// display: none;
}
#coupon {
width: 59%;
}
&__empty-wrap {
width: auto;
text-align: center;
margin: 0;
}
&__cell-number {
display: none;
}
}
@media #{$media-phone} {
&__order-thumb {
width: 25%;
margin-right: 5%;
}
&__order-options {
width: 65%;
}
&__delay {
display: none;
}
}
}
@mixin product-col() {
display: table-cell;
vertical-align: middle;
padding: 30px 10px;
@include thin-border-bottom();
@media #{$media-phone-landscape} {
display: block;
padding: 0;
@include margin;
border: none;
}
}
@mixin header-col() {
display: table-cell;
padding: 5px 10px;
border-left: 1px solid white;
background-color: #e1e1e1;
}
.cart-items2 {
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__cart-content {
display: table;
width: 100%;
box-sizing: border-box;
}
&__cart-header {
display: table-row;
}
&__name-head {
@include header-col();
border-left: none;
}
&__price-head {
@include header-col();
width: 140px;
}
&__amount-head {
@include header-col();
width: 120px;
}
&__sum-head {
@include header-col();
width: 180px;
}
&__remove-head {
@include header-col();
}
&__product {
display: table-row;
}
&__name-col {
@include product-col();
padding-left: 0;
}
&__price-col {
@include product-col();
}
&__amount-col {
@include product-col();
}
&__sum-col {
@include product-col();
}
&__remove-col {
@include product-col();
padding: 0;
}
&__thumb {
float: left;
width: 25%;
min-width: 70px;
margin-right: 5%;
text-align: center;
}
&__thumb-link {
}
&__thumb-img {
display: block;
width: 100%;
height: auto;
}
&__description {
overflow: hidden;
}
&__name-title {
@include mbot(10/20);
}
&__name-link {
font-size: 16/14*100%;
font-weight: bold;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
&__price-number {
white-space: nowrap;
}
&__sum-title {
@include mbot(10/20);
font-size: 15/14*100%;
font-weight: bold;
}
&__sum-value {
font-size: 15/14*100%;
font-weight: bold;
}
&__sum-number {
white-space: nowrap;
}
&__remove-order {
@include fa-icon($fa-var-times);
padding: .3em .5em;
cursor: pointer;
}
&__footer {
@include columnizerParent;
@include mtop;
}
&__footer-content {
}
&__information {
@include columnizer(5)
margin-bottom: $base-vertical-margin;
}
&__footnote {
@include mbot(50/20);
}
&__footnote-title {
display: block;
}
&__footnote-subtitle {
display: block;
}
&__checkout {
@include columnizer(7)
margin-bottom: $base-vertical-margin;
}
&__order-total {
@include mbot(20/20);
}
&__total-value {
font-size: 16/14*100%;
font-weight: bold;
}
&__order-notice {
@include mbot(30/20);
}
&__notice-title {
@include mbot(15/20);
font-size: 15/14*100%;
font-weight: bold;
}
&__checkout-btn {
padding: 10px 50px;
}
&__back {
padding-top: 0.8em;
}
@media #{$media-phone-landscape} {
&__cart-content {
display: block;
}
&__name-col {
@include clearfix();
}
&__product {
display: block;
padding-bottom: 10px;
@include thin-border-bottom();
margin-bottom: 10px;
position: relative;
}
&__cart-header {
display: none;
}
&__price-col,
&__amount-col,
&__sum-col {
width: 32%;
display: inline-block;
vertical-align: middle;
margin-top: 0;
margin-bottom: 0;
}
&__amount-col {
.counter-input__unit {
display: none;
}
}
&__remove-col {
position: absolute;
right: 0;
top: 0;
margin-top: 0;
}
&__name-title {
padding-right: 20px; // for x-remove button
}
&__footer {
margin-left: 0;
}
&__information,
&__checkout {
float: none;
margin-left: 0;
margin-bottom: 10px;
width: auto;
&:last-child {
margin-bottom: 0;
}
}
}
}
.cart-line {
&__container {
position: relative;
display: inline-block;
vertical-align: top;
&:hover {
.cart-line__order {
display: block;
}
}
}
&__mini {
@include fa-icon($fa-var-shopping-cart);
display: inline-block;
padding: 5px 0;
vertical-align: middle;
&:before {
display: inline-block;
padding: .5em;
margin-right: 10px;
border-radius: 50%;
background: grey;
vertical-align: middle;
font-size: 25/14*100%;
color: white;
}
}
&__mini-info {
display: inline-block;
vertical-align: middle;
}
&__amount {
}
&__amount-link {
}
&__order {
position: absolute;
z-index: 1002;
display: none;
top: 100%;
right: 0;
padding-top: 15px;
min-width: 500px;
}
&__order-holder {
position: relative;
padding: 20px;
background: #f2f2f2;
&:before {
position: absolute;
content: '';
top: -15px;
right: 15px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #f2f2f2;
}
}
&__detail {
@include mbot(20/20);
display: table;
box-sizing: border-box;
width: 100%;
padding-bottom: 10px;
@include thin-border-bottom()
}
&__detail-row {
display: table-row;
}
&__detail-photo {
display: table-cell;
width: 20%;
padding: 10px 5px;
vertical-align: middle;
}
&__img-link {
display: inline-block;
padding: 2px;
vertical-align: top;
}
&__img {
display: block;
max-width: 100%;
min-width: 50px;
}
&__detail-name {
display: table-cell;
width: 40%;
padding: 10px 5px;
vertical-align: middle;
}
&__detail-amount {
display: table-cell;
width: 10%;
padding: 10px 5px;
vertical-align: middle;
}
&__detail-price {
display: table-cell;
width: 20%;
padding: 10px 5px;
vertical-align: middle;
}
&__detail-close {
display: table-cell;
width: 10%;
padding: 10px 5px;
vertical-align: middle;
text-align: center;
}
&__close-btn {
@include close-btn();
}
&__detail-result {
text-align: center;
}
&__detail-total {
@include mbot(15/20);
font-size: 16/14*100%;
font-weight: bold;
}
&__cart-btn {
padding: 10px 30px;
margin: 0 10px 10px 10px;
background-color: $accent;
color: #fff;
transition: background-color .25s;
&:hover{
background-color: $accent-hover;
}
}
&__checkout-btn {
padding: 10px 30px;
margin: 0 10px 10px 10px;
}
}
.cart-line.is-mobile {
.cart-line {
&__detail-btns {
text-align: center;
}
&__cart-btn {
width: 100%;
margin: 0;
}
&__checkout-btn {
width: 100%;
margin: 0;
}
&__detail-photo {
width: 10%;
}
&__detail-name {
width: 50%;
}
&__img-link {
width: 60px;
}
@media #{$media-phone} {
&__detail-photo {
display: none;
}
}
}
}
.cart-modal {
box-sizing: border-box;
max-width: 750px;
border-radius: 3px;
border: 1px solid grey;
&__holder {
position: relative;
padding: 40px 30px;
}
&__head {
@include mbot(20/20);
display: table;
box-sizing: border-box;
width: 100%;
}
&__head-content {
display: table-row;
}
&__head-title {
display: table-cell;
width: 70%;
vertical-align: middle;
}
&__heading {
font-size: 26/14*100%;
}
&__head-shopping {
display: table-cell;
width: 30%;
vertical-align: middle;
text-align: right;
}
&__shopping-link {
}
&__product {
@include margin(0, -10);
@include mbot(2);
display: table;
box-sizing: border-box;
width: 100%;
}
&__product-content {
display: table-row;
}
&__thumb {
display: table-cell;
width: 33%;
padding-right: 10px;
text-align: center;
vertical-align: top;
}
&__thumb-link {
display: inline-block;
padding: 2px;
border-radius: 3px;
border: 1px solid lightgrey;
vertical-align: top;
}
&__thumb-img {
display: block;
max-width: 100%;
}
&__detail {
display: table-cell;
width: 34%;
padding: 0 10px;
}
&__name {
@include mbot(15/20);
}
&__name-link {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
&__option {
@include mbot(10/20);
}
&__amount-label {
display: inline-block;
vertical-align: middle;
}
&__amount-counter {
display: inline-block;
vertical-align: middle;
}
&__checkout {
display: table-cell;
width: 33%;
padding-left: 10px;
}
&__price {
@include mbot(20/20);
}
&__price-old {
text-align: right;
text-decoration: line-through;
color: #c6c6c6;
.rub {
&:before {
color: #c6c6c6;
}
}
}
&__price-actual {
@include clearfix;
}
&__actual-title {
float: left;
width: 50%;
}
&__actual-label {
font-size: 16/14*100%;
}
&__actual-value {
float: left;
width: 50%;
text-align: right;
font-size: 18/14*100%;
}
&__cart-btn {
@include mbot(10/20);
display: block;
padding: 7px;
text-align: center;
}
&__order-btn {
@include mbot(10/20);
display: block;
padding: 7px;
text-align: center;
}
&__close {
position: absolute;
content: '';
top: 0;
right: 0;
}
&__close-btn {
@include fa-icon($fa-var-times);
cursor: pointer;
&:before {
font-size: 30/14*100%;
padding: .2em .4em;
}
}
&__products-title {
@extend .h5;
}
}
.catalog-advantages {
box-sizing: border-box;
margin-bottom: 110px;
margin-top: 40px;
&__main-title-wrap {
text-align: center;
position: relative;
margin-bottom: 30px;
margin-top: 85px;
}
&__main-title {
font-size: 35px;
margin-bottom: 30px;
text-align: center;
color: $background;
}
&__items {
padding: 70px 85px;
background-color: $pistacho;
}
&__item {
@include clearfix;
}
&__title {
font-size: 26px;
margin-bottom: 30px;
color: $background;
}
&__text{
font-size: 17px;
}
&__wrap-img {
width: 50%;
height: 290px;
float: left;
img{
width: 100%;
height: auto;
}
}
&__wrap-text {
float: right;
width: 40%;
}
&__arrows {
position: absolute;
top: 40%;
//padding: 0 .3em;
border-radius: 50%;
line-height: 100%;
font-size: 320%;//50/14*100%;
font-weight: bold;
cursor: pointer;
color: $accent;
height: 50px;
width: 50px;
border: 3px solid $accent;
text-align: center;
z-index: 12;
}
&__arrow-left {
@include fa-icon($fa-var-angle-left);
left: 2%;
z-index: 1;
&:before{
margin-right: 5px;
margin-top: -2px;
}
}
&__arrow-right {
@include fa-icon($fa-var-angle-right);
right: 2%;
&:before{
margin-left: 5px;
margin-top: -2px;
}
}
.promo-slider{
&__pagination{
bottom: -60px;
}
}
@media screen and (max-width: 992px) {
&__wrap-img {
width: 50%;
}
&__wrap-text {
position: relative;
z-index: 10;
}
}
&__pagination {
position: absolute;
width: 100%;
//bottom: 30px;
top: 93.2%;
left: 0;
text-align: center;
li {
position: relative;
display: inline-block;
margin: 0 5px;
border-radius: 50%;
width: 15px;
height: 15px;
vertical-align: top;
background-color: #adadad;
&.slick-active {
&:before {
content: '';
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border-radius: 50%;
background-color: $accent;
}
}
}
button {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
width: 14px;
height: 14px;
font-size: 0;
background-color: transparent;
border: none;
}
li.slick-active .promo-slider__page-btn {
background: #909090;
}
}
@media #{$media-phone-landscape} {
&__arrows {
//padding: 0 .1em;
top: 104.5%;
height: 25px;
width: 25px;
font-size: 1.3em;
line-height: 1.3;
}
&__arrow-left {
left: 0;
&:before{
margin-right: 2px;
margin-top: -2px;
}
}
&__arrow-right {
right: 0;
&:before{
margin-left: 2px;
margin-top: -2px;
}
}
&__wrap-img {
position: static;
float: left;
margin-top: 30px;
margin-left: 0;
width: 100%;
height: auto;
img{
margin: 0 auto;
max-width: 100%;
height: auto;
}
}
&__wrap-text {
width: 100%;
}
&__items{
padding: 70px 30px;
}
}
@media #{$media-phone} {
&__title{
font-size: 21px;
}
}
}
@mixin catalog-aside__link() {
position: relative;
text-decoration: none;
color: white;
&:visited {
color: white;
}
&:hover {
text-decoration: none;
color: white;
}
&:visited:hover {
text-decoration: underline;
color: white;
}
}
@mixin catalog-aside__link_bg() {
position: relative;
text-decoration: none;
color: #333333;
&:visited {
color: #333333;
}
&:hover, &:visited:hover {
background-color: #bbb;
color: #333333;
}
}
.catalog-aside {
@include clearfix;
&.is-opened {
z-index: 100;
.catalog-aside__first-level {
float: none;
}
.catalog-aside__first-item {
&.is-contain {
}
}
.catalog-aside__link-text,
.catalog-aside__qtty,
.catalog-aside__contain-marker
{
display: inline-block;
}
.catalog-aside__first-link {
&.is-opening {
text-align: inherit;
}
}
.catalog-aside__link-img {
margin-right: 10px;
}
.is-opening:before,
.is-additional:before {
margin-right: 10px;
}
}
&__plate {
}
&__link-text,
&__qtty,
&__contain-marker
{
display: none;
}
&__qtty{
margin-left: 10px;
}
&__contain-marker{
float: right;
&:after {
content: "\2026";
float: right;
padding-left: 0.5em;
}
}
&__first-level {
display: block;
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
@include clearfix;
float: left;
}
&__first-item {
position: relative;
background-color: #888;
border: 1px solid white;
&.is-hide {
display: none;
}
&.is-additional {
position: relative;
}
}
&__first-link {
@include catalog-aside__link;
display: block;
padding: 10px 15px;
color: white;
&.is-opening {
@include fa-icon($fa-var-bars);
font-size: 20px;
text-align: center;
}
&.is-additional {
@include fa-icon($fa-var-ellipsis-h);
font-size: 20px;
text-align: center;
}
}
&__link-img {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
&__second-holder {
display: none;
box-sizing: border-box;
z-index: 10;
}
&__second-level {
margin: 0;
padding: 0;
list-style: none;
}
&__second-item {
position: relative;
&:hover .catalog-aside__third-holder {
display: block;
}
&.is-contain {
.catalog-aside__second-link {
position: relative;
}
}
}
&__second-link {
display: block;
padding: 10px 15px;
background-color: #ccc;
border: 1px solid white;
@include catalog-aside__link_bg;
}
&__third-holder {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 100%;
min-width: 250px;
z-index: 10;
}
&__third-level {
}
&__third-item {
position: relative;
&:hover .catalog-aside__fourth-holder {
display: block;
}
&.is-hide {
display: none;
}
}
&__third-link {
@include catalog-aside__link_bg;
display: block;
padding: 10px 15px;
background-color: #ccc;
border: 1px solid white;
.catalog-aside__contain-marker{
display: none;
}
}
&__fourth-holder {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 100%;
min-width: 250px;
background-color: #ddd;
}
&__fourth-level {
}
&__fourth-item {
}
&__fourth-link {
@include catalog-aside__link_bg;
display: block;
padding: 10px 15px;
background-color: #ccc;
border: 1px solid white;
}
&__additional-holder {
display: none;
position: absolute;
top: 100%;
z-index: 1001;
width: 100%;
min-width: 150px;
}
&__additional-level {
margin: 0;
padding: 0;
list-style: none;
}
&__additional-item {
position: relative;
&:hover .catalog-aside__third-holder {
display: block;
}
}
&__additional-link {
display: block;
padding: 10px 15px;
background-color: #888;
border: 1px solid white;
color: white;
@include catalog-aside__link;
}
&__more-link {
display: none;
font-size: 90%;
cursor: pointer;
&:hover {
text-decoration: underline;
}
&.is-active {
display: inline;
}
}
&__less-link {
display: none;
font-size: 90%;
cursor: pointer;
&:hover {
text-decoration: underline;
}
&.is-active {
display: inline;
}
}
&__first-item.is-opened,
&__second-item.is-opened,
&__third-item.is-opened {
&:after {
transform: rotate(90deg);
}
}
}
// Состояние Z
@mixin _state_z($mod: '') {
.catalog-aside#{$mod} {
&.is-opened {
.catalog-aside__first-item{
&:hover .catalog-aside__second-holder,
&:hover .catalog-aside__additional-holder,
&.is-hover .catalog-aside__second-holder,
&.is-hover .catalog-aside__additional-holder
{
display: block;
}
}
}
.catalog-aside {
&__first-item {
position: relative;
&.is-additional {
position: relative;
}
}
&__second-holder {
position: absolute;
left: 100%;
top: 0;
padding: 20px;
z-index: 10;
min-width: 700px;
background-color: #eee;
}
&__second-level {
@include columnizerParent;
margin-top: - getcolumnmargin();
}
&__second-item {
position: relative;
@include columnizer(4);
margin-top: getcolumnmargin();
&:nth-child(3n+1) {
clear: left;
}
&.is-contain .catalog-aside__second-link:before {
content: none;
}
}
&__second-link {
display: inline;
background: none;
border: none;
padding: 0;
font-weight: bold;
@include catalog-aside__link;
color: #333333;
&:hover, &:visited, &:visited:hover {
color: #333333;
}
.catalog-aside__contain-marker{
display: none;
}
}
&__third-holder {
display: block;
position: static;
left: 100%;
top: 0;
width: 100%;
min-width: 0;
@include margin(20/20);
}
&__third-item {
@include margin(5/20);
}
&__third-link {
display: inline;
background: none;
border: none;
padding: 0;
}
}
}
}
// Состояние T
@mixin _state_t($mod: '') {
.catalog-aside#{$mod} {
position: relative;
&.is-opened {
.catalog-aside__first-item{
&:hover .catalog-aside__second-holder,
&:hover .catalog-aside__additional-holder,
&.is-hover .catalog-aside__second-holder,
&.is-hover .catalog-aside__additional-holder
{
display: block;
}
}
}
.catalog-aside {
&__first-item {
position: inherit;
&.is-additional {
position: relative;
}
}
&__second-holder {
position: absolute;
left: 100%;
top: 0;
padding: 20px;
z-index: 10;
min-width: 700px;
background-color: #eee;
}
&__second-level {
@include columnizerParent;
margin-top: - getcolumnmargin();
}
&__second-item {
position: relative;
@include columnizer(4);
margin-top: getcolumnmargin();
&:nth-child(3n+1) {
clear: left;
}
&.is-contain .catalog-aside__second-link:before {
content: none;
}
}
&__second-link {
display: inline;
background: none;
border: none;
padding: 0;
font-weight: bold;
@include catalog-aside__link;
color: #333333;
&:hover, &:visited, &:visited:hover {
color: #333333;
}
.catalog-aside__contain-marker{
display: none;
}
}
&__third-holder {
display: block;
position: static;
left: 100%;
top: 0;
width: 100%;
min-width: 0;
@include margin(20/20);
}
&__third-item {
@include margin(5/20);
}
&__third-link {
display: inline;
background: none;
border: none;
padding: 0;
}
}
}
}
// Состояние И
@mixin _state_i($mod: '') {
.catalog-aside#{$mod} {
&.is-opened {
.catalog-aside__first-item{
&:hover .catalog-aside__second-holder,
&:hover .catalog-aside__additional-holder,
&.is-hover .catalog-aside__second-holder,
&.is-hover .catalog-aside__additional-holder
{
display: block;
}
}
}
.catalog-aside {
&__first-item {
position: relative;
&.is-additional {
position: relative;
}
}
&__second-holder {
position: absolute;
left: 100%;
top: 0;
padding: 20px;
z-index: 10;
min-width: 700px;
background-color: #eee;
@include clearfix();
}
&__second-level {
float: left;
width: (1/3)*100%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
}
&__second-item {
@include margin(10/20);
&.is-contain .catalog-aside__second-link:before {
content: none;
}
}
&__second-link {
display: inline;
background: none;
border: none;
padding: 0;
font-weight: bold;
@include catalog-aside__link;
color: #333333;
&:hover, &:visited, &:visited:hover {
color: #333333;
}
.catalog-aside__contain-marker{
display: none;
}
}
&__third-holder,
&__fourth-holder {
display: block;
position: static;
left: 100%;
top: 0;
width: 100%;
min-width: 0;
@include margin(10/20);
padding-bottom: 10px;
}
&__fourth-holder{
background: none;
padding-left: 10px;
}
&__third-item {
@include margin(5/20);
}
&__third-link,
&__fourth-link {
display: inline;
background: none;
border: none;
padding: 0;
.catalog-aside__contain-marker{
display: none;}
}
}
}
}
@include _state_i('.is-i-state');
@include _state_z('.is-z-state');
@include _state_t('.is-t-state');
.catalog-compare-button {
text-align: right;
&__link {
padding: 10px;
border-radius: 50%;
//background-color: #eee;
line-height: 1;
&:before {
@include fa-icon($fa-var-tasks, true);
font-size: 16px;
}
&.is-active,
&.added{
&:before {
@include fa-icon($fa-var-tasks, true);
font-size: 16px;
}
}
color: $accent;
transition: color .25s;
text-decoration: none;
&:hover{
color: $accent-hover;
text-decoration: none;
}
}
}
.catalog-compare-button.is-list {
.catalog-compare-button {
&__text {
display: none;
}
&__link {
position: absolute;
left: 10px;
top: 10px;
background-color: #eee;
&.added{
color: #eee;
background-color: #000;
}
}
}
}
.catalog-compare-button.is-detail {
.catalog-compare-button {
font-size: 12/14*100%;
&__link {
text-decoration: none;
&:before {
margin-right: .5em;
}
padding: inherit;
border-radius: inherit;
background-color: inherit;
line-height: inherit;
}
}
}
.catalog-favor-button {
&__link {
padding: 10px;
border-radius: 50%;
//background-color: #eee;
line-height: 1;
color: $accent;
&:before {
@include fa-icon($fa-var-heart-o, true);
font-size: 16px;
}
&.is-active,
&.added{
&:before {
@include fa-icon($fa-var-heart, true);
font-size: 16px;
}
}
}
}
.catalog-favor-button.is-list {
.catalog-favor-button {
&__text {
display: none;
}
&__link {
position: absolute;
right: 0;
top: 0;
//background-color: #eee;
}
}
}
.catalog-favor-button.is-detail {
.catalog-favor-button {
font-size: 12/14*100%;
&__link {
text-decoration: none;
&:before {
margin-right: .5em;
}
padding: inherit;
border-radius: inherit;
background-color: inherit;
line-height: inherit;
}
}
}
.catalog-items {
position: relative;
&__load-wrap{
text-align: center;
}
&.is-access,
&.is-random {
.catalog-items {
&__col {
@include columnizer(3, 12);
width: calc(100%/4);
margin: 0;
border-top: 1px solid $pistacho;
padding: 0 22px;
&:first-child{
padding-left: 40px;
@media #{$media-phone-landscape} {
padding-left: 0;
}
}
&:last-child{
padding-right: 40px;
border-right: 1px solid $pistacho;
@media #{$media-phone-landscape} {
padding-right: 0;
}
}
}
@media #{$media-desktop} {
&__col{
//width: calc(100%/4 - 1%);
//margin-left: 0.5%;
//margin-right: 0.5%;
&:nth-child(3n+1){
clear: none;
}
}
}
@media #{$media-desktop} {
&__col{
//width: calc(100%/2 - 1%);
}
}
@media #{$media-phone-landscape} {
&__col{
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 3%;
padding-right: 2%;
float: none;
}
}
}
}
&__cols {
list-style: none;
margin: 0;
padding: 0;
@include columnizerParent(12);
position: static;
margin-top: - getcolumnmargin(12);
display: flex;
flex-wrap: wrap;
margin: 0;
margin-bottom: 45px;
}
&__col {
margin: 0;
margin-top: getcolumnmargin(12);
@include columnizer(4, 12);
margin: 0;
border-left: 1px solid $pistacho;
border-bottom: 1px solid $pistacho;
border-right: 1px solid $pistacho;
width: calc(100%/3);
&:nth-child(3n+1) {
//clear: left;
}
&:last-child{
border-right: 1px solid $pistacho;
}
}
&__load {
background-color: $accent;
width: 340px;
padding: 8px 18px;
margin: 0 auto;
border-radius: 5px;
text-align: center;
font-size: 12px;
//padding: 5px 0;
color: #fff;
text-transform: uppercase;
margin-top: 15px;
cursor: pointer;
transition: background-color .25s;
border: 0;
&:hover{
background-color: $accent-hover;
}
}
&__message {
@include margin(1);
text-align: center;
font-size: $font-size-base*1.3;
&.is-no-items {
color: $color-text-light;
@include fa-icon($fa-var-times-circle);
&:before {
font-size: $font-size-base*3;
vertical-align: middle;
margin-right: $base-vertical-margin * 0.5;
}
}
}
// Adaptive
@media #{$media-tablet} {
&__col {
@include columnizer(4);
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
@media #{$media-phone-landscape} {
&__col {
//@include columnizer(6);
width: 46%;
margin-left: 2%;
margin-right: 2%;
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
.is-slide-to-mobile & {
clear: none;
}
}
.is-slide-to-mobile & {
float: left;
height: auto;
}
border-bottom: 1px solid $catalog-items-border-color;
padding-bottom: 10px;
}
}
@media #{$media-phone} {
&__arrows {
.is-slide-to-mobile & {
display: block;
position: absolute;
top: 0;
bottom: 0;
line-height: 100%;
font-size: 360%;
font-weight: bold;
cursor: pointer;
z-index: 10;
&:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
&-left {
@include fa-icon($fa-var-angle-left);
left: 0;
}
&-right {
@include fa-icon($fa-var-angle-right);
right: 0;
}
}
&__cols {
margin-left: 0;
margin-top: 0;
.is-slide-to-mobile & {
margin-left: -10px;
@include clearfix;
.is-hide {
display: none;
}
}
}
&__col {
float: none;
width: auto;
margin-left: 0;
@include margin(20/20);
.is-slide-to-mobile &{
margin-top: 0;
&:first-child { margin-top: 0; }
border: 1px solid $catalog-items-border-color;
margin-right: 10px;
padding: 10px;
@include box-sizing();
}
}
&__load{
width: 70%;
}
}
// States
&.is-3cols {
.catalog-items {
&__cols {
@include columnizerParent(9);
margin-top: - getcolumnmargin(9);
}
&__col {
@include columnizer(3, 9);
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
// Adaptive
@media #{$media-tablet} {
&__cols {
@include columnizerParent(8);
margin-top: - getcolumnmargin(8);
}
&__col {
@include columnizer(4, 8);
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
@media #{$media-phone-landscape} {
&__cols {
@include columnizerParent(12);
margin-top: - getcolumnmargin(12);
}
&__col {
@include columnizer(12);
&:nth-child(3n+1) {
clear: none;
}
//&:nth-child(2n+1) {
// clear: left;
//}
}
}
@media #{$media-phone} {
&__cols {
margin-left: 0;
margin-top: 0;
}
&__col {
float: none;
width: auto;
margin-left: 0;
@include margin(20/20);
}
}
}
}
&.is-2cols {
.catalog-items {
&__cols {
@include columnizerParent(6);
margin-top: - getcolumnmargin(6);
}
&__col {
@include columnizer(3, 6);
margin-top: getcolumnmargin(6);
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
@media #{$media-tablet} {
&__cols {
@include columnizerParent(12);
margin-top: - getcolumnmargin(12);
}
&__col {
@include columnizer(6);
margin-top: getcolumnmargin;
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
}
&.is-1cols {
.catalog-items {
&__cols {
margin-left: 0;
margin-top: 0;
}
&__col {
float: none;
width: auto;
margin-left: 0;
@include margin(20/20);
}
@media #{$media-tablet} {
&__cols {
margin-left: 0;
margin-top: 0;
}
&__col {
float: none;
width: auto;
margin-left: 0;
@include margin(20/20);
}
}
@media #{$media-phone-landscape} {
&__cols {
margin-left: 0;
margin-top: 0;
}
&__col {
float: none;
width: auto;
margin-left: 0;
@include margin(20/20);
}
}
}
}
}
.catalog-items{
@media #{$media-desktop}{
&__col{
width: calc(100%/2);
margin-left: 0;//0.5%;
margin-right: 0;//0.5%;
&:nth-child(3n+1){
clear: none;
}
}
}
@media #{$media-phone-landscape} {
&__col{
width: 100%;//calc(100% / 2);
margin: 0;
//margin-left: 0;
//margin-right: 0;
//padding-left: 3%;
//padding-right: 2%;
}
}
@media screen and (max-width: 550px){
&__col{
width: 100%;
}
}
}
.content-area {
.catalog-items {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
margin: 0;
padding: 0;
}
}
}
}
.catalog-largelist {
&__item {
@include margin(20/20);
}
&__plate {
display: table;
border: 1px solid #909090;
@include clearfix;
}
&__thumbnail {
display: table-cell;
width: 30%;
max-width: 280px;
min-width: 200px;
padding: 15px;
}
&__thumb-holder {
padding: 4px;
border: 1px solid #d9d9d9;
border-radius: 4px;
text-align: center;
}
&__thumb-img {
display: inline-block;
max-width: 100%;
height: auto;
vertical-align: top;
}
&__info {
display: table-cell;
padding: 15px 2% 15px 2%;
}
&__title {
margin-bottom: 10px;
font-size: 24px;
font-weight: bold;
}
&__stock {
@include clearfix;
}
&__boolean {
float: left;
width: 50%;
margin-bottom: 15px;
font-size: 14px;
}
&__boolean-text {
@include fa-icon($fa-var-check);
&::before {
margin-right: 5px;
}
}
&__amount {
float: left;
width: 50%;
margin-bottom: 15px;
text-align: right;
font-size: 14px;
}
&__rating-holder {
@include clearfix;
}
&__category {
float: left;
width: 50%;
margin-bottom: 15px;
font-size: 14px;
}
&__rating {
float: left;
width: 50%;
}
&__description {
@include margin(10/20);
}
&__mark {
@include margin(40/20);
@include clearfix;
}
&__favor {
float: left;
width: 50%;
}
&__favor-link {
@include fa-icon($fa-var-heart-o);
display: inline-block;
vertical-align: top;
text-decoration: none;
&::before {
margin-right: 5px;
cursor: pointer;
}
&.is-active {
@include fa-icon($fa-var-heart);
&:before {
margin-right: 5px;
}
}
}
&__compare {
float: left;
width: 50%;
}
&__compare-link {
@include fa-icon($fa-var-tasks);
text-decoration: none;
&::before {
margin-right: 5px;
}
}
&__ui {
display: table-cell;
width: 25%;
height: 100%;
padding: 15px 2% 15px 2%;
background: #f0f0f0;
}
&__price {
margin-bottom: 15px;
font-weight: bold;
}
&__price-label {
display: inline-block;
margin-right: 15px;
vertical-align: baseline;
font-size: 16px;
}
&__price-number {
display: inline-block;
vertical-align: baseline;
font-size: 30px;
}
&__advantages-list {
padding: 0;
margin: 0 0 30px 0;
list-style: none;
}
&__advantages-item {
position: relative;
padding-left: 30px;
@include margin(20/20);
&:before {
position: absolute;
left: 0;
top: 50%;
margin-top: -8px;
margin-right: 5px;
}
&.is-delivery {
&:before {
@include fa-icon($fa-var-truck, true);
font-size: 16px;
}
}
&.is-pickup {
&:before {
@include fa-icon($fa-var-dropbox, true);
font-size: 16px;
}
}
&.is-store {
&:before {
@include fa-icon($fa-var-cubes, true);
font-size: 16px;
}
}
}
&__order {
@include margin(20/20);
}
&__order-btn {
@include fa-icon($fa-var-shopping-cart);
display: block;
text-align: center;
text-decoration: none;
&::before {
margin-right: 5px;
}
}
&__fast-btn {
display: block;
text-align: center;
}
}
.catalog-list {
.select2-container {
width: auto !important;
}
&__item {
border-bottom: 1px solid #909090;
@include clearfix;
padding-bottom: 20px;
margin-bottom: 20px;
}
&__plate {
@include columnizerParent;
}
&__thumbnail {
@include columnizer(3);
text-align: center;
}
&__info {
@include columnizer(7);
}
&__ui-holder {
@include columnizer(2);
padding-top: 20px;
text-align: center;
}
&__thumb-holder {
display: inline-block;
padding: 3px;
border-radius: 4px;
border: 1px solid #d9d9d9;
vertical-align: top;
}
&__thumb-img {
display: inline-block;
vertical-align: top;
max-width: 100%;
}
&__category {
margin-bottom: 8px;
font-size: 16px;
font-style: italic;
}
&__category-link {
color: #999999;
&:hover {
color: #999999;
}
}
&__title {
margin-bottom: 8px;
font-size: 20px;
font-weight: bold;
}
&__description {
margin-bottom: 10px;
font-size: 15px;
&.is-hide{
display: none;
}
}
&__option-list {
&.is-size {
width: 120px;
}
&.is-color {
width: 50px;
}
}
&__option-label {
margin-right: .5em;
}
&__options{
@include columnizerParent;
}
&__options-item {
@include columnizer(6);
}
&__btns {
@include margin(20/20);
}
&__price {
margin-bottom: 15px;
}
&__price-title {
font-weight: bold;
}
&__old-price {
color: gray;
text-decoration: line-through;
}
&__current-price {
font-size: 150%;
}
&__order {
@include margin(10/20);
}
&__order-btn {
display: block;
text-align: center;
}
&__fast {
@include margin(10/20);
}
&__fast-btn {
display: block;
text-align: center;
}
@media #{$media-phone-landscape} {
&__thumbnail {
@include columnizer(3);
text-align: center;
}
&__info {
@include columnizer(9);
}
&__ui-holder {
@include columnizer(12);
padding-top: 20px;
text-align: center;
}
&__category {
font-size: 100%;
}
&__title {
font-size: 130%;
}
&__description {
font-size: 100%;
}
&__options{
margin-left: 0;
}
&__options-item {
float: none;
width: auto;
margin-left: 0;
@include margin(0.5);
}
&__btns {
@include columnizerParent(12);
}
&__order, &__fast {
@include columnizer(6);
margin-top: 0;
margin-bottom: 0;
}
&__price {
text-align: left;
}
}
}
.catalog-plate {
position: relative;
//max-width: 420px;
//min-width: 190px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow-y: visible;
@include box-sizing;
&__name{
color: $background;
text-decoration: none;
transition: color .25s;
font-weight: bold;
font-size: 1.53333rem;
line-height: 1.3;
&-series {
color: $accent;
font-size: 67%;
margin-top: 4px;
}
&:hover{
text-decoration: none;
color: $accent-hover;
}
}
&__series{
color: #696969;
font-size: 12px;
margin-top: 15px;
display: block;
//font-weight: normal;
}
&__top-wrap{
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid $pistacho;
}
&__energy-wrap {
@include margin;
}
&__energy-link {
display: block;
width: 44px;
padding: 0;
padding-left: 11px;
position: relative;
color: #fff;
text-decoration: none;
font-size: 1.6em;
padding-bottom: 3px;
font-weight: bold;
line-height: normal;
text-transform: uppercase;
margin: 1px 0;
&:hover {
color: #fff;
}
&-index{
font-size: 1em;
margin-top: -10px;
position: relative;
top: -6px;
font-weight: normal;
}
&:before{
content: '';
display: inline-block;
position: absolute;
right: -31px;
top: 0;
border: 16px solid transparent;
}
&.is-energy-a{
background-color: #feed00;
&:before{
border-left-color: #feed00;
}
}
&.is-energy-b{
background-color: #fbba00;
&:before{
border-left-color: #fbba00;
}
}
&.is-energy-c{
background-color: #ec6607;
&:before{
border-left-color: #ec6607;
}
}
&.is-energy-d{
background-color: #E30713;
&:before{
border-left-color: #E30713;
}
}
&.is-energy-a-plus-1{
background-color: #C6D300;
&:before{
border-left-color: #C6D300;
}
&:after{
content: '+';
font-size: 1em;
position: absolute;
top: -5px;
font-weight: normal;
display: block;
color: #fff;
left: 48%;
}
}
&.is-energy-a-plus-2{
background-color: #51AD31;
&:before{
border-left-color: #51AD31;
}
&:after{
content: '++';
font-size: 1em;
position: absolute;
top: -5px;
font-weight: normal;
display: block;
color: #fff;
left: 48%;
}
}
&.is-energy-a-plus-3{
background-color: #00953E;
&:before{
border-left-color: #00953E;
}
&:after{
content: '+++';
font-size: 1em;
position: absolute;
top: -5px;
font-weight: normal;
display: block;
color: #fff;
left: 48%;
}
}
}
&__bottom-wrap{
margin-top: 10%;
}
&__wrap {
position: relative;
padding: 30px 15px 20px;
&:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
border-radius: 10px;
background-color: #fff;
}
}
&__articul {
@include margin(10/20);
}
&__favor {
position: absolute;
right: 10px;
top: 10px;
&:before {
@include fa-icon($fa-var-heart-o, true);
font-size: 16px;
}
&.is-active {
&:before {
content: $fa-var-heart;
}
}
}
&__favor-link {
display: none;
}
&__list{
list-style-type: none;
&-item{
@include fa-icon-is($fa-var-circle-o);
position: relative;
padding-left: 10px;
&:before{
position: absolute;
font-size: 7px;
left: 0;
top: 6px;
font-weight: bold;
}
}
}
&__preview {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
z-index: 2;
margin: auto;
width: 182px;
max-width: 90%;
padding: 5px 10px;
margin-top: -10px;
@include box-sizing;
text-decoration: none;
font-weight: 500;
color: white;
opacity: 0;
background-color: #ccc;
background-color: rgba(0,0,0,.5);
&:hover {
background-color: #eee;
color: black;
}
}
&__labels {
position: absolute;
left: 0;
top: 15px;
z-index: 2;
}
&__label {
display: table;
height: 20px;
width: 75px;
padding: 0 10px 2px;
@include margin(5/20);
text-transform: lowercase;
line-height: 20px;
background-color: #eee;
//border-radius: 5px;
@include box-sizing;
span {
position: relative;
z-index: 2;
line-height: 16px;
}
&.is-new {
background-color: green;
color: white;
}
&.is-hit {
background-color: orange;
color: white;
}
&.is-best {
background-color: blue;
color: white;
}
&.is-sale {
background-color: red;
color: white;
}
}
&__category {
@include margin(5/20);
}
&__caption {
//@include margin(5/20);
margin-top: 10px;
margin-bottom: 12px;
}
&__description{
&.is-hide{
display: none;
}
li {
@include margin(0.5);
position: relative;
padding-left: 16px;
}
ul > li:before {
content: '';
position: absolute;
background-position: 50% 50%;
background-size: 8px;
width: 8px;
height: 8px;
left: 0px;
top: 5px;
background-image: url('data:image/svg+xml;charset%3DUS-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"8"%20height%3D"8"%20viewBox%3D"0%200%208%208"><path%20fill%3D"%230E1D3F"%20d%3D"M4%208C1.8%208%200%206.2%200%204s1.8-4%204-4%204%201.8%204%204-1.8%204-4%204zm0-6.3c-1.3%200-2.3%201-2.3%202.3s1%202.3%202.3%202.3%202.3-1%202.3-2.3-1-2.3-2.3-2.3z"%2F><%2Fsvg>');
background-repeat: no-repeat;
}
}
&__link {
font-size: 20/15*100%;
color: #0b8bfb;
&._small {
font-size: 14/15*100%;
}
}
&__text {
margin-top: 5px;
font-size: 14/15*100%;
text-align: center;
}
&__footer {
max-height: 0;
overflow: hidden;
}
&__prices {
@include mtop(10/20);
}
&__old-price {
position: relative;
display: table;
color: #b4bbc2;
font-size: 15/14*100%;
font-weight: 400;
&:before {
content: '';
position: absolute;
top: 50%;
height: 1px;
margin-top: 1px;
left: -2px;
right: -1px;
background-color: #ccc;
}
}
&__current-price {
font-weight: 700;
font-size: 16/14*100%;
}
&__btns {
@include mtop(10/20);
white-space: nowrap;
@include box-sizing;
@include clearfix;
}
&__params {
@include margin(20/20);
}
&__param {
@include margin(5/20);
font-size: 12/14*100%;
}
&__param-label {
font-weight: bold;
margin-right: .5em;
}
&__buy {
float: right;
margin-top: 5px;
margin-bottom: 5px;
padding: 9px 33px;
background-color: $accent;
color: #fff;
transition: background-color .25s;
&:hover{
background-color: $accent-hover;
color: #fff;
}
}
&__fast-order {
@extend .button-primary;
padding: 9px 33px;
float: left;
margin-top: 8px;
margin-bottom: 5px;
}
&__img-holder {
position: relative;
@include mbot(10/20);
margin-bottom: 25px;
text-align: center;
}
&__img {
max-width: 100%;
height: auto;
vertical-align: top;
}
&__middle-holder {
@include margin(20/20);
@include clearfix;
}
&__rating {
float: left;
}
&__avail {
float: right;
font-style: italic;
color: #ccc;
}
&__avail-text {
color: $color-status-ok;
}
&__not-avail-text {
color: #ccc;
}
&__prop{
&-item{
padding-left: 15px;
@include margin(1);
position: relative;
&:before{
content: '';
position: absolute;
display: block;
width:4px;
float: left;
height: 4px;
left:0;
top:35%;
border-radius:50%;
border: 2px solid #1a2452;
}
}
}
.no-touch &.is-initiated:hover {
z-index: 3;
.catalog-plate {
&__wrap {
&:before {
border: 1px solid #ccc;
box-shadow: 0 7px 17px rgba(0, 0, 0, 0.27);
transition: box-shadow .1s ease-in, bottom .2s;
}
}
&__preview {
opacity: 1;
margin-top: -22px;
transition: .2s margin-top linear, .2s opacity linear, .2s color;
}
&__footer {
max-height: none;
@include margin(20/20);
padding-top: 20px;
border-top: 1px solid #ccc;
}
}
}
&__options{
@include columnizerParent(12);
.select2-container{
width: 100% !important;
}
}
&__options-item{
@include columnizer(6);
}
// Adaptive
@media #{$media-tablet} {
&__wrap:before {
display: none;
}
}
@media #{$media-phone-landscape} {
&__wrap {
//padding: 0 0 0 90px;
}
&__articul,
&__preview,
&__category,
&__foter,
&__fast-order,
&__options {
display: none;
}
&__prices {
//float: left;
}
&__old-price {
display: inline-block;
vertical-align: baseline;
font-size: 80%;
margin-right: 10px;
}
&__btns {
margin-top: 0;
}
&__img-holder {
//width: 80px;
//float: left;
//margin-left: -90px;
//margin-right: 5px;
.catalog-favor-button,
.catalog-compare-button {
display: none;
}
}
&__middle-holder {
@include margin(5/20);
display: inline-block;
width: 100%;
}
&__labels {
left: -5px;
top: 5px;
}
&__label {
height: auto;
padding: 1px 5px;
font-size: 90%;
line-height: 1;
margin-top: 1px;
margin-bottom: 1px;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&__buy {
width: 100%;
text-align: center;
margin-top:15px;
}
&__description {
//text-align: right;
}
&__caption {
text-align: center;
}
}
}
.catalog-reviews {
&.is-element {
margin-bottom: 30px;
.catalog-reviews {
&__feedback-item {
&:last-child {
border-bottom: none;
}
}
}
}
&__feedback-item {
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
@include thin-border-bottom();
@include clearfix;
}
&__feedback-info {
width: 100%;
margin-bottom: 20px;
}
&__feedback-time{
color: #696969;
font-size: 12px;
margin-top: 20px;
}
&__load-more{
padding: 9px 33px;
background-color: $accent;
color: #fff;
transition: background-color .25s;
border-radius: 5px;
cursor: pointer;
display: inline-block;
&:hover{
background-color: $accent-hover;
}
}
&__feedback-personal {
@include margin(20/20);
}
&__feedback-name {
font-size: 16px;
font-weight: bold;
color: $background;
line-height: 1.1;
@include margin(10/20);
}
&__feedback-text {
overflow: hidden;
}
&__form-section {
@include margin(40/20);
}
@media #{$media-phone-landscape} {
&__feedback-info {
float: none;
width: auto;
@include margin;
}
&__feedback-text {
@include margin;
}
&__feedback-item:first-child {
padding-top: 0;
}
&__form-section {
margin-top: 20px;
}
}
}
.catalog-sorter {
background: $color-bg-light;
@include clearfix();
padding: 20px 30px;
&__sort-by,
&__count-by {
float: left;
box-sizing: border-box;
margin-right: 20px;
}
&__sort-by {
float: left;
}
&__count-by {
float: right;
}
&__sort-by-title,
&__count-by-title {
font-weight: normal;
float: left;
margin-right: 10px;
}
&__sort-by-items,
&__count-by-items {
float: left;
box-sizing: border-box;
}
&__sort-by-item,
&__count-by-item {
float: left;
margin: 0px 5px;
&:first-child {
margin-left: 0px;
}
&:last-child {
margin-right: 0px;
}
}
&__sort-by-link,
&__count-by-link {
text-decoration: underline;
cursor: pointer;
font-weight: normal;
color: $color-text-light;
position: relative;
&:hover,
&.is-active {
text-decoration: none;
color: $color-black;
&.is-up,
&.is-down {
margin-right: 15px;
&:after {
@include fa-icon($fa-var-chevron-up, true);
position: absolute;
right: -15px;
top: 1px;
}
}
&.is-down {
&:after {
content: $fa-var-chevron-down;
}
}
}
}
&__show-type {
float: right;
box-sizing: border-box;
}
&__show-type-item {
float: left;
margin: 0px 5px;
&:first-child {
margin-left: 0px;
}
&:last-child {
margin-right: 0px;
}
}
&__show-type-link {
color: $color-text-light;
cursor: pointer;
&.list-type {
@include fa-icon($fa-var-list-ul);
}
&.tiles-type {
@include fa-icon($fa-var-th-large);
}
&.table-type {
@include fa-icon($fa-var-table);
}
&.is-active {
color: $color-black;
}
}
@media #{$media-phone-landscape} {
@include mobile-overflow();
&__show-type {
display: none;
}
&__sort-by {
@include clearfix();
margin-bottom: 10px;
}
&__sort-by,
&__count-by {
float: none;
margin-left: 0;
margin-right: 0;
}
}
}
.catalog-subsections {
&__list {
list-style: none;
margin-right: -2em;
}
&__item {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
margin-right: 2em;
}
&__link {
display: block;
color: $color-link;
}
}
.catalog-table {
&__items {
width: 100%;
border-collapse: collapse;
}
&__item {
}
&__header {
}
&__header-text {
position: relative;
text-decoration: none;
&.is-sortable {
border-bottom: 1px dashed gray;
cursor: pointer;
}
&.is-sortable:hover {
border-bottom: none;
}
&.is-sorted-up,
&.is-sorted-down {
margin-right: 15px;
&:after {
@include fa-icon($fa-var-chevron-up, true);
position: absolute;
right: -15px;
top: 2px;
}
}
&.is-sorted-down {
&:after {
content: $fa-var-chevron-down;
}
}
}
&__th {
font-size: 90%;
padding: 8px 10px;
border-bottom: 2px solid #ccc;
text-align: left;
/* &:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
} */
font-weight: bold;
background: #eee;
}
&__td {
padding: 8px 10px;
border-bottom: 1px solid #ccc;
font-size: 90%;
/* &:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
} */
}
&__th.is-col-price {
text-align: right;
}
&__td.is-col-price {
text-align: right;
position: relative;
font-size: 120%;
min-width: 100px;
}
.is-col-prop-diametr {
text-align: center;
}
&__prop-inline-title {
display: none;
}
&__old-price {
text-decoration: line-through;
font-size: 70%;
color: gray;
display: block;
position: absolute;
right: 10px;
top: 50%;
margin-top: -25px;
}
&__sort {
position: absolute;
right: 0;
top: 50%;
line-height: 20px;
margin-top: -12px;
@include fa-icon($fa-var-chevron-down);
&:before {
font-size: 10px;
}
&.is-up {
&:before {
content: $fa-var-chevron-up;
}
}
}
&__btn-buy {
@extend .button-primary;
display: inline-block;
}
&__btn-fastbuy {
display: inline-block;
text-decoration: none;
color: gray;
> span {
border-bottom: 1px dashed gray;
}
}
&__labels {
display: inline;
}
&__label {
display: inline-block;
height: 20px;
padding: 0 10px;
@include box-sizing;
@include margin(0.25);
text-transform: lowercase;
line-height: 20px;
background-color: #eee;
border-radius: 5px;
margin: 2px 0;
span {
position: relative;
z-index: 2;
line-height: 16px;
}
&.is-new {
background-color: green;
color: white;
}
&.is-hit {
background-color: orange;
color: white;
}
&.is-best {
background-color: blue;
color: white;
}
&.is-sale {
background-color: red;
color: white;
}
}
@media #{$media-phone-landscape} {
&__items, &__item, &__td {
display: block;
}
tbody {
display: block;
}
&__item {
@include mobile-overflow();
padding-top: 20px;
padding-bottom: 20px;
@include thin-border-bottom();
}
&__td {
padding: 0;
border-bottom: none;
@include margin(0.5);
text-align: left;
&.is-empty {
display: none;
}
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
&.is-col-qtty {
display: inline-block;
}
&.is-col-btn {
display: inline-block;
float: right;
}
&.is-col-price {
text-align: left;
}
&.is-col-title {
margin-bottom: 15px;
}
&.is-col-prop-diametr {
text-align: left;
}
}
&__header {
display: none;
}
&__labels {
display: block;
@include margin(0.25);
margin-left: 0;
}
a.catalog-table__btn-fastbuy {
display: inline-block;
}
&__prop-inline-title {
display: inline-block;
width: 50%;
margin-right: 10px;
text-align: right;
font-size: 13px;
&:after {
content: ':'
}
}
&__price {
font-size: 150%;
line-height: 18.5px;
}
.counter-input {
&__input[type="text"] {
font-size: 16px;
}
}
}
}
.catalog-text-block {
&__title {
font-size: 32px;
font-weight: bold;
margin-bottom: 30px;
color: $background;
}
&__preview,
&__description {
margin-bottom: 30px;
}
&__description {
display: none;
}
&__link {
padding: 11px 31px;
background-color: $accent;
display: inline-block;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background-color .25s;
&:hover{
background-color: #ca5341;
}
}
}
.catalog-tree {
a {
color: $color-text;
}
&__title {
@include mbot(20/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__first-level {
list-style: none;
padding: 0;
margin: 0;
}
&__first-item {
margin: 0;
padding: 10px 0 20px;
border-top: 1px solid #eee;
}
&__first-link {
float: left;
font-size: 20/14*100%;
line-height: 20px;
text-decoration: none;
margin-right: getcolumnmargin();
}
&__second-holder {
width: getcolumnwidth(9);
margin-left: auto;
}
&__second-level {
@include clearfix;
}
&__second-item {
border-top: 1px solid #eee;
@include clearfix;
padding-top: 10px;
padding-bottom: 10px;
&:first-child {
border-top: none;
padding-top: 0;
}
}
&__second-link {
float: left;
max-width: getcolumnwidth(3, 9);
font-size: 18/14*100%;
line-height: 20px;
margin-right: getcolumnmargin();
}
&__third-holder {
width: getcolumnwidth(6, 9);
margin-left: auto;
}
&__third-level {
float: right;
width: 100%;
margin-top: -10px;
@include clearfix;
}
&__third-item {
float: left;
width: 50%;
margin-top: 10px;
margin-bottom: 10px;
@include box-sizing;
padding-left: 20px;
font-size: 90%;
position: relative;
&:before {
content: '';
display: block;
position: absolute;
border-top: 1px solid #eee;
left: 20px;
top: -10px;
right: 0;
}
&:nth-child(2), &:nth-child(1) {
&:before {
display: none;
}
}
&:nth-child(2n+1) {
clear: left;
padding-left: 0;
&:before {
left: 0;
}
}
}
}
.cert-list {
&__items {
@include columnizerParent();
list-style: none !important;
}
&__item {
@include columnizer(3);
margin-top: 2.5% !important;
&:nth-child(4n+1) {
clear: left;
}
}
&__bg-holder {
text-align: center;
}
&__bg {
max-width: 100%;
height: auto;
vertical-align: top;
}
&__content-holder {
background-color: rgba(255,255,255,.6);
transition: .3s bottom;
}
&__title {
padding: 5px 10px 7px;
text-align: center;
font-weight: 600;
}
&__cert-link {
position: relative;
display: block;
&:before {
@include fa-icon($fa-var-search-plus, true);
display: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 20px;
height: 20px;
padding: 10px;
border-radius: 50%;
background: #eee;
text-align: center;
line-height: 20px;
margin: auto;
font-size: 24px;
color: #999999;
}
&:hover:before {
display: block;
}
}
@media #{$media-phone-landscape} {
&__item {
@include columnizer(4);
margin-top: 2.5%;
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__item {
@include columnizer(6);
margin-top: 2.5%;
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
.checkbox {
position: relative;
cursor: pointer;
display: inline-block;
vertical-align: middle;
min-width: 14px;
min-height: 14px;
font-size: 14px;
&__check-holder {
position: absolute;
left: 0;
top: 1px;
height: 26px;
}
&__text {
display: block;
padding-left: 25px;
font-size: 15px;
}
&:hover {
.checkbox__text {
text-decoration: underline;
}
}
&.is-disabled {
opacity: 0.3;
}
}
.checkbox-cols {
font-size: 14/16*100%;
&__cols {
margin-left: -15px;
@include clearfix;
&.is-1col .checkbox-cols__col {
width: 100%;
}
&.is-3col .checkbox-cols__col {
width: 33.33%;
}
&.is-4col .checkbox-cols__col {
width: 25%;
}
}
&__col {
float: left;
width: 100%;
margin-bottom: 15px;
@include box-sizing;
padding-left: 15px;
}
&__items {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
@include margin(10/20);
}
&__more-container {
display: none;
overflow: hidden;
&.is-opened {
display: block;
padding-top: 5px;
padding-bottom: 5px;
}
}
&__visible-container {
overflow: hidden;
padding-top: 5px;
padding-bottom: 5px;
}
&__btn-holder {
@include margin(20/20);
text-align: center;
}
&__btn {
@extend .pseudo-link;
span:first-child {
display: none;
}
&.is-opened {
span {
display: none;
}
span:first-child {
display: block;
}
}
}
}
.clients-list {
&__items {
@include columnizerParent;
margin-top: -2.5%;
}
&__item {
@include columnizer(3);
margin-top: 2.5%;
&:nth-child(4n+1) {
clear: left;
}
}
&__bg-holder {
text-align: center;
}
&__bg {
max-width: 100%;
height: auto;
vertical-align: top;
}
&__content-holder {
transition: .3s bottom;
}
&__title {
padding: 5px 10px 7px;
text-align: center;
font-weight: 600;
}
@media #{$media-phone-landscape} {
&__item {
@include columnizer(4);
margin-top: 2.5%;
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__item {
@include columnizer(6);
margin-top: 2.5%;
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
.company-contacts {
@include clearfix;
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__columns {
@include columnizerParent;
}
&__sidebar {
@include columnizer(4);
}
&__content {
@include columnizer(8);
}
&__connect {
@include mbot(70/20);
}
&__connect-item {
@include mbot(15/20);
}
&__connect-label {
display: inline-block;
margin-right: 5px;
vertical-align: baseline;
font-weight: bold;
}
&__map-holder {
@include mbot(30/20);
height: 400px;
}
&__info {
@include columnizerParent(8);
}
&__info-title {
@include mbot;
font-size: 16/14*100%;
font-weight: bold;
}
&__info-one {
@include columnizer(4,8);
}
&__info-two {
@include columnizer(4,8);
}
&__form-holder {
box-sizing: border-box;
}
&__form-caption {
font-weight: bold;
font-size: 20/14*100%;
@include margin(20/20);
}
@media #{$media-phone-landscape} {
&__map-holder {
height: 300px;
width: 90%;
}
&__sidebar {
@include columnizer(12);
}
&__content {
margin-top: 30px;
@include columnizer(12);
}
&__connect {
margin-bottom: 30px;
}
}
@media #{$media-phone} {
&__info {
margin-left: 0;
}
&__info-one, &__info-two {
width: auto;
margin-left: 0;
float: none;
@include margin;
}
}
}
.compare-link {
display: inline-block;
box-sizing: border-box;
background-color: #888;
&__content {
display: block;
padding: 5px 10px;
text-decoration: none;
text-align: center;
white-space: nowrap;
}
&__title {
@include fa-icon($fa-var-balance-scale);
display: inline-block;
vertical-align: middle;
width: 70%;
text-align: right;
color: white;
&::before {
font-size: 18px;
margin-right: .5em;
}
}
&__count {
display: inline-block;
vertical-align: middle;
padding: 10px 5px;
}
&__count-number {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-left: .5em;
border-radius: 50%;
background: #ccc;
line-height: 20px;
text-align: center;
font-size: 75%;
color: black;
}
}
.compare-list {
padding:10px;
margin: 10px;
position: fixed;
left: 0;
bottom: 0;
@include box-sizing;
font-size:90%;
overflow:hidden;
width:300px;
background: $color-white;
border:1px solid $color-border;
box-shadow:0 2px 5px 0 rgba(0,0,0,.18);
z-index:998;
&__items {
@include mtop(1.5, false);
display:table;
width: 100%;
}
&__item {
@include margin(0.5);
}
&__item-name {
display:table-cell;
width: 260px;
}
&__item-remove {
display:table-cell;
width: 40px;
}
}
.compare-result {
&__header {
@include margin(30/20);
padding: 10px;
border: 1px solid gray;
padding-bottom: 0;
}
&__ui-btns {}
&__ui-btn {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px;
padding: 10px 20px;
background-color: #f2f2f2;
white-space: nowrap;
}
&__show-all {
text-decoration: none;
border-bottom: 1px dotted gray;
&.is-active {
border-bottom-color: transparent;
cursor: default;
}
}
&__show-different {
text-decoration: none;
border-bottom: 1px dotted gray;
&.is-active {
border-bottom-color: transparent;
cursor: default;
}
}
&__main {
@include margin(30/20);
}
&__table-holder {
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
&__table {
&.is-diff {
.compare-result__param-row {
display: none;
background-color: #fff;
&.is-different {
display: table-row;
}
}
@media #{$media-phone-landscape} {
.compare-result__mobile-param-heading {
display: none;
&.is-different {
display: table-row;
}
&.is-odd {
background-color: white;
}
}
}
}
}
&__product-cell {
border-right: 1px solid #c5c5c5;
}
&__product {
padding: 20px 10px;
min-width: 160px;
}
&__img-holder {
text-align: center;
}
&__img {
max-width: 100%;
height: auto;
}
&__title {
@include margin(10/20);
text-align: center;
}
&__category {
@include margin(5/20);
}
&__category-link {
font-style: italic;
}
&__name {
@include margin(5/20);
font-size: 125%;
}
&__param-name {
padding-right: 30px;
}
&__prices {
text-align: center;
font-size: 125%;
}
&__btns {
@include margin(20/20);
text-align: center;
}
&__btn {
@include margin(10/20);
}
&__param-cell {
text-align: center;
padding: 10px;
border-right: 1px solid #c5c5c5;
&:first-child {
text-align: left;
border-right: none;
width: 150px;
min-width: 150px;
}
}
&__param-row {
border-bottom: 1px dotted #999;
}
&__param-name {
font-weight: bold;
}
&__remove {
text-decoration: none;
color: $accent;
transition: color .25s;
&:hover {
color: $accent-hover;
}
&:before {
@include fa-icon($fa-var-close, true);
margin-right: .5em;
}
}
&__table-pinned {
position: absolute;
left: 0;
top: 0;
background: #fff;
overflow: hidden;
table {
border-right: none;
border-left: none;
width: 100%;
th, td { white-space: nowrap; }
}
}
&__table-scrollable {
overflow: scroll;
overflow-y: hidden;
margin-left: 170px;
table {
border-right: none;
border-left: none;
width: 100%;
th, td:first-child { display: none; }
}
}
&__table-wrapper {
position: relative;
margin-bottom: 20px;
overflow: hidden;
border-right: 1px solid #ccc;
}
&__empty {
display: none;
&.is-active {
display: block;
}
}
&__mobile-param-heading {
display: none;
}
@media #{$media-phone-landscape} {
&__table-holder {
@include mobile-overflow(false);
width: auto;
overflow-x: auto;
}
&__table-scrollable {
margin-left: 140px;
}
&__param-cell.is-heading {
display: none;
}
&__params-head {
display: none;
}
&__mobile-param-heading {
display: table-row;
}
&__mobile-param-cell {
padding: 10px;
border-top: 1px solid #c5c5c5;
border-bottom: 1px solid #c5c5c5;
font-weight: bold;
background: #f0f0f0;
height: 1.5em;
vertical-align: top;
}
&__fixed {
position: absolute;
}
}
@media #{$media-phone} {
&__table-holder {
//overflow-x: scroll;
}
&__table-wrapper {
overflow-x: visible;
}
&__table-scrollable {
overflow: visible;
}
}
}
.connect-widget {
&__description {
}
&__email {
font-weight: bold;
}
&__phone {
font-weight: bold;
}
}
.contacts {
&__items {
//width: 90%;
}
&__item {
background-color: #ecf0f2;
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
}
&__title {
font-size: 20px;
padding: 20px 40px;
border-bottom: 1px solid #fff;
font-weight: bold;
color: $background;
}
&__wrapper {
padding: 30px 40px;
position: relative;
}
&__email {
padding-bottom: 15px;
padding-left: 40px;
font-size: 16px;
position: relative;
font-weight: bold;
&-icon {
@include fa-icon($fa-var-envelope-o);
position: absolute;
font-size: 220%;
top: 13px;
}
&-link {
color: $accent;
&:hover {
color: darken($accent, 15%);
}
}
}
}
.contacts-detail {
@include clearfix;
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__col {
@include columnizer(6);
margin: 0;
}
&__fields {
@include mbot(20/20);
@include clearfix;
}
&__label {
@include columnizer(4);
margin-left: 0;
@include mbot(10/20);
font-weight: bold;
}
&__data {
@include mbot(10/20);
@include columnizer(8);
}
&__data.big-text{
font-size: 20/14*100%;
}
&__block {
@include margin(40/30);
@include clearfix;
}
&__header {
@include margin(10/20);
font-size: 24/14*100%;
}
&__container, &__photo{
@include adaptiveMarginBottom;
@include columnizer(6);
overflow: hidden;
}
&__container.big, &__photo.big{
@include columnizer(12);
}
&__img-link, &__map {
display: block;
}
&__img {
display: block;
max-width: 100%;
}
@media #{$media-phone-landscape} {
&__col {
float: none;
width: auto;
margin-left: 0;
@include margin;
&.is-sidebar {
margin-left: - getcolumnmargin();
}
}
&__fields {
@include mbot(0.5);
}
}
}
.contacts-list {
&__items {
@include columnizerParent(12);
margin-top: - getcolumnmargin();
}
&__item {
@include columnizer(3);
margin-top: 2*getcolumnmargin();
&:nth-child(4n+1) {
clear: left;
}
}
&__title {
@include mbot(20/20);
font-size: 150%;
}
&__title-link {
font-weight: bold;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
&__link{
&.is-print {
@extend .is-hide-mobile;
&:before {
@include fa-icon($fa-var-print, true);
text-decoration: none;
margin-right: 5px;
font-size: 130%;
vertical-align: middle;
}
}
}
&__phone {
font-weight: bold;
}
&__text {
@include mbot(10/20);
}
&__worktime {
@include mbot(20/20);
}
&__img {
max-width: 100%;
height: auto;
}
@media #{$media-phone-landscape} {
&__items {
margin-top: -1.5 * $bm;
}
&__item {
@include columnizer(6);
margin-top: 1.5 * $bm;
&:nth-child(2n+1) {
clear: left;
}
}
&__image-holder {
width: 30%;
margin-right: 1em;
margin-top: 5px;
margin-bottom: 10px;
float: left;
}
}
@media #{$media-phone} {
&__items {
margin-top: 0;
margin-left: 0;
}
&__item {
float: none;
margin-left: 0;
width: auto;
@include margin(1.5);
clear: left;
}
}
}
@mixin _state_3cols($mod:'') {
.contacts-list#{$mod} {
.contacts-list {
&__items {
@include columnizerParent(9);
margin-top: - getcolumnmargin(9);
}
&__item {
@include columnizer(3, 9);
margin-top: getcolumnmargin(9);
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
@media #{$media-phone-landscape} {
&__items {
@include columnizerParent(12);
margin-top: -1.5 * $bm;
}
&__item {
@include columnizer(6);
margin-top: 1.5 * $bm;
&:nth-child(3n+1) {
clear: left;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__items {
margin-top: 0;
margin-left: 0;
}
&__item {
float: none;
margin-left: 0;
width: auto;
@include margin(1.5);
}
}
}
}
}
@mixin _state_2cols($mod:'') {
.contacts-list#{$mod} {
.contacts-list {
&__items {
@include columnizerParent(6);
margin-top: - getcolumnmargin(6);
}
&__item {
@include columnizer(3, 6);
margin-top: getcolumnmargin(6);
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
}
@mixin _state_flat($mod:'') {
.contacts-list#{$mod} {
.contacts-list {
&__items {
margin-left: 0;
}
&__item {
float: none;
width: auto;
margin-left: 0;
@include margin(40/20);
}
@media #{$media-phone-landscape} {
&__item {
margin-top: 1.5 * $bm;
margin-bottom: 1.5 * $bm;
}
}
}
}
}
@include _state_3cols('.is-3cols');
@include _state_2cols('.is-2cols');
@include _state_flat('.is-flat');
.contacts-map {
&__common-info {
@include columnizerParent(15);
@include margin(30/20);
}
&__link{
&.is-print {
@extend .is-hide-mobile;
&:before {
@include fa-icon($fa-var-print, true);
text-decoration: none;
margin-right: 5px;
font-size: 130%;
vertical-align: middle;
}
}
}
&__common-col {
@include columnizer(3, 15);
}
&__common-label {
font-weight: 700;
@include mbot(10/20);
}
&__map-section {
@include margin(30/20);
}
&__map-holder {
height: 500px;
}
&__map-title {
font-size: 150%;
@include margin(20/20);
}
&__plates-section {
@include margin(30/20);
}
&__form-section {
@include margin(30/20);
}
@media #{$media-phone-landscape} {
&__common-info {
@include columnizerParent(6);
&:first-child {
margin-top: - $bm;
}
}
&__common-col {
@include columnizer(2, 6);
margin-top: $bm;
&:nth-child(3n+1) {
clear: left;
}
}
&__map-holder {
width: 90%;
height: 300px;
}
}
@media #{$media-phone} {
&__common-info {
margin-left: 0;
&:first-child {
margin-top: 0;
}
}
&__common-col {
@include margin;
width: auto;
float: none;
margin-left: 0;
}
&__map-holder {
width: 90%;
margin-left: - $mobile-outer-margin;
}
}
}
.contacts-simple {
&__contacts {
@include columnizerParent;
@include mbot(2);
}
&__phones {
@include columnizer(2);
}
&__adresses {
@include columnizer(3);
}
&__desc {
@include columnizer(7);
}
&__map {
height: 250px;
}
@media #{$media-phone-landscape} {
&__phones {
@include columnizer(6);
}
&__adresses {
@include columnizer(6);
}
&__desc {
@include columnizer(12);
margin-top: $bm;
}
&__map {
margin-left: - $mobile-outer-margin;
width: 90%;
}
}
}
.contacts-tabs{
@include clearfix();
&__fields {
@include mbot(10/20);
@include clearfix;
}
&__data {
text-align: center;
}
&__data.big-text{
font-size: 20/14*100%;
}
&__text{
padding:50px 40px;
}
&__block {
@include columnizer(6);
}
&__map {
display: inline-block;
vertical-align: middle;
}
&__img {
display: block;
max-width: 100%;
}
//tabs
&__tab-changers {
list-style: none;
padding: 0;
@include mbot(10/20);
display: table;
table-layout: fixed;
width: 100%;
}
&__link-holder {
display: table-cell;
@include padding(20/20);
vertical-align: middle;
text-align: center;
cursor: pointer;
user-select: none;
opacity:0.5;
&.is-active {
background-color: white;
opacity:1;
}
&.is-hide-desktop {
display: none;
}
}
&__link {
text-transform: uppercase;
padding:10px;
border-radius:5px;
width: 100%;
font-size: 20/15*100%;
text-decoration: none;
color: #000;
@include box-sizing;
background: #ccc;
}
&__tab {
display: none;
font-size: 14/15*100%;
background: #ccc;
@include clearfix;
&.is-active {
display: block;
}
}
@media #{$media-phone-landscape} {
&__tab-changers {
display: none;
}
&__link-holder {
display: block;
padding: 0;
opacity: 1;
text-align: left;
@include margin;
&.is-active {
background-color: transparent;
opacity:1;
margin-bottom: 0.5 * $bm;
}
&.is-hide-desktop {
display: block;
}
}
&__link {
background: none;
padding: 0;
text-transform: none;
@include pseudo-link;
color: $color-link;
.contacts-tabs__link-holder.is-active & {
color: $color-text;
font-weight: bold;
border-color: transparent;
}
}
&__block {
float: none;
width: auto;
margin-left: 0;
@include margin;
}
&__text{
padding: 15px 10px;
padding-bottom: 0;
}
}
}
.counter-input {
position: relative;
@include box-sizing;
white-space: nowrap;
&__holder {
position: relative;
display: inline-block;
margin-right: 8px;
vertical-align: middle;
}
&__input[type='text'] {
height: 30px;
width: 60px;
padding: 0 8px;
}
&__up {
color: gray;
text-decoration: none;
@include fa-icon-is($fa-var-chevron-up);
&:before {
position: absolute;
right: 8px;
top: 1px;
font-size: 10px;
line-height: 12px;
}
&:hover {
color: black;
}
}
&__down {
color: gray;
text-decoration: none;
@include fa-icon-is($fa-var-chevron-down);
&:before {
position: absolute;
right: 8px;
bottom: 3px;
font-size: 10px;
line-height: 12px;
}
&:hover {
color: black;
}
}
&__unit {
display: inline-block;
vertical-align: middle;
}
&__buy-btn {
@include fa-icon($fa-var-shopping-cart);
position: absolute;
right: 0;
top: 0;
height: 30px;
width: 30px;
text-align: center;
background-color: $color-button-primary-bg;
color: $color-button-primary-text;
&:before {
margin-left: -2px;
line-height: 30px;
font-size: 18px;
}
&:hover {
background-color: lighten($color-button-primary-bg, 20%);
color: $color-button-primary-text;
}
}
&__change-measure {
border-bottom: 1px dashed gray;
cursor: pointer;
&:hover {
border-bottom-style: solid;
}
}
}
.dealers-list {
&__item {
@include margin(30/20);
}
&__dealer-card {
@include clearfix;
}
&__photo-col {
float: left;
max-width: 30%;
margin-right: 20px;
}
&__photo {
max-width: 100%;
height: auto;
}
&__description-col {
overflow: hidden;
}
&__contact-holder {
@include margin(20/20);
}
&__contact-label {
font-weight: bold;
margin-right: 0.5em;
}
&__name {
font-size: 150%;
font-weight: 700;
}
&__phone {
@include margin(20/20);
}
&__description-holder {
@include mtop(40/20);
@include mbot(20/20);
}
@media #{$media-phone-landscape} {
&__description-holder {
@include margin(1);
}
}
@media #{$media-phone} {
&__description-col {
overflow: visible;
}
&__contact-holder,
&__description-holder {
@include margin(0.5);
}
&__photo {
margin-top: 5px;
}
}
}
.dealers-tiles {
&__items {
@include columnizerParent(12);
margin-top: - getcolumnmargin();
}
&__item {
@include margin(1.5, false);
@include columnizer(6);
margin-top: getcolumnmargin();
&:nth-child(2n+1) {
clear: left;
}
}
&__dealer-card {
@include clearfix;
}
&__photo-col {
float: left;
max-width: 30%;
@include mtop(0.5, false);
@include mright(1.5);
}
&__photo {
max-width: 100%;
height: auto;
}
&__description-col {
overflow: hidden;
}
&__contact-holder {
@include margin(0.5);
}
&__contact-label {
font-weight: bold;
@include mright(0.5);
}
&__name {
font-size: 150%;
font-weight: 700;
}
&__description-holder {
@include mtop(1);
@include mbot(1);
}
@media #{$media-phone-landscape} {
&__items {
margin-left: 0;
margin-top: 0;
}
&__item {
@include margin(1.5);
margin-left: 0;
width: auto;
float: none;
}
}
@media #{$media-phone} {
&__photo-col {
margin-right: 20px;
}
&__description-col {
overflow: visible;
}
}
}
.docs-block {
position: relative;
border-radius: 10px;
&__bg-holder {
text-align: center;
}
&__bg {
max-width: 100%;
height: auto;
vertical-align: top;
}
&__content-holder {
background-color: rgba(255,255,255,.6);
transition: .3s bottom;
}
&__title {
padding: 5px 10px 7px;
text-align: center;
font-weight: 600;
}
&:hover {
.client-block__content-holder {
bottom: 0;
}
}
}
.edit-personal {
&__title {
@include mtop(2);
@include mbot(1);
font-size: 24/12*100%;
line-height: normal;
font-weight: bold;
}
&__plate {
@include the-plate;
}
&__personal-info {
@include margin(40/20);
}
&__address-info {
@include margin(40/20);
}
&__legal-info {
@include margin(40/20);
}
}
.element-item {
h1{
font-weight: normal;
margin-bottom: 40px;
font-size: 100%;
}
&__series {
font-size: 13px;
margin-bottom: 30px;
margin-top: -10px;
color: #696969;
}
&__table-col {
@include columnizer(6 6 6 12);
}
&__bonus{
display: inline-block;
margin-left: 25px;
margin-top: -9px;
float: left;
&-offer {
font-size: 12px;
line-height: 33px !important;
height: 33px !important;
width: 33px !important;
}
}
&__top-ui {
@include clearfix;
margin-bottom: 20px;
}
&__left {
float: left;
width: 45%;
}
&__right {
float: right;
width: 50%;
}
&__rating {
@include margin;
}
&__compare {
//float: right;
margin-top: 25px;
.catalog-compare-button{
text-align: left;
}
}
&__preview-text {
margin-bottom: 50px;
color: #000;
}
&__price {
font-size: 32px;
font-weight: bold;
text-align: right;
width: 55%;
float: left;
padding-right: 20px;
box-sizing: border-box;
color: $background;
}
&__bottom{
&.swapped{
margin-top: 115px;
.element-item{
&__price{
float: none;
text-align: center;
width:100%;
padding:0;
margin-bottom: 25px;
}
&__button-wrap{
float: none;
//width: 100%;
margin: 0 auto;
}
}
}
}
&__bottom,
&__tech-wrap {
@include clearfix;
}
&__tech-wrap {
margin-bottom: 30px;
margin-top: 40px;
}
&__top-wrap {
@include clearfix;
margin-bottom: 60px;
}
&__button-wrap {
width: 45%;
float: left;
}
&__order,
&__buy {
display: block;
text-align: center;
padding: 10px 20px;
background-color: #ccc;
color: #fff;
font-size: 16px;
margin-bottom: 10px;
//text-transform: uppercase;
border-radius: 5px;
text-decoration: none;
&:hover {
color: #fff;
}
}
&__order{
background-color: $accent;
transition: background-color .25s;
&:hover{
background-color: $accent-hover;
}
}
&__buy {
background-color: $pistacho;
transition: background-color .25s;
&:hover{
background-color: $pistacho-hover;
}
}
&__gallery-wrap {
width: 356px;
height: 356px;
margin: 0 auto;
position: relative;
padding-bottom: 60px; // For pagination
}
&__title-wrap {
text-align: center;
position: relative;
margin-bottom: 30px;
margin-top: 85px;
}
&__title {
font-size: 32px;
font-weight: normal;
//padding: 0 30px;
color: $background;
//background-color: #fff;
/* &:before {
position: absolute;
content: '';
width: 100%;
height: 1px;
background-color: #ccc;
top: 25px;
left: 0;
z-index: -1;
}*/
}
&__line {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
background-color: #ccc;
}
&__col-big {
width: 400px;
float: left;
box-sizing: border-box;
margin-right: 50px;
}
&__col-small {
width: 240px;
float: left;
box-sizing: border-box;
}
&__title-middle {
font-size: 20px;
margin-bottom: 20px;
color: $background;
&_border {
border-bottom: 1px solid #ccc;
}
&.title_docs{
background-color: $background;
color: #fff !important;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
padding: 12px 11px;
text-align: center;
margin-bottom: 3px;
}
}
&__table {
width: 100%;
margin-bottom: 30px;
}
&__tr {
// border-bottom: 2px dotted #b3b3b3;
td {
padding: 10px 0 0;
}
td:last-child {
text-align: right;
}
}
&__title-table{
color: #696969;
font-size: 14px;
}
&__name-table{
color: #000;
font-weight:bold;
font-size: 14px;
}
&__text-span{
background: #fff;
display: inline-block;
position: relative;
top: 7px;
padding: 0 5px;
}
&__table-button {
display: block;
@include margin;
text-align: left;
//background-color: #999999;
font-size: 16px;
font-weight: bold;
cursor: pointer;
color: $accent;
transition: background-color .25s;
float: left;
width: 100%;
margin-top: 10px;
.fa{
font-size: 1.8em;
margin-left: 12px;
margin-top: -3px;
position: absolute;;
}
&:hover{
color: $accent-hover;
}
}
&__tech-items {
padding: 18px 20px;
//background-color: #f2f2f2;
}
&__table-col {
@include columnizer(6 6 6 6 12);
}
&__tech-col{
&:last-child{
background-color: $pistacho;
}
}
&__tech-item {
margin-bottom: 16px;
@include fa-icon-is($fa-var-download);
&:before{
color: $accent;
margin-right: 9px;
}
}
&__tech-link {
text-decoration: none;
color: $accent;
transition: color .25s;
font-size: 14px;
font-weight: bold;
&:hover{
color: $accent-hover;
}
}
&__main-tech-wrap {
@include columnizerParent();
display: none;
@include columnizerParent;
}
&__arrows {
position: absolute;
top: 40%;
//padding: 0 .3em;
height: 32px;
width: 32px;
box-sizing: border-box;
border-radius: 50%;
line-height: 101%;
font-size: 50/14*100%;
font-weight: bold;
cursor: pointer;
border: 2px solid $accent;
color: $accent;
transition: color, background-color .25s;
font-size: 1.7em;
text-align: center;
z-index: 12;
&:hover{
background-color: $accent;
color: #fff;
}
}
&__energy-wrap {
@include margin;
}
&__energy-link {
display: block;
width: 44px;
padding: 0;
padding-left: 11px;
position: relative;
color: #fff;
text-decoration: none;
font-size: 1.6em;
padding-bottom: 3px;
font-weight: bold;
line-height: normal;
text-transform: uppercase;
margin: 1px 0;
&-index{
font-size: 1em;
margin-top: -10px;
position: relative;
top: -6px;
font-weight: normal;
}
&:before{
content: '';
display: inline-block;
position: absolute;
right: -31px;
top: 0;
border: 16px solid transparent;
}
&.is-energy-a{
background-color: #feed00;
&:before{
border-left-color: #feed00;
}
}
&.is-energy-b{
background-color: #fbba00;
&:before{
border-left-color: #fbba00;
}
}
&.is-energy-c{
background-color: #ec6607;
&:before{
border-left-color: #ec6607;
}
}
&.is-energy-d{
background-color: #E30713;
&:before{
border-left-color: #E30713;
}
}
&.is-energy-a-plus-1{
background-color: #C6D300;
&:before{
border-left-color: #C6D300;
}
&:after{
content: '+';
font-size: 1em;
position: absolute;
top: -5px;
font-weight: normal;
display: block;
color: #fff;
left: 48%;
}
}
&.is-energy-a-plus-2{
background-color: #51AD31;
&:before{
border-left-color: #51AD31;
}
&:after{
content: '++';
font-size: 1em;
position: absolute;
top: -5px;
font-weight: normal;
display: block;
color: #fff;
left: 48%;
}
}
&.is-energy-a-plus-3{
background-color: #00953E;
&:before{
border-left-color: #00953E;
}
&:after{
content: '+++';
font-size: 1em;
position: absolute;
top: -5px;
font-weight: normal;
display: block;
color: #fff;
left: 48%;
}
}
}
&__arrow-left {
@include fa-icon($fa-var-angle-left);
left: -15%;
z-index: 1;
}
&__arrow-right {
@include fa-icon($fa-var-angle-right);
right: -15%;
}
&__pagination {
position: absolute;
width: 100%;
bottom: -55px;
left: 0;
text-align: center;
li {
position: relative;
display: inline-block;
margin: 0 5px;
border-radius: 50%;
width: 15px;
height: 15px;
vertical-align: top;
background-color: #adadad;
//border: 1px solid gray;
&.slick-active {
&:before {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
border-radius: 50%;
background-color: $accent;
}
}
}
button {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
width: 14px;
height: 14px;
font-size: 0;
background-color: transparent;
border: none;
}
li.slick-active .promo-slider__page-btn {
background: #909090;
}
}
&__modal {
max-width: 700px;
box-sizing: border-box;
padding-right: 80px;
&-title {
font-size: 30px;
//font-weight: bold;
margin-bottom: 25px;
color: $background;
}
&-name {
font-size: 20px;
margin-bottom: 10px;
font-size: 1.6em;
color: $background;
}
&-text {
margin-bottom: 30px;
font-size: 1.1em;
color: #000;
}
&-price-text {
font-size: 16px;
font-weight: bold;
color: $background;
}
&-price {
font-size: 32px;
font-weight: bold;
padding-left: 5px;
color: $background;
&-wrap {
margin-bottom: 20px;
}
}
.success-message {
font-size: 140%;
}
}
/*Adaptive*/
@media #{$media-desktop}{
&__col-big{
float: none;
width: 45%;
margin-right: 1%;
margin-left: 1%;
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-bottom: 10px;
}
&__col-small{
float: none;
width: 45%;
margin-right: 1%;
margin-left: 1%;
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-bottom: 10px;
}
&__detail-wrap{
img{
width: 100%;
height: auto;
}
}
}
@media screen and (max-width: 992px){
&__arrows{
top: 103%;
}
&__arrow-left{
left: 0;
}
&__arrow-right{
right: 0;
}
&__pagination{
bottom: -40px;
}
}
@media #{$media-phone-landscape}{
&__left{
width: 100%;
}
&__right{
width: 100%;
margin-top: 30px;
}
&__gallery-wrap{
width: 80%;
}
&__col-big{
width: 100%;
margin-right: 0;
margin-left: 0;
}
&__col-small{
width: 100%;
margin-right: 0;
margin-left: 0;
}
&__item{
position: relative;
min-height: 360px;
img{
position: absolute;
right: 0;
width: 100%;
left: 0;
height: auto;
}
}
}
@media #{$media-phone}{
&__modal {
padding: 40px;
}
}
@media #{$media-phone}{
&__price{
width: 100%;
}
&__button-wrap{
width: 100%;
margin-top: 10px;
}
&__gallery-wrap{
width: 90%;
height: auto;
}
&__item{
min-height: 270px;
}
&__modal {
padding: 20px;
}
&__modal-title {
font-size: 17px;
}
&__modal-name {
font-size: 1.4em;
}
&__modal-price {
font-size: 24px;
margin-left: 10px;
}
}
}
.fancybox-close {
top: 30px;
right: 40px;
font-size: 25px;
height: 25px;
width: 25px;
background-image: url(/local/templates/home-comfort/img/icons/close-icon.png);
background-repeat: no-repeat;
background-size: contain;
background-color: transparent;
&:before{
content: '';
}
@media #{$media-phone} {
top: 15px;
right: 21px;
font-size: 20px;
height: 20px;
width: 20px;
}
}
.evaluation-list {
}
.evaluation-products-list {
}
.faq-chat {
@include mbot(2);
&__items {
@include columnizerParent;
list-style: none;
margin-top: - getcolumnmargin() * 2;
}
&__item {
@include columnizer(6);
margin-top: getcolumnmargin() * 2;
&:nth-child(2n+1) {
clear: left;
}
@include mbot(2);
}
&__title{
@extend .h2;
}
&__question-title,
&__answer-title
{
font-size: 130%;
line-height: 1;
margin-bottom: $base-vertical-margin;
}
&__item-question
{
position: relative;
padding: 20px 30px;
border-radius: 12px;
background: $color-faq-chat-question;
color: $color-faq-chat-text;
&:after {
position: absolute;
content: '';
right: 20px;
bottom: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent $color-faq-chat-question;
transform: rotate(-45deg);
}
& + .faq-chat__position{
text-align: right;
}
}
&__item-answer{
position: relative;
padding: 20px 30px;
border-radius: 12px;
background: $color-faq-chat-answer;
color: $color-faq-chat-text;
margin-top: $base-vertical-margin*.5;
&:after {
position: absolute;
content: '';
left: 20px;
bottom: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent $color-faq-chat-answer;
transform: rotate(-45deg);
}
& + .faq-chat__position{
text-align: left;
}
}
&__position{
font-size: 180%;
line-height: 1.2;
margin-top: $base-vertical-margin;
}
}
.faq-list {
&__items {
list-style: none;
padding: 0;
margin: 0;
}
&__item {
@include margin(20/20);
}
&__question {
font-size: 16/14*100%;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
&__answer {
padding: 10px 0 20px;
@include margin(10/20);
}
}
.faq-simple {
&__items {
}
&__item {
@include margin(1.5);
&.is-show {
.faq-simple__title {
text-decoration: none;
}
.faq-simple__desc {
max-height: 500px;
@include trn(max-height 0.6s ease-in);
}
}
}
&__title {
display: inline-block;
text-decoration: underline;
cursor: pointer;
font-weight: normal;
line-height: 1.2;
margin-bottom: 0;
@include trn(margin-bottom 0.6s ease-in);
.faq-simple__item.is-show & {
@include mbot(0.5);
}
}
&__desc {
max-height: 0;
overflow: hidden;
@include trn(max-height 0.6s cubic-bezier(0, 1, 0.5, 1));
}
}
.favorites-title {
display: table;
&__icon-holder {
display: table-cell;
vertical-align: middle;
padding-right: 10px;
}
&__icon-wrap {}
&__icon {
width: 40px;
height: 40px;
background-color: #ccc;
border-radius: 50%;
text-align: center;
&:before {
@include fa-icon($fa-var-star, true);
font-size: 25px;
line-height: 40px;
color: white;
}
}
&__content-holder {
display: table-cell;
vertical-align: middle;
}
&__title {}
&__title-text {}
&__link-holder {}
&__link {}
}
.favorites-title.is-simple {
.favorites-title {
&__link {
@include fa-icon-is($fa-var-star);
&:before {
margin-right: 5px;
}
}
}
}
.features-block {
&__items {
@include columnizerParent;
}
&__item {
@include columnizer(3);
margin-top: getcolumnmargin(12);
&:nth-child(4n+1) {
clear: left;
}
}
&__title {
margin-bottom: 10px;
font-size: 130%;
font-weight: bold;
text-align: center;
}
&__description {
text-align: center;
}
&__img-holder {
text-align: center;
}
&__img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
vertical-align: top;
}
}
@mixin _state_is-2cols($mod: '') {
.features-block#{$mod} {
.features-block {
&__item {
@include columnizer(6)
&:nth-child(2n+1) {
clear: left;
}
}
}
}
}
@mixin _state_is-flat($mod: '') {
.features-block#{$mod} {
.features-block {
&__items {
margin-left: 0;
}
&__item {
float: none;
width: auto;
margin-left: 0;
@include margin(40/20);
}
}
}
}
@include _state_is-2cols('.is-2cols');
@include _state_is-flat('.is-flat');
.feedback-wall {
&__cols {
@include columnizerParent;
}
&__column {
@include columnizer(3);
}
&__item {
@include mbot(20/20);
padding: 20px;
background: #ECECEC;
}
&__title {
@include mbot(15/20);
font-size: 24/14*100%;
line-height: 1;
font-weight: bold;
}
&__meta {
font-style: italic;
@include mbot(10/20);
}
&__description,
&__description-full {
@include mbot(30/20);
}
&__description-full {
display: none;
}
&__readless {
display: none;
}
&__item.is-expanded {
.feedback-wall__description, .feedback-wall__readmore {
display: none;
}
.feedback-wall__description-full {
display: block;
}
.feedback-wall__readless {
display: inline;
}
}
}
.filter-hor {
position: relative;
height: 100%;
display: block;
margin-bottom: 20px;
&__header {
clear:both;
display:block;
background-color: #eee;
min-height: 40px;
}
&__total-count-container,
&__show-filter {
@include columnizer(6);
float: left;
display: inline-block;
margin: 10px;
}
&__total-count {
font-weight: bold;
}
&__show-filter {
text-align: right;
padding-right: 20px;
}
&__show-filter-link {
cursor: pointer;
}
&__caption {
@include margin(15/20);
font-size: 16/14*100%;
font-weight: 600;
}
&__fields {
@include columnizerParent;
list-style: none;
margin: 0 0 2.5% -2.5%;
padding: 0;
width: 102.5%;
display: block;
&:last-child {
margin-bottom: 0;
}
}
&__field {
&.four-columns {
@include columnizer(3);
float: left;
}
&.three-columns {
@include columnizer(4);
float: left;
}
&.two-columns {
@include columnizer(6);
float: left;
}
&.four-columns,
&.three-columns,
&.two-columns {
}
&.is-full-height {
height: 100%;
}
margin: 0;
padding: 10px;
border: 1px solid #d3d3d3;
&:first-child {
border-top: 1px solid #d3d3d3;
}
&.is-open {
.smart-filter {
&__field-header {
&:before {
transform: rotate(90deg);
}
}
}
}
display: inline-block;
}
&__field-header {
position: relative;
padding-top: 15px;
padding-bottom: 15px;
cursor: pointer;
@include clearfix;
}
&__field-caption {
font-size: 12/14*100%;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
}
&__field-content {
padding-top: 5px;
padding-bottom: 15px;
}
&__full-reset {
font-size: 12px;
text-decoration: none;
color: #828486;
}
&__footer {
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background-color: #eee;
display:none;
&.is-open {
display: block;
}
}
&__items {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
@include margin(10/20);
margin-top: 0;
}
&__main {
display: none;
width: 100%;
border-top: 2px dotted grey;
padding-top: 10px;
&.is-open {
display: block;
}
}
&__apply-btn {
margin-right: 1em;
}
&__result-holder {
display: inline-block;
left: 100%;
}
&__result {
padding: 10px;
}
&__result-num {
margin: 0 .5em;
font-weight: bold;
}
&__empty-result-message {
display: none;
&.is-open {
display: inline-block;
}
}
.checkbox__text {
font-size: 12px;
color: #171818;
}
.select2-container {
max-width: 100%;
min-width: 100%;
}
&:hover {
.smart-filter__result-holder {
display: block;
}
}
&__list-wrapper {
overflow: auto;
position: relative;
& .filter-hor__items {
margin-top:2px;
}
}
& .filter-scale__scale.ui-slider {
background: #f0f0f0;
}
&__selected-fields {
padding: 10px 10px 0;
background: #eee;
display: inline-block;
}
&__selected-field {
float: left;
display: inline-block;
margin: 0 20px 10px 0;
display: inline-block;
padding: 4px 12px;
background: white;
border-radius: 5px;
&:last-child {
margin-right: 0;
}
}
&__selected-value-del {
@include fa-icon($fa-var-close);
cursor: pointer;
}
@media #{$media-phone-landscape} {
&__header {
@include mobile-overflow();
padding-top: 10px;
padding-bottom: 0;
min-height: 0;
}
&__total-count-container {
float: none;
width: auto;
margin: 0;
display: inline-block;
margin-right: 15px;
margin-bottom: 10px;
}
&__show-filter {
float: none;
width: auto;
margin: 0;
display: inline-block;
margin-bottom: 10px;
}
&__main {
@include mobile-overflow();
}
&__fields {
height: auto ! important;
@include mbot(0.5);
}
&__field {
@include mbot(0.5);
&.four-columns {
@include columnizer(12);
}
&.three-columns {
@include columnizer(12);
}
&.two-columns {
@include columnizer(12);
}
&.is-full-height {
height: auto;
}
}
}
}
.filter-scale {
&__inputs-holder {
font-size: 14/14*100%;
@include margin(5/20);
@include clearfix;
text-align: center;
&.is-hide {
display: none;
}
}
&__from {
float: left;
span {
margin-right: .5em;
}
}
&__to {
float: right;
span {
margin-right: .5em;
}
}
&__input[type="text"] {
padding: 5px 10px;
max-width: 100px;
font-size: 16/16*100%;
text-align: center;
}
&__scale {
&.ui-slider {
height: 7px;
margin-left: 4px;
margin-right: 4px;
border: none;
background-color: #eee;
border-radius: 0;
cursor: pointer;
.ui-slider-handle {
width: 8px;
height: 12px;
margin-right: 0;
margin-left: 0;
border: none;
background-color: $color-accent-text;
margin-left: -4px;
}
.ui-slider-range {
background-color: lighten($color-accent-text, 10%);
}
}
}
&__scale-holder {
position: relative;
padding-top: 10px;
padding-bottom: 10px;
}
&__min-text {
position: absolute;
left: 0;
bottom: 0;
font-size: 12px;
}
&__max-text {
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
}
}
.footer {
background: $background;//#4d6168;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d6168', endColorstr='#263238',GradientType=0 );
@include clearfix;
//padding: 40px 20px 30px;
@include clearfix;
padding-top: 20px;
color: #eeeeee;
a {
color: white;
text-decoration: none;
font-weight: 200;
font-size: 16px;
&:hover{
text-decoration: underline;
}
}
/* &__bottom {
clear: both;
height: 40px;
text-align: center;
padding-top: 10px;
} */
&__text-compire {
font-size: 1.3em;
}
&__copyright {
//margin-left: 50px;
}
&__container{
padding: 0 20px;
}
&__colums {
@include columnizer(2);
//margin-left: 0;
&-x2 {
@include columnizer(8);
width: 60.83333%;
margin-left: 5.5%;
}
&-x3 {
@include columnizer(2);
}
&.is-fullwidth{
width: 100%;
margin: 0;
float: none;
padding: 30px 0;
background-color: $backgroundFooterSecondary;
}
}
&__center {
@extend .content-center;
@include clearfix;
position: relative;
@include clearfix;
.footer__top & {
padding-bottom: 40px;
}
}
&__logo {
margin-left: 2.5%;
margin-bottom: $base-vertical-margin;
img {
max-width: 100%;
height: auto;
}
}
&__year,
&__company {
margin-bottom: 5px;
}
&__title-catalog {
padding: 10px 0 10px 0;
border-bottom: 1px solid #fff;
span {
font-size: 20px;
}
}
&__colums-title{
padding: 10px 0 10px 0;
font-size: 16px;
font-family:$helveticaBold;
}
&__top {
}
&__menu,
&__sns,
&__contacts {
margin-bottom: 30px;
}
&__contacts {
@include columnizer(3);
&-link-container {
margin-bottom:20px;
}
&-phone,
&-phone a {
text-transform: uppercase;
color: white;
font-weight: bold;
margin-bottom:0px;
text-decoration: none;
}
& .footer__callback,
& .footer__agreement-link {
color: #999999;
font-weight: normal;
margin: 5px 0;
font-size: 0.9em;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&-link {
text-transform: uppercase;
text-decoration: none;
color: white;
font-size: 0.9em;
font-weight: bold;
&:hover {
text-decoration: underline;
}
}
}
&__sns {
//@include columnizer(3);
//float:right;
text-align:left;
//margin-left: 50px;
//margin-top: 10px;
width: 60%;
display: inline-block;
vertical-align: top;
&-header {
color: white;
font-size: 1.1em;
font-weight: bold;
margin-bottom: 15px;
text-transform: uppercase;
}
&-list {
//display: inline-block;
display: flex;
flex-wrap: nowrap;
}
&-item {
@include columnizer(3);
//margin-left: 3px;
//padding-left: 4px;
margin-left: 20px;
width: 30px;
height: 30px;
&:first-child{
margin-left: 0;
}
}
&-link {
color: black;
&.youtube {
@include fa-icon($fa-var-youtube);
}
&.fb {
@include fa-icon($fa-var-facebook-f);
}
&.twitter {
@include fa-icon($fa-var-twitter);
}
&.insta {
@include fa-icon($fa-var-instagram);
}
&.vk {
@include fa-icon($fa-var-vk);
}
&.youtube,
&.fb,
&.twitter,
&.insta,
&.vk {
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid #fff;
background: transparent;
padding: 1px;
text-align:center;
transition: background .25s ease;
&:before {
display: inline-block;
vertical-align: middle;
font-size: 1.1em;
color: white;
//padding: 0.3em;
height: 100%;
width: 100%;
line-height: 30px;
transition: color .25s ease;
}
&:hover{
background: #fff;
&:before{
color: $background;
}
}
}
}
}
&__apps{
margin-top: -25px;
&-title{
font-family:$helvetica;
display: block;
text-align: right;
margin-bottom: 5px;
}
float: right;
width: 35%;
text-align: right;
display: inline-block;
vertical-align: top;
&-items{
@include clearfix();
}
&-item {
@include columnizer(4);
float: right;
}
&-link {
color: black;
width: 100%;
height: 50px;
display: block;
cursor: pointer;
&.google {
background: url(../img/content/google.png) no-repeat top center;
background-size: contain;
}
&.apple {
background: url(../img/content/app.png) no-repeat top center;
background-size: contain;
}
}
@media #{$media-phone} {
&-item {
float: left;
&:first-of-type{
margin-left: 15%;
}
&:last-of-type{
margin-right: 15%;
}
}
&-title{
text-align: center;
}
}
}
&__devs {
//text-align: right;
//color: white;
//margin-right: 0;
//padding-right: 0;
//float: right;
margin-left: 50px;
&-link {
color: white;
font-weight: bold;
text-decoration:none;
&:hover {
text-decoration: underline;
}
}
}
&__modals-list{
display: none;
}
&__left-holder {
float: left;
width: 200px;
padding-top: 10px;
}
&__right-holder {
float: right;
width: 260px;
}
&__middle-holder {
margin-left: 240px;
margin-right: 280px;
}
&__border {
border-top: 8px solid #f5f5f5;
padding-top: 20px;
}
&__developer {
margin-top: 20px;
white-space: nowrap;
text-align: right;
}
&__menu {
}
&__search {
margin-bottom: 20px;
}
&__bottom-catalog-menu {
@include columnizer(10);
}
&__bottom-right-info {
@include columnizer(2);
width: 16.6667%;
margin-left: 0px;
}
.section-tiles{
&__item{
margin-top: 0;
//width: calc(100%/4 - 4%);
@media #{$media-desktop} {
//width: calc(100%/2 - 3%);
&:nth-child(3){
clear: none;
}
}
}
}
&__arrow-up {
position: absolute;
cursor: pointer;
right: 0;
height: 35px;
width: 35px;
border: 4px solid $accent;
border-radius: 50%;
transition: background-color .25s;
&:hover{
background-color: $accent;
}
}
&__arrow-up-icon {
//margin-left: 5px;
@include fa-icon($fa-var-angle-up);
text-align: center;
display: block;
height: 100%;
width: 100%;
line-height: 30px;
color: $accent;
font-size: 2em;
transition: color .25s;
&:hover{
color: $background;
}
}
@media #{$media-desktop} {
&__colums{
&:last-child{
width: 100%;
}
&-x2{
width: 56%;
margin-left: 6.5%;
}
}
}
@media screen and (max-width: 992px) {
&__sns, &__copyright, &__devs{
//margin-left: 10px;
}
&__colums {
width: 100%;
margin-left: 0;
&:nth-child(3){
width: 100%;
margin: 0;
margin-bottom: 50px;
}
&-x2, &-x3 {
width: 100%;
margin-left: 0%;
}
}
}
/* @media screen and (max-width: 850px) {
&__colums {
&-x2 {
width: 100%;
margin-left: 2.5%;
}
}
}*/
}
.footer-menu {
&__columns {
@include columnizerParent(8);
}
&__column {
@include columnizer(4, 8);
}
&__item {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
}
.footer-mobile {
background: $background;//$color-bg-dark-header;
color: #eeeeee;
padding: 13px 0;
a {
color: white;
font-weight: normal;
text-decoration: underline;
}
&__layout{
padding: 0 13px;//$mobile-outer-margin;
}
&__logo{
width: 170px;
display: block;
margin: 7px 0;
img{
max-width: 100%;
}
}
&__catalog{
margin: 10px 0;
width: 100%;
&-item{
background-color: #1e3359;
padding: 13px 10px;
margin-bottom: 1px;
cursor: pointer;
}
&-sub-list{
padding-left: 20px;
}
&-sub-item{
padding: 11px 9px;
text-decoration: underline;
}
&-title{
&:before{
@include fa-icon($fa-var-angle-right, true);
margin-right: 15px;
font-size: 17px;
font-weight: bold;
transition: all .25s;
}
&.active{
&:before{
transform: rotate(90deg);
}
}
}
&-list{
display: none;
}
}
&__colums{
margin-top: 5px;
}
&__year{
margin-bottom: 10px;
}
&__contacts,
&__copyright,
&__devs {
margin-bottom: 25px;
padding-bottom: 10px;
//border-bottom: 1px solid #777;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
&__apps{
padding-bottom: 25px;
}
&__contacts {
text-align: center;
}
&__contacts-link {
font-size: 110%;
font-weight: bold;
margin-bottom: 15px;
text-transform: uppercase;
text-decoration: none;
}
&__contacts.content-area a {
text-decoration: none;
}
&__contacts-phone {
font-size: 150%;
@include margin(0.25);
}
&__callback {
text-decoration: none;
border-bottom: 1px dashed white;
font-size: 90%;
}
&__sns {
text-align: center;
&-header {
color: white;
font-size: 110%;
font-weight: bold;
margin-bottom: 15px;
text-transform: uppercase;
}
&-list {
display: inline-block;
}
&-item {
@include columnizer(3);
margin-left: 3px;
padding-left: 4px;
}
&-link {
&.youtube {
@include fa-icon($fa-var-youtube);
}
&.fb {
@include fa-icon($fa-var-facebook-f);
}
&.twitter {
@include fa-icon($fa-var-twitter);
}
&.insta {
@include fa-icon($fa-var-instagram);
}
&.vk {
@include fa-icon($fa-var-vk);
}
&.youtube,
&.fb,
&.twitter,
&.insta,
&.vk {
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid #fff;
background: transparent;
padding: 1px;
text-align: center;
transition: background .25s ease;
&:before {
display: inline-block;
vertical-align: middle;
font-size: 1.1em;
color: white;
height: 100%;
width: 100%;
line-height: 30px;
transition: color .25s ease;
}
&:hover{
background-color: #fff;
&:before{
color: #041e41;
}
}
}
}
}
.menu-footer-list{
&__first{
flex-wrap: wrap;
display: flex;
}
&__item{
width: calc(100%/2);
}
}
}
@media #{$media-phone} {
.footer-mobile {
.menu-footer-list {
&__item {
width: calc(100%);
}
}
}
}
// Стандартная форма
.forgotpasswd-form {
&__title {
@include mtop(3);
@include mbot(2.5);
font-size: 30/14*100%;
line-height: (41/30);
font-weight: 700;
margin-left: 20%;
margin-right: 20px;
}
&__plate {
@include the-plate();
}
&__node{
color: #0b8bfb;
&.error{
color: $color-status-error;
}
&.success{
color:$color-status-ok;
}
}
&__fields-list {
display: table;
width: 100%;
}
&__field {
display: table-row;
&.is-error {
.forgotpasswd-form__error {
display: block;
}
}
&.is-none {
.forgotpasswd-form__none {
display: block;
}
}
&.js-pass-change {
display: none;
}
}
&__buttons {
@include margin;
}
&__label {
display: table-cell;
vertical-align: top;
text-align: right;
padding: 15px 10px 0 0;
width: 150px;
&.is-captcha {
padding-top: 93px;
}
}
&__item {
display: table-cell;
vertical-align: top;
padding: 10px 0 10px 10px;
@include clearfix;
input[type='text'],
input[type='email'],
input[type='password'],
textarea {
width: 100%;
}
}
&__add-link {
display: inline-block;
margin-left: 1em;
}
&__list {
list-style: none;
margin: 5px 0;
padding: 0;
&.is-horizontal {
margin: 0;
.forgotpasswd-form__list-item {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 1.5em;
}
}
}
&__list-item {
@include margin(10/20);
}
&__error {
display: none;
color: $color-status-error;
}
&__none {
display: none;
color: $color-status-error;
}
&__ok {
display: none;
margin-top: 5px;
}
&__remark {
margin-top: 5px;
margin-bottom: 20px;
font-size: 85%;
}
&__inputs {
float: left;
width: 45%;
margin-right: 5%;
}
&__message {
float: left;
max-width: 35%;
margin-top: 3px;
}
&__inputs-link {
display: inline-block;
padding-top: 5px;
margin-right: 1em;
}
&__link {
display: inline-block;
color: #0b8bfb;
text-decoration: underline;
cursor: pointer;
margin: 0 10px;
&:hover {
text-decoration: none;
}
}
&__captcha {
display: table;
width: 45%;
@include margin(10/20);
}
&__captcha-img {
display: table-cell;
vertical-align: middle;
width: 50%;
img {
vertical-align: top;
}
}
&__captcha-reload {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
padding-left: 15px;
}
&__socials-holder {
padding: 15px 25px 25px;
background-color: #ccc;
}
&__socials-caption {
font-weight: bold;
font-size: 18/14*100%;
text-align: center;
}
&__socials {
text-align: center;
@include margin(20/20);
}
&__socials-item {
display: inline-block;
vertical-align: middle;
margin-right: .25em;
margin-left: .25em;
}
&__socials-link {
display: inline-block;
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 50%;
text-align: center;
&.is-ok {
@include fa-icon($fa-var-google-plus);
line-height: 50px;
font-size: 20px;
}
&.is-vk {
@include fa-icon($fa-var-vk);
line-height: 50px;
font-size: 20px;
}
&.is-tw {
@include fa-icon($fa-var-twitter);
line-height: 50px;
font-size: 20px;
}
&.is-fb {
@include fa-icon($fa-var-facebook);
line-height: 50px;
font-size: 20px;
}
}
.select2-container {
min-width: 100%;
max-width: 100%;
}
}
// Модификация для формы восстановления пароля
.forgotpasswd-form {
&__title {
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: (24/14*100%);
margin-bottom: 20px;
}
&__field {
display: block;
padding: 0;
@include margin(10/20);
}
&__label {
display: block;
padding: 0;
width: auto;
text-align: left;
@include margin(10/20);
}
&__item {
display: block;
padding: 0;
}
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
@media #{$media-phone-landscape} {
&__title {
@include mobile-form-title();
}
&__plate {
padding: 20px $mobile-outer-margin;
}
}
}
// Стандартная форма
.form-standart {
@media print {
display: none !important;
}
&.is-element {
.form-standart {
&__fields-list {
display: block;
}
&__field {
display: block;
&-float {
float: left;
width: 50%;
}
&-wrapper {
@include clearfix;
margin-left: 100px;
}
&.is-stars {
margin-bottom: 0px;
.form-standart {
&__item {
width: 170px;
}
}
}
&.is-field-btn {
float: right;
text-align: right;
padding-right: 15px;
}
.button-primary {
padding: 9px 33px;
font-size: 14px;
text-transform: none;
background-color: $accent;
transition: background-color .25s;
&:hover {
background-color: $accent-hover;
}
}
}
&__field-wrapper {
margin: 0;
}
&__label {
display: inline-block;
//width: 70px;
font-size: 14px;
font-weight: normal;
color: #000;
width: 53px;
text-align: left;
&.is-stars {
width: 142px;
padding-top: 10px;
text-align: left;
}
}
&__field-float {
float: none;
display: inline-block;
vertical-align: top;
width: calc(100% / 2 - 2%);
&:last-child {
margin-left: 30px;
}
}
&__item textarea {
height: 95px;
padding: 13px 13px;
}
&__item input[type='text'], &__item input[type='email'], &__item textarea {
//padding: 0 17px;
border: 1px solid $background;
}
&__item {
display: inline-block;
width: 85%;
}
&__plate {
@include clearfix;
}
@media screen and (max-width: 992px) {
&__field-float {
float: none;
width: 100%;
&:last-child {
margin-left: 0;
}
}
&__field-wrapper {
margin: 0;
}
&__item {
width: 100%;
padding: 0;
}
&__label {
text-align: left;
}
&__field {
width: 100%;
&.is-field-btn {
float: none;
padding-right: 0;
margin-top: -50px;
}
}
}
}
}
&.is-connect {
width: 75%;
float: left;
margin-right: 3%;
margin-top: 10px;
.inputselect {
height: 2em;
font-size: 14px;
line-height: 1.42857;
padding: 0 10px;
border: 1px solid #999999;
width: 100%;
box-sizing: border-box;
}
.form-standart {
&__inputs {
width: 60%;
}
&__plate {
padding: 40px;
}
&__field {
&.is-none {
input,
textarea {
border: 2px solid red;
}
.form-standart__label {
color: red;
}
}
}
}
@media screen and (max-width: 992px) {
width: 100%;
float: none;
margin-right: 0;
margin-bottom: 35px;
.form-standart__inputs {
width: 100%;
}
}
}
&.is-preorder {
.form-standart {
&__fields-list,
&__field,
&__label,
&__item {
display: block;
}
&__label {
width: auto;
text-align: left;
padding-top: 0;
}
&__item {
padding-left: 0;
padding-top: 3px;
}
&__inputs {
width: 100%;
}
&__field {
.button-primary {
padding: 10px 30px;
}
&.is-none {
.form-standart__label {
font-weight: bold;
color: #c10000;
}
.form-standart__inputs input {
border-color: #c10000;
}
}
}
}
@media #{$media-phone-landscape} {
&__inputs {
width: 100%;
}
}
}
&__title {
@include mtop(3);
@include mbot(2.5);
font-size: 30/14*100%;
line-height: (41/30);
font-weight: bold;
margin-left: 20%;
margin-right: 20px;
}
&__subtitle {
@include mtop(2);
@include mbot(1.5);
font-size: 24/14*100%;
font-weight: bold;
}
&__plate {
@include the-plate();
background-color: $pistacho;
border: 1px solid $pistacho;
padding: 28px 34px;
}
&__fields-title {
font-weight: bold;
font-size: 20/12*100%;
@include mbot(1);
@include mtop(1);
}
&__fields-desc {
@include mbot(1);
@include mtop(1);
}
&__product-title {
font-size: 20px;
font-weight: bold;
color: $background;
margin-bottom: 15px;
}
&__fields-list {
display: table;
width: 100%;
}
&__field {
display: table-row;
&.is-error {
.form-standart__error {
display: block;
}
}
&.is-none {
.form-standart__none {
display: block;
}
}
&.js-pass-change,
&.is-hidden {
display: none;
}
&.js-pass-change.is-visible {
display: table-row;
}
&.is-personal-data.is-none{
}
&.is-personal-data {
clear: both;
text-align: left;
width: 100% !important;
.form-standart__inputs {
display: inline-block;
width: auto;
margin-right: 0;
}
}
}
&__buttons {
@include margin;
}
&__label {
display: table-cell;
vertical-align: top;
text-align: right;
padding: 15px 10px 0 0;
//width: 150px;
color: $form-label-color;
&.is-captcha {
padding-bottom: 1em;
vertical-align: bottom;
}
}
&__item {
display: table-cell;
vertical-align: top;
padding: 10px 0 10px 10px;
position: relative;
@include clearfix;
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
textarea {
width: 100%;
}
}
&__add-link {
display: inline-block;
margin-left: 1em;
}
&__list {
list-style: none;
margin: 5px 0;
padding: 0;
&.is-horizontal {
margin: 0;
.form-standart__list-item {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 1.5em;
}
}
}
&__list-item {
@include margin(10/20);
}
&__error {
display: none;
color: $color-status-error;
}
&__none {
display: none;
color: $color-status-error;
}
&__ok {
display: none;
margin-top: 5px;
}
&__remark {
margin-top: 5px;
margin-bottom: 20px;
font-size: 85%;
}
&__inputs {
float: left;
width: 100%;
margin-right: 5%;
}
&__message {
font-size: 10px;
}
&__inputs-link {
display: inline-block;
padding-top: 5px;
margin-right: 1em;
@include pseudo-link;
}
&__link {
display: inline-block;
color: $color-link;
text-decoration: underline;
cursor: pointer;
margin: 0 10px;
&:hover {
text-decoration: none;
}
}
&__captcha {
display: table;
width: 45%;
@include margin(10/20);
}
&__captcha-img {
display: table-cell;
vertical-align: middle;
width: 50%;
img {
vertical-align: top;
}
}
&__captcha-reload {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
padding-left: 15px;
}
&__socials-holder {
padding: 15px 25px 25px;
background-color: #ccc;
}
&__socials-caption {
font-weight: bold;
font-size: 18/14*100%;
text-align: center;
}
&__socials {
text-align: center;
@include margin(20/20);
}
&__socials-item {
display: inline-block;
vertical-align: middle;
margin-right: .25em;
margin-left: .25em;
}
&__socials-link {
display: inline-block;
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 50%;
text-align: center;
&.is-ok {
@include fa-icon($fa-var-google-plus);
line-height: 50px;
font-size: 20px;
}
&.is-vk {
@include fa-icon($fa-var-vk);
line-height: 50px;
font-size: 20px;
}
&.is-tw {
@include fa-icon($fa-var-twitter);
line-height: 50px;
font-size: 20px;
}
&.is-fb {
@include fa-icon($fa-var-facebook);
line-height: 50px;
font-size: 20px;
}
}
&__link-items {
list-style: none;
margin: 0;
padding: 0;
@include margin(10/20);
}
&__link-item {
display: inline-block;
&:before {
content: ' | ';
margin-left: .5em;
margin-right: .5em;
}
&:first-child:before {
content: none;
}
}
.select2-container {
min-width: 100%;
max-width: 100%;
}
}
.form-standart.is-auth {
.form-standart {
&__label {
width: 50px;
}
}
}
// Состояние: Вертикальная (подпись сверху, поле снизу) VER
@mixin _state_ver($mod: '') {
.form-standart#{$mod ''} {
.form-standart {
&__title {
margin-left: 0;
margin-right: 0;
}
&__field {
display: block;
padding: 0;
@include margin(30/20);
}
&__field.js-pass-change.is-visible {
display: block;
}
&__field.js-pass-change,
&__field.is-hidden {
display: none;
}
&__label {
display: block;
padding: 0;
width: auto;
text-align: left;
@include margin(10/20);
}
&__item {
display: block;
padding: 0;
}
}
}
}
//Состояние: Горизонтальная (подпись слева, поле справа) HOR
@mixin _state_hor($mod: '') {
.form-standart#{$mod ''} {
@media print {
display: none;
}
.form-standart {
&__title {
text-align: center;
margin-left: 0;
margin-right: 0;
@include mbot(1);
}
&__fields-list {
text-align: center;
}
}
}
}
// Состояние:
@mixin _state_pla($mod: '') {
.form-standart#{$mod ''} {
.form-standart {
&__label {
display: none;
}
}
}
}
// Состояние: на странице контактов
@mixin _state_contacts($mod: '') {
.form-standart#{$mod} {
.form-standart {
&__title {
text-align: center;
margin-left: 0;
margin-right: 0;
}
&__label {
padding-right: 0;
white-space: nowrap;
text-align: left;
width: 70px;
}
&__inputs {
padding-right: 0;
white-space: nowrap;
text-align: left;
}
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
}
}
}
// Состояние: на странице faq
@mixin _state_faq($mod: '') {
.form-standart#{$mod} {
.form-standart {
&__label {
padding-right: 0;
white-space: nowrap;
text-align: left;
width: 70px;
}
&__inputs {
padding-right: 0;
white-space: nowrap;
text-align: left;
}
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
}
}
}
// Состояние: восстановление пароля
@mixin _state_recovery($mod: '') {
.form-standart#{$mod} {
.form-standart {
&__title {
margin-left: 0;
margin-right: 0;
font-size: (26/14*100%);
font-weight: 400;
margin-bottom: 20px;
}
&__field {
display: block;
padding: 0;
@include margin(10/20);
}
&__label {
display: block;
padding: 0;
width: auto;
text-align: left;
@include margin(10/20);
}
&__item {
display: block;
padding: 0;
}
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
}
}
}
// Состояние: Под полем с ошибкой, отодвигает ниже стоящие поля E2
@mixin _state_e2($mod: '') {
.form-standart#{$mod ''} {
.form-standart {
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
}
}
}
// Состояние: Под полем с ошибкой, не отодвигает ниже стоящие поля E3
@mixin _state_e3($mod: '') {
.form-standart#{$mod ''} {
.form-standart {
&__inputs {
width: auto;
float: none;
max-width: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
margin-left: 0;
position: absolute;
}
}
}
}
// Состояние: Вертикальная форма в одну линию
@mixin _state_hor_one_line($mod: '') {
.form-standart#{$mod ''} {
.form-standart {
&__title {
text-align: center;
margin-left: 0;
margin-right: 0;
@include mbot(1);
}
&__fields-list {
text-align: center;
width: auto;
display: block;
//padding: 0 40px;
@include columnizerParent();
}
&__field {
display: inline-block;
vertical-align: middle;
padding: 0;
margin: 0px 0 20px 20px;
text-align: left;
@include columnizer(4);
[type="text"], [type="password"], [type="email"], [type="tel"] {
//height: 3em;
}
&.is-field-btn {
@include columnizer(12);
display: block;
text-align: center;
@include mtop(0);
.form-standart__label {
font-size: 0;
}
}
}
&__label {
display: block;
padding: 0;
width: auto;
text-align: left;
@include margin(10/20);
font-weight: bold;
font-size: 1.1em;
}
&__fields-list {
text-align: center;
}
&__item {
display: block;
padding: 0;
}
@media #{$media-phone-landscape} {
&__title {
margin-left: 0;
margin-right: 0;
}
&__field {
display: block;
padding: 0;
width: auto;
float: none;
@include margin(30/20);
}
&__field.js-pass-change.is-visible {
display: block;
}
&__field.js-pass-change,
&__field.is-hidden {
display: none;
}
&__label {
display: block;
padding: 0;
width: auto;
text-align: left;
@include margin(10/20);
}
&__item {
display: block;
padding: 0;
}
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
&__plate {
@include mobile-overflow();
padding-bottom: 20px;
.fancybox-inner & {
margin-left: 0;
margin-right: 0;
}
}
&__title {
@include mobile-form-title();
}
&__label {
font-weight: bold;
margin-bottom: 5px;
&.is-empty {
display: none;
}
}
&__field {
@include margin;
}
}
}
}
}
// Состояние: Уменьшенный заголовок (для форм включаемых в aside)
@mixin _state_inner_title($mod: '') {
.form-standart#{$mod ''} {
.form-standart {
&__title {
font-size: 140%;
@include mbot;
}
}
}
}
// Состояние:
@mixin _state_offer($mod: '') {
.form-standart#{$mod ''} {
.form-standart {
&__field {
&.is-field-btn {
.form-standart__label {
display: none;
}
}
}
}
}
}
@media #{$media-phone-landscape} {
@include _state_ver();
@include _state_e2();
.form-standart {
.form-standart { //to overwrite state
&__plate {
@include mobile-overflow();
padding-bottom: 20px;
.fancybox-inner & {
margin-left: 0;
margin-right: 0;
}
}
&__title {
@include mobile-form-title();
}
&__label {
font-weight: bold;
margin-bottom: 5px;
&.is-empty {
display: none;
}
}
&__field {
@include margin;
}
}
}
}
@include _state_ver('.is-subscribe');
@include _state_pla('.is-subscribe');
@include _state_e2('.is-subscribe');
@include _state_ver('.is-promo');
@include _state_e2('.is-promo');
@include _state_e3('.is-auth');
@include _state_ver('.is-condensed-feedback');
@include _state_e2('.is-condensed-feedback');
@include _state_contacts('.is-modal');
@include _state_e2('.is-modal');
@include _state_e2('.is-contacts');
@include _state_contacts('.is-contacts');
@include _state_recovery('.is-pass-recovery');
@include _state_hor('.is-hor');
@include _state_ver('.is-ver');
@include _state_pla('.is-pla');
@include _state_e2('.is-ver');
@include _state_e2('.is-e2');
@include _state_e3('.is-e3');
@include _state_ver('.is-auth-form');
@include _state_pla('.is-auth-form');
@include _state_e2('.is-auth-form');
@include _state_hor('.is-flat');
@include _state_e2('.is-flat');
@include _state_hor_one_line('.is-oneliner');
@include _state_ver('.is-promo');
@include _state_inner_title('.is-promo');
@include _state_e2('.is-promo');
//@include _state_e2('.is-faq');
@include _state_ver('.is-offer');
@include _state_inner_title('.is-offer');
@include _state_e2('.is-offer');
@include _state_offer('.is-offer');
.form-standart.is-auth-form {
.form-standart__inputs {
}
}
/*
.form-standart.is-promo {
.form-standart {
&__title {
font-size: 140%;
@include mbot;
}
}
}
*/
.b-gallery-list {
overflow: hidden;
&__items {
list-style: none;
margin: 0;
padding: 0;
@include columnizerParent();
margin-top: -2.5%;
}
&__item {
@include columnizer(3);
margin-top: 2.5%;
}
}
.b-gallery-list._mx600 {
.b-gallery-list {
&__items {
@include columnizerParent(9);
margin-top: -3.3333%;
}
&__item {
@include columnizer(3, 9);
margin-top: 3.3333%;
&:nth-child(4n+1) {
clear: none;
}
}
}
}
.b-gallery-list._mx470 {
.b-gallery-list {
&__items {
@include columnizerParent(6);
margin-top: -5%;
}
&__item {
@include columnizer(3, 6);
margin-top: 5%;
&:nth-child(3n+1) {
clear: none;
}
}
}
}
.b-gallery-list._mx300 {
.b-gallery-list {
&__items {
margin-left: 0;
margin-top: 0;
}
&__item {
float: none;
width: auto;
margin-left: 0;
@include mtop(1.5);
text-align: center;
}
}
}
.header {
position: relative;
border-bottom: 2px solid $pistacho;
&__center {
@extend .content-center;
@extend .clearme;
position: relative;
width: auto;
max-width: none;
padding: 0 20px;
}
&__top,
&__bottom {
clear: both;
}
&__columns {
@include columnizerParent();
position: static;
//padding-bottom: 10px;
}
&__modal {
width: 100%;
background-color: #ccc;
//height: 100px;
display: block;
position: absolute;
z-index: 1;
}
&-menu-top{
&__link{
font-size: 15px;
}
}
&__top {
//margin-bottom: 10px;
min-height: 42px;
background: $background;//#888888;
.menu-top,
.auth-link {
float: left;
}
.menu-top {
background: #888;
@include columnizer(12);
.menu-top__plate {
min-height: 42px;
}
&__first-item{
border: none;
border-right: 1px solid white;
}
&__first-link {
padding: 10px 10px;
}
&.is-i-state .menu-top__second-level {
&.two-column {
@include columnizer(6);
}
&.four-column {
@include columnizer(3);
}
&.five-column {
@include columnizer(12/5);
}
}
&.is-z-state .menu-top__second-level {
& .menu-top__second-item{
&:nth-child(3n+1) {
clear: none;
}
}
&.two-column .menu-top__second-item{
@include columnizer(6);
&:nth-child(2n+1) {
clear: left;
}
}
&.three-column .menu-top__second-item{
@include columnizer(4);
&:nth-child(3n+1) {
clear: left;
}
}
&.four-column .menu-top__second-item{
@include columnizer(3);
&:nth-child(4n+1) {
clear: left;
}
}
&.five-column .menu-top__second-item{
@include columnizer(12/5);
&:nth-child(5n+1) {
clear: left;
}
}
}
}
.auth-link {
@include columnizer(3);
padding: 10px 0;
background: #888;
&_item {
margin-right: 1em;
}
}
.search-title {
@include columnizer(1);
&__title-holder {
background: #888;
padding: 6px 7px;
}
}
}
&__bottom {
//@include margin;
//height:80px;
padding-top: 10px;
background-color: #fff;
padding-bottom: 10px;
}
&__menu-list,
&__personal {
float: left;
display: inline-block;
}
&__personal {
margin-left: 40px;
}
&__logo-block {
@include columnizer(3);
padding:15px 25px 15px 5px;
width: 218px;
position: relative;
a.header__logo {
clear: both;
& img {
display: block;
max-width:100%;
height: auto;
}
}
.header__logo-desc{
}
}
/*&__contacts,
&__favorites,
&__compare{
@include columnizer(3);
}*/
&__catalogs{
@include columnizer(8);
//padding-top: 10px;
height: 73px;
//float: left;
}
&__phone,
&__phone a {
font-weight: bold;
font-size: 1.4em;
text-decoration: none;
}
&__basket {
@include columnizer(3);
}
&__top-section {
background-color: gray;
@include clearfix();
}
&__bottom-section {
@include clearfix();
}
&__cart {
float: right;
margin-top: 11px;
padding-left: 10px;
border-left: 1px dotted white;
}
&__enter {
float: right;
margin-top: 10px;
margin-right: 15px;
}
&__menu {
float: left;
background-color: gray;
@include clearfix();
}
&__catalog {
float: right;
margin-right: 45px;
}
&__search {
float: right;
}
&__left {
float: left;
text-align: left;
}
&__right {
text-align: right;
float: right;
}
&__holder {
float: left;
margin-left: 20px;
}
&__slogan {
float: left;
padding: 10px 0px 10px 2.5%;
color:white;
}
&__contacts {
float: right;
}
&__img {
max-width: 100%;
height: auto;
}
&__row {
position: relative;
display: block;
}
@media screen and (max-width: 992px) {
&__catalogs{
margin-left: 0;
width: 60%;
}
}
@media #{$media-tablet} {
&__center{
padding: 0 10px;
}
&__columns{
width: 100%;
}
}
}
.header-menu-top {
&__item {
display: inline-block;
float: right;
background: #1e3359;
margin-right: 1px;
transition: background .25s;
&:first-child{
margin-right:0;
&:after{
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: $fa-var-map-marker;
position: absolute;
top: 26%;
color: #fff;
left: 10%;
font-size: 17px;
}
}
&:hover{
background: rgba(#1e3359, .7);
}
}
&__items{
position: absolute;
right: 0;
}
&__link {
color: #fff;
text-decoration: none;
padding: 10px 50px;
display: block;
}
}
.header-mobile {
padding-top: $mobile-header-height;
border-bottom: 1px solid gray;
&__line {
height: $mobile-header-height;
left: 0;
top: 0;
right: 0;
position: absolute;
background: $background;//$color-bg-dark-header;
z-index: 100;
.header-mobile.is-menu-opened & {
position: fixed;
}
}
&__left {
float: left;
}
&__right {
float: right;
}
&__call, &__search, &__cart, &__menu {
display: inline-block;
width: $mobile-header-height;
height: $mobile-header-height;
vertical-align: middle;
}
&__call-link,
&__search-button,
&__cart-button,
&__menu-button {
display: block;
width: $mobile-header-height;
height: $mobile-header-height;
@include box-sizing;
text-align: center;
text-decoration: none;
position: relative;
&.is-active {
background: white;
}
}
&__cart-button {
text-indent: -6px;
}
&__cart-counter {
width: 15px;
height: 15px;
position: absolute;
color: white;
background: $color-accent-text;
text-align: center;
font-size: 10px;
border-radius: 50%;
right: 6px;
top: 5px;
@include box-sizing;
padding-top: 1px;
text-indent: -1px;
}
&__cart-empty {
font-size: 150%;
color: #999;
text-align: center;
}
&__catalog {
display: inline-block;
height: $mobile-header-height;
vertical-align: middle;
}
&__catalog-button {
display: inline-block;
height: $mobile-header-height;
padding-left: $mobile-outer-margin;
padding-right: $mobile-outer-margin;
font-size: 100%;
text-transform: uppercase;
line-height: $mobile-header-height;
color: white;
text-decoration: none;
color: white;
&:hover {
color: white;
}
&:after {
@include fa-icon($fa-var-angle-down, true);
font-size: 16px;
margin-left: 8px;
//@extend .icon-mobile-catalog;
}
&.is-active {
background: white;
color: black;
&:after {
//@extend .icon-mobile-catalog_active;
}
}
}
&__call-icon,
&__search-icon,
&__cart-icon,
&__menu-icon {
color: white;
font-size: 150%;
line-height: $mobile-header-height;
.is-active > & {
color: $color-accent-text;
}
}
&__call-icon {
@include fa-icon-is($fa-var-phone);
}
&__search-icon {
@include fa-icon-is($fa-var-search);
}
&__cart-icon {
@include fa-icon-is($fa-var-shopping-cart);
}
&__menu-icon {
@include fa-icon-is($fa-var-navicon);
}
&__catalog-holder,
&__call-holder,
&__search-holder,
&__cart-holder,
&__menu-holder {
background: white;
position: fixed;
left: 0;
top: $mobile-header-height;
right: 0;
z-index: 100;
display: none;
@include box-sizing;
padding: 26px $mobile-outer-margin;
overflow-y: scroll;
border-bottom: 1px solid #a3a3a3;
&.is-active {
display: block;
}
&.is-fullscreen {
bottom: 0;
}
}
&__search-holder{
.search-title{
padding-top: 0 !important;
width: 100%;
&__input{
background-color: rgba($accent, .5);
}
}
}
&__menu-holder {
a {
color: $color-text;
}
}
&__catalog-holder {
bottom: 0;
padding: 0;
}
&__menu-holder {
bottom: 0;
}
&__call-holder {
text-align: center;
}
&__plate-item {
@include margin;
}
&__plate-section {
@include thin-border-bottom();
@include mobile-overflow(false);
padding: $mobile-outer-margin;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
}
&__plate-horlink {
display: inline-block;
margin-left: 20px;
vertical-align: middle;
&:first-child {
margin-left: 0;
}
}
&__phone {
@extend .button-big;
background-color: $accent;
color: #fff;
font-size: 140%;
width: 100%;
transition: background-color .25s;
&:hover{
background-color: $accent-hover;
}
//padding-top: 9px;
}
&__callback {
@extend .pseudo-link;
color: $color-link;
}
&__logo {
background: white;
padding: $mobile-outer-margin;
}
&__logo-img {
display: block;
}
&__exit {
margin-left: 20px;
@include fa-icon-is($fa-var-sign-out);
&:before {
margin-right: 5px;
}
}
}
@media #{$media-phone-landscape} {
.header{
&-mobile{
&__logo{
img{
width: 200px;
height: auto;
}
}
}
}
}
.icon-tiles {
&__items {
@include columnizerParent;
}
&__item {
@include columnizer(4, 12);
margin-bottom: getcolumnmargin() * 2;
&:nth-child(3n+1) {
clear: left;
}
}
&__item-wrap {
display: table;
width: 100%;
box-sizing: border-box;
}
&__icon-holder {
display: table-cell;
vertical-align: middle;
width: 50px;
}
&__icon {
max-width: 100%;
height: auto;
vertical-align: top;
}
&__description-holder {
display: table-cell;
vertical-align: middle;
padding-left: 20px;
width: auto;
}
}
.include-brand {
margin-top: 50px;
&__items {
@include clearfix;
}
&__item {
@include columnizer(6);
min-height: 200px;
background-color: #efefef;
padding: 40px 30px 20px 30px;
}
&__title {
display: inline-block;
width: 100%;
margin-bottom: 40px;
font-size: 26px;
font-weight: bold;
color: #333;
text-align: center;
}
&__wrap-link {
text-align: center;
}
&__link {
text-transform: uppercase;
text-decoration: none !important;
color: #fff !important;
padding: 10px 40px;
background-color: #8e8e8e;
border-radius: 8px;
}
}
.include-connect {
float: left;
width: 22%;
&__title {
font-size: 20px;
margin-bottom: 20px;
}
&__sub-title {
font-size: 18px;
margin-bottom: 20px;
}
p {
font-size: 13px;
}
@media screen and (max-width: 992px) {
width: 100%;
float: none;
}
}
.include-element {
margin-top: 50px;
&__items {
@include clearfix;
}
&__icon{
height: 33px;
width: 33px;
border: 2px solid $background;
color: $background;
text-align: center;
border-radius: 50%;
display: inline-block;
font-size: .8em;
line-height: 33px;
margin-right: 13px;
&-book{
@include fa-icon-is($fa-var-book);
}
&-shield{
@include fa-icon-is($fa-var-shield);
}
&-mail{
@include fa-icon-is($fa-var-envelope);
}
}
&__item {
@include columnizer(6);
min-height: 200px;
background-color: $pistacho;
padding: 40px 30px 40px 70px;
//margin-bottom: 2.5%;
margin-left: 0;
width: calc(100%/2);
border-left: 1px solid $pistacho-hover;
border-top: 1px solid $pistacho-hover;
border-bottom: 1px solid $pistacho-hover;
&:nth-child(2){
border-right: 1px solid $pistacho-hover;
}
&.is-fullwidth {
width: 100%;
border-bottom: 1px solid $pistacho-hover;
border-right: 1px solid $pistacho-hover;
border-top: 0;
}
}
&__title {
display: inline-block;
width: 100%;
margin-bottom: 16px;
font-size: 21px;
font-weight: bold;
color: $background;
//min-height: 75px;
}
&__text {
margin-bottom: 30px;
}
&__wrap-link {
//text-align: center;
}
&__link {
text-transform: none;
text-decoration: none !important;
color: #fff !important;
padding: 9px 18px;
background-color: $accent;
border-radius: 8px;
transition: background-color .25s;
&:hover{
background-color: $accent-hover;
}
}
@media screen and (max-width: 992px) {
&__item{
width: calc(100%/2);
//margin-left: 0.5%;
//margin-right: 0.5%;
}
}
@media #{$media-phone-landscape} {
&__item{
width: 100%;
margin-left: 0;
margin-right: 0;
border-right: 1px solid $pistacho-hover;
padding: 40px 30px 40px 30px;
&.is-fullwidth{
width: 100%;
}
}
}
}
.include-section {
margin-top: 85px;
margin-bottom: 50px;
&__items {
@include clearfix;
display: flex;
flex-wrap: wrap;
}
&__item {
@include columnizer(6);
min-height: 200px;
background-color: #efefef;
padding: 40px 30px 20px 30px;
margin-bottom: 2.5%;
transition: background-color .25s;
position: relative;
overflow: hidden;
&:first-child{
background-color: $skyblue;
color: #fff;
&:hover{
background-color: lighten($skyblue, 5%);
}
.include-section{
&__title, &__text{
color: #fff;
}
}
}
&:hover{
.include-section {
&__background{
transform: scale(1.1);
}
}
}
&-link {
//padding: 40px 30px 20px 30px;
position: relative;
}
&.is-fullwidth {
width: 97.5%;
}
}
&__background{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
background-repeat: no-repeat !important;
background-size: cover;
transition: all .4s;
}
&__overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
opacity: .5;
}
&__title {
display: inline-block;
width: 100%;
margin-bottom: 30px;
font-size: 38px;
font-weight: 500;
line-height: 43px;
font-family:$helveticaBold;
color: $background;
}
&__text {
display: inline-block;
color: #333;
font-size: 19px;
font-family:$helvetica;
}
}
@media screen and (max-width: 620px) {
.include-section {
&__item {
width: 100%;
margin-left: 0;
}
}
}
.loader {
// TODO: Если нужен будет обычный лоадер, не полноэкранный, то стили сюда
&.is-fullscreen {
display: none;
position: fixed;
width: 58px;
height: 58px;
top: 50%;
left: 50%;
margin-left: -29px;
margin-top: -29px;
z-index: 100000;
}
.loader {
&__item {
position: absolute;
background-color: rgb(0, 0, 0);
width: 14px;
height: 14px;
border-radius: 9px;
-o-border-radius: 9px;
-ms-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
animation-name: bounce_circularG;
-o-animation-name: bounce_circularG;
-ms-animation-name: bounce_circularG;
-webkit-animation-name: bounce_circularG;
-moz-animation-name: bounce_circularG;
animation-duration: 1.1s;
-o-animation-duration: 1.1s;
-ms-animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
-moz-animation-duration: 1.1s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-direction: normal;
-o-animation-direction: normal;
-ms-animation-direction: normal;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
&-1 {
left: 0;
top: 23px;
animation-delay: 0.41s;
-o-animation-delay: 0.41s;
-ms-animation-delay: 0.41s;
-webkit-animation-delay: 0.41s;
-moz-animation-delay: 0.41s;
}
&-2 {
left: 6px;
top: 6px;
animation-delay: 0.55s;
-o-animation-delay: 0.55s;
-ms-animation-delay: 0.55s;
-webkit-animation-delay: 0.55s;
-moz-animation-delay: 0.55s;
}
&-3 {
top: 0;
left: 23px;
animation-delay: 0.69s;
-o-animation-delay: 0.69s;
-ms-animation-delay: 0.69s;
-webkit-animation-delay: 0.69s;
-moz-animation-delay: 0.69s;
}
&-4 {
right: 6px;
top: 6px;
animation-delay: 0.83s;
-o-animation-delay: 0.83s;
-ms-animation-delay: 0.83s;
-webkit-animation-delay: 0.83s;
-moz-animation-delay: 0.83s;
}
&-5 {
right: 0;
top: 23px;
animation-delay: 0.97s;
-o-animation-delay: 0.97s;
-ms-animation-delay: 0.97s;
-webkit-animation-delay: 0.97s;
-moz-animation-delay: 0.97s;
}
&-6 {
right: 6px;
bottom: 6px;
animation-delay: 1.1s;
-o-animation-delay: 1.1s;
-ms-animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
}
&-7 {
left: 23px;
bottom: 0;
animation-delay: 1.24s;
-o-animation-delay: 1.24s;
-ms-animation-delay: 1.24s;
-webkit-animation-delay: 1.24s;
-moz-animation-delay: 1.24s;
}
&-8 {
left: 6px;
bottom: 6px;
animation-delay: 1.38s;
-o-animation-delay: 1.38s;
-ms-animation-delay: 1.38s;
-webkit-animation-delay: 1.38s;
-moz-animation-delay: 1.38s;
}
}
}
}
@keyframes bounce_circularG{
0%{
transform:scale(1);
}
100%{
transform:scale(.3);
}
}
@-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1);
}
100%{
-o-transform:scale(.3);
}
}
@-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1);
}
100%{
-ms-transform:scale(.3);
}
}
@-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1);
}
100%{
-webkit-transform:scale(.3);
}
}
@-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1);
}
100%{
-moz-transform:scale(.3);
}
}
body {
&.loading {
&:after {
background: rgba(22, 50, 93, 0.36);
display: block;
content: " ";
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 10000;
}
.loader {
display: block;
}
}
}
.logo-slider {
box-sizing: border-box;
&.main {
margin-bottom: 40px;
margin-top: 5px;
padding: 0 5px;
@include w480 {
margin-top: 20px;
margin-bottom: 20px;
}
.logo-slider {
&__title {
/*position: absolute;
bottom: 0;
//right: 0;
left: 0;
padding: 80px 10px 0 10px;
font-size: 14px;
font-weight: bold;
white-space: normal;
margin-bottom: 10px;*/
position: absolute;
text-align: center;
bottom: 5px;
padding-left: 10%;
padding-right: 10%;
left: 0;
width: 80%;
transform: translateX(0);
margin: 0;
font-family: $font-base;
font-weight: bold;
color: $background;
transition: color .3s ease;
line-height: 1.2;
font-size: 15px;
white-space: normal;
height: 60px;
}
&__slide {
@include box-sizing;
//height: 170px;
//width: 170px !important;
&:hover {
.logo-slider__title {
color: $accent;
}
}
}
&__arrows {
background-color: $slider-main-bg;
width: 6%;
}
&__arrow-left {
right: 3.5%;
&:after{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: $slider-main-bg;
left:50%;
z-index:-1;
}
&:before{
height: 50px;
width: 50px;
line-height: 48px;
border: 2px solid $accent;
border-radius: 50%;
left: 40%;
z-index:10;
}
&.slick-disabled:before{
border:none;
}
}
&__arrow-right {
&:before{
height: 50px;
width: 50px;
line-height: 48px;
border: 2px solid $accent;
border-radius: 50%;
right: 40%;
}
&.slick-disabled:before{
border:none;
}
}
&__slider {
height: auto;
margin-left: 0;
&.slick-list {
margin-right: 5%;
}
}
&__action {
background-color: $slider-main-bg;
}
}
@media #{$media-desktop} {
.logo-slider {
&__title {
font-size: 11px;
}
}
}
@media screen and (max-width: 992px) {
.logo-slider {
//&__arrows {
// height: 50px;
// width: 50px;
// background: none;
// border: 2px solid $accent;
// border-radius: 50%;
//}
//
//&__arrow-left {
// right: -60px;
// //bottom: 0;
// top: 50%;
//}
//&__arrow-right {
// right: -60px;
// top: 20%;
//}
//
//&__arrow-left, &__arrow-right {
// &:before {
// top: 0;
// line-height: 50px;
// }
//}
}
}
@media #{$media-phone-landscape} {
margin-left: 5px;
margin-right: 5px;
padding: 0;
.logo-slider {
&__slider {
margin-right: 0;
}
&__slide {
width: 25%;
margin-left: 0;
margin-right: 0;
padding: 5px;
display: inline-block;
}
&__title {
font-size: 10px;
bottom: -5px;
padding-left: 5px;
padding-right: 5px;
@include box-sizing;
width: 100%;
}
&__action {
min-height: 0;
}
}
}
@media #{$media-phone} {
.logo-slider {
&__slide {
width: 50%;
}
}
}
/* @media #{$media-phone} {
.logo-slider{
&__title {
font-size: 12px;
bottom: -5px;
}
}
} */
}
&__title {
margin-bottom: 25px;
text-align: center;
font-size: 28px;
font-weight: bold;
}
&__slider {
margin-left: 40px;
margin-right: 40px;
height: 105px;
}
&__slide {
position: relative;
display: flex;
box-sizing: border-box;
//height: 105px;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
&__action {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
min-height: 140px;
vertical-align: middle;
white-space: nowrap;
padding: 10px 32px 75px 32px;
width: auto;
position: relative;
margin: auto;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
&__image {
//height: 70%;//auto;
//width: 99%;
//display: inline-block !important; // slick-slide override
//vertical-align: middle;
margin: 0 auto;
//margin-top: 5%;
}
&__arrows {
position: absolute;
//top: 50%;
//margin-top: -.5em;
height: 100%;
padding: 0;
//border-radius: 50%;
line-height: 100%;
font-size: 200%;
font-weight: bold;
cursor: pointer;
top: 0;
background-color: #ecf0f2;
text-align: center;
width: 50px;
}
&__arrow-left {
@include fa-icon($fa-var-angle-left);
//left: -40px;
right: 0;
color: $accent;
&.slick-disabled {
color: #ccc;
}
}
&__arrow-right {
@include fa-icon($fa-var-angle-right);
right: -40px;
color: $accent;
&.slick-disabled {
color: #ccc;
}
}
&__arrow-left, &__arrow-right {
&:before {
position: absolute;
top: 40%;
width: 100%;
left: 0;
right: 0;
text-align: center;
font-weight: bold;
}
}
}
.logo-slider.noslider {
display: table;
width: 100%;
.logo-slider {
&__slider {
display: table-row;
}
&__slide {
display: table-cell;
}
&__image {
width: initial;
min-width: 0%;
min-height: 0%;
}
}
@media #{$media-phone-landscape} {
display: block;
.logo-slider {
&__slider {
display: block;
margin-left: 0;
margin-right: 0;
}
&__slide {
@include box-sizing;
width: 33.33%;
float: left;
padding: 20px;
margin-left: 0;
margin-right: 0;
}
&__image {
width: auto;
height: auto;
}
}
}
@media #{$media-phone} {
display: block;
.logo-slider {
&__slider {
display: block;
}
&__slide {
@include box-sizing;
width: 50%;
float: left;
padding: 20px;
}
}
}
}
.logo-slider__slider {
.slick-list {
width: 90%;
}
}
/* @media #{$media-tablet} {
.logo-slider {
&__image {
width: 100%;
height: 120px;
}
}
} */
.main-compare {
position: fixed;
bottom: 0;
width: 100%;
z-index: 11;
right: 0;
left: 0;
text-align: center;
background-color: #333;
&__link{
padding: 10px;
display: inline-block;
font-size: 16px;
color: #fff !important;
}
}
.map-description {
&.is-service {
font-size: 1.5em;
font-weight: bold;
a {
color: $background;
text-decoration: underline;
&:hover {
color: $accent;
text-decoration: none;
}
}
}
}
.map-search {
@include clearfix;
position: relative;
&__list {
float: left;
width: 35%;
}
&__items {
list-style-type: none!important;
}
&__address-items {
list-style-type: none !important;
}
&__maps {
float: right;
width: 65%;
box-sizing: border-box;
padding-left: 70px;
}
&__title {
font-size: 32px;
margin-bottom: 20px;
font-weight: bold;
}
&__name {
font-size: 1.7rem;
margin-bottom: 20px;
color: #041e41;
font-weight: bold;
}
&__item {
padding: 20px 0;
border-bottom: 1px solid $pistacho-hover;
&.is-active{
background: $pistacho;
padding: 20px 40px;
}
}
&__address {
&-item {
line-height: 35px;
position: relative;
font-family: 'ElectroluxSans';
font-size: 1.3em;
margin-bottom: 10px;
&-title {
font-weight: bold;
color: #041e41;
font-size: 1.05em;
position: relative;
}
a{
color: $accent;
font-size: 1.1em;
text-decoration: none;
&:hover{
color: $accent-hover;
}
}
}
}
&__search-field {
margin-bottom: 30px;
border: 2px solid $accent;
border-radius: 4px;
}
&__input {
transition: all .4s;
width: 90%;
height: 70px;
padding-left: 15px;
border: none;
font-size: 1.8em;
}
&__clear-field {
position: absolute;
right: 11%;
top: 0;
bottom: 0;
font-size: 3em;
background: none;
border: none;
color: #dcdcdc;
cursor:pointer;
&.is-hide{
display: none;
}
&:hover {
color: #c6c6c6;
}
}
&__submit {
@extend .button;
padding: 0;
font-size: 2.1em;
background: $accent;
color: #fff;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 10%;
border-radius: 0;
transition: color, background .25s;
&:hover {
background: darken($accent, 10%);
}
}
&__field {
position: relative;
@include box-sizing;
}
&__button{
padding:10px 20px;
background-color: $accent;
display: inline-block;
color: #fff !important;
border-radius: 4px;
text-decoration: none;
font-family: 'ElectroluxSans';
&-wrap{
@include clearfix;
padding-top: 5px;
margin-top: 30px;
text-align: center;
}
&:hover{
background-color: $accent-hover;
}
}
&__path{
margin-top: 20px;
}
&__path-link{
color: $accent;
text-decoration: none;
font-size: 1.2em;
&:hover{
color: $accent-hover;
}
}
&.is-service {
.map-search {
&__label {
font-weight: 200;
line-height: 1.578947;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 1rem;
color: #4f4e53;
margin-bottom: 15px;
}
}
}
@media #{$media-desktop}{
/* &__input {
width: calc(80% - 10px);
}
&__submit{
width: calc(20% - 11px);
padding: 8px 2%;
}*/
}
@media #{$media-phone-landscape} {
&__list {
float: none;
width: 100%;
}
&__maps {
float: none;
width: 100%;
padding: 0;
margin-top: 45px;
}
&__submit{
width: 20%;
}
&__input {
width: 80%;
}
&__clear-field {
right: 22%;
}
}
}
#map {
width: 100%;
background-color: grey;
&.is-fixed {
position: fixed !important;
//top: 105px;
top: 5%;
bottom: 5%;
@media #{$media-phone-landscape} {
position: static !important;
}
}
&.is-fix-bottom {
position: absolute !important;
bottom: 0;
}
}
// Общие стили ссылок
@mixin _link() {
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
&:hover {
opacity: 0.8;
}
}
.menu-aside {
a {
color: #fff;//$color-text;
}
&__common-header {
background-color: #ccc;
}
&__common-link {
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding: 15px 20px 15px 52px;
text-decoration: none;
&:before {
@include fa-icon($fa-var-bars, true);
position: absolute;
left: 10px;
top: 0;
bottom: 0;
margin: auto;
width: 31px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
background-color: #f2f2f2;
border-radius: 50%;
}
}
&__first-holder {
position: relative;
z-index: 1001;
}
&__first-level {
counter-reset: firstlevel;
}
&__first-item {
position: relative;
border-top: 1px solid #f92400;
background-color: lighten($accent, 5%);//#ddd;
color: #fff;
counter-increment: firstlevel;
position: relative;
&.is-contain:after {
@include fa-icon($fa-var-angle-down, true);
font-size: 150%;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
line-height: 1;
height: 20px;
margin: auto;
transform-origin: 50% 50%;
transition: transform .3s;
}
}
&__first-link {
@include _link();
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 10px;
&.is-hide {
display: none;
}
}
&__second-holder {
display: none;
position: absolute;
left: 100%;
top: 0;
min-width: 200px;
border-left: 1px solid white;
@include box-sizing;
}
&__second-level {
}
&__second-item {
position: relative;
border-top: 1px solid #f92400;
background-color: lighten($accent, 4%);//#ddd;
color: #fff;
&:first-child {
border-top: none;
}
&.is-contain:after {
@include fa-icon($fa-var-angle-down, true);
font-size: 150%;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
line-height: 1;
height: 20px;
margin: auto;
transform-origin: 50% 50%;
transition: transform .3s;
}
}
&__second-link {
@include _link();
}
&__third-holder {
display: none;
position: absolute;
left: 100%;
top: 0;
min-width: 300px;
border-left: 1px solid white;
@include box-sizing;
}
&__third-level {
}
&__third-item {
position: relative;
border-top: 1px solid #f92400;
background-color: lighten($accent, 5%);//#ddd;
color: #fff;
&:first-child {
border-top: none;
}
&.is-contain:after {
@include fa-icon($fa-var-angle-down, true);
font-size: 150%;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
height: 20px;
line-height: 1;
margin: auto;
transform-origin: 50% 50%;
transition: transform .3s;
}
}
&__third-link {
@include _link();
}
&__additional-holder {
display: none;
&.is-opened {
display: block;
}
}
&__additional-level {
}
&__additional-item {
border-top: 1px solid white;
background-color: #ccc;
&:first-child {
border-top: none;
}
}
&__additional-link {
@include _link();
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 52px;
&:before {
content: '';
position: absolute;
left: 10px;
top: 0;
bottom: 0;
margin: auto;
width: 31px;
height: 31px;
background-color: #f8c;
border-radius: 50%;
}
}
&__custom-icon {
display: inline-block;
vertical-align: middle;
margin-right: .5em;
border-radius: 50%;
}
// Ховеры
&__first-item.is-opened {
&.is-contain:after {
transform: rotate(-90deg)
}
.menu-aside__second-holder {
display: block;
}
}
&__second-item.is-opened {
&.is-contain:after {
transform: rotate(-90deg)
}
.menu-aside__third-holder {
display: block;
}
}
&__third-item.is-opened {
&.is-contain:after {
transform: rotate(-90deg)
}
.menu-aside__third-holder {
display: block;
}
}
&.no-js .menu-aside {
&__first-item:hover {
.menu-aside__second-holder {
display: block;
}
}
&__second-item:hover {
.menu-aside__third-holder {
display: block;
}
}
}
&__chevron {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50px;
text-align: center;
font-size: 25px;
background: lighten($accent, 9%);//#eeeeee;
@include box-sizing;
@include fa-icon-is($fa-var-angle-right);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
&:before {
transition: transform 0.5s;
}
.is-opened > & {
background: white;
color: #333;
&:before {
transform: rotate(-180deg);
}
}
}
}
@mixin _state_z() {
.menu-aside {
&__first-level {
position: relative;
}
&__first-item {
position: static;
&:after {
display: none;
}
&.is-contain {
.menu-aside__first-link {
position: relative;
&:after {
@include fa-icon($fa-var-angle-down, true);
font-size: 150%;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
line-height: 1;
height: 20px;
margin: auto;
transform-origin: 50% 50%;
transition: transform .3s;
}
}
}
&.is-opened.is-contain {
.menu-aside__first-link {
&:after {
transform: rotate(-90deg);
}
}
}
}
&__second-holder {
position: absolute;
left: 100%;
top: 0;
width: 700px;
padding: 20px 20px 0;
background-color: #ddd;
}
&__second-level {
@include clearfix;
}
&__second-item {
float: left;
width: 30%;
padding-right: 15px;
margin-bottom: 20px;
border: none;
background: none;
box-sizing: border-box;
&.is-contain:after {
display: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
&__second-link {
display: inline;
padding: 0;
font-weight: 700;
}
&__third-holder {
position: static;
display: block;
min-width: 0;
border: none;
background: none;
@include mtop(10/20);
}
&__third-item {
@include margin(5/20);
border: none;
background: none;
&.is-contain:after {
display: none;
}
}
&__third-link {
display: inline;
padding: 0;
}
@content;
}
}
@mixin _state_i() {
.menu-aside {
&__first-level {
position: relative;
}
&__first-item {
position: static;
&:after {
display: none;
}
&.is-contain {
.menu-aside__first-link {
position: relative;
&:after {
@include fa-icon($fa-var-angle-down, true);
font-size: 150%;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
line-height: 1;
height: 20px;
margin: auto;
transform-origin: 50% 50%;
transition: transform .3s;
}
}
}
&.is-opened.is-contain {
.menu-aside__first-link {
&:after {
transform: rotate(-90deg);
}
}
}
}
&__second-holder {
position: absolute;
left: 100%;
top: 0;
width: 700px;
padding: 20px 20px 0;
background-color: #ddd;
@include clearfix;
}
&__second-level {
float: left;
width: 30%;
padding-right: 20px;
margin-bottom: 20px;
}
&__second-item {
@include margin(20/20);
border: none;
background: none;
box-sizing: border-box;
&.is-contain:after {
display: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
&__second-link {
display: inline;
padding: 0;
font-weight: 700;
}
&__third-holder {
position: static;
display: block;
min-width: 0;
border: none;
background: none;
@include mtop(10/20);
}
&__third-item {
@include margin(5/20);
border: none;
background: none;
&.is-contain:after {
display: none;
}
}
&__third-link {
display: inline;
padding: 0;
}
@content;
}
}
@mixin _state_mobile() {
.menu-aside {
&__common-header {
display: none;
}
&__chevron {
width: 10%;
}
&__first-item, &__second-item {
transition: opacity 0.5s;
}
&__first-item.is-contain:after,
&__second-item.is-contain:after,
&__third-item.is-contain:after {
display: none;
}
&__second-holder {
width: 90%;
min-width: 0;
.menu-aside__chevron {
width: 11.11%
}
}
&__third-holder {
width: 100%;
min-width: 0;
}
&__first-holder {
left: 0%;
transition: left 0.5s;
}
}
&.is-level0 {
.menu-aside__first-holder { left: 0%; }
}
&.is-level1 {
.menu-aside__first-holder { left: -90%; }
.menu-aside__first-item {
opacity: 0.1;
&.is-opened {
opacity: 1;
}
}
}
&.is-level2 {
.menu-aside__first-holder { left: -180%; }
.menu-aside__second-item {
opacity: 0.1;
&.is-opened {
opacity: 1;
}
}
}
}
.menu-aside.is-z-state { @include _state_z(); }
.menu-aside.is-i-state { @include _state_i(); }
.menu-aside.is-mobile { @include _state_mobile(); }
@mixin menu-bottom__link() {
position: relative;
text-decoration: none;
color: white;
&:visited {
color: white;
}
&:hover {
text-decoration: underline;
color: white;
}
}
@mixin menu-bottom__link_bg() {
position: relative;
text-decoration: none;
&:hover {
background-color: #bbb;
}
}
.menu-bottom {
&__plate {
}
&__first-level {
position: relative;
display: table;
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
@include clearfix;
}
&__first-item {
display: table-cell;
vertical-align: middle;
position: relative;
background-color: #888;
border: 1px solid white;
&:hover .menu-bottom__additional-holder {
display: block;
}
&.is-additional {
position: relative;
}
}
&__first-link {
@include menu-bottom__link;
display: block;
padding: 10px 15px;
color: white;
&:hover, &:visited:hover {
color: white;
}
}
&__fourth-holder {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 100%;
min-width: 250px;
background-color: #ddd;
}
&__fourth-level {
}
&__fourth-item {
}
&__fourth-link {
@include menu-bottom__link_bg;
display: block;
padding: 10px 15px;
background-color: #ccc;
border: 1px solid white;
}
&__additional-holder {
display: none;
position: absolute;
top: 100%;
z-index: 1001;
width: 100%;
min-width: 150px;
}
&__additional-level {
margin: 0;
padding: 0;
list-style: none;
}
&__additional-item {
position: relative;
}
&__additional-link {
display: block;
padding: 10px 15px;
background-color: #888;
border: 1px solid white;
color: white;
@include menu-bottom__link;
}
&__more-link {
display: none;
font-size: 90%;
cursor: pointer;
&:hover {
text-decoration: underline;
}
&.is-active {
display: inline;
}
}
&__less-link {
display: none;
font-size: 90%;
cursor: pointer;
&:hover {
text-decoration: underline;
}
&.is-active {
display: inline;
}
}
}
.menu-footer {
@include columnizer(5);
margin-left: 0;
&__holder {
@include clearfix;
}
&__first {
text-transform: uppercase;
&:first-child {
margin-left: 0;
}
}
&__second {
text-transform: none;
& .menu-footer__item {
margin: 5px 0;
clear: both;
& .menu-footer__link {
color: #999999;
font-size: 0.9em;
font-weight: normal;
}
}
}
&__item {
margin: 0 0 20px 0;
}
&__item.more {
display: none;
}
&__link {
font-weight: bold;
color: white;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&.z-style {
& .menu-footer__first .menu-footer__item {
@include columnizer(6);
}
& .menu-footer__first.two-columns {
& .menu-footer__item {
@include columnizer(6);
&:nth-child(2n+1) {
clear: both;
}
}
}
& .menu-footer__first.three-columns {
& .menu-footer__item {
@include columnizer(4);
&:nth-child(3n+1) {
clear: both;
}
}
}
}
&.i-style {
& .menu-footer__first {
margin-left: 0;
&.two-columns {
@include columnizer(6);
}
&.three-columns {
@include columnizer(4);
}
}
}
}
.menu-footer-list {
@include clearfix();
@include pbot(20/20);
&.home {
.menu-footer-list__first {
font-size: 12px;
}
}
&__item{
margin: 0 0 10px 0;
}
&__item.is-root {
}
&__item.is-child {
& .menu-footer-list__link {
color: #aaa;
font-size: $font-size-base;
font-weight: normal;
}
}
&__link {
font-weight:bold;
color: $color-white;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
// Состояние: 2 колонки
@mixin _state_2cols_list($mod:'') {
.menu-footer-list#{$mod} {
.menu-footer-list {
&__first{
@include columnizer(6);
}
}
}
}
@mixin _state_3cols_list($mod:'') {
.menu-footer-list#{$mod} {
.menu-footer-list {
&__first{
@include columnizer(4);
}
}
}
}
@mixin _state_4cols_list($mod:'') {
.menu-footer-list#{$mod} {
.menu-footer-list {
&__first{
@include columnizer(3);
}
}
}
}
@mixin _state_5cols_list($mod:'') {
.menu-footer-list#{$mod} {
.menu-footer-list {
&__first{
@include columnizer(2.4);
}
}
}
}
@mixin _state_6cols_list($mod:'') {
.menu-footer-list#{$mod} {
.menu-footer-list {
&__first{
@include columnizer(2);
}
}
}
}
@include _state_2cols_list('.is-2cols');
@include _state_3cols_list('.is-3cols');
@include _state_4cols_list('.is-4cols');
@include _state_5cols_list('.is-5cols');
@include _state_6cols_list('.is-6cols');
@mixin menu-top__link() {
position: relative;
text-decoration: none;
color: white;
&:visited {
color: white;
}
&:hover, &:visited:hover {
text-decoration: underline;
color: white;
}
}
@mixin menu-top__link_bg() {
position: relative;
text-decoration: none;
color: #333333;
&:visited {
color: #333333;
}
&:hover, &:visited:hover {
background-color: #bbb;
color: #333333;
}
}
.menu-top {
&__plate {
}
&.home {
display: inline-block;
vertical-align: middle;
width: 100%;
float: none;
&:after {
content: '';
display: inline-block;
height: 73px;
width: 1px;
vertical-align: middle;
}
.menu-top {
&__plate {
width: 98%;
float: none;
display: inline-block;
vertical-align: middle;
}
&__first-item{
border: none;
background-color: inherit;
position: static;
}
&__first-link {
//color: $background;//#333;
font-size: 17px;
transition: color .25s;
//font-weight: bold;
&:hover {
color: $accent;//inherit;
text-decoration: none;
}
}
&__first-level {
position: static;
}
&__second-holder {
left: 0;
top: 115%;
background-color: #fff;
//padding-bottom: 100px;//20%;
//overflow-y: scroll;
//max-height: 600px;
}
&__second-level {
@extend .content-center;
@extend .clearme;
display: flex;
flex-wrap: wrap;
padding-bottom: 95px;
&-wrap{
max-height: 100vh;
overflow-y: auto;
}
}
&__second-link {
border: none;
}
&__second-item {
@include columnizer(4);
//padding: 2% 2% 2% 0;
padding-top: 25px;
padding-left: 0;
padding-right: 25px;
padding-bottom: 25px;
display: inline-block;
width: calc(100%/4.5);
border-top: 1px solid silver;
&:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4){
border-top: 1px solid transparent;
}
margin-bottom: 15px;
&-no-catalog {
@include columnizer(4);
//padding: 2% 2% 2% 0;
padding-top: 25px;
padding-left: 0;
padding-right: 25px;
padding-bottom: 25px;
display: inline-block;
width: calc(100%/4.5);
font-size: 16px;
font-weight: bold;
text-align: left;
a{
color: $background;
text-decoration: none !important;
transition: color .25s;
&:hover{
color: $accent-hover;
}
}
}
}
&__container-img {
text-align: left;
height: 80px;
//width: 25%;
//float: left;
}
&__container-section {
//float: left;
width: 100%;
margin-left: 0;//20px;
margin-top: 20px;
word-wrap: break-word;
text-align: left;
}
&__main-section {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
a{
text-decoration: none;
color: $background;
transition: color .25s;
&:hover{
color: $accent-hover;
}
}
}
&__img-main {
//max-width: 100%;
width:auto;
height:100%;
vertical-align: top;
}
}
}
&__first-level {
position: relative;
display: table;
//float: right;
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
@include clearfix;
text-align: right;
}
&__first-item {
display: table-cell;
vertical-align: middle;
position: relative;
background-color: #888;
border: 1px solid white;
&:hover .menu-top__second-holder,
&:hover .menu-top__additional-holder {
//display: block;
}
&.is-additional {
position: relative;
}
}
&__first-link {
@include menu-top__link;
display: block;
padding: 10px 15px;
color: #041e41;
&:visited {
color: #041e41;
}
&.is-catalog {
padding-left: 25px;
&:before {
@include fa-icon($fa-var-bars, true);
position: absolute;
left: 5px;
top: 50%;
margin-top: -.55em;
}
}
}
&__second-holder {
display: none;
position: absolute;
top: 100%;
z-index: 1001;
width: 100%;
min-width: 250px;
box-sizing: border-box;
}
&__second-level {
margin: 0;
padding: 0;
list-style: none;
}
&__second-item {
position: relative;
&:hover .menu-top__third-holder {
//display: block;
}
&.is-contain {
.menu-top__second-link {
position: relative;
&:before {
content: "\2026";
float: right;
padding-left: 0.5em;
}
}
}
}
&__second-link {
display: block;
padding: 10px 15px;
background-color: #ccc;
border: 1px solid white;
@include menu-top__link_bg;
}
&__third-holder {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 100%;
min-width: 250px;
}
&__third-level {
}
&__third-item {
position: relative;
margin: 5px 0;
&:hover .menu-top__fourth-holder {
display: block;
}
&.is-hide {
display: none;
}
a{
color: #333;
transition: color .25s;
text-decoration: none;
&:hover{
color: $accent-hover;
}
}
}
&__third-link {
@include menu-top__link_bg;
display: block;
padding: 10px 15px;
background-color: #ccc;
border: 1px solid white;
}
&__fourth-holder {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 100%;
min-width: 250px;
background-color: #ddd;
}
&__fourth-level {
}
&__fourth-item {
}
&__fourth-link {
@include menu-top__link_bg;
display: block;
padding: 10px 15px;
background-color: #ccc;
border: 1px solid white;
}
&__additional-holder {
display: none;
position: absolute;
top: 100%;
z-index: 1001;
width: 100%;
min-width: 150px;
}
&__additional-level {
margin: 0;
padding: 0;
list-style: none;
}
&__additional-item {
position: relative;
&:hover .menu-top__third-holder {
display: block;
}
}
&__additional-link {
display: block;
padding: 10px 15px;
background-color: #888;
border: 1px solid white;
color: white;
@include menu-top__link;
}
&__more-link {
display: none;
font-size: 90%;
cursor: pointer;
&:hover {
text-decoration: underline;
}
&.is-active {
display: inline;
}
}
&__less-link {
display: none;
font-size: 90%;
cursor: pointer;
&:hover {
text-decoration: underline;
}
&.is-active {
display: inline;
}
}
&__first-item.is-opened,
&__second-item.is-opened,
&__third-item.is-opened {
&:after {
transform: rotate(90deg);
}
}
}
// Состояние Z
@mixin _state_z($mod: '') {
.menu-top#{$mod} {
.menu-top {
&__first-item {
position: static;
&.is-additional {
position: relative;
}
}
&__second-holder {
left: 0;
right: 0;
padding: 20px;
background-color: #eee;
}
&__second-level {
@include columnizerParent;
margin-top: - getcolumnmargin();
}
&__second-item {
position: relative;
@include columnizer(4);
margin-top: getcolumnmargin();
&:nth-child(3n+1) {
clear: left;
}
&.is-contain .menu-top__second-link:before {
content: none;
}
}
&__second-link {
display: inline;
background: none;
border: none;
padding: 0;
font-weight: bold;
@include menu-top__link;
color: #333333;
&:hover, &:visited, &:visited:hover {
color: #333333;
}
}
&__third-holder {
display: block;
position: static;
left: 100%;
top: 0;
width: 100%;
min-width: 0;
@include margin(20/20);
}
&__third-item {
@include margin(5/20);
}
&__third-link {
display: inline;
background: none;
border: none;
padding: 0;
}
}
}
}
// Состояние И
@mixin _state_i($mod: '') {
.menu-top#{$mod} {
.menu-top {
&__first-item {
position: static;
&.is-additional {
position: relative;
}
}
&__second-holder {
left: 0;
right: 0;
padding: 20px;
background-color: #eee;
@include clearfix();
}
&__second-level {
float: left;
width: (1/3)*100%;
box-sizing: border-box;
padding-left: 15px;
padding-right: 15px;
}
&__second-item {
@include margin(10/20);
&.is-contain .menu-top__second-link:before {
content: none;
}
}
&__second-link {
display: inline;
background: none;
border: none;
padding: 0;
font-weight: bold;
@include menu-top__link;
color: #333333;
&:hover, &:visited, &:visited:hover {
color: #333333;
}
}
&__third-holder {
display: block;
position: static;
left: 100%;
top: 0;
width: 100%;
min-width: 0;
@include margin(10/20);
padding-bottom: 10px;
}
&__third-item {
@include margin(5/20);
}
&__third-link {
display: inline;
background: none;
border: none;
padding: 0;
}
}
}
}
@include _state_i('.is-i-state');
@include _state_z('.is-z-state');
@media screen and (max-width: 992px) {
.menu-top {
&.home {
.menu-top {
&__first-link{
font-size: 12px;
}
}
}
}
}
body{
&.menu-opened{
overflow: hidden;
&:before{
content: '';
display: block;
position: absolute;
top: 300px;
left: 0;
height:100%;
width: 100%;
background-color: rgba(#000, .75);
z-index: 100;
}
}
}
@mixin menu-tree__link() {
position: relative;
text-decoration: none;
vertical-align: top;
padding-right: 20px;
&:hover {
text-decoration: underline;
}
}
.menu-tree {
a {
color: $color-text;
}
&__plate {
@include the-plate();
padding-right: 40px;
}
&__first-level {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
&__first-item {
position: relative;
@include margin(20/20);
&.is-contain:after {
margin: -7px;
font-size: 14px;
}
}
&__first-link {
@include menu-tree__link;
font-size: 14/14*100%;
font-weight: bold;
}
&__second-holder {
padding-left: 20px;
}
&__second-level {
margin: 0;
padding: 0;
list-style: none;
}
&__second-item {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
&.is-contain:after {
margin: -6px;
font-size: 12px;
}
}
&__second-link {
@include menu-tree__link;
font-weight: bold;
}
&__third-holder {
padding-left: 20px;
}
&__third-level {
}
&__third-item {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
&.is-contain:after {
margin: -5px;
font-size: 10px;
}
}
&__third-link {
@include menu-tree__link;
}
&__fourth-holder {
padding-left: 20px;
}
&__fourth-level {
margin-top: 10px;
}
&__fourth-item {
@include mbot(10/20);
}
&__fourth-link {
@include menu-tree__link;
font-size: 12/14*100%;
}
&.is-expandable {
.menu-tree__first-item,
.menu-tree__second-item,
.menu-tree__third-item {
&.is-contain:after {
@include fa-icon($fa-var-angle-right, true);
font-size: 150%;
position: absolute;
top: 0.1em;
right: -10px;
cursor: pointer;
}
}
}
&__first-item.is-opened,
&__second-item.is-opened,
&__third-item.is-opened {
&:after {
transform: rotate(90deg);
}
}
& .is-active > a {
text-decoration: underline;
font-size: 1.1em;
font-weight: bold;
}
&__show-all {
&-link {
cursor: pointer;
}
}
&__first-level,
&__second-level {
.menu-tree__show-all-link {
font-weight: bold;
}
}
&__third-level,
&__fourth-level {
.menu-tree__show-all-link {
font-weight: normal;
}
}
}
.menu-tree.is-simple {
.menu-tree{
&__first-item,
&__second-item,
&__third-item {
&.is-contain:after {
content: none;
}
}
}
}
.news-calendar {
&__caption {
font-size: 125%;
font-weight: bold;
@include mbot(30/20);
}
&__header {
display: table;
width: 100%;
@include box-sizing;
}
&__calendar {
@include mtop(10/20);
@include mbot(20/20);
}
&__field {
display: block;
}
&__field-label {
@include mbot(5/20);
font-size: 14/16*100%;
font-weight: 200;
color: #262626;
}
.ui-datepicker {
width: 100%;
padding: 0;
border: 1px solid #dfdfdf;
.ui-datepicker-header {
background-color: #ddd;
}
.ui-datepicker-calendar {
text-align: center;
}
.ui-datepicker-prev {
text-align: center;
@include fa-icon($fa-var-chevron-left);
color: #333333;
&:before {
position: absolute;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -7px;
cursor: pointer;
}
&:hover {
color: #333333;
}
}
.ui-datepicker-next {
text-align: center;
@include fa-icon($fa-var-chevron-right);
color: #333333;
&:before {
position: absolute;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -7px;
cursor: pointer;
}
&:hover {
color: #333333;
}
}
td {
padding:2% 1%;
}
td span, td a {
margin-left: auto;
margin-right: auto;
text-align: center;
}
td span {
color: #bfbfbf;
}
td a {
color: #333;
transition: .2s color, .2s background-color;
&:hover {
background-color: #3e8bdc;
color: white;
}
&.ui-state-active {
background-color: #3e8bdc;
color: white;
}
}
.ui-datepicker-today a{
background-color: #f1f1f1;
}
}
}
.news-detail {
&__title {
font-size: 150%;
font-weight: bold;
@include mbot(10/20);
}
&__image-holder {
//padding: 5px;
//border: 1px solid #f2f2f2;
@include margin(10/20);
//border-radius: 5px;
}
&__main-image {
max-width: 100%;
height: auto;
display: block;
}
&__date {
font-style: italic;
@include margin(10/20);
}
&__content {
@include margin(20/20);
}
&__back-holder {
@include margin(20/20);
}
&__back {
text-decoration: none;
&:before {
content: '←';
margin-right: .5em;
}
}
}
.news-item {
@include clearfix();
&__date {
@include mbot(.25);
font-size: 12/14*100%;
font-style: italic;
color: #999999;
}
&__title {
@include mbot(.5);
line-height: 1.25;
font-size: 18/14*100%;
font-weight: 700;
}
&__link {
}
&__content {
overflow: hidden;
}
&__img {
float: left;
margin-right: 20px;
}
@media #{$media-phone} {
&__img {
width: 60px;
height: auto;
margin-right: 15px;
}
}
}
.news-list {
&__item {
@include mtop(2);
}
@media #{$media-phone-landscape} {
&__item {
@include mtop(1.5);
}
}
}
.news-main {
&__items {
@include columnizerParent;
}
&__item {
@include columnizer(3);
margin-bottom: 30px;
&:nth-child(2) {
//height: 260px;
}
&.is-fullwidth {
@include columnizer(9);
.news-main__title {
font-size: 40px;
line-height: 1;
//font-weight: bold;
}
.news-main__wrap-img {
overflow: hidden;
height: auto;//415px;
}
.news-main__wrap-text {
p {
font-size: 16px;
line-height: 25px;
}
}
}
&-img {
display: block;
width: 100%;
height: auto;
transform: scale(1);
transition: all 0.5s;
}
&:hover{
.news-main {
&__item {
&-img{
transform: scale(1.1);
opacity: .8;
}
}
}
}
}
&__wrap-img {
display: block;
margin-bottom: 2.5%;
overflow: hidden;
height: 125px;
}
&__wrap-text {
p {
font-size: 16px;
line-height: 25px;
}
}
&__title {
font-size: 26px;
margin-bottom: 10px;
font-family:$helveticaLight;
line-height: 1;
a {
color: $background;//#333;
text-decoration: none;
transition: color .25s;
&:hover{
color: $accent;
}
}
}
}
@media screen and (max-width: 992px) {
.news-main{
&__item{
width: 30.33%;
&.is-fullwidth {
width: 97.5%;
}
}
}
}
@media #{$media-phone} {
.news-main{
&__item{
width: 97.5%;
}
}
}
.offer-tiles {
a {
color: inherit;
}
&__title {
@include mbot(40/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__items {
@include columnizerParent;
}
&__item {
@include columnizer(3);
@include adaptiveMarginBottom;
min-height: 300px;
&.is-fullwidth {
@include columnizer(12);
}
&.is-2cols {
@include columnizer(6);
}
&.is-3cols {
@include columnizer(4);
}
&.is-4cols {
@include columnizer(3);
}
&.is-dark {
color: white;
.offer-tiles__discount {
background-color: black;
}
}
&.is-fullwidth {
.offer-tiles__content {
padding: 10% 5%;
text-align: left;
}
}
}
&__item-link {
position: relative;
display: block;
text-decoration: none;
}
&__img {
display: block;
max-width: 100%;
}
&__img-vertical {
display: none;
max-width: 100%;
}
&__content-wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
&__content {
position: relative;
display: block;
padding: 35% 5%;
text-align: center;
}
&__discount {
position: absolute;
top: 10px;
left: 10px;
font-size: 18/14*100%;
font-weight: bold;
width: 50px;
height: 50px;
background-color: #fff;
text-align: center;
line-height: 50px;
border-radius: 50%;
text-indent: 5px;
}
&__heading {
@include mbot(20/20);
display: block;
font-size: 20/14*100%;
font-weight: bold;
}
&__description {
display: block;
font-size: 18/14*100%;
}
@media #{$media-phone-landscape} {
&__item {
@include columnizer(6);
min-height: 0;
&.is-2cols {
@include columnizer(6);
}
&.is-3cols {
@include columnizer(6);
}
&.is-4cols {
@include columnizer(6);
}
}
}
@media #{$media-phone} {
&__item {
@include columnizer(12);
&.is-fullwidth {
@include columnizer(12);
.offer-tiles__img {
display: none;
}
.offer-tiles__img-vertical {
display: block;
}
.offer-tiles__content {
padding: 35% 5%;
text-align: center;
}
}
&.is-2cols {
@include columnizer(12);
}
&.is-3cols {
@include columnizer(12);
}
&.is-4cols {
@include columnizer(12);
}
}
}
}
.no-found {
@include columnizerParent;
&__holder {
@include columnizerOffset(4);
text-align: center;
}
&__title {
@include mtop(0.5);
}
&__404 {
font-size: 1200%;
line-height: 1;
@include mtop(0.5);
}
&__description {
@include mtop(0.5);
}
&__addition-text {
@include mtop(0.5);
}
@media #{$media-phone-landscape} {
margin-left: 0;
&__holder {
margin-left: 0;
float: none;
}
}
}
.personal-info {
&__plate {
padding: 20px;
background-color: #eee;
}
&__cols {
@include columnizerParent;
}
&__col {
@include columnizer(6);
}
&__item {
@include margin(10/20);
}
&__label {
font-weight: bold;
&.is-block {
display: block;
@include margin(5/20);
}
}
&__delivery {
@include mbot(25/20);
line-height: 180%;
}
&__comment {
line-height: 180%;
}
}
.order-detail {
@include clearfix;
padding: 20px 0;
border-top: 1px solid #C6C6C6;
&__text-wrap {
width: 500px;
text-align: center;
@include mbot(40/20);
margin-left: auto;
margin-right: auto;
@include clearfix;
}
&__smile {
position: relative;
display: block;
font-size: 49/14*100%;
@include fa-icon($fa-var-smile-o);
}
&__title {
font-size: 28/14*100%;
font-weight: 700;
@include mbot(20/20);
}
&__text {
@include mbot(20/20);
}
&__cols {
@include columnizerParent;
}
&__info {
@include columnizer(9);
}
&__sidebar {
@include columnizer(3);
}
&__left-col {
@include columnizer(3);
}
&__head {
@include mbot(15/20);
@include clearfix;
}
&__caption {
font-size: 28/14*100%;
float: left;
@include margin(10/20);
}
&__status {
clear: left;
@include margin(20/20);
}
&__status-val {
display: inline-block;
padding: 5px 10px;
background-color: #eee;
}
&__print {
@include fa-icon($fa-var-print);
&::before {
margin-right: 5px;
}
}
&__pay {
@include fa-icon($fa-var-credit-card);
margin-left: .5em;
&::before {
margin-right: 5px;
}
}
&__cancel{
margin-left: .5em;
}
&__billing {
@include margin(20/20);
}
&__connect {
padding-bottom: 20px;
border-bottom: 1px solid #C6C6C6;
text-align: center;
}
&__rating {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #C6C6C6;
text-align: center;
}
&__subscribe {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #C6C6C6;
//text-align: center;
.subscribe-widget__description {
text-align: center;
}
}
&__share {
padding-top: 20px;
text-align: center;
}
&__header-btns {
float: right;
padding-top: 5px;
}
@media #{$media-phone-landscape} {
&__header-btns {
float: none;
clear: left;
padding-top: 0;
@include margin;
margin-left: -0.5em;
}
&__print {
display: none;
}
&__order-preview {
overflow-x: scroll;
}
&__text-wrap {
width: auto;
@include mbot(1);
}
&__cols {
margin-left: 0;
}
&__info, &__sidebar {
width: auto;
float: none;
margin-left: 0;
@include margin;
}
}
}
@mixin _state_top($mod:'') {
.order-detail#{$mod} {
padding-top: 0px;
border-top: none;
.order-detail {
&__status {
margin-top: 0px;
}
}
}
}
@include _state_top('.is-top');
.order-list {
&__table {
display: table;
width: 100%;
border-collapse: collapse;
}
&__main-column1 {
display: table-column;
width: 35%;
}
&__main-column2 {
display: table-column;
width: 15%;
}
&__main-column3 {
display: table-column;
width: 15%;
}
&__main-column4 {
display: table-column;
width: 15%;
}
&__main-column5 {
display: table-column;
width: 15%;
}
&__table-header {
display: table-header-group;
}
&__table-headings {
display: table-row;
}
&__table-row {
display: table-row;
}
&__table-cell {
display: table-cell;
padding: 10px 0;
border-bottom: 1px solid #B5B5B5;
vertical-align: middle;
text-align: center;
&:first-of-type {
text-align: left;
}
}
&__table-order {
@include clearfix;
}
&__table-thumb {
float: left;
width: 25%;
margin-right: 5%;
}
&__thumb-link {
display: inline-block;
padding: 3px;
border-radius: 4px;
border: 1px solid #D9D9D9;
vertical-align: top;
}
&__thumb-img {
display: block;
max-width: 100%;
}
&__table-product {
float: left;
width: 70%;
}
&__table-category {
display: block;
text-decoration: none;
}
&__table-name {
display: block;
text-decoration: none;
}
&__table-footer {
display: table;
width: 100%;
border-collapse: collapse;
}
&__footer-column1 {
display: table-column;
width: 79%;
}
&__footer-column2 {
display: table-column;
width: 15%;
}
&__table-down {
display: table-cell;
padding: 10px 0;
border-bottom: 1px solid #B5B5B5;
font-size: 16/14*100%;
font-weight: bold;
&:last-of-type {
padding-right: 5%;
text-align: right;
}
}
&__table-result {
display: table-footer-group;
.order-detail__table-down {
border-bottom: none;
}
}
}
.order-preview {
&__table {
display: table;
width: 100%;
box-sizing: border-box;
}
&__table-row {
display: table-row;
}
&__img-header {
display: table-cell;
@include thin-border-bottom();
padding-bottom: 5px;
width: 100px;
}
&__name-header {
display: table-cell;
vertical-align: top;
padding-bottom: 5px;
@include thin-border-bottom();
}
&__articul-header {
display: table-cell;
vertical-align: top;
text-align: center;
@include thin-border-bottom();
max-width: 100px;
}
&__price-header {
display: table-cell;
vertical-align: top;
text-align: center;
@include thin-border-bottom();
max-width: 100px;
}
&__qtty-header {
display: table-cell;
vertical-align: top;
text-align: center;
@include thin-border-bottom();
max-width: 100px;
}
&__cost-header {
display: table-cell;
vertical-align: top;
text-align: center;
@include thin-border-bottom();
max-width: 100px;
}
&__image-col {
display: table-cell;
vertical-align: top;
@include thin-border-bottom();
padding: 5px;
}
&__name-col {
display: table-cell;
vertical-align: top;
@include thin-border-bottom();
padding: 5px;
}
&__articul-col {
display: table-cell;
vertical-align: middle;
@include thin-border-bottom();
padding: 5px;
text-align: center;
}
&__price-col {
display: table-cell;
vertical-align: middle;
@include thin-border-bottom();
padding: 5px;
text-align: right;
}
&__qtty-col {
display: table-cell;
vertical-align: middle;
@include thin-border-bottom();
padding: 5px;
text-align: center;
}
&__cost-col {
display: table-cell;
vertical-align: middle;
@include thin-border-bottom();
padding: 5px;
text-align: right;
}
&__footer {
display: table-footer-group;
}
&__footer-row {
display: table-row;
}
&__subtotal-label {
display: table-cell;
@include thin-border-bottom();
padding: 5px;
font-weight: bold;
}
&__subtotal-val{
display: table-cell;
@include thin-border-bottom();
padding: 5px;
text-align: right;
font-weight: bold;
}
&__total-label-col {
display: table-cell;
@include thin-border-bottom();
padding: 5px;
font-weight: bold;
font-size: 125%;
}
&__total-val-col {
display: table-cell;
@include thin-border-bottom();
padding: 5px;
text-align: right;
font-size: 125%;
font-weight: bold;
}
&__thumb-img {
max-width: 100%;
height: auto;
vertical-align: top;
}
&__thumb-link {
display: inline-block;
box-sizing: border-box;
}
&__category-link {
font-style: italic;
font-size: 12/14*100%;
text-decoration: none;
color: #999999;
&:hover {
text-decoration: underline;
}
}
&__name-link {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
@media #{$media-phone} {
min-width: 600px;
&__image-col,
&__img-header {
display: none;
}
&__name-col,
&__subtotal-label,
&__total-label-col {
padding-left: 0;
}
}
}
.orders-list {
&__title {
@include mbot(20/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__category {
@include margin(40/20);
}
&__subtitle {
@include mbot(20/20);
font-size: 24/14*100%;
font-weight: bold;
}
&__items {
display: table;
width: 100%;
box-sizing: border-box;
}
&__item {
display: table-row;
}
&__id {
display: table-cell;
padding: 15px 0;
font-weight: bold;
}
&__status {
display: table-cell;
width: 200px;
padding-left: 15px;
padding-right: 15px;
white-space: nowrap;
}
&__detail {
width: 100px;
display: table-cell;
}
&__status-title {
display: inline-block;
margin-right: 8px;
vertical-align: middle;
}
&__status-value {
display: inline-block;
padding: 5px 10px;
vertical-align: middle;
border: 1px solid gray;
&.is-waiting {
background-color: #F0F0F0;
border-color: #F0F0F0;
}
&.is-complete {
background-color: #C6FF90;
border-color: #C6FF90;
}
}
&__more {
@include margin;
}
&__more-link {
color: $color-link;
&:hover {
color: $color-link-hover;
}
}
@media #{$media-phone-landscape} {
&__status {
width: auto;
}
&__detail {
display: none;
}
}
@media #{$media-phone} {
&__items,
&__item,
&__id,
&__contains,
&__status {
display: block;
width: auto;
border: none;
padding: 0;
}
&__id, &__contains, &__status {
@include margin(0.25);
}
&__item {
padding-bottom: 10px;
@include thin-border-bottom;
@include mtop(0.5);
}
}
}
.orders-list2 {
&__filter-list{
margin-left: -10px;
}
&__filter-item {
display: inline-block;
margin: 0 10px;
}
&__filter-link.is-active{
font-weight: bold;
}
&__item {
@include mbot(20/20);
padding-bottom: 30px;
border-bottom: 1px solid grey;
&:last-of-type {
border-bottom: none;
}
}
&__head {
display: table;
box-sizing: border-box;
width: 100%;
}
&__head-content {
display: table-row;
}
&__head-cell {
display: table-cell;
padding: 15px 10px;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
&__head-id {
width: 30%;
}
&__order-id {
font-size: 16/14*100%;
text-decoration: underline;
font-weight: bold;
}
&__head-info {
width: 50%;
}
&__head-btn {
width: 20%;
text-align: right;
}
&__order-btn {
text-align: center;
}
&__orders {
@include mbot(30/20);
}
&__product {
display: table;
box-sizing: border-box;
width: 100%;
}
&__product-content {
display: table-row;
}
&__product-cell {
display: table-cell;
padding: 15px 10px;
border-bottom: 1px solid lightgrey;
vertical-align: middle;
}
&__thumb {
width: 15%;
text-align: center;
}
&__thumb-link {
display: inline-block;
vertical-align: top;
}
&__thumb-img {
display: block;
max-width: 100%;
}
&__name {
width: 30%;
}
&__name-title {
@include mbot(10/20);
}
&__name-link {
font-size: 16/14*100%;
text-decoration: underline;
font-weight: bold;
&:hover {
text-decoration: none;
}
}
&__amount {
width: 15%;
}
&__price {
width: 20%;
}
&__price-value {
font-size: 15/14*100%;
font-weight: bold;
}
&__price-title {
@include mbot(10/20);
font-size: 15/14*100%;
font-weight: bold;
}
&__price-sum{
width: 20%;
}
&__file-link {
@include fa-icon($fa-var-file-text-o);
&:before {
margin-right: .5em;
font-size: 20/14*100%;
}
}
&__result {
display: table;
box-sizing: border-box;
width: 100%;
}
&__result-content {
display: table-row;
}
&__result-cell {
display: table-cell;
vertical-align: middle;
}
&__detail {
width: 60%;
}
&__detail-sum {
@include mbot(10/20);
font-weight: bold;
}
&__detail-delivery {
@include mbot(5/20);
}
&__shipping-label {
font-weight: bold;
}
&__detail-pay {
@include mbot(5/20);
}
&__payment-label {
font-weight: bold;
}
&__total {
width: 40%;
text-align: right;
}
&__total-price {
font-weight: bold;
}
&__total-label {
font-size: 16/14*100%;
}
&__total-sum {
font-size: 24/14*100%;
}
@media #{$media-phone-landscape} {
&__head,
&__head-content,
&__head-cell,
&__product,
&__product-content,
&__product-cell,
&__result,
&__result-content,
&__result-cell {
display: block;
width: auto;
margin: 0;
padding: 0;
text-align: left;
border: none;
}
&__item {
padding-bottom: 20px;
&:last-child {
padding-bottom: 0;
}
}
&__head-id,
&__head-info,
&__head-btn {
@include margin(0.5);
}
&__orders {
@include margin;
}
&__product {
@include margin;
}
&__thumb {
width: 100px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
&__name {
overflow: hidden;
margin-bottom: 10px;
}
&__price {
clear: left;
}
&__price,
&__amount,
&__price-sum {
width: 33%;
float: left;
}
&__product-content {
@include clearfix();
@include thin-border-bottom;
padding-bottom: 10px;
}
&__amount {
text-align: center;
}
&__price-sum {
text-align: right;
width: 34%;
}
}
}
// Пагинатор
.paginator {
&__list {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
&__item {
display: inline-block;
margin: 0;
margin-right: .5em;
&:last-child {
margin-right: 0;
}
}
&__item-link {
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
color: $background;
&:hover {
background: rgba($accent, .2);
color: $background;
}
}
&__current {
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
background-color: $accent;
color: #fff;
}
&__prev {
display: inline-block;
margin: 0;
margin-right: .5em;
&.is-disabled {
color: #ccc;
.paginator__prev-link {
text-decoration: none;
color: #ccc;
}
}
}
&__prev-link {
display: inline-block;
padding: 5px 10px;
text-decoration: none;
border-radius: 5px;
color: $background;
&:before {
content: '←';
margin-right: 5px;
}
&:hover {
text-decoration: underline;
color: lighten($background, 15%);
}
}
&__next {
@include inline-block;
margin: 0;
margin-left: 5px;
&.is-disabled {
color: #ccc;
.paginator__next-link {
text-decoration: none;
color: #ccc;
}
}
}
&__next-link {
display: inline-block;
padding: 5px 10px;
text-decoration: none;
border-radius: 5px;
color: $background;
&:after {
content: '→';
margin-left: 5px;
}
&:hover {
text-decoration: underline;
color: lighten($background, 15%);
}
}
@media #{$media-phone} {
&__item-link {
padding: 5px 5px;
font-size: 90%;
}
&__prev {
width: 2em;
overflow-x: hidden;
white-space: nowrap;
vertical-align: middle;
}
&__next {
width: 2em;
white-space: nowrap;
overflow-x: hidden;
vertical-align: middle;
}
&__next-link {
float: right;
}
}
}
.personal-info {
&__plate {
padding: 20px 30px 30px;
background-color: #eee;
}
&__cols {
@include columnizerParent;
}
&__col {
@include columnizer(6);
overflow-x: hidden;
}
&__caption {
@include mbot(30/20);
font-size: 24/14*100%;
font-weight: bold;
}
&__item {
@include margin(10/20);
}
&__label {
font-weight: bold;
&.is-block {
display: block;
@include margin(5/20);
}
}
&__delivery {
@include mbot(25/20);
line-height: 180%;
}
&__comment {
line-height: 180%;
}
&__change {
@include margin(20/20);
}
@media #{$media-phone-landscape} {
&__plate {
padding-left: 15px;
padding-right: 15px;
border-left: none;
border-right: none;
}
&__cols {
@include columnizerParent(4);
}
&__col {
@include columnizer(2,4);
}
}
@media #{$media-phone} {
&__cols {
margin-left: 0;
}
&__col {
float: none;
margin-left: 0;
width: auto;
@include margin;
}
}
}
.photoalbims-slider {
&__image {
width: 100%;
height: auto;
vertical-align: top;
}
&__main {
position: relative;
@include margin(20/20);
}
&__thumbnails {
position: relative;
@include margin(20/20);
}
&__thumbs-next {
position: absolute;
right: -20px;
top: 50%;
height: 20px;
margin-top: -8px;
z-index: 2;
cursor: pointer;
&:before {
@include fa-icon($fa-var-chevron-right, true);
font-size: 16px;
line-height: 20px;
}
}
&__thumbs-prev {
position: absolute;
left: -20px;
top: 50%;
height: 20px;
margin-top: -8px;
z-index: 2;
cursor: pointer;
&:before {
@include fa-icon($fa-var-chevron-left, true);
font-size: 16px;
line-height: 20px;
}
}
&__thumbnails-items {
margin-left: -10px;
margin-right: -8px;
}
&__slider-wrap {
overflow-x: hidden;
// padding-bottom: 1px;
}
&__thumbnails-item {
padding-left: 10px;
padding-right: 10px;
@include box-sizing;
cursor: pointer;
}
&__image {
border: 1px solid gray;
padding: 5px;
@include box-sizing;
}
}
.photogallery-plates {
&__grid {
@include columnizerParent;
}
&__item {
@include columnizer(4);
@include adaptiveMarginBottom;
}
&__img-link {
display: block;
}
&__img {
display: block;
max-width: 100%;
}
&__template{
display: none;
}
&__holder{
@include ptop(1);
@include pbot(1);
//color: #000;
}
&__title{
@include mbot(1);
font-family: $font-base;
font-size: 24/12*100%;
}
&__description{
font-size: 16/12*100%;
line-height: (20/16);
}
}
.photogallery-sections {
&__caption {
@include mtop(3);
@include mbot(2.5);
font-family: $font-base;
font-size: 30/12*100%;
line-height: (41/30);
font-weight: 700;
}
&__img {
max-width: 100%;
height: auto;
vertical-align: top;
border-radius: 5px;
}
&__img-holder {
text-align: center;
@include mbot(10/20);
}
&__content-holder {
padding-left: 10px;
padding-right: 10px;
}
&__name {
font-weight: 700;
}
&__job {
font-style: italic;
}
&__items {
list-style: none;
margin: 0;
padding: 0;
@include columnizerParent(12);
position: static;
margin-top: - getcolumnmargin(12);
}
&__item {
margin: 0;
margin-top: getcolumnmargin(12);
@include columnizer(3, 12);
&:nth-child(4n+1) {
clear: left;
}
}
@media #{$media-phone-landscape} {
&__items {
margin-top: - $bm;
}
&__item {
@include columnizer(4, 12);
margin-top: $bm;
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__item {
@include columnizer(6, 12);
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
// Состояниe: 3 колонки
@mixin _state_3cols($mod:'') {
.photogallery-sections#{$mod} {
.photogallery-sections {
&__items {
@include columnizerParent(9);
}
&__item {
@include columnizer(3, 9);
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
}
}
// Состояние: 2 колонки
@mixin _state_2cols($mod:'') {
.photogallery-sections#{$mod} {
.photogallery-sections {
&__items {
@include columnizerParent(6);
margin-top: -getcolumnmargin(6);
}
&__item {
@include columnizer(3, 6);
margin-top: getcolumnmargin(6);
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
}
// Состояние: 1 колонка
@mixin _state_1cols($mod:'') {
.photogallery-sections#{$mod} {
.photogallery-sections {
&__items {
margin-left: 0;
margin-top: 0;
}
&__item {
float: none;
width: auto;
margin-left: 0;
@include margin(20/20);
}
}
}
}
@include _state_3cols('.is-3cols');
@include _state_2cols('.is-2cols');
@include _state_1cols('.is-1cols');
.photogallery-sections-slider {
box-sizing: border-box;
&__caption {
@include mtop(3);
@include mbot(2.5);
font-family: $font-base;
font-size: 30/12*100%;
line-height: (41/30);
font-weight: 700;
}
a {
color: inherit;
}
&__item {
//position: relative;
display: block;
box-sizing: border-box;
}
&__content {
position: relative;
display: block;
text-decoration: none;
color: inherit;
height: 450px;
}
&__bg-holder {
position: absolute;
overflow: hidden;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
background-size: cover;
background-position: center;
}
&__bg {
width: 100%;
height: auto;
min-height: 100%;
}
&__content-holder {
position: relative;
display: block;
z-index: 2;
padding-top: 15%;
}
&__title {
display: block;
@include mbot(90/20);
font-size: 30/14*100%;
font-weight: bold;
text-align: center;
}
&__subtitle {
display: block;
text-align: center;
font-size: 16/14*100%;
}
&__meta {
@include clearfix;
padding: 25px 35px;
background-color: #e5e5e5;
z-index: 5;
}
&__meta-col {
float: left;
width: getcolumnwidth(4);
margin-left: getcolumnmargin();
}
&__meta-item {
@include mbot(15/20);
}
&__arrows {
position: absolute;
top: 200px;
padding: 0 .3em;
border-radius: 50%;
line-height: 100%;
font-size: 50/14*100%;
font-weight: bold;
cursor: pointer;
}
&__arrow-left {
@include fa-icon($fa-var-angle-left);
left: 2%;
}
&__arrow-right {
@include fa-icon($fa-var-angle-right);
right: 2%;
}
&__pagination {
position: absolute;
width: 100%;
bottom: auto;
top: 400px;
left: 0;
text-align: center;
li {
position: relative;
display: inline-block;
margin: 0 5px;
border-radius: 50%;
width: 14px;
height: 14px;
vertical-align: top;
background-color: #fff;
border: 1px solid gray;
&.slick-active {
&:before {
content: '';
position: absolute;
left: 2px;
right: 2px;
top: 2px;
bottom: 2px;
border-radius: 50%;
background-color: gray;
}
}
}
button {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
width: 14px;
height: 14px;
font-size: 0;
background-color: transparent;
border: none;
}
li.slick-active .photogallery-sections-slider__page-btn {
background-color: #909090;
}
}
&__slider {
@include mobile-overflow(false);
}
@media #{$media-phone-landscape} {
&__meta {
padding: 15px 10px;
}
&__meta-col {
@include margin(0.75);
}
&__meta-col {
width: auto;
margin-left: 0;
float: none;
}
&__arrow-left {
left: 0;
}
&__arrow-right {
right: 0;
}
&__arrows {
position: absolute;
top: 380px;
}
}
}
.photogallery-with-thumbs {
margin-left: 0;
margin-right: 0;
position: relative;
//width: 300px;
&__image {
max-width: 100%;
vertical-align: top;
}
&__main {
position: relative;
@include margin(20/20);
}
&__thumbnails {
position: relative;
@include margin(20/20);
}
&__thumbs-next {
display: none;
position: absolute;
z-index: 2;
cursor: pointer;
right: 0;
background: white;
height: 100%;
top: 0;
margin-top: 0;
padding-left: 10px;
&:before {
@include fa-icon($fa-var-chevron-right, true);
font-size: 16px;
line-height: 20px;
vertical-align: middle;
}
&:after {
content: '';
display: inline-block;
height: 100%;
width: 1px;
vertical-align: middle;
}
.fancybox-inner & {
background: $color-popup-background;
}
&.slick-disabled {
visibility: hidden;
}
}
&__thumbs-prev {
display: none;
position: absolute;
z-index: 2;
cursor: pointer;
left: 0;
background: white;
height: 100%;
top: 0;
margin-top: 0;
padding-right: 10px;
&:before {
@include fa-icon($fa-var-chevron-left, true);
font-size: 16px;
line-height: 20px;
vertical-align: middle;
}
&:after {
content: '';
display: inline-block;
height: 100%;
width: 1px;
vertical-align: middle;
}
.fancybox-inner & {
background: $color-popup-background;
}
&.slick-disabled {
visibility: hidden;
}
}
&__thumbnails-items {
margin-left: -10px;
margin-right: -8px;
}
&__slider-wrap {
overflow-x: hidden;
}
&__thumbnails-item {
padding-left: 10px;
padding-right: 10px;
@include box-sizing;
cursor: pointer;
}
&__image {
@include box-sizing;
}
@media #{$media-phone-landscape} {
}
}
.plate-advantages {
box-sizing: border-box;
margin-bottom: 20px;
&__main-title {
font-size: 26px;
margin-bottom: 30px;
text-align: center;
}
&__items {
padding: 70px;
background-color: #e4e4e4;
}
&__item {
@include clearfix;
}
&__title {
font-size: 26px;
margin-bottom: 30px;
}
&__wrap-img {
width: 50%;
height: 290px;
float: right;
}
&__wrap-text {
float: left;
width: 40%;
}
&__arrows {
position: absolute;
top: 40%;
padding: 0 .3em;
border-radius: 50%;
line-height: 100%;
font-size: 50/14*100%;
font-weight: bold;
cursor: pointer;
}
&__arrow-left {
@include fa-icon($fa-var-angle-left);
left: 2%;
z-index: 1;
}
&__arrow-right {
@include fa-icon($fa-var-angle-right);
right: 2%;
}
&__pagination {
position: absolute;
width: 100%;
bottom: 15px;
left: 0;
text-align: center;
padding-left: 0;
@media #{$media-phone-landscape} {
padding-left: 0 !important;
}
li {
position: relative;
display: inline-block;
margin: 0 5px;
border-radius: 50%;
width: 14px;
height: 14px;
vertical-align: top;
background-color: #fff;
border: 1px solid gray;
&.slick-active {
&:before {
content: '';
position: absolute;
left: 2px;
right: 2px;
top: 2px;
bottom: 2px;
border-radius: 50%;
background-color: gray;
}
}
}
button {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
width: 14px;
height: 14px;
font-size: 0;
background-color: transparent;
border: none;
}
li.slick-active .promo-slider__page-btn {
background: #909090;
}
}
@media #{$media-phone-landscape} {
&__arrows {
padding: 0 .1em;
}
&__arrow-left {
left: 0;
}
&__arrow-right {
right: 0;
}
&__wrap-text{
width: 100%;
}
&__wrap-img{
width: 100%;
text-align: center;
img{
margin: 0 auto;
}
}
&__items{
padding: 70px 35px;
}
}
}
.plate-image {
@include clearfix;
margin-bottom: 30px;
&.is-right {
.plate-image{
&__img-wrap {
margin:{
right: 0;
left: 3%;
}
float: right;
}
&__text-wrap {
float: right;
}
}
}
&__img{
max-width: 100%;
max-height: 100%;
&-wrap{
width: 50%;
float: left;
margin-right: 3%;
}
}
&__text-wrap{
float: left;
width: 47%;
}
&__title {
font-size: 42px;
line-height: 50px;
font-weight: bold;
margin-bottom: 30px;
color: $background;
}
&__text{
font-size: 20px;
line-height: 26px;
&::first-letter {
font-size: 46px;
font-weight: bold;
margin: 2px 0 -2px 0;
padding-right: .08em;
line-height: 46px;
float: left;
}
}
@media #{$media-phone-landscape} {
&__title{
margin-bottom: 30px;
font-size: 27px;
line-height: 32px;
}
&__text{
font-size: 16px;
line-height: 20px;
}
}
@media screen and (max-width: 650px) {
&__img{
&-wrap{
width: 100%;
margin-right:0;
}
}
&__text-wrap{
width: 100%;
}
&__title{
margin-bottom: 15px;
}
}
}
.plate-list {
@include clearfix;
margin-bottom: 30px;
&__item{
list-style-type: none;
width: 22%;
float: left;
&s{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
}
&__main-title{
font-size: 26px;
margin-bottom: 30px;
}
&__title {
font-size: 20px;
margin-bottom: 5px;
}
@media #{$media-phone-landscape} {
&__item{
width: 45%;
margin: 0 1px 30px;
}
}
@media #{$media-phone} {
&__item{
width: 100%;
margin: 0 0 60px;
}
}
}
.plate-top {
margin-bottom: 50px;
&__block{
padding: {
top: 180px;
bottom: 80px;
}
background-size: cover;
background-position: center;
background-color: #f2f2f2;
text-align: center;
min-height: 630px;
box-sizing: border-box;
margin-bottom: 70px;
}
&__block-text {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: rgba(255, 255, 255, 0.6);
}
&__title{
font-size: 33px;
font-weight: normal;
margin-bottom: 20px;
color: $background;
}
&__text{
&-inner {
margin: 0 auto;
}
&-outer {
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
}
}
&__button{
padding: 10px 50px;
background: $accent;
border-radius: 5px;
color: #fff !important;
text-transform: uppercase;
text-decoration: none !important;
transition: background .25s;
&:hover {
background: $accent-hover;
}
@media screen and (max-width: 650px){
width: 100%;
display: block;
padding: 10px 2px;
font-size: 10px;
text-align: center;
}
}
}
%price-list__th {
display: table-cell;
font-size: 90%;
padding: 20px 10px;
text-align: left;
font-weight: bold;
background: #ececec;
&:first-child {
padding-left: 20px;
}
&:last-child {
padding-right: 20px;
}
@media #{$media-phone-landscape} {
padding-left: 15px;
padding-right: 15px;
&:first-child {
padding-left: $mobile-outer-margin;
}
&:last-child {
padding-right: $mobile-outer-margin;
}
}
}
%price-list__td {
display: table-cell;
padding: 15px 10px;
@include thin-border-bottom;
vertical-align: middle;
text-align: left;
&:first-child {
padding-left: 20px;
}
&:last-child {
padding-right: 20px;
}
@media #{$media-phone-landscape} {
padding-left: 15px;
padding-right: 15px;
&:first-child {
padding-left: $mobile-outer-margin;
}
&:last-child {
padding-right: $mobile-outer-margin;
}
}
}
.price-list {
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__table {
display: table;
box-sizing: border-box;
width: 100%;
}
&__table-row {
display: table-row;
}
&__name-head {
@extend %price-list__th;
width: 55%;
}
&__files-head {
@extend %price-list__th;
width: 30%;
}
&__date-head {
@extend %price-list__th;
width: 15%;
}
&__name-col {
@extend %price-list__td;
width: 55%;
}
&__files-col {
@extend %price-list__td;
width: 30%;
}
&__date-col {
@extend %price-list__td;
width: 15%;
}
&__files-item {
display: inline-block;
margin-left: 20px;
&:first-child {
margin-left: 0;
}
}
&__pdf-link {
@extend %link-bright;
//text-transform: uppercase;
}
&__exl-link {
@extend %link-bright;
//text-transform: uppercase;
}
@media #{$media-phone-landscape} {
&__table {
margin-left: - $mobile-outer-margin;
margin-right: - $mobile-outer-margin;
width: auto;
}
&__files-item {
margin-left: 0;
}
}
@media #{$media-phone} {
}
}
.product-compare {
&__compare-wrap {
}
&__filter {
border: 1px solid #999;
@include mbot(2);
@include mtop(2);
@include border-radius(4px);
padding-top: 10px;
padding-bottom: 10px;
}
&__filter-btn {
@include mleft(1);
}
&__products-options-titles {
position: relative;
float: left;
width: 140px;
}
&__products-options-titles-wrap {
position: absolute;
bottom: 0;
width: 100%;
}
&__products-scroll {
white-space: nowrap;
overflow: hidden;
overflow-x: scroll;
word-spacing: -.36em;
line-height: 0;
}
&__product {
line-height: normal;
display: inline-block;
text-align: center;
width: 208px;
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid #999;
@include box-sizing(border-box);
}
&__product-img-wrap {
line-height: 0;
@include mbot(0.5);
}
&__product-img {
width: 100%;
}
&__product-name-wrap {
@include mbot(0.5);
}
&__product-name {
white-space: normal;
font-size: 1.2em;
}
&__price-value {
font-weight: bold;
@include mbot(0.5);
}
&__add-to-cart-wrap {
@include mbot(0.5);
}
&__product-remove-wrap {
@include mbot(0.5);
}
&__products-options-title {
padding-left: 20px;
height: 48px;
vertical-align: middle;
&:nth-child(even) {
background-color: #F2F2F2;
}
&:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
}
&__products-options-value {
height: 48px;
vertical-align: middle;
margin-left: -19px;
margin-right: -20px;
padding-left: 10px;
padding-right: 10px;
white-space: normal;
overflow: hidden;
&:nth-child(even) {
background-color: #F2F2F2;
}
&:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
}
&__product-remove {
&:before {
margin-right: 4px;
display: inline-block;
vertical-align: middle;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
content: "";
}
}
}
.product-constructor {
&__top-section {
@include clearfix;
}
&__left-col {
float: left;
width: getcolumnwidth(5);
margin-right: getcolumnmargin();
}
&__right-col {
float: right;
width: getcolumnwidth(7);
}
&__header {
@include margin(30/20);
}
&__title {
@include margin(20/20);
font-size: 30/12*100%;
line-height: 1;
font-weight: 700;
}
&__price, &__props {
padding: 20px;
background-color: #eee;
width: getcolumnwidth(8);
margin-top: 30px;
}
&__price-value {
@extend h3;
}
&__filter-section {
margin-top: 30px;
}
&__filter-title {
@extend h2;
margin-bottom: 30px;
}
&__filter-caption {
font-size: 150%;
font-weight: bold;
margin-bottom: 20px;
}
&__filter-item {
margin-bottom: 20px;
}
&__variant-list {
position: relative;
}
&__result-section {
display: none;
padding: 20px;
background-color: #eee;
width: 100%;
margin-top: 50px;
@include box-sizing();
@include clearfix();
margin-bottom: 30px;
}
&__result-image {
float: left;
width: 10%;
img {
width: 100%;
border: 1px solid gray;
height: auto;
}
}
&__result-content {
float: right;
width: 90%;
padding-left: 2em;
@include box-sizing();
.result-detail {
@include inline-block();
padding: 0.5em;
margin-right: 1em;
&.is-price {
background: #b5b5b5;
color: white;
}
&__value {
font-size: 130%;
}
}
}
&__result-buy {
margin-top: 2em;
}
&__result-buy-btn {
@include fa-icon($fa-var-shopping-cart);
&:before {
margin-right: 10px;
}
}
&__result-img {
}
@media #{$media-phone-landscape} {
&__price, &__props {
width: auto;
}
&__variant-list {
margin-right: -10px;
}
}
@media #{$media-phone} {
&__left-col, &__right-col {
width: auto;
margin-right: 0;
float: none;
@include margin;
}
&__result-image {
width: auto;
float: none;
margin-bottom: 20px;
}
&__result-content {
float: none;
width: auto;
padding-left: 0;
}
}
}
.product-variant {
a {
color: inherit;
}
display: inline-block;
width: getcolumnwidth(2);
margin-right: .5em;
height: 100%;
position: relative;
margin-bottom: 20px;
&__capion {
height: 4em;
margin-bottom: 10px;
}
&__link {
text-decoration: none;
display: block;
padding: 1em;
border: 2px solid #eee;
@include box-sizing();
width: 100%;
text-align: center;
background-color: #eee;
position: relative;
&:hover {
border: 2px solid #d4d4d4;
}
&.is-active {
border: 2px solid #b5b5b5;
}
&.is-muted {
cursor: default;
border-color: rgba(240, 240, 240, 0.6);
background: rgba(240, 240, 240, 0.6);
color: #cccccc;
img {
opacity: 0.5;
}
}
}
&__image-holder {
position: relative;
}
&__image {
width: 100%;
}
&__zoom {
@include fa-icon($fa-var-search-plus);
position: absolute;
right: 0;
bottom: 0;
height: 30px;
width: 30px;
text-align: center;
color: gray;
&:hover {
color: black;
}
}
@media #{$media-phone-landscape} {
width: getcolumnwidth(3);
margin-right: 10px;
}
@media #{$media-phone} {
width: 46%;
}
}
.product-constructor__variant-list.is-small {
.product-variant {
width: auto;
&__link {
display: block;
padding: 10px 0;
width: 43px;
}
.product-variant__capion {
font-size: 12/14*100%;
@include margin(5/20);
height: auto;
}
}
}
.product-constructor__variant-list.is-middle {
.product-variant {
width: getcolumnwidth(2);
&__link {
display: block;
padding: 10px 0;
}
.product-variant__capion {
font-size: 12/14*100%;
@include margin(5/20);
height: auto;
}
@media #{$media-phone-landscape} {
width: getcolumnwidth(3);
margin-right: 10px;
}
@media #{$media-phone} {
width: 46%;
margin-right: 10px;
}
}
}
.product-detail {
&__top-section {
@include clearfix;
}
&__left-col {
float: left;
width: getcolumnwidth(6);
margin-right: getcolumnmargin();
position: relative;
}
&__labels {
position: absolute;
left: -10px;
top: 5px;
z-index: 2;
}
&__label {
display: table;
height: 20px;
padding: 0 10px 2px;
@include margin(5/20);
text-transform: lowercase;
line-height: 20px;
background-color: #eee;
border-radius: 5px;
@include box-sizing;
span {
position: relative;
z-index: 2;
line-height: 16px;
}
&.is-new {
background-color: green;
color: white;
}
&.is-hit {
background-color: orange;
color: white;
}
&.is-best {
background-color: blue;
color: white;
}
&.is-sale {
background-color: red;
color: white;
}
}
&__right-col {
float: right;
width: getcolumnwidth(6);
}
&__header {
@include margin(30/20);
}
&__title {
@include margin(20/20);
font-size: 30/12*100%;
line-height: 1;
font-weight: 700;
}
&__mobile-title {
@extend .h1;
}
&__top-ui {
@include margin(20/20);
}
&__props{
@include margin(20/20);
}
&__props-caption{
font-weight: 700;
}
&__rating,
&__favor-holder,
&__compare {
display: inline-block;
margin-right: 30px;
&:last-child {
margin-right: 0;
}
}
&__favor-text {
font-size: 12/14*100%;
}
&__favor {
text-decoration: none;
&:before {
@include fa-icon($fa-var-heart-o, true);
margin-right: .5em;
}
}
&__sku-holder {
@include margin(30/20);
}
&__sku-caption {
font-size: 12/14*100%;
@include margin(5/20);
}
&__sku {
@include margin(20/20);
}
&__sku-item {
display: inline-block;
margin-right: .5em;
a {
color: inherit;
}
}
&__price-section {
@include margin(20/20);
}
&__price {
display: inline-block;
font-size: 150%;
vertical-align: middle;
margin-right: 1.5em;
}
&__old-price{
text-decoration: line-through;
}
&__feature-items {
background-color: #eee;
@include margin(20/20);
padding: 20px;
}
&__feature-cols {
@include columnizerParent();
margin-top: -2.5%;
}
&__feature-item {
@include columnizer(6);
margin-top: 2.5%;
}
&__feature {
position: relative;
padding-left: 25px;
font-weight: bold;
&.is-delivery:before {
position: absolute;
left: 0;
top: 0;
@include fa-icon($fa-var-truck, true);
font-size: 18/14*100%;
}
&.is-credit:before {
position: absolute;
left: 0;
top: 0;
@include fa-icon($fa-var-credit-card, true);
font-size: 18/14*100%;
}
&.is-pickup:before {
position: absolute;
left: 0;
top: 0;
@include fa-icon($fa-var-map-marker, true);
font-size: 18/14*100%;
}
&.is-garantee:before {
position: absolute;
left: 0;
top: 0;
@include fa-icon($fa-var-certificate, true);
font-size: 18/14*100%;
}
}
&__feature-text {
font-size: 12/14*100%;
}
&__tabs-section {
@include margin(30/20);
}
&__share {
@include margin(20/20);
}
&__color {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid white;
font-size: 0;
&.is-active {
outline: 1px solid gray;
}
}
&__size {
display: inline-block;
padding: 5px;
font-size: 12/14*100%;
background-color: #eee;
&.is-active {
background-color: gray;
color: white;
}
}
&__params {
width: 100%;
box-sizing: border-box;
}
&__params-label {
width: 30%;
max-width: 150px;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: middle;
@include thin-border-bottom;
}
&__params-val {
padding-top: 10px;
padding-bottom: 10px;
vertical-align: middle;
@include thin-border-bottom;
}
&__more-props {
display: none;
}
&__more-button {
width: 100%;
text-align: center;
}
@media #{$media-phone-landscape} {
&__left-col, &__right-col {
width: auto;
margin: 0;
}
&__left-col {
margin-bottom: 20px;
}
&__labels {
left: -5px;
}
.photogallery-with-thumbs__item {
width: 100%;
height: auto;
}
.photogallery-with-thumbs__image {
width: 100%;
}
&__top-ui {
margin-top: 10px;
}
&__rating,
&__favor-holder,
&__compare {
margin-top: 10px;
}
}
@media #{$media-phone} {
&__favor-holder, &__compare {
display: inline-block;
width: 40%;
}
&__feature-items {
@include mobile-overflow();
}
&__feature-cols {
@include columnizerParent();
margin-top: -2.5%;
}
&__feature-item {
@include columnizer(12);
margin-top: 2.5%;
}
&__params {
font-size: 93%;
}
}
}
.product-detail-modal {
&__top-section {
@include clearfix;
}
&__left-col {
float: left;
width: getcolumnwidth(6);
margin-right: getcolumnmargin();
position: relative;
}
&__labels {
position: absolute;
left: -10px;
top: 5px;
z-index: 2;
}
&__label {
display: table;
height: 20px;
padding: 0 10px 2px;
@include margin(5/20);
text-transform: lowercase;
line-height: 20px;
background-color: #eee;
border-radius: 5px;
@include box-sizing;
span {
position: relative;
z-index: 2;
line-height: 16px;
}
&.is-new {
background-color: green;
color: white;
}
&.is-hit {
background-color: orange;
color: white;
}
&.is-best {
background-color: blue;
color: white;
}
&.is-sale {
background-color: red;
color: white;
}
}
&__right-col {
float: right;
width: getcolumnwidth(6);
}
&__header {
@include margin(30/20);
}
&__title {
@include margin(20/20);
font-size: 30/12*100%;
line-height: 1;
font-weight: 700;
}
&__top-ui {
@include margin(20/20);
}
&__props{
@include margin(20/20);
}
&__props-caption{
font-weight: 700;
}
&__rating {
display: inline-block;
margin-right: 30px;
}
&__favor-holder {
display: inline-block;
}
&__favor-text {
font-size: 12/14*100%;
}
&__favor {
text-decoration: none;
&:before {
@include fa-icon($fa-var-heart-o, true);
margin-right: .5em;
}
}
&__sku-holder {
@include margin(30/20);
}
&__sku-caption {
font-size: 12/14*100%;
@include margin(5/20);
}
&__sku {
@include margin(20/20);
}
&__sku-item {
display: inline-block;
margin-right: .5em;
a {
color: inherit;
}
}
&__price-section {
@include margin(20/20);
}
&__price {
display: inline-block;
font-size: 150%;
vertical-align: middle;
margin-right: 1.5em;
}
&__old-price{
text-decoration: line-through;
}
&__feature-items {
background-color: #eee;
@include margin(20/20);
padding: 20px;
}
&__feature-cols {
@include columnizerParent();
margin-top: -2.5%;
}
&__feature-item {
@include columnizer(6);
margin-top: 2.5%;
}
&__feature {
position: relative;
padding-left: 25px;
font-weight: bold;
&.is-delivery:before {
position: absolute;
left: 0;
top: 0;
@include fa-icon($fa-var-truck, true);
font-size: 18/14*100%;
}
&.is-credit:before {
position: absolute;
left: 0;
top: 0;
@include fa-icon($fa-var-credit-card, true);
font-size: 18/14*100%;
}
&.is-pickup:before {
position: absolute;
left: 0;
top: 0;
@include fa-icon($fa-var-map-marker, true);
font-size: 18/14*100%;
}
&.is-garantee:before {
position: absolute;
left: 0;
top: 0;
@include fa-icon($fa-var-certificate, true);
font-size: 18/14*100%;
}
}
&__feature-text {
font-size: 12/14*100%;
}
&__tabs-section {
@include margin(30/20);
}
&__share {
@include margin(20/20);
}
&__color {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid white;
font-size: 0;
&.is-active {
outline: 1px solid gray;
}
}
&__size {
display: inline-block;
padding: 5px;
font-size: 12/14*100%;
background-color: #eee;
&.is-active {
background-color: gray;
color: white;
}
}
@media #{$media-phone-landscape} {
padding: 20px $mobile-outer-margin;
&__mobile-title {
@include mobile-form-title();
}
&__left-col, &__right-col {
width: auto;
float: none;
margin-right: 0;
}
&__left-col {
margin-bottom: $bm;
}
&__feature-items {
@include mobile-overflow();
}
&__feature-cols {
@include columnizerParent();
margin-top: -2.5%;
}
&__feature-item {
@include columnizer(12);
margin-top: 2.5%;
}
}
}
.product-detail-pseudo-offer {
@include clearfix;
&__img-holder {
@include columnizer(4);
float: left;
padding-right: 35px;
margin-left: 0;
margin-bottom: 20px;
& .save-item {
text-align: center;
}
& a.add-to-favorites {
color:$color-text-dark;
font-weight: normal;
position: relative;
padding: 0 0 0 22px;
&:before {
@extend .fa !optional;
@extend .fa-square-o !optional;
content: "\f08a";
position: absolute;
top:2px;
left: 0;
font-size: 1.3em;
}
&:hover {
color:$color-text-dark;
}
}
}
&__img {
width: 100%;
padding: 2px;
border-radius: 3px;
border: 1px solid $color-border;
}
&__description {
margin-bottom: 45px;
}
&__props-holder {
padding: 0 0 30px 0;
}
&__props-row {
padding: 6px 0;
border-bottom: 1px solid $color-border;
&:first-child {
border-top: 1px solid $color-border;
}
}
._last{
padding-top: 8px;
}
&__props-row-name {
width: 50%;
display: inline-block;
}
&__props-row-value {
display: inline-block;
}
&__buttons {
@include columnizer(4);
}
&__buy,
&__order {
@extend .button;
margin-bottom: 20px;
width:70%;
text-align:center;
}
&__buttons-holder {
margin: 25px 0px 0px 0px;
padding: 22px 30px 22px 30px;
background-color: #f8f8f8;
overflow: hidden;
}
&__buy-holder {
display: inline-block;
float: right;
}
&__price {
width: 70%;
& .price-block {
font-size: 1.3em;
width: 100%;
& .counter-input {
float:left;
}
&__holder {
padding: 0 6px 0 20px;
}
&__caption {
float: left;
}
&__description {
font-size: 0.9em;
line-height: 1.3;
}
}
}
&__label-wrap {
text-align: right;
margin-bottom: 15px;
}
&__label {
display: inline-block;
line-height: 20px;
padding: 0px 5px;
@include border-radius(2px);
margin-left: 3px;
font-size: 14/12*100%;
text-transform: uppercase;
color: #fff;
}
._new {
background-color: #8e9b49;
}
._action {
background-color: #0c6f9d;
}
._hit {
background-color: #c13c3a;
}
&__content-holder {
@include columnizer(8);
margin-bottom: 20px;
overflow: hidden;
}
&__short-description {
@include mtop(.5);
@include mbot(.5);
font-size: 14/15*100%;
}
&__description {
@include mtop(.5);
@include mbot(.5);
font-size: 14/15*100%;
}
&__volume {
@include mtop(.5);
@include mbot(.5);
}
&__price {
/*@include mtop(.5);
@include mbot(.5);*/
}
&__specs {
margin-top: 40px;
}
&._bordered {
padding: 20px 40px 30px;
border: 5px solid #f1f1f1;
}
&__pseudo-offers {
clear: both;
&-item {
float: left;
margin-left: 20px;
&:first-child {
margin-left:0;
}
&:nth(2n+1) {
clear: both;
}
}
& a {
color: $color-text;
font-weight: normal;
&:hover {
color: $color-text;
}
}
}
& .counter-input {
@include columnizer(5);
margin-left: 0;
}
&__price-holder {
@include columnizer(7);
margin-left: 0;
}
}
/*
@media #{$media-tablet} {
.product-detail-pseudo-offer {
&__img-holder {
width: 100%;
margin-right: 0px;
text-align: center;
margin-bottom: 20px;
}
&__img {
width: initial;
height: initial;
max-width: 100%;
max-height: 100%;
}
&__label-wrap {
text-align: left;
}
&__props-row-name {
width: 50%;
}
&__env-item {
width: 100%;
margin-bottom: 13px;
white-space: nowrap;
&:hover {
& > .product-detail-pseudo-offer__env-descr {
display: inline-block;
}
}
}
&__env-descr {
position: relative;
display: inline-block;
left: 0px;
vertical-align: top;
font-size: 15/12*100%;
color: #000;
line-height: 30px;
text-decoration: none;
background-color: #fff;
span {
font-weight: 500;
}
}
&__buttons-holder {
position: relative;
padding-bottom: 66px;
}
&__counter-holder {
@include box-sizing;
float: left;
width: 40%;
text-align: left;
padding-top: 6px;
}
&__price-old {
text-decoration: line-through;
color: #999999;
}
&__price {
font-size: 10px;
font-weight: bold;
span {
color: #0c6f9d;
font-size: 20px;
font-weight: normal;
line-height: 20px;
}
}
&__buy-holder {
position: absolute;
left: 0px;
bottom: 0px;
padding-top: 20px;
width: 100%;
background-color: #fff;
text-align: center;
}
}
}
*/
.product-detail2 {
&__main-cols {
@include columnizerParent();
}
&__image-col {
@include columnizer(4);
}
&__description-col {
@include columnizer(8);
}
&__img-holder {
position: relative;
}
&__img {
max-width: 100%;
height: auto;
}
&__labels {
position: absolute;
left: -10px;
top: 5px;
z-index: 2;
}
&__label {
display: table;
height: 20px;
padding: 0 10px 2px;
@include margin(5/20);
text-transform: lowercase;
line-height: 20px;
background-color: #eee;
border-radius: 5px;
@include box-sizing;
span {
position: relative;
z-index: 2;
line-height: 16px;
}
&.is-new {
background-color: green;
color: white;
}
&.is-hit {
background-color: orange;
color: white;
}
&.is-best {
background-color: blue;
color: white;
}
&.is-sale {
background-color: red;
color: white;
}
}
&__props-holder {
display: table;
width: 100%;
box-sizing: border-box;
@include margin(20/20);
}
&__props-row {
display: table-row;
}
&__props-name {
display: table-cell;
vertical-align: top;
padding: 5px 0;
@include thin-border-bottom;
}
&__props-value {
display: table-cell;
vertical-align: top;
padding: 5px 0;
@include thin-border-bottom;
}
&__btns-col {
float: right;
width: 200px;
}
&__info-col {
padding-top: 10px;
overflow: hidden;
}
&__counter {
display: inline-block;
vertical-align: middle;
margin-right: 40px;
}
&__price-holder {
display: inline-table;
vertical-align: middle;
}
&__price-label {
display: table-cell;
vertical-align: middle;
padding-right: 15px;
font-weight: 700;
}
&__price-values {
display: table-cell;
}
&__price-old {
text-decoration: line-through;
font-size: 80%;
}
&__price-current {
font-size: 125%;
}
&__price-remark {
font-size: 80%;
}
&__remark-holder {
@include margin(20/20);
}
&__btn {
@include margin(10/20);
}
&__buy-btn {
width: 100%;
box-sizing: border-box;
text-align: center;
}
&__fast-order {
width: 100%;
box-sizing: border-box;
text-align: center;
}
&__favor-link {
@include margin(20/20);
}
&__back,
&__pseudo-offers {
@include margin;
}
&__pseudo-offers-item {
@include margin(0.25);
}
&__additinal-section {
@include margin(40/20);
}
&__additinal-caption {
@include mbot(30/20);
font-weight: 700;
font-size: 150%;
}
@media #{$media-phone-landscape} {
&__main-cols {
margin-left: 0;
}
&__image-col,
&__description-col {
margin-left: 0;
width: auto;
float: none;
}
&__image-col {
margin-bottom: $bm;
}
&__price-section {
display: flex;
flex-direction: column;
}
&__btns-col {
float: none;
width: auto;
order: 2;
}
&__info-col {
padding-top: 0;
order: 1;
margin-bottom: 10px;
}
&__additinal-section {
@include margin(1);
}
&__additinal-caption {
margin-bottom: 0;
margin-top: 30px;
}
&__price-label {
display: none;
}
&__props-row {
font-size: 90%;
}
&__props-name {
width: 30%;
}
&__props-value {
padding-left: 10px;
}
}
}
.product-table{
&__left{
display: inline-block;
width: calc(30% - 1%);
vertical-align: top;
}
&__right{
display: inline-block;
width: calc(70% - 1%);
vertical-align: top;
}
&__header{
//display: flex;
display: table;
padding: 10px 0;
border-bottom: 1px solid $pistacho;
border-top: 1px solid $pistacho;
width:100%;
&-left{
display: table-cell;
width: calc(30% - 1%);
vertical-align: middle;
}
&-right{
display: table-cell;
width: calc(70% - 1%);
vertical-align: middle;
}
}
&__filter-title{
padding-left: 55px;
font-size: 1.1em;
}
&__title{
text-align: center;
display: block;
font-weight: bold;
font-size: 16px;
color: $background;
}
&__count{
display: block;
text-align: center;
font-weight:bold;
font-size: 16px;
color: $background;
}
@media screen and (max-width: 992px) {
&__left, &__right{
width: 100%;
}
&__left{
//margin-bottom: 15px;
padding-bottom: 30px;
border-bottom: 1px solid $pistacho;
}
}
@media screen and (min-width: 768px) {
&__left {
display: inline-block !important;
}
&__header-left {
position: absolute;
top: 10px;
bottom: 10px;
line-height: 44px;
}
&__header {
position: relative;
}
&__header-right {
width: 100%;
}
}
@media #{$media-phone-landscape} {
&__filter-title{
padding-left: 0;
text-align: center;
background-color: $accent;
color: #fff;
height: 100%;
line-height: 5;
transition: background-color .25s;
cursor: pointer;
&:hover{
background-color: $accent-hover;
}
}
&__header{
padding: 0;
&-right{
padding: 10px 0;
font-size: 0.8em;
}
}
&__left{
display: none;
}
&__right {
.catalog-plate {
&__img-holder {
width: 100%;
float: none;
margin: 0;
margin-bottom: 30px;
img{
width: 100%;
}
}
&__wrap{
padding: inherit;
}
}
.catalog-items{
&__col{
padding: 20px 20px;
border-left: 0;
}
}
}
}
}
.promo-detail {
padding-bottom: 10px;
@include clearfix();
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__image-holder {
@include mbot(30/20);
float: left;
overflow: visible;
margin: 0 $base-vertical-margin $base-vertical-margin 0;
//padding: 4px;
//border-radius: 5px;
//border: 1px solid #d9d9d9;
}
&__picture {
display: block;
width: 100%;
}
&__info {
@include clearfix;
}
&__content {
@include margin(1);
}
&__aside {
float: left;
width: 25%;
}
&__form {
padding: 20px;
background: #ececec;
}
&__form-title {
@include mbot(20/20);
font-size: 16/14*100%;
font-weight: bold;
}
&__form-input {
@include mbot(15/20);
display: block;
padding: 5px 4% 5px 6%;
width: calc(90% - 2px);
border: 1px solid #a9a9a9;
}
&__form-btn {
padding: 3px 20%;
}
&__field {
margin-bottom: 15px;
&.is-error {
& input[type="text"] {
border: $color-status-error 1px solid;
}
& .error-text {
color: $color-status-error;
}
}
}
&__error,
&__none {
display: none;
&.is-visible {
display: block;
}
}
@media #{$media-phone-landscape} {
&__content, &__aside {
float: none;
width: auto;
margin-right: 0;
@include margin;
}
&__picture-holder {
@include mobile-overflow(false);
}
}
}
.promo-offer {
&__caption {
@include mbot(40/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__info {
overflow: hidden;
}
&__action {
@include mbot(50/20);
@include clearfix;
padding: 50px 20px;
background: #F0F0F0;
}
&__figure {
float: left;
width: 40%;
min-width: 200px;
margin: 0 4% 10px 0;
}
&__img {
display: block;
max-width: 100%;
}
&__title {
@include mbot(20/20);
line-height: 120%;
font-size: 30/14*100%;
font-weight: bold;
}
&__description {
@include margin(20/20);
line-height: 170%;
font-size: 16/14*100%;
}
&__timer-holder {
@include margin(15/20);
}
&__btn {
}
&__order {
@include margin(20/20);
}
}
@mixin _state_center ($mod: '') {
.promo-offer#{$mod} {
.promo-offer {
&__title {
text-align: center;
}
&__description {
text-align: center;
}
&__figure {
float: none;
width: auto;
margin-left: auto;
margin-right: auto;
width: 600px;
max-width: 95%;
}
&__order {
text-align: center;
}
&__timer-holder {
display: inline-block;
margin-right: 20px;
}
}
}
}
@include _state_center('.is-center');
.promo-slider {
box-sizing: border-box;
a {
color: inherit;
}
&:hover{
.promo-slider{
&__bg-holder{
transform: scale(1.02);
opacity: 0.85;
}
}
}
&.is-section-header:hover .promo-slider__bg-holder {
transform: none;
opacity: 1;
}
&__slider {
}
&__first{
margin-top: 0 !important;
}
&__slide {
position: relative;
display: block;
box-sizing: border-box;
overflow: hidden;
.is-section-header & {
width: 100vw;
height: 47.37vw;
@media #{$media-phone-landscape} {
height: auto;
}
}
}
&__action {
display: block;
text-decoration: none;
color: inherit;
min-height: 530px;
}
&__bg-holder {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
transition: all .3s linear;
background-position: center;
background-size: cover;
.is-section-header & {
@media #{$media-phone-landscape} {
position: static;
width: 100vw;
height: 70vw;
display: block;
}
}
}
&__bg {
width: 100%;
height: auto;
min-height: 100%;
}
&__content-holder {
position: relative;
display: table;
z-index: 2;
//padding-top: 10%;
//text-align: center;
max-width: 350px;
margin: 60px 0;
left: 0;
text-align: left;
top: 0;
padding: 40px;
background: hsla(0,0%,100%,.60);
.is-section-header & {
@media #{$media-phone-landscape} {
display: block;
margin: 0;
padding: 20px;
background: none;
}
}
}
&__pretitle {
display: block;
font-size: 16/14*100%;
@include mbot;
}
&__title {
display: block;
@include mbot;
font-size: 2.66667rem;
font-size: 40px;
line-height: 1;
font-weight: bold;
color: $background;
font-family:$helveticaBold;
}
&__description {
display: block;
font-size: 1.33333rem;
line-height: 1.2;
color: $background;
}
&__morebutton {
@include mtop;
@extend .button-primary;
background: #eb6852;
//border: 2px solid #eb6852;
color: #fff;
padding: 13px 26px;
transition: background .25s;
&:hover{
background: #ca5341;
}
}
&__arrows {
position: absolute;
top: 40%;
padding: 0 .3em;
border-radius: 50%;
line-height: 100%;
font-size: 50/14*100%;
font-weight: bold;
cursor: pointer;
}
&__arrow-left {
@include fa-icon($fa-var-angle-left);
left: 2%;
z-index: 1;
}
&__arrow-right {
@include fa-icon($fa-var-angle-right);
right: 2%;
}
&__pagination {
position: absolute;
width: 100%;
bottom: 15px;
left: 0;
text-align: center;
li {
position: relative;
display: inline-block;
margin: 0 5px;
border-radius: 50%;
width: 14px;
height: 14px;
vertical-align: top;
background-color: $pistacho;
&.slick-active {
background-color: $accent;
/* &:before {
content: '';
position: absolute;
left: 2px;
right: 2px;
top: 2px;
bottom: 2px;
border-radius: 50%;
background-color: $accent;
}*/
}
}
button {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
width: 14px;
height: 14px;
font-size: 0;
background-color: transparent;
border: none;
}
li.slick-active .promo-slider__page-btn {
background: #909090;
}
}
&.is-adaptive-bg {
.promo-slider__bg-holder {
background-size: cover;
background-position: center;
}
}
@media #{$media-phone-landscape} {
&__title {
font-size: 150%;
}
&__action {
//height: 300px;
min-height: 300px;
}
&__arrows {
padding: 0 .1em;
}
&__arrow-left {
left: 0;
}
&__arrow-right {
right: 0;
}
&__description {
font-size: 100%;
}
}
}
.promo-tiles {
@include clearfix;
&__title {
margin-bottom: 25px;
text-align: center;
font-size: 28px;
font-weight: bold;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
@include columnizerParent();
margin-top: - getcolumnmargin();
}
&__item {
position: relative;
@include columnizer(4);
margin-top: getcolumnmargin();
&:nth-child(3n+1) {
clear: left;
}
}
&__link {
}
&__image {
width: 100%;
}
}
.radio {
position: relative;
cursor: pointer;
display: inline-block;
vertical-align: middle;
min-width: 14px;
min-height: 14px;
font-size: 14px;
&__check-holder {
position: absolute;
left: 0;
height: 26px;
}
&__text {
display: block;
padding-left: 25px;
font-size: 14px;
}
&:hover {
.checkbox__text {
text-decoration: underline;
}
}
&.is-disabled {
opacity: 0.3;
}
}
.rating-widget {
&__description {
margin-bottom: 10px;
}
}
// Стандартная форма
.regional {
&__title {
@include mtop(2);
@include mbot(1.5);
font-size: 30/14*100%;
line-height: (41/30);
font-weight: 700;
text-align: center;
}
&__plate {
padding: 20px 25px;
background-color: #eee;
}
&__region-items{
@include clearfix();
text-align: left;
}
&__region-item{
display: inline-block;
padding: 0 10px 0 0;
font-size: 200%;
&-link{
&.is-active{
font-weight: bold;
}
}
}
&__info{
@include mbot(1);
@include mtop(1);
}
&__city-items{
@include columnizerParent();
}
&__city-item{
@include columnizer(3);
}
}
// Состояние: Вертикальная (подпись сверху, поле снизу) VER
.regional-phone {
font-weight: bold;
font-size: 1.4em;
&__phone{}
&__link{}
}
// Форма регистрации
.registration-form {
&__title {
@include mtop(3);
@include mbot(2.5);
font-size: 30/14*100%;
line-height: (41/30);
font-weight: 700;
margin-left: 20%;
margin-right: 20px;
}
&__node{
color: #0b8bfb;
&.error{
color: $color-status-error;
}
&.success{
color: $color-status-ok;
}
}
&__plate {
@include the-plate();
}
&__fields-list {
display: table;
width: 100%;
}
&__field {
display: table-row;
&.is-error {
.registration-form__error {
display: block;
}
}
&.is-none {
.registration-form__none {
display: block;
}
}
&.js-pass-change {
display: none;
}
}
&__buttons {
@include margin;
}
&__label {
display: table-cell;
vertical-align: top;
text-align: right;
padding: 15px 10px 0 0;
width: 150px;
&.is-captcha {
vertical-align: bottom;
padding-bottom: 18px;
}
}
&__item {
display: table-cell;
vertical-align: top;
padding: 10px 0 10px 10px;
@include clearfix;
input[type='text'],
input[type='email'],
input[type='password'],
textarea {
width: 100%;
}
}
&__add-link {
display: inline-block;
margin-left: 1em;
}
&__list {
list-style: none;
margin: 5px 0;
padding: 0;
&.is-horizontal {
margin: 0;
.registration-form__list-item {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 1.5em;
}
}
}
&__list-item {
@include margin(10/20);
}
&__error {
display: none;
color: $color-status-error;
}
&__none {
display: none;
color: $color-status-error;
}
&__ok {
display: none;
margin-top: 5px;
}
&__remark {
margin-top: 5px;
margin-bottom: 20px;
font-size: 85%;
}
&__inputs,
&__buttons {
float: left;
width: 45%;
margin-right: 5%;
}
&__message {
float: left;
max-width: 35%;
margin-top: 3px;
}
&__inputs-link {
display: inline-block;
padding-top: 5px;
margin-right: 1em;
}
&__link {
display: inline-block;
color: #0b8bfb;
text-decoration: underline;
cursor: pointer;
margin: 0 10px;
&:hover {
text-decoration: none;
}
}
&__captcha {
display: table;
width: 45%;
@include margin(10/20);
}
&__captcha-link {
color: #999999;
text-decoration: none;
border-bottom: 1px dashed #aaaaaa;
&:hover {
color: #aaaaaa;
border-bottom-color: #bbbbbb;
}
}
&__captcha-img {
display: table-cell;
vertical-align: middle;
width: 50%;
img {
vertical-align: top;
}
}
&__captcha-reload {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
padding-left: 15px;
}
&__socials-holder {
padding: 15px 25px 25px;
background-color: #ccc;
}
&__socials-caption {
font-weight: bold;
font-size: 18/14*100%;
text-align: center;
}
&__socials {
text-align: center;
@include margin(20/20);
}
&__socials-item {
display: inline-block;
vertical-align: middle;
margin-right: .25em;
margin-left: .25em;
}
&__socials-link {
display: inline-block;
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 50%;
text-align: center;
color: black;
&.is-ok {
@include fa-icon($fa-var-google-plus);
line-height: 50px;
font-size: 20px;
}
&.is-vk {
@include fa-icon($fa-var-vk);
line-height: 50px;
font-size: 20px;
}
&.is-tw {
@include fa-icon($fa-var-twitter);
line-height: 50px;
font-size: 20px;
}
&.is-fb {
@include fa-icon($fa-var-facebook);
line-height: 50px;
font-size: 20px;
}
}
.select2-container {
min-width: 100%;
max-width: 100%;
}
}
.registration-form.is-auth {
.registration-form {
&__label {
width: 50px;
}
}
}
// Состояние: на странице контактов
@mixin _state_contacts ($mod: '') {
.registration-form#{$mod} {
.registration-form {
&__label {
padding-right: 0;
white-space: nowrap;
text-align: left;
width: 70px;
}
&__inputs {
padding-right: 0;
white-space: nowrap;
text-align: left;
}
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
}
}
}
// Состояние: попап регистрации
@mixin _state_reg-modal ($mod: '') {
.registration-form#{$mod} {
.registration-form {
&__plate {
padding-bottom: 40px;
}
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
&__title {
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: (24/14*100%);
margin-bottom: 20px;
}
&__socials-holder {
background: none;
padding: 0;
@include margin(30/20);
text-align: center;
}
&__socials-caption {
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
&__socials {
display: inline-block;
vertical-align: middle;
margin-top: 0;
}
&__socials-link {
background-color: #fff;
}
@media #{$media-phone-landscape} {
&__title {
@include mobile-form-title();
}
}
}
}
}
// Состояние: восстановление пароля
@mixin _state_recovery ($mod: '') {
.registration-form#{$mod} {
.registration-form {
&__title {
margin-left: 0;
margin-right: 0;
font-size: (26/14*100%);
font-weight: 400;
margin-bottom: 20px;
}
&__field {
display: block;
padding: 0;
@include margin(10/20);
}
&__label {
display: block;
padding: 0;
width: auto;
text-align: left;
@include margin(10/20);
}
&__item {
display: block;
padding: 0;
}
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
}
}
}
// Состояние: запрос электронной почты
@mixin _state_email-request ($mod: '') {
.registration-form#{$mod} {
.registration-form {
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
&__intro-text {
text-align: center;
@include margin(15/20);
}
&__title {
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 26/14*100%;
margin-bottom: 25px;
}
&__label {
width: 100px;
}
}
}
}
// Состояние: Под полем с ошибкой, отодвигает ниже стоящие поля E2
@mixin _state_e2 ($mod: '') {
.registration-form#{$mod: ''} {
.registration-form {
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
}
}
}
// Состояние: Под полем с ошибкой, не отодвигает ниже стоящие поля E3
@mixin _state_e3 ($mod: '') {
.registration-form#{$mod: ''} {
.registration-form {
&__inputs {
width: auto;
float: none;
max-width: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
margin-left: 0;
position: absolute;
}
}
}
}
// Состояние: Вертикальная (подпись сверху, поле снизу) VER
@mixin _state_ver ($mod: '') {
.registration-form#{$mod: ''} {
.registration-form {
&__title {
margin-left: 0;
margin-right: 0;
}
&__field {
display: block;
padding: 0;
@include margin(30/20);
}
&__label {
display: block;
padding: 0;
width: auto;
text-align: left;
@include margin(10/20);
}
&__item {
display: block;
padding: 0;
}
}
}
}
// Состояние:
@mixin _state_pla ($mod: '') {
.registration-form#{$mod: ''} {
.registration-form {
&__label {
display: none;
}
}
}
}
@media #{$media-phone-landscape} {
.registration-form {
.registration-form {
&__title {
@include mobile-form-title();
}
&__inputs {
width: auto;
float: none;
margin-right: 0;
}
&__message {
float: none;
width: auto;
max-width: none;
}
&__socials-holder {
background: none;
padding: 0;
@include margin(30/20);
text-align: center;
}
&__socials-caption {
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
&__socials {
display: inline-block;
vertical-align: middle;
margin-top: 0;
}
&__socials-link {
background-color: #fff;
}
}
}
}
@media #{$media-phone} {
@include _state_ver();
@include _state_e2();
.registration-form {
.registration-form { //to overwrite state
&__plate {
@include mobile-overflow();
padding-bottom: 20px;
.fancybox-inner & {
margin-left: 0;
margin-right: 0;
}
}
&__label {
font-weight: bold;
margin-bottom: 5px;
&.is-empty {
display: none;
}
}
&__field {
@include margin;
}
&__buttons {
width: auto;
float: none;
margin-left: 0;
text-align: center;
}
}
}
}
@include _state_ver('.is-subscribe');
@include _state_pla('.is-subscribe');
@include _state_e2('.is-subscribe');
@include _state_ver('.is-promo');
@include _state_e2('.is-promo');
@include _state_e3('.is-auth');
@include _state_ver('.is-condensed-feedback');
@include _state_e2('.is-condensed-feedback');
@include _state_e2('.is-contacts');
@include _state_contacts('.is-contacts');
@include _state_e2('.is-reg');
@include _state_recovery('.is-pass-recovery');
@include _state_reg-modal('.is-modal');
@include _state_email-request('.is-email-request');
.related-carousel {
&__items {
position: relative;
}
&__items:after {
content: '';
display: block;
clear: left;
}
&__item {
margin-right: 5%;
width: 30%;
text-align: center;
float: left;
&:last-child {
margin-right: 0;
}
@include box-sizing;
}
&__thumb {
@include mbot(15/20);
text-align: center;
}
&__thumb-link {
display: inline-block;
padding: 3px;
border-radius: 3px;
border: 1px solid lightgrey;
vertical-align: top;
}
&__thumb-img {
display: block;
width: 100%;
}
&__title {
@include mbot(20/20);
}
&__discount {
@include mbot(5/20);
}
&__discount-value {
font-style: italic;
}
&__price {
@include mbot(10/20);
font-size: 16/14*100%;
}
&__arrows {
position: absolute;
top: 35%;
padding: 0 .3em;
border-radius: 50%;
line-height: 100%;
font-size: 40/14*100%;
font-weight: bold;
cursor: pointer;
}
&__arrow-left {
@include fa-icon($fa-var-angle-left);
left: -35px;
}
&__arrow-right {
@include fa-icon($fa-var-angle-right);
right: -35px;
}
}
.requests-item {
&__title {
@include mbot(20/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__category {
@include margin(40/20);
}
&__subtitle {
@include mbot(20/20);
font-size: 24/14*100%;
font-weight: bold;
}
&__items {
display: table;
width: 100%;
box-sizing: border-box;
}
&__item {
display: table-row;
}
&__id {
display: table-cell;
padding: 15px 0;
font-weight: bold;
}
&__status {
display: table-cell;
width: 200px;
padding-left: 15px;
padding-right: 15px;
}
&__download {
width: 100px;
display: table-cell;
}
&__status-title {
display: inline-block;
margin-right: 8px;
vertical-align: middle;
}
&__status-value {
display: inline-block;
padding: 5px 10px;
vertical-align: middle;
border: 1px solid gray;
&.is-waiting {
background-color: #F0F0F0;
border-color: #F0F0F0;
}
&.is-complete {
background-color: #C6FF90;
border-color: #C6FF90;
}
}
}
.reviews-balloons {
&__title {
@include mbot(30/20);
text-align: center;
font-size: 30/14*100%;
font-weight: bold;
}
&__items {
@include columnizerParent;
list-style: none;
margin-top: - getcolumnmargin() * 2;
}
&__item {
@include columnizer(4);
margin-top: getcolumnmargin() * 2;
&:nth-child(3n+1) {
clear: left;
}
}
&__name {
@include mbot(10/20);
width: 60%;
font-size: 24/14*100%;
line-height: 1;
}
&__text {
position: relative;
padding: 20px 30px;
border-radius: 12px;
background: #C6C6C6;
color: white;
&:after {
position: absolute;
content: '';
right: 7px;
width: 0;
height: 0;
border-style: solid;
border-width: 35px 0 0 35px;
border-color: transparent transparent transparent #C6C6C6;
transform: rotate(-12deg);
}
&.is-top {
@include mbot(30/20);
&:after {
bottom: -27px;
transform: scaleY(-1) rotate(-12deg);
}
}
&.is-bottom {
@include mtop(30/20);
&:after {
top: -27px;
}
}
}
}
.reviews-detail {
&__title {
font-size: 150%;
font-weight: bold;
@include mbot(10/20);
}
&__image-holder {
//padding: 5px;
//border: 1px solid #f2f2f2;
@include margin(10/20);
//border-radius: 5px;
}
&__main-image {
max-width: 100%;
height: auto;
display: block;
}
&__date {
font-style: italic;
@include margin(10/20);
}
&__content {
@include margin(20/20);
}
&__back-holder {
@include margin(20/20);
}
&__back {
text-decoration: none;
&:before {
content: '←';
margin-right: .5em;
}
}
}
.reviews-list {
&__title {
@include mbot(30/20);
text-align: center;
font-size: 30/14*100%;
font-weight: bold;
}
&__items {
list-style: none;
}
&__author{
@include columnizer(3);
margin-left: 0;
}
&__comment{
@include columnizer(9);
}
&__item {
@include mbot(20/20);
@include pbot(20/20);
@include clearfix();
@include thin-border-bottom();
}
&__name {
@include ptop(10/20);
@include mbot(10/20);
font-size: 24/14*100%;
line-height: 1;
}
&__text{
position: relative;
padding: 20px;
}
&__add, &__description{
@include mbot(10/20);
}
&__business {
@include margin(0.5);
}
&__rating {
@include margin(0.5);
}
@media #{$media-phone-landscape} {
&__author, &__comment {
margin-left: 0;
width: auto;
float: none;
@include margin();
}
&__text {
padding: 0;
}
}
}
@mixin _state_ballons($mod: '') {
.reviews-list#{$mod}{
.reviews-list {
&__item {
border-bottom:none;
}
&__text {
background: #C6C6C6;
color: white;
border-radius: 12px;
&:after {
position: absolute;
content: '';
right: 7px;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;
border-width: 35px 0 0 35px;
border-color: transparent transparent transparent #C6C6C6;
transform: rotate(-12deg);
left: -25px;
transform: scaleY(-1) rotate(-90deg);
}
}
}
}
}
@include _state_ballons('.is-balloons');
.sale-interview {
&__title {
@include mtop(3);
@include mbot(2.5);
font-size: 30/14*100%;
line-height: (41/30);
font-weight: bold;
margin-left: 20%;
margin-right: 20px;
}
&__subtitle {
@include mtop(2);
@include mbot(1.5);
font-size: 24/14*100%;
font-weight: bold;
}
&__plate {
padding: 20px;
background-color: #eee;
}
&__fields-title {
font-weight: bold;
font-size: 20/12*100%;
@include mbot(1);
@include mtop(1);
}
&__fields-desc {
@include mbot(1);
@include mtop(1);
}
&__fields-list {
display: table;
width: 100%;
&.is-stars-list{
width: auto;
.sale-interview__label{
white-space: nowrap;
text-align: left;
padding-left: 10px;
}
}
}
&__field {
display: table-row;
&.is-error {
.sale-interview__error {
display: block;
}
}
&.is-none {
.sale-interview__none {
display: block;
}
}
&.js-pass-change {
display: none;
}
}
&__buttons {
@include margin;
}
&__label {
display: table-cell;
vertical-align: top;
text-align: right;
padding: 15px 10px 0 0;
width: 150px;
&.is-captcha {
padding-bottom: 1em;
vertical-align: bottom;
}
}
&__item {
display: table-cell;
vertical-align: top;
padding: 10px 0 10px 10px;
@include clearfix;
input[type='text'],
input[type='email'],
input[type='password'],
textarea {
width: 100%;
}
}
&__add-link {
display: inline-block;
margin-left: 1em;
}
&__list {
list-style: none;
margin: 5px 0;
padding: 0;
&.is-horizontal {
margin: 0;
.sale-interview__list-item {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 1.5em;
}
}
}
&__list-item {
@include margin(10/20);
}
&__error {
display: none;
color: $color-status-error;
}
&__none {
display: none;
color: $color-status-error;
}
&__ok {
display: none;
margin-top: 5px;
}
&__remark {
margin-top: 5px;
margin-bottom: 20px;
font-size: 85%;
}
&__inputs {
float: left;
width: 45%;
margin-right: 5%;
}
&__message {
float: left;
max-width: 35%;
margin-top: 3px;
}
&__inputs-link {
display: inline-block;
padding-top: 5px;
margin-right: 1em;
}
&__link {
display: inline-block;
color: #0b8bfb;
text-decoration: underline;
cursor: pointer;
margin: 0 10px;
&:hover {
text-decoration: none;
}
}
&__captcha {
display: table;
width: 45%;
@include margin(10/20);
}
&__captcha-img {
display: table-cell;
vertical-align: middle;
width: 50%;
img {
vertical-align: top;
}
}
&__captcha-reload {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
padding-left: 15px;
}
&__socials-holder {
padding: 15px 25px 25px;
background-color: #ccc;
}
&__socials-caption {
font-weight: bold;
font-size: 18/14*100%;
text-align: center;
}
&__socials {
text-align: center;
@include margin(20/20);
}
&__socials-item {
display: inline-block;
vertical-align: middle;
margin-right: .25em;
margin-left: .25em;
}
&__socials-link {
display: inline-block;
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 50%;
text-align: center;
&.is-ok {
@include fa-icon($fa-var-google-plus);
line-height: 50px;
font-size: 20px;
}
&.is-vk {
@include fa-icon($fa-var-vk);
line-height: 50px;
font-size: 20px;
}
&.is-tw {
@include fa-icon($fa-var-twitter);
line-height: 50px;
font-size: 20px;
}
&.is-fb {
@include fa-icon($fa-var-facebook);
line-height: 50px;
font-size: 20px;
}
}
&__link-items {
list-style: none;
margin: 0;
padding: 0;
@include margin(10/20);
}
&__link-item {
display: inline-block;
&:before {
content: ' | ';
margin-left: .5em;
margin-right: .5em;
}
&:first-child:before {
content: none;
}
}
.select2-container {
min-width: 100%;
max-width: 100%;
}
@media #{$media-phone-landscape} {
&__fields-list.is-stars-list {
display: block;
.sale-interview {
&__field {
display: flex;
flex-direction: column;
@include margin;
}
&__item {
display: block;
order: 2;
width: auto;
padding-left: 0;
}
&__label {
display: block;
order: 1;
padding: 0;
width: auto;
white-space: pre-wrap;
text-align: left;
}
}
}
}
@media #{$media-phone} {
&__fields-list {
display: block;
}
&__field {
display: flex;
flex-direction: column;
@include margin;
}
&__item {
display: block;
order: 2;
width: auto;
padding-left: 0;
}
&__label {
display: block;
order: 1;
padding: 0;
width: auto;
white-space: pre-wrap;
text-align: left;
.sale-interview__fields-list.is-stars-list & {
width: auto;
padding-left: 0;
white-space: pre-wrap;
}
}
&__label-link,
&__label-text {
display: inline-block;
vertical-align: middle;
width: 70%;
padding-left: 10px;
box-sizing: border-box;
}
&__img {
display: inline-block;
vertical-align: middle;
width: 30%;
}
}
}
.search-b2b {
&__form-container {
clear: both;
display: inline-block;
}
&__form-block {
@include columnizer(8);
margin-bottom: 40px;
margin-left:0px;
display: inline-block;
}
&__description-block {
@include columnizer(4);
margin-bottom: 40px;
display: inline-block;
}
&__text-container {
margin-bottom: 15px;
}
&__text {
width: 100%;
}
&__button-container {
text-align: right;
}
@media #{$media-phone-landscape} {
&__form-container {
display: flex;
flex-direction: column;
}
&__form-block,
&__description-block {
float: none;
width: auto;
margin: 0;
display: block;
}
&__description-block {
order: 1;
margin-bottom: $bm;
}
&__form-block {
order: 2;
}
}
}
.search-b2b-form {
&__form {
@include mbot(2);
@include columnizer(7);
float: left;
}
&__desc {
@include mbot(2);
@include columnizer(5);
float: right;
}
&__textarea {
width: 100%;
height: 270px;
overflow-y: scroll;
}
&__field {
@include mbot(2);
}
&__submit {
float: right;
}
@media #{$media-phone-landscape} {
&__submit {
float: none;
}
&__form {
float: none;
width: auto;
}
&__desc {
float: none;
width: auto;
@include margin(1);
}
&__field {
@include margin(1);
}
}
}
.search-b2b-results {
&__title {
@include mtop(3);
@include mbot(2.5);
font-size: 30/14*100%;
line-height: (41/30);
font-weight: bold;
margin-left: 20%;
margin-right: 20px;
}
&__subtitle {
@include mtop(2);
@include mbot(1.5);
font-size: 24/14*100%;
font-weight: bold;
}
&__title-inner {
@include mtop(1);
@include mbot(1);
font-size: 16/14*100%;
font-weight: bold;
}
&__table {
@include mbot(1);
display: table;
box-sizing: border-box;
width: 100%;
}
&__table-title {
@include mbot(.25);
color: #999999;
font-size: 12/14*100%;
}
&__table-head {
display: table-row;
background: #F0F0F0;
color: #999999;
}
&__table-item {
display: table-row;
background: #F6F6F6;
}
&__table-cell {
display: table-cell;
padding: 7px 5px;
border: 1px solid darkgrey;
vertical-align: middle;
font-size: 11/14*100%;
&.is-head {
padding: 2px 0px 2px 10px;
border: none;
font-size: 12/14*100%;
}
}
&__info {
position: relative;
display: block;
font-size: 14/14*100%;
margin: 0px 5px;
@include fa-icon($fa-var-info);
}
&__link {
text-decoration: none;
}
}
.search-b2b-title {
&__name {
font-size: 90%;
line-height: $line-height-base;
}
&__title-holder {
position: relative;
padding: 10px 15px;
min-width: 280px;
@include box-sizing;
background-color: gray;
}
&__field {
position: relative;
margin-right: 75px;
padding-right: 20px;
@include box-sizing;
}
&__submit {
@extend .button;
position: absolute;
left: 100%;
}
&.is-hide-input{
.search-title__input {
width: 0;
padding: 0;
margin: 0;
border: none;
}
}
&__input {
width: 100%;
border-radius: 5px;
transition: all .4s;
}
&__results-holder {
position: absolute;
left: 15px;
right: 110px;
top: 100%;
margin-top: -10px;
background-color: #fff;
padding: 20px 20px 10px;
border: 1px solid gray;
z-index: 100;
}
&__result-items {
display: table;
box-sizing: border-box;
}
&__result-item {
display: table-row;
}
&__img-holder {
display: table-cell;
vertical-align: middle;
padding: 5px 0px 5px 0;
}
&__img {
max-width: 100%;
height: auto;
vertical-align: top;
}
&__name-holder {
display: table-cell;
vertical-align: middle;
padding: 5px 15px;
}
&__price-holder {
display: table-cell;
vertical-align: middle;
padding: 5px 15px;
text-align: right;
}
&__price {
white-space: nowrap;
}
&__match {
font-weight: bold;
}
&__more-holder {
@include margin(20/20);
}
}
.search-result {
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__search-field {
@include margin(10/20);
}
&__amount {
@include margin(10/20);
}
&__head {
@include mbot(20/20);
}
&__head-link {
font-size: 18/14*100%;
font-weight: bold;
color: $background;
transition: color .25s;
text-decoration: none;
&:hover {
color: $accent;
}
}
&__preview {
@include mbot(30/20);
padding-bottom: 20px;
@include thin-border-bottom();
}
&__list {
@include margin(20/20);
border-top: 1px solid #dbdfe1;
}
&__match {
font-weight: bold;
}
&__breadcrumbs {
font-size: 90%;
@include margin(5/20);
font-style: italic;
color: #999999;
}
&__breadcrumbs-list {
list-style: none;
margin-left: 0;
}
&__breadcrumbs-item {
display: inline;
&:before {
content: "/";
margin: 0 5px;
}
&:first-child:before {
display: none;
}
}
&__breadcrumbs-link {
text-decoration: underline;
color: #999999;
&:hover {
text-decoration: none;
color: #999999;
}
}
@media #{$media-phone-landscape} {
&__head {
margin-bottom: 0.5 * $bm;
}
&__preview {
@include mbot(1);
}
}
}
@mixin _state_searcpage($mod:'') {
.search-result#{$mod} {
.search-result {
}
}
}
@include _state_searcpage('.is-searchpage');
.title-search-result{
left: inherit !important;
right: 0 !important;
min-width: 350px !important;
top: 125px !important;
position: fixed !important;
transition: top .25s;
&.is-fixed-top-menu{
top: 116px !important;
}
}
.search-title {
&.desktop {
float: right;
padding-top: 13px;//20px;
}
&.manual {
.search-title {
&__input {
background: #fff;
transition: all .4s;
width: 90%;
height: 70px;
padding-left: 15px;
border: none;
font-size: 1.8em;
}
&__search-field {
margin-bottom: 30px;
border: 2px solid #eb6852;
border-radius: 4px;
}
&__clearfield {
position: absolute;
right: 11%;
top: 0;
bottom: 0;
font-size: 2em;
background: none;
border: none;
color: #dcdcdc;
cursor:pointer;
&:hover {
color: #c6c6c6;
}
}
&__submit {
&-loop {
@extend .button;
padding: 0;
font-size: 2.1em;
background: $accent;
color: #fff;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 10%;
border-radius: 0;
transition: color, background .25s;
&:hover {
background: darken($accent, 10%);
}
}
padding: 8px 55px;
font-size: 16px;
display: block !important;
color: #fff;
background-color: $accent;
transition: background-color .25s;
&:hover{
background-color: $accent-hover;
color: #fff;
}
}
&__head {
margin-bottom: 15px;
}
&__head-link {
text-decoration: none;
color: $background;
&:hover {
color: $accent;
}
}
&__head-text {
font-size: 16px;
}
&__field {
position: relative;
@include box-sizing;
transition: all .3s;
}
@media #{$media-phone-landscape} {
&__submit-loop{
width: 20%;
}
&__input {
width: 80%;
}
&__clearfield {
right: 22%;
}
}
}
}
&__name {
font-size: 90%;
line-height: $line-height-base;
color: $accent;
}
&__field {
position: relative;
@include box-sizing;
transition: all .3s;
}
&__submit {
@extend .button;
float: right;
margin-left: $bm;
line-height: 2;
background-color: #e64024;
transition: background-color .25s;
color: #fff;
&:hover{
background-color: $accent-hover;
color: #fff;
}
//display: none;
}
&__icon {
@include fa-icon($fa-var-search);
float: right;
padding-left: $bm;
color: #000;
font-size: 170%;
display: none;
transition: color .25s;
&:hover{
color: $accent;
}
@media screen and (max-width: 992px) {
font-size: 150%;
}
}
&__close {
@include fa-icon($fa-var-close);
float: right;
margin-left: $bm;
color: white;
font-size: 120%;
display: none;
}
&__input-holder {
display: block;
overflow: hidden;
}
&.is-hide-input{
.search-title__input {
display: none;
}
.search-title__submit {
display: none;
}
.search-title__icon {
display: block;
}
.search-title__close {
}
}
&.is-visible {
.search-title {
&__field {
position: absolute;
left: 0;
top: -10px;
bottom: -12px;
right: 0;
background: $accent;
@include box-sizing;
padding: 20px;
z-index: 1;
}
&__close {
display: block;
margin-top: 5px;
}
}
}
&__input {
width: 100%;
transition: all .4s;
border: none;
background-color: #fff;//darken($accent, 10%);
color: #000;
font-size: 18px;
}
&__results-holder {
position: absolute;
left: 0px;
top: 100%;
margin-top: -10px;
background-color: #fff;
padding: 16px 10px 10px;
border: 1px solid gray;
z-index: 100;
}
&__result-items {
display: table;
box-sizing: border-box;
}
&__result-item {
display: table-row;
}
&__img-holder {
display: table-cell;
vertical-align: middle;
padding: 5px 0px 5px 0;
width:40px;
height: 40px;
text-align: center;
}
&__img {
max-width: 100%;
max-height: 100%;
height: auto;
vertical-align: top;
}
&__name-holder {
display: table-cell;
vertical-align: middle;
padding: 5px 10px;
}
&__price-holder {
display: table-cell;
vertical-align: middle;
padding: 5px 10px;
text-align: right;
}
&__price {
white-space: nowrap;
}
&__match {
font-weight: bold;
}
&__more-holder {
@include margin(20/20);
}
&__more{
color: $accent;
}
}
@mixin _state_b2b($mod:'') {
.search-title#{$mod} {
background-color: gray;
padding: 10px;
.search-title {
&__title-holder {
@include columnizerParent(9);
}
&__form {
@include columnizer(7,9);
}
&__b2b {
@include columnizer(2,9);
position: relative;
padding-top: 0.3em;
}
&__b2b-link {
color: white;
vertical-align: middle;
}
&__b2b-explain {
display: inline-block;
width: 1.5em;
height: 1.5em;
text-align: center;
font-size: 80%;
border-radius: 50%;
background: #ddd;
margin-left: 1em;
vertical-align: middle;
@include box-sizing;
padding-top: 0.15em;
cursor: help;
&:before {
content: '?';
}
}
&__b2b-tooltip {
width: 100%;
position: absolute;
right: 0;
top: 2.5em;
background: #eee;
font-size: 80%;
padding: 5px 10px;
@include box-sizing;
display: none;
z-index: 100;
&.is-visible {
display: block;
}
}
@media #{$media-phone-landscape} {
&__title-holder {
@include columnizerParent(12);
}
&__form {
@include columnizer(12);
}
&__b2b {
@include columnizer(12);
}
&__field {
padding-right: 10px;
}
&__b2b-tooltip {
font-size: 100%;
}
}
}
}
}
@media #{$media-desktop}{
.search-title {
&.manual {
.search-title {
&__input {
width: calc(80% - 10px);
}
&__submit{
width: calc(20% - 11px);
padding: 8px 2%;
}
}
}
}
}
@media #{$media-phone}{
.search-title {
&.manual {
.search-title {
&__submit{
padding: 10px 2%;
font-size: 12px;
}
}
}
}
}
@include _state_b2b('.is-b2b');
.layout__header.is-fixed-top-menu{
.search-title {
&.is-visible {
.search-title {
&__field {
padding-top: 14px;
}
}
}
}
}
@mixin _state_searcpage_title($mod:'') {
.search-title#{$mod} {
.search-title{
&__input {
background: #fff;
border: 3px solid $accent;
height: 3em;
padding-right: 90px;
color: #333;
}
&__submit-loop {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 80px;
margin: 0;
border-radius: 0;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 1.7em;
text-rendering: auto;
transform: translate(0, 0);
background: $accent;
color: #fff;
border: none;
outline: none;
}
&__clearfield {
position: absolute;
top: 17%;
background: no-repeat;
border: none;
font-size: 1.8em;
right: 90px;
color: #999999;
}
}
}
}
@include _state_searcpage_title('.is-searchpage');
.section-detail {
&__picture-holder {
@include mbot(20/20);
text-align: center;
}
&__picture {
display: inline-block;
max-width: 100%;
}
&__content-holder {
}
}
.section-intro {
&__image-holder {
text-align: center;
@include margin;
}
&__text {
@include margin;
font-size: 150%;
}
&__image {
max-width: 100%;
}
}
.section-modal {
display: none;
@include clearfix;
&__item {
@include columnizer(4);
padding: 2% 2% 2% 0;
&:nth-child(1+2n) {
margin-left: 0;
}
}
&__container-img {
width: 25%;
float: left;
}
&__container-section {
float: left;
width: 60%;
margin-left: 20px;
margin-top: 30px;
word-wrap: break-word;
}
&__main-section {
font-size: 16px;
font-weight: bold;
margin-bottom: 30px;
}
&__img-main {
max-width: 100%;
width:auto;
height: 100%;
vertical-align: top;
}
}
.section-tiles {
&.catalog {
margin-bottom: 50px;
.section-tiles {
&__item {
//@include columnizer(4);
margin-left: 0;
//display: flex;
margin-top: 0;
margin-bottom: 2.5%;
width: calc(100%/3);
}
&__items {
width: 100%;
margin: 0;
//display: flex;
//margin: 0 auto;
}
&__img-link {
//padding: 5px;
//border: 1px solid #ccc;
//border-radius: 5px;
text-align: center;
}
&__img-holder {
margin-bottom: 30px;
}
&__title-section {
margin-bottom: 20px;
}
&__tile{
padding: 0 3%;
position: relative;
margin: 0 2%;
}
&__content{
font-size: 16px;
p{
line-height: 1.6;
}
}
}
}
&__content-list{
padding-left: $base-horizontal-margin *1.5;
&.is-hide{
display: none;
}
li {
@include margin(0.5);
position: relative;
padding-left: 16px;
}
ul > li:before {
content: '';
position: absolute;
background-position: 50% 50%;
background-size: 8px;
width: 8px;
height: 8px;
left: 0px;
top: 5px;
background-image: url('data:image/svg+xml;charset%3DUS-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"8"%20height%3D"8"%20viewBox%3D"0%200%208%208"><path%20fill%3D"%230E1D3F"%20d%3D"M4%208C1.8%208%200%206.2%200%204s1.8-4%204-4%204%201.8%204%204-1.8%204-4%204zm0-6.3c-1.3%200-2.3%201-2.3%202.3s1%202.3%202.3%202.3%202.3-1%202.3-2.3-1-2.3-2.3-2.3z"%2F><%2Fsvg>');
background-repeat: no-repeat;
}
}
&.description{
p{
font-size: 19px;
}
margin-bottom: 50px;
}
&__items {
@include columnizerParent;
//margin-top: - getcolumnmargin();
}
&.home {
.section-tiles__item {
font-size: 18px;
}
}
&__item {
@include columnizer(6);
margin-top: getcolumnmargin();
&:nth-child(3n+1) {
clear: left;
}
}
&__content-section {
position: relative;
}
&__img-holder {
@include margin(10/20);
//border: 1px solid #ddd;
}
&__img-main {
//max-width: 100%;
width: 80%;
height: auto;
vertical-align: top;
}
&__title-section {
@include margin(15/20);
}
&__title {
text-align: center;
}
&__btn-buy{
padding: 8px 40px;
background-color: $accent;
display: inline-block;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background-color .25s;
text-decoration: none !important;
max-width: 100%;
&:hover{
background-color: $accent-hover;
}
}
&__table-left, &__table-right{
display: inline-block;
vertical-align: top;
}
&__table-left{
width: calc(30% - 2%);
}
&__table-right{
width: calc(70% - 2%);
&.bordered{
border-left: 1px solid $pistacho;
height: calc(100% - 2.5%);
}
}
&__filter-list{
padding: 8% 8%;
}
&__filter-group{
display: block;
margin-top: 15px;
margin-bottom: 20px;
}
&__filter-group-btns{
padding-top: 15px;
border-top: 1px solid $pistacho;
}
&__filter-reset{
display: inline-block;
margin-left: 5%;
cursor: pointer;
transition: color .25s;
&:hover{
color: $background;
}
}
&__filter-icon{
transition: all .3s ease;
font-size: 16px;
position: relative;
left: 5px;
@include fa-icon-is($fa-var-angle-right);
&.active{
&:before{
transform: rotate(90deg);
font-size: 25px;
position: absolute;
margin-left: 5px;
margin-top: -1px;
}
}
&:before{
transition: all .3s ease;
transform: rotate(0deg);
font-size: 25px;
position: absolute;
margin-left: 5px;
margin-top: -1px;
}
}
&__filter-button{
font-size: 16px;
color: $background;
cursor: pointer;
}
&__filter-label{
font-size: 14px;
}
&__filter-item{
margin-top: 8px;
margin-bottom: 8px;
}
&__catalog-title-wrap{
border-top: 1px solid $pistacho;
border-bottom: 1px solid $pistacho;
padding: 12px 0;
text-align: center;
font-weight: bold;
}
&__catalog-filters{
text-align: left;
position: relative;
top: -10px;
}
&__compare{
&-holder{
margin-top: 20px !important;
//position: absolute;
right: 25px;
width: 65%;
text-align: left;
margin-left: auto;
}
&-input{
margin-bottom: 15px;
text-align: left;
}
}
&__series{
color: #333;
font-size: 19px;
margin-top: 0px;
}
&__title-text {
//font-weight: bold;
text-decoration: none;
color: $accent;
font-size: 26px;
&:hover {
//text-decoration: underline;
color: $accent-hover;
text-decoration: none;
}
}
&__bonus{
&-item{
display: inline-block;
margin-left: 5px;
vertical-align: top;
&:first-child{
margin-left:0;
}
}
&-offer{
border: 2px solid #00a651;
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
text-transform: uppercase;
font-weight: bold;
color: #00a651;
}
&-green{
color: #00a651;
border-color: #00a651;;
}
&-red{
color: #e10000;
border-color: #e10000;;
}
&-yellow{
color: #e6c300;
border-color: #e6c300;;
}
}
&__content-section {
@include margin(10/20);
position: relative;
padding-bottom: 25px;
}
&__top{
//border-bottom: 1px solid #cbcfd2;
}
&__bottom{
margin-top: 20px;
border-top: 1px solid $pistacho;
}
&__bottom-section {
@include margin(10/20);
}
&__link-items {
list-style: none;
margin: 0;
@include pbot(10/20);
background: #fff;
}
&__link-item {
@include margin(5/20);
&.is-line {
display: inline-block;
margin: 0;
margin-right: .5em;
}
}
&__links-text {
color: $color-link;
}
&__links-item{
margin-bottom: 11px;
}
&__btns-holder {
@include margin(10/20);
}
&__btn-all-holder {
@include margin(40/20);
text-align: center;
}
&__recommendations{
background-color: $pistacho;
padding: 80px 0;
&-title{
text-align: center;
font-weight: 400;
margin-top: 0;
margin-bottom: 35px;
font-size: 40px;
color: $background;
}
}
&__label{
width: 100%;
max-width: 380px;
display: block;
color: #fff;
background: #041e41;
font-family: $font-base;
font-weight: 500;
box-sizing: border-box;
text-align: center;
padding: 15px 0;
margin: 0 auto;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow: hidden;
}
&__characteristics{
list-style-type: none !important;
}
&__characteristic{
@include fa-icon-is($fa-var-circle-o);
&:before{
font-size: 10px;
font-weight: bold;
position: absolute;
left: 18px;
margin-top: 3px;
}
}
}
@media #{$media-phone-landscape} {
.section-tiles {
&.catalog {
.section-tiles {
&__item {
width: 100%;
margin-left: 0;
margin-bottom: 50px;
float: none;
}
&__items {
width: 100%;
}
&__img-holder{
margin-bottom: 10px;
text-align: center;
}
&__label{
max-width: 100%;
}
&__img-main{
width: 50%;
}
}
}
}
}
@mixin _state_3cols($mod:'') {
.section-tiles#{$mod} {
.section-tiles {
&__items {
@include columnizerParent(9);
margin-top: - getcolumnmargin(9);
}
&__item {
@include columnizer(2, 9);
margin-top: getcolumnmargin(9);
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
}
}
@mixin _state_2cols($mod:'') {
.section-tiles#{$mod} {
.section-tiles {
&__items {
@include columnizerParent(6);
margin-top: - getcolumnmargin(6);
}
&__item {
@include columnizer(3, 6);
margin-top: getcolumnmargin(6);
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
}
@mixin _state_flat($mod:'') {
.section-tiles#{$mod} {
.section-tiles {
&__items {
margin-left: 0;
}
&__item {
float: none;
width: auto;
margin-left: 0;
@include margin(40/20);
}
}
}
}
@mixin _state_hover($mod:'') {
.section-tiles#{$mod} {
.section-tiles {
@media #{$media-not-mobile} {
&__item {
.section-tiles__bottom-section {
position: absolute;
top: 0;
z-index: 0;
max-height: 0;
overflow: hidden;
}
}
&__item:hover {
.section-tiles__bottom-section {
max-height: 100%;
min-height: 100%;
z-index: 3;
background: #fff;
top: 0;
margin-top: 0;
width: 100%;
overflow: visible;
}
}
}
}
}
}
@mixin _state_icons($mod:'') {
.section-tiles#{$mod} {
.section-tiles {
&__item {
@include columnizer(2);
&:nth-child(4n+1),
&:nth-child(3n+1),
&:nth-child(2n+1) {
clear: none;
}
&:nth-child(6n+1) {
clear: left;
}
}
&__img-holder {
text-align: center;
width: 160px;
height: 160px;
}
&__title {
text-align: center;
}
&__img-main{
border-radius: 50%;
width: 100%;
&:before {
line-height: 160px;
margin-left: -5px;
}
}
@media #{$media-desktop} {
&__item {
@include columnizer(3);
&:nth-child(6n+1) {
clear: none;
}
&:nth-child(4n+1) {
clear: left;
}
margin-bottom: 20px;
}
}
@media #{$media-phone-landscape} {
&__item {
@include columnizer(4);
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
&__img-holder {
width: 80%;
margin-left: 10%;
height: auto;
}
}
@media #{$media-phone} {
&__item {
@include columnizer(6);
clear: none;
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
padding-bottom: 0;
border-bottom: 0;
}
&__tile {
padding-left: 0;
}
&__img-holder {
width: 80%;
margin-left: 10%;
height: auto;
}
}
}
}
}
@mixin _adaptive_raw() {
@media #{$media-phone-landscape} {
&__item {
@include columnizer(6);
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__items {
margin-top: 0;
}
&__item {
@include columnizer(12);
&:nth-child(2n+1) {
clear: none;
}
clear: left;
margin-bottom: 10px;
margin-top: 0;
padding-bottom: 10px;
@include thin-border-bottom();
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
&__tile {
padding-left: 100px;
@include clearfix();
}
&__title-section {
margin-top: 0;
}
&__img-holder {
//float: left;
//margin-left: -100px;
width: 100%;
margin-bottom: 15px;
}
&__btns-holder {
display: none;
}
&__content {
//display: none;
}
&__content-section {
margin-bottom: 0;
}
&__link-items {
padding-bottom: 0;
}
&__link-item {
font-size: 90%;
}
&__link-text {
@include link-gray();
}
}
}
@mixin _adaptive($mod:'') {
@if $mod == '' {
.section-tiles {
@include _adaptive_raw();
}
} @else {
.section-tiles#{$mod} {
.section-tiles {
@include _adaptive_raw();
}
}
}
}
@include _state_3cols('.is-3cols');
@include _state_2cols('.is-2cols');
@include _adaptive();
@include _adaptive('.is-3cols');
@include _adaptive('.is-2cols');
@include _state_flat('.is-flat');
@include _state_hover('.is-hover');
@include _state_icons('.is-icons');
.sections-wall {
&__first-level {
list-style: none;
margin: 0;
padding: 0;
@include columnizerParent;
}
&__first-item {
@include columnizer(4);
float: none;
overflow: hidden;
margin-bottom: getcolumnmargin();
padding: 15px 0;
&.is-left {
float: left;
overflow: visible;
margin-right: getcolumnmargin();
clear: left;
}
&.is-right {
float: right;
overflow: visible;
clear: right;
}
}
&__first-link {
font-size: 125%;
margin-left: 20px;
text-decoration: none;
color: black;
&:hover {
text-decoration: underline;
color: black;
}
}
&__second-holder {
@include margin(10/20);
}
&__second-item {
padding: 10px 20px;
border-bottom: 1px solid #eee;
}
&__second-link {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.sidebar-menu {
position: relative;
&__plate {
border: 1px solid gray;
border-bottom: none;
}
&__first-level {
margin: 0;
padding: 0;
list-style: none;
}
&__first-item {
}
&__first-link {
position: relative;
display: block;
padding: 10px 20px 10px 30px;
vertical-align: top;
font-size: 14/14*100%;
font-weight: bold;
box-sizing: border-box;
border-bottom: 1px solid gray;
&:before {
@include fa-icon($fa-var-angle-double-right, true);
position: absolute;
left: 11px;
top: 50%;
margin-top: -8px;
}
}
&__second-holder {
}
&__second-level {
margin: 0;
padding: 0;
list-style: none;
}
&__second-item {
position: relative;
}
&__second-link {
position: relative;
display: block;
padding: 10px 20px 10px 30px;
vertical-align: top;
border-bottom: 1px solid gray;
&:before {
@include fa-icon($fa-var-angle-right, true);
position: absolute;
left: 13px;
top: 50%;
margin-top: -8px;
}
}
&__third-holder {
display: none;
position: absolute;
left: 100%;
top: -1px;
width: 100%;
max-width: 300px;
background-color: #eee;
border: 1px solid gray;
border-bottom: none;
}
&__third-level {
}
&__third-item {
position: relative;
}
&__third-link {
position: relative;
display: block;
padding: 10px 20px 10px 20px;
vertical-align: top;
box-sizing: border-box;
border-bottom: 1px solid gray;
}
&__fourth-holder {
display: none;
position: absolute;
left: 100%;
top: -1px;
width: 100%;
max-width: 300px;
background-color: #eee;
border: 1px solid gray;
border-bottom: none;
}
&__fourth-level {
}
&__fourth-item {
@include mbot(10/20);
}
&__fourth-link {
position: relative;
display: block;
padding: 10px 20px 10px 20px;
vertical-align: top;
box-sizing: border-box;
border-bottom: 1px solid gray;
}
&__plate {
background-color: #eee;
}
&__qtty {
position: absolute;
right: 15px;
top: 50%;
margin-top: -10px;
font-weight: 400;
}
&__second-item:hover .sidebar-menu__third-holder,
&__third-item:hover .sidebar-menu__fourth-holder {
display: block;
}
&__first-item.is-opened .sidebar-menu__qtty {
display: none;
}
}
.site-selector {
display: inline-block;
padding: 10px;
background-color: #f1f1f1;
text-decoration: none;
color: inherit;
&:hover {
@include opacity(.8);
}
}
.sitemap {
a {
color: $color-text;
}
&__title {
display: block;
margin-top: 0px;
margin-bottom: 20px;
text-decoration: underline;
font-size: 14/14*100%;
font-weight: bold;
}
&__title-2 {
display: block;
@include mbot(20/20);
text-decoration: underline;
font-size: 12/14*100%;
font-weight: bold;
}
&__top-level {
@include columnizerParent;
list-style: none;
@include mbot(30/20);
margin-top: -20px;
}
&__top-item {
@include columnizer(3);
margin-top: 20px;
&:nth-child(4n+1) {
clear: left;
}
}
&__top-link-holder {
}
&__top-link {
display: block;
margin-bottom: 20px;
text-decoration: underline;
font-size: 12/14*100%;
font-weight: bold;
}
&__second-level {}
&__second-item {}
&__second-link {
text-decoration: none;
font-size: 12/14*100%;
&:hover {
text-decoration: underline;
}
}
&__third-level {
padding-left: 20px;
}
&__third-item {}
&__third-link {
text-decoration: none;
font-size: 12/14*100%;
&:hover {
text-decoration: underline;
}
}
&__fourth-level {
padding-left: 20px;
}
&__fourth-item {}
&__fourth-link {
text-decoration: none;
font-size: 11/14*100%;
&:hover {
text-decoration: underline;
}
}
@media #{$media-phone-landscape} {
&__zero-item {
&.is-0-deep {
@include columnizer(6);
clear: none;
&:nth-child(2n+1) {
clear: left;
}
}
}
&__top-item {
@include columnizer(6);
margin-top: 20px;
&:nth-child(2n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__zero-item {
&.is-0-deep {
@include columnizer(12);
clear: left;
}
}
&__top-item {
@include columnizer(12);
margin-top: 20px;
clear: left;
}
}
}
.smart-filter {
position: relative;
height: 100%;
&__caption {
@include margin(15/20);
font-size: 16/14*100%;
font-weight: 600;
}
&__fields {
list-style: none;
margin: 0 0 30px;
padding: 0 0 22px;
border-bottom: 1px solid $pistacho;
}
&__field {
margin: 0;
//border-bottom: 1px solid #d3d3d3;
&:first-child {
//border-top: 1px solid #d3d3d3;
}
&.is-open {
.smart-filter {
&__field-header {
&:before {
transform: rotate(90deg);
}
}
}
}
}
&__field-header {
position: relative;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
cursor: pointer;
color: $background;
@include clearfix;
&:before {
content: "\f105";
font: normal normal normal 14px/1 FontAwesome;
position: absolute;
left: 0;
top: 43%;
margin-top: -4px;
/* border: 10px solid transparent;
border-width: 4px 0px 4px 8px;
border-left-color: #383839;*/
transition: .4s transform;
font-size: 1.4em;
}
}
&__field-caption {
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
}
&__field-content {
padding-top: 5px;
padding-bottom: 15px;
}
&__full-reset {
font-size: 16px;
text-decoration: none;
color: $accent;
transition: color .25s;
&:hover {
color: $accent-hover;
}
}
&__footer {
text-align: center;
@include margin(10/20);
}
&__items {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
@include margin(10/20);
}
&__main {
padding-top: 20px;
padding-left: 50px;
padding-right: 45px;
}
&__apply-btn {
margin-right: 1em;
padding: 12px 30px;
background-color: $accent;
transition: background-color .25s;
color: #fff;
&:hover{
background-color: $accent-hover;
}
}
&__result-holder {
display: none;
position: absolute;
left: 100%;
z-index: 10;
}
&__result {
padding: 10px;
background-color: #eee;
}
&__result-num {
margin: 0 .5em;
font-weight: bold;
}
.checkbox__text {
font-size: 15px;
color: #171818;
}
.select2-container {
max-width: 100%;
min-width: 100%;
}
&:hover {
.smart-filter__result-holder {
display: block;
}
}
@media #{$media-phone-landscape} {
&__result-holder {
left: auto;
right: 0;
top: 0;
}
}
}
.smart-filter-dropdown {
position: relative;
height: 100%;
.rub {
font-size: inherit;
color: inherit;
}
&__caption {
@include margin(15/20);
font-size: 16/14*100%;
font-weight: 600;
float: left;
}
&__fields {
list-style: none;
margin: 0;
padding: 0 20px;
float: left;
width: (1/3)*100%;
box-sizing: border-box;
border-right: 1px solid #616161;
min-height: 100%;
&:last-child {
border-right: none;
}
}
&__field {
position: relative;
margin: 0;
@include margin(10/20);
&.is-open {
.smart-filter-dropdown {
&__field-header {
&:before {
transform: rotate(90deg);
}
}
&__field-content {
display: block;
}
}
}
}
&__field-header {
position: relative;
padding-left: 0;
padding-top: 5px;
padding-bottom: 5px;
cursor: pointer;
@include clearfix;
}
&__field-caption {
font-weight: bold;
cursor: pointer;
&:after {
@include fa-icon($fa-var-chevron-right, true);
display: inline-block;
width: 11px;
height: 11px;
margin-left: 10px;
font-size: 90%;
}
}
&__field-content {
display: none;
position: absolute;
z-index: 5;
margin-top: 10px;
padding: 25px 30px;
width: 300px;
background-color: white;
border-radius: 5px;
@include box-shadow(0px, 0px, 10px, rgba(0,0,0,0.2));
&:before {
content: '';
position: absolute;
left: 10px;
bottom: 100%;
border: 10px solid transparent;
border-top: none;
border-bottom-color: white;
}
}
&__full-reset {
font-size: 12px;
text-decoration: none;
color: #828486;
}
&__footer {
text-align: center;
@include margin(10/20);
}
&__items {
list-style: none;
margin: 0;
padding: 0;
}
&__item {
@include margin(10/20);
}
&__main {
padding-top: 20px;
padding-bottom: 20px;
background: #eee;
@include clearfix;
}
&__apply-btn {
margin-right: 1em;
}
&__result-holder {
display: none;
position: absolute;
right: 0;
top: 100%;
}
&__result {
padding: 10px;
background-color: #eee;
}
&__result-num {
margin: 0 .5em;
font-weight: bold;
}
&__header {
@include clearfix;
}
&__header-ui {
float: right;
}
&__field-ui {
text-align: center;
@include mtop(20/20);
}
&__tag {
display: inline-block;
padding: 4px 12px;
margin: 5px;
background: white;
border-radius: 5px;
cursor: pointer;
color: black;
&:after {
@include fa-icon($fa-var-close, true);
width: 11px;
height: 11px;
margin-left: 5px;
color: gray;
}
&:hover {
@include opacity(.5);
&:after {
color: black;
}
}
}
&__items-set {
display: none;
padding-top: 20px;
padding-bottom: 20px;
background: #424242;
@include clearfix;
color: white;
}
.checkbox__text,
.radio__text{
font-size: 14px;
color: black;
}
.select2-container {
max-width: 100%;
min-width: 100%;
}
&:hover {
.smart-filter-dropdown__result-holder.is-visible {
display: block;
}
}
@media #{$media-phone-landscape} {
&__header {
display: none;
}
&__items-set {
display: block;
@include mobile-overflow();
}
&__main {
@include mobile-overflow();
padding-top: 5px;
display: none;
}
&__fields {
width: auto;
float: none;
padding: 0;
border-right: none;
min-height: 0;
@include margin(10/20);
}
&__field-content {
width: auto;
left: 0;
right: 0;
padding: 20px;
&.is-drop-left {
&:before {
left: 10px;
}
}
}
&__header-mobile {
display: block;
@include the-plate();
@include mobile-overflow();
}
&__header-mobile-text {
@include fa-icon-is($fa-var-sliders);
color: $color-accent-text;
&:before {
font-size: 150%;
margin-right: 10px;
vertical-align: middle;
}
}
&__items-set {
padding: 15px;
display: block;
}
&__items-set-item {
@include margin(0.5);
}
&__items-set-reset {
@include margin(0.5);
}
&__full-reset {
@include button();
}
}
}
.social-share {
&__items {
list-style: none;
padding: 0;
margin: 0;
}
&__item,
&__title {
display: inline-block;
margin-right: .5em;
margin-top: 5px;
margin-bottom: 5px;
vertical-align: baseline;
}
&__link {
display: block;
padding: 5px 15px;
background: $color-button-primary-bg;
font-size: 13px;
text-decoration: none;
color: $color-button-primary-text;
&:hover {
background: lighten($color-button-primary-bg, 20%);
color: $color-button-primary-text;
}
&:visited {
color: $color-button-primary-text;
}
&.is-facebook {
@include fa-icon($fa-var-facebook);
background: #3952A4;
}
&.is-twitter {
@include fa-icon($fa-var-twitter);
background: #0094D4;
}
&.is-google-plus {
@include fa-icon($fa-var-google-plus);
background: #C62F00;
}
&.is-linkedin {
@include fa-icon($fa-var-linkedin);
background: #006CAE;
}
&.is-vkontakte {
@include fa-icon($fa-var-vk);
background: #52769E;
}
&.is-odnoklassniki {
@include fa-icon($fa-var-odnoklassniki);
background: #ee8208;
}
}
@media #{$media-phone} {
&__title {
display: block;
}
&__link {
padding: 5px 10px;
}
}
}
.smart-tiles {
@include clearfix();
position: relative;
overflow: hidden;
// Элементы управления
&__grid {
position: absolute;
width: 99.8%;
height: 99.8%;
border: 1px solid #51c5ee;
z-index: 10;
&-tr {
height: 1px;
background-color: #51c5ee;
width: 100%;
position: absolute;
z-index: 10;
}
&-td {
width: 1px;
background-color: #51c5ee;
height: 100%;
position: absolute;
z-index: 10;
}
}
&__tiles {
position: relative;
width: 100%;
height: auto;
&:after {
content: "";
width: 100%;
height: 0;
display: block;
clear: both;
}
}
&__tile {
display: block;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
z-index: 2;
overflow: hidden;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
color: #262a33;
&.is-focus{
z-index: 3;
}
.is-light{
color: #b8d3ea;
}
text-decoration: none;
.smart-tiles__editor {
display: none;
cursor: move;
}
// Элементы управления
&:hover {
z-index: 30;
.smart-tiles__editor {
display: block;
z-index: 20;
position: absolute;
width: 100%;
height: 100%;
&-sizes {
background: rgba(66, 196, 243, 0.8);
padding: 5px 10px;
color: white;
font-weight: bold;
display: block;
float: left;
}
&-layers {
@include fa-icon($fa-var-clone);
background: rgba(253, 92, 90, 0.8);
padding: 5px 10px;
color: white;
font-weight: bold;
display: block;
float: left;
&:before {
margin-right: 5px;
}
}
&-handler {
@include fa-icon($fa-var-arrows-v);
position: absolute;
bottom: 0;
right: 0;
padding: 2px 11px;
background: rgba(66, 196, 243, 0.8);
color: white;
font-size: 20px;
cursor: pointer;
&:before {
transform: rotate(-45deg);
}
}
}
}
.promo-slider {
position: relative;
height: 100%;
&__slider, .slick-list, .slick-track {
position: relative;
height: 100%;
}
&__action {
@include padding(1);
@include pleft(1);
@include pright(1);
@include box-sizing();
}
}
.video-tiles {
position: relative;
height: 100%;
&__holder {
@include mleft(0);
position: relative;
height: 100%;
}
&__item {
float: none;
width: 100%;
position: relative;
height: 100%;
@include mleft(0);
@include mbot(0);
@include ptop(1);
@include pleft(1);
}
&__movie {
@include mbot(0);
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__movie-wrap {
width: 100%;
height: 100%;
}
&__poster {
width: 100%;
height: 100%;
}
&__heading {
position: relative;
z-index: 2;
@include mbot(0);
@include pbot(0.5);
}
&__date {
position: relative;
z-index: 2;
}
}
.section-tiles {
&__items {
@include mleft(0);
@include mtop(0);
}
&__item {
width: 100%;
@include mleft(0);
@include mtop(0);
}
&__link-items {
background: transparent;
}
}
.form-standart {
&__plate {
@include padding(0);
@include pleft(0);
@include pright(0);
background: transparent;
}
&__title {
@include mleft(0);
@include mbot(1);
text-align: left;
}
&.is-flat {
.form-standart__fields-list {
text-align: left;
}
.form-standart__title {
text-align: left;
}
.form-standart__field {
@include margin(0.75);
@include mleft(0);
@include mtop(0);
width: 45%;
&:last-child {
display: block;
}
&.is-field-btn {
.form-standart__label {
display: none;
}
}
}
}
}
.catalog-items {
&__col {
width: 100%;
@include mtop(0);
@include mleft(0);
}
&__cols {
@include mleft(0);
@include mright(0);
@include margin(0);
}
.catalog-plate.is-initiated:hover {
.catalog-plate__footer{
display: none;
}
.catalog-plate__wrap:before {
border: none;
box-shadow: none;
}
}
}
}
// Для статичной версии
&.is-static {
.smart-tiles__tile {
position: relative;
width: 25%;
height: 240px;
float: left;
background-color: lightgrey;
background-size: cover;
&.is-static-w2 {
width: 50%;
}
&.is-static-h2 {
height: 480px;
}
&.is-static-second-line {
margin-left: -25%;
&.is-static-w2 {
margin-left: -50%;
}
margin-top: 240px;
}
}
}
&__tile-content {
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
}
&__tile-text {
position: relative;
width: 100%;
height: 100%;
@include padding(1.5);
@include pleft(1.5);
@include pright(1.5);
box-sizing: border-box;
@media screen and (max-width: 1210px) {
@include padding(1.25);
@include pleft(1.25);
@include pright(1.25);
}
@media screen and (max-width: 767px) {
@include padding(1);
@include pleft(1);
@include pright(1);
}
@media screen and (max-width: 479px) {
@include padding(0.75);
@include pleft(0.75);
@include pright(0.75);
}
@media screen and (min-width: 1400px) {
@include padding(1.75);
@include pleft(1.75);
@include pright(1.75);
}
@media screen and (min-width: 2200px) {
@include padding(2);
@include pleft(2);
@include pright(2);
}
}
&__scale {
right: 15px;
bottom: 30px;
@include fa-icon($fa-var-arrows);
}
&__light {
right: 15px;
top: 30px;
@include fa-icon($fa-var-asterisk);
}
&__scale,
&__light {
position: absolute;
cursor: pointer;
z-index: 10;
&:before {
color: #1b1f27;
text-shadow: 1px 1px 2px rgba(48, 178, 226, 0.5), 1px -1px 2px rgba(48, 178, 226, 0.5), -1px 1px 2px rgba(48, 178, 226, 0.5), -1px -1px 2px rgba(48, 178, 226, 0.5) ;
}
}
&__tile.is-saving .tiles_scale,
&__tile.is-saving .tiles_light {
animation: rotationRight 0.5s linear infinite;
}
@keyframes rotationRight {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
&__tile.is-saving .tiles_scale:after,
&__tile.is-saving .tiles_light:after {
content: "" !important;
}
.is-show-in-desktop-media,
.is-show-in-tablet-media,
.is-show-in-phone_landscape-media,
.is-show-in-phone-media,
.is-show-in-base-media,
.is-show-in-large_screen-media,
.is-show-in-huge_screen-media,
.is-show-in-mega_screen-media,
.is-show-in-imac_screen-media {
display: none;
}
.is-show-in-base-media {
display: block;
}
@media screen and (max-width: 1210px) {
.is-show-in-desktop-media,
.is-show-in-tablet-media,
.is-show-in-phone_landscape-media,
.is-show-in-phone-media,
.is-show-in-base-media,
.is-show-in-large_screen-media,
.is-show-in-huge_screen-media,
.is-show-in-mega_screen-media,
.is-show-in-imac_screen-media {
display: none;
}
.is-show-in-desktop-media {
display: block;
}
}
@media screen and (max-width: 1023px) {
.is-show-in-desktop-media,
.is-show-in-tablet-media,
.is-show-in-phone_landscape-media,
.is-show-in-phone-media,
.is-show-in-base-media,
.is-show-in-large_screen-media,
.is-show-in-huge_screen-media,
.is-show-in-mega_screen-media,
.is-show-in-imac_screen-media {
display: none;
}
.is-show-in-tablet-media {
display: block;
}
}
@media screen and (max-width: 767px) {
.is-show-in-desktop-media,
.is-show-in-tablet-media,
.is-show-in-phone_landscape-media,
.is-show-in-phone-media,
.is-show-in-base-media,
.is-show-in-large_screen-media,
.is-show-in-huge_screen-media,
.is-show-in-mega_screen-media,
.is-show-in-imac_screen-media {
display: none;
}
.is-show-in-phone_landscape-media {
display: block;
}
}
@media screen and (max-width: 479px) {
.is-show-in-desktop-media,
.is-show-in-tablet-media,
.is-show-in-phone_landscape-media,
.is-show-in-phone-media,
.is-show-in-base-media,
.is-show-in-large_screen-media,
.is-show-in-huge_screen-media,
.is-show-in-mega_screen-media,
.is-show-in-imac_screen-media {
display: none;
}
.is-show-in-phone-media {
display: block;
}
}
@media screen and (min-width: 1400px) {
.is-show-in-desktop-media,
.is-show-in-tablet-media,
.is-show-in-phone_landscape-media,
.is-show-in-phone-media,
.is-show-in-base-media,
.is-show-in-large_screen-media,
.is-show-in-huge_screen-media,
.is-show-in-mega_screen-media,
.is-show-in-imac_screen-media {
display: none;
}
.is-show-in-large_screen-media {
display: block;
}
}
@media screen and (min-width: 1600px) {
.is-show-in-desktop-media,
.is-show-in-tablet-media,
.is-show-in-phone_landscape-media,
.is-show-in-phone-media,
.is-show-in-base-media,
.is-show-in-large_screen-media,
.is-show-in-huge_screen-media,
.is-show-in-mega_screen-media,
.is-show-in-imac_screen-media {
display: none;
}
.is-show-in-huge_screen-media {
display: block;
}
}
@media screen and (min-width: 1800px) {
.is-show-in-desktop-media,
.is-show-in-tablet-media,
.is-show-in-phone_landscape-media,
.is-show-in-phone-media,
.is-show-in-base-media,
.is-show-in-large_screen-media,
.is-show-in-huge_screen-media,
.is-show-in-mega_screen-media,
.is-show-in-imac_screen-media {
display: none;
}
.is-show-in-mega_screen-media {
display: block;
}
}
@media screen and (min-width: 2200px) {
.is-show-in-desktop-media,
.is-show-in-tablet-media,
.is-show-in-phone_landscape-media,
.is-show-in-phone-media,
.is-show-in-base-media,
.is-show-in-large_screen-media,
.is-show-in-huge_screen-media,
.is-show-in-mega_screen-media,
.is-show-in-imac_screen-media {
display: none;
}
.is-show-in-imac_screen-media {
display: block;
}
}
}
.social-widget {
text-align: center;
&__title {
@include mbot(20/20);
font-size: 16/14*100%;
font-weight: bold;
}
&__list {
margin: 0;
padding: 0;
list-style: none;
}
&__item {
display: inline-block;
vertical-align: top;
}
&__link {
position: relative;
display: block;
width: 40px;
height: 37px;
padding-top: 3px;
border-radius: 50%;
vertical-align: middle;
font-size: 20/14*100%;
&::before {
vertical-align: middle;
color: white;
}
&.is-fb {
@include fa-icon($fa-var-facebook);
background: #3952A4;
}
&.is-tw {
@include fa-icon($fa-var-twitter);
background: #0094D4;
}
&.is-gp {
@include fa-icon($fa-var-google-plus);
background: #C62F00;
}
&.is-in {
@include fa-icon($fa-var-linkedin);
background: #006CAE;
}
&.is-vk {
@include fa-icon($fa-var-vk);
background: #52769E;
}
}
}
.sub-menu {
&__first-level {
margin: 0;
padding: 0;
list-style: none;
}
&__first-item {
@include mbot(15/20);
}
&__first-link {
@include mbot(15/20);
display: inline-block;
vertical-align: top;
font-size: 16/14*100%;
//font-weight: bold;
color: #0099FF;
}
&__first-title {
@include mbot(15/20);
display: inline-block;
vertical-align: top;
font-size: 16/14*100%;
font-weight: bold;
}
&__second-holder {
padding-left: 20px;
}
&__second-level {
margin: 0;
padding: 0;
list-style: none;
}
&__second-item {
@include mbot(15/20);
}
&__second-link {
color: #0099FF;
}
}
.sub-menu-mobile {
&__title {
font-weight: bold;
font-size: 130%;
@include margin;
}
&__list {
margin: 0;
padding: 0;
list-style: none;
}
&__item {
@include mbot(0.75);
margin-left: $bm;
}
&__link {
}
}
.subscribe-form{
&__title {
@include mtop(3);
@include mbot(2.5);
font-size: 30/14*100%;
line-height: (41/30);
font-weight: bold;
margin-left: 20%;
margin-right: 20px;
}
&__subtitle {
@include mtop(2);
@include mbot(1.5);
font-size: 24/14*100%;
font-weight: bold;
}
&__plate {
@include the-plate();
}
&__fields-title {
font-weight: bold;
font-size: 20/12*100%;
@include mbot(1);
@include mtop(1);
}
&__fields-desc {
@include mbot(1);
@include mtop(1);
}
&__fields-list {
display: table;
width: 100%;
}
&__field {
display: table-row;
&.is-error {
.form-standart__error {
display: block;
}
}
&.is-none {
.form-standart__none {
display: block;
}
}
&.js-pass-change {
display: none;
}
}
&__buttons {
@include margin;
}
&__label {
display: table-cell;
vertical-align: top;
text-align: right;
padding: 15px 10px 0 0;
width: 150px;
&.is-captcha {
padding-bottom: 1em;
vertical-align: bottom;
}
}
&__item {
display: table-cell;
vertical-align: top;
padding: 10px 0 10px 10px;
@include clearfix;
input[type='text'],
input[type='email'],
input[type='password'],
textarea {
width: 100%;
}
}
&__add-link {
display: inline-block;
margin-left: 1em;
}
&__list {
list-style: none;
margin: 5px 0;
padding: 0;
&.is-horizontal {
margin: 0;
.form-standart__list-item {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 1.5em;
}
}
}
&__list-item {
@include margin(10/20);
}
&__error {
display: none;
color: $color-status-error;
}
&__none {
display: none;
color: $color-status-error;
}
&__ok {
display: none;
margin-top: 5px;
}
&__remark {
margin-top: 5px;
margin-bottom: 20px;
font-size: 85%;
}
&__inputs {
float: left;
width: 45%;
margin-right: 5%;
&.is-autowith{
width: auto;
}
}
&__message {
float: left;
max-width: 35%;
margin-top: 3px;
}
&__inputs-link {
display: inline-block;
padding-top: 5px;
margin-right: 1em;
}
&__link {
display: inline-block;
color: #0b8bfb;
text-decoration: underline;
cursor: pointer;
margin: 0 10px;
&:hover {
text-decoration: none;
}
}
&__captcha {
display: table;
width: 45%;
@include margin(10/20);
}
&__captcha-img {
display: table-cell;
vertical-align: middle;
width: 50%;
img {
vertical-align: top;
}
}
&__captcha-reload {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
padding-left: 15px;
}
&__socials-holder {
padding: 15px 25px 25px;
background-color: #ccc;
}
&__socials-caption {
font-weight: bold;
font-size: 18/14*100%;
text-align: center;
}
&__socials {
text-align: center;
@include margin(20/20);
}
&__socials-item {
display: inline-block;
vertical-align: middle;
margin-right: .25em;
margin-left: .25em;
}
&__socials-link {
display: inline-block;
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 50%;
text-align: center;
&.is-ok {
@include fa-icon($fa-var-google-plus);
line-height: 50px;
font-size: 20px;
}
&.is-vk {
@include fa-icon($fa-var-vk);
line-height: 50px;
font-size: 20px;
}
&.is-tw {
@include fa-icon($fa-var-twitter);
line-height: 50px;
font-size: 20px;
}
&.is-fb {
@include fa-icon($fa-var-facebook);
line-height: 50px;
font-size: 20px;
}
}
&__link-items {
list-style: none;
margin: 0;
padding: 0;
@include margin(10/20);
}
&__link-item {
display: inline-block;
&:before {
content: ' | ';
margin-left: .5em;
margin-right: .5em;
}
&:first-child:before {
content: none;
}
}
.select2-container {
min-width: 100%;
max-width: 100%;
}
@media #{$media-phone-landscape} {
&__item {
padding-left: 0;
}
}
}
.form-standart.is-auth {
.form-standart {
&__label {
width: 50px;
}
}
}
.subscribe-widget {
&__title {
font-size: 14px;
font-weight: bold;
margin-bottom: 15px;
}
&__description {
margin-bottom: 15px;
}
}
.support-page {
&__items {
padding: 0 !important;
@include clearfix;
}
&__item {
position: relative;
list-style-type: none;
float: left;
background-color: #f2f2f2;
padding: 50px 0;
box-sizing: border-box;
min-height: 320px;
border: 1px solid #ccc;
&.is-small {
margin: 0;
width: 50%;
}
&.is-fullwidth {
width: 100%;
margin-bottom: 50px;
margin-top: 50px;
.support-page__icon {
width: 15%;
background-position-y: 21%;
margin-left: 0;
}
.support-page__article {
margin-left: 15%;
}
//&:last-child {
// margin-top: 50px;
//}
}
}
&__article {
width: 80%;
margin: 0 auto;
display: inline-block;
vertical-align: top;
margin-left: 21%;
}
&__title {
font-size: 32px;
font-weight: bold;
margin-bottom: 30px;
color: $background;
}
&__text {
margin-bottom: 30px;
}
&__button {
}
&__link {
padding: 10px;
background-color: $accent;
text-transform: uppercase;
color: #fff !important;
text-decoration: none !important;
border-radius: 5px;
transition: background-color .25s;
&:hover{
background-color: $accent-hover;
}
}
&__icon {
position: absolute;
top: 0;
background-size: 49px;
width: 15%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 11px;
display: inline-block;
vertical-align: top;
background-position-y: 20%;
margin-left: 15px;
}
@media #{$media-desktop} {
&__item {
&.is-small {
width: 100%;
}
}
&__article{
margin-left: 15%;
}
&__icon{
width: 10%;
}
}
@media #{$media-phone-landscape} {
&__title{
font-size: 25px;
}
}
@media #{$media-phone} {
&__title{
font-size: 18px;
}
&__article{
width: 90%;
margin: 0;
padding: 0 5%;
}
&__icon{
display: none;
}
&__item {
min-height: 100px;
padding: 35px 0;
&.is-fullwidth{
.support-page__article{
margin-left: 0;
}
}
}
}
}
.tabs-block {
&__tab-changers {
list-style: none;
padding: 0;
margin: 0;
display: table;
width: 100%;
}
&__link-holder {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 5px 10px;
border: 1px solid transparent;
border-bottom-color: #e2e2e2;
cursor: pointer;
user-select: none;
&.is-active {
background-color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #e2e2e2;
border-bottom-color: white;
}
}
&__link {
display: inline-block;
width: 100%;
margin-bottom: -1px;
line-height: 1;
font-size: 14/15*100%;
text-decoration: none;
color: #0b8bfb;
@include box-sizing;
}
&__tab {
display: none;
padding-top: 30px;
font-size: 14/15*100%;
&.is-active {
display: block;
}
}
@media #{$media-phone-landscape} {
&__tab-changers {
display: none;
}
&__link-holder {
display: block;
padding: 0;
border: none;
text-align: left;
font-size: 120%;
@include margin;
&.is-active {
border: none;
font-weight: bold;
.tabs-block__link {
border-bottom: none;
&:after {
transform: rotate(90deg);
}
}
}
}
&__link {
width: auto;
//border-bottom: 1px dashed $color-accent-text;
&:after {
@include fa-icon($fa-var-angle-right, true);
font-size: 150%;
margin-left: 10px;
vertical-align: middle;
transition: transform 0.5s;
}
}
&__tab {
padding-top: 0;
}
}
}
.tabs-section {
@include margin(1);
&__photos{
@include margin(1);
}
&__tab-changers {
list-style: none;
padding: 0;
margin: 0;
display: table;
width: 100%;
}
&__link-holder {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 5px 10px;
border: 1px solid transparent;
border-bottom-color: #e2e2e2;
cursor: pointer;
user-select: none;
&.is-active {
background-color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #e2e2e2;
border-bottom-color: white;
}
}
&__link {
display: inline-block;
width: 100%;
margin-bottom: -1px;
line-height: 1;
font-size: 14/15*100%;
text-decoration: none;
color: #0b8bfb;
@include box-sizing;
}
&__tab {
display: none;
padding-top: 30px;
font-size: 14/15*100%;
&.is-active {
display: block;
}
}
@media #{$media-phone-landscape} {
&__tab-changers {
display: none;
}
&__link-holder {
display: block;
padding: 0;
border: none;
text-align: left;
font-size: 120%;
@include margin;
&.is-active {
border: none;
font-weight: bold;
.tabs-section__link {
border-bottom: none;
&:after {
transform: rotate(90deg);
}
}
}
}
&__link {
width: auto;
//border-bottom: 1px dashed $color-accent-text;
&:after {
@include fa-icon($fa-var-angle-right, true);
font-size: 150%;
margin-left: 10px;
vertical-align: middle;
transition: transform 0.5s;
}
}
&__tab {
padding-top: 0;
}
}
}
.tags-list {
&__head {
@include clearfix;
margin-bottom: 20px;
}
&__title {
float: left;
font-size: 20px;
font-weight: bold;
}
&__title-links {
float: right;
padding-top: 7px;
margin-right: 20px;
}
&__news-link {
text-decoration: underline;
color: #4F99FF;
}
&__roll {
margin: 0;
padding: 0;
}
&__item {
display: inline-block;
margin: 0 8px 10px 0;
border-radius: 4px;
vertical-align: top;
}
&__link {
display: block;
padding: 2px 15px;
border-radius: 4px;
background: #EEA546;
text-decoration: none;
color: white;
&:visited, &:visited:hover {
color: white;
}
&:hover {
color: white;
opacity: .8;
}
}
}
.team {
&__items {
@include columnizerParent(9);
@include clearfix;
}
&__item {
@include columnizer(9/4,9);
@include mbot(2);
&:nth-child(4n+1) {
clear: left;
}
}
&__photo {
overflow: hidden;
height: 0px;
padding-top: 140%;
position: relative;
@include mbot(0.5);
@include box-sizing(border-box);
}
&__photo-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
vertical-align: top;
}
&__name {
font-weight: bold;
@include mbot(0.3);
}
&__position {
font-size: 0.9em;
color: #666666;
line-height: 1.6;
}
@media #{$media-phone-landscape} {
&__items {
@include columnizerParent(12);
}
&__item {
@include columnizer(4);
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(3n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__item {
@include columnizer(6);
&:nth-child(3n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
}
.timer-counter {
position: relative;
&__item {
position: relative;
display: inline-block;
margin-right: 15px;
vertical-align: middle;
&:after {
content: ':';
position: absolute;
right: -10px;
top: 50%;
font-size: 24px;
margin-top: -24px;
}
&:last-child {
margin-right: 0;
&:after {
display: none;
}
}
}
&__number {
display: block;
font-size: 24px;
}
&__value {
display: block;
text-align: center;
font-size: 8px;
text-transform: uppercase;
}
}
.units-calc {
&__holder {
display: table;
width: 100%;
box-sizing: border-box;
}
&__price-section {
display: table-row;
}
&__price-label {
display: table-cell;
vertical-align: middle;
padding: 20px 10px;
text-align: right;
font-weight: bold;
}
&__price-val {
display: table-cell;
vertical-align: middle;
padding: 20px 10px;
}
&__old-price {
text-decoration: line-through;
}
&__current-price {
font-size: 125%;
font-weight: bold;
}
&__qtty-section {
display: table-row;
background-color: #f3f3f3;
}
&__qtty-label {
display: table-cell;
vertical-align: middle;
padding: 10px;
text-align: right;
font-weight: bold;
}
&__qtty-val {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
&__total-section {
display: table-row;
background-color: #f3f3f3;
}
&__total-label {
display: table-cell;
vertical-align: middle;
padding: 10px;
text-align: right;
font-weight: bold;
}
&__total-val {
display: table-cell;
vertical-align: middle;
padding: 10px;
@include clearfix;
}
&__total-wrap {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
}
&__old-total {
text-decoration: line-through;
}
&__current-total {
font-size: 150%;
font-weight: bold;
}
&__remark-section {
display: table-row;
}
&__remark-icon {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 20px 10px;
&:before {
content: '!';
display: inline-block;
width: 30px;
height: 30px;
font-size: 24px;
line-height: 30px;
background-color: gray;
border-radius: 50%;
color: white;
}
}
&__remark-text {
display: table-cell;
vertical-align: middle;
padding: 20px 10px;
}
&__remark-caption {
font-size: 125%;
@include mbot(5/20);
}
&__qtty-item {
display: none;
&.is-active {
display: block;
}
}
&__buy {
display: inline-block;
vertical-align: middle;
margin-top: 10px;
margin-bottom: 10px;
}
@media #{$media-phone-landscape} {
&__remark-text {
padding-right: 0;
font-size: 93%;
}
}
}
.upload-input {
position: relative;
display: inline-block;
@include clearfix();
padding-left: 20px;
&:before {
@include fa-icon($fa-var-paperclip, true);
font-size: 18px;
position: absolute;
left: 0;
top: 0;
}
input[type='file'] {
visibility: hidden;
position: absolute;
height: 0;
width: 0;
overflow: hidden;
z-index: 0;
}
}
.vacancy-accordion {
&__title {
font-size: 150%;
@include mbot(0.5);
@include mtop(2);
}
&__items {
width: 100%;
box-sizing: border-box;
}
&__item {
@include margin(1.5);
}
&__title {
@include columnizerParent();
@include mbot(1);
cursor: pointer;
background-color: #f0f0f0;
padding: 10px 10px 10px 0;
transition: all .3s;
&:hover{
background-color: #e8e8e8;
}
}
&__name {
@include columnizer(8 8 6);
}
&__price {
@include columnizer(4 4 6);
text-align: right;
}
&__detail {
@include columnizerParent();
display: none;
}
&__detail-content {
@include columnizer(8 8 12);
}
&__detail-form {
@include columnizer(4 4 12);
}
&__detail-title {
@extend .h4;
}
&__detail-box {
@include margin(0.5);
}
}
.vacancy-detail {
@include clearfix;
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__content {
float: left;
width: getcolumnwidth(8);
margin-right: getcolumnmargin();
}
&__heading {
@include mbot(15/20);
font-size: 24/14*100%;
font-weight: bold;
}
&__list {
@include mbot(30/20);
list-style: square;
}
&__sidebar {
float: left;
width: getcolumnwidth(4);
.vacancy-accordion &{
width: auto;
}
}
&__form {
@include mbot(10/20);
box-sizing: border-box;
padding: 30px 40px;
background: #F0F0F0;
text-align: center;
}
&__form-title {
@include mbot(20/20);
font-size: 24/14*100%;
color: #292929;
}
&__field {
@include mbot(20/20);
&.is-error {
.vacancy-detail__error {
display: block;
}
}
&.is-none {
.vacancy-detail__none {
display: block;
}
}
}
&__input {
width: 100%;
}
&__btn {
padding: 12px 40px;
}
&__error {
display: none;
color: $color-status-error;
}
&__none {
display: none;
color: $color-status-error;
}
&__form-note {
text-align: center;
font-size: 12/14*100%;
}
&__note-email {
text-decoration: none;
color: $color-accent-link;
}
&__plate {
@include margin();
@include the-plate;
text-align: center;
}
@media #{$media-phone-landscape} {
&__content,
&__sidebar {
width: auto;
float: none;
margin: 0;
}
&__sidebar {
margin-top: $bm;
}
}
}
.vacancy-list {
&__title {
font-size: 150%;
@include mbot(0.5);
@include mtop(2);
}
&__items {
display: table;
width: 100%;
box-sizing: border-box;
}
&__item {
display: table-row;
}
&__title-col {
display: table-cell;
padding: 10px 15px;
padding-left: 0;
border-bottom: 1px solid gray;
}
&__price-col {
display: table-cell;
padding: 10px 15px;
padding-right: 0;
text-align: right;
border-bottom: 1px solid gray;
}
}
.video-tiles {
&__title {
@include mbot(30/20);
font-size: 30/14*100%;
font-weight: bold;
}
&__holder {
@include columnizerParent;
}
&__item {
@include columnizer(3);
@include adaptiveMarginBottom;
&:nth-child(4n+1) {
clear: left;
}
}
&__movie {
@include mbot(20/20);
&:hover {
.video-tiles__play {
display: inline-block;
}
.video-tiles__time {
display: none;
}
}
}
&__movie-wrap {
position: relative;
text-align: center;
display: inline-block;
height: 100%;
min-height: 100%;
}
&__play {
display: none;
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 0;
bottom: 0;
height: 100%;
min-height: 100%;
right: 0;
width: 100%;
overflow: hidden;
margin: auto;
text-align: center;
}
&__play-btn {
box-sizing: border-box;
font-size: 157.14286%;
@include fa-icon($fa-var-play);
color: white;
cursor: pointer;
width: 100%;
height: 100%;
margin: auto;
display: inline-block;
vertical-align: middle;
background: rgba(0, 0, 0, 0.4);
text-decoration: none;
&:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
}
&__play-btn:before {
margin-right: 10px;
}
&__time {
position: absolute;
bottom: 0;
right: 0;
padding: 4px 15px;
background: black;
}
&__time-number {
color: white;
}
&__poster {
display: inline-block;
max-width: 100%;
vertical-align: top;
}
&__heading {
@include mbot(15/20);
}
&__name {
font-size: 20/14*100%;
line-height: 1;
text-decoration: none;
font-weight: bold;
&:hover {
text-decoration: underline;
}
}
@media #{$media-phone-landscape} {
&__item {
@include columnizer(6);
margin-bottom: 20px;
&:nth-child(4n+1) {
clear: none;
}
&:nth-child(2n+1) {
clear: left;
}
}
}
@media #{$media-phone} {
&__holder {
margin-left: 0;
}
&__item {
width: auto;
margin-left: 0;
float: none;
}
&__movie-wrap {
display: block;
}
&__poster {
width: 100%;
}
}
}
.vote-stars {
&__items {
display: inline-block;
vertical-align: middle;
list-style: none;
padding: 0;
margin: 0;
@include clearfix;
}
&__rating{
color: $background;
}
&.is-large{
.vote-stars__item{
&:before{
font-size: 14/10*150%;
}
}
}
&__item {
float: right;
margin: 0;
padding-right: .25em;
color: $accent;
transition: .1s color;
&:before {
@include fa-icon($fa-var-star-o, true);
font-size: 14/10*100%;
font-size: 1.4em;
margin-left: 0;
margin-right: 0;
line-height: 1;
}
&.is-active {
&:before {
@include fa-icon($fa-var-star, true);
font-size: 1.4em;
}
}
}
&__title {
display: inline-block;
vertical-align: middle;
margin-right: 1em;
color: #141414;
font-size: 14/14*100%;
}
&__input {
visibility: hidden;
position: absolute;
width: 1px;
height: 1px;
}
&:not(.is-unchanged) {
.vote-stars {
&__item {
cursor: pointer;
&:hover {
color: lighten($accent, 5%);
~ .vote-stars__item {
color: #888;
}
}
}
&__items:hover {
.vote-stars__item {
color: darken($accent-hover, 3%);
&:hover {
color: $accent;
~ .vote-stars__item {
//color: $accent;
}
}
}
}
}
}
}
.webinar-detail {
@include clearfix;
padding-bottom: 30px;
margin-bottom: 20px;
&__card {
@include clearfix;
}
&__curator {
float: left;
width: 20%;
text-align: center;
}
&__thumb {
display: inline-block;
margin-bottom: 15px;
padding: 3px;
border-radius: 50%;
border: 1px solid #d9d9d9;
vertical-align: top;
}
&__thumb-img {
display: block;
max-width: 100%;
border-radius: 50%;
background: #f0f0f0;
}
&__name {
font-size: 18px;
font-weight: bold;
}
&__info {
float: left;
width: 72%;
padding: 0 4%;
}
&__head {
@include clearfix;
margin-bottom: 15px;
}
&__head-left {
float: left;
width: 80%;
}
&__category {
font-size: 18px;
font-weight: bold;
}
&__title {
font-size: 28px;
font-weight: bold;
}
&__head-right {
float: left;
width: 20%;
}
&__like {
@include fa-icon($fa-var-heart-o);
font-size: 15px;
&::before {
margin-right: 8px;
cursor: pointer;
}
}
&__subtitle {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
&__description {
margin-bottom: 25px;
font-size: 15px;
}
&__price {
display: inline-block;
width: 45%;
vertical-align: middle;
}
&__price-title {
display: block;
padding-right: 2%;
margin-right: 5%;
font-size: 18px;
font-weight: bold;
}
&__price-number {
display: block;
font-size: 28px;
}
&__join {
vertical-align: middle;
}
&__cite {
@include margin(40/20);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
&__cite-title {
@include margin(20/20);
font-size: 24/14*100%;
text-align: center;
}
&__cite-text {
font-size: 18/14*100%;
text-align: center;
}
}
.webinar-item {
@include clearfix;
&__date {
width: 20%;
float: left;
height: 130px;
padding-top: 30px;
text-align: center;
background-color: #f0f0f0;
}
&__info {
width: 60%;
float: left;
padding-left: 20px;
box-sizing: border-box;
}
&__author {
width: 20%;
float: left;
text-align: center;
}
&__day {
display: block;
font-size: 30/14*100%;
}
&__month {
display: block;
font-size: 20/14*100%;
}
&__year {
display: block;
font-size: 18/14*100%;
}
&__head {
@include mbot(15/20);
}
&__heading {
@include mbot(5/20);
font-size: 15/14*100%;
}
&__title {
font-size: 18px;
font-weight: bold;
}
&__preview {
margin-bottom: 15px;
}
&__description {
font-size: 14px;
}
&__price {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
font-size: 20/14*100%;
}
&__registration {
display: inline-block;
vertical-align: middle;
}
&__avatar {
display: inline-block;
border-radius: 50%;
vertical-align: top;
padding: 3px;
margin-bottom: 10px;
border: 1px solid #dbdbdb;
}
&__avatar-img {
display: inline-block;
border-radius: 50%;
vertical-align: top;
height: 110px;
width: 110px;
max-width: 100%;
background-color: #f0f0f0;
}
&__name {
font-size: 16/14*100%;
}
}
.webinars-list {
&__items {
}
&__item {
@include margin(20/20);
border-top: 1px solid gray;
padding-top: 20px;
&:first-child {
padding-top: 0;
border-top: none;
}
}
&__plate {
display: table;
width: 100%;
box-sizing: border-box;
@include clearfix;
}
&__date-col {
display: table-cell;
text-align: center;
vertical-align: middle;
}
&__date {
padding: 20px;
background-color: #f0f0f0;
}
&__info-col {
display: table-cell;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
&__author-col {
width: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
&__day {
display: block;
font-size: 38/14*100%;
}
&__month {
display: block;
font-size: 20/14*100%;
}
&__year {
display: block;
font-size: 12/14*100%;
}
&__head {
@include mbot(15/20);
}
&__heading {
@include mbot(5/20);
font-size: 15/14*100%;
}
&__heading-link {
color: #999999;
&:hover {
color: #999999;
}
}
&__title {
font-size: 18px;
font-weight: bold;
}
&__preview {
margin-bottom: 15px;
}
&__description {
font-size: 14px;
}
&__price {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
font-size: 20/14*100%;
}
&__registration {
display: inline-block;
vertical-align: middle;
}
&__avatar {
display: inline-block;
height: auto;
border-radius: 50%;
vertical-align: top;
padding: 3px;
@include margin(10/20);
border: 1px solid #dbdbdb;
}
&__avatar-img {
display: inline-block;
border-radius: 50%;
vertical-align: top;
max-width: 100%;
width: 110px;
height: auto;
max-width: 100%;
background-color: #f0f0f0;
}
&__name {
font-size: 16/14*100%;
}
}
.ymap {
height: 100%;
width: 100%;
background-color: #f1f1f1;
&__map {
height: 100%;
width: 100%;
}
&__points {
display: none;
}
&__placemark {
position: absolute;
left: 0;
top: 0;
margin-top: -65px;
margin-left: 0;
width: 178px;
height: 46px;
background-color: #333;
&._right {
left: auto;
right: 0;
.b-ymap__placemark-round {
right: auto;
left: 100%;
margin-right: 0;
margin-left: -24px;
}
.b-ymap__placemark-text {
padding-left: 15px;
padding-right: 30px;
}
}
}
&__placemark-small {
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: gray;
&:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -2px;
border: 5px solid transparent;
border-bottom: none;
border-top-color: gray;
}
&:after {
content: '';
width: 6px;
height: 6px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background-color: #fff;
border-radius: 50%;
}
&.is-green {
background-color: green;
&:before {
border-top-color: green;
}
}
&.is-yellow {
background-color: yellow;
&:before {
border-top-color: yellow;
}
}
}
&__placemark-text {
padding-left: 34px;
padding-right: 10px;
font-size: 14px;
font-weight: 200;
line-height: 46px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__placemark-round {
position: absolute;
right: 100%;
top: 50%;
margin-top: -23px;
margin-right: -24px;
width: 45px;
height: 46px;
background-color: #555;
border-radius: 50%;
&:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -13px;
margin-top: -5px;
border: 15px solid transparent;
border-width: 15px 14px;
border-bottom: none;
border-top-color: #555;
}
}
&__balloon-outer {
position: absolute;
min-width: 260px;
margin-top: -20px;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
&:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top-color: white;
}
&:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -11px;
margin-top: 0;
border: 11px solid transparent;
border-top-color: rgba(0, 0, 0, 0.1);
}
}
&__balloon-outer-holder {
}
&__balloon-header{
padding: 20px;
background-color: #555;
text-align: center;
font-size: 18/16*100%;
font-weight: 400;
line-height: 1.22;
color: #fff;
&-link {
color: white;
}
}
&__balloon-address {
@include margin(5/20);
}
&__balloon-content {
padding: 20px;
text-align: center;
}
&__balloon-phone {
font-size: 14px;
color: #3e8bdc;
}
&__balloon-hours {
font-size: 14px;
font-weight: 200;
color: #969696;
}
&__balloon-details {
@include mtop(15/20);
font-size: 14px;
width: 100%;
@include box-sizing;
}
&__balloon-apply {
@include margin(20/20);
display: block;
width: 100%;
font-size: 14/16*100%;
text-align: center;
@include box-sizing;
}
&__metro-items {
list-style: none;
padding: 0;
margin: 0;
@include margin(15/20);
font-size: 14px;
}
&__metro-item {
.metro-icon {
font-size: 16px;
}
}
&__balloon-close {
position: absolute;
right: 10px;
top: 10px;
color: white;
cursor: pointer;
@include fa-icon($fa-var-times);
}
}
// Шаблоны qiwi
.b-ymap__balloon-inner._qiwi {
.b-ymap {
&__balloon-header {
text-align: left;
background-color: #26b;
@include clearfix;
&:before {
float: left;
margin-right: .5em;
width: 0.9em;
font-size: 30px;
color: #f90;
}
}
&__balloon-address {
padding-top: 3px;
overflow: hidden;
}
&__balloon-content {
text-align: left;
}
}
}
.b-ymap__placemark._qiwi {
background-color: rgba(20, 56, 97, 0.9);
.b-ymap {
&__placemark-round {
background-color: #26b;
text-align: center;
&:before {
border-top-color: #26b;
}
&:after {
// @include ft-icon($ft-qiwi);
width: 0.9em;
font-size: 30px;
line-height: 48px;
color: #f90;
}
}
&__placemark-text {
font-weight: 200;
}
}
}