diff --git a/.history/README_20220719165057.md b/.history/README_20220719165057.md new file mode 100644 index 0000000..e4e9585 --- /dev/null +++ b/.history/README_20220719165057.md @@ -0,0 +1,24 @@ +Сайт для сервиса доставки пиццы. + +[Ссылка на сайт](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. Перерисовал корзину под новый дизайн. \ No newline at end of file diff --git a/.history/README_20220719165140.md b/.history/README_20220719165140.md new file mode 100644 index 0000000..9c9508b --- /dev/null +++ b/.history/README_20220719165140.md @@ -0,0 +1,24 @@ +Сайт для сервиса доставки пиццы. + +[Ссылка на сайт](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. Перерисовал корзину под новый дизайн только для компьютерной версии. \ No newline at end of file diff --git a/.history/components/customer/pages/index/block/Categories/Categories_20220528230020.tsx b/.history/components/customer/pages/index/block/Categories/Categories_20220528230020.tsx new file mode 100644 index 0000000..736cbdd --- /dev/null +++ b/.history/components/customer/pages/index/block/Categories/Categories_20220528230020.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import classNames from 'classnames'; + +type Props = { + type: string; + name: string; + }; + + export const CategoriesButton: React.FC = ({type, name}) => { + return( + {name} + + ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/block/Categories/Categories_20220719150640.tsx b/.history/components/customer/pages/index/block/Categories/Categories_20220719150640.tsx new file mode 100644 index 0000000..08a8944 --- /dev/null +++ b/.history/components/customer/pages/index/block/Categories/Categories_20220719150640.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import classNames from 'classnames'; + +type Props = { + type: string; + name: string; + }; + + export const CategoriesButton: React.FC = ({type, name}) => { + return( + {name} + + ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/block/Categories/Categories_20220719150935.tsx b/.history/components/customer/pages/index/block/Categories/Categories_20220719150935.tsx new file mode 100644 index 0000000..2fb13c1 --- /dev/null +++ b/.history/components/customer/pages/index/block/Categories/Categories_20220719150935.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import classNames from 'classnames'; + +type Props = { + type: string; + name: string; + }; + + export const CategoriesButton: React.FC = ({type, name}) => { + return( + {name} + + ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/block/Categories/Categories_20220719150957.tsx b/.history/components/customer/pages/index/block/Categories/Categories_20220719150957.tsx new file mode 100644 index 0000000..2fb13c1 --- /dev/null +++ b/.history/components/customer/pages/index/block/Categories/Categories_20220719150957.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import classNames from 'classnames'; + +type Props = { + type: string; + name: string; + }; + + export const CategoriesButton: React.FC = ({type, name}) => { + return( + {name} + + ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/block/Categories/Categories_20220719154850.tsx b/.history/components/customer/pages/index/block/Categories/Categories_20220719154850.tsx new file mode 100644 index 0000000..08a8944 --- /dev/null +++ b/.history/components/customer/pages/index/block/Categories/Categories_20220719154850.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import classNames from 'classnames'; + +type Props = { + type: string; + name: string; + }; + + export const CategoriesButton: React.FC = ({type, name}) => { + return( + {name} + + ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162727.tsx b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162727.tsx new file mode 100644 index 0000000..35142de --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162727.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import Image from 'next/image'; + +type Props = { + src: string, + alt: string, +}; + +export const CardAdditionally: React.FC = ({src, alt}) => { + return( + +
+ {alt} +
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162736.tsx b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162736.tsx new file mode 100644 index 0000000..4779313 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162736.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import Image from 'next/image'; + +type Props = { + src: string, + alt: string, +}; + +export const CardAdditionally: React.FC = ({src, alt}) => { + return( + +
+ {alt} +
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065729.tsx b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162738.tsx similarity index 97% rename from .history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065729.tsx rename to .history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162738.tsx index 52bd731..3661975 100644 --- a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065729.tsx +++ b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162738.tsx @@ -8,6 +8,7 @@ type Props = { export const CardAdditionally: React.FC = ({src, alt}) => { return( +
= ({src, alt}) => { return( +
= ({src, alt}) => { width={106} height={106} /> +

) -} - -export default CardAdditionally; \ No newline at end of file +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162851.tsx b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162851.tsx new file mode 100644 index 0000000..e37a3e4 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162851.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Image from 'next/image'; + +type Props = { + src: string, + alt: string, +}; + +export const CardAdditionally: React.FC = ({src, alt}) => { + return( + +
+ {alt} +

Coca-Cola

+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719164146.tsx b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719164146.tsx new file mode 100644 index 0000000..ff62140 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719164146.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Image from 'next/image'; + +type Props = { + src: string, + alt: string, +}; + +export const CardAdditionally: React.FC = ({src, alt}) => { + return( + +
+ {alt} +

Coca-Cola

+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719164420.tsx b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719164420.tsx new file mode 100644 index 0000000..1df5dba --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719164420.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import Image from 'next/image'; + +type Props = { + src: string, + alt: string, +}; + +export const CardAdditionally: React.FC = ({src, alt}) => { + return( + +
+
+ {alt} +
+

Coca-Cola

+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618064604.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618064604.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065139.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065139.tsx deleted file mode 100644 index 9ef2bf6..0000000 --- a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065139.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import Image from 'next/image'; - -type Props = { src: string, - alt: string, - title_name: string, - title_size: string, - sum: number, - }; - -export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { - const [countProduct, setcountProduct] = useState(1); - const [price, setPrice] = useState(sum); - - return( -
-
- {alt} -
-
-

{title_name}

-

{title_size}

-
- -
- -

{countProduct}

- -
- -
-

{price} ₽

-
-
- ) -} - -export default CardBasketProduct; \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065724.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065724.tsx deleted file mode 100644 index 0c69714..0000000 --- a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065724.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import Image from 'next/image'; - -type Props = { src: string, - alt: string, - title_name: string, - title_size: string, - sum: number, - }; - -export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { - const [countProduct, setcountProduct] = useState(1); - const [price, setPrice] = useState(sum); - - return( -
-
- {alt} -
-
-

{title_name}

-

{title_size}

-
- -
- -

{countProduct}

- -
- -
-

{price} ₽

-
-
- ) -} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083211.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083211.tsx deleted file mode 100644 index 0c69714..0000000 --- a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083211.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import Image from 'next/image'; - -type Props = { src: string, - alt: string, - title_name: string, - title_size: string, - sum: number, - }; - -export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { - const [countProduct, setcountProduct] = useState(1); - const [price, setPrice] = useState(sum); - - return( -
-
- {alt} -
-
-

{title_name}

-

{title_size}

-
- -
- -

{countProduct}

- -
- -
-

{price} ₽

-
-
- ) -} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083126.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152308.tsx similarity index 96% rename from .history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083126.tsx rename to .history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152308.tsx index f455c14..04c1126 100644 --- a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083126.tsx +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152308.tsx @@ -13,7 +13,7 @@ export const CardBasketProduct: React.FC = ({src, alt, title_name, title_ const [price, setPrice] = useState(sum); return( -
+
= ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152649.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152649.tsx new file mode 100644 index 0000000..bc9c4b2 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152649.tsx @@ -0,0 +1,45 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152711.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152711.tsx new file mode 100644 index 0000000..d1cee1a --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152711.tsx @@ -0,0 +1,45 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152808.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152808.tsx new file mode 100644 index 0000000..b72a331 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152808.tsx @@ -0,0 +1,45 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719153128.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719153128.tsx new file mode 100644 index 0000000..c53e89e --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719153128.tsx @@ -0,0 +1,35 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+ +
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719154935.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719154935.tsx new file mode 100644 index 0000000..f4472c2 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719154935.tsx @@ -0,0 +1,45 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155231.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155231.tsx new file mode 100644 index 0000000..8a81e5c --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155231.tsx @@ -0,0 +1,45 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155323.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155323.tsx new file mode 100644 index 0000000..06291b0 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155323.tsx @@ -0,0 +1,45 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155451.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155451.tsx new file mode 100644 index 0000000..2281639 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155451.tsx @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+ +
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719161854.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719161854.tsx new file mode 100644 index 0000000..75c7e4f --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719161854.tsx @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+ +
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719162106.tsx b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719162106.tsx new file mode 100644 index 0000000..75c7e4f --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719162106.tsx @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; + +type Props = { src: string, + alt: string, + title_name: string, + title_size: string, + sum: number, + }; + +export const CardBasketProduct: React.FC = ({src, alt, title_name, title_size, sum}) => { + const [countProduct, setcountProduct] = useState(1); + const [price, setPrice] = useState(sum); + + return( +
+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
+
+ +
+
+ +

{countProduct}

+ +
+ +
+

{price} ₽

+
+
+
+ ) +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719150122.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719150122.tsx new file mode 100644 index 0000000..e6aaf9f --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719150122.tsx @@ -0,0 +1,110 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар(а)

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ + +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719150904.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719150904.tsx new file mode 100644 index 0000000..167b13d --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719150904.tsx @@ -0,0 +1,110 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар(а)

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ + +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719151106.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719151106.tsx new file mode 100644 index 0000000..9baa909 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719151106.tsx @@ -0,0 +1,112 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([ {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар(а)

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ + +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719151152.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719151152.tsx new file mode 100644 index 0000000..024ce32 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719151152.tsx @@ -0,0 +1,111 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([ {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар(а)

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719151252.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719151252.tsx new file mode 100644 index 0000000..62fd0a1 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719151252.tsx @@ -0,0 +1,114 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([ {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар(а)

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+

Итого

{delivery} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719152036.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719152036.tsx new file mode 100644 index 0000000..ee7d978 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719152036.tsx @@ -0,0 +1,114 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([ {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар(а)

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+

Итого

{delivery} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719152124.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719152124.tsx new file mode 100644 index 0000000..6873ff7 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719152124.tsx @@ -0,0 +1,114 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([ {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар(а)

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+

Итого

{delivery} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719152205.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719152205.tsx new file mode 100644 index 0000000..d8f172c --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719152205.tsx @@ -0,0 +1,114 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([ {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}, + {name:'Ggg', size:'30 ffv', sum:345}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар на {sum} р

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+

Итого

{delivery} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719153318.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719153318.tsx new file mode 100644 index 0000000..d779c27 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719153318.tsx @@ -0,0 +1,114 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([ {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}, + {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}, + {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар на {sum} р

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+

Итого

{delivery} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/content_20220719154858.tsx b/.history/components/customer/pages/index/modals/cart/content_20220719154858.tsx new file mode 100644 index 0000000..6c01315 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/content_20220719154858.tsx @@ -0,0 +1,114 @@ +import React, { useState, useEffect } from 'react'; +import Image from 'next/image'; +import Link from "next/link"; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { HiMinus, HiPlus } from "react-icons/hi"; +import { CardBasketProduct, CardAdditionally } from './' +import { BoxScroll, Box } from '../../../../../../components/customer/containers'; +import {ButtonImg, Button } from '../../../../../UI'; + +type PizzaProps = { + id: number; + title: string; + heft: string[]; + description: string; + img: string[]; + price: string[]; + size: string[]; +}; + +const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ; + +export const PizzaModalsContentCart: React.FC = ({ + id, + title, + img, + heft, + description, + price, + size, +}) => { + //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); + const totalCount =0; + const [basket, setBasket] = useState([ {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}, + {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}, + {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}]); + const [quantityGoods, setQuantityGoods] = useState(basket.length); + const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100}, + {src:'/assets/img/coca.png', name: 'Coca', price: 100},]); + + const [delivery, setDelivery] = useState(0); + + const [sum, setSum] = useState(0); + + const addBasket = () => { + console.log('add'); + } + + + + return ( + <> + + + + + + + +
+

{totalCount} товар на {sum} р

+
+
+
+ {Object.keys(basket).length > 0 ? basket.map((rows, count) => + + ): ' Корзина пуста'} +
+
+

Добавить к заказу?

+ + {additionally.map((name, count) => + ) + } + +
+
+
+
+ +
+
+
+

Доставка

{delivery} ₽

+
+
+

{quantityGoods} товар(а)

+

{sum} ₽

+
+
+

Итого

{delivery} ₽

+
+
+ + + +
+ + ); +}; + + diff --git a/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719162906.scss b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719162906.scss new file mode 100644 index 0000000..1a46d5b --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719162906.scss @@ -0,0 +1,3 @@ +.card_additionally_box{ + +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719163328.scss b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719163328.scss new file mode 100644 index 0000000..6198b4f --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719163328.scss @@ -0,0 +1,5 @@ +.card_additionally_box{ + height: 110px; + width: 110px; + background: white; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164142.scss b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164142.scss new file mode 100644 index 0000000..5d9616e --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164142.scss @@ -0,0 +1,10 @@ +.card_additionally_box{ + height: 110px; + width: 110px; + background: white; + + .additionally_img { + height: 80px; + width: 80px; + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164239.scss b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164239.scss new file mode 100644 index 0000000..1375d01 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164239.scss @@ -0,0 +1,14 @@ +.card_additionally_box{ + min-width: 110px; + height: 80px; + border-radius: 14px; + margin: 10px 10px 10px 0; + position: relative; + display: inline-block; + background: white; + + .additionally_img { + height: 80px; + width: 80px; + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164423.scss b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164423.scss new file mode 100644 index 0000000..edc95f4 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164423.scss @@ -0,0 +1,14 @@ +.card_additionally_box{ + min-width: 110px; + height: 80px; + border-radius: 14px; + margin: 10px 10px 10px 0; + position: relative; + display: inline-block; + background: white; + + .card_additionally_img_box { + height: 80px; + width: 80px; + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164711.scss b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164711.scss new file mode 100644 index 0000000..b03ed7c --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164711.scss @@ -0,0 +1,14 @@ +.card_additionally_box{ + min-width: 100px; + height: 105px; + border-radius: 14px; + margin-left: 10px; + position: relative; + display: inline-block; + background: white; + + .card_additionally_img_box { + height: 80px; + width: 80px; + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164736.scss b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164736.scss new file mode 100644 index 0000000..0c9c7f0 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164736.scss @@ -0,0 +1,16 @@ +.card_additionally_box{ + min-width: 100px; + height: 105px; + border-radius: 14px; + margin-left: 10px; + position: relative; + display: inline-block; + background: white; + text-align: center; + + .card_additionally_img_box { + height: 80px; + width: 80px; + text-align: center; + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164855.scss b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164855.scss new file mode 100644 index 0000000..823811b --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164855.scss @@ -0,0 +1,19 @@ +.card_additionally_box{ + min-width: 100px; + height: 105px; + border-radius: 14px; + margin-left: 10px; + position: relative; + display: inline-block; + background: white; + text-align: center; + + .card_additionally_img_box { + height: 80px; + width: 80px; + text-align: center; + display: block; + margin-left: auto; + margin-right: auto; + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164953.scss b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164953.scss new file mode 100644 index 0000000..823811b --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164953.scss @@ -0,0 +1,19 @@ +.card_additionally_box{ + min-width: 100px; + height: 105px; + border-radius: 14px; + margin-left: 10px; + position: relative; + display: inline-block; + background: white; + text-align: center; + + .card_additionally_img_box { + height: 80px; + width: 80px; + text-align: center; + display: block; + margin-left: auto; + margin-right: auto; + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065612.tsx b/.history/components/customer/pages/index/modals/cart/styles/additionally_20220719162755.scss similarity index 100% rename from .history/components/customer/pages/index/modals/cart/cardAdditionally_20220618065612.tsx rename to .history/components/customer/pages/index/modals/cart/styles/additionally_20220719162755.scss diff --git a/.history/components/customer/pages/index/modals/cart/styles/additionally_20220719162907.scss b/.history/components/customer/pages/index/modals/cart/styles/additionally_20220719162907.scss new file mode 100644 index 0000000..1a46d5b --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/additionally_20220719162907.scss @@ -0,0 +1,3 @@ +.card_additionally_box{ + +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719151653.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151653.scss new file mode 100644 index 0000000..131bda6 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151653.scss @@ -0,0 +1,141 @@ +.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-color: #fefefe; + 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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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: 15px; + + .box{ + border-bottom: 1px dashed #8E8E93; + display: flex; + + .text{ + right: 30px; + position: absolute; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719151720.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151720.scss new file mode 100644 index 0000000..ce4b5e0 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151720.scss @@ -0,0 +1,140 @@ +.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-color: #fefefe; + 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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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: 15px; + border-bottom: 1px dashed #8E8E93; + .box{ + display: flex; + + .text{ + right: 30px; + position: absolute; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719151802.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151802.scss new file mode 100644 index 0000000..085e696 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151802.scss @@ -0,0 +1,140 @@ +.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-color: #fefefe; + 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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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: 15px; + border-bottom: 1px dashed #8E8E93; + .box{ + display: flex; + margin-top: 6px;; + .text{ + right: 30px; + position: absolute; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719151854.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151854.scss new file mode 100644 index 0000000..dec0c7f --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151854.scss @@ -0,0 +1,140 @@ +.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-color: #fefefe; + 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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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: 15px 0px 0px 0px; + border-bottom: 1px dashed #8E8E93; + .box{ + display: flex; + margin-top: 6px;; + .text{ + right: 30px; + position: absolute; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719151908.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151908.scss new file mode 100644 index 0000000..cb88f12 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151908.scss @@ -0,0 +1,140 @@ +.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-color: #fefefe; + 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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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; + border-bottom: 1px dashed #8E8E93; + .box{ + display: flex; + margin-top: 6px;; + .text{ + right: 30px; + position: absolute; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719151948.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151948.scss new file mode 100644 index 0000000..1607d78 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151948.scss @@ -0,0 +1,141 @@ +.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-color: #fefefe; + 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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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: 5px; + border-bottom: 1px dashed #8E8E93; + .box{ + display: flex; + margin-top: 6px;; + .text{ + right: 30px; + position: absolute; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719151951.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151951.scss new file mode 100644 index 0000000..33f7156 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719151951.scss @@ -0,0 +1,141 @@ +.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-color: #fefefe; + 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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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: 10px; + border-bottom: 1px dashed #8E8E93; + .box{ + display: flex; + margin-top: 6px;; + .text{ + right: 30px; + position: absolute; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719152000.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719152000.scss new file mode 100644 index 0000000..ca024b1 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719152000.scss @@ -0,0 +1,141 @@ +.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-color: #fefefe; + 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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719154354.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719154354.scss new file mode 100644 index 0000000..83bf074 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719154354.scss @@ -0,0 +1,141 @@ +.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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719163005.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719163005.scss new file mode 100644 index 0000000..27b549f --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719163005.scss @@ -0,0 +1,142 @@ +.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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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 'ingredients'; + } + + .body_additionally_text{ + font-size: 18px; + line-height: 21px; + letter-spacing: 0.02em; + padding: 10px; + } + + .basket_footer{ + position: inherit; + bottom: 0; + width: 430px; + 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; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/index_20220719163027.scss b/.history/components/customer/pages/index/modals/cart/styles/index_20220719163027.scss new file mode 100644 index 0000000..8b2ae64 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/index_20220719163027.scss @@ -0,0 +1,142 @@ +.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: 430px; + height: 49px; + padding: 15px; + background-color: #FFFFFF; + } + + .body{ + 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: 430px; + 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; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152329.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152329.scss new file mode 100644 index 0000000..9efec14 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152329.scss @@ -0,0 +1,55 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_img{ + margin: 10px; + } +} + + + +.card_basket_product_box_title{ + margin: 10px; +} + +.card_basket_product_title{ + /* font-size: 20px; */ + line-height: 24px; +} + +.card_basket_product_size{ + font-weight: 400; + font-size: 16px; + background: #FED11E; + border-radius: 8px; + width: 60px; + padding: 5px; + text-align: center; +} +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152644.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152644.scss new file mode 100644 index 0000000..78c6fcd --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152644.scss @@ -0,0 +1,58 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + .product_img{ + margin: 10px; + } + } + +} + + + +.card_basket_product_box_title{ + margin: 10px; +} + +.card_basket_product_title{ + /* font-size: 20px; */ + line-height: 24px; +} + +.card_basket_product_size{ + font-weight: 400; + font-size: 16px; + background: #FED11E; + border-radius: 8px; + width: 60px; + padding: 5px; + text-align: center; +} +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152806.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152806.scss new file mode 100644 index 0000000..f55d2f3 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152806.scss @@ -0,0 +1,58 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + .product_img_box{ + margin: 10px; + } + } + +} + + + +.card_basket_product_box_title{ + margin: 10px; +} + +.card_basket_product_title{ + /* font-size: 20px; */ + line-height: 24px; +} + +.card_basket_product_size{ + font-weight: 400; + font-size: 16px; + background: #FED11E; + border-radius: 8px; + width: 60px; + padding: 5px; + text-align: center; +} +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152820.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152820.scss new file mode 100644 index 0000000..c6ae6cd --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152820.scss @@ -0,0 +1,57 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + .product_img_box{ + margin: 10px; + } + } +} + + + +.card_basket_product_box_title{ + margin: 10px; +} + +.card_basket_product_title{ + /* font-size: 20px; */ + line-height: 24px; +} + +.card_basket_product_size{ + font-weight: 400; + font-size: 16px; + background: #FED11E; + border-radius: 8px; + width: 60px; + padding: 5px; + text-align: center; +} +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152901.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152901.scss new file mode 100644 index 0000000..58cc20d --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152901.scss @@ -0,0 +1,60 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + + .product_img_box{ + margin: 10px; + } + + .title_box{ + margin: 10px; + } + } +} + + + + + +.card_basket_product_title{ + /* font-size: 20px; */ + line-height: 24px; +} + +.card_basket_product_size{ + font-weight: 400; + font-size: 16px; + background: #FED11E; + border-radius: 8px; + width: 60px; + padding: 5px; + text-align: center; +} +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152948.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152948.scss new file mode 100644 index 0000000..e13fb97 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152948.scss @@ -0,0 +1,63 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + + .product_img_box{ + margin: 10px; + } + + .title_box{ + margin: 10px; + + .title{ + /* font-size: 20px; */ + line-height: 24px; + } + + .size{ + font-weight: 400; + font-size: 16px; + background: #FED11E; + border-radius: 8px; + width: 60px; + padding: 5px; + text-align: center; + } + } + + } +} + + + + + + +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153356.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153356.scss new file mode 100644 index 0000000..74efc65 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153356.scss @@ -0,0 +1,58 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + + .product_img_box{ + margin: 10px; + } + + .title_box{ + margin: 10px; + + .title{ + /* font-size: 20px; */ + line-height: 24px; + } + + .size{ + font-weight: 400; + font-size: 16px; + } + } + + } +} + + + + + + +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153427.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153427.scss new file mode 100644 index 0000000..14de91d --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153427.scss @@ -0,0 +1,64 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + + .product_img_box{ + margin: 10px; + } + + .title_box{ + margin: 10px; + + .title{ + /* font-size: 20px; */ + line-height: 24px; + font-weight: 400; + font-size: 20px; + line-height: 24px; + /* identical to box height */ + + letter-spacing: 0.02em; + } + + .size{ + font-weight: 400; + font-size: 16px; + } + } + + } +} + + + + + + +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153439.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153439.scss new file mode 100644 index 0000000..c8f7ede --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153439.scss @@ -0,0 +1,61 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + + .product_img_box{ + margin: 10px; + } + + .title_box{ + margin: 10px; + + .title{ + line-height: 24px; + font-weight: 400; + font-size: 20px; + line-height: 24px; + letter-spacing: 0.02em; + } + + .size{ + font-weight: 400; + font-size: 16px; + } + } + + } +} + + + + + + +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153628.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153628.scss new file mode 100644 index 0000000..d7a494e --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153628.scss @@ -0,0 +1,62 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + display: contents; + + .product_img_box{ + margin: 10px; + } + + .title_box{ + margin: 10px; + + .title{ + line-height: 24px; + font-weight: 400; + font-size: 20px; + line-height: 24px; + letter-spacing: 0.02em; + } + + .size{ + font-weight: 400; + font-size: 16px; + } + } + + } +} + + + + + + +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153809.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153809.scss new file mode 100644 index 0000000..9b19b4e --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153809.scss @@ -0,0 +1,62 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 0px 10px 10px 10px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + display: contents; + + .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; + } + + .size{ + font-weight: 400; + font-size: 16px; + } + } + + } +} + + + + + + +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719154245.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719154245.scss new file mode 100644 index 0000000..a1deef0 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719154245.scss @@ -0,0 +1,64 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 10px 10px 10px 10px; + padding: 10px 10px 10px 0px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + display: contents; + + .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; + } + } + + } +} + + + + + + +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719154804.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719154804.scss new file mode 100644 index 0000000..447871e --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719154804.scss @@ -0,0 +1,64 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 10px 10px 10px 10px; + padding: 10px 10px 10px 0px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + display: contents; + 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; + } + } + + } +} + + + + + + +.card_basket_product_sale_box_button{ + display: flex; + margin-left: 5px; +} + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155053.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155053.scss new file mode 100644 index 0000000..cb48577 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155053.scss @@ -0,0 +1,68 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 10px 10px 10px 10px; + padding: 10px 10px 10px 0px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + display: contents; + 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; + } + } + + } + + .card_basket_product_footer{ + .sale_button_box{ + display: flex; + margin-left: 5px; + } + } +} + + + + + + + + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155141.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155141.scss new file mode 100644 index 0000000..452b3d7 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155141.scss @@ -0,0 +1,78 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 10px 10px 10px 10px; + padding: 10px 10px 10px 0px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + display: contents; + 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; + } + } + + } + + .card_basket_product_footer{ + .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; + } + } +} + + + + + + + + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_button{ + font-size: 35px; +} + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155417.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155417.scss new file mode 100644 index 0000000..3b89762 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155417.scss @@ -0,0 +1,90 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 10px 10px 10px 10px; + padding: 10px 10px 10px 0px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + display: contents; + 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; + } + } + + } + + .product_footer{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0px; + gap: 238px; + + width: 398px; + height: 32px; + + .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; + + .product_button{ + font-size: 3px; + } + } + } +} + + + + + + + + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155533.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155533.scss new file mode 100644 index 0000000..8375452 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155533.scss @@ -0,0 +1,82 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + margin: 10px 10px 10px 10px; + padding: 10px 10px 10px 0px; + background: #FFFFFF; + border-radius: 10px; + display: inline-flex; + + .product_head{ + display: contents; + 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; + } + } + + } + + .product_footer{ + + + .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; + + .product_button{ + font-size: 3px; + } + } + } +} + + + + + + + + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160559.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160559.scss new file mode 100644 index 0000000..f878fa1 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160559.scss @@ -0,0 +1,82 @@ +.card_basket_product_main{ + width: 95%; + height: 80px; + 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; + } + } + + } + + .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; + + .product_button{ + font-size: 3px; + } + } + } +} + + + + + + + + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160705.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160705.scss new file mode 100644 index 0000000..68cfcef --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160705.scss @@ -0,0 +1,82 @@ +.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; + } + } + + } + + .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; + + .product_button{ + font-size: 3px; + } + } + } +} + + + + + + + + +.card_basket_product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160816.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160816.scss new file mode 100644 index 0000000..7d938c9 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160816.scss @@ -0,0 +1,84 @@ +.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; + } + } + + } + + .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; + + .product_button{ + font-size: 3px; + } + + .product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; + } + } + } +} + + + + + + + + + + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161037.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161037.scss new file mode 100644 index 0000000..9b79efc --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161037.scss @@ -0,0 +1,87 @@ +.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; + } + } + + } + + .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: 0px; + position: absolute; + + .product_button{ + font-size: 3px; + } + + .product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; + } + } + } +} + + + + + + + + + + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161216.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161216.scss new file mode 100644 index 0000000..3882cfd --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161216.scss @@ -0,0 +1,89 @@ +.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; + } + } + + } + + .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: 5px; + position: absolute; + + margin-top: 11px; + + .product_button{ + font-size: 3px; + } + + .product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; + } + } + } +} + + + + + + + + + + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161221.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161221.scss new file mode 100644 index 0000000..c362b39 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161221.scss @@ -0,0 +1,89 @@ +.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; + } + } + + } + + .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: 10px; + position: absolute; + + margin-top: 11px; + + .product_button{ + font-size: 3px; + } + + .product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; + } + } + } +} + + + + + + + + + + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161226.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161226.scss new file mode 100644 index 0000000..d1c9d54 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161226.scss @@ -0,0 +1,89 @@ +.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; + } + } + + } + + .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: 3px; + } + + .product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; + } + } + } +} + + + + + + + + + + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161436.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161436.scss new file mode 100644 index 0000000..56993cd --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161436.scss @@ -0,0 +1,92 @@ +.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; + } + } + + } + + .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: 20px; + padding: 0; + border: none; + background: none; + } + + .product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; + } + } + } +} + + + + + + + + + + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161454.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161454.scss new file mode 100644 index 0000000..d6bb3aa --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161454.scss @@ -0,0 +1,93 @@ +.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; + } + } + + } + + .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: 20px; + padding: 0; + border: none; + background: none; + cursor: pointer; + } + + .product_count{ + font-size: 24px; + padding: 28px 5px 3px 5px; + } + } + } +} + + + + + + + + + + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161540.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161540.scss new file mode 100644 index 0000000..985f995 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161540.scss @@ -0,0 +1,93 @@ +.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; + } + } + + } + + .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: 24px; + padding: 28px 5px 3px 5px; + } + } + } +} + + + + + + + + + + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161648.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161648.scss new file mode 100644 index 0000000..1dc510f --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161648.scss @@ -0,0 +1,93 @@ +.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; + } + } + + } + + .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: 24px; + margin-top: 11px; + } + } + } +} + + + + + + + + + + + + +.card_basket_product_price{ + font-size: 24px; + padding: 28px 5px 3px 5px; +} + +.card_basket_product_sale_box_price{ + margin-left: 10px; +} \ No newline at end of file diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161855.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161855.scss new file mode 100644 index 0000000..6856f33 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161855.scss @@ -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; + } + } + + } + + .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: 24px; + margin-top: 11px; + } + } + + .product_price{ + font-size: 24px; + margin-top: 11px; + } + + .sale_box_price{ + margin-left: 10px; + } + } +} + + + + + + + + + + + + diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161858.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161858.scss new file mode 100644 index 0000000..b32f80a --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161858.scss @@ -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; + } + } + + } + + .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: 24px; + margin-top: 11px; + } + } + + .product_price{ + font-size: 24px; + margin-top: 11px; + } + + .sale_box_price{ + margin-left: 10px; + } + } +} + + + + + + + + + + + + diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161930.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161930.scss new file mode 100644 index 0000000..b8f61b0 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161930.scss @@ -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; + } + } + + } + + .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; + margin-top: 11px; + } + } + + .product_price{ + font-size: 24px; + margin-top: 11px; + } + + .sale_box_price{ + margin-left: 10px; + } + } +} + + + + + + + + + + + + diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161954.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161954.scss new file mode 100644 index 0000000..95eba9b --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161954.scss @@ -0,0 +1,93 @@ +.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; + } + } + + } + + .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; + } + } +} + + + + + + + + + + + + diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719162213.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719162213.scss new file mode 100644 index 0000000..f4ee469 --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719162213.scss @@ -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; + color: #8E8E93; + } + + .size{ + font-weight: 400; + font-size: 16px; + } + } + + } + + .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; + } + } +} + + + + + + + + + + + + diff --git a/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719162221.scss b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719162221.scss new file mode 100644 index 0000000..aa0bebd --- /dev/null +++ b/.history/components/customer/pages/index/modals/cart/styles/product_box_20220719162221.scss @@ -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; + } + } +} + + + + + + + + + + + + diff --git a/.history/styles/components/UX/Button_20220520132903.scss b/.history/styles/components/UX/Button_20220520132903.scss deleted file mode 100644 index e69de29..0000000 diff --git a/.history/styles/components/UX/Button_20220520132911.scss b/.history/styles/components/UX/Button_20220520132911.scss deleted file mode 100644 index 21f2e40..0000000 --- a/.history/styles/components/UX/Button_20220520132911.scss +++ /dev/null @@ -1,85 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} diff --git a/.history/styles/components/UX/Button_20220520133451.scss b/.history/styles/components/UX/Button_20220520133451.scss deleted file mode 100644 index 2e8ecca..0000000 --- a/.history/styles/components/UX/Button_20220520133451.scss +++ /dev/null @@ -1,86 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -. - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} diff --git a/.history/styles/components/UX/Button_20220520133502.scss b/.history/styles/components/UX/Button_20220520133502.scss deleted file mode 100644 index 794a5eb..0000000 --- a/.history/styles/components/UX/Button_20220520133502.scss +++ /dev/null @@ -1,88 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} diff --git a/.history/styles/components/UX/Button_20220520133509.scss b/.history/styles/components/UX/Button_20220520133509.scss deleted file mode 100644 index 0bcdc4d..0000000 --- a/.history/styles/components/UX/Button_20220520133509.scss +++ /dev/null @@ -1,88 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} diff --git a/.history/styles/components/UX/Button_20220520133511.scss b/.history/styles/components/UX/Button_20220520133511.scss deleted file mode 100644 index 0bcdc4d..0000000 --- a/.history/styles/components/UX/Button_20220520133511.scss +++ /dev/null @@ -1,88 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} diff --git a/.history/styles/components/UX/Button_20220528234610.scss b/.history/styles/components/UX/Button_20220528234610.scss deleted file mode 100644 index a23648e..0000000 --- a/.history/styles/components/UX/Button_20220528234610.scss +++ /dev/null @@ -1,89 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} diff --git a/.history/styles/components/UX/Button_20220529142826.scss b/.history/styles/components/UX/Button_20220529142826.scss deleted file mode 100644 index ddde6a6..0000000 --- a/.history/styles/components/UX/Button_20220529142826.scss +++ /dev/null @@ -1,95 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/img/video.png') 0% no-repeat; - height: 100px; - width: 120px; -} diff --git a/.history/styles/components/UX/Button_20220529142829.scss b/.history/styles/components/UX/Button_20220529142829.scss deleted file mode 100644 index 92c86e0..0000000 --- a/.history/styles/components/UX/Button_20220529142829.scss +++ /dev/null @@ -1,95 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('ass/img/video.png') 0% no-repeat; - height: 100px; - width: 120px; -} diff --git a/.history/styles/components/UX/Button_20220529142831.scss b/.history/styles/components/UX/Button_20220529142831.scss deleted file mode 100644 index b00fa68..0000000 --- a/.history/styles/components/UX/Button_20220529142831.scss +++ /dev/null @@ -1,95 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('assets/img/video.png') 0% no-repeat; - height: 100px; - width: 120px; -} diff --git a/.history/styles/components/UX/Button_20220529142834.scss b/.history/styles/components/UX/Button_20220529142834.scss deleted file mode 100644 index 3f2f619..0000000 --- a/.history/styles/components/UX/Button_20220529142834.scss +++ /dev/null @@ -1,95 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - height: 100px; - width: 120px; -} diff --git a/.history/styles/components/UX/Button_20220529142835.scss b/.history/styles/components/UX/Button_20220529142835.scss deleted file mode 100644 index 3f2f619..0000000 --- a/.history/styles/components/UX/Button_20220529142835.scss +++ /dev/null @@ -1,95 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - height: 100px; - width: 120px; -} diff --git a/.history/styles/components/UX/Button_20220529143035.scss b/.history/styles/components/UX/Button_20220529143035.scss deleted file mode 100644 index 1e8e20d..0000000 --- a/.history/styles/components/UX/Button_20220529143035.scss +++ /dev/null @@ -1,94 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; -} diff --git a/.history/styles/components/UX/Button_20220529143046.scss b/.history/styles/components/UX/Button_20220529143046.scss deleted file mode 100644 index d80dfd9..0000000 --- a/.history/styles/components/UX/Button_20220529143046.scss +++ /dev/null @@ -1,95 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - margin: 10px; -} diff --git a/.history/styles/components/UX/Button_20220529143058.scss b/.history/styles/components/UX/Button_20220529143058.scss deleted file mode 100644 index ee650bb..0000000 --- a/.history/styles/components/UX/Button_20220529143058.scss +++ /dev/null @@ -1,95 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - margin-top: 10px; -} diff --git a/.history/styles/components/UX/Button_20220529143059.scss b/.history/styles/components/UX/Button_20220529143059.scss deleted file mode 100644 index ee650bb..0000000 --- a/.history/styles/components/UX/Button_20220529143059.scss +++ /dev/null @@ -1,95 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - margin-top: 10px; -} diff --git a/.history/styles/components/UX/Button_20220529143138.scss b/.history/styles/components/UX/Button_20220529143138.scss deleted file mode 100644 index 6e8d1d8..0000000 --- a/.history/styles/components/UX/Button_20220529143138.scss +++ /dev/null @@ -1,96 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - margin-top: 10px; - border:none; -} diff --git a/.history/styles/components/UX/Button_20220529143227.scss b/.history/styles/components/UX/Button_20220529143227.scss deleted file mode 100644 index a275fb3..0000000 --- a/.history/styles/components/UX/Button_20220529143227.scss +++ /dev/null @@ -1,97 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - margin-top: 10px; - border:none; - -} diff --git a/.history/styles/components/UX/Button_20220529143229.scss b/.history/styles/components/UX/Button_20220529143229.scss deleted file mode 100644 index 113f61f..0000000 --- a/.history/styles/components/UX/Button_20220529143229.scss +++ /dev/null @@ -1,98 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - margin-top: 10px; - border:none; - -} -.testhover:hover { border: 1px solid red; } diff --git a/.history/styles/components/UX/Button_20220529143232.scss b/.history/styles/components/UX/Button_20220529143232.scss deleted file mode 100644 index 013f933..0000000 --- a/.history/styles/components/UX/Button_20220529143232.scss +++ /dev/null @@ -1,98 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - margin-top: 10px; - border:none; - -} -.video:hover { border: 1px solid red; } diff --git a/.history/styles/components/UX/Button_20220529143233.scss b/.history/styles/components/UX/Button_20220529143233.scss deleted file mode 100644 index 013f933..0000000 --- a/.history/styles/components/UX/Button_20220529143233.scss +++ /dev/null @@ -1,98 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - margin-top: 10px; - border:none; - -} -.video:hover { border: 1px solid red; } diff --git a/.history/styles/components/UX/Button_20220529143247.scss b/.history/styles/components/UX/Button_20220529143247.scss deleted file mode 100644 index a68ca74..0000000 --- a/.history/styles/components/UX/Button_20220529143247.scss +++ /dev/null @@ -1,99 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - h - margin-top: 10px; - border:none; - -} -.video:hover { border: 1px solid red; } diff --git a/.history/styles/components/UX/Button_20220529143249.scss b/.history/styles/components/UX/Button_20220529143249.scss deleted file mode 100644 index 97c8e37..0000000 --- a/.history/styles/components/UX/Button_20220529143249.scss +++ /dev/null @@ -1,99 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: ; - margin-top: 10px; - border:none; - -} -.video:hover { border: 1px solid red; } diff --git a/.history/styles/components/UX/Button_20220529143251.scss b/.history/styles/components/UX/Button_20220529143251.scss deleted file mode 100644 index 1a55d66..0000000 --- a/.history/styles/components/UX/Button_20220529143251.scss +++ /dev/null @@ -1,99 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 1; - margin-top: 10px; - border:none; - -} -.video:hover { border: 1px solid red; } diff --git a/.history/styles/components/UX/Button_20220529143253.scss b/.history/styles/components/UX/Button_20220529143253.scss deleted file mode 100644 index 402e831..0000000 --- a/.history/styles/components/UX/Button_20220529143253.scss +++ /dev/null @@ -1,99 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 50px; - margin-top: 10px; - border:none; - -} -.video:hover { border: 1px solid red; } diff --git a/.history/styles/components/UX/Button_20220529143258.scss b/.history/styles/components/UX/Button_20220529143258.scss deleted file mode 100644 index fd0d6d4..0000000 --- a/.history/styles/components/UX/Button_20220529143258.scss +++ /dev/null @@ -1,99 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 20px; - margin-top: 10px; - border:none; - -} -.video:hover { border: 1px solid red; } diff --git a/.history/styles/components/UX/Button_20220529143302.scss b/.history/styles/components/UX/Button_20220529143302.scss deleted file mode 100644 index ad931c8..0000000 --- a/.history/styles/components/UX/Button_20220529143302.scss +++ /dev/null @@ -1,99 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { border: 1px solid red; } diff --git a/.history/styles/components/UX/Button_20220529143321.scss b/.history/styles/components/UX/Button_20220529143321.scss deleted file mode 100644 index 9799696..0000000 --- a/.history/styles/components/UX/Button_20220529143321.scss +++ /dev/null @@ -1,99 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { } diff --git a/.history/styles/components/UX/Button_20220529143333.scss b/.history/styles/components/UX/Button_20220529143333.scss deleted file mode 100644 index 826506b..0000000 --- a/.history/styles/components/UX/Button_20220529143333.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { - background-color: $color_hover; -} diff --git a/.history/styles/components/UX/Button_20220529143334.scss b/.history/styles/components/UX/Button_20220529143334.scss deleted file mode 100644 index 1873665..0000000 --- a/.history/styles/components/UX/Button_20220529143334.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { - background-color: $color_hover; -} diff --git a/.history/styles/components/UX/Button_20220529143344.scss b/.history/styles/components/UX/Button_20220529143344.scss deleted file mode 100644 index 44ff4d9..0000000 --- a/.history/styles/components/UX/Button_20220529143344.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 100px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { - background-color: $color_hover; -} diff --git a/.history/styles/components/UX/Button_20220529143353.scss b/.history/styles/components/UX/Button_20220529143353.scss deleted file mode 100644 index 1873665..0000000 --- a/.history/styles/components/UX/Button_20220529143353.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { - background-color: $color_hover; -} diff --git a/.history/styles/components/UX/Button_20220529143408.scss b/.history/styles/components/UX/Button_20220529143408.scss deleted file mode 100644 index d044ac9..0000000 --- a/.history/styles/components/UX/Button_20220529143408.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { - background-color: ; -} diff --git a/.history/styles/components/UX/Button_20220529143409.scss b/.history/styles/components/UX/Button_20220529143409.scss deleted file mode 100644 index b92b422..0000000 --- a/.history/styles/components/UX/Button_20220529143409.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { - background-color: #; -} diff --git a/.history/styles/components/UX/Button_20220529143410.scss b/.history/styles/components/UX/Button_20220529143410.scss deleted file mode 100644 index 1643096..0000000 --- a/.history/styles/components/UX/Button_20220529143410.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { - background-color: #ac9437; -} diff --git a/.history/styles/components/UX/Button_20220529143417.scss b/.history/styles/components/UX/Button_20220529143417.scss deleted file mode 100644 index 2dd0b27..0000000 --- a/.history/styles/components/UX/Button_20220529143417.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; - -} -.video:hover { - background-color: #cccbc8; -} diff --git a/.history/styles/components/UX/Button_20220529143428.scss b/.history/styles/components/UX/Button_20220529143428.scss deleted file mode 100644 index 2c357d7..0000000 --- a/.history/styles/components/UX/Button_20220529143428.scss +++ /dev/null @@ -1,100 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.video{ - background: url('/assets/img/video.png') 0% no-repeat; - width: 120px; - height: 30px; - margin-top: 10px; - border:none; -} -.video:hover { - background-color: #cccbc8; -} diff --git a/.history/styles/components/UX/Button_20220529143535.scss b/.history/styles/components/UX/Button_20220529143535.scss deleted file mode 100644 index c4ef6be..0000000 --- a/.history/styles/components/UX/Button_20220529143535.scss +++ /dev/null @@ -1,89 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 120px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220530182005.scss b/.history/styles/components/UX/Button_20220530182005.scss deleted file mode 100644 index 0f68c73..0000000 --- a/.history/styles/components/UX/Button_20220530182005.scss +++ /dev/null @@ -1,89 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - margin-bottom: 10px; -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220615035048.scss b/.history/styles/components/UX/Button_20220615035048.scss deleted file mode 100644 index f85153a..0000000 --- a/.history/styles/components/UX/Button_20220615035048.scss +++ /dev/null @@ -1,89 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616185713.scss b/.history/styles/components/UX/Button_20220616185713.scss deleted file mode 100644 index f2c198f..0000000 --- a/.history/styles/components/UX/Button_20220616185713.scss +++ /dev/null @@ -1,90 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 325px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - padding: 10px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616185806.scss b/.history/styles/components/UX/Button_20220616185806.scss deleted file mode 100644 index d4f1e93..0000000 --- a/.history/styles/components/UX/Button_20220616185806.scss +++ /dev/null @@ -1,90 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - padding: 10px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616185837.scss b/.history/styles/components/UX/Button_20220616185837.scss deleted file mode 100644 index b0f8c31..0000000 --- a/.history/styles/components/UX/Button_20220616185837.scss +++ /dev/null @@ -1,90 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - padding: 10px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616185848.scss b/.history/styles/components/UX/Button_20220616185848.scss deleted file mode 100644 index 4361249..0000000 --- a/.history/styles/components/UX/Button_20220616185848.scss +++ /dev/null @@ -1,91 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - padding-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - padding: 10px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616185911.scss b/.history/styles/components/UX/Button_20220616185911.scss deleted file mode 100644 index db6dda5..0000000 --- a/.history/styles/components/UX/Button_20220616185911.scss +++ /dev/null @@ -1,91 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - padding: 10px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616190207.scss b/.history/styles/components/UX/Button_20220616190207.scss deleted file mode 100644 index af689a7..0000000 --- a/.history/styles/components/UX/Button_20220616190207.scss +++ /dev/null @@ -1,91 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616211857.scss b/.history/styles/components/UX/Button_20220616211857.scss deleted file mode 100644 index b7f4011..0000000 --- a/.history/styles/components/UX/Button_20220616211857.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.plus{ - background: url('/assets/img/plus.jpg') 100% 100% no-repeat; -} - -.minus{ - background: url('/assets/img/minus.jpg') 100% 100% no-repeat; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616212215.scss b/.history/styles/components/UX/Button_20220616212215.scss deleted file mode 100644 index 1db648b..0000000 --- a/.history/styles/components/UX/Button_20220616212215.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.plus{ - background: url('/assets/img/plus.png') 100% 100% no-repeat; -} - -.minus{ - background: url('/assets/img/minus.png') 100% 100% no-repeat; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616212520.scss b/.history/styles/components/UX/Button_20220616212520.scss deleted file mode 100644 index 2c88734..0000000 --- a/.history/styles/components/UX/Button_20220616212520.scss +++ /dev/null @@ -1,101 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.plus{ - background: url('/assets/img/plus.png') 100% 100% no-repeat; -} - -.minus{ - background: url('/assets/img/minus.png') !important; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616212532.scss b/.history/styles/components/UX/Button_20220616212532.scss deleted file mode 100644 index 52d5b15..0000000 --- a/.history/styles/components/UX/Button_20220616212532.scss +++ /dev/null @@ -1,105 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.plus{ - background: url('/assets/img/plus.png') 100% 100% no-repeat; -} - -.minus{ - background: url('/assets/img/minus.png') !important; - width:80px!important; -height:80px!important; -margin-right: auto !important; -margin-left: auto !important; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616212601.scss b/.history/styles/components/UX/Button_20220616212601.scss deleted file mode 100644 index 2392204..0000000 --- a/.history/styles/components/UX/Button_20220616212601.scss +++ /dev/null @@ -1,105 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} - -.plus{ - background: url('/assets/img/plus.png') 100% 100% no-repeat; -} - -.minus{ - background: url('/assets/img/minus.png'); - width:80px!important; -height:80px!important; -margin-right: auto !important; -margin-left: auto !important; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220616215537.scss b/.history/styles/components/UX/Button_20220616215537.scss deleted file mode 100644 index 496a052..0000000 --- a/.history/styles/components/UX/Button_20220616215537.scss +++ /dev/null @@ -1,93 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220617160950.scss b/.history/styles/components/UX/Button_20220617160950.scss deleted file mode 100644 index 62490c1..0000000 --- a/.history/styles/components/UX/Button_20220617160950.scss +++ /dev/null @@ -1,98 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220617161021.scss b/.history/styles/components/UX/Button_20220617161021.scss deleted file mode 100644 index 780b3c4..0000000 --- a/.history/styles/components/UX/Button_20220617161021.scss +++ /dev/null @@ -1,98 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220617161054.scss b/.history/styles/components/UX/Button_20220617161054.scss deleted file mode 100644 index d196c6a..0000000 --- a/.history/styles/components/UX/Button_20220617161054.scss +++ /dev/null @@ -1,98 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220617161133.scss b/.history/styles/components/UX/Button_20220617161133.scss deleted file mode 100644 index 582a808..0000000 --- a/.history/styles/components/UX/Button_20220617161133.scss +++ /dev/null @@ -1,98 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; - margin-left: 5px; -} - -.button_size_h_48{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button { - border-radius: 8px; - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220617163846.scss b/.history/styles/components/UX/Button_20220617163846.scss deleted file mode 100644 index 4848303..0000000 --- a/.history/styles/components/UX/Button_20220617163846.scss +++ /dev/null @@ -1,114 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; - margin-left: 5px; -} - -.button_size_h_48{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button_border_radius_8{ - border-radius: 8px; -} - -.button_border_radius_30{ - border-radius: 30px; - -webkit-border-radius: 30px; - -moz-border-radius: 30px; - -ms-border-radius: 30px; - -o-border-radius: 30px; -} - -.button { - - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - -ms-border-radius: 8px; - -o-border-radius: 8px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220617163857.scss b/.history/styles/components/UX/Button_20220617163857.scss deleted file mode 100644 index 6aa0f5d..0000000 --- a/.history/styles/components/UX/Button_20220617163857.scss +++ /dev/null @@ -1,118 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; - margin-left: 5px; -} - -.button_size_h_48{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button_border_radius_8{ - border-radius: 8px; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - -ms-border-radius: 8px; - -o-border-radius: 8px; -} - -.button_border_radius_30{ - border-radius: 30px; - -webkit-border-radius: 30px; - -moz-border-radius: 30px; - -ms-border-radius: 30px; - -o-border-radius: 30px; -} - -.button { - - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - -ms-border-radius: 8px; - -o-border-radius: 8px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220617164009.scss b/.history/styles/components/UX/Button_20220617164009.scss deleted file mode 100644 index b004cc9..0000000 --- a/.history/styles/components/UX/Button_20220617164009.scss +++ /dev/null @@ -1,109 +0,0 @@ -$color_melon: #F5F1E1; -$color_hover: #ac9437; -$color_yellow: #FED11E; -$color_none: #dad9d8; - -.melon{ - background-color: $color_melon; - height: 50px; - padding: 14px 22px; - min-width: 150px; - margin-right: 15px; -} - -.button_size_32{ - height: 32px; - margin-left: 5px; -} - -.button_size_h_48{ - height: 48px; - margin-left: 5px; -} - -.button_size_48{ - height: 48px; - width: 255px; - font-size: 18px; -} - - - -.yellow{ - background-color: $color_yellow; - padding: 5px 15px 5px 15px; -} - -.none{ - background-color: $color_none; - height: 32px; - padding: 5px 15px 5px 15px; -} - -.button_align_right{ - text-align: right; -} - -.button_align_center{ - text-align: center; -} - -.button_box{ - /*margin-bottom: 10px;*/ -} - -.button_border_radius_8{ - border-radius: 8px; -} - -.button_border_radius_30{ - border-radius: 30px; -} - -.button { - border-style: none; - box-shadow: none; - box-sizing: border-box; - color: rgb(0, 0, 0); - cursor: pointer; - display: inline-block; - font-weight: 500; - letter-spacing: normal; - line-height: 1.5; - outline: none; - overflow: hidden; - position: relative; - text-align: center; - text-decoration: none; - transform: translate3d(0, 0, 0); - touch-action: manipulation; - vertical-align: top; - white-space: nowrap; - margin-left: 5px; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - -ms-border-radius: 8px; - -o-border-radius: 8px; -} - -.button:hover { - background-color: $color_hover; - box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px; - opacity: 1; - transform: translateY(0); - transition-duration: .35s; -} - -.button:hover:after { - opacity: .5; -} - -.button:active { - box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px; - transform: translateY(2px); - transition-duration: .35s; -} - -.button:active:after { - opacity: 1; -} \ No newline at end of file diff --git a/.history/styles/components/UX/Button_20220617164039.scss b/.history/styles/components/UX/Button_20220719150629.scss similarity index 100% rename from .history/styles/components/UX/Button_20220617164039.scss rename to .history/styles/components/UX/Button_20220719150629.scss diff --git a/.history/styles/globals_20220616135719.scss b/.history/styles/globals_20220616135719.scss deleted file mode 100644 index 4509514..0000000 --- a/.history/styles/globals_20220616135719.scss +++ /dev/null @@ -1,28 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCard.scss'; -@import './Ingredients'; \ No newline at end of file diff --git a/.history/styles/globals_20220616135731.scss b/.history/styles/globals_20220616135731.scss deleted file mode 100644 index 130d99b..0000000 --- a/.history/styles/globals_20220616135731.scss +++ /dev/null @@ -1,28 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCard.scss'; -@import './components/block/Ingredients'; \ No newline at end of file diff --git a/.history/styles/globals_20220617161611.scss b/.history/styles/globals_20220617161611.scss deleted file mode 100644 index 3939741..0000000 --- a/.history/styles/globals_20220617161611.scss +++ /dev/null @@ -1,32 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -body.modal-open { - overflow: hidden; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCard.scss'; -@import './components/block/Ingredients'; \ No newline at end of file diff --git a/.history/styles/globals_20220617161641.scss b/.history/styles/globals_20220617161641.scss deleted file mode 100644 index a9eb2e6..0000000 --- a/.history/styles/globals_20220617161641.scss +++ /dev/null @@ -1,30 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - - - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCard.scss'; -@import './components/block/Ingredients'; \ No newline at end of file diff --git a/.history/styles/globals_20220617161642.scss b/.history/styles/globals_20220617161642.scss deleted file mode 100644 index 130d99b..0000000 --- a/.history/styles/globals_20220617161642.scss +++ /dev/null @@ -1,28 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCard.scss'; -@import './components/block/Ingredients'; \ No newline at end of file diff --git a/.history/styles/globals_20220617162229.scss b/.history/styles/globals_20220617162229.scss deleted file mode 100644 index 8278ecf..0000000 --- a/.history/styles/globals_20220617162229.scss +++ /dev/null @@ -1,32 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -body { - overflow: hidden; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCard.scss'; -@import './components/block/Ingredients'; \ No newline at end of file diff --git a/.history/styles/globals_20220617162321.scss b/.history/styles/globals_20220617162321.scss deleted file mode 100644 index 130d99b..0000000 --- a/.history/styles/globals_20220617162321.scss +++ /dev/null @@ -1,28 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCard.scss'; -@import './components/block/Ingredients'; \ No newline at end of file diff --git a/.history/styles/globals_20220618081433.scss b/.history/styles/globals_20220618081433.scss deleted file mode 100644 index 05a6f77..0000000 --- a/.history/styles/globals_20220618081433.scss +++ /dev/null @@ -1,29 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCard.scss'; -@import './components/block/Ingredients'; -@import './components/block/Cart.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618083103.scss b/.history/styles/globals_20220618083103.scss deleted file mode 100644 index bd741bd..0000000 --- a/.history/styles/globals_20220618083103.scss +++ /dev/null @@ -1,30 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCard.scss'; -@import './components/block/Ingredients'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618104257.scss b/.history/styles/globals_20220618104257.scss deleted file mode 100644 index a5a4ba1..0000000 --- a/.history/styles/globals_20220618104257.scss +++ /dev/null @@ -1,30 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/UX/Modal.scss'; -@import './components/block/PizzaCart.scss'; -@import './components/block/Ingredients'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618150050.scss b/.history/styles/globals_20220618150050.scss deleted file mode 100644 index 25c8c56..0000000 --- a/.history/styles/globals_20220618150050.scss +++ /dev/null @@ -1,30 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import '../components/customer/modals/pizza/Modal.scss'; -@import './components/block/PizzaCart.scss'; -@import './components/block/Ingredients'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618150113.scss b/.history/styles/globals_20220618150113.scss deleted file mode 100644 index 9dd9f21..0000000 --- a/.history/styles/globals_20220618150113.scss +++ /dev/null @@ -1,30 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import './components/customer/modals/pizza/Modal.scss'; -@import './components/block/PizzaCart.scss'; -@import './components/block/Ingredients'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618150247.scss b/.history/styles/globals_20220618150247.scss deleted file mode 100644 index 25c8c56..0000000 --- a/.history/styles/globals_20220618150247.scss +++ /dev/null @@ -1,30 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import '../components/customer/modals/pizza/Modal.scss'; -@import './components/block/PizzaCart.scss'; -@import './components/block/Ingredients'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618150336.scss b/.history/styles/globals_20220618150336.scss deleted file mode 100644 index 06e4860..0000000 --- a/.history/styles/globals_20220618150336.scss +++ /dev/null @@ -1,30 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import '../components/customer/pages/index/modals/pizza/Modal.scss'; -@import './components/block/PizzaCart.scss'; -@import './components/block/Ingredients'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618151748.scss b/.history/styles/globals_20220618151748.scss deleted file mode 100644 index 57b7084..0000000 --- a/.history/styles/globals_20220618151748.scss +++ /dev/null @@ -1,29 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import '../components/customer/pages/index/modals/pizza/Modal.scss'; -@import './components/block/Ingredients'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618154224.scss b/.history/styles/globals_20220618154224.scss deleted file mode 100644 index 9ee29cb..0000000 --- a/.history/styles/globals_20220618154224.scss +++ /dev/null @@ -1,29 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import '../components/customer/pages/index/modals/pizza/styles/index.scss'; -@import './components/block/Ingredients'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618154510.scss b/.history/styles/globals_20220618154510.scss deleted file mode 100644 index 1cf1eb9..0000000 --- a/.history/styles/globals_20220618154510.scss +++ /dev/null @@ -1,28 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/block/Pizza.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import '../components/customer/pages/index/modals/pizza/styles/index.scss'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618175543.scss b/.history/styles/globals_20220618175543.scss deleted file mode 100644 index e24e83b..0000000 --- a/.history/styles/globals_20220618175543.scss +++ /dev/null @@ -1,28 +0,0 @@ -@font-face { - src: url('../public/assets/Rubik/Rubik-Italic-VariableFont_wght.ttf'); - src: url('../public/assets/Rubik/Rubik-VariableFont_wght.ttf'); - font-weight: 400; - font-style: normal; - font-family: 'Rubik'; -} - -@import './libs/ResetCss.scss'; -@import './components/block/Stock.scss'; -@import './components/Container.scss'; -@import './components/Header.scss'; -@import './components/Login.scss'; -@import './components/UX/Input.scss'; -@import './components/UX/Button.scss'; -@import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; -@import './components/Box.scss'; -@import './components/UX/ButtonImg.scss'; -@import './components/UX/PictureText.scss'; -@import './components/container/ContainerTitle.scss'; -@import './components/block/Footer.scss'; -@import './components/block/FooterNav.scss'; -@import './components/block/DeliveryArea.scss'; -@import '../components/customer/pages/index/block/pizza/styles/index.scss'; -@import '../components/customer/pages/index/modals/pizza/styles/index.scss'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file diff --git a/.history/styles/globals_20220618175549.scss b/.history/styles/globals_20220719150752.scss similarity index 85% rename from .history/styles/globals_20220618175549.scss rename to .history/styles/globals_20220719150752.scss index f915365..d8bebe2 100644 --- a/.history/styles/globals_20220618175549.scss +++ b/.history/styles/globals_20220719150752.scss @@ -14,7 +14,7 @@ @import './components/UX/Input.scss'; @import './components/UX/Button.scss'; @import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; +@import '../components/customer/pages/index/block/Categories/styles/Categories.scss'; @import './components/Box.scss'; @import './components/UX/ButtonImg.scss'; @import './components/UX/PictureText.scss'; @@ -24,5 +24,4 @@ @import './components/block/DeliveryArea.scss'; @import '../components/customer/pages/index/block/Pizza/styles/index.scss'; @import '../components/customer/pages/index/modals/pizza/styles/index.scss'; -@import './components/block/Cart.scss'; -@import './components/block/CardBasketProduct.scss'; \ No newline at end of file +@import '../components/customer/pages/index/modals/cart/styles/index.scss'; diff --git a/README.md b/README.md index eec2ad3..9c9508b 100644 --- a/README.md +++ b/README.md @@ -18,4 +18,7 @@ ### Изменения 18.07.22 1. Перенес кнопку закрыть карточку в верхний правый угол. 2. Настроил автоматическое изменение размеров модального окна с пиццей. -3. Изменил кнопку закрытия корзины. \ No newline at end of file +3. Изменил кнопку закрытия корзины. + +### Изменения 19.07.22 +1. Перерисовал корзину под новый дизайн только для компьютерной версии. \ No newline at end of file diff --git a/components/customer/pages/index/block/Categories/Categories.tsx b/components/customer/pages/index/block/Categories/Categories.tsx index 736cbdd..08a8944 100644 --- a/components/customer/pages/index/block/Categories/Categories.tsx +++ b/components/customer/pages/index/block/Categories/Categories.tsx @@ -10,7 +10,7 @@ type Props = { return( {name} ) diff --git a/styles/components/block/Categories.scss b/components/customer/pages/index/block/Categories/styles/Categories.scss similarity index 100% rename from styles/components/block/Categories.scss rename to components/customer/pages/index/block/Categories/styles/Categories.scss diff --git a/components/customer/pages/index/modals/cart/cardAdditionally.tsx b/components/customer/pages/index/modals/cart/cardAdditionally.tsx index 52bd731..1df5dba 100644 --- a/components/customer/pages/index/modals/cart/cardAdditionally.tsx +++ b/components/customer/pages/index/modals/cart/cardAdditionally.tsx @@ -8,14 +8,18 @@ type Props = { export const CardAdditionally: React.FC = ({src, alt}) => { return( +
- {alt} +
+ {alt} +
+

Coca-Cola

) } \ No newline at end of file diff --git a/components/customer/pages/index/modals/cart/cardBasketProduct.tsx b/components/customer/pages/index/modals/cart/cardBasketProduct.tsx index 0c69714..75c7e4f 100644 --- a/components/customer/pages/index/modals/cart/cardBasketProduct.tsx +++ b/components/customer/pages/index/modals/cart/cardBasketProduct.tsx @@ -14,29 +14,33 @@ export const CardBasketProduct: React.FC = ({src, alt, title_name, title_ return(
-
- {alt} -
-
-

{title_name}

-

{title_size}

+
+
+ {alt} +
+
+

{title_name}

+

{title_size}

+
-
- -

{countProduct}

- -
+
+
+ +

{countProduct}

+ +
-
-

{price} ₽

-
+
+

{price} ₽

+
+
) } \ No newline at end of file diff --git a/components/customer/pages/index/modals/cart/content.tsx b/components/customer/pages/index/modals/cart/content.tsx index e6aaf9f..6c01315 100644 --- a/components/customer/pages/index/modals/cart/content.tsx +++ b/components/customer/pages/index/modals/cart/content.tsx @@ -31,7 +31,9 @@ export const PizzaModalsContentCart: React.FC = ({ }) => { //const { totalPrice, totalCount } = useSelector(({ cart }) => cart); const totalCount =0; - const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]); + const [basket, setBasket] = useState([ {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}, + {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}, + {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}]); const [quantityGoods, setQuantityGoods] = useState(basket.length); const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100}, {src:'/assets/img/coca.png', name: 'Coca', price: 100}, @@ -59,7 +61,7 @@ export const PizzaModalsContentCart: React.FC = ({
-

{totalCount} товар(а)

+

{totalCount} товар на {sum} р

@@ -85,7 +87,6 @@ export const PizzaModalsContentCart: React.FC = ({
-
@@ -95,9 +96,12 @@ export const PizzaModalsContentCart: React.FC = ({

{quantityGoods} товар(а)

{sum} ₽

+
+

Итого

{delivery} ₽

+
- diff --git a/components/customer/pages/index/modals/cart/styles/_additionally.scss b/components/customer/pages/index/modals/cart/styles/_additionally.scss new file mode 100644 index 0000000..823811b --- /dev/null +++ b/components/customer/pages/index/modals/cart/styles/_additionally.scss @@ -0,0 +1,19 @@ +.card_additionally_box{ + min-width: 100px; + height: 105px; + border-radius: 14px; + margin-left: 10px; + position: relative; + display: inline-block; + background: white; + text-align: center; + + .card_additionally_img_box { + height: 80px; + width: 80px; + text-align: center; + display: block; + margin-left: auto; + margin-right: auto; + } +} \ No newline at end of file diff --git a/components/customer/pages/index/modals/cart/styles/index.scss b/components/customer/pages/index/modals/cart/styles/index.scss index a00a6ca..8b2ae64 100644 --- a/components/customer/pages/index/modals/cart/styles/index.scss +++ b/components/customer/pages/index/modals/cart/styles/index.scss @@ -12,7 +12,7 @@ .dialog { /* Modal Content */ .content { - background-color: #fefefe; + background: #F7F7F7; margin: auto; @media (max-width:760px) { height: 533px; @@ -70,6 +70,7 @@ .body_additionally{ width: 100%; position: relative; + @import './additionally.scss'; } .body_additionally_text{ @@ -92,8 +93,7 @@ order: 0; flex-grow: 1; margin: 0px 12px; - border: 1px solid #8E8E93; - border-radius: 10px; + border-bottom: 1px dashed #8E8E93; .input{ border: none; @@ -102,7 +102,6 @@ -webkit-appearance: none; color: #252A48; font-size: 18px; - padding: 0px 20px 0 20px; height: 38px; } @@ -125,12 +124,12 @@ .check{ font-size: 18px; line-height: 28px; - padding: 15px; - + padding: 0px 0px 0px 15px; + margin-bottom: 15px; + border-bottom: 1px dashed #8E8E93; .box{ - border-bottom: 1px dashed #8E8E93; display: flex; - + margin-top: 6px;; .text{ right: 30px; position: absolute; diff --git a/components/customer/pages/index/modals/cart/styles/product_box.scss b/components/customer/pages/index/modals/cart/styles/product_box.scss index 4432e5f..aa0bebd 100644 --- a/components/customer/pages/index/modals/cart/styles/product_box.scss +++ b/components/customer/pages/index/modals/cart/styles/product_box.scss @@ -1,53 +1,94 @@ .card_basket_product_main{ width: 95%; - height: 80px; - margin: 0px 10px 10px 10px; + height: 133px; + margin: 10px 10px 10px 10px; + padding: 10px 10px 10px 0px; background: #FFFFFF; border-radius: 10px; - display: inline-flex; -} + display: grid; -.card_basket_product_img{ - margin: 10px; -} + .product_head{ + display: flex; + border-bottom: 1px dashed #8E8E93; + .product_img_box{ + margin-left: 10px; + } -.card_basket_product_box_title{ - margin: 10px; -} + .title_box{ + margin: 10px; -.card_basket_product_title{ - /* font-size: 20px; */ - line-height: 24px; -} + .title{ + line-height: 24px; + font-weight: 400; + font-size: 20px; + line-height: 24px; + letter-spacing: 0.02em; + margin-bottom: 5px; + } -.card_basket_product_size{ - font-weight: 400; - font-size: 16px; - background: #FED11E; - border-radius: 8px; - width: 60px; - padding: 5px; - text-align: center; -} -.card_basket_product_sale_box_button{ - display: flex; - margin-left: 5px; -} + .size{ + font-weight: 400; + font-size: 16px; + color: #8E8E93; + } + } -.card_basket_product_count{ - font-size: 24px; - padding: 28px 5px 3px 5px; -} + } -.card_basket_product_button{ - font-size: 35px; -} + .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; + } -.card_basket_product_price{ - font-size: 24px; - padding: 28px 5px 3px 5px; + .product_count{ + font-size: 20px; + } + } + + .product_price{ + font-size: 24px; + margin-top: 11px; + } + + .sale_box_price{ + margin-left: 10px; + } + } } -.card_basket_product_sale_box_price{ - margin-left: 10px; -} \ No newline at end of file + + + + + + + + + + + diff --git a/styles/globals.scss b/styles/globals.scss index 06739dd..d8bebe2 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -14,7 +14,7 @@ @import './components/UX/Input.scss'; @import './components/UX/Button.scss'; @import './components/block/Motto.scss'; -@import './components/block/Categories.scss'; +@import '../components/customer/pages/index/block/Categories/styles/Categories.scss'; @import './components/Box.scss'; @import './components/UX/ButtonImg.scss'; @import './components/UX/PictureText.scss';