(feat) button styles
This commit is contained in:
parent
bd400f788a
commit
9259270dfc
|
@ -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': '',
|
||||
|
|
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,
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
@ -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)}>
|
||||
↓ LOAD MORE BALLOTS ↓
|
||||
<button type="button" className="btn btn-transparent btn-load-more" onClick={e => this.onClick(e)}>
|
||||
Load More Ballots
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue