cefc-view-transactiondetails/src/index.js

CEFC-UI Component

import styled from 'styled-components';
import { flex, font, getThemeValOf } from 'cefc-ui-style/lib/mixins';
import Decorator from './Decorator';
import TransactionDetails from './TransactionDetails';

const prefix = 'cv-trandts';

const Component = styled(TransactionDetails)`
  &.${prefix}_container {
    height: 100%;
    width: auto;
    ${flex('space-between', 'stretch', 'column')};
    
    > li {
      ${flex('space-between', 'center')}
      
      > span {
        display: block;
      }
  
      > span.${prefix}_price-1 {
        text-align: left;
      }
  
      > span.${prefix}_price-2 {
        text-align: left;
        margin-left: .05rem;
      }
      
      > span.${prefix}_price-3 {
        text-align: right;
      }
  
      > span:nth-child(2n+1) {
        ${font(getThemeValOf('stockFontSize'), getThemeValOf('stockBaseColor'))};
      }
  
      > span:nth-child(2n) {
        font-size: ${getThemeValOf('stockFontSize')};
      }
      
      .${prefix}_price_val {
        flex: 1;
      }
      
      .${prefix}_equal-price {
        color: ${getThemeValOf('stockBaseColor')};
      }
      
      .${prefix}_stockRaise {
        color: ${getThemeValOf('stockRaiseColor')}
      }
      
      .${prefix}_stockDown {
        color: ${getThemeValOf('stockDownColor')}
      }
    }
  }
`;

export default Decorator(Component);