openpdd/htdocs/wp-content/themes/gorinchem/assets/scss/components/_navbar.scss at e72b19053940302374fbca39ccb4e4551f858d1a · OpenWebconcept/openpdd · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
.navbar {
	box-shadow:
		0px 4px 16px rgba( 17, 17, 26, 0.03 ),
		0px 8px 32px rgba( 17, 17, 26, 0.03 );
	font-family: 'FedraSans', $font-family-sans-serif;

	.navbar-menu-list > .menu-item {
		position: relative;
		display: flex;
		height: $navbar-height-desktop;
		align-items: center;
		justify-content: center;

		&::before {
			position: absolute;
			bottom: 0;
			left: 5%;
			width: 90%;
			height: 2px;
			background-color: theme-color( 'primary' );
			content: '';
			transform: scaleX( 0 );
			transition: all 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ); // EaseOutQuint
			visibility: hidden;
		}

		@include hover-focus-active() {
			&::before {
				transform: scaleX( 1 );
				visibility: visible;
			}
		}

		a {
			display: flex;
			height: 100%;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid gray( 'concrete' );
			color: $black;

			@include hover-focus-active() {
				text-decoration: none;
			}
		}
	}

	.menu-item-has-children {
		&::after {
			font-weight: 400;
		}
	}

	.sub-menu {
		padding: 1rem;

		.menu-item a {
			justify-content: flex-start;
			padding: 0.85rem 0.5rem;
			transition: 0.1s ease all;

			&::before {
				@include fontawesome( '\f054' );
				margin-right: 1rem;
				color: theme-color( 'primary' );
				font-size: $small-font-size;
				transition: transform 0.1s ease;
			}

			&:hover {
				border-color: theme-color( 'primary' );

				&::before {
					transform: translateX( 4px );
				}
			}

			&:focus {
				border-color: theme-color( 'primary' );
				color: theme-color( 'primary' );
			}
		}
	}
}