style fixes
This commit is contained in:
Megan O'Keefe
parent
65c5c3ebf1
commit
25486dda33
3 changed files with 104 additions and 53 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #605f64;
|
||||
fill: #b4b2bb;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 693 B After Width: | Height: | Size: 693 B |
|
|
@ -65,7 +65,7 @@ header .h-control {
|
|||
font-size: 14px;
|
||||
position: relative;
|
||||
margin-left: 40px;
|
||||
color: #605f64;
|
||||
color: #b4b2bb;
|
||||
outline:none !important;
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ header .h-control input {
|
|||
width: 250px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
background-color: #f2f2f2;
|
||||
background-color: #b4b2bb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline:none !important;
|
||||
|
|
@ -135,25 +135,25 @@ header .h-control select {
|
|||
header .h-control::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
font-size: 14px;
|
||||
color: #605f64;
|
||||
color: #b4b2bb;
|
||||
}
|
||||
|
||||
header .h-control::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
font-size: 14px;
|
||||
color: #605f64;
|
||||
color: #b4b2bb;
|
||||
}
|
||||
|
||||
header .h-control :-ms-input-placeholder {
|
||||
/* IE 10+ */
|
||||
font-size: 14px;
|
||||
color: #605f64;
|
||||
color: #b4b2bb;
|
||||
}
|
||||
|
||||
header .h-control :-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
font-size: 14px;
|
||||
color: #605f64;
|
||||
color: #b4b2bb;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -185,7 +185,8 @@ header .navbar.sub-navbar nav a {
|
|||
}
|
||||
|
||||
header .navbar.sub-navbar .controls {
|
||||
display: flex;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
|
|
@ -199,6 +200,30 @@ header .navbar.sub-navbar .controls a {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
header .navbar.sub-navbar .controls-div {
|
||||
display: block;
|
||||
width: 120px;
|
||||
border-left: 1px solid #b4b2bb;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
header .navbar.sub-navbar form .controls-form {
|
||||
background-color: #111111;
|
||||
display: block;
|
||||
width: 120px;
|
||||
border-left: 1px solid #b4b2bb;
|
||||
display: inline-block;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
header .navbar.sub-navbar .controls a img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -209,6 +234,49 @@ header .navbar.sub-navbar .controls a:last-child {
|
|||
border-right: 1px solid #b4b2bb;
|
||||
}
|
||||
|
||||
form .currency {
|
||||
height: auto;
|
||||
background-color: #111111;
|
||||
font-size: 15px;
|
||||
color: #b4b2bb;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0;
|
||||
padding-right: 30px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
border: none;
|
||||
}
|
||||
|
||||
span .currency-icon {
|
||||
padding-bottom: 2px;
|
||||
padding-top: 20px;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
span.buffer {
|
||||
padding-top: 3px;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
select .currency {
|
||||
padding-left: 10px;
|
||||
padding-top: 2px;
|
||||
align-items: center;
|
||||
background-color: #111111;
|
||||
padding-right: 30px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
option .currency {
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
background-color: #111111;
|
||||
padding-right: 30px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*footer*/
|
||||
|
||||
footer.py-5 {
|
||||
|
|
@ -603,15 +671,3 @@ select {
|
|||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0px;
|
||||
}
|
||||
|
||||
form #currency_form {
|
||||
border: none;
|
||||
padding: 0 31px 0 31px;
|
||||
width: 250px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline:none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Online Boutique Shop</title>
|
||||
<title>Online Boutique</title>
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
|
||||
crossorigin="anonymous">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
|
||||
|
|
@ -19,38 +19,6 @@
|
|||
<body>
|
||||
|
||||
<header>
|
||||
<div class="navbar">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<div class="h-free-shipping"><span>FREE</span> shipping with $75 purchase <span>see details</span></div>
|
||||
<div class="h-controls">
|
||||
<div class="h-control">
|
||||
<img src="/static/icons/Hipster_SearchIcon.svg" alt="icon" class="icon search-icon" />
|
||||
<input type="text" placeholder="What are you looking for today?" />
|
||||
</div>
|
||||
<div class="h-control">
|
||||
<img src="/static/icons/Hipster_ProfileIcon.svg" alt="icon" class="icon" />
|
||||
<span>My Account</span>
|
||||
</div>
|
||||
<div class="h-control">
|
||||
<img src="/static/icons/Hipster_HelpIcon.svg" alt="icon" class="icon" />
|
||||
<span>Help</span>
|
||||
</div>
|
||||
<div class="h-control">
|
||||
{{ if $.currencies }}
|
||||
<img src="/static/icons/Hipster_CurrencyIcon.svg" alt="icon" class="icon" />
|
||||
<form method="POST" action="/setCurrency" id="currency_form">
|
||||
<select name="currency_code" class="h-control"
|
||||
onchange="document.getElementById('currency_form').submit();" style="width:auto;">
|
||||
{{range $.currencies}}
|
||||
<option class="h-control" value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</form>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar sub-navbar">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center">
|
||||
|
|
@ -58,7 +26,34 @@
|
|||
</a>
|
||||
<nav>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<div class="controls">
|
||||
|
||||
{{ if $.currencies }}
|
||||
|
||||
<span> <form method="POST" class="controls-form" action="/setCurrency" id="currency_form" >
|
||||
<span class="buffer"></span>
|
||||
<span class="currency-icon"><img src="/static/icons/Hipster_CurrencyIcon.svg" alt="currency-icon" class="icon" /></span>
|
||||
|
||||
<select class="currency" name="currency_code"
|
||||
onchange="document.getElementById('currency_form').submit();">
|
||||
|
||||
{{range $.currencies}}
|
||||
<option class="currency" value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
|
||||
</form>
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
|
||||
{{ end }}
|
||||
|
||||
|
||||
<a href="/cart">
|
||||
<img src="/static/icons/Hipster_CheckOutIcon.svg" alt="cart-icon" class="logo" />
|
||||
<span>View Cart
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue