diff --git a/exemples/exemples.md b/exemples/exemples.md index 8262b79..3d08875 100644 --- a/exemples/exemples.md +++ b/exemples/exemples.md @@ -43,4 +43,37 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut en ###### Titre H6 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat. \ No newline at end of file +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat. + +## Input + +Les différents types d'input ont des styles + +
\ No newline at end of file diff --git a/scss/moineau.scss b/scss/moineau.scss index 5720524..3494424 100644 --- a/scss/moineau.scss +++ b/scss/moineau.scss @@ -6,7 +6,7 @@ --accent-color-light: #d0ebff; --text-color: #212529; - --border-color: rgba(0,0,0,0.1); + --border-color: rgba(0,0,0,0.15); --hover-color: rgba(0,0,0,0.05); --background-color: #f8f9fa; @@ -14,6 +14,8 @@ --accent-color: var(--accent-color-dark); --accent-color-back: var(--accent-color-light); + + --border-radius: 6px; } @media (prefers-color-scheme: dark) { @@ -77,6 +79,7 @@ table, details main, .p, +input, article { padding: 0; margin: 0 0 1rem 0; @@ -200,6 +203,81 @@ summary { margin-left: auto; } +/* ------------------ INPUT ------------------- */ + +a, button, input { + outline-color: var(--accent-color); + outline-style: none; + outline-width: 2px; + &:focus-visible { + outline-style: dashed; + } +} + +input { + display:block; + background-color: var(--background-color); + border-radius: var(--border-radius); + border: 1px solid var(--border-color); + outline-offset: 2px; + padding: .5rem; + color: var(--text-color); + &:hover { + background-color: var(--hover-color); + } +} + +label { + font-size: .9rem; + font-weight: bolder; +} + +input[type=checkbox], input[type=radio] { + display: inline-block; + appearance: none; + aspect-ratio: 1; + font-size: 1rem; + height:1em; + width:1em; + box-sizing: border-box; + line-height: 1; + padding:0; + margin: 0 .25em; + border-radius: 3px; + border: 1px solid var(--border-color); + content: ""; + position: relative; + top: .1rem; + + &:checked { + background-color: var(--accent-color); + box-shadow:inset 0px 0px 0px 3px var(--background-color); + } + + &:hover { + filter:brightness(.9); + } +} + +input[type=radio] { + border-radius: 9999px; +} + + +button, .button, input[type=submit], input[type=reset], input[type=button] { + background-color: var(--accent-color); + color: var(--background-color); + border: none; + padding: .5rem 1rem; + border-radius: var(--border-radius); + outline-offset: 2px; + display: inline-block; + + &:hover { + background-color: var(--accent-color); + outline-style: solid; + } +} /* ------------------ SPECIAL STYLING ------------------- */