Skip to content

Instantly share code, notes, and snippets.

@kevincobain2000

kevincobain2000/iOS-7-Styled-clear-button-bar.markdown

Last active August 29, 2015 14:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kevincobain2000/29457dad9cc7f2b821b7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kevincobain2000/29457dad9cc7f2b821b7 to your computer and use it in GitHub Desktop.
Download ZIP
iOS 7 Styled clear button bar
Raw
index.html
<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>
Raw
iOS-7-Styled-clear-button-bar.markdown
Raw
script.js
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope) {
});
Raw
style.css
.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