diff --git a/www/api/data/assets/fonts/CoconRegularFont.woff b/www/api/data/assets/fonts/CoconRegularFont.woff new file mode 100644 index 0000000..0f98fcf Binary files /dev/null and b/www/api/data/assets/fonts/CoconRegularFont.woff differ diff --git a/www/api/data/assets/img/feather-sprite.svg b/www/api/data/assets/img/feather-sprite.svg new file mode 100644 index 0000000..fcb2082 --- /dev/null +++ b/www/api/data/assets/img/feather-sprite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/www/api/data/base-components/font-cocon/headHtml/cocon.html b/www/api/data/base-components/font-cocon/headHtml/cocon.html new file mode 100644 index 0000000..642c193 --- /dev/null +++ b/www/api/data/base-components/font-cocon/headHtml/cocon.html @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/www/api/data/base-components/font-cocon/meta.json b/www/api/data/base-components/font-cocon/meta.json new file mode 100644 index 0000000..394acbf --- /dev/null +++ b/www/api/data/base-components/font-cocon/meta.json @@ -0,0 +1 @@ +{"id":"font-cocon","description":"Cocon Regular font (simply logo font)"} \ No newline at end of file diff --git a/www/api/data/base-components/toasts/bodyHtml/Toast styles.html b/www/api/data/base-components/toasts/bodyHtml/Toast styles.html index 08d462d..b167e5d 100644 --- a/www/api/data/base-components/toasts/bodyHtml/Toast styles.html +++ b/www/api/data/base-components/toasts/bodyHtml/Toast styles.html @@ -3,4 +3,7 @@ position: relative; z-index: 101; } - + .simply-toasts:has(.simply-empty) { + display: none; + } + \ No newline at end of file diff --git a/www/api/data/components/0-ds-styling/componentCss/extra.css b/www/api/data/components/0-ds-styling/componentCss/extra.css new file mode 100644 index 0000000..5f9ddb1 --- /dev/null +++ b/www/api/data/components/0-ds-styling/componentCss/extra.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i'); \ No newline at end of file diff --git a/www/api/data/components/0-ds-styling/componentCss/style.css b/www/api/data/components/0-ds-styling/componentCss/style.css new file mode 100644 index 0000000..2d7895d --- /dev/null +++ b/www/api/data/components/0-ds-styling/componentCss/style.css @@ -0,0 +1,478 @@ +/* ds-alert-root */ +:root { + --ds-alert-text-color: var(--ds-black); + --ds-alert-error-color: var(--ds-error-color); + --ds-alert-warning-color: var(--ds-warning-color); + --ds-alert-info-color: var(--ds-info-color); +} +/* ds-alert */ +.ds-alert { + padding: 0.05px; /* contain child margins */ + color: var(--ds-alert-text-color); +} +@supports (display: flow-root) { + .ds-alert { + display: flow-root; + padding: 0; + } +} +.ds-alert-error { + background-color: var(--ds-alert-error-color); +} +.ds-alert-warning { + background-color: var(--ds-alert-warning-color); +} +.ds-alert-info { + background-color: var(--ds-alert-info-color); +} +/* ds-align */ +.ds-align-center { + text-align: center; + margin-left: auto; + margin-right: auto; +} +.ds-align-center-middle { + display: flex; + align-items: center; + justify-content: center; +} +.ds-align-right { + float: right; +} +.ds-align-left { + float: left; +} +/* ds-background-root */ +:root { + --ds-background-dark-text-color: white; + --ds-background-dark-shadow-color: var(--ds-black); + --ds-background-dark-shadox-size: 2px; + --ds-background-dark-shadow-offset: 0 0; + + --ds-background-light-text-color: var(--ds-color); + --ds-background-light-shadow-color: white; + --ds-background-light-shadox-size: 3px; + --ds-background-light-shadow-offset: 0 0; +} + +:root { + --ds-background-dark-text-shadow: var(--ds-background-dark-shadow-offset) var(--ds-background-dark-shadow-size) var(--ds-background-dark-shadow-color); + --ds-background-light-text-shadow: var(--ds-background-light-shadow-offset) var(--ds-background-light-shadow-size) var(--ds-background-light-shadow-color); +} + +/* ds-background */ +.ds-background-dark { + color: var(--ds-background-dark-text-color); + text-shadow: var(--ds-background-dark-text-shadow); +} +.ds-background-light { + color: var(--ds-background-light-text-color); + text-shadow: var(--ds-background-light-text-shadow); +} +/* ds-background-image */ +.ds-background-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; +} +/* ds-box-root */ +:root { + --ds-box-radius: 3px; + --ds-box-shadow: var(--ds-shadow-small); +} +/* ds-box */ +.ds-box { + border-radius: var(--ds-box-radius); + box-shadow: var(--ds-box-shadow); + position: relative; + break-inside: avoid; +} +@supports (display: flow-root) { + .ds-box { + display: flow-root; + padding: 0; + } +} +.ds-box-top { + border-top-left-radius: var(--ds-box-radius); + border-top-right-radius: var(--ds-box-radius); +} +.ds-box-bottom { + border-bottom-left-radius: var(--ds-box-radius); + border-bottom-right-radius: var(--ds-box-radius); +} + +/* ds-button-root */ +:root { + --ds-button-spacing: calc(0.5 * var(--ds-input-spacing)); + --ds-button-bg-color: var(--ds-grey-light); + --ds-button-default-bg-color: var(--ds-white); + --ds-button-border-color: var(--ds-grey-light); + --ds-button-disabled-color: var(--ds-grey-medium); + --ds-button-disabled-bg-color: var(--ds-white); + --ds-button-primary-bg-color: var(--ds-primary); + --ds-button-primary-color: var(--ds-primary-contrast); + --ds-button-primary-border-color: var(--ds-primary); + --ds-button-line-height: calc(var(--ds-line-height) * 1.5); + --ds-button-shadow: var(--ds-shadow-tiny); + --ds-button-shadow-hover: var(--ds-shadow-small); + --ds-button-radius: 3px; +} +/* ds-button */ +:root .ds-button { + line-height: var(--ds-button-line-height); + min-height: var(--ds-button-line-height); +} +.ds-button { + margin: 0 var(--ds-button-spacing) var(--ds-button-spacing) 0; + overflow: visible; + font: inherit; + color: inherit; + display: inline-block; + box-sizing: border-box; + padding: 0 calc(0.5 * var(--ds-line-height)); + vertical-align: middle; + font-size: calc(0.875 * var(--ds-font-size)); + text-align: center; + text-decoration: none; + text-transform: uppercase; + background-color: var(--ds-button-bg-color); + outline: 1px solid var(--ds-button-border-color); + border: 0; + white-space: nowrap; + box-shadow: var(--ds-button-shadow); + border-radius: var(--ds-button-radius); +} +.ds-button::-moz-focus-inner { + border: 0; +} +.ds-button:hover, +.ds-button:focus { + cursor: pointer; + text-decoration: none; + color: inherit; + box-shadow: var(--ds-button-shadow-hover); +} +a.ds-button, +a.ds-button:hover, +a.ds-button:active, +a.ds-button:visited { + color: inherit; +} +.ds-button-default { + background-color: var(--ds-button-default-bg-color); +} +a.ds-button-primary, a.ds-button-primary:hover, +a.ds-button-primary:active, a.ds-button-primary:visited, +.ds-button-primary, .ds-button-primary:hover { + background-color: var(--ds-button-primary-bg-color); + color: var(--ds-button-primary-color); + border-color: var(--ds-button-primary-border-color); +} +a.ds-button-support, a.ds-button-support:hover, +a.ds-button-support:active, a.ds-button-support:visited, +.ds-button-support, .ds-button-support:hover { + background-color: var(--ds-button-support-bg-color); + color: var(--ds-button-support-color); + border-color: var(--ds-button-support-border-color); +} +.ds-button:disabled { + background-color: var(--ds-button-disabled-bg-color); + color: var(--ds-button-disabled-color); +} +.ds-button:disabled:hover { + cursor: not-allowed; + box-shadow: 0 0 0; +} +.ds-button-group { + display: flex; + flex-wrap: wrap; +} +.ds-button-light { + background: none; + outline: 0; + padding: 0; +} +.ds-button-naked { + background: none; + outline: 0; +} +.ds-button-close { + position: absolute; + right: var(--ds-spacing); + margin: 0; +} + +.ds-button-grow { + display: block; + width: 100%; +} +/* ds-bg */ +.ds-bg-primary { + background: var(--ds-primary); + color: var(--ds-primary-contrast); + --ds-contrast: var(--ds-primary-contrast); +} +.ds-bg-primary-gradient { + background: var(--ds-primary-gradient); + color: var(--ds-primary-contrast); + --ds-contrast: var(--ds-primary-contrast); +} +.ds-bg-support { + background: var(--ds-support); + color: var(--ds-support-contrast); + --ds-contrast: var(--ds-support-contrast); +} +.ds-bg-support-gradient { + background: var(--ds-support-gradient); + color: var(--ds-support-contrast); + --ds-contrast: var(--ds-support-contrast); +} +.ds-bg-grey-dark { + background: var(--ds-grey-dark); + color: var(--ds-white); + --ds-contrast: var(--ds-white); +} +.ds-bg-grey-medium { + background: var(--ds-grey-medium); + color: var(--ds-white); + --ds-contrast: var(--ds-white); +} +.ds-bg-grey-light { + background: var(--ds-grey-light); + color: var(--ds-black); + --ds-contrast: var(--ds-black); +} +/* ds-color */ +.ds-color { + display: flex; + text-align: center; + font-size: 0.8em; + align-items: center; + justify-content: center; +} +.ds-color-primary { + color: var(--ds-primary); +} +.ds-color-support { + color: var(--ds-support); +} +/* ds-contain */ +.ds-contain { + padding: 0.05px; /* IE fallback */ +} +@supports (display: flow-root) { + .ds-contain { + padding: 0; + display: flow-root; + } +} +/* ds-core-colors */ +:root { + --ds-black: #000; + --ds-white: #FFF; + + --ds-primary: #ae47ff; + --ds-primary-light: #c880ff; + --ds-primary-dark: #8d00f8; + --ds-primary-bump: #b65cfc; + --ds-primary-contrast: var(--ds-white); + --ds-primary-gradient: linear-gradient( 180deg, var(--ds-primary), var(--ds-primary-dark) ); + --ds-primary-gradient-bump: linear-gradient( 180deg, var(--ds-primary-bump), var(--ds-primary-light) 95%, var(--ds-primary-dark) 100%); + + --ds-support: #06CC06; + --ds-support-dark: #05BB05; + --ds-support-light: #07DE07; + --ds-support-contrast: #FFF; + --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) ); + /* http://www.colorbox.io/#steps=11#hue_start=198#hue_end=198#hue_curve=linear#sat_start=15#sat_end=15#sat_curve=linear#sat_rate=130#lum_start=98#lum_end=0#lum_curve=easeOutQuad#lock_hex=eef1f8#minor_steps_map=0 */ + --ds-grey-0: #eef1f8; + --ds-grey-5: #e9edf6; + --ds-grey-10: #e4eaf4; + --ds-grey-20: #dae2ed; + --ds-grey-30: #cdd7e3; + --ds-grey-40: #bdc8d4; + --ds-grey-50: #a8b4c0; + --ds-grey-60: #8f9ba6; + --ds-grey-70: #707c84; + --ds-grey-80: #4d565c; + --ds-grey-90: #262c2f; + --ds-grey-100: #000000; + --ds-grey-dark: var(--ds-grey-90); + --ds-grey-medium: var(--ds-grey-60); + --ds-grey-light: var(--ds-grey-0); + + --ds-error-color: rgb(253, 143, 143); + --ds-warning-color: #FFFFCC; + --ds-info-color: rgb(140, 180, 250); +} +/* ds-core-reset */ +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { + margin:0; + padding:0; +} +img { + max-width: 100%; + display: block; +} +* { + box-sizing: border-box; +} +/* ds-core-shadows */ +:root { + --ds-shadow-light: rgba(0,0,0,0.07); + --ds-shadow-middle: rgba(0,0,0,0.09); + --ds-shadow-dark: rgba(0,0,0,0.11); + --ds-shadow-tiny: + 0 1px 1px var(--ds-shadow-dark) + ; + --ds-shadow-small: + 0 1px 1px var(--ds-shadow-dark), + 0 2px 2px var(--ds-shadow-middle), + 0 4px 4px var(--ds-shadow-light) + ; + --ds-shadow-medium: + 0 1px 1px var(--ds-shadow-middle), + 0 2px 2px var(--ds-shadow-middle), + 0 4px 4px var(--ds-shadow-middle), + 0 6px 8px var(--ds-shadow-middle), + 0 8px 16px var(--ds-shadow-middle) + ; + --ds-shadow-large: + 0 2px 1px var(--ds-shadow-light), + 0 4px 2px var(--ds-shadow-light), + 0 8px 4px var(--ds-shadow-light), + 0 16px 8px var(--ds-shadow-light), + 0 32px 16px var(--ds-shadow-light) + ; +} +/* ds-core-typography */ +@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,300&family=Roboto+Condensed:ital@0;1&display=swap'); +:root { + --ds-body-font: 'Lato', sans-serif; + --ds-heading-font: 'Roboto Condensed', Helvetica, sans-serif; +} +:root { + --ds-font-size: 1rem; + --ds-font-weight: 300; + --ds-line-height: calc(1.6 * var(--ds-font-size)); + --ds-color: var(--ds-black); + --ds-color-transparent: rgba(0,0,0,0); + --ds-contrast: var(--ds-grey-dark); + --ds-background: var(--ds-white); + --ds-background-transparent: rgba(255,255,255,0); + --ds-heading-weight: 400; + --ds-heading-multiplier: 1.27201965; + --ds-spacing: var(--ds-line-height); +} +/* ds-hidden */ +.ds-hidden { + max-height: 0; + overflow: hidden; +} +/* ds-icon */ +.ds-icon { + display: inline-block; + height: var(--ds-line-height); + width: 1em; + vertical-align: bottom; +} + +.ds-icon-feather { + stroke: currentColor; + stroke-width: 2; + stroke-linecap: square; + stroke-linejoin: square; + fill: none; +} +/* ds-screen-size */ +:root { + --ds-screen-size: tiny; +} +@media (min-width: 480px) { + :root { + --ds-screen-size: small; + } +} +@media (min-width: 640px) { + :root { + --ds-screen-size: tablet; + } +} +@media (min-width: 992px) { + :root { + --ds-screen-size: medium; + } +} +@media (min-width: 1200px) { + :root { + --ds-screen-size: large; + } +} +@media (min-width: 1800px) { + :root { + --ds-screen-size: extra-large; + } +} +/* ds-shadow */ +.ds-shadow-tiny { + box-shadow: var(--ds-shadow-tiny); +} +.ds-shadow-small { + box-shadow: var(--ds-shadow-small); +} +.ds-shadow-medium { + box-shadow: var(--ds-shadow-medium); +} +.ds-shadow-large { + box-shadow: var(--ds-shadow-large); +} +/* ds-space */ +.ds-space-margin-up { + margin-top: calc(-1 * var(--ds-spacing)); +} +.ds-space-none { + margin: 0; +} +.ds-space { + margin: var(--ds-line-height); +} +.ds-space-vertical { + margin: var(--ds-line-height) 0; +} +.ds-space-horizontal { + margin-left: var(--ds-spacing); + margin-right: var(--ds-spacing); +} +.ds-space-left { + margin-left: var(--ds-spacing); +} +.ds-space-right { + margin-right: var(--ds-spacing); +} +.ds-space-top { + margin-top: var(--ds-spacing); +} +.ds-space-bottom { + margin-bottom: var(--ds-spacing); +} + +.ds-space-inside { + padding: 0 var(--ds-spacing); +} +.ds-space-inside::before, +.ds-space-inside::after { + content: ""; + display: block; + height: 0; +} +.ds-space-inside::before { + margin-bottom: var(--ds-spacing); +} +.ds-space-inside::after { + margin-top: var(--ds-spacing); +} diff --git a/www/api/data/components/0-ds-styling/meta.json b/www/api/data/components/0-ds-styling/meta.json new file mode 100644 index 0000000..9926ec8 --- /dev/null +++ b/www/api/data/components/0-ds-styling/meta.json @@ -0,0 +1 @@ +{"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 new file mode 100644 index 0000000..623bd91 --- /dev/null +++ b/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css @@ -0,0 +1,18 @@ +/* simplycode-ds-core-colors */ +:root { + --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; + --ds-support-light: #07DE07; + --ds-support-contrast: #FFF; + --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) ); + + --ds-heading-font: var(--simplycode-font-family); +} diff --git a/www/api/data/components/1-styling/componentCss/style.css b/www/api/data/components/1-styling/componentCss/style.css index 26108a3..2d82e87 100644 --- a/www/api/data/components/1-styling/componentCss/style.css +++ b/www/api/data/components/1-styling/componentCss/style.css @@ -1,113 +1,113 @@ :root { - --highlight-dark: #f16623; - --highlight-light: #ff8003; - --highlight-color: #fff; - --highlight-background: linear-gradient( to left, var(--highlight-light), var(--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) ); - --support-dark: #444; - --support-light: #484848; - --support-color: #eee; - --support-background: linear-gradient( to left, var(--support-light), var(--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) ); - --grey-dark: #38393c; - --grey-medium: #7f8185; - --grey-light: #e9ebec; - --grey-dark: #38393c; - --black: #000; - --white: #fff; - --grey-background: var(--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); - --font-family: 'Alegreya Sans', sans-serif; - --font-size: 14px; - --line-height: 1.5em; - --color: #7f8185; - --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(--font-family); - font-size: var(--font-size); - line-height: var(--line-height); - color: var(--color); - background-color: var(--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(--highlight-dark); + color: var(--simplycode-highlight-dark); } a:visited { - color: var(--highlight-dark); + color: var(--simplycode-highlight-dark); } /* custom styling for custom elements */ .simplycode-button, a.simplycode-button { - background: var(--support-background); - color: var(--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(--highlight-background); - color: var(--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 { display: grid; grid-template-columns: 210px 2fr 2fr; - grid-template-rows: 60px 2fr 2fr; + grid-template-rows: 80px 2fr 2fr; gap: 0px 0px; grid-template-areas: "header header header" @@ -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(--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: 1; + 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-error-color: rgb(253, 143, 143); - --simply-warning-color: #FFFFCC; - --simply-info-color: rgb(140, 180, 250); - --simply-white: #FFF; - --simply-grey-50: #a8b4c0; - --simply-grey-80: #4d565c; - --simply-font-size: calc(1.1 * 1rem); - --simply-font-weight: 300; - --simply-line-height: calc(1.5 * var(--simply-font-size)); - --simply-color: var(--grey-medium); - --simply-contrast: var(--grey-medium); - --simply-background:var(--white); - --simply-heading-weight: 900; - --simply-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-grey-80); - color: var(--simply-white); - display: block; - border-left: 10px solid var(--simply-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-error-color); + border-color: var(--simply-toast-error-color); } .simply-toast-info, li.simply-toast-info { - border-color: var(--simply-info-color); + border-color: var(--simply-toast-info-color); } .simply-toast-warning, li.simply-toast-warning { - border-color: var(--simply-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/header/componentTemplates/header.html b/www/api/data/components/header/componentTemplates/header.html index 42aa003..f603ffe 100644 --- a/www/api/data/components/header/componentTemplates/header.html +++ b/www/api/data/components/header/componentTemplates/header.html @@ -1,4 +1 @@ -

Simply Code - Build something awesome!

-
- Preview and publish! -
\ No newline at end of file + \ No newline at end of file diff --git a/www/api/data/components/simply-logo/componentCss/simply-logo.css b/www/api/data/components/simply-logo/componentCss/simply-logo.css new file mode 100644 index 0000000..73e1c8d --- /dev/null +++ b/www/api/data/components/simply-logo/componentCss/simply-logo.css @@ -0,0 +1,4 @@ +:root { + --simply-logo-color-primary: var(--simplycode-highlight-dark); + --simply-logo-color-secondary: white; +} \ No newline at end of file diff --git a/www/api/data/components/simply-logo/componentTemplates/logo.html b/www/api/data/components/simply-logo/componentTemplates/logo.html new file mode 100644 index 0000000..2533985 --- /dev/null +++ b/www/api/data/components/simply-logo/componentTemplates/logo.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + code + + \ 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 new file mode 100644 index 0000000..9a5b2be --- /dev/null +++ b/www/api/data/components/simply-logo/meta.json @@ -0,0 +1 @@ +{"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/commands/preview.js b/www/api/data/components/simply-toolbar/commands/preview.js new file mode 100644 index 0000000..e319a16 --- /dev/null +++ b/www/api/data/components/simply-toolbar/commands/preview.js @@ -0,0 +1,3 @@ +function(el) { + document.location.hash="publish"; +} \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar-button.css b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar-button.css new file mode 100644 index 0000000..ebb660f --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar-button.css @@ -0,0 +1,60 @@ +.simply-toolbar-button { + height: var(--simply-toolbar-button-height); + border-top: 1px solid transparent; + border-bottom: 2px solid transparent; + transition: background 0.2s ease; + font-size: var(--simply-toolbar-button-font-size); + letter-spacing: 0; + font-family: var(--simply-toolbar-button-font); + white-space: nowrap; + user-select: none; + vertical-align: top; + min-width: var(--simply-toolbar-button-width); + text-align: center; + cursor: pointer; + padding: 0 4px; + text-transform: none; + background: transparent; + outline: none; + box-shadow: none; + border-radius: 0; + color: var(--simply-toolbar-button-color); + margin: 0; +} +.simply-toolbar-button:hover { + border-bottom: 2px solid var(--simply-toolbar-button-primary); + box-shadow: none; +} +.simply-toolbar-button .ds-icon { + height: 26px; + font-size: 26px; + padding: 0 4px; + display: block; + margin: 6px auto -14px; + position: relative; +} +.simply-toolbar-button-expands:not(:focus)::after, +.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; +} +.simply-toolbar-button:focus, +.simply-toolbar-button.ds-selected { + background-color: var(--ds-grey-80); + border-left-color: var(--ds-black); + border-top-color: var(--ds-black); + border-right-color: var(--ds-grey-60); +} +.simply-toolbar-button[disabled] { + background-color: transparent; + color: var(--ds-grey-60); +} \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css new file mode 100644 index 0000000..cd0cd60 --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css @@ -0,0 +1,87 @@ +:root { + --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; + --simply-toolbar-button-width: 60px; + --simply-toolbar-button-height: var(--simply-toolbar-height); + --simply-toolbar-button-color: var(--ds-white); + --simply-toolbar-button-primary: var(--simply-toolbar-primary); + --simply-toolbar-title-width: 70px; + --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; +} +.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; +} +.simply-toolbar-highlight { + background: var(--ds-primary-gradient-bump); + color: var(--ds-primary-contrast); +} +.simply-toolbar .simply-toolbar-title { + margin-top: 0; +} +.simply-toolbar-spacer { + 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; +} +.simply-toolbar .simply-toolbar-push-right { + margin-left: auto; +} +.simply-toolbar-title img { + 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; +} +.simply-toolbar.simply-main-toolbar { + 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); +} \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-base-component.html b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-base-component.html new file mode 100644 index 0000000..2f3c8b9 --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-base-component.html @@ -0,0 +1,28 @@ +
+ +
+ + + + + \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-component.html b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-component.html new file mode 100644 index 0000000..4884693 --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-component.html @@ -0,0 +1,28 @@ +
+ +
+ + + + + \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-default.html b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-default.html new file mode 100644 index 0000000..65a73b8 --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-default.html @@ -0,0 +1,28 @@ +
+ +
+ + + + + \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-page-frame.html b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-page-frame.html new file mode 100644 index 0000000..6e1c63c --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-page-frame.html @@ -0,0 +1,28 @@ +
+ +
+ + + + + \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-page.html b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-page.html new file mode 100644 index 0000000..66b1107 --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-page.html @@ -0,0 +1,28 @@ +
+ +
+ + + + + \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-publish.html b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-publish.html new file mode 100644 index 0000000..7c4f1eb --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar-publish.html @@ -0,0 +1,28 @@ +
+ +
+ + + + + \ No newline at end of file diff --git a/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar.html b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar.html new file mode 100644 index 0000000..020b147 --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentTemplates/simply-toolbar.html @@ -0,0 +1,8 @@ + \ 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 new file mode 100644 index 0000000..c199e69 --- /dev/null +++ b/www/api/data/components/simply-toolbar/meta.json @@ -0,0 +1 @@ +{"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 8446464..2e24dc4 100644 --- a/www/api/data/generated.html +++ b/www/api/data/generated.html @@ -4,146 +4,699 @@ @@ -545,7 +1236,15 @@ - + +