AugurProject/augur-ui

View on GitHub
src/modules/market-charts/components/market-outcome-charts--orders/market-outcome-charts--orders.styles.less

Summary

Maintainability
Test Coverage
@import (reference) '~assets/styles/shared';

.MarketOutcomeOrderBook {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.MarketOutcomeOrderBook__stats {
  flex: 0;
  margin: 0.4em 0 -3px;
}

.MarketOutcomeOrderBook__Side {
  &:extend(.caps--small);

  flex: 1 1;
}

.MarketOutcomeOrderBook__side--asks {
  border-top: 1px solid @color-gray;
  height: auto;
  justify-content: flex-end;
  position: relative;
}

.MarketOutcomeOrderBook__container {
  bottom: 0;
  left: 0;
  max-height: 100%;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.MarketOutcomeOrderBook__container--asks {
  top: unset;
}

.MarketOutcomeOrderBook__side--bids {
  border-bottom: 1px solid @color-gray;
  height: auto;
  justify-content: flex-end;
  position: relative;
}

.MarketOutcomeOrderBook__row {
  display: flex;
  padding: 0.3em 0;
  width: 100%;
}

.MarketOutcomeOrderBook__row--head-ask {
  .MarketOutcomeOrderBook__RowItem_ask {
    color: @color-white;
  }
}

.MarketOutcomeOrderBook__row--head-bid {
  .MarketOutcomeOrderBook__RowItem_bid {
    color: @color-white;
  }
}

.MarketOutcomeOrderBook__row--hover {
  background-color: fade(@color-white, 10%);
}

.MarketOutcomeOrderbook__row--hover-encompassed {
  background-color: fade(@color-white, 5%);
}

.MarketOutcomeOrderBook__RowItem_ask {
  color: @color-gray;
  display: flex;
  flex: 1;
  font-size: 0.75rem;
  font-weight: 700;
  justify-content: flex-end;
  overflow: hidden;

  &:nth-child(2) {
    color: @color-negative;
  }
}

.MarketOutcomeOrderBook__RowItem_bid {
  color: @color-gray;
  display: flex;
  flex: 1;
  font-size: 0.75rem;
  font-weight: 700;
  justify-content: flex-end;
  overflow: hidden;

  &:nth-child(2) {
    color: @color-positive;
  }
}

.MarketOutcomeOrderBook__Midmarket {
  margin: 1rem 0;
}