Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Top bar
- //
- // Top bar used on the site
- //
- // Markup:
- // <div class="top-bar">
- // <div class="main-menu">
- // <div class="menu-container">
- // <div class="main-logo">
- // <a href="/" class="logo">
- // <img src="../images//logo-color-lima2019.png" class="img-responsive">
- // </a>
- // </div>
- // <div class="clearfix">
- // <div class="pull-left">
- // <a href="#" class="menu-toggle pull-left">
- // <span class="menu-toggle-line"></span>
- // <span class="menu-toggle-line"></span>
- // <span class="menu-toggle-line"></span>
- // </a>
- // <ul class="nav navbar-nav navbar-social">
- // <li class="first"><a href="/"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
- // <li><a href="/"><i class="fa fa-bell-o"></i></a></li>
- // <li class="select-item">
- // <select id="languages">
- // <option value="es" data-imagesrc="../images//esp.png"></option>
- // <option value="en" data-imagesrc="../images//en.png"></option>
- // </select>
- // </li>
- // <li class="select-item">
- // <select id="dis">
- // <option data-imagesrc="../images//disc.png"></option>
- // </select>
- // </li>
- // </ul>
- // </div>
- // <div class="pull-right">
- // <ul class="nav navbar-nav navbar-right">
- // <li class="first"><a href="/">Voluntariado</a></li>
- // <li><a href="/">Deportes</a></li>
- // <li><a href="/">Sala de Prensa</a></li>
- // <li class="last"><a href="/"><img src="../images//portal_transparencia.png"></i></a></li>
- // </ul>
- // </div>
- // </div>
- // </div>
- // </div>
- // </div>
- //
- // Styleguide Components.top_bar
- //
- .top-bar{
- background: #fff;
- padding: 2px 0px;
- position: relative;
- width: 100%;
- top: 0px;
- z-index: 200;
- box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
- ul{
- li{
- padding: 0px 8px;
- border-left: 1px solid #959494;
- float: left;
- &.first,
- &.last{
- border-left:0px;
- }
- a{
- color: #706a6d;
- padding-top: 4px;
- padding-bottom: 4px;
- &:hover{
- background: transparent!important;
- }
- img{
- max-width: 65px;
- @media (min-width: $screen-md-min) {
- max-width: 65px;
- }
- }
- }
- &.select-item {
- a{
- }
- select{
- border: 0px;
- background: #fff;
- border-radius: 0px;
- width: 100%;
- padding-right: 16px;
- -webkit-appearance: none;
- }
- }
- }
- &.navbar-social{
- li{
- margin-top: 4px;
- }
- }
- &.navbar-right{
- li {
- margin-top: 8px;
- &.last{
- margin-top: 0px;
- }
- }
- }
- }
- .menu-container{
- max-width: 1170px;
- margin: 0 auto;
- @media (min-width: $screen-md-min) {
- padding: 0px 15px;
- }
- }
- .acc-links{
- .trigger{
- cursor: pointer;
- }
- img{
- max-width: 18px;
- margin: 0px 4px;
- }
- span{
- display: inline-block;
- vertical-align: middle;
- }
- a{
- display: inline-block;
- vertical-align: middle;
- }
- .fa{
- font-size: 18px;
- display: inline-block;
- vertical-align:middle;
- }
- .accs-cont{
- max-width: 0px;
- overflow: hidden;
- height: 26px;
- transition: all 1s;
- }
- .fa-caret-left{
- display:none;
- }
- &.open{
- .accs-cont{
- max-width: 200px;
- }
- .fa-caret-left{
- display: inline-block;
- }
- .fa-caret-right{
- display: none;
- }
- }
- }
- }
- .main-menu{
- position: relative;
- z-index: 2;
- padding: 12px 0px;
- .menu-toggle{
- z-index: 10;
- position: relative;
- .menu-toggle-line{
- width: 25px;
- background: #7b7678;
- display: block;
- height: 2px;
- margin-top: 5.5px;
- &:last-child{
- width: 15px;
- }
- }
- &:hover{
- .menu-toggle-line{
- &:last-child{
- width: 25px;
- transition: width 500ms linear;
- }
- }
- }
- @media (max-width: $screen-sm-max) {
- right: -55px;
- position: fixed !important;
- bottom: -56px;
- background: #d2007f;
- padding: 26px 40px 0px 23px;
- border-radius: 50%;
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
- width: 120px;
- height: 120px;
- .menu-toggle-line{
- width: 35px;
- background: #ffff;
- height: 3px;
- }
- }
- }
- .pull-right,
- .pull-left{
- position: relative;
- z-index: 3;
- }
- .main-logo {
- position: absolute;
- width: 100%;
- z-index: 2;
- text-align: center;
- left: 0px;
- top: 0px;
- a {
- display: block;
- width: 160px;
- margin: 0 auto;
- text-align: center;
- img{
- max-width: 160px;
- }
- }
- }
- .nav{
- display:block;
- margin: 7.5px 0px;
- @media (min-width: $screen-sm-min) {
- margin: 0px 0px;
- }
- li {
- a{
- padding: 0px 2px;
- text-transform: uppercase;
- font-size: 12px;
- i{
- font-size: 20px;
- }
- }
- }
- &.navbar-social{
- li{
- margin-left: 6px;
- margin-right: 6px;
- display: none;
- @media (min-width: $screen-sm-min) {
- display:block;
- }
- &.first{
- display: block;
- }
- }
- .social-links{
- position: absolute;
- width: 200px;
- left: 0px;
- margin-top: 10px;
- a{
- display: inline-block;
- margin: 0px 3px;
- background: rgba(0, 0, 0, 0.6)!important;
- height: 32px;
- width: 32px;
- text-align: center;
- line-height: 37px;
- border-radius: 50%;
- color: #fff;
- display:none;
- &:focus{
- background-color: transparent;
- }
- &.animate{
- animation: bump .25s ease-in-out;
- cursor: pointer;
- }
- &.facebook{
- &:hover{
- background: #3B5998!important;
- }
- }
- &.twitter{
- &:hover{
- background: #55acee!important;
- }
- }
- &.youtube{
- &:hover{
- background: #BD081C!important;
- }
- }
- &.instagram{
- &:hover{
- background: #DD2A7B!important;
- }
- }
- }
- }
- }
- &.navbar-right{
- @media (max-width: $screen-sm-max) {
- margin: 0px;
- }
- li{
- display: none;
- &.last{
- display:block;
- }
- @media (min-width: $screen-sm-min) {
- display:block;
- }
- }
- li a {
- opacity: 0.7;
- &:hover{
- opacity: 1;
- }
- }
- }
- }
- }
- @keyframes bump {
- 0% { transform: translateY(0); }
- 30% { transform: translateY(-4px); }
- 50% { transform: translateY(0); }
- 100% { transform: translateY(0); }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement