mirror of
https://github.com/penpot/penpot.git
synced 2026-09-14 07:59:36 +00:00
add images library grid styles
This commit is contained in:
elhombretecla
parent
dad430de6c
commit
da5ac3bda3
@ -59,15 +59,11 @@
|
|||||||
.dashboard-grid-content {
|
.dashboard-grid-content {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 60vh;
|
min-height: 60vh;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.dashboard-grid-row {
|
.dashboard-grid-row {
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -119,6 +115,7 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// PROJECTS, ELEMENTS & ICONS GRID
|
||||||
&.project-th {
|
&.project-th {
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
border-bottom: 2px solid lighten($color-gray-light, 12%);
|
border-bottom: 2px solid lighten($color-gray-light, 12%);
|
||||||
@ -195,6 +192,40 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// IMAGES SECTION
|
||||||
|
&.images-th {
|
||||||
|
background-color: $color-white;
|
||||||
|
border-bottom: 2px solid lighten($color-gray-light, 12%);
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $main-ui-color;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: $main-ui-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding: $small;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
@include text-ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item-th {
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
border-top-left-radius: $br-medium;
|
||||||
|
border-top-right-radius: $br-medium;
|
||||||
|
height: 70%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.grid-item-image {
|
.grid-item-image {
|
||||||
svg {
|
svg {
|
||||||
height: 20%;
|
height: 20%;
|
||||||
@ -221,6 +252,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// STYLES FOR LIBRARIES
|
// STYLES FOR LIBRARIES
|
||||||
&.library {
|
&.library {
|
||||||
padding: $medium $medium $medium 250px;
|
padding: $medium $medium $medium 250px;
|
||||||
|
|||||||
@ -41,87 +41,46 @@
|
|||||||
[own]
|
[own]
|
||||||
(html
|
(html
|
||||||
[:div.dashboard-grid-content
|
[:div.dashboard-grid-content
|
||||||
[:div.grid-item.add-project
|
[:div.dashboard-grid-row
|
||||||
{on-click #(udl/open! :new-element)}
|
[:div.grid-item.add-project
|
||||||
[:span "+ New element"]]
|
{on-click #(udl/open! :new-element)}
|
||||||
[:div.grid-item.project-th
|
[:span "+ New image"]]
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
[:div.grid-item.images-th
|
||||||
[:div.project-th-actions
|
[:div.grid-item-th
|
||||||
[:div.project-th-icon.edit i/pencil]
|
{:style
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
{:background-image "url('https://images.unsplash.com/photo-1455098934982-64c622c5e066?crop=entropy&fit=crop&fm=jpg&h=1025&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400')"}}]
|
||||||
[:div.grid-item.project-th
|
[:span "image_name.jpg"]]
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
[:div.grid-item.images-th
|
||||||
[:div.project-th-actions
|
[:div.grid-item-th
|
||||||
[:div.project-th-icon.edit i/pencil]
|
{:style
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
{:background-image "url('https://images.unsplash.com/photo-1422393462206-207b0fbd8d6b?crop=entropy&fit=crop&fm=jpg&h=1025&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925')"}}]
|
||||||
[:div.grid-item.project-th
|
[:span "image_name_long_name.jpg"]]
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
[:div.grid-item.images-th
|
||||||
[:div.project-th-actions
|
[:div.grid-item-th
|
||||||
[:div.project-th-icon.edit i/pencil]
|
{:style
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
{:background-image "url('https://images.unsplash.com/photo-1441986380878-c4248f5b8b5b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=486f09671860a11e70bdd0a45e7c5014')"}}]
|
||||||
[:div.grid-item.project-th
|
[:span "image_name.jpg"]]
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
[:div.grid-item.images-th
|
||||||
[:div.project-th-actions
|
[:div.grid-item-th
|
||||||
[:div.project-th-icon.edit i/pencil]
|
{:style
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
{:background-image "url('https://images.unsplash.com/photo-1423768164017-3f27c066407f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=712b919f3a2f6fc34f29040e8082b6d9')"}}]
|
||||||
[:div.grid-item.project-th
|
[:span "image_name_big_long_name.jpg"]]
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
[:div.grid-item.images-th
|
||||||
[:div.project-th-actions
|
[:div.grid-item-th
|
||||||
[:div.project-th-icon.edit i/pencil]
|
{:style
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
{:background-image "url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=765abd6dc931b7184e9795d8494966ed')"}}]
|
||||||
[:div.grid-item.project-th
|
[:span "image_name.jpg"]]
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
[:div.grid-item.images-th
|
||||||
[:div.project-th-actions
|
[:div.grid-item-th
|
||||||
[:div.project-th-icon.edit i/pencil]
|
{:style
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
{:background-image "url('https://images.unsplash.com/photo-1447678523326-1360892abab8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=91663afcd23da14f76cc8229c1780d47')"}}]
|
||||||
[:div.grid-item.project-th
|
[:span "image_name.jpg"]]]]))
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
|
||||||
[:div.project-th-actions
|
|
||||||
[:div.project-th-icon.edit i/pencil]
|
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
|
||||||
[:div.grid-item.project-th
|
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
|
||||||
[:div.project-th-actions
|
|
||||||
[:div.project-th-icon.edit i/pencil]
|
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
|
||||||
[:div.grid-item.project-th
|
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
|
||||||
[:div.project-th-actions
|
|
||||||
[:div.project-th-icon.edit i/pencil]
|
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
|
||||||
[:div.grid-item.project-th
|
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
|
||||||
[:div.project-th-actions
|
|
||||||
[:div.project-th-icon.edit i/pencil]
|
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
|
||||||
[:div.grid-item.project-th
|
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
|
||||||
[:div.project-th-actions
|
|
||||||
[:div.project-th-icon.edit i/pencil]
|
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
|
||||||
[:div.grid-item.project-th
|
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
|
||||||
[:div.project-th-actions
|
|
||||||
[:div.project-th-icon.edit i/pencil]
|
|
||||||
[:div.project-th-icon.delete i/trash]]]
|
|
||||||
[:div.grid-item.project-th
|
|
||||||
[:span.grid-item-image i/image]
|
|
||||||
[:h3 "Custom element"]
|
|
||||||
[:div.project-th-actions
|
|
||||||
[:div.project-th-icon.edit i/pencil]
|
|
||||||
[:div.project-th-icon.delete i/trash]]]]))
|
|
||||||
|
|
||||||
(def ^:const ^:private grid
|
(def ^:const ^:private grid
|
||||||
(mx/component
|
(mx/component
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user