javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(windows): add card components

Browse Source 
references #5565
This commit is contained in:
Brandy Carney
2016-02-23 19:19:09 -05:00
parent 781ea831cd
commit dd7def68e3
3 changed files with 138 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components.wp.scss
View File

@ -10,6 +10,7 @@
"components/alert/alert.wp",
"components/badge/badge.wp",
"components/button/button.wp",
"components/card/card.wp",
"components/checkbox/checkbox.wp",
"components/chip/chip.wp",
"components/content/content.wp",

2
ionic/components/alert/alert.wp.scss
View File

@ -194,7 +194,7 @@ $alert-wp-buttons-justify-content: flex-end !default;
border-radius: 2px;
border-width: 2px;
border-style: solid;
border-color: darken($list-wp-border-color, 40%);
border-color: #818181;
background-color: transparent;
}

136
ionic/components/card/card.wp.scss Normal file
View File

@ -0,0 +1,136 @@
@import "../../globals.wp";
@import "./card";
// Windows Card
// --------------------------------------------------
$card-wp-margin-top: 10px !default;
$card-wp-margin-right: 10px !default;
$card-wp-margin-bottom: 10px !default;
$card-wp-margin-left: 10px !default;
$card-wp-padding-top: 13px !default;
$card-wp-padding-right: 16px !default;
$card-wp-padding-bottom: 13px !default;
$card-wp-padding-left: 16px !default;
$card-wp-padding-media-top: 10px !default;
$card-wp-padding-media-bottom: 10px !default;
$card-wp-avatar-size: 4rem !default;
$card-wp-thumbnail-size: 8rem !default;
$card-wp-background-color: $list-wp-background-color !default;
$card-wp-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$card-wp-border-radius: 2px !default;
$card-wp-font-size: 1.4rem !default;
$card-wp-line-height: 1.5 !default;
$card-wp-text-color: #222 !default;
$card-wp-title-font-size: 2.4rem !default;
$card-wp-title-padding: 8px 0 8px 0 !default;
$card-wp-title-margin: 2px 0 2px !default;
$card-wp-title-text-color: #222 !default;
$card-wp-header-font-size: 1.6rem !default;
$card-wp-header-padding: 16px !default;
$card-wp-header-color: #222 !default;
ion-card {
margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left;
font-size: $card-wp-font-size;
background: $card-wp-background-color;
box-shadow: $card-wp-box-shadow;
border-radius: $card-wp-border-radius;
ion-list {
margin-bottom: 0;
ion-label {
padding: 0;
}
.item-inner {
border-bottom: 1px solid $list-wp-border-color;
}
> .item:last-child,
> ion-item-sliding:last-child .item {
border-bottom: none;
}
}
.item-inner {
border: none;
}
ion-card-content {
padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
font-size: $card-wp-font-size;
line-height: $card-wp-line-height;
}
ion-card-header {
padding: $card-wp-header-padding;
font-size: $card-wp-header-font-size;
color: $card-wp-header-color;
}
ion-card-header + ion-card-content,
.item + ion-card-content {
padding-top: 0;
}
ion-note[item-left],
ion-note[item-right], {
font-size: 1.3rem;
}
ion-card-title {
display: block;
line-height: 1.2;
padding: $card-wp-title-padding;
margin: $card-wp-title-margin;
font-size: $card-wp-title-font-size;
color: $card-wp-title-text-color;
}
h1 {
margin: 0 0 2px;
font-size: 2.4rem;
font-weight: normal;
color: $card-wp-text-color;
}
h2 {
margin: 2px 0 2px;
font-size: 1.6rem;
font-weight: normal;
color: $card-wp-text-color;
}
h3,
h4,
h5,
h6 {
margin: 2px 0 2px;
font-size: 1.4rem;
font-weight: normal;
color: $card-wp-text-color;
}
p {
font-size: 1.4rem;
margin: 0 0 2px;
line-height: 1.5;
font-weight: normal;
color: $card-wp-text-color;
}
}
ion-card + ion-card {
margin-top: 0;
}