docs/notion/Internal Docs Exported/Internal Docs/Research/Design/Sprint 3.html
<html><head><title>Sprint 3 !!!</title><style>
/* webkit printing magic: print all background colors */
html {
-webkit-print-color-adjust: exact;
}
* {
box-sizing: border-box;
-webkit-print-color-adjust: exact;
}
html,
body {
margin: 0;
padding: 0;
}
@media only screen {
body {
margin: 2em auto;
max-width: 900px;
color: rgb(55, 53, 47);
}
}
body {
line-height: 1.5;
}
a,
a.visited {
color: inherit;
text-decoration: underline;
}
.pdf-relative-link-path {
font-size: 80%;
color: #444;
}
h1,
h2,
h3 {
letter-spacing: -0.01em;
line-height: 1.2;
font-weight: 600;
margin-bottom: 0;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 0.75em;
}
h1 {
font-size: 1.875rem;
margin-top: 1.875rem;
}
h2 {
font-size: 1.5rem;
margin-top: 1.5rem;
}
h3 {
font-size: 1.25rem;
margin-top: 1.25rem;
}
.source {
border: 1px solid #ddd;
border-radius: 3px;
padding: 1.5em;
word-break: break-all;
}
figure {
margin: 1.25em 0;
page-break-inside: avoid;
}
figcaption {
opacity: 0.5;
font-size: 85%;
margin-top: 0.5em;
}
mark {
background-color: transparent;
}
.indented {
padding-left: 1.5em;
}
hr {
background: transparent;
display: block;
width: 100%;
height: 1px;
visibility: visible;
border: none;
border-bottom: 1px solid rgba(55, 53, 47, 0.09);
}
img {
max-width: 100%;
}
@media only print {
img {
max-height: 100vh;
object-fit: contain;
}
}
@page {
margin: 1in;
}
.collection-content {
font-size: 0.875rem;
}
.column-list {
display: flex;
justify-content: space-between;
}
.column {
padding: 0 1em;
}
.column:first-child {
padding-left: 0;
}
.column:last-child {
padding-right: 0;
}
.table_of_contents-item {
display: block;
font-size: 0.875rem;
line-height: 1.3;
padding: 0.125rem;
}
.table_of_contents-indent-1 {
margin-left: 1.5rem;
}
.table_of_contents-indent-2 {
margin-left: 3rem;
}
.table_of_contents-indent-3 {
margin-left: 4.5rem;
}
.table_of_contents-link {
text-decoration: none;
opacity: 0.7;
border-bottom: 1px solid rgba(55, 53, 47, 0.18);
}
table,
th,
td {
border: 1px solid rgba(55, 53, 47, 0.09);
border-collapse: collapse;
}
table {
border-left: none;
border-right: none;
}
th,
td {
font-weight: normal;
padding: 0.25em 0.5em;
line-height: 1.5;
min-height: 1.5em;
text-align: left;
}
th {
color: rgba(55, 53, 47, 0.6);
}
ol,
ul {
margin: 0;
margin-block-start: 0.6em;
margin-block-end: 0.6em;
}
li > ol:first-child,
li > ul:first-child {
margin-block-start: 0.6em;
}
ul > li {
list-style: disc;
}
ul.to-do-list {
text-indent: -1.7em;
}
ul.to-do-list > li {
list-style: none;
}
.to-do-children-checked {
text-decoration: line-through;
opacity: 0.375;
}
ul.toggle > li {
list-style: none;
}
ul {
padding-inline-start: 1.7em;
}
ul > li {
padding-left: 0.1em;
}
ol {
padding-inline-start: 1.6em;
}
ol > li {
padding-left: 0.2em;
}
.mono ol {
padding-inline-start: 2em;
}
.mono ol > li {
text-indent: -0.4em;
}
.toggle {
padding-inline-start: 0em;
list-style-type: none;
}
/* Indent toggle children */
.toggle > li > details {
padding-left: 1.7em;
}
.toggle > li > details > summary {
margin-left: -1.1em;
}
.selected-value {
display: inline-block;
padding: 0 0.5em;
background: rgba(206, 205, 202, 0.5);
border-radius: 3px;
margin-right: 0.5em;
margin-top: 0.3em;
margin-bottom: 0.3em;
white-space: nowrap;
}
.collection-title {
display: inline-block;
margin-right: 1em;
}
time {
opacity: 0.5;
}
.icon {
display: inline-block;
max-width: 1.2em;
max-height: 1.2em;
text-decoration: none;
vertical-align: text-bottom;
margin-right: 0.5em;
}
.user-icon {
width: 1.5em;
height: 1.5em;
border-radius: 100%;
margin-right: 0.5rem;
}
.user-icon-inner {
font-size: 0.8em;
}
.text-icon {
border: 1px solid #000;
text-align: center;
}
.page-header-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.page-header-icon img {
border-radius: 3px;
}
.link-to-page {
margin: 1em 0;
padding: 0;
border: none;
font-weight: 500;
}
p > .user {
opacity: 0.5;
}
td > .user,
td > time {
white-space: nowrap;
}
input[type="checkbox"] {
transform: scale(1.5);
margin-right: 0.6em;
vertical-align: middle;
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.image {
border: none;
margin: 1.5em 0;
padding: 0;
border-radius: 0;
text-align: center;
}
.code,
code {
background: rgba(135, 131, 120, 0.15);
border-radius: 3px;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 85%;
}
code {
color: #eb5757;
}
.code {
padding: 1.5em 1em;
}
.code > code {
background: none;
padding: 0;
font-size: 100%;
color: inherit;
}
blockquote {
font-size: 1.25em;
margin: 1em 0;
padding-left: 1em;
border-left: 3px solid rgb(55, 53, 47);
}
.bookmark-href {
font-size: 0.75em;
opacity: 0.5;
}
.sans { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; }
.code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; }
.serif { font-family: Lyon-Text, Georgia, KaiTi, STKaiTi, '华文楷体', KaiTi_GB2312, '楷体_GB2312', serif; }
.mono { font-family: Nitti, 'Microsoft YaHei', '微软雅黑', monospace; }
.pdf .sans { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK SC', 'Noto Sans CJK KR'; }
.pdf .code { font-family: Source Code Pro, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC', 'Noto Sans Mono CJK KR'; }
.pdf .serif { font-family: PT Serif, Lyon-Text, Georgia, KaiTi, STKaiTi, '华文楷体', KaiTi_GB2312, '楷体_GB2312', serif, 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK SC', 'Noto Sans CJK KR'; }
.pdf .mono { font-family: PT Mono, Nitti, 'Microsoft YaHei', '微软雅黑', monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC', 'Noto Sans Mono CJK KR'; }
.highlight-default {
}
.highlight-gray {
color: rgb(155,154,151);
}
.highlight-brown {
color: rgb(100,71,58);
}
.highlight-orange {
color: rgb(217,115,13);
}
.highlight-yellow {
color: rgb(223,171,1);
}
.highlight-teal {
color: rgb(15,123,108);
}
.highlight-blue {
color: rgb(11,110,153);
}
.highlight-purple {
color: rgb(105,64,165);
}
.highlight-pink {
color: rgb(173,26,114);
}
.highlight-red {
color: rgb(224,62,62);
}
.highlight-gray_background {
background: rgb(235,236,237);
}
.highlight-brown_background {
background: rgb(233,229,227);
}
.highlight-orange_background {
background: rgb(250,235,221);
}
.highlight-yellow_background {
background: rgb(251,243,219);
}
.highlight-teal_background {
background: rgb(221,237,234);
}
.highlight-blue_background {
background: rgb(221,235,241);
}
.highlight-purple_background {
background: rgb(234,228,242);
}
.highlight-pink_background {
background: rgb(244,223,235);
}
.highlight-red_background {
background: rgb(251,228,228);
}
.block-color-default {
}
.block-color-gray {
color: rgba(55, 53, 47, 0.6);
}
.block-color-brown {
color: rgb(100,71,58);
}
.block-color-orange {
color: rgb(217,115,13);
}
.block-color-yellow {
color: rgb(223,171,1);
}
.block-color-teal {
color: rgb(15,123,108);
}
.block-color-blue {
color: rgb(11,110,153);
}
.block-color-purple {
color: rgb(105,64,165);
}
.block-color-pink {
color: rgb(173,26,114);
}
.block-color-red {
color: rgb(224,62,62);
}
.block-color-gray_background {
background: rgb(235,236,237);
}
.block-color-brown_background {
background: rgb(233,229,227);
}
.block-color-orange_background {
background: rgb(250,235,221);
}
.block-color-yellow_background {
background: rgb(251,243,219);
}
.block-color-teal_background {
background: rgb(221,237,234);
}
.block-color-blue_background {
background: rgb(221,235,241);
}
.block-color-purple_background {
background: rgb(234,228,242);
}
.block-color-pink_background {
background: rgb(244,223,235);
}
.block-color-red_background {
background: rgb(251,228,228);
}
.checkbox {
display: inline-flex;
vertical-align: text-bottom;
width: 16;
height: 16;
background-size: 16px;
margin-left: 2px;
margin-right: 5px;
}
.checkbox-on {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%2358A9D7%22%2F%3E%0A%3Cpath%20d%3D%22M6.71429%2012.2852L14%204.9995L12.7143%203.71436L6.71429%209.71378L3.28571%206.2831L2%207.57092L6.71429%2012.2852Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
}
.checkbox-off {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%220.75%22%20y%3D%220.75%22%20width%3D%2214.5%22%20height%3D%2214.5%22%20fill%3D%22white%22%20stroke%3D%22%2336352F%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");
}
</style></head><body><article id="67ced88a-abe8-400d-b37d-6a3f1cb7bd63" class="page sans"><header><h1 class="page-title">Sprint 3 !!!</h1></header><div class="page-body"><h3 id="753f0b36-cbf9-45ab-9a56-c812b75b82da">Initial Components list:</h3><ul id="a59335f2-c0e7-4f07-aa9b-2dae8b0262b1" class="bulleted-list"><li>Link</li></ul><ul id="f1af8d36-b7ff-4520-b0df-d3883c458175" class="bulleted-list"><li>Color picker</li></ul><p id="194611d2-e015-438c-8767-a32cfccceb08"></p><p id="1cfea549-fbea-4719-b47b-64380f6fce38">I Picked these as they have very few properties and involve simple porting from elements.</p><p id="19b10f47-1102-4332-9b7b-c0a320ea52c0"></p><p id="c4fd6ee0-2bd0-454f-8a4c-376b88bdb379"><a href="https://element.eleme.io/#/en-US/component/link">Link</a></p><p id="939f8674-0b71-4adf-8dde-c55e316ddcf1">Probably the simplest component to do </p><p id="45d51b27-04d3-49fd-8c22-c8992a02f185"></p><figure id="53cd238e-cefe-4940-bbc3-3bdc95417467" class="image"><a href="Sprint 3/Untitled.png"><img style="width:2160px" src="Sprint 3/Untitled.png"/></a></figure><p id="0f44135a-08ae-47b7-b890-92d024ff4f16"></p><p id="fc91a351-94a5-4e35-86ca-676bc432dc64"><strong>type</strong></p><ul id="b0124769-5fe6-433f-bc04-7ad6285c718c" class="bulleted-list"><li>Color / Theme of the link</li></ul><p id="8d2efb57-b64f-41ab-8a92-a6ab2de13062"><strong>underline</strong></p><ul id="bddd1791-ba62-44d7-ae0f-0bd3b36d241c" class="bulleted-list"><li>wether or not has underline</li></ul><p id="1e5162bb-2947-40e1-ba7d-93c41785abf8"><strong>disabled</strong></p><ul id="6b5eb137-1a23-483f-8911-f0bcce6ae71f" class="bulleted-list"><li>....</li></ul><p id="5396a115-c26d-457c-8e99-778241852766"><strong>href</strong></p><ul id="a4d8b8b5-786f-4553-950c-9569a9f4b89f" class="bulleted-list"><li>string to link to</li></ul><p id="61106e51-dc2c-4bab-a2fb-22280aa135db"><strong>icon</strong></p><ul id="716fdbf2-3767-42a9-9b9d-2615b5a59fae" class="bulleted-list"><li>string path to icon </li></ul><figure id="0f6e50d6-ee4e-4d93-af89-1f7f980ea605" class="image"><a href="Sprint 3/Untitled 1.png"><img style="width:1262px" src="Sprint 3/Untitled 1.png"/></a></figure><p id="c050e271-6115-4994-aeee-35686a909f5f"><a href="https://element.eleme.io/#/en-US/component/color-picker">COLOR PICKER</a></p><p id="e182a535-972c-4bb5-b549-1360a2abd2a0"></p><figure id="c1c22502-d566-47c1-ad5b-f14729b2446e" class="image"><a href="Sprint 3/Untitled 2.png"><img style="width:1908px" src="Sprint 3/Untitled 2.png"/></a></figure><p id="722af573-435a-4400-819c-18ed37d0858f"><strong>Value</strong></p><ul id="a4a3923b-1201-4104-a2ac-ef165807a6a3" class="bulleted-list"><li><strong>default value</strong></li></ul><figure id="9f60230f-a6b2-47b4-837f-7e6db95404af" class="image"><a href="Sprint 3/Untitled 3.png"><img style="width:376px" src="Sprint 3/Untitled 3.png"/></a></figure><p id="5d334431-09d3-43ae-9581-5f6f7ea440f2"><strong>Disabled</strong></p><ul id="99edca6f-2f71-411f-b5bf-849b6005988e" class="bulleted-list"><li>cant be clicked on</li></ul><p id="535294e8-6c54-4fe1-a70c-b907413060c6"><strong>Size</strong></p><figure id="8da209e7-2956-4090-bac6-f8db9d5e27d5" class="image"><a href="Sprint 3/Untitled 4.png"><img style="width:602px" src="Sprint 3/Untitled 4.png"/></a></figure><p id="5e1ea4e3-efbc-45ec-aae1-4a09e1c55768">Default is the one on the leftmost, ie: if this attribute isn't used,
else user can use medium small or mini for the other three respectively from left to right.</p><p id="ad60b538-cc28-4082-be05-b0a10c6e5f3d"></p><p id="1c6cb9d2-f19e-4b9d-a3d6-5b727f3e0c5f"><strong>show-alpha</strong></p><p id="06e37d06-0ede-4085-bf47-0fedb6e0e406"></p><figure id="e89b8c4b-0efc-49d4-9085-09c4a8228fee" class="image"><a href="Sprint 3/Untitled 5.png"><img style="width:696px" src="Sprint 3/Untitled 5.png"/></a></figure><p id="8ef0ec7b-2eae-4e5f-a04d-c8d51aaa5f93"></p><p id="886b0509-38bc-4f68-aef9-06bb75769a93"><strong>color-format</strong></p><p id="fac333a3-fd38-43c0-9906-5ea827afd119">allowed inputs - hsl / hsv / hex / rgb
defaults - hex (when show-alpha is false)/ rgb (when show-alpha is true)</p><p id="541307af-1473-4d53-b367-097ed547fc96"><strong>popper-class</strong></p><p id="dccd608b-8d22-4015-877a-3d981e52bd43"></p><p id="140234f6-06ae-4348-b955-996bfcca2610"><strong>predefine</strong></p><p id="4ecad136-f868-4118-b6cf-6873f05b8859">As you can see below, this allows user to predefine colors in an arraylike manner to give some colors to chose from.</p><figure id="b1e6b75d-c24d-4bd4-8bdf-f9590289d380" class="image"><a href="Sprint 3/Untitled 6.png"><img style="width:784px" src="Sprint 3/Untitled 6.png"/></a></figure><p id="ee82fb21-652c-4cb4-8db5-9e627e208939"></p><p id="8dbf10db-be3f-472c-ae1c-b0a84bf70fac"></p></div></article></body></html>