//-		DS2 core (c) 2024 Alexander McIlwraith 
//-		Core licensed under CC BY-SA 4.0 

extends ../../../core/_master-pattern
block content
	+h(0)
	p Sticky notes provide a way to attach information. They are a DS2 core pattern for making notes. 
	+h(1)
	p Use a sticky when you want to make a note without adding it to the content. 
	+h(2)
	p Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either #[code.language-html.inline float="&#91; right | left &#93;"] or #[code.language-html.inline offset="&#91; top | left &#93;"]. Offset will take negative values in any web measurement unit.
		sticky-note.blue(offset="-10rem 1rem") This #[strong is] a sample sticky. You can drag it out of the way if you need to see the content under it.
		sticky-note(float="right") You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).

	p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements". 	


	tabset#sticky-note
		pre.language-html(tab="html")
			include _sticky-note.pug
		pre.language-pug(tab="pug")
			include _sticky-note.pp
		pre.language-css(data-tab="css") 
			include sticky-note.css
		div(tab="scss") 
			+h(3)
			pre.language-sass.
				$sticky-colors: ( [sass map with your own defined colours] );
				@import "scss/core/switch/_sticky-note";
				@include sticky-note;

			+h(4)
			pre.language-sass
				include _sticky-note.scss
		div(tab="js") 
			+h(3)
			pre.language-js.
				import * as stickynote from ""./js/core/sticky-note/_sticky-note.js";
				stickynote.init()

			+h(4)
			pre.language-js
				include _sticky-note.js