Last active
October 13, 2017 20:33
-
-
Save Meshiest/57dcc40b8dd9886bbeb2b66ba9fc2c50 to your computer and use it in GitHub Desktop.
an example list
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Foo</title> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" | |
| rel="stylesheet"> | |
| <style type="text/css"> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: #eee; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| .heading { | |
| color: #777; | |
| font-weight: normal; | |
| margin: 20px; | |
| text-align: center; | |
| } | |
| .list-container { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| margin: auto; | |
| width: 300px; | |
| } | |
| .list-item { | |
| align-items: center; | |
| background-color: #fff; | |
| border-bottom: 1px solid #eee; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); | |
| color: #000; | |
| display: flex; | |
| font-size: 16px; | |
| padding: 8px; | |
| text-decoration: none; | |
| transition: all 0.5s ease; | |
| } | |
| .list-item:last-child { | |
| border-bottom: 0px solid transparent; | |
| } | |
| .list-item .arrow { | |
| color: transparent; | |
| transition: all 0.5s ease; | |
| } | |
| .list-item:hover { | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); | |
| border-bottom: 0px solid transparent; | |
| left: 20px; | |
| } | |
| .list-item:hover .arrow { | |
| color: #999; | |
| } | |
| .flex { | |
| flex: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 class="heading">Select a Test Script</h1> | |
| <div class="list-container"> | |
| <a class="list-item" href="#"> | |
| <span class="flex"> | |
| libmy | |
| </span> | |
| <i class="arrow material-icons">navigate_next</i> | |
| </a> | |
| <a class="list-item" href="#"> | |
| <span class="flex"> | |
| liblist | |
| </span> | |
| <i class="arrow material-icons">navigate_next</i> | |
| </a> | |
| <a class="list-item" href="#"> | |
| <span class="flex"> | |
| pipes | |
| </span> | |
| <i class="arrow material-icons">navigate_next</i> | |
| </a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment