| /*========== Header ==========*/ |
| header.site-header { |
| z-index: 1000; |
| background: transparent; |
| font-size: 14px; |
| position: static; |
| padding: 20px 0 20px 0; |
| } |
| header.site-header.header-fixed { |
| background: rgba(255,255,255,0.8); |
| position: fixed; |
| } |
| header.site-header a { |
| color: #333; |
| } |
| header.site-header li * { |
| -webkit-backface-visibility: hidden !important; |
| } |
| header.site-header nav { |
| border: 0; |
| margin: 0; |
| } |
| header.site-header nav li.active a { |
| background: none; |
| color: #000; |
| } |
| header.site-header nav ul, |
| header.site-header nav li { |
| margin: 0; |
| } |
| header.site-header nav .navbar-brand { |
| font-weight: bold; |
| margin: 0; |
| display: inline-block; |
| float: left; |
| font-size: 24px; |
| margin-right: 20px; |
| color: #000; |
| padding: 0 15px 0 15px; |
| margin: 0; |
| width: 120px; |
| } |
| header.site-header nav .navbar-brand a { |
| background: url("../images/senodio.png") center left no-repeat; |
| width: 130px; |
| height: 40px; |
| display: block; |
| margin-top: 5px; |
| background-size: 48%; |
| } |
| header.site-header nav .navbar-brand img { |
| position: relative; |
| height: 36px; |
| margin-right: 10px; |
| top: 2px; |
| display: none; |
| } |
| header.site-header nav .navbar-brand span { |
| display: none; |
| } |
| header.site-header .navbar-default .navbar-collapse { |
| border-color: transparent; |
| } |
| header.site-header .navbar-default .navbar-nav>.active>a, |
| header.site-header .navbar-default .navbar-default .navbar-nav>.active>a:hover, |
| header.site-header .navbar-default .navbar-default .navbar-nav>.active>a:focus { |
| background: transparent; |
| } |
| header.site-header .navbar-default .navbar-nav>.open>a { |
| background: none; |
| } |
| header.site-header .navbar-toggle { |
| border: 0; |
| } |
| header.site-header .navbar-toggle:hover { |
| background: none; |
| } |
| header.site-header .navbar-toggle:hover .icon-bar { |
| background: #000; |
| } |
| header.site-header .btn-dro { |
| padding: 15px; |
| line-height: 20px; |
| background: none; |
| display: inline-block; |
| color: #777; |
| cursor: pointer; |
| } |
| header.site-header .btn-dro:hover { |
| color: #666; |
| } |
| header.site-header .btn-dro i { |
| position: relative; |
| top: 1px; |
| margin-left: 5px; |
| width: 6px; |
| display: inline-block; |
| font-size: 10px; |
| } |
| header.site-header .dropdown .dropdown-menu>.active>a, |
| header.site-header .dropdown .dropdown-menu>.active>a:hover, |
| header.site-header .dropdown .dropdown-menu>.active>a:focus { |
| background-color: none; |
| } |
| header.site-header .dropdown .dropdown-menu { |
| min-width: 130px; |
| background: #fff; |
| -webkit-transform: scale(0.8) translateY(-10%); |
| transform: scale(0.8) translateY(-10%); |
| transition: 0.1s cubic-bezier(0.3, 0, 0, 1.3); |
| opacity: 0; |
| pointer-events: none; |
| display: block; |
| left: 0; |
| border: 0; |
| border-radius: 3px; |
| } |
| header.site-header .dropdown .dropdown-menu ::after { |
| position: absolute; |
| top: -6px; |
| left: 26px; |
| display: inline-block; |
| border-right: 6px solid transparent; |
| border-bottom: 6px solid #fff; |
| border-left: 6px solid transparent; |
| content: ''; |
| } |
| header.site-header .dropdown .dropdown-menu .divider { |
| background-color: rgba(0,0,0,0.1); |
| } |
| header.site-header .dropdown.open .dropdown-menu { |
| opacity: 1; |
| pointer-events: auto; |
| -webkit-transform: none; |
| transform: none; |
| } |
| header.site-header a.login { |
| color: #666; |
| border: 1px solid #f1f1f1; |
| border-radius: 100px; |
| margin-left: 10px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| font-weight: bold; |
| padding: 0; |
| line-height: 30px; |
| display: inline-block; |
| padding-left: 15px; |
| padding-right: 14px; |
| margin-top: 10px; |
| font-size: 12px; |
| } |
| header.site-header a.login:hover { |
| background: #f1f1f1; |
| } |
| /*========== Header with dark background behind ==========*/ |
| @media screen and (min-width: 990px) { |
| .header-dark header.site-header { |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 0; |
| border-bottom: 1px solid rgba(255,255,255,0.1); |
| } |
| .header-dark header.site-header h1.navbar-brand a { |
| background-image: url("/auth0-styleguide/img/logo-grey-horizontal.png"); |
| } |
| .header-dark header.site-header .navbar-default .navbar-nav>.active>a, |
| .header-dark header.site-header .navbar-default .navbar-nav>.active>a:hover, |
| .header-dark header.site-header .navbar-default .navbar-nav>.active>a:focus { |
| color: #fff; |
| } |
| .header-dark header.site-header .dropdown a { |
| color: #333; |
| } |
| .header-dark header.site-header .navbar-default .navbar-nav>li>a { |
| color: #d0d2d3; |
| } |
| .header-dark header.site-header .navbar-default .navbar-nav>li>a:hover { |
| color: #fff; |
| background: none; |
| } |
| .header-dark header.site-header nav li .btn-dro { |
| color: #d0d2d3; |
| } |
| .header-dark header.site-header nav li .btn-dro:hover { |
| color: #fff; |
| } |
| .header-dark header.site-header a.btn { |
| border-color: #fff; |
| } |
| .header-dark header.site-header a.btn:hover { |
| border-color: #fff; |
| color: #000; |
| } |
| .site-header.navbar-fixed-top, |
| .site-header.navbar-fixed-bottom { |
| background: #fff; |
| position: fixed !important; |
| right: 0; |
| left: 0; |
| z-index: 1030; |
| transform: translate3d(0, 0, 0); |
| -webkit-transform: translate3d(0, 0, 0); |
| background: rgba(255,255,255,0.9); |
| } |
| } |
| .navbar-header { |
| position: relative; |
| } |
| a.hiring { |
| background: #44c7f4; |
| text-transform: uppercase; |
| position: absolute; |
| top: 16px; |
| left: -104px; |
| font-weight: bold; |
| padding: 2px 6px; |
| border-radius: 3px; |
| color: #fff !important; |
| display: inline-block; |
| font-size: 11px; |
| } |
| a.hiring::after { |
| position: absolute; |
| content: ""; |
| right: -4px; |
| top: 5px; |
| width: 0; |
| height: 0; |
| border-top: 5px solid transparent; |
| border-bottom: 5px solid transparent; |
| border-left: 5px solid #44c7f4; |
| } |
| /*========== Responsive ==========*/ |
| @media screen and (max-width: 990px) { |
| header.site-header { |
| position: static; |
| text-align: left; |
| padding: 10px 0; |
| } |
| header.site-header .navbar-left { |
| border-top: 1px solid #f1f1f1; |
| } |
| header.site-header li { |
| padding: 8px 0; |
| border-bottom: 1px solid #f1f1f1; |
| } |
| header.site-header li:last-child { |
| border-bottom: 0; |
| } |
| header.site-header li a { |
| display: block; |
| } |
| header.site-header li.dropdown { |
| display: block; |
| padding: 0; |
| opacity: 1; |
| overflow: hidden; |
| } |
| header.site-header li.dropdown .btn-dro { |
| display: none; |
| } |
| header.site-header li.dropdown .divider { |
| display: none; |
| } |
| header.site-header li.dropdown ul.dropdown-menu { |
| min-width: 0; |
| position: static; |
| margin: 0; |
| box-shadow: none; |
| border-left: 4px solid #ccc; |
| opacity: 1; |
| transform: none; |
| transition: none; |
| border-radius: 0; |
| margin: 0; |
| padding: 0; |
| width: 100%; |
| background: #f8f8f8; |
| pointer-events: all; |
| } |
| header.site-header li.dropdown ul.dropdown-menu li:last-child { |
| border-bottom: 0; |
| } |
| header.site-header nav a.login { |
| margin-bottom: 20px; |
| font-size: 14px; |
| padding: 10px; |
| display: block; |
| text-align: center; |
| } |
| } |