mirror of
https://github.com/penpot/penpot.git
synced 2025-06-13 08:02:29 +02:00
changing btn styles
This commit is contained in:
parent
9951ec691e
commit
e6aaf65d03
4 changed files with 30 additions and 54 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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")])]]]]))
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue