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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -56,18 +56,7 @@ ion-primary-swipe-buttons {
padding: 0;
}
.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-title {
.item-label {
position: relative;
@include flex(1);
@ -80,6 +69,25 @@ ion-primary-swipe-buttons {
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 {
@include flex-display();
@include flex-shrink(0);

View File

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