import styled from 'styled-components'
import Proptypes from 'prop-types'
import { Blue, Red, Green, Gray, Yellow } from 'utils/variables/colors'
import { Font } from 'utils/variables/font'
const TaggableStyled = styled.div`
position:relative;
width:${p => p.width};
.header{
position:relative;
display:flex;
.label{
width:100%;
font-family:${p => Font.normal};
font-size: 12px;
font-weight: 600;
color: #3b495e;
margin-bottom: 7px;
margin-top:5px;
text-align: left;
text-transform: uppercase;
}
.information{
width: 30px;
height: 20px;
border-radius: 100px;
background-color: #e7f0f7;
display:flex;
align-items:center;
justify-content:center;
>span{
margin: auto;
font-family: ${p => Font.cond};
font-size: 12px;
font-weight: 600;
text-align: center;
color: #2870b2;
}
}
}
.async-component{
position:relative;
max-height: 37px;
}
.message{
display: block;
margin-top: 2px;
opacity: 0;
height: 14px;
text-align: right;
font-size: 12px;
font-weight: 600;
transition: opacity 300ms linear;
&.error {
color: #ec393d;
}
&.alert {
color: #e8b007;
}
&.success {
color: #6f9e32;
}
&.show{
opacity:1;
}
}
.status-icon {
position: absolute;
right: 11px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
svg {
width: 18px;
height: 18px;
top: 0;
bottom: 0;
}
}
.Select--single{
.Select-value{
font-family:${p => Font.normal};
font-size: 14px;
font-weight: 600;
text-align: left;
color: #3b495e;
margin-left: 15px;
}
}
.Select--multi{
.Select-value{
display: flex;
flex-flow: row-reverse;
background: #e7f0f7;
padding: 3px 10px;
border-radius: 15px;
margin: 5px;
white-space: nowrap;
>.Select-value-icon{
cursor: pointer;
font-weight: 600;
color: #2870b2;
font-size: 20px;
margin-left: 5px;
line-height: 20px;
}
>.Select-value-label{
font-weight: 600;
color: #2870b2;
font-family: ${p => Font.cond};
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
}
}
}
.Select-control
{
position:relative;
min-width: 100%;
min-height: 37px;
border-radius: 2px;
background-color: #ffffff;
display: flex;
align-items: center;
transition: box-shadow 300ms linear;
cursor:pointer;
.Select-multi-value-wrapper
{
display: flex;
height: 100%;
width: auto;
align-items: center;
flex-wrap: wrap;
${p => {
if (p.maxHeight.length > 0) {
return `
max-height: ${p.maxHeight};
overflow: auto;
`
}
}};
}
.Select-placeholder{
position: absolute;
font-size: 14px;
font-weight: normal;
color: #95a3b7;
margin-left: 15px;
margin-top: 2px;
}
.Select-input > input {
outline: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;
}
.Select-clear{
background: pink;
padding: 0px 5px;
position: absolute;
right: 0px;
top: 2px;
height: 36px;
line-height: 36px;
cursor: pointer;
}
}
.text-hightlight {
background-color: #2870b2;
color: white;
}
.option-list{
position:relative;
width:100%;
height: auto;
margin-top:16px;
background-color: #ffffff;
>.option{
position:relative;
min-width:100%;
height: 40px;
display:flex;
align-items:center;
padding:0px 10px 0px 15px;
background-color: #ffffff;
transition: all 100ms linear, display 300ms linear;
cursor:pointer;
&.inFocus{
background-color: #e5edf4 !important;
}
&.hide{
display:none;
background:red;
}
&.Select-create-option-placeholder{
background-color: #e7f0f7;
margin-top:16px;
margin-bottom:10px;
>option-label{
font-family: ProximaNova;
font-size: 14px;
text-align: left;
color: #2870b2;
}
>.add-item{
display:block;
}
&:hover{
>.remove-item{
display:none;
}
}
}
&:hover{
background-color: #efefef;
>.remove-item{
display:block;
}
}
>.option-label{
position:relative;
width:100%;
font-family: ProximaNova;
font-size: 14px;
font-weight: 600;
text-align: left;
color: #3b495e;
}
>.remove-item{
height:24px
width:24px;
display:none;
}
>.add-item{
height:24px
width:24px;
display:none;
}
}
>.remove-all{
background-color: #fcdfdf;
display:flex;
align-items:center;
height: 40px;
padding:0px 10px 0px 15px;
margin-bottom:10px;
cursor: pointer;
>.remove-all-label{
width:100%;
font-family: ProximaNova;
font-size: 14px;
text-align: left;
color: #ec393d;
}
>.remove-all-icon{
height:24px
width:24px;
}
}
}
`
TaggableStyled.propTypes = {
}
TaggableStyled.defaultProps = {
}
export default TaggableStyled
|