diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index 910d9a3b5d..9eb08a3a01 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -1428,8 +1428,7 @@ input[type="email"], input[type="url"], input[type="search"], input[type="tel"], -input[type="color"], -.uneditable-input { +input[type="color"] { display: inline-block; height: 34px; color: #555555; @@ -1438,8 +1437,7 @@ input[type="color"], line-height: 20px; } input, -textarea, -.uneditable-input { +textarea { width: 100%; } textarea { @@ -1462,11 +1460,6 @@ input[type="tel"], input[type="color"] { border: 0; } -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - line-height: normal; } - input[type="file"], input[type="image"], input[type="submit"], diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 91acf5496f..3c26c767ad 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -2091,8 +2091,7 @@ .ionic input[type="url"], .ionic input[type="search"], .ionic input[type="tel"], - .ionic input[type="color"], - .ionic .uneditable-input { + .ionic input[type="color"] { display: inline-block; height: 34px; color: #555555; @@ -2100,8 +2099,7 @@ font-size: 14px; line-height: 20px; } .ionic input, - .ionic textarea, - .ionic .uneditable-input { + .ionic textarea { width: 100%; } .ionic textarea { height: auto; } @@ -2121,10 +2119,6 @@ .ionic input[type="tel"], .ionic input[type="color"] { border: 0; } - .ionic input[type="radio"], - .ionic input[type="checkbox"] { - margin: 4px 0 0; - line-height: normal; } .ionic input[type="file"], .ionic input[type="image"], .ionic input[type="submit"], @@ -2183,7 +2177,7 @@ display: table; width: 100%; height: 100%; - border: 1px solid #049cdb; + border: 1px solid #5f85ef; border-radius: 50%; background: white; content: ' '; @@ -2205,16 +2199,19 @@ transform: rotate(-45deg); } .ionic .checkbox input:checked:before { border: 0; - background: #049cdb; } + background: #5f85ef; } .ionic .checkbox input:checked:after { opacity: 1; } .ionic .checkbox-item .list-item-content { padding-left: 58px; } .ionic .checkbox-item .checkbox { position: absolute; - top: 1px; + top: 0; left: 7.5px; - z-index: 3; } + z-index: 3; + display: flex; + height: 100%; + align-items: center; } .ionic .toggle { position: relative; display: inline-block; } diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 04d36bfda8..3ac1cfbb3a 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2571,8 +2571,7 @@ input[type="email"], input[type="url"], input[type="search"], input[type="tel"], -input[type="color"], -.uneditable-input { +input[type="color"] { display: inline-block; height: 34px; color: #555555; @@ -2581,8 +2580,7 @@ input[type="color"], line-height: 20px; } input, -textarea, -.uneditable-input { +textarea { width: 100%; } textarea { @@ -2605,11 +2603,6 @@ input[type="tel"], input[type="color"] { border: 0; } -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - line-height: normal; } - input[type="file"], input[type="image"], input[type="submit"], @@ -2676,7 +2669,7 @@ input[type="checkbox"][readonly] { display: table; width: 100%; height: 100%; - border: 1px solid #049cdb; + border: 1px solid #5f85ef; border-radius: 50%; background: white; content: ' '; @@ -2702,7 +2695,7 @@ input[type="checkbox"][readonly] { /* what the background looks like when its checked */ .checkbox input:checked:before { border: 0; - background: #049cdb; } + background: #5f85ef; } /* what the checkmark looks like when its checked */ .checkbox input:checked:after { @@ -2715,9 +2708,12 @@ input[type="checkbox"][readonly] { /* position the checkbox to the left within a list item */ .checkbox-item .checkbox { position: absolute; - top: 1px; + top: 0; left: 7.5px; - z-index: 3; } + z-index: 3; + display: flex; + height: 100%; + align-items: center; } /* the overall container of the toggle */ .toggle { diff --git a/scss/ionic/_checkbox.scss b/scss/ionic/_checkbox.scss index 977f03978c..18b34e81fc 100644 --- a/scss/ionic/_checkbox.scss +++ b/scss/ionic/_checkbox.scss @@ -66,7 +66,10 @@ /* position the checkbox to the left within a list item */ .checkbox-item .checkbox { position: absolute; - top: 1px; + top: 0; left: $list-item-padding / 2; z-index: 3; + display: flex; + height: 100%; + align-items: center; } diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss index b5bc483d92..a2e81c3b20 100644 --- a/scss/ionic/_form.scss +++ b/scss/ionic/_form.scss @@ -147,8 +147,7 @@ input[type="email"], input[type="url"], input[type="search"], input[type="tel"], -input[type="color"], -.uneditable-input { +input[type="color"] { display: inline-block; height: $line-height-computed + $font-size-base; color: $gray; @@ -158,8 +157,7 @@ input[type="color"], } input, -textarea, -.uneditable-input { +textarea { width: 100%; } @@ -187,14 +185,6 @@ input[type="color"] { 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 input[type="file"], input[type="image"], diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss index 1b0301b9b9..8e8cad9241 100644 --- a/scss/ionic/_variables.scss +++ b/scss/ionic/_variables.scss @@ -171,10 +171,10 @@ $checkbox-border-radius: 50%; $checkbox-border-width: 1px; $checkbox-off-bg-color: #fff; -$checkbox-off-border-color: #049cdb; +$checkbox-off-border-color: #5f85ef; -$checkbox-on-bg-color: #049cdb; -$checkbox-on-border-color: #049cdb; +$checkbox-on-bg-color: #5f85ef; +$checkbox-on-border-color: #5f85ef; $checkbox-check-width: 3px; $checkbox-check-color: #fff;