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

Buttons shtuff

Browse Source
This commit is contained in:
Max Lynch
2015-07-20 13:44:27 -05:00
parent 34b62ff172
commit 6c5dbbd680
6 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/app/colors.scss
View File

@ -18,7 +18,7 @@ $colors: (
), ),
secondary: ( secondary: (
base: #33d066, base: #32db64,
inverse: #fff inverse: #fff
), ),
@ -26,7 +26,7 @@ $colors: (
// Action Colors // Action Colors
// ---------------------- // ----------------------
danger: ( danger: (
base: #ec3d3d, base: #f53d3d,
inverse: #fff, inverse: #fff,
), ),
@ -44,7 +44,7 @@ $colors: (
), ),
dark: ( dark: (
base: #444, base: #222,
inverse: #fff, inverse: #fff,
), ),

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

@ -2,10 +2,10 @@
// Core Button Variables // Core Button Variables
// -------------------------------------------------- // --------------------------------------------------
$button-font-size: 1.4rem !default; $button-font-size: 1.6rem !default;
$button-margin: 0.4rem 0 !default; $button-margin: 0.4rem 0 !default;
$button-padding: 0 1.4rem !default; $button-padding: 0 2rem !default;
$button-height: 4.2rem !default; $button-height: 4.4rem !default;
$button-border-width: 1px !default; $button-border-width: 1px !default;
$button-border-radius: 4px !default; $button-border-radius: 4px !default;
$button-icon-size: 2.5rem !default; $button-icon-size: 2.5rem !default;
@ -22,6 +22,9 @@ $button-small-icon-size: 2.1rem !default;
$button-fab-size: 56px; $button-fab-size: 56px;
$button-round-border-radius: 64px !default;
$button-round-padding: 0 2.6rem !default;
// Core Button // Core Button
// -------------------------------------------------- // --------------------------------------------------
@ -130,6 +133,11 @@ button,
pointer-events: none; pointer-events: none;
} }
&[round] {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
// FABulous buttons (Floating action button from material) // FABulous buttons (Floating action button from material)
&[fab] { &[fab] {

1
ionic/components/button/test/round/e2e.ts Normal file
View File

@ -0,0 +1 @@

7
ionic/components/button/test/round/index.ts Normal file
View File

@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class IonicApp {}

18
ionic/components/button/test/round/main.html Normal file
View File

@ -0,0 +1,18 @@
<div>
<button round light>button light</button>
<button round stable>button stable</button>
<button round primary>button primary</button>
<button round secondary>button secondary</button>
<button round danger>button danger</button>
<button round dark>button dark</button>
</div>
<style>
button {
display: block !important;
margin: 15px auto !important;
}
button:first-child {
margin-top: 80px !important;
}
</style>

2
ionic/components/form/form.scss
View File

@ -22,13 +22,11 @@ form {
// Set font for forms // Set font for forms
label, label,
input, input,
button,
select, select,
textarea { textarea {
@include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
} }
input, input,
button,
select, select,
textarea { textarea {
font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element) font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)