3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-30 08:46:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add basic interaction to shapes

Browse source
This commit is contained in:
Andrés Moya 2020-04-27 14:31:57 +02:00
parent 49023117c3
commit 1e898f94f3
32 changed files with 1024 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main-default.scss
View file

@ -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';

32
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -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;

18
frontend/resources/styles/main/partials/sidebar-interactions.scss
View file

@ -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;
}
}

4
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -111,11 +111,13 @@
}
}
}
.tool-window-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
overflow-y: auto;
height: 100%;
width: 100%;
}
.element-list {

60
frontend/resources/styles/main/partials/viewer-header.scss
View file

@ -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;