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

reset buttons

Browse Source
This commit is contained in:
Adam Bradley
2015-12-03 16:14:35 -06:00
parent 085671c84f
commit 04c79fab5c
9 changed files with 165 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
ionic/components/button/button-clear.scss → ionic/components/button/button-clear_OLD.scss
View File

0
ionic/components/button/button-fab.scss → ionic/components/button/button-fab_OLD.scss
View File

0
ionic/components/button/button-icon.scss → ionic/components/button/button-icon_OLD.scss
View File

0
ionic/components/button/button-outline.scss → ionic/components/button/button-outline_OLD.scss
View File

0
ionic/components/button/button-size.scss → ionic/components/button/button-size_OLD.scss
View File

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

@ -1,8 +1,5 @@
@import "../../ionic.globals";
// Button Variables
// --------------------------------------------------
$button-font-size: 1.6rem !default;
$button-margin: 0.4rem 0.2rem !default;
$button-padding: 0 1em !default;
@ -18,9 +15,6 @@ $button-text-color: inverse($button-color) !default;
$button-hover-opacity: 0.8 !default;
// Default Button
// --------------------------------------------------
button,
[button] {
position: relative;
@ -29,17 +23,8 @@ button,
flex-flow: row nowrap;
align-items: center;
justify-content: center;
transition: background-color, opacity 100ms linear;
margin: $button-margin;
padding: $button-padding;
min-height: $button-height;
line-height: 1;
border: 1px solid #ccc;
border: transparent;
border-radius: $button-border-radius;
font-size: $button-font-size;
font-family: inherit;
@ -59,100 +44,8 @@ button,
cursor: pointer;
@include user-select-none();
@include appearance(none);
background: $button-color;
color: $button-text-color;
&:hover:not(.disable-hover) {
opacity: $button-hover-opacity;
text-decoration: none;
}
&.activated {
opacity: 1;
background-color: $button-color-activated;
}
// Button Types
// --------------------------------------------------
&[block] {
display: flex;
clear: both;
margin-right: 0;
margin-left: 0;
width: 100%;
&:after {
clear: both;
}
}
&[full] {
width: 100%;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
&[outline] {
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
}
&[round] {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
&[disabled] {
opacity: 0.4;
cursor: default !important;
pointer-events: none;
}
}
a[button] {
text-decoration: none;
}
[padding] > button[block]:first-child,
[padding] > [button][block]:first-child {
margin-top: 0;
}
// Default Button Color Mixin
// --------------------------------------------------
@mixin button-default($bg-color, $bg-color-activated, $text-color) {
background-color: $bg-color;
color: $text-color;
&.activated {
background-color: $bg-color-activated;
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors {
button[#{$color-name}],
[button][#{$color-name}] {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$text-color: inverse($bg-color);
@include button-default($bg-color, $bg-color-activated, $text-color);
}
}

158
ionic/components/button/button_OLD.scss Normal file
View File

@ -0,0 +1,158 @@
@import "../../ionic.globals";
// Button Variables
// --------------------------------------------------
$button-font-size: 1.6rem !default;
$button-margin: 0.4rem 0.2rem !default;
$button-padding: 0 1em !default;
$button-height: 2.8em !default;
$button-border-radius: 4px !default;
$button-round-padding: 0 2.6rem !default;
$button-round-border-radius: 64px !default;
$button-color: color(primary) !default;
$button-color-activated: color-shade($button-color) !default;
$button-text-color: inverse($button-color) !default;
$button-hover-opacity: 0.8 !default;
// Default Button
// --------------------------------------------------
button,
[button] {
position: relative;
display: inline-flex;
flex-shrink: 0;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
transition: background-color, opacity 100ms linear;
margin: $button-margin;
padding: $button-padding;
min-height: $button-height;
line-height: 1;
border: 1px solid #ccc;
border: transparent;
border-radius: $button-border-radius;
font-size: $button-font-size;
font-family: inherit;
font-variant: inherit;
font-style: inherit;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
text-transform: none;
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
cursor: pointer;
@include user-select-none();
@include appearance(none);
background: $button-color;
color: $button-text-color;
&:hover:not(.disable-hover) {
opacity: $button-hover-opacity;
text-decoration: none;
}
&.activated {
opacity: 1;
background-color: $button-color-activated;
}
// Button Types
// --------------------------------------------------
&[block] {
display: flex;
clear: both;
margin-right: 0;
margin-left: 0;
width: 100%;
&:after {
clear: both;
}
}
&[full] {
width: 100%;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
&[outline] {
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
}
&[round] {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
&[disabled] {
opacity: 0.4;
cursor: default !important;
pointer-events: none;
}
}
a[button] {
text-decoration: none;
}
[padding] > button[block]:first-child,
[padding] > [button][block]:first-child {
margin-top: 0;
}
// Default Button Color Mixin
// --------------------------------------------------
@mixin button-default($bg-color, $bg-color-activated, $text-color) {
background-color: $bg-color;
color: $text-color;
&.activated {
background-color: $bg-color-activated;
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors {
button[#{$color-name}],
[button][#{$color-name}] {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$text-color: inverse($bg-color);
@include button-default($bg-color, $bg-color-activated, $text-color);
}
}

12
ionic/ionic.core.scss
View File

@ -12,12 +12,12 @@
"components/toolbar/toolbar",
"components/action-sheet/action-sheet",
"components/badge/badge",
"components/button/button",
"components/button/button-clear",
"components/button/button-outline",
"components/button/button-size",
"components/button/button-icon",
"components/button/button-fab",
"components/button/button_OLD",
"components/button/button-clear_OLD",
"components/button/button-outline_OLD",
"components/button/button-size_OLD",
"components/button/button-icon_OLD",
"components/button/button-fab_OLD",
"components/checkbox/checkbox",
"components/icon/icon",
"components/item/item",

2
scripts/e2e/e2e.template.html
View File

@ -4,7 +4,7 @@
<title>Ionic E2E</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="../../../css/ionic.css" rel="stylesheet">
<!-- <link href="../../../css/ionic.css" rel="stylesheet"> -->
<script>
if (!console.time) {