dan/windycoys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change focus/hover states on nav title

Browse Source
This commit is contained in:
Dan Head
2018-12-21 21:27:22 +00:00
parent cd1faceaf1
commit 172619fdbd
1 changed files with 10 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
css/nav.css
View File

@@ -48,15 +48,13 @@
flex-grow: 1; flex-grow: 1;
} }
.nav__title {
font-family: var(--heading-font-family);
font-size: 2.5rem;
margin-right: 62px;
}
.nav__title-link { .nav__title-link {
display: block; display: inline-block;
position: relative; position: relative;
width: 72px;
height: 72px;
border-radius: 50%;
transition: box-shadow var(--transition-fs) ease-out;
} }
.nav__title-link, .nav__title-link,
@@ -66,18 +64,14 @@
color: #fff; color: #fff;
} }
.nav__title-link:focus {
box-shadow: 0 0 0 2px var(--color-dark-blue), 0 0 0 4px #fff;
}
.nav__title-link-image { .nav__title-link-image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 72px;
height: 72px;
opacity: 0;
transition: opacity var(--nav-transition-duration) ease-out;
}
.nav__title-link:hover .nav__title-link-image {
opacity: 1;
} }
.nav__close { .nav__close {
@@ -128,7 +122,7 @@
.nav__list { .nav__list {
font-family: var(--heading-font-family); font-family: var(--heading-font-family);
font-size: 1.5rem; font-size: 1.2rem;
} }
.nav__list .nav__list { .nav__list .nav__list {