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

Merge remote-tracking branch 'origin/css-refactor' into css-refactor

Browse Source 
# Conflicts:
#	ionic/components/button/modes/ios.scss
This commit is contained in:
Adam Bradley
2015-12-07 15:53:23 -06:00
parent e7437b4ab2 c6d5692f72
commit bd7859dec7
7 changed files with 131 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,12 +62,7 @@ a.button {
// --------------------------------------------------
.button-full {
margin-right: 0;
margin-left: 0;
width: 100%;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
@@ -79,27 +74,10 @@ a.button {
border-radius: $button-round-border-radius;
}
// Full Outline Button
// --------------------------------------------------
// TODO
// button should have classes:
// button, button-primary, button-secondary, etc.
// button holds all styling with default primary color(will this affect outline/clear?) and
// the other classes change the color
//
// button-clear should have classes:
// button-clear, button-clear-primary, button-clear-secondary, etc.
// button-clear holds all clear styling with default primary color and
// the other classes change the color
//
// button-outline should have classes:
// button-outline, button-outline-primary, button-outline-secondary, etc.
// button-outline holds all outline styling with default primary color and
// the other classes change the color
//
// button-block should stand alone
// button-full should stand alone
// button-round should stand alone
// button-disabled should stand alone(?)
// button-sizes should stand alone (button-small, button-large, etc)
// button-fab errrrr
.button-full.button-outline {
border-left-width: 0;
border-right-width: 0;
}

30
ionic/components/button/modes/ios.scss
View File

@@ -20,6 +20,7 @@ $button-ios-large-padding: 1.0em !default;
$button-ios-small-font-size: 1.3rem !default;
$button-ios-small-height: 2.1em !default;
$button-ios-small-padding: 0.9em !default;
$button-ios-small-icon-font-size: 1.3em !default;
// iOS Default Button
@@ -84,6 +85,9 @@ $button-ios-small-padding: 0.9em !default;
font-size: $button-ios-small-font-size;
}
.button-small.button-icon-only icon {
font-size: $button-ios-small-icon-font-size;
}
// iOS Block Button
// --------------------------------------------------
@@ -91,6 +95,19 @@ $button-ios-small-padding: 0.9em !default;
.button-block {
// This fixes an issue with flexbox and button on iOS Safari. See #225
display: block;
line-height: 2.8em;
}
// iOS Full Button
// --------------------------------------------------
.button-full {
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-left: none;
border-right: none;
}
@@ -141,6 +158,11 @@ $button-ios-small-padding: 0.9em !default;
color: color-shade($button-ios-color);
background-color: transparent;
&.activated {
opacity: 0.4;
background-color: transparent;
}
&:hover:not(.disable-hover) {
opacity: 0.6;
color: color-shade($button-ios-color);
@@ -170,6 +192,14 @@ $button-ios-small-padding: 0.9em !default;
}
// iOS Round Button
// --------------------------------------------------
.button-round {
padding: $button-round-padding;
border-radius: $button-round-border-radius;
}
// Generate iOS Button Colors
// --------------------------------------------------

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

@@ -4,8 +4,8 @@
// Material Design Button
// --------------------------------------------------
$button-md-margin: 0.4rem 0.2rem !default;
$button-md-padding: 0 1.1em !default;
$button-md-margin: 0.4rem 0.2rem !default;
$button-md-padding: 0 1.1em !default;
$button-md-font-size: 1.4rem !default;
$button-md-height: 3.6rem !default;
$button-md-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;
@@ -32,6 +32,7 @@ $button-md-large-padding: 1.0em !default;
$button-md-small-font-size: 1.3rem !default;
$button-md-small-height: 2.1em !default;
$button-md-small-padding: 0.9em !default;
$button-md-small-icon-font-size: 1.4em !default;
// Material Design Default Button
@@ -40,11 +41,7 @@ $button-md-small-padding: 0.9em !default;
.button {
margin: $button-md-margin;
padding: $button-md-padding;
min-height: $button-md-height;
font-size: $button-md-font-size;
border: 0;
border-radius: $button-md-border-radius;
font-weight: 500;
@@ -66,6 +63,7 @@ $button-md-small-padding: 0.9em !default;
&.activated {
box-shadow: $button-md-box-shadow-active;
background-color: $button-md-color-activated;
}
}
@@ -84,6 +82,7 @@ $button-md-small-padding: 0.9em !default;
&.activated {
opacity: 1;
background-color: $bg-color-activated;
}
}
@@ -105,12 +104,20 @@ $button-md-small-padding: 0.9em !default;
font-size: $button-md-small-font-size;
}
.button-small.button-icon-only icon {
font-size: $button-md-small-icon-font-size;
}
// Material Design Full Button
// --------------------------------------------------
.button-full {
border-radius: 0;
margin-right: 0;
margin-left: 0;
border-right-width: 0;
border-left-width: 0;
}
@@ -118,7 +125,9 @@ $button-md-small-padding: 0.9em !default;
// --------------------------------------------------
.button-outline {
border: 1px solid $button-md-color;
border-width: 1px;
border-style: solid;
border-color: $button-md-color;
background-color: transparent;
color: $button-md-color;
box-shadow: none;
@@ -127,6 +136,7 @@ $button-md-small-padding: 0.9em !default;
opacity: 1;
color: $background-md-color;
background-color: $button-md-color;
box-shadow: none;
}
md-ripple {
@@ -166,8 +176,12 @@ $button-md-small-padding: 0.9em !default;
color: color-shade($button-md-color);
&.activated {
opacity: 0.4;
background-color: $button-md-clear-active-background-color;
box-shadow: none;
}
&:hover:not(.disable-hover) {
color: color-shade($button-md-color);
}
}
@@ -183,9 +197,10 @@ $button-md-small-padding: 0.9em !default;
background-color: transparent;
color: $fg-color;
&.activated {
opacity: 0.4;
background-color: transparent;
background-color: $button-md-clear-active-background-color;
box-shadow: none;
}
&:hover:not(.disable-hover) {

30
ionic/components/radio/modes/ios.scss
View File

@@ -4,14 +4,24 @@
// iOS Radio
// --------------------------------------------------
$radio-ios-color-on: map-get($colors-ios, primary) !default;
$radio-ios-color-on: map-get($colors-ios, primary) !default;
$radio-ios-icon-width: 16px !default;
$radio-ios-icon-height: 21px !default;
$radio-ios-icon-border-width: 2px !default;
$radio-ios-icon-border-style: solid !default;
ion-radio {
&[aria-checked=true] radio-icon:after {
&[aria-checked=true] {
color: $radio-ios-color-on;
}
&[aria-checked=true] .radio-icon:after {
position: absolute;
border: 2px solid $radio-ios-color-on;
border-width: $radio-ios-icon-border-width;
border-style: $radio-ios-icon-border-style;
border-color: $radio-ios-color-on;
top: 3px;
left: 7px;
width: 4px;
@@ -22,26 +32,22 @@ ion-radio {
transform: rotate(45deg);
}
&[aria-checked=true] {
color: $radio-ios-color-on;
}
&.item.activated {
background-color: $list-ios-background-color;
}
}
media-radio {
.radio-media {
display: block;
margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
}
radio-icon {
.radio-icon {
position: relative;
display: block;
width: 16px;
height: 21px;
width: $radio-ios-icon-width;
height: $radio-ios-icon-height;
}
@@ -52,7 +58,7 @@ radio-icon {
ion-radio[#{$color-name}] {
&[aria-checked=true] radio-icon:after {
&[aria-checked=true] .radio-icon:after {
border-color: $color-value;
}

81
ionic/components/radio/modes/md.scss
View File

@@ -5,57 +5,62 @@
// --------------------------------------------------
$radio-md-color-on: map-get($colors-md, primary) !default;
$radio-md-icon-size: 16px !default;
$radio-md-border-width: 2px !default;
$radio-md-color-off: darken($list-md-border-color, 40%) !default;
$radio-md-icon-width: 16px !default;
$radio-md-icon-height: 16px !default;
$radio-md-icon-border-width: 2px !default;
$radio-md-icon-border-style: solid !default;
$radio-md-icon-border-radius: 50% !default;
$radio-md-transition-duration: 280ms !default;
$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
ion-radio {
radio-icon {
position: relative;
top: 0;
left: 0;
display: block;
width: $radio-md-icon-size;
height: $radio-md-icon-size;
margin: 0;
border: $radio-md-border-width solid $radio-md-color-off;
border-radius: 50%;
&[aria-checked=true] {
color: $radio-md-color-on;
}
&[aria-checked=true] radio-icon {
&[aria-checked=true] .radio-icon {
border-color: $radio-md-color-on;
&:after {
transform: scale3d(1, 1, 1);
}
}
radio-icon:after {
}
.radio-icon {
position: relative;
top: 0;
left: 0;
display: block;
width: $radio-md-icon-width;
height: $radio-md-icon-height;
margin: 0;
border-width: $radio-md-icon-border-width;
border-style: $radio-md-icon-border-style;
border-color: $radio-md-color-off;
border-radius: $radio-md-icon-border-radius;
&:after {
position: absolute;
top: $radio-md-border-width;
left: $radio-md-border-width;
width: $radio-md-icon-size / 2;
height: $radio-md-icon-size / 2;
background: $radio-md-color-on;
top: $radio-md-icon-border-width;
left: $radio-md-icon-border-width;
width: $radio-md-icon-width / 2;
height: $radio-md-icon-height / 2;
background-color: $radio-md-color-on;
border-radius: 50%;
content: '';
transition: transform $radio-md-transition-duration $radio-md-transition-easing;
transform: scale3d(0, 0, 0);
}
&[aria-checked=true] radio-icon:after {
transform: scale3d(1, 1, 1);
}
&[aria-checked=true] {
color: $radio-md-color-on;
}
}
media-radio {
.radio-media {
display: block;
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
}
@@ -68,18 +73,18 @@ media-radio {
ion-radio[#{$color-name}] {
&[aria-checked=true] radio-icon {
border-color: $color-value;
}
&[aria-checked=true] radio-icon:after {
background: $color-value;
}
&[aria-checked=true] {
color: $color-value;
}
&[aria-checked=true] .radio-icon {
border-color: $color-value;
&:after {
background-color: $color-value;
}
}
}
}

8
ionic/components/radio/radio.scss
View File

@@ -3,15 +3,17 @@
// Radio
// --------------------------------------------------
$radio-disabled-opacity: 0.5 !default;
$radio-disabled-text-color: $subdued-text-color !default;
ion-radio {
display: block;
cursor: pointer;
@include user-select-none();
}
ion-radio[aria-disabled=true] {
opacity: 0.5;
color: $subdued-text-color;
opacity: $radio-disabled-opacity;
color: $radio-disabled-text-color;
pointer-events: none;
}

8
ionic/components/radio/radio.ts
View File

@@ -162,7 +162,7 @@ export class RadioGroup extends Ion {
* Radio Label
* </ion-radio>
* ```
*
*
* @see {@link /docs/v2/components#radio Radio Component Docs}
*/
@Component({
@@ -189,9 +189,9 @@ export class RadioGroup extends Ion {
'<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' +
'</ion-item-content>' +
'<media-radio>' +
'<radio-icon></radio-icon>' +
'</media-radio>' +
'<div class="radio-media">' +
'<div class="radio-icon"></div>' +
'</div>' +
'</div>'
})
export class RadioButton extends Ion {