From 08372e7eaf0e2e778cae10064202cb6655affba5 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 13 Nov 2013 11:38:54 -0600 Subject: [PATCH] header border update --- dist/css/ionic.css | 22 ++--- dist/css/themes/ionic-ios7.css | 141 +++++++++++++++++++++++++++++++++ scss/_bar.scss | 11 ++- test/headers.html | 124 +++++++++++++++++++++++++++-- 4 files changed, 275 insertions(+), 23 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index cbfa911e97..2e64813a1e 100644 --- a/dist/css/ionic.css +++ b/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; } diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css index e69de29bb2..e119d59757 100644 --- a/dist/css/themes/ionic-ios7.css +++ b/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; } diff --git a/scss/_bar.scss b/scss/_bar.scss index 44a113e65a..0a11bf16ab 100644 --- a/scss/_bar.scss +++ b/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; } diff --git a/test/headers.html b/test/headers.html index d9f06ddf32..c45b36b404 100644 --- a/test/headers.html +++ b/test/headers.html @@ -16,15 +16,15 @@ -
+
-
+
Back

Really really really really really really really really long title!

Home
-
+
Home @@ -39,7 +39,7 @@
- + Home
@@ -66,8 +66,120 @@
-
- +
+ + + +
+ Success + Warning + Danger +
+ + + +
+ +
+ + + +
+ Success + Warning + Danger +
+ + + +
+ +
+ + + +
+ Success + Warning + Danger +
+ + + +
+ +
+ + + +
+ Success + Warning + Danger +
+ + + +
+ +
+ + + +
+ Success + Warning + Danger +
+ + + +
+ +
+ + + +
+ Success + Warning + Danger +
+ + + +
+ +
+ + + +
+ Success + Warning + Danger +
+ + + +
+ +
+ + + +
+ Success + Warning + Danger +
+ + + +
+ +
+