mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
refactor(): move core component imports to mode component files
This commit is contained in:
Adam Bradley
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../action-sheet";
|
||||
|
||||
// iOS Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../action-sheet";
|
||||
|
||||
// Material Design Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,13 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../button";
|
||||
@import "../button-clear";
|
||||
@import "../button-fab";
|
||||
@import "../button-icon";
|
||||
@import "../button-outline";
|
||||
@import "../button-size";
|
||||
|
||||
// iOS Button (largely the core button styles)
|
||||
// --------------------------------------------------
|
||||
|
||||
button {
|
||||
&[block] {
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../button";
|
||||
@import "../button-clear";
|
||||
@import "../button-fab";
|
||||
@import "../button-icon";
|
||||
@import "../button-outline";
|
||||
@import "../button-size";
|
||||
|
||||
// Material Design Button
|
||||
// --------------------------------------------------
|
||||
@ -19,6 +25,7 @@ $button-md-clear-active-background-color: rgba(158, 158, 158, 0.2) !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,
|
||||
[button] {
|
||||
border-radius: $button-md-border-radius;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../card";
|
||||
|
||||
// iOS Card
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../card";
|
||||
|
||||
// Material Design Card
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../checkbox";
|
||||
|
||||
// iOS Checkbox Structure
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../checkbox";
|
||||
|
||||
// Material Design Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../icon";
|
||||
|
||||
// iOS Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../item";
|
||||
|
||||
// iOS Item
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../item";
|
||||
|
||||
// Material Design Item
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../list";
|
||||
|
||||
// iOS List
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../list";
|
||||
|
||||
// Material Design List
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
@import "../../ionic.globals";
|
||||
|
||||
// Menu Reveal
|
||||
// --------------------------------------------------
|
||||
// The content slides over to reveal the menu underneath.
|
||||
// The menu itself, which is under the content, does not move.
|
||||
|
||||
ion-menu[type=reveal].show-menu {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.menu-content-reveal {
|
||||
box-shadow: $menu-shadow;
|
||||
}
|
||||
|
||||
.menu-content-push {
|
||||
box-shadow: $menu-shadow;
|
||||
}
|
||||
|
||||
|
||||
// Menu Overlay
|
||||
// --------------------------------------------------
|
||||
// The menu slides over the content. The content
|
||||
// itself, which is under the menu, does not move.
|
||||
|
||||
ion-menu[type=overlay] {
|
||||
z-index: $z-index-menu-overlay;
|
||||
box-shadow: $menu-shadow;
|
||||
left: -8px; // make up for the box-shadow hanging over on the left
|
||||
|
||||
backdrop {
|
||||
display: block;
|
||||
transform: translate3d(-9999px, 0px, 0px);
|
||||
opacity: 0.01;
|
||||
left: -3000px;
|
||||
width: 6000px;
|
||||
|
||||
&.show-backdrop {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-menu[type=overlay][side=right] {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
ion-menu[type=push][side=right] {
|
||||
left: 0px;
|
||||
}
|
||||
@ -57,3 +57,53 @@ ion-menu backdrop {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Menu Reveal
|
||||
// --------------------------------------------------
|
||||
// The content slides over to reveal the menu underneath.
|
||||
// The menu itself, which is under the content, does not move.
|
||||
|
||||
ion-menu[type=reveal].show-menu {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.menu-content-reveal {
|
||||
box-shadow: $menu-shadow;
|
||||
}
|
||||
|
||||
.menu-content-push {
|
||||
box-shadow: $menu-shadow;
|
||||
}
|
||||
|
||||
|
||||
// Menu Overlay
|
||||
// --------------------------------------------------
|
||||
// The menu slides over the content. The content
|
||||
// itself, which is under the menu, does not move.
|
||||
|
||||
ion-menu[type=overlay] {
|
||||
z-index: $z-index-menu-overlay;
|
||||
box-shadow: $menu-shadow;
|
||||
left: -8px; // make up for the box-shadow hanging over on the left
|
||||
|
||||
backdrop {
|
||||
display: block;
|
||||
transform: translate3d(-9999px, 0px, 0px);
|
||||
opacity: 0.01;
|
||||
left: -3000px;
|
||||
width: 6000px;
|
||||
|
||||
&.show-backdrop {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-menu[type=overlay][side=right] {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
ion-menu[type=push][side=right] {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
@import "../../../ionic.globals";
|
||||
|
||||
// iOS Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$navbar-ios-height: 4.4rem !default;
|
||||
|
||||
|
||||
ion-navbar-section {
|
||||
min-height: $navbar-ios-height;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
@import "../../../ionic.globals";
|
||||
|
||||
// Material Design Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$navbar-md-height: 5.6rem !default;
|
||||
|
||||
|
||||
ion-navbar-section {
|
||||
min-height: $navbar-md-height;
|
||||
}
|
||||
|
||||
.toolbar .back-button {
|
||||
margin: 0 0 0 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toolbar .back-button-icon {
|
||||
margin: 0;
|
||||
min-width: 44px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
@import "../../ionic.globals";
|
||||
|
||||
// Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
ion-navbar.toolbar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
order: map-get($toolbar-order, backButton);
|
||||
|
||||
display: none;
|
||||
&.show-back-button {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.back-button-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../popup";
|
||||
|
||||
// iOS Popups
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../popup";
|
||||
|
||||
// Material Design Popups
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../radio";
|
||||
|
||||
// iOS Radio
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../radio";
|
||||
|
||||
// Material Design Radio
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../searchbar";
|
||||
|
||||
// iOS Search Bar
|
||||
// iOS Searchbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$searchbar-ios-padding-top-bottom: 0 !default;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../searchbar";
|
||||
|
||||
// Material Design Search Bar
|
||||
// Material Design Searchbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$searchbar-md-padding: 8px !default;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../segment";
|
||||
|
||||
// iOS Segment
|
||||
// --------------------------------------------------
|
||||
@ -8,6 +9,7 @@ $segment-button-ios-min-height: 3.0rem !default;
|
||||
$segment-button-ios-line-height: 3.0rem !default;
|
||||
$segment-button-ios-bg-color: transparent !default;
|
||||
$segment-button-ios-font-size: 1.3rem !default;
|
||||
$segment-button-ios-border-radius: 4px !default;
|
||||
|
||||
$segment-button-ios-bg-color-activated: color(primary) !default;
|
||||
$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default;
|
||||
@ -49,17 +51,17 @@ ion-segment {
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-radius: $button-border-radius 0px 0px $button-border-radius;
|
||||
border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-left-width: 0px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-left-width: 0px;
|
||||
border-radius: 0px $button-border-radius $button-border-radius 0px;
|
||||
border-left-width: 0;
|
||||
border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../segment";
|
||||
|
||||
// iOS Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../switch";
|
||||
|
||||
// iOS Switch
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../switch";
|
||||
|
||||
// Material Design Switch
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../tabs";
|
||||
|
||||
// iOS Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../tabs";
|
||||
|
||||
// Material Design Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../label";
|
||||
@import "../text-input";
|
||||
|
||||
// iOS Text Input
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../label";
|
||||
@import "../text-input";
|
||||
|
||||
// Material Design Text Input
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -109,3 +109,18 @@ ion-nav-items[secondary] {
|
||||
&.hairlines .toolbar toolbar-background {
|
||||
border-bottom-width: 0.55px;
|
||||
}
|
||||
|
||||
|
||||
// iOS Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$navbar-ios-height: 4.4rem !default;
|
||||
|
||||
|
||||
ion-navbar-section {
|
||||
min-height: $navbar-ios-height;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
@ -62,3 +62,27 @@ ion-title {
|
||||
ion-nav-items[primary] button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$navbar-md-height: 5.6rem !default;
|
||||
|
||||
|
||||
ion-navbar-section {
|
||||
min-height: $navbar-md-height;
|
||||
}
|
||||
|
||||
.toolbar .back-button {
|
||||
margin: 0 0 0 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toolbar .back-button-icon {
|
||||
margin: 0;
|
||||
min-width: 44px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -130,6 +130,28 @@ ion-nav-items,
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-navbar.toolbar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
order: map-get($toolbar-order, backButton);
|
||||
|
||||
display: none;
|
||||
&.show-back-button {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.back-button-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Toolbar Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -9,39 +9,12 @@
|
||||
|
||||
// Core Components
|
||||
@import
|
||||
"components/toolbar/toolbar",
|
||||
"components/action-sheet/action-sheet",
|
||||
"components/badge/badge",
|
||||
"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",
|
||||
"components/item/item-media",
|
||||
"components/item/item-sliding",
|
||||
"components/grid/grid",
|
||||
"components/text-input/text-input",
|
||||
"components/text-input/label",
|
||||
"components/list/list",
|
||||
"components/card/card",
|
||||
"components/icon/icon",
|
||||
"components/menu/menu",
|
||||
"components/menu/menu-types",
|
||||
"components/modal/modal",
|
||||
"components/navbar/navbar",
|
||||
"components/popup/popup",
|
||||
"components/slides/slides",
|
||||
"components/radio/radio",
|
||||
"components/scroll/scroll",
|
||||
"components/scroll/pull-to-refresh",
|
||||
"components/scroll/scroll",
|
||||
"components/searchbar/searchbar",
|
||||
"components/segment/segment",
|
||||
"components/switch/switch",
|
||||
"components/tabs/tabs";
|
||||
"components/slides/slides";
|
||||
|
||||
|
||||
// Ionicons
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
/*! Ionic: iOS */
|
||||
|
||||
|
||||
// iOS Components
|
||||
@import
|
||||
"components/app/modes/ios",
|
||||
"components/button/modes/ios",
|
||||
"components/icon/modes/ios",
|
||||
"components/item/modes/ios",
|
||||
"components/toolbar/modes/ios",
|
||||
"components/card/modes/ios",
|
||||
"components/content/modes/ios",
|
||||
"components/list/modes/ios",
|
||||
"components/text-input/modes/ios",
|
||||
"components/navbar/modes/ios",
|
||||
"components/popup/modes/ios",
|
||||
"components/checkbox/modes/ios",
|
||||
"components/radio/modes/ios",
|
||||
"components/searchbar/modes/ios",
|
||||
"components/segment/modes/ios",
|
||||
"components/switch/modes/ios",
|
||||
"components/tabs/modes/ios",
|
||||
"platform/cordova-ios";
|
||||
@ -8,4 +8,5 @@
|
||||
|
||||
// Material Design Components
|
||||
@import
|
||||
"components/action-sheet/modes/md";
|
||||
"components/action-sheet/modes/md",
|
||||
"components/tap-click/ripple";
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
/*! Ionic: Material Design */
|
||||
|
||||
|
||||
// Material Design Components
|
||||
@import
|
||||
"components/app/modes/md",
|
||||
"components/toolbar/modes/md",
|
||||
"components/button/modes/md",
|
||||
"components/content/modes/md",
|
||||
"components/item/modes/md",
|
||||
"components/list/modes/md",
|
||||
"components/card/modes/md",
|
||||
"components/checkbox/modes/md",
|
||||
"components/text-input/modes/md",
|
||||
"components/navbar/modes/md",
|
||||
"components/popup/modes/md",
|
||||
"components/radio/modes/md",
|
||||
"components/searchbar/modes/md",
|
||||
"components/segment/modes/md",
|
||||
"components/switch/modes/md",
|
||||
"components/tabs/modes/md",
|
||||
"components/tap-click/ripple";
|
||||
@ -3,25 +3,3 @@
|
||||
|
||||
// Core Components
|
||||
@import "ionic.core";
|
||||
|
||||
|
||||
// iOS Components
|
||||
.ios {
|
||||
@import "ionic.ios_OLD";
|
||||
}
|
||||
|
||||
|
||||
// Material Design Components
|
||||
.md {
|
||||
@import "ionic.md_OLD";
|
||||
}
|
||||
|
||||
|
||||
// Roboto Font
|
||||
$roboto: true !default;
|
||||
@if ($roboto) {
|
||||
@import "fonts/roboto";
|
||||
.md {
|
||||
font-family: "Roboto", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user