|
@import "compass/css3"; |
|
|
|
$f-c: #5f6f81; |
|
|
|
*, *:after, *:before{ |
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
|
|
.gn-menu-main{ |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
height: 60px; |
|
font-size: 13px; |
|
a { |
|
display: block; |
|
height: 100%; |
|
color: $f-c; |
|
text-decoration: none; |
|
cursor: pointer; |
|
&:hover{ |
|
background-color: $f-c; |
|
color: #fff; |
|
} |
|
} |
|
> li{ |
|
display: block; |
|
float: left; |
|
height: 100%; |
|
border-right: 1px solid #c6d0da; |
|
text-align: center; |
|
>a{ |
|
padding: 0 30px; |
|
text-transform: uppercase; |
|
letter-spacing: 1px; |
|
font-weight: bold; |
|
} |
|
:after{ |
|
display: table; |
|
clear:both; |
|
content: ''; |
|
} |
|
} |
|
li.gn-trigger{ |
|
position: relative; |
|
width: 60px; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
} |
|
>li:last-child{ |
|
float: right; |
|
border-right: none; |
|
border-left: 1px solid #c6d0da; |
|
} |
|
} |
|
|
|
.gn-menu-main, .gn-menu-main ul{ |
|
margin: 0; |
|
padding: 0; |
|
background-color: #fff; |
|
color: $f-c; |
|
list-style: none; |
|
text-transform: none; |
|
font-weight: 300; |
|
font-family: Arial, sans-serif; |
|
line-height: 60px; |
|
} |
|
|
|
.gn-menu-wrapper{ |
|
position: fixed; |
|
top: 60px; |
|
bottom: 0; |
|
left: 0; |
|
overflow: hidden; |
|
width: 60px; |
|
border-top: 1px solid #c6d0da; |
|
background-color: #fff; |
|
transform: translateX(-60px); |
|
transition: transform 0.3s, width 0.3s; |
|
} |
|
|
|
.gn-scroller { |
|
position: absolute; |
|
overflow-y: scroll; |
|
width: 370px; |
|
height: 100%; |
|
} |
|
|
|
.gn-menu { |
|
border-bottom: 1px solid #c6d0da; |
|
text-align: left; |
|
font-size: 18px; |
|
li:not(:first-child), li li{ |
|
box-shadow: inset 0 1px #c6d0da; |
|
} |
|
} |
|
|
|
.gn-submenu li{ |
|
overflow: hidden; |
|
height: 0; |
|
transition: height 0.3s; |
|
a{ color: #c1c9d1;} |
|
} |
|
|
|
input.gn-search{ |
|
position: relative; |
|
z-index: 10; |
|
padding-left: 60px; |
|
outline: none; |
|
border:none; |
|
background: transparent; |
|
color: #5f6f81; |
|
font-weight: 300; |
|
font-family: 'Lato', Arial, sans-serif; |
|
cursor: pointer; |
|
&::placeholder{ |
|
color: $f-c; |
|
} |
|
} |
|
|
|
.gn-menu-main a.gn-icon-search{ |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
height: 60px; |
|
} |
|
|
|
.gn-icon::before { |
|
display: inline-block; |
|
width: 60px; |
|
text-align: center; |
|
text-transform: none; |
|
font-weight: normal; |
|
font-style: normal; |
|
font-variant: normal; |
|
font-family: 'FontAwesome'; |
|
line-height: 1; |
|
speak: none; |
|
-webkit-font-smoothing: antialiased; |
|
} |
|
.gn-icon-help::before { |
|
content: "\f059" |
|
} |
|
|
|
.gn-icon-cog::before { |
|
content: "\f085" |
|
} |
|
|
|
.gn-icon-search::before { |
|
content: "\f002" |
|
} |
|
|
|
.gn-icon-download::before { |
|
content: "\f01a" |
|
} |
|
|
|
.gn-icon-photoshop::before { |
|
content: "\f0ad" |
|
} |
|
|
|
.gn-icon-illustrator::before { |
|
content: "\f040" |
|
} |
|
|
|
.gn-icon-archive::before { |
|
content: "\f187" |
|
} |
|
|
|
.gn-icon-article::before { |
|
content: "\f11c" |
|
} |
|
|
|
.gn-icon-pictures::before { |
|
content: "\f03e" |
|
} |
|
|
|
.gn-icon-videos::before { |
|
content: "\f03d" |
|
} |
|
|
|
|
|
.gn-icon span { |
|
width: 0; |
|
height: 0; |
|
display: block; |
|
overflow: hidden; |
|
} |
|
|
|
.gn-icon-menu::before { |
|
/*margin-left: -15px; |
|
vertical-align: -2px; |
|
width: 30px; |
|
height: 3px; |
|
background: #5f6f81; |
|
box-shadow: 0 3px white, 0 -6px #5f6f81, 0 -9px white, 0 -12px #5f6f81; |
|
content: '';*/ |
|
margin-left: -30px; |
|
content: '\f03a'; |
|
} |
|
|
|
.gn-icon-menu:hover::before, |
|
.gn-icon-menu.gn-selected:hover::before { |
|
/*background: white; |
|
box-shadow: 0 3px #5f6f81, 0 -6px white, 0 -9px #5f6f81, 0 -12px white;*/ |
|
margin-left: -30px; |
|
content: '\f03a'; |
|
} |
|
|
|
.gn-icon-menu.gn-selected::before { |
|
background: #5993cd; |
|
box-shadow: 0 3px white, 0 -6px #5993cd, 0 -9px white, 0 -12px #5993cd; |
|
} |
|
|
|
.gn-menu-wrapper.gn-open-all, |
|
.gn-menu-wrapper.gn-open-part { |
|
transform: translateX(0px); |
|
} |
|
|
|
.gn-menu-wrapper.gn-open-all { |
|
width: 340px; |
|
} |
|
.gn-menu-wrapper.gn-open-all .gn-submenu li { |
|
height: 60px; |
|
} |
|
|
|
.container > header, |
|
.codrops-top { |
|
color: #fff; |
|
font-family: 'Lato', Arial, sans-serif; |
|
} |
|
|
|
.container > header { |
|
margin: 0 auto; |
|
padding: 12em 2em; |
|
padding-left: 370px; |
|
background: rgba(0,0,0,0.05); |
|
} |
|
|
|
.container > header a { |
|
color: #566473; |
|
text-decoration: none; |
|
outline: none; |
|
} |
|
|
|
.container > header a:hover { |
|
color: #4f7bab; |
|
} |
|
|
|
.container > header h1 { |
|
font-size: 3.2em; |
|
line-height: 1.3; |
|
margin: 0; |
|
font-weight: 300; |
|
} |
|
|
|
.container > header span { |
|
display: block; |
|
font-size: 55%; |
|
color: #74818e; |
|
padding: 0 0 0.6em 0.1em; |
|
} |
|
body { |
|
background: #34495e; |
|
} |