navbar.component.scss (1653B)
1 @import url('https://fonts.googleapis.com/css?family=Lato'); 2 3 a { 4 color: inherit; 5 text-decoration: none; 6 font-family: 'Lato', sans-serif; 7 display: block; 8 } 9 10 a:hover { 11 color: #FF5959; 12 } 13 14 ul, 15 li { 16 list-style-type: none; 17 margin: 0 auto; 18 padding: 0; 19 width: 100%; 20 } 21 22 ul li { 23 display: inline-block; 24 } 25 26 header { 27 background: #FFF; 28 box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); 29 height: 180px; 30 left: 0; 31 position: fixed; 32 right: 0; 33 top: 0; 34 width: initial; 35 z-index: 9; 36 -webkit-transform: matrix(1, 0, 0, 1, 0, 0); 37 -moz-transform: matrix(1, 0, 0, 1, 0, 0); 38 transform: matrix(1, 0, 0, 1, 0, 0); 39 -webkit-transition: all .5s ease-in-out; 40 -moz-transition: all .5s ease-in-out; 41 transition: all .5s ease-in-out; 42 } 43 44 header .box { 45 height: 40px; 46 line-height: 40px; 47 margin: 0 80px; 48 padding: 10px; 49 } 50 51 header .box > ul { 52 display: flex; 53 flex-direction: row; 54 flex-wrap: wrap; 55 } 56 57 header .box > ul li { 58 font-size: 12px; 59 font-weight: bold; 60 text-transform: uppercase; 61 } 62 63 #home, 64 .logo > a { 65 border-radius: 8px; 66 box-shadow: inset 0 0 0 2px #FFF, inset 0 0 0 3px #FF5959; 67 color: #FF5959; 68 display: block; 69 font-size: 25px !important; 70 height: 36px; 71 left: 0; 72 line-height: 36px; 73 margin: 10px 20px 10px 30px; 74 overflow: hidden; 75 padding: 2px; 76 position: fixed; 77 text-align: center; 78 top: 0; 79 width: 36px; 80 } 81 82 .menuButton { 83 display: block !important; 84 } 85 86 @media only screen and (min-width: 520px) { 87 header .container { 88 max-width: 640px 89 } 90 header .box { 91 display: block; 92 } 93 header { 94 height: 60px; 95 } 96 .menuButton { 97 display: none !important; 98 } 99 ul, 100 li { 101 width: auto; 102 } 103 }