From 738436834cd514079527e9680f296a137f2e0cf4 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 3 Apr 2015 16:50:58 -0500 Subject: [PATCH] button updates --- scripts/snapshot/snapshot.config.js | 2 +- src/components/app/_colors.scss | 40 +++--- src/components/app/ionic.scss | 1 + src/components/badge/badge.scss | 30 +++++ src/components/button/extensions/ios.scss | 60 ++++----- src/components/button/test/basic/main.html | 42 ++++-- src/components/button/test/block/main.html | 28 ++-- src/components/button/test/clear/main.html | 42 ++++-- src/components/button/test/outline/main.html | 35 +++-- src/components/button/test/sizes/main.html | 9 ++ src/components/item/extensions/ios.scss | 4 + src/components/item/item.scss | 53 ++++++-- .../item/test/accessories/main.html | 121 ++++++++++++++++++ src/components/item/test/accessories/main.js | 21 +++ src/components/list/extensions/ios.scss | 2 +- 15 files changed, 367 insertions(+), 123 deletions(-) create mode 100644 src/components/badge/badge.scss create mode 100644 src/components/item/test/accessories/main.html create mode 100644 src/components/item/test/accessories/main.js diff --git a/scripts/snapshot/snapshot.config.js b/scripts/snapshot/snapshot.config.js index b28ef43c59..71cefb944c 100644 --- a/scripts/snapshot/snapshot.config.js +++ b/scripts/snapshot/snapshot.config.js @@ -11,7 +11,7 @@ exports.config = { specs: 'dist/e2e/**/*e2e.js', //specs: 'dist/e2e/action-menu/**/*e2e.js', - sleepBetweenSpecs: 1000, + sleepBetweenSpecs: 1200, platformDefauls: { browser: 'chrome', diff --git a/src/components/app/_colors.scss b/src/components/app/_colors.scss index 0d102a17fb..0fd60f3fe3 100644 --- a/src/components/app/_colors.scss +++ b/src/components/app/_colors.scss @@ -6,46 +6,44 @@ $colors: ( + + // Brand colors + // ---------------------- primary: ( base: #387ef5, - inverse: #fff, - light: #145fd7, - dark: #145fd7 + inverse: #fff ), secondary: ( - base: #387ef5, - inverse: #fff, - light: #145fd7, - dark: #145fd7 + base: #33d066, + inverse: #fff ), + + // Action Colors + // ---------------------- + danger: ( + base: #ec3d3d, + inverse: #fff, + ), + + + // Shade Colors + // ---------------------- light: ( base: #fff, inverse: #444, - light: #fafafa, - dark: #ddd ), stable: ( - base: #f8f8f8, + base: #f4f4f4, inverse: #444, - light: #e5e5e5, - dark: #b2b2b2 - ), - - assertive: ( - base: #ef473a, - inverse: #fff, - light: #f37369, - dark: #cc2311 ), dark: ( base: #444, inverse: #fff, - light: #262626, - dark: #000 ), + ) !default; diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss index 86f68bd0a3..dfe479886d 100644 --- a/src/components/app/ionic.scss +++ b/src/components/app/ionic.scss @@ -26,6 +26,7 @@ "../action-menu/action-menu", "../alert/alert", "../aside/aside", + "../badge/badge", "../button/button", "../card/card", "../checkbox/checkbox", diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss new file mode 100644 index 0000000000..2e6cd204d1 --- /dev/null +++ b/src/components/badge/badge.scss @@ -0,0 +1,30 @@ + +// Badge +// -------------------------------------------------- + +$badge-font-size: 1.3rem !default; +$badge-font-weight: bold !default; +$badge-border-radius: 10px !default; + + +.badge { + display: inline-block; + + padding: 3px 8px; + min-width: 10px; + border-radius: $badge-border-radius; + + vertical-align: baseline; + text-align: center; + white-space: nowrap; + + font-size: $badge-font-size; + font-weight: $badge-font-weight; + line-height: 1; + + background: #ccc; + + &:empty { + display: none; + } +} diff --git a/src/components/button/extensions/ios.scss b/src/components/button/extensions/ios.scss index edfe97a710..c143963599 100644 --- a/src/components/button/extensions/ios.scss +++ b/src/components/button/extensions/ios.scss @@ -3,60 +3,57 @@ // -------------------------------------------------- $button-ios-font-size: 1.4rem !default; -$button-ios-padding: 0 10px !default; -$button-ios-height: 42px !default; +$button-ios-padding: 0 1.4rem !default; +$button-ios-height: 4.2rem !default; $button-ios-border-width: 1px !default; -$button-ios-border-radius: 5px !default; +$button-ios-border-radius: 4px !default; $button-ios-large-font-size: 2rem !default; -$button-ios-large-height: 54px !default; -$button-ios-large-padding: 14px !default; -$button-ios-large-icon-size: 32px !default; +$button-ios-large-height: 5.4rem !default; +$button-ios-large-padding: 1.4rem !default; +$button-ios-large-icon-size: 3.2rem !default; -$button-ios-small-font-size: 1.2rem !default; -$button-ios-small-height: 28px !default; -$button-ios-small-padding: 6px !default; -$button-ios-small-icon-size: 16px !default; +$button-ios-small-font-size: 1.3rem !default; +$button-ios-small-height: 2.8rem !default; +$button-ios-small-padding: 1.1rem !default; +$button-ios-small-icon-size: 1.6rem !default; // iOS Button Mixins // -------------------------------------------------- -@mixin button-default($bg-color, $border-color, $active-bg-color, $active-border-color, $color) { +@mixin button-default($bg-color, $fg-color) { background-color: $bg-color; - border-color: $border-color; - color: $color; + color: $fg-color; &:hover, &.hover { - opacity: 0.8; - color: $color; + opacity: 0.88; + color: $fg-color; text-decoration: none; } &.activated { - border-color: darken($border-color, 10%); - background-color: $active-bg-color; + opacity: 1; + background-color: darken($bg-color, 12%); } } -@mixin button-clear($color) { +@mixin button-clear($fg-color) { &.button-clear { - border-color: transparent; background: none; - color: $color; + color: $fg-color; } } -@mixin button-outline($color) { +@mixin button-outline($fg-color) { &.button-outline { - border-color: $color; + border: 1px solid $fg-color; background: transparent; - color: $color; + color: $fg-color; &.activated { - background-color: $color; - color: #fff; + background-color: rgba(red($fg-color), green($fg-color), blue($fg-color), 0.15); } } } @@ -70,6 +67,7 @@ $button-ios-small-icon-size: 16px !default; min-height: $button-ios-height; border-radius: $button-ios-border-radius; font-size: $button-ios-font-size; + border: transparent; &.button-icon { font-size: $button-ios-font-size + 1.5; @@ -78,7 +76,7 @@ $button-ios-small-icon-size: 16px !default; &.button-large { padding: 0 $button-ios-large-padding; min-width: ($button-ios-large-padding * 4); - min-height: $button-ios-large-height + 5; + min-height: $button-ios-large-height; font-size: $button-ios-large-font-size; &.button-icon { @@ -86,11 +84,10 @@ $button-ios-small-icon-size: 16px !default; } } - &.button-small { padding: 0 $button-ios-small-padding; min-width: ($button-ios-small-padding * 4); - min-height: $button-ios-small-height + 2; + min-height: $button-ios-small-height; font-size: $button-ios-small-font-size; &.button-icon { @@ -108,14 +105,11 @@ $button-ios-small-icon-size: 16px !default; .button-ios.button-#{$color} { @include button-default(get-color($color, base), - get-color($color, dark), - inverse-tone($color), - get-color($color, dark), get-color($color, inverse)); - @include button-clear(get-color($color, dark)); + @include button-clear(get-color($color, base)); - @include button-outline(get-color($color, dark)); + @include button-outline(get-color($color, base)); } } diff --git a/src/components/button/test/basic/main.html b/src/components/button/test/basic/main.html index 2d408e0aae..773f719d99 100644 --- a/src/components/button/test/basic/main.html +++ b/src/components/button/test/basic/main.html @@ -1,4 +1,32 @@ +

+ a (default) + + + +

+ +

+ a.primary + + + +

+ +

+ a.secondary + + + +

+ +

+ a.danger + + + +

+

a.light @@ -13,20 +41,6 @@

-

- a.primary - - - -

- -

- a.assertive - - - -

-

a.dark diff --git a/src/components/button/test/block/main.html b/src/components/button/test/block/main.html index a24c63cc2e..0cc64a229e 100644 --- a/src/components/button/test/block/main.html +++ b/src/components/button/test/block/main.html @@ -1,15 +1,19 @@ -

- a.button-block - -

+
-

- a.button-block - -

+

+ a.button-block + +

-

- a.button-block - -

+

+ a.button-block + +

+ +

+ a.button-block + +

+ +
diff --git a/src/components/button/test/clear/main.html b/src/components/button/test/clear/main.html index e1174b009b..70341a5405 100644 --- a/src/components/button/test/clear/main.html +++ b/src/components/button/test/clear/main.html @@ -1,4 +1,32 @@ +

+ a (default) + + + +

+ +

+ a.primary + + + +

+ +

+ a.secondary + + + +

+ +

+ a.danger + + + +

+

a.light @@ -13,20 +41,6 @@

-

- a.primary - - - -

- -

- a.assertive - - - -

-

a.dark diff --git a/src/components/button/test/outline/main.html b/src/components/button/test/outline/main.html index 737fe54a40..a4c57d10f2 100644 --- a/src/components/button/test/outline/main.html +++ b/src/components/button/test/outline/main.html @@ -1,4 +1,25 @@ +

+ a.primary + + + +

+ +

+ a.secondary + + + +

+ +

+ a.danger + + + +

+

a.light @@ -13,20 +34,6 @@

-

- a.primary - - - -

- -

- a.assertive - - - -

-

a.dark diff --git a/src/components/button/test/sizes/main.html b/src/components/button/test/sizes/main.html index a2209d3eed..7a03e03aae 100644 --- a/src/components/button/test/sizes/main.html +++ b/src/components/button/test/sizes/main.html @@ -1,11 +1,18 @@ +

+ a (default) + +

+

a.small a.outline.small +

+

a.clear.small

@@ -18,7 +25,9 @@ L O +

+

a diff --git a/src/components/item/extensions/ios.scss b/src/components/item/extensions/ios.scss index 6030f5c134..d3d960917e 100644 --- a/src/components/item/extensions/ios.scss +++ b/src/components/item/extensions/ios.scss @@ -48,6 +48,10 @@ $item-ios-border-color: $list-ios-border-color !default; } } + .item:last-of-type .item-content:after { + background: none; + } + .item-accessory { color: $item-ios-accessory-color; } diff --git a/src/components/item/item.scss b/src/components/item/item.scss index ec301105a4..e5aadb1e67 100644 --- a/src/components/item/item.scss +++ b/src/components/item/item.scss @@ -3,6 +3,7 @@ // -------------------------------------------------- $item-min-height: 44px !default; +$item-padding: 15px !default; .item { @@ -38,6 +39,10 @@ ion-primary-swipe-buttons { } } + +// Item Content +// -------------------------------------------------- + .item-content { // TODO add proper bg to cover up swipe buttons background: white; @@ -69,6 +74,13 @@ ion-primary-swipe-buttons { text-overflow: ellipsis; } +.item-content { + h1, h2, h3, h4, h5, h6 { + align-self: flex-start; + } +} + + // Item Media (Icons, checkboxes, images, etc.) // -------------------------------------------------- @@ -80,22 +92,37 @@ ion-primary-swipe-buttons { @include flex-align-items(center); min-height: $item-min-height; - padding: 0; -} - - -// Item Accessory -// -------------------------------------------------- - -.item-accessory { - @include flex-display(); - @include flex-shrink(0); - - margin-left: 5px; - max-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + +.item-media + .item-label { + padding-left: $item-padding; +} + +.item-media:last-child { + padding-right: $item-padding; +} + +.item-note { + color: #aaa; + font-size: 1.4rem; +} + +.item-avatar { + padding-top: ($item-padding / 2) - 1; + padding-bottom: ($item-padding / 2) + 1; + + img { + max-width: 40px; + max-height: 40px; + width: 100%; + height: 100%; + border-radius: 50%; + } +} + + diff --git a/src/components/item/test/accessories/main.html b/src/components/item/test/accessories/main.html new file mode 100644 index 0000000000..ff81a77e9d --- /dev/null +++ b/src/components/item/test/accessories/main.html @@ -0,0 +1,121 @@ + + + + +

