Add classnames

2020-07-27 14:36:58 +03:00
parent 1e1d274b49
commit 1ec0fb31cd
9 changed files with 26 additions and 20 deletions
@@ -10,8 +10,6 @@ $checkboxCheck: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAA
 $buttonUp: url('data:image/png;base64,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');
 $buttonHover: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAgCAYAAADaInAlAAAABmJLR0QAKAAqADbykokVAAAFf0lEQVR42u1aPXLdNhD+AD7yUYafIo0SazKTIofIpE+Te6jyBZxeB1CbQp17d+nSpcnkBK7SpJVnZGlsQfwFkUIgH7D8AWkqziTCzlCPILGLxe5i/yggQIAATxfY2AutdQpAmWHDGFNBXP8/2EwoH4yxKojoiXmAVvlgbAwhf0wGNJAuZDhfg/8EFJqv8wCvXwNnZ/vxDsIReIzEmd+Ar+L4dhnDeocT58EXxACuCcIJGd9gOpQ1iBbhS9zOZv5bHKEm9K8XyouT9RkaRz4J0c97lFMGMuwB7NNPDKAn8IosuAQK3KD24GtiYBwVtpZaUkhofGkpxAVBxrkRSI4bg3/svFeEnzH8lgZRQI/frwh+awAtz3KhzCJXob1xYin4Hh/x3uEnxSk+sqv9qptZi9pGoIhImhUuOMYRYs8cNUC/cQTwDY0pkz5OIwMAbHE0OF/jYBZ+SyMiHozyu/HQ14tjZkbG+agBb3EIGENvTTbFC32Kd+wKUp9C9D3Ar68Efv6D45ffW1d1bP4Ks6HYLHxoPEBkbEsgh8SOCIAKZIsENT7M3jDFfz7DQNwT4grojrz30fPhR54QdkDofSDjQw/+nUc+DSpLvRJJ5xGkeZ9DGqPJzVpHyNkN7vQZNvM8QKv8BKITUISdefbccpcCGgrc8hJxL2aliA3uvCwl8swowcmp2gsnA4yh7g3QF2OjWfiNEXDUyxL6JuiG0AgFMmwNz9qTk2yd/Ug01glvkCGyxikAbg5o3e3nIYxJ4jms19AWk29+/J6NKn+/pd2ISxeW8gVgxvblrn44M+6J7rchF8MxtHWq2nuNdNQwXCN5oNPez8Uf2o+9r/ai/D4o9QCJWacZ2NPUmgwpmMHlOEDs6EV0Wctmgo6vD0CyXtkZgav8Q6P0g8m0K/IwstQIxmPjsBHoyfPoGsIa/LmQWHwmSAfPZePIuw1NEhEElHHjrKOTd0ZQdcmdcNJLjhTCCgG0CtBAxEzXT5+bPsDrH1L89VsK4ADHEEggkEKgEhxR/LBgvBVQVwx2Lc4BxNa4lxSJB5fHkwca5c10DEyOUzSl7OZHZH4hXJVsZOy4zIi8L0jazRfiV8zNumOdTNJPjt3912XlSYzVKD0FieSE7Idb8ihylB+yTvk1JBQUNCTuIVGY51YOsKyGz0nRUnXc5eQXqDzJTVNKNKW/CLLnzJoP2V2fAmvxx/Y5h/fxRHgYV9k0ixyqypaS3hg34O/zl5BIIJBLidR4qCgWUJ0TyzoHWpj7ihgFAGjFR0u6QdduWFOZNHzQwjoiocDdS6amV+B1vAifvq97QYEP8t/tQU8HkYy03xVKcAhUeGeUHqGpJfhGoKklUCR7xWc5Wl3Wxmja0//JOYCdB5SQYNghl7IrNZ6RRkpJfAbNEOo8JQKdVlCdc0LRnZ8W014sz3NSlpFTVKSL8H2wJY0kyr/fyw6tZ3nBj7n7LJPEIOVgS6wYNoK+Adz9FLGLC6kvLxX+/K7CxUVjjKDtbLkn5t5pNAA7ImK1sG73t0IxYXBDSVe+ip/EE8oofr3yW4lvvdteUpqN9iU4bi3tNAAkzrXCW1RgTOFcj/cB2MuXlb68tLN6acq6W3KCY+LSE0+MjfE5gXoY2kv38bMW/7H55b0DUfZa5eMeROAtrtmb/af9fifw8jJuDcBUCG75RZu3isTAF55CqV5dSC1NoDhx0dUiftbiPza/V706zjWQZzhEYZ37WxefGWPQ5zrF11CD33ypEfyXgX4uXvq5dC3+5+Z31hqt8l+yis1C0PqfOrV8og7gpE7wjYfocU+dwVfi/xs8742DMaW1jtr/1mrvib44aWMpgxv+2SdAgAABAgQIECBAgAABAgQIECBAgAABngb8Dc1IQuudNLX4AAAAAElFTkSuQmCC');
 $buttonDown: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAgCAYAAADaInAlAAAE1ElEQVR4nO2av2tbVxTHP/4h5QkhY+HgpRCw6VIisrjQOnQK7VQyhXZqpoKmEgieSjqVDKEkFLrFqzsV8h9kLHEKbcHFpuDBnkpagZEpCMlSFXV470hHx/f9UJ+cFOV+4fHuvefnPffcX9KbYxxVYB2PWcYR0JTKnCKsAx/iE2DWcQQ8jd4sRo0y+BsPv3lY3/ttb8i9VFkakw6CIFF7p9NJpFt5y5+mf1JM6s+07Vn9p6enifS0+FhY/mq1OlZvNsPJfn3zOs92n/Ho20fbEWmYBFWgDjzeurs1uP3Z7QHgnxl8nvzwZHDvy3sD4HE05swTzv71rbtb9cPDQ3a+38FjNnHr01uUSiXuf32/jtrqN4AHNz+++doz1D+v5qldrQ2ABzA6A4zhiioXDa1v6gspdIu8/LOGtHimoWzqBVP/2SFTq9XYP9gHHAlwBfhA1auGbo8k9giVfGTJzz9rSItnGtaAHeBaVNcJ8S7wJ/BVgvyiGOx3+wSEGXgQtVWAY6P4ZYpD80BL1UuG3jZOCm+c/naKPY04vdaG5rH0luKzdKsP3P2z/rQMj9Zh5dMg8RUdvwMrwB8O+3vAF8Ad4DvV3mg0huVzK8Bb0Vsuf13GA5e2RPVj+CXTK4bfDorVb/mzohxTdvHE8brott6L3gFhH13+uuxLm5VH1V3Q8S1H8pp3WelpEw78HeA94CeHvvnobVf6c45OgrJDLlCOZgnsNFDG7YuLLw/0AMT1LUk2MOW0bSBNt8jL6uIaeIHzELhk6v81QElycYG6qD3/opMA0hN8mhDdMtsDRz3tfAUqATr/dIaKZRkuEN4CXhJuBTC6FXSjsiwhQz0JxopKj4sG5+249Bcj31pKZ9Ehq+suHuuL5hP5SRNSn2GsLVmyLU3zZzkkaz+lLHYDZQNGZ4UGbjhXAA1x3F4vpN5nPJhZs74QOarful2wED3d6K2DKOW4q5DL54KDzyUrZbmmSR/Fn77xS8pWXvpm+2lt9SIbohtVd0FkZRJIvWNspa0CkgBN3dhSTtvfAQTS3meUjfZOa2eZ1RWnXwdGAqLt2SCKHTugeiYXVJtrFYhbnfSAuKAHqIS7v0XT5vJVklgSS8pa3urWq5VOLj2B0mBXWIgUyexyBUXau8pJKfeUAy3jTFfJ6071VLsua70QPxDWRy0rM0Qg16+iKkt/tK/FqK5XOEly3Wc9++2VtaX47FUwzlfd1wXlp/gnfnU5v53AKAlsf+KwOFwiFsPlwu4VazHOi9EsP+RoB4X/7wz8XYf+tD1S6Nq/OFtZoA9THYc9i2VVngdOcth2Ia4vcX69uFQgKBYJul2Csx4doN0epapzBdDI24FJ5bPwTzuoWWydZLTbMM//AWuXXKedEMMEaPzV4MZHN5xMeQK+onS8ioE7Me+8WFHvlSTG14Skfgrt+KzH8Vm4IWy+vznGM0f4I9AnwEbtWq1eWarQ+XF3yPDCKM1yt9SY9n8FeemT4qL/67hoaPufX17m17ffYff57jbwC7Atn4QNvwiqXa3VV1dXMxvQ+wlAqZT863ZefgsrP6n+NHuTyufVl8afx79Go8H+wb4M/lPgyH8TOBtw/ZTfdLSB+SZwzhD9V8Gzj7Gvgj08PDw8PDw8PDw8PDw8PDw83hD8C/bEaWmX072eAAAAAElFTkSuQmCC');
