studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

#42 Add styling for Inspirations submenu

Browse source
This commit is contained in:
Timothée Goguely 2024-12-17 16:01:02 +01:00
parent fb99f6fde1
commit 8ea2b3caf1
1 changed files with 28 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/project/brief/add-images-modal/AddImagesModal.vue
View file

@ -16,7 +16,14 @@
:class="{ active: activeTabId === tab.id }" :class="{ active: activeTabId === tab.id }"
@click="activeTabId = tab.id" @click="activeTabId = tab.id"
> >
{{ tab.name }} <span>{{ tab.name }}</span>
<!--
<ul>
<li class="active"><span>Premières Lumières</span></li>
<li><span>Éclat Hivernal</span></li>
<li><span>Crépuscule Doré</span></li>
</ul>
-->
</li> </li>
</ul> </ul>
</nav> </nav>
@ -93,21 +100,23 @@ const deleteIsOpen = false;
#add-images [data-pc-section="content"] { #add-images [data-pc-section="content"] {
height: calc(100% - 3.75rem); height: calc(100% - 3.75rem);
} }
#add-images nav li { #add-images nav li > span {
position: relative; position: relative;
height: var(--space-48); display: inline-block;
min-height: var(--space-48);
border-left: 1px solid var(--color-grey-400); border-left: 1px solid var(--color-grey-400);
padding: var(--space-12) var(--space-16); padding: var(--space-12) var(--space-16);
color: var(--color-grey-400); color: var(--color-grey-400);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
width: 100%;
} }
#add-images nav li:hover, #add-images nav li:hover > span,
#add-images nav li.active { #add-images nav li.active > span {
color: var(--color-grey-800); color: var(--color-grey-800);
border-left-color: var(--color-grey-800); border-left-color: var(--color-grey-800);
} }
#add-images nav li.active::before { #add-images nav > ul > li.active > span::before {
content: ""; content: "";
width: 2px; width: 2px;
position: absolute; position: absolute;
@ -116,6 +125,19 @@ const deleteIsOpen = false;
bottom: 0; bottom: 0;
background: var(--color-grey-800); background: var(--color-grey-800);
} }
#add-images nav > ul > li:not(.active) ul {
display: none;
}
#add-images nav > ul ul > li > span {
min-height: var(--space-32);
padding: var(--space-8) var(--space-16) var(--space-8) var(--space-32);
font-family: var(--font-serif);
font-size: var(--text-sm);
}
#add-images nav > ul ul > li.active > span {
border-left-width: 2px;
}
#add-images [data-pc-name="fileupload"] button { #add-images [data-pc-name="fileupload"] button {
padding: 3rem; padding: 3rem;
aspect-ratio: 1/1; aspect-ratio: 1/1;