Material cards for Ionic
Created
August 2, 2015 08:03
-
-
Save sandoche/6066d0acf9a3f2cbd314 to your computer and use it in GitHub Desktop.
Ionic Material cards
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 ng-app="ionicApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
| <title>Ionic Pull to Refresh</title> | |
| <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> | |
| <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> | |
| </head> | |
| <body ng-controller="MyCtrl"> | |
| <ion-view view-title="News"> | |
| <ion-content class="padding"> | |
| <div class="list card"> | |
| <div class="item item-image"> | |
| <img src="http://www.fubiz.net/wp-content/uploads/2015/07/feridun-900x788.jpg"> | |
| <div class="text-on-image card-title-shadow"> | |
| <h2>Super news</h2> | |
| <h3>Tuesday, 5th of November 2015</h3> | |
| </div> | |
| </div> | |
| <div class="item item-text-wrap material-text-zone"> | |
| <div class="fab-zone"> | |
| <button class="fab">#1</button> | |
| </div> | |
| L’artiste Feridun Akgüngör nous présente aujourd’hui « Minimal Pure », une série de clichés où seuls figurent des morceaux d’architectures aux lignes droites, semblant flotter au milieu d’un ciel complètement lisse, dont la clarté n’est brisée que par le passage d’un avion ou d’une horde d’oiseaux. | |
| </div> | |
| <div class="item tabs tabs-secondary tabs-icon-left white-tabs"> | |
| <a class="tab-item white-tab-text" href="#"> | |
| <i class="icon ion-thumbsup"></i> | |
| Like | |
| </a> | |
| <a class="tab-item white-tab-text" href="#"> | |
| <i class="icon ion-chatbox"></i> | |
| Comment | |
| </a> | |
| <a class="tab-item white-tab-text" href="#"> | |
| <i class="icon ion-share"></i> | |
| Share | |
| </a> | |
| </div> | |
| </div> | |
| </ion-content> | |
| </ion-view> | |
| <ion-header-bar class="bar-positive"> | |
| <h1 class="title">Material cards</h1> | |
| </ion-header-bar> | |
| <ion-content> | |
| </ion-content> | |
| </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
| angular.module('ionicApp', ['ionic']) | |
| .controller('MyCtrl', function($scope) { | |
| }); |
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
| body { | |
| cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
| } | |
| .card-title-shadow | |
| { | |
| width: 100%; | |
| background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */ | |
| } | |
| .text-on-image | |
| { | |
| position: absolute; | |
| z-index: 10; | |
| bottom: 0px; | |
| padding: 15px; | |
| text-align: left; | |
| } | |
| .text-on-image h2 | |
| { | |
| color: #fff; | |
| font-size: 2em !important; | |
| } | |
| .text-on-image h3 | |
| { | |
| color: #fff; | |
| padding-left: 3px; | |
| font-weight: 300; | |
| } | |
| .white-tabs | |
| { | |
| background: #fff !important; | |
| border-top: 1px solid #ddd !important; | |
| } | |
| .white-tabs-text | |
| { | |
| color: #444 !important; | |
| } | |
| .white-tabs-text:active, .white-tabs-text:hover, .white-tabs-text:focus | |
| { | |
| color: #111 !important; | |
| } | |
| .fab { | |
| border:none; | |
| font-size:1.5em; | |
| color:white; | |
| background-color: #F9690E; | |
| border-radius: 50%; | |
| width: 60px; | |
| height: 60px; | |
| margin: auto; | |
| -webkit-box-shadow: 2px 3px 3px 0px rgba(41, 41, 41, .3); | |
| -moz-box-shadow: 2px 3px 3px 0px rgba(41, 41, 41, .3); | |
| box-shadow: 2px 3px 3px 0px rgba(41, 41, 41, .3); | |
| } | |
| .fab:hover { | |
| background-color: #ed7f39; | |
| } | |
| .fab:active { | |
| background-color: #c15714; | |
| } | |
| .fab-zone { | |
| position: absolute; | |
| z-index: 50; | |
| right: 30px; | |
| top: -35px; | |
| } | |
| .material-text-zone { | |
| padding-top: 25px !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
http://codepen.io/sandoche/pen/QbzOpO/