Merge pull request #6 from AlbShar/Access

Access

README.md

@@ -1,21 +1,39 @@
-## [UberEats](https://albshar.github.io/ubereats/) - The site for searching some dishes from different countries.
-
-### The project has following functions:
-### 1. Filter/Search List on main page.
-![](https://github.com/AlbShar/ubereats/blob/master/gifs/filter_list.gif)
-___
-### 2. Login form and signup page with password validation and password visibility on create page.
-![](https://github.com/AlbShar/ubereats/blob/master/gifs/signup_form.gif)
-___
-### 3. Slider and tabs on page of Pushkin's restuarant.
-![](https://github.com/AlbShar/ubereats/blob/master/gifs/slider_tabs.gif)
-___
-
-<br>
-
-### For creating the project were use:
+# UberEats
+
+The site for searching and ordering some dishes of different countries.
+
+
+## Demo
+
+https://albshar.github.io/ubereats/
+
+
+## Features
+
+- Light/dark mode toggle
+- Filter/Search list
+- Login form and signup page 
+- Slider and tabs
+
+
+## Preview
+
+![Gif](https://github.com/AlbShar/ubereats/blob/master/gifs/signup_form.gif)
+
+
+## Tech Stack
+
 - HTML, SCSS, vanilla Javascript;
 - Linter JSHint;
 - Methodology BEM;
 - Perfect Pixel;
 - Grid system flexboxgrid2.
+
+
+## Lessons Learned
+
+What did you learn while building this project? What challenges did you face and how did you overcome them?
+
+- Creating UI-components with vanilla Javascript;
+- Debugging websites on iOS devices (iPhone, iPad);
+

blocks/common.blocks/actions/__cart-content/actions__cart-content.scss

@@ -0,0 +1,5 @@
+.actions {
+    &__cart-content {
+
+    }
+}

blocks/common.blocks/actions/__cart-quantity/actions__cart-quantity.scss

@@ -0,0 +1,5 @@
+.actions {
+    &__cart-quantity {
+        display: none;
+    }
+}

blocks/common.blocks/actions/__cart-svg/actions__cart-svg.scss

@@ -0,0 +1,5 @@
+.actions {
+    &__cart-svg {
+        margin: 0 12px 0 13px;
+    }
+}

blocks/common.blocks/actions/__cart-text/actions__cart-text.scss

@@ -0,0 +1,9 @@
+.actions {
+    &__cart-text {
+        font: 400 1rem var(--font-family);
+        color: var(--color-text-title);
+        margin-left: 10px;
+    }
+}
+
+

blocks/common.blocks/actions/__cart/actions__cart.scss

@@ -0,0 +1,14 @@
+.actions {
+    &__cart {
+        filter: var(--filter);
+
+        @media screen and (min-width: 1123.8px) {
+            margin-right: 15px;
+        }
+
+        @media screen and (max-width: 459.8px) {
+            position: relative;
+            margin-left: 7px;
+    }
+    }
+}

blocks/common.blocks/actions/__list-item/actions__list-item.scss

@@ -0,0 +1,22 @@
+.actions {
+    &__list-item {
+        @media screen and (max-width: 459.8px) {
+            margin: 0 auto ;
+            padding: 15px 25%;
+            width: 100vw;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            border-top: 1px solid var( --color-text-subtitle);
+        }
+
+    }
+
+    &__list-item:last-child {
+        @media screen and (max-width: 459.8px) {
+            margin-bottom: 0;
+            border-bottom: 1px solid var(--color-text-subtitle);
+        }
+    }
+
+}

blocks/common.blocks/actions/__list/actions__list.scss

@@ -0,0 +1,18 @@
+.actions {
+    &__list {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 328px;
+        margin: 0;
+        list-style-type: none;
+
+
+        @media screen and (max-width: 459.8px) {
+            flex-direction: column;
+            justify-content: center;
+            max-width: 100%;
+            padding: 15px 0 0 0;
+    }
+}
+}

blocks/common.blocks/actions/__sign-in-text/actions__sign-in-text.scss

@@ -1,13 +1,23 @@
 .actions {
   &__sign-in-text {
-    @include font($font-family, 500, 0.8125rem, $color_black);
+    font: 500 0.8125rem var(--font-family);
+    color: var(--color-text-title);
     text-align: center;
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
-    justify-content: center;   
+    justify-content: center;  
+
+    &:hover {
+      color: var(--color-hover-text);
+      transition: 0.7s;
+    }
+
+    @media screen and (max-width: 459.8px) {
+      font-size: 1rem;
+   }
   }
 }

blocks/common.blocks/actions/__sign-in/actions__sign-in.scss

@@ -4,13 +4,24 @@
     box-sizing: border-box;
     width: 78px;
     height: 40px;
-    background-color: $color_white;
-    border: 1px solid #e0e0e0;
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-border);
     padding: 0;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 10px;
+    margin: 0 10px 0 0;
+
+    &:hover {
+      background-color: var(--color-hover-bg);
+      transition: 0.7s;
+
+    }
+
+    @media screen and (max-width: 459.8px) {
+      border: none;
+   }
+
     }
 }

blocks/common.blocks/actions/__signup-link/actions__signup-link.scss

@@ -3,6 +3,24 @@
         list-style-type: none;
         padding: 5px;
         text-decoration: none;
-        @include font($font-family, 500, 0.8125rem, $color_black);
+        font: 500 0.8125rem var(--font-family);
+        color: var(--color-text-title);
+        background-color: var(--color-bg);
+        border: 1px solid var(--color-border);
+        padding: 11.5px 8px;
+        margin-right: 10px;
+
+        &:hover {
+            color: var(--color-hover-text);
+            background-color: var(--color-hover-bg);
+            transition: 0.7s;
+        }
+
+        @media screen and (max-width: 459.8px) {
+            margin: 0;
+            font-size: 1rem;
+            border: none;
+        }
     }
