mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
Andrey Antukh
GitHub
commit
02e438eb28
19 changed files with 114 additions and 213 deletions
|
|
@ -2,60 +2,63 @@
|
|||
// 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/.
|
||||
//
|
||||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
// Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
// Buttons
|
||||
|
||||
%btn {
|
||||
appearance: none;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: $fs14;
|
||||
font-size: $fs13;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
padding: 0 1rem;
|
||||
transition: all .4s;
|
||||
&.btn-big {
|
||||
padding: 2rem 1rem;
|
||||
svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
&.btn-noshr {
|
||||
flex-shrink: 0;
|
||||
&.btn-large {
|
||||
font-size: $fs14;
|
||||
height: 40px;
|
||||
svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
&.btn-small {
|
||||
font-size: $fs13;
|
||||
padding: .7rem 1rem;
|
||||
line-height: 1.15;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@extend %btn;
|
||||
align-items: center;
|
||||
background: $color-primary;
|
||||
color: $color-black;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
&:hover {
|
||||
background: $color-black;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
.btn-secondary {
|
||||
@extend %btn;
|
||||
background: $color-success;
|
||||
color: $color-white;
|
||||
background: $color-white;
|
||||
border: 1px solid $color-black;
|
||||
color: $color-black;
|
||||
&:hover {
|
||||
background: $color-success-dark;
|
||||
color: $color-white;
|
||||
background: $color-primary;
|
||||
border-color: $color-primary;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
.btn-warning {
|
||||
@extend %btn;
|
||||
background: $color-danger;
|
||||
color: $color-white;
|
||||
|
|
@ -65,6 +68,63 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-text-basic {
|
||||
@extend %btn;
|
||||
background: transparent;
|
||||
color: $color-primary-dark;
|
||||
&:hover {
|
||||
background: rgba(49,239,184,.12);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon-dark {
|
||||
@extend %btn;
|
||||
background: $color-gray-60;
|
||||
color: $color-gray-20;
|
||||
padding: $x-small;
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon-light {
|
||||
@extend %btn;
|
||||
background: $color-gray-10;
|
||||
color: $color-gray-40;
|
||||
padding: $x-small;
|
||||
svg {
|
||||
fill: $color-gray-40;
|
||||
}
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon-basic {
|
||||
@extend %btn;
|
||||
background: transparent;
|
||||
color: $color-gray-60;
|
||||
padding: $x-small;
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
&:hover {
|
||||
background: transparent;
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gray {
|
||||
@extend %btn;
|
||||
background: $color-gray-30;
|
||||
|
|
@ -74,33 +134,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 {
|
||||
display: flex;
|
||||
a {
|
||||
|
|
@ -130,21 +163,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-dashboard {
|
||||
@extend %btn;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-black;
|
||||
border-radius: 2px;
|
||||
color: $color-black;
|
||||
padding: $x-small $small;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
border-color: $color-primary;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=button][disabled],
|
||||
.btn-disabled {
|
||||
background-color: $color-gray-10;
|
||||
|
|
|
|||
|
|
@ -71,19 +71,8 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.library-sidebar-add-item {
|
||||
background-color: $color-primary;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: $size-2;
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-black;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.library-sidebar-list {
|
||||
|
|
@ -157,8 +146,7 @@
|
|||
.library-top-menu-actions {
|
||||
display: flex;
|
||||
|
||||
.btn-dashboard {
|
||||
background-color: transparent;
|
||||
.btn-secondary {
|
||||
margin-left: $size-2;
|
||||
}
|
||||
}
|
||||
|
|
@ -166,7 +154,12 @@
|
|||
.library-top-menu-actions-delete {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column
|
||||
flex-direction: column;
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.library-page-cards-container {
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-dashboard {
|
||||
.btn-secondary {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@
|
|||
transform: scale(1.4);
|
||||
|
||||
svg {
|
||||
fill: $color-danger;
|
||||
fill: $color-primary-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -462,7 +462,3 @@
|
|||
margin-bottom: $medium;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-files-link-text {
|
||||
color: $color-black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,30 +149,8 @@
|
|||
font-size: $fs14;
|
||||
}
|
||||
|
||||
.add-project {
|
||||
align-items: center;
|
||||
background-color: $color-gray-10;
|
||||
border-radius: $br-small;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.btn-icon-light {
|
||||
margin-left: auto;
|
||||
padding: $x-small;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: $size-2;
|
||||
width: $size-2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
margin-right: $small;
|
||||
}
|
||||
|
||||
.btn-dashboard {
|
||||
.btn-secondary {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-delete {
|
||||
.btn-warning {
|
||||
font-size: $fs13;
|
||||
margin-bottom: .5rem;
|
||||
padding: 8px $small;
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@
|
|||
.options-zone {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 350px;
|
||||
width: 365px;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -134,39 +134,6 @@
|
|||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 0.4rem 1rem;
|
||||
}
|
||||
|
||||
.btn-primary.btn-small {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.btn-fullscreen {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-link-dropdown {
|
||||
|
|
@ -197,10 +164,9 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.btn-delete,
|
||||
.btn-warning,
|
||||
.btn-primary {
|
||||
width: 50%;
|
||||
padding: $small;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,36 +75,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
border-radius: $br-small;
|
||||
display: flex;
|
||||
margin-right: $x-small;
|
||||
padding: $x-small;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
fill: $color-gray-20;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-tree {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin-left: $x-small;
|
||||
padding: $x-small;
|
||||
|
||||
svg {
|
||||
|
|
@ -128,31 +103,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.preview-button {
|
||||
align-items: center;
|
||||
background-color: $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
justify-content: center;
|
||||
width: 25px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
|
|
|
|||
|
|
@ -122,4 +122,4 @@
|
|||
[:div.grid-files-empty
|
||||
[:div.grid-files-desc (t locale "dashboard.grid.empty-files")]
|
||||
[:div.grid-files-link
|
||||
[:a.grid-files-link-text {:on-click on-click} (t locale "ds.new-file")]]])]]))
|
||||
[:a.btn-text-basic.btn-small {:on-click on-click} (t locale "ds.new-file")]]])]]))
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
[{:keys [section items team-id library-id]}]
|
||||
(let [locale (i18n/use-locale)]
|
||||
[:aside.library-sidebar
|
||||
[:button.library-sidebar-add-item
|
||||
[:button.btn-primary.btn-small
|
||||
{:type "button"
|
||||
:on-click #(create-library section team-id)}
|
||||
(t locale (str "dashboard.library.add-library." (name section)))]
|
||||
|
|
@ -166,12 +166,12 @@
|
|||
i/trash]
|
||||
|
||||
(if (= section :palettes)
|
||||
[:button.btn-dashboard
|
||||
[:button.btn-secondary.btn-small
|
||||
{:on-click #(create-item section library-id)}
|
||||
(t locale (str "dashboard.library.add-item." (name section)))]
|
||||
|
||||
[:*
|
||||
[:label {:for "file-upload" :class-name "btn-dashboard"}
|
||||
[:label {:for "file-upload" :class-name "btn-secondary btn-small"}
|
||||
(t locale (str "dashboard.library.add-item." (name section)))]
|
||||
[:input {:on-change #(create-item section library-id %)
|
||||
:id "file-upload"
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
:on-key-down on-key-down
|
||||
:on-blur on-blur
|
||||
:default-value (:name project)}])])
|
||||
[:a.btn-dashboard {:on-click #(do
|
||||
[:a.btn-secondary.btn-small {:on-click #(do
|
||||
(dom/prevent-default %)
|
||||
(st/emit! (dsh/create-file project-id)))}
|
||||
(t locale "dashboard.header.new-file")]]))
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
(let [locale (i18n/use-locale)]
|
||||
[:header#main-bar.main-bar
|
||||
[:h1.dashboard-title "Recent"]
|
||||
[:a.btn-dashboard {:on-click #(st/emit! dsh/create-project)}
|
||||
[:a.btn-secondary.btn-small {:on-click #(st/emit! dsh/create-project)}
|
||||
(t locale "dashboard.header.new-project")]]))
|
||||
|
||||
(mf/defc recent-project
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@
|
|||
|
||||
[:div.projects-row
|
||||
[:span "PROJECTS"]
|
||||
[:a.add-project {:on-click #(st/emit! dsh/create-project)}
|
||||
[:a.btn-icon-light.btn-small {:on-click #(st/emit! dsh/create-project)}
|
||||
i/close]]
|
||||
|
||||
[:& sidebar-projects
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
:on-change (fm/on-input-change form :password)
|
||||
:placeholder (tr "login.password")
|
||||
:type "password"}]
|
||||
[:input.btn-primary
|
||||
[:input.btn-primary.btn-large
|
||||
{:name "login"
|
||||
:tab-index "4"
|
||||
:class (when-not (:valid form) "btn-disabled")
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
[:a {:on-click #(st/emit! (rt/nav :profile-register))
|
||||
:tab-index "6"}
|
||||
(tr "login.register")]]
|
||||
[:a.btn-dashboard {:on-click #(st/emit! da/create-demo-profile)
|
||||
[:a.btn-secondary.btn-small {:on-click #(st/emit! da/create-demo-profile)
|
||||
:tab-index "7"
|
||||
:title (tr "login.create-demo-profile-description")}
|
||||
(tr "login.create-demo-profile")]]]))
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
|
||||
[:& fm/field-error {:form form :field :password-2}]
|
||||
|
||||
[:input.btn-primary
|
||||
[:input.btn-primary.btn-large
|
||||
{:type "submit"
|
||||
:class (when-not (:valid form) "btn-disabled")
|
||||
:disabled (not (:valid form))
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
:on-change (fm/on-input-change form :theme)}
|
||||
[:option {:value "light"} "Default"]]
|
||||
|
||||
[:input.btn-primary
|
||||
[:input.btn-primary.btn-large
|
||||
{:type "submit"
|
||||
:class (when-not (:valid form) "btn-disabled")
|
||||
:disabled (not (:valid form))
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
[:span.share-link-subtitle (t locale "viewer.header.share.subtitle")]
|
||||
[:div.share-link-buttons
|
||||
(if (string? token)
|
||||
[:button.btn-delete {:on-click delete}
|
||||
[:button.btn-warning {:on-click delete}
|
||||
(t locale "viewer.header.share.remove-link")]
|
||||
[:button.btn-primary {:on-click create}
|
||||
(t locale "viewer.header.share.create-link")])]]]]))
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
(when-not anonymous?
|
||||
[:& share-link {:page (:page data)}])
|
||||
(when-not anonymous?
|
||||
[:a {:on-click on-edit}
|
||||
[:a.btn-text-basic.btn-small {:on-click on-edit}
|
||||
(t locale "viewer.header.edit-page")])
|
||||
|
||||
[:& zoom-widget
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
:on-zoom-to-100 #(st/emit! dv/reset-zoom)
|
||||
:on-zoom-to-200 #(st/emit! dv/zoom-to-200)}]
|
||||
|
||||
[:span.btn-fullscreen.tooltip.tooltip-bottom
|
||||
[:span.btn-icon-dark.btn-small.tooltip.tooltip-bottom
|
||||
{:alt (t locale "viewer.header.fullscreen")
|
||||
:on-click toggle-fullscreen}
|
||||
(if fullscreen?
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
locale (i18n/use-locale)]
|
||||
|
||||
[:div.menu-section
|
||||
[:div.menu-button {:on-click #(reset! show-menu? true)} i/actions]
|
||||
[:div.btn-icon-dark.btn-small {:on-click #(reset! show-menu? true)} i/actions]
|
||||
[:div.project-tree {:alt (t locale "header.sitemap")
|
||||
:class (classnames :selected (contains? layout :sitemap))
|
||||
:on-click toggle-sitemap}
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
:on-zoom-to-100 #(st/emit! dw/reset-zoom)
|
||||
:on-zoom-to-200 #(st/emit! dw/zoom-to-200)}]
|
||||
|
||||
[:a.preview-button
|
||||
[:a.btn-icon-dark.btn-small
|
||||
{;; :target "__blank"
|
||||
:alt (t locale "workspace.header.viewer")
|
||||
:href (str "#" view-url)} i/play]]]))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue