ionic iPhone ios7 styled thin clear button bar
A Pen by Pulkit Kathuria on CodePen.
See code pen for updated code
Last active
August 29, 2015 14:14
-
-
Save kevincobain2000/29457dad9cc7f2b821b7 to your computer and use it in GitHub Desktop.
iOS 7 Styled clear button bar
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>ios7 styled Tab Button Bar</title> | |
| <link href="http://code.ionicframework.com/0.9.25/css/ionic.css" rel="stylesheet"> | |
| <script src="http://code.ionicframework.com/0.9.25/js/ionic.bundle.js"></script> | |
| </head> | |
| <body> | |
| <ion-header-bar id="header" title="'Awesome App'" type="bar-primary" hides-header></ion-header-bar> | |
| <ion-content | |
| start-y="85" | |
| padding="true" | |
| has-header="true" | |
| > | |
| <br> | |
| <div class="clear-button-bar"> | |
| <a href="#/tab/account" class="clear-button clear-button-first clear-button-active">Hospitals</a> | |
| <a href="#tab2" class="clear-button clear-button-middle">Clinics</a> | |
| <a href="#tab3" class="clear-button clear-button-last">Pharmacy</a> | |
| </div> | |
| <br> | |
| <h3 class="text-center"> | |
| iOS-7 Styled Button Bar | |
| </h3> | |
| </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('AppCtrl', 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
| .clear-button-bar { | |
| display: -webkit-flex; | |
| display: -moz-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-align: center; | |
| -ms-flex-align: center; | |
| -webkit-align-items: center; | |
| align-items: center; | |
| justify-content: flex-start; | |
| perspective-origin: 86.484375px 14.5px; | |
| transform-origin: 86.484375px 14.5px; | |
| width: 240px; | |
| white-space: nowrap; | |
| margin:0 auto; | |
| } | |
| .clear-button { | |
| box-sizing: border-box; | |
| color: rgb(0, 122, 255); | |
| cursor: pointer; | |
| display: inline; | |
| position: relative; | |
| text-align: center; | |
| text-decoration: none; | |
| /*text-overflow: ellipsis;*/ | |
| width: 100%; | |
| align-self: stretch; | |
| perspective-origin: 29.078125px 14.5px; | |
| transform-origin: 29.078125px 14.5px; | |
| overflow: hidden; | |
| padding: 0px 10px; | |
| font: normal normal 500 normal 14px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| } | |
| .clear-button-first { | |
| border: 1px solid rgb(0, 122, 255); | |
| border-radius: 5px 0 0 5px; | |
| outline: rgb(255, 255, 255) none 0px; | |
| } | |
| .clear-button-middle { | |
| background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box; | |
| border-top: 1px solid rgb(0, 122, 255); | |
| border-right: 1px solid rgb(0, 122, 255); | |
| border-bottom: 1px solid rgb(0, 122, 255); | |
| border-left: 0px solid rgb(0, 122, 255); | |
| outline: rgb(0, 122, 255) none 0px; | |
| ; | |
| } | |
| .clear-button-last { | |
| background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box; | |
| border-top: 1px solid rgb(0, 122, 255); | |
| border-right: 1px solid rgb(0, 122, 255); | |
| border-bottom: 1px solid rgb(0, 122, 255); | |
| border-left: 0px solid rgb(0, 122, 255); | |
| border-radius: 0 5px 5px 0; | |
| outline: rgb(0, 122, 255) none 0px; | |
| ; | |
| } | |
| .clear-button-active { | |
| color: rgb(255, 255, 255); | |
| background: rgb(0, 122, 255) none repeat scroll 0% 0% / auto padding-box border-box; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment