Line 80: | Line 80: | ||
/******** circle nav ********/ | /******** circle nav ********/ | ||
+ | |||
.csstransforms .cn-wrapper { | .csstransforms .cn-wrapper { | ||
− | + | font-size:1em; | |
− | + | width: 26em; | |
− | + | height: 26em; | |
+ | overflow: hidden; | ||
+ | position: fixed; | ||
z-index: 10; | z-index: 10; | ||
− | + | bottom: -13em; | |
− | + | left: 50%; | |
− | + | ||
− | + | ||
border-radius: 50%; | border-radius: 50%; | ||
− | + | margin-left: -13em; | |
− | + | ||
− | + | ||
transform: scale(0.1); | transform: scale(0.1); | ||
− | + | transition: all .3s ease; | |
− | + | ||
} | } | ||
− | + | .csstransforms .opened-nav { | |
− | .csstransforms . | + | border-radius: 50%; |
− | + | transform: scale(1); | |
− | + | } | |
− | + | ||
− | font-size: | + | .cn-button { |
− | + | border:none; | |
− | height: | + | background:none; |
− | position: | + | color: white; |
+ | text-align: Center; | ||
+ | font-size: 1.5em; | ||
+ | padding-bottom: 1em; | ||
+ | height: 3.5em; | ||
+ | width: 3.5em; | ||
+ | background-color: #111; | ||
+ | position: fixed; | ||
left: 50%; | left: 50%; | ||
− | margin-left: - | + | margin-left: -1.75em; |
− | + | bottom: -1.75em; | |
− | + | ||
border-radius: 50%; | border-radius: 50%; | ||
− | z-index: | + | cursor: pointer; |
+ | z-index: 11 | ||
+ | } | ||
+ | .cn-button:hover, | ||
+ | .cn-button:active, | ||
+ | .cn-button:focus{ | ||
+ | background-color: #222; | ||
+ | } | ||
+ | |||
+ | .cn-overlay{ | ||
+ | width:100% | ||
+ | height:100%; | ||
+ | background-color: rgba(0,0,0,0.6); | ||
+ | position:fixed; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | bottom:0; | ||
+ | right:0; | ||
+ | opacity:0; | ||
+ | transition: all .3s ease; | ||
+ | z-index:2; | ||
+ | pointer-events:none; | ||
+ | } | ||
+ | |||
+ | /* Class added to the overlay via JavaScript to show it when navigation is open */ | ||
+ | .cn-overlay.on-overlay{ | ||
+ | pointer-events:auto; | ||
+ | opacity:1; | ||
} | } | ||
.csstransforms .cn-wrapper li { | .csstransforms .cn-wrapper li { | ||
position: absolute; | position: absolute; | ||
− | + | font-size: 1.5em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width: 10em; | width: 10em; | ||
height: 10em; | height: 10em; | ||
− | |||
− | |||
− | |||
transform-origin: 100% 100%; | transform-origin: 100% 100%; | ||
− | + | overflow: hidden; | |
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | margin-top: -1.3em; | ||
+ | margin-left: -10em; | ||
+ | transition: border .3s ease; | ||
} | } | ||
.csstransforms .cn-wrapper li a { | .csstransforms .cn-wrapper li a { | ||
+ | display: block; | ||
+ | font-size: 1.18em; | ||
+ | height: 14.5em; | ||
+ | width: 14.5em; | ||
position: absolute; | position: absolute; | ||
− | + | bottom: -7.25em; | |
right: -7.25em; | right: -7.25em; | ||
− | |||
− | |||
− | |||
− | |||
border-radius: 50%; | border-radius: 50%; | ||
− | + | text-decoration: none; | |
− | + | ||
color: #fff; | color: #fff; | ||
+ | padding-top: 1.8em; | ||
text-align: center; | text-align: center; | ||
− | + | transform: skew(-50deg) rotate(-70deg) scale(1); | |
− | + | transition: opacity 0.3s, color 0.3s; | |
− | + | ||
− | + | ||
− | transform: skew(- | + | |
− | + | ||
} | } | ||
.csstransforms .cn-wrapper li a span { | .csstransforms .cn-wrapper li a span { | ||
− | + | font-size: 1.1em; | |
− | + | opacity: 0.7; | |
− | + | ||
− | font-size: . | + | |
− | + | ||
− | + | ||
} | } | ||
− | .csstransforms .cn-wrapper li | + | .csstransforms .cn-wrapper li:first-child { |
− | + | transform: rotate(-10deg) skew(50deg); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | transform: | + | |
− | + | ||
} | } | ||
− | .csstransforms . | + | .csstransforms .cn-wrapper li:nth-child(2) { |
− | + | transform: rotate(30deg) skew(50deg); | |
} | } | ||
− | .csstransforms . | + | .csstransforms .cn-wrapper li:nth-child(3) { |
− | transform: rotate( | + | transform: rotate(70deg) skew(50deg) |
} | } | ||
− | .csstransforms . | + | .csstransforms .cn-wrapper li:nth-child(4) { |
− | transform: rotate( | + | transform: rotate(110deg) skew(50deg); |
} | } | ||
− | .csstransforms . | + | .csstransforms .cn-wrapper li:nth-child(5) { |
− | transform: rotate( | + | transform: rotate(150deg) skew(50deg); |
} | } | ||
− | .csstransforms . | + | .csstransforms .cn-wrapper li:nth-child(odd) a { |
− | + | background-color: #a11313; | |
+ | background-color: hsla(0, 88%, 63%, 1); | ||
} | } | ||
− | .csstransforms . | + | .csstransforms .cn-wrapper li:nth-child(even) a { |
− | + | background-color: #a61414; | |
+ | background-color: hsla(0, 88%, 65%, 1); | ||
} | } | ||
− | .csstransforms . | + | /* active style */ |
− | + | .csstransforms .cn-wrapper li.active a { | |
+ | background-color: #b31515; | ||
+ | background-color: hsla(0, 88%, 70%, 1); | ||
} | } | ||
− | .csstransforms . | + | /* hover style */ |
− | + | .csstransforms .cn-wrapper li:not(.active) a:hover, | |
+ | .csstransforms .cn-wrapper li:not(.active) a:active, | ||
+ | .csstransforms .cn-wrapper li:not(.active) a:focus { | ||
+ | background-color: #b31515; | ||
+ | background-color: hsla(0, 88%, 70%, 1); | ||
+ | } | ||
+ | .csstransforms .cn-wrapper li:not(.active) a:focus { | ||
+ | position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */ | ||
} | } | ||
.no-csstransforms .cn-wrapper{ | .no-csstransforms .cn-wrapper{ | ||
− | margin: | + | font-size:1em; |
− | overflow:hidden; | + | height:5em; |
− | + | width:25.15em; | |
− | + | bottom:0; | |
+ | margin-left: -12.5em; | ||
+ | overflow: hidden; | ||
+ | position: fixed; | ||
+ | z-index: 10; | ||
+ | left:50%; | ||
+ | border:1px solid #ddd; | ||
} | } | ||
− | .no-csstransforms .cn- | + | |
− | display: | + | .no-csstransforms .cn-button{ |
+ | display:none; | ||
} | } | ||
− | .no-csstransforms li{ | + | |
+ | .no-csstransforms .cn-wrapper li{ | ||
+ | position:static; | ||
+ | float:left; | ||
font-size:1em; | font-size:1em; | ||
− | |||
height:5em; | height:5em; | ||
− | + | width:5em; | |
− | + | background-color: #eee; | |
text-align:center; | text-align:center; | ||
− | + | line-height:5em; | |
} | } | ||
− | .no-csstransforms li a{ | + | |
+ | .no-csstransforms .cn-wrapper li a{ | ||
display:block; | display:block; | ||
− | |||
width:100%; | width:100%; | ||
− | text-decoration: none; | + | height:100%; |
− | color: inherit; | + | text-decoration:none; |
+ | color:inherit; | ||
+ | font-size:1.3em; | ||
+ | border-right: 1px solid #ddd; | ||
} | } | ||
+ | |||
+ | .no-csstransforms .cn-wrapper li a:last-child{ | ||
+ | border:none; | ||
+ | } | ||
+ | |||
.no-csstransforms .cn-wrapper li a:hover, | .no-csstransforms .cn-wrapper li a:hover, | ||
.no-csstransforms .cn-wrapper li a:active, | .no-csstransforms .cn-wrapper li a:active, | ||
.no-csstransforms .cn-wrapper li a:focus{ | .no-csstransforms .cn-wrapper li a:focus{ | ||
− | background-color: | + | background-color: white; |
} | } | ||
+ | |||
.no-csstransforms .cn-wrapper li.active a { | .no-csstransforms .cn-wrapper li.active a { | ||
background-color: #6F325C; | background-color: #6F325C; | ||
color: #fff; | color: #fff; | ||
− | |||
− | |||
− | |||
} | } | ||
− | @media | + | @media screen and (max-width:480px){ |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
.csstransforms .cn-wrapper{ | .csstransforms .cn-wrapper{ | ||
− | font-size: .68em; | + | font-size:.68em; |
} | } | ||
.cn-button{ | .cn-button{ | ||
font-size:1em; | font-size:1em; | ||
+ | } | ||
+ | .csstransforms .cn-wrapper li { | ||
+ | font-size:1.52em; | ||
} | } | ||
} | } | ||
− | @media | + | |
+ | @media screen and (max-width:320px){ | ||
+ | .no-csstransforms .cn-wrapper{ | ||
+ | width:15.15px; | ||
+ | margin-left: -7.5em; | ||
+ | } | ||
.no-csstransforms .cn-wrapper li{ | .no-csstransforms .cn-wrapper li{ | ||
− | |||
height:3em; | height:3em; | ||
− | + | width:3em; | |
} | } | ||
} | } |
Revision as of 19:33, 21 July 2017