Lewis/Personal_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Changing UX for simpler design

Browse Source
This commit is contained in:
Lewis
2025-04-05 16:37:53 +01:00
parent 5b9119a528
commit be5c9dc3be
358 changed files with 30915 additions and 88568 deletions
Download Patch File Download Diff File Expand all files Collapse all files

504
assets/sass/paper-kit/_navbars.scss Normal file
View File

@@ -0,0 +1,504 @@
.nav {
.nav-item{
.nav-link:hover,
.nav-link:focus{
background-color: transparent;
}
}
}
.navbar{
border: $none;
font-size: $font-size-base;
transition: all 0.4s;
-webkit-transition: all 0.4s;
padding: 0;
background: $white-color;
box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15);
.navbar-brand{
font-weight: $font-weight-bold;
margin: $navbar-margin-brand;
padding: $navbar-padding-brand;
font-size: $font-size-base;
color: $default-color;
text-transform: uppercase;
}
.nav-link{
i{
font-size: 16px;
position: relative;
top: 4px;
right: 3px;
}
[class^="fa"]{
top: 2px;
}
p{
margin: 0px 0px;
color: #9A9A9A !important;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
line-height: 1.5em;
padding: 15px 0;
}
p:hover{
color: #403D39 !important;
}
}
.navbar-nav{
.nav-item .nav-link {
line-height: 1.6;
margin: $navbar-margin-a;
padding: $navbar-padding-a;
opacity: .8;
font-size: $font-size-small;
text-transform: uppercase;
font-weight: 600;
color: $default-color;
}
.nav-item .nav-link.btn{
margin: $navbar-margin-a-btn;
padding: 9px;
}
.dropdown-menu{
border-radius: $border-radius-extreme;
margin-top: 1px;
}
}
.navbar-collapse{
& .nav-item{
& .nav-link{
p{
display: inline;
}
}
& .dropdown-item{
i{
margin: 0 10px;
margin: 0 10px 0px 5px;
font-size: 18px;
position: relative;
top: 3px;
}
}
}
&.show{
& .navbar-nav{
& .nav-item{
padding-right: 10px;
}
}
}
}
.notification-bubble{
right: 72px;
padding: 0.2em 0.6em;
position: absolute;
top: 15px;
}
.btn{
margin: $navbar-margin-btn;
font-size: $font-size-small;
i{
// margin-right: 5px !important;
font-size: 14px;
line-height: 13px;
}
}
.btn-simple{
font-size: $font-size-medium;
}
.caret{
@include center-item();
}
&.navbar-transparent{
padding-top: 25px;
}
.logo-container{
margin-top: 5px;
.logo{
overflow: hidden;
border-radius: 50%;
border: 1px solid #333333;
width: 50px;
float: left;
img{
width: 100%;
}
}
.brand{
font-size: 18px;
color: #FFFFFF;
line-height: 20px;
float: left;
margin-left: 10px;
margin-top: 5px;
width: 75px;
height: 50px;
}
}
}
.navbar.fixed-top{
.nav-link{
i{
top: 4px;
}
}
}
.navbar-absolute{
position: absolute;
width: 100%;
padding-top: 10px;
z-index: 1029;
}
.navbar-transparent, [class*="bg"]{
.navbar-brand{
color: $white-color;
@include opacity(.9);
&:focus,
&:hover{
background-color: transparent;
@include opacity(1);
color: $white-color;
}
}
.navbar-nav{
.nav-item .nav-link:not(.btn){
color: $white-color;
border-color: $white-color;
}
.active .nav-link
.active .nav-link:hover,
.active .nav-link:focus,
.nav-item .nav-link:hover,
.nav-item .nav-link:focus{
background-color: transparent;
color: $white-color;
@include opacity(1);
}
.nav .nav-item a.btn:hover{
background-color: transparent;
}
.dropdown .nav-link .caret,
.dropdown .nav-link:hover .caret,
.dropdown .nav-link:focus .caret{
border-bottom-color: $white-color;
border-top-color: $white-color;
}
.open .nav-link,
.open .nav-link:hover,
.open .nav-link:focus {
background-color: transparent;
color: $default-color;
@include opacity(1);
}
}
.btn-default.btn-fill{
color: $dark-gray;
background-color: $white-color;
@include opacity(.9);
}
.btn-default.btn-fill:hover,
.btn-default.btn-fill:focus,
.btn-default.btn-fill:active,
.btn-default.btn-fill.active,
.open .dropdown-toggle.btn-fill.btn-default{
border-color: $white-color;
@include opacity(1);
}
}
.nav-open .nav .caret{
border-bottom-color: $white-color;
border-top-color: $white-color;
}
.navbar-default {
.brand{
color: $font-color !important;
}
.navbar-nav{
.nav-item .nav-link:not(.btn){
color: $dark-gray;
}
.active .nav-link,
.active .nav-link:not(.btn):hover,
.active .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):focus {
background-color: transparent;
border-radius: 3px;
color: $info-color;
@include opacity(1);
}
.dropdown .nav-link:hover .caret,
.dropdown .nav-link:focus .caret {
border-bottom-color: $info-color;
border-top-color: $info-color;
}
.open .nav-link,
.open .nav-link:hover,
.open .nav-link:focus{
background-color: transparent;
color: $info-color;
}
.navbar-toggle:hover,.navbar-toggle:focus {
background-color: transparent;
}
}
&:not(.navbar-transparent) .btn-default:hover{
color: $info-color;
border-color: $info-color;
}
&:not(.navbar-transparent) .btn-neutral,
&:not(.navbar-transparent) .btn-neutral:hover,
&:not(.navbar-transparent) .btn-neutral:active{
color: $dark-gray;
}
}
/* Navbar with icons */
.navbar-icons{
&.navbar .navbar-brand{
margin-top: 12px;
margin-bottom: 12px;
}
.navbar-nav{
.nav-item .nav-link{
text-align: center;
padding: $navbar-padding-a-icons;
margin: $navbar-margin-a-icons;
}
[class^="pe"] {
font-size: 30px;
position: relative;
}
p {
margin: 3px 0 0;
}
}
}
.navbar-form{
@include box-shadow(none);
.form-control{
@include light-form();
height: 22px;
font-size: $font-size-navbar;
line-height: $line-height-general;
color: $light-gray;
}
.navbar-transparent & .form-control,
[class*="bg"] & .form-control{
color: $white-color;
border: $none;
border-bottom: 1px solid rgba($white-color,.6);
}
}
.navbar-toggle{
margin-top: 19px;
margin-bottom: 19px;
border: $none;
.icon-bar {
background-color: $white-color;
}
.navbar-collapse,
.navbar-form {
border-color: transparent;
}
&.navbar-default .navbar-toggle:hover,
&.navbar-default .navbar-toggle:focus {
background-color: transparent;
}
}
// stefan making edits
.navbar-light .navbar-nav .nav-link:hover{
color: $light-gray;
}
.red{
color: #ff0000;
}
.collapse .navbar-text{
line-height: 55px;
}
.navbar-default .navbar-brand{
color: $default-color;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus{
color: #5e5e5e;
}
.navbar-collapse.show{
.navbar-nav{
.nav-item{
padding-right: 100px;
}
}
}
.nav-tabs-navigation{
&:last-child{
.nav-stacked{
border-right: 1px solid #F1EAE0;
font-size: 16px;
font-weight: 600;
padding: 20px 0;
.nav-item{
.nav-link{
padding: 7px 25px;
}
}
}
border-bottom: 0 none;
}
}
//menu bars
.navbar-nav > li > .dropdown-menu,
.dropdown .dropdown-menu{
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
}
.navbar-toggler{
outline: none !important;
cursor: pointer;
.navbar & .navbar-toggler-bar{
background: $font-color;
}
.navbar[class*="bg-"] & .navbar-toggler-bar,
.navbar.navbar-transparent & .navbar-toggler-bar{
background: #fff;
}
.navbar-toggler-bar{
display: block;
position: relative;
width: 24px;
height: 2px;
border-radius: 1px;
margin: 0 auto;
}
}
.navbar-toggler .navbar-toggler-bar + .navbar-toggler-bar,
.navbar-toggler .navbar-toggler-icon + .navbar-toggler-icon{
margin-top: 4px;
}
.navbar .navbar-toggler{
margin-top: 24px;
}
.navbar .navbar-burger{
margin-top: 20px;
}
.navbar-toggler-icon{
display: block;
position: relative;
width: 24px;
height: 2px;
border-radius: 1px;
margin: 0 auto;
background: gray;
}
.no-transition{
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
#description-areas .nav-stacked .nav-link.active:before,
#navtabs-row .nav-stacked .nav-link.active:before{
border-right: 11px solid #F1EAE0;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
content: "";
display: inline-block;
position: absolute;
right: 0;
bottom: 7px;
}
#description-areas .nav-stacked .nav-link.active:after,
#navtabs-row .nav-stacked .nav-link.active:after{
border-right: 11px solid $white-color;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
content: "";
display: inline-block;
position: absolute;
right: -1px;
bottom: 7px;
}
#second-tabs{
margin-left: 20px;
}
// navigation areas
.scroll-area{
max-height: 310px;
overflow-y: scroll;
list-style: outside none none;
padding: 0px;
}
.burger-menu{
.collapse{
.navbar-nav{
a{
color: $black-color;
}
}
}
}
.navbar-transparent{
background: transparent !important;
border-bottom: 1px solid transparent;
box-shadow: none;
.dropdown-menu .divider{
background-color: rgba($white-color,.2);
}
}
.section-navbars{
#menu-dropdown{
.navbar{
.navbar-toggler{
.navbar-toggler-icon{
background: $white-color;
}
}
}
}
}