Card

card.css provides common style for Loupe Cards

Configurations

You can change it by changing the following configurations.

  • Background Color ($card-background-color) : #f3f3f5;
  • Header Color ($card-header-color) : #08c1af;
  • Border Color ($card-border-color) : #c2c3c5;
  • Box Shadow Color ($card-shadow-color) : #a6a7ac;
  • Count Background Color ($count-background-color) : #ebcf00;
  • Count Background Blue ($count-background-blue) : #47cdec;

rem value is assigned according to the Modulear Scale calicuration More deitails, check _helpers.scss.

Base Structure

Card has one wrapper class, .card and two main building blocks, header and .content

  • header has h1 element for showing the card name
  • .content is the wrapper class for the card content
@charset "UTF-8";
.card {
  background-color: #f3f3f5;
  border: 2px solid #c2c3c5;
  margin: 16px 0 24px;
  margin: 1rem 0 1.5rem;
  overflow: hidden;
  padding: 0;
  position: relative;
  -webkit-box-shadow: #a6a7ac 0 0.667rem 0, rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  -moz-box-shadow: #a6a7ac 0 0.667rem 0, rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  box-shadow: #a6a7ac 0 0.667rem 0, rgba(255, 255, 255, 0.2) 0 1px 0 inset;
  -webkit-border-radius: 0.488rem;
  -moz-border-radius: 0.488rem;
  -ms-border-radius: 0.488rem;
  -o-border-radius: 0.488rem;
  border-radius: 0.488rem;
}
.card:first-child {
  margin-top: 0;
}
.card .loading {
  -webkit-border-radius: 0.488rem;
  -moz-border-radius: 0.488rem;
  -ms-border-radius: 0.488rem;
  -o-border-radius: 0.488rem;
  border-radius: 0.488rem;
}

Content

.content block has 18.75rem min-height as default.

No Item Handling

If there is no item to show in card, you can use .no-item class to show message to user. .no-item class is expected to used with .overlay classes.

.card .content {
  height: 100%;
  padding: 16px;
  padding: 1rem;
  min-height: 268px;
  min-height: 18.75rem;
  position: relative;
  -moz-border-radius-bottomleft: 0.488rem;
  -webkit-border-bottom-left-radius: 0.488rem;
  border-bottom-left-radius: 0.488rem;
  -moz-border-radius-bottomright: 0.488rem;
  -webkit-border-bottom-right-radius: 0.488rem;
  border-bottom-right-radius: 0.488rem;
}
.card .content .no-item {
  background-color: #f3f3f5;
  background-color: rgba(243, 243, 245, 0.8);
}
.card .content .no-item .overlay-content-inner {
  text-shadow: 1px 1px 0 white;
}

Card Item List

If you want to show some items list in content, use .content-list class with .content and .card-item-list for listing.

Item Contents

You can easy to align the item contents with .item-content and releted classes.

  • .item-containter has border-bottom and padding settings, if you want to add link to list item, use this class with a element, and you can fit link area to its list item block.
  • .item-content is the parent class with display:table, its child elements usually has display:table-cell property which is why you can easy to align list item contents.
  • .item-asset-container has explicit width for showing asset
  • .item-title is the main content in the list item which is set width auto, which means .item-title expands primarily like the table cell.
  • .item-arrow is for the arrow decoration at the right side of list item.
.card .content.content-list {
  padding: 0;
  min-height: 300px;
  min-height: 18.75rem;
}
.card .content.content-list .message,
.card .content.content-list .button-container {
  margin-left: 16px;
  margin-left: 1rem;
  margin-right: 16px;
  margin-right: 1rem;
}
.card .content.content-list .overlay .message,
.card .content.content-list .overlay .button-container {
  margin-left: 0;
  margin-right: 0;
}

.card-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.card-item-list li {
  border-bottom: 1px solid white;
  margin: 0;
  padding: 0;
  position: relative;
  *zoom: 1;
}
.card-item-list li:after {
  content: "";
  display: table;
  clear: both;
}
.card-item-list li .circle.image {
  background-color: transparent;
  background-position: center center;
  background-size: cover;
}
.card-item-list li .circle.image .circle-inner {
  border-color: transparent;
  background-color: transparent;
}
.card-item-list li a {
  cursor: pointer;
  display: block;
  height: 100%;
  width: 100%;
  *zoom: 1;
}
.card-item-list li a:after {
  content: "";
  display: table;
  clear: both;
}
.card-item-list li a.tapped, .card-item-list li a:active {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.15)), color-stop(5%, rgba(0, 0, 0, 0.05)));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05) 5%);
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05) 5%);
  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05) 5%);
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05) 5%);
}
.card-item-list li .item-container {
  border-bottom: 1px solid #c2c3c5;
  display: block;
  height: 100%;
  padding: 16px;
  padding: 1rem;
  width: 100%;
  *zoom: 1;
}
.card-item-list li .item-container:after {
  content: "";
  display: table;
  clear: both;
}
.card-item-list li .item-content {
  display: table;
  width: 100%;
}
.card-item-list li .item-content .item-asset-container,
.card-item-list li .item-content .item-title,
.card-item-list li .item-content .item-arrow,
.card-item-list li .item-content .item-item {
  display: table-cell;
  vertical-align: middle;
}
.card-item-list li .item-content .item-asset-container {
  width: 60px;
}
.card-item-list li .item-content .item-title {
  padding: 0 8px;
  padding: 0 0.488rem;
  text-align: left;
  width: auto;
}
.card-item-list li .item-content .item-arrow {
  color: #bfbfbf;
  font-size: 36px;
  font-size: 2.25rem;
  text-align: right;
  width: 21px;
  width: 1.3125rem;
}

Basic Entry items

Loupe has basic styling for entry/comment item in the following.

.entry-items-list,
.comment-items-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.entry-items-list .title,
.comment-items-list .title {
  text-align: left;
  padding: 16px 0;
  padding: 1rem 0;
  font-weight: bold;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
.entry-items-list .body,
.comment-items-list .body {
  line-height: 1.8;
  margin-top: 16px;
  margin-top: 1rem;
}
.entry-items-list .body img,
.comment-items-list .body img {
  max-width: 100%;
}
.entry-items-list .author-name,
.comment-items-list .author-name {
  font-weight: bold;
  margin-left: 16px;
  margin-left: 1rem;
}