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

refactor(button): fixing some button css and adding in the fab scss

Browse Source 
references #689
This commit is contained in:
Brandy Carney
2015-12-04 17:03:34 -05:00
parent 74e1216cde
commit 6524ec69aa
5 changed files with 84 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/button/button-clear.scss
View File

@@ -24,6 +24,7 @@
// Generate Clear Button Colors
// --------------------------------------------------
// TODO primary activated is wrong
@each $color-name, $color-value in auxiliary-colors() {
$fg-color: color-shade($color-value);
@@ -33,6 +34,11 @@
background: transparent;
color: $fg-color;
&.activated {
opacity: 0.4;
background: transparent;
}
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}

79
ionic/components/button/button-fab.scss
View File

@@ -6,53 +6,48 @@
$button-fab-size: 56px !default;
button,
[button] {
.button-fab {
position: absolute;
width: $button-fab-size;
height: $button-fab-size;
line-height: $button-fab-size;
min-width: 0;
vertical-align: middle;
&[fab] {
position: absolute;
width: $button-fab-size;
height: $button-fab-size;
line-height: $button-fab-size;
min-width: 0;
vertical-align: middle;
border-radius: 50%;
background-clip: padding-box;
border-radius: 50%;
background-clip: padding-box;
overflow: hidden;
overflow: hidden;
transition: .2s linear;
transition-property: background-color;
transition: .2s linear;
transition-property: background-color;
font-size: 14px;
&[fab-center] {
left: 50%;
margin-left: -$button-fab-size / 2;
}
&[fab-top] {
top: 16px;
}
&[fab-right] {
right: 16px;
}
&[fab-bottom] {
bottom: 16px;
}
&[fab-left] {
left: 16px;
}
icon {
flex: 1;
font-size: 2.8rem;
}
font-size: 14px;
icon {
flex: 1;
font-size: 2.8rem;
}
}
.button-fab-center {
left: 50%;
margin-left: -$button-fab-size / 2;
}
.button-fab-top {
top: 16px;
}
.button-fab-right {
right: 16px;
}
.button-fab-bottom {
bottom: 16px;
}
.button-fab-left {
left: 16px;
}

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

@@ -14,6 +14,16 @@ $button-color-activated: color-shade($button-color) !default;
$button-text-color: inverse($button-color) !default;
$button-hover-opacity: 0.8 !default;
.button-disabled {
opacity: 0.4;
cursor: default !important;
pointer-events: none;
}
a.button {
text-decoration: none;
}
.button {
position: relative;
display: inline-flex;
@@ -25,7 +35,7 @@ $button-hover-opacity: 0.8 !default;
margin: $button-margin;
padding: $button-padding;
min-height: $button-height;
line-height: 1;
line-height: $button-height;
border: 1px solid #ccc;
border: transparent;
@@ -60,47 +70,36 @@ $button-hover-opacity: 0.8 !default;
opacity: 1;
background-color: $button-color-activated;
}
}
// Button Types
// --------------------------------------------------
// Button Types
// --------------------------------------------------
.button-block {
display: flex;
.button-block {
display: flex;
clear: both;
margin-right: 0;
margin-left: 0;
width: 100%;
&:after {
clear: both;
margin-right: 0;
margin-left: 0;
width: 100%;
&:after {
clear: both;
}
}
.button-full {
width: 100%;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
.button-round {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
.button-disabled {
opacity: 0.4;
cursor: default !important;
pointer-events: none;
}
}
a[button] {
text-decoration: none;
.button-full {
width: 100%;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
.button-round {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
// TODO
// button should have classes:

2
ionic/components/button/modes/md.scss
View File

@@ -100,8 +100,10 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
.button-clear {
opacity: 1;
box-shadow: none;
background: transparent;
&.activated {
opacity: 0.4;
background-color: $button-md-clear-active-background-color;
}
}

12
ionic/components/button/test/fab/main.html
View File

@@ -1,24 +1,24 @@
<button fab fab-left fab-top>
<button class="button-fab button-fab-left button-fab-top">
<icon add></icon>
</button>
<button fab fab-center fab-top secondary>
<button class="button-fab button-fab-center button-fab-top button-secondary">
<icon add></icon>
</button>
<button fab fab-right fab-top danger>
<button class="button-fab button-fab-right button-fab-top button-danger">
<icon add></icon>
</button>
<button fab fab-left fab-bottom light>
<button class="button-fab button-fab-left button-fab-bottom button-light">
<icon add></icon>
</button>
<button fab fab-center fab-bottom primary>
<button class="button-fab button-fab-center button-fab-bottom button-primary">
<icon add></icon>
</button>
<button fab fab-right fab-bottom dark>
<button class="button-fab button-fab-right button-fab-bottom button-dark">
<icon add></icon>
</button>