mahaplatform/reframe

.reframe-list {
  background-color: @white;
}
.reframe-list-title {
  border-bottom: 1px solid lighten(@black, 90%);
  background-color: darken(@white, 5%);
  color: @black;
  font-weight: bold;
  padding: 0.8em;
  text-transform: uppercase;
}

.reframe-list-alert {
  padding: 0.8em;
  color: @white;
  text-align: center;
  &.red { background-color: @red; }
  &.orange { background-color: @orange; }
  &.yellow { background-color: @yellow; }
  &.olive { background-color: @olive; }
  &.green { background-color: @green; }
  &.teal { background-color: @teal; }
  &.blue { background-color: @blue; }
  &.violet { background-color: @violet; }
  &.purple { background-color: @purple; }
  &.pink { background-color: @pink; }
  &.brown { background-color: @brown; }
  &.black { background-color: @black; }
  &.grey { background-color: @grey; }
}
.reframe-list-item {
  border-bottom: 1px solid fadeout(@black, 90%);
  display: flex;
  color: fadeout(@black, 40%);
  position: relative;
  strong {
    color: @black;
  }
  &.error {
    color: @red;
  }
}
.reframe-list-item-link {
  .hover(background-color, fadeout(@black, 97));
  cursor: pointer;
  .fa {
    color: fadeout(@black, 40);
  }
  padding: 0.8em;
}
.reframe-list-item-unit {
  margin-left: 3px;
}
.reframe-list-item-padded {
  padding: 0.8em;
  flex: 1;
}
.reframe-list-item-icon {
  display: flex;
  padding: 0.8em 0 0.8em 0.8em;
  i {
    margin: auto;
  }
}
.reframe-list-item-component {
  flex: 1;
}
.reframe-list-item-content {
  flex: 1;
  @media (max-width: 768px) { padding: 0.8em; }
  @media (min-width: 769px) { display: flex; }
}
.reframe-list-item-link {
  display: block;
  cursor: pointer;
  .hover(background-color, fadeout(@black, 97));
  display: flex;
}
.reframe-list-item-content-label {
  @media (min-width: 769px) {
    flex: 0 0 10em;
    padding: 0.8em;
  }
  color: @black;
  font-weight: bold;
}
.reframe-list-item-content-value {
  @media (min-width: 769px) {
    flex: 1;
    padding: 0.8em;
  }
}
.reframe-list-item-extra {
  display: flex;
  padding: 0.8em 0.8em 0.8em 0;
  & > * {
    margin: auto !important;
  }
  .button {
    padding: 0.75em !important;
    i {
      margin: 0 !important;
    }
  }
}
.reframe-list-item-proceed {
  display: flex;
  padding: 0.8em 0.8em 0.8em 0;
  font-size: 0.8em;
  .fa {
    margin: auto;
    color: fadeout(@black, 80);
    line-height: 1em;
    font-size: 1.2em;
  }
}
.reframe-list-footer {
  background-color: fadeout(@black, 97);
}
.reframe-list-buttons {
  padding: .4em 0;
  background-color: fadeout(@black, 97);
}