javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 07:41:51 +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: 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.
*/
@ -1523,28 +1535,23 @@ input[type="checkbox"][readonly] {
-webkit-transform: none;
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; }
.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"] {
/* hide any radio button inputs elements (the ugly circles) */
display: none; }
.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; }
.radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons {
/* show the icon when its checked */
.radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
/* show the checkmark icon when its checked */
visibility: visible; }
.radio-buttton-list .list-item-content {
padding-right: 60px; }
.radio-buttton-list .list-item-buttons {
z-index: 3;
width: 45px; }
.button {
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
* with dragging.
*/
/**
* Right-side icon that reused by components like radio buttons
*/
/**
* A list divider.
*/
@ -175,7 +178,7 @@
* List refreser elements
*/
/* the overall container of the toggle */
/* hide the actual checkbox */
/* hide the actual <input type="checkbox"> */
/* the background of the toggle's track area */
/* also the track appearance when the toggle is "off" */
/* the handle (circle) thats inside the toggle's track area */
@ -1864,6 +1867,14 @@
height: 100%;
border-radius: 0;
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 {
padding: 5px 15px;
background-color: whitesmoke;
@ -2143,7 +2154,7 @@
opacity: 1; }
.ionic .toggle {
display: inline-block; }
.ionic .toggle input {
.ionic .toggle input[type="checkbox"] {
display: none; }
.ionic .toggle .track {
display: inline-block;
@ -2154,9 +2165,9 @@
border-radius: 20px;
background-color: #e5e5e5;
cursor: pointer;
transition-property: background-color, border;
transition-timing-function: ease-in-out;
transition-duration: 0.1s;
transition-timing-function: ease-in-out; }
transition-property: background-color, border; }
.ionic .toggle .handle {
position: absolute;
display: block;
@ -2168,11 +2179,11 @@
/* used to create a larger hit area to slide the handle */ }
.ionic .toggle .handle:before {
position: absolute;
content: " ";
top: -2px;
left: -16px;
display: table;
left: -14px;
top: -11px;
padding: 14px 30px; }
padding: 17px 30px;
content: " "; }
.ionic .toggle :checked + .track {
/* the track when the toggle is "on" */
border-color: #5f85ef;
@ -2181,28 +2192,21 @@
.ionic .toggle :checked + .track .handle {
background-color: white;
-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; }
.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"] {
/* hide any radio button inputs elements (the ugly circles) */
display: none; }
.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; }
.ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons {
/* show the icon when its checked */
.ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
/* show the checkmark icon when its checked */
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 {
position: relative;
display: inline-block;

53
dist/css/ionic.css vendored
View File

@ -2297,6 +2297,18 @@ a.list-item {
border-radius: 0;
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.
*/
@ -2615,8 +2627,8 @@ input[type="checkbox"][readonly] {
.toggle {
display: inline-block; }
/* hide the actual checkbox */
.toggle input {
/* hide the actual <input type="checkbox"> */
.toggle input[type="checkbox"] {
display: none; }
/* the background of the toggle's track area */
@ -2630,9 +2642,9 @@ input[type="checkbox"][readonly] {
border-radius: 20px;
background-color: #e5e5e5;
cursor: pointer;
transition-property: background-color, border;
transition-timing-function: ease-in-out;
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 */
/* 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 */ }
.toggle .handle:before {
position: absolute;
content: " ";
top: -2px;
left: -16px;
display: table;
left: -14px;
top: -11px;
padding: 14px 30px; }
padding: 17px 30px;
content: " "; }
/* When the toggle is "on" */
.toggle :checked + .track {
@ -2663,28 +2675,23 @@ input[type="checkbox"][readonly] {
background-color: white;
-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; }
.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"] {
/* hide any radio button inputs elements (the ugly circles) */
display: none; }
.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; }
.radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons {
/* show the icon when its checked */
.radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
/* show the checkmark icon when its checked */
visibility: visible; }
.radio-buttton-list .list-item-content {
padding-right: 60px; }
.radio-buttton-list .list-item-buttons {
z-index: 3;
width: 45px; }
.button {
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.

35
scss/ionic/_radio.scss
View File

@ -2,42 +2,27 @@
// Radio Buttons
// -------------------------------
.radio-buttton-list {
.radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */
padding-right: $list-item-padding * 4;
}
.list-item-buttons {
.radio-buttton-list .list-item-icon {
/* checkmark icon will be hidden by default */
visibility: hidden;
}
[class^="icon-"],
[class*=" icon-"] {
position: absolute;
top: 25%;
left: 25%;
font-size: 24px;
}
input[type="radio"] {
.radio-buttton-list input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */
display: none;
&:checked ~ .list-item-content {
/* style the list item when its checked */
/* style the list item content when its checked */
background: #f7f7f7;
}
&:checked ~ .list-item-buttons {
/* show the icon when its checked */
&:checked ~ .list-item-icon {
/* show the checkmark 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">
Go
</div>
<div class="list-item-buttons">
<i class="icon-checkmark"></i>
</div>
<div class="list-item-icon icon-checkmark"></div>
</label>
<label class="list-item">
@ -38,9 +36,7 @@
<div class="list-item-content">
Python
</div>
<div class="list-item-buttons">
<i class="icon-checkmark"></i>
</div>
<div class="list-item-icon icon-checkmark"></div>
</label>
</div>