mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
list items and icons
This commit is contained in:
Adam Bradley
203
dist/css/ionic-ios7.css
vendored
203
dist/css/ionic-ios7.css
vendored
@ -963,15 +963,17 @@ address {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: -1px;
|
||||
border-top: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
background-color: white;
|
||||
border: 1px solid #dddddd; }
|
||||
/* // Align icons to the right
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}*/ }
|
||||
.list-item:last-child {
|
||||
margin-bottom: 0; }
|
||||
.list-item > .badge {
|
||||
float: right; }
|
||||
.list-item > i:last-child {
|
||||
float: right; }
|
||||
.list-item > .badge + .badge {
|
||||
margin-right: 5px; }
|
||||
.list-item.active, .list-item.active:hover, .list-item.active:focus {
|
||||
@ -1108,15 +1110,67 @@ a.list-item {
|
||||
.list-item-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
margin-top: -1px;
|
||||
padding: 15px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.list-item-content > i:last-child {
|
||||
float: right; }
|
||||
.list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
|
||||
float: right; }
|
||||
.list-item-content > .toggle:last-child {
|
||||
margin-top: -5px; }
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
/* // Align icons
|
||||
> i:first-child {
|
||||
float: left;
|
||||
}
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Make every last form element go to the right of the item
|
||||
|
||||
> .toggle:last-child, input:last-child, > button:last-child {
|
||||
float: right;
|
||||
}
|
||||
> .toggle:last-child {
|
||||
margin-top: -5px;
|
||||
}*/ }
|
||||
|
||||
/**
|
||||
* Left-side icon
|
||||
*/
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: 60px; }
|
||||
|
||||
/**
|
||||
* Right-side icon
|
||||
*/
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: 60px; }
|
||||
|
||||
.align-icon-left, .align-icon-right {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
z-index: 3;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 28px; }
|
||||
|
||||
.align-icon-left {
|
||||
left: 12px; }
|
||||
.align-icon-left:after {
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
height: 4px;
|
||||
left: -12px;
|
||||
top: -13px;
|
||||
background: white;
|
||||
content: ' '; }
|
||||
|
||||
.list-item:first-child .align-icon-left:after {
|
||||
display: none; }
|
||||
|
||||
.item-opened .align-icon-left:after {
|
||||
display: none; }
|
||||
|
||||
.align-icon-right {
|
||||
right: 12px; }
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
@ -1188,18 +1242,6 @@ 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.
|
||||
*/
|
||||
@ -1521,9 +1563,16 @@ input[type="checkbox"][readonly] {
|
||||
/* give some room to the right for the checkmark icon */
|
||||
padding-right: 60px; }
|
||||
|
||||
.radio-buttton-list .list-item-icon {
|
||||
.radio-buttton-list .radio-button-icon {
|
||||
/* checkmark icon will be hidden by default */
|
||||
visibility: hidden; }
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
visibility: hidden;
|
||||
padding: 13px;
|
||||
height: 100%;
|
||||
font-size: 24px; }
|
||||
|
||||
.radio-buttton-list input[type="radio"] {
|
||||
/* hide any radio button inputs elements (the ugly circles) */
|
||||
@ -1531,7 +1580,7 @@ input[type="checkbox"][readonly] {
|
||||
.radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
|
||||
/* style the list item content when its checked */
|
||||
background: #f7f7f7; }
|
||||
.radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
|
||||
.radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
|
||||
/* show the checkmark icon when its checked */
|
||||
visibility: visible; }
|
||||
|
||||
@ -1977,6 +2026,46 @@ a.button {
|
||||
animation: fadein 0.5s;
|
||||
-webkit-animation: fadein 0.5s; }
|
||||
|
||||
.fill-icon {
|
||||
background: black;
|
||||
color: white !important;
|
||||
border-radius: 6px; }
|
||||
.fill-icon.align-icon-left, .fill-icon.align-icon-right {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding: 4px 3px;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
font-size: 24px; }
|
||||
.fill-icon.brand-default {
|
||||
background: white; }
|
||||
.fill-icon.brand-secondary {
|
||||
background: whitesmoke; }
|
||||
.fill-icon.brand-primary {
|
||||
background: #4a87ee; }
|
||||
.fill-icon.brand-info {
|
||||
background: #43cee6; }
|
||||
.fill-icon.brand-success {
|
||||
background: #66cc33; }
|
||||
.fill-icon.brand-warning {
|
||||
background: #f0b840; }
|
||||
.fill-icon.brand-danger {
|
||||
background: #ef4e3a; }
|
||||
.fill-icon.brand-dark {
|
||||
background: #444444; }
|
||||
.fill-icon.gray-darker {
|
||||
background: #222222; }
|
||||
.fill-icon.gray-dark {
|
||||
background: #333333; }
|
||||
.fill-icon.gray {
|
||||
background: #555555; }
|
||||
.fill-icon.gray-light {
|
||||
background: #999999; }
|
||||
.fill-icon.gray-lighter {
|
||||
background: #eeeeee; }
|
||||
.fill-icon.white {
|
||||
background: white; }
|
||||
|
||||
.hidden,
|
||||
.hide {
|
||||
display: none !important; }
|
||||
@ -2016,24 +2105,50 @@ a.button {
|
||||
.padding-horizontal {
|
||||
padding-left: 10px; }
|
||||
|
||||
.margin {
|
||||
margin: 10px; }
|
||||
|
||||
.margin-top,
|
||||
.margin-vertical {
|
||||
margin-top: 10px; }
|
||||
|
||||
.margin-right,
|
||||
.margin-horizontal {
|
||||
margin-right: 10px; }
|
||||
|
||||
.margin-bottom,
|
||||
.margin-vertical {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.margin-left,
|
||||
.margin-horizontal {
|
||||
margin-left: 10px; }
|
||||
|
||||
.rounded {
|
||||
border-radius: 4px; }
|
||||
|
||||
.brand-default {
|
||||
color: white; }
|
||||
|
||||
.brand-secondary {
|
||||
color: whitesmoke; }
|
||||
|
||||
.brand-primary {
|
||||
color: #4a87ee; }
|
||||
|
||||
.brand-info {
|
||||
color: #43cee6; }
|
||||
|
||||
.brand-success {
|
||||
color: #66cc33; }
|
||||
|
||||
.brand-warning {
|
||||
color: #f0b840; }
|
||||
|
||||
.brand-danger {
|
||||
color: #ef4e3a; }
|
||||
|
||||
.brand-dark {
|
||||
color: #444444; }
|
||||
|
||||
.black {
|
||||
color: black; }
|
||||
|
||||
.gray-darker {
|
||||
color: #222222; }
|
||||
|
||||
.gray-dark {
|
||||
color: #333333; }
|
||||
|
||||
.gray {
|
||||
color: #555555; }
|
||||
|
||||
.gray-light {
|
||||
color: #999999; }
|
||||
|
||||
.gray-lighter {
|
||||
color: #eeeeee; }
|
||||
|
||||
.white {
|
||||
color: white; }
|
||||
|
||||
174
dist/css/ionic-scoped.css
vendored
174
dist/css/ionic-scoped.css
vendored
@ -160,6 +160,12 @@
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
/**
|
||||
* Left-side icon
|
||||
*/
|
||||
/**
|
||||
* Right-side icon
|
||||
*/
|
||||
/**
|
||||
* The left-side edit area of a complex list item. This area shows
|
||||
* whe the list item is in edit mode.
|
||||
@ -168,9 +174,6 @@
|
||||
* 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.
|
||||
*/
|
||||
@ -1674,15 +1677,17 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: -1px;
|
||||
border-top: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
background-color: white;
|
||||
border: 1px solid #dddddd; }
|
||||
/* // Align icons to the right
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}*/ }
|
||||
.ionic .list-item:last-child {
|
||||
margin-bottom: 0; }
|
||||
.ionic .list-item > .badge {
|
||||
float: right; }
|
||||
.ionic .list-item > i:last-child {
|
||||
float: right; }
|
||||
.ionic .list-item > .badge + .badge {
|
||||
margin-right: 5px; }
|
||||
.ionic .list-item.active, .ionic .list-item.active:hover, .ionic .list-item.active:focus {
|
||||
@ -1807,15 +1812,54 @@
|
||||
.ionic .list-item-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
margin-top: -1px;
|
||||
padding: 15px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.ionic .list-item-content > i:last-child {
|
||||
float: right; }
|
||||
.ionic .list-item-content > .toggle:last-child, .ionic .list-item-content input:last-child, .ionic .list-item-content > button:last-child {
|
||||
float: right; }
|
||||
.ionic .list-item-content > .toggle:last-child {
|
||||
margin-top: -5px; }
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
/* // Align icons
|
||||
> i:first-child {
|
||||
float: left;
|
||||
}
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Make every last form element go to the right of the item
|
||||
|
||||
> .toggle:last-child, input:last-child, > button:last-child {
|
||||
float: right;
|
||||
}
|
||||
> .toggle:last-child {
|
||||
margin-top: -5px;
|
||||
}*/ }
|
||||
.ionic .list-icon-left .list-item-content {
|
||||
padding-left: 60px; }
|
||||
.ionic .list-icon-right .list-item-content {
|
||||
padding-right: 60px; }
|
||||
.ionic .align-icon-left, .ionic .align-icon-right {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
z-index: 3;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 28px; }
|
||||
.ionic .align-icon-left {
|
||||
left: 12px; }
|
||||
.ionic .align-icon-left:after {
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
height: 4px;
|
||||
left: -12px;
|
||||
top: -13px;
|
||||
background: white;
|
||||
content: ' '; }
|
||||
.ionic .list-item:first-child .align-icon-left:after {
|
||||
display: none; }
|
||||
.ionic .item-opened .align-icon-left:after {
|
||||
display: none; }
|
||||
.ionic .align-icon-right {
|
||||
right: 12px; }
|
||||
.ionic .list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
.ionic .list-item-reordering {
|
||||
@ -1872,14 +1916,6 @@
|
||||
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;
|
||||
@ -2214,16 +2250,23 @@
|
||||
.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 {
|
||||
.ionic .radio-buttton-list .radio-button-icon {
|
||||
/* checkmark icon will be hidden by default */
|
||||
visibility: hidden; }
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
visibility: hidden;
|
||||
padding: 13px;
|
||||
height: 100%;
|
||||
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 content when its checked */
|
||||
background: #f7f7f7; }
|
||||
.ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
|
||||
.ionic .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
|
||||
/* show the checkmark icon when its checked */
|
||||
visibility: visible; }
|
||||
.ionic input[type="range"] {
|
||||
@ -2623,6 +2666,45 @@
|
||||
opacity: 0;
|
||||
animation: fadein 0.5s;
|
||||
-webkit-animation: fadein 0.5s; }
|
||||
.ionic .fill-icon {
|
||||
background: black;
|
||||
color: white !important;
|
||||
border-radius: 6px; }
|
||||
.ionic .fill-icon.align-icon-left, .ionic .fill-icon.align-icon-right {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding: 4px 3px;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
font-size: 24px; }
|
||||
.ionic .fill-icon.brand-default {
|
||||
background: white; }
|
||||
.ionic .fill-icon.brand-secondary {
|
||||
background: whitesmoke; }
|
||||
.ionic .fill-icon.brand-primary {
|
||||
background: #4a87ee; }
|
||||
.ionic .fill-icon.brand-info {
|
||||
background: #43cee6; }
|
||||
.ionic .fill-icon.brand-success {
|
||||
background: #66cc33; }
|
||||
.ionic .fill-icon.brand-warning {
|
||||
background: #f0b840; }
|
||||
.ionic .fill-icon.brand-danger {
|
||||
background: #ef4e3a; }
|
||||
.ionic .fill-icon.brand-dark {
|
||||
background: #444444; }
|
||||
.ionic .fill-icon.gray-darker {
|
||||
background: #222222; }
|
||||
.ionic .fill-icon.gray-dark {
|
||||
background: #333333; }
|
||||
.ionic .fill-icon.gray {
|
||||
background: #555555; }
|
||||
.ionic .fill-icon.gray-light {
|
||||
background: #999999; }
|
||||
.ionic .fill-icon.gray-lighter {
|
||||
background: #eeeeee; }
|
||||
.ionic .fill-icon.white {
|
||||
background: white; }
|
||||
.ionic .hidden,
|
||||
.ionic .hide {
|
||||
display: none !important; }
|
||||
@ -2653,22 +2735,38 @@
|
||||
.ionic .padding-left,
|
||||
.ionic .padding-horizontal {
|
||||
padding-left: 10px; }
|
||||
.ionic .margin {
|
||||
margin: 10px; }
|
||||
.ionic .margin-top,
|
||||
.ionic .margin-vertical {
|
||||
margin-top: 10px; }
|
||||
.ionic .margin-right,
|
||||
.ionic .margin-horizontal {
|
||||
margin-right: 10px; }
|
||||
.ionic .margin-bottom,
|
||||
.ionic .margin-vertical {
|
||||
margin-bottom: 10px; }
|
||||
.ionic .margin-left,
|
||||
.ionic .margin-horizontal {
|
||||
margin-left: 10px; }
|
||||
.ionic .rounded {
|
||||
border-radius: 4px; }
|
||||
.ionic .brand-default {
|
||||
color: white; }
|
||||
.ionic .brand-secondary {
|
||||
color: whitesmoke; }
|
||||
.ionic .brand-primary {
|
||||
color: #4a87ee; }
|
||||
.ionic .brand-info {
|
||||
color: #43cee6; }
|
||||
.ionic .brand-success {
|
||||
color: #66cc33; }
|
||||
.ionic .brand-warning {
|
||||
color: #f0b840; }
|
||||
.ionic .brand-danger {
|
||||
color: #ef4e3a; }
|
||||
.ionic .brand-dark {
|
||||
color: #444444; }
|
||||
.ionic .black {
|
||||
color: black; }
|
||||
.ionic .gray-darker {
|
||||
color: #222222; }
|
||||
.ionic .gray-dark {
|
||||
color: #333333; }
|
||||
.ionic .gray {
|
||||
color: #555555; }
|
||||
.ionic .gray-light {
|
||||
color: #999999; }
|
||||
.ionic .gray-lighter {
|
||||
color: #eeeeee; }
|
||||
.ionic .white {
|
||||
color: white; }
|
||||
.ionic .platform-ios7 .bar-header {
|
||||
height: 64px; }
|
||||
.ionic .platform-ios7 .bar-header > * {
|
||||
|
||||
203
dist/css/ionic.css
vendored
203
dist/css/ionic.css
vendored
@ -2072,15 +2072,17 @@ address {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: -1px;
|
||||
border-top: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
background-color: white;
|
||||
border: 1px solid #dddddd; }
|
||||
/* // Align icons to the right
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}*/ }
|
||||
.list-item:last-child {
|
||||
margin-bottom: 0; }
|
||||
.list-item > .badge {
|
||||
float: right; }
|
||||
.list-item > i:last-child {
|
||||
float: right; }
|
||||
.list-item > .badge + .badge {
|
||||
margin-right: 5px; }
|
||||
.list-item.active, .list-item.active:hover, .list-item.active:focus {
|
||||
@ -2217,15 +2219,67 @@ a.list-item {
|
||||
.list-item-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
margin-top: -1px;
|
||||
padding: 15px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.list-item-content > i:last-child {
|
||||
float: right; }
|
||||
.list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
|
||||
float: right; }
|
||||
.list-item-content > .toggle:last-child {
|
||||
margin-top: -5px; }
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
/* // Align icons
|
||||
> i:first-child {
|
||||
float: left;
|
||||
}
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Make every last form element go to the right of the item
|
||||
|
||||
> .toggle:last-child, input:last-child, > button:last-child {
|
||||
float: right;
|
||||
}
|
||||
> .toggle:last-child {
|
||||
margin-top: -5px;
|
||||
}*/ }
|
||||
|
||||
/**
|
||||
* Left-side icon
|
||||
*/
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: 60px; }
|
||||
|
||||
/**
|
||||
* Right-side icon
|
||||
*/
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: 60px; }
|
||||
|
||||
.align-icon-left, .align-icon-right {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
z-index: 3;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 28px; }
|
||||
|
||||
.align-icon-left {
|
||||
left: 12px; }
|
||||
.align-icon-left:after {
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
height: 4px;
|
||||
left: -12px;
|
||||
top: -13px;
|
||||
background: white;
|
||||
content: ' '; }
|
||||
|
||||
.list-item:first-child .align-icon-left:after {
|
||||
display: none; }
|
||||
|
||||
.item-opened .align-icon-left:after {
|
||||
display: none; }
|
||||
|
||||
.align-icon-right {
|
||||
right: 12px; }
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
@ -2297,18 +2351,6 @@ 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.
|
||||
*/
|
||||
@ -2705,9 +2747,16 @@ input[type="checkbox"][readonly] {
|
||||
/* give some room to the right for the checkmark icon */
|
||||
padding-right: 60px; }
|
||||
|
||||
.radio-buttton-list .list-item-icon {
|
||||
.radio-buttton-list .radio-button-icon {
|
||||
/* checkmark icon will be hidden by default */
|
||||
visibility: hidden; }
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
visibility: hidden;
|
||||
padding: 13px;
|
||||
height: 100%;
|
||||
font-size: 24px; }
|
||||
|
||||
.radio-buttton-list input[type="radio"] {
|
||||
/* hide any radio button inputs elements (the ugly circles) */
|
||||
@ -2715,7 +2764,7 @@ input[type="checkbox"][readonly] {
|
||||
.radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
|
||||
/* style the list item content when its checked */
|
||||
background: #f7f7f7; }
|
||||
.radio-buttton-list input[type="radio"]:checked ~ .list-item-icon {
|
||||
.radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
|
||||
/* show the checkmark icon when its checked */
|
||||
visibility: visible; }
|
||||
|
||||
@ -3198,6 +3247,46 @@ a.button {
|
||||
animation: fadein 0.5s;
|
||||
-webkit-animation: fadein 0.5s; }
|
||||
|
||||
.fill-icon {
|
||||
background: black;
|
||||
color: white !important;
|
||||
border-radius: 6px; }
|
||||
.fill-icon.align-icon-left, .fill-icon.align-icon-right {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding: 4px 3px;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
font-size: 24px; }
|
||||
.fill-icon.brand-default {
|
||||
background: white; }
|
||||
.fill-icon.brand-secondary {
|
||||
background: whitesmoke; }
|
||||
.fill-icon.brand-primary {
|
||||
background: #4a87ee; }
|
||||
.fill-icon.brand-info {
|
||||
background: #43cee6; }
|
||||
.fill-icon.brand-success {
|
||||
background: #66cc33; }
|
||||
.fill-icon.brand-warning {
|
||||
background: #f0b840; }
|
||||
.fill-icon.brand-danger {
|
||||
background: #ef4e3a; }
|
||||
.fill-icon.brand-dark {
|
||||
background: #444444; }
|
||||
.fill-icon.gray-darker {
|
||||
background: #222222; }
|
||||
.fill-icon.gray-dark {
|
||||
background: #333333; }
|
||||
.fill-icon.gray {
|
||||
background: #555555; }
|
||||
.fill-icon.gray-light {
|
||||
background: #999999; }
|
||||
.fill-icon.gray-lighter {
|
||||
background: #eeeeee; }
|
||||
.fill-icon.white {
|
||||
background: white; }
|
||||
|
||||
.hidden,
|
||||
.hide {
|
||||
display: none !important; }
|
||||
@ -3237,28 +3326,54 @@ a.button {
|
||||
.padding-horizontal {
|
||||
padding-left: 10px; }
|
||||
|
||||
.margin {
|
||||
margin: 10px; }
|
||||
|
||||
.margin-top,
|
||||
.margin-vertical {
|
||||
margin-top: 10px; }
|
||||
|
||||
.margin-right,
|
||||
.margin-horizontal {
|
||||
margin-right: 10px; }
|
||||
|
||||
.margin-bottom,
|
||||
.margin-vertical {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.margin-left,
|
||||
.margin-horizontal {
|
||||
margin-left: 10px; }
|
||||
|
||||
.rounded {
|
||||
border-radius: 4px; }
|
||||
|
||||
.brand-default {
|
||||
color: white; }
|
||||
|
||||
.brand-secondary {
|
||||
color: whitesmoke; }
|
||||
|
||||
.brand-primary {
|
||||
color: #4a87ee; }
|
||||
|
||||
.brand-info {
|
||||
color: #43cee6; }
|
||||
|
||||
.brand-success {
|
||||
color: #66cc33; }
|
||||
|
||||
.brand-warning {
|
||||
color: #f0b840; }
|
||||
|
||||
.brand-danger {
|
||||
color: #ef4e3a; }
|
||||
|
||||
.brand-dark {
|
||||
color: #444444; }
|
||||
|
||||
.black {
|
||||
color: black; }
|
||||
|
||||
.gray-darker {
|
||||
color: #222222; }
|
||||
|
||||
.gray-dark {
|
||||
color: #333333; }
|
||||
|
||||
.gray {
|
||||
color: #555555; }
|
||||
|
||||
.gray-light {
|
||||
color: #999999; }
|
||||
|
||||
.gray-lighter {
|
||||
color: #eeeeee; }
|
||||
|
||||
.white {
|
||||
color: white; }
|
||||
|
||||
.platform-ios7 .bar-header {
|
||||
height: 64px; }
|
||||
.platform-ios7 .bar-header > * {
|
||||
|
||||
@ -39,4 +39,5 @@
|
||||
"../ionic/animations",
|
||||
|
||||
// Util
|
||||
"../ionic/icons",
|
||||
"../ionic/util";
|
||||
|
||||
62
scss/ionic/_icons.scss
Normal file
62
scss/ionic/_icons.scss
Normal file
@ -0,0 +1,62 @@
|
||||
|
||||
|
||||
.fill-icon {
|
||||
background: black;
|
||||
color: white !important;
|
||||
border-radius: $icon-fill-border-radius;
|
||||
|
||||
&.align-icon-left,
|
||||
&.align-icon-right {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding: 4px 3px;
|
||||
width: $icon-font-size + 2;
|
||||
height: $icon-font-size + 3;
|
||||
font-size: $icon-font-size - 4;
|
||||
}
|
||||
|
||||
&.brand-default {
|
||||
background: $brand-default;
|
||||
}
|
||||
&.brand-secondary {
|
||||
background: $brand-secondary;
|
||||
}
|
||||
&.brand-primary {
|
||||
background: $brand-primary;
|
||||
}
|
||||
&.brand-info {
|
||||
background: $brand-info;
|
||||
}
|
||||
&.brand-success {
|
||||
background: $brand-success;
|
||||
}
|
||||
&.brand-warning {
|
||||
background: $brand-warning;
|
||||
}
|
||||
&.brand-danger {
|
||||
background: $brand-danger;
|
||||
}
|
||||
&.brand-dark {
|
||||
background: $brand-dark;
|
||||
}
|
||||
|
||||
&.gray-darker {
|
||||
background: $gray-darker;
|
||||
}
|
||||
&.gray-dark {
|
||||
background: $gray-dark;
|
||||
}
|
||||
&.gray {
|
||||
background: $gray;
|
||||
}
|
||||
&.gray-light {
|
||||
background: $gray-light;
|
||||
}
|
||||
&.gray-lighter {
|
||||
background: $gray-lighter;
|
||||
}
|
||||
&.white {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
}
|
||||
@ -19,14 +19,14 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: -1px;
|
||||
margin-bottom: $list-item-border-width * -1;
|
||||
border-top: $list-item-border-width solid $list-item-border-color;
|
||||
|
||||
// Make sure the borders and stuff don't get hidden
|
||||
// by children
|
||||
z-index: 2;
|
||||
|
||||
background-color: $list-default-background;
|
||||
border: $list-item-border;
|
||||
|
||||
// Round the first and last items
|
||||
&:first-child {
|
||||
@ -42,10 +42,10 @@
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Align icons to the right
|
||||
/* // Align icons to the right
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
}*/
|
||||
|
||||
> .badge + .badge {
|
||||
margin-right: 5px;
|
||||
@ -119,16 +119,19 @@ a.list-item {
|
||||
*/
|
||||
.list-item-content {
|
||||
position: relative;
|
||||
|
||||
background-color: #fff;
|
||||
border: $list-item-border-width solid $list-item-border-color;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
margin-top: $list-item-border-width * -1;
|
||||
padding: $list-item-padding;
|
||||
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
|
||||
// Align icons to the right
|
||||
/* // Align icons
|
||||
> i:first-child {
|
||||
float: left;
|
||||
}
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
@ -140,8 +143,56 @@ a.list-item {
|
||||
}
|
||||
> .toggle:last-child {
|
||||
margin-top: -5px;
|
||||
}*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Left-side icon
|
||||
*/
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: $list-item-padding * 4;
|
||||
}
|
||||
|
||||
/**
|
||||
* Right-side icon
|
||||
*/
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: $list-item-padding * 4;
|
||||
}
|
||||
|
||||
.align-icon-left, .align-icon-right {
|
||||
position: absolute;
|
||||
top: $list-item-padding - 4;
|
||||
z-index: 3;
|
||||
width: $icon-font-size + 4;
|
||||
height: $icon-font-size + 4;
|
||||
font-size: $icon-font-size;
|
||||
}
|
||||
|
||||
.align-icon-left {
|
||||
left: ($list-item-padding - 3);
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
width: $icon-font-size * 2;
|
||||
height: 4px;
|
||||
left: ($list-item-padding - 3) * -1;
|
||||
top: ($list-item-padding * -1) + 2;
|
||||
background: $list-default-background;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
.list-item:first-child .align-icon-left:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-opened .align-icon-left:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.align-icon-right {
|
||||
right: $list-item-padding - 3;
|
||||
}
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out;
|
||||
@ -233,20 +284,6 @@ 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.
|
||||
*/
|
||||
|
||||
@ -7,9 +7,16 @@
|
||||
padding-right: $list-item-padding * 4;
|
||||
}
|
||||
|
||||
.radio-buttton-list .list-item-icon {
|
||||
.radio-buttton-list .radio-button-icon {
|
||||
/* checkmark icon will be hidden by default */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
visibility: hidden;
|
||||
padding: $list-item-padding - 2;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.radio-buttton-list input[type="radio"] {
|
||||
@ -21,7 +28,7 @@
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
&:checked ~ .list-item-icon {
|
||||
&:checked ~ .radio-button-icon {
|
||||
/* show the checkmark icon when its checked */
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@ -50,37 +50,60 @@
|
||||
}
|
||||
|
||||
|
||||
// Inset Margin
|
||||
// -------------------------------
|
||||
|
||||
.margin {
|
||||
margin: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-top,
|
||||
.margin-vertical {
|
||||
margin-top: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-right,
|
||||
.margin-horizontal {
|
||||
margin-right: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-bottom,
|
||||
.margin-vertical {
|
||||
margin-bottom: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-left,
|
||||
.margin-horizontal {
|
||||
margin-left: $inset-margin;
|
||||
}
|
||||
|
||||
|
||||
// Rounded
|
||||
// -------------------------------
|
||||
|
||||
.rounded {
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
|
||||
// Colors
|
||||
// -------------------------------
|
||||
|
||||
.brand-default {
|
||||
color: $brand-default;
|
||||
}
|
||||
.brand-secondary {
|
||||
color: $brand-secondary;
|
||||
}
|
||||
.brand-primary {
|
||||
color: $brand-primary;
|
||||
}
|
||||
.brand-info {
|
||||
color: $brand-info;
|
||||
}
|
||||
.brand-success {
|
||||
color: $brand-success;
|
||||
}
|
||||
.brand-warning {
|
||||
color: $brand-warning;
|
||||
}
|
||||
.brand-danger {
|
||||
color: $brand-danger;
|
||||
}
|
||||
.brand-dark {
|
||||
color: $brand-dark;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: $black;
|
||||
}
|
||||
.gray-darker {
|
||||
color: $gray-darker;
|
||||
}
|
||||
.gray-dark {
|
||||
color: $gray-dark;
|
||||
}
|
||||
.gray {
|
||||
color: $gray;
|
||||
}
|
||||
.gray-light {
|
||||
color: $gray-light;
|
||||
}
|
||||
.gray-lighter {
|
||||
color: $gray-lighter;
|
||||
}
|
||||
.white {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
@ -62,7 +62,6 @@ $base-font-family: $sans-font-family;
|
||||
$base-background-color: $white;
|
||||
$base-color: #000;
|
||||
$content-padding: 10px !default;
|
||||
$inset-margin: 10px;
|
||||
$border-radius-base: 4px !default;
|
||||
$border-radius-large: 6px !default;
|
||||
$border-radius-small: 3px !default;
|
||||
@ -338,10 +337,11 @@ $tabs-dark-border-color: $button-dark-border;
|
||||
// Lists
|
||||
// -------------------------------
|
||||
|
||||
$list-divider-bg: #f5f5f5;
|
||||
$list-divider-color: #222;
|
||||
$list-item-border: 1px solid #ddd;
|
||||
$list-item-padding: 15px !default;
|
||||
$list-divider-bg: #f5f5f5;
|
||||
$list-divider-color: #222;
|
||||
$list-item-border-width: 1px !default;
|
||||
$list-item-border-color: #ddd;
|
||||
$list-item-padding: 15px !default;
|
||||
|
||||
$list-default-background: $brand-default;
|
||||
$list-default-border: #ddd;
|
||||
@ -368,6 +368,13 @@ $list-dark-background: $brand-dark;
|
||||
$list-dark-border: $brand-dark;
|
||||
|
||||
|
||||
// Icons
|
||||
// -------------------------------
|
||||
|
||||
$icon-font-size: 28px !default;
|
||||
$icon-fill-border-radius: 6px !default;
|
||||
|
||||
|
||||
// Menus
|
||||
// -------------------------------
|
||||
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
"animations",
|
||||
|
||||
// Util
|
||||
"icons",
|
||||
"util",
|
||||
"platform";
|
||||
|
||||
|
||||
@ -46,5 +46,6 @@
|
||||
"animations",
|
||||
|
||||
// Util
|
||||
"icons",
|
||||
"util",
|
||||
"platform";
|
||||
|
||||
@ -52,6 +52,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="padding">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<div class="list-item-content">
|
||||
Go
|
||||
</div>
|
||||
<div class="list-item-icon icon-checkmark"></div>
|
||||
<div class="radio-button-icon icon-checkmark"></div>
|
||||
</label>
|
||||
|
||||
<label class="list-item">
|
||||
@ -36,7 +36,7 @@
|
||||
<div class="list-item-content">
|
||||
Python
|
||||
</div>
|
||||
<div class="list-item-icon icon-checkmark"></div>
|
||||
<div class="radio-button-icon icon-checkmark"></div>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
279
test/lists.html
279
test/lists.html
@ -5,90 +5,219 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Customers</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Customers</h1>
|
||||
</header>
|
||||
<main class="content-wrapper">
|
||||
<div class="content has-header">
|
||||
|
||||
<div class="list">
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content">
|
||||
Madison, WI
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-right">
|
||||
Driving Directions
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Settings
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<main class="content-wrapper">
|
||||
<div class="content has-header">
|
||||
<ul id="list" class="list">
|
||||
<li href="#" class="list-item">
|
||||
<div class="list-item-content">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button button-danger">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<li class="list-divider">Other things</li>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<div class="list padding">
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content slide-right">
|
||||
Madison, WI
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content slide-left">
|
||||
Driving Directions
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content">
|
||||
Settings
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding-bottom">
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content slide-left">
|
||||
<i class="align-icon-left icon-heart brand-danger"></i>
|
||||
Madison, WI asdf
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content slide-right">
|
||||
<i class="align-icon-left icon-image brand-warning"></i>
|
||||
Driving Directions
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="align-icon-left icon-ios7-cog gray"></i>
|
||||
Settings
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding-bottom">
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="align-icon-left icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-left">
|
||||
<i class="align-icon-left icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-right">
|
||||
<i class="align-icon-left icon-ios7-cog gray fill-icon"></i>
|
||||
Settings
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding">
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="align-icon-left icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="align-icon-left icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-left slide-right">
|
||||
<i class="align-icon-left icon-ios7-cog gray fill-icon"></i>
|
||||
Settings
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
<button class="button button-secondary" id="btn-test-right">Test Slide Right</button>
|
||||
<button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
<a class="button button-secondary" href="index.html">Homepage</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script>
|
||||
var l = document.getElementById('list');
|
||||
var list = new ionic.views.List({el: l});
|
||||
$("#btn-test-left").click(function(){
|
||||
|
||||
if(this.isLeft) {
|
||||
// back to normal
|
||||
this.isLeft = false;
|
||||
$(".slide-left").css({
|
||||
left: "0"
|
||||
})
|
||||
$(".list").removeClass("item-opened");
|
||||
} else {
|
||||
// open
|
||||
this.isLeft = true;
|
||||
$(".slide-left").css({
|
||||
left: "-72px"
|
||||
})
|
||||
$(".list").addClass("item-opened");
|
||||
}
|
||||
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#btn-test-right").click(function(){
|
||||
|
||||
if(this.isRight) {
|
||||
// back to normal
|
||||
this.isRight = false;
|
||||
$(".slide-right").css({
|
||||
left: "0"
|
||||
})
|
||||
$(".list").removeClass("item-opened");
|
||||
} else {
|
||||
// open
|
||||
this.isRight = true;
|
||||
$(".slide-right").css({
|
||||
left: "72px"
|
||||
})
|
||||
$(".list").addClass("item-opened");
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user