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

changed sr-only to --sr-only

Browse source 
used double dash (--) to mark a helper class.
This commit is contained in:
westtle 2024-02-07 12:52:33 +07:00
parent 3b4963d77c
commit e330152df7
2 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/styles/style.css
View file

@ -100,7 +100,19 @@ textarea {
::placeholder { color: hsl(var(--color-3)); }
.sr-only {
html,
body,
main,
.simple-note,
.simple-note__inputs {
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* Helper */
.--sr-only {
border: none;
width: 0.0625rem;
height: 0.0625rem;
@ -116,16 +128,6 @@ textarea {
clip-path: inset(50%);
}
html,
body,
main,
.simple-note,
.simple-note__inputs {
display: flex;
flex-direction: column;
flex-grow: 1;
}
body {
color: hsl(var(--color-1));
background-color: hsl(var(--color-2));

14
index.html
View file

@ -19,7 +19,7 @@
<title>Settings</title>
<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
<span id="settings__button-description--toggle-settings" class="settings__button-description settings__button-description--toggle-settings sr-only">Press to open settings.</span>
<span id="settings__button-description--toggle-settings" class="settings__button-description settings__button-description--toggle-settings --sr-only">Press to open settings.</span>
</button>
<ul id="settings__buttons" class="settings__buttons" aria-hidden="true">
<span class="settings__separator" aria-hidden="true"></span>
@ -33,7 +33,7 @@
<title>Theme</title>
<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<span id="settings__button-description--theme" class="settings__button-description settings__button-description--theme sr-only">Press to change to dark theme.</span>
<span id="settings__button-description--theme" class="settings__button-description settings__button-description--theme --sr-only">Press to change to dark theme.</span>
</button>
</li>
<span class="settings__separator" aria-hidden="true"></span>
@ -43,7 +43,7 @@
<title>Clear Note</title>
<polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
<span id="settings__button-description--clear" class="settings__button-description settings__button-description--clear sr-only">Press to delete all contents of the note.</span>
<span id="settings__button-description--clear" class="settings__button-description settings__button-description--clear --sr-only">Press to delete all contents of the note.</span>
</button>
</li>
<li class="settings__button-item">
@ -52,7 +52,7 @@
<title>Download Note</title>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span id="settings__button-description--download" class="settings__button-description settings__button-description--download sr-only">Press to download the contents of the note.</span>
<span id="settings__button-description--download" class="settings__button-description settings__button-description--download --sr-only">Press to download the contents of the note.</span>
</button>
</li>
<span class="settings__separator" aria-hidden="true"></span>
@ -78,11 +78,11 @@
<main>
<section class="simple-note">
<h1 class="sr-only">Simple Note</h1>
<h1 class="--sr-only">Simple Note</h1>
<div class="simple-note__inputs">
<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">
<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>
<textarea id="simple-note__input--body" class="simple-note__input simple-note__input--body" placeholder="Your content here..." spellcheck="false"></textarea>
</div>
</section>