mirror of
https://github.com/penpot/penpot.git
synced 2025-05-28 13:26:12 +02:00
🎉 Add basic interaction to shapes
This commit is contained in:
parent
49023117c3
commit
1e898f94f3
32 changed files with 1024 additions and 226 deletions
|
@ -52,6 +52,7 @@
|
|||
@import 'main/partials/sidebar-align-options';
|
||||
@import 'main/partials/sidebar-element-options';
|
||||
@import 'main/partials/sidebar-icons';
|
||||
@import 'main/partials/sidebar-interactions';
|
||||
@import 'main/partials/sidebar-layers';
|
||||
@import 'main/partials/sidebar-sitemap';
|
||||
@import 'main/partials/sidebar-document-history';
|
||||
|
|
|
@ -7,12 +7,9 @@
|
|||
|
||||
.element-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.element-icons {
|
||||
background-color: $color-gray-60;
|
||||
border: 1px solid $color-gray-60;
|
||||
|
@ -307,6 +304,10 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
&.dropdown-separator:not(:last-child) {
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
}
|
||||
|
||||
&.dropdown-label:not(:first-child) {
|
||||
border-top: 1px solid $color-gray-10;
|
||||
}
|
||||
|
@ -488,6 +489,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.navigate-icon {
|
||||
background-color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
margin-left: $small;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
fill: $color-gray-30;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: $color-gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
|
@ -4,3 +4,21 @@
|
|||
//
|
||||
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.interactions-help {
|
||||
font-size: $fs12;
|
||||
margin: 0 $medium;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.interactions-help-icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin: $medium auto;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-40;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -111,11 +111,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-window-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.element-list {
|
||||
|
|
|
@ -42,6 +42,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sitemap-zone {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
@ -88,7 +112,7 @@
|
|||
.options-zone {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 300px;
|
||||
width: 350px;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
|
||||
|
@ -223,6 +247,40 @@
|
|||
|
||||
}
|
||||
|
||||
.custom-select-dropdown {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 12;
|
||||
width: 200px;
|
||||
max-height: 30rem;
|
||||
min-width: 7rem;
|
||||
overflow-y: auto;
|
||||
|
||||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
|
||||
li {
|
||||
color: $color-gray-60;
|
||||
cursor: pointer;
|
||||
font-size: $fs14;
|
||||
display: flex;
|
||||
padding: $small $small $small 25px;
|
||||
|
||||
&.selected {
|
||||
background-image: url(/images/icons/tick.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5% 48%;
|
||||
background-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-dropdown {
|
||||
left : 150px;
|
||||
top: 45px;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue