poanetwork
/
poa-dapps-voting
mirror of https://github.com/poanetwork/poa-dapps-voting.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(feat) button styles

This commit is contained in:
Gabriel Rodríguez Alsina 2018-07-31 16:21:59 -03:00
parent bd400f788a
commit 9259270dfc
12 changed files with 71 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -39,7 +39,7 @@ class App extends Component {
icon: 'link-icon-add',
title: 'New Ballot',
url: `${commonStore.rootPath}/new`,
class: 'btn btn-new-ballot btn-success btn-new'
class: 'btn btn-new-ballot btn-success btn-new no-shadow'
}
// {
// 'icon': '',

2
src/assets/App.css
View File

File diff suppressed because one or more lines are too long

3
src/assets/images/icons/icon-finalize-black.svg Normal file
View File

@ -0,0 +1,3 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

3
src/assets/images/icons/icon-finalize-white.svg Normal file
View File

@ -0,0 +1,3 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

3
src/assets/images/icons/icon-load-more.svg Normal file
View File

@ -0,0 +1,3 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 399 B

57
src/assets/stylesheets/application/_buttons.scss
View File

@ -1,3 +1,8 @@
@mixin btn-background-properties() {
background-size: 14px 14px;
padding-right: 45px;
}
button,
input,
textarea {
@ -21,40 +26,74 @@ textarea {
transition: 0.15s background-color;
&.btn-primary {
background-color: $primary-color;
box-shadow: 0px 5px 10px 0 rgba(92, 52, 162, 0.3);
&:hover {
background-color: lighten($primary-color, 10%);
background-color: darken($primary-color, 10%);
}
}
&.btn-secondary {
background-color: $secondary-color;
&:hover {
background-color: lighten($secondary-color, 10%);
background-color: darken($secondary-color, 10%);
}
}
&.btn-success {
background-color: $success-color;
box-shadow: 0px 5px 10px 0 rgba(96, 219, 151, 0.3);
&:hover {
background-color: lighten($success-color, 10%);
background-color: darken($success-color, 10%);
}
}
&.btn-danger {
background-color: $danger-color;
box-shadow: 0px 5px 10px 0 rgba(242, 27, 87, 0.3);
&:hover {
background-color: lighten($danger-color, 10%);
background-color: darken($danger-color, 10%);
}
}
&.btn-new {
background-image: url('#{ $base-images-path }/icons/icon-add.svg');
background-size: 14px 14px;
padding-right: 45px;
@include btn-background-properties();
}
&.btn-transparent {
color: $primary-color;
background-color: transparent;
&:hover {
opacity: 0.8;
}
}
&.btn-load-more {
background-image: url('#{ $base-images-path }/icons/icon-load-more.svg');
@include btn-background-properties();
}
&.no-shadow {
box-shadow: none;
}
&[disabled],
&.disabled {
color: #788f9a;
color: #333333;
cursor: default;
background-color: #dde2e8;
background-color: #f0f0f0;;
box-shadow: none;
&:hover {
background-color: #dde2e8;
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');
}
}
&.text-lowercase {
text-transform: lowercase;
}
&.text-uppercase {
text-transform: uppercase;
}
&.text-capitalize {
text-transform: capitalize;
}
}

12
src/assets/stylesheets/application/_vote-scale.scss
View File

@ -1,10 +1,10 @@
.vote-scale {
clear: left;
overflow: hidden;
height: 6px;
margin-top: 30px;
border-radius: 3px;
background-color: fade-out(#e5eef9, 0.5);
border-radius: 5px;
clear: left;
height: 10px;
margin-top: 32px;
overflow: hidden;
&-not-finalized {
background-color: #ffffff;
@ -25,7 +25,7 @@
&--container {
width: 100%;
max-width: 343px;
max-width: 350px;
@media screen and (max-width: $tablet-width) {
float: right;

6
src/assets/stylesheets/application/ballots/base.scss
View File

@ -98,11 +98,7 @@
&-label-right {
margin-left: auto !important;
}
&_yes {
margin-right: 15px;
}
&_no {
margin-left: 15px;
@media screen and (max-width: $tablet-width) {
float: left;
margin-left: 0;
@ -131,4 +127,4 @@ textarea {
}
.color-success {
color: $success-color;
}
}

2
src/assets/stylesheets/helpers/_vars.scss
View File

@ -5,7 +5,7 @@ $primary-color: #5c34a2;
$primary-color-darker: #45277a;
$secondary-color: #6ac9b9;
$secondary-color-darker: darken(#6ac9b9, 10%);
$danger-color: #ff4949;
$danger-color: #f21b57;
$success-color: #60db97;
$gray-text-color: #778f9b;

2
src/components/BallotCard.jsx
View File

@ -47,7 +47,7 @@ export class BallotCard extends React.Component {
@computed
get finalizeButtonClass() {
const cls = this.isFinalized ? 'btn btn-primary disabled' : 'btn btn-primary'
const cls = this.isFinalized ? 'btn btn-primary btn-finalize disabled' : 'btn btn-primary btn-finalize'
return cls
}

4
src/components/Ballots.jsx
View File

@ -143,8 +143,8 @@ export class Ballots extends React.Component {
if (ballotCards.length > this.limit && !commonStore.isActiveFilter && !commonStore.isToFinalizeFilter) {
loadMoreButton = (
<div className="center">
<button type="button" className="btn btn-primary load-more" onClick={e => this.onClick(e)}>
&darr; LOAD MORE BALLOTS &darr;
<button type="button" className="btn btn-transparent btn-load-more" onClick={e => this.onClick(e)}>
Load More Ballots
</button>
</div>
)

2
src/components/NewBallot.jsx
View File

@ -418,7 +418,7 @@ export class NewBallot extends React.Component {
{validator}
{keysTypes}
{metadata}
<button type="button" className="btn btn-primary add-ballot" onClick={e => this.onClick(e)}>
<button type="button" className="btn btn-primary btn-new text-capitalize" onClick={e => this.onClick(e)}>
Add ballot
</button>
</div>