parent
fcb57a8c66
commit
07ca5cf436
10 changed files with 285 additions and 130 deletions
After Width: | Height: | Size: 1.2 KiB |
@ -1,55 +1,63 @@ |
|||||||
.custom-textarea{ |
.custom-textarea { |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 10px 12px; |
padding: 10px 12px; |
||||||
color: white; |
|
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
border: 1px solid $gray2; |
|
||||||
background-color: black; |
|
||||||
margin-top: 10px; |
margin-top: 10px; |
||||||
&::placeholder{ |
&-light { |
||||||
|
border: 1px solid $green; |
||||||
|
background-color: white; |
||||||
|
color: $gray5; |
||||||
|
} |
||||||
|
&-dark { |
||||||
|
border: 1px solid $gray2; |
||||||
|
background-color: black; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
&::placeholder { |
||||||
color: #a2a2a2; |
color: #a2a2a2; |
||||||
} |
} |
||||||
&:focus{ |
&:focus { |
||||||
border: 1px solid $green1; |
border: 1px solid $green1; |
||||||
outline: none; |
outline: none; |
||||||
&::placeholder{ |
&::placeholder { |
||||||
color: $green1; |
color: $green1; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
@media screen and (min-width: 1441px){ |
@media screen and (min-width: 1441px) { |
||||||
.custom-textarea{ |
.custom-textarea { |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
&::placeholder{ |
&::placeholder { |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
.custom-textarea{ |
.custom-textarea { |
||||||
font-size: calc(100vw / 110); |
font-size: calc(100vw / 110); |
||||||
&::placeholder{ |
&::placeholder { |
||||||
font-size: calc(100vw / 110); |
font-size: calc(100vw / 110); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
@media screen and (min-width: 641px) and (max-width: 1007px) { |
@media screen and (min-width: 641px) and (max-width: 1007px) { |
||||||
.custom-textarea{ |
.custom-textarea { |
||||||
font-size: calc(100vw / 40); |
font-size: calc(100vw / 40); |
||||||
&::placeholder{ |
&::placeholder { |
||||||
font-size: calc(100vw / 40); |
font-size: calc(100vw / 40); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
@media screen and (max-width: 640px) { |
@media screen and (max-width: 640px) { |
||||||
.custom-textarea{ |
.custom-textarea { |
||||||
font-size: calc(100vw / 30); |
font-size: calc(100vw / 30); |
||||||
&::placeholder{ |
&::placeholder { |
||||||
font-size: calc(100vw / 30); |
font-size: calc(100vw / 30); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
@ -1,9 +1,21 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
|
import _ from "lodash"; |
||||||
|
|
||||||
export default function Textarea({placeholder} : any) { |
export default function Textarea({ placeholder, theme }: any) { |
||||||
|
const light = theme === "light"; |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
<textarea className="custom-textarea" rows={6} placeholder={placeholder} /> |
<textarea |
||||||
|
className={_.join( |
||||||
|
[ |
||||||
|
"custom-textarea", |
||||||
|
light ? "custom-textarea-light" : "custom-textarea-dark", |
||||||
|
], |
||||||
|
" " |
||||||
|
)} |
||||||
|
rows={6} |
||||||
|
placeholder={placeholder} |
||||||
|
/> |
||||||
</> |
</> |
||||||
) |
); |
||||||
} |
} |
||||||
|
Loading…
Reference in new issue