mxnticek/MNotes
1
0
Fork 0
mirror of https://github.com/thejakubruzicka/MNotes.git synced 2025-07-10 22:44:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

New version. Add Material UI implementation with theme customization, about dialog, and news system

Browse source
This commit is contained in:
VlastikYoutubeKo 2025-05-20 21:38:31 +02:00
parent 5bc9c9bdb1
commit 1d58835a65
190 changed files with 12296 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

28
components-wiki/figures/select/theming-filled.html Normal file
View file

@ -0,0 +1,28 @@
<div class="figure-wrapper">
<figure
class="styled-example filled"
title="Filled select theming example"
aria-label="Image of a filled select with a different theme applied"
>
<style>
.styled-example.filled {
--md-filled-select-text-field-container-shape: 0px;
--md-filled-select-text-field-container-color: #f7faf9;
--md-filled-select-text-field-input-text-color: #005353;
--md-filled-select-text-field-input-text-font: system-ui;
}
.styled-example.filled md-filled-select::part(menu) {
--md-menu-container-color: #f4fbfa;
--md-menu-container-shape: 0px;
}
</style>
<md-filled-select>
<md-select-option selected value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="tomato">
<div slot="headline">Tomato</div>
</md-select-option>
</md-filled-select>
</figure>
</div>

34
components-wiki/figures/select/theming-outlined.html Normal file
View file

@ -0,0 +1,34 @@
<div class="figure-wrapper">
<figure
class="styled-example outlined"
title="Outlined select theming example"
aria-label="Image of an outlined select with a different theme applied"
>
<style>
.figure-wrapper figure {
padding-block: 16px;
}
.styled-example {
background-color: #f4fbfa;
}
.styled-example.outlined {
--md-outlined-select-text-field-outline-color: #6e7979;
--md-outlined-select-text-field-container-shape: 0px;
--md-outlined-select-text-field-input-text-color: #005353;
--md-outlined-select-text-field-input-text-font: system-ui;
}
.styled-example.outlined md-outlined-select::part(menu) {
--md-menu-container-color: #f4fbfa;
--md-menu-container-shape: 0px;
}
</style>
<md-outlined-select>
<md-select-option selected value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="tomato">
<div slot="headline">Tomato</div>
</md-select-option>
</md-outlined-select>
</figure>
</div>

34
components-wiki/figures/select/usage.html Normal file
View file

@ -0,0 +1,34 @@
<div class="figure-wrapper">
<style>
main > .figure-wrapper {
/* prevent scrolling bars on dropdown menu open */
overflow: visible;
/* unset page styles */
--md-list-item-container-shape: 0px;
}
</style>
<figure
style="justify-content: center; gap: 8px"
title="Example usage of an outlined dropdown menu and a filled dropdown menu."
aria-label="An outlined dropdown menu filled with Apple, and a filled dropdown menu."
>
<md-outlined-select>
<md-select-option aria-label="blank"></md-select-option>
<md-select-option selected value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="apricot">
<div slot="headline">Apricot</div>
</md-select-option>
</md-outlined-select>
<md-filled-select>
<md-select-option aria-label="blank"></md-select-option>
<md-select-option value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="apricot">
<div slot="headline">Apricot</div>
</md-select-option>
</md-filled-select>
</figure>
</div>