-$buttonDown: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAgCAYAAADaInAlAAAE1ElEQVR4nO2av2tbVxTHP/4h5QkhY+HgpRCw6VIisrjQOnQK7VQyhXZqpoKmEgieSjqVDKEkFLrFqzsV8h9kLHEKbcHFpuDBnkpagZEpCMlSFXV470hHx/f9UJ+cFOV+4fHuvefnPffcX9KbYxxVYB2PWcYR0JTKnCKsAx/iE2DWcQQ8jd4sRo0y+BsPv3lY3/ttb8i9VFkakw6CIFF7p9NJpFt5y5+mf1JM6s+07Vn9p6enifS0+FhY/mq1OlZvNsPJfn3zOs92n/Ho20fbEWmYBFWgDjzeurs1uP3Z7QHgnxl8nvzwZHDvy3sD4HE05swTzv71rbtb9cPDQ3a+38FjNnHr01uUSiXuf32/jtrqN4AHNz+++doz1D+v5qldrQ2ABzA6A4zhiioXDa1v6gspdIu8/LOGtHimoWzqBVP/2SFTq9XYP9gHHAlwBfhA1auGbo8k9giVfGTJzz9rSItnGtaAHeBaVNcJ8S7wJ/BVgvyiGOx3+wSEGXgQtVWAY6P4ZYpD80BL1UuG3jZOCm+c/naKPY04vdaG5rH0luKzdKsP3P2z/rQMj9Zh5dMg8RUdvwMrwB8O+3vAF8Ad4DvV3mg0huVzK8Bb0Vsuf13GA5e2RPVj+CXTK4bfDorVb/mzohxTdvHE8brott6L3gFhH13+uuxLm5VH1V3Q8S1H8pp3WelpEw78HeA94CeHvvnobVf6c45OgrJDLlCOZgnsNFDG7YuLLw/0AMT1LUk2MOW0bSBNt8jL6uIaeIHzELhk6v81QElycYG6qD3/opMA0hN8mhDdMtsDRz3tfAUqATr/dIaKZRkuEN4CXhJuBTC6FXSjsiwhQz0JxopKj4sG5+249Bcj31pKZ9Ehq+suHuuL5hP5SRNSn2GsLVmyLU3zZzkkaz+lLHYDZQNGZ4UGbjhXAA1x3F4vpN5nPJhZs74QOarful2wED3d6K2DKOW4q5DL54KDzyUrZbmmSR/Fn77xS8pWXvpm+2lt9SIbohtVd0FkZRJIvWNspa0CkgBN3dhSTtvfAQTS3meUjfZOa2eZ1RWnXwdGAqLt2SCKHTugeiYXVJtrFYhbnfSAuKAHqIS7v0XT5vJVklgSS8pa3urWq5VOLj2B0mBXWIgUyexyBUXau8pJKfeUAy3jTFfJ6071VLsua70QPxDWRy0rM0Qg16+iKkt/tK/FqK5XOEly3Wc9++2VtaX47FUwzlfd1wXlp/gnfnU5v53AKAlsf+KwOFwiFsPlwu4VazHOi9EsP+RoB4X/7wz8XYf+tD1S6Nq/OFtZoA9THYc9i2VVngdOcth2Ia4vcX69uFQgKBYJul2Csx4doN0epapzBdDI24FJ5bPwTzuoWWydZLTbMM//AWuXXKedEMMEaPzV4MZHN5xMeQK+onS8ioE7Me+8WFHvlSTG14Skfgrt+KzH8Vm4IWy+vznGM0f4I9AnwEbtWq1eWarQ+XF3yPDCKM1yt9SY9n8FeemT4qL/67hoaPufX17m17ffYff57jbwC7Atn4QNvwiqXa3VV1dXMxvQ+wlAqZT863ZefgsrP6n+NHuTyufVl8afx79Go8H+wb4M/lPgyH8TOBtw/ZTfdLSB+SZwzhD9V8Gzj7Gvgj08PDw8PDw8PDw8PDw8PDw83hD8C/bEaWmX072eAAAAAElFTkSuQmCC');
-$buttonDown: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAgCAYAAADaInAlAAAE1ElEQVR4nO2av2tbVxTHP/4h5QkhY+HgpRCw6VIisrjQOnQK7VQyhXZqpoKmEgieSjqVDKEkFLrFqzsV8h9kLHEKbcHFpuDBnkpagZEpCMlSFXV470hHx/f9UJ+cFOV+4fHuvefnPffcX9KbYxxVYB2PWcYR0JTKnCKsAx/iE2DWcQQ8jd4sRo0y+BsPv3lY3/ttb8i9VFkakw6CIFF7p9NJpFt5y5+mf1JM6s+07Vn9p6enifS0+FhY/mq1OlZvNsPJfn3zOs92n/Ho20fbEWmYBFWgDjzeurs1uP3Z7QHgnxl8nvzwZHDvy3sD4HE05swTzv71rbtb9cPDQ3a+38FjNnHr01uUSiXuf32/jtrqN4AHNz+++doz1D+v5qldrQ2ABzA6A4zhiioXDa1v6gspdIu8/LOGtHimoWzqBVP/2SFTq9XYP9gHHAlwBfhA1auGbo8k9giVfGTJzz9rSItnGtaAHeBaVNcJ8S7wJ/BVgvyiGOx3+wSEGXgQtVWAY6P4ZYpD80BL1UuG3jZOCm+c/naKPY04vdaG5rH0luKzdKsP3P2z/rQMj9Zh5dMg8RUdvwMrwB8O+3vAF8Ad4DvV3mg0huVzK8Bb0Vsuf13GA5e2RPVj+CXTK4bfDorVb/mzohxTdvHE8brott6L3gFhH13+uuxLm5VH1V3Q8S1H8pp3WelpEw78HeA94CeHvvnobVf6c45OgrJDLlCOZgnsNFDG7YuLLw/0AMT1LUk2MOW0bSBNt8jL6uIaeIHzELhk6v81QElycYG6qD3/opMA0hN8mhDdMtsDRz3tfAUqATr/dIaKZRkuEN4CXhJuBTC6FXSjsiwhQz0JxopKj4sG5+249Bcj31pKZ9Ehq+suHuuL5hP5SRNSn2GsLVmyLU3zZzkkaz+lLHYDZQNGZ4UGbjhXAA1x3F4vpN5nPJhZs74QOarful2wED3d6K2DKOW4q5DL54KDzyUrZbmmSR/Fn77xS8pWXvpm+2lt9SIbohtVd0FkZRJIvWNspa0CkgBN3dhSTtvfAQTS3meUjfZOa2eZ1RWnXwdGAqLt2SCKHTugeiYXVJtrFYhbnfSAuKAHqIS7v0XT5vJVklgSS8pa3urWq5VOLj2B0mBXWIgUyexyBUXau8pJKfeUAy3jTFfJ6071VLsua70QPxDWRy0rM0Qg16+iKkt/tK/FqK5XOEly3Wc9++2VtaX47FUwzlfd1wXlp/gnfnU5v53AKAlsf+KwOFwiFsPlwu4VazHOi9EsP+RoB4X/7wz8XYf+tD1S6Nq/OFtZoA9THYc9i2VVngdOcth2Ia4vcX69uFQgKBYJul2Csx4doN0epapzBdDI24FJ5bPwTzuoWWydZLTbMM//AWuXXKedEMMEaPzV4MZHN5xMeQK+onS8ioE7Me+8WFHvlSTG14Skfgrt+KzH8Vm4IWy+vznGM0f4I9AnwEbtWq1eWarQ+XF3yPDCKM1yt9SY9n8FeemT4qL/67hoaPufX17m17ffYff57jbwC7Atn4QNvwiqXa3VV1dXMxvQ+wlAqZT863ZefgsrP6n+NHuTyufVl8afx79Go8H+wb4M/lPgyH8TOBtw/ZTfdLSB+SZwzhD9V8Gzj7Gvgj08PDw8PDw8PDw8PDw8PDw83hD8C/bEaWmX072eAAAAAElFTkSuQmCC');
 $buttonSmallUp: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAgCAYAAADaInAlAAAFHElEQVR4nO2av4vcRhTHP5rZkXVsfNgkHAGncZXCS4qQInZp1k3K1HGVKqW5wgQfLkKaBJuUqfIPBFyZpLnDlbFzEAw250DcuDIhi8MZB3GKZkdKoZnRSLv3y9yvXesLQjOj92ae5n3fe5J2ocNbjajVvw4Mj8OQGcIa8N1xG3FQ6AXt68Dw1ve3ho+fPPaDi6cXGwpJkjT6WZbtuEBbvo396h/0em35s2fPNvqbm5sAXLp4iQcPH3D7h9vu0tyQACrnry5fWy6vfnG1BLpjynHn5zvlja9vlMCq3bOZhysBq8vXlofPnj3j7i93AbgsqwuJaSrsHH+zh53zBbyWkt9NvQkr33xbnW+urAFXDs+yo4EvAW3nn7fUONNrKmTjI7PtSBBLeDeCB2P4UIJoEf5jpUApvrSlY+XmCoMLg2Ow9HDQaw+4yH9eVud2BogP26IjRh7c359m8vq61nylFD8liSfBYDBg4+nGEVl4uJggQIjzEaSt9wRVHqY5x4DW/enW/b0GfrQk+ERK7pspLJlheAIYGwpbBpbs2EugHwjHkSRRAq21HzNRlTL6UrE5zliw41JKTLBZSqmG3jSZvWDL2uHnKPem79Zqr7llHR5bIsgIlABdQF7CB4XhdQmPIsOiVRuNRvuy+SRjxwzQp95sJQQARVEgpUQpBUCuq13JS0NfKiIKhJV1Gy6EQMraaVprr++I4fpOJ8sylFINh2mt6UtFHEly6/jY6js9pRTGGIqiAEAIQVFUNrlrxhiUUhRFQR+DrkRRwtpXVO18voJ9KqYSIIx653htN7QdcdVmCX89FjQzhN3wdvS7vjuHURleC/WklJRAarS3LcsypJSeKO2M4vohKaSU9bpBxIdE0EWVFebtraeNHTMA1I7vS0VeGl8yhahKQb9XvUjFNsKzcUaSJH7Dwyzg+i7atdbecS4ioXaak3MRLKWEcbWWywBJkqC1RgiBMabRd2uEczv4LDbOSE0d/dU91ySYd3gCZOMm11OqTKB61c7kGOKehLFN5SXInqSNpJfAGCQSGUlUosiNwVCl69NKkVkH59YJSilSremrSlYI4QmVG0NsiZBqjUIQR7JRBpTTs3KlJUtuCZFq7TNZOK9DmPr7MkGjA+cbFqPq4XAes4HYTSDVmlTreuNK4w+HaW1/DjY6N8Y7H2BB1Ms754ON8FYqz42hr5r13423ZWPZJGbb+e12mP5D+XyPD5izjKklIJ02ZqPIlQQlBKnR5KUhjiSaajwvDTqq2prCU0wJUZGpNW9cFA3Hu7WgLj+Ns3WUWw9slrC6TtYRJtXatzezzMv5e7FP++4twD1fhBiVwJyWgx2fAVwZgMlIa7RbkdLo7xJE2805LQtMhZnUdUiDB0jXdnLT5POynjB81QQYSLg3Z19BISSAbb06pUji+nuf/LcZs7t9O9+uTmZ7ceYe5N90/e3g5svLpn5mSfzPqSoE/ugpzFhDlrK1tbXPVU4uJjLAX/9VkfJ+PG8ffd8c53qK9SzlxXiyPMw6PAFGf4+4fOUyj1bveRLAZETtRov8AI2bhoNe3813Dlin/goaXg+df/HTi/tc4WTDEWBt48kGg48Gw8/eO8OvL195Ejw/PtuOBS/aA1ldAj9/5wzPgYe/PVyj+mfQzCP8KeQ6MBxcGAyXltpxcHLQrr8LCwvbSB68/mg0YuPphnP+XPwjqPtP4P4xN87v0KFDhw4dOnTo0KFDhw4dOnTo0KHD24L/AXaP6lUld1KEAAAAAElFTkSuQmCC');
 $buttonSmallHover: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAgCAYAAADaInAlAAAABmJLR0QAKAAqADbykokVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE0ElEQVR42u2aT2/cRBjGf/bsbu1YWZImDRLl0J44IQ6ceitSJD5B+3VavgZfoZ+gqBK9ceHSC+KAhFBVogbaLNu4ce21h8OOvTOvvess4QDOPJK1Hs9fz/PM+74zXvDw8Li+COQDrdkDCpPMeUgVPKH8rw1cP0C1XuYJpX6Aqn/rZ57my06qZk9rEj8TlxfdYCyA/p49gOArZkYMkSmwEDUWVxRZtNUAAzKn/mNR/9GWA/imp7/Hbn8d41dmXOWwBPCUJPia1CIpAvhDCODWL4ROC+cifaenx73NE9zCz8Ii/S4E8GlP/duCqJ9E/hkVAD8w5x5TPhLji5f1gy+Wc1OLYCgCGDV3E8ZdK/TWa3acGtGyXIP3TJz0Xz09flhNZCfeCEGFFMCBNc7YyZ/19LdL7qSlET8w+fdMumLX9PuuKZOQ6BeOCMYwNAEgaDYWgJmY8EisQGnSxz09lktXsxYz0d5NkS8F0AfFhZPeaQlyueI/ZgrAhUlXDfkFKSk3ONIvOLUtwbAEUNPynIgjQ4IibgjPjCl+bSZqRUhdNqEkbfYPNU4FoUfCxJ5uKaBJTwwRifbfCsGlKJRFYoViYaVjzowQasHOOSchIuetGd1zItjSlf0PXEAkVo5Lfm4EMDK/gflVlilUHPGezDGjE8Yoy4+fC9MZ90TWC0sSIe8IDaEVKaFpt7IIDIRAM0CRUjbjzqis8QRkjh2MgIKM2FgDzcTaFg8OYW8Jm/xSkF8bydW18qH1vRJBXM6U3JCUC7Jsgcl72XZo5YUkzdXtdhKrjcQRQPt92jhkbIQwOIwuXbJsrfykyXEnPneIlR67sITQRbJ8VnWIZD1SdEs0tUhS8Twxlk9RkhKQoK0yitiMPWPAGF2CeMWCMQvjDiJK9AZSFFOH9JwImolNGBMTGj+7yseUSf6BDYsZNe0pztlHWe0rIjTzJrqIG0nU7wcj45ZCci6I0JQUpIDiM+AVBXvAyXV0AQA3rC3R0grMCZhbq8n2wWlzrYhdrVCb/K4V3L5PN+RhkV8TfiZ2KfO1vVU9EX01rIh/swXI15i6hDkpU0ZmIkMTtFVMO0SQUDlBXkolgstKrMCqJcL1IggdUlLzBtXGff5CBJ2hY21SAiC03kOTmtVf95Kb7WkxbAG0Tf9yRxwRkVgTFArCCmvKFdA+IStFj5kg6PJHw10rMmq1J/f50uZljoDGlCjr/QpDtN3XS3I+J+GlOFQalADqE7U7ZMzMtrDkAkVOybQRwatmXz03LcTOnmHSeajkbsvoebIN/hTpWLSnRf4n4mDohMwRTWXVv8mcA1LuG8HcN6LIh2MNWhYguEumfzWCWB3yzC2XUAoLMNl40pb1Hu1sh77WdgQ5bQuQi3imECeP61Z5GgTDcwMrAeyS1h+EGhFA1lrTh2KF/Sa87n7rJPDf/YR6uyc/EgKdtFxCKdxKvQPYp+KMQxFTLF1YXpOvnw7rc7nzhxD9I2MOUMHdDWZZC6shPw/35V8Veouzi+43XmzVvlVeaxK+g/qr6eAEAOJPD8ci4DtB8agxg+EV+lUiOFQiYOxLr2ujbIWN33aM8xkVx4Q8M6u9vj8m5EtT5o1lOyaMa78/JPI9PDw8PDw8PDw8PDw8PDw8PDw8PDyuBf4G3l+NrFOXDK4AAAAASUVORK5CYII=');
 $buttonSmallDown: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAgCAYAAADaInAlAAADsUlEQVR4nO2aMW/TQBTH/yRN5CiiogJlKSMLqiXERjtnQ3wDOvEJqgwV6lZlAbXiE/QLIJUdpXPLhoqcDRYWUCSUChTFanDCcPfi5+dLbEshqd37SSf73b27e773fHe5GLDcau4IeR9AcxWG5IgzAG9WbcSiWGP3+wCaR2+PmpdfLqeZ63fXIxUcx4nIvu/P7UDqS7LWX3R/Un9jYyMi9/t9AMDO9g7OL85x/O6YigoTBIByfqe115rsvtydALDJkE7fn04OXh9MAHT0mBWGTmuvNXnx/MXKB/mmp/Zhe9I+bFMQFIaOdX765G65hQmANVPmpr4+XKIhq+K3kKtCvkQc13Xhdb3/ZNFyiQXAJpTjN+O6haQJ4AOAx1qus7InuvxYVioQ0wAIrgMAwC8t0165BGD+vjrf/ABwT1+B8LkBwAPwSqcTlt/r9ZZj3BKIzQD3ATzQVxMTIZczdhhk1JftJ9VP0pflIwAVJtcADNn1BCoAngL4nGRsDimlVXQQzgQ1ca1CDSSYjBkyr1tDvC2eZ2qrNiPNI40e9eMAoJMA0i+i4wnjJlDCl4AawmDwEQ5cXdSZFwT8qMVnsmPI431IW6ic22U6Jpq3hFVn3N8WpgHg/1VDV0V0wCqITqNlRN/2Mivn0+u1IW/aV4JsyqN2Bvpa1X3w9medEfpMj9s7iwDquUdQgT1EPMCLQqoZoI6o02lwaO2kdWSM6HrK9QNWpwzlFN7OWNThbZYQOo7bUkfoTHIWtUt5FURtp3ZJhwdHSetSX1n3N3nEGAADhBFP0yJ3bIBwIPkg8fsK06XBlOWUR46Sg05vIrQOdx45lWYCGYz8LZa2lplO2aBv4vuM/LyTuAkcsPuRTmOEAzcylI+YPNaJ8mgm4I4uId4OEM4KfOaQeteIQm8vn1G4vYHhKvOo7ay/WPJIbAbgbz+gBpivrT7U7+YrLTswD1TA9DmOKJd1RqLc5Bx+3wdA/1fKtzetHli+tPcn1HjwDeJwOJzRQv5ItQfgx6VVhM6XZSbkzjpJH1COSqOXpc15erw/bm9fXx8B+JbBnjwxDQB+usXPueRGSK4ZcvMmoY0bMf/ffMWfFDqLhPfHn+8K6vm/srztZ9tLsWlZUACceV0P7pbb9LoeGgiDYBE/fwbJKjeSPtSp6EeRf/Hp4gzqy6Dcwz8J2wfQdLfcZqPRWJU9icj1t1ZLOgdcXP1erwev65HzC/FFkP0mMDuFcb7FYrFYLBaLxWKxWCwWi8ViuS38A8a81mDd4NfxAAAAAElFTkSuQmCC');
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { KeyboardEvent, useCallback } from 'react'
+import cn from 'classnames'

 import './checkbox-component.scss'

