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

added .-flex utility class

Browse source 
used display flex in its own class instead in .-flex-column.
This commit is contained in:
westtle 2024-02-11 21:50:55 +07:00
parent ba70d436d0
commit 63defc6dd7
2 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/styles/global.css
View file

@ -108,11 +108,8 @@ ul { list-style: none; }
/* Utility and Helper */ /* Utility and Helper */
.-flex-column { .-flex { display: flex; }
display: flex; .-flex-column { flex-direction: column; }
flex-direction: column;
}
.-flex-grow { flex-grow: 1; } .-flex-grow { flex-grow: 1; }
.--sr-only { .--sr-only {

10
index.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html class="-flex-column -flex-grow" data-theme="light" lang="en" dir="ltr"> <html class="-flex -flex-column -flex-grow" data-theme="light" lang="en" dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="apple-mobile-web-app-title" content="Simple Note"> <meta name="apple-mobile-web-app-title" content="Simple Note">
@ -28,7 +28,7 @@
<link rel="stylesheet" type="text/css" href="./assets/styles/settings.css"> <link rel="stylesheet" type="text/css" href="./assets/styles/settings.css">
<link rel="stylesheet" type="text/css" href="./assets/styles/simple-note.css"> <link rel="stylesheet" type="text/css" href="./assets/styles/simple-note.css">
</head> </head>
<body class="-flex-column -flex-grow"> <body class="-flex -flex-column -flex-grow">
<aside class="settings" data-expanded="false"> <aside class="settings" data-expanded="false">
<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"> <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__svg settings__svg--toggle-settings" 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"> <svg class="settings__svg settings__svg--toggle-settings" 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">
@ -90,10 +90,10 @@
</ul> </ul>
</aside> </aside>
<main class="-flex-column -flex-grow"> <main class="-flex -flex-column -flex-grow">
<section class="simple-note -flex-column -flex-grow"> <section class="simple-note -flex -flex-column -flex-grow">
<h1 class="--sr-only">Simple Note</h1> <h1 class="--sr-only">Simple Note</h1>
<div class="simple-note__inputs -flex-column -flex-grow"> <div class="simple-note__inputs -flex -flex-column -flex-grow">
<label class="simple-note__label simple-note__label--title --sr-only" for="simple-note__input--title">Note Title</label> <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"> <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> <label class="simple-note__label simple-note__label--body --sr-only" for="simple-note__input--body">Note Content</label>