(feat) Adjustments in the "New Ballot" view.
This commit is contained in:
Gabriel Rodríguez Alsina
parent
f7056e86dc
commit
e2b4ed13fe
File diff suppressed because one or more lines are too long
|
|
@ -138,8 +138,9 @@ button {
|
|||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 15px;
|
||||
color: $gray-text-color;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
margin-top: 15px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1234;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -25,6 +24,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
#root,
|
||||
.app-container {
|
||||
|
|
@ -38,11 +38,15 @@
|
|||
|
||||
.content {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
|
||||
padding-top: $header-height_mobile;
|
||||
|
||||
}
|
||||
&.content-menu-open {
|
||||
padding-top: $header-mobile-menu-container-height + $header-height_mobile;
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
|
@ -1,303 +1,271 @@
|
|||
//
|
||||
// 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;
|
||||
}
|
||||
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-color: lighten($select-input-border-color, 5%) $select-input-border-color darken($select-input-border-color, 10%);
|
||||
border-radius: $select-input-border-radius;
|
||||
border: $select-input-border-width solid $select-input-border-color;
|
||||
color: $select-text-color;
|
||||
cursor: default;
|
||||
display: table;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
.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;
|
||||
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;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $select-clear-hover-color;
|
||||
}
|
||||
}
|
||||
.Select-clear {
|
||||
display: inline-block;
|
||||
font-size: $select-clear-size;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
font-size: $select-clear-size;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.Select--multi .Select-clear-zone {
|
||||
width: $select-clear-width;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
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; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Select-animation-fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,21 +12,21 @@
|
|||
// control options
|
||||
$select-input-bg: #fff !default;
|
||||
$select-input-bg-disabled: #f9f9f9 !default;
|
||||
$select-input-bg-focus: $select-input-bg !default;
|
||||
$select-input-border-color: #e5eef9 !default;
|
||||
$select-input-bg-focus: #fff !default;
|
||||
$select-input-border-color: $base-border-color !default;
|
||||
$select-input-border-radius: 3px !default;
|
||||
$select-input-border-focus: #08c !default; // blue
|
||||
$select-input-box-shadow-focus: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade($select-input-border-focus, 50%) !default;
|
||||
$select-input-border-focus: $primary-color !default;
|
||||
$select-input-box-shadow-focus: none !default;
|
||||
$select-input-border-width: 1px !default;
|
||||
$select-input-height: 40px !default;
|
||||
$select-input-internal-height: ($select-input-height - ($select-input-border-width * 2)) !default;
|
||||
$select-input-placeholder: #aaa !default;
|
||||
$select-input-placeholder: #333 !default;
|
||||
$select-text-color: #333 !default;
|
||||
$select-link-hover-color: $select-input-border-focus !default;
|
||||
$select-input-hover-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !default;
|
||||
$select-link-hover-color: #8e959d !default;
|
||||
$select-input-hover-box-shadow: none !default;
|
||||
|
||||
$select-padding-vertical: 8px !default;
|
||||
$select-padding-horizontal: 10px !default;
|
||||
$select-padding-horizontal: 15px !default;
|
||||
|
||||
// menu options
|
||||
$select-menu-zindex: 1000 !default;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
import Select from 'react-select'
|
||||
import 'react-select/dist/react-select.css'
|
||||
|
||||
@inject('ballotStore', 'contractsStore')
|
||||
@observer
|
||||
|
|
@ -89,6 +88,7 @@ export class BallotKeysMetadata extends React.Component {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="clearfix"> </div>
|
||||
{newVotingPayoutKeys}
|
||||
<div className="left">
|
||||
<div className="form-el">
|
||||
|
|
|
|||
Loading…
Reference in New Issue