|
|
@@ -40,13 +40,63 @@ body { |
|
|
|
} |
|
|
|
|
|
|
|
.button { |
|
|
|
position: relative; |
|
|
|
width: 120px; |
|
|
|
height: 40px; |
|
|
|
cursor: pointer; |
|
|
|
margin: 10px 0 40px 0; |
|
|
|
padding: 15px; |
|
|
|
transition-property: opacity, filter; |
|
|
|
transition-duration: .15s; |
|
|
|
text-transform: none; |
|
|
|
} |
|
|
|
|
|
|
|
.button-inner { |
|
|
|
left: 0; |
|
|
|
top: 50%; |
|
|
|
display: inline-block; |
|
|
|
margin-top: -2px; |
|
|
|
} |
|
|
|
|
|
|
|
.button-inner, |
|
|
|
.button-inner::after, |
|
|
|
.button-inner::before { |
|
|
|
background-color: #fff; |
|
|
|
position: absolute; |
|
|
|
width: 40px; |
|
|
|
height: 4px; |
|
|
|
transition: transform 0.15s ease; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.button:before { |
|
|
|
content: '\f0c9'; |
|
|
|
font: 42px fontawesome; |
|
|
|
color: #eeeeee; |
|
|
|
.button-inner::before, |
|
|
|
.button-inner::after { |
|
|
|
content: ""; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.button-inner::before { |
|
|
|
top: -10px; |
|
|
|
} |
|
|
|
|
|
|
|
.button-inner::after { |
|
|
|
bottom: -10px; |
|
|
|
} |
|
|
|
|
|
|
|
.button.isOpen .button-inner::before { |
|
|
|
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); |
|
|
|
} |
|
|
|
|
|
|
|
.button.isOpen .button-inner::after { |
|
|
|
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); |
|
|
|
} |
|
|
|
|
|
|
|
.button-label { |
|
|
|
position: absolute; |
|
|
|
top: 6px; |
|
|
|
left: 50px; |
|
|
|
font-size: 24px; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.sidebar-title { |
|
|
@@ -107,6 +157,7 @@ body { |
|
|
|
.keys { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
|
|
|
|
.key { |
|
|
@@ -114,25 +165,27 @@ body { |
|
|
|
border: 3px solid #2a9fd6; |
|
|
|
border-radius: 5px; |
|
|
|
box-shadow: 5px 5px 10px #000; |
|
|
|
margin: 10px; |
|
|
|
margin: 20px; |
|
|
|
width: 300px; |
|
|
|
height: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
.add-key { |
|
|
|
cursor: pointer; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-direction: row; |
|
|
|
transition: box-shadow 0.2s; |
|
|
|
} |
|
|
|
|
|
|
|
.add-key i { |
|
|
|
.key:hover { |
|
|
|
box-shadow: 0 0 10px #eee; |
|
|
|
} |
|
|
|
|
|
|
|
.key i { |
|
|
|
font-size: 48px; |
|
|
|
margin: auto 0 auto 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.add-key span { |
|
|
|
font-size: 36px; |
|
|
|
.key span { |
|
|
|
font-size: 16px; |
|
|
|
vertical-align: center; |
|
|
|
margin: auto; |
|
|
|
-moz-user-select: none; |
|
|
|