modified: components/customer/pages/index/modals/cart/styles/index.scss modified: components/customer/pages/index/modals/cart/styles/product_box.scss modified: styles/libs/ResetCss.scssmaster
Krasnikov.pro
3 years ago
parent
a55c77d6ae
commit
9387b8c208
@ -0,0 +1,27 @@ |
|||||||
|
Сайт для сервиса доставки пиццы. |
||||||
|
|
||||||
|
[Ссылка на сайт](https://pizza.krasnikov.pro/) |
||||||
|
|
||||||
|
### Задания на изменения |
||||||
|
1. [x] Исправить размер модального окна с добавление пиццы в корзину |
||||||
|
2. [x] Перенести кнопку закрытия модального окна в верхний левый угол |
||||||
|
|
||||||
|
### Изменения 11.07.22 |
||||||
|
1. Изменил размеры модального окна с карточкой пиццы под разные расширения экрана. |
||||||
|
2. Изменил внутренни размеры компонентов модального окна, что бы все помещались. |
||||||
|
3. Убрал появление синего цвета при нажатии. |
||||||
|
|
||||||
|
### Изменения 12.07.22 |
||||||
|
1. Изменил расположение нижней панели карточки пиццы. |
||||||
|
2. Перенастроил корзину. Но пака не доделал новый дизайн карточки продукта. |
||||||
|
|
||||||
|
### Изменения 18.07.22 |
||||||
|
1. Перенес кнопку закрыть карточку в верхний правый угол. |
||||||
|
2. Настроил автоматическое изменение размеров модального окна с пиццей. |
||||||
|
3. Изменил кнопку закрытия корзины. |
||||||
|
|
||||||
|
### Изменения 19.07.22 |
||||||
|
1. Перерисовал корзину под новый дизайн только для компьютерной версии. |
||||||
|
|
||||||
|
### Изменения 23.07.22 |
||||||
|
1. Адаптация корзины под мобильную версию 23:00. |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
Сайт для сервиса доставки пиццы. |
||||||
|
|
||||||
|
[Ссылка на сайт](https://pizza.krasnikov.pro/) |
||||||
|
|
||||||
|
### Задания на изменения |
||||||
|
1. [x] Исправить размер модального окна с добавление пиццы в корзину |
||||||
|
2. [x] Перенести кнопку закрытия модального окна в верхний левый угол |
||||||
|
|
||||||
|
### Изменения 11.07.22 |
||||||
|
1. Изменил размеры модального окна с карточкой пиццы под разные расширения экрана. |
||||||
|
2. Изменил внутренни размеры компонентов модального окна, что бы все помещались. |
||||||
|
3. Убрал появление синего цвета при нажатии. |
||||||
|
|
||||||
|
### Изменения 12.07.22 |
||||||
|
1. Изменил расположение нижней панели карточки пиццы. |
||||||
|
2. Перенастроил корзину. Но пака не доделал новый дизайн карточки продукта. |
||||||
|
|
||||||
|
### Изменения 18.07.22 |
||||||
|
1. Перенес кнопку закрыть карточку в верхний правый угол. |
||||||
|
2. Настроил автоматическое изменение размеров модального окна с пиццей. |
||||||
|
3. Изменил кнопку закрытия корзины. |
||||||
|
|
||||||
|
### Изменения 19.07.22 |
||||||
|
1. Перерисовал корзину под новый дизайн только для компьютерной версии. |
||||||
|
|
||||||
|
### Изменения 23.07.22 |
||||||
|
1. Изменил окно корзины для мобильной версии 23:00-00:30. |
||||||
@ -0,0 +1,153 @@ |
|||||||
|
.pizza_modal_cart { |
||||||
|
display: block; /* Hidden by default */ |
||||||
|
position: fixed; /* Stay in place */ |
||||||
|
z-index: 100; /* Sit on top */ |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; /* Full width */ |
||||||
|
height: 100%; /* Full height */ |
||||||
|
overflow: auto; /* Enable scroll if needed */ |
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||||
|
|
||||||
|
.dialog { |
||||||
|
/* Modal Content */ |
||||||
|
.content { |
||||||
|
background: #F7F7F7; |
||||||
|
margin: auto; |
||||||
|
@media (max-width:760px) { |
||||||
|
height: 533px; |
||||||
|
width: 400px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: 100vh; |
||||||
|
min-height: 600px; |
||||||
|
width: 430px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.button_close{ |
||||||
|
right: 450px; |
||||||
|
position: absolute; |
||||||
|
font-size: 40px; |
||||||
|
top: 45%; |
||||||
|
border: 0px solid #fff; |
||||||
|
color: #FFFFFF; |
||||||
|
background-color: rgba(255, 255, 255, 0); |
||||||
|
|
||||||
|
svg{ |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
svg:hover{ |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 49px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.body{ |
||||||
|
@media (max-width:760px) { |
||||||
|
height: calc(100vh - 270px); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: calc(100vh - 690px); |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.body_order{ |
||||||
|
width: 100%; |
||||||
|
height: 200%; |
||||||
|
position: relative; |
||||||
|
overflow-y: scroll; |
||||||
|
|
||||||
|
@import './product_box.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@import './additionally.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally_text{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.basket_footer{ |
||||||
|
position: inherit; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.promo_code_box{ |
||||||
|
flex: none; |
||||||
|
padding: 5px; |
||||||
|
order: 0; |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0px 12px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
|
||||||
|
.input{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
color: #252A48; |
||||||
|
font-size: 18px; |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width:760px) { |
||||||
|
.button_height { |
||||||
|
height: 55px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.button{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
color: #1C80E3; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .2s; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
color: lighten(#000000, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.check{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0px 0px 0px 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
margin-top: 6px;; |
||||||
|
.text{ |
||||||
|
right: 30px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,149 @@ |
|||||||
|
.pizza_modal_cart { |
||||||
|
display: block; /* Hidden by default */ |
||||||
|
position: fixed; /* Stay in place */ |
||||||
|
z-index: 100; /* Sit on top */ |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; /* Full width */ |
||||||
|
height: 100%; /* Full height */ |
||||||
|
overflow: auto; /* Enable scroll if needed */ |
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||||
|
|
||||||
|
.dialog { |
||||||
|
/* Modal Content */ |
||||||
|
.content { |
||||||
|
background: #F7F7F7; |
||||||
|
margin: auto; |
||||||
|
@media (max-width:760px) { |
||||||
|
height: 533px; |
||||||
|
width: 400px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: 100vh; |
||||||
|
min-height: 600px; |
||||||
|
width: 430px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.button_close{ |
||||||
|
right: 450px; |
||||||
|
position: absolute; |
||||||
|
font-size: 40px; |
||||||
|
top: 45%; |
||||||
|
border: 0px solid #fff; |
||||||
|
color: #FFFFFF; |
||||||
|
background-color: rgba(255, 255, 255, 0); |
||||||
|
|
||||||
|
svg{ |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
svg:hover{ |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 49px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.body{ |
||||||
|
@media (max-width:760px) { |
||||||
|
height: calc(100vh - 270px); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: calc(100vh - 690px); |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.body_order{ |
||||||
|
width: 100%; |
||||||
|
height: 200%; |
||||||
|
position: relative; |
||||||
|
overflow-y: scroll; |
||||||
|
|
||||||
|
@import './product_box.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@import './additionally.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally_text{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.basket_footer{ |
||||||
|
position: inherit; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.promo_code_box{ |
||||||
|
flex: none; |
||||||
|
padding: 5px; |
||||||
|
order: 0; |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0px 12px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
|
||||||
|
.input{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
color: #252A48; |
||||||
|
font-size: 18px; |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
|
||||||
|
.button{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
color: #1C80E3; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .2s; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
color: lighten(#000000, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.check{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0px 0px 0px 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
margin-top: 6px;; |
||||||
|
.text{ |
||||||
|
right: 30px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,149 @@ |
|||||||
|
.pizza_modal_cart { |
||||||
|
display: block; /* Hidden by default */ |
||||||
|
position: fixed; /* Stay in place */ |
||||||
|
z-index: 100; /* Sit on top */ |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; /* Full width */ |
||||||
|
height: 100%; /* Full height */ |
||||||
|
overflow: auto; /* Enable scroll if needed */ |
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||||
|
|
||||||
|
.dialog { |
||||||
|
/* Modal Content */ |
||||||
|
.content { |
||||||
|
background: #F7F7F7; |
||||||
|
margin: auto; |
||||||
|
@media (max-width:760px) { |
||||||
|
height: 533px; |
||||||
|
width: 400px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: 100vh; |
||||||
|
min-height: 600px; |
||||||
|
width: 430px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.button_close{ |
||||||
|
right: 450px; |
||||||
|
position: absolute; |
||||||
|
font-size: 40px; |
||||||
|
top: 45%; |
||||||
|
border: 0px solid #fff; |
||||||
|
color: #FFFFFF; |
||||||
|
background-color: rgba(255, 255, 255, 0); |
||||||
|
|
||||||
|
svg{ |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
svg:hover{ |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 49px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.body{ |
||||||
|
@media (max-width:760px) { |
||||||
|
height: calc(100vh - 270px); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: calc(100vh - 690px); |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.body_order{ |
||||||
|
width: 100%; |
||||||
|
/*height: 200%;*/ |
||||||
|
position: relative; |
||||||
|
overflow-y: scroll; |
||||||
|
|
||||||
|
@import './product_box.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@import './additionally.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally_text{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.basket_footer{ |
||||||
|
position: inherit; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.promo_code_box{ |
||||||
|
flex: none; |
||||||
|
padding: 5px; |
||||||
|
order: 0; |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0px 12px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
|
||||||
|
.input{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
color: #252A48; |
||||||
|
font-size: 18px; |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
|
||||||
|
.button{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
color: #1C80E3; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .2s; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
color: lighten(#000000, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.check{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0px 0px 0px 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
margin-top: 6px;; |
||||||
|
.text{ |
||||||
|
right: 30px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,150 @@ |
|||||||
|
.pizza_modal_cart { |
||||||
|
display: block; /* Hidden by default */ |
||||||
|
position: fixed; /* Stay in place */ |
||||||
|
z-index: 100; /* Sit on top */ |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; /* Full width */ |
||||||
|
height: 100%; /* Full height */ |
||||||
|
overflow: auto; /* Enable scroll if needed */ |
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||||
|
|
||||||
|
.dialog { |
||||||
|
/* Modal Content */ |
||||||
|
.content { |
||||||
|
background: #F7F7F7; |
||||||
|
margin: auto; |
||||||
|
|
||||||
|
@media (max-width:760px) { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: 100vh; |
||||||
|
min-height: 600px; |
||||||
|
width: 430px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.button_close{ |
||||||
|
right: 450px; |
||||||
|
position: absolute; |
||||||
|
font-size: 40px; |
||||||
|
top: 45%; |
||||||
|
border: 0px solid #fff; |
||||||
|
color: #FFFFFF; |
||||||
|
background-color: rgba(255, 255, 255, 0); |
||||||
|
|
||||||
|
svg{ |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
svg:hover{ |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 49px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.body{ |
||||||
|
@media (max-width:760px) { |
||||||
|
height: calc(100vh - 270px); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: calc(100vh - 690px); |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.body_order{ |
||||||
|
width: 100%; |
||||||
|
/*height: 200%;*/ |
||||||
|
position: relative; |
||||||
|
overflow-y: scroll; |
||||||
|
|
||||||
|
@import './product_box.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@import './additionally.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally_text{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.basket_footer{ |
||||||
|
position: inherit; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.promo_code_box{ |
||||||
|
flex: none; |
||||||
|
padding: 5px; |
||||||
|
order: 0; |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0px 12px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
|
||||||
|
.input{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
color: #252A48; |
||||||
|
font-size: 18px; |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
|
||||||
|
.button{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
color: #1C80E3; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .2s; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
color: lighten(#000000, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.check{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0px 0px 0px 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
margin-top: 6px;; |
||||||
|
.text{ |
||||||
|
right: 30px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,150 @@ |
|||||||
|
.pizza_modal_cart { |
||||||
|
display: block; /* Hidden by default */ |
||||||
|
position: fixed; /* Stay in place */ |
||||||
|
z-index: 100; /* Sit on top */ |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; /* Full width */ |
||||||
|
height: 100%; /* Full height */ |
||||||
|
overflow: auto; /* Enable scroll if needed */ |
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||||
|
|
||||||
|
.dialog { |
||||||
|
/* Modal Content */ |
||||||
|
.content { |
||||||
|
background: #F7F7F7; |
||||||
|
margin: auto; |
||||||
|
|
||||||
|
@media (max-width:760px) { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: 100vh; |
||||||
|
min-height: 600px; |
||||||
|
width: 430px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.button_close{ |
||||||
|
right: 450px; |
||||||
|
position: absolute; |
||||||
|
font-size: 40px; |
||||||
|
top: 45%; |
||||||
|
border: 0px solid #fff; |
||||||
|
color: #FFFFFF; |
||||||
|
background-color: rgba(255, 255, 255, 0); |
||||||
|
|
||||||
|
svg{ |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
svg:hover{ |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 49px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.body{ |
||||||
|
@media (max-width:760px) { |
||||||
|
height: calc(100vh - 290px); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: calc(100vh - 690px); |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.body_order{ |
||||||
|
width: 100%; |
||||||
|
height: 70%; |
||||||
|
position: relative; |
||||||
|
overflow-y: scroll; |
||||||
|
|
||||||
|
@import './product_box.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@import './additionally.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally_text{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.basket_footer{ |
||||||
|
position: inherit; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.promo_code_box{ |
||||||
|
flex: none; |
||||||
|
padding: 5px; |
||||||
|
order: 0; |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0px 12px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
|
||||||
|
.input{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
color: #252A48; |
||||||
|
font-size: 18px; |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
|
||||||
|
.button{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
color: #1C80E3; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .2s; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
color: lighten(#000000, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.check{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0px 0px 0px 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
margin-top: 6px;; |
||||||
|
.text{ |
||||||
|
right: 30px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,151 @@ |
|||||||
|
.pizza_modal_cart { |
||||||
|
display: block; /* Hidden by default */ |
||||||
|
position: fixed; /* Stay in place */ |
||||||
|
z-index: 100; /* Sit on top */ |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; /* Full width */ |
||||||
|
height: 100%; /* Full height */ |
||||||
|
overflow: auto; /* Enable scroll if needed */ |
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||||
|
|
||||||
|
.dialog { |
||||||
|
/* Modal Content */ |
||||||
|
.content { |
||||||
|
background: #F7F7F7; |
||||||
|
margin: auto; |
||||||
|
|
||||||
|
@media (max-width:760px) { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: 100vh; |
||||||
|
min-height: 600px; |
||||||
|
width: 430px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.button_close{ |
||||||
|
right: 450px; |
||||||
|
position: absolute; |
||||||
|
font-size: 40px; |
||||||
|
top: 45%; |
||||||
|
border: 0px solid #fff; |
||||||
|
color: #FFFFFF; |
||||||
|
background-color: rgba(255, 255, 255, 0); |
||||||
|
|
||||||
|
svg{ |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
svg:hover{ |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 49px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.body{ |
||||||
|
@media (max-width:760px) { |
||||||
|
height: calc(100vh - 290px); |
||||||
|
overflow-y: scroll; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: calc(100vh - 690px); |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.body_order{ |
||||||
|
width: 100%; |
||||||
|
height: 70%; |
||||||
|
position: relative; |
||||||
|
overflow-y: scroll; |
||||||
|
|
||||||
|
@import './product_box.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@import './additionally.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally_text{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.basket_footer{ |
||||||
|
position: inherit; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.promo_code_box{ |
||||||
|
flex: none; |
||||||
|
padding: 5px; |
||||||
|
order: 0; |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0px 12px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
|
||||||
|
.input{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
color: #252A48; |
||||||
|
font-size: 18px; |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
|
||||||
|
.button{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
color: #1C80E3; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .2s; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
color: lighten(#000000, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.check{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0px 0px 0px 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
margin-top: 6px;; |
||||||
|
.text{ |
||||||
|
right: 30px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,151 @@ |
|||||||
|
.pizza_modal_cart { |
||||||
|
display: block; /* Hidden by default */ |
||||||
|
position: fixed; /* Stay in place */ |
||||||
|
z-index: 100; /* Sit on top */ |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; /* Full width */ |
||||||
|
height: 100%; /* Full height */ |
||||||
|
overflow: auto; /* Enable scroll if needed */ |
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||||
|
|
||||||
|
.dialog { |
||||||
|
/* Modal Content */ |
||||||
|
.content { |
||||||
|
background: #F7F7F7; |
||||||
|
margin: auto; |
||||||
|
|
||||||
|
@media (max-width:760px) { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: 100vh; |
||||||
|
min-height: 600px; |
||||||
|
width: 430px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.button_close{ |
||||||
|
right: 450px; |
||||||
|
position: absolute; |
||||||
|
font-size: 40px; |
||||||
|
top: 45%; |
||||||
|
border: 0px solid #fff; |
||||||
|
color: #FFFFFF; |
||||||
|
background-color: rgba(255, 255, 255, 0); |
||||||
|
|
||||||
|
svg{ |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
svg:hover{ |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 49px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.body{ |
||||||
|
@media (max-width:760px) { |
||||||
|
height: calc(100vh - 290px); |
||||||
|
overflow-y: scroll; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: calc(100vh - 690px); |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.body_order{ |
||||||
|
width: 100%; |
||||||
|
/*height: 70%;*/ |
||||||
|
position: relative; |
||||||
|
overflow-y: scroll; |
||||||
|
|
||||||
|
@import './product_box.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@import './additionally.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally_text{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.basket_footer{ |
||||||
|
position: inherit; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.promo_code_box{ |
||||||
|
flex: none; |
||||||
|
padding: 5px; |
||||||
|
order: 0; |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0px 12px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
|
||||||
|
.input{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
color: #252A48; |
||||||
|
font-size: 18px; |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
|
||||||
|
.button{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
color: #1C80E3; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .2s; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
color: lighten(#000000, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.check{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0px 0px 0px 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
margin-top: 6px;; |
||||||
|
.text{ |
||||||
|
right: 30px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,164 @@ |
|||||||
|
.pizza_modal_cart { |
||||||
|
display: block; /* Hidden by default */ |
||||||
|
position: fixed; /* Stay in place */ |
||||||
|
z-index: 100; /* Sit on top */ |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; /* Full width */ |
||||||
|
height: 100%; /* Full height */ |
||||||
|
overflow: auto; /* Enable scroll if needed */ |
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||||
|
|
||||||
|
.dialog { |
||||||
|
/* Modal Content */ |
||||||
|
.content { |
||||||
|
background: #F7F7F7; |
||||||
|
margin: auto; |
||||||
|
|
||||||
|
@media (max-width:760px) { |
||||||
|
height: 100vh; |
||||||
|
width: 100vw; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: 100vh; |
||||||
|
min-height: 600px; |
||||||
|
width: 430px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.button_close{ |
||||||
|
|
||||||
|
@media (max-width:760px) { |
||||||
|
right: 20px; |
||||||
|
position: absolute; |
||||||
|
font-size: 30px; |
||||||
|
top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
right: 450px; |
||||||
|
position: absolute; |
||||||
|
font-size: 40px; |
||||||
|
top: 45%; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
svg{ |
||||||
|
@media (max-width:760px) { |
||||||
|
fill: #000000; |
||||||
|
} |
||||||
|
@media (min-width:780px) { |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
svg:hover{ |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 49px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.body{ |
||||||
|
@media (max-width:760px) { |
||||||
|
height: calc(100vh - 290px); |
||||||
|
overflow-y: scroll; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: calc(100vh - 690px); |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.body_order{ |
||||||
|
width: 100%; |
||||||
|
/*height: 70%;*/ |
||||||
|
position: relative; |
||||||
|
overflow-y: scroll; |
||||||
|
|
||||||
|
@import './product_box.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@import './additionally.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally_text{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.basket_footer{ |
||||||
|
position: inherit; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.promo_code_box{ |
||||||
|
flex: none; |
||||||
|
padding: 5px; |
||||||
|
order: 0; |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0px 12px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
|
||||||
|
.input{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
color: #252A48; |
||||||
|
font-size: 18px; |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
|
||||||
|
.button{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
color: #1C80E3; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .2s; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
color: lighten(#000000, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.check{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0px 0px 0px 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
margin-top: 6px;; |
||||||
|
.text{ |
||||||
|
right: 30px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,163 @@ |
|||||||
|
.pizza_modal_cart { |
||||||
|
display: block; /* Hidden by default */ |
||||||
|
position: fixed; /* Stay in place */ |
||||||
|
z-index: 100; /* Sit on top */ |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; /* Full width */ |
||||||
|
height: 100%; /* Full height */ |
||||||
|
overflow: auto; /* Enable scroll if needed */ |
||||||
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||||
|
|
||||||
|
.dialog { |
||||||
|
/* Modal Content */ |
||||||
|
.content { |
||||||
|
background: #F7F7F7; |
||||||
|
margin: auto; |
||||||
|
|
||||||
|
@media (max-width:760px) { |
||||||
|
height: 100vh; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: 100vh; |
||||||
|
min-height: 600px; |
||||||
|
width: 430px; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.button_close{ |
||||||
|
|
||||||
|
@media (max-width:760px) { |
||||||
|
right: 20px; |
||||||
|
position: absolute; |
||||||
|
font-size: 30px; |
||||||
|
top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
right: 450px; |
||||||
|
position: absolute; |
||||||
|
font-size: 40px; |
||||||
|
top: 45%; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
svg{ |
||||||
|
@media (max-width:760px) { |
||||||
|
fill: #000000; |
||||||
|
} |
||||||
|
@media (min-width:780px) { |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
svg:hover{ |
||||||
|
transform: scale(1.2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 49px; |
||||||
|
padding: 15px; |
||||||
|
background-color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.body{ |
||||||
|
@media (max-width:760px) { |
||||||
|
height: calc(100vh - 290px); |
||||||
|
overflow-y: scroll; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width:780px) { |
||||||
|
height: calc(100vh - 690px); |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.body_order{ |
||||||
|
width: 100%; |
||||||
|
/*height: 70%;*/ |
||||||
|
position: relative; |
||||||
|
overflow-y: scroll; |
||||||
|
|
||||||
|
@import './product_box.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
@import './additionally.scss'; |
||||||
|
} |
||||||
|
|
||||||
|
.body_additionally_text{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 21px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.basket_footer{ |
||||||
|
position: inherit; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.promo_code_box{ |
||||||
|
flex: none; |
||||||
|
padding: 5px; |
||||||
|
order: 0; |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0px 12px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
|
||||||
|
.input{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
outline: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
color: #252A48; |
||||||
|
font-size: 18px; |
||||||
|
height: 38px; |
||||||
|
} |
||||||
|
|
||||||
|
.button{ |
||||||
|
border: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
color: #1C80E3; |
||||||
|
cursor: pointer; |
||||||
|
transition: color .2s; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
color: lighten(#000000, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.check{ |
||||||
|
font-size: 18px; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0px 0px 0px 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.box{ |
||||||
|
display: flex; |
||||||
|
margin-top: 6px;; |
||||||
|
.text{ |
||||||
|
right: 30px; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
.card_basket_product_main{ |
||||||
|
width: 95%; |
||||||
|
/*height: 133px;*/ |
||||||
|
margin: 10px 10px 10px 10px; |
||||||
|
padding: 10px 10px 10px 0px; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 10px; |
||||||
|
display: grid; |
||||||
|
|
||||||
|
.product_head{ |
||||||
|
display: flex; |
||||||
|
border-bottom: 1px dashed #8E8E93; |
||||||
|
.product_img_box{ |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.title_box{ |
||||||
|
margin: 10px; |
||||||
|
|
||||||
|
.title{ |
||||||
|
line-height: 24px; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
letter-spacing: 0.02em; |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.size{ |
||||||
|
font-weight: 400; |
||||||
|
font-size: 16px; |
||||||
|
color: #8E8E93; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.product_footer{ |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.sale_button_box{ |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
padding: 0px 12px; |
||||||
|
gap: 12px; |
||||||
|
|
||||||
|
width: 101px; |
||||||
|
height: 32px; |
||||||
|
|
||||||
|
background: #F7F7F7; |
||||||
|
border-radius: 15px; |
||||||
|
|
||||||
|
right: 20px; |
||||||
|
position: absolute; |
||||||
|
|
||||||
|
margin-top: 11px; |
||||||
|
|
||||||
|
.product_button{ |
||||||
|
font-size: 30px; |
||||||
|
padding: 0; |
||||||
|
border: none; |
||||||
|
background: none; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.product_count{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.product_price{ |
||||||
|
font-size: 24px; |
||||||
|
margin-top: 11px; |
||||||
|
} |
||||||
|
|
||||||
|
.sale_box_price{ |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,82 @@ |
|||||||
|
/* Указываем box sizing */ |
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
box-sizing: border-box; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Убираем внутренние отступы */ |
||||||
|
ul[class], |
||||||
|
ol[class] { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Убираем внешние отступы */ |
||||||
|
body, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
p, |
||||||
|
ul[class], |
||||||
|
ol[class], |
||||||
|
li, |
||||||
|
figure, |
||||||
|
figcaption, |
||||||
|
blockquote, |
||||||
|
dl, |
||||||
|
dd { |
||||||
|
margin: 0; |
||||||
|
font-family: 'Rubik'; |
||||||
|
} |
||||||
|
|
||||||
|
/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/ |
||||||
|
ul[class], |
||||||
|
ol[class] { |
||||||
|
list-style: none; |
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */ |
||||||
|
a:not([class]) { |
||||||
|
text-decoration-skip-ink: auto; |
||||||
|
} |
||||||
|
a{ |
||||||
|
text-decoration: none; /* Отменяем подчеркивание у ссылки */ |
||||||
|
color: black; /* Цвет ссылок */ |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
a:visited { |
||||||
|
color: black; /* Цвет посещенных ссылок */ |
||||||
|
} |
||||||
|
a:active { |
||||||
|
color: black; /* Цвет активных ссылок */ |
||||||
|
} |
||||||
|
/* Упрощаем работу с изображениями */ |
||||||
|
img { |
||||||
|
max-width: 100%; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
/* Указываем понятную периодичность в потоке данных у article*/ |
||||||
|
article > * + * { |
||||||
|
margin-top: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
/* Наследуем шрифты для инпутов и кнопок */ |
||||||
|
input, |
||||||
|
textarea, |
||||||
|
select { |
||||||
|
font: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */ |
||||||
|
@media (prefers-reduced-motion: reduce) { |
||||||
|
* { |
||||||
|
animation-duration: 0.01ms !important; |
||||||
|
animation-iteration-count: 1 !important; |
||||||
|
transition-duration: 0.01ms !important; |
||||||
|
scroll-behavior: auto !important; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,83 @@ |
|||||||
|
/* Указываем box sizing */ |
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
box-sizing: border-box; |
||||||
|
user-select: none; |
||||||
|
-webkit-tap-highlight-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
/* Убираем внутренние отступы */ |
||||||
|
ul[class], |
||||||
|
ol[class] { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Убираем внешние отступы */ |
||||||
|
body, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
p, |
||||||
|
ul[class], |
||||||
|
ol[class], |
||||||
|
li, |
||||||
|
figure, |
||||||
|
figcaption, |
||||||
|
blockquote, |
||||||
|
dl, |
||||||
|
dd { |
||||||
|
margin: 0; |
||||||
|
font-family: 'Rubik'; |
||||||
|
} |
||||||
|
|
||||||
|
/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/ |
||||||
|
ul[class], |
||||||
|
ol[class] { |
||||||
|
list-style: none; |
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */ |
||||||
|
a:not([class]) { |
||||||
|
text-decoration-skip-ink: auto; |
||||||
|
} |
||||||
|
a{ |
||||||
|
text-decoration: none; /* Отменяем подчеркивание у ссылки */ |
||||||
|
color: black; /* Цвет ссылок */ |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
a:visited { |
||||||
|
color: black; /* Цвет посещенных ссылок */ |
||||||
|
} |
||||||
|
a:active { |
||||||
|
color: black; /* Цвет активных ссылок */ |
||||||
|
} |
||||||
|
/* Упрощаем работу с изображениями */ |
||||||
|
img { |
||||||
|
max-width: 100%; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
/* Указываем понятную периодичность в потоке данных у article*/ |
||||||
|
article > * + * { |
||||||
|
margin-top: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
/* Наследуем шрифты для инпутов и кнопок */ |
||||||
|
input, |
||||||
|
textarea, |
||||||
|
select { |
||||||
|
font: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */ |
||||||
|
@media (prefers-reduced-motion: reduce) { |
||||||
|
* { |
||||||
|
animation-duration: 0.01ms !important; |
||||||
|
animation-iteration-count: 1 !important; |
||||||
|
transition-duration: 0.01ms !important; |
||||||
|
scroll-behavior: auto !important; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,83 @@ |
|||||||
|
/* Указываем box sizing */ |
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
box-sizing: border-box; |
||||||
|
user-select: none; |
||||||
|
-webkit-tap-highlight-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
/* Убираем внутренние отступы */ |
||||||
|
ul[class], |
||||||
|
ol[class] { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Убираем внешние отступы */ |
||||||
|
body, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
p, |
||||||
|
ul[class], |
||||||
|
ol[class], |
||||||
|
li, |
||||||
|
figure, |
||||||
|
figcaption, |
||||||
|
blockquote, |
||||||
|
dl, |
||||||
|
dd { |
||||||
|
margin: 0; |
||||||
|
font-family: 'Rubik'; |
||||||
|
} |
||||||
|
|
||||||
|
/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/ |
||||||
|
ul[class], |
||||||
|
ol[class] { |
||||||
|
list-style: none; |
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */ |
||||||
|
a:not([class]) { |
||||||
|
text-decoration-skip-ink: auto; |
||||||
|
} |
||||||
|
a{ |
||||||
|
text-decoration: none; /* Отменяем подчеркивание у ссылки */ |
||||||
|
color: black; /* Цвет ссылок */ |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
a:visited { |
||||||
|
color: black; /* Цвет посещенных ссылок */ |
||||||
|
} |
||||||
|
a:active { |
||||||
|
color: black; /* Цвет активных ссылок */ |
||||||
|
} |
||||||
|
/* Упрощаем работу с изображениями */ |
||||||
|
img { |
||||||
|
max-width: 100%; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
/* Указываем понятную периодичность в потоке данных у article*/ |
||||||
|
article > * + * { |
||||||
|
margin-top: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
/* Наследуем шрифты для инпутов и кнопок */ |
||||||
|
input, |
||||||
|
textarea, |
||||||
|
select { |
||||||
|
font: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */ |
||||||
|
@media (prefers-reduced-motion: reduce) { |
||||||
|
* { |
||||||
|
animation-duration: 0.01ms !important; |
||||||
|
animation-iteration-count: 1 !important; |
||||||
|
transition-duration: 0.01ms !important; |
||||||
|
scroll-behavior: auto !important; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue