Restyle menu icon
This commit is contained in:
parent
db5e7fd6b6
commit
bffdaf9ceb
4 changed files with 57 additions and 55 deletions
BIN
images/menu.png
Normal file
BIN
images/menu.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 792 B |
|
@ -20,36 +20,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 36px;
|
||||
padding-left: 8px;
|
||||
|
||||
.hamburger {
|
||||
width: 36px;
|
||||
background: url('/images/menu.png') no-repeat center;
|
||||
}
|
||||
.menu-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: solid 1px $blue;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 3px 0px rgba(darken($blue, 30%), 0.8);
|
||||
|
||||
li {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
padding: 5px 15px 5px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
|
|
@ -19,4 +19,35 @@ body {
|
|||
line-height: 24px;
|
||||
background: #f2f2f2;
|
||||
box-shadow: 0 -4px 3px 4px rgba(darken($header-color, 30%), 0.8);
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
float: right;
|
||||
height: 36px;
|
||||
padding-left: 8px;
|
||||
|
||||
.hamburger {
|
||||
width: 36px;
|
||||
background: url('/images/menu.png') no-repeat center;
|
||||
}
|
||||
.menu-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: solid 1px $blue;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 3px 0px rgba(darken($blue, 30%), 0.8);
|
||||
|
||||
li {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
padding: 5px 15px 5px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,7 +20,32 @@ body {
|
|||
height: 36px;
|
||||
line-height: 24px;
|
||||
background: #f2f2f2;
|
||||
box-shadow: 0 -4px 3px 4px rgba(165, 165, 165, 0.8); }
|
||||
box-shadow: 0 -4px 3px 4px rgba(165, 165, 165, 0.8);
|
||||
color: #2a92e7; }
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
float: right;
|
||||
height: 36px;
|
||||
padding-left: 8px; }
|
||||
.menu .hamburger {
|
||||
width: 36px;
|
||||
background: url("/images/menu.png") no-repeat center; }
|
||||
.menu .menu-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: solid 1px #2a92e7;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 3px 0px rgba(12, 65, 108, 0.8); }
|
||||
.menu .menu-list li {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
padding: 5px 15px 5px 10px; }
|
||||
|
||||
.gutter {
|
||||
margin-top: 36px; }
|
||||
|
@ -161,30 +186,6 @@ input.new-message {
|
|||
outline: 0;
|
||||
color: white; }
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 36px;
|
||||
padding-left: 8px; }
|
||||
.menu .hamburger {
|
||||
width: 36px;
|
||||
background: url("/images/menu.png") no-repeat center; }
|
||||
.menu .menu-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: solid 1px #2a92e7;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 3px 0px rgba(12, 65, 108, 0.8); }
|
||||
.menu .menu-list li {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
padding: 5px 15px 5px 10px; }
|
||||
|
||||
button {
|
||||
cursor: pointer; }
|
||||
|
||||
|
|
Loading…
Reference in a new issue