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

feat: ajouts de composants basiques

Browse source
This commit is contained in:
Kazhnuz 2024-09-10 22:30:42 +02:00
parent 2975f656e8
commit 238a931849
7 changed files with 77 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -19,7 +19,21 @@
<p>Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit</mark>, sed do. </p>
<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>
<img src="https://via.placeholder.com/800x600/" alt="">
<p>
<button>Bouton</button>
<a href="#" class="button">Bouton lien</a>
<a class="button">Bouton non cliquable mais lien</a>
<span class="button">Bouton span</span>
<br />
<button disabled>Bouton disabled</button>
<a href="#" class="button disabled">Bouton lien disabled</a>
<br />
<a href="#" class="badge">Badge lien</a>
<span class="badge">Badge span</span>
<br />
<a href="#" class="button link">Bouton lien .link</a>
</p>
<main>
<section>
<ul>
@ -54,6 +68,7 @@
<td>Row 2, Column 3</td>
</tr>
</table>
<img src="https://via.placeholder.com/800x600/" alt="">
<footer>
<small>©
<script>document.write(new Date().getFullYear())</script> Your company name. All Rights Reserved.

14
src/_buttons.scss
View file

@ -1,14 +0,0 @@
a.button, a.button:visited, button, input[type=submit] {
font-size: 1rem;
background-color: var(--color-accent);
color: var(--color-contrast-accent);
padding: 0.66rem 1rem;
margin-bottom: 0.66rem;
border-radius: var(--button-radius);
transition: background-color .5s ease;
border: none;
&:hover {
background-color: var(--color-accent-hover);
}
}

6
src/_typography.scss
View file

@ -17,7 +17,7 @@ mark {
border-radius: 0.1rem;
}
a {
a[href] {
color: var(--color-accent-text);
outline-color: var(--color-accent-text);
text-decoration: underline dashed 1px;
@ -27,7 +27,7 @@ a {
color: var(--color-accent-text);
}
&:hover,
&:hover:not(:disabled):not(.disabled),
&:active {
background-color: var(--color-link-hover);
text-decoration: none;
@ -39,7 +39,7 @@ mark {
color: var(--color-accent-text);
}
a:focus-visible,
a[href]:focus-visible,
input:focus-visible {
outline-color: var(--color-accent-text);
outline-style: dashed;

43
src/components/_buttons.scss Normal file
View file

@ -0,0 +1,43 @@
.button, .button:visited, button, input[type=submit], .badge {
font-size: 1em;
background-color: var(--color-accent);
color: var(--color-contrast-accent);
padding: 0.66rem 1rem;
margin-bottom: 0.66rem;
border-radius: var(--button-radius);
line-height: 1;
border: none;
display: inline-block;
}
a[href].button:not(.link), a[href].button:visited, button, input[type=submit], a[href].badge:not(.link), a[href].badge:visited {
color: var(--color-contrast-accent);
text-decoration: none;
transition: background-color .5s ease;
&:hover:not(:disabled):not(.disabled) {
background-color: var(--color-accent-hover);
}
}
.button.link, .badge.link {
color: var(--color-accent-text);
background-color: transparent;
&:hover:not(:disabled):not(.disabled) {
background-color: var(--color-link-hover);
}
&.outline {
border: 1px solid var(--color-accent-text);
text-decoration: none;
}
}
.badge {
font-size: 0.8em;
padding: 0.33rem .5rem;
}
:disabled, .disabled {
filter: #{"grayscale(1)"};
opacity: 0.5;
}

3
src/components/_cards.scss Normal file
View file

@ -0,0 +1,3 @@
.card {
border-radius: var(--card-radius);
}

8
src/components/_well.scss Normal file
View file

@ -0,0 +1,8 @@
.alert {
border-radius: var(--card-radius);
}
.alert {
background-color: var(--color-accent-background);
color: var(--color-accent-text);
}

13
src/main.scss
View file

@ -22,13 +22,8 @@
@import 'core';
@import 'typography';
@import 'buttons';
.card, .alert {
border-radius: var(--card-radius);
}
.alert {
background-color: var(--color-accent-background);
color: var(--color-accent-text);
}
// Liste des composants
@import 'components/buttons';
@import 'components/cards';
@import 'components/well';