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

radio button updates

Browse Source
This commit is contained in:
Adam Bradley
2013-10-17 09:30:30 -05:00
parent 28113c1e6f
commit ac8da1dccf
6 changed files with 117 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1188,6 +1188,18 @@ a.list-item {
border-radius: 0; border-radius: 0;
border: none; } border: none; }
/**
* Right-side icon that reused by components like radio buttons
*/
.list-item-icon {
position: absolute;
top: 0;
right: 0;
z-index: 3;
padding: 13px;
height: 100%;
font-size: 24px; }
/** /**
* A list divider. * A list divider.
*/ */
@ -1523,28 +1535,23 @@ input[type="checkbox"][readonly] {
-webkit-transform: none; -webkit-transform: none;
transition-delay: 0.05s, 0s; } transition-delay: 0.05s, 0s; }
.radio-buttton-list .list-item-buttons { .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */
padding-right: 60px; }
.radio-buttton-list .list-item-icon {
/* checkmark icon will be hidden by default */
visibility: hidden; } visibility: hidden; }
.radio-buttton-list [class^="icon-"],
.radio-buttton-list [class*=" icon-"] {
position: absolute;
top: 25%;
left: 25%;
font-size: 24px; }
.radio-buttton-list input[type="radio"] { .radio-buttton-list input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */ /* hide any radio button inputs elements (the ugly circles) */
display: none; } display: none; }
.radio-buttton-list input[type="radio"]:checked ~ .list-item-content { .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
/* style the list item when its checked */ /* style the list item content when its checked */
background: #f7f7f7; } background: #f7f7f7; }
.radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons { .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
/* show the icon when its checked */ /* show the checkmark icon when its checked */
visibility: visible; } visibility: visible; }
.radio-buttton-list .list-item-content {
padding-right: 60px; }
.radio-buttton-list .list-item-buttons {
z-index: 3;
width: 45px; }
.button { .button {
position: relative; position: relative;

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

@ -168,6 +168,9 @@
* The hidden right-side buttons that can be exposed under a list item * The hidden right-side buttons that can be exposed under a list item
* with dragging. * with dragging.
*/ */
/**
* Right-side icon that reused by components like radio buttons
*/
/** /**
* A list divider. * A list divider.
*/ */
@ -175,7 +178,7 @@
* List refreser elements * List refreser elements
*/ */
/* the overall container of the toggle */ /* the overall container of the toggle */
/* hide the actual checkbox */ /* hide the actual <input type="checkbox"> */
/* the background of the toggle's track area */ /* the background of the toggle's track area */
/* also the track appearance when the toggle is "off" */ /* also the track appearance when the toggle is "off" */
/* the handle (circle) thats inside the toggle's track area */ /* the handle (circle) thats inside the toggle's track area */
@ -1864,6 +1867,14 @@
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
border: none; } border: none; }
.ionic .list-item-icon {
position: absolute;
top: 0;
right: 0;
z-index: 3;
padding: 13px;
height: 100%;
font-size: 24px; }
.ionic .list-divider { .ionic .list-divider {
padding: 5px 15px; padding: 5px 15px;
background-color: whitesmoke; background-color: whitesmoke;
@ -2143,7 +2154,7 @@
opacity: 1; } opacity: 1; }
.ionic .toggle { .ionic .toggle {
display: inline-block; } display: inline-block; }
.ionic .toggle input { .ionic .toggle input[type="checkbox"] {
display: none; } display: none; }
.ionic .toggle .track { .ionic .toggle .track {
display: inline-block; display: inline-block;
@ -2154,9 +2165,9 @@
border-radius: 20px; border-radius: 20px;
background-color: #e5e5e5; background-color: #e5e5e5;
cursor: pointer; cursor: pointer;
transition-property: background-color, border; transition-timing-function: ease-in-out;
transition-duration: 0.1s; transition-duration: 0.1s;
transition-timing-function: ease-in-out; } transition-property: background-color, border; }
.ionic .toggle .handle { .ionic .toggle .handle {
position: absolute; position: absolute;
display: block; display: block;
@ -2168,11 +2179,11 @@
/* used to create a larger hit area to slide the handle */ } /* used to create a larger hit area to slide the handle */ }
.ionic .toggle .handle:before { .ionic .toggle .handle:before {
position: absolute; position: absolute;
content: " "; top: -2px;
left: -16px;
display: table; display: table;
left: -14px; padding: 17px 30px;
top: -11px; content: " "; }
padding: 14px 30px; }
.ionic .toggle :checked + .track { .ionic .toggle :checked + .track {
/* the track when the toggle is "on" */ /* the track when the toggle is "on" */
border-color: #5f85ef; border-color: #5f85ef;
@ -2181,28 +2192,21 @@
.ionic .toggle :checked + .track .handle { .ionic .toggle :checked + .track .handle {
background-color: white; background-color: white;
-webkit-transform: translate3d(22px, 0, 0); } -webkit-transform: translate3d(22px, 0, 0); }
.ionic .radio-buttton-list .list-item-buttons { .ionic .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */
padding-right: 60px; }
.ionic .radio-buttton-list .list-item-icon {
/* checkmark icon will be hidden by default */
visibility: hidden; } visibility: hidden; }
.ionic .radio-buttton-list [class^="icon-"],
.ionic .radio-buttton-list [class*=" icon-"] {
position: absolute;
top: 25%;
left: 25%;
font-size: 24px; }
.ionic .radio-buttton-list input[type="radio"] { .ionic .radio-buttton-list input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */ /* hide any radio button inputs elements (the ugly circles) */
display: none; } display: none; }
.ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-content { .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
/* style the list item when its checked */ /* style the list item content when its checked */
background: #f7f7f7; } background: #f7f7f7; }
.ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons { .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
/* show the icon when its checked */ /* show the checkmark icon when its checked */
visibility: visible; } visibility: visible; }
.ionic .radio-buttton-list .list-item-content {
padding-right: 60px; }
.ionic .radio-buttton-list .list-item-buttons {
z-index: 3;
width: 45px; }
.ionic .button { .ionic .button {
position: relative; position: relative;
display: inline-block; display: inline-block;

53
dist/css/ionic.css vendored
View File

@ -2297,6 +2297,18 @@ a.list-item {
border-radius: 0; border-radius: 0;
border: none; } border: none; }
/**
* Right-side icon that reused by components like radio buttons
*/
.list-item-icon {
position: absolute;
top: 0;
right: 0;
z-index: 3;
padding: 13px;
height: 100%;
font-size: 24px; }
/** /**
* A list divider. * A list divider.
*/ */
@ -2615,8 +2627,8 @@ input[type="checkbox"][readonly] {
.toggle { .toggle {
display: inline-block; } display: inline-block; }
/* hide the actual checkbox */ /* hide the actual <input type="checkbox"> */
.toggle input { .toggle input[type="checkbox"] {
display: none; } display: none; }
/* the background of the toggle's track area */ /* the background of the toggle's track area */
@ -2630,9 +2642,9 @@ input[type="checkbox"][readonly] {
border-radius: 20px; border-radius: 20px;
background-color: #e5e5e5; background-color: #e5e5e5;
cursor: pointer; cursor: pointer;
transition-property: background-color, border; transition-timing-function: ease-in-out;
transition-duration: 0.1s; transition-duration: 0.1s;
transition-timing-function: ease-in-out; } transition-property: background-color, border; }
/* the handle (circle) thats inside the toggle's track area */ /* the handle (circle) thats inside the toggle's track area */
/* also the appearance when the handle is "off" */ /* also the appearance when the handle is "off" */
@ -2647,11 +2659,11 @@ input[type="checkbox"][readonly] {
/* used to create a larger hit area to slide the handle */ } /* used to create a larger hit area to slide the handle */ }
.toggle .handle:before { .toggle .handle:before {
position: absolute; position: absolute;
content: " "; top: -2px;
left: -16px;
display: table; display: table;
left: -14px; padding: 17px 30px;
top: -11px; content: " "; }
padding: 14px 30px; }
/* When the toggle is "on" */ /* When the toggle is "on" */
.toggle :checked + .track { .toggle :checked + .track {
@ -2663,28 +2675,23 @@ input[type="checkbox"][readonly] {
background-color: white; background-color: white;
-webkit-transform: translate3d(22px, 0, 0); } -webkit-transform: translate3d(22px, 0, 0); }
.radio-buttton-list .list-item-buttons { .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */
padding-right: 60px; }
.radio-buttton-list .list-item-icon {
/* checkmark icon will be hidden by default */
visibility: hidden; } visibility: hidden; }
.radio-buttton-list [class^="icon-"],
.radio-buttton-list [class*=" icon-"] {
position: absolute;
top: 25%;
left: 25%;
font-size: 24px; }
.radio-buttton-list input[type="radio"] { .radio-buttton-list input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */ /* hide any radio button inputs elements (the ugly circles) */
display: none; } display: none; }
.radio-buttton-list input[type="radio"]:checked ~ .list-item-content { .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
/* style the list item when its checked */ /* style the list item content when its checked */
background: #f7f7f7; } background: #f7f7f7; }
.radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons { .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
/* show the icon when its checked */ /* show the checkmark icon when its checked */
visibility: visible; } visibility: visible; }
.radio-buttton-list .list-item-content {
padding-right: 60px; }
.radio-buttton-list .list-item-buttons {
z-index: 3;
width: 45px; }
.button { .button {
position: relative; position: relative;

13
scss/ionic/_listview.scss
View File

@ -233,6 +233,19 @@ a.list-item {
} }
} }
/**
* Right-side icon that reused by components like radio buttons
*/
.list-item-icon {
position: absolute;
top: 0;
right: 0;
z-index: 3;
padding: $list-item-padding - 2;
height: 100%;
font-size: 24px;
}
/** /**
* A list divider. * A list divider.

61
scss/ionic/_radio.scss
View File

@ -2,42 +2,27 @@
// Radio Buttons // Radio Buttons
// ------------------------------- // -------------------------------
.radio-buttton-list { .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */
.list-item-buttons { padding-right: $list-item-padding * 4;
visibility: hidden; }
}
.radio-buttton-list .list-item-icon {
[class^="icon-"], /* checkmark icon will be hidden by default */
[class*=" icon-"] { visibility: hidden;
position: absolute; }
top: 25%;
left: 25%; .radio-buttton-list input[type="radio"] {
font-size: 24px; /* hide any radio button inputs elements (the ugly circles) */
} display: none;
input[type="radio"] { &:checked ~ .list-item-content {
/* hide any radio button inputs elements (the ugly circles) */ /* style the list item content when its checked */
display: none; background: #f7f7f7;
}
&:checked ~ .list-item-content {
/* style the list item when its checked */ &:checked ~ .list-item-icon {
background: #f7f7f7; /* show the checkmark icon when its checked */
} visibility: visible;
}
&:checked ~ .list-item-buttons {
/* show the icon when its checked */
visibility: visible;
}
}
.list-item-content {
padding-right: $list-item-padding * 4;
}
.list-item-buttons {
z-index: 3;
width: $list-item-padding * 3;
}
} }

8
test/input-radio.html
View File

@ -28,9 +28,7 @@
<div class="list-item-content"> <div class="list-item-content">
Go Go
</div> </div>
<div class="list-item-buttons"> <div class="list-item-icon icon-checkmark"></div>
<i class="icon-checkmark"></i>
</div>
</label> </label>
<label class="list-item"> <label class="list-item">
@ -38,9 +36,7 @@
<div class="list-item-content"> <div class="list-item-content">
Python Python
</div> </div>
<div class="list-item-buttons"> <div class="list-item-icon icon-checkmark"></div>
<i class="icon-checkmark"></i>
</div>
</label> </label>
</div> </div>