@@ -23,7 +24,7 @@ export const CheckBoxComponent = ({handleClick, optionName, value}: Props) => {
                    tabIndex={0}
                    onClick={() => handleClick(optionName)}
                    onKeyDown={(e) => handleKeyDown(e, optionName)}
-                    className={`checkbox ${value ? 'checkbox--checked' : ''}`}
+                    className={cn('checkbox', {'checkbox--checked': value})}
            />
    )
 }
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { KeyboardEvent, useCallback } from 'react'
+import cn from 'classnames'

 import './menu-item-component.scss'

@@ -22,7 +23,7 @@ export const MenuItemComponent = ({isActive, handleClick}: Props) => {
                    tabIndex={0}
                    onClick={handleClick}
                    onKeyDown={handleKeyDown}
-                    className={`menu-item ${isActive ? 'menu-item--active' : ''}`}
+                    className={cn('menu-item', {'menu-item--active': isActive})}
            />
    )
 }
@@ -10,6 +10,7 @@ import {
    useState,
    WheelEvent
 } from 'react'
+import cn from 'classnames'

 import { ANIMATION_DURATION, debounce, PREVIEW_HEIGHT, PREVIEW_WIDTH, SPACE } from '../../utils'
 import { useSettings } from '../../hooks'
@@ -198,7 +199,7 @@ export const PanelComponent = ({
                    onMouseLeave={handleFree}
                    onWheel={handleScroll}
                    onBlur={handleFree}
-                    className={`panel panel--${orientation} ${isShown ? `panel--${orientation}--shown` : ''}`}
+                    className={cn('panel', `panel--${orientation}`, {[`panel--${orientation}--shown`]: isShown})}
            >
                <div
                        ref={panel}
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
+import cn from 'classnames'

 import { useSettings } from '../../hooks'
 import { Plug } from '../../assets'
@@ -46,13 +47,10 @@ export const PreviewComponent = ({name = '', src, value, handleChange, isLoading
                        margin: `${name ? '10px 5px' : '5px'}`,
                        backgroundImage: `url(${isLoaded ? image.src : Plug})`
                    }}
-                    className={
-                        `preview ${!isLoaded
-                                ? 'preview--not-loaded' :
-                                ''} ${isLoading
-                                ? 'preview--loading'
-                                : ''}`
-                    }
+                    className={cn('preview', {
+                        'preview--not-loaded': !isLoaded,
+                        'preview--loading': isLoading
+                    })}
            >
                {name && (
                        <div className='preview-name'>
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { FocusEvent, KeyboardEvent, useCallback, useRef, useState } from 'react'
+import cn from 'classnames'

 import './select-component.scss'

@@ -49,7 +50,9 @@ export const SelectComponent = ({children, options, current, handleChange}: Prop
                    onKeyDown={handleKeyDown}
                    onBlur={handleBlur}
                    tabIndex={0}
-                    className={`select ${isSelectShown ? 'select--opened' : ''}`}
+                    className={cn('select', {
+                        'select--opened': isSelectShown
+                    })}
            >
                {children}
                <div className='select-arrow' />
@@ -64,12 +67,9 @@ export const SelectComponent = ({children, options, current, handleChange}: Prop
                                            tabIndex={0}
                                            onClick={() => onItemClick(item)}
                                            onKeyDown={(e) => onItemKeyDown(e, item)}
-                                            className={`select-item ${item === current
-                                                    ?
-                                                    'select-item--selected'
-                                                    :
-                                                    ''}`
-                                            }
+                                            className={cn('select-item', {
+                                                'select-item--selected': item === current
+                                            })}
                                    >
                                        {item}
                                    </div>
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { FocusEvent, MouseEvent, TouchEvent, useCallback, useEffect, useState } from 'react'
+import cn from 'classnames'

 import { Background } from '../../assets'
 import { ANIMATION_DURATION, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../utils'
@@ -159,7 +160,10 @@ export const ViewComponent = ({src}: Props) => {
                    onMouseLeave={handleFree}
                    onBlur={handleFree}
            >
-                <div className={`view-background ${isLoaded ? 'view-background--loaded' : ''}`} />
+                <div className={cn('view-background', {
+                    'view-background--loaded': isLoaded
+                })}
+                />
            </div>
    )
 }