beenull/simple-note
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

created .--flex-column and .--flex-grow helper .class

Browse source 
used on element that needed to be viewport height, except for .simple-note__input--body where it only needs to grow.
This commit is contained in:
westtle 2024-02-07 13:08:26 +07:00
parent e330152df7
commit 4a8408ed9c
2 changed files with 10 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/styles/style.css
View file

@ -100,17 +100,14 @@ textarea {
::placeholder { color: hsl(var(--color-3)); }
html,
body,
main,
.simple-note,
.simple-note__inputs {
/* Helper */
.--flex-column {
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* Helper */
.--flex-grow { flex-grow: 1; }
.--sr-only {
border: none;
@ -216,7 +213,6 @@ body {
}
.simple-note__input--body {
flex-grow: 1;
font-family: var(--font-1);
font-size: 1rem;
font-weight: 400;

12
index.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<html data-theme="light" lang="en" dir="ltr">
<html class="--flex-column --flex-grow" data-theme="light" lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="author" content="westtle">
@ -12,7 +12,7 @@
<link rel="icon" type="image/x-icon" href="#">
<link rel="stylesheet" type="text/css" href="./assets/styles/style.css">
</head>
<body>
<body class="--flex-column --flex-grow">
<aside class="settings">
<button class="settings__button settings__button--toggle-settings" aria-label="Settings" aria-describedby="settings__button-description--toggle-settings" aria-expanded="false" aria-controls="settings__buttons">
<svg class="settings__button-svg" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@ -76,14 +76,14 @@
</ul>
</aside>
<main>
<section class="simple-note">
<main class="--flex-column --flex-grow">
<section class="simple-note --flex-column --flex-grow">
<h1 class="--sr-only">Simple Note</h1>
<div class="simple-note__inputs">
<div class="simple-note__inputs --flex-column --flex-grow">
<label class="simple-note__label simple-note__label--title --sr-only" for="simple-note__input--title">Note Title</label>
<input id="simple-note__input--title" class="simple-note__input simple-note__input--title" type="text" placeholder="Title..." spellcheck="false">
<label class="simple-note__label simple-note__label--body --sr-only" for="simple-note__input--body">Note Content</label>
<textarea id="simple-note__input--body" class="simple-note__input simple-note__input--body" placeholder="Your content here..." spellcheck="false"></textarea>
<textarea id="simple-note__input--body" class="simple-note__input simple-note__input--body --flex-grow" placeholder="Your content here..." spellcheck="false"></textarea>
</div>
</section>
</main>