src/modules/create-market/components/create-market-form/create-market-form.styles.less
@import (reference) "~assets/styles/shared";
.CreateMarketForm {
padding: 3.75rem 0 0;
}
.CreateMarketForm__button-outer-wrapper,
.CreateMarketForm_form_outer_wrapper {
display: flex;
flex-flow: column nowrap;
max-width: 81.25rem;
}
.CreateMarketForm__button-inner-wrapper,
.CreateMarketForm_form_inner_wrapper,
.CreateMarketForm__submit-wrapper {
flex: 1 100%;
margin: auto;
max-width: 65.75rem;
padding: 0 2rem;
width: 100%;
}
.CreateMarketForm_form_inner_wrapper {
> div {
color: @color-text-light;
display: flex;
flex-direction: column;
font-size: @font-size-kinda-large;
> span:first-of-type {
font-size: @font-size-extra-large;
font-weight: 500;
padding-bottom: 0.5rem;
}
> span:last-of-type {
border-bottom: 1px solid rgba(206, 215, 216, 0.3);
color: @color-offwhite-2;
padding-bottom: 1rem;
}
}
}
.CreateMarketForm__submit-wrapper {
display: flex;
}
.CreateMarketForm__submitWarning,
.CreateMarketForm__error {
color: @color-error;
display: inline-block;
font-size: 1rem;
line-height: 1rem;
margin-right: 1.5rem;
text-transform: none;
white-space: nowrap;
}
.CreateMarketForm__submitWarning {
line-height: 1.2em;
margin-left: auto;
margin-right: 0;
max-width: 13.5rem;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
text-align: left;
text-indent: -1.75rem;
white-space: pre-wrap;
> svg {
margin-top: 1.5px !important;
}
}
.CreateMarketForm__error--abs {
&:extend(.CreateMarketForm__error);
position: absolute;
}
.CreateMarketForm__error_tick,
.CreateMarketForm__error--bottom {
&:extend(.CreateMarketForm__error);
margin-top: 0.675rem;
position: absolute;
}
.CreateMarketForm__error_tick {
line-height: 1.2em;
padding-left: 1.5rem;
text-align: left;
text-indent: -1.3rem;
white-space: pre-wrap;
width: 210px;
> svg {
margin-top: 1.5px !important;
}
}
.CreateMarketForm__error_tick > svg,
.CreateMarketForm__error > svg,
.CreateMarketForm__submitWarning > svg,
.CreateMarketForm__error--abs > svg,
.CreateMarketForm__error--bottom > svg,
.CreateMarketForm__error--field-50 > svg,
.CreateMarketForm__error--insufficient-funds > svg {
margin: 0 0.2rem;
max-height: 1rem;
max-width: 1rem;
vertical-align: top;
}
.CreateMarketForm__error--field {
border-color: @color-error;
border-width: 0.1rem;
}
.CreateMarketForm__error--field-50 {
&:extend(.CreateMarketForm__error);
left: 52%;
line-height: 0.8rem;
position: absolute;
top: -3px;
}
.CreateMarketForm__error--insufficient-funds {
&:extend(.CreateMarketForm__error);
margin-bottom: 3rem;
}
.CreateMarketForm__fields {
align-content: flex-start;
border-bottom: 1px solid rgba(206, 215, 216, 0.3);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 2rem;
> li {
margin-bottom: 3.7rem;
position: relative;
width: 100%;
&.field--50 {
width: 48%;
}
> label {
display: inline-block;
padding-top: 0.5rem;
position: relative;
> span:first-child {
margin-right: 0.5rem;
}
}
p {
color: @color-text-gray;
&.error {
color: @color-red;
font-size: 0.875rem;
}
}
input[type="text"],
input[type="number"],
textarea {
background-color: @color-lightergray;
font-size: 1.125rem;
line-height: 1.5rem;
margin-bottom: 0;
&.error {
border-color: @color-red;
}
&::placeholder {
color: @color-lightgray;
font-weight: 400;
line-height: 1.5rem;
}
}
textarea {
height: 83px;
padding-top: 1rem;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
}
}
.LiquidityExplainer {
line-height: 140%;
max-width: 80%;
}
.CreateMarketForm_textarea_footer {
background-color: @color-gray2;
color: @color-almostblack;
font-size: @font-size-extra-small;
margin-bottom: 1rem;
padding: 0.25rem 0.5rem;
width: 100%;
> span {
font-weight: bold;
}
}
.CreateMarketForm__navigation {
display: flex;
justify-content: space-between;
padding-top: 1rem;
}
.CreateMarketForm__next,
.CreateMarketForm__prev,
.CreateMarketForm__submit {
&:extend(.button--white all);
min-width: 13.5rem;
&.hide-button {
opacity: 0;
pointer-events: none;
}
}
.CreateMarketForm__page {
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
&.show-page {
opacity: 1;
pointer-events: auto;
}
}
.CreateMarketForm__radio-buttons {
display: flex;
> li {
align-items: center;
display: flex;
flex-wrap: nowrap;
&:not(:first-child) {
margin-left: 4.75rem;
}
> button {
color: @color-white;
cursor: pointer;
display: block;
font-size: 1.125rem;
line-height: 1.125rem;
min-height: 1.7rem;
padding-left: 2.5rem;
position: relative;
text-align: left;
&::before {
border: 1px solid @color-lightgray;
border-radius: 100%;
content: "";
height: 1.5rem;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 1.5rem;
}
&::after {
background-color: @color-lightgray;
border-radius: 100%;
content: "";
display: none;
height: 0.875rem;
left: 6px;
margin: auto;
position: absolute;
top: 6px;
width: 0.875rem;
}
&.active::after {
display: block;
}
}
}
}
.CreateMarketForm__radio-buttons--per-line {
&:extend(.CreateMarketForm__radio-buttons all);
display: block;
> li:not(:first-child) {
margin-left: 0;
margin-top: 1rem;
}
}
@media @breakpoint-mobile {
.CreateMarketForm__button-outer-wrapper {
order: 3;
}
.CreateMarketForm_form_outer_wrapper {
order: 1;
}
.CreateMarketForm_form_outer_wrapper:nth-of-type(2) {
order: 2;
}
.CreateMarketForm__fields > li textarea {
height: 5.1rem;
}
.CreateMarketForm__fields > li > label {
display: block;
}
.CreateMarketForm__error,
.CreateMarketForm__error--field-50 {
margin-top: 0.675rem;
white-space: normal;
width: 100%;
}
.CreateMarketForm__error--lessSpace {
display: block;
}
.CreateMarketForm__radio-buttons {
display: block;
> li:not(:first-child) {
margin-left: 0;
margin-top: 1rem;
}
}
.CreateMarketForm__error--label {
margin-bottom: 2.2rem;
}
}
.CreateMarketForm__additionalDetailsRendered {
display: block !important;
text-transform: none !important;
white-space: pre-wrap;
}
.CreateMarketForm__additionalDetailsRendered ul {
display: block;
list-style-type: disc;
margin-block-end: 1em;
margin-block-start: 1em;
margin-inline-end: 0;
margin-inline-start: 0;
padding-inline-start: 40px;
}
.CreateMarketForm__additionalDetailsRendered p {
margin-block-end: 1em !important;
margin-block-start: 1em !important;
margin-inline-end: 0;
margin-inline-start: 0;
}
@media @breakpoint-mobile-medium {
.CreateMarketForm_form_inner_wrapper {
padding-left: 1rem;
padding-right: 1rem;
}
.CreateMarketForm__submit-wrapper,
.CreateMarketForm__button-inner-wrapper {
padding-left: 0;
padding-right: 0;
}
.CreateMarketForm__next,
.CreateMarketForm__prev,
.CreateMarketForm__submit {
border-radius: 0;
white-space: nowrap;
width: 50%;
&.hide-button {
display: none;
}
}
.CreateMarketForm__next,
.CreateMarketForm__submit {
background-color: @color-purple;
color: @color-white;
}
.CreateMarketForm__prev.hide-button + .CreateMarketForm__next {
width: 100%;
}
.CreateMarketForm__error--field-50 {
left: 0;
position: relative;
top: auto;
}
.CreateMarketForm__fields > li.field--50 {
width: 100%;
}
.CreateMarketForm__submitWarning {
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
}
@media @breakpoint-mobile-small {
.CreateMarketForm__fields > li textarea {
height: 83px;
}
.CreateMarketForm__navigation {
flex-wrap: wrap;
}
.CreateMarketForm__next,
.CreateMarketForm__prev,
.CreateMarketForm__submit {
width: 100%;
}
.CreateMarketForm__next,
.CreateMarketForm__submit {
order: 1;
}
.CreateMarketForm__prev {
order: 2;
}
}