From 1a262bd371dc185ffc530af9eca3f9fb8b2531fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Rodri=CC=81guez=20Alsina?= Date: Thu, 2 Aug 2018 16:14:11 -0300 Subject: [PATCH] (feat) Ballot cards restyling. --- src/assets/App.css | 2 +- src/assets/images/icons/icon-info.svg | 3 + src/assets/images/icons/icon-min.svg | 3 + src/assets/stylesheets/application/_info.scss | 58 ++++++++++++-- .../stylesheets/application/_socials.scss | 77 ------------------- .../stylesheets/application/_vote-scale.scss | 2 +- .../application/ballots/about.scss | 43 +++-------- .../stylesheets/application/ballots/base.scss | 48 +++--------- .../application/ballots/footer.scss | 6 +- .../stylesheets/helpers/_placeholders.scss | 4 +- src/assets/stylesheets/helpers/_vars.scss | 2 +- src/components/BallotCard.jsx | 41 ++++++++-- 12 files changed, 119 insertions(+), 170 deletions(-) create mode 100644 src/assets/images/icons/icon-info.svg create mode 100644 src/assets/images/icons/icon-min.svg diff --git a/src/assets/App.css b/src/assets/App.css index d85ba5e..dcd2078 100644 --- a/src/assets/App.css +++ b/src/assets/App.css @@ -1 +1 @@ -.footer{left:0;right:0}.new-form,.settings,.ballots-i{background-color:#fff;border:1px solid #b8c1cb;border-radius:6px;margin-bottom:80px;padding:20px;transition:0.15s box-shadow}.new-form:hover,.settings:hover,.ballots-i:hover{border-color:#5c34a2;box-shadow:0 0 55px rgba(0,0,0,0.15)}@media screen and (max-width: 768px){.new-form,.settings,.ballots-i{margin-bottom:15px;padding:15px}}input,textarea,select{transition:0.3s background-color, 0.3s border-color;background-color:#fff;border-radius:3px;border:1px solid #b8c1cb;box-sizing:border-box;color:#444;font-size:14px;height:40px;outline:none;padding:0 10px;width:100%}input:hover,textarea:hover,select:hover{border-color:#8e959d;color:#202d3c}input:focus,textarea:focus,select:focus{border-color:#5c34a2;color:#202d3c}button,.ballots-i--vote,.ballots-footer-finalize{cursor:pointer;display:inline-block;transition:0.3s opacity;box-sizing:border-box;border:0;outline:none;padding:0 15px;text-transform:uppercase;line-height:36px;font-size:13px;font-weight:bold}button:hover,.ballots-i--vote:hover,.ballots-footer-finalize:hover{opacity:0.9;text-decoration:none}html,body,p,h1,h2,h3{margin:0;padding:0;font-weight:normal}html{display:flex;min-height:100%}body{-webkit-font-smoothing:antialiased;background-color:#ffffff;box-sizing:border-box;color:#333;font-family:'Nunito', sans-serif;font-size:14px;padding-bottom:66px;position:relative;width:100%}@media screen and (max-width: 768px){body{padding-bottom:132px}}@media screen and (max-width: 414px){body{padding-bottom:132px}}a{color:#5c34a2;text-decoration:none}a:hover{text-decoration:underline}hr{display:block;width:100%;height:1px;margin:10px 0 30px;border:0;background-color:#e5eef9}.center{text-align:center}.left{float:left;width:48%}.right{float:right;width:48%}@media screen and (max-width: 414px){.left,.right{float:none;width:100%}}.hidden{overflow:hidden}.display-none{display:none}.container{width:960px;margin:0 auto;box-sizing:border-box}@media screen and (max-width: 960px){.container{width:100%;padding:0 10px}}.title{margin-top:30px;margin-bottom:30px;color:#38454f;font-size:30px;font-weight:normal}@media screen and (max-width: 768px){.title{font-size:28px}}@media screen and (max-width: 414px){.title{font-size:26px}}button,input,textarea{outline:none}.btn{background-position:calc(100% - 15px) 50%;background-repeat:no-repeat;border-radius:5px;border:0;color:#fff;cursor:pointer;font-weight:bold;font-size:14px;line-height:42px;outline:none;padding:0 15px;text-decoration:none;text-transform:uppercase;transition:0.15s background-color}.btn.btn-primary{background-color:#5c34a2;box-shadow:0px 5px 10px 0 rgba(92,52,162,0.3)}.btn.btn-primary:hover{background-color:#46287b}.btn.btn-secondary{background-color:#6ac9b9}.btn.btn-secondary:hover{background-color:#45bba7}.btn.btn-success{background-color:#60db97;box-shadow:0px 5px 10px 0 rgba(96,219,151,0.3)}.btn.btn-success:hover{background-color:#36d27c}.btn.btn-danger{background-color:#f21b57;box-shadow:0px 5px 10px 0 rgba(242,27,87,0.3)}.btn.btn-danger:hover{background-color:#ce0c42}.btn.btn-new{background-image:url("../assets/images/icons/icon-add.svg");background-size:14px 14px;padding-right:45px}.btn.btn-transparent{color:#5c34a2;background-color:transparent}.btn.btn-transparent:hover{opacity:0.8}.btn.btn-load-more{background-image:url("../assets/images/icons/icon-load-more.svg");background-size:14px 14px;padding-right:45px}.btn.no-shadow{box-shadow:none}.btn[disabled],.btn.disabled{color:#333333;cursor:default;background-color:#f0f0f0;box-shadow:none}.btn[disabled]:hover,.btn.disabled:hover{background-color:#f0f0f0}.btn.btn-finalize{background-image:url("../assets/images/icons/icon-finalize-white.svg");background-size:14px 14px;padding-right:45px}.btn.btn-finalize[disabled],.btn.btn-finalize.disabled{background-image:url("../assets/images/icons/icon-finalize-black.svg")}.btn.text-lowercase{text-transform:lowercase}.btn.text-uppercase{text-transform:uppercase}.btn.text-capitalize{text-transform:capitalize}label{display:inline-block;margin-bottom:15px;color:#778f9b;font-size:14px}input:focus,textarea:focus{border-color:#5c34a2}input[type='radio'],textarea[type='radio']{display:none}textarea{width:100%;padding-top:10px;padding-bottom:10px;height:70px;resize:none}select{appearance:none;padding-right:30px;background-repeat:no-repeat;background-position:right 13px center;background-image:url(./images/select.png)}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){select{background-image:url("./images/select@2x.png");background-size:8px 4px}}button{background-color:rgba(92,52,162,0.1);color:#5c34a2}button.load-more{margin-bottom:50px}@media screen and (max-width: 960px){button.load-more{margin-bottom:80px}}@media screen and (max-width: 768px){button.load-more{margin-top:80px}}.radio{transition:0.3s color, 0.3s background-color, 0.3s border-color;cursor:pointer;position:relative;margin-bottom:0;line-height:40px}input[type='radio']:checked+.radio{border-color:#5c34a2;color:#5c34a2}.radio_icon{padding-left:37px;background-repeat:no-repeat;background-size:16px 16px;background-position:left 11px center}.radio_add{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZ0lEQVR4AWIgF8SYLPIE4mdQ7MlAbwC1GNB+HWAAAMJQGL5f9z9C2jGWWTIASk/8eAS8D/LMV4YC4DX/AgAAAAAAQFk1f5xcUVH5RqgBFoAWD0F5j25+AQAAAAAAuHWcmgCQK3q6ahPyvQbTMeZShQAAAABJRU5ErkJggg==")}.radio_remove{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAc0lEQVR42u2XwQ3AIAwDM1SXgBmYrrNVyRglbz5WcRGtZEv3Q/g+icBQ2nGWxJP7IZ4UYwPKEb5bIN4QqElMlF9JNUWh5pwH7wmqnMd3C8Qw5zT8nhgPGhV8nwQkIAEJSEACEvi6AM8vBXyhQBB/wTVvwA5ymYbEmIcsVAAAAABJRU5ErkJggg==")}.radio_swap{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABBklEQVR4AWLABWJMFgGarwfdCoAgCsNbxujz1LZt2wyquHi7BrVtW9tTc7ZXO3Mn+eL0P20v62APtiBRcR6C3aC/WBOLv9mTjD9CDUe8h4g3S8abOOKNoC1agQjTgGPQlk2ZBmxKD8iFe4vxRYj473FQRIwYUFzn7SO6pUccKZzkiHnFfYhmwSxMQIiLP8MHfJXEIZwPB3AEldxxfzgh3tRYBgTAxR9vbo2cI9pAS4/oI0bUO/O/DHLTqHkEHc+BU9CWPEKJacAeaMtWpD8nTJsGJMGWxfgNyxceRMaJeAZHfIyIZ3LEh4l4Fkc8EK7/iGdzvQL6wcGX+K3VODEiFqbfJCvingAZLf+WroN1/QAAAABJRU5ErkJggg==")}.radio:before,.radio:after{content:'';position:absolute;top:50%;border-radius:50%}.radio:before{transition:0.3s border-color;left:-40px;top:8px;width:24px;height:24px;box-sizing:border-box;border:1px solid #b8c1cb}input[type='radio']:checked+.radio:before{border-color:#5c34a2}.radio:after{transition:0.3s transform, 0.3s opacity;transform:scale(0.5);opacity:0;left:-34px;top:14px;width:12px;height:12px;background-color:#5c34a2}input[type='radio']:checked+.radio:after{transform:scale(1);opacity:1}.radio-container{margin-bottom:20px;padding-left:40px}.form-el{margin-bottom:20px}.hint{color:#778f9b;font-size:12px;line-height:18px;margin-top:15px;word-break:break-all}.footer{background-color:#5c34a2;bottom:0;padding:18px 0;position:absolute}.footer.sokol{background-color:#6ac9b9}.footer .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 768px){.footer .container{flex-direction:column}}.footer .socials{order:2}@media screen and (max-width: 768px){.footer .socials{margin-top:15px;order:1}}.footer-logo{background-image:url("../assets/images/logos/logo_voting_dapp_footer.png");background-repeat:no-repeat;background-size:contain;display:block;height:20px;left:0;order:0;width:123px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.footer-logo{background-image:url("../assets/images/logos/logo_voting_dapp_footer@2x.png");background-size:100% 100%}}.footer-rights{color:#fff;font-size:12px;order:1;text-align:center}@media screen and (max-width: 768px){.footer-rights{line-height:normal;margin-top:15px;order:2;width:100%}}.header{background-color:#5c34a2;position:relative;width:100%;z-index:9999}@media screen and (max-width: 414px){.header{left:0;right:0;position:fixed;top:0;z-index:124}}.header .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 414px){.header .container{width:93%;padding:22px 0}}.header.sokol{background-color:#6ac9b9}.header-logo{display:block;height:26px}.header .links-container{align-items:center;display:flex;justify-content:space-between;height:70px;margin-left:auto}@media screen and (max-width: 414px){.header .links-container{display:none}}@media screen and (max-width: 768px){.header .links-container{justify-content:flex-end;width:auto}}.header .links-container-mobile{display:none}@media screen and (max-width: 414px){.header .links-container-mobile{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:space-evenly}}.header .link{color:#fff;font-size:14px;font-weight:700;line-height:18px;margin-left:34px;opacity:0.8;text-decoration:none;transition:opacity linear 0.1s}.header .link:hover,.header .link.active{opacity:1}@media screen and (max-width: 414px){.header .link{margin-left:0}}.header .link-icon{height:18px;width:18px;margin-right:10px;float:left;background-position:50% 50%;background-repeat:no-repeat}.header .link-icon-all{background-image:url("../assets/images/icons/icon-all.svg")}.header .link-icon-active{background-image:url("../assets/images/icons/icon-active.svg")}.header .link-icon-to-finalize{background-image:url("../assets/images/icons/icon-to-finalize.svg")}.header .mobile-menu{display:none}@media screen and (max-width: 414px){.header .mobile-menu{display:block;order:3}}.header .mobile-menu .mobile-menu-icon{width:18px;height:14px}.header .mobile-menu .mobile-menu-open-icon{width:18px;height:18px}@media screen and (max-width: 414px){.header .header-mobile-menu-container{background-color:#45277a;height:172px}}@media screen and (max-width: 414px){.header.sokol .header-mobile-menu-container{background-color:#45bba7}}.header .Select{margin-left:25px}@media screen and (max-width: 414px){.header .Select{margin-left:0;max-width:125px;order:2}.header .Select .Select-control{max-width:125px}}.header .btn.btn-new-ballot{height:36px;line-height:36px;opacity:1}.header .btn.btn-new-ballot .link-icon{display:none}.select-network-id{background:#fff;width:40px}.info{color:#000}.ballots .info{align-items:center;background-image:url(./images/info.png);background-position:left center;background-repeat:no-repeat;display:flex;margin-bottom:20px;max-width:100%;min-height:32px;padding-left:44px;word-break:break-all}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.ballots .info{background-image:url("./images/info@2x.png");background-size:32px 32px}}.new-form .info{padding:30px}.info-title{position:relative;margin-bottom:30px;padding-left:44px}.info-title:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:32px;height:32px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.info-title:before{background-image:url("./images/info@2x.png");background-size:32px 32px}}.info-i{position:relative;margin-bottom:10px;padding-left:12px;line-height:18px;font-size:12px}.info-i:before{content:'';position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background-color:#5c34a2}.app-container{padding-top:40px;position:relative}.app-container.app-container-open-mobile-menu:before{background-color:rgba(78,44,137,0.8);bottom:0;content:'';display:none;left:0;position:absolute;right:0;top:0;z-index:1234}@media screen and (max-width: 414px){.app-container.app-container-open-mobile-menu:before{display:block}}.app-container.app-container-open-mobile-menu.sokol:before{background-color:rgba(106,201,185,0.8)}@media screen and (max-width: 414px){#root,.app-container{height:100%}.app-container{padding-left:10px;padding-right:10px}}@media screen and (max-width: 414px){.content{padding-top:120px}}.content.content-menu-open{padding-top:242px}.clearfix::after{content:"";clear:both;display:table}@keyframes fadeOut{0%{opacity:.2}20%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(0.3)}}.loading{display:flex;justify-content:space-between;left:50%;margin:-30px 0 0 -111.5px;padding-top:50px;position:absolute;top:50%;width:206px}.loading:before{background-image:url("../assets/images/logos/logo_loader.svg");background-position:0 0;background-repeat:no-repeat;content:'';left:0;position:absolute;top:0;height:100px;width:206px}.loading-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000000}.loading-i{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:fadeOut;animation-timing-function:linear;background-color:#fff;border-radius:50%;height:9px;opacity:.2;width:9px}.loading-i:nth-child(2){animation-delay:.1s}.loading-i:nth-child(3){animation-delay:.2s}.loading-i:nth-child(4){animation-delay:.3s}.loading-i:nth-child(5){animation-delay:.4s}.loading-i:nth-child(6){animation-delay:.5s}.main-title-container{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between;margin-bottom:50px}.main-title-container .main-title{font-size:24px;color:#333;line-height:38px}@media screen and (max-width: 414px){.main-title-container{-ms-flex-direction:column;flex-direction:column}.main-title-container .search-input{width:100%}}.nav{font-size:0}.nav-i{transition:0.3s color;position:relative;display:inline-block;vertical-align:middle;margin-right:40px;color:#778f9b;text-transform:uppercase;text-decoration:none;line-height:normal;font-size:14px;font-weight:bold}.nav-i:hover,.nav-i_active{color:#444}.nav-i_active:before{content:'';position:absolute;left:0;right:0;bottom:-30px;height:3px;background-color:#08b3f2}.new-form{display:flex;overflow:hidden;padding:0}@media screen and (max-width: 768px){.new-form{display:block}}.new-form-side{padding-top:30px;padding-bottom:30px;box-sizing:border-box}@media screen and (max-width: 768px){.new-form-side{width:100% !important}}.new-form-side_left{width:30%}@media screen and (max-width: 768px){.new-form-side_left{padding-bottom:0}}.new-form-side_right{width:70%;border-left:1px solid #e5eef9;padding-left:30px;padding-right:30px}@media screen and (max-width: 768px){.new-form-side_right{border:0;padding-top:0}}.new .add-ballot{white-space:nowrap}@media screen and (max-width: 414px){.new .add-ballot{margin-top:20px}}.search-container{background-color:#502d8d;box-sizing:border-box;height:50px;padding:10px 0 0 0}.search-container.sokol{background-color:#45bba7}@media screen and (max-width: 414px){.search-container{left:0;position:fixed;right:0;top:70px;z-index:123}}.search-input{background-color:transparent;background-image:url("../assets/images/icons/icon-search.svg");background-position:0 50%;background-repeat:no-repeat;background-size:16px 16px;border-radius:0;border:none;box-sizing:border-box;color:#fff;display:block;font-size:14px;font-weight:400;height:30px;outline:none;padding-left:30px;width:100%}.search-input:hover{color:#fff}.search-input::-webkit-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}.search-input:-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}.search-input::-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}.search-input:-ms-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}.settings{max-width:600px;margin:0 auto}.settings-title{margin-bottom:20px;color:#38454f;text-align:center;font-size:24px}.socials-item:not(:first-child){margin-left:10px}.socials-i{background-color:#ffffff;border-radius:3px;display:inline-block;font-size:0;height:30px;position:relative;transition:0.3s background-color;vertical-align:top;width:30px}.socials-i:not(:first-child){margin-left:10px}.socials-i:hover{background-color:rgba(255,255,255,0.4)}.socials-i:before{background-position:50% 50%;background-repeat:no-repeat;background-size:contain;content:'';height:16px;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:16px}.socials-i_github:before{background-image:url("../assets/images/socials/git.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_github:before{background-image:url("../assets/images/socials/git@2x.png");background-size:100% 100%}}.socials-i_telegram:before{background-image:url("../assets/images/socials/telegram.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_telegram:before{background-image:url("../assets/images/socials/telegram@2x.png");background-size:100% 100%}}.socials-i_twitter:before{background-image:url("../assets/images/socials/tw.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_twitter:before{background-image:url("../assets/images/socials/tw@2x.png");background-size:100% 100%}}.socials-i_poa:before{background-image:url("../assets/images/socials/poa.png");height:20px;width:20px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_poa:before{background-image:url("../assets/images/socials/poa@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_github:before{background-image:url("../assets/images/socials/git-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_github:before{background-image:url("../assets/images/socials/git-sokol@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_telegram:before{background-image:url("../assets/images/socials/telegram-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_telegram:before{background-image:url("../assets/images/socials/telegram-sokol@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_twitter:before{background-image:url("../assets/images/socials/tw-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_twitter:before{background-image:url("../assets/images/socials/tw-sokol@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_poa:before{background-image:url("../assets/images/socials/poa-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_poa:before{background-image:url("../assets/images/socials/poa-sokol@2x.png");background-size:100% 100%}}.vote-scale{background-color:rgba(229,238,249,0.5);border-radius:5px;clear:left;height:10px;margin-top:32px;overflow:hidden}.vote-scale-not-finalized{background-color:#ffffff}.vote-scale--fill{height:100%;border-radius:3px}.vote-scale--fill_yes{background-color:#f21b57}.vote-scale--fill_no{background-color:#60db97}.vote-scale--container{width:100%;max-width:350px}@media screen and (max-width: 768px){.vote-scale--container{float:right;max-width:100%}}.vote-scale--value{float:left;font-size:12px}.vote-scale--votes,.vote-scale--percentage{float:right;font-size:13px}.vote-scale--votes{color:#778f9b;margin-left:10px}.vote-scale--percentage{color:#000;font-weight:700}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}.Select{position:relative}.Select input::-webkit-contacts-auto-fill-button,.Select input::-webkit-credentials-auto-fill-button{display:none !important}.Select input::-ms-clear{display:none !important}.Select input::-ms-reveal{display:none !important}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-searchable.is-open>.Select-control{cursor:text}.Select.is-searchable.is-focused:not(.is-open)>.Select-control{cursor:text}.Select.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#9ba7b5 #b8c1cb #c7ced6}.Select.is-open>.Select-control .Select-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.Select.is-focused>.Select-control{background:#fff}.Select.is-focused:not(.is-open)>.Select-control{border-color:#5c34a2 #673ab5 #673ab5;box-shadow:none}.Select.has-value.is-clearable.Select--single>.Select-control .Select-value{padding-right:44px}.Select.has-value.Select--single>.Select-control .Select-value .Select-value-label,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{color:#333}.Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label:hover,.Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:hover,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus{color:#8e959d;outline:none;text-decoration:underline}.Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus{background:#fff}.Select.has-value.is-pseudo-focused .Select-input{opacity:0}.Select.is-open .Select-arrow,.Select .Select-arrow-zone:hover>.Select-arrow{border-top-color:#666}.Select.Select--rtl{direction:rtl;text-align:right}.Select-control{background-color:#fff;border-collapse:separate;border-color:#c7ced6 #b8c1cb #9ba7b5;border-radius:3px;border-spacing:0;border:1px solid #b8c1cb;color:#333;cursor:default;display:table;height:40px;outline:none;overflow:hidden;position:relative;width:100%}.Select-control:hover{box-shadow:none}.Select-control .Select-input:focus{outline:none;background:#fff}.Select-placeholder,.Select--single>.Select-control .Select-value{bottom:0;color:#333;left:0;line-height:38px;padding-left:15px;padding-right:15px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-input{height:38px;padding-left:15px;padding-right:15px;vertical-align:middle}.Select-input>input{background:none transparent;border:0 none;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;margin:0;outline:none;line-height:17px;padding:10px 0 14px;-webkit-appearance:none}.is-focused .Select-input>input{cursor:text}.Select-control:not(.is-searchable)>.Select-input{outline:none}.Select-loading-zone{cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:16px}.Select-loading{-webkit-animation:Select-animation-spin 400ms infinite linear;-o-animation:Select-animation-spin 400ms infinite linear;animation:Select-animation-spin 400ms infinite linear;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #b8c1cb;border-right-color:#333;display:inline-block;position:relative;vertical-align:middle}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn 200ms;-o-animation:Select-animation-fadeIn 200ms;animation:Select-animation-fadeIn 200ms;color:#999;cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:19px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:20px;line-height:1}.Select--multi .Select-clear-zone{width:19px}.Select--multi .Select-multi-value-wrapper{display:inline-block}.Select .Select-aria-only{position:absolute;display:inline-block;height:1px;width:1px;margin:-1px;clip:rect(0, 0, 0, 0);overflow:hidden;float:left}.Select-arrow-zone{cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:25px;padding-right:5px}.Select--rtl .Select-arrow-zone{padding-right:0;padding-left:5px}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;display:inline-block;height:0;width:0;position:relative}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:3px;border-bottom-left-radius:3px;background-color:#fff;border:1px solid #b8c1cb;border-top-color:#dce0e5;box-shadow:none;box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1000;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{box-sizing:border-box;background-color:#fff;color:#666;cursor:pointer;display:block;padding:8px 15px}.Select-option:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.Select-option.is-selected{background-color:#f5faff;color:#333}.Select-option.is-focused{background-color:#f2f9fc;color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{box-sizing:border-box;color:#999;cursor:default;display:block;padding:8px 15px}.Select--multi .Select-input{vertical-align:middle;margin-left:15px;padding:0}.Select--multi.Select--rtl .Select-input{margin-left:0;margin-right:15px}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:#f2f9fc;border-radius:3px;border:1px solid #e5eef9;color:#08c;display:inline-block;font-size:.9em;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:3px;border-top-right-radius:3px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#08c;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:3px;border-top-left-radius:3px;border-right:1px solid #e5eef9;padding:1px 5px 3px}.Select--multi .Select-value-icon:hover,.Select--multi .Select-value-icon:focus{background-color:#ddeff7;color:#0077b3}.Select--multi .Select-value-icon:active{background-color:#e5eef9}.Select--multi.Select--rtl .Select-value{margin-left:0;margin-right:5px}.Select--multi.Select--rtl .Select-value-icon{border-right:none;border-left:1px solid #e5eef9}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:hover,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:active{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}.ballot-types{border-bottom:1px solid #e5eef9;padding:0 30px 10px}.ballot-types-i{cursor:pointer;position:relative;margin-bottom:20px}.ballot-types-i:before{content:'';position:absolute;left:-30px;top:50%;opacity:0;height:30px;width:3px;transform:translateY(-50%);background-color:#5c34a2}.ballot-types-i_active{color:#5c34a2}.ballot-types-i_active:before{opacity:1}.ballots-i--vote,.ballots-footer-finalize{border-radius:2px;padding:0 13px;font-size:13px;font-weight:bold}.ballots .title{margin-bottom:50px}@media screen and (max-width: 768px){.ballots .title{margin-bottom:15px}}@media screen and (max-width: 414px){.ballots .title{margin-bottom:10px}}.ballots-i{background-color:rgba(240,240,240,0.2)}.ballots-i-not-finalized{background-color:#fff;border-color:rgba(92,52,162,0.3)}.ballots-i-scale{border-top:1px solid #e5eef9;display:flex;justify-content:space-between;margin-bottom:30px;margin-top:20px;padding:20px 0 0 0}@media screen and (max-width: 768px){.ballots-i-scale{display:block;margin-top:15px;padding:15px 0 0 0}}@media screen and (max-width: 414px){.ballots-i-scale{margin-top:10px;padding:10px 0 0 0}}.ballots-i-scale-column{display:flex;justify-content:space-between;width:48%}@media screen and (max-width: 768px){.ballots-i-scale-column{overflow:hidden;width:100%}}@media screen and (max-width: 768px){.ballots-i-scale-column:last-child{flex-direction:row-reverse;margin-top:30px}}.ballots-i--name{color:#333;font-weight:bold;overflow:hidden;text-overflow:ellipsis}.ballots-i--created{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6M9jT1MAAAAQHRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lKU1RZYmNrbHV2iYqLo6Spqqusra7Cw8TFysvM29zk5ufo6/Lz+Pn8DzgVHgAAATNJREFUeNplk+1agkAQhQfRykQTrJTEUjSCvtTQECPk/q+qPQ7LsnR+7DOzL898LiRlOP46zfN0vXQM0tXydkWlndeqs/620LTtK3Z7LBo6OpLd5fDzl6nVubSnIXv3zIY/8N4HVGrwBj8bwjaR77SgmhYn5DWF5eE7ZoribkZkoIeI78ZJMmYrQkcGjZD9mq+SokjY6qKqEfniDIiFYMR6FqZPn+J8+A9dYX5QKs5eBaFz3p4wUkLwizrkvB2UcoZXJUwYHiqIsDclnBzAvicyrFYQpBW0lK0oqVbkEHR1fzEEHl/YhCHG1yKaoYi5zubl4Mn8wsqe6uwRK4tNmHaG717VsiP4mV1uih9G4FrttuUG7GGGTLOioUwyRI51Ftv6o94rtNcfNbCz2uB32KycCv0BfU5XCrQEyKwAAAAASUVORK5CYII=);background-position:left center;background-repeat:no-repeat;background-size:14px 14px;font-size:13px;font-weight:700;padding-left:20px}.ballots-i--see-all-proposal{display:inline-block;margin-top:5px}.ballots-i--time{color:#333;font-size:24px;font-weight:bold}@media screen and (max-width: 768px){.ballots-i--time{display:inline-block;vertical-align:middle;margin-right:10px}}.ballots-i--to-close{color:#333;text-transform:uppercase}@media screen and (max-width: 768px){.ballots-i--to-close{display:inline-block;vertical-align:middle}}.ballots-i--vote-label{cursor:default;font-size:15px;font-weight:700;line-height:1.2}@media screen and (max-width: 414px){.ballots-i--vote-label{margin-bottom:25px}}.ballots-i--vote-label-right{margin-left:auto !important}@media screen and (max-width: 768px){.ballots-i--vote_no{float:left;margin-left:0;margin-right:15px}}textarea{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;overflow:auto;outline:none;border-radius:3px;width:100%}.color-primary{color:#5c34a2}.color-danger{color:#f21b57}.color-success{color:#60db97}@media screen and (max-width: 768px){.ballots-about{display:table;width:100%}}.ballots-about p{line-height:28px}.ballots-about-i{position:relative;display:inline-block;vertical-align:top;box-sizing:border-box}@media screen and (max-width: 768px){.ballots-about-i{display:table-row;width:100% !important}}.ballots-about-i_name{width:20%}.ballots-about-i_action{width:10%}.ballots-about-i_type{width:10%}.ballots-about-i_proposal{width:30%}.ballots-about-i_key{width:26%;word-break:break-all}.ballots-about-i_key_wide{width:50%;word-break:break-all}.ballots-about-i_proposed-min-threshold{width:70%;word-break:break-all}.ballots-about-i_contract-type{width:40%;word-break:break-all}.ballots-about-i_proposed-address{width:30%;word-break:break-all}.ballots-about-i_time{width:8%;text-align:right}@media screen and (max-width: 768px){.ballots-about-i_time{text-align:left}}.ballots-about-i_time .ballots-about-i--title{text-align:right}@media screen and (max-width: 768px){.ballots-about-i_time .ballots-about-i--title{text-align:left}}.ballots-about-i--title{color:#333;font-size:13px;font-weight:700;left:0;position:absolute;right:0;text-align:left;top:-50px;z-index:1}@media screen and (max-width: 768px){.ballots-about-i--title{position:relative;left:auto;right:auto;top:auto;white-space:nowrap}}.ballots-about-i:first-child .ballots-about-td-value{border-left:none;padding-left:0}.ballots-about-i:last-child .ballots-about-td-value{border-right:none;padding-right:0}.ballots-about-td.ballots-about-td-value{border-right:1px solid #b8c1cb;font-size:13px;min-height:56px;padding-left:5px;padding-right:5px}@media screen and (max-width: 768px){.ballots-about-td.ballots-about-td-value{border:none;min-height:0;padding-left:0;padding-right:0}}@media screen and (max-width: 768px){.ballots-about-td{display:table-cell;vertical-align:top}}@media screen and (max-width: 768px){.ballots-about-td:first-child{padding-right:10px}}@media screen and (max-width: 768px){.ballots-about-i:not(:last-child) .ballots-about-td{padding-bottom:10px}}.ballots-footer{display:flex;align-items:center;justify-content:space-between}.ballots-footer-left{display:inline-flex;align-items:center}@media screen and (max-width: 414px){.ballots-footer-left{display:block}.ballots-footer-left .btn{display:block;margin:0 0 15px;width:100%}}@media screen and (max-width: 768px){.ballots-footer{padding-top:15px}}@media screen and (max-width: 414px){.ballots-footer{flex-direction:column-reverse;padding-top:0}}.ballots-footer p{color:#778f9b;line-height:18px;max-width:340px;padding-left:15px}.ballots-footer-finalize{margin-right:20px;background-color:rgba(8,179,242,0.1);white-space:nowrap}.ballots-footer-finalize-finalized{background-color:rgba(109,46,174,0.1);color:#6d2eae;cursor:default}@media screen and (max-width: 414px){.ballots-footer-finalize{width:100%;margin-right:0;margin-top:10px;text-align:center}} +.footer{left:0;right:0}.new-form,.settings,.ballots-i{background-color:#fff;border-radius:6px;border:1px solid #e4e4e4;margin-bottom:30px;padding:20px;transition:0.15s box-shadow}.new-form:hover,.settings:hover,.ballots-i:hover{border-color:#5c34a2;box-shadow:0 0 55px rgba(0,0,0,0.15)}@media screen and (max-width: 768px){.new-form,.settings,.ballots-i{margin-bottom:15px;padding:15px}}input,textarea,select{transition:0.3s background-color, 0.3s border-color;background-color:#fff;border-radius:3px;border:1px solid #e4e4e4;box-sizing:border-box;color:#444;font-size:14px;height:40px;outline:none;padding:0 10px;width:100%}input:hover,textarea:hover,select:hover{border-color:#8e959d;color:#202d3c}input:focus,textarea:focus,select:focus{border-color:#5c34a2;color:#202d3c}button,.ballots-i--vote,.ballots-footer-finalize{cursor:pointer;display:inline-block;transition:0.3s opacity;box-sizing:border-box;border:0;outline:none;padding:0 15px;text-transform:uppercase;line-height:36px;font-size:13px;font-weight:bold}button:hover,.ballots-i--vote:hover,.ballots-footer-finalize:hover{opacity:0.9;text-decoration:none}html,body,p,h1,h2,h3{margin:0;padding:0;font-weight:normal}html{display:flex;min-height:100%}body{-webkit-font-smoothing:antialiased;background-color:#ffffff;box-sizing:border-box;color:#333;font-family:'Nunito', sans-serif;font-size:14px;padding-bottom:66px;position:relative;width:100%}@media screen and (max-width: 768px){body{padding-bottom:132px}}@media screen and (max-width: 414px){body{padding-bottom:132px}}a{color:#5c34a2;text-decoration:none}a:hover{text-decoration:underline}hr{display:block;width:100%;height:1px;margin:10px 0 30px;border:0;background-color:#e5eef9}.center{text-align:center}.left{float:left;width:48%}.right{float:right;width:48%}@media screen and (max-width: 414px){.left,.right{float:none;width:100%}}.hidden{overflow:hidden}.display-none{display:none}.container{width:960px;margin:0 auto;box-sizing:border-box}@media screen and (max-width: 960px){.container{width:100%;padding:0 10px}}.title{margin-top:30px;margin-bottom:30px;color:#38454f;font-size:30px;font-weight:normal}@media screen and (max-width: 768px){.title{font-size:28px}}@media screen and (max-width: 414px){.title{font-size:26px}}button,input,textarea{outline:none}.btn{background-position:calc(100% - 15px) 50%;background-repeat:no-repeat;border-radius:5px;border:0;color:#fff;cursor:pointer;font-weight:bold;font-size:14px;line-height:42px;outline:none;padding:0 15px;text-decoration:none;text-transform:uppercase;transition:0.15s background-color}.btn.btn-primary{background-color:#5c34a2;box-shadow:0px 5px 10px 0 rgba(92,52,162,0.3)}.btn.btn-primary:hover{background-color:#46287b}.btn.btn-secondary{background-color:#6ac9b9}.btn.btn-secondary:hover{background-color:#45bba7}.btn.btn-success{background-color:#60db97;box-shadow:0px 5px 10px 0 rgba(96,219,151,0.3)}.btn.btn-success:hover{background-color:#36d27c}.btn.btn-danger{background-color:#f21b57;box-shadow:0px 5px 10px 0 rgba(242,27,87,0.3)}.btn.btn-danger:hover{background-color:#ce0c42}.btn.btn-new{background-image:url("../assets/images/icons/icon-add.svg");background-size:14px 14px;padding-right:45px}.btn.btn-transparent{color:#5c34a2;background-color:transparent}.btn.btn-transparent:hover{opacity:0.8}.btn.btn-load-more{background-image:url("../assets/images/icons/icon-load-more.svg");background-size:14px 14px;padding-right:45px}.btn.no-shadow{box-shadow:none}.btn[disabled],.btn.disabled{color:#333333;cursor:default;background-color:#f0f0f0;box-shadow:none}.btn[disabled]:hover,.btn.disabled:hover{background-color:#f0f0f0}.btn.btn-finalize{background-image:url("../assets/images/icons/icon-finalize-white.svg");background-size:14px 14px;padding-right:45px}.btn.btn-finalize[disabled],.btn.btn-finalize.disabled{background-image:url("../assets/images/icons/icon-finalize-black.svg")}.btn.text-lowercase{text-transform:lowercase}.btn.text-uppercase{text-transform:uppercase}.btn.text-capitalize{text-transform:capitalize}label{display:inline-block;margin-bottom:15px;color:#778f9b;font-size:14px}input:focus,textarea:focus{border-color:#5c34a2}input[type='radio'],textarea[type='radio']{display:none}textarea{width:100%;padding-top:10px;padding-bottom:10px;height:70px;resize:none}select{appearance:none;padding-right:30px;background-repeat:no-repeat;background-position:right 13px center;background-image:url(./images/select.png)}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){select{background-image:url("./images/select@2x.png");background-size:8px 4px}}button{background-color:rgba(92,52,162,0.1);color:#5c34a2}button.load-more{margin-bottom:50px}@media screen and (max-width: 960px){button.load-more{margin-bottom:80px}}@media screen and (max-width: 768px){button.load-more{margin-top:80px}}.radio{transition:0.3s color, 0.3s background-color, 0.3s border-color;cursor:pointer;position:relative;margin-bottom:0;line-height:40px}input[type='radio']:checked+.radio{border-color:#5c34a2;color:#5c34a2}.radio_icon{padding-left:37px;background-repeat:no-repeat;background-size:16px 16px;background-position:left 11px center}.radio_add{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZ0lEQVR4AWIgF8SYLPIE4mdQ7MlAbwC1GNB+HWAAAMJQGL5f9z9C2jGWWTIASk/8eAS8D/LMV4YC4DX/AgAAAAAAQFk1f5xcUVH5RqgBFoAWD0F5j25+AQAAAAAAuHWcmgCQK3q6ahPyvQbTMeZShQAAAABJRU5ErkJggg==")}.radio_remove{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAc0lEQVR42u2XwQ3AIAwDM1SXgBmYrrNVyRglbz5WcRGtZEv3Q/g+icBQ2nGWxJP7IZ4UYwPKEb5bIN4QqElMlF9JNUWh5pwH7wmqnMd3C8Qw5zT8nhgPGhV8nwQkIAEJSEACEvi6AM8vBXyhQBB/wTVvwA5ymYbEmIcsVAAAAABJRU5ErkJggg==")}.radio_swap{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABBklEQVR4AWLABWJMFgGarwfdCoAgCsNbxujz1LZt2wyquHi7BrVtW9tTc7ZXO3Mn+eL0P20v62APtiBRcR6C3aC/WBOLv9mTjD9CDUe8h4g3S8abOOKNoC1agQjTgGPQlk2ZBmxKD8iFe4vxRYj473FQRIwYUFzn7SO6pUccKZzkiHnFfYhmwSxMQIiLP8MHfJXEIZwPB3AEldxxfzgh3tRYBgTAxR9vbo2cI9pAS4/oI0bUO/O/DHLTqHkEHc+BU9CWPEKJacAeaMtWpD8nTJsGJMGWxfgNyxceRMaJeAZHfIyIZ3LEh4l4Fkc8EK7/iGdzvQL6wcGX+K3VODEiFqbfJCvingAZLf+WroN1/QAAAABJRU5ErkJggg==")}.radio:before,.radio:after{content:'';position:absolute;top:50%;border-radius:50%}.radio:before{transition:0.3s border-color;left:-40px;top:8px;width:24px;height:24px;box-sizing:border-box;border:1px solid #e4e4e4}input[type='radio']:checked+.radio:before{border-color:#5c34a2}.radio:after{transition:0.3s transform, 0.3s opacity;transform:scale(0.5);opacity:0;left:-34px;top:14px;width:12px;height:12px;background-color:#5c34a2}input[type='radio']:checked+.radio:after{transform:scale(1);opacity:1}.radio-container{margin-bottom:20px;padding-left:40px}.form-el{margin-bottom:20px}.hint{color:#778f9b;font-size:12px;line-height:18px;margin-top:15px;word-break:break-all}.footer{background-color:#5c34a2;bottom:0;padding:18px 0;position:absolute}.footer.sokol{background-color:#6ac9b9}.footer .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 768px){.footer .container{flex-direction:column}}.footer .socials{order:2}@media screen and (max-width: 768px){.footer .socials{margin-top:15px;order:1}}.footer-logo{background-image:url("../assets/images/logos/logo_voting_dapp_footer.png");background-repeat:no-repeat;background-size:contain;display:block;height:20px;left:0;order:0;width:123px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.footer-logo{background-image:url("../assets/images/logos/logo_voting_dapp_footer@2x.png");background-size:100% 100%}}.footer-rights{color:#fff;font-size:12px;order:1;text-align:center}@media screen and (max-width: 768px){.footer-rights{line-height:normal;margin-top:15px;order:2;width:100%}}.header{background-color:#5c34a2;position:relative;width:100%;z-index:9999}@media screen and (max-width: 414px){.header{left:0;right:0;position:fixed;top:0;z-index:124}}.header .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 414px){.header .container{width:93%;padding:22px 0}}.header.sokol{background-color:#6ac9b9}.header-logo{display:block;height:26px}.header .links-container{align-items:center;display:flex;justify-content:space-between;height:70px;margin-left:auto}@media screen and (max-width: 414px){.header .links-container{display:none}}@media screen and (max-width: 768px){.header .links-container{justify-content:flex-end;width:auto}}.header .links-container-mobile{display:none}@media screen and (max-width: 414px){.header .links-container-mobile{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:space-evenly}}.header .link{color:#fff;font-size:14px;font-weight:700;line-height:18px;margin-left:34px;opacity:0.8;text-decoration:none;transition:opacity linear 0.1s}.header .link:hover,.header .link.active{opacity:1}@media screen and (max-width: 414px){.header .link{margin-left:0}}.header .link-icon{height:18px;width:18px;margin-right:10px;float:left;background-position:50% 50%;background-repeat:no-repeat}.header .link-icon-all{background-image:url("../assets/images/icons/icon-all.svg")}.header .link-icon-active{background-image:url("../assets/images/icons/icon-active.svg")}.header .link-icon-to-finalize{background-image:url("../assets/images/icons/icon-to-finalize.svg")}.header .mobile-menu{display:none}@media screen and (max-width: 414px){.header .mobile-menu{display:block;order:3}}.header .mobile-menu .mobile-menu-icon{width:18px;height:14px}.header .mobile-menu .mobile-menu-open-icon{width:18px;height:18px}@media screen and (max-width: 414px){.header .header-mobile-menu-container{background-color:#45277a;height:172px}}@media screen and (max-width: 414px){.header.sokol .header-mobile-menu-container{background-color:#45bba7}}.header .Select{margin-left:25px}@media screen and (max-width: 414px){.header .Select{margin-left:0;max-width:125px;order:2}.header .Select .Select-control{max-width:125px}}.header .btn.btn-new-ballot{height:36px;line-height:36px;opacity:1}.header .btn.btn-new-ballot .link-icon{display:none}.select-network-id{background:#fff;width:40px}.info-container{background-color:#f8f8f8;margin-bottom:20px;margin-left:-20px;margin-right:-20px;padding-bottom:20px;padding-left:20px;padding-right:20px;padding-top:20px}@media screen and (max-width: 768px){.info-container{margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px}}.info{color:#000}.ballots .info{background-position:0 7px;background-repeat:no-repeat;color:#333333;font-size:14px;font-weight:normal;letter-spacing:normal;line-height:1.71;margin-bottom:20px;max-width:100%;min-height:32px;padding-left:30px;text-align:left;word-break:break-all}.ballots .info:last-child{margin-bottom:0}.ballots .info-minimum{background-image:url("../assets/images/icons/icon-min.svg");background-size:18px 18px}.ballots .info-details{background-image:url("../assets/images/icons/icon-info.svg");background-size:10px 18px;position:relative}.ballots .info-details.collapsed{height:90px;overflow:hidden}.ballots .info-details .toggle-show{color:#5c34a2;cursor:pointer;display:inline-block;margin-left:5px}.new-form .info{padding:30px}.info-title{position:relative;margin-bottom:30px;padding-left:44px}.info-title:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:32px;height:32px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.info-title:before{background-image:url("./images/info@2x.png");background-size:32px 32px}}.info-i{position:relative;margin-bottom:10px;padding-left:12px;line-height:18px;font-size:12px}.info-i:before{content:'';position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background-color:#5c34a2}.app-container{padding-top:40px;position:relative}.app-container.app-container-open-mobile-menu:before{background-color:rgba(78,44,137,0.8);bottom:0;content:'';display:none;left:0;position:absolute;right:0;top:0;z-index:1234}@media screen and (max-width: 414px){.app-container.app-container-open-mobile-menu:before{display:block}}.app-container.app-container-open-mobile-menu.sokol:before{background-color:rgba(106,201,185,0.8)}@media screen and (max-width: 414px){#root,.app-container{height:100%}.app-container{padding-left:10px;padding-right:10px}}@media screen and (max-width: 414px){.content{padding-top:120px}}.content.content-menu-open{padding-top:242px}.clearfix::after{content:"";clear:both;display:table}@keyframes fadeOut{0%{opacity:.2}20%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(0.3)}}.loading{display:flex;justify-content:space-between;left:50%;margin:-30px 0 0 -111.5px;padding-top:50px;position:absolute;top:50%;width:206px}.loading:before{background-image:url("../assets/images/logos/logo_loader.svg");background-position:0 0;background-repeat:no-repeat;content:'';left:0;position:absolute;top:0;height:100px;width:206px}.loading-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000000}.loading-i{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:fadeOut;animation-timing-function:linear;background-color:#fff;border-radius:50%;height:9px;opacity:.2;width:9px}.loading-i:nth-child(2){animation-delay:.1s}.loading-i:nth-child(3){animation-delay:.2s}.loading-i:nth-child(4){animation-delay:.3s}.loading-i:nth-child(5){animation-delay:.4s}.loading-i:nth-child(6){animation-delay:.5s}.main-title-container{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between;margin-bottom:50px}.main-title-container .main-title{font-size:24px;color:#333;line-height:38px}@media screen and (max-width: 414px){.main-title-container{-ms-flex-direction:column;flex-direction:column}.main-title-container .search-input{width:100%}}.nav{font-size:0}.nav-i{transition:0.3s color;position:relative;display:inline-block;vertical-align:middle;margin-right:40px;color:#778f9b;text-transform:uppercase;text-decoration:none;line-height:normal;font-size:14px;font-weight:bold}.nav-i:hover,.nav-i_active{color:#444}.nav-i_active:before{content:'';position:absolute;left:0;right:0;bottom:-30px;height:3px;background-color:#08b3f2}.new-form{display:flex;overflow:hidden;padding:0}@media screen and (max-width: 768px){.new-form{display:block}}.new-form-side{padding-top:30px;padding-bottom:30px;box-sizing:border-box}@media screen and (max-width: 768px){.new-form-side{width:100% !important}}.new-form-side_left{width:30%}@media screen and (max-width: 768px){.new-form-side_left{padding-bottom:0}}.new-form-side_right{width:70%;border-left:1px solid #e5eef9;padding-left:30px;padding-right:30px}@media screen and (max-width: 768px){.new-form-side_right{border:0;padding-top:0}}.new .add-ballot{white-space:nowrap}@media screen and (max-width: 414px){.new .add-ballot{margin-top:20px}}.search-container{background-color:#502d8d;box-sizing:border-box;height:50px;padding:10px 0 0 0}.search-container.sokol{background-color:#45bba7}@media screen and (max-width: 414px){.search-container{left:0;position:fixed;right:0;top:70px;z-index:123}}.search-input{background-color:transparent;background-image:url("../assets/images/icons/icon-search.svg");background-position:0 50%;background-repeat:no-repeat;background-size:16px 16px;border-radius:0;border:none;box-sizing:border-box;color:#fff;display:block;font-size:14px;font-weight:400;height:30px;outline:none;padding-left:30px;width:100%}.search-input:hover{color:#fff}.search-input::-webkit-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}.search-input:-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}.search-input::-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}.search-input:-ms-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}.settings{max-width:600px;margin:0 auto}.settings-title{margin-bottom:20px;color:#38454f;text-align:center;font-size:24px}.socials-item:not(:first-child){margin-left:10px}.socials-i{background-color:#ffffff;border-radius:3px;display:inline-block;font-size:0;height:30px;position:relative;transition:0.3s background-color;vertical-align:top;width:30px}.socials-i:not(:first-child){margin-left:10px}.socials-i:hover{background-color:rgba(255,255,255,0.4)}.socials-i:before{background-position:50% 50%;background-repeat:no-repeat;background-size:contain;content:'';height:16px;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:16px}.socials-i_github:before{background-image:url("../assets/images/socials/git.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_github:before{background-image:url("../assets/images/socials/git@2x.png");background-size:100% 100%}}.socials-i_telegram:before{background-image:url("../assets/images/socials/telegram.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_telegram:before{background-image:url("../assets/images/socials/telegram@2x.png");background-size:100% 100%}}.socials-i_twitter:before{background-image:url("../assets/images/socials/tw.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_twitter:before{background-image:url("../assets/images/socials/tw@2x.png");background-size:100% 100%}}.socials-i_poa:before{background-image:url("../assets/images/socials/poa.png");height:20px;width:20px}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.socials-i_poa:before{background-image:url("../assets/images/socials/poa@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_github:before{background-image:url("../assets/images/socials/git-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_github:before{background-image:url("../assets/images/socials/git-sokol@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_telegram:before{background-image:url("../assets/images/socials/telegram-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_telegram:before{background-image:url("../assets/images/socials/telegram-sokol@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_twitter:before{background-image:url("../assets/images/socials/tw-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_twitter:before{background-image:url("../assets/images/socials/tw-sokol@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_poa:before{background-image:url("../assets/images/socials/poa-sokol.png")}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.sokol .socials .socials-i_poa:before{background-image:url("../assets/images/socials/poa-sokol@2x.png");background-size:100% 100%}}.vote-scale{background-color:rgba(229,238,249,0.5);border-radius:5px;clear:left;height:10px;margin-top:32px;overflow:hidden}.vote-scale-not-finalized{background-color:#ffffff}.vote-scale--fill{height:100%;border-radius:3px}.vote-scale--fill_yes{background-color:#f21b57}.vote-scale--fill_no{background-color:#60db97}.vote-scale--container{width:100%;max-width:350px}@media screen and (max-width: 768px){.vote-scale--container{float:right;max-width:100%}}.vote-scale--value{float:left;font-size:12px}.vote-scale--votes,.vote-scale--percentage{float:right;font-size:13px}.vote-scale--votes{color:#778f9b;margin-left:10px}.vote-scale--percentage{color:#000;font-weight:700}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}.Select{position:relative}.Select input::-webkit-contacts-auto-fill-button,.Select input::-webkit-credentials-auto-fill-button{display:none !important}.Select input::-ms-clear{display:none !important}.Select input::-ms-reveal{display:none !important}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-searchable.is-open>.Select-control{cursor:text}.Select.is-searchable.is-focused:not(.is-open)>.Select-control{cursor:text}.Select.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#cbcbcb #e4e4e4 #f1f1f1}.Select.is-open>.Select-control .Select-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.Select.is-focused>.Select-control{background:#fff}.Select.is-focused:not(.is-open)>.Select-control{border-color:#5c34a2 #673ab5 #673ab5;box-shadow:none}.Select.has-value.is-clearable.Select--single>.Select-control .Select-value{padding-right:44px}.Select.has-value.Select--single>.Select-control .Select-value .Select-value-label,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{color:#333}.Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label:hover,.Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:hover,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus{color:#8e959d;outline:none;text-decoration:underline}.Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus,.Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus{background:#fff}.Select.has-value.is-pseudo-focused .Select-input{opacity:0}.Select.is-open .Select-arrow,.Select .Select-arrow-zone:hover>.Select-arrow{border-top-color:#666}.Select.Select--rtl{direction:rtl;text-align:right}.Select-control{background-color:#fff;border-collapse:separate;border-color:#f1f1f1 #e4e4e4 #cbcbcb;border-radius:3px;border-spacing:0;border:1px solid #e4e4e4;color:#333;cursor:default;display:table;height:40px;outline:none;overflow:hidden;position:relative;width:100%}.Select-control:hover{box-shadow:none}.Select-control .Select-input:focus{outline:none;background:#fff}.Select-placeholder,.Select--single>.Select-control .Select-value{bottom:0;color:#333;left:0;line-height:38px;padding-left:15px;padding-right:15px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-input{height:38px;padding-left:15px;padding-right:15px;vertical-align:middle}.Select-input>input{background:none transparent;border:0 none;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;margin:0;outline:none;line-height:17px;padding:10px 0 14px;-webkit-appearance:none}.is-focused .Select-input>input{cursor:text}.Select-control:not(.is-searchable)>.Select-input{outline:none}.Select-loading-zone{cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:16px}.Select-loading{-webkit-animation:Select-animation-spin 400ms infinite linear;-o-animation:Select-animation-spin 400ms infinite linear;animation:Select-animation-spin 400ms infinite linear;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #e4e4e4;border-right-color:#333;display:inline-block;position:relative;vertical-align:middle}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn 200ms;-o-animation:Select-animation-fadeIn 200ms;animation:Select-animation-fadeIn 200ms;color:#999;cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:19px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:20px;line-height:1}.Select--multi .Select-clear-zone{width:19px}.Select--multi .Select-multi-value-wrapper{display:inline-block}.Select .Select-aria-only{position:absolute;display:inline-block;height:1px;width:1px;margin:-1px;clip:rect(0, 0, 0, 0);overflow:hidden;float:left}.Select-arrow-zone{cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:25px;padding-right:5px}.Select--rtl .Select-arrow-zone{padding-right:0;padding-left:5px}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;display:inline-block;height:0;width:0;position:relative}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:3px;border-bottom-left-radius:3px;background-color:#fff;border:1px solid #e4e4e4;border-top-color:#f2f2f2;box-shadow:none;box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1000;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{box-sizing:border-box;background-color:#fff;color:#666;cursor:pointer;display:block;padding:8px 15px}.Select-option:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.Select-option.is-selected{background-color:#f5faff;color:#333}.Select-option.is-focused{background-color:#f2f9fc;color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{box-sizing:border-box;color:#999;cursor:default;display:block;padding:8px 15px}.Select--multi .Select-input{vertical-align:middle;margin-left:15px;padding:0}.Select--multi.Select--rtl .Select-input{margin-left:0;margin-right:15px}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:#f2f9fc;border-radius:3px;border:1px solid #e5eef9;color:#08c;display:inline-block;font-size:.9em;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:3px;border-top-right-radius:3px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#08c;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:3px;border-top-left-radius:3px;border-right:1px solid #e5eef9;padding:1px 5px 3px}.Select--multi .Select-value-icon:hover,.Select--multi .Select-value-icon:focus{background-color:#ddeff7;color:#0077b3}.Select--multi .Select-value-icon:active{background-color:#e5eef9}.Select--multi.Select--rtl .Select-value{margin-left:0;margin-right:5px}.Select--multi.Select--rtl .Select-value-icon{border-right:none;border-left:1px solid #e5eef9}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:hover,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:active{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}.ballot-types{border-bottom:1px solid #e5eef9;padding:0 30px 10px}.ballot-types-i{cursor:pointer;position:relative;margin-bottom:20px}.ballot-types-i:before{content:'';position:absolute;left:-30px;top:50%;opacity:0;height:30px;width:3px;transform:translateY(-50%);background-color:#5c34a2}.ballot-types-i_active{color:#5c34a2}.ballot-types-i_active:before{opacity:1}.ballots-i--vote,.ballots-footer-finalize{border-radius:2px;padding:0 13px;font-size:13px;font-weight:bold}.ballots .title{margin-bottom:50px}@media screen and (max-width: 768px){.ballots .title{margin-bottom:15px}}@media screen and (max-width: 414px){.ballots .title{margin-bottom:10px}}.ballots-i{background-color:#fff}.ballots-i-scale{border-top:1px solid #e4e4e4;display:flex;justify-content:space-between;margin-bottom:30px;margin-top:30px;padding:30px 0 0 0}@media screen and (max-width: 768px){.ballots-i-scale{display:block;margin-top:15px;padding:15px 0 0 0}}@media screen and (max-width: 414px){.ballots-i-scale{margin-top:10px;padding:10px 0 0 0}}.ballots-i-scale-column{display:flex;justify-content:space-between;width:48%}@media screen and (max-width: 768px){.ballots-i-scale-column{overflow:hidden;width:100%}}@media screen and (max-width: 768px){.ballots-i-scale-column:last-child{flex-direction:row-reverse;margin-top:30px}}.ballots-i--name{overflow:hidden;text-overflow:ellipsis}.ballots-i--see-all-proposal{display:inline-block;margin-top:5px}.ballots-i--vote-label{color:#333;cursor:default;font-size:14px;font-weight:700;line-height:1.2}@media screen and (max-width: 414px){.ballots-i--vote-label{margin-bottom:25px}}.ballots-i--vote-label-right{margin-left:auto !important}@media screen and (max-width: 768px){.ballots-i--vote_no,.ballots-i--vote_yes{float:left;margin-left:0;margin-right:15px;min-width:51px}}textarea{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;overflow:auto;outline:none;border-radius:3px;width:100%}.color-primary{color:#5c34a2}.color-danger{color:#f21b57}.color-success{color:#60db97}@media screen and (max-width: 768px){.ballots-about{display:table;width:100%}}.ballots-about p{line-height:28px}.ballots-about-i{position:relative;display:inline-block;vertical-align:top;box-sizing:border-box}@media screen and (max-width: 768px){.ballots-about-i{display:table-row;width:100% !important}}.ballots-about-i_name{width:12%}.ballots-about-i_action{width:8%}.ballots-about-i_type{width:8%}.ballots-about-i_proposal{width:30%}.ballots-about-i_key{width:26%;word-break:break-all}.ballots-about-i_key_wide{width:50%;word-break:break-all}.ballots-about-i_proposed-min-threshold{width:70%;word-break:break-all}.ballots-about-i_contract-type{width:40%;word-break:break-all}.ballots-about-i_proposed-address{width:30%;word-break:break-all}.ballots-about-i_time{width:20%}.ballots-about-i--title{color:#777;font-size:13px;font-weight:400;text-align:left}.ballots-about-i:first-child .ballots-about-td-value{border-left:none;padding-left:0}.ballots-about-i:last-child .ballots-about-td-value{border-right:none;padding-right:0}.ballots-about-td.ballots-about-td-value{color:#333;font-size:14px;padding-left:5px;padding-right:5px}@media screen and (max-width: 768px){.ballots-about-td.ballots-about-td-value{padding-left:0;padding-right:0}}@media screen and (max-width: 768px){.ballots-about-td{display:table-cell;vertical-align:top}}@media screen and (max-width: 768px){.ballots-about-td:first-child{padding-right:10px}}@media screen and (max-width: 768px){.ballots-about-i:not(:last-child) .ballots-about-td{padding-bottom:10px}}.ballots-footer{display:flex;align-items:center;justify-content:space-between}.ballots-footer-left{display:inline-flex;align-items:center}@media screen and (max-width: 414px){.ballots-footer-left{display:block}.ballots-footer-left .btn{display:block;margin:0 0 15px;width:100%}}@media screen and (max-width: 768px){.ballots-footer{padding-top:15px}}@media screen and (max-width: 414px){.ballots-footer{flex-direction:column-reverse;padding-top:0}}.ballots-footer p{color:#777;font-size:14px;font-stretch:normal;font-style:normal;font-weight:normal;line-height:18px;max-width:340px;padding-left:15px}.ballots-footer-finalize{margin-right:20px;background-color:rgba(8,179,242,0.1);white-space:nowrap}.ballots-footer-finalize-finalized{background-color:rgba(109,46,174,0.1);color:#6d2eae;cursor:default}@media screen and (max-width: 414px){.ballots-footer-finalize{width:100%;margin-right:0;margin-top:10px;text-align:center}} diff --git a/src/assets/images/icons/icon-info.svg b/src/assets/images/icons/icon-info.svg new file mode 100644 index 0000000..952d7e3 --- /dev/null +++ b/src/assets/images/icons/icon-info.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/icon-min.svg b/src/assets/images/icons/icon-min.svg new file mode 100644 index 0000000..c7e872e --- /dev/null +++ b/src/assets/images/icons/icon-min.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/stylesheets/application/_info.scss b/src/assets/stylesheets/application/_info.scss index 314e9d6..e3c4190 100644 --- a/src/assets/stylesheets/application/_info.scss +++ b/src/assets/stylesheets/application/_info.scss @@ -1,18 +1,64 @@ +.info-container { + background-color: #f8f8f8; + margin-bottom: 20px; + margin-left: -#{ $desktop-indent }; + margin-right: -#{ $desktop-indent }; + padding-bottom: #{ $desktop-indent }; + padding-left: #{ $desktop-indent }; + padding-right: #{ $desktop-indent }; + padding-top: #{ $desktop-indent }; + + @media screen and (max-width: $tablet-width) { + margin-left: -#{ $tablet-indent }; + margin-right: -#{ $tablet-indent }; + padding-left: #{ $tablet-indent }; + padding-right: #{ $tablet-indent }; + } + +} .info { color: #000; .ballots & { - @include image-2x('./images/info@2x.png', 32px, 32px); - align-items: center; - background-image: url(./images/info.png); - background-position: left center; + background-position: 0 7px; background-repeat: no-repeat; - display: flex; + color: #333333; + font-size: 14px; + font-weight: normal; + letter-spacing: normal; + line-height: 1.71; margin-bottom: 20px; max-width: 100%; min-height: 32px; - padding-left: 44px; + padding-left: 30px; + text-align: left; word-break: break-all; + + &:last-child { + margin-bottom: 0; + } + + &-minimum { + background-image: url('#{ $base-images-path }/icons/icon-min.svg'); + background-size: 18px 18px; + } + &-details { + background-image: url('#{ $base-images-path }/icons/icon-info.svg'); + background-size: 10px 18px; + position: relative; + &.collapsed { + height: 90px; + overflow: hidden; + } + + .toggle-show { + color: $primary-color; + cursor: pointer; + display: inline-block; + margin-left: 5px; + } + } + } .new-form & { diff --git a/src/assets/stylesheets/application/_socials.scss b/src/assets/stylesheets/application/_socials.scss index c70c256..578473f 100644 --- a/src/assets/stylesheets/application/_socials.scss +++ b/src/assets/stylesheets/application/_socials.scss @@ -102,80 +102,3 @@ } } } - -// .socials { -// font-size: 0; - -// .footer & { -// right: 0; -// } - -// &-i { -// transition: 0.3s background-color; -// position: relative; -// display: inline-block; -// vertical-align: top; -// width: 30px; -// height: 30px; -// border-radius: 50%; -// background-color: fade-out(#fff, 0.8); - -// &:not(:first-child) { -// margin-left: 10px; -// } - -// &:hover { -// background-color: fade-out(#fff, 0.6); -// } - -// &:before { -// @include image-2x('./images/socials@2x.png', 16px, 69px); -// transform: translate(-50%, -50%); -// content: ''; -// position: absolute; -// left: 50%; -// top: 50%; -// background-image: url(./images/socials.png); -// } - -// &_github { -// &:before { -// width: 16px; -// height: 16px; -// background-position: 0 0; -// } -// } - -// &_oracles { -// &:before { -// width: 16px; -// height: 14px; -// background-position: 0 -16px; -// } -// } - -// &_reddit { -// &:before { -// width: 15px; -// height: 13px; -// background-position: 0 -30px; -// } -// } - -// &_telegram { -// &:before { -// width: 16px; -// height: 14px; -// background-position: 0 -43px; -// } -// } - -// &_twitter { -// &:before { -// width: 15px; -// height: 12px; -// background-position: 0 -57px; -// } -// } -// } -// } diff --git a/src/assets/stylesheets/application/_vote-scale.scss b/src/assets/stylesheets/application/_vote-scale.scss index d088eeb..c342132 100644 --- a/src/assets/stylesheets/application/_vote-scale.scss +++ b/src/assets/stylesheets/application/_vote-scale.scss @@ -15,7 +15,7 @@ border-radius: 3px; &_yes { - background-color: $danger-color;; + background-color: $danger-color; } &_no { diff --git a/src/assets/stylesheets/application/ballots/about.scss b/src/assets/stylesheets/application/ballots/about.scss index b00512a..dcc1ea0 100644 --- a/src/assets/stylesheets/application/ballots/about.scss +++ b/src/assets/stylesheets/application/ballots/about.scss @@ -17,14 +17,14 @@ width: 100% !important; } &_name { - width: 20%; + width: 12%; } &_action { - width: 10%; + width: 8%; } // 25 &_type { - width: 10%; + width: 8%; } &_proposal { width: 30%; @@ -50,35 +50,13 @@ word-break: break-all; } &_time { - width: 8%; - text-align: right; - @media screen and (max-width: $tablet-width) { - text-align: left; - } - #{$this}-i--title { - text-align: right; - @media screen and (max-width: $tablet-width) { - text-align: left; - } - } + width: 20%; } &--title { - color: #333; + color: #777; font-size: 13px; - font-weight: 700; - left: 0; - position: absolute; - right: 0; + font-weight: 400; text-align: left; - top: -#{ $desktop-indent * 2 + 10 }; - z-index: 1; - @media screen and (max-width: $tablet-width) { - position: relative; - left: auto; - right: auto; - top: auto; - white-space: nowrap; - } } &:first-child .ballots-about-td-value { border-left: none; @@ -91,14 +69,11 @@ } &-td { &.ballots-about-td-value { - border-right: 1px solid $base-border-color; - font-size: 13px; - min-height: 56px; + color: #333; + font-size: 14px; padding-left: 5px; padding-right: 5px; @media screen and (max-width: $tablet-width) { - border: none; - min-height: 0; padding-left: 0; padding-right: 0; } @@ -118,4 +93,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/assets/stylesheets/application/ballots/base.scss b/src/assets/stylesheets/application/ballots/base.scss index 4d45428..3cd4b68 100644 --- a/src/assets/stylesheets/application/ballots/base.scss +++ b/src/assets/stylesheets/application/ballots/base.scss @@ -10,18 +10,14 @@ } &-i { @extend %white-block; - background-color: rgba(240, 240, 240, 0.2); - &-not-finalized { - background-color: #fff; - border-color: rgba($primary-color, 0.3); - } + background-color: #fff; &-scale { - border-top: 1px solid #e5eef9; + border-top: 1px solid $base-border-color; display: flex; justify-content: space-between; margin-bottom: 30px; - margin-top: $desktop-indent; - padding: $desktop-indent 0 0 0; + margin-top: 30px; + padding: 30px 0 0 0; @media screen and (max-width: $tablet-width) { display: block; margin-top: $tablet-indent; @@ -48,47 +44,19 @@ } } &--name { - color: #333; - font-weight: bold; overflow: hidden; text-overflow: ellipsis; } - &--created { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6M9jT1MAAAAQHRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lKU1RZYmNrbHV2iYqLo6Spqqusra7Cw8TFysvM29zk5ufo6/Lz+Pn8DzgVHgAAATNJREFUeNplk+1agkAQhQfRykQTrJTEUjSCvtTQECPk/q+qPQ7LsnR+7DOzL898LiRlOP46zfN0vXQM0tXydkWlndeqs/620LTtK3Z7LBo6OpLd5fDzl6nVubSnIXv3zIY/8N4HVGrwBj8bwjaR77SgmhYn5DWF5eE7ZoribkZkoIeI78ZJMmYrQkcGjZD9mq+SokjY6qKqEfniDIiFYMR6FqZPn+J8+A9dYX5QKs5eBaFz3p4wUkLwizrkvB2UcoZXJUwYHiqIsDclnBzAvicyrFYQpBW0lK0oqVbkEHR1fzEEHl/YhCHG1yKaoYi5zubl4Mn8wsqe6uwRK4tNmHaG717VsiP4mV1uih9G4FrttuUG7GGGTLOioUwyRI51Ftv6o94rtNcfNbCz2uB32KycCv0BfU5XCrQEyKwAAAAASUVORK5CYII=); - background-position: left center; - background-repeat: no-repeat; - background-size: 14px 14px; - font-size: 13px; - font-weight: 700; - padding-left: 20px; - } &--see-all-proposal { display: inline-block; margin-top: 5px; } - &--time { - color: #333; - font-size: 24px; - font-weight: bold; - @media screen and (max-width: $tablet-width) { - display: inline-block; - vertical-align: middle; - margin-right: 10px; - } - } - &--to-close { - color: #333; - text-transform: uppercase; - @media screen and (max-width: $tablet-width) { - display: inline-block; - vertical-align: middle; - } - } &--vote { @extend %_button; &-label { + color: #333; cursor: default; - font-size: 15px; + font-size: 14px; font-weight: 700; line-height: 1.2; @media screen and (max-width: $mobile-width) { @@ -98,11 +66,13 @@ &-label-right { margin-left: auto !important; } - &_no { + &_no, + &_yes { @media screen and (max-width: $tablet-width) { float: left; margin-left: 0; margin-right: 15px; + min-width: 51px; } } } diff --git a/src/assets/stylesheets/application/ballots/footer.scss b/src/assets/stylesheets/application/ballots/footer.scss index f301095..54a3791 100644 --- a/src/assets/stylesheets/application/ballots/footer.scss +++ b/src/assets/stylesheets/application/ballots/footer.scss @@ -27,7 +27,11 @@ } p { - color: $gray-text-color; + color: #777; + font-size: 14px; + font-stretch: normal; + font-style: normal; + font-weight: normal; line-height: 18px; max-width: 340px; padding-left: 15px; diff --git a/src/assets/stylesheets/helpers/_placeholders.scss b/src/assets/stylesheets/helpers/_placeholders.scss index e0394fb..d34f71b 100644 --- a/src/assets/stylesheets/helpers/_placeholders.scss +++ b/src/assets/stylesheets/helpers/_placeholders.scss @@ -11,9 +11,9 @@ %white-block { background-color: #fff; - border: 1px solid $base-border-color; border-radius: 6px; - margin-bottom: 80px; + border: 1px solid $base-border-color; + margin-bottom: 30px; padding: $desktop-indent; transition: 0.15s box-shadow; diff --git a/src/assets/stylesheets/helpers/_vars.scss b/src/assets/stylesheets/helpers/_vars.scss index 6813f98..c1a8609 100644 --- a/src/assets/stylesheets/helpers/_vars.scss +++ b/src/assets/stylesheets/helpers/_vars.scss @@ -14,7 +14,7 @@ $btn-primary-bg: $primary-color; $btn-secondary-bg: #61db97; // borders -$base-border-color: #b8c1cb; +$base-border-color: #e4e4e4; // widths $container-width: 960px; diff --git a/src/components/BallotCard.jsx b/src/components/BallotCard.jsx index fa4d8f7..be3560d 100644 --- a/src/components/BallotCard.jsx +++ b/src/components/BallotCard.jsx @@ -9,6 +9,7 @@ import swal from 'sweetalert2' const ACCEPT = 1 const REJECT = 2 const USDateTimeFormat = 'MM/DD/YYYY h:mm:ss A' +const maxDetailsLength = 500 const zeroTimeTo = '00:00' @@ -47,7 +48,9 @@ export class BallotCard extends React.Component { @computed get finalizeButtonClass() { - const cls = this.isFinalized ? 'btn btn-primary btn-finalize disabled' : 'btn btn-primary btn-finalize' + const cls = this.isFinalized + ? 'btn btn-primary btn-finalize disabled text-capitalize' + : 'btn btn-primary btn-finalize text-capitalize' return cls } @@ -350,6 +353,13 @@ export class BallotCard extends React.Component { } else { this.getHasAlreadyVoted() } + this.state = { + detailsCollapsed: this.memo.length > maxDetailsLength + } + } + + toggleDetails = () => { + this.setState(prevState => ({ detailsCollapsed: !prevState.detailsCollapsed })) } componentDidMount() { @@ -399,6 +409,14 @@ export class BallotCard extends React.Component { ) let showHasAlreadyVotedLabel = this.hasAlreadyVoted ? hasAlreadyVotedLabel : '' const threshold = this.getThreshold(contractsStore, votingType) + let toggleShowMore = + this.memo.length > maxDetailsLength ? ( + + {this.state.detailsCollapsed ? 'More...' : 'Less'} + + ) : ( + '' + ) return (
@@ -408,7 +426,6 @@ export class BallotCard extends React.Component {

{this.creator}

-

{this.startTime}

{children} @@ -417,8 +434,10 @@ export class BallotCard extends React.Component {

Ballot Time

-

{this.timeTo.displayValue}

-

{this.timeTo.title}

+

{this.startTime}

+

+ {this.timeTo.displayValue} ({this.timeTo.title}) +

@@ -459,11 +478,17 @@ export class BallotCard extends React.Component { -
- Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal +
+
+ Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal +
+
+ {this.state.detailsCollapsed + ? this.memo.substr(0, this.memo.lastIndexOf(' ', maxDetailsLength)) + : this.memo} + {toggleShowMore} +
-
{this.memo}
-