mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 22:17:40 +08:00
rename positive to primary
This commit is contained in:
@ -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,
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -7,6 +7,6 @@
|
|||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .item-title {
|
.card .item-label {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
@ -28,8 +28,8 @@ import {
|
|||||||
<content select="ion-secondary-swipe-buttons"></content>
|
<content select="ion-secondary-swipe-buttons"></content>
|
||||||
`,
|
`,
|
||||||
directives: [
|
directives: [
|
||||||
ItemPrimarySwipeButtons,
|
ItemPrimarySwipeButtons,
|
||||||
// ItemSecondarySwipeButtons,
|
// ItemSecondarySwipeButtons,
|
||||||
// ItemPrimaryOptions,
|
// ItemPrimaryOptions,
|
||||||
// ItemSecondaryOptions
|
// ItemSecondaryOptions
|
||||||
]
|
]
|
||||||
|
@ -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);
|
||||||
|
@ -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>
|
||||||
|
Reference in New Issue
Block a user