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