Foundry/.dungeon
0
0
Fork 0
Code Issues 57 Pull requests Projects Releases 7 Packages Wiki Activity Actions

Merge pull request #175 from Oliver-Akins/feature/incrementer-component

Browse source 
Custom Web Components
This commit is contained in:
Oliver 2024-04-13 14:45:43 -04:00 • committed by GitHub
commit 118dcfb71c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 543 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/sheets/actor/char-sheet/v2/pages/inventory.scss
View file

@ -68,7 +68,7 @@
.bytes-panel {
display: grid;
grid-template-columns: 1fr min-content 50px min-content;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;

7
styles/v3/components/common.scss Normal file
View file

@ -0,0 +1,7 @@
// Disclaimer: This CSS is used by a custom web component and is scoped to JUST
// the corresponding web component. This should only be imported by web component
// style files.
:host {
display: inline-block;
}

23
styles/v3/components/icon.scss Normal file
View file

@ -0,0 +1,23 @@
/*
Disclaimer: This CSS is used by a custom web component and is scoped to JUST
the corresponding web component. Importing this into other files is forbidden
*/
$default-size: 1rem;
@use "./common.scss";
div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
svg {
width: var(--size, $default-size);
height: var(--size, $default-size);
fill: var(--fill);
stroke: var(--stroke);
}

63
styles/v3/components/incrementer.scss Normal file
View file

@ -0,0 +1,63 @@
/*
Disclaimer: This CSS is used by a custom web component and is scoped to JUST
the corresponding web component. Importing this into other files is forbidden
*/
$default-border-radius: 4px;
$default-height: 1.5rem;
@use "../mixins/material";
@use "./common.scss";
div {
display: grid;
grid-template-columns: var(--height, $default-height) var(--width, 50px) var(--height, $default-height);
grid-template-rows: var(--height, 1fr);
border-radius: var(--border-radius, $default-border-radius);
@include material.elevate(2);
&:hover {
@include material.elevate(4);
}
&:focus-within {
@include material.elevate(6);
}
}
span, input {
border: none;
outline: none;
background: none;
color: inherit;
}
input {
font-family: var(--font-family, inherit);
text-align: center;
font-size: var(--font-size, inherit);
padding: 2px 4px;
&::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0
}
}
.increment, .decrement {
aspect-ratio: 1 / 1;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.increment {
border-radius: 0 var(--border-radius, $default-border-radius) var(--border-radius, 4px) 0;
}
.decrement {
border-radius: var(--border-radius, $default-border-radius) 0 0 var(--border-radius, $default-border-radius);
}