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

feat(checkbox): checkbox-square/platform updates

Browse Source
This commit is contained in:
Adam Bradley
2014-11-24 13:37:09 -06:00
parent 0951b97f06
commit 0c1b23d980
7 changed files with 76 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
scss/_checkbox.scss
View File

@@ -6,7 +6,7 @@
.checkbox {
// set the color defaults
@include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default);
@include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default);
position: relative;
display: inline-block;
@@ -14,31 +14,31 @@
cursor: pointer;
}
.checkbox-light {
@include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light);
@include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light);
}
.checkbox-stable {
@include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable);
@include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable);
}
.checkbox-positive {
@include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive);
@include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive);
}
.checkbox-calm {
@include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm);
@include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm);
}
.checkbox-assertive {
@include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive);
@include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive);
}
.checkbox-balanced {
@include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced);
@include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced);
}
.checkbox-energized{
@include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized);
@include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized);
}
.checkbox-royal {
@include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal);
@include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal);
}
.checkbox-dark {
@include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark);
@include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark);
}
.checkbox input:disabled:before,
@@ -77,7 +77,7 @@
border-radius: $checkbox-border-radius;
background: $checkbox-off-bg-color;
content: ' ';
transition: background-color 20ms ease-in-out;
@include transition(background-color 20ms ease-in-out);
}
}
@@ -92,11 +92,11 @@ input:checked + .checkbox-icon:before {
@include transition(opacity .05s ease-in-out);
@include rotate(-45deg);
position: absolute;
top: 30%;
left: 26%;
top: 33%;
left: 25%;
display: table;
width: ($checkbox-width / 2) + 1;
height: ($checkbox-width / 3) + 1;
width: ($checkbox-width / 2);
height: ($checkbox-width / 4) - 1;
border: $checkbox-check-width solid $checkbox-check-color;
border-top: 0;
border-right: 0;
@@ -104,6 +104,29 @@ input:checked + .checkbox-icon:before {
opacity: 0;
}
.platform-android .checkbox-platform input:before,
.platform-android .checkbox-platform .checkbox-icon:before,
.checkbox-square input:before,
.checkbox-square .checkbox-icon:before {
border-radius: 2px;
width: 72%;
height: 72%;
margin-top: 14%;
margin-left: 14%;
border-width: 2px;
}
.platform-android .checkbox-platform input:after,
.platform-android .checkbox-platform .checkbox-icon:after,
.checkbox-square input:after,
.checkbox-square .checkbox-icon:after {
border-width: 2px;
top: 19%;
left: 25%;
width: ($checkbox-width / 2) - 1;
height: 7px;
}
.grade-c .checkbox input:after,
.grade-c .checkbox-icon:after {
@include rotate(0);
@@ -150,4 +173,4 @@ input:checked + .checkbox-icon:after {
.item-checkbox-right .checkbox input,
.item-checkbox-right .checkbox-icon {
float: right;
}
}

3
scss/_mixins.scss
View File

@@ -125,7 +125,7 @@
// Checkbox Mixins
// --------------------------------------------------
@mixin checkbox-style($off-border-color, $on-bg-color) {
@mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) {
& input:before,
& .checkbox-icon:before {
border-color: $off-border-color;
@@ -135,6 +135,7 @@
& input:checked:before,
& input:checked + .checkbox-icon:before {
background: $on-bg-color;
border-color: $on-border-color;
}
}

5
scss/_variables.scss
View File

@@ -505,10 +505,11 @@ $checkbox-off-border-royal: $royal !default;
$checkbox-on-bg-royal: $royal !default;
$checkbox-off-border-dark: $dark !default;
$checkbox-on-bg-dark: $dark !default;
$checkbox-off-border-default: $positive !default;
$checkbox-off-border-default: $button-light-border !default;
$checkbox-on-bg-default: $positive !default;
$checkbox-on-border-default: $positive !default;
$checkbox-check-width: 3px !default;
$checkbox-check-width: 1px !default;
$checkbox-check-color: #fff !default;