javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +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;
}
}

19
src/config/component.js
View File

@ -42,6 +42,25 @@ export class IonicComponent {
instance.domElement.classList.add(this.componentCssName)
instance.domElement.classList.add(`${this.componentCssName}-${platformName}`)
/****** TODO: HACK!!! MAKE MORE GOOD!!! ********/
/*
Manually assigning "md" for android platform, but we need
to be able to set which "mode" to use for each platform.
ios platform == ios mode
android platform == md mode (material design mode)
everything else == core mode
Uber hack below until we come up with a pretty "mode" API
*/
if (platformName == 'android') {
instance.domElement.classList.add(`${this.componentCssName}-md`)
}
/****** TODO: HACK!!! MAKE MORE GOOD!!! ********/
for (let attrName in this.bind) {
let binding = this.bind[attrName]
let defaultValue = binding._defaultValue

10
src/ionic.scss
View File

@ -62,12 +62,10 @@
// Material Design Components
@import
"components/alert/extensions/android",
"components/button/extensions/android",
"components/list/extensions/android",
"components/item/extensions/android",
"components/tabs/extensions/android",
"components/toolbar/extensions/android";
"components/alert/extensions/material",
"components/button/extensions/material",
"components/tabs/extensions/material",
"components/toolbar/extensions/material";
// Icons