-}
+}
+

blocks/common.blocks/actions/_visible/actions_visible.scss

@@ -0,0 +1,6 @@
+.actions {
+    &_visible {
+        transform: none;
+
+    }
+}

blocks/common.blocks/actions/actions.scss

@@ -1,12 +1,38 @@
 .actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 128px;
-
+    outline: inherit;
+    @media screen and (max-width: 459.8px) {
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: fixed;
+        right: 0;
+        top: 62px;
+        z-index: 3;
+        background-color: var(--color-bg);
+        width: 100vw;
+        max-height: calc(100% - 62px);
+        transform: translateX(150%);
+        transition: transform 0.9s ease-in-out;
+    }
+
+
+    @media screen and (min-width: 767.8px) {
+        max-width: 320px;
+    }
+
+    @media screen and (min-width: 1123.8px) {
+        max-width: 310px;
+        box-sizing: border-box;    
+    }
 }
 
-@import "./__signup/actions__signup.scss";
+@import "./__list/actions__list.scss";
+@import "./__list-item/actions__list-item.scss";
 @import "./__signup-link/actions__signup-link.scss";
 @import "__sign-in/actions__sign-in.scss";
 @import "__sign-in-text/actions__sign-in-text.scss";
+@import "./__cart/actions__cart.scss";
+@import "./__cart-text/actions__cart-text.scss";
+@import "./_visible/actions_visible.scss";
+@import "./__cart-svg/actions__cart-svg.scss";
+@import "./__cart-quantity/actions__cart-quantity.scss";
+@import "./__cart-content/actions__cart-content.scss";

blocks/common.blocks/burger/__line/burger__line.scss

@@ -0,0 +1,12 @@
+.burger {
+    &__line {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        width: 100%;
+        height: 2px;
+        background-color: var(--color-text-title);
+        transform: translateY(-50%);
+        transition: opacity 0.3s ease-in-out;
+    }
+}

blocks/common.blocks/burger/_active/burger_active.scss

@@ -0,0 +1,18 @@
+.burger {
+    &_active {
+        .burger {
+            &__line {
+                opacity: 0;
+            }
+        }
+
+        &::before {
+            top: 50%;
+            transform: rotate(45deg);
+        }
+        &::after {
+            top: 50%;
+            transform: rotate(-45deg);
+        }
+    }
+}