arnaucube
arnaucube/commonroutesServerPublic Self-hosted repository
commonroutesServer/app/www/lib/ionic/scss/_list.scss
app/www/lib/ionic/scss/_list.scssRaw
  1
  2/**
  3 * Lists
  4 * --------------------------------------------------
  5 */
  6
  7.list {
  8  position: relative;
  9  padding-top: $item-border-width;
 10  padding-bottom: $item-border-width;
 11  padding-left: 0; // reset padding because ul and ol
 12  margin-bottom: 20px;
 13}
 14.list:last-child {
 15  margin-bottom: 0px;
 16  &.card{
 17    margin-bottom:40px;
 18  }
 19}
 20
 21
 22/**
 23 * List Header
 24 * --------------------------------------------------
 25 */
 26
 27.list-header {
 28  margin-top: $list-header-margin-top;
 29  padding: $list-header-padding;
 30  background-color: $list-header-bg;
 31  color: $list-header-color;
 32  font-weight: bold;
 33}
 34
 35// when its a card make sure it doesn't duplicate top and bottom borders
 36.card.list .list-item {
 37  padding-right: 1px;
 38  padding-left: 1px;
 39}
 40
 41
 42/**
 43 * Cards and Inset Lists
 44 * --------------------------------------------------
 45 * A card and list-inset are close to the same thing, except a card as a box shadow.
 46 */
 47
 48.card,
 49.list-inset {
 50  overflow: hidden;
 51  margin: ($content-padding * 2) $content-padding;
 52  border-radius: $card-border-radius;
 53  background-color: $card-body-bg;
 54}
 55
 56.card {
 57  padding-top: $item-border-width;
 58  padding-bottom: $item-border-width;
 59  box-shadow: $card-box-shadow;
 60
 61  .item {
 62    border-left: 0;
 63    border-right: 0;
 64  }
 65  .item:first-child {
 66    border-top: 0;
 67  }
 68  .item:last-child {
 69    border-bottom: 0;
 70  }
 71}
 72
 73.padding {
 74  .card, .list-inset {
 75    margin-left: 0;
 76    margin-right: 0;
 77  }
 78}
 79
 80.card .item,
 81.list-inset .item,
 82.padding > .list .item
 83{
 84  &:first-child {
 85    border-top-left-radius: $card-border-radius;
 86    border-top-right-radius: $card-border-radius;
 87
 88    .item-content {
 89      border-top-left-radius: $card-border-radius;
 90      border-top-right-radius: $card-border-radius;
 91    }
 92  }
 93  &:last-child {
 94    border-bottom-right-radius: $card-border-radius;
 95    border-bottom-left-radius: $card-border-radius;
 96
 97    .item-content {
 98      border-bottom-right-radius: $card-border-radius;
 99      border-bottom-left-radius: $card-border-radius;
100    }
101  }
102}
103
104.card .item:last-child,
105.list-inset .item:last-child {
106  margin-bottom: $item-border-width * -1;
107}
108
109.card .item,
110.list-inset .item,
111.padding > .list .item,
112.padding-horizontal > .list .item {
113  margin-right: 0;
114  margin-left: 0;
115
116  &.item-input input {
117    padding-right: 44px;
118  }
119}
120.padding-left > .list .item {
121  margin-left: 0;
122}
123.padding-right > .list .item {
124  margin-right: 0;
125}