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

chore(sass): update sass to match linter config

Browse Source 
references #5797
This commit is contained in:
Brandy Carney
2016-03-10 22:41:56 -05:00
parent de6cd2f68c
commit f7b52eeee1
113 changed files with 1235 additions and 1172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,18 +8,15 @@ $button-fab-size: 56px !default;
.button-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;
overflow: hidden;
width: $button-fab-size;
min-width: 0;
height: $button-fab-size;
border-radius: 50%;
font-size: 14px;
line-height: $button-fab-size;
vertical-align: middle;
background-clip: padding-box;
ion-icon {
flex: 1;

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

@@ -5,27 +5,27 @@
.button-icon-left ion-icon {
padding-right: 0.3em;
padding-right: .3em;
font-size: 1.4em;
line-height: 0.67;
line-height: .67;
pointer-events: none;
}
.button-icon-right ion-icon {
padding-left: 0.4em;
padding-left: .4em;
font-size: 1.4em;
line-height: 0.67;
line-height: .67;
pointer-events: none;
}
.button-icon-only {
padding: 0;
min-width: 0.9em;
min-width: .9em;
ion-icon {
padding: 0 0.5em;
padding: 0 .5em;
font-size: 1.8em;
line-height: 0.67;
line-height: .67;
pointer-events: none;
}
}

36
ionic/components/button/button.ios.scss
View File

@@ -4,22 +4,22 @@
// iOS Button
// --------------------------------------------------
$button-ios-margin: 0.4rem 0.2rem !default;
$button-ios-margin: .4rem .2rem !default;
$button-ios-padding: 0 1em !default;
$button-ios-font-size: 1.6rem !default;
$button-ios-height: 2.8em !default;
$button-ios-color: map-get($colors-ios, primary) !default;
$button-ios-color-activated: color-shade($button-ios-color) !default;
$button-ios-text-color: color-inverse($button-ios-color) !default;
$button-ios-hover-opacity: 0.8 !default;
$button-ios-hover-opacity: .8 !default;
$button-ios-border-radius: 4px !default;
$button-ios-large-font-size: 2rem !default;
$button-ios-large-height: 2.8em !default;
$button-ios-large-padding: 1.0em !default;
$button-ios-large-padding: 1em !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-padding: .9em !default;
$button-ios-small-icon-font-size: 1.3em !default;
@@ -31,20 +31,20 @@ $button-ios-small-icon-font-size: 1.3em !default;
padding: $button-ios-padding;
height: $button-ios-height;
border-radius: $button-ios-border-radius;
font-size: $button-ios-font-size;
border-radius: $button-ios-border-radius;
color: $button-ios-text-color;
background-color: $button-ios-color;
&:hover:not(.disable-hover) {
opacity: $button-ios-hover-opacity;
text-decoration: none;
opacity: $button-ios-hover-opacity;
}
&.activated {
opacity: 1;
background-color: $button-ios-color-activated;
opacity: 1;
}
}
@@ -83,18 +83,18 @@ $button-ios-small-icon-font-size: 1.3em !default;
padding: 0 $button-ios-small-padding;
height: $button-ios-small-height;
font-size: $button-ios-small-font-size;
}
.button-small.button-icon-only ion-icon {
font-size: $button-ios-small-icon-font-size;
&.button-icon-only ion-icon {
font-size: $button-ios-small-icon-font-size;
}
}
// iOS Block Button
// --------------------------------------------------
.button-block {
margin-left: 0;
margin-right: 0;
margin-left: 0;
}
// iOS Full Button
@@ -103,9 +103,9 @@ $button-ios-small-icon-font-size: 1.3em !default;
.button-full {
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
border-radius: 0;
}
// iOS Outline Button
@@ -114,15 +114,15 @@ $button-ios-small-icon-font-size: 1.3em !default;
.button-outline {
border-width: 1px;
border-style: solid;
border-radius: 4px;
border-color: $button-ios-color;
color: $button-ios-color;
background-color: transparent;
border-radius: 4px;
&.activated {
opacity: 1;
color: $background-ios-color;
background-color: $button-ios-color;
opacity: 1;
}
}
@@ -159,13 +159,13 @@ $button-ios-small-icon-font-size: 1.3em !default;
background-color: transparent;
&.activated {
opacity: 0.4;
background-color: transparent;
opacity: .4;
}
&:hover:not(.disable-hover) {
opacity: 0.6;
color: $button-ios-color;
opacity: .6;
}
}
@@ -178,11 +178,11 @@ $button-ios-small-icon-font-size: 1.3em !default;
.button-clear-#{$color-name} {
$fg-color: $color-value;
border-color: transparent;
background-color: transparent;
color: $fg-color;
background-color: transparent;
&.activated {
opacity: 0.4;
opacity: .4;
}
&:hover:not(.disable-hover) {

64
ionic/components/button/button.md.scss
View File

@@ -4,34 +4,35 @@
// Material Design Button
// --------------------------------------------------
$button-md-margin: 0.4rem 0.2rem !default;
$button-md-margin: .4rem .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;
$button-md-box-shadow-active: 0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21) !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;
$button-md-box-shadow-active: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21) !default;
$button-md-border-radius: 2px !default;
$button-md-animation-curve: cubic-bezier(0.4, 0, 0.2, 1) !default;
$button-md-animation-curve: cubic-bezier(.4, 0, .2, 1) !default;
$button-md-transition-duration: 300ms !default;
$button-md-clear-hover-background-color: rgba(158, 158, 158, 0.1) !default;
$button-md-clear-active-background-color: rgba(158, 158, 158, 0.2) !default;
$button-md-clear-hover-background-color: rgba(158, 158, 158, .1) !default;
$button-md-clear-active-background-color: rgba(158, 158, 158, .2) !default;
$button-md-clear-ripple-background-color: #999 !default;
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
$button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
$button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
$button-md-color: map-get($colors-md, primary) !default;
$button-md-color-activated: color-shade($button-md-color) !default;
$button-md-text-color: color-inverse($button-md-color) !default;
$button-md-hover-opacity: 0.8 !default;
$button-md-hover-opacity: .8 !default;
$button-md-large-font-size: 2rem !default;
$button-md-large-height: 2.8em !default;
$button-md-large-padding: 1.0em !default;
$button-md-large-padding: 1em !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-padding: .9em !default;
$button-md-small-icon-font-size: 1.4em !default;
@@ -44,15 +45,14 @@ $button-md-small-icon-font-size: 1.4em !default;
height: $button-md-height;
border-radius: $button-md-border-radius;
font-weight: 500;
font-size: $button-md-font-size;
font-weight: 500;
text-transform: uppercase;
color: $button-md-text-color;
background-color: $button-md-color;
box-shadow: $button-md-box-shadow;
text-transform: uppercase;
transition: box-shadow $button-md-transition-duration $button-md-animation-curve,
background-color $button-md-transition-duration $button-md-animation-curve,
color $button-md-transition-duration $button-md-animation-curve;
@@ -62,8 +62,8 @@ $button-md-small-icon-font-size: 1.4em !default;
}
&.activated {
box-shadow: $button-md-box-shadow-active;
background-color: $button-md-color-activated;
box-shadow: $button-md-box-shadow-active;
}
ion-button-effect {
@@ -90,8 +90,8 @@ $button-md-small-icon-font-size: 1.4em !default;
}
&.activated {
opacity: 1;
background-color: $background-color-activated;
opacity: 1;
}
ion-button-effect {
@@ -115,18 +115,18 @@ $button-md-small-icon-font-size: 1.4em !default;
padding: 0 $button-md-small-padding;
height: $button-md-small-height;
font-size: $button-md-small-font-size;
}
.button-small.button-icon-only ion-icon {
font-size: $button-md-small-icon-font-size;
&.button-icon-only ion-icon {
font-size: $button-md-small-icon-font-size;
}
}
// Material Design Block Button
// --------------------------------------------------
.button-block {
margin-left: 0;
margin-right: 0;
margin-left: 0;
}
// Material Design Full Button
@@ -135,9 +135,9 @@ $button-md-small-icon-font-size: 1.4em !default;
.button-full {
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
border-radius: 0;
}
// Material Design Outline Button
@@ -147,8 +147,8 @@ $button-md-small-icon-font-size: 1.4em !default;
border-width: 1px;
border-style: solid;
border-color: $button-md-color;
background-color: transparent;
color: $button-md-color;
background-color: transparent;
box-shadow: none;
&:hover:not(.disable-hover) {
@@ -156,9 +156,9 @@ $button-md-small-icon-font-size: 1.4em !default;
}
&.activated {
opacity: 1;
box-shadow: none;
background-color: transparent;
box-shadow: none;
opacity: 1;
}
ion-button-effect {
@@ -175,8 +175,8 @@ $button-md-small-icon-font-size: 1.4em !default;
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
border-color: $fg-color;
background-color: transparent;
color: $fg-color;
background-color: transparent;
&:hover:not(.disable-hover) {
background-color: $button-md-clear-hover-background-color;
@@ -199,10 +199,10 @@ $button-md-small-icon-font-size: 1.4em !default;
.button-clear {
border-color: transparent;
opacity: 1;
box-shadow: none;
background-color: transparent;
color: $button-md-color;
background-color: transparent;
box-shadow: none;
opacity: 1;
&.activated {
background-color: $button-md-clear-active-background-color;
@@ -214,7 +214,7 @@ $button-md-small-icon-font-size: 1.4em !default;
}
ion-button-effect {
background-color: #999;
background-color: $button-md-clear-ripple-background-color;
}
}
@@ -227,8 +227,8 @@ $button-md-small-icon-font-size: 1.4em !default;
.button-clear-#{$color-name} {
$fg-color: $color-value;
border-color: transparent;
background-color: transparent;
color: $fg-color;
background-color: transparent;
&.activated {
background-color: $button-md-clear-active-background-color;
@@ -284,10 +284,10 @@ ion-button-effect {
border-radius: 50%;
background-color: $ripple-background-color;
opacity: 0.2;
opacity: .2;
pointer-events: none;
transition-timing-function: ease-in-out;
pointer-events: none;
}

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

@@ -8,44 +8,45 @@ $button-round-border-radius: 64px !default;
.button {
position: relative;
display: inline-block;
transition: background-color, opacity 100ms linear;
z-index: 0;
@include user-select-none();
@include appearance(none);
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
z-index: 0;
display: inline-block;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
text-transform: none;
font-kerning: none;
white-space: nowrap;
cursor: pointer;
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);
transition: background-color, opacity 100ms linear;
font-kerning: none;
}
.button-inner {
display: flex;
flex-shrink: 0;
flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
a.button, a[button] {
a.button,
a[button] {
text-decoration: none;
}
.button[disabled] {
opacity: 0.4;
cursor: default !important;
cursor: default;
opacity: .4;
pointer-events: none;
}
@@ -58,7 +59,7 @@ a.button, a[button] {
clear: both;
width: 100%;
&:after {
&::after {
clear: both;
}
}
@@ -70,6 +71,14 @@ a.button, a[button] {
.button-full {
display: block;
width: 100%;
// Full Outline Button
// --------------------------------------------------
&.button-outline {
border-right-width: 0;
border-left-width: 0;
border-radius: 0;
}
}
@@ -80,12 +89,3 @@ a.button, a[button] {
padding: $button-round-padding;
border-radius: $button-round-border-radius;
}
// Full Outline Button
// --------------------------------------------------
.button-full.button-outline {
border-left-width: 0;
border-right-width: 0;
border-radius: 0;
}

28
ionic/components/button/button.wp.scss
View File

@@ -4,7 +4,7 @@
// Windows Button
// --------------------------------------------------
$button-wp-margin: 0.4rem 0.2rem !default;
$button-wp-margin: .4rem .2rem !default;
$button-wp-padding: 0 1.1em !default;
$button-wp-font-size: 1.4rem !default;
$button-wp-height: 3.6rem !default;
@@ -18,15 +18,15 @@ $button-wp-background-color-activated: color-shade($button-wp-bac
$button-wp-text-color: color-inverse($button-wp-background-color) !default;
// Clear button
$button-wp-clear-background-color-hover: rgba(158, 158, 158, 0.1) !default;
$button-wp-clear-background-color-activated: rgba(158, 158, 158, 0.2) !default;
$button-wp-clear-background-color-hover: rgba(158, 158, 158, .1) !default;
$button-wp-clear-background-color-activated: rgba(158, 158, 158, .2) !default;
$button-wp-clear-background-color: transparent !default;
$button-wp-clear-text-color: $button-wp-background-color !default;
// Outline button
$button-wp-outline-background-color: transparent !default;
$button-wp-outline-background-color-activated: $button-wp-background-color !default;
$button-wp-outline-background-color-opacity: 0.16 !default;
$button-wp-outline-background-color-opacity: .16 !default;
$button-wp-outline-border-width: 1px !default;
$button-wp-outline-border-color: $button-wp-background-color !default;
$button-wp-outline-text-color: $button-wp-background-color !default;
@@ -34,12 +34,12 @@ $button-wp-outline-text-color: $button-wp-background-colo
// Large button
$button-wp-large-font-size: 2rem !default;
$button-wp-large-height: 2.8em !default;
$button-wp-large-padding: 0 1.0em !default;
$button-wp-large-padding: 0 1em !default;
// Small button
$button-wp-small-font-size: 1.3rem !default;
$button-wp-small-height: 2.1em !default;
$button-wp-small-padding: 0 0.9em !default;
$button-wp-small-padding: 0 .9em !default;
$button-wp-small-icon-font-size: 1.4em !default;
// FAB button
@@ -52,8 +52,8 @@ $button-wp-fab-border-radius: 50% !default;
margin: $button-wp-margin;
padding: $button-wp-padding;
height: $button-wp-height;
border-radius: $button-wp-border-radius;
border: $button-wp-border-width solid $button-wp-border-color;
border-radius: $button-wp-border-radius;
font-size: $button-wp-font-size;
@@ -110,18 +110,18 @@ $button-wp-fab-border-radius: 50% !default;
padding: $button-wp-small-padding;
height: $button-wp-small-height;
font-size: $button-wp-small-font-size;
}
.button-small.button-icon-only ion-icon {
font-size: $button-wp-small-icon-font-size;
&.button-icon-only ion-icon {
font-size: $button-wp-small-icon-font-size;
}
}
// Windows Block Button
// --------------------------------------------------
.button-block {
margin-left: 0;
margin-right: 0;
margin-left: 0;
}
// Windows Full Button
@@ -130,9 +130,9 @@ $button-wp-fab-border-radius: 50% !default;
.button-full {
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
border-radius: 0;
}
// Windows Outline Button
@@ -142,8 +142,8 @@ $button-wp-fab-border-radius: 50% !default;
border-width: $button-wp-outline-border-width;
border-style: solid;
border-color: $button-wp-outline-border-color;
background-color: $button-wp-outline-background-color;
color: $button-wp-outline-text-color;
background-color: $button-wp-outline-background-color;
&:hover:not(.disable-hover) {
background-color: $button-wp-clear-background-color-hover;
@@ -182,8 +182,8 @@ $button-wp-fab-border-radius: 50% !default;
// --------------------------------------------------
.button-clear {
background-color: $button-wp-clear-background-color;
color: $button-wp-clear-text-color;
background-color: $button-wp-clear-background-color;
&.activated {
background-color: $button-wp-clear-background-color-activated;