kazhnuz/mouette
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

feat; support des menus

Browse source
This commit is contained in:
Kazhnuz 2024-09-10 23:12:49 +02:00
parent 0041ab267e
commit 730b14194e
5 changed files with 97 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
index.html
View file

@ -12,10 +12,31 @@
/> />
</head> </head>
<body class="wrapper"> <body class="wrapper">
<nav class="toolbar">
<ul class="menu horizontal">
<li><a href="#">Home</a></li>
<li><a href="#">Mouette</a></li>
<li><span class="active">Exemple</span></li>
</ul>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Mouette</a></li>
<li><span class="active">Exemple</span></li>
</ul>
</nav>
<header> <header>
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
</header> </header>
<div class="alert"><p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit, sed do. </p></div> <nav>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Mouette</a></li>
<li><span class="active">Exemple</span></li>
</ul>
</nav>
<div class="alert"><p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p></div>
<p>Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit</mark>, sed do. </p> <p>Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit</mark>, sed do. </p>
<hr /> <hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem <a href="#">ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem <a href="#">ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
@ -69,6 +90,13 @@
</tr> </tr>
</table> </table>
<img src="https://via.placeholder.com/800x600/" alt=""> <img src="https://via.placeholder.com/800x600/" alt="">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Mouette</a></li>
<li><span class="active">Exemple</span></li>
</ul>
</nav>
<footer> <footer>
<small>© <small>©
<script>document.write(new Date().getFullYear())</script> Your company name. All Rights Reserved. <script>document.write(new Date().getFullYear())</script> Your company name. All Rights Reserved.

9
src/components/_buttons.scss
View file

@ -1,4 +1,4 @@
.button, .button:visited, button, input[type=submit], .badge { .button, .button:visited, button, input[type=submit], .badge, .menu a, .menu span {
font-size: 1em; font-size: 1em;
background-color: var(--color-accent); background-color: var(--color-accent);
color: var(--color-contrast-accent); color: var(--color-contrast-accent);
@ -19,7 +19,7 @@ a[href].button:not(.link), a[href].button:visited, button, input[type=submit], a
} }
} }
.button.link, .badge.link { .button.link, .badge.link, .menu a {
color: var(--color-accent-text); color: var(--color-accent-text);
background-color: transparent; background-color: transparent;
&:hover:not(:disabled):not(.disabled) { &:hover:not(:disabled):not(.disabled) {
@ -32,6 +32,11 @@ a[href].button:not(.link), a[href].button:visited, button, input[type=submit], a
} }
} }
.menu span {
color: var(--color-text);
background-color: transparent;
}
.badge { .badge {
font-size: 0.8em; font-size: 0.8em;
padding: 0.33rem .5rem; padding: 0.33rem .5rem;

50
src/components/_menus.scss Normal file
View file

@ -0,0 +1,50 @@
ul, ol {
&.breadcrumb, &.menu {
display:flex;
list-style-type: none;
li {
margin:0;
}
}
}
.toolbar,
.menu {
padding:.5rem;
&.fullscreen {
margin:0;
border-radius: 0;
}
}
.menu a, .menu span {
margin:0!important;
display: block;
}
.menu:not(.horizontal) {
flex-direction: column;
align-items: stretch;
}
.toolbar .menu {
flex-direction: row;
padding:0;
margin:0;
background-color: transparent;
}
.toolbar {
display:flex;
justify-content: space-between;
}
.breadcrumb {
li:not(:first-child)::before {
content: "/";
padding: 0.3rem;
}
.active {
font-weight: 600;
}
}

7
src/components/_well.scss
View file

@ -2,11 +2,14 @@
blockquote, blockquote,
pre, pre,
.alert, .alert,
.code { .code,
.menu,
.breadcrumb,
.toolbar {
border: 0; border: 0;
border-radius: var(--well-radius); border-radius: var(--well-radius);
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
padding: 1rem .75rem 1rem .75rem; padding: .75rem;
max-width: 100%; max-width: 100%;
background-color: var(--color-background-alt); background-color: var(--color-background-alt);
} }

11
src/main.scss
View file

@ -6,7 +6,7 @@
--color-contrast-accent: white; --color-contrast-accent: white;
--color-link-hover: rgba(0,0,0,0.075); --color-link-hover: rgba(0,0,0,0.075);
--color-background-alt: rgba(0,0,0,0.15); --color-background-alt: rgba(0,0,0,0.075);
--color-text: black; --color-text: black;
--color-background: white; --color-background: white;
@ -14,8 +14,8 @@
--wrapper-size: 800px; --wrapper-size: 800px;
--button-radius: 6px; --button-radius: 6px;
--card-radius:6px; --card-radius:10px;
--well-radius:6px; --well-radius:8px;
--font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Cantarell, Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Cantarell, Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace; --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
} }
@ -24,6 +24,7 @@
@import 'typography'; @import 'typography';
// Liste des composants // Liste des composants
@import 'components/buttons';
@import 'components/cards'; @import 'components/cards';
@import 'components/well'; @import 'components/well';
@import 'components/buttons';
@import 'components/menus';