diff --git a/package.json b/package.json index c7156cd..6511423 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build -o origin", - "build-css": "node-sass-chokidar src/assets/App.scss -o src/assets --output-style=compressed", + "build-css": "node-sass-chokidar src/assets/stylesheets/index.scss -o src/assets/stylesheets/ --output-style=compressed", "watch-css": "nodemon -e scss -x \"npm run build-css\"", "start-js": "node scripts/start.js", "start": "npm-run-all -p watch-css start-js", diff --git a/src/App.js b/src/App.js index 4af532c..a603422 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,13 @@ -//import DevTools from 'mobx-react-devtools' -import './assets/App.css' -// import Loading from './components/Loading' import React, { Component } from 'react' +import swal from 'sweetalert2' import { Header, Ballots, NewBallot, Settings, Footer, Loading } from './components' import { Route } from 'react-router-dom' -import { inject, observer } from 'mobx-react' -import swal from 'sweetalert2' -import { messages } from './utils/messages' import { constants } from './utils/constants' +import { inject, observer } from 'mobx-react' +import { messages } from './utils/messages' +import { getNetworkBranch } from './utils/utils' + +import './assets/stylesheets/index.css' @inject('commonStore', 'contractsStore') @observer @@ -130,6 +130,7 @@ class App extends Component { render() { const { commonStore, contractsStore } = this.props + const networkBranch = contractsStore.netId ? getNetworkBranch(contractsStore.netId) : null const loading = commonStore.loading ? : '' const search = this.shouldShowSearch() ? ( @@ -138,9 +139,7 @@ class App extends Component { - ) : ( - '' - ) + ) : null const isTestnet = contractsStore.netId in constants.NETWORKS && constants.NETWORKS[contractsStore.netId].TESTNET @@ -172,7 +171,7 @@ class App extends Component { {/**/} - + ) } diff --git a/src/assets/App.css b/src/assets/App.css deleted file mode 100644 index d79dac8..0000000 --- a/src/assets/App.css +++ /dev/null @@ -1 +0,0 @@ -.footer{left:0;right:0}.new-form,.settings,.ballots-i{background-color:#fff;border-radius:6px;border:1px solid #e4e4e4;margin-bottom:30px;padding:30px;transition:0.15s box-shadow}@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}.sokol input:focus,.sokol textarea:focus,.sokol select:focus{border-color:#6ac9b9}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: 767px){body{padding-bottom:132px}}a{color:#5c34a2;text-decoration:none}a:hover{text-decoration:underline}a .sokol{color:#6ac9b9}hr{display:block;width:100%;height:1px;margin:10px 0 30px;border:0;background-color:#e4e4e4}.center{text-align:center}.left{float:left;width:48%}.right{float:right;width:48%}@media screen and (max-width: 767px){.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: 767px){.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-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-freeze{background-color:#50bbda;box-shadow:0px 5px 10px 0 rgba(80,187,218,0.3)}.btn.btn-freeze:hover{background-color:#2ba8cc}.sokol .btn.btn-primary{background-color:#6ac9b9;box-shadow:0px 5px 10px 0 rgba(106,201,185,0.3)}.sokol .btn.btn-primary:hover{background-color:#45bba7}.sokol .btn.btn-success{background-color:#6ac9b9;box-shadow:0px 5px 10px 0 rgba(96,219,151,0.3)}.sokol .btn.btn-success:hover{background-color:#45bba7}.sokol .btn.btn-danger{background-color:#f24c67;box-shadow:0px 5px 10px 0 rgba(242,76,103,0.33)}.sokol .btn.btn-danger:hover{background-color:#ef1c3f}.sokol .btn.btn-freeze{background-color:#50bbda;box-shadow:0px 5px 10px 0 rgba(80,187,218,0.3)}.sokol .btn.btn-freeze:hover{background-color:#2ba8cc}.btn.btn-new{background-image:url("../assets/images/icons/icon-add.svg");background-size:14px 14px;padding-right:45px}.btn.btn-load-more{background-image:url("../assets/images/icons/icon-load-more.svg");border-radius:5px;border:2px solid #5c34a2;font-size:17px;font-weight:400;background-size:14px 14px;padding-right:45px}.sokol .btn.btn-load-more{background-image:url("../assets/images/icons/icon-load-more-sokol.svg");border-color:#6ac9b9}.btn.btn-transparent{color:#5c34a2;background-color:transparent}.btn.btn-transparent:hover{opacity:0.8}.sokol .btn.btn-transparent{color:#6ac9b9}.btn[disabled],.sokol .btn[disabled],.btn.disabled,.sokol .btn.disabled{color:#333333;cursor:default;background-color:#f0f0f0;box-shadow:none}.btn[disabled]:hover,.sokol .btn[disabled]:hover,.btn.disabled:hover,.sokol .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.no-shadow{box-shadow:none}.btn.text-lowercase{text-transform:lowercase}.btn.text-uppercase{text-transform:uppercase}.btn.text-capitalize{text-transform:capitalize}label{color:#333;display:inline-block;font-size:13px;line-height:1.2;margin-bottom:15px}input:focus,textarea:focus{border-color:#fff}input[type='radio'],textarea[type='radio']{display:none}textarea{width:100%;padding-top:10px;padding-bottom:10px;height:70px;resize:none}select{appearance:none;background-image:url(./images/select.png);background-position:right 13px center;background-repeat:no-repeat;padding-right:30px}@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-button{position:relative}.radio-button-label{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;border-radius:3px;border:1px solid #e4e4e4;color:#333;cursor:pointer;font-size:14px;font-weight:400;line-height:50px;margin:0;outline:none;padding:0 15px;text-decoration:none;text-transform:capitalize;text-align:center;transition:0.25s background-color;position:relative;z-index:1}.radio-button input[type='radio']{height:100%;position:absolute;visibility:hidden;width:100%;z-index:12}input[type='radio']:checked+.radio-button-label{background-color:#5c34a2;border-color:#5c34a2;box-shadow:0px 5px 10px 0 rgba(92,52,162,0.3);color:#fff}.sokol input[type='radio']:checked+.radio-button-label{background-color:#6ac9b9;border-color:#6ac9b9;box-shadow:0px 5px 10px 0 rgba(106,201,185,0.3)}.keys-radio-button-tr{display:flex;margin-bottom:30px}@media screen and (max-width: 768px){.keys-radio-button-tr{flex-direction:column}}.keys-radio-button-td{min-width:30%;margin-right:5%}.keys-radio-button-td:last-child{margin-right:0}.keys-radio-button-td .radio-button-label{display:flex;justify-content:center}@media screen and (max-width: 768px){.keys-radio-button-td{margin-bottom:15px;margin-right:0;min-width:100%}}.form-el{margin-bottom:30px}.hint{color:#777;font-size:13px;font-weight:400;line-height:1.38;padding-top:12px;margin:0;word-break:break-word}.hint a{color:#5c34a2}.sokol .hint a{color:#6ac9b9}.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-poa.svg");background-repeat:no-repeat;background-size:contain;display:block;height:18px;left:0;order:0;width:139px}.footer-logo.sokol{background-image:url("../assets/images/logos/logo-sokol.svg");width:144px}.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: 767px){.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: 767px){.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: 767px){.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: 767px){.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: 767px){.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.sokol .link-icon-all{background-image:url("../assets/images/icons/icon-all-sokol.svg")}.header.sokol .link-icon-active{background-image:url("../assets/images/icons/icon-active-sokol.svg")}.header.sokol .link-icon-to-finalize{background-image:url("../assets/images/icons/icon-to-finalize-sokol.svg")}.header .mobile-menu{display:none}@media screen and (max-width: 767px){.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: 767px){.header .header-mobile-menu-container{background-color:#45277a;height:220px}}@media screen and (max-width: 767px){.header.sokol .header-mobile-menu-container{background-color:#41b19e}}.header .Select{margin-left:25px}@media screen and (max-width: 767px){.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}.header.sokol .btn.btn-new-ballot{background-color:#fff;background-image:url("../assets/images/icons/icon-add-sokol.svg");color:#6ac9b9}.header.sokol .btn.btn-new-ballot:hover{opacity:0.9}.select-network-id{background:#fff;width:40px}.info-container{background-color:#f8f8f8;margin-bottom:30px;margin-left:-30px;margin-right:-30px;padding-bottom:30px;padding-left:30px;padding-right:30px;padding-top:30px}@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 2px;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-word}.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}.sokol .ballots .info-details .toggle-show{color:#6ac9b9}.new-form .info{padding:30px}.info-title{color:#333;font-size:16px;font-weight:400;margin-bottom:30px;padding-left:25px;position:relative}.info-title:before{background-image:url("../assets/images/icons/icon-info.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:10px 18px;content:'';height:32px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:10px}.info-i{color:#777;font-size:14px;line-height:1.71;margin-bottom:20px;padding-left:25px;position:relative}.info-i:before{background-color:#333;border-radius:50%;content:'';height:6px;left:0;position:absolute;top:8px;width:6px}.app-container{padding-bottom:30px;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:fixed;right:0;top:290px;z-index:1234}@media screen and (max-width: 767px){.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: 767px){#root,.app-container{height:100%}.app-container{padding-left:10px;padding-right:10px}}@media screen and (max-width: 767px){.content{padding-top:120px}}.content.content-menu-open{padding-top:290px}.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:40px}.main-title-container .main-title{font-size:24px;color:#333;line-height:38px}@media screen and (max-width: 767px){.main-title-container{-ms-flex-direction:column;flex-direction:column}.main-title-container .search-input{width:100%}}.new-form{display:flex;overflow:hidden;padding:0}@media screen and (max-width: 768px){.new-form{display:block}}.new-form-side{box-sizing:border-box;padding-bottom:30px;padding-top:30px}@media screen and (max-width: 768px){.new-form-side{width:100% !important}}.new-form-side_left{background-color:#f8f8f8;padding-top:0;width:30%}@media screen and (max-width: 768px){.new-form-side_left{margin-bottom:30px;padding-bottom:0}}.new-form-side_right{border-left:1px solid #e4e4e4;padding-left:30px;padding-right:30px;width:70%}@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: 767px){.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:#41b19e}@media screen and (max-width: 767px){.search-container{left:0;position:fixed;right:0;top:70px;z-index:123}}input.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;display:block;font-size:14px;font-weight:400;height:30px;outline:none;padding-left:30px;width:100%}input.search-input,input.search-input:focus input.search-input:hover,input.search-input:active{color:#fff}.sokol input.search-input{background-image:url("../assets/images/icons/icon-search-sokol.svg")}input.search-input::-webkit-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}input.search-input:-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}input.search-input::-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}input.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:#f0f0f0;border-radius:5px;clear:left;height:10px;margin-top:34px;overflow:hidden}.vote-scale-not-finalized{background-color:#ffffff}.vote-scale--fill{height:100%;border-radius:3px}.vote-scale--fill_no{background-color:#f21b57}.sokol .vote-scale--fill_no{background-color:#f24c67}.vote-scale--fill_yes{background-color:#60db97}.sokol .vote-scale--fill_yes{background-color:#6ac9b9}.vote-scale--fill_send{background-color:#60db97}.sokol .vote-scale--fill_send{background-color:#6ac9b9}.vote-scale--fill_burn{background-color:#f21b57}.sokol .vote-scale--fill_burn{background-color:#f24c67}.vote-scale--fill_freeze{background-color:#50bbda}.sokol .vote-scale--fill_freeze{background-color:#50bbda}.vote-scale--container{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:#333;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{background-color:#fff;border-bottom:1px solid #e4e4e4;padding:20px 30px 10px}.ballot-types-i{color:#333;cursor:pointer;font-size:16px;font-weight:400;margin-bottom:10px;position:relative;line-height:30px}.ballot-types-i:before{background-color:#5c34a2;border-bottom-right-radius:5px;border-top-right-radius:5px;content:'';height:30px;left:-30px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);width:4px}.sokol .ballot-types-i:before{background-color:#6ac9b9}.ballot-types-i_active{color:#5c34a2}.ballot-types-i_active:before{opacity:1}.sokol .ballot-types-i_active{color:#6ac9b9}.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: 767px){.ballots .title{margin-bottom:10px}}.ballots-about{margin-top:-8px}.ballots-i{background-color:#fff}.ballots-i-scale{border-top:1px solid #e4e4e4;display:flex;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: 767px){.ballots-i-scale{margin-top:10px;padding:10px 0 0 0}}.ballots-i-scale-column{display:flex;flex-grow:1;justify-content:space-between;margin-right:40px}@media screen and (max-width: 768px){.ballots-i-scale-column{margin-bottom:30px;margin-right:0;overflow:hidden;width:100%}}.ballots-i-scale-column:last-child{margin-right:0}@media screen and (max-width: 768px){.ballots-i-scale-column.reverse-responsive{flex-direction:row-reverse}}.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: 767px){.ballots-i--vote-label{margin-bottom:25px}}.ballots-i--vote-label-right{margin-left:auto !important}.ballots-i--vote_btn{line-height:44px;min-width:55px;text-transform:capitalize}.ballots-i--vote_btn.xl{min-width:78px}.ballots-i--vote_btn.m-r-20{margin-right:20px}.ballots-i--vote_btn.m-l-20{margin-left:20px}@media screen and (max-width: 768px){.ballots-i--vote_btn.m-r-20,.ballots-i--vote_btn.m-l-20{margin-left:0;margin-right:20px}}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}.sokol .color-primary{color:#6ac9b9}.color-danger{color:#f21b57}.sokol .color-danger{color:#f24c67}.color-success{color:#60db97}.sokol .color-success{color:#6ac9b9}@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 .ballots-about-td-value{padding-right:12px}.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_receiver{width:45%;word-break:break-all}.ballots-about-i_funds_amount{width:23%;word-break:break-all}.ballots-about-i_proposed-min-threshold{width:30%;word-break:break-all}.ballots-about-i_contract-type{width:25%;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}.ballots-about-i_action .ballots-about-td.ballots-about-td-value,.ballots-about-i_type .ballots-about-td.ballots-about-td-value{text-transform:capitalize}@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: 767px){.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: 767px){.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: 767px){.ballots-footer-finalize{width:100%;margin-right:0;margin-top:10px;text-align:center}} diff --git a/src/assets/App.scss b/src/assets/App.scss deleted file mode 100644 index 711d981..0000000 --- a/src/assets/App.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import 'stylesheets/helpers/vars'; -@import 'stylesheets/helpers/mixins'; -@import 'stylesheets/helpers/placeholders'; - -@import 'stylesheets/application/base'; -@import 'stylesheets/application/buttons'; -@import 'stylesheets/application/controls'; -@import 'stylesheets/application/footer'; -@import 'stylesheets/application/header'; -@import 'stylesheets/application/info'; -@import 'stylesheets/application/layout'; -@import 'stylesheets/application/loading'; -@import 'stylesheets/application/main-title'; -@import 'stylesheets/application/new'; -@import 'stylesheets/application/search'; -@import 'stylesheets/application/settings'; -@import 'stylesheets/application/socials'; -@import 'stylesheets/application/vote-scale'; - -@import 'stylesheets/application/select/select'; -@import 'stylesheets/application/select/control'; -@import 'stylesheets/application/select/menu'; -@import 'stylesheets/application/select/mixins'; -@import 'stylesheets/application/select/multi'; -@import 'stylesheets/application/select/spinner'; - -@import 'stylesheets/application/ballot-types'; -@import 'stylesheets/application/ballots/placeholders'; -@import 'stylesheets/application/ballots/base'; -@import 'stylesheets/application/ballots/about'; -@import 'stylesheets/application/ballots/footer'; diff --git a/src/assets/stylesheets/GUIDELINES.md b/src/assets/stylesheets/GUIDELINES.md new file mode 100644 index 0000000..2581f43 --- /dev/null +++ b/src/assets/stylesheets/GUIDELINES.md @@ -0,0 +1,43 @@ +#ECSS (Enduring CSS) will be used + +http://ecss.io/ + +##ECSS naming convention + +.namespace-ModuleOrComponent_ChildNode-variant {} + +- namespace: This is a required part of every selector. The micro-namespace should be all lowercase/train-case. It is typically an abbreviation to denote context or originating logic. + +- ModuleOrComponent: This is a upper camel case/pascal case. It should always be preceded by a hyphen character (-). + +- ChildNode: This is an optional section of the selector. It should be upper camel case/pascal case and preceded by an underscore (_). + +- variant: This is a further optional section of the selector. It should be written all lowercase/train-case. + +For example: + +.hm-Item_Header {} +.hm-Item_Header-bg1 {} /* Image background 1 */ + +##ECSS component states + +.is-Suspended {} +.is-Live {} +.is-Selected {} +.is-Busy {} + +etc. + +#CSS Overrides + +Should be self contained. + +For example: + +.ip-Carousel { + font-size: $text13; + /* The override is here for when this key-selector sits within a ip-HomeCallouts element */ + .ip-HomeCallouts & { + font-size: $text15; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/application/_ballot-types.scss b/src/assets/stylesheets/application/_ballot-types.scss index 4ddbcfe..d961d4f 100644 --- a/src/assets/stylesheets/application/_ballot-types.scss +++ b/src/assets/stylesheets/application/_ballot-types.scss @@ -15,7 +15,7 @@ line-height: $i-height; &:before { - background-color: $primary-color; + background-color: $poa-purple; border-bottom-right-radius: 5px; border-top-right-radius: 5px; content: ''; @@ -27,19 +27,19 @@ transform: translateY(-50%); width: 4px; .sokol & { - background-color: $primary-color-sokol; + background-color: $sokol-cyan; } } &_active { - color: $primary-color; + color: $poa-purple; &:before { opacity: 1; } .sokol & { - color: $primary-color-sokol; + color: $sokol-cyan; } } diff --git a/src/assets/stylesheets/application/_base.scss b/src/assets/stylesheets/application/_base.scss index 61be786..366047f 100644 --- a/src/assets/stylesheets/application/_base.scss +++ b/src/assets/stylesheets/application/_base.scss @@ -18,11 +18,11 @@ body { color: #333; font-family: 'Nunito', sans-serif; font-size: 14px; - padding-bottom: $footer-height_desktop; + // padding-bottom: $footer-height_desktop; position: relative; width: 100%; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { padding-bottom: $footer-height_mobile; } @media screen and (max-width: $mobile-width) { @@ -31,13 +31,13 @@ body { } a { - color: $primary-color; + color: $poa-purple; text-decoration: none; &:hover { text-decoration: underline; } .sokol { - color: $primary-color-sokol; + color: $sokol-cyan; } } @@ -81,11 +81,11 @@ hr { } .container { - width: $container-width; + width: $container-max-width; margin: 0 auto; box-sizing: border-box; - @media screen and (max-width: $container-width) { + @media screen and (max-width: $container-max-width) { width: 100%; padding: 0 10px; } @@ -98,7 +98,7 @@ hr { font-size: 30px; font-weight: normal; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { font-size: 28px; } diff --git a/src/assets/stylesheets/application/_buttons.scss b/src/assets/stylesheets/application/_buttons.scss index a74b03f..f164444 100644 --- a/src/assets/stylesheets/application/_buttons.scss +++ b/src/assets/stylesheets/application/_buttons.scss @@ -45,16 +45,16 @@ textarea { text-transform: uppercase; transition: 0.15s background-color; - @include make-themed-btn('btn-primary', $primary-color, (92, 52, 162, 0.3)); - @include make-themed-btn('btn-success', $success-color, (96, 219, 151, 0.3)); - @include make-themed-btn('btn-danger', $danger-color, (242, 27, 87, 0.3)); - @include make-themed-btn('btn-freeze', $freeze-color, (80, 187, 218, 0.3)); + @include make-themed-btn('btn-primary', $poa-purple, (92, 52, 162, 0.3)); + @include make-themed-btn('btn-success', $poa-success-color, (96, 219, 151, 0.3)); + @include make-themed-btn('btn-danger', $poa-danger-color, (242, 27, 87, 0.3)); + @include make-themed-btn('btn-freeze', $poa-freeze-color, (80, 187, 218, 0.3)); .sokol & { - @include make-themed-btn('btn-primary', $primary-color-sokol, (106, 201, 185, 0.3)); - @include make-themed-btn('btn-success', $success-color-sokol, (96, 219, 151, 0.3)); - @include make-themed-btn('btn-danger', $danger-color-sokol, (242, 76, 103, 0.33)); - @include make-themed-btn('btn-freeze', $freeze-color-sokol, (80, 187, 218, 0.3)); + @include make-themed-btn('btn-primary', $sokol-cyan, (106, 201, 185, 0.3)); + @include make-themed-btn('btn-success', $sokol-success-color, (96, 219, 151, 0.3)); + @include make-themed-btn('btn-danger', $sokol-danger-color, (242, 76, 103, 0.33)); + @include make-themed-btn('btn-freeze', $sokol-freeze-color, (80, 187, 218, 0.3)); } &.btn-new { @@ -64,23 +64,23 @@ textarea { &.btn-load-more { background-image: url('#{ $base-images-path }/icons/icon-load-more.svg'); border-radius: 5px; - border: 2px solid $primary-color; + border: 2px solid $poa-purple; font-size: 17px; font-weight: 400; @include btn-background-properties(); .sokol & { background-image: url('#{ $base-images-path }/icons/icon-load-more-sokol.svg'); - border-color: $primary-color-sokol; + border-color: $sokol-cyan; } } &.btn-transparent { - color: $primary-color; + color: $poa-purple; background-color: transparent; &:hover { opacity: 0.8; } .sokol & { - color: $primary-color-sokol; + color: $sokol-cyan; } } &[disabled], diff --git a/src/assets/stylesheets/application/_controls.scss b/src/assets/stylesheets/application/_controls.scss index c832a2b..e1fe871 100644 --- a/src/assets/stylesheets/application/_controls.scss +++ b/src/assets/stylesheets/application/_controls.scss @@ -28,10 +28,10 @@ textarea { } select { - @include image-2x('./images/select@2x.png', 8px, 4px); + @include image-2x('#{ $base-images-path }/select@2x.png', 8px, 4px); @extend %form-el; appearance: none; - background-image: url(./images/select.png); + background-image: url('#{ $base-images-path }/select.png'); background-position: right 13px center; background-repeat: no-repeat; padding-right: 30px; @@ -39,17 +39,17 @@ select { button { @extend %button; - background-color: fade-out($primary-color, 0.9); - color: $primary-color; + background-color: fade-out($poa-purple, 0.9); + color: $poa-purple; &.load-more { margin-bottom: 50px; - @media screen and (max-width: $container-width) { + @media screen and (max-width: $container-max-width) { margin-bottom: 80px; } - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { margin-top: 80px; } } @@ -87,13 +87,13 @@ button { } input[type='radio']:checked + &-label { - background-color: $primary-color; - border-color: $primary-color; + background-color: $poa-purple; + border-color: $poa-purple; box-shadow: 0px 5px 10px 0 rgba(92, 52, 162, 0.3); color: #fff; .sokol & { - background-color: $primary-color-sokol; - border-color: $primary-color-sokol; + background-color: $sokol-cyan; + border-color: $sokol-cyan; box-shadow: 0px 5px 10px 0 rgba(106, 201, 185, 0.3); } } @@ -102,7 +102,7 @@ button { .keys-radio-button-tr { display: flex; margin-bottom: 30px; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { flex-direction: column; } } @@ -117,7 +117,7 @@ button { display: flex; justify-content: center; } - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { margin-bottom: 15px; margin-right: 0; min-width: 100%; @@ -138,10 +138,10 @@ button { word-break: break-word; a { - color: $primary-color; + color: $poa-purple; .sokol & { - color: $primary-color-sokol; + color: $sokol-cyan; } } } diff --git a/src/assets/stylesheets/application/_footer.scss b/src/assets/stylesheets/application/_footer.scss index 5da4da9..6758d7d 100644 --- a/src/assets/stylesheets/application/_footer.scss +++ b/src/assets/stylesheets/application/_footer.scss @@ -1,13 +1,13 @@ .footer { @extend %full-width; - background-color: $primary-color; + background-color: $poa-purple; bottom: 0; padding: 18px 0; position: absolute; &.sokol { - background-color: $primary-color-sokol; + background-color: $sokol-cyan; } .container { @@ -16,7 +16,7 @@ flex-wrap: wrap; justify-content: space-between; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { flex-direction: column; } } @@ -24,7 +24,7 @@ .socials { order: 2; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { margin-top: 15px; order: 1; } @@ -52,7 +52,7 @@ order: 1; text-align: center; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { line-height: normal; margin-top: 15px; order: 2; diff --git a/src/assets/stylesheets/application/_header.scss b/src/assets/stylesheets/application/_header.scss index 64de487..5cad3cf 100644 --- a/src/assets/stylesheets/application/_header.scss +++ b/src/assets/stylesheets/application/_header.scss @@ -1,5 +1,5 @@ .header { - background-color: $primary-color; + background-color: $poa-purple; position: relative; width: 100%; z-index: 9999; @@ -25,7 +25,7 @@ } &.sokol { - background-color: $primary-color-sokol; + background-color: $sokol-cyan; } // logos @@ -46,7 +46,7 @@ display: none; } - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { justify-content: flex-end; width: auto; } @@ -138,7 +138,7 @@ .header-mobile-menu-container { @media screen and (max-width: $mobile-width) { - background-color: $primary-color-darker; + background-color: $poa-purple-darker; height: $header-mobile-menu-container-height; } } @@ -146,7 +146,7 @@ &.sokol { .header-mobile-menu-container { @media screen and (max-width: $mobile-width) { - background-color: $primary-color-darker-sokol; + background-color: $sokol-cyan-sarker; } } } @@ -178,7 +178,7 @@ .btn.btn-new-ballot { background-color: #fff; background-image: url('#{ $base-images-path }/icons/icon-add-sokol.svg'); - color: $primary-color-sokol; + color: $sokol-cyan; &:hover { opacity: 0.9; } diff --git a/src/assets/stylesheets/application/_info.scss b/src/assets/stylesheets/application/_info.scss index 9819f55..ae250b1 100644 --- a/src/assets/stylesheets/application/_info.scss +++ b/src/assets/stylesheets/application/_info.scss @@ -10,7 +10,7 @@ $padding-left-items: 25px; padding-right: #{ $desktop-indent }; padding-top: #{ $desktop-indent }; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { margin-left: -#{ $tablet-indent }; margin-right: -#{ $tablet-indent }; padding-left: #{ $tablet-indent }; @@ -54,12 +54,12 @@ $padding-left-items: 25px; } .toggle-show { - color: $primary-color; + color: $poa-purple; cursor: pointer; display: inline-block; margin-left: 5px; .sokol & { - color: $primary-color-sokol; + color: $sokol-cyan; } } } diff --git a/src/assets/stylesheets/application/_new.scss b/src/assets/stylesheets/application/_new.scss index 16dad0f..bc50d6f 100644 --- a/src/assets/stylesheets/application/_new.scss +++ b/src/assets/stylesheets/application/_new.scss @@ -5,7 +5,7 @@ overflow: hidden; padding: 0; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { display: block; } @@ -14,7 +14,7 @@ padding-bottom: 30px; padding-top: 30px; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { width: 100% !important; } @@ -23,7 +23,7 @@ padding-top: 0; width: 30%; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { margin-bottom: 30px; padding-bottom: 0; } @@ -35,7 +35,7 @@ padding-right: 30px; width: 70%; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { border: 0; padding-top: 0; } diff --git a/src/assets/stylesheets/application/_search.scss b/src/assets/stylesheets/application/_search.scss index f20d479..82292f5 100644 --- a/src/assets/stylesheets/application/_search.scss +++ b/src/assets/stylesheets/application/_search.scss @@ -5,7 +5,7 @@ padding: 10px 0 0 0; &.sokol { - background-color: $primary-color-darker-sokol; + background-color: $sokol-cyan-sarker; } @media screen and (max-width: $mobile-width) { diff --git a/src/assets/stylesheets/application/_vote-scale.scss b/src/assets/stylesheets/application/_vote-scale.scss index 3c38525..775aa8f 100644 --- a/src/assets/stylesheets/application/_vote-scale.scss +++ b/src/assets/stylesheets/application/_vote-scale.scss @@ -15,37 +15,37 @@ border-radius: 3px; &_no { - background-color: $danger-color; + background-color: $poa-danger-color; .sokol & { - background-color: $danger-color-sokol; + background-color: $sokol-danger-color; } } &_yes { - background-color: $success-color; + background-color: $poa-success-color; .sokol & { - background-color: $success-color-sokol; + background-color: $sokol-success-color; } } &_send { - background-color: $success-color; + background-color: $poa-success-color; .sokol & { - background-color: $success-color-sokol; + background-color: $sokol-success-color; } } &_burn { - background-color: $danger-color; + background-color: $poa-danger-color; .sokol & { - background-color: $danger-color-sokol; + background-color: $sokol-danger-color; } } &_freeze { - background-color: $freeze-color; + background-color: $poa-freeze-color; .sokol & { - background-color: $freeze-color-sokol; + background-color: $sokol-freeze-color; } } diff --git a/src/assets/stylesheets/application/ballots/_about.scss b/src/assets/stylesheets/application/ballots/_about.scss index 7796b98..0e1c592 100644 --- a/src/assets/stylesheets/application/ballots/_about.scss +++ b/src/assets/stylesheets/application/ballots/_about.scss @@ -1,7 +1,7 @@ .ballots-about { $cell-right-padding: 12px; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { display: table; width: 100%; } @@ -14,7 +14,7 @@ display: inline-block; vertical-align: top; box-sizing: border-box; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { display: table-row; width: 100% !important; } @@ -90,23 +90,23 @@ text-transform: capitalize; } - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { padding-left: 0; padding-right: 0; } } - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { display: table-cell; vertical-align: top; } &:first-child { - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { padding-right: 10px; } } #{$this}-i:not(:last-child) & { - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { padding-bottom: 10px; } } diff --git a/src/assets/stylesheets/application/ballots/_base.scss b/src/assets/stylesheets/application/ballots/_base.scss index 2006fab..77049be 100644 --- a/src/assets/stylesheets/application/ballots/_base.scss +++ b/src/assets/stylesheets/application/ballots/_base.scss @@ -1,7 +1,7 @@ .ballots { .title { margin-bottom: 50px; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { margin-bottom: $tablet-indent; } @media screen and (max-width: $mobile-width) { @@ -22,7 +22,7 @@ margin-bottom: 30px; margin-top: 30px; padding: 30px 0 0 0; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { display: block; margin-top: $tablet-indent; padding: $tablet-indent 0 0 0; @@ -37,7 +37,7 @@ justify-content: space-between; margin-right: 40px; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { margin-bottom: 30px; margin-right: 0; overflow: hidden; @@ -49,7 +49,7 @@ } &.reverse-responsive { - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { flex-direction: row-reverse; } } @@ -92,7 +92,7 @@ &.m-l-20 { margin-left: 20px; } - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { &.m-r-20, &.m-l-20 { margin-left: 0; @@ -115,20 +115,20 @@ textarea { } .color-primary { - color: $primary-color; + color: $poa-purple; .sokol & { - color: $primary-color-sokol; + color: $sokol-cyan; } } .color-danger { - color: $danger-color; + color: $poa-danger-color; .sokol & { - color: $danger-color-sokol; + color: $sokol-danger-color; } } .color-success { - color: $success-color; + color: $poa-success-color; .sokol & { - color: $success-color-sokol; + color: $sokol-success-color; } } diff --git a/src/assets/stylesheets/application/ballots/_footer.scss b/src/assets/stylesheets/application/ballots/_footer.scss index 54a3791..f3a51a3 100644 --- a/src/assets/stylesheets/application/ballots/_footer.scss +++ b/src/assets/stylesheets/application/ballots/_footer.scss @@ -17,7 +17,7 @@ } } - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { padding-top: $tablet-indent; } diff --git a/src/assets/stylesheets/application/select/_select.scss b/src/assets/stylesheets/application/select/_select.scss index 5d16e5d..762ee95 100755 --- a/src/assets/stylesheets/application/select/_select.scss +++ b/src/assets/stylesheets/application/select/_select.scss @@ -15,7 +15,7 @@ $select-input-bg-disabled: #f9f9f9 !default; $select-input-bg-focus: #fff !default; $select-input-border-color: $base-border-color !default; $select-input-border-radius: 3px !default; -$select-input-border-focus: $primary-color !default; +$select-input-border-focus: $poa-purple !default; $select-input-box-shadow-focus: none !default; $select-input-border-width: 1px !default; $select-input-height: 40px !default; diff --git a/src/assets/stylesheets/base/README.md b/src/assets/stylesheets/base/README.md new file mode 100644 index 0000000..ee174d6 --- /dev/null +++ b/src/assets/stylesheets/base/README.md @@ -0,0 +1 @@ +Holds what we might call the boilerplate stuff for the project: reset (or Normalize.css, or whatever), typography, etc. \ No newline at end of file diff --git a/src/assets/stylesheets/base/_display.scss b/src/assets/stylesheets/base/_display.scss new file mode 100644 index 0000000..c9941a5 --- /dev/null +++ b/src/assets/stylesheets/base/_display.scss @@ -0,0 +1,11 @@ +.hidden { + display: none; +} + +.display-block { + display: block; +} + +.display-inline { + display: inline; +} \ No newline at end of file diff --git a/src/assets/stylesheets/base/_effects.scss b/src/assets/stylesheets/base/_effects.scss new file mode 100644 index 0000000..07958e3 --- /dev/null +++ b/src/assets/stylesheets/base/_effects.scss @@ -0,0 +1,16 @@ +.background-blur { + animation-duration: 0.25s; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-name: sw-ModalAnimation_in; + animation-timing-function: linear; +} + +@keyframes sw-ModalAnimation_in { + 0% { + filter: blur(0); + } + 100% { + filter: blur(2px); + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/base/_index.scss b/src/assets/stylesheets/base/_index.scss new file mode 100644 index 0000000..53711a5 --- /dev/null +++ b/src/assets/stylesheets/base/_index.scss @@ -0,0 +1,6 @@ +@import 'reset'; +@import 'normalize'; + +@import 'display'; +@import 'effects'; +@import 'typography'; \ No newline at end of file diff --git a/src/assets/stylesheets/base/_normalize.scss b/src/assets/stylesheets/base/_normalize.scss new file mode 100644 index 0000000..47b010e --- /dev/null +++ b/src/assets/stylesheets/base/_normalize.scss @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/src/assets/stylesheets/base/_reset.scss b/src/assets/stylesheets/base/_reset.scss new file mode 100644 index 0000000..2eabf48 --- /dev/null +++ b/src/assets/stylesheets/base/_reset.scss @@ -0,0 +1,3 @@ +* { + box-sizing: border-box; +} \ No newline at end of file diff --git a/src/assets/stylesheets/base/_typography.scss b/src/assets/stylesheets/base/_typography.scss new file mode 100644 index 0000000..6209f2f --- /dev/null +++ b/src/assets/stylesheets/base/_typography.scss @@ -0,0 +1,8 @@ +@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700'); + +body { + -webkit-font-smoothing: antialiased; + color: $base-text-color; + font-family: "Nunito", sans-serif; + font-size: $base-font-size; +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/README.md b/src/assets/stylesheets/components/README.md new file mode 100644 index 0000000..da3edd3 --- /dev/null +++ b/src/assets/stylesheets/components/README.md @@ -0,0 +1 @@ +All kinds of specific modules like a slider, a loader, a widget, etc. \ No newline at end of file diff --git a/src/assets/stylesheets/components/_Footer.scss b/src/assets/stylesheets/components/_Footer.scss new file mode 100644 index 0000000..1176be6 --- /dev/null +++ b/src/assets/stylesheets/components/_Footer.scss @@ -0,0 +1,56 @@ +.sw-Footer { + align-items: center; + background-color: $poa-purple; + color: #fff; + display: flex; + justify-content: center; + min-height: 60px; + overflow: hidden; + padding: 16px 0; + transition: background-color 0.25s ease-out; + width: 100%; + + { & }-core { + background-color: $poa-purple; + } + + { & }-sokol { + background-color: $sokol-cyan; + } + + { & }-dai { + background-color: $xdai-gray; + } +} + +.sw-Footer_Content { + @include content-layout-width(); + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + + @media (min-width: $breakpoint-md) { + flex-direction: row; + justify-content: space-between; + } +} + +.sw-Footer_Text { + color: #fff; + flex-grow: 1; + font-size: 11px; + font-weight: 300; + line-height: 1.2; + margin: 0; + padding: 15px 0 0 0; + text-align: center; + + @media (min-width: $breakpoint-md) { + padding-top: 0; + } + + .sw-Footer-dai & { + color: #333; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/_IconGithub.scss b/src/assets/stylesheets/components/_IconGithub.scss new file mode 100644 index 0000000..7a486b1 --- /dev/null +++ b/src/assets/stylesheets/components/_IconGithub.scss @@ -0,0 +1,7 @@ +.sw-IconGithub { + @include brand-icon-styles(); + + .ft-SocialIcons & { + margin-right: 10px; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/_IconPOA.scss b/src/assets/stylesheets/components/_IconPOA.scss new file mode 100644 index 0000000..6350661 --- /dev/null +++ b/src/assets/stylesheets/components/_IconPOA.scss @@ -0,0 +1,3 @@ +.sw-IconPOA { + @include brand-icon-styles(); +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/_IconTelegram.scss b/src/assets/stylesheets/components/_IconTelegram.scss new file mode 100644 index 0000000..e8c55da --- /dev/null +++ b/src/assets/stylesheets/components/_IconTelegram.scss @@ -0,0 +1,7 @@ +.sw-IconTelegram { + @include brand-icon-styles(); + + .ft-SocialIcons & { + margin-right: 10px; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/_IconTwitter.scss b/src/assets/stylesheets/components/_IconTwitter.scss new file mode 100644 index 0000000..a6ea7c7 --- /dev/null +++ b/src/assets/stylesheets/components/_IconTwitter.scss @@ -0,0 +1,7 @@ +.sw-IconTwitter { + @include brand-icon-styles(); + + .ft-SocialIcons & { + margin-right: 10px; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/_LogoDai.scss b/src/assets/stylesheets/components/_LogoDai.scss new file mode 100644 index 0000000..6fb9f79 --- /dev/null +++ b/src/assets/stylesheets/components/_LogoDai.scss @@ -0,0 +1,20 @@ +.sw-LogoDai { + display: block; + text-decoration: none; + + .sw-Header & { + height: 58px; + width: 167px; + } + + .sw-Footer & { + width: 120px; + } + +} + +.sw-LogoDai_Image { + display: block; + height: 100%; + width: 100%; +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/_LogoPOA.scss b/src/assets/stylesheets/components/_LogoPOA.scss new file mode 100644 index 0000000..eca7930 --- /dev/null +++ b/src/assets/stylesheets/components/_LogoPOA.scss @@ -0,0 +1,20 @@ +.sw-LogoPOA { + display: block; + text-decoration: none; + + .sw-Header & { + height: 26px; + width: 167px; + } + + .sw-Footer & { + width: 130px; + } + +} + +.sw-LogoPOA_Image { + display: block; + height: 100%; + width: 100%; +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/_LogoSokol.scss b/src/assets/stylesheets/components/_LogoSokol.scss new file mode 100644 index 0000000..8c8d759 --- /dev/null +++ b/src/assets/stylesheets/components/_LogoSokol.scss @@ -0,0 +1,20 @@ +.sw-LogoSokol { + display: block; + text-decoration: none; + + .sw-Header & { + height: 30px; + width: 178px; + } + + .sw-Footer & { + height: 26px; + } + +} + +.sw-LogoSokol_Image { + display: block; + height: 100%; + width: 100%; +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/_SocialIcons.scss b/src/assets/stylesheets/components/_SocialIcons.scss new file mode 100644 index 0000000..edc6cc1 --- /dev/null +++ b/src/assets/stylesheets/components/_SocialIcons.scss @@ -0,0 +1,12 @@ +$ft-SocialIcons_Icon-dimensions: 30px !default; + +.ft-SocialIcons { + align-items: center; + display: flex; + justify-content: space-between; + padding-top: 15px; + + @media (min-width: $breakpoint-md) { + padding-top: 0; + } +} diff --git a/src/assets/stylesheets/components/_index.scss b/src/assets/stylesheets/components/_index.scss new file mode 100644 index 0000000..8fe9ad8 --- /dev/null +++ b/src/assets/stylesheets/components/_index.scss @@ -0,0 +1,18 @@ +// @import "App"; +// @import "BaseLoader"; +// @import "ButtonDownload"; +// @import "ButtonGenerate"; +@import "Footer"; +// @import "Header"; +// @import "Home"; +@import "IconGithub"; +@import "IconPOA"; +@import "IconTelegram"; +@import "IconTwitter"; +// @import "Keys"; +// @import "Loading"; +@import "LogoDai"; +@import "LogoPOA"; +@import "LogoSokol"; +// @import "MainImage"; +@import "SocialIcons"; \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/README.md b/src/assets/stylesheets/helpers/README.md new file mode 100644 index 0000000..b557d77 --- /dev/null +++ b/src/assets/stylesheets/helpers/README.md @@ -0,0 +1 @@ +All Sass tools and helpers we’ll use across the project: variables, mixins, functions, placeholders, etc. \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_brand-icons-mixins.scss b/src/assets/stylesheets/helpers/_brand-icons-mixins.scss new file mode 100644 index 0000000..f6c7427 --- /dev/null +++ b/src/assets/stylesheets/helpers/_brand-icons-mixins.scss @@ -0,0 +1,9 @@ +@mixin brand-icon-styles() { + align-items: center; + border-radius: 3px; + display: flex; + font-size: 0; + justify-content: center; + line-height: 0; + transition: background-color 0.25s ease-out; +} \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_content-layout.scss b/src/assets/stylesheets/helpers/_content-layout.scss new file mode 100644 index 0000000..a534e16 --- /dev/null +++ b/src/assets/stylesheets/helpers/_content-layout.scss @@ -0,0 +1,16 @@ +@mixin content-layout-width() { + max-width: 100%; + padding-left: $container-horizontal-padding-mobile; + padding-right: $container-horizontal-padding-mobile; + width: $container-max-width; + + @media (min-width: $breakpoint-md) { + padding-left: $container-horizontal-padding-tablet; + padding-right: $container-horizontal-padding-tablet; + } + + @media (min-width: $breakpoint-xl) { + padding-left: $container-horizontal-padding-desktop; + padding-right: $container-horizontal-padding-desktop; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_index.scss b/src/assets/stylesheets/helpers/_index.scss new file mode 100644 index 0000000..4dd4928 --- /dev/null +++ b/src/assets/stylesheets/helpers/_index.scss @@ -0,0 +1,7 @@ +@import 'variables'; +@import 'mixins'; +@import 'typography'; +@import 'placeholders'; + +@import 'brand-icons-mixins'; +@import 'content-layout'; \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_mixins.scss b/src/assets/stylesheets/helpers/_mixins.scss index b4aabde..350e81a 100644 --- a/src/assets/stylesheets/helpers/_mixins.scss +++ b/src/assets/stylesheets/helpers/_mixins.scss @@ -25,7 +25,7 @@ color: $input-color; } &:focus { - border-color: $primary-color; + border-color: $poa-purple; color: $input-color; } } @@ -58,11 +58,49 @@ // #avoid text selection @mixin not-selectable-text() { -moz-user-select: none; - /* Firefox all */ -ms-user-select: none; - /* IE 10+ */ -webkit-user-select: none; - /* Chrome all / Safari all */ user-select: none; - /* Likely future */ -} \ No newline at end of file +} + +// use for retina background images @1x / @2x / @3x +@mixin image-retina($filename, $extension) { + + background-image: url($filename + '.' + $extension); + + @media (-webkit-min-device-pixel-ratio: 2), + (-moz-min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + & { + background-image: url($filename + '@2x.' + $extension); + } + } + + @media (-webkit-min-device-pixel-ratio: 3), + (-moz-min-device-pixel-ratio: 3), + (min-resolution: 288dpi), + (min-resolution: 3dppx) { + & { + background-image: url($filename + '@3x.' + $extension); + } + } + +} + +@mixin aspect-ratio($width, $height) { + position: relative; + &:before { + content: ""; + display: block; + padding-top: ($height / $width) * 100%; + width: 100%; + } + > .content-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + } +} diff --git a/src/assets/stylesheets/helpers/_placeholders.scss b/src/assets/stylesheets/helpers/_placeholders.scss index 9200a64..5310373 100644 --- a/src/assets/stylesheets/helpers/_placeholders.scss +++ b/src/assets/stylesheets/helpers/_placeholders.scss @@ -17,7 +17,7 @@ padding: $desktop-indent; transition: 0.15s box-shadow; - @media screen and (max-width: $tablet-width) { + @media screen and (max-width: $breakpoint-md) { margin-bottom: $tablet-indent; padding: $tablet-indent; } @@ -41,10 +41,10 @@ color: $input-color; } &:focus { - border-color: $primary-color; + border-color: $poa-purple; color: $input-color; .sokol & { - border-color: $primary-color-sokol; + border-color: $sokol-cyan; } } } diff --git a/src/assets/stylesheets/helpers/_typography.scss b/src/assets/stylesheets/helpers/_typography.scss new file mode 100644 index 0000000..f92a67e --- /dev/null +++ b/src/assets/stylesheets/helpers/_typography.scss @@ -0,0 +1,31 @@ +.text-light { + font-weight: 300; +} + +.text-normal { + font-weight: 400; +} + +.text-bold { + font-weight: 700; +} + +.text-semibold { + font-weight: 600; +} + +.text-italic { + font-style: italic; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_variables.scss b/src/assets/stylesheets/helpers/_variables.scss new file mode 100644 index 0000000..ba2967b --- /dev/null +++ b/src/assets/stylesheets/helpers/_variables.scss @@ -0,0 +1,69 @@ +$base-images-path: '../images'; + +// brand colors +$poa-purple: #5c34a2; +$poa-purple-darker: #45277a; +$poa-freeze-color: #50bbda; +$poa-danger-color: #f21b57; +$poa-success-color: #60db97; + +$sokol-cyan: #6ac9b9; +$sokol-cyan-sarker: #41b19e; +$sokol-freeze-color: #50bbda; +$sokol-danger-color: #f24c67; +$sokol-success-color: #6ac9b9; + +$xdai-orange: #fec042; +$xdai-gray: #f2f6f8; + +// colors +$gray-text-color: #333; + +// typography +$base-text-color: #000; +$base-font-size: 14px; + +// borders +$base-border-color: #e4e4e4; + +// layout +$container-max-width: 1000px; +$container-horizontal-padding-desktop: 20px; +$container-horizontal-padding-tablet: 20px; +$container-horizontal-padding-mobile: 10px; + +// widths +$mobile-width: 767px; // TODO: Delete this when possible... + +$breakpoint-xs: 320px; +$breakpoint-sm: 480px; +$breakpoint-md: 768px; +$breakpoint-lg: 992px; +$breakpoint-xl: 1024px; +$breakpoint-xxl: 1280px; +$breakpoint-xxxl: 1366px; + +// header +$header-links-container-height: 70px; +$header-height_mobile: 70px; + +// search +$search-container-height: 50px; + +// mobile menu +$header-mobile-menu-container-height: 220px; + +// footer +$footer-height: 60px; +$footer-height_desktop: 66px; +$footer-height_mobile: 132px; + +// misc +$desktop-indent: 30px; +$tablet-indent: 15px; +$mobile-indent: 10px; + +// forms +$input-height: 40px; +$input-color: #202d3c; + diff --git a/src/assets/stylesheets/helpers/_vars.scss b/src/assets/stylesheets/helpers/_vars.scss deleted file mode 100644 index f04ef6a..0000000 --- a/src/assets/stylesheets/helpers/_vars.scss +++ /dev/null @@ -1,49 +0,0 @@ -$base-images-path: '../assets/images'; - -// colors -$primary-color: #5c34a2; -$primary-color-darker: #45277a; -$primary-color-sokol: #6ac9b9; -$primary-color-darker-sokol: #41b19e; -$danger-color: #f21b57; -$freeze-color: #50bbda; -$freeze-color-sokol: #50bbda; -$danger-color-sokol: #f24c67; -$success-color: #60db97; -$success-color-sokol: #6ac9b9; -$gray-text-color: #333; - -// borders -$base-border-color: #e4e4e4; - -// widths -$container-width: 960px; -$container-responsive-width: 980px; -$tablet-width: 768px; -$mobile-width: 767px; -$small-mobile-width: 360px; - -// header -$header-links-container-height: 70px; -$header-height_mobile: 70px; - -// search -$search-container-height: 50px; - -// mobile menu -$header-mobile-menu-container-height: 220px; - -// footer -$footer-height_desktop: 66px; -$footer-height_mobile: 132px; - -// misc -$desktop-indent: 30px; -$tablet-indent: 15px; -$mobile-indent: 10px; - -// forms -$input-height: 40px; -$input-color: #202d3c; - -$footer-height: 60px; diff --git a/src/assets/stylesheets/index.css b/src/assets/stylesheets/index.css new file mode 100644 index 0000000..1eb4e83 --- /dev/null +++ b/src/assets/stylesheets/index.css @@ -0,0 +1 @@ +@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,600,700");.text-light{font-weight:300}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-semibold{font-weight:600}.text-italic{font-style:italic}.text-left{text-align:left}.text-right{text-align:right}.text-center{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:30px;transition:0.15s box-shadow}@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}.sokol input:focus,.sokol textarea:focus,.sokol select:focus{border-color:#6ac9b9}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}*{box-sizing:border-box}/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.hidden{display:none}.display-block{display:block}.display-inline{display:inline}.background-blur{animation-duration:0.25s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:sw-ModalAnimation_in;animation-timing-function:linear}@keyframes sw-ModalAnimation_in{0%{filter:blur(0)}100%{filter:blur(2px)}}body{-webkit-font-smoothing:antialiased;color:#000;font-family:"Nunito", sans-serif;font-size:14px}.sw-Footer{align-items:center;background-color:#5c34a2;color:#fff;display:flex;justify-content:center;min-height:60px;overflow:hidden;padding:16px 0;transition:background-color 0.25s ease-out;width:100%}.sw-Footer.sw-Footer-core{background-color:#5c34a2}.sw-Footer.sw-Footer-sokol{background-color:#6ac9b9}.sw-Footer.sw-Footer-dai{background-color:#f2f6f8}.sw-Footer_Content{max-width:100%;padding-left:10px;padding-right:10px;width:1000px;align-items:center;display:flex;flex-direction:column;justify-content:center}@media (min-width: 768px){.sw-Footer_Content{padding-left:20px;padding-right:20px}}@media (min-width: 1024px){.sw-Footer_Content{padding-left:20px;padding-right:20px}}@media (min-width: 768px){.sw-Footer_Content{flex-direction:row;justify-content:space-between}}.sw-Footer_Text{color:#fff;flex-grow:1;font-size:11px;font-weight:300;line-height:1.2;margin:0;padding:15px 0 0 0;text-align:center}@media (min-width: 768px){.sw-Footer_Text{padding-top:0}}.sw-Footer-dai .sw-Footer_Text{color:#333}.sw-IconGithub{align-items:center;border-radius:3px;display:flex;font-size:0;justify-content:center;line-height:0;transition:background-color 0.25s ease-out}.ft-SocialIcons .sw-IconGithub{margin-right:10px}.sw-IconPOA{align-items:center;border-radius:3px;display:flex;font-size:0;justify-content:center;line-height:0;transition:background-color 0.25s ease-out}.sw-IconTelegram{align-items:center;border-radius:3px;display:flex;font-size:0;justify-content:center;line-height:0;transition:background-color 0.25s ease-out}.ft-SocialIcons .sw-IconTelegram{margin-right:10px}.sw-IconTwitter{align-items:center;border-radius:3px;display:flex;font-size:0;justify-content:center;line-height:0;transition:background-color 0.25s ease-out}.ft-SocialIcons .sw-IconTwitter{margin-right:10px}.sw-LogoDai{display:block;text-decoration:none}.sw-Header .sw-LogoDai{height:58px;width:167px}.sw-Footer .sw-LogoDai{width:120px}.sw-LogoDai_Image{display:block;height:100%;width:100%}.sw-LogoPOA{display:block;text-decoration:none}.sw-Header .sw-LogoPOA{height:26px;width:167px}.sw-Footer .sw-LogoPOA{width:130px}.sw-LogoPOA_Image{display:block;height:100%;width:100%}.sw-LogoSokol{display:block;text-decoration:none}.sw-Header .sw-LogoSokol{height:30px;width:178px}.sw-Footer .sw-LogoSokol{height:26px}.sw-LogoSokol_Image{display:block;height:100%;width:100%}.ft-SocialIcons{align-items:center;display:flex;justify-content:space-between;padding-top:15px}@media (min-width: 768px){.ft-SocialIcons{padding-top:0}}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;position:relative;width:100%}@media screen and (max-width: 768px){body{padding-bottom:132px}}@media screen and (max-width: 767px){body{padding-bottom:132px}}a{color:#5c34a2;text-decoration:none}a:hover{text-decoration:underline}a .sokol{color:#6ac9b9}hr{display:block;width:100%;height:1px;margin:10px 0 30px;border:0;background-color:#e4e4e4}.center{text-align:center}.left{float:left;width:48%}.right{float:right;width:48%}@media screen and (max-width: 767px){.left,.right{float:none;width:100%}}.hidden{overflow:hidden}.display-none{display:none}.container{width:1000px;margin:0 auto;box-sizing:border-box}@media screen and (max-width: 1000px){.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: 767px){.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-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-freeze{background-color:#50bbda;box-shadow:0px 5px 10px 0 rgba(80,187,218,0.3)}.btn.btn-freeze:hover{background-color:#2ba8cc}.sokol .btn.btn-primary{background-color:#6ac9b9;box-shadow:0px 5px 10px 0 rgba(106,201,185,0.3)}.sokol .btn.btn-primary:hover{background-color:#45bba7}.sokol .btn.btn-success{background-color:#6ac9b9;box-shadow:0px 5px 10px 0 rgba(96,219,151,0.3)}.sokol .btn.btn-success:hover{background-color:#45bba7}.sokol .btn.btn-danger{background-color:#f24c67;box-shadow:0px 5px 10px 0 rgba(242,76,103,0.33)}.sokol .btn.btn-danger:hover{background-color:#ef1c3f}.sokol .btn.btn-freeze{background-color:#50bbda;box-shadow:0px 5px 10px 0 rgba(80,187,218,0.3)}.sokol .btn.btn-freeze:hover{background-color:#2ba8cc}.btn.btn-new{background-image:url("../images/icons/icon-add.svg");background-size:14px 14px;padding-right:45px}.btn.btn-load-more{background-image:url("../images/icons/icon-load-more.svg");border-radius:5px;border:2px solid #5c34a2;font-size:17px;font-weight:400;background-size:14px 14px;padding-right:45px}.sokol .btn.btn-load-more{background-image:url("../images/icons/icon-load-more-sokol.svg");border-color:#6ac9b9}.btn.btn-transparent{color:#5c34a2;background-color:transparent}.btn.btn-transparent:hover{opacity:0.8}.sokol .btn.btn-transparent{color:#6ac9b9}.btn[disabled],.sokol .btn[disabled],.btn.disabled,.sokol .btn.disabled{color:#333333;cursor:default;background-color:#f0f0f0;box-shadow:none}.btn[disabled]:hover,.sokol .btn[disabled]:hover,.btn.disabled:hover,.sokol .btn.disabled:hover{background-color:#f0f0f0}.btn.btn-finalize{background-image:url("../images/icons/icon-finalize-white.svg");background-size:14px 14px;padding-right:45px}.btn.btn-finalize[disabled],.btn.btn-finalize.disabled{background-image:url("../images/icons/icon-finalize-black.svg")}.btn.no-shadow{box-shadow:none}.btn.text-lowercase{text-transform:lowercase}.btn.text-uppercase{text-transform:uppercase}.btn.text-capitalize{text-transform:capitalize}label{color:#333;display:inline-block;font-size:13px;line-height:1.2;margin-bottom:15px}input:focus,textarea:focus{border-color:#fff}input[type='radio'],textarea[type='radio']{display:none}textarea{width:100%;padding-top:10px;padding-bottom:10px;height:70px;resize:none}select{appearance:none;background-image:url("../images/select.png");background-position:right 13px center;background-repeat:no-repeat;padding-right:30px}@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: 1000px){button.load-more{margin-bottom:80px}}@media screen and (max-width: 768px){button.load-more{margin-top:80px}}.radio-button{position:relative}.radio-button-label{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;border-radius:3px;border:1px solid #e4e4e4;color:#333;cursor:pointer;font-size:14px;font-weight:400;line-height:50px;margin:0;outline:none;padding:0 15px;text-decoration:none;text-transform:capitalize;text-align:center;transition:0.25s background-color;position:relative;z-index:1}.radio-button input[type='radio']{height:100%;position:absolute;visibility:hidden;width:100%;z-index:12}input[type='radio']:checked+.radio-button-label{background-color:#5c34a2;border-color:#5c34a2;box-shadow:0px 5px 10px 0 rgba(92,52,162,0.3);color:#fff}.sokol input[type='radio']:checked+.radio-button-label{background-color:#6ac9b9;border-color:#6ac9b9;box-shadow:0px 5px 10px 0 rgba(106,201,185,0.3)}.keys-radio-button-tr{display:flex;margin-bottom:30px}@media screen and (max-width: 768px){.keys-radio-button-tr{flex-direction:column}}.keys-radio-button-td{min-width:30%;margin-right:5%}.keys-radio-button-td:last-child{margin-right:0}.keys-radio-button-td .radio-button-label{display:flex;justify-content:center}@media screen and (max-width: 768px){.keys-radio-button-td{margin-bottom:15px;margin-right:0;min-width:100%}}.form-el{margin-bottom:30px}.hint{color:#777;font-size:13px;font-weight:400;line-height:1.38;padding-top:12px;margin:0;word-break:break-word}.hint a{color:#5c34a2}.sokol .hint a{color:#6ac9b9}.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("../images/logos/logo-poa.svg");background-repeat:no-repeat;background-size:contain;display:block;height:18px;left:0;order:0;width:139px}.footer-logo.sokol{background-image:url("../images/logos/logo-sokol.svg");width:144px}.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: 767px){.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: 767px){.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: 767px){.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: 767px){.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: 767px){.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("../images/icons/icon-all.svg")}.header .link-icon-active{background-image:url("../images/icons/icon-active.svg")}.header .link-icon-to-finalize{background-image:url("../images/icons/icon-to-finalize.svg")}.header.sokol .link-icon-all{background-image:url("../images/icons/icon-all-sokol.svg")}.header.sokol .link-icon-active{background-image:url("../images/icons/icon-active-sokol.svg")}.header.sokol .link-icon-to-finalize{background-image:url("../images/icons/icon-to-finalize-sokol.svg")}.header .mobile-menu{display:none}@media screen and (max-width: 767px){.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: 767px){.header .header-mobile-menu-container{background-color:#45277a;height:220px}}@media screen and (max-width: 767px){.header.sokol .header-mobile-menu-container{background-color:#41b19e}}.header .Select{margin-left:25px}@media screen and (max-width: 767px){.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}.header.sokol .btn.btn-new-ballot{background-color:#fff;background-image:url("../images/icons/icon-add-sokol.svg");color:#6ac9b9}.header.sokol .btn.btn-new-ballot:hover{opacity:0.9}.select-network-id{background:#fff;width:40px}.info-container{background-color:#f8f8f8;margin-bottom:30px;margin-left:-30px;margin-right:-30px;padding-bottom:30px;padding-left:30px;padding-right:30px;padding-top:30px}@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 2px;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-word}.ballots .info:last-child{margin-bottom:0}.ballots .info-minimum{background-image:url("../images/icons/icon-min.svg");background-size:18px 18px}.ballots .info-details{background-image:url("../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}.sokol .ballots .info-details .toggle-show{color:#6ac9b9}.new-form .info{padding:30px}.info-title{color:#333;font-size:16px;font-weight:400;margin-bottom:30px;padding-left:25px;position:relative}.info-title:before{background-image:url("../images/icons/icon-info.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:10px 18px;content:'';height:32px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:10px}.info-i{color:#777;font-size:14px;line-height:1.71;margin-bottom:20px;padding-left:25px;position:relative}.info-i:before{background-color:#333;border-radius:50%;content:'';height:6px;left:0;position:absolute;top:8px;width:6px}.app-container{padding-bottom:30px;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:fixed;right:0;top:290px;z-index:1234}@media screen and (max-width: 767px){.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: 767px){#root,.app-container{height:100%}.app-container{padding-left:10px;padding-right:10px}}@media screen and (max-width: 767px){.content{padding-top:120px}}.content.content-menu-open{padding-top:290px}.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("../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:40px}.main-title-container .main-title{font-size:24px;color:#333;line-height:38px}@media screen and (max-width: 767px){.main-title-container{-ms-flex-direction:column;flex-direction:column}.main-title-container .search-input{width:100%}}.new-form{display:flex;overflow:hidden;padding:0}@media screen and (max-width: 768px){.new-form{display:block}}.new-form-side{box-sizing:border-box;padding-bottom:30px;padding-top:30px}@media screen and (max-width: 768px){.new-form-side{width:100% !important}}.new-form-side_left{background-color:#f8f8f8;padding-top:0;width:30%}@media screen and (max-width: 768px){.new-form-side_left{margin-bottom:30px;padding-bottom:0}}.new-form-side_right{border-left:1px solid #e4e4e4;padding-left:30px;padding-right:30px;width:70%}@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: 767px){.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:#41b19e}@media screen and (max-width: 767px){.search-container{left:0;position:fixed;right:0;top:70px;z-index:123}}input.search-input{background-color:transparent;background-image:url("../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;display:block;font-size:14px;font-weight:400;height:30px;outline:none;padding-left:30px;width:100%}input.search-input,input.search-input:focus input.search-input:hover,input.search-input:active{color:#fff}.sokol input.search-input{background-image:url("../images/icons/icon-search-sokol.svg")}input.search-input::-webkit-input-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important}input.search-input:-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}input.search-input::-moz-placeholder{color:rgba(255,255,255,0.5) !important;font-size:14px !important;opacity:1}input.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("../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("../images/socials/git@2x.png");background-size:100% 100%}}.socials-i_telegram:before{background-image:url("../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("../images/socials/telegram@2x.png");background-size:100% 100%}}.socials-i_twitter:before{background-image:url("../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("../images/socials/tw@2x.png");background-size:100% 100%}}.socials-i_poa:before{background-image:url("../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("../images/socials/poa@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_github:before{background-image:url("../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("../images/socials/git-sokol@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_telegram:before{background-image:url("../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("../images/socials/telegram-sokol@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_twitter:before{background-image:url("../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("../images/socials/tw-sokol@2x.png");background-size:100% 100%}}.sokol .socials .socials-i_poa:before{background-image:url("../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("../images/socials/poa-sokol@2x.png");background-size:100% 100%}}.vote-scale{background-color:#f0f0f0;border-radius:5px;clear:left;height:10px;margin-top:34px;overflow:hidden}.vote-scale-not-finalized{background-color:#ffffff}.vote-scale--fill{height:100%;border-radius:3px}.vote-scale--fill_no{background-color:#f21b57}.sokol .vote-scale--fill_no{background-color:#f24c67}.vote-scale--fill_yes{background-color:#60db97}.sokol .vote-scale--fill_yes{background-color:#6ac9b9}.vote-scale--fill_send{background-color:#60db97}.sokol .vote-scale--fill_send{background-color:#6ac9b9}.vote-scale--fill_burn{background-color:#f21b57}.sokol .vote-scale--fill_burn{background-color:#f24c67}.vote-scale--fill_freeze{background-color:#50bbda}.sokol .vote-scale--fill_freeze{background-color:#50bbda}.vote-scale--container{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:#333;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{background-color:#fff;border-bottom:1px solid #e4e4e4;padding:20px 30px 10px}.ballot-types-i{color:#333;cursor:pointer;font-size:16px;font-weight:400;margin-bottom:10px;position:relative;line-height:30px}.ballot-types-i:before{background-color:#5c34a2;border-bottom-right-radius:5px;border-top-right-radius:5px;content:'';height:30px;left:-30px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);width:4px}.sokol .ballot-types-i:before{background-color:#6ac9b9}.ballot-types-i_active{color:#5c34a2}.ballot-types-i_active:before{opacity:1}.sokol .ballot-types-i_active{color:#6ac9b9}.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: 767px){.ballots .title{margin-bottom:10px}}.ballots-about{margin-top:-8px}.ballots-i{background-color:#fff}.ballots-i-scale{border-top:1px solid #e4e4e4;display:flex;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: 767px){.ballots-i-scale{margin-top:10px;padding:10px 0 0 0}}.ballots-i-scale-column{display:flex;flex-grow:1;justify-content:space-between;margin-right:40px}@media screen and (max-width: 768px){.ballots-i-scale-column{margin-bottom:30px;margin-right:0;overflow:hidden;width:100%}}.ballots-i-scale-column:last-child{margin-right:0}@media screen and (max-width: 768px){.ballots-i-scale-column.reverse-responsive{flex-direction:row-reverse}}.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: 767px){.ballots-i--vote-label{margin-bottom:25px}}.ballots-i--vote-label-right{margin-left:auto !important}.ballots-i--vote_btn{line-height:44px;min-width:55px;text-transform:capitalize}.ballots-i--vote_btn.xl{min-width:78px}.ballots-i--vote_btn.m-r-20{margin-right:20px}.ballots-i--vote_btn.m-l-20{margin-left:20px}@media screen and (max-width: 768px){.ballots-i--vote_btn.m-r-20,.ballots-i--vote_btn.m-l-20{margin-left:0;margin-right:20px}}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}.sokol .color-primary{color:#6ac9b9}.color-danger{color:#f21b57}.sokol .color-danger{color:#f24c67}.color-success{color:#60db97}.sokol .color-success{color:#6ac9b9}@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 .ballots-about-td-value{padding-right:12px}.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_receiver{width:45%;word-break:break-all}.ballots-about-i_funds_amount{width:23%;word-break:break-all}.ballots-about-i_proposed-min-threshold{width:30%;word-break:break-all}.ballots-about-i_contract-type{width:25%;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}.ballots-about-i_action .ballots-about-td.ballots-about-td-value,.ballots-about-i_type .ballots-about-td.ballots-about-td-value{text-transform:capitalize}@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: 767px){.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: 767px){.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: 767px){.ballots-footer-finalize{width:100%;margin-right:0;margin-top:10px;text-align:center}} diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss new file mode 100644 index 0000000..a5b4410 --- /dev/null +++ b/src/assets/stylesheets/index.scss @@ -0,0 +1,33 @@ +@import 'helpers/index'; +@import 'vendors/index'; +@import 'base/index'; +@import 'layout/index'; +@import 'pages/index'; +@import 'components/index'; + +@import 'application/base'; +@import 'application/buttons'; +@import 'application/controls'; +@import 'application/footer'; +@import 'application/header'; +@import 'application/info'; +@import 'application/layout'; +@import 'application/loading'; +@import 'application/main-title'; +@import 'application/new'; +@import 'application/search'; +@import 'application/settings'; +@import 'application/socials'; +@import 'application/vote-scale'; + +@import 'application/select/select'; +@import 'application/select/control'; +@import 'application/select/menu'; +@import 'application/select/multi'; +@import 'application/select/spinner'; + +@import 'application/ballot-types'; +@import 'application/ballots/placeholders'; +@import 'application/ballots/base'; +@import 'application/ballots/about'; +@import 'application/ballots/footer'; diff --git a/src/assets/stylesheets/layout/README.md b/src/assets/stylesheets/layout/README.md new file mode 100644 index 0000000..75bded8 --- /dev/null +++ b/src/assets/stylesheets/layout/README.md @@ -0,0 +1 @@ +Some styles for the main sections of the layout (header, footer, and so on). It can also contain the _grid file for the grid system used to build the layout. \ No newline at end of file diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss new file mode 100644 index 0000000..86872e3 --- /dev/null +++ b/src/assets/stylesheets/layout/_base.scss @@ -0,0 +1,13 @@ +// html, +// body, +// #root, +// html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown), +// body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { +// // swal2-shown above are for when sweet alert is showing +// height: 100%; +// } + +// #root { +// display: flex; +// overflow: auto; +// } \ No newline at end of file diff --git a/src/assets/stylesheets/layout/_index.scss b/src/assets/stylesheets/layout/_index.scss new file mode 100644 index 0000000..08ec07c --- /dev/null +++ b/src/assets/stylesheets/layout/_index.scss @@ -0,0 +1 @@ +@import "base"; \ No newline at end of file diff --git a/src/assets/stylesheets/pages/README.md b/src/assets/stylesheets/pages/README.md new file mode 100644 index 0000000..40687b4 --- /dev/null +++ b/src/assets/stylesheets/pages/README.md @@ -0,0 +1 @@ +Page-specific styles, For example: for the home page you can have a _home.scss. \ No newline at end of file diff --git a/src/assets/stylesheets/pages/_index.scss b/src/assets/stylesheets/pages/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/stylesheets/vendors/README.md b/src/assets/stylesheets/vendors/README.md new file mode 100644 index 0000000..a5737f2 --- /dev/null +++ b/src/assets/stylesheets/vendors/README.md @@ -0,0 +1 @@ +Contains all the CSS files from external libraries and frameworks: Bootstrap, jQuery, etc. \ No newline at end of file diff --git a/src/assets/stylesheets/vendors/_index.scss b/src/assets/stylesheets/vendors/_index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx deleted file mode 100644 index 1456d23..0000000 --- a/src/components/Footer.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' -import moment from 'moment' -import { Link } from 'react-router-dom' -import Socials from './Socials.jsx' -import { constants } from '../utils/constants' - -export const Footer = ({ netId }) => { - const footerClassName = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : '' - - return ( - - ) -} diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js new file mode 100644 index 0000000..98d8206 --- /dev/null +++ b/src/components/Footer/index.js @@ -0,0 +1,17 @@ +import React from 'react' +import moment from 'moment' +import { Logo } from '../Logo' +import { SocialIcons } from '../SocialIcons' +import { constants } from '../../utils/constants' + +export const Footer = ({ extraClassName = '', networkBranch = false }) => { + return ( + + ) +} diff --git a/src/components/IconGithub/index.js b/src/components/IconGithub/index.js new file mode 100644 index 0000000..eeceba4 --- /dev/null +++ b/src/components/IconGithub/index.js @@ -0,0 +1,39 @@ +import React from 'react' + +export const IconGithub = ({ + backgroundColor = '#fff', + color = '#000', + height = 30, + iconHeight = 16, + iconWidth = 16, + text = '', + url = '', + width = 30 +}) => { + return ( + + + + + + {text} + + + ) +} diff --git a/src/components/IconPOA/index.js b/src/components/IconPOA/index.js new file mode 100644 index 0000000..862af53 --- /dev/null +++ b/src/components/IconPOA/index.js @@ -0,0 +1,37 @@ +import React from 'react' + +export const IconPOA = ({ + backgroundColor = '#fff', + color = '#000', + height = 30, + iconHeight = 8, + iconWidth = 18, + text = '', + url = '', + width = 30 +}) => { + return ( + + + + + + + + {text} + + + ) +} diff --git a/src/components/IconTelegram/index.js b/src/components/IconTelegram/index.js new file mode 100644 index 0000000..5502177 --- /dev/null +++ b/src/components/IconTelegram/index.js @@ -0,0 +1,42 @@ +import React from 'react' + +export const IconTelegram = ({ + backgroundColor = '#fff', + color = '#000', + height = 30, + iconHeight = 16, + iconWidth = 16, + text = '', + url = '', + width = 30 +}) => { + return ( + + + + + + {text} + + + ) +} diff --git a/src/components/IconTwitter/index.js b/src/components/IconTwitter/index.js new file mode 100644 index 0000000..59a9507 --- /dev/null +++ b/src/components/IconTwitter/index.js @@ -0,0 +1,39 @@ +import React from 'react' + +export const IconTwitter = ({ + backgroundColor = '#fff', + color = '#000', + height = 30, + iconHeight = 16, + iconWidth = 16, + text = '', + url = '', + width = 30 +}) => { + return ( + + + + + + {text} + + + ) +} diff --git a/src/components/Logo/index.js b/src/components/Logo/index.js new file mode 100644 index 0000000..ffcaaba --- /dev/null +++ b/src/components/Logo/index.js @@ -0,0 +1,17 @@ +import React from 'react' +import { LogoPOA } from '../LogoPOA' +import { LogoSokol } from '../LogoSokol' +import { LogoDai } from '../LogoDai' + +export const Logo = ({ href = null, extraClass = '', networkBranch = '' }) => { + switch (networkBranch) { + case 'sokol': + return + case 'dai': + case 'dai-test': + return + case 'poa': + default: + return + } +} diff --git a/src/components/LogoDai/index.js b/src/components/LogoDai/index.js new file mode 100644 index 0000000..47f16fc --- /dev/null +++ b/src/components/LogoDai/index.js @@ -0,0 +1,10 @@ +import React from 'react' +import logoSokol from './logo.svg' + +export const LogoDai = ({ href = null, extraClass = '' }) => { + return ( + + + + ) +} diff --git a/src/components/LogoDai/logo.svg b/src/components/LogoDai/logo.svg new file mode 100644 index 0000000..368140e --- /dev/null +++ b/src/components/LogoDai/logo.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + Governance App + + diff --git a/src/components/LogoPOA/index.js b/src/components/LogoPOA/index.js new file mode 100644 index 0000000..d9b23c3 --- /dev/null +++ b/src/components/LogoPOA/index.js @@ -0,0 +1,10 @@ +import React from 'react' +import logoPOA from './logo.svg' + +export const LogoPOA = ({ href = null, extraClass = '' }) => { + return ( + + + + ) +} diff --git a/src/components/LogoPOA/logo.svg b/src/components/LogoPOA/logo.svg new file mode 100644 index 0000000..54ab90d --- /dev/null +++ b/src/components/LogoPOA/logo.svg @@ -0,0 +1,32 @@ + + + + + + Governance App + + diff --git a/src/components/LogoSokol/index.js b/src/components/LogoSokol/index.js new file mode 100644 index 0000000..8e40ef0 --- /dev/null +++ b/src/components/LogoSokol/index.js @@ -0,0 +1,10 @@ +import React from 'react' +import logoSokol from './logo.svg' + +export const LogoSokol = ({ href = null, extraClass = '' }) => { + return ( + + + + ) +} diff --git a/src/components/LogoSokol/logo.svg b/src/components/LogoSokol/logo.svg new file mode 100644 index 0000000..3fb1183 --- /dev/null +++ b/src/components/LogoSokol/logo.svg @@ -0,0 +1,32 @@ + + + + + + Governance App + + diff --git a/src/components/SocialIcons/index.js b/src/components/SocialIcons/index.js new file mode 100644 index 0000000..e46f405 --- /dev/null +++ b/src/components/SocialIcons/index.js @@ -0,0 +1,54 @@ +import React from 'react' +import { IconGithub } from '../IconGithub' +import { IconPOA } from '../IconPOA' +import { IconTelegram } from '../IconTelegram' +import { IconTwitter } from '../IconTwitter' + +const getIconBackgroundColor = networkBranch => { + return ( + { + dai: '#e3e7e9', + poa: '#fff', + sokol: '#fff' + }[networkBranch] || '#fff' + ) +} + +const getIconColor = networkBranch => { + return ( + { + dai: '#333', + poa: '#5c34a2', + sokol: '#6ac9b9' + }[networkBranch] || '#5c34a2' + ) +} + +export const SocialIcons = ({ extraClass = '', networkBranch = '' }) => { + const backgroundColor = getIconBackgroundColor(networkBranch) + const iconColor = getIconColor(networkBranch) + + return ( + + + + + + + ) +} diff --git a/src/components/Socials.jsx b/src/components/Socials.jsx deleted file mode 100644 index b33e38a..0000000 --- a/src/components/Socials.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' - -let Socials = () => { - const socialItems = [ - { - icon: 'socials-i_twitter', - title: 'Twitter', - url: 'https://twitter.com/poanetwork' - }, - { - icon: 'socials-i_telegram', - title: 'Telegram', - url: 'https://t.me/oraclesnetwork' - }, - { - icon: 'socials-i_github', - title: 'GitHub', - url: 'https://github.com/poanetwork/' - } - ] - - return ( - - {socialItems.map((item, index) => ( - - {item.title} - - ))} - - ) -} - -export default Socials diff --git a/src/components/index.js b/src/components/index.js index 9bf1550..35a3389 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,5 +1,5 @@ export { Ballots } from './Ballots.jsx' -export { Footer } from './Footer.jsx' +export { Footer } from './Footer/' export { Header } from './Header.jsx' export { Loading } from './Loading.jsx' export { NewBallot } from './NewBallot.jsx'