3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 23:48:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Improve dashboard and onboarding css

Browse source
This commit is contained in:
Eva 2022-08-03 13:38:17 +02:00
parent 390ad34b13
commit e863ef7dbf
11 changed files with 149 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

41
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -8,10 +8,12 @@
font-size: $fs14;
height: 100%;
overflow: hidden;
overflow-y: auto;
.grid-row {
display: grid;
width: 100%;
width: 99%;
margin-left: 13px;
}
.grid-item {
@ -92,12 +94,13 @@
}
.item-info {
color: $color-gray-30;
color: $color-gray-20;
display: flex;
flex-direction: column;
padding: $size-2;
text-align: left;
width: 100%;
font-size: $fs12;
h3 {
border: 1px solid transparent;
@ -112,6 +115,10 @@
width: 100%;
white-space: nowrap;
line-height: 27px;
max-width: 260px;
@media #{$bp-max-1366} {
max-width: 230px;
}
}
span.date {
@ -323,32 +330,34 @@
}
.grid-empty-placeholder {
border-radius: $br-small;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 200px;
margin: $size-4;
padding: 24px;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23E3E3E3FF' stroke-width='3' stroke-dasharray='8%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
border-radius: $br-huge;
display: grid;
background-color: rgba(227, 227, 227, 0.3);
padding: 13px;
margin-right: 13px;
.create-new {
background-color: transparent;
background-color: white;
border: 2px solid $color-gray-10;
width: 200px;
height: 100%;
height: 158px;
cursor: pointer;
color: $color-gray-30;
color: $color-black;
border-radius: 3px;
margin: 0.5rem;
&:hover {
color: $color-primary-dark;
border: 2px solid $color-primary;
}
}
&.search {
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
height: 200px;
background: $color-white;
border: 1px dashed #e3e3e3;
border-radius: 0;
}
svg {

1
frontend/resources/styles/main/partials/dashboard-header.scss
View file

@ -83,6 +83,7 @@
font-size: $fs22;
font-weight: 600;
z-index: 10;
margin-left: 13px;
}
.context-menu.is-open {

7
frontend/resources/styles/main/partials/dashboard.scss
View file

@ -6,13 +6,11 @@
.dashboard-container {
background-color: $color-dashboard;
border-top-right-radius: $br-huge;
border-top-left-radius: $br-huge;
flex: 1 0 0;
margin-right: $size-4;
overflow-y: auto;
user-select: none;
width: 100%;
&.no-bg {
background-color: transparent;
}
@ -35,13 +33,14 @@
align-items: center;
margin-top: $size-4;
padding: $size-1 $size-1 $size-1 $size-2;
width: 100%;
width: 99%;
height: 40px;
.project-name-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 32px;
margin-left: 13px;
}
.show-more {
align-items: center;

10
frontend/resources/styles/main/partials/modal.scss
View file

@ -1352,15 +1352,21 @@
.icon {
display: flex;
align-items: center;
justify-content: center;
background: #31efb8;
width: 28px;
height: 28px;
border-radius: 50%;
svg {
height: 16px;
width: 16px;
fill: $color-white;
fill: $color-black;
}
}
.feature-txt {
margin: 0;
margin-left: 16px;
margin-left: 13px;
color: $color-white;
font-size: $fs14;
display: flex;