Merge pull request #192 from poanetwork/feature/#187-new-style-for-xdai-network
(Feature) New style for xDai network
This commit is contained in:
Gabriel Rodríguez Alsina
GitHub
commit
be66464c42
|
|
@ -71,7 +71,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",
|
||||
|
|
|
|||
151
src/App.js
151
src/App.js
|
|
@ -1,13 +1,13 @@
|
|||
//import DevTools from 'mobx-react-devtools'
|
||||
import './assets/App.css'
|
||||
import Loading from './Loading'
|
||||
import React, { Component } from 'react'
|
||||
import { Header, Ballots, NewBallot, Settings, Footer } from './components'
|
||||
import { Route } from 'react-router-dom'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
import swal from 'sweetalert2'
|
||||
import { messages } from './messages'
|
||||
import { constants } from './constants'
|
||||
import { Header, Ballots, NewBallot, Settings, Footer, Loading, BaseLoader, SearchBar, MainTitle } from './components'
|
||||
import { Route, Redirect } from 'react-router-dom'
|
||||
import { constants } from './utils/constants'
|
||||
import { getNetworkBranch } from './utils/utils'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
import { messages } from './utils/messages'
|
||||
|
||||
import './assets/stylesheets/index.css'
|
||||
|
||||
@inject('commonStore', 'contractsStore')
|
||||
@observer
|
||||
|
|
@ -15,45 +15,17 @@ class App extends Component {
|
|||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
const { commonStore } = this.props
|
||||
|
||||
this.state = {
|
||||
showMobileMenu: false,
|
||||
navigationData: [
|
||||
{
|
||||
icon: 'link-icon-all',
|
||||
title: 'All',
|
||||
url: commonStore.rootPath,
|
||||
class: ''
|
||||
},
|
||||
{
|
||||
icon: 'link-icon-active',
|
||||
title: 'Active',
|
||||
url: `${commonStore.rootPath}/active`,
|
||||
class: ''
|
||||
},
|
||||
{
|
||||
icon: 'link-icon-to-finalize',
|
||||
title: 'To Finalize',
|
||||
url: `${commonStore.rootPath}/tofinalize`,
|
||||
class: ''
|
||||
},
|
||||
{
|
||||
icon: 'link-icon-add',
|
||||
title: 'New Ballot',
|
||||
url: `${commonStore.rootPath}/new`,
|
||||
class: 'btn btn-new-ballot btn-success btn-new no-shadow text-capitalize'
|
||||
}
|
||||
// {
|
||||
// 'icon': '',
|
||||
// 'title': 'Settings',
|
||||
// 'url': `${ commonStore.rootPath }/settings`,
|
||||
// class: ''
|
||||
// }
|
||||
]
|
||||
showMobileMenu: false
|
||||
}
|
||||
}
|
||||
|
||||
getVotingNetworkBranch = () => {
|
||||
const { contractsStore } = this.props
|
||||
|
||||
return contractsStore.netId ? getNetworkBranch(contractsStore.netId) : null
|
||||
}
|
||||
|
||||
onBallotsRender = () => {
|
||||
return <Ballots isActiveFilter={false} />
|
||||
}
|
||||
|
|
@ -68,6 +40,7 @@ class App extends Component {
|
|||
|
||||
onNewBallotRender = () => {
|
||||
const { commonStore, contractsStore } = this.props
|
||||
|
||||
if (!contractsStore.web3Instance) {
|
||||
if (!commonStore.loading) {
|
||||
swal({
|
||||
|
|
@ -79,7 +52,7 @@ class App extends Component {
|
|||
}
|
||||
return null
|
||||
}
|
||||
return <NewBallot />
|
||||
return <NewBallot networkBranch={this.getVotingNetworkBranch()} />
|
||||
}
|
||||
|
||||
onSettingsRender = () => {
|
||||
|
|
@ -91,18 +64,11 @@ class App extends Component {
|
|||
commonStore.setSearchTerm(e.target.value.toLowerCase())
|
||||
}
|
||||
|
||||
shouldShowSearch = () => {
|
||||
hideSearch = () => {
|
||||
const { commonStore } = this.props
|
||||
const currentPath = this.props.location.pathname
|
||||
|
||||
let showSearch =
|
||||
currentPath === `${commonStore.rootPath}` ||
|
||||
currentPath === '/' ||
|
||||
currentPath === `${commonStore.rootPath}/` ||
|
||||
currentPath === `${commonStore.rootPath}/active` ||
|
||||
currentPath === `${commonStore.rootPath}/tofinalize`
|
||||
|
||||
return showSearch
|
||||
return currentPath === `${commonStore.rootPath}/new`
|
||||
}
|
||||
|
||||
toggleMobileMenu = () => {
|
||||
|
|
@ -110,17 +76,13 @@ class App extends Component {
|
|||
}
|
||||
|
||||
getTitle = () => {
|
||||
const currentPath = this.props.location.pathname
|
||||
let obj = constants.navigationData.find(element => element.url === this.props.location.pathname)
|
||||
|
||||
if (currentPath === `${this.state.navigationData[1].url}`) {
|
||||
return this.state.navigationData[1].title
|
||||
} else if (currentPath === `${this.state.navigationData[2].url}`) {
|
||||
return this.state.navigationData[2].title
|
||||
} else if (currentPath === `${this.state.navigationData[3].url}`) {
|
||||
return this.state.navigationData[3].title
|
||||
} else {
|
||||
return this.state.navigationData[0].title
|
||||
if (obj) {
|
||||
return obj.title
|
||||
}
|
||||
|
||||
return 'All'
|
||||
}
|
||||
|
||||
getNetIdClass() {
|
||||
|
|
@ -128,52 +90,55 @@ class App extends Component {
|
|||
return netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : ''
|
||||
}
|
||||
|
||||
isNewBallotPage() {
|
||||
return `${constants.rootPath}/new` === this.props.location.pathname
|
||||
}
|
||||
|
||||
render() {
|
||||
const { commonStore, contractsStore } = this.props
|
||||
const loading = commonStore.loading ? <Loading netId={contractsStore.netId} /> : ''
|
||||
const networkBranch = this.getVotingNetworkBranch()
|
||||
|
||||
const search = this.shouldShowSearch() ? (
|
||||
<div className={`search-container ${this.getNetIdClass()}`}>
|
||||
<div className="container">
|
||||
<input type="search" className="search-input" onChange={this.onSearch} placeholder="Search..." />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
|
||||
const isTestnet = contractsStore.netId in constants.NETWORKS && constants.NETWORKS[contractsStore.netId].TESTNET
|
||||
|
||||
return (
|
||||
<section className={`content ${this.state.showMobileMenu ? 'content-menu-open' : ''}`}>
|
||||
{loading}
|
||||
return networkBranch ? (
|
||||
<div
|
||||
className={`lo-App ${this.isNewBallotPage() ? 'lo-App-no-search-bar' : ''} ${
|
||||
this.state.showMobileMenu ? 'lo-App-menu-open' : ''
|
||||
}`}
|
||||
>
|
||||
{commonStore.loading ? <Loading networkBranch={networkBranch} /> : null}
|
||||
<Header
|
||||
baseRootPath={commonStore.rootPath}
|
||||
navigationData={this.state.navigationData}
|
||||
netId={contractsStore.netId}
|
||||
networkBranch={networkBranch}
|
||||
onMenuToggle={this.toggleMobileMenu}
|
||||
showMobileMenu={this.state.showMobileMenu}
|
||||
/>
|
||||
{search}
|
||||
<div
|
||||
className={`app-container ${this.state.showMobileMenu ? 'app-container-open-mobile-menu' : ''} ${
|
||||
isTestnet ? 'sokol' : ''
|
||||
{this.hideSearch() ? null : <SearchBar networkBranch={networkBranch} onSearch={this.onSearch} />}
|
||||
<MainTitle text={this.getTitle()} />
|
||||
<section
|
||||
className={`lo-App_Content lo-App_Content-${networkBranch} ${
|
||||
this.state.showMobileMenu ? 'lo-App_Content-mobile-menu-open' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="container">
|
||||
<div className={`main-title-container ${this.shouldShowSearch() ? '' : 'no-search-on-top'}`}>
|
||||
<span className="main-title">{this.getTitle()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Route exact path={`/`} render={this.onBallotsRender} />
|
||||
<Route
|
||||
exact
|
||||
path={`/`}
|
||||
render={props => (
|
||||
<Redirect
|
||||
to={{
|
||||
pathname: `${commonStore.rootPath}/`
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender} />
|
||||
<Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender} />
|
||||
<Route exact path={`${commonStore.rootPath}/tofinalize`} render={this.onToFinalizeBallotsRender} />
|
||||
<Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender} />
|
||||
{/*<Route path={`${commonStore.rootPath}/settings`} render={this.onSettingsRender}/>*/}
|
||||
</div>
|
||||
<Footer netId={contractsStore.netId} />
|
||||
</section>
|
||||
</section>
|
||||
<Footer baseRootPath={commonStore.rootPath} networkBranch={networkBranch} />
|
||||
</div>
|
||||
) : (
|
||||
<BaseLoader />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
import React from 'react'
|
||||
import { constants } from './constants'
|
||||
|
||||
const styles = netId => {
|
||||
const core = {
|
||||
backgroundColor: 'rgba(78,44,137, 0.9)'
|
||||
}
|
||||
const sokol = {
|
||||
backgroundColor: 'rgba(47, 109, 99, 0.8)'
|
||||
}
|
||||
|
||||
if (netId in constants.NETWORKS) {
|
||||
return constants.NETWORKS[netId].TESTNET ? sokol : core
|
||||
}
|
||||
|
||||
return core
|
||||
}
|
||||
const Loading = ({ netId }) => (
|
||||
<div className="loading-container" style={styles(netId)}>
|
||||
<div className="loading">
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
<div className="loading-i" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
export default Loading
|
||||
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';
|
||||
|
Before Width: | Height: | Size: 234 B After Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 743 B After Width: | Height: | Size: 743 B |
|
Before Width: | Height: | Size: 91 B After Width: | Height: | Size: 91 B |
|
Before Width: | Height: | Size: 111 B After Width: | Height: | Size: 111 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18">
|
||||
<path fill="#333" fill-rule="evenodd" d="M9 18H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v11h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 326 B After Width: | Height: | Size: 326 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
|
||||
<path fill="#333333" fill-rule="evenodd" d="M13.711 13.711a1.01 1.01 0 0 1-1.427 0l-1.97-1.97A6.444 6.444 0 0 1 6.5 13 6.5 6.5 0 1 1 13 6.5c0 1.43-.476 2.741-1.259 3.814l1.97 1.97a1.01 1.01 0 0 1 0 1.427zM6.5 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 326 B |
|
Before Width: | Height: | Size: 326 B After Width: | Height: | Size: 326 B |
Binary file not shown.
|
Before Width: | Height: | Size: 639 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path fill="#ffffff" fill-rule="evenodd" d="M17 18a1 1 0 0 1-1-1v-1H2v1a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm0-5H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h14V7zM4 8h1a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm4 0h6a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2zm9-4H1a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v1h14V1a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 448 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M17 18a1 1 0 0 1-1-1v-1H2v1a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm0-5H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h14V7zM4 8h1a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm4 0h6a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2zm9-4H1a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v1h14V1a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 448 B |
|
|
@ -1,11 +0,0 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
>
|
||||
<path
|
||||
fill="#6ac9b9"
|
||||
fill-rule="evenodd"
|
||||
d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 242 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 198 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17">
|
||||
<path fill="#ffffff" fill-rule="evenodd" d="M16 10.95V11H2v-.05a2.502 2.502 0 0 1 0-4.9V6h14v.05a2.502 2.502 0 0 1 0 4.9zM16 8H2v1h14V8zm0-3.05V5H2v-.05a2.502 2.502 0 0 1 0-4.9V0h14v.05a2.502 2.502 0 0 1 0 4.9zM16 2H2v1h14V2zM2 12.05V12h14v.05a2.502 2.502 0 0 1 0 4.9V17H2v-.05a2.502 2.502 0 0 1 0-4.9zM2 15h14v-1H2v1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 397 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M16 10.95V11H2v-.05a2.502 2.502 0 0 1 0-4.9V6h14v.05a2.502 2.502 0 0 1 0 4.9zM16 8H2v1h14V8zm0-3.05V5H2v-.05a2.502 2.502 0 0 1 0-4.9V0h14v.05a2.502 2.502 0 0 1 0 4.9zM16 2H2v1h14V2zM2 12.05V12h14v.05a2.502 2.502 0 0 1 0 4.9V17H2v-.05a2.502 2.502 0 0 1 0-4.9zM2 15h14v-1H2v1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 397 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#fff" fill-rule="evenodd" d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"/></svg>
|
||||
|
Before Width: | Height: | Size: 389 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#60DB97" fill-rule="evenodd" d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"/></svg>
|
||||
|
Before Width: | Height: | Size: 392 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17"><path fill="#fff" fill-rule="evenodd" d="M17 13.031h-5.528l1.203 1.208a1.04 1.04 0 0 1 0 1.466 1.03 1.03 0 0 1-1.461 0l-2.92-2.932a1.022 1.022 0 0 1-.272-.891 1 1 0 0 1 .274-.635l2.939-2.95a1.036 1.036 0 0 1 1.469 0 1.045 1.045 0 0 1 0 1.475L11.481 11H17a1 1 0 0 1 1 1v.031a1 1 0 0 1-1 1zM9.676 4.755l-2.912 2.92a1.027 1.027 0 0 1-1.455 0 1.034 1.034 0 0 1 0-1.46L6.519 5H1a1 1 0 0 1 0-2h5.51L5.28 1.765a1.04 1.04 0 0 1 0-1.469 1.032 1.032 0 0 1 1.464 0l2.93 2.939c.2.201.29.464.291.727.002.036.005.069.004.104-.002.019-.008.036-.01.054a1.02 1.02 0 0 1-.283.635z"/></svg>
|
||||
|
Before Width: | Height: | Size: 634 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17"><path fill="#60DB97" fill-rule="evenodd" d="M17 13.031h-5.528l1.203 1.208a1.04 1.04 0 0 1 0 1.466 1.03 1.03 0 0 1-1.461 0l-2.92-2.932a1.022 1.022 0 0 1-.272-.891 1 1 0 0 1 .274-.635l2.939-2.95a1.036 1.036 0 0 1 1.469 0 1.045 1.045 0 0 1 0 1.475L11.481 11H17a1 1 0 0 1 1 1v.031a1 1 0 0 1-1 1zM9.676 4.755l-2.912 2.92a1.027 1.027 0 0 1-1.455 0 1.034 1.034 0 0 1 0-1.46L6.519 5H1a1 1 0 0 1 0-2h5.51L5.28 1.765a1.04 1.04 0 0 1 0-1.469 1.032 1.032 0 0 1 1.464 0l2.93 2.939c.2.201.29.464.291.727.002.036.005.069.004.104-.002.019-.008.036-.01.054a1.02 1.02 0 0 1-.283.635z"/></svg>
|
||||
|
Before Width: | Height: | Size: 637 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18">
|
||||
<path fill="#333" fill-rule="evenodd" d="M15 15h-5a1 1 0 0 1-1-1v-3H2v6a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM9 2H2v7h7V2zm2 11h3V6h-3v7z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 259 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M15 15h-5a1 1 0 0 1-1-1v-3H2v6a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM9 2H2v7h7V2zm2 11h3V6h-3v7z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 259 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="18">
|
||||
<path fill="#6ac9b9" fill-rule="evenodd" d="M14 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 2 0v4.969h11V5H3.491l1.215 1.215a1.033 1.033 0 0 1-1.46 1.46L.325 4.754a1.013 1.013 0 0 1-.228-.35C.091 4.392.08 4.383.075 4.371a1.036 1.036 0 0 1 .221-1.136L3.235.296a1.038 1.038 0 1 1 1.469 1.469L3.469 3H14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 399 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="18">
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M14 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 2 0v4.969h11V5H3.491l1.215 1.215a1.033 1.033 0 0 1-1.46 1.46L.325 4.754a1.013 1.013 0 0 1-.228-.35C.091 4.392.08 4.383.075 4.371a1.036 1.036 0 0 1 .221-1.136L3.235.296a1.038 1.038 0 1 1 1.469 1.469L3.469 3H14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 399 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14"><path fill="#fff" fill-rule="evenodd" d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 229 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14"><path fill="#60DB97" fill-rule="evenodd" d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 232 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#fff" fill-rule="evenodd" d="M17 14a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V7a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm0 2h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 414 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#60DB97" fill-rule="evenodd" d="M17 14a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V7a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm0 2h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 417 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#fff" fill-rule="evenodd" d="M17 10h-1.101a6.918 6.918 0 0 1-1.31 3.175l.775.775a1 1 0 0 1-1.414 1.414l-.775-.775A6.918 6.918 0 0 1 10 15.899V17a1 1 0 0 1-2 0v-1.101a6.918 6.918 0 0 1-3.175-1.31l-.775.775a1 1 0 0 1-1.414-1.414l.775-.775A6.918 6.918 0 0 1 2.101 10H1a1 1 0 0 1 0-2h1.101a6.918 6.918 0 0 1 1.31-3.175l-.775-.775A.999.999 0 1 1 4.05 2.636l.775.775A6.918 6.918 0 0 1 8 2.101V1a1 1 0 0 1 2 0v1.101a6.918 6.918 0 0 1 3.175 1.31l.775-.775a1 1 0 0 1 1.414 1.414l-.775.775A6.918 6.918 0 0 1 15.899 8H17a1 1 0 0 1 0 2zM9 4a5 5 0 1 0 .001 10.001A5 5 0 0 0 9 4zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 715 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#60DB97" fill-rule="evenodd" d="M17 10h-1.101a6.918 6.918 0 0 1-1.31 3.175l.775.775a1 1 0 0 1-1.414 1.414l-.775-.775A6.918 6.918 0 0 1 10 15.899V17a1 1 0 0 1-2 0v-1.101a6.918 6.918 0 0 1-3.175-1.31l-.775.775a1 1 0 0 1-1.414-1.414l.775-.775A6.918 6.918 0 0 1 2.101 10H1a1 1 0 0 1 0-2h1.101a6.918 6.918 0 0 1 1.31-3.175l-.775-.775A.999.999 0 1 1 4.05 2.636l.775.775A6.918 6.918 0 0 1 8 2.101V1a1 1 0 0 1 2 0v1.101a6.918 6.918 0 0 1 3.175 1.31l.775-.775a1 1 0 0 1 1.414 1.414l-.775.775A6.918 6.918 0 0 1 15.899 8H17a1 1 0 0 1 0 2zM9 4a5 5 0 1 0 .001 10.001A5 5 0 0 0 9 4zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 718 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18">
|
||||
<path fill="#ffffff" fill-rule="evenodd" d="M15 15h-5a1 1 0 0 1-1-1v-3H2v6a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM9 2H2v7h7V2zm2 11h3V6h-3v7z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 262 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M15 15h-5a1 1 0 0 1-1-1v-3H2v6a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM9 2H2v7h7V2zm2 11h3V6h-3v7z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 262 B |
Binary file not shown.
|
Before Width: | Height: | Size: 373 B |
Binary file not shown.
|
Before Width: | Height: | Size: 675 B |
|
|
@ -1,42 +0,0 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="178px"
|
||||
height="26px"
|
||||
>
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
|
||||
text {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(255, 255, 255)"
|
||||
d="M8.938,17.812 L8.125,17.812 L8.125,20.188 L8.122,20.188 C8.122,20.193 8.125,20.198 8.125,20.203 C8.125,20.643 7.761,21.000 7.313,21.000 L0.813,21.000 C0.364,21.000 0.000,20.643 0.000,20.203 C0.000,20.198 0.003,20.193 0.003,20.188 L0.000,20.188 L0.000,5.812 L0.003,5.812 C0.003,5.807 0.000,5.802 0.000,5.797 C0.000,5.357 0.364,5.000 0.813,5.000 L8.938,5.000 C12.527,5.000 15.437,7.868 15.437,11.406 C15.437,14.944 12.527,17.812 8.938,17.812 Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(255, 255, 255)"
|
||||
d="M25.188,5.000 C29.675,5.000 33.313,8.582 33.313,13.000 C33.313,17.418 29.675,21.000 25.188,21.000 C20.700,21.000 17.062,17.418 17.062,13.000 C17.062,8.582 20.700,5.000 25.188,5.000 Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(255, 255, 255)"
|
||||
d="M52.000,20.493 C52.000,20.766 51.775,20.987 51.497,20.987 L33.064,20.987 C33.042,20.990 33.023,21.000 33.000,21.000 C32.724,21.000 32.500,20.776 32.500,20.500 C32.500,20.391 32.542,20.296 32.601,20.214 L32.592,20.197 L41.743,5.388 L41.763,5.388 C41.811,5.164 42.004,4.993 42.246,4.993 C42.488,4.993 42.680,5.164 42.728,5.388 L42.749,5.388 L52.000,20.296 L51.968,20.339 C51.985,20.389 52.000,20.439 52.000,20.493 Z"
|
||||
/>
|
||||
<text
|
||||
font-family="Nunito"
|
||||
fill="rgb(255, 255, 255)"
|
||||
font-size="14px"
|
||||
x="63px"
|
||||
y="17px"
|
||||
>Governance App</text>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(96, 219, 151)"
|
||||
d="M177.000,0.000 C177.552,0.000 178.000,0.448 178.000,1.000 L178.000,25.000 C178.000,25.552 177.552,26.000 177.000,26.000 C176.448,26.000 176.000,25.552 176.000,25.000 L176.000,1.000 C176.000,0.448 176.448,0.000 177.000,0.000 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg viewBox="0 0 214.64 31" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform="translate(0 -10)"><path d="m123.06 33.95a1 1 0 0 1 -.31-.74v-17a1.14 1.14 0 0 1 .29-.82 1.2 1.2 0 0 1 1.61 0 1.15 1.15 0 0 1 .29.82v16.1h8.65a1.07 1.07 0 0 1 .75.24 1 1 0 0 1 0 1.4 1.08 1.08 0 0 1 -.75.24h-9.78a1.09 1.09 0 0 1 -.75-.24z"/><path d="m139 33.58a5.55 5.55 0 0 1 -2.17-2.38 8 8 0 0 1 -.76-3.59 8 8 0 0 1 .76-3.59 5.54 5.54 0 0 1 2.17-2.39 6.25 6.25 0 0 1 3.25-.83 6.34 6.34 0 0 1 3.27.83 5.53 5.53 0 0 1 2.22 2.37 8 8 0 0 1 .76 3.59 8 8 0 0 1 -.76 3.59 5.54 5.54 0 0 1 -2.18 2.38 6.34 6.34 0 0 1 -3.27.83 6.26 6.26 0 0 1 -3.29-.81zm6.21-2.25a5.83 5.83 0 0 0 1-3.73 5.79 5.79 0 0 0 -1-3.7 4 4 0 0 0 -5.89 0 5.8 5.8 0 0 0 -1 3.7 5.84 5.84 0 0 0 1 3.72 4.05 4.05 0 0 0 5.93.02z"/><path d="m162 26v7.32a1.09 1.09 0 0 1 -.28.78 1 1 0 0 1 -.76.3 1 1 0 0 1 -1.07-1.08v-1.32a3.85 3.85 0 0 1 -1.55 1.79 4.56 4.56 0 0 1 -2.41.63 5.26 5.26 0 0 1 -2.32-.51 4.14 4.14 0 0 1 -1.67-1.43 3.54 3.54 0 0 1 -.62-2 3.29 3.29 0 0 1 .75-2.3 4.54 4.54 0 0 1 2.43-1.18 24.24 24.24 0 0 1 4.77-.36h.59v-.92a3.55 3.55 0 0 0 -.66-2.37 2.69 2.69 0 0 0 -2.13-.75 7.84 7.84 0 0 0 -3.7 1 2.44 2.44 0 0 1 -1 .46.69.69 0 0 1 -.54-.24.9.9 0 0 1 -.21-.62 1 1 0 0 1 .23-.66 2.67 2.67 0 0 1 .74-.58 8.61 8.61 0 0 1 2.13-.85 9.4 9.4 0 0 1 2.37-.31q4.91-.01 4.91 5.2zm-3.15 5.64a3.93 3.93 0 0 0 1-2.81v-.83h-.48a23.82 23.82 0 0 0 -3.59.2 3.47 3.47 0 0 0 -1.75.67 1.77 1.77 0 0 0 -.52 1.39 2.23 2.23 0 0 0 .76 1.74 2.76 2.76 0 0 0 1.92.69 3.47 3.47 0 0 0 2.64-1.09z"/><path d="m177.22 15.41a1 1 0 0 1 .29.75v17.13a1.06 1.06 0 0 1 -.29.78 1.08 1.08 0 0 1 -.8.3 1 1 0 0 1 -.79-.3 1.09 1.09 0 0 1 -.28-.78v-1.46a4.32 4.32 0 0 1 -1.73 1.91 5.14 5.14 0 0 1 -2.67.67 5.39 5.39 0 0 1 -3-.86 5.67 5.67 0 0 1 -2-2.41 8.41 8.41 0 0 1 -.72-3.59 8.26 8.26 0 0 1 .72-3.55 5.37 5.37 0 0 1 5.06-3.2 5.14 5.14 0 0 1 2.67.67 4.32 4.32 0 0 1 1.73 1.91v-7.22a1 1 0 0 1 .28-.77 1.07 1.07 0 0 1 .79-.28 1.08 1.08 0 0 1 .74.3zm-2.91 15.9a5.85 5.85 0 0 0 1-3.7 5.79 5.79 0 0 0 -1-3.69 3.54 3.54 0 0 0 -2.93-1.29 3.61 3.61 0 0 0 -3 1.29 5.59 5.59 0 0 0 -1.06 3.63 5.85 5.85 0 0 0 1.06 3.73 3.57 3.57 0 0 0 3 1.33 3.52 3.52 0 0 0 2.93-1.3z"/><path d="m181.59 17.65a1.3 1.3 0 0 1 -.4-1 1.27 1.27 0 0 1 .4-1 1.64 1.64 0 0 1 2.09 0 1.27 1.27 0 0 1 .4 1 1.3 1.3 0 0 1 -.4 1 1.64 1.64 0 0 1 -2.09 0zm.25 16.44a1 1 0 0 1 -.31-.79v-11.37a1 1 0 0 1 .31-.79 1.12 1.12 0 0 1 .79-.28 1.08 1.08 0 0 1 .78.28 1.05 1.05 0 0 1 .29.79v11.36a1 1 0 0 1 -.29.81 1.11 1.11 0 0 1 -.78.27 1.13 1.13 0 0 1 -.79-.29z"/><path d="m199 26v7.3a1 1 0 0 1 -1.07 1.08 1.12 1.12 0 0 1 -.8-.28 1.05 1.05 0 0 1 -.29-.79v-7.18a4.08 4.08 0 0 0 -.71-2.66 2.82 2.82 0 0 0 -2.26-.83 3.81 3.81 0 0 0 -2.87 1.1 4.11 4.11 0 0 0 -1.07 3v6.57a1 1 0 0 1 -1.07 1.08 1.12 1.12 0 0 1 -.8-.28 1.05 1.05 0 0 1 -.29-.79v-11.39a1.06 1.06 0 0 1 .29-.78 1.08 1.08 0 0 1 .8-.3 1 1 0 0 1 .76.3 1.05 1.05 0 0 1 .28.75v1.37a4.41 4.41 0 0 1 1.79-1.84 5.36 5.36 0 0 1 2.63-.63q4.68-.01 4.68 5.2z"/><path d="m214.35 21.15a1.06 1.06 0 0 1 .29.78v11.41a6 6 0 0 1 -1.5 4.43 6 6 0 0 1 -4.45 1.49 9.2 9.2 0 0 1 -4.77-1.13 1.51 1.51 0 0 1 -1-1.24.94.94 0 0 1 .2-.62.65.65 0 0 1 .52-.24 2.58 2.58 0 0 1 1 .38 12.4 12.4 0 0 0 1.85.78 7.06 7.06 0 0 0 2.17.3 3.79 3.79 0 0 0 2.87-1 4.11 4.11 0 0 0 1-2.95v-2.33a4.09 4.09 0 0 1 -1.73 1.94 5.39 5.39 0 0 1 -2.75.67 5.73 5.73 0 0 1 -3-.81 5.46 5.46 0 0 1 -2.06-2.29 7.58 7.58 0 0 1 -.74-3.42 7.58 7.58 0 0 1 .74-3.42 5.46 5.46 0 0 1 2.01-2.28 5.73 5.73 0 0 1 3-.81 5.27 5.27 0 0 1 2.71.67 4.3 4.3 0 0 1 1.74 1.91v-1.44a1.09 1.09 0 0 1 .28-.78 1 1 0 0 1 .79-.3 1.08 1.08 0 0 1 .83.3zm-2.95 9.62a5.15 5.15 0 0 0 1.07-3.46 5.15 5.15 0 0 0 -1.06-3.43 3.66 3.66 0 0 0 -3-1.25 3.75 3.75 0 0 0 -3 1.25 5.07 5.07 0 0 0 -1.08 3.43 5.11 5.11 0 0 0 1.08 3.46 3.74 3.74 0 0 0 3 1.25 3.67 3.67 0 0 0 2.99-1.25z"/><path d="m17.38 34.81h-1.57v4.63a1.57 1.57 0 0 1 -1.59 1.56h-12.63a1.57 1.57 0 0 1 -1.59-1.55v-27.89a1.57 1.57 0 0 1 1.59-1.56h15.79a12.52 12.52 0 0 1 12.62 12.41 12.52 12.52 0 0 1 -12.62 12.4zm31.12-24.81a15.5 15.5 0 1 1 -15.5 15.5 15.5 15.5 0 0 1 15.5-15.5zm50.5 30a1 1 0 0 1 -1 1h-35.06a.94.94 0 0 1 -.74-1.51l17.34-28.72a.93.93 0 0 1 1.83 0l17.63 28.88-.06.08a.93.93 0 0 1 .06.27z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 339 B |
Binary file not shown.
|
Before Width: | Height: | Size: 637 B |
Binary file not shown.
|
Before Width: | Height: | Size: 340 B |
Binary file not shown.
|
Before Width: | Height: | Size: 632 B |
Binary file not shown.
|
Before Width: | Height: | Size: 214 B |
Binary file not shown.
|
Before Width: | Height: | Size: 341 B |
Binary file not shown.
|
Before Width: | Height: | Size: 214 B |
Binary file not shown.
|
Before Width: | Height: | Size: 341 B |
Binary file not shown.
|
Before Width: | Height: | Size: 277 B |
Binary file not shown.
|
Before Width: | Height: | Size: 505 B |
Binary file not shown.
|
Before Width: | Height: | Size: 277 B |
Binary file not shown.
|
Before Width: | Height: | Size: 505 B |
Binary file not shown.
|
Before Width: | Height: | Size: 241 B |
Binary file not shown.
|
Before Width: | Height: | Size: 424 B |
Binary file not shown.
|
Before Width: | Height: | Size: 240 B |
Binary file not shown.
|
Before Width: | Height: | Size: 426 B |
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.ballot-types {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid $base-border-color;
|
||||
padding: 20px 30px 10px;
|
||||
|
||||
&-i {
|
||||
$i-height: 30px;
|
||||
|
||||
color: $gray-text-color;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
line-height: $i-height;
|
||||
|
||||
&:before {
|
||||
background-color: $primary-color;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
content: '';
|
||||
height: $i-height;
|
||||
left: -30px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
.sokol & {
|
||||
background-color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_active {
|
||||
color: $primary-color;
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,108 +0,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;
|
||||
padding-bottom: $footer-height_desktop;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-bottom: $footer-height_mobile;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding-bottom: $footer-height_mobile;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sokol {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 10px 0 30px;
|
||||
border: 0;
|
||||
background-color: $base-border-color;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: $container-width;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: $container-width) {
|
||||
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: $tablet-width) {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
@mixin btn-background-properties() {
|
||||
background-size: 14px 14px;
|
||||
padding-right: 45px;
|
||||
}
|
||||
|
||||
@mixin make-themed-btn($selector-name: '', $background-color: '', $box-shadow-color: '') {
|
||||
|
||||
@if($selector-name != '') {
|
||||
|
||||
&.#{ $selector-name } {
|
||||
background-color: $background-color;
|
||||
|
||||
@if($box-shadow-color != '') {
|
||||
box-shadow: 0px 5px 10px 0 rgba($box-shadow-color...);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken($background-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@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));
|
||||
|
||||
.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));
|
||||
}
|
||||
|
||||
&.btn-new {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-add.svg');
|
||||
@include btn-background-properties();
|
||||
}
|
||||
&.btn-load-more {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-load-more.svg');
|
||||
border-radius: 5px;
|
||||
border: 2px solid $primary-color;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.btn-transparent {
|
||||
color: $primary-color;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
&,
|
||||
.sokol & {
|
||||
color: #333333;
|
||||
cursor: default;
|
||||
background-color: #f0f0f0;;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
background-color: #f0f0f0;;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-finalize-white.svg');
|
||||
@include btn-background-properties();
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-finalize-black.svg');
|
||||
}
|
||||
}
|
||||
// helpers
|
||||
&.no-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
&.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
&.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
label {
|
||||
color: $gray-text-color;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
@extend %form-el;
|
||||
|
||||
&:focus {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
height: 70px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
select {
|
||||
@include image-2x('./images/select@2x.png', 8px, 4px);
|
||||
@extend %form-el;
|
||||
appearance: none;
|
||||
background-image: url(./images/select.png);
|
||||
background-position: right 13px center;
|
||||
background-repeat: no-repeat;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %button;
|
||||
background-color: fade-out($primary-color, 0.9);
|
||||
color: $primary-color;
|
||||
|
||||
&.load-more {
|
||||
margin-bottom: 50px;
|
||||
|
||||
@media screen and (max-width: $container-width) {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-top: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
position: relative;
|
||||
|
||||
&-label {
|
||||
@include not-selectable-text();
|
||||
border-radius: 3px;
|
||||
border: 1px solid $base-border-color;
|
||||
color: $gray-text-color;
|
||||
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;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
input[type='radio']:checked + &-label {
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
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;
|
||||
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: $tablet-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.keys-radio-button-td {
|
||||
min-width: 30%;
|
||||
margin-right: 5%;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.radio-button-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
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;
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
.footer {
|
||||
@extend %full-width;
|
||||
|
||||
background-color: $primary-color;
|
||||
bottom: 0;
|
||||
padding: 18px 0;
|
||||
position: absolute;
|
||||
|
||||
&.sokol {
|
||||
background-color: $primary-color-sokol;
|
||||
}
|
||||
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.socials {
|
||||
order: 2;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-top: 15px;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
background-image: url('#{ $base-images-path}/logos/logo-poa.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
order: 0;
|
||||
width: 139px;
|
||||
|
||||
&.sokol {
|
||||
background-image: url('#{ $base-images-path}/logos/logo-sokol.svg');
|
||||
width: 144px;
|
||||
}
|
||||
}
|
||||
|
||||
&-rights {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
order: 1;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
line-height: normal;
|
||||
margin-top: 15px;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
.header {
|
||||
background-color: $primary-color;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 124;
|
||||
}
|
||||
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
width: 93%;
|
||||
padding: 22px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
background-color: $primary-color-sokol;
|
||||
}
|
||||
|
||||
// logos
|
||||
&-logo {
|
||||
display: block;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
// header links
|
||||
.links-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $header-links-container-height;
|
||||
margin-left: auto;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
justify-content: flex-end;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.links-container-mobile {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// header link items
|
||||
.link-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all.svg');
|
||||
}
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active.svg');
|
||||
}
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
.link-icon {
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all-sokol.svg');
|
||||
}
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active-sokol.svg');
|
||||
}
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize-sokol.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.mobile-menu-open-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-mobile-menu-container {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
background-color: $primary-color-darker;
|
||||
height: $header-mobile-menu-container-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
.header-mobile-menu-container {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
background-color: $primary-color-darker-sokol;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Select {
|
||||
$select-mobile-width: 125px;
|
||||
|
||||
margin-left: 25px;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-left: 0;
|
||||
max-width: $select-mobile-width;
|
||||
order: 2;
|
||||
.Select-control {
|
||||
max-width: $select-mobile-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-new-ballot {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
opacity: 1;
|
||||
.link-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
.btn.btn-new-ballot {
|
||||
background-color: #fff;
|
||||
background-image: url('#{ $base-images-path }/icons/icon-add-sokol.svg');
|
||||
color: $primary-color-sokol;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.select-network-id {
|
||||
background: #fff;
|
||||
width: 40px;
|
||||
}
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
$padding-left-items: 25px;
|
||||
|
||||
.info-container {
|
||||
background-color: #f8f8f8;
|
||||
margin-bottom: 30px;
|
||||
margin-left: -#{ $desktop-indent };
|
||||
margin-right: -#{ $desktop-indent };
|
||||
padding-bottom: #{ $desktop-indent };
|
||||
padding-left: #{ $desktop-indent };
|
||||
padding-right: #{ $desktop-indent };
|
||||
padding-top: #{ $desktop-indent };
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-left: -#{ $tablet-indent };
|
||||
margin-right: -#{ $tablet-indent };
|
||||
padding-left: #{ $tablet-indent };
|
||||
padding-right: #{ $tablet-indent };
|
||||
}
|
||||
|
||||
}
|
||||
.info {
|
||||
color: #000;
|
||||
|
||||
.ballots & {
|
||||
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;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-minimum {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-min.svg');
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
&-details {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-info.svg');
|
||||
background-size: 10px 18px;
|
||||
position: relative;
|
||||
&.collapsed {
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toggle-show {
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.new-form & {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: $gray-text-color;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 30px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
background-image: url('#{ $base-images-path }/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;
|
||||
}
|
||||
}
|
||||
|
||||
&-i {
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
line-height: 1.71;
|
||||
margin-bottom: 20px;
|
||||
padding-left: $padding-left-items;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
$circle-dimensions: 6px;
|
||||
|
||||
background-color: #333;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
height: $circle-dimensions;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
width: $circle-dimensions;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.app-container {
|
||||
padding-bottom: 30px;
|
||||
padding-top: 40px;
|
||||
position: relative;
|
||||
&.app-container-open-mobile-menu {
|
||||
&:before {
|
||||
background-color: rgba(78, 44, 137, .8);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
display: none;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: $header-mobile-menu-container-height + $header-height_mobile;
|
||||
z-index: 1234;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.app-container-open-mobile-menu.sokol {
|
||||
&:before {
|
||||
background-color: rgba(106, 201, 185, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
#root,
|
||||
.app-container {
|
||||
height: 100%;
|
||||
}
|
||||
.app-container {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding-top: $header-height_mobile + $search-container-height;
|
||||
}
|
||||
&.content-menu-open {
|
||||
padding-top: $header-mobile-menu-container-height + $header-height_mobile;
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
@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;
|
||||
|
||||
&:before {
|
||||
background-image: url("#{ $base-images-path }/logos/logo_loader.svg");
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
content: '';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100px;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
&-container {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
&-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;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: .1s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
animation-delay: .3s;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
animation-delay: .4s;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
animation-delay: .5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.main-title-container {
|
||||
-ms-flex-pack: justify;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.main-title {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.new {
|
||||
&-form {
|
||||
@extend %white-block;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-side {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
&_left {
|
||||
background-color: #f8f8f8;
|
||||
padding-top: 0;
|
||||
width: 30%;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&_right {
|
||||
border-left: 1px solid $base-border-color;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
width: 70%;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-ballot {
|
||||
white-space: nowrap;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.search-container {
|
||||
background-color: #502d8d;
|
||||
box-sizing: border-box;
|
||||
height: $search-container-height;
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
&.sokol {
|
||||
background-color: $primary-color-darker-sokol;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 70px;
|
||||
z-index: 123;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input.search-input {
|
||||
background-color: transparent;
|
||||
background-image: url('#{ $base-images-path }/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%;
|
||||
&,
|
||||
&:focus
|
||||
&:hover,
|
||||
&:active {
|
||||
color: #fff;
|
||||
}
|
||||
.sokol & {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-search-sokol.svg');
|
||||
}
|
||||
@include placeholder-full($color: rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
.settings {
|
||||
@extend %white-block;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
&-title {
|
||||
margin-bottom: 20px;
|
||||
color: #38454f;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
.socials {
|
||||
&-item {
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-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;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: fade-out(#fff, 0.6);
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
&_github {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/git@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/git.png');
|
||||
}
|
||||
}
|
||||
|
||||
&_telegram {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/telegram@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/telegram.png');
|
||||
}
|
||||
}
|
||||
|
||||
&_twitter {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/tw@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/tw.png');
|
||||
}
|
||||
}
|
||||
|
||||
&_poa {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/poa@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/poa.png');
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sokol {
|
||||
.socials {
|
||||
|
||||
.socials-i_github {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/git-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/git-sokol.png');
|
||||
}
|
||||
}
|
||||
|
||||
.socials-i_telegram {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/telegram-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/telegram-sokol.png');
|
||||
}
|
||||
}
|
||||
|
||||
.socials-i_twitter {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/tw-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/tw-sokol.png');
|
||||
}
|
||||
}
|
||||
|
||||
.socials-i_poa {
|
||||
&:before {
|
||||
@include image-2x('#{ $base-images-path }/socials/poa-sokol@2x.png');
|
||||
background-image: url('#{ $base-images-path }/socials/poa-sokol.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
.vote-scale {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
clear: left;
|
||||
height: 10px;
|
||||
margin-top: 34px;
|
||||
overflow: hidden;
|
||||
|
||||
&-not-finalized {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
&--fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
|
||||
&_no {
|
||||
background-color: $danger-color;
|
||||
.sokol & {
|
||||
background-color: $danger-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_yes {
|
||||
background-color: $success-color;
|
||||
.sokol & {
|
||||
background-color: $success-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_send {
|
||||
background-color: $success-color;
|
||||
.sokol & {
|
||||
background-color: $success-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_burn {
|
||||
background-color: $danger-color;
|
||||
.sokol & {
|
||||
background-color: $danger-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_freeze {
|
||||
background-color: $freeze-color;
|
||||
.sokol & {
|
||||
background-color: $freeze-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--value {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--votes,
|
||||
&--percentage {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&--votes {
|
||||
color: $gray-text-color;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&--percentage {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
.ballots-about {
|
||||
$cell-right-padding: 12px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
$this: &;
|
||||
p {
|
||||
line-height: 28px;
|
||||
}
|
||||
&-i {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: table-row;
|
||||
width: 100% !important;
|
||||
}
|
||||
& .ballots-about-td-value {
|
||||
padding-right: $cell-right-padding;
|
||||
}
|
||||
&_name {
|
||||
width: 12%;
|
||||
}
|
||||
&_action {
|
||||
width: 8%;
|
||||
}
|
||||
// 25
|
||||
&_type {
|
||||
width: 8%;
|
||||
}
|
||||
&_proposal {
|
||||
width: 30%;
|
||||
}
|
||||
&_key {
|
||||
width: 26%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_key_wide {
|
||||
width: 50%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_proposed_receiver {
|
||||
width: 45%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_funds_amount {
|
||||
width: 23%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_proposed-min-threshold {
|
||||
width: 30%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_contract-type {
|
||||
width: 25%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_proposed-address {
|
||||
width: 30%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_time {
|
||||
width: 20%;
|
||||
}
|
||||
&--title {
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
&:first-child .ballots-about-td-value {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child .ballots-about-td-value {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&-td {
|
||||
&.ballots-about-td-value {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
|
||||
.ballots-about-i_action &,
|
||||
.ballots-about-i_type & {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
&:first-child {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
#{$this}-i:not(:last-child) & {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
.ballots {
|
||||
.title {
|
||||
margin-bottom: 50px;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: $tablet-indent;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-bottom: $mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
&-about {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
&-i {
|
||||
@extend %white-block;
|
||||
background-color: #fff;
|
||||
&-scale {
|
||||
border-top: 1px solid $base-border-color;
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
padding: 30px 0 0 0;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: block;
|
||||
margin-top: $tablet-indent;
|
||||
padding: $tablet-indent 0 0 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-top: $mobile-indent;
|
||||
padding: $mobile-indent 0 0 0;
|
||||
}
|
||||
&-column {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
margin-right: 40px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: 30px;
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.reverse-responsive {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&--name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&--see-all-proposal {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
&--vote {
|
||||
@extend %_button;
|
||||
&-label {
|
||||
color: #333;
|
||||
cursor: default;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
&-label-right {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
&_btn {
|
||||
line-height: 44px;
|
||||
min-width: 55px;
|
||||
text-transform: capitalize;
|
||||
&.xl {
|
||||
min-width: 78px;
|
||||
}
|
||||
&.m-r-20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&.m-l-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
&.m-r-20,
|
||||
&.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: $primary-color;
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
.color-danger {
|
||||
color: $danger-color;
|
||||
.sokol & {
|
||||
color: $danger-color-sokol;
|
||||
}
|
||||
}
|
||||
.color-success {
|
||||
color: $success-color;
|
||||
.sokol & {
|
||||
color: $success-color-sokol;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
.ballots-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&-left {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
.btn {
|
||||
display: block;
|
||||
margin: 0 0 15px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-top: $tablet-indent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
flex-direction: column-reverse;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
max-width: 340px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
&-finalize {
|
||||
@extend %_button;
|
||||
margin-right: 20px;
|
||||
background-color: fade-out(#08b3f2, 0.9);
|
||||
white-space: nowrap;
|
||||
|
||||
&-finalized {
|
||||
background-color: fade-out(#6d2eae, 0.9);
|
||||
color: #6d2eae;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-top: $mobile-indent;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
%_button {
|
||||
@extend %button;
|
||||
border-radius: 2px;
|
||||
padding: 0 13px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,271 +0,0 @@
|
|||
//
|
||||
// Control
|
||||
// ------------------------------
|
||||
@import 'spinner';
|
||||
@import 'mixins';
|
||||
.Select {
|
||||
position: relative; // disable some browser-specific behaviours that break the input
|
||||
input::-webkit-contacts-auto-fill-button,
|
||||
input::-webkit-credentials-auto-fill-button {
|
||||
display: none !important;
|
||||
}
|
||||
input::-ms-clear {
|
||||
display: none !important;
|
||||
}
|
||||
input::-ms-reveal {
|
||||
display: none !important;
|
||||
} // preferred box model
|
||||
&,
|
||||
& div,
|
||||
& input,
|
||||
& span {
|
||||
@include box-sizing(border-box);
|
||||
} // handle disabled state
|
||||
&.is-disabled {
|
||||
.Select-arrow-zone {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
>.Select-control {
|
||||
background-color: $select-input-bg-disabled;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-searchable {
|
||||
&.is-open>.Select-control {
|
||||
cursor: text;
|
||||
}
|
||||
&.is-focused:not(.is-open)>.Select-control {
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
&.is-open>.Select-control {
|
||||
@include border-bottom-radius( 0);
|
||||
background: $select-input-bg;
|
||||
border-color: darken($select-input-border-color, 10%) $select-input-border-color lighten($select-input-border-color, 5%); // flip the arrow so its pointing up when the menu is open
|
||||
.Select-arrow {
|
||||
top: -2px;
|
||||
border-color: transparent transparent $select-arrow-color;
|
||||
border-width: 0 $select-arrow-width $select-arrow-width;
|
||||
}
|
||||
}
|
||||
&.is-focused>.Select-control {
|
||||
background: $select-input-bg-focus;
|
||||
}
|
||||
&.is-focused:not(.is-open)>.Select-control {
|
||||
border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%);
|
||||
box-shadow: $select-input-box-shadow-focus;
|
||||
}
|
||||
&.has-value.is-clearable.Select--single>.Select-control .Select-value {
|
||||
padding-right: ($select-clear-width + $select-arrow-width * 5);
|
||||
}
|
||||
&.has-value.Select--single>.Select-control .Select-value,
|
||||
&.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value {
|
||||
.Select-value-label {
|
||||
color: $select-text-color;
|
||||
}
|
||||
a.Select-value-label {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $select-link-hover-color;
|
||||
outline: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:focus {
|
||||
background: $select-input-bg-focus;
|
||||
}
|
||||
}
|
||||
} // fake-hide the input when the control is pseudo-focused
|
||||
&.has-value.is-pseudo-focused .Select-input {
|
||||
opacity: 0;
|
||||
}
|
||||
&.is-open .Select-arrow,
|
||||
.Select-arrow-zone:hover>.Select-arrow {
|
||||
border-top-color: $select-arrow-color-hover;
|
||||
}
|
||||
&.Select--rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// base
|
||||
.Select-control {
|
||||
background-color: $select-input-bg;
|
||||
border-collapse: separate;
|
||||
border-color: lighten($select-input-border-color, 5%) $select-input-border-color darken($select-input-border-color, 10%);
|
||||
border-radius: $select-input-border-radius;
|
||||
border-spacing: 0;
|
||||
border: $select-input-border-width solid $select-input-border-color;
|
||||
color: $select-text-color;
|
||||
cursor: default;
|
||||
display: table;
|
||||
height: $select-input-height;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
box-shadow: $select-input-hover-box-shadow;
|
||||
}
|
||||
.Select-input:focus {
|
||||
outline: none;
|
||||
background: $select-input-bg-focus;
|
||||
}
|
||||
}
|
||||
|
||||
// placeholder
|
||||
.Select-placeholder,
|
||||
.Select--single > .Select-control .Select-value {
|
||||
bottom: 0;
|
||||
color: $select-input-placeholder;
|
||||
left: 0;
|
||||
line-height: $select-input-internal-height;
|
||||
padding-left: $select-padding-horizontal;
|
||||
padding-right: $select-padding-horizontal;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0; // crop text
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// the <input> element users type in
|
||||
.Select-input {
|
||||
// inherits `display: inline-block` from "react-input-autosize"
|
||||
height: $select-input-internal-height;
|
||||
padding-left: $select-padding-horizontal;
|
||||
padding-right: $select-padding-horizontal;
|
||||
vertical-align: middle;
|
||||
>input {
|
||||
background: none transparent;
|
||||
border: 0 none;
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
font-size: inherit; // height: $select-input-internal-height;
|
||||
margin: 0;
|
||||
outline: none; // padding: 0;
|
||||
line-height: 17px;
|
||||
/* For IE 8 compatibility */
|
||||
padding: (($select-input-internal-height - 14) / 2 - 2) 0 (($select-input-internal-height - 14) / 2 + 2);
|
||||
/* For IE 8 compatibility */
|
||||
-webkit-appearance: none;
|
||||
.is-focused & {
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fake input
|
||||
.Select-control:not(.is-searchable)>.Select-input {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// loading indicator
|
||||
.Select-loading-zone {
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: $select-loading-size;
|
||||
}
|
||||
|
||||
.Select-loading {
|
||||
@include Select-spinner($select-loading-size, $select-loading-color-bg, $select-loading-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// the little cross that clears the field
|
||||
.Select-clear-zone {
|
||||
@include animation( Select-animation-fadeIn 200ms);
|
||||
color: $select-clear-color;
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: $select-clear-width;
|
||||
&:hover {
|
||||
color: $select-clear-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.Select-clear {
|
||||
display: inline-block;
|
||||
font-size: $select-clear-size;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.Select--multi .Select-clear-zone {
|
||||
width: $select-clear-width;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// arrow indicator
|
||||
.Select-arrow-zone {
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: ($select-arrow-width * 5);
|
||||
padding-right: $select-arrow-width;
|
||||
.Select--rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: $select-arrow-width;
|
||||
}
|
||||
}
|
||||
|
||||
.Select-arrow {
|
||||
border-color: $select-arrow-color transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: $select-arrow-width $select-arrow-width ($select-arrow-width / 2);
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Animation
|
||||
// ------------------------------
|
||||
// fade in
|
||||
@-webkit-keyframes Select-animation-fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Select-animation-fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -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,5 @@
|
|||
input {
|
||||
&[type='radio'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import 'reset';
|
||||
@import 'normalize';
|
||||
|
||||
@import 'display';
|
||||
@import 'effects';
|
||||
@import 'forms';
|
||||
@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 @@
|
|||
.lo-App {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding-top: $header-height + $search-container-height;
|
||||
width: 100%;
|
||||
|
||||
&#{ & }-no-search-bar {
|
||||
padding-top: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
.lo-App_Content {
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:before {
|
||||
background-color: rgba($poa-purple, 0.5);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
display: none;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1234;
|
||||
}
|
||||
|
||||
&#{ & }-mobile-menu-open {
|
||||
&:before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-core {
|
||||
&:before {
|
||||
background-color: rgba($poa-purple, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
&:before {
|
||||
background-color: rgba($sokol-cyan, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
&:before {
|
||||
background-color: rgba($xdai-orange, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.sw-BallotAbout {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.sw-BallotCard {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
border: 1px solid $base-border-color;
|
||||
margin-bottom: 30px;
|
||||
padding: $desktop-indent;
|
||||
transition: 0.15s box-shadow;
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
margin-bottom: $tablet-indent;
|
||||
padding: $tablet-indent;
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////
|
||||
///////////////////////////
|
||||
///////////////////////////
|
||||
///////////////////////////
|
||||
///////////////////////////
|
||||
.color-primary {
|
||||
color: $poa-purple;
|
||||
.sokol & {
|
||||
color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
|
||||
.color-danger {
|
||||
color: $poa-danger-color;
|
||||
.sokol & {
|
||||
color: $sokol-danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
.color-success {
|
||||
color: $poa-green-color;
|
||||
.sokol & {
|
||||
color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
$cell-right-padding: 12px;
|
||||
|
||||
.blc-BallotDataPair {
|
||||
box-sizing: border-box;
|
||||
display: table-row;
|
||||
min-width: 100%;
|
||||
padding-right: 0;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
display: inline-block;
|
||||
min-width: 0;
|
||||
padding-right: $cell-right-padding;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&#{ & }-name {
|
||||
width: 12%;
|
||||
word-break: break-word;
|
||||
}
|
||||
&#{ & }-action {
|
||||
width: 8%;
|
||||
}
|
||||
&#{ & }-type {
|
||||
width: 8%;
|
||||
}
|
||||
&#{ & }-proposal {
|
||||
width: 30%;
|
||||
}
|
||||
&#{ & }-key {
|
||||
width: 26%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&#{ & }-key-wide {
|
||||
width: 50%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&#{ & }-proposed-receiver {
|
||||
width: 45%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&#{ & }-funds-amount {
|
||||
width: 23%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&#{ & }-proposed-min-threshold {
|
||||
width: 30%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&#{ & }-contract-type {
|
||||
width: 25%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&#{ & }-proposed-address {
|
||||
width: 30%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&#{ & }-time {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.blc-BallotDataPair_Title {
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.blc-BallotDataPair_Value {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
|
||||
&#{ & }-action {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&#{ & }-type {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.frm-BallotEmissionFundsMetadata {
|
||||
margin-bottom: $base-grid-gap;
|
||||
}
|
||||
|
||||
.frm-BallotEmissionFundsMetadata_Row {
|
||||
@include form-row-base-styles();
|
||||
display: grid;
|
||||
grid-row-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media (min-width: $breakpoint-xxl) {
|
||||
grid-column-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
.bc-BallotFooter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bc-BallotFooter_Description {
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
max-width: 340px;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bc-BallotFooter_Voted {
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-left: auto;
|
||||
padding: 0 13px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bc-BallotFooter_ID {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
margin-top: 10px;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
margin-left: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bc-BallotFooter_voteID {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
.bc-BallotInfoContainer {
|
||||
background-color: #f8f8f8;
|
||||
margin-bottom: 30px;
|
||||
margin-left: -#{ $desktop-indent };
|
||||
margin-right: -#{ $desktop-indent };
|
||||
padding-bottom: #{ $desktop-indent };
|
||||
padding-left: #{ $desktop-indent };
|
||||
padding-right: #{ $desktop-indent };
|
||||
padding-top: #{ $desktop-indent };
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
margin-left: -#{ $tablet-indent };
|
||||
margin-right: -#{ $tablet-indent };
|
||||
padding-left: #{ $tablet-indent };
|
||||
padding-right: #{ $tablet-indent };
|
||||
}
|
||||
}
|
||||
|
||||
.bc-BallotInfoContainer_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;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&#{ & }-minimum {
|
||||
background-image: url('#{ $base-images-path }/BallotInfoContainer/min.svg');
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
|
||||
&#{ & }-details {
|
||||
background-image: url('#{ $base-images-path }/BallotInfoContainer/info.svg');
|
||||
background-size: 10px 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bc-BallotInfoContainer_ToggleShow {
|
||||
color: $poa-purple;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
|
||||
&#{ & }-core {
|
||||
color: $poa-purple;
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
color: $sokol-cyan;
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
color: $xdai-orange;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.frm-BallotKeysMetadata {
|
||||
margin-bottom: $base-grid-gap;
|
||||
}
|
||||
|
||||
.frm-BallotKeysMetadata_Row {
|
||||
@include form-row-base-styles();
|
||||
display: grid;
|
||||
grid-row-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media (min-width: $breakpoint-xxl) {
|
||||
grid-column-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.frm-BallotMinThresholdMetadata {
|
||||
margin-bottom: $base-grid-gap;
|
||||
}
|
||||
|
||||
.frm-BallotMinThresholdMetadata_Row {
|
||||
@include form-row-base-styles();
|
||||
display: grid;
|
||||
grid-row-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media (min-width: $breakpoint-xxl) {
|
||||
grid-column-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.frm-BallotProxyMetadata {
|
||||
margin-bottom: $base-grid-gap;
|
||||
}
|
||||
|
||||
.frm-BallotProxyMetadata_Row {
|
||||
@include form-row-base-styles();
|
||||
display: grid;
|
||||
grid-row-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media (min-width: $breakpoint-xxl) {
|
||||
grid-column-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.sw-Ballots {
|
||||
@include content-layout-width();
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.ld-BaseLoader {
|
||||
align-items: center;
|
||||
background-color: rgba(#fff, 0.8);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
$sw-ButtonAddBallot-height: 44px;
|
||||
|
||||
.sw-ButtonAddBallot {
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
height: $sw-ButtonAddBallot-height;
|
||||
justify-content: space-between;
|
||||
line-height: $sw-ButtonAddBallot-height;
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
transition: 0.15s background-color;
|
||||
|
||||
&#{ & }-core {
|
||||
background-color: $poa-purple;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($poa-purple, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
background-color: $sokol-cyan;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($sokol-cyan, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
background-color: $xdai-orange;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($xdai-orange, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
.sw-ButtonFinalize {
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
height: 42px;
|
||||
justify-content: space-between;
|
||||
line-height: 42px;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
transition: 0.15s background-color;
|
||||
|
||||
&#{ & }-core {
|
||||
background-color: $poa-purple;
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
background-color: darken($poa-purple, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
background-color: $sokol-cyan;
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
background-color: darken($sokol-cyan, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
background-color: $xdai-orange;
|
||||
|
||||
&:active,
|
||||
&:hover {
|
||||
background-color: darken($xdai-orange, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-cancel {
|
||||
&,
|
||||
&:active,
|
||||
&:hover {
|
||||
background-color: #f21b57 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-disabled {
|
||||
&,
|
||||
&:active,
|
||||
&:hover {
|
||||
cursor: default;
|
||||
background-color: #f0f0f0 !important;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.bc-BallotFooter & {
|
||||
margin-top: 30px;
|
||||
order: 3;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
margin-top: 0;
|
||||
order: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sw-ButtonFinalize_Text {
|
||||
margin-right: 50px;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue