header border update

dist/css/ionic.css

@@ -4,7 +4,7 @@
  * --------------------------------------------------
  * Useful utilities and mixins for SCSS files.
  */
-/*
+/*!
   Ionicons, v1.3.3
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
@@ -2046,7 +2046,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2627,7 +2627,7 @@ a.subdued‎ {
     .bar {
       border-top: none !important;
       border-bottom: none !important;
-      background-image: linear-gradient(0deg, #444444, #444444, 50%, transparent 50%);
+      background-image: linear-gradient(0deg, #444444, #444444 50%, transparent 50%);
       background-position: bottom;
       background-size: 100% 1px;
       background-repeat: no-repeat; } }
@@ -2708,12 +2708,12 @@ a.subdued‎ {
     right: 0;
     left: 0;
     z-index: 0;
+    overflow: hidden;
     margin: 0;
     min-width: 30px;
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
-    overflow: hidden;
     font-size: 18px;
     line-height: 44px; }
     .bar .title.title-left {
@@ -2723,17 +2723,17 @@ a.subdued‎ {
   .bar .button {
     z-index: 1;
     padding: 0 8px;
-    height: 32px;
     min-width: 44px;
     min-height: 31px;
+    height: 32px;
     font-size: 12px;
-    line-height: 29px; }
+    line-height: 30px; }
     .bar .button .icon {
       font-size: 24px;
       line-height: 29px; }
   .bar .button-bar > .button, .bar .buttons > .button {
-    height: 32px;
     min-height: 31px;
+    height: 32px;
     line-height: 30px; }
   .bar .button-bar + .button, .bar .button + .button-bar {
     margin-left: 5px; }
@@ -4100,7 +4100,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -4159,7 +4159,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color 0.1s ease-in-out; }
+    transition: background-color .1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -4174,7 +4174,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity 0.05s ease-in-out;
+  transition: opacity .05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -4647,7 +4647,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px white; }
+    text-shadow: 0px 0px 10px #fff; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }

dist/css/themes/ionic-ios7.css

@@ -0,0 +1,141 @@
+/**
+ * Mixins
+ * --------------------------------------------------
+ * Useful utilities and mixins for SCSS files.
+ */
+/** 
+ * Nav controllers and header bar animations
+ */
+/*
+.content-slide-in {
+  &.ng-enter, > .ng-enter {
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(100%,0,0) ;
+    box-shadow: -1px 0px 10px rgba(0,0,0,0.6);
+  }
+  &.ng-enter-active, > .ng-enter-active {
+    -webkit-transform:translate3d(0,0,0) ;
+  }
+  &.ng-leave, > .ng-leave {
+    -webkit-transition: 0.5s ease-in-out all;
+    -webkit-transform:translate3d(0%,0,0);
+  }
+  &.ng-leave-active, > .ng-leave-active {
+    -webkit-transform:translate3d(-10%,0,0);
+    opacity: 0.8;
+  }
+}
+*/
+.content-slide-out.ng-enter, .content-slide-out > .ng-enter {
+  z-index: 1;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
+.content-slide-out.ng-enter-active, .content-slide-out > .ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.content-slide-out.ng-leave, .content-slide-out > .ng-leave {
+  z-index: 0;
+  -webkit-transition: 0.5s ease-in-out all;
+  -webkit-transform: translate3d(0%, 0, 0); }
+.content-slide-out.ng-leave-active, .content-slide-out > .ng-leave-active {
+  -webkit-transform: translate3d(10%, 0, 0);
+  opacity: 0.8; }
+
+.bar-title-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(100%, 0, 0);
+  opacity: 0; }
+
+.bar-title-in-add-active {
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1; }
+
+.bar-title-out-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
+
+.bar-title-out-add-active {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  opacity: 0; }
+
+.bar-button-in {
+  opacity: 0; }
+
+.bar-button-in-add {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  -webkit-transform: translate3d(50%, 0, 0);
+  opacity: 0; }
+
+.bar-button-in-active {
+  -webkit-transform: translate3d(0px, 0, 0);
+  opacity: 1; }
+
+/**
+ * Tab controller animations
+ */
+.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
+  opacity: 1; }
+.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
+  opacity: 1;
+  -webkit-transition: opacity 0.3s ease-in-out; }
+.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
+  opacity: 0; }
+
+/* the overall container of the toggle */
+.toggle {
+  display: inline-block; }
+
+/* hide the actual checkbox */
+.toggle input {
+  display: none; }
+
+.toggle .track {
+  /* the background of the toggle's track area */
+  /* also the track appearance when the toggle is "off" */
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 54px;
+  height: 32px;
+  border: solid 2px #dddddd;
+  border-radius: 20px;
+  background-color: white;
+  cursor: pointer;
+  transition: 0.4s ease; }
+
+.toggle .handle {
+  /* the handle (circle) thats inside the toggle's track area */
+  /* also the appearance when the handle is "off" */
+  position: absolute;
+  display: block;
+  width: auto;
+  /* override defaults */
+  height: auto;
+  /* override defaults */
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+  background-color: white;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 20px;
+  transition: 0.2s ease;
+  transition-property: left, right;
+  transition-delay: 0s, .05s; }
+
+.toggle :checked + .track {
+  /* When the toggle is "on" */
+  /* the track when the toggle is "on" */
+  border-color: #4bd863;
+  background-color: #ccc;
+  box-shadow: inset 0 0 0 20px #4bd863;
+  transition: 0.2s ease;
+  /* the handle when the toggle is "on" */ }
+  .toggle :checked + .track .handle {
+    background-color: white;
+    right: 0;
+    left: 20px;
+    -webkit-transform: none;
+    transition-delay: .05s, 0s; }

scss/_bar.scss

@@ -32,7 +32,7 @@
          (min-resolution: 1.5dppx) {
     border-top: none !important;
     border-bottom: none !important;
-    background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border, 50%, transparent 50%);
+    background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%);
     background-position: bottom;
     background-size: 100% 1px;
     background-repeat: no-repeat;
@@ -86,7 +86,7 @@
     right: 0;
     left: 0;
     z-index: 0;
-
+    overflow: hidden;
 
     margin: 0;
 
@@ -97,7 +97,6 @@
     // Go into ellipsis if too small
     text-overflow: ellipsis;
     white-space: nowrap;
-    overflow: hidden;
 
     font-size: $bar-title-font-size;
 
@@ -115,11 +114,11 @@
   .button {
     z-index: 1;
     padding: 0 $button-bar-button-padding;
-    height: $button-bar-button-height;
     min-width: $button-bar-button-height + $button-bar-button-font-size;
     min-height: $button-bar-button-height - 1;
+    height: $button-bar-button-height;
     font-size: $button-bar-button-font-size;
-    line-height: $button-bar-button-height - $button-border-width - 2;
+    line-height: $button-bar-button-height - $button-border-width - 1;
 
     .icon {
       font-size: $button-bar-button-icon-size;
@@ -128,8 +127,8 @@
   }
 
   .button-bar > .button, .buttons > .button {
-    height: $button-bar-button-height;
     min-height: $button-bar-button-height - 1;
+    height: $button-bar-button-height;
     line-height: $button-bar-button-height - 2;
   }
 

test/headers.html

@@ -16,15 +16,15 @@
   </head>
   <body>
 
-    <section>
+    <section class="content overflow-scroll">
 
-      <header class="bar bar-header bar-dark">
+      <header class="bar bar-header">
         <a class="button" href="index.html">Back</a>
         <h1 class="title">Really really really really really really really really long title!</h1>
         <a class="button"><i class="icon ion-home"></i> Home</a>
       </header>
 
-      <div class="bar bar-header-secondary">
+      <div class="bar bar-header-subheader">
         <a class="button">
           <i class="icon ion-navicon"></i> Home
         </a>
@@ -39,7 +39,7 @@
       </div>
 
       <header class="bar bar-header bar-positive">
-        <a class="button button-default">
+        <a class="button">
           <i class="icon ion-navicon"></i> Home
         </a>
         <div class="button-bar">
@@ -66,8 +66,120 @@
         </a>
       </div>
 
-      <header class="bar bar-header bar-royal">
+      <header class="bar bar-dark">
-        <a class="button button-default">
+        <a class="button">
+          <i class="icon ion-home"></i>
+        </a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
+        </div>
+        <a class="button">
+          <i class="icon ion-star"></i>
+        </a>
+      </header>
+
+      <header class="bar bar-positive">
+        <a class="button">
+          <i class="icon ion-home"></i>
+        </a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
+        </div>
+        <a class="button">
+          <i class="icon ion-star"></i>
+        </a>
+      </header>
+
+      <header class="bar bar-calm">
+        <a class="button">
+          <i class="icon ion-home"></i>
+        </a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
+        </div>
+        <a class="button">
+          <i class="icon ion-star"></i>
+        </a>
+      </header>
+
+      <header class="bar bar-assertive">
+        <a class="button">
+          <i class="icon ion-home"></i>
+        </a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
+        </div>
+        <a class="button">
+          <i class="icon ion-star"></i>
+        </a>
+      </header>
+
+      <header class="bar bar-balanced">
+        <a class="button">
+          <i class="icon ion-home"></i>
+        </a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
+        </div>
+        <a class="button">
+          <i class="icon ion-star"></i>
+        </a>
+      </header>
+
+      <header class="bar bar-energized">
+        <a class="button">
+          <i class="icon ion-home"></i>
+        </a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
+        </div>
+        <a class="button">
+          <i class="icon ion-star"></i>
+        </a>
+      </header>
+
+      <header class="bar bar-royal">
+        <a class="button">
+          <i class="icon ion-home"></i>
+        </a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
+        </div>
+        <a class="button">
+          <i class="icon ion-star"></i>
+        </a>
+      </header>
+
+      <header class="bar bar-light">
+        <a class="button">
+          <i class="icon ion-home"></i>
+        </a>
+        <div class="button-bar">
+          <a class="button">Success</a>
+          <a class="button">Warning</a>
+          <a class="button">Danger</a>
+        </div>
+        <a class="button">
+          <i class="icon ion-star"></i>
+        </a>
+      </header>
+
+      <header class="bar bar-light">
+        <a class="button">
           <i class="icon ion-home"></i>
         </a>
         <div class="button-bar">