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) New Ballot form facelift.

This commit is contained in:
Gabriel Rodríguez Alsina 2018-07-17 22:56:53 -03:00
parent b593353ac1
commit fe5b5e7c0f
8 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/App.css
View File

File diff suppressed because one or more lines are too long

4
src/assets/stylesheets/application/_ballot-types.scss
View File

@ -16,11 +16,11 @@
height: 30px;
width: 3px;
transform: translateY(-50%);
background-color: #08b3f2;
background-color: $primary-color;
}
&_active {
color: #08b3f2;
color: $primary-color;
&:before {
opacity: 1;

26
src/assets/stylesheets/application/_controls.scss
View File

@ -3,7 +3,6 @@ label {
margin-bottom: 15px;
color: $gray-text-color;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
input,
@ -11,7 +10,7 @@ textarea {
@extend %form-el;
&:focus {
border-color: #08b3f2;
border-color: $primary-color;
}
&[type='radio'] {
@ -39,8 +38,8 @@ select {
button {
@extend %button;
background-color: fade-out(#08b3f2, 0.9);
color: #08b3f2;
background-color: fade-out($primary-color, 0.9);
color: $primary-color;
&.load-more {
margin-bottom: 50px;
@ -56,7 +55,7 @@ button {
}
.radio {
@extend %form-el;
// @extend %form-el;
transition: 0.3s color,
0.3s background-color,
0.3s border-color;
@ -66,9 +65,8 @@ button {
line-height: $input-height;
input[type='radio']:checked + & {
border-color: #08b3f2;
background-color: fade-out(#08b3f2, 0.9);
color: #08b3f2;
border-color: $primary-color;
color: $primary-color;
}
&_icon {
@ -79,15 +77,15 @@ button {
}
&_add {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAFVBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvVmJ/ytAAAABnRSTlMASUrk5udXTd49AAAAPElEQVR4Ae3RIQKAAAzDwG5k/f+TwYIoEsROx0V3BaUEGyW+bPBVUDighCPeglGPg6P3xW8D7FHS8/x3AhBhBV+OMM67AAAAAElFTkSuQmCC);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZ0lEQVR4AWIgF8SYLPIE4mdQ7MlAbwC1GNB+HWAAAMJQGL5f9z9C2jGWWTIASk/8eAS8D/LMV4YC4DX/AgAAAAAAQFk1f5xcUVH5RqgBFoAWD0F5j25+AQAAAAAAuHWcmgCQK3q6ahPyvQbTMeZShQAAAABJRU5ErkJggg==')
}
&_remove {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAFVBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvVmJ/ytAAAABnRSTlMASUrk5udXTd49AAAATklEQVR4Ae3SQQqAMAxE0Wmc5P5H1k2gfijFnaBvWf5mStSGa+Ihct14F6QosiZH6D24nzw4j7wLEvsb/qMugn77g28G9Czw6h5b5PoeT61VCXCp8qCYAAAAAElFTkSuQmCC);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAc0lEQVR42u2XwQ3AIAwDM1SXgBmYrrNVyRglbz5WcRGtZEv3Q/g+icBQ2nGWxJP7IZ4UYwPKEb5bIN4QqElMlF9JNUWh5pwH7wmqnMd3C8Qw5zT8nhgPGhV8nwQkIAEJSEACEvi6AM8vBXyhQBB/wTVvwA5ymYbEmIcsVAAAAABJRU5ErkJggg==');
}
&_swap {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAulBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvVktDOmAAAAPXRSTlMAAQIDBAUGETxARUlKS1BRUlNUVVdaXGFkZmdpamtuc3R2fH+IiYrR19ja3N7h4+bn6+3v8PHy9fj5+vz+d3lc/AAAALhJREFUeNqVk0cOwkAMAE0n1NBLgNAhQCCFTvz/b6GYPQS03hVznZF8sA0fBr5XBgU2Ih41Hn2Nj/qsn5Ifa/yI9RbKcQ0RnJFhK4KTLmi95P5ggKBDxRwY/ihsXRGCptiDCnO3KUKSVBqUtIOwp/LZC62PJ3eLF2gBzwR1xYyKYWJq4Yfld9G8opSoKwIfGVzdVTgiqHhy/+DfaU2+xvoV+TrrF+RN1ufvsW8ASyZAfJLnKDlOFYg3It9LpKV2sncAAAAASUVORK5CYII=);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABBklEQVR4AWLABWJMFgGarwfdCoAgCsNbxujz1LZt2wyquHi7BrVtW9tTc7ZXO3Mn+eL0P20v62APtiBRcR6C3aC/WBOLv9mTjD9CDUe8h4g3S8abOOKNoC1agQjTgGPQlk2ZBmxKD8iFe4vxRYj473FQRIwYUFzn7SO6pUccKZzkiHnFfYhmwSxMQIiLP8MHfJXEIZwPB3AEldxxfzgh3tRYBgTAxR9vbo2cI9pAS4/oI0bUO/O/DHLTqHkEHc+BU9CWPEKJacAeaMtWpD8nTJsGJMGWxfgNyxceRMaJeAZHfIyIZ3LEh4l4Fkc8EK7/iGdzvQL6wcGX+K3VODEiFqbfJCvingAZLf+WroN1/QAAAABJRU5ErkJggg==');
}
&:before,
@ -105,10 +103,10 @@ button {
width: 24px;
height: 24px;
box-sizing: border-box;
border: 1px solid #e5eef9;
border: 1px solid $base-border-color;
input[type='radio']:checked + & {
border-color: #08b3f2;
border-color: $primary-color;
}
}
@ -121,7 +119,7 @@ button {
top: ($input-height - 12px) / 2;
width: 12px;
height: 12px;
background-color: #08b3f2;
background-color: $primary-color;
input[type='radio']:checked + & {
transform: scale(1);

2
src/assets/stylesheets/application/_info.scss
View File

@ -51,7 +51,7 @@
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #08b3f2;
background-color: $primary-color;
}
}
}

1
src/assets/stylesheets/application/_new.scss
View File

@ -42,7 +42,6 @@
.add-ballot {
white-space: nowrap;
@media screen and (max-width: $mobile-width) {
margin-top: 20px;
}

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

@ -113,7 +113,6 @@
}
textarea {
border: 1px solid #e5eef9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
@ -121,9 +120,6 @@ textarea {
outline: none;
border-radius: 3px;
width: 100%;
&:focus {
border-color: #08b3f2;
}
}
.color-primary {

23
src/assets/stylesheets/helpers/_placeholders.scss
View File

@ -31,16 +31,24 @@
%form-el {
transition: 0.3s background-color,
0.3s border-color;
width: 100%;
height: $input-height;
outline: none;
border-radius: 3px;
border: 1px solid #e5eef9;
box-sizing: border-box;
padding: 0 10px;
background-color: #fff;
border-radius: 3px;
border: 1px solid $base-border-color;
box-sizing: border-box;
color: #444;
font-size: 14px;
height: $input-height;
outline: none;
padding: 0 10px;
width: 100%;
&:hover {
border-color: #8e959d;
color: $input-color;
}
&:focus {
border-color: $primary-color;
color: $input-color;
}
}
%button {
@ -55,7 +63,6 @@
line-height: 36px;
font-size: 13px;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
&:hover {
opacity: 0.9;

2
src/components/NewBallot.jsx
View File

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