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

toggle color/alignment

Browse Source
This commit is contained in:
Adam Bradley
2013-10-22 09:11:15 -05:00
parent 4b030ab360
commit dbb30e0e4c
6 changed files with 36 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
dist/css/ionic-ios7.css vendored
View File

@ -1460,6 +1460,11 @@ input[type="tel"],
input[type="color"] {
border: 0; }
input[type="radio"],
input[type="checkbox"] {
margin: 0;
line-height: normal; }
input[type="file"],
input[type="image"],
input[type="submit"],

14
dist/css/ionic-scoped.css vendored
View File

@ -2119,6 +2119,10 @@
.ionic input[type="tel"],
.ionic input[type="color"] {
border: 0; }
.ionic input[type="radio"],
.ionic input[type="checkbox"] {
margin: 0;
line-height: normal; }
.ionic input[type="file"],
.ionic input[type="image"],
.ionic input[type="submit"],
@ -2177,7 +2181,7 @@
display: table;
width: 100%;
height: 100%;
border: 1px solid #5f85ef;
border: 1px solid #4a87ee;
border-radius: 50%;
background: white;
content: ' ';
@ -2199,7 +2203,7 @@
transform: rotate(-45deg); }
.ionic .checkbox input:checked:before {
border: 0;
background: #5f85ef; }
background: #4a87ee; }
.ionic .checkbox input:checked:after {
opacity: 1; }
.ionic .checkbox-item .list-item-content {
@ -2239,7 +2243,7 @@
transition-property: background-color, border; }
.ionic .toggle .handle {
position: absolute;
top: 6px;
top: 2px;
left: 2px;
display: block;
width: 28px;
@ -2256,8 +2260,8 @@
padding: 17px 30px;
content: " "; }
.ionic .toggle input:checked:after {
border-color: #5f85ef;
background-color: #5f85ef; }
border-color: #4a87ee;
background-color: #4a87ee; }
.ionic .toggle input:checked + .handle {
background-color: white;
-webkit-transform: translate3d(22px, 0, 0); }

15
dist/css/ionic.css vendored
View File

@ -2603,6 +2603,11 @@ input[type="tel"],
input[type="color"] {
border: 0; }
input[type="radio"],
input[type="checkbox"] {
margin: 0;
line-height: normal; }
input[type="file"],
input[type="image"],
input[type="submit"],
@ -2669,7 +2674,7 @@ input[type="checkbox"][readonly] {
display: table;
width: 100%;
height: 100%;
border: 1px solid #5f85ef;
border: 1px solid #4a87ee;
border-radius: 50%;
background: white;
content: ' ';
@ -2695,7 +2700,7 @@ input[type="checkbox"][readonly] {
/* what the background looks like when its checked */
.checkbox input:checked:before {
border: 0;
background: #5f85ef; }
background: #4a87ee; }
/* what the checkmark looks like when its checked */
.checkbox input:checked:after {
@ -2747,7 +2752,7 @@ input[type="checkbox"][readonly] {
/* also the appearance when the handle is "off" */
.toggle .handle {
position: absolute;
top: 6px;
top: 2px;
left: 2px;
display: block;
width: 28px;
@ -2766,8 +2771,8 @@ input[type="checkbox"][readonly] {
/* The track when the toggle is "on" */
.toggle input:checked:after {
border-color: #5f85ef;
background-color: #5f85ef; }
border-color: #4a87ee;
background-color: #4a87ee; }
/* the handle when the toggle is "on" */
.toggle input:checked + .handle {

7
scss/ionic/_form.scss
View File

@ -185,6 +185,13 @@ input[type="color"] {
border: 0;
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 0;
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],

2
scss/ionic/_toggle.scss
View File

@ -39,7 +39,7 @@
/* also the appearance when the handle is "off" */
.toggle .handle {
position: absolute;
top: ($toggle-height - $toggle-handle-height) + $toggle-border-width;
top: $toggle-border-width;
left: $toggle-border-width;
display: block;
width: $toggle-handle-width;

8
scss/ionic/_variables.scss
View File

@ -153,7 +153,7 @@ $toggle-handle-radius: 50%;
$toggle-off-bg-color: #E5E5E5;
$toggle-off-border-color: #E5E5E5;
$toggle-on-bg-color: #5f85ef;
$toggle-on-bg-color: #4A87EE;
$toggle-on-border-color: $toggle-on-bg-color;
$toggle-handle-off-bg-color: $white;
@ -171,10 +171,10 @@ $checkbox-border-radius: 50%;
$checkbox-border-width: 1px;
$checkbox-off-bg-color: #fff;
$checkbox-off-border-color: #5f85ef;
$checkbox-off-border-color: #4A87EE;
$checkbox-on-bg-color: #5f85ef;
$checkbox-on-border-color: #5f85ef;
$checkbox-on-bg-color: #4A87EE;
$checkbox-on-border-color: #4A87EE;
$checkbox-check-width: 3px;
$checkbox-check-color: #fff;