Skip to content

Instantly share code, notes, and snippets.

View BenOsodrac's full-sized avatar

Bernardo Cardoso BenOsodrac

1 follower · 0 following
View GitHub Profile
@BenOsodrac
BenOsodrac / dark-theme.css
Created October 18, 2022 22:33
Dark Theme
/* 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;
@BenOsodrac
BenOsodrac / picker.css
Created October 18, 2022 22:30
MyCompanyDatePicker CSS
/* 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);
@BenOsodrac
BenOsodrac / classTemplate.js
Last active October 18, 2022 21:31
Class Template
class MyCompanyDatePicker {
// Public field declarations;
pickerId;
// Private field declarations
#onDateSelectEvent;
constructor(datePickerId, onDateSelectEventHandler){
this.pickerId = datePickerId;
this.#onDateSelectEvent = onDateSelectEventHandler;
@BenOsodrac
BenOsodrac / CardSectioned BEM
Created January 25, 2021 12:03
<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>
@BenOsodrac
BenOsodrac / WebComponents - using ::part.css
Created May 26, 2020 10:22
osui-section::part(title) {
border-bottom: 1px solid red;
}
@BenOsodrac
BenOsodrac / WebComponents - using ::part.html
Created May 26, 2020 10:21
<div class="section-title" part="title"></div>
@BenOsodrac
BenOsodrac / WebComponents - HTMLModules Import.html
Created May 26, 2020 10:20
<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>
@BenOsodrac
BenOsodrac / WebComponents - HTMLModules Import.html
Created May 26, 2020 10:20
<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>
@BenOsodrac
BenOsodrac / WebComponents - HTMLModules Export.html
Created May 26, 2020 10:19
<script type="module">
let moduleDocument = import.meta.document;
class HTML5Element extends HTMLElement {
constructor() {
super();
}
}
export { HTML5Element };
@BenOsodrac
BenOsodrac / WebComponents - ShadowDOM & CustomElements.js
Created May 26, 2020 10:16
class Card extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>.card { … }</style>
<div class="card">…</div>`;