| $nav-height: 51px; |
| |
| .navbar-default { |
| border: none; |
| // border-bottom: 1px solid $clr-primary-darker; |
| background-color: $clr-primary; |
| z-index: 10000; |
| transition: background-color 0.5s linear; |
| height: 50px; |
| |
| .navbar-nav { |
| transition: background-color 0.5s linear; |
| } |
| .navbar-nav li { |
| position: relative; |
| a { |
| color: rgba(255, 255, 255, 0.45); |
| background-color: none!important; |
| padding: 15px 20px; |
| transition: 0.5s background-color; |
| font-size: 14px; |
| |
| &:before { |
| content: ''; |
| position: absolute; |
| left: 50%; |
| right: 50%; |
| top: 0; |
| background: $clr-secondary; |
| height: 4px; |
| transition-property: 'left, right'; |
| transition-duration: .3s; |
| transition-timing-function: ease-out; |
| } |
| |
| &:hover, &:focus { |
| color: $clr-lightest; |
| background-color: $clr-primary-dark; |
| |
| &:before { |
| left: 0; |
| right: 0; |
| } |
| } |
| .iconfont { |
| font-size: 12px; |
| } |
| } |
| &.open { |
| background-color: $clr-primary-dark; |
| color: #fff; |
| &>a { |
| &:focus, &:hover { |
| color: $clr-lighter; |
| background-color: $clr-primary-dark;; |
| } |
| } |
| } |
| |
| &.active>a { |
| padding-top: 11px; |
| border-top: 4px solid $clr-secondary; |
| color: #fff; |
| background-color: $clr-primary-darker; |
| transition: 0.5s background-color; |
| |
| &:before { |
| display: none; |
| } |
| |
| &:hover, &:focus { |
| color: $clr-lightest; |
| background-color: $clr-primary-dark; |
| } |
| } |
| .dropdown-menu { |
| // position: static; |
| // right: 0; |
| // top: 40px; |
| width: 100%; |
| padding: 0; |
| background-color: $clr-primary-dark; |
| li { |
| background-color: $clr-primary-dark; |
| |
| a { |
| padding: 8px 20px; |
| } |
| |
| &:hover, &:focus { |
| a { |
| background-color: $clr-secondary; |
| } |
| background-color: $clr-secondary; |
| } |
| border-top: none; |
| padding: 5px 0; |
| } |
| box-shadow: none; |
| border: none; |
| } |
| |
| ul { |
| a:before { |
| display: none; |
| } |
| } |
| } |
| .navbar-logo { |
| height: 32px; |
| margin-top: -6px; |
| margin-left: -2px; |
| } |
| |
| .navbar-collapse { |
| border-top: none; |
| } |
| .navbar-toggle { |
| padding: 1px 5px; |
| margin: 7px 16px 0 0; |
| border-color: #384E6B; |
| background-color: #384E6B; |
| .icon-bar { |
| margin: 7px 0!important; |
| height: 1px; |
| background-color: #fff; |
| } |
| &:hover, &:focus { |
| border-color: #384E6B; |
| background-color: #384E6B; |
| } |
| } |
| } |
| |
| |
| #menu-btn { |
| display: none; |
| float: right; |
| height: 45px; |
| line-height: 45px; |
| margin: 5px 20px 0 0; |
| font-size: 30px; |
| color: #fff; |
| cursor: pointer; |
| } |
| |
| .navbar-bg { |
| background-color: rgba(41, 60, 85, 0.4); |
| .navbar-nav { |
| li { |
| a { |
| color: #fff; |
| } |
| } |
| li.active { |
| a { |
| color: #fff; |
| background-color: transparent; |
| } |
| } |
| #nav-github { |
| opacity: 1; |
| } |
| } |
| } |
| |
| #nav-github { |
| opacity: 0.4; |
| transition: 0.5s; |
| |
| &:hover { |
| opacity: 1; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .navbar-default { |
| .navbar-nav { |
| background-color: $clr-primary; |
| transition: background-color 0.5s linear; |
| margin-top: 0; |
| margin-bottom: 0; |
| |
| .open .dropdown-menu { |
| li a { |
| color: #fff; |
| } |
| padding: 0; |
| } |
| li.active>a { |
| border-left: 4px solid $clr-secondary; |
| border-top: none; |
| padding: 10px 15px 10px 11px; |
| } |
| } |
| } |
| #menu-btn { |
| display: block; |
| } |
| #nav-download { |
| display: none; |
| } |
| } |
| |
| @media (max-width: 992px) and (min-width: 768px) { |
| .navbar-default { |
| .navbar-nav li a { |
| padding: 15px 15px; |
| } |
| } |
| } |
| |
| |
| footer { |
| background-color: $clr-primary; |
| |
| .row { |
| margin-top: 50px !important; |
| margin-bottom: 20px !important; |
| } |
| |
| .logo { |
| img { |
| display: block; |
| margin-bottom: 20px; |
| width: 109px; |
| } |
| } |
| |
| #efe-product { |
| li { |
| width: 49%; |
| display: inline-block; |
| } |
| } |
| |
| #echarts-copyright { |
| color: rgba(255, 255, 255, 0.4); |
| margin: 65px 0 20px 0; |
| font-size: 1.2rem; |
| } |
| |
| h3 { |
| color: #fff; |
| font-size: 1.5rem; |
| margin: 10px 0; |
| } |
| |
| ul { |
| dt { |
| width: 50%; |
| float: left; |
| font-weight: 300; |
| } |
| |
| li { |
| font-weight: 300; |
| } |
| |
| a { |
| color: rgba(255, 255, 255, 0.4); |
| font-size: 1.2rem; |
| margin: 5px 0; |
| |
| &:hover { |
| color: rgba(255, 255, 255, 0.8); |
| } |
| } |
| } |
| |
| #footer-icon-panel { |
| text-align: right; |
| font-weight: 300; |
| } |
| |
| .footer-icon { |
| display: inline-block; |
| width: 40px; |
| height: 40px; |
| border-radius: 50px; |
| margin: 5px 0 5px 10px; |
| padding: 6px 10px; |
| border: 1px solid white; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| footer { |
| .icon-panel { |
| margin: 20px 0 0 0; |
| } |
| #echarts-copyright { |
| margin: 20px 0; |
| } |
| } |
| } |
| |
| |
| $single-page-left-width: 200px; |
| $info-height: 120px; |
| |
| .page-info { |
| margin-top: 50px; |
| margin-bottom: 30px; |
| text-align: center; |
| padding: 40px; |
| color: #4e6167; |
| background: #F4F7FC; |
| |
| h1 { |
| margin-bottom: 10px; |
| margin-top: 0; |
| font-size: 40px; |
| font-weight: bold; |
| color: #333; |
| } |
| |
| p { |
| font-size: 16px; |
| } |
| } |
| |
| .page-content { |
| h2 { |
| color: $clr-secondary; |
| padding-bottom: 5px; |
| border-bottom: 1px solid #ddd; |
| } |
| |
| p { |
| font-size: 14px; |
| margin: 5px 0; |
| } |
| |
| &.single-page { |
| position: absolute; |
| top: $info-height; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| } |
| |
| section { |
| padding: 40px 0; |
| text-align: center; |
| } |
| } |
| |
| .page-nav { |
| position: fixed; |
| overflow: auto; |
| width: $single-page-left-width; |
| top: 230px; |
| bottom: 0; |
| margin: 0 0 0 30px; |
| padding: 0 0 20px 0; |
| |
| h4 { |
| margin: 10px 0; |
| color: #666; |
| font-size: 14px; |
| padding-left: 10px; |
| |
| &:first-child { |
| margin-top: 0; |
| } |
| } |
| |
| a { |
| border-left: 1px solid rgba(78, 97, 103, 0.25); |
| color: #999; |
| padding: 7px 10px; |
| display: block; |
| |
| &:hover { |
| text-decoration: none; |
| color: #333; |
| border-color: $clr-secondary; |
| border-width: 3px; |
| } |
| |
| &.active { |
| color: $clr-secondary; |
| } |
| } |
| |
| .slide-btn { |
| display: none; |
| } |
| } |
| |
| .page-detail { |
| margin-left: $single-page-left-width + 20px; |
| margin-bottom: 20px; |
| padding: 0 40px; |
| position: absolute; |
| right: 0; |
| left: 0; |
| overflow-x: hidden; |
| |
| h2 { |
| margin: 10px 0; |
| padding-top: 60px; |
| font-size: 2.5rem; |
| |
| &:first-child { |
| margin-top: 0; |
| } |
| |
| &+h3 { |
| margin-top: 20px; |
| } |
| } |
| |
| h3 { |
| margin: 40px 0 15px 0; |
| font-size: 18px; |
| } |
| |
| li { |
| padding-left: 0; |
| |
| li { |
| padding-left: 20px; |
| margin: 5px 0; |
| } |
| } |
| |
| .time { |
| float: right; |
| position: relative; |
| top: -35px; |
| } |
| } |
| |
| |
| |
| @media screen and (max-device-width: 600px) { |
| .page-content { |
| &.single-page { |
| position: static; |
| } |
| |
| &.slide-up { |
| .page-nav { |
| ul { |
| display: none; |
| } |
| } |
| } |
| } |
| |
| .page-info { |
| text-align: left; |
| padding: 15px; |
| margin-bottom: 10px; |
| } |
| |
| .page-nav { |
| position: static; |
| |
| .slide-btn { |
| display: block; |
| color: $clr-contrast; |
| position: absolute; |
| right: 20px; |
| margin-top: 10px; |
| } |
| } |
| |
| .page-detail { |
| position: static; |
| margin-left: 0; |
| padding: 0 15px; |
| |
| h2 { |
| padding-top: 20px; |
| |
| &:first-child { |
| padding-top: 0; |
| } |
| } |
| } |
| |
| .pc { |
| display: none; |
| } |
| } |
