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

CSS and sech

Browse Source
This commit is contained in:
Max Lynch
2015-06-10 18:32:46 -05:00
parent 400bd719eb
commit 6e25490a7b
4 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/app/test/snapcat/index.js
View File

@ -137,7 +137,7 @@ export class IonicApp {
selector: 'settings-modal'
})
@View({
template: '<ion-view><ion-content padding><button icon (click)="close()"><i class="icon ion-close"></i></button></ion-content></ion-view>',
template: '<ion-view><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-view>',
directives: [Nav, Button, Content]
})
export class SettingsModal {
@ -154,7 +154,7 @@ export class SettingsModal {
selector: 'heart-modal'
})
@View({
template: '<ion-view><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-view>',
template: '<ion-view><button icon (click)="close()"><i class="icon ion-close"></i></button><h2>20</h2><p>You\'re pretty awesome</p></ion-view>',
directives: [Nav, Button, Content]
})
export class HeartModal {

25
ionic/components/app/test/snapcat/main.html
View File

@ -36,6 +36,9 @@
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
ion-app {
font-family: 'lato' !important;
}
ion-view {
background-color: #F5F5F5;
}
@ -104,7 +107,27 @@
font-family: 'lato';
}
heart-modal ion-content {
heart-modal ion-view {
background-color: #FFB400 !important;
justify-content: center;
align-items: center;
color: #fff;
}
heart-modal ion-view h2 {
font-size: 36px !important;
}
heart-modal ion-view p {
font-size: 18px;
}
heart-modal .button-icon {
position: absolute;
top: 10px;
left: 10px;
}
heart-modal .button-icon i {
font-size: 18px;
color: #fff;
}
</style>

2
ionic/components/app/typography.scss
View File

@ -34,7 +34,7 @@ ion-app {
h1, h2, h3, h4, h5, h6 {
font-weight: $headings-font-weight;
font-family: $headings-font-family;
//font-family: $headings-font-family;
line-height: $headings-line-height;
margin-top: 1.6rem;
margin-bottom: 1rem;

4
ionic/components/button/button.scss
View File

@ -8,7 +8,7 @@ $button-padding: 0 1.4rem !default;
$button-height: 4.2rem !default;
$button-border-width: 1px !default;
$button-border-radius: 4px !default;
$button-icon-size: 3rem !default;
$button-icon-size: 2.5rem !default;
$button-large-font-size: 2rem !default;
$button-large-height: 5.4rem !default;
@ -81,6 +81,8 @@ $button-small-icon-size: 2.1rem !default;
&.button-icon {
font-size: $button-icon-size;
background: none;
border: none;
}
&.button-large {