3
0

Add hover effect to sidenav items

This commit is contained in:
Kelani Tolulope 2023-06-26 12:56:17 +01:00
parent 36f73cb285
commit 12eff44f84
8 changed files with 72 additions and 5 deletions

View File

@ -26,9 +26,19 @@ $danger: #E54122 !default;
$light: #E4E9EF !default;
$extra-light: #F3F5F7 !default;
$dark: #162425 !default;
$tertiary: #5E727E !default;
$gray-200: #F9FAFB !default;
$theme-colors: () !default;
$theme-colors: map-merge(
(
"white": $white,
"tertiary": $tertiary,
),
$theme-colors
);
// Grid - maybe not the smartest idea to change this but let's see
$grid-breakpoints: (
xs: 0,

View File

@ -25,6 +25,7 @@ $warning: #E2A046 !default;
$danger: #E54122 !default;
$light: #E4E9EF !default;
$dark: #162425 !default;
$tertiary: #5E727E !default;
$gray-200: #F9FAFB !default;
@ -32,6 +33,7 @@ $theme-colors: () !default;
$theme-colors: map-merge(
(
"white": $white,
"tertiary": $tertiary,
),
$theme-colors
);

View File

@ -25,9 +25,19 @@ $warning: #E2A046 !default;
$danger: #E54122 !default;
$light: #F3F5F7 !default;
$dark: #162425 !default;
$tertiary: #5E727E !default;
$gray-200: #F9FAFB !default;
$theme-colors: () !default;
$theme-colors: map-merge(
(
"white": $white,
"tertiary": $tertiary,
),
$theme-colors
);
// Grid - maybe not the smartest idea to change this but let's see
$grid-breakpoints: (
xs: 0,

View File

@ -26,9 +26,19 @@ $warning: #E2A046 !default;
$danger: #E54122 !default;
$light: #F3F5F7 !default;
$dark: #162425 !default;
$tertiary: #5E727E !default;
$gray-200: #F9FAFB !default;
$theme-colors: () !default;
$theme-colors: map-merge(
(
"white": $white,
"tertiary": $tertiary,
),
$theme-colors
);
// Options
$enable-rounded: true !default;
$enable-gradients: false !default;

View File

@ -25,9 +25,19 @@ $warning: #E2A046 !default;
$danger: #E54122 !default;
$light: #E4E9EF !default;
$dark: #162425 !default;
$tertiary: #5E727E !default;
$gray-200: #F9FAFB !default;
$theme-colors: () !default;
$theme-colors: map-merge(
(
"white": $white,
"tertiary": $tertiary,
),
$theme-colors
);
// Grid - maybe not the smartest idea to change this but let's see
$grid-breakpoints: (
xs: 0,

View File

@ -25,9 +25,19 @@ $warning: #E2A046 !default;
$danger: #E54122 !default;
$light: #E4E9EF !default;
$dark: #162425 !default;
$tertiary: #5E727E !default;
$gray-200: #F9FAFB !default;
$theme-colors: () !default;
$theme-colors: map-merge(
(
"white": $white,
"tertiary": $tertiary,
),
$theme-colors
);
// Grid - maybe not the smartest idea to change this but let's see
$grid-breakpoints: (
xs: 0,

View File

@ -25,9 +25,19 @@ $warning: #E2A046 !default;
$danger: #E54122 !default;
$light: #F3F5F7 !default;
$dark: #162425 !default;
$tertiary: #5E727E !default;
$gray-200: #F9FAFB !default;
$theme-colors: () !default;
$theme-colors: map-merge(
(
"white": $white,
"tertiary": $tertiary,
),
$theme-colors
);
// Grid - maybe not the smartest idea to change this but let's see
$grid-breakpoints: (
xs: 0,

View File

@ -29,11 +29,11 @@
/>
</template>
</template>
<span
class="title"
<label
class="title mb-0 pointer"
>
{{ page.title }}
</span>
</label>
</span>
<template
@ -163,7 +163,11 @@ export default {
.nav-item > span > {
.title {
font-family: 'Poppins-Regular'
color: var(--tertiary);
}
.title:hover {
color: var(--primary);
transition: color 0.5s;
}
}
@ -173,7 +177,8 @@ export default {
}
.title {
font-family: 'Poppins-SemiBold'
color: var(--primary);
transition: color .25s
}
}