(Add) base styles - Footer component - Logo component - Social icons component.
This commit is contained in:
Gabriel Rodriguez Alsina
parent
b4b34cf4a1
commit
f15db41e60
|
|
@ -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",
|
||||
|
|
|
|||
19
src/App.js
19
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 ? <Loading netId={contractsStore.netId} /> : ''
|
||||
|
||||
const search = this.shouldShowSearch() ? (
|
||||
|
|
@ -138,9 +139,7 @@ class App extends Component {
|
|||
<input type="search" className="search-input" onChange={this.onSearch} placeholder="Search..." />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
) : null
|
||||
|
||||
const isTestnet = contractsStore.netId in constants.NETWORKS && constants.NETWORKS[contractsStore.netId].TESTNET
|
||||
|
||||
|
|
@ -172,7 +171,7 @@ class App extends Component {
|
|||
<Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender} />
|
||||
{/*<Route path={`${commonStore.rootPath}/settings`} render={this.onSettingsRender}/>*/}
|
||||
</div>
|
||||
<Footer netId={contractsStore.netId} />
|
||||
<Footer networkBranch={networkBranch} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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';
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
padding-top: $tablet-indent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
Holds what we might call the boilerplate stuff for the project: reset (or Normalize.css, or whatever), typography, etc.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import 'reset';
|
||||
@import 'normalize';
|
||||
|
||||
@import 'display';
|
||||
@import 'effects';
|
||||
@import 'typography';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
All kinds of specific modules like a slider, a loader, a widget, etc.
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.sw-IconGithub {
|
||||
@include brand-icon-styles();
|
||||
|
||||
.ft-SocialIcons & {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.sw-IconPOA {
|
||||
@include brand-icon-styles();
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.sw-IconTelegram {
|
||||
@include brand-icon-styles();
|
||||
|
||||
.ft-SocialIcons & {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.sw-IconTwitter {
|
||||
@include brand-icon-styles();
|
||||
|
||||
.ft-SocialIcons & {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
@ -0,0 +1 @@
|
|||
All Sass tools and helpers we’ll use across the project: variables, mixins, functions, placeholders, etc.
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'typography';
|
||||
@import 'placeholders';
|
||||
|
||||
@import 'brand-icons-mixins';
|
||||
@import 'content-layout';
|
||||
|
|
@ -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 */
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
@ -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;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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';
|
||||
|
|
@ -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.
|
||||
|
|
@ -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;
|
||||
// }
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import "base";
|
||||
|
|
@ -0,0 +1 @@
|
|||
Page-specific styles, For example: for the home page you can have a _home.scss.
|
||||
|
|
@ -0,0 +1 @@
|
|||
Contains all the CSS files from external libraries and frameworks: Bootstrap, jQuery, etc.
|
||||
|
|
@ -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 (
|
||||
<footer className={`footer ${footerClassName}`}>
|
||||
<div className="container">
|
||||
<Link to="/poa-dapps-voting" className={`footer-logo ${footerClassName}`} />
|
||||
<p className="footer-rights">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
||||
<Socials />
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<footer className={`sw-Footer ${extraClassName} ${networkBranch ? 'sw-Footer-' + networkBranch : ''}`}>
|
||||
<div className="sw-Footer_Content">
|
||||
<Logo networkBranch={networkBranch} href={constants.baseURL} />
|
||||
<p className="sw-Footer_Text">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
||||
<SocialIcons networkBranch={networkBranch} />
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<a
|
||||
className={`sw-IconGithub`}
|
||||
href={url}
|
||||
rel="noopener noreferrer"
|
||||
style={{ backgroundColor: backgroundColor, height: height, width: width }}
|
||||
target="_blank"
|
||||
title={text}
|
||||
>
|
||||
<svg
|
||||
className={`sw-IconGithub_SVG`}
|
||||
style={{ height: iconHeight, width: iconWidth }}
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill={color}
|
||||
fillRule="evenodd"
|
||||
d="M14.928 4.084a8.067 8.067 0 0 0-2.912-2.985A7.673 7.673 0 0 0 8-.001a7.67 7.67 0 0 0-4.016 1.1 8.06 8.06 0 0 0-2.912 2.985C.356 5.34-.001 6.712-.001 8.201c0 1.787.508 3.394 1.526 4.821 1.017 1.428 2.332 2.416 3.943 2.964.188.035.327.01.417-.075a.422.422 0 0 0 .135-.32l-.005-.577c-.003-.363-.005-.68-.005-.95l-.24.042a2.985 2.985 0 0 1-.578.038 4.418 4.418 0 0 1-.724-.075 1.6 1.6 0 0 1-.698-.32 1.359 1.359 0 0 1-.458-.657l-.105-.246a2.64 2.64 0 0 0-.328-.544c-.149-.2-.3-.335-.453-.406l-.073-.053a.78.78 0 0 1-.135-.129.572.572 0 0 1-.094-.15c-.021-.049-.004-.09.052-.122.056-.032.156-.048.302-.048l.209.032c.138.028.31.113.515.256.205.142.374.328.506.555.159.292.352.515.578.668.225.153.453.229.682.229.229 0 .427-.017.594-.053.167-.036.323-.089.469-.16.062-.477.232-.844.51-1.1a6.938 6.938 0 0 1-1.068-.193 4.188 4.188 0 0 1-.979-.416 2.828 2.828 0 0 1-.839-.716c-.222-.284-.404-.658-.547-1.121-.142-.463-.213-.997-.213-1.602 0-.862.274-1.595.823-2.2-.257-.648-.233-1.374.073-2.179.201-.064.5-.016.896.144.396.161.686.298.87.412.184.113.332.21.443.288a7.225 7.225 0 0 1 2-.278c.687 0 1.354.093 2.001.278l.395-.256a5.53 5.53 0 0 1 .959-.47c.368-.142.649-.182.844-.117.312.804.34 1.53.083 2.178.549.605.823 1.338.823 2.2 0 .605-.071 1.141-.213 1.607-.143.467-.327.84-.553 1.122a2.926 2.926 0 0 1-.843.71 4.194 4.194 0 0 1-.98.416c-.316.086-.672.15-1.068.193.362.32.542.826.542 1.516v2.253c0 .129.044.235.13.321.087.085.224.11.412.074 1.611-.548 2.926-1.536 3.943-2.963 1.018-1.427 1.526-3.035 1.526-4.822 0-1.488-.358-2.86-1.073-4.116z"
|
||||
/>
|
||||
</svg>
|
||||
<span style={{ fontSize: 0 }} className="sw-IconGithub_Text">
|
||||
{text}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<a
|
||||
className={`sw-IconPOA`}
|
||||
href={url}
|
||||
rel="noopener noreferrer"
|
||||
style={{ backgroundColor: backgroundColor, height: height, width: width }}
|
||||
target="_blank"
|
||||
title={text}
|
||||
>
|
||||
<svg
|
||||
className="sw-IconPOA_SVG"
|
||||
style={{ height: iconHeight, width: iconWidth }}
|
||||
viewBox="0 0 125 40"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g fill={color} fillRule="evenodd">
|
||||
<path d="M61.4 0C50.482 0 41.6 8.883 41.6 19.8c0 10.918 8.882 19.8 19.8 19.8 10.918 0 19.8-8.882 19.8-19.8C81.2 8.883 72.318 0 61.4 0M21.206 31.718h2.505c8.06 0 14.949-6.26 15.24-14.323C39.254 8.95 32.476 1.98 24.103 1.98H3.127C2.504 1.98 2 2.485 2 3.108v34.044c0 .622.504 1.128 1.127 1.128H18.88c.615 0 1.117-.494 1.127-1.11l.073-4.343a1.127 1.127 0 0 1 1.126-1.109M98.002 1.271l-21.295 34.65c-.388.745.16 1.629 1.014 1.632l17.47.067 25.129-.067c.852-.003 1.401-.887 1.013-1.632l-21.294-34.65c-.425-.815-1.612-.815-2.037 0" />
|
||||
</g>
|
||||
</svg>
|
||||
<span style={{ fontSize: 0 }} className="sw-IconPOA_Text">
|
||||
{text}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<a
|
||||
className={`sw-IconTelegram`}
|
||||
href={url}
|
||||
rel="noopener noreferrer"
|
||||
style={{ backgroundColor: backgroundColor, height: height, width: width }}
|
||||
target="_blank"
|
||||
title={text}
|
||||
>
|
||||
<svg
|
||||
className="sw-IconTelegram_SVG"
|
||||
style={{ height: iconHeight, width: iconWidth }}
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"
|
||||
fill={color}
|
||||
fillRule="evenodd"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="1.41421"
|
||||
/>
|
||||
</svg>
|
||||
<span style={{ fontSize: 0 }} className="sw-IconTelegram_Text">
|
||||
{text}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<a
|
||||
className={`sw-IconTwitter`}
|
||||
href={url}
|
||||
rel="noopener noreferrer"
|
||||
style={{ backgroundColor: backgroundColor, height: height, width: width }}
|
||||
target="_blank"
|
||||
title={text}
|
||||
>
|
||||
<svg
|
||||
className="sw-IconTwitter_SVG"
|
||||
style={{ height: iconHeight, width: iconWidth }}
|
||||
viewBox="0 0 16 12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15.086.222a6.236 6.236 0 0 1-1.955.735A3.089 3.089 0 0 0 10.885 0c-1.7 0-3.077 1.357-3.077 3.03 0 .237.027.469.079.69A8.781 8.781 0 0 1 1.545.554a2.974 2.974 0 0 0-.416 1.523c0 1.052.544 1.979 1.368 2.522a3.117 3.117 0 0 1-1.393-.381v.038c0 1.468 1.061 2.692 2.468 2.972a3.18 3.18 0 0 1-1.39.051 3.074 3.074 0 0 0 2.874 2.105 6.24 6.24 0 0 1-3.822 1.296c-.248 0-.493-.014-.734-.041A8.814 8.814 0 0 0 5.217 12c5.66 0 8.755-4.617 8.755-8.621l-.01-.393A6.153 6.153 0 0 0 15.5 1.42a6.246 6.246 0 0 1-1.767.477A3.048 3.048 0 0 0 15.086.222z"
|
||||
fillRule="evenodd"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
<span style={{ fontSize: 0 }} className="sw-IconTwitter_Text">
|
||||
{text}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 <LogoSokol href={href} extraClass={extraClass} />
|
||||
case 'dai':
|
||||
case 'dai-test':
|
||||
return <LogoDai href={href} extraClass={extraClass} />
|
||||
case 'poa':
|
||||
default:
|
||||
return <LogoPOA href={href} extraClass={extraClass} />
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import logoSokol from './logo.svg'
|
||||
|
||||
export const LogoDai = ({ href = null, extraClass = '' }) => {
|
||||
return (
|
||||
<a href={href} className={`sw-LogoDai ${extraClass}`}>
|
||||
<img className="sw-LogoDai_Image" src={logoSokol} alt="" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<svg
|
||||
height="52"
|
||||
width="172"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter
|
||||
id="a"
|
||||
width="44"
|
||||
height="52"
|
||||
x="0"
|
||||
y="0"
|
||||
filterUnits="userSpaceOnUse"
|
||||
>
|
||||
<feOffset
|
||||
dy="3"
|
||||
in="SourceAlpha"
|
||||
/>
|
||||
<feGaussianBlur
|
||||
result="blurOut"
|
||||
stdDeviation="2.449"
|
||||
/>
|
||||
<feFlood
|
||||
flood-color="#D2D5D7"
|
||||
result="floodOut"
|
||||
/>
|
||||
<feComposite
|
||||
in="floodOut"
|
||||
in2="blurOut"
|
||||
operator="atop"
|
||||
/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA
|
||||
slope=".5"
|
||||
type="linear"
|
||||
/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient
|
||||
id="b"
|
||||
x1="0%"
|
||||
x2="0%"
|
||||
y1="100%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#FFAD45"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#FFD342"
|
||||
/>
|
||||
</linearGradient>
|
||||
<style type="text/css">
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400');
|
||||
text {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
fill="#FFF"
|
||||
fill-rule="evenodd"
|
||||
d="M17.771 40.253c-3.368-2.101-9.884-6.163-10.841-6.762C5 32.154 5 30.021 5 30.021l.001-16.044S5 11.656 6.947 10.492l10.824-6.751c3.729-2.324 3.729-2.324 7.464.004l10.808 6.741c1.957 1.23 1.956 3.487 1.956 3.487v16.049s.001 2.235-1.956 3.485L25.232 40.25c-3.732 2.33-3.732 2.33-7.461.003z"
|
||||
filter="url(#a)"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
fill-rule="evenodd"
|
||||
d="M30.055 13.884l-6.233 8.128 6.229 8.122h-4.644L21.5 25.039l-3.907 5.095h-4.644l6.229-8.122-6.233-8.128h4.644l3.911 5.1 3.911-5.1h4.644z"
|
||||
/>
|
||||
<path
|
||||
fill="url(#b)"
|
||||
d="M30.055 13.884l-6.233 8.128 6.229 8.122h-4.644L21.5 25.039l-3.907 5.095h-4.644l6.229-8.122-6.233-8.128h4.644l3.911 5.1 3.911-5.1h4.644z"
|
||||
/>
|
||||
<text
|
||||
fill="#333"
|
||||
font-family="Nunito"
|
||||
font-size="14"
|
||||
font-weight="400"
|
||||
x="48"
|
||||
y="26"
|
||||
>Governance App</text>
|
||||
<path
|
||||
fill="#333"
|
||||
fill-rule="evenodd"
|
||||
d="M170 9a1 1 0 0 1 1 1v24a1 1 0 0 1-2 0V10a1 1 0 0 1 1-1z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import logoPOA from './logo.svg'
|
||||
|
||||
export const LogoPOA = ({ href = null, extraClass = '' }) => {
|
||||
return (
|
||||
<a href={href} className={`sw-LogoPOA ${extraClass}`}>
|
||||
<img className="sw-LogoPOA_Image" src={logoPOA} alt="" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<svg
|
||||
height="26"
|
||||
width="188"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400');
|
||||
text {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
d="M8.938 17.812h-.813v2.376h-.003l.003.015c0 .44-.364.797-.812.797h-6.5A.805.805 0 0 1 0 20.203l.003-.015H0V5.812h.003L0 5.797C0 5.357.364 5 .813 5h8.125c3.589 0 6.499 2.868 6.499 6.406s-2.91 6.406-6.499 6.406zM25.188 5c4.487 0 8.125 3.582 8.125 8s-3.638 8-8.125 8c-4.488 0-8.126-3.582-8.126-8s3.638-8 8.126-8zM52 20.493a.498.498 0 0 1-.503.494H33.064c-.022.003-.041.013-.064.013a.5.5 0 0 1-.5-.5c0-.109.042-.204.101-.286l-.009-.017 9.151-14.809h.02a.493.493 0 0 1 .965 0h.021L52 20.296l-.032.043c.017.05.032.1.032.154z"
|
||||
fill-rule="evenodd"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<text
|
||||
fill="#fff"
|
||||
font-family="Nunito"
|
||||
font-size="14"
|
||||
font-weight="300"
|
||||
x="63"
|
||||
y="17"
|
||||
>Governance App</text>
|
||||
<path
|
||||
d="M186 0a1 1 0 0 1 1 1v24a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1z"
|
||||
fill-rule="evenodd"
|
||||
fill="#60DB97"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import logoSokol from './logo.svg'
|
||||
|
||||
export const LogoSokol = ({ href = null, extraClass = '' }) => {
|
||||
return (
|
||||
<a href={href} className={`sw-LogoSokol ${extraClass}`}>
|
||||
<img className="sw-LogoSokol_Image" src={logoSokol} alt="" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<svg
|
||||
height="26"
|
||||
width="172"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400');
|
||||
text {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
fill="#FFF"
|
||||
fill-rule="evenodd"
|
||||
d="M36.528 20H24.272c-.167 0-.334-.028-.499-.068l.018.068h-5.287l-1.607-5.969H.969A.96.96 0 0 1 0 13.078l.003-.015H0V5.906C0 4.853.86 4 1.922 4l.016.002V4h30.275c1.061 0 2.153.855 2.437 1.91l3.285 12.18c.285 1.055-.345 1.91-1.407 1.91zM7.723 6.866H3.361l1.169 4.298h4.362L7.723 6.866zm7.209 0h-4.361l1.169 4.298h4.361l-1.169-4.298zm11.743 10.985h1.923l-.517-1.911h-1.922l.516 1.911zm5.201-10.985h-8.17l2.194 8.119h8.171l-2.195-8.119zm2.453 9.074h-1.922l.516 1.911h1.923l-.517-1.911zm-33.61.047v-.05h12.969v.003h1.557L16.342 20H1.938v-.002L1.922 20A1.914 1.914 0 0 1 0 18.094v-1.188h.005c0-.006-.005-.01-.005-.015 0-.439.308-.793.719-.904z"
|
||||
/>
|
||||
<text
|
||||
fill="#FFF"
|
||||
font-family="Nunito"
|
||||
font-size="14"
|
||||
font-weight="300"
|
||||
x="47"
|
||||
y="17"
|
||||
>Governance App</text>
|
||||
<path
|
||||
fill="#FFF"
|
||||
fill-rule="evenodd"
|
||||
d="M170 0a1 1 0 0 1 1 1v24a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -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 (
|
||||
<div className={`ft-SocialIcons ${extraClass}`}>
|
||||
<IconTwitter
|
||||
backgroundColor={backgroundColor}
|
||||
color={iconColor}
|
||||
text="POA Twitter"
|
||||
url="https://twitter.com/poanetwork"
|
||||
/>
|
||||
<IconTelegram
|
||||
backgroundColor={backgroundColor}
|
||||
color={iconColor}
|
||||
text="POA Telegram"
|
||||
url="https://t.me/oraclesnetwork"
|
||||
/>
|
||||
<IconGithub
|
||||
backgroundColor={backgroundColor}
|
||||
color={iconColor}
|
||||
text="POA Github"
|
||||
url="https://github.com/poanetwork"
|
||||
/>
|
||||
<IconPOA text="POA Network" url="'https://poa.network" backgroundColor={backgroundColor} color={iconColor} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className="socials">
|
||||
{socialItems.map((item, index) => (
|
||||
<a className={`socials-i ${item.icon}`} key={index} href={item.url}>
|
||||
{item.title}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Socials
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue