rename positive to primary

This commit is contained in:
Adam Bradley
2015-04-03 10:38:33 -05:00
parent ce81e2f33c
commit 0983a180d3
14 changed files with 98 additions and 83 deletions

View File

@ -6,6 +6,20 @@
$colors: ( $colors: (
primary: (
base: #387ef5,
inverse: #fff,
light: #145fd7,
dark: #145fd7
),
secondary: (
base: #387ef5,
inverse: #fff,
light: #145fd7,
dark: #145fd7
),
light: ( light: (
base: #fff, base: #fff,
inverse: #444, inverse: #444,
@ -20,13 +34,6 @@ $colors: (
dark: #b2b2b2 dark: #b2b2b2
), ),
positive: (
base: #387ef5,
inverse: #fff,
light: #145fd7,
dark: #145fd7
),
assertive: ( assertive: (
base: #ef473a, base: #ef473a,
inverse: #fff, inverse: #fff,

View File

@ -14,10 +14,10 @@
</p> </p>
<p> <p>
<a class="button button-positive" href="#">a.positive</a> <a class="button button-primary" href="#">a.primary</a>
<button class="button button-positive">button.positive</button> <button class="button button-primary">button.primary</button>
<button class="button button-positive hover">hover</button> <button class="button button-primary hover">hover</button>
<button class="button button-positive activated">activated</button> <button class="button button-primary activated">activated</button>
</p> </p>
<p> <p>

View File

@ -1,15 +1,15 @@
<p> <p>
<a class="button button-block button-positive" href="#">a.button-block</a> <a class="button button-block button-primary" href="#">a.button-block</a>
<button class="button button-block button-positive">button.button-block</button> <button class="button button-block button-primary">button.button-block</button>
</p> </p>
<p> <p>
<a class="button button-block button-outline button-positive" href="#">a.button-block</a> <a class="button button-block button-outline button-primary" href="#">a.button-block</a>
<button class="button button-block button-outline button-positive">button.button-block</button> <button class="button button-block button-outline button-primary">button.button-block</button>
</p> </p>
<p> <p>
<a class="button button-block button-clear button-positive" href="#">a.button-block</a> <a class="button button-block button-clear button-primary" href="#">a.button-block</a>
<button class="button button-block button-clear button-positive">button.button-block</button> <button class="button button-block button-clear button-primary">button.button-block</button>
</p> </p>

View File

@ -14,10 +14,10 @@
</p> </p>
<p> <p>
<a class="button button-clear button-positive" href="#">a.positive</a> <a class="button button-clear button-primary" href="#">a.primary</a>
<button class="button button-clear button-positive">button.positive</button> <button class="button button-clear button-primary">button.primary</button>
<button class="button button-clear button-positive hover">hover</button> <button class="button button-clear button-primary hover">hover</button>
<button class="button button-clear button-positive activated">activated</button> <button class="button button-clear button-primary activated">activated</button>
</p> </p>
<p> <p>

View File

@ -1,15 +1,15 @@
<p> <p>
<a class="button button-full button-positive" href="#">a.button-full</a> <a class="button button-full button-primary" href="#">a.button-full</a>
<button class="button button-full button-positive">button.button-full</button> <button class="button button-full button-primary">button.button-full</button>
</p> </p>
<p> <p>
<a class="button button-full button-outline button-positive" href="#">a.button-full</a> <a class="button button-full button-outline button-primary" href="#">a.button-full</a>
<button class="button button-full button-outline button-positive">button.button-full</button> <button class="button button-full button-outline button-primary">button.button-full</button>
</p> </p>
<p> <p>
<a class="button button-full button-clear button-positive" href="#">a.button-full</a> <a class="button button-full button-clear button-primary" href="#">a.button-full</a>
<button class="button button-full button-clear button-positive">button.button-full</button> <button class="button button-full button-clear button-primary">button.button-full</button>
</p> </p>

View File

@ -2,77 +2,77 @@
<div class="padding"> <div class="padding">
<p> <p>
<button class="button button-positive ion-home icon-left"> <button class="button button-primary ion-home icon-left">
Left Icon Left Icon
</button> </button>
<a class="button button-positive ion-home icon-left"> <a class="button button-primary ion-home icon-left">
Left Icon Left Icon
</a> </a>
</p> </p>
<p> <p>
<button class="button button-positive ion-star icon-right"> <button class="button button-primary ion-star icon-right">
Right Icon Right Icon
</button> </button>
<a class="button button-positive ion-star icon-right"> <a class="button button-primary ion-star icon-right">
Right Icon Right Icon
</a> </a>
</p> </p>
<p> <p>
<button class="button button-positive ion-ionic button-icon"> <button class="button button-primary ion-ionic button-icon">
</button> </button>
<a class="button button-positive ion-ionic button-icon"> <a class="button button-primary ion-ionic button-icon">
</a> </a>
</p> </p>
<p> <p>
<button class="button button-positive button-large ion-home icon-left"> <button class="button button-primary button-large ion-home icon-left">
Left, Large Left, Large
</button> </button>
<a class="button button-positive button-large ion-home icon-left"> <a class="button button-primary button-large ion-home icon-left">
Left, Large Left, Large
</a> </a>
</p> </p>
<p> <p>
<button class="button button-positive button-large ion-star icon-right"> <button class="button button-primary button-large ion-star icon-right">
Right, Large Right, Large
</button> </button>
<a class="button button-positive button-large ion-star icon-right"> <a class="button button-primary button-large ion-star icon-right">
Right, Large Right, Large
</a> </a>
</p> </p>
<p> <p>
<button class="button button-positive ion-ionic button-icon button-large"> <button class="button button-primary ion-ionic button-icon button-large">
</button> </button>
<a class="button button-positive ion-ionic button-icon button-large"> <a class="button button-primary ion-ionic button-icon button-large">
</a> </a>
</p> </p>
<p> <p>
<button class="button button-positive button-small ion-home icon-left"> <button class="button button-primary button-small ion-home icon-left">
Left Icon, Small Left Icon, Small
</button> </button>
<a class="button button-positive button-small ion-home icon-left"> <a class="button button-primary button-small ion-home icon-left">
Left Icon, Small Left Icon, Small
</a> </a>
</p> </p>
<p> <p>
<button class="button button-positive button-small ion-star icon-right"> <button class="button button-primary button-small ion-star icon-right">
Right Icon, Small Right Icon, Small
</button> </button>
<a class="button button-positive button-small ion-star icon-right"> <a class="button button-primary button-small ion-star icon-right">
Right Icon, Small Right Icon, Small
</a> </a>
</p> </p>
<p> <p>
<button class="button button-positive ion-ionic button-icon button-small"> <button class="button button-primary ion-ionic button-icon button-small">
</button> </button>
<a class="button button-positive ion-ionic button-icon button-small"> <a class="button button-primary ion-ionic button-icon button-small">
</a> </a>
</p> </p>

View File

@ -14,10 +14,10 @@
</p> </p>
<p> <p>
<a class="button button-outline button-positive" href="#">a.positive</a> <a class="button button-outline button-primary" href="#">a.primary</a>
<button class="button button-outline button-positive">button.positive</button> <button class="button button-outline button-primary">button.primary</button>
<button class="button button-outline button-positive hover">hover</button> <button class="button button-outline button-primary hover">hover</button>
<button class="button button-outline button-positive activated">activated</button> <button class="button button-outline button-primary activated">activated</button>
</p> </p>
<p> <p>

View File

@ -1,27 +1,27 @@
<p> <p>
<a class="button button-small button-positive" href="#">a.small</a> <a class="button button-small button-primary" href="#">a.small</a>
<button class="button button-small button-positive">button.small</button> <button class="button button-small button-primary">button.small</button>
<a class="button button-outline button-small button-positive" href="#">a.outline.small</a> <a class="button button-outline button-small button-primary" href="#">a.outline.small</a>
<button class="button button-outline button-small button-positive">button.outline.small</button> <button class="button button-outline button-small button-primary">button.outline.small</button>
<a class="button button-clear button-small button-positive" href="#">a.clear.small</a> <a class="button button-clear button-small button-primary" href="#">a.clear.small</a>
<button class="button button-clear button-small button-positive">button.clear.small</button> <button class="button button-clear button-small button-primary">button.clear.small</button>
</p> </p>
<p> <p>
<a class="button button-large button-positive" href="#"> <a class="button button-large button-primary" href="#">
<span style="font-size:48px">H</span> <span style="font-size:48px">H</span>
<span style="font-size:38px">E</span> <span style="font-size:38px">E</span>
<span style="font-size:32px">L</span> <span style="font-size:32px">L</span>
<span style="font-size:24px">L</span> <span style="font-size:24px">L</span>
O</a> O</a>
<button class="button button-large button-positive">button</button> <button class="button button-large button-primary">button</button>
<a class="button button-outline button-large button-positive" href="#">a</a> <a class="button button-outline button-large button-primary" href="#">a</a>
<button class="button button-outline button-large button-positive">button</button> <button class="button button-outline button-large button-primary">button</button>
<a class="button button-clear button-large button-positive" href="#">a</a> <a class="button button-clear button-large button-primary" href="#">a</a>
<button class="button button-clear button-large button-positive">button</button> <button class="button button-clear button-large button-primary">button</button>
</p> </p>

View File

@ -7,6 +7,6 @@
margin: 10px; margin: 10px;
} }
.card .item-title { .card .item-label {
white-space: normal; white-space: normal;
} }

View File

@ -11,7 +11,7 @@
<div class="item card-header"> <div class="item card-header">
<div class="item-content"> <div class="item-content">
<div class="item-title"> <div class="item-label">
Card Header Card Header
</div> </div>
</div> </div>
@ -19,7 +19,7 @@
<div class="item"> <div class="item">
<div class="item-content"> <div class="item-content">
<div class="item-title"> <div class="item-label">
I met her in a club down in old Soho, I met her in a club down in old Soho,
where you drink champagne and it tastes just like Cola cola, where you drink champagne and it tastes just like Cola cola,
C-O-L-A cola. C-O-L-A cola.
@ -29,7 +29,7 @@
<div class="item"> <div class="item">
<div class="item-content"> <div class="item-content">
<div class="item-title"> <div class="item-label">
She walked up to me and she asked me to dance. She walked up to me and she asked me to dance.
I asked her name and in a dark brown voice she said, "Lola", I asked her name and in a dark brown voice she said, "Lola",
L-O-L-A Lola, lo lo lo lo Lola L-O-L-A Lola, lo lo lo lo Lola
@ -39,7 +39,7 @@
<div class="item card-footer"> <div class="item card-footer">
<div class="item-content"> <div class="item-content">
<div class="item-title"> <div class="item-label">
Card Footer Card Footer
</div> </div>
</div> </div>

View File

@ -22,7 +22,7 @@ export let CheckboxConfig = new ComponentConfig('checkbox')
<div class="item-content"> <div class="item-content">
<div class="item-title"> <div class="item-label">
<content></content> <content></content>
</div> </div>

View File

@ -20,7 +20,7 @@ import {
<div class="item-accessory"> <div class="item-accessory">
<content select="ion-item-accessory"></content> <content select="ion-item-accessory"></content>
</div> </div>
<div class="item-title"> <div class="item-label">
<content></content> <content></content>
</div> </div>
</div> </div>

View File

@ -56,18 +56,7 @@ ion-primary-swipe-buttons {
padding: 0; padding: 0;
} }
.item-media { .item-label {
@include flex-display();
@include flex-shrink(0);
@include flex-wrap(nowrap);
@include flex-align-items(center);
min-height: $item-min-height;
padding: 0;
}
.item-title {
position: relative; position: relative;
@include flex(1); @include flex(1);
@ -80,6 +69,25 @@ ion-primary-swipe-buttons {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
// Item Media (Icons, checkboxes, images, etc.)
// --------------------------------------------------
.item-media {
@include flex-display();
@include flex-shrink(0);
@include flex-wrap(nowrap);
@include flex-align-items(center);
min-height: $item-min-height;
padding: 0;
}
// Item Accessory
// --------------------------------------------------
.item-accessory { .item-accessory {
@include flex-display(); @include flex-display();
@include flex-shrink(0); @include flex-shrink(0);

View File

@ -1,5 +1,5 @@
<ion-view nav-title="Sign In"> <ion-view nav-title="Sign In">
<button class="button-positive" (click)="signIn()"> <button class="button-primary" (click)="signIn()">
Sign In Sign In
</button> </button>
</ion-view> </ion-view>