changing btn styles

This commit is contained in:
Juan de la Cruz 2020-05-06 08:45:15 +02:00
parent 9951ec691e
commit e6aaf65d03
4 changed files with 30 additions and 54 deletions

View file

@ -2,60 +2,55 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this // License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/. // file, You can obtain one at http://mozilla.org/MPL/2.0/.
// //
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz> // Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Buttons // Buttons
%btn { %btn {
appearance: none; appearance: none;
align-items: stretch; align-items: center;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: $fs14; font-size: $fs13;
height: 30px;
justify-content: center; justify-content: center;
padding: 1rem; padding: 0 1rem;
transition: all .4s; transition: all .4s;
&.btn-big { &.btn-large {
padding: 2rem 1rem; font-size: $fs14;
} height: 40px;
&.btn-noshr {
flex-shrink: 0;
} }
&.btn-small { &.btn-small {
font-size: $fs13; height: 25px;
padding: .7rem 1rem;
line-height: 1.15;
} }
} }
.btn-primary { .btn-primary {
@extend %btn; @extend %btn;
align-items: center;
background: $color-primary; background: $color-primary;
color: $color-black; color: $color-black;
justify-content: center;
display: flex;
padding: 1rem;
&:hover { &:hover {
background: $color-black; background: $color-black;
color: $color-primary; color: $color-primary;
} }
} }
.btn-success { .btn-secondary {
@extend %btn; @extend %btn;
background: $color-success; background: $color-white;
color: $color-white; border: 1px solid $color-black;
color: $color-black;
&:hover { &:hover {
background: $color-success-dark; background: $color-primary;
color: $color-white; border-color: $color-primary;
color: $color-black;
} }
} }
.btn-delete { .btn-warning {
@extend %btn; @extend %btn;
background: $color-danger; background: $color-danger;
color: $color-white; color: $color-white;
@ -65,6 +60,15 @@
} }
} }
.btn-text-basic {
@extend %btn;
background: transparent;
color: $color-primary-dark;
&:hover {
background: rgba(49,239,184,.12);
}
}
.btn-gray { .btn-gray {
@extend %btn; @extend %btn;
background: $color-gray-30; background: $color-gray-30;
@ -74,33 +78,6 @@
} }
} }
.btn-complete {
@extend %btn;
background: $color-complete;
color: $color-white;
&:hover {
background: $color-complete-dark;
color: $color-white;
}
}
.btn-transparent {
@extend %btn;
background: transparent;
border: 2px solid $color-white;
color: $color-white;
&:hover {
background: $color-white;
color: $color-info-dark;
}
}
.btn-large {
flex-grow: 3;
max-width: 400px;
flex-basis: 60%;
width: 100%;
}
.btn-option { .btn-option {
display: flex; display: flex;
a { a {

View file

@ -35,7 +35,7 @@
} }
.btn-primary, .btn-primary,
.btn-delete { .btn-warning {
font-size: $fs13; font-size: $fs13;
margin-bottom: .5rem; margin-bottom: .5rem;
padding: 8px $small; padding: 8px $small;

View file

@ -197,10 +197,9 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.btn-delete, .btn-warning,
.btn-primary { .btn-primary {
width: 50%; width: 50%;
padding: $small;
} }
} }

View file

@ -88,7 +88,7 @@
[:span.share-link-subtitle (t locale "viewer.header.share.subtitle")] [:span.share-link-subtitle (t locale "viewer.header.share.subtitle")]
[:div.share-link-buttons [:div.share-link-buttons
(if (string? token) (if (string? token)
[:button.btn-delete {:on-click delete} [:button.btn-warning {:on-click delete}
(t locale "viewer.header.share.remove-link")] (t locale "viewer.header.share.remove-link")]
[:button.btn-primary {:on-click create} [:button.btn-primary {:on-click create}
(t locale "viewer.header.share.create-link")])]]]])) (t locale "viewer.header.share.create-link")])]]]]))