AugurProject/augur-ui

View on GitHub
src/modules/create-market/components/create-market-form-outcome/create-market-form-outcome.styles.less

Summary

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

.CreateMarketOutcome__ {
  &scalar,
  &categorical {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    > div {
      width: 24%;

      &:nth-child(-n+4) {
        margin-bottom: 1rem;
      }
    }
  }

  &show-more {
    color: @color-white;
    text-transform: uppercase;
  }

  @media @breakpoint-mobile {
    &categorical > div,
    &scalar > div {
      width: 48%;
    }

    &categorical > div {
      &:nth-child(-n+6) {
        margin-bottom: 1rem;
      }
    }

    &scalar > div {
      &:nth-child(-n+2) {
        margin-bottom: 3.75rem;
      }
    }
  }

  @media @breakpoint-mobile-small {
    &categorical > input {
      width: 100%;

      &:nth-child(-n+7) {
        margin-bottom: 1rem;
      }
    }

    &scalar {
      flex-wrap: wrap;

      > input {
        width: 100%;

        &:not(:first-child) {
          margin-top: 1rem;
        }
      }
    }
  }
}

.CreateMarketFormOutcome__details {
  width: unset !important;
}

.CreateMarketFormOutcome__detailsPreview {
  max-width: 40%;
  min-width: 40%;
  width: unset !important;
}

.CreateMarketForm__textArea {
  min-width: 400px;
  width: 560px;

  @media @breakpoint-mobile-medium {
    min-width: 200px;
    width: 250px;
  }
}

.CreateMarketOutcome__tooltip {
  margin-bottom: 0;
  margin-left: 0.25rem;
  margin-top: -0.375rem;
  width: 0.75rem;
}