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

using material design term instead of android

Browse Source
This commit is contained in:
Adam Bradley
2015-04-10 16:05:35 -05:00
parent b011900a1b
commit adeaf4d464
12 changed files with 133 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/alert/extensions/android.scss
View File

@@ -1,41 +0,0 @@
// Android Alert
// --------------------------------------------------
$alert-android-content-margin: 24px !default;
$alert-android-background-color: #fff !default;
$alert-android-border-radius: 4px !default;
$alert-android-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
.alert-android {
.alert-container {
box-shadow: $alert-android-box-shadow;
border-radius: $alert-android-border-radius;
overflow: hidden;
}
.alert-header {
margin: $alert-android-content-margin;
font-size: 2rem;
font-weight: 400;
}
.alert-content {
position: relative;
margin: $alert-android-content-margin;
background: $alert-android-background-color;
}
.alert-actions {
min-height: 44px;
background: $alert-android-background-color;
margin: $alert-android-content-margin;
.button {
border: 0;
}
}
}

41
src/components/alert/extensions/material.scss Normal file
View File

@@ -0,0 +1,41 @@
// Material Design Alert
// --------------------------------------------------
$alert-material-content-margin: 24px !default;
$alert-material-background-color: #fff !default;
$alert-material-border-radius: 4px !default;
$alert-material-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
.alert-md {
.alert-container {
box-shadow: $alert-material-box-shadow;
border-radius: $alert-material-border-radius;
overflow: hidden;
}
.alert-header {
margin: $alert-material-content-margin;
font-size: 2rem;
font-weight: 400;
}
.alert-content {
position: relative;
margin: $alert-material-content-margin;
background: $alert-material-background-color;
}
.alert-actions {
min-height: 44px;
background: $alert-material-background-color;
margin: $alert-material-content-margin;
.button {
border: 0;
}
}
}

9
src/components/button/extensions/android.scss → src/components/button/extensions/material.scss
View File

@@ -1,5 +1,5 @@
// Material Design Button Variables
// Material Design Button
// --------------------------------------------------
$button-material-font-size: 1.4rem !default;
@@ -8,11 +8,7 @@ $button-material-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !defa
$button-material-border-radius: 3px !default;
// Material Design Button
// --------------------------------------------------
.button.button-android {
.button.button-md {
border: 0;
border-radius: $button-material-border-radius;
@@ -35,4 +31,5 @@ $button-material-border-radius: 3px !default;
&.button-small.button-icon {
font-size: $button-small-icon-size;
}
}

0
src/components/card/extensions/android.scss
View File

0
src/components/item/extensions/android.scss
View File

0
src/components/list/extensions/android.scss
View File

33
src/components/tabs/extensions/android.scss
View File

@@ -1,33 +0,0 @@
// Android Toolbar
// --------------------------------------------------
$tab-bar-android-min-height: 40px !default;
$tab-bar-android-item-padding: 4px 10px !default;
$tab-bar-android-active-border-width: 3px !default;
$tab-bar-android-active-border-color: red !default;
$tab-bar-android-text-transform: uppercase !default;
$tab-bar-android-text-font-weight: 500 !default;
.tabs-android {
.tab-bar-container {
min-height: $tab-bar-android-min-height;
}
.tab-bar-item {
padding: $tab-bar-item-padding;
text-transform: $tab-bar-android-text-transform;
font-weight: $tab-bar-android-text-font-weight;
}
.tab-bar .tab-bar-item {
border-bottom: $tab-bar-android-active-border-width solid transparent;
}
.tab-bar .tab-active {
border-bottom-color: $tab-bar-android-active-border-color;
}
}

33
src/components/tabs/extensions/material.scss Normal file
View File

@@ -0,0 +1,33 @@
// Material Design Toolbar
// --------------------------------------------------
$tab-bar-material-min-height: 40px !default;
$tab-bar-material-item-padding: 4px 10px !default;
$tab-bar-material-active-border-width: 3px !default;
$tab-bar-material-active-border-color: red !default;
$tab-bar-material-text-transform: uppercase !default;
$tab-bar-material-text-font-weight: 500 !default;
.tabs-md {
.tab-bar-container {
min-height: $tab-bar-material-min-height;
}
.tab-bar-item {
padding: $tab-bar-material-item-padding;
text-transform: $tab-bar-material-text-transform;
font-weight: $tab-bar-material-text-font-weight;
}
.tab-bar .tab-bar-item {
border-bottom: $tab-bar-material-active-border-width solid transparent;
}
.tab-bar .tab-active {
border-bottom-color: $tab-bar-material-active-border-color;
}
}

33
src/components/toolbar/extensions/android.scss
View File

@@ -1,33 +0,0 @@
// Android Toolbar
// --------------------------------------------------
$toolbar-android-height: 6.4rem !default;
$toolbar-android-background: #f7f7f8 !default;
$toolbar-android-title-font-size: 2rem !default;
$toolbar-android-button-font-size: 2rem !default;
$toolbar-android-button-text-color: #007aff !default;
.toolbar-android {
height: $toolbar-android-height;
background: $toolbar-android-background;
.toolbar-title {
font-size: $toolbar-android-title-font-size;
}
.button {
font-size: $toolbar-android-button-font-size;
color: $toolbar-android-button-text-color;
border: none;
padding: 0;
margin: 0 10px;
min-height: $toolbar-android-height;
min-width: 0;
}
}

33
src/components/toolbar/extensions/material.scss Normal file
View File

@@ -0,0 +1,33 @@
// Material Design Toolbar
// --------------------------------------------------
$toolbar-material-height: 6.4rem !default;
$toolbar-material-background: #f7f7f8 !default;
$toolbar-material-title-font-size: 2rem !default;
$toolbar-material-button-font-size: 2rem !default;
$toolbar-material-button-text-color: #007aff !default;
.toolbar-md {
height: $toolbar-material-height;
background: $toolbar-material-background;
.toolbar-title {
font-size: $toolbar-material-title-font-size;
}
.button {
font-size: $toolbar-material-button-font-size;
color: $toolbar-material-button-text-color;
border: none;
padding: 0;
margin: 0 10px;
min-height: $toolbar-material-height;
min-width: 0;
}
}