(feat) button styles
This commit is contained in:
parent
bd400f788a
commit
9259270dfc
|
@ -39,7 +39,7 @@ class App extends Component {
|
||||||
icon: 'link-icon-add',
|
icon: 'link-icon-add',
|
||||||
title: 'New Ballot',
|
title: 'New Ballot',
|
||||||
url: `${commonStore.rootPath}/new`,
|
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': '',
|
// 'icon': '',
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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>
|
After Width: | Height: | Size: 259 B |
|
@ -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>
|
After Width: | Height: | Size: 259 B |
|
@ -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>
|
After Width: | Height: | Size: 399 B |
|
@ -1,3 +1,8 @@
|
||||||
|
@mixin btn-background-properties() {
|
||||||
|
background-size: 14px 14px;
|
||||||
|
padding-right: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
textarea {
|
textarea {
|
||||||
|
@ -21,40 +26,74 @@ textarea {
|
||||||
transition: 0.15s background-color;
|
transition: 0.15s background-color;
|
||||||
&.btn-primary {
|
&.btn-primary {
|
||||||
background-color: $primary-color;
|
background-color: $primary-color;
|
||||||
|
box-shadow: 0px 5px 10px 0 rgba(92, 52, 162, 0.3);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($primary-color, 10%);
|
background-color: darken($primary-color, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.btn-secondary {
|
&.btn-secondary {
|
||||||
background-color: $secondary-color;
|
background-color: $secondary-color;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($secondary-color, 10%);
|
background-color: darken($secondary-color, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.btn-success {
|
&.btn-success {
|
||||||
background-color: $success-color;
|
background-color: $success-color;
|
||||||
|
box-shadow: 0px 5px 10px 0 rgba(96, 219, 151, 0.3);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($success-color, 10%);
|
background-color: darken($success-color, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.btn-danger {
|
&.btn-danger {
|
||||||
background-color: $danger-color;
|
background-color: $danger-color;
|
||||||
|
box-shadow: 0px 5px 10px 0 rgba(242, 27, 87, 0.3);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($danger-color, 10%);
|
background-color: darken($danger-color, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.btn-new {
|
&.btn-new {
|
||||||
background-image: url('#{ $base-images-path }/icons/icon-add.svg');
|
background-image: url('#{ $base-images-path }/icons/icon-add.svg');
|
||||||
background-size: 14px 14px;
|
@include btn-background-properties();
|
||||||
padding-right: 45px;
|
}
|
||||||
|
&.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],
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: #788f9a;
|
color: #333333;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
background-color: #dde2e8;
|
background-color: #f0f0f0;;
|
||||||
|
box-shadow: none;
|
||||||
&:hover {
|
&: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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
.vote-scale {
|
.vote-scale {
|
||||||
clear: left;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 6px;
|
|
||||||
margin-top: 30px;
|
|
||||||
border-radius: 3px;
|
|
||||||
background-color: fade-out(#e5eef9, 0.5);
|
background-color: fade-out(#e5eef9, 0.5);
|
||||||
|
border-radius: 5px;
|
||||||
|
clear: left;
|
||||||
|
height: 10px;
|
||||||
|
margin-top: 32px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
&-not-finalized {
|
&-not-finalized {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
@ -25,7 +25,7 @@
|
||||||
|
|
||||||
&--container {
|
&--container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 343px;
|
max-width: 350px;
|
||||||
|
|
||||||
@media screen and (max-width: $tablet-width) {
|
@media screen and (max-width: $tablet-width) {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
|
@ -98,11 +98,7 @@
|
||||||
&-label-right {
|
&-label-right {
|
||||||
margin-left: auto !important;
|
margin-left: auto !important;
|
||||||
}
|
}
|
||||||
&_yes {
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
&_no {
|
&_no {
|
||||||
margin-left: 15px;
|
|
||||||
@media screen and (max-width: $tablet-width) {
|
@media screen and (max-width: $tablet-width) {
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
|
@ -5,7 +5,7 @@ $primary-color: #5c34a2;
|
||||||
$primary-color-darker: #45277a;
|
$primary-color-darker: #45277a;
|
||||||
$secondary-color: #6ac9b9;
|
$secondary-color: #6ac9b9;
|
||||||
$secondary-color-darker: darken(#6ac9b9, 10%);
|
$secondary-color-darker: darken(#6ac9b9, 10%);
|
||||||
$danger-color: #ff4949;
|
$danger-color: #f21b57;
|
||||||
$success-color: #60db97;
|
$success-color: #60db97;
|
||||||
$gray-text-color: #778f9b;
|
$gray-text-color: #778f9b;
|
||||||
|
|
||||||
|
|
|
@ -47,7 +47,7 @@ export class BallotCard extends React.Component {
|
||||||
|
|
||||||
@computed
|
@computed
|
||||||
get finalizeButtonClass() {
|
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
|
return cls
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -143,8 +143,8 @@ export class Ballots extends React.Component {
|
||||||
if (ballotCards.length > this.limit && !commonStore.isActiveFilter && !commonStore.isToFinalizeFilter) {
|
if (ballotCards.length > this.limit && !commonStore.isActiveFilter && !commonStore.isToFinalizeFilter) {
|
||||||
loadMoreButton = (
|
loadMoreButton = (
|
||||||
<div className="center">
|
<div className="center">
|
||||||
<button type="button" className="btn btn-primary load-more" onClick={e => this.onClick(e)}>
|
<button type="button" className="btn btn-transparent btn-load-more" onClick={e => this.onClick(e)}>
|
||||||
↓ LOAD MORE BALLOTS ↓
|
Load More Ballots
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -418,7 +418,7 @@ export class NewBallot extends React.Component {
|
||||||
{validator}
|
{validator}
|
||||||
{keysTypes}
|
{keysTypes}
|
||||||
{metadata}
|
{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
|
Add ballot
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue