This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Dark Theme Variables */ | |
:root { | |
--color-neutral-0: #181a1f; | |
--color-neutral-1: #24262c; | |
--color-neutral-2: #2f323a; | |
--color-neutral-3: #3a3f48; | |
--color-neutral-4: #464b56; | |
--color-neutral-5: #5e6471; | |
--color-neutral-6: #777f8d; | |
--color-neutral-7: #949ca8; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* MyCompanyDatePicker*/ | |
.my-company-picker input.form-control[data-input] { | |
background-color: var(--color-neutral-0); | |
border: var(--border-size-s) solid var(--color-neutral-6); | |
border-radius: var(--border-radius-1); | |
color: var(--color-neutral-10); | |
} | |
.my-company-picker input.form-control[data-input].active { | |
border-color: var(--color-primary); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class MyCompanyDatePicker { | |
// Public field declarations; | |
pickerId; | |
// Private field declarations | |
#onDateSelectEvent; | |
constructor(datePickerId, onDateSelectEventHandler){ | |
this.pickerId = datePickerId; | |
this.#onDateSelectEvent = onDateSelectEventHandler; | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="card card-sectioned flex-directon-column"> | |
<div class="card-image"></div> | |
<div class="card-sectioned-top flex-direction-column"> | |
<div class="card-title"></div> | |
<div class="card-content"></div> | |
<div class="card-bottom"></div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
osui-section::part(title) { | |
border-bottom: 1px solid red; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="section-title" part="title"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script type="module"> | |
import { HTML5Element } from "./html5Element.html"; | |
window.customElements.define("my-html5-element", HTML5Element); | |
</script> | |
</head> | |
<body> | |
<my-html5-element></my-html5-element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script type="module"> | |
import { HTML5Element } from "./html5Element.html"; | |
window.customElements.define("my-html5-element", HTML5Element); | |
</script> | |
</head> | |
<body> | |
<my-html5-element></my-html5-element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="module"> | |
let moduleDocument = import.meta.document; | |
class HTML5Element extends HTMLElement { | |
constructor() { | |
super(); | |
} | |
} | |
export { HTML5Element }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Card extends HTMLElement { | |
constructor() { | |
super(); | |
const shadowRoot = this.attachShadow({mode: 'open'}); | |
shadowRoot.innerHTML = ` | |
<style>.card { … }</style> | |
<div class="card">…</div>`; |
NewerOlder