+
+
+ Item Label +
+
+ Item Note +
+
+
+ +
+ +
+
+ Icon Left, outside item-content +
+
+
+ +
+
+ +
+ Icon Left, inside item-content +
+
+
+ +
+
+
+ Icon Right +
+ +
+
+ +
+
+
+ I tried to picture clusters of information + as they moved through the computer. + What do they look like? + Ships, motorcycles? + + With the circuits like freeways. + I kept dreaming of a world + I thought I'd never see. + + And then, one day, + I got in. +
+
+
+ 5 +
+
+
+
+ +
+
+
+
+
+ Red Balloons +
+
+
+ 99 +
+
+
+
+ +
+
+ +
+
+
+ Avatar Left, item-label +
+
+
+ +
+
+
+ Avatar Right, item-label +
+
+ +
+
+
+ +
+
+ +
+
+
+

+ Avatar Right, h2 header, p content +

+

+ Your mother was a hamster and your father smelt of elderberries! +

+
+
+
+ + + + diff --git a/src/components/item/test/accessories/main.js b/src/components/item/test/accessories/main.js new file mode 100644 index 0000000000..7337888590 --- /dev/null +++ b/src/components/item/test/accessories/main.js @@ -0,0 +1,21 @@ +import {bootstrap} from 'angular2/core' +import {Component, Template, For} from 'angular2/angular2' +import {Item, View, List} from 'ionic2/components' + +import {ItemPrimarySwipeButtons} from 'ionic2/components/item/item-swipe-buttons' + +@Component({ + selector: '[ion-app]' +}) +@Template({ + url: 'main.html', + directives: [Item, View, List, For, ItemPrimarySwipeButtons] +}) +class App{ + constructor() { + this.items = [1, 2, 3, 4, 5] + } +} + +bootstrap(App) + diff --git a/src/components/list/extensions/ios.scss b/src/components/list/extensions/ios.scss index d92159b549..e1308f668b 100644 --- a/src/components/list/extensions/ios.scss +++ b/src/components/list/extensions/ios.scss @@ -34,7 +34,7 @@ $list-ios-footer-color: #8f8f94 !default; content: ''; } - .list:after { + .item:last-of-type:after { position: absolute; top: auto; right: auto;