mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
radio button updates
This commit is contained in:
Adam Bradley
37
dist/css/ionic-ios7.css
vendored
37
dist/css/ionic-ios7.css
vendored
@ -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
50
dist/css/ionic-scoped.css
vendored
@ -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
53
dist/css/ionic.css
vendored
@ -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;
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user