javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(checkbox): end position by default

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-10-31 14:35:56 +01:00
committed by Manu MA
parent 00544e9106
commit 9da51b3984
5 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/checkbox/checkbox.ios.scss
View File

@ -69,14 +69,14 @@
// iOS Checkbox Within An Item // iOS Checkbox Within An Item
// ----------------------------------------- // -----------------------------------------
// :host-context(.item)
:host(.in-item) { :host(.in-item) {
@include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start); // end position by default
@include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
display: block; display: block;
position: static; position: static;
} }
:host(.in-item[slot="end"]) { :host(.in-item[slot="start"]) {
@include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start); @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
} }

7
core/src/components/checkbox/checkbox.md.scss
View File

@ -73,14 +73,15 @@
// ----------------------------------------- // -----------------------------------------
:host(.in-item) { :host(.in-item) {
@include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start); // end position by default
@include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
display: block; display: block;
position: static; position: static;
} }
:host(.in-item[slot="end"]) { :host(.in-item[slot="start"]) {
@include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start); @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
} }
// REVIEW // REVIEW

1
core/src/components/checkbox/checkbox.scss
View File

@ -24,6 +24,7 @@
position: relative; position: relative;
user-select: none; user-select: none;
z-index: $z-index-item-input;
} }
:host(.ion-color) { :host(.ion-color) {

15
core/src/components/checkbox/test/basic/index.html
View File

@ -27,7 +27,7 @@
<ion-item> <ion-item>
<ion-label>Primary</ion-label> <ion-label>Primary</ion-label>
<ion-checkbox checked color="primary"></ion-checkbox> <ion-checkbox checked color="primary" slot="end"></ion-checkbox>
</ion-item> </ion-item>
<ion-item> <ion-item>
@ -50,24 +50,29 @@
<ion-checkbox checked color="warning"></ion-checkbox> <ion-checkbox checked color="warning"></ion-checkbox>
</ion-item> </ion-item>
<ion-item>
<ion-label>Dark</ion-label>
<ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
</ion-item>
<ion-item> <ion-item>
<ion-label>Danger</ion-label> <ion-label>Danger</ion-label>
<ion-checkbox checked color="danger"></ion-checkbox> <ion-checkbox checked color="danger" slot="start"></ion-checkbox>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Light</ion-label> <ion-label>Light</ion-label>
<ion-checkbox checked color="light"></ion-checkbox> <ion-checkbox checked color="light" slot="start"></ion-checkbox>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Medium</ion-label> <ion-label>Medium</ion-label>
<ion-checkbox checked color="medium"></ion-checkbox> <ion-checkbox checked color="medium" slot="start"></ion-checkbox>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Dark</ion-label> <ion-label>Dark</ion-label>
<ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox> <ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
</ion-item> </ion-item>
<ion-item> <ion-item>

1
core/src/themes/ionic.globals.scss
View File

@ -57,6 +57,7 @@ $z-index-backdrop: 2;
$z-index-overlay-wrapper: 10; $z-index-overlay-wrapper: 10;
$z-index-item-options: 1; $z-index-item-options: 1;
$z-index-item-input: 2;
$z-index-item-divider: 100; $z-index-item-divider: 100;
$z-index-reorder-selected: 100; $z-index-reorder-selected: 100;