FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Introduce color variables

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2023-09-29 04:22:23 +06:00
parent b34c6860be
commit 6d5d1b9851
35 changed files with 696 additions and 909 deletions
Download patch file Download diff file Expand all files Collapse all files

114
assets/styles/navigators/navbar.scss
View file

@ -1,9 +1,8 @@
@mixin nav-item-hover-effect() {
color: #2098d1 !important;
transition: all 0.3s ease-out;
border-bottom: 2px solid #2098d1 !important;
background: rgb(2, 0, 36);
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(34, 136, 168, 0.1) 0%);
color: $accent-color !important;
border-bottom: 2px solid $accent-color !important;
background: rgba($accent-color, 0.1);
@include transition();
}
.top-navbar {
@ -13,18 +12,25 @@
width: 100%;
height: 50px;
z-index: 99999;
transition: all 0.4s ease-out;
margin: 0px;
padding-top: 0.4rem;
color: $heading-color;
text-align: center;
background-color: #f9fafc;
color: #1c2d41;
transition: all 0.3s ease-out;
background-color: $bg-primary;
@include transition();
.navbar-brand {
color: #1c2d41;
color: $heading-color;
font-weight: 600;
img {
width: 42px;
padding: 5px;
margin-left: -10px;
}
}
img {
display: inline-block;
}
.sidebar-icon {
@ -35,9 +41,9 @@
li {
a {
color: #1c2d41;
color: $heading-color;
font-weight: 500;
transition: all 0.3s ease-out;
@include transition();
border-bottom: 2px solid transparent;
&:hover {
@include nav-item-hover-effect();
@ -50,25 +56,28 @@
}
#top-navbar-divider {
background: rgba(0, 0, 0, 0.6);
margin-top: 10px;
background-color: $muted-text-color;
height: 20px;
width: 2px;
}
.dropdown-menu {
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
border: 1px solid #fff;
box-shadow: $box-shadow;
border: 1px solid $border-color;
max-height: 0vh;
overflow: hidden;
display: block;
visibility: hidden;
transition: all 0.3s ease-out;
@include transition();
&.show {
max-height: 100vh;
visibility: visible;
transition: all 0.3s ease-in;
@include transition();
a {
color: #1c2d41 !important;
color: $heading-color !important;
&:hover {
@include nav-item-hover-effect();
@ -81,22 +90,22 @@
margin-top: -5px;
&.show,
&.collapsing {
background-color: #f9fafc;
background-color: $bg-primary;
padding-left: 1rem;
li {
a {
color: #1c2d41;
color: $heading-color;
font-weight: 500;
transition: all 0.3s ease-out;
@include transition();
}
}
.navbar-nav {
.active {
color: #2098d1;
color: $accent-color;
}
a:hover {
color: #2098d1;
color: $accent-color;
}
}
}
@ -105,32 +114,19 @@
&.transparent-navbar {
background-color: transparent;
.navbar-brand {
color: #c0ccda;
color: $inverse-text-color;
font-weight: 600;
}
li {
a {
color: #c0ccda;
color: $inverse-text-color;
}
}
.feather-menu {
stroke: #8392a5;
stroke: $inverse-text-color;
}
}
#top-navbar-divider {
margin-top: 10px;
background: rgba(192, 204, 218, 0.8);
height: 20px;
width: 2px;
}
.navbar-brand img {
width: 42px;
padding: 5px;
margin-left: -10px;
}
@include media('<=large') {
height: -moz-fit-content;
height: fit-content;
@ -144,39 +140,31 @@
&.transparent-navbar {
.navbar-nav .active,
li a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
color: $accent-color;
@include transition();
}
}
&.final-navbar {
.navbar-nav .active,
li a:hover {
color: #2098d1;
transition: none;
border-bottom: none !important;
background: transparent;
}
li a {
border-bottom: none;
}
}
.dropdown-divider {
border-top: 1px solid #c0ccda;
}
#top-navbar-divider {
background: rgba(0, 0, 0, 0.6);
height: auto;
width: auto;
margin-right: 15px;
border-top: 1px solid #c0ccda;
}
.dropdown-menu {
text-align: center;
margin-bottom: 0.5rem;
margin-right: 1rem;
transition: all 0.3s ease-out;
@include transition();
}
.languageSelector {
position: fixed;
right: 0.5rem;
bottom: 1rem;
z-index: 10000000;
background-color: $bg-primary;
box-shadow: $box-shadow;
}
}
@ -192,5 +180,5 @@
.feather-menu {
width: 1.5rem;
height: 1.5rem;
stroke: #3c4858;
stroke: $text-color;
}