Merge pull request #16 from dderbentsov/UC-1

Настроила tailwind.config

src/App.vue

@@ -17,7 +17,6 @@
 
 <style lang="sass">
   #app
-    font-family: Raleway, sans-serif
     font-feature-settings: 'pnum' on, 'lnum' on
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale

src/assets/css/variables.css

@@ -1,8 +0,0 @@
-:root {
-	--bg-lavender-color: #E9E9F6;
-	--bg-white-color: #F8F8FF;
-	--bg-ligth-blue-color: #E6EAFC;
-	--font-dark-blue-color: #252850;
-	--font-black-color: #090A15;
-	--btn-blue-color: #4169E1;
-}

src/assets/sass/styles.sass

@@ -1 +0,0 @@
-@import "./fonts.sass"

src/assets/sass/variables.sass

@@ -0,0 +1,9 @@
+:root
+	--bg-lavender-color: #E9E9F6
+	--bg-white-color: #F8F8FF
+	--bg-ligth-blue-color: #E6EAFC
+	--font-dark-blue-color: #252850
+	--font-black-color: #090A15
+	--btn-blue-color: #4772F2
+	--font-grey-color: #9294A7
+	--border-light-grey-color: #9294A7

src/components/HeaderInputs.vue

@@ -0,0 +1,145 @@
+<template lang="pug">
+  .wrapper(:class="{ open: isOpen }")
+    .select-wrapper(@click="changeState")
+      .select
+        img.icon-wrapper.loupe(src="@/assets/icons/search.svg" alt="Search") 
+        span.inputs.select-input {{ selectedFilter }}
+        .icon-wrapper.arrow.icon-down-arrow
+      .filter-options(v-if="isOpen")
+        .options(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
+          .icon-wrapper
+            .icon-ok.ok(v-if="filter === selectedFilter")
+          .options-text.text-lg {{ filter }}
+    input.inputs.search-input(placeholder="Искать ...")
+</template>
+
+<script>
+  export default {
+    name: "HeaderInputs",
+    props: {},
+    data() {
+      return {
+        selectedFilter: 'Календарь',
+        filters: ['Календарь', 'Клиенты'],
+        isOpen: false
+      }
+    },
+    computed: {
+      
+    },
+    methods: {
+      changeState() {
+        this.isOpen = !this.isOpen
+      },
+      selectFilter(filter) {
+        this.selectedFilter = filter
+      }
+    }
+  }
+</script>
+
+<style lang="sass" scoped>
+  .open
+    .arrow
+      transform: rotate(180deg)
+
+  .wrapper
+    background-color: var(--bg-white-color)
+    display: flex
+    align-items: center
+
+  .inputs-wrapper
+    display: flex
+    align-items: center
+    border-radius: 4px
+    border: 1px solid var(--border-light-grey-color)
+
+  .select-wrapper
+    color: var(--btn-blue-color)
+
+  .icon-wrapper
+    width: 24px
+    height: 24px
+    display: flex
+    justify-content: center
+    align-items: center
+
+  .loupe
+    margin: 8px 0 8px 16px
+    font-size: 21px
+    color: var(--btn-blue-color)
+
+  .inputs
+    cursor: pointer
+    border: none
+    outline: none
+    background-color: transparent
+    color: var(--btn-blue-color)
+    height: 100%
+    box-sizing: border-box
+    font-style: normal
+    font-weight: 500
+    font-size: 16px
+    line-height: 19px
+    font-feature-settings: 'pnum' on, 'lnum' on
+    display: inline-block
+    vertical-align: middle
+    padding: 10px 16px
+    &::placeholder
+      color: var(--font-grey-color)
+
+  .select
+    display: flex
+    align-items: center
+    border-radius: 4px 0 0 4px
+    border: 1px solid var(--border-light-grey-color)
+    border-right: none
+    position: relative
+    z-index: 2
+
+  .select-input
+    width: 100px
+    padding: 10px 4px 10px 8px
+
+  .filter-options
+    display: flex
+    flex-direction: column
+    width: 173px
+    box-sizing: border-box
+    padding: 16px
+    background-color: var(--bg-white-color)
+    color: var(--font-dark-blue-color)
+    margin-top: 4px
+    border-radius: 4px
+    position: absolute
+    box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
+
+  .search-input
+    border-radius: 0 4px 4px 0
+    border: 1px solid var(--border-light-grey-color)
+
+  .options
+    display: flex
+    flex-direction: row
+    margin-bottom: 16px
+    font-weight: 500
+    font-size: 16px
+    line-height: 19px
+    color: var(--font-dark-blue-color)
+    cursor: pointer
+    &:last-child
+      margin: 0
+    &:hover
+      color: var(--btn-blue-color)  
+
+  .options-text
+    display: flex
+    align-items: center
+
+  .arrow
+    margin: 12px 16px 12px 0
+    font-size: 8px
+
+  .ok 
+    margin-right: 8px
+</style>

src/components/TheHeader.vue

@@ -1,17 +1,12 @@
 <template lang="pug">
-  .header-wrapper
+  div.header-wrapper
-    .header-left-side
+    div.header-left-side
       img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
-    .header-right-side
+    div.header-right-side
-      .header-inputs-wrapper
+      header-inputs
-        img.search-icon(src="@/assets/icons/search.svg" alt="Search")
-        select.header-inputs.select(v-model="selectedFilter")
-          option(v-for="filter in filters" :key="filter" :value="filter") {{ filter }}
-        span.header-inputs-separator
-        input.header-inputs.search-input(placeholder="Искать ...")
       button.header-buttons.btn-notification
         img.bell-icon(src="@/assets/icons/bell.svg" alt="Notifications")
-      .avatar-wrapper
+      div.avatar-wrapper
         img.avatar-img(:src="avatarSrc")
         button.header-buttons.btn-down-arrow
           img.arrow-icon(src="@/assets/icons/down-arrow-2.svg" alt="Down Arrow")
@@ -19,12 +14,12 @@
 
 <script>
   import img from '@/assets/images/avatar.svg'
+  import HeaderInputs from './HeaderInputs.vue'
   export default {
-    name: 'HeaderComponent',
+    name: 'TheHeader',
+    components: {HeaderInputs},
     data() {
       return {
-        selectedFilter: 'Календарь',
-        filters: ['Календарь', 'Вариант 2', 'Вариант 3'],
         avatarSrc: img
       }
     }
@@ -51,6 +46,8 @@
     padding: 8px 24px
     background-color: var(--bg-white-color)
     box-sizing: border-box
+    position: relative
+    z-index: 2
 
   .header-right-side
     display: flex
@@ -66,20 +63,6 @@
     height: 32px
     width: 70px 
 
-  .header-inputs-wrapper
-    display: inline-block
-    background-color: rgba(65, 105, 225, 0.1)
-    padding: 8px 18px 8px 16px
-    border-radius: 4px
-    margin-right: 46px
-
-  .search-icon
-    position: absolute
-    height: 24px
-    width: 24px
-    color: var(--btn-blue-color)
-    opacity: 0.7
-
   .btn-notification
     display: flex
     justify-content: center
@@ -94,47 +77,6 @@
     width: 24px
     height: 24px
 
-  .header-inputs
-    cursor: pointer
-    border: none
-    outline: none
-    background-color: transparent
-    color: var(--btn-blue-color)
-    height: 100%
-    box-sizing: border-box
-    font-style: normal
-    font-weight: 500
-    font-size: 16px
-    line-height: 19px
-    font-feature-settings: 'pnum' on, 'lnum' on
-    display: inline-block
-    vertical-align: middle
-    &::placeholder
-      color: var(--btn-blue-color)
-      opacity: 0.5
-
-  .select
-    -webkit-appearance: none
-    -moz-appearance: none
-    -ms-appearance: none
-    appearance: none
-    background: url(@/assets/icons/down-arrow-1.svg) no-repeat right top 4px
-    overflow: hidden
-    margin-right: 16px
-    padding: 2px 20px 2px 30px
-
-  .search-input
-    margin-left: 14px
-    padding: 2px
-
-  .header-inputs-separator
-    display: inline-block
-    vertical-align: middle
-    border-left: 1px solid var(--btn-blue-color)
-    opacity: 0.5
-    border-radius: 4px
-    height: 100%
-
   .avatar-wrapper
     display: flex
     flex-direction: row

src/components/TheSidebar.vue

@@ -16,7 +16,7 @@
   import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
 
   export default {
-    name: "SidebarComponent",
+    name: "TheSidebar",
     components: {TheButtonSidebar},
   }
 </script>

src/main.js

@@ -1,8 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from "./router";
+import './assets/sass/fonts.sass'
 import './assets/sass/tailwind.sass'
+import './assets/sass/variables.sass'
 import './assets/css/iconfonts.css'
-import './assets/css/variables.css'
 
 createApp(App).use(router).mount('#app')

tailwind.config.js

@@ -3,6 +3,23 @@ module.exports = {
     './index.html',
     './src/**/*.{js,jsx,ts,tsx,vue}',
   ],
-  theme: {},
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Raleway', 'sans-serif'],
+      },
+      fontSize: {
+        xxs: ['12px', { lineHeight: '14px' }],
+        xs: ['13px', { lineHeight: '15px' }],
+        sm: ['14px', { lineHeight: '16px' }],
+        base: ['16px', { lineHeight: '19px' }],
+        m: ['16px', { lineHeight: '21.6px' }],
+        lg: ['18px', { lineHeight: '21px' }],
+        xl: ['20px', { lineHeight: '23px' }],
+        '2xl': ['28px', { lineHeight: '33px' }],
+        '3xl': ['60px', { lineHeight: '70px' }],
+      }
+    },
+  },
   plugins: [],
 };