Add CSS icons and with-sidebar files, rename cluster to flex, move menu inside Menu component
This commit is contained in:
parent
6f2250c847
commit
d85a5b3d2f
6 changed files with 167 additions and 74 deletions
|
|
@ -10,19 +10,20 @@
|
|||
/* COMPOSITIONS */
|
||||
@import 'src/1.1.compositions.auto-grid.css';
|
||||
@import 'src/1.2.compositions.grid.css';
|
||||
@import 'src/1.3.compositions.cluster.css';
|
||||
@import 'src/1.3.compositions.flex.css';
|
||||
@import 'src/1.4.compositions.with-sidebar.css';
|
||||
|
||||
/* BLOCKS */
|
||||
@import 'src/2.blocks.button.css';
|
||||
@import 'src/2.blocks.card.css';
|
||||
@import 'src/2.blocks.header.css';
|
||||
@import 'src/2.blocks.menu.css';
|
||||
@import 'src/2.blocks.pill.css';
|
||||
@import 'src/2.blocks.skip-link.css';
|
||||
|
||||
/* UTILITY CLASSES */
|
||||
@import 'src/3.utilities.border.css';
|
||||
@import 'src/3.utilities.flow.css';
|
||||
@import 'src/3.utilities.icons.css';
|
||||
@import 'src/3.utilities.overflow.css';
|
||||
@import 'src/3.utilities.screen-readers.css';
|
||||
@import 'src/3.utilities.size.css';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* CLUSTER COMPOSITION */
|
||||
/* FLEX COMPOSITION */
|
||||
|
||||
.cluster {
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: var(--direction, row);
|
||||
flex-wrap: var(--wrap, wrap);
|
||||
18
src/assets/css/src/1.4.compositions.with-sidebar.css
Normal file
18
src/assets/css/src/1.4.compositions.with-sidebar.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/* SIDEBAR COMPOSITION */
|
||||
|
||||
.with-sidebar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.with-sidebar > :first-child {
|
||||
flex-basis: var(--sidebar-width);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.with-sidebar > :last-child {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
min-inline-size: 50%;
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
/* MENU BLOCK */
|
||||
|
||||
/* Button */
|
||||
|
||||
button[aria-controls="menu"] {
|
||||
padding: 10px;
|
||||
}
|
||||
button[aria-controls="menu"][aria-expanded="true"] {
|
||||
padding: 18px;
|
||||
}
|
||||
button[aria-controls="menu"][aria-expanded="false"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
/* Menu */
|
||||
|
||||
#menu {
|
||||
--flow-space: var(--space-2xl);
|
||||
--direction: column;
|
||||
--vertical-alignment: flex-start;
|
||||
padding: var(--gap);
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
#menu nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
--direction: column;
|
||||
--vertical-alignment: flex-start;
|
||||
--row-gap: var(--space-xs);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 2.5rem; /* 40px */
|
||||
max-height: 2.75rem; /* 44px */
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
}
|
||||
|
||||
#menu .active {
|
||||
background-color: var(--color-grey-50);
|
||||
}
|
||||
43
src/assets/css/src/3.utilities.icons.css
Normal file
43
src/assets/css/src/3.utilities.icons.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* ICONS UTILITY */
|
||||
|
||||
:root {
|
||||
--icon-circle: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='8' stroke='currentColor' stroke-width='1.25'/%3E%3C/svg%3E%0A");
|
||||
--icon-point: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='currentColor'/%3E%3C/svg%3E%0A");
|
||||
--icon-point-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' fill='currentColor'/%3E%3Ccircle cx='50%' cy='50%' r='8' fill='currentColor' opacity='0.2'/%3E%3C/svg%3E%0A");
|
||||
--icon-home: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 10L10 1.875L18.125 10M4.375 11.875V18.125H15.625V11.875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-calendar: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.125 4.375C2.79348 4.375 2.47554 4.5067 2.24112 4.74112C2.0067 4.97554 1.875 5.29348 1.875 5.625V16.875C1.875 17.2065 2.0067 17.5245 2.24112 17.7589C2.47554 17.9933 2.79348 18.125 3.125 18.125H16.875C17.2065 18.125 17.5245 17.9933 17.7589 17.7589C17.9933 17.5245 18.125 17.2065 18.125 16.875V5.625C18.125 5.29348 17.9933 4.97554 17.7589 4.74112C17.5245 4.5067 17.2065 4.375 16.875 4.375H14.375M1.875 9.375H18.125M5.625 1.875V6.875M14.375 1.875V6.875M5.625 4.375H11.875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-check: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
--icon-check-3: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 11.9375L5.2875 16.325C5.40265 16.4746 5.5502 16.5962 5.71906 16.6806C5.88792 16.7651 6.07372 16.8101 6.2625 16.8125C6.44824 16.8146 6.63213 16.7754 6.80078 16.6975C6.96944 16.6197 7.11863 16.5052 7.2375 16.3625L18.125 3.1875' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
--icon-user: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6625 16.125C5.2203 15.2094 6.00426 14.4527 6.93901 13.9276C7.87376 13.4025 8.92787 13.1267 10 13.1267C11.0721 13.1267 12.1262 13.4025 13.061 13.9276C13.9957 14.4527 14.7797 15.2094 15.3375 16.125M13.125 8.125C13.125 9.85089 11.7259 11.25 10 11.25C8.27411 11.25 6.875 9.85089 6.875 8.125C6.875 6.39911 8.27411 5 10 5C11.7259 5 13.125 6.39911 13.125 8.125ZM18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-megaphone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.85 14.4624C11.7448 15.3307 11.3125 16.1262 10.6412 16.687C9.96999 17.2477 9.11024 17.5315 8.23708 17.4805C7.36393 17.4295 6.54305 17.0476 5.94162 16.4125C5.34019 15.7775 5.00346 14.937 5 14.0624V12.0749M17.3 16.3374L2.7125 11.2499C2.47448 11.1669 2.26713 11.0138 2.11767 10.8108C1.96821 10.6078 1.88362 10.3644 1.875 10.1124V8.74991C1.87603 8.49151 1.95711 8.23979 2.10709 8.02937C2.25707 7.81895 2.46858 7.66018 2.7125 7.57491L17.3 2.49991C17.3937 2.46828 17.4935 2.45931 17.5913 2.47374C17.6891 2.48817 17.782 2.5256 17.8626 2.58294C17.9431 2.64028 18.0089 2.7159 18.0545 2.8036C18.1001 2.89129 18.1243 2.98856 18.125 3.08741V15.7499C18.1243 15.8488 18.1001 15.946 18.0545 16.0337C18.0089 16.1214 17.9431 16.197 17.8626 16.2544C17.782 16.3117 17.6891 16.3491 17.5913 16.3636C17.4935 16.378 17.3937 16.369 17.3 16.3374Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-inspiration: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0004 2.26245V4.13745M15.0004 4.04995L13.6754 5.38745M17.8504 7.92495H15.9754M5.00039 4.04995L6.32539 5.38745M2.15039 7.92495H4.02539M14.3754 11.25C14.3783 10.4699 14.1726 9.70317 13.7796 9.02932C13.3865 8.35547 12.8205 7.79897 12.14 7.41746C11.4596 7.03595 10.6895 6.84332 9.90957 6.85952C9.12964 6.87572 8.36823 7.10016 7.70421 7.50959C7.04019 7.91903 6.49773 8.49856 6.13301 9.18815C5.7683 9.87774 5.5946 10.6523 5.6299 11.4316C5.66521 12.2109 5.90825 12.9666 6.33383 13.6204C6.75942 14.2741 7.35207 14.8022 8.05039 15.15V17.3C8.05365 17.4271 8.10645 17.5479 8.19752 17.6366C8.28859 17.7254 8.41073 17.775 8.53789 17.775H11.4629C11.59 17.775 11.7122 17.7254 11.8033 17.6366C11.8943 17.5479 11.9471 17.4271 11.9504 17.3V15.1125C12.6707 14.7539 13.2782 14.2036 13.706 13.5222C14.1338 12.8407 14.3654 12.0545 14.3754 11.25Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
[data-icon] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-icon]::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: var(--icon-size, 1.25rem);
|
||||
height: var(--icon-size, 1.25rem);
|
||||
background: var(--icon-color, currentColor);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: var(--icon-size, 1.25rem);
|
||||
mask-image: var(--icon, var(--icon-circle));
|
||||
}
|
||||
|
||||
[data-icon="home"] {
|
||||
--icon: var(--icon-home)
|
||||
}
|
||||
[data-icon="calendar"] {
|
||||
--icon: var(--icon-calendar)
|
||||
}
|
||||
[data-icon="megaphone"] {
|
||||
--icon: var(--icon-megaphone)
|
||||
}
|
||||
[data-icon="inspiration"] {
|
||||
--icon: var(--icon-inspiration)
|
||||
}
|
||||
|
|
@ -1,35 +1,113 @@
|
|||
<template>
|
||||
<button @click="toggleExpand()" class="btn btn--white | rounded-lg" aria-controls="menu" :aria-expanded="isExpanded">
|
||||
<svg aria-labelledby="menu-toggle" class="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<title id="menu-toggle">Masquer le menu</title>
|
||||
<title id="menu-toggle">{{ isExpanded ? 'Masquer le menu' : 'Afficher le menu' }}</title>
|
||||
<path d="M10.6751 2.625L3.00007 10.3125C2.94028 10.3686 2.89263 10.4364 2.86005 10.5116C2.82748 10.5869 2.81067 10.668 2.81067 10.75C2.81067 10.832 2.82748 10.9131 2.86005 10.9884C2.89263 11.0636 2.94028 11.1314 3.00007 11.1875L10.6751 18.875M17.1876 2.625L9.50007 10.3125C9.38555 10.4293 9.32141 10.5864 9.32141 10.75C9.32141 10.9136 9.38555 11.0707 9.50007 11.1875L17.1876 18.875" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
<aside id="menu" class="cluster | rounded-lg">
|
||||
<h2>Nom du service</h2>
|
||||
<aside v-if="isExpanded" id="menu" class="flex | rounded-lg">
|
||||
<header class="flex">
|
||||
<h2>Nom du service</h2>
|
||||
</header>
|
||||
<nav>
|
||||
<ul class="cluster">
|
||||
<li data-icon="home">
|
||||
<a aria-current="page">Home</a>
|
||||
</li>
|
||||
<li data-icon="megaphone">
|
||||
<a>Notifications</a>
|
||||
</li>
|
||||
<li data-icon="calendar">
|
||||
<a>Réunions</a>
|
||||
</li>
|
||||
<li data-icon="inspirations">
|
||||
<a>Inspirations</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex">
|
||||
<li data-icon="home">
|
||||
<a aria-current="page">Home</a>
|
||||
</li>
|
||||
<li data-icon="megaphone" data-count="4">
|
||||
<a>Notifications</a>
|
||||
</li>
|
||||
<li data-icon="calendar">
|
||||
<a>Réunions</a>
|
||||
<span class="pill pill--secondary">Dans 2h</span>
|
||||
</li>
|
||||
<li data-icon="inspiration">
|
||||
<a>Inspirations</a>
|
||||
<span class="pill pill--secondary">Nouveauté</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
button[aria-controls="menu"] {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 48px;
|
||||
}
|
||||
button[aria-controls="menu"][aria-expanded="true"] {
|
||||
padding: 10px;
|
||||
left: calc(var(--sidebar-width) - var(--space-xl));
|
||||
}
|
||||
button[aria-controls="menu"][aria-expanded="false"] {
|
||||
top: var(--gutter);
|
||||
padding: 18px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
|
||||
#menu {
|
||||
--flow-space: var(--space-2xl);
|
||||
--direction: column;
|
||||
--vertical-alignment: flex-start;
|
||||
width: var(--sidebar-width);
|
||||
padding: var(--gap);
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
#menu header {
|
||||
--horizontal-alignment: center;
|
||||
padding-left: var(--gap);
|
||||
height: 40px;
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
#menu nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#menu ul {
|
||||
--direction: column;
|
||||
--vertical-alignment: flex-start;
|
||||
--row-gap: var(--space-xs);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 2.5rem; /* 40px */
|
||||
max-height: 2.75rem; /* 44px */
|
||||
padding: 0 var(--space-lg);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
#menu li[data-count]::after {
|
||||
content: attr(data-count);
|
||||
display: inline-block;
|
||||
color: var(--color-primary);
|
||||
font-weight: 500;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#menu li .pill {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#menu .active {
|
||||
background-color: var(--color-grey-50);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const isExpanded = ref(true);
|
||||
function toggleExpand() {
|
||||
isExpanded.value != isExpanded.value;
|
||||
}
|
||||
import { ref } from 'vue';
|
||||
const isExpanded = ref(true);
|
||||
function toggleExpand() {
|
||||
isExpanded.value = !isExpanded.value;
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue