mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
1px border lists on retina
This commit is contained in:
Adam Bradley
130
dist/css/ionic-ios7.css
vendored
130
dist/css/ionic-ios7.css
vendored
@ -946,46 +946,24 @@ address {
|
||||
height: 100%; }
|
||||
|
||||
.list {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #333333;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.list:hover {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
.list.active, .list:active {
|
||||
background-color: #ebebeb;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
||||
border-color: #c4c4c4; }
|
||||
.list.list-success {
|
||||
color: white;
|
||||
background-color: #66cc33;
|
||||
border-color: #66cc33; }
|
||||
.list.list-success:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.list.list-success.active, .list.list-success:active {
|
||||
background-color: #56ab2b;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
||||
border-color: #52a329; }
|
||||
margin-bottom: 20px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 0; }
|
||||
|
||||
/**
|
||||
* An individual list item.
|
||||
*/
|
||||
.list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: -1px;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
border-top: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
background-color: white; }
|
||||
.list-item:last-child {
|
||||
margin-bottom: 0; }
|
||||
display: block;
|
||||
margin: -1px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
.list-item .badge {
|
||||
float: right; }
|
||||
.list-item .badge + .badge {
|
||||
@ -1110,8 +1088,8 @@ a.list-item {
|
||||
* "edit mode"
|
||||
*/
|
||||
.list-editing .list-item-content {
|
||||
margin-left: 30px;
|
||||
margin-right: 30px; }
|
||||
margin-right: 30px;
|
||||
margin-left: 30px; }
|
||||
.list-editing .list-item-edit {
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
@ -1123,11 +1101,11 @@ a.list-item {
|
||||
*/
|
||||
.list-item-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
margin-top: -1px;
|
||||
padding: 15px 45px 15px 15px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
|
||||
@ -1214,9 +1192,9 @@ button.list-icon-right .list-item-content:after {
|
||||
*/
|
||||
.list-item-edit {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: -48px;
|
||||
top: 0;
|
||||
left: -48px;
|
||||
z-index: 0;
|
||||
width: 48px;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
@ -1228,30 +1206,30 @@ button.list-icon-right .list-item-content:after {
|
||||
color: #ef4e3a;
|
||||
font-size: 24px; }
|
||||
.list-item-edit.ng-enter {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: -48px;
|
||||
opacity: 0;
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
|
||||
.list-item-edit.ng-enter-active {
|
||||
left: 0;
|
||||
opacity: 1; }
|
||||
.list-item-edit.ng-leave {
|
||||
left: 0px;
|
||||
opacity: 1;
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
|
||||
.list-item-edit.ng-leave-active {
|
||||
left: -48px;
|
||||
opacity: 0; }
|
||||
.list-item-edit.ng-enter-active {
|
||||
opacity: 1;
|
||||
left: 0; }
|
||||
.list-item-edit.ng-leave {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
.list-item-edit.ng-leave-active {
|
||||
opacity: 0;
|
||||
left: -48px; }
|
||||
|
||||
.list-item-drag {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
height: 100%; }
|
||||
.list-item-drag .button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: none; }
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
|
||||
/**
|
||||
* The hidden right-side buttons that can be exposed under a list item
|
||||
@ -1259,21 +1237,21 @@ button.list-icon-right .list-item-content:after {
|
||||
*/
|
||||
.list-item-buttons {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%; }
|
||||
.list-item-buttons .button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: none; }
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
|
||||
/**
|
||||
* A list header.
|
||||
*/
|
||||
.list-header {
|
||||
padding: 5px 15px;
|
||||
margin-top: 20px;
|
||||
padding: 5px 15px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
@ -1282,28 +1260,29 @@ button.list-icon-right .list-item-content:after {
|
||||
* A list divider.
|
||||
*/
|
||||
.list-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.list-divider,
|
||||
.list-header {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px; }
|
||||
.card.list .list-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
|
||||
.padding .list-divider,
|
||||
.padding .list-heading {
|
||||
border-left: 1px solid #dddddd;
|
||||
border-right: 1px solid #dddddd; }
|
||||
.card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
|
||||
/**
|
||||
* List refreser elements
|
||||
*/
|
||||
.list-refresher {
|
||||
background-color: red;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
overflow: hidden; }
|
||||
background-color: red; }
|
||||
|
||||
form {
|
||||
margin: 0 0 1.42857; }
|
||||
@ -1479,7 +1458,6 @@ input[type="file"] {
|
||||
line-height: 34px; }
|
||||
|
||||
select {
|
||||
width: 220px;
|
||||
border: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
|
||||
@ -1973,14 +1951,16 @@ a.button {
|
||||
color: #3a87ad; }
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
margin: 10px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #dddddd; }
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
background-color: white; }
|
||||
border-bottom: 1px solid #dddddd;
|
||||
background-color: #eeeeee; }
|
||||
.card-header.card-header-secondary {
|
||||
background-color: whitesmoke; }
|
||||
.card-header.card-header-primary {
|
||||
@ -2000,7 +1980,9 @@ a.button {
|
||||
padding: 10px; }
|
||||
|
||||
.card-footer {
|
||||
padding: 10px; }
|
||||
padding: 10px;
|
||||
border-top: 1px solid #dddddd;
|
||||
background-color: #eeeeee; }
|
||||
|
||||
.slide-in-up {
|
||||
opacity: 0;
|
||||
|
||||
130
dist/css/ionic-scoped.css
vendored
130
dist/css/ionic-scoped.css
vendored
@ -1675,42 +1675,20 @@
|
||||
.ionic .modal.active {
|
||||
height: 100%; }
|
||||
.ionic .list {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #333333;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.ionic .list:hover {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
.ionic .list.active, .ionic .list:active {
|
||||
background-color: #ebebeb;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
||||
border-color: #c4c4c4; }
|
||||
.ionic .list.list-success {
|
||||
color: white;
|
||||
background-color: #66cc33;
|
||||
border-color: #66cc33; }
|
||||
.ionic .list.list-success:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.ionic .list.list-success.active, .ionic .list.list-success:active {
|
||||
background-color: #56ab2b;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
||||
border-color: #52a329; }
|
||||
margin-bottom: 20px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 0; }
|
||||
.ionic .list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: -1px;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
border-top: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
background-color: white; }
|
||||
.ionic .list-item:last-child {
|
||||
margin-bottom: 0; }
|
||||
display: block;
|
||||
margin: -1px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
.ionic .list-item .badge {
|
||||
float: right; }
|
||||
.ionic .list-item .badge + .badge {
|
||||
@ -1829,18 +1807,18 @@
|
||||
.ionic a.list-item:hover, .ionic a.list-item:focus {
|
||||
text-decoration: none; }
|
||||
.ionic .list-editing .list-item-content {
|
||||
margin-left: 30px;
|
||||
margin-right: 30px; }
|
||||
margin-right: 30px;
|
||||
margin-left: 30px; }
|
||||
.ionic .list-editing .list-item-edit {
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
.ionic .list-item-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
margin-top: -1px;
|
||||
padding: 15px 45px 15px 15px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
font-size: 16px;
|
||||
-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 {
|
||||
@ -1910,9 +1888,9 @@
|
||||
opacity: 0.7; }
|
||||
.ionic .list-item-edit {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: -48px;
|
||||
top: 0;
|
||||
left: -48px;
|
||||
z-index: 0;
|
||||
width: 48px;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
@ -1924,62 +1902,63 @@
|
||||
color: #ef4e3a;
|
||||
font-size: 24px; }
|
||||
.ionic .list-item-edit.ng-enter {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: -48px;
|
||||
opacity: 0;
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
|
||||
.ionic .list-item-edit.ng-enter-active {
|
||||
left: 0;
|
||||
opacity: 1; }
|
||||
.ionic .list-item-edit.ng-leave {
|
||||
left: 0px;
|
||||
opacity: 1;
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
|
||||
.ionic .list-item-edit.ng-leave-active {
|
||||
left: -48px;
|
||||
opacity: 0; }
|
||||
.ionic .list-item-edit.ng-enter-active {
|
||||
opacity: 1;
|
||||
left: 0; }
|
||||
.ionic .list-item-edit.ng-leave {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
.ionic .list-item-edit.ng-leave-active {
|
||||
opacity: 0;
|
||||
left: -48px; }
|
||||
.ionic .list-item-drag {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
height: 100%; }
|
||||
.ionic .list-item-drag .button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: none; }
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
.ionic .list-item-buttons {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%; }
|
||||
.ionic .list-item-buttons .button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: none; }
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
.ionic .list-header {
|
||||
padding: 5px 15px;
|
||||
margin-top: 20px;
|
||||
padding: 5px 15px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
.ionic .list-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
.ionic .list-divider,
|
||||
.ionic .list-header {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px; }
|
||||
.ionic .padding .list-divider,
|
||||
.ionic .padding .list-heading {
|
||||
border-left: 1px solid #dddddd;
|
||||
border-right: 1px solid #dddddd; }
|
||||
.ionic .card.list .list-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.ionic .card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
.ionic .list-refresher {
|
||||
background-color: red;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
overflow: hidden; }
|
||||
background-color: red; }
|
||||
.ionic form {
|
||||
margin: 0 0 1.42857; }
|
||||
.ionic legend {
|
||||
@ -2135,7 +2114,6 @@
|
||||
.ionic input[type="file"] {
|
||||
line-height: 34px; }
|
||||
.ionic select {
|
||||
width: 220px;
|
||||
border: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
.ionic select[multiple],
|
||||
@ -2650,13 +2628,15 @@
|
||||
.ionic .alert-info h4 {
|
||||
color: #3a87ad; }
|
||||
.ionic .card {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
margin: 10px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #dddddd; }
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
.ionic .card-header {
|
||||
padding: 10px;
|
||||
background-color: white; }
|
||||
border-bottom: 1px solid #dddddd;
|
||||
background-color: #eeeeee; }
|
||||
.ionic .card-header.card-header-secondary {
|
||||
background-color: whitesmoke; }
|
||||
.ionic .card-header.card-header-primary {
|
||||
@ -2674,7 +2654,9 @@
|
||||
.ionic .card-body {
|
||||
padding: 10px; }
|
||||
.ionic .card-footer {
|
||||
padding: 10px; }
|
||||
padding: 10px;
|
||||
border-top: 1px solid #dddddd;
|
||||
background-color: #eeeeee; }
|
||||
.ionic .slide-in-up {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
|
||||
130
dist/css/ionic.css
vendored
130
dist/css/ionic.css
vendored
@ -2089,46 +2089,24 @@ address {
|
||||
color: #fff; }
|
||||
|
||||
.list {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #333333;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.list:hover {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
.list.active, .list:active {
|
||||
background-color: #ebebeb;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
||||
border-color: #c4c4c4; }
|
||||
.list.list-success {
|
||||
color: white;
|
||||
background-color: #66cc33;
|
||||
border-color: #66cc33; }
|
||||
.list.list-success:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.list.list-success.active, .list.list-success:active {
|
||||
background-color: #56ab2b;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
||||
border-color: #52a329; }
|
||||
margin-bottom: 20px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 0; }
|
||||
|
||||
/**
|
||||
* An individual list item.
|
||||
*/
|
||||
.list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: -1px;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
border-top: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
background-color: white; }
|
||||
.list-item:last-child {
|
||||
margin-bottom: 0; }
|
||||
display: block;
|
||||
margin: -1px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
.list-item .badge {
|
||||
float: right; }
|
||||
.list-item .badge + .badge {
|
||||
@ -2253,8 +2231,8 @@ a.list-item {
|
||||
* "edit mode"
|
||||
*/
|
||||
.list-editing .list-item-content {
|
||||
margin-left: 30px;
|
||||
margin-right: 30px; }
|
||||
margin-right: 30px;
|
||||
margin-left: 30px; }
|
||||
.list-editing .list-item-edit {
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
@ -2266,11 +2244,11 @@ a.list-item {
|
||||
*/
|
||||
.list-item-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
margin-top: -1px;
|
||||
padding: 15px 45px 15px 15px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
|
||||
@ -2357,9 +2335,9 @@ button.list-icon-right .list-item-content:after {
|
||||
*/
|
||||
.list-item-edit {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: -48px;
|
||||
top: 0;
|
||||
left: -48px;
|
||||
z-index: 0;
|
||||
width: 48px;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
@ -2371,30 +2349,30 @@ button.list-icon-right .list-item-content:after {
|
||||
color: #ef4e3a;
|
||||
font-size: 24px; }
|
||||
.list-item-edit.ng-enter {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: -48px;
|
||||
opacity: 0;
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
|
||||
.list-item-edit.ng-enter-active {
|
||||
left: 0;
|
||||
opacity: 1; }
|
||||
.list-item-edit.ng-leave {
|
||||
left: 0px;
|
||||
opacity: 1;
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
|
||||
.list-item-edit.ng-leave-active {
|
||||
left: -48px;
|
||||
opacity: 0; }
|
||||
.list-item-edit.ng-enter-active {
|
||||
opacity: 1;
|
||||
left: 0; }
|
||||
.list-item-edit.ng-leave {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
.list-item-edit.ng-leave-active {
|
||||
opacity: 0;
|
||||
left: -48px; }
|
||||
|
||||
.list-item-drag {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
height: 100%; }
|
||||
.list-item-drag .button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: none; }
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
|
||||
/**
|
||||
* The hidden right-side buttons that can be exposed under a list item
|
||||
@ -2402,21 +2380,21 @@ button.list-icon-right .list-item-content:after {
|
||||
*/
|
||||
.list-item-buttons {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%; }
|
||||
.list-item-buttons .button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: none; }
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
|
||||
/**
|
||||
* A list header.
|
||||
*/
|
||||
.list-header {
|
||||
padding: 5px 15px;
|
||||
margin-top: 20px;
|
||||
padding: 5px 15px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
@ -2425,28 +2403,29 @@ button.list-icon-right .list-item-content:after {
|
||||
* A list divider.
|
||||
*/
|
||||
.list-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.list-divider,
|
||||
.list-header {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px; }
|
||||
.card.list .list-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
|
||||
.padding .list-divider,
|
||||
.padding .list-heading {
|
||||
border-left: 1px solid #dddddd;
|
||||
border-right: 1px solid #dddddd; }
|
||||
.card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
|
||||
/**
|
||||
* List refreser elements
|
||||
*/
|
||||
.list-refresher {
|
||||
background-color: red;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
overflow: hidden; }
|
||||
background-color: red; }
|
||||
|
||||
form {
|
||||
margin: 0 0 1.42857; }
|
||||
@ -2622,7 +2601,6 @@ input[type="file"] {
|
||||
line-height: 34px; }
|
||||
|
||||
select {
|
||||
width: 220px;
|
||||
border: 1px solid #cccccc;
|
||||
background-color: white; }
|
||||
|
||||
@ -3194,14 +3172,16 @@ a.button {
|
||||
color: #3a87ad; }
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
margin: 10px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #dddddd; }
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
background-color: white; }
|
||||
border-bottom: 1px solid #dddddd;
|
||||
background-color: #eeeeee; }
|
||||
.card-header.card-header-secondary {
|
||||
background-color: whitesmoke; }
|
||||
.card-header.card-header-primary {
|
||||
@ -3221,7 +3201,9 @@ a.button {
|
||||
padding: 10px; }
|
||||
|
||||
.card-footer {
|
||||
padding: 10px; }
|
||||
padding: 10px;
|
||||
border-top: 1px solid #dddddd;
|
||||
background-color: #eeeeee; }
|
||||
|
||||
.slide-box {
|
||||
background-color: #000;
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #ddd;
|
||||
margin: $content-padding;
|
||||
border: none;
|
||||
border-radius: $card-border-radius;
|
||||
|
||||
background-color: $card-body-bg;
|
||||
box-shadow: inset 0 0 $card-border-width #666;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 10px;
|
||||
background-color: $brand-default;
|
||||
padding: $card-padding;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
background-color: $card-header-bg;
|
||||
|
||||
&.card-header-secondary { background-color: $brand-secondary; }
|
||||
&.card-header-primary { background-color: $brand-primary; }
|
||||
@ -19,9 +22,11 @@
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 10px;
|
||||
padding: $card-padding;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 10px;
|
||||
padding: $card-padding;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
background-color: $card-footer-bg;
|
||||
}
|
||||
|
||||
@ -211,7 +211,6 @@ input[type="file"] {
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
border: $input-border-width solid $input-border-color;
|
||||
background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
|
||||
}
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
.list {
|
||||
// No need to set list-style: none; since .list-item is block level
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// No need to set list-style: none; since .list-item is block level
|
||||
margin-bottom: 20px;
|
||||
padding-top: $list-item-border-width;
|
||||
padding-bottom: $list-item-border-width;
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
|
||||
@include list-style($list-default-background, $list-default-border, $gray-dark);
|
||||
|
||||
&.list-success {
|
||||
@include list-style($list-success-background, $list-success-border, $white);
|
||||
}
|
||||
// make room for the list item borders
|
||||
}
|
||||
|
||||
/**
|
||||
@ -18,23 +16,15 @@
|
||||
*/
|
||||
.list-item {
|
||||
position: relative;
|
||||
|
||||
z-index: 2; // Make sure the borders and stuff don't get hidden by children
|
||||
display: block;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: $list-item-border-width * -1;
|
||||
margin-left: $list-item-border-width * -1;
|
||||
margin-right: $list-item-border-width * -1;
|
||||
border-top: $list-item-border-width solid $list-item-border-color;
|
||||
margin: $list-item-border-width * -1;
|
||||
|
||||
|
||||
// Make sure the borders and stuff don't get hidden
|
||||
// by children
|
||||
z-index: 2;
|
||||
border: none;
|
||||
|
||||
background-color: $list-default-background;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
box-shadow: inset 0 0 $list-item-border-width #666;
|
||||
|
||||
// Align badges within list items
|
||||
.badge {
|
||||
@ -77,7 +67,6 @@ a.list-item {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
//background-color: $list-group-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,8 +76,8 @@ a.list-item {
|
||||
*/
|
||||
.list-editing {
|
||||
.list-item-content {
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.list-item-edit {
|
||||
left: 0px;
|
||||
@ -105,12 +94,14 @@ 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;
|
||||
//margin: $list-item-border-width * -1;
|
||||
padding: $list-item-padding ($list-item-padding * 3) $list-item-padding $list-item-padding;
|
||||
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 $list-item-border-width #666;
|
||||
font-size: $list-font-size;
|
||||
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
@ -219,9 +210,9 @@ button.list-icon-right {
|
||||
*/
|
||||
.list-item-edit {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: -48px;
|
||||
top: 0;
|
||||
left: -48px;
|
||||
z-index: 0;
|
||||
width: 48px;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
@ -240,36 +231,36 @@ button.list-icon-right {
|
||||
|
||||
|
||||
&.ng-enter {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: -48px;
|
||||
opacity: 0;
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
}
|
||||
&.ng-enter-active {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
&.ng-leave {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: 0px;
|
||||
opacity: 1;
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
}
|
||||
&.ng-leave-active {
|
||||
opacity: 0;
|
||||
left: -48px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-drag {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
|
||||
.button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
/**
|
||||
@ -278,15 +269,15 @@ button.list-icon-right {
|
||||
*/
|
||||
.list-item-buttons {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
|
||||
.button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -295,8 +286,8 @@ button.list-icon-right {
|
||||
* A list header.
|
||||
*/
|
||||
.list-header {
|
||||
padding: $list-header-padding;
|
||||
margin-top: $list-header-margin-top;
|
||||
padding: $list-header-padding;
|
||||
background-color: $list-header-bg;
|
||||
color: $list-header-color;
|
||||
font-weight: bold;
|
||||
@ -307,33 +298,40 @@ button.list-icon-right {
|
||||
* A list divider.
|
||||
*/
|
||||
.list-divider {
|
||||
margin: $list-item-border-width * -1;
|
||||
padding: $list-divider-padding;
|
||||
border: none;
|
||||
background-color: $list-divider-bg;
|
||||
box-shadow: inset 0 0 $list-item-border-width #666;
|
||||
color: $list-divider-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.card.list .list-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// inset so they layout the same as list items
|
||||
.list-divider,
|
||||
.list-header {
|
||||
margin-left: $list-item-border-width * -1;
|
||||
margin-right: $list-item-border-width * -1;
|
||||
//margin-left: $list-item-border-width * -1;
|
||||
//margin-right: $list-item-border-width * -1;
|
||||
}
|
||||
|
||||
// make sure these have left/right borders when inset
|
||||
.padding .list-divider,
|
||||
.padding .list-heading {
|
||||
border-left: $list-item-border-width solid $list-item-border-color;
|
||||
border-right: $list-item-border-width solid $list-item-border-color;
|
||||
|
||||
// when its a card make sure it doesn't duplicate top and bottom borders
|
||||
.card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
/**
|
||||
* List refreser elements
|
||||
*/
|
||||
.list-refresher {
|
||||
background-color: red;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red;
|
||||
}
|
||||
.list-refreshing {
|
||||
}
|
||||
|
||||
@ -399,6 +399,18 @@ $menu-width: 270px;
|
||||
$menu-animation-speed: 200ms;
|
||||
|
||||
|
||||
// Cards
|
||||
// -------------------------------
|
||||
|
||||
$card-header-bg: #eee;
|
||||
$card-body-bg: #fff;
|
||||
$card-footer-bg: #eee;
|
||||
$card-padding: 10px !default;
|
||||
$card-border-width: 1px !default;
|
||||
$card-border-color: #ddd;
|
||||
$card-border-radius: 2px !default;
|
||||
|
||||
|
||||
// Modals
|
||||
// -------------------------------
|
||||
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@ -17,14 +16,37 @@
|
||||
</header>
|
||||
|
||||
<main class="content padding has-header">
|
||||
todo
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card Header
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Card Body
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Card Footer
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card Header
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Card Body
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Card Footer
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@ -16,17 +15,32 @@
|
||||
<h1 class="title">Input: Select</h1>
|
||||
</header>
|
||||
|
||||
<main class="content has-header">
|
||||
<main class="content has-header padding">
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item">
|
||||
<p>
|
||||
<select name="select">
|
||||
<option>HTML</option>
|
||||
<option>CSS</option>
|
||||
<option>JavaScript</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select name="select">
|
||||
<option>January</option>
|
||||
<option>February</option>
|
||||
</select>
|
||||
<select name="select">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
</select>
|
||||
<select name="select">
|
||||
<option>2013</option>
|
||||
<option>2014</option>
|
||||
<option>2015</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div class="margin">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
@ -36,8 +50,5 @@
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content slide-right">
|
||||
Custom Right Icon
|
||||
<i class="icon-chevron-right"></i>
|
||||
<i class="icon-ios7-information-outline"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Computers
|
||||
<span class="badge">3</span>
|
||||
<span class="badge">Badge</span>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
@ -79,6 +79,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h3>List with padding</h3>
|
||||
<div class="list padding">
|
||||
|
||||
<a href="#" class="list-item">
|
||||
@ -87,6 +88,10 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="list-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Driving Directions
|
||||
@ -105,12 +110,43 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h3>List with card</h3>
|
||||
<div class="list card">
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-right">
|
||||
Madison, WI
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Driving Directions
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="list-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content">
|
||||
Computers
|
||||
<span class="badge">3</span>
|
||||
</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="icon-heart brand-danger"></i>
|
||||
Madison, WI asdf
|
||||
Madison, WI
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
|
||||
Reference in New Issue
Block a user