react-translatable-input
Version:
A ReactJS input component that manages multiple languages
1 lines • 8.72 kB
CSS
.TranslatableInput{border:1px solid #ccc;border-radius:5px;min-width:260px;}.TranslatableInput .Select{display:inline-block;width:60px ;margin:0;float:left;}.TranslatableInput .Select .Select-control{height:35px;box-shadow:none;border:none;border-radius:5px 0 0 5px}.TranslatableInput .Select .Select-option{position:relative;min-height:35px}.TranslatableInput .Select .Select-value{background-color:#eee;height:100%;width:100%;border-right:1px solid #ccc;border-radius:5px 0 0 5px}.TranslatableInput .Select .flag-icon{position:absolute;top:50%;transform:translateY(-60%);}.TranslatableInput .Select .flag-icon:disabled{opacity:.7}.TranslatableInput .Select .language-name{padding:0 10px 0 30px;overflow:hidden;text-overflow:ellipsis;}.TranslatableInput .Select .language-name:disabled{opacity:.7}.TranslatableInput input{display:inline-block;margin:0;height:35px;width:calc(100% - 60px);border:none;border-radius:0 5px 5px 0;padding:0 10px;box-sizing:border-box;outline:none;}.TranslatableInput input:disabled{background-color:#f1f1f1}.TranslatableInput textarea{display:block;margin:0;height:35px;width:100%;border:none;border-radius:0 0 5px 5px;padding:10px;box-sizing:border-box;resize:vertical;outline:none;}.TranslatableInput textarea:disabled{background-color:#f1f1f1}.TranslatableInput.is-focused{border-color:#08c #0099e6 #0099e6;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px -1px rgba(0,136,204,0.5)}.TranslatableInput.error{border-color:#ff4f0d;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px -1px rgba(204,0,0,0.5)}.TranslatableInput .flag-icon-default{background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDIwIDE1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPkdsb2JlIDwvdGl0bGU+CiAgICA8ZGVzYz5CZWxrYS51czwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxyZWN0IGlkPSJwYXRoLTEiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNSI+PC9yZWN0PgogICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIG1hc2tDb250ZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBtYXNrVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMTUiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICA8L21hc2s+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iR3JvdXAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI0LjAwMDAwMCwgLTE0NC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNC4wMDAwMDAsIDE0NC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDx1c2UgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjNEE0QTRBIiBtYXNrPSJ1cmwoI21hc2stMikiIHN0cm9rZS13aWR0aD0iMiIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMTAyNzExOCwxMy4wMDg0ODAyIEMxMy4xMzUyODY4LDEzLjAwODQ4MDIgMTUuNjAyODEwMiwxMC41MzkyOTU3IDE1LjYwMjgxMDIsNy41MDQyNDAwOSBDMTUuNjAyODEwMiw0LjQ2OTE4NDQ1IDEzLjEzNTQ4MzcsMiAxMC4xMDI3MTE4LDIgQzcuMDY5OTM5ODYsMiA0LjYwMjgxMDIzLDQuNDY5MTg0NDUgNC42MDI4MTAyMyw3LjUwNDI0MDA5IEM0LjYwMjgxMDIzLDEwLjUzOTA5ODcgNy4wNzAxMzY3NSwxMy4wMDg0ODAyIDEwLjEwMjcxMTgsMTMuMDA4NDgwMiBMMTAuMTAyNzExOCwxMy4wMDg0ODAyIFogTTEwLjEwMjcxMTgsMTIuMzM4Mzc5OSBDMTAuMDA4NDA1MywxMi4zMzgzNzk5IDkuOTE0Njg5MzgsMTIuMzM0ODMzNCA5LjgyMTU2NDE0LDEyLjMyOTUxMzYgQzkuNDQwMDA2NjMsMTEuNzY5MzU2MyA5LjEzMzI2NDMxLDExLjEwMjIxMTUgOC45MTIzNjI1OSwxMC4zNjU3MTIgQzkuMjc5NTQ3NzEsMTAuMzI2ODk3IDkuNjUzNDI2ODMsMTAuMzA1MDI2NiAxMC4wMzMwMTU1LDEwLjMwNTAyNjYgQzEwLjM5ODIzMTgsMTAuMzA1MDI2NiAxMC43NTg3MjMsMTAuMzIzMTUzNCAxMS4xMTE1MzU3LDEwLjM1ODgxNTkgQzEwLjg4OTQ1MjcsMTEuMTAwODMyMiAxMC41ODA3NDE1LDExLjc3MjUwODcgMTAuMTk1ODM3LDEyLjMzNTgxODUgQzEwLjE2NDkyNjUsMTIuMzM2NjA2NyAxMC4xMzQwMTYsMTIuMzM4Mzc5OSAxMC4xMDI3MTE4LDEyLjMzODM3OTkgTDEwLjEwMjcxMTgsMTIuMzM4Mzc5OSBaIE04Ljc0MzA0Mzk4LDkuNzExNzY4MjIgQzguNjExNTI2NzMsOS4xMTU1NTQzNiA4LjUzMjE4MzI1LDguNDg1NjQ4MyA4LjUxMjEwMTI3LDcuODM5MTkxNyBMMTEuNTEwNDE4OCw3LjgzOTE5MTcgQzExLjQ5MDE0LDguNDgzNDgwOTcgMTEuNDExNTg0LDkuMTExMDIyNjYgMTEuMjgwODU0Myw5LjcwNTY2MDI4IEMxMC44NzI5MTQ2LDkuNjYwMzQzMyAxMC40NTY1MDg5LDkuNjM1MzIwNDQgMTAuMDMzNDA5Myw5LjYzNTMyMDQ0IEM5LjU5NTkzNzI1LDkuNjM1MTIzNDEgOS4xNjUzNTYwOSw5LjY2MjkwNDY5IDguNzQzMDQzOTgsOS43MTE3NjgyMiBMOC43NDMwNDM5OCw5LjcxMTc2ODIyIFogTTExLjc4MjExNjEsMTAuNDUyNzk5NCBDMTIuMzkxNjYzMSwxMC41NTY0Mzc0IDEyLjk3MzA1NiwxMC43MTQwNjE3IDEzLjUxMjUxMjksMTAuOTI1MDgxMiBDMTIuODQ4ODIzNCwxMS41ODc0OTcyIDExLjk5NDM1NSwxMi4wNTc4MDg3IDExLjAzOTQ3NjgsMTIuMjQ2MzY2OCBDMTEuMzQ0NDQ3MiwxMS43MDg0NzM5IDExLjU5NDY4NDQsMTEuMTAzOTg0NyAxMS43ODIxMTYxLDEwLjQ1Mjc5OTQgTDExLjc4MjExNjEsMTAuNDUyNzk5NCBaIE0xMS45NDQzNDcsOS44MDE2MTQwNyBDMTIuMDc5NjA1LDkuMTczODc1MzQgMTIuMTU5NzM2LDguNTE0MDIwNjcgMTIuMTc5NjIxMSw3LjgzOTE5MTcgTDE0LjkyMDIyLDcuODM5MTkxNyBDMTQuODU0ODU1MSw4Ljc5MTYzNjQ1IDE0LjUxMzg1NTMsOS42Njk2MDM3MyAxMy45NzQzOTgzLDEwLjM5MTcyIEMxMy4zNDU5NTA3LDEwLjEyNTcyOSAxMi42NjMzNjA0LDkuOTI3OTEwNTIgMTEuOTQ0MzQ3LDkuODAxNjE0MDcgTDExLjk0NDM0Nyw5LjgwMTYxNDA3IFogTTEyLjE3OTYyMTEsNy4xNjkyODg0OCBDMTIuMTU5NzM2LDYuNTA3ODU3NTcgMTIuMDgxMTgsNS44NTg4Mzk1NyAxMS45NDk2NjI4LDUuMjM5NTczMTUgQzEyLjY3MzQwMTQsNS4xMTIwOTQ1MSAxMy4zNjAzMjMxLDQuOTExNzE0NjMgMTMuOTkyMzE0Niw0LjY0MTk4MDA3IEMxNC41MjExNCw1LjM1OTU2NDY0IDE0Ljg1NTY0MjYsNi4yMjc4Nzc0MyAxNC45MjAyMiw3LjE2OTI4ODQ4IEwxMi4xNzk2MjExLDcuMTY5Mjg4NDggTDEyLjE3OTYyMTEsNy4xNjkyODg0OCBaIE0xMS41MTAyMjE5LDcuMTY5Mjg4NDggTDguNTExOTA0MzksNy4xNjkyODg0OCBDOC41MzE5ODYzNiw2LjUzNjQyNjk3IDguNjA5MzYxMDMsNS45MTc3NTE2NCA4LjczNzEzNzUyLDUuMzMwMDEwMDggQzkuMTYxMjIxNTcsNS4zNzkyNjc2NyA5LjU5Mzc3MTU1LDUuNDA3NDQzMDIgMTAuMDMzMjEyNCw1LjQwNzQ0MzAyIEMxMC40NTgwODQsNS40MDc0NDMwMiAxMC44NzY0NTg1LDUuMzgyMDI2MSAxMS4yODYzNjcsNS4zMzYzMTUwNiBDMTEuNDEzMzU1OSw1LjkyMjA4NjMxIDExLjQ5MDMzNjksNi41Mzg3OTEzMyAxMS41MTAyMjE5LDcuMTY5Mjg4NDggTDExLjUxMDIyMTksNy4xNjkyODg0OCBaIE03Ljg0MjUwNTI0LDcuMTY5Mjg4NDggTDUuMjg1MjAzNiw3LjE2OTI4ODQ4IEM1LjM0ODU5OTYzLDYuMjQ3MTg2NCA1LjY3MTI4OTQsNS4zOTU4MTgyMiA2LjE4MTAxNzE3LDQuNjg3Mjk3MDYgQzYuNzcwNDgyMTksNC45Mjg4NTYyOCA3LjQwNjYwODI2LDUuMTExMzA2MzkgOC4wNzQ0MzIzNiw1LjIzMTg4ODk3IEM3Ljk0MTczMzgyLDUuODUzMzIyNzIgNy44NjIzOTAzMyw2LjUwNTA5OTE0IDcuODQyNTA1MjQsNy4xNjkyODg0OCBMNy44NDI1MDUyNCw3LjE2OTI4ODQ4IFogTTcuODQyNTA1MjQsNy44MzkxOTE3IEM3Ljg2MjU4NzIxLDguNTE2Nzc5MSA3Ljk0MzMwODg4LDkuMTc5NTg5MjIgOC4wNzkzNTQ0MSw5LjgwOTQ5NTI4IEM3LjQxNjg0NjEzLDkuOTI4Njk4NjUgNi43ODU0NDUyMywxMC4xMDkxNzg1IDYuMTk5NTI0MDksMTAuMzQ3Mzg4MiBDNS42Nzg5Njc4LDkuNjMzNTQ3MTcgNS4zNDkzODcxNiw4Ljc3MjUyNDUgNS4yODUwMDY3Miw3LjgzOTE5MTcgTDcuODQyNTA1MjQsNy44MzkxOTE3IEw3Ljg0MjUwNTI0LDcuODM5MTkxNyBaIE02LjY1NDcxNTUxLDEwLjg4NTI4MSBDNy4xNTI4MjcyMywxMC42OTg0OTYzIDcuNjg2NzcxNDksMTAuNTU4MjEwNiA4LjI0MjU2OTY3LDEwLjQ2MDg3NzYgQzguNDI0MDk0OTcsMTEuMDkwMTkyNiA4LjY2NDg4MTc4LDExLjY3NTc2NjggOC45NTY2NjEwNiwxMi4xOTk2NzA2IEM4LjA2NzkzNTI1LDExLjk4MjU0MzEgNy4yNzUwOTEwMiwxMS41MTg5MzA3IDYuNjU0NzE1NTEsMTAuODg1MjgxIEw2LjY1NDcxNTUxLDEwLjg4NTI4MSBaIE0xMy41MzYzMzU3LDQuMTA4MjI0ODMgQzEyLjk5MTk1NjcsNC4zMjI5ODc5MiAxMi40MDQ0NjA1LDQuNDgyNzc5NTQgMTEuNzg4NjEzMiw0LjU4ODM4NzgyIEMxMS42MDA1OTA4LDMuOTI1MTgzNjMgMTEuMzQ4Mzg0OSwzLjMwODA4NDU1IDExLjAzOTQ3NjgsMi43NjIxMTM0MyBDMTIuMDA1Nzc0MiwyLjk1MjgzODgxIDEyLjg2OTQ5NiwzLjQzMjgwNDc3IDEzLjUzNjMzNTcsNC4xMDgyMjQ4MyBMMTMuNTM2MzM1Nyw0LjEwODIyNDgzIFogTTEwLjE5NzAxODMsMi42NzI0NjQ2MSBDMTAuNTg2MDU3MywzLjI0MjQ3MzQ0IDEwLjg5NjkzNDIsMy45Mjc3NDUwMyAxMS4xMTk2MDc5LDQuNjgyMTc0MjcgQzEwLjc2NDIzNTcsNC43MTg2MjQ4OCAxMC40MDEzODE5LDQuNzM3MzQyNzcgMTAuMDMzMjEyNCw0LjczNzM0Mjc3IEM5LjY1MDY3MDQ4LDQuNzM3MzQyNzcgOS4yNzQwMzUwMSw0LjcxNTQ3MjQgOC45MDQ0ODczLDQuNjc1NjcyMjcgQzkuMTI2MTc2NTUsMy45MjYzNjU4MSA5LjQzNTA4NDU3LDMuMjQ1ODIyOTYgOS44MjA5NzM1LDIuNjc4NzY5NTggQzkuOTE0NDkyNSwyLjY3MzQ0OTc2IDEwLjAwODIwODQsMi42Njk5MDMyMiAxMC4xMDI5MDg3LDIuNjY5OTAzMjIgQzEwLjEzNDIxMjksMi42NzAxMDAyNSAxMC4xNjU1MTcyLDIuNjcyMDcwNTUgMTAuMTk3MDE4MywyLjY3MjQ2NDYxIEwxMC4xOTcwMTgzLDIuNjcyNDY0NjEgWiBNOC45NTUyODI4OSwyLjgwOTAwNjY1IEM4LjY1OTc2Mjg1LDMuMzQwNzkxNTkgOC40MTgxODg1MSwzLjkzOTU2Njg1IDguMjM1ODc1NjgsNC41ODA1MDY2IEM3LjY3MzU4MDM5LDQuNDgxNTk3MzYgNy4xMzM3Mjk2Nyw0LjMzODU1MzMyIDYuNjMxMDg5NjYsNC4xNDgyMjIgQzcuMjU0NjE1MjgsMy41MDE5NjI0MiA4LjA1NTUzMTY3LDMuMDI5Mjg2NTkgOC45NTUyODI4OSwyLjgwOTAwNjY1IEw4Ljk1NTI4Mjg5LDIuODA5MDA2NjUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjNEE0QTRBIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=")}.TranslatableInput.has-language-name{min-width:350px;}.TranslatableInput.has-language-name .Select{width:150px }.TranslatableInput.has-language-name input{width:calc(100% - 150px)}.TranslatableInput.uses-textarea{min-width:350px;}.TranslatableInput.uses-textarea .Select{display:inline-block;width:100% ;margin:0;float:left;}.TranslatableInput.uses-textarea .Select .Select-control{height:35px;box-shadow:none;border:none;border-radius:5px 5px 0 0}.TranslatableInput.uses-textarea .Select .Select-value{border-right:none;border-radius:5px 5px 0 0}