Добавила css переменные

2022-10-13 14:34:25 +03:00
parent 82b7a45676
commit df6ced8662
9 changed files with 35 additions and 37 deletions
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -3,8 +3,14 @@
  --bg-ligth-blue-color: #e6eafc
  --font-dark-blue-color: #252850
  --font-black-color: #090a15
+  --font-black-color-0: rgba(9, 10, 21, 0)
+  --font-black-color-1: rgba(9, 10, 21, 0.5)
  --btn-blue-color: #4772f2
-  --btn-light-blue-color: #c6d2f6
+  --btn-blue-color-0: rgba(65, 105, 225, 0)
+  --btn-blue-color-1: rgba(65, 105, 225, 0.3)
+  --btn-blue-color-2: rgba(65, 105, 225, 0.5)
+  --btn-blue-color-3: rgba(65, 105, 225, 0.2)
+  --btn-blue-color-4: rgba(65, 105, 225, 0.8)
  --font-grey-color: #9294a7
  --border-light-grey-color: #d3d4dc
  --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -24,6 +24,6 @@ export default {
 <style lang="sass" scoped>
 .sidebar
  max-width: 80px
-  background-color: #FFFFFF
+  background-color: var(--default-white)
  border-top-right-radius: 4px
 </style>
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
-  .flex.gap-2.py-2.px-4.w-full.container(@click="selectOpen")
+  .flex.gap-2.py-2.px-4.w-full.container.items-center.cursor-pointer(@click="selectOpen")
    .relative.flex.flex-col
      .not-italic.text-base.select(:style="{ minWidth : width}") {{optionData}}
        .absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
          .not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
-    .select-form-separator
-    .text-sm.ml-2.pt-1.icon-down-arrow.icon(:class="{ open: isOpen}")
+    .select-form-separator.cursor-pointer
+    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isOpen}")
 </template>

 <script>
