javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(css): update theme imports

Browse Source
This commit is contained in:
Brandy Carney
2016-09-13 16:57:27 -05:00
committed by Adam Bradley
parent 750cde38e2
commit 16df3a4aab
38 changed files with 262 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/action-sheet/action-sheet.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Action Sheet
// --------------------------------------------------

10
src/components/alert/alert.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Alerts
// --------------------------------------------------
@ -22,10 +22,10 @@ ion-alert {
align-items: center;
justify-content: center;
}
input {
ion-alert input {
width: 100%;
}
}
.alert-wrapper {
@ -71,11 +71,11 @@ ion-alert {
display: flex;
flex-direction: row;
}
&.vertical {
.alert-button-group-vertical {
flex-direction: column;
flex-wrap: nowrap;
}
}
.alert-button {

2
src/components/backdrop/backdrop.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Backdrop
// --------------------------------------------------

10
src/components/badge/badge.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Badge
// --------------------------------------------------
@ -24,8 +24,8 @@ ion-badge {
text-align: center;
white-space: nowrap;
vertical-align: baseline;
&:empty {
display: none;
}
}
ion-badge:empty {
display: none;
}

25
src/components/button/button-fab.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Floating Action Buttons
// --------------------------------------------------
@ -11,15 +11,18 @@ $button-fab-size: 56px !default;
position: absolute;
overflow: hidden;
line-height: $button-fab-size;
vertical-align: middle;
background-clip: padding-box;
}
.button-fab.button {
width: $button-fab-size;
min-width: 0;
height: $button-fab-size;
font-size: 14px;
line-height: $button-fab-size;
vertical-align: middle;
background-clip: padding-box;
}
.button-fab ion-icon {
@ -28,28 +31,28 @@ $button-fab-size: 56px !default;
font-size: 2.8rem;
}
[fab-center] {
.button-fab[fab-center] {
left: 50%;
margin-left: -$button-fab-size / 2;
}
[fab-top] {
.button-fab[fab-top] {
top: 16px;
}
[fab-right] {
.button-fab[fab-right] {
right: 16px;
}
[fab-bottom] {
.button-fab[fab-bottom] {
bottom: 16px;
}
[fab-left] {
.button-fab[fab-left] {
left: 16px;
}
[fab-fixed] {
.button-fab[fab-fixed] {
position: fixed;
}

4
src/components/button/button-icon.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Button Icons
// --------------------------------------------------
@ -23,7 +23,7 @@
padding-left: .4em;
}
[icon-only] {
.button[icon-only] {
padding: 0;
min-width: .9em;

8
src/components/button/button.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Buttons
// --------------------------------------------------
@ -11,7 +11,6 @@ $button-round-border-radius: 64px !default;
.button {
@include user-select-none();
@include appearance(none);
position: relative;
@ -31,6 +30,7 @@ $button-round-border-radius: 64px !default;
transition: background-color, opacity 100ms linear;
font-kerning: none;
user-select: none;
}
.button-inner {
@ -68,10 +68,10 @@ button[disabled],
clear: both;
width: 100%;
}
&::after {
.button-block::after {
clear: both;
}
}

2
src/components/card/card.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Card
// --------------------------------------------------

19
src/components/chip/chip.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Chip
// --------------------------------------------------
@ -37,34 +37,37 @@ ion-chip {
vertical-align: middle;
box-sizing: border-box;
}
.button {
ion-chip .button {
margin: $chip-button-margin;
width: $chip-button-size;
height: $chip-button-size;
border-radius: $chip-button-border-radius;
}
}
ion-icon {
ion-chip ion-icon {
width: $chip-icon-size;
height: $chip-icon-size;
border-radius: $chip-icon-border-radius;
font-size: $chip-icon-font-size;
line-height: $chip-icon-size;
}
}
ion-avatar {
ion-chip ion-avatar {
width: $chip-avatar-size;
min-width: $chip-avatar-size;
height: $chip-avatar-size;
min-height: $chip-avatar-size;
border-radius: $chip-avatar-border-radius;
}
img {
ion-chip ion-avatar img {
display: block;
width: 100%;
@ -73,6 +76,4 @@ ion-chip {
max-height: 100%;
border-radius: $chip-avatar-border-radius;
}
}
}

87
src/components/content/content.scss
View File

@ -1,51 +1,104 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Content
// --------------------------------------------------
ion-content {
position: relative;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.ion-page > ion-content {
position: absolute;
}
a {
color: $link-color;
}
// Scrollable Content
// --------------------------------------------------
.scroll-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-scroll-content;
display: block;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
ion-content.js-scroll > .scroll-content {
position: relative;
min-height: 100%;
overflow-x: initial;
overflow-y: initial;
-webkit-overflow-scrolling: auto;
will-change: initial;
}
.disable-scroll .ion-page .scroll-content {
overflow-y: hidden;
overflow-x: hidden;
}
// Content Padding
// --------------------------------------------------
[no-padding],
[no-padding] scroll-content {
[no-padding] .scroll-content {
padding: 0;
}
@mixin content-padding($content-padding) {
[padding],
[padding] scroll-content {
[padding] .scroll-content {
padding: $content-padding;
}
[padding-top],
[padding-top] scroll-content {
[padding-top] .scroll-content {
padding-top: $content-padding;
}
[padding-left],
[padding-left] scroll-content {
[padding-left] .scroll-content {
padding-left: $content-padding;
}
[padding-right],
[padding-right] scroll-content {
[padding-right] .scroll-content {
padding-right: $content-padding;
}
[padding-bottom],
[padding-bottom] scroll-content {
[padding-bottom] .scroll-content {
padding-bottom: $content-padding;
}
[padding-vertical],
[padding-vertical] scroll-content {
[padding-vertical] .scroll-content {
padding-top: $content-padding;
padding-bottom: $content-padding;
}
[padding-horizontal],
[padding-horizontal] scroll-content {
[padding-horizontal] .scroll-content {
padding-right: $content-padding;
padding-left: $content-padding;
}
@ -56,44 +109,44 @@
// --------------------------------------------------
[no-margin],
[no-margin] scroll-content {
[no-margin] .scroll-content {
margin: 0;
}
@mixin content-margin($content-margin) {
[margin],
[margin] scroll-content {
[margin] .scroll-content {
margin: $content-margin;
}
[margin-top],
[margin-top] scroll-content {
[margin-top] .scroll-content {
margin-top: $content-margin;
}
[margin-left],
[margin-left] scroll-content {
[margin-left] .scroll-content {
margin-left: $content-margin;
}
[margin-right],
[margin-right] scroll-content {
[margin-right] .scroll-content {
margin-right: $content-margin;
}
[margin-bottom],
[margin-bottom] scroll-content {
[margin-bottom] .scroll-content {
margin-bottom: $content-margin;
}
[margin-vertical],
[margin-vertical] scroll-content {
[margin-vertical] .scroll-content {
margin-top: $content-margin;
margin-bottom: $content-margin;
}
[margin-horizontal],
[margin-horizontal] scroll-content {
[margin-horizontal] .scroll-content {
margin-right: $content-margin;
margin-left: $content-margin;
}

2
src/components/datetime/datetime.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// DateTime
// --------------------------------------------------

2
src/components/grid/grid.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Grid
// --------------------------------------------------

2
src/components/icon/icon.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Icon
// --------------------------------------------------

2
src/components/img/img.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Img
// --------------------------------------------------

2
src/components/infinite-scroll/infinite-scroll.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Infinite Scroll
// --------------------------------------------------

2
src/components/input/input.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Input/Textarea Wrapper
// --------------------------------------------------

17
src/components/item/item-media.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Item Media
// --------------------------------------------------
@ -22,18 +22,20 @@
font-size: 2.4rem;
line-height: 1;
}
&[large] {
.item > ion-icon[large],
.item-inner > ion-icon[large] {
min-height: 3.2rem;
font-size: 3.2rem;
}
}
&[small] {
.item > ion-icon[small],
.item-inner > ion-icon[small] {
min-height: 1.8rem;
font-size: 1.8rem;
}
}
ion-avatar,
@ -41,10 +43,11 @@ ion-thumbnail {
display: block;
line-height: 1;
}
img {
ion-avatar img,
ion-thumbnail img {
display: block;
}
}
.item-cover {

16
src/components/item/item-reorder.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Item reorder
// --------------------------------------------------
@ -22,10 +22,10 @@ ion-reorder {
pointer-events: all;
touch-action: manipulation;
}
ion-icon {
ion-reorder ion-icon {
pointer-events: none;
}
}
.reorder-enabled ion-reorder {
@ -36,17 +36,15 @@ ion-reorder {
transform: translate3d(0, 0, 0);
}
.reorder-list-active {
.item,
.item-wrapper {
.reorder-list-active .item,
.reorder-list-active .item-wrapper {
transition: transform 300ms;
will-change: transform;
}
}
.item-inner {
.reorder-list-active .item-inner {
pointer-events: none;
}
}

6
src/components/item/item-sliding.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Item Sliding
// --------------------------------------------------
@ -10,10 +10,10 @@ ion-item-sliding {
overflow: hidden;
width: 100%;
}
.item {
ion-item-sliding .item {
position: static;
}
}
ion-item-options {

23
src/components/item/item.scss
View File

@ -1,11 +1,21 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Item
// --------------------------------------------------
// Core structure only, dimensions belong in specific modes
//
// ".item" includes elements:
// ion-item
// [ion-item]
// ion-item-divider
// ion-list-header
//
// ".item-block" includes elements:
// ion-item
// [ion-item]
.item {
.item-block {
display: flex;
overflow: hidden;
@ -57,7 +67,7 @@
}
.item[no-lines],
.item[no-lines] .item-inner {
.item.item[no-lines] .item-inner {
border: 0;
}
@ -79,11 +89,11 @@ ion-item-divider {
width: 100%;
min-height: 30px;
}
&[sticky] {
ion-item-divider[sticky] {
position: sticky;
top: 0;
}
}
[vertical-align-top],
@ -91,6 +101,3 @@ ion-input.item {
align-items: flex-start;
}
@import "item-media";
@import "item-sliding";
@import "item-reorder";

2
src/components/label/label.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Label
// --------------------------------------------------

2
src/components/list/list.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// List
// --------------------------------------------------

2
src/components/loading/loading.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Loading Indicator
// --------------------------------------------------

4
src/components/picker/picker.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Picker
// --------------------------------------------------
@ -71,7 +71,6 @@ ion-picker-cmp {
flex: 1;
min-width: 50px;
min-width: 45%;
text-align: right;
@ -83,7 +82,6 @@ ion-picker-cmp {
flex: 1;
min-width: 50px;
min-width: 45%;
text-align: left;

10
src/components/popover/popover.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Popover
// --------------------------------------------------
@ -33,8 +33,8 @@ ion-popover {
overflow: auto;
flex-direction: column;
scroll-content {
position: relative;
}
}
.popover-content .scroll-content {
position: relative;
}

14
src/components/range/range.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Range
// --------------------------------------------------
@ -15,10 +15,10 @@
.item-range ion-range {
width: 100%;
}
ion-label {
.item-range ion-range ion-label {
align-self: center;
}
}
ion-range {
@ -26,17 +26,17 @@ ion-range {
display: flex;
align-items: center;
}
ion-label {
ion-range ion-label {
flex: initial;
}
}
ion-icon {
ion-range ion-icon {
min-height: 2.4rem;
font-size: 2.4rem;
line-height: 1;
}
}
.range-slider {

4
src/components/refresher/refresher.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Refresher
// --------------------------------------------------
@ -29,7 +29,7 @@ ion-refresher {
}
}
.has-refresher > scroll-content {
.has-refresher > .scroll-content {
// when the refresher is let go or has completed
// this transition is what is used to put the
// scroll content back into it's original location

21
src/components/scroll/scroll.scss
View File

@ -1,27 +1,26 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
ion-scroll {
position: relative;
display: block;
}
&.scroll-x scroll-content {
ion-scroll.scroll-x .scroll-content {
overflow-x: auto;
}
}
&.scroll-y scroll-content {
ion-scroll.scroll-y .scroll-content {
overflow-y: auto;
}
}
&[center] {
scroll-content {
ion-scroll[center] .scroll-content {
display: flex;
align-items: center;
justify-content: center;
}
}
}
scroll-content {
ion-scroll .scroll-content {
position: absolute;
top: 0;
right: 0;
@ -32,6 +31,4 @@ ion-scroll {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
}

3
src/components/searchbar/searchbar.scss
View File

@ -1,9 +1,8 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Search Bar
// --------------------------------------------------
ion-searchbar {
position: relative;
display: flex;

2
src/components/segment/segment.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Segment
// --------------------------------------------------

2
src/components/select/select.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Select
// --------------------------------------------------

2
src/components/show-hide-when/show-hide-when.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Show / Hide When
// --------------------------------------------------

2
src/components/slides/slides.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
/**

1
src/components/spinner/spinner.scss
View File

@ -1,5 +1,4 @@
// Spinners
// --------------------------------------------------

2
src/components/toast/toast.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Toast

5
src/components/toolbar/toolbar-button.scss
View File

@ -1,10 +1,9 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Toolbar Buttons
// --------------------------------------------------
.bar-button {
@include user-select-none();
@include appearance(none);
position: relative;
@ -23,6 +22,8 @@
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
user-select: none;
}
.bar-button::after {

2
src/components/typography/typography.scss
View File

@ -1,4 +1,4 @@
@import "../../globals.core";
@import "../../themes/ionic.globals";
// Typography
// --------------------------------------------------

1
src/components/virtual-scroll/virtual-scroll.scss
View File

@ -2,7 +2,6 @@
// Virtual Scroll
// --------------------------------------------------
.virtual-scroll {
position: relative;
}