admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #16 from dderbentsov/UC-1

Browse Source 
Настроила tailwind.config
This commit is contained in:
Daria Golova
2022-10-11 19:52:28 +03:00
committed by GitHub
parent 43f61e9269 864fedeace
commit 2657927aef
9 changed files with 190 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@@ -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

8
src/assets/css/variables.css
View File

@@ -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;
}

1
src/assets/sass/styles.sass
View File

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

9
src/assets/sass/variables.sass Normal file
View File

@@ -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

145
src/components/HeaderInputs.vue Normal file
View File

@@ -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>

78
src/components/TheHeader.vue
View File

@@ -1,17 +1,12 @@
<template lang="pug">
.header-wrapper
.header-left-side
div.header-wrapper
div.header-left-side
img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
.header-right-side
.header-inputs-wrapper
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="Искать ...")
div.header-right-side
header-inputs
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

2
src/components/TheSidebar.vue
View File

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

3
src/main.js
View File

@@ -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')

19
tailwind.config.js
View File

@@ -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: [],
};