diff --git a/www/api/data/base-components/font-cocon/meta.json b/www/api/data/base-components/font-cocon/meta.json index 91ca20e..394acbf 100644 --- a/www/api/data/base-components/font-cocon/meta.json +++ b/www/api/data/base-components/font-cocon/meta.json @@ -1 +1 @@ -{"id":"font-cocon","description":""} \ No newline at end of file +{"id":"font-cocon","description":"Cocon Regular font (simply logo font)"} \ No newline at end of file diff --git a/www/api/data/components/0-ds-styling/meta.json b/www/api/data/components/0-ds-styling/meta.json index 54efe5f..9926ec8 100644 --- a/www/api/data/components/0-ds-styling/meta.json +++ b/www/api/data/components/0-ds-styling/meta.json @@ -1 +1 @@ -{"id":"0-ds-styling","description":""} \ No newline at end of file +{"id":"0-ds-styling","description":"DS base styling"} \ No newline at end of file diff --git a/www/api/data/components/1-styling/componentCss/extra.css b/www/api/data/components/1-styling/componentCss/extra.css index 359fd77..02440d7 100644 --- a/www/api/data/components/1-styling/componentCss/extra.css +++ b/www/api/data/components/1-styling/componentCss/extra.css @@ -1,28 +1,28 @@ @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i'); html, body { - margin: 0; - padding: 0; - width: 100%; + margin: 0; + padding: 0; + width: 100%; } main { - padding: 0px 15px; + padding: 0px 15px; } [data-simply-command] { - cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */ + cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */ } textarea { - width: 100%; - height: 120px; - color: #e0e0e0; - background-color: #151515; - border: 0; - padding: 10px; + width: 100%; + height: 120px; + color: #e0e0e0; + background-color: #151515; + border: 0; + padding: 10px; } input:not([type]), input[type=text] { - color: #e0e0e0; - background-color: #151515; - border: 0; - padding: 5px; + color: #e0e0e0; + background-color: #151515; + border: 0; + padding: 5px; } \ No newline at end of file diff --git a/www/api/data/components/1-styling/componentCss/simplycode-component-list.css b/www/api/data/components/1-styling/componentCss/simplycode-component-list.css new file mode 100644 index 0000000..2974032 --- /dev/null +++ b/www/api/data/components/1-styling/componentCss/simplycode-component-list.css @@ -0,0 +1,50 @@ +:root { + --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing)); + --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing)); + --simplycode-component-list-min-colwidth: 10rem; + --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size)); + --simplycode-component-list-item-background: var(--ds-grey-90); + --simplycode-component-list-item-background-active: var(--ds-grey-80); + --simplycode-component-list-item-color: inherit; + --simplycode-component-list-item-color-active: inherit; + --simplycode-component-list-item-min-height: 4rem; +} + +.simplycode-component-list { + display: grid; + grid-column-gap: var(--simplycode-component-list-spacing-column); + grid-row-gap: var(--simplycode-component-list-spacing-row); + grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr)); + + font-size: var(--simplycode-component-list-item-font-size); + line-height: 1.6em; + margin-bottom: var(--simplycode-component-list-spacing-column); +} +.simplycode-component-list-item { + background-color: var(--simplycode-component-list-item-background); + padding: calc(0.5 * var(--simplycode-component-list-spacing-column)); + display: flex; + flex-direction: column; + flex: 1 1 0; + min-height: var(--simplycode-component-list-item-min-height); +} + +.simplycode-component-list-item, +a.simplycode-component-list-item, +a.simplycode-component-list-item * { + text-decoration: none; + color: var(--simplycode-component-list-item-color); +} +.simplycode-component-list-item:hover, +a.simplycode-component-list-item:hover, +a.simplycode-component-list-item:active { + background-color: var(--simplycode-component-list-item-background-active); + color: var(--simplycode-component-list-item-color-active); +} + +.simplycode-component-list-item > :first-child { + margin-top: 0; +} +.simplycode-component-list-item > :last-child { + margin-bottom: 0; +} \ No newline at end of file diff --git a/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css b/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css index 0aef625..623bd91 100644 --- a/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css +++ b/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css @@ -1,19 +1,12 @@ /* simplycode-ds-core-colors */ :root { - --ds-simplycode: #ae47ff; - --ds-simplycode-light:#c880ff; - --ds-simplycode-dark:#8d00f8; - --ds-simplycode-bump:#b65cfc; - --ds-simplycode-contrast: var(--ds-white); - --ds-simplycode-gradient: linear-gradient( 180deg, var(--ds-simplycode-light), var(--ds-simplycode-dark) ); - --ds-simplycode-gradient-bump: linear-gradient( 180deg, var(--ds-simplycode-bump), var(--ds-simplycode-light) 95%, var(--ds-simplycode-dark) 100%); - - --ds-primary: var(--ds-simplycode); - --ds-primary-dark: var(--ds-simplycode-dark); - --ds-primary-contrast: var(--ds-white); - --ds-primary-light: var(--ds-simplycode-light); - --ds-primary-gradient: var(--ds-simplycode-gradient); - --ds-primary-gradient-bump: var(--ds-simplycode-gradient-bump); + --ds-primary: var(--simplycode-highlight-light); + --ds-primary-dark: var(--simplycode-highlight-dark); + --ds-primary-contrast: var(--simplycode-highlight-color); + --ds-primary-light: var(--simplycode-highlight-light); + --ds-primary-gradient: var(--simplycode-highlight-gradient); + --ds-primary-bump: #b65cfc; + --ds-primary-gradient-bump: linear-gradient( 180deg, var(--ds-primary-bump), var(--simplycode-highlight-light) 95%, var(--simplycode-highlight-dark) 100%); --ds-support: #06CC06; --ds-support-dark: #05BB05; diff --git a/www/api/data/components/1-styling/componentCss/style.css b/www/api/data/components/1-styling/componentCss/style.css index a2b1970..2d82e87 100644 --- a/www/api/data/components/1-styling/componentCss/style.css +++ b/www/api/data/components/1-styling/componentCss/style.css @@ -1,107 +1,107 @@ :root { - --simplycode-highlight-dark: #f16623; - --simplycode-highlight-light: #ff8003; - --simplycode-highlight-color: #fff; - --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) ); + --simplycode-highlight-dark: #f16623; + --simplycode-highlight-light: #ff8003; + --simplycode-highlight-color: #fff; + --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) ); - --simplycode-support-dark: #444; - --simplycode-support-light: #484848; - --simplycode-support-color: #eee; - --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) ); + --simplycode-support-dark: #444; + --simplycode-support-light: #484848; + --simplycode-support-color: #eee; + --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) ); - --simplycode-grey-dark: #38393c; - --simplycode-grey-medium: #7f8185; - --simplycode-grey-light: #e9ebec; - --simplycode-grey-dark: #38393c; - --simplycode-black: #000; - --simplycode-white: #fff; - --simplycode-grey-background: var(--simplycode-grey-dark); + --simplycode-grey-dark: #38393c; + --simplycode-grey-medium: #7f8185; + --simplycode-grey-light: #e9ebec; + --simplycode-grey-dark: #38393c; + --simplycode-black: #000; + --simplycode-white: #fff; + --simplycode-grey-background: var(--simplycode-grey-dark); - --simplycode-font-family: 'Alegreya Sans', sans-serif; - --simplycode-font-size: 14px; - --simplycode-line-height: 1.5em; - --simplycode-color: #7f8185; - --simplycode-background: #333; + --simplycode-font-family: 'Alegreya Sans', sans-serif; + --simplycode-font-size: 14px; + --simplycode-line-height: 1.5em; + --simplycode-color: #7f8185; + --simplycode-background: #333; } /* general styling on default elements */ html, body { - margin: 0; - padding: 0; - font-family: var(--simplycode-font-family); - font-size: var(--simplycode-font-size); - line-height: var(--simplycode-line-height); - color: var(--simplycode-color); - background-color: var(--simplycode-background); + margin: 0; + padding: 0; + font-family: var(--simplycode-font-family); + font-size: var(--simplycode-font-size); + line-height: var(--simplycode-line-height); + color: var(--simplycode-color); + background-color: var(--simplycode-background); } body { - overflow-y: scroll; + overflow-y: scroll; } body:last-child { - margin-bottom: 1.5em; + margin-bottom: 1.5em; } h1 { - font-size: 2em; - font-weight: 300; - line-height: 1.1em; - margin: 0; - margin-bottom: 0.5em; + font-size: 2em; + font-weight: 300; + line-height: 1.1em; + margin: 0; + margin-bottom: 0.5em; } h2 { - font-size: 1.6em; - font-weight: 400; - line-height: 1.1em; - margin: 0; - margin-bottom: 0.5em; + font-size: 1.6em; + font-weight: 400; + line-height: 1.1em; + margin: 0; + margin-bottom: 0.5em; } * { - box-sizing: border-box; + box-sizing: border-box; } img { - display: block; - max-width: 100%; + display: block; + max-width: 100%; } a { - color: var(--simplycode-highlight-dark); + color: var(--simplycode-highlight-dark); } a:visited { - color: var(--simplycode-highlight-dark); + color: var(--simplycode-highlight-dark); } /* custom styling for custom elements */ .simplycode-button, a.simplycode-button { - background: var(--simplycode-support-background); - color: var(--simplycode-support-color); - padding: 0.3em 0.5em; - margin: 0 0.3em; - border: 1px solid #ccc; - text-decoration: none; + background: var(--simplycode-support-background); + color: var(--simplycode-support-color); + padding: 0.3em 0.5em; + margin: 0 0.3em; + border: 1px solid #ccc; + text-decoration: none; } .simplycode-button:first-child { - margin-left: 0; + margin-left: 0; } .simplycode-button:last-child { - margin-right: 0; + margin-right: 0; } .simplycode-button.highlight { - background: var(--simplycode-highlight-background); - color: var(--simplycode-highlight-color); + background: var(--simplycode-highlight-background); + color: var(--simplycode-highlight-color); } .text-content { - padding: 2.2375em; - max-width: 50em; + padding: 2.2375em; + max-width: 50em; } .text-content *:first-child { - margin-top: 0; + margin-top: 0; } body { @@ -115,265 +115,249 @@ body { "nav pane pane" } body > header { - grid-area: header; + grid-area: header; } body > nav { - grid-area: nav; + grid-area: nav; } body > div.main { - grid-area: pane; + grid-area: pane; } nav ul ul .simplycode-expand { - display: none; - padding: 0 1.7em; + display: none; + padding: 0 1.7em; } nav ul { - list-style: none; - margin: 0 0.5em; - padding: 0; + list-style: none; + margin: 0 0.5em; + padding: 0; } nav ul ul { - padding: 0 1.7em; + padding: 0 1.7em; } nav > ul > li[data-simply-command=expandMenu][open]::before { - content: "[-] "; - font-family: monospace; + content: "[-] "; + font-family: monospace; } nav > ul > li[data-simply-command=expandMenu]::before { - content: "[+] "; - font-family: monospace; + content: "[+] "; + font-family: monospace; } .simplycode-part { - margin-top: 1em; + margin-top: 1em; } .simplycode-part-header { - display: grid; - grid-template-columns: 1fr 1fr; + display: grid; + grid-template-columns: 1fr 1fr; } .simplycode-part-header .simplycode-options { - text-align: right; + text-align: right; } .simplycode-part .simplycode-tab { - padding: 10px 5px; - margin: 0; - background-color: #151515; - color: #ddd; - border: 0; - text-align: center; - margin-right: 5px; + padding: 10px 5px; + margin: 0; + background-color: #151515; + color: #ddd; + border: 0; + text-align: center; + margin-right: 5px; } .simplycode-part .simplycode-tab input[type=radio] { - display: none; + display: none; } .simplycode-part .simplycode-tab input[type=radio]:checked ~ span { - font-weight: bold; - border-bottom: 2px solid var(--simplycode-support-background); + font-weight: bold; + border-bottom: 2px solid var(--simplycode-support-background); } .simplycode-part .simplycode-editor-code { - display: grid; - grid-template-columns: 1fr; + display: grid; + grid-template-columns: 1fr; } .simplycode-part .simplycode-dual { - display: grid; - grid-template-columns: 1fr 1fr; + display: grid; + grid-template-columns: 1fr 1fr; } .simplycode-part .simplycode-dual-preview { - display: grid; - grid-template-columns: auto 480px; + display: grid; + grid-template-columns: auto 480px; } .simplycode-test-header { - display: grid; - grid-template-columns: 1fr 1fr; + display: grid; + grid-template-columns: 1fr 1fr; } .simplycode-test-header .simplycode-options { - text-align: right; + text-align: right; } .simplycode-component summary { - font-size: 1.2em; + font-size: 1.2em; } .simplycode-component { - margin: 10px 0px; + margin: 10px 0px; } .simplycode-header { - display: grid; - grid-template-columns: 3fr 1fr; - vertical-align: middle; + display: grid; + grid-template-columns: 3fr 1fr; + vertical-align: middle; } .simplycode-header .simplycode-controls { - text-align: right; + text-align: right; } .simplycode-header h1 span { - white-space: nowrap; + white-space: nowrap; } .simplycode-component summary .simplycode-controls { - display: none; - margin-left: 1em; + display: none; + margin-left: 1em; } .simplycode-component[open] summary .simplycode-controls { - display: inline-block; + display: inline-block; } header { - position: fixed; - padding: 8px 10px 6px 10px; - left: 0; - right: 0; - display: grid; - grid-template-columns: 2fr 1fr; - background-color: #404040; - border-bottom: 2px solid #2222; - vertical-align: middle; - z-index: 200; + position: fixed; + padding: 8px 10px 6px 10px; + left: 0; + right: 0; + display: grid; + grid-template-columns: 2fr 1fr; + background-color: #404040; + border-bottom: 2px solid #2222; + vertical-align: middle; + z-index: 200; } header h1 { - margin: 0; + margin: 0; } header .simplycode-controls { - padding-top: 5px; - padding-right: 5px; - text-align: right; + padding-top: 5px; + padding-right: 5px; + text-align: right; } .simplycode-editor-code textarea { - margin-top: -1px; -} - -ul.simplycode-components-list { - list-style: none; - padding: 0; - margin: 0; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 10px; - margin-bottom: 1em; -} -ul.simplycode-components-list li { - border: 1px solid #555; - background-color: #2a2a2a; - padding: 10px; - border-radius: 2px; + margin-top: -1px; } /* Components: Toast */ :root { - --simply-toast-height: 60px; - --simply-toast-hide-delay: 3s; - --simply-toast-show-duration: 0.3s; - --simply-toast-hide-duration: 0.5s; - --simply-toast-margin: 20px; - --simply-toast-error-color: rgb(253, 143, 143); - --simply-toats-warning-color: #FFFFCC; - --simply-toast-info-color: rgb(140, 180, 250); - --simply-toast-white: #FFF; - --simply-toast-grey-50: #a8b4c0; - --simply-toast-grey-80: #4d565c; - --simply-toast-font-size: calc(1.1 * 1rem); - --simply-toast-font-weight: 300; - --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size)); - --simply-toast-color: var(--simplycode-grey-medium); - --simply-toast-contrast: var(--simplycode-grey-medium); - --simply-toast-background:var(--simplycode-white); - --simply-toast-heading-weight: 900; - --simply-toast-heading-multiplier: 1.1; + --simply-toast-height: 60px; + --simply-toast-hide-delay: 3s; + --simply-toast-show-duration: 0.3s; + --simply-toast-hide-duration: 0.5s; + --simply-toast-margin: 20px; + --simply-toast-error-color: rgb(253, 143, 143); + --simply-toats-warning-color: #FFFFCC; + --simply-toast-info-color: rgb(140, 180, 250); + --simply-toast-white: #FFF; + --simply-toast-grey-50: #a8b4c0; + --simply-toast-grey-80: #4d565c; + --simply-toast-font-size: calc(1.1 * 1rem); + --simply-toast-font-weight: 300; + --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size)); + --simply-toast-color: var(--simplycode-grey-medium); + --simply-toast-contrast: var(--simplycode-grey-medium); + --simply-toast-background:var(--simplycode-white); + --simply-toast-heading-weight: 900; + --simply-toast-heading-multiplier: 1.1; } ul.simply-toasts, ol.simply-toasts, .simply-toasts { - position: fixed; - right: 0; - top: 0; - z-index: 101; - display: block; - list-style: none; - margin: 0; - padding: 0; - max-width: 50%; - min-width: 300px; + position: fixed; + right: 0; + top: 0; + z-index: 101; + display: block; + list-style: none; + margin: 0; + padding: 0; + max-width: 50%; + min-width: 300px; } .simply-toast, li.simply-toast { - min-width: 300px; - float: right; - clear: both; - margin-right: 0; - margin-top: 60px; - background-color: var(--simply-toast-grey-80); - color: var(--simply-toast-white); - display: block; - border-left: 10px solid var(--simply-toast-grey-50); - padding: 20px; - border-radius: 2px; + min-width: 300px; + float: right; + clear: both; + margin-right: 0; + margin-top: 60px; + background-color: var(--simply-toast-grey-80); + color: var(--simply-toast-white); + display: block; + border-left: 10px solid var(--simply-toast-grey-50); + padding: 20px; + border-radius: 2px; } .simply-toast-error, li.simply-toast-error { - border-color: var(--simply-toast-error-color); + border-color: var(--simply-toast-error-color); } .simply-toast-info, li.simply-toast-info { - border-color: var(--simply-toast-info-color); + border-color: var(--simply-toast-info-color); } .simply-toast-warning, li.simply-toast-warning { - border-color: var(--simply-toast-warning-color); + border-color: var(--simply-toast-warning-color); } @keyframes simply-toast-show { - 0% { - transform: scaleX(0); - transform-origin: right; - opacity: 0; - } - 50% { - transform: scaleX(0); - transform-origin: right; - opacity: 0; - } - 75% { - opacity: 1; - } - 100% { - transform: scaleX(1); - transform-origin: right; - opacity: 1; - } + 0% { + transform: scaleX(0); + transform-origin: right; + opacity: 0; + } + 50% { + transform: scaleX(0); + transform-origin: right; + opacity: 0; + } + 75% { + opacity: 1; + } + 100% { + transform: scaleX(1); + transform-origin: right; + opacity: 1; + } } @keyframes simply-toast-hide { - 0% { - transform: scaleX(1); - transform-origin: right; - opacity: 1; - } - 50% { - opacity: 1; - } - 100% { - transform: scaleX(0); - transform-origin: right; - opacity: 0; - } + 0% { + transform: scaleX(1); + transform-origin: right; + opacity: 1; + } + 50% { + opacity: 1; + } + 100% { + transform: scaleX(0); + transform-origin: right; + opacity: 0; + } } @keyframes simply-toast-move { - 0% { - transform: translateY(-80px); /* toast-height + toast-margin */ - } - 100% { - transform: translateY(0px); - } + 0% { + transform: translateY(-80px); /* toast-height + toast-margin */ + } + 100% { + transform: translateY(0px); + } } .simply-toast[data-state="new"] { - animation: simply-toast-show var(--simply-toast-show-duration) forwards; + animation: simply-toast-show var(--simply-toast-show-duration) forwards; } .simply-toast-autohide[data-state="new"] { - animation: simply-toast-show var(--simply-toast-show-duration); - animation-delay: 0s; + animation: simply-toast-show var(--simply-toast-show-duration); + animation-delay: 0s; } .simply-toast-autohide.simply-toast-animated[data-state="shown"] { - animation: simply-toast-hide var(--simply-toast-hide-duration) forwards; - animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration)); + animation: simply-toast-hide var(--simply-toast-hide-duration) forwards; + animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration)); } .simply-toast-autohide:not(.simply-toast-animated)[data-state="shown"] { - animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards; - animation-delay: 0s, var(--simply-toast-hide-delay); + animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards; + animation-delay: 0s, var(--simply-toast-hide-delay); } diff --git a/www/api/data/components/1-styling/meta.json b/www/api/data/components/1-styling/meta.json index 1d9da25..832a27f 100644 --- a/www/api/data/components/1-styling/meta.json +++ b/www/api/data/components/1-styling/meta.json @@ -1 +1 @@ -{"id":"1-styling","description":""} \ No newline at end of file +{"id":"1-styling","description":"Styles for simplycode"} \ No newline at end of file diff --git a/www/api/data/components/components-generic/commands/initEditors.js b/www/api/data/components/components-generic/commands/initEditors.js index b953a13..d778feb 100644 --- a/www/api/data/components/components-generic/commands/initEditors.js +++ b/www/api/data/components/components-generic/commands/initEditors.js @@ -6,4 +6,5 @@ function(el) { } simplyApp.commands.codeMirrorInit(); simplyApp.commands.autoRunTests(); + simplyApp.commands.autoRunPreviews(); } \ No newline at end of file diff --git a/www/api/data/components/data-format/dataApi/mergeComponent.js b/www/api/data/components/data-format/dataApi/mergeComponent.js index cb516c2..29f78d0 100644 --- a/www/api/data/components/data-format/dataApi/mergeComponent.js +++ b/www/api/data/components/data-format/dataApi/mergeComponent.js @@ -4,6 +4,7 @@ function(component) { switch(componentPart.id) { case "meta.json": componentPart.id = "meta"; + component.description = componentPart.description; break; case "routes": if (typeof componentPart.contents === "object") { diff --git a/www/api/data/components/data-format/meta.json b/www/api/data/components/data-format/meta.json index bdf1b24..40fbf96 100644 --- a/www/api/data/components/data-format/meta.json +++ b/www/api/data/components/data-format/meta.json @@ -1 +1 @@ -{"id":"data-format","description":""} \ No newline at end of file +{"id":"data-format","description":"Utilities for component data handling"} \ No newline at end of file diff --git a/www/api/data/components/simply-logo/meta.json b/www/api/data/components/simply-logo/meta.json index 0e3c082..9a5b2be 100644 --- a/www/api/data/components/simply-logo/meta.json +++ b/www/api/data/components/simply-logo/meta.json @@ -1 +1 @@ -{"id":"simply-logo","description":""} \ No newline at end of file +{"id":"simply-logo","description":"Editable version of the Simply logo"} \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentCss/simply-toobar-button.css b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar-button.css similarity index 100% rename from www/api/data/components/simply-toolbar/componentCss/simply-toobar-button.css rename to www/api/data/components/simply-toolbar/componentCss/simply-toolbar-button.css diff --git a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css index 2b66fd1..cd0cd60 100644 --- a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css +++ b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css @@ -1,5 +1,5 @@ :root { - --simply-toobar-height: 60px; + --simply-toolbar-height: 60px; --simply-toolbar-primary: var(--simplycode-highlight-dark); --simply-toolbar-button-font: arial, helvetica, sans-serif; --simply-toolbar-button-font-size: 11px; @@ -11,77 +11,77 @@ --simply-toolbar-title-height: var(--simply-toolbar-height); } .simply-toolbar { - position: absolute; - top: 0; - left: 0; - border-top: 1px solid var(--simply-toolbar-button-primary); - background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%); - white-space: nowrap; - min-width: 100%; - min-height: var(--simply-toolbar-height); - display: flex; + position: absolute; + top: 0; + left: 0; + border-top: 1px solid var(--simply-toolbar-button-primary); + background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%); + white-space: nowrap; + min-width: 100%; + min-height: var(--simply-toolbar-height); + display: flex; } .simply-toolbar-title { - padding: 0 10px; - font-size: 16px; - width: var(--simply-toolbar-title-width); - font-family: sans-serif; - text-transform: none; - border: 0; - height: var(--simply-toolbar-button-height); - cursor: default; - border-radius: 0; - box-shadow: 0; - outline: 0; - display: flex; - flex-direction: column; - justify-content: center; + padding: 0 10px; + font-size: 16px; + width: var(--simply-toolbar-title-width); + font-family: sans-serif; + text-transform: none; + border: 0; + height: var(--simply-toolbar-button-height); + cursor: default; + border-radius: 0; + box-shadow: 0; + outline: 0; + display: flex; + flex-direction: column; + justify-content: center; } .simply-toolbar-highlight { - background: var(--ds-primary-gradient-bump); - color: var(--ds-primary-contrast); + background: var(--ds-primary-gradient-bump); + color: var(--ds-primary-contrast); } .simply-toolbar .simply-toolbar-title { - margin-top: 0; + margin-top: 0; } .simply-toolbar-spacer { - border-left: 1px solid #ccc; - height: var(--simply-toolbar-height); - position: absolute; - display: inline-block; + border-left: 1px solid #ccc; + height: var(--simply-toolbar-height); + position: absolute; + display: inline-block; } .simply-toolbar-button-expands:not(.ds-selected)::after { - content: ""; - display: block; - position: absolute; - bottom: 6px; - left: 50%; - margin-left: -3px; - width: 0; - border-top: 3px solid #888; - border-bottom: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; + content: ""; + display: block; + position: absolute; + bottom: 6px; + left: 50%; + margin-left: -3px; + width: 0; + border-top: 3px solid #888; + border-bottom: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; } .simply-toolbar .simply-toolbar-push-right { - margin-left: auto; + margin-left: auto; } .simply-toolbar-title img { - height: 30px; + height: 30px; } .simply-toolbar input[type="text"] { - margin-right:0; - margin-bottom: 0; - margin-top: 10px; - font-size: small; - line-height: 1.2em; - height: 35px; + margin-right:0; + margin-bottom: 0; + margin-top: 10px; + font-size: small; + line-height: 1.2em; + height: 35px; } .simply-toolbar.simply-main-toolbar { - border-top-width: 5px; + border-top-width: 5px; } .simply-toolbar { - background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%); - color: var(--ds-white); + background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%); + color: var(--ds-white); } \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/meta.json b/www/api/data/components/simply-toolbar/meta.json index 1aeab60..c199e69 100644 --- a/www/api/data/components/simply-toolbar/meta.json +++ b/www/api/data/components/simply-toolbar/meta.json @@ -1 +1 @@ -{"id":"simply-toolbar","description":""} \ No newline at end of file +{"id":"simply-toolbar","description":"The main header menubar"} \ No newline at end of file diff --git a/www/api/data/generated.html b/www/api/data/generated.html index e063a3b..2e24dc4 100644 --- a/www/api/data/generated.html +++ b/www/api/data/generated.html @@ -490,48 +490,92 @@ @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i'); html, body { - margin: 0; - padding: 0; - width: 100%; + margin: 0; + padding: 0; + width: 100%; } main { - padding: 0px 15px; + padding: 0px 15px; } [data-simply-command] { - cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */ + cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */ } textarea { - width: 100%; - height: 120px; - color: #e0e0e0; - background-color: #151515; - border: 0; - padding: 10px; + width: 100%; + height: 120px; + color: #e0e0e0; + background-color: #151515; + border: 0; + padding: 10px; } input:not([type]), input[type=text] { - color: #e0e0e0; - background-color: #151515; - border: 0; - padding: 5px; + color: #e0e0e0; + background-color: #151515; + border: 0; + padding: 5px; + } + /* simplycode-component-list */ + :root { + --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing)); + --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing)); + --simplycode-component-list-min-colwidth: 10rem; + --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size)); + --simplycode-component-list-item-background: var(--ds-grey-90); + --simplycode-component-list-item-background-active: var(--ds-grey-80); + --simplycode-component-list-item-color: inherit; + --simplycode-component-list-item-color-active: inherit; + --simplycode-component-list-item-min-height: 4rem; + } + + .simplycode-component-list { + display: grid; + grid-column-gap: var(--simplycode-component-list-spacing-column); + grid-row-gap: var(--simplycode-component-list-spacing-row); + grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr)); + + font-size: var(--simplycode-component-list-item-font-size); + line-height: 1.6em; + margin-bottom: var(--simplycode-component-list-spacing-column); + } + .simplycode-component-list-item { + background-color: var(--simplycode-component-list-item-background); + padding: calc(0.5 * var(--simplycode-component-list-spacing-column)); + display: flex; + flex-direction: column; + flex: 1 1 0; + min-height: var(--simplycode-component-list-item-min-height); + } + + .simplycode-component-list-item, + a.simplycode-component-list-item, + a.simplycode-component-list-item * { + text-decoration: none; + color: var(--simplycode-component-list-item-color); + } + .simplycode-component-list-item:hover, + a.simplycode-component-list-item:hover, + a.simplycode-component-list-item:active { + background-color: var(--simplycode-component-list-item-background-active); + color: var(--simplycode-component-list-item-color-active); + } + + .simplycode-component-list-item > :first-child { + margin-top: 0; + } + .simplycode-component-list-item > :last-child { + margin-bottom: 0; } /* simplycode-ds-mapping */ /* simplycode-ds-core-colors */ :root { - --ds-simplycode: #ae47ff; - --ds-simplycode-light:#c880ff; - --ds-simplycode-dark:#8d00f8; - --ds-simplycode-bump:#b65cfc; - --ds-simplycode-contrast: var(--ds-white); - --ds-simplycode-gradient: linear-gradient( 180deg, var(--ds-simplycode-light), var(--ds-simplycode-dark) ); - --ds-simplycode-gradient-bump: linear-gradient( 180deg, var(--ds-simplycode-bump), var(--ds-simplycode-light) 95%, var(--ds-simplycode-dark) 100%); - - --ds-primary: var(--ds-simplycode); - --ds-primary-dark: var(--ds-simplycode-dark); - --ds-primary-contrast: var(--ds-white); - --ds-primary-light: var(--ds-simplycode-light); - --ds-primary-gradient: var(--ds-simplycode-gradient); - --ds-primary-gradient-bump: var(--ds-simplycode-gradient-bump); + --ds-primary: var(--simplycode-highlight-light); + --ds-primary-dark: var(--simplycode-highlight-dark); + --ds-primary-contrast: var(--simplycode-highlight-color); + --ds-primary-light: var(--simplycode-highlight-light); + --ds-primary-gradient: var(--simplycode-highlight-gradient); + --ds-primary-bump: #b65cfc; + --ds-primary-gradient-bump: linear-gradient( 180deg, var(--ds-primary-bump), var(--simplycode-highlight-light) 95%, var(--simplycode-highlight-dark) 100%); --ds-support: #06CC06; --ds-support-dark: #05BB05; @@ -544,109 +588,109 @@ /* style */ :root { - --simplycode-highlight-dark: #f16623; - --simplycode-highlight-light: #ff8003; - --simplycode-highlight-color: #fff; - --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) ); + --simplycode-highlight-dark: #f16623; + --simplycode-highlight-light: #ff8003; + --simplycode-highlight-color: #fff; + --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) ); - --simplycode-support-dark: #444; - --simplycode-support-light: #484848; - --simplycode-support-color: #eee; - --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) ); + --simplycode-support-dark: #444; + --simplycode-support-light: #484848; + --simplycode-support-color: #eee; + --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) ); - --simplycode-grey-dark: #38393c; - --simplycode-grey-medium: #7f8185; - --simplycode-grey-light: #e9ebec; - --simplycode-grey-dark: #38393c; - --simplycode-black: #000; - --simplycode-white: #fff; - --simplycode-grey-background: var(--simplycode-grey-dark); + --simplycode-grey-dark: #38393c; + --simplycode-grey-medium: #7f8185; + --simplycode-grey-light: #e9ebec; + --simplycode-grey-dark: #38393c; + --simplycode-black: #000; + --simplycode-white: #fff; + --simplycode-grey-background: var(--simplycode-grey-dark); - --simplycode-font-family: 'Alegreya Sans', sans-serif; - --simplycode-font-size: 14px; - --simplycode-line-height: 1.5em; - --simplycode-color: #7f8185; - --simplycode-background: #333; + --simplycode-font-family: 'Alegreya Sans', sans-serif; + --simplycode-font-size: 14px; + --simplycode-line-height: 1.5em; + --simplycode-color: #7f8185; + --simplycode-background: #333; } /* general styling on default elements */ html, body { - margin: 0; - padding: 0; - font-family: var(--simplycode-font-family); - font-size: var(--simplycode-font-size); - line-height: var(--simplycode-line-height); - color: var(--simplycode-color); - background-color: var(--simplycode-background); + margin: 0; + padding: 0; + font-family: var(--simplycode-font-family); + font-size: var(--simplycode-font-size); + line-height: var(--simplycode-line-height); + color: var(--simplycode-color); + background-color: var(--simplycode-background); } body { - overflow-y: scroll; + overflow-y: scroll; } body:last-child { - margin-bottom: 1.5em; + margin-bottom: 1.5em; } h1 { - font-size: 2em; - font-weight: 300; - line-height: 1.1em; - margin: 0; - margin-bottom: 0.5em; + font-size: 2em; + font-weight: 300; + line-height: 1.1em; + margin: 0; + margin-bottom: 0.5em; } h2 { - font-size: 1.6em; - font-weight: 400; - line-height: 1.1em; - margin: 0; - margin-bottom: 0.5em; + font-size: 1.6em; + font-weight: 400; + line-height: 1.1em; + margin: 0; + margin-bottom: 0.5em; } * { - box-sizing: border-box; + box-sizing: border-box; } img { - display: block; - max-width: 100%; + display: block; + max-width: 100%; } a { - color: var(--simplycode-highlight-dark); + color: var(--simplycode-highlight-dark); } a:visited { - color: var(--simplycode-highlight-dark); + color: var(--simplycode-highlight-dark); } /* custom styling for custom elements */ .simplycode-button, a.simplycode-button { - background: var(--simplycode-support-background); - color: var(--simplycode-support-color); - padding: 0.3em 0.5em; - margin: 0 0.3em; - border: 1px solid #ccc; - text-decoration: none; + background: var(--simplycode-support-background); + color: var(--simplycode-support-color); + padding: 0.3em 0.5em; + margin: 0 0.3em; + border: 1px solid #ccc; + text-decoration: none; } .simplycode-button:first-child { - margin-left: 0; + margin-left: 0; } .simplycode-button:last-child { - margin-right: 0; + margin-right: 0; } .simplycode-button.highlight { - background: var(--simplycode-highlight-background); - color: var(--simplycode-highlight-color); + background: var(--simplycode-highlight-background); + color: var(--simplycode-highlight-color); } .text-content { - padding: 2.2375em; - max-width: 50em; + padding: 2.2375em; + max-width: 50em; } .text-content *:first-child { - margin-top: 0; + margin-top: 0; } body { @@ -660,267 +704,251 @@ "nav pane pane" } body > header { - grid-area: header; + grid-area: header; } body > nav { - grid-area: nav; + grid-area: nav; } body > div.main { - grid-area: pane; + grid-area: pane; } nav ul ul .simplycode-expand { - display: none; - padding: 0 1.7em; + display: none; + padding: 0 1.7em; } nav ul { - list-style: none; - margin: 0 0.5em; - padding: 0; + list-style: none; + margin: 0 0.5em; + padding: 0; } nav ul ul { - padding: 0 1.7em; + padding: 0 1.7em; } nav > ul > li[data-simply-command=expandMenu][open]::before { - content: "[-] "; - font-family: monospace; + content: "[-] "; + font-family: monospace; } nav > ul > li[data-simply-command=expandMenu]::before { - content: "[+] "; - font-family: monospace; + content: "[+] "; + font-family: monospace; } .simplycode-part { - margin-top: 1em; + margin-top: 1em; } .simplycode-part-header { - display: grid; - grid-template-columns: 1fr 1fr; + display: grid; + grid-template-columns: 1fr 1fr; } .simplycode-part-header .simplycode-options { - text-align: right; + text-align: right; } .simplycode-part .simplycode-tab { - padding: 10px 5px; - margin: 0; - background-color: #151515; - color: #ddd; - border: 0; - text-align: center; - margin-right: 5px; + padding: 10px 5px; + margin: 0; + background-color: #151515; + color: #ddd; + border: 0; + text-align: center; + margin-right: 5px; } .simplycode-part .simplycode-tab input[type=radio] { - display: none; + display: none; } .simplycode-part .simplycode-tab input[type=radio]:checked ~ span { - font-weight: bold; - border-bottom: 2px solid var(--simplycode-support-background); + font-weight: bold; + border-bottom: 2px solid var(--simplycode-support-background); } .simplycode-part .simplycode-editor-code { - display: grid; - grid-template-columns: 1fr; + display: grid; + grid-template-columns: 1fr; } .simplycode-part .simplycode-dual { - display: grid; - grid-template-columns: 1fr 1fr; + display: grid; + grid-template-columns: 1fr 1fr; } .simplycode-part .simplycode-dual-preview { - display: grid; - grid-template-columns: auto 480px; + display: grid; + grid-template-columns: auto 480px; } .simplycode-test-header { - display: grid; - grid-template-columns: 1fr 1fr; + display: grid; + grid-template-columns: 1fr 1fr; } .simplycode-test-header .simplycode-options { - text-align: right; + text-align: right; } .simplycode-component summary { - font-size: 1.2em; + font-size: 1.2em; } .simplycode-component { - margin: 10px 0px; + margin: 10px 0px; } .simplycode-header { - display: grid; - grid-template-columns: 3fr 1fr; - vertical-align: middle; + display: grid; + grid-template-columns: 3fr 1fr; + vertical-align: middle; } .simplycode-header .simplycode-controls { - text-align: right; + text-align: right; } .simplycode-header h1 span { - white-space: nowrap; + white-space: nowrap; } .simplycode-component summary .simplycode-controls { - display: none; - margin-left: 1em; + display: none; + margin-left: 1em; } .simplycode-component[open] summary .simplycode-controls { - display: inline-block; + display: inline-block; } header { - position: fixed; - padding: 8px 10px 6px 10px; - left: 0; - right: 0; - display: grid; - grid-template-columns: 2fr 1fr; - background-color: #404040; - border-bottom: 2px solid #2222; - vertical-align: middle; - z-index: 200; + position: fixed; + padding: 8px 10px 6px 10px; + left: 0; + right: 0; + display: grid; + grid-template-columns: 2fr 1fr; + background-color: #404040; + border-bottom: 2px solid #2222; + vertical-align: middle; + z-index: 200; } header h1 { - margin: 0; + margin: 0; } header .simplycode-controls { - padding-top: 5px; - padding-right: 5px; - text-align: right; + padding-top: 5px; + padding-right: 5px; + text-align: right; } .simplycode-editor-code textarea { - margin-top: -1px; - } - - ul.simplycode-components-list { - list-style: none; - padding: 0; - margin: 0; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 10px; - margin-bottom: 1em; - } - ul.simplycode-components-list li { - border: 1px solid #555; - background-color: #2a2a2a; - padding: 10px; - border-radius: 2px; + margin-top: -1px; } /* Components: Toast */ :root { - --simply-toast-height: 60px; - --simply-toast-hide-delay: 3s; - --simply-toast-show-duration: 0.3s; - --simply-toast-hide-duration: 0.5s; - --simply-toast-margin: 20px; - --simply-toast-error-color: rgb(253, 143, 143); - --simply-toats-warning-color: #FFFFCC; - --simply-toast-info-color: rgb(140, 180, 250); - --simply-toast-white: #FFF; - --simply-toast-grey-50: #a8b4c0; - --simply-toast-grey-80: #4d565c; - --simply-toast-font-size: calc(1.1 * 1rem); - --simply-toast-font-weight: 300; - --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size)); - --simply-toast-color: var(--simplycode-grey-medium); - --simply-toast-contrast: var(--simplycode-grey-medium); - --simply-toast-background:var(--simplycode-white); - --simply-toast-heading-weight: 900; - --simply-toast-heading-multiplier: 1.1; + --simply-toast-height: 60px; + --simply-toast-hide-delay: 3s; + --simply-toast-show-duration: 0.3s; + --simply-toast-hide-duration: 0.5s; + --simply-toast-margin: 20px; + --simply-toast-error-color: rgb(253, 143, 143); + --simply-toats-warning-color: #FFFFCC; + --simply-toast-info-color: rgb(140, 180, 250); + --simply-toast-white: #FFF; + --simply-toast-grey-50: #a8b4c0; + --simply-toast-grey-80: #4d565c; + --simply-toast-font-size: calc(1.1 * 1rem); + --simply-toast-font-weight: 300; + --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size)); + --simply-toast-color: var(--simplycode-grey-medium); + --simply-toast-contrast: var(--simplycode-grey-medium); + --simply-toast-background:var(--simplycode-white); + --simply-toast-heading-weight: 900; + --simply-toast-heading-multiplier: 1.1; } ul.simply-toasts, ol.simply-toasts, .simply-toasts { - position: fixed; - right: 0; - top: 0; - z-index: 101; - display: block; - list-style: none; - margin: 0; - padding: 0; - max-width: 50%; - min-width: 300px; + position: fixed; + right: 0; + top: 0; + z-index: 101; + display: block; + list-style: none; + margin: 0; + padding: 0; + max-width: 50%; + min-width: 300px; } .simply-toast, li.simply-toast { - min-width: 300px; - float: right; - clear: both; - margin-right: 0; - margin-top: 60px; - background-color: var(--simply-toast-grey-80); - color: var(--simply-toast-white); - display: block; - border-left: 10px solid var(--simply-toast-grey-50); - padding: 20px; - border-radius: 2px; + min-width: 300px; + float: right; + clear: both; + margin-right: 0; + margin-top: 60px; + background-color: var(--simply-toast-grey-80); + color: var(--simply-toast-white); + display: block; + border-left: 10px solid var(--simply-toast-grey-50); + padding: 20px; + border-radius: 2px; } .simply-toast-error, li.simply-toast-error { - border-color: var(--simply-toast-error-color); + border-color: var(--simply-toast-error-color); } .simply-toast-info, li.simply-toast-info { - border-color: var(--simply-toast-info-color); + border-color: var(--simply-toast-info-color); } .simply-toast-warning, li.simply-toast-warning { - border-color: var(--simply-toast-warning-color); + border-color: var(--simply-toast-warning-color); } @keyframes simply-toast-show { - 0% { - transform: scaleX(0); - transform-origin: right; - opacity: 0; - } - 50% { - transform: scaleX(0); - transform-origin: right; - opacity: 0; - } - 75% { - opacity: 1; - } - 100% { - transform: scaleX(1); - transform-origin: right; - opacity: 1; - } + 0% { + transform: scaleX(0); + transform-origin: right; + opacity: 0; + } + 50% { + transform: scaleX(0); + transform-origin: right; + opacity: 0; + } + 75% { + opacity: 1; + } + 100% { + transform: scaleX(1); + transform-origin: right; + opacity: 1; + } } @keyframes simply-toast-hide { - 0% { - transform: scaleX(1); - transform-origin: right; - opacity: 1; - } - 50% { - opacity: 1; - } - 100% { - transform: scaleX(0); - transform-origin: right; - opacity: 0; - } + 0% { + transform: scaleX(1); + transform-origin: right; + opacity: 1; + } + 50% { + opacity: 1; + } + 100% { + transform: scaleX(0); + transform-origin: right; + opacity: 0; + } } @keyframes simply-toast-move { - 0% { - transform: translateY(-80px); /* toast-height + toast-margin */ - } - 100% { - transform: translateY(0px); - } + 0% { + transform: translateY(-80px); /* toast-height + toast-margin */ + } + 100% { + transform: translateY(0px); + } } .simply-toast[data-state="new"] { - animation: simply-toast-show var(--simply-toast-show-duration) forwards; + animation: simply-toast-show var(--simply-toast-show-duration) forwards; } .simply-toast-autohide[data-state="new"] { - animation: simply-toast-show var(--simply-toast-show-duration); - animation-delay: 0s; + animation: simply-toast-show var(--simply-toast-show-duration); + animation-delay: 0s; } .simply-toast-autohide.simply-toast-animated[data-state="shown"] { - animation: simply-toast-hide var(--simply-toast-hide-duration) forwards; - animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration)); + animation: simply-toast-hide var(--simply-toast-hide-duration) forwards; + animation-delay: calc(var(--simply-toast-hide-delay) - var(--simply-toast-show-duration)); } .simply-toast-autohide:not(.simply-toast-animated)[data-state="shown"] { - animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards; - animation-delay: 0s, var(--simply-toast-hide-delay); + animation: simply-toast-move var(--simply-toast-show-duration), simply-toast-hide var(--simply-toast-hide-duration) forwards; + animation-delay: 0s, var(--simply-toast-hide-delay); } /* QUnit iframe */ @@ -1037,7 +1065,7 @@ --simply-logo-color-primary: var(--simplycode-highlight-dark); --simply-logo-color-secondary: white; } - /* simply-toobar-button */ + /* simply-toolbar-button */ .simply-toolbar-button { height: var(--simply-toolbar-button-height); border-top: 1px solid transparent; @@ -1100,7 +1128,7 @@ } /* simply-toolbar */ :root { - --simply-toobar-height: 60px; + --simply-toolbar-height: 60px; --simply-toolbar-primary: var(--simplycode-highlight-dark); --simply-toolbar-button-font: arial, helvetica, sans-serif; --simply-toolbar-button-font-size: 11px; @@ -1112,79 +1140,79 @@ --simply-toolbar-title-height: var(--simply-toolbar-height); } .simply-toolbar { - position: absolute; - top: 0; - left: 0; - border-top: 1px solid var(--simply-toolbar-button-primary); - background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%); - white-space: nowrap; - min-width: 100%; - min-height: var(--simply-toolbar-height); - display: flex; + position: absolute; + top: 0; + left: 0; + border-top: 1px solid var(--simply-toolbar-button-primary); + background: linear-gradient(180deg, var(--ds-white) 0, var(--ds-white) 95%, var(--ds-grey-40) 100%); + white-space: nowrap; + min-width: 100%; + min-height: var(--simply-toolbar-height); + display: flex; } .simply-toolbar-title { - padding: 0 10px; - font-size: 16px; - width: var(--simply-toolbar-title-width); - font-family: sans-serif; - text-transform: none; - border: 0; - height: var(--simply-toolbar-button-height); - cursor: default; - border-radius: 0; - box-shadow: 0; - outline: 0; - display: flex; - flex-direction: column; - justify-content: center; + padding: 0 10px; + font-size: 16px; + width: var(--simply-toolbar-title-width); + font-family: sans-serif; + text-transform: none; + border: 0; + height: var(--simply-toolbar-button-height); + cursor: default; + border-radius: 0; + box-shadow: 0; + outline: 0; + display: flex; + flex-direction: column; + justify-content: center; } .simply-toolbar-highlight { - background: var(--ds-primary-gradient-bump); - color: var(--ds-primary-contrast); + background: var(--ds-primary-gradient-bump); + color: var(--ds-primary-contrast); } .simply-toolbar .simply-toolbar-title { - margin-top: 0; + margin-top: 0; } .simply-toolbar-spacer { - border-left: 1px solid #ccc; - height: var(--simply-toolbar-height); - position: absolute; - display: inline-block; + border-left: 1px solid #ccc; + height: var(--simply-toolbar-height); + position: absolute; + display: inline-block; } .simply-toolbar-button-expands:not(.ds-selected)::after { - content: ""; - display: block; - position: absolute; - bottom: 6px; - left: 50%; - margin-left: -3px; - width: 0; - border-top: 3px solid #888; - border-bottom: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; + content: ""; + display: block; + position: absolute; + bottom: 6px; + left: 50%; + margin-left: -3px; + width: 0; + border-top: 3px solid #888; + border-bottom: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; } .simply-toolbar .simply-toolbar-push-right { - margin-left: auto; + margin-left: auto; } .simply-toolbar-title img { - height: 30px; + height: 30px; } .simply-toolbar input[type="text"] { - margin-right:0; - margin-bottom: 0; - margin-top: 10px; - font-size: small; - line-height: 1.2em; - height: 35px; + margin-right:0; + margin-bottom: 0; + margin-top: 10px; + font-size: small; + line-height: 1.2em; + height: 35px; } .simply-toolbar.simply-main-toolbar { - border-top-width: 5px; + border-top-width: 5px; } .simply-toolbar { - background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%); - color: var(--ds-white); + background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%); + color: var(--ds-white); } @@ -1357,6 +1385,7 @@ switch(componentPart.id) { case "meta.json": componentPart.id = "meta"; + component.description = componentPart.description; break; case "routes": if (typeof componentPart.contents === "object") { @@ -2098,6 +2127,7 @@ .then(function(components) { components.forEach(function(component) { simplyDataApi.mergeComponent(component.contents); + component.description = component.contents.description; }); return components; }); @@ -2159,6 +2189,7 @@ .then(function(components) { components.forEach(function(component) { simplyDataApi.mergeComponent(component.contents); + component.description = component.contents.description; }); return components; }); @@ -2281,6 +2312,7 @@ .then(function(components) { components.forEach(function(component) { simplyDataApi.mergeComponent(component.contents); + component.description = component.contents.description; }); return components; }); @@ -2793,6 +2825,7 @@ } simplyApp.commands.codeMirrorInit(); simplyApp.commands.autoRunTests(); + simplyApp.commands.autoRunPreviews(); }, "collapseMenu" : function(el) { if (!el.hasAttribute("open")) { @@ -3128,11 +3161,6 @@ editor.pageData.parts = parts; editor.pageData.count = count; editor.pageData.page = "Edit component"; - }) - .then(function() { - setTimeout(function() { // FIXME: Wait for the CSS to be available; - simplyApp.commands.autoRunPreviews(); - }, 1000); }); }, "#pages/:component" : function(params) { @@ -3179,11 +3207,6 @@ editor.pageData.parts = parts; editor.pageData.count = count; editor.pageData.page = "Edit page"; - }) - .then(function() { - setTimeout(function() { // FIXME: Wait for the CSS to be available; - simplyApp.commands.autoRunPreviews(); - }, 1000); }); }, "#base" : function() { @@ -4463,14 +4486,14 @@

Edit base component: