//-		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. 
		sticky-note(float="right").blue This #[strong is] a sample sticky. 
			| You can drag it out of the way if you need to see the content under it.

	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". 	

	sticky-note 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).

	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
		pre.language-css(data-tab="scss") 
			include _sticky-note.scss
		pre.language-js(data-tab="js") 
			include _sticky-note.js