@@ -25,8 +25,6 @@ export default {

 <style lang="sass" scoped>
 .container
-  align-items: center
-  cursor: pointer
  border-radius: 4px
  width: fit-content
  background-color: var(--bg-ligth-blue-color)
@@ -34,9 +32,8 @@ export default {
  appearance: none
  border: none
  outline: none
-  cursor: pointer
-  color: rgba(9, 10, 21, 0.5)
-  background-color: rgba(9, 10, 21, 0)
+  color: var(--font-black-color-1)
+  background-color: var(--font-black-color-0)
  &::-webkit-calendar-picker-indicator
    display: none
    -webkit-appearance: none
@@ -49,12 +46,11 @@ export default {
  &:hover
    background-color: var(--btn-blue-color)
 .select-form-separator
-  background-color: rgba(65, 105, 225, 0.2)
+  background-color: var(--btn-blue-color-3)
  height: 24px
  width: 1px
  border-radius: 1px
 .icon
-  text-align: center
  color: var(--font-dark-blue-color)
  &:hover
    color: var(--btn-blue-color)
--- a/src/components/base/buttons/BaseAddEvent.vue
+++ b/src/components/base/buttons/BaseAddEvent.vue
@@ -12,7 +12,6 @@ export default {
 .event-button
  outline: none
  border: none
-  cursor: pointer
  width: fit-content
  color: var(--default-white)
  background-color: var(--btn-blue-color)
--- a/src/components/base/buttons/BaseArrowButton.vue
+++ b/src/components/base/buttons/BaseArrowButton.vue
@@ -15,9 +15,9 @@ export default {
 .arrow-button
  width: 32px
  height: 32px
-  background: var(--btn-light-blue-color)
+  background-color: var(--btn-blue-color-1)
  color: var(--btn-blue-color)
  border-radius: 50%
  &:hover
-    background: #a0b4f0
+    background-color: var(--btn-blue-color-2)
 </style>
--- a/src/components/base/buttons/BaseButtonPlus.vue
+++ b/src/components/base/buttons/BaseButtonPlus.vue
@@ -12,11 +12,10 @@ export default {
 .button-plus
  outline: none
  border: none
-  cursor: pointer
  width: 24px
  height: 24px
  max-height: 24px
-  color: #4772F2
-  background-color: rgba(65, 105, 225, 0.25)
+  color: var(--btn-blue-color)
+  background-color: var(--bg-ligth-blue-color)
  border-radius: 50%
 </style>
--- a/src/components/base/buttons/BaseSidebarButton.vue
+++ b/src/components/base/buttons/BaseSidebarButton.vue
@@ -23,21 +23,20 @@ export default {
 <style lang="sass" scoped>
 .button
  width: fit-content
-  cursor: pointer
-  background-color: rgba(65, 105, 225, 0)
+  background-color: var(--btn-blue-color-0)
  border-radius: 0 4px 4px 0
-  border-left-color: rgba(65, 105, 225, 0)
+  border-left-color: var(--btn-blue-color-0)
  border-left-width: 4px
  border-right: none
  border-top: none
  border-bottom: none
  border-left-style: solid
 .button:focus
-  background-color: rgba(65, 105, 225, 0.3)
-  border-left-color: rgba(65, 105, 225, 1)
-  color: #4169E1
+  background-color: var(--btn-blue-color-1)
+  border-left-color: var(--btn-blue-color)
+  color: var(--btn-blue-color)
 .button:hover
-  background-color: rgba(65, 105, 225, 0.3)
-  border-left-color: rgba(65, 105, 225, 1)
-  color: #4169E1
+  background-color: var(--btn-blue-color-1)
+  border-left-color: var(--btn-blue-color)
+  color: var(--btn-blue-color)
 </style>
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -3,7 +3,7 @@
    .flex.flex-col.gap-y-2
      .flex.justify-between.pt-2
        span.not-italic.text-xs.opacity-40.leading-3 Ответственный
-        .icon-cancel.close-icon.text-xs(@click="closeEventForm")
+        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeEventForm")
      base-select(
        id="responsible"
        width="205px"
@@ -14,15 +14,15 @@
        :select-open="openSelectResponsible"
      )
    .flex.flex-col.gap-y-2
-      span.not-italic.text-xs.opacity-40.leading-3 Оновная информация
+      span.not-italic.text-xs.opacity-40.leading-3 Основная информация
      .flex.gap-x-4.items-center
        .icon-time.text-xl.icon
        .flex.gap-x-2.items-center
          .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+            input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
          span —
          .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+            input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
      .flex.gap-x-4.items-center
        .icon-person.text-xl.icon
        .form-item.flex.gap-x-2.px-4.py-2.items-center
@@ -135,7 +135,6 @@ export default {
  box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
  border-radius: 4px
 .form-item
-  cursor: pointer
  border-radius: 4px
  width: fit-content
  background-color: var(--bg-ligth-blue-color)
@@ -143,18 +142,18 @@ export default {
  appearance: none
  border: none
  outline: none
-  cursor: pointer
-  color: rgba(9, 10, 21, 0.5)
-  background-color: rgba(9, 10, 21, 0)
+  color: var(--font-black-color)
+  background-color: var(--font-black-color-0)
  &::-webkit-calendar-picker-indicator
    display: none
    -webkit-appearance: none
+  &::placeholder
+    color: var(--font-black-color-1)
 .icon
  width: 24px
  height: 24px
  color: var(--font-dark-blue-color)
 .close-icon
-  cursor: pointer
  color: var(--font-dark-blue-color)
  &:hover
    color: var(--btn-blue-color)
--- a/src/pages/calendar/components/CalendarLayoutSwitch.vue
+++ b/src/pages/calendar/components/CalendarLayoutSwitch.vue
@@ -36,7 +36,7 @@ export default {

 <style lang="sass" scoped>
 .active
-  background-color: #6787e7
+  background-color: var(--btn-blue-color-4)
  color: var(--default-white)
  border-radius: 4px