Created
July 6, 2016 09:21
-
-
Save 2947721120/ae2ea327e05a4f9c7ec44dab9a57ea19 to your computer and use it in GitHub Desktop.
Material Design Media Object
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
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="col-md-6 col-md-offset-3" style="margin-top:2em;"> | |
| <h6 style="margin-bottom:1em;"> Comment Box <small class="text-muted">with Material Design Guidelines</small> </h6> | |
| <div class="card paper"> | |
| <details> | |
| <summary style="padding:1em;">3 comments</summary> | |
| <ul class="list-group"> | |
| <li class="list-group-item "> | |
| <span class="circle"> | |
| <img src="http://bigbeehive.com/demo/orientplay-angular/img/user/vector4.png" alt="user"> | |
| </span> | |
| <span class="title"> | |
| <a href="#">Abbey Christensen</a> <time> 5:09 PM</time> | |
| <p>Can’t wait to see this movie.</p> | |
| </span> | |
| <ul class="actions" href="#"> | |
| <li><a class="reply" href="#">Reply</a></li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item"> | |
| <span class="circle"> | |
| <img src="http://bigbeehive.com/demo/orientplay-angular/img/user/vector2.png" alt="user"> | |
| </span> | |
| <span class="title"> | |
| <a href="#">Ali Connors</a> <time> 5:15 PM</time> | |
| <p>Mee too.</p> | |
| </span> | |
| <ul class="actions" href="#"> | |
| <li><a class="reply" href="#">Reply</a></li> | |
| </ul> | |
| </li> | |
| <li class="list-group-item"> | |
| <span class="circle"> | |
| <img src="http://bigbeehive.com/demo/orientplay-angular/img/user/vector3.png" alt="user"> | |
| </span> | |
| <span class="title"> | |
| <a href="#">Peter Carlsson</a> <time> 5:30 PM</time> | |
| <p><a href="#">Abbey Christensen</a> I thought it was a good movie. The slow motion was a tad excessive at times, but overall it was good! I'm love it ;) </p> | |
| </span> | |
| <ul class="actions" href="#"> | |
| <li><a class="reply" href="#">Reply</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </details> | |
| <ul id="lastComment" class="list-group"> | |
| <li class="list-group-item"> | |
| <span class="circle"> | |
| <img src="http://bigbeehive.com/demo/orientplay-angular/img/user/vector4.png" alt="user"> | |
| </span> | |
| <span class="title"> | |
| <a href="#">Sandra Adams </a> <time> 6:00 PM</time> | |
| <p><a href="#">Peter Carlsson</a> This is without doubt the greatest flim i’ve ever seen.</p> | |
| </span> | |
| <ul class="list-inline actions" href="#"> | |
| <li><a class="edit" href="#" title="Edit comment">Edit</a></li> | |
| <li class="roff"><a class="delete" href="#" title="Delete comment"></a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <form> | |
| <fieldset class="form-group"> | |
| <input type="text" | |
| class="form-control" | |
| id="exampleInputEmail1" | |
| placeholder="Add a comment"> | |
| </fieldset> | |
| <button type="button" class="btn btn-sm btn-success">Post</button> | |
| <button type="button" class="btn btn-sm btn-secondary">Cancel</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> | |
| </body> | |
| </html> |
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
| /*--Sorry for raw css --*/ | |
| body{ | |
| background-color: #eee !important; | |
| color: rgba(0,0,0, 0.7); | |
| -webkit-font-smoothing: antialiased; | |
| -webkit-text-size-adjust: 100%; | |
| text-rendering: optimizeLegibility; | |
| -webkit-text-rendering: optimizeLegibility; | |
| } | |
| a{ | |
| text-decoration: none; | |
| } | |
| button{ | |
| outline: none; | |
| border: none; | |
| } | |
| .list-group-item p a { | |
| font-weight: 500; | |
| color: rgba(3, 161, 241, 1); | |
| text-decoration: underline!important; | |
| } | |
| .list-group-item p a:hover { | |
| font-weight: 500; | |
| color: rgba(3, 161, 241, 0.8); | |
| text-decoration: underline!important; | |
| } | |
| .card{ | |
| border: none !important; | |
| background-color: #fff; | |
| overflow: hidden; | |
| } | |
| .paper { | |
| -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); | |
| box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); | |
| } | |
| details{ | |
| background-color: #f4f4f4; | |
| } | |
| summary{ | |
| outline: 0; | |
| cursor: pointer; | |
| color: rgba(0,0,0,.8); | |
| font-size: 14px; | |
| } | |
| .title{ | |
| display: inline-block; | |
| margin-left: 3em; | |
| } | |
| .title a { | |
| font-size: 14px !important; | |
| font-weight: 500 !important; | |
| color: rgba(0,0,0,.8) ; | |
| text-decoration: none !important; | |
| } | |
| .title a:hover { | |
| color: rgba(0,0,0,.7); | |
| } | |
| .title time { | |
| font-size: 12px; | |
| color: rgba(0,0,0,.5)!important; | |
| font-weight: 400; | |
| margin-left: 6px; | |
| } | |
| .title p { | |
| margin-bottom: 0; | |
| white-space: normal; | |
| color: rgba(0,0,0,.8); | |
| font-size: 14px; | |
| margin-top: 0.215em; | |
| } | |
| .circle { | |
| position: absolute; | |
| width: 42px; | |
| height: 42px; | |
| overflow: hidden; | |
| left: 15px; | |
| display: inline-block; | |
| vertical-align: middle; | |
| border-radius: 50%; | |
| } | |
| .circle img{ | |
| width: 100%; | |
| } | |
| ul.actions { | |
| position: absolute; | |
| right: 1em; | |
| top: 1.2em; | |
| display: none; | |
| font-size: 12px; | |
| } | |
| ul.actions a{ | |
| text-decoration:none !important; | |
| color: rgba(0,0,0, 0.6); | |
| font-size: 11px; | |
| } | |
| .list-group-item{ | |
| background-color:transparent !important; | |
| } | |
| .list-group-item{ | |
| border: none !important; | |
| border-radius: 0 !important; | |
| } | |
| .list-group-item:hover{ | |
| background-color:rgba(0,0,0, 0.03) !important; | |
| border-radius: 0 !important; | |
| } | |
| .list-group .list-group-item ul.actions{ | |
| display: none ; | |
| } | |
| .list-group .list-group-item:hover ul.actions{ | |
| display:inherit; | |
| list-style: none; | |
| } | |
| summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| summary::after { | |
| content: "expand_more"; | |
| font-family: 'Material Icons'; | |
| color:rgba(0,0,0, 1); | |
| float: left; | |
| font-size: 1.5em; | |
| margin: 0px 10px 0 0; | |
| padding: 0; | |
| text-align: center; | |
| left: 4.5em; top: 0.455em; | |
| position: absolute; | |
| } | |
| details[open] summary:after { | |
| color:rgba(0,0,0, 1); | |
| content: "expand_less"; | |
| font-family: 'Material Icons'; | |
| } | |
| .delete::after{ | |
| content: "add_circle_outline"; | |
| font-family: 'Material Icons'; | |
| font-size:100%; | |
| vertical-align:bottom; | |
| } | |
| .roff{ | |
| -ms-transform: rotate(45deg); /* IE 9 */ | |
| -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ | |
| transform: rotate(45deg); | |
| } | |
| #lastComment{ | |
| background-color: #f4f4f4; | |
| } | |
| form{ | |
| padding: 1em; | |
| } | |
| .form-control { | |
| display: block; | |
| width: 100% | |
| padding: 0.375rem 0.1rem !important; | |
| font-size: 14px !important; | |
| font-weight: 400 !important; | |
| line-height: 1.5 !important; | |
| color: #55595c !important; | |
| background-color: transparent !important; | |
| background-image: none !important; | |
| border: none !important; | |
| border-radius: 0 !important; | |
| border-bottom: 1px solid #ccc !important; | |
| } | |
| .form-control:focus{ | |
| border-color: rgba(3, 161, 241, 1) !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
与材料设计准则点击显示更多评论效果
