Skip to content

Commit

Permalink
fixed price-slider and small refactoring of filter (#2226)
Browse files Browse the repository at this point in the history
  • Loading branch information
@grossmannmartin
grossmannmartin authored Feb 15, 2021
2 parents c2c322a + 122581e commit 87d6200
Show file tree
Hide file tree
Showing 23 changed files with 150 additions and 183 deletions.
13 changes: 7 additions & 6 deletions assets/styles/frontend/common/components/box/breadcrumb.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,22 @@
@box-breadcrumb-padding-vertical: 3px;

.box-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0 @box-breadcrumb-padding-horizontal;
margin-bottom: @margin-gap;

font-size: 0;

&__item {
display: inline-block;
vertical-align: middle;
padding: @box-breadcrumb-padding-vertical @box-breadcrumb-padding-horizontal;
display: flex;
padding: @box-breadcrumb-padding-vertical 0;
margin-right: @box-breadcrumb-padding-horizontal;

font-size: @font-size;

&--separator {
padding-left: 0;
padding-right: 0;

font-size: 10px;
}

Expand Down
115 changes: 34 additions & 81 deletions assets/styles/frontend/common/components/box/filter.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@box-filter-input-width: 80px;
@box-filter-input-width: 70px;
@box-filter-padding: 20px;
@box-filter-right-gap: 30px;
@box-filter-width: @web-panel-width - @box-filter-right-gap;
Expand Down Expand Up @@ -59,116 +59,76 @@
}
}

&__slider {
&__wrap {
font-size: 0;
margin-top: 15px;

&__range {
.is-no-js & {
display: none;
}
}
}
}

&__price {
width: 100%;
padding: @box-filter-padding;

font-size: 0;
display: flex;
flex-wrap: wrap;
padding-bottom: 14px;
padding-top: 4px;

&__slider {
width: 100%;
margin-bottom: 16px;
}

&__item {
width: @box-filter-input-width;
display: inline-block;
line-height: @form-item-height;
margin-top: 15px;
display: flex;
width: @box-filter-input-width + 30px;
align-items: center;

@media @query-lg {
width: 50%;
}

.input {
height: 40px;
width: @box-filter-input-width;
text-align: center;
padding: 0 3px;

font-size: 15px;
font-weight: 600;
color: @color-0;

&::-webkit-input-placeholder { /* Firefox 18- */
opacity: 1;

.placeholder({
color: @color-0;
font-style: normal;
font-weight: 500;
}

&::-moz-placeholder { /* Firefox 18- */
opacity: 1;
});

color: @color-0;
font-style: normal;
font-weight: 500;
}

&:-ms-input-placeholder { /* Firefox 18- */
opacity: 1;

color: @color-0;
font-style: normal;
font-weight: 500;
}

&:-moz-placeholder { /* Firefox 18- */
opacity: 1;

color: @color-0;
font-style: normal;
font-weight: 500;
&:focus {
.placeholder({
opacity: 0;
});
}
}

&--text {
width: calc(~"100% - 2*@{box-filter-input-width}");
padding: 0 5px;
&__text {
flex: 1;
text-align: center;

font-size: 15px;
}

&--right {
text-align: right;
}
}
}

&__choice {
padding: @box-filter-padding;

border-top: 1px solid @box-filter-delimiter-color;

&--first {
padding-top: 0;
margin-top: 0;

&--without-border {
border-top: 0;
}

&__title {
display: block;
position: relative;
padding-right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: @box-filter-padding;

color: @color-0;
font-weight: 700;
font-size: @box-filter-title-font-size;

.svg {
position: absolute;
right: 0;
top: 2px;

color: @color-0;
font-size: @box-filter-arrow-size;
transition: @transition color;
transition: @transition;
transform: rotate(0deg);

-webkit-tap-highlight-color: transparent; // Android Chrome
Expand All @@ -181,19 +141,12 @@
}

&.active .svg {
top: 2px;
transform: rotate(180deg);
}

&__link {
display: block;

font-size: 12px;
}
}

&__inputs {
margin-top: 15px;
&__content {
padding: 0 @box-filter-padding;
}
}

Expand Down
15 changes: 7 additions & 8 deletions assets/styles/frontend/common/components/box/gallery.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,25 +48,24 @@
}

&__arrow {
position: relative;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
float: left;
line-height: @box-gallery-arrow-size;
width: @box-gallery-arrow-size;
height: @box-gallery-arrow-size;
margin-top: @box-gallery-item-height/2 - @box-gallery-arrow-size/2;

cursor: pointer;
color: @color-border;

&--prev {
position: relative;
top: 3px;
transform: rotate(90deg);
transform: rotate(90deg) translateX(-50%);
}

&--next {
position: relative;
top: -3px;
transform: rotate(-90deg);
transform: rotate(-90deg) translateX(50%);
}

&.slick-disabled {
Expand Down
3 changes: 1 addition & 2 deletions assets/styles/frontend/common/components/box/promo-code.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@
color: @color-green;

&__remove {
display: flex;
margin-left: 10px;
position: relative;
top: -1px;

text-decoration: none;
color: @color-a;
Expand Down
1 change: 1 addition & 0 deletions assets/styles/frontend/common/components/form/choice.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
&--block {
display: block;
margin-right: 0;
margin-bottom: 14px;
}

&__input {
Expand Down
18 changes: 8 additions & 10 deletions assets/styles/frontend/common/components/form/error.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@

&--line {
position: absolute;
top: 7px;
right: 5px;

right: 5px;
top: 50%;
transform: translateY(-50%);

@media @query-lg {
right: auto;
left: 295px;
Expand All @@ -32,23 +33,20 @@
right: -20px;
position: absolute;
top: 50%;
margin-top: -10px;
transform: translateY(-50%);
}

&--line-block {
position: absolute;
top: 7px;
right: 5px;
top: 50%;
transform: translateY(-50%);

z-index: 10;
}

&__icon {
display: inline-block;
vertical-align: middle;
width: @form-error-size;
height: @form-error-size;
text-align: center;
display: flex;

color: @color-alert;
font-weight: bold;
Expand Down
2 changes: 1 addition & 1 deletion assets/styles/frontend/common/components/in/icon.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.in-icon {
display: inline-block;
display: inline-flex;
vertical-align: middle;

text-decoration: none;
Expand Down
5 changes: 3 additions & 2 deletions assets/styles/frontend/common/components/in/tab.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,9 @@

.svg {
position: absolute;
top: 13px;
right: 10px;
top: 50%;
transform: translateY(-50%);

font-size: 10px;
}
Expand All @@ -59,7 +60,7 @@
color: @color-primary;

.svg {
transform: rotate(180deg);
transform: rotate(180deg) translateY(50%);
}
}
}
Expand Down
1 change: 0 additions & 1 deletion assets/styles/frontend/common/components/list/addresses.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,6 @@
right: @list-address-padding;
top: @list-address-padding;


cursor: pointer;

.svg {
Expand Down
2 changes: 1 addition & 1 deletion assets/styles/frontend/common/components/list/menu.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
height: @list-menu-arrow-size;
line-height: @list-menu-arrow-size;
width: @list-menu-arrow-size;
text-align: center;
justify-content: center;

font-size: 11px;

Expand Down
2 changes: 1 addition & 1 deletion assets/styles/frontend/common/components/table/cart.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
&__cell {
&--action {
a {
display: inline-block;
display: flex;
padding: 5px;

text-decoration: none;
Expand Down
5 changes: 3 additions & 2 deletions assets/styles/frontend/common/components/window/popup.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,14 @@
}

&__close {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: @window-popup-close-position;
right: @window-popup-close-position;
width: @window-popup-inner-padding;
height: @window-popup-inner-padding;
line-height: @window-popup-inner-padding;
text-align: center;

color: @color-7;
text-decoration: none;
Expand Down
18 changes: 18 additions & 0 deletions assets/styles/frontend/common/core/mixin/base.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,21 @@
font-style: @font-style;
}
}

.placeholder(@rules) {
&::-webkit-input-placeholder {
@rules();
}

&:-moz-placeholder {
@rules();
}

&::-moz-placeholder {
@rules();
}

&:-ms-input-placeholder {
@rules();
}
}
2 changes: 1 addition & 1 deletion assets/styles/frontend/common/layout/footer.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
.form-error {
position: absolute;
top: 50%;
margin-top: -10px;
transform: translateY(-50%);
right: 10px;

&--choice {
Expand Down
Loading

0 comments on commit 87d6200

Please sign in to comment.