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

checkbox ionic color

Browse Source
This commit is contained in:
Adam Bradley
2013-10-22 08:44:46 -05:00
parent 7ae0151efa
commit 4b030ab360
6 changed files with 29 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1428,8 +1428,7 @@ input[type="email"],
input[type="url"], input[type="url"],
input[type="search"], input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"] {
.uneditable-input {
display: inline-block; display: inline-block;
height: 34px; height: 34px;
color: #555555; color: #555555;
@ -1438,8 +1437,7 @@ input[type="color"],
line-height: 20px; } line-height: 20px; }
input, input,
textarea, textarea {
.uneditable-input {
width: 100%; } width: 100%; }
textarea { textarea {
@ -1462,11 +1460,6 @@ input[type="tel"],
input[type="color"] { input[type="color"] {
border: 0; } border: 0; }
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
line-height: normal; }
input[type="file"], input[type="file"],
input[type="image"], input[type="image"],
input[type="submit"], input[type="submit"],

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

@ -2091,8 +2091,7 @@
.ionic input[type="url"], .ionic input[type="url"],
.ionic input[type="search"], .ionic input[type="search"],
.ionic input[type="tel"], .ionic input[type="tel"],
.ionic input[type="color"], .ionic input[type="color"] {
.ionic .uneditable-input {
display: inline-block; display: inline-block;
height: 34px; height: 34px;
color: #555555; color: #555555;
@ -2100,8 +2099,7 @@
font-size: 14px; font-size: 14px;
line-height: 20px; } line-height: 20px; }
.ionic input, .ionic input,
.ionic textarea, .ionic textarea {
.ionic .uneditable-input {
width: 100%; } width: 100%; }
.ionic textarea { .ionic textarea {
height: auto; } height: auto; }
@ -2121,10 +2119,6 @@
.ionic input[type="tel"], .ionic input[type="tel"],
.ionic input[type="color"] { .ionic input[type="color"] {
border: 0; } border: 0; }
.ionic input[type="radio"],
.ionic input[type="checkbox"] {
margin: 4px 0 0;
line-height: normal; }
.ionic input[type="file"], .ionic input[type="file"],
.ionic input[type="image"], .ionic input[type="image"],
.ionic input[type="submit"], .ionic input[type="submit"],
@ -2183,7 +2177,7 @@
display: table; display: table;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #049cdb; border: 1px solid #5f85ef;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
@ -2205,16 +2199,19 @@
transform: rotate(-45deg); } transform: rotate(-45deg); }
.ionic .checkbox input:checked:before { .ionic .checkbox input:checked:before {
border: 0; border: 0;
background: #049cdb; } background: #5f85ef; }
.ionic .checkbox input:checked:after { .ionic .checkbox input:checked:after {
opacity: 1; } opacity: 1; }
.ionic .checkbox-item .list-item-content { .ionic .checkbox-item .list-item-content {
padding-left: 58px; } padding-left: 58px; }
.ionic .checkbox-item .checkbox { .ionic .checkbox-item .checkbox {
position: absolute; position: absolute;
top: 1px; top: 0;
left: 7.5px; left: 7.5px;
z-index: 3; } z-index: 3;
display: flex;
height: 100%;
align-items: center; }
.ionic .toggle { .ionic .toggle {
position: relative; position: relative;
display: inline-block; } display: inline-block; }

22
dist/css/ionic.css vendored
View File

@ -2571,8 +2571,7 @@ input[type="email"],
input[type="url"], input[type="url"],
input[type="search"], input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"] {
.uneditable-input {
display: inline-block; display: inline-block;
height: 34px; height: 34px;
color: #555555; color: #555555;
@ -2581,8 +2580,7 @@ input[type="color"],
line-height: 20px; } line-height: 20px; }
input, input,
textarea, textarea {
.uneditable-input {
width: 100%; } width: 100%; }
textarea { textarea {
@ -2605,11 +2603,6 @@ input[type="tel"],
input[type="color"] { input[type="color"] {
border: 0; } border: 0; }
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
line-height: normal; }
input[type="file"], input[type="file"],
input[type="image"], input[type="image"],
input[type="submit"], input[type="submit"],
@ -2676,7 +2669,7 @@ input[type="checkbox"][readonly] {
display: table; display: table;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #049cdb; border: 1px solid #5f85ef;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
@ -2702,7 +2695,7 @@ input[type="checkbox"][readonly] {
/* what the background looks like when its checked */ /* what the background looks like when its checked */
.checkbox input:checked:before { .checkbox input:checked:before {
border: 0; border: 0;
background: #049cdb; } background: #5f85ef; }
/* what the checkmark looks like when its checked */ /* what the checkmark looks like when its checked */
.checkbox input:checked:after { .checkbox input:checked:after {
@ -2715,9 +2708,12 @@ input[type="checkbox"][readonly] {
/* position the checkbox to the left within a list item */ /* position the checkbox to the left within a list item */
.checkbox-item .checkbox { .checkbox-item .checkbox {
position: absolute; position: absolute;
top: 1px; top: 0;
left: 7.5px; left: 7.5px;
z-index: 3; } z-index: 3;
display: flex;
height: 100%;
align-items: center; }
/* the overall container of the toggle */ /* the overall container of the toggle */
.toggle { .toggle {

5
scss/ionic/_checkbox.scss
View File

@ -66,7 +66,10 @@
/* position the checkbox to the left within a list item */ /* position the checkbox to the left within a list item */
.checkbox-item .checkbox { .checkbox-item .checkbox {
position: absolute; position: absolute;
top: 1px; top: 0;
left: $list-item-padding / 2; left: $list-item-padding / 2;
z-index: 3; z-index: 3;
display: flex;
height: 100%;
align-items: center;
} }

14
scss/ionic/_form.scss
View File

@ -147,8 +147,7 @@ input[type="email"],
input[type="url"], input[type="url"],
input[type="search"], input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"] {
.uneditable-input {
display: inline-block; display: inline-block;
height: $line-height-computed + $font-size-base; height: $line-height-computed + $font-size-base;
color: $gray; color: $gray;
@ -158,8 +157,7 @@ input[type="color"],
} }
input, input,
textarea, textarea {
.uneditable-input {
width: 100%; width: 100%;
} }
@ -187,14 +185,6 @@ input[type="color"] {
border: 0; border: 0;
} }
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes // Reset width of input images, buttons, radios, checkboxes
input[type="file"], input[type="file"],
input[type="image"], input[type="image"],

6
scss/ionic/_variables.scss
View File

@ -171,10 +171,10 @@ $checkbox-border-radius: 50%;
$checkbox-border-width: 1px; $checkbox-border-width: 1px;
$checkbox-off-bg-color: #fff; $checkbox-off-bg-color: #fff;
$checkbox-off-border-color: #049cdb; $checkbox-off-border-color: #5f85ef;
$checkbox-on-bg-color: #049cdb; $checkbox-on-bg-color: #5f85ef;
$checkbox-on-border-color: #049cdb; $checkbox-on-border-color: #5f85ef;
$checkbox-check-width: 3px; $checkbox-check-width: 3px;
$checkbox-check-color: #fff; $checkbox-check-color: #fff;