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..91ca20e --- /dev/null +++ b/www/api/data/base-components/font-cocon/meta.json @@ -0,0 +1 @@ +{"id":"font-cocon","description":""} \ 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..54efe5f --- /dev/null +++ b/www/api/data/components/0-ds-styling/meta.json @@ -0,0 +1 @@ +{"id":"0-ds-styling","description":""} \ 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..0aef625 --- /dev/null +++ b/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css @@ -0,0 +1,25 @@ +/* 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-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..a2b1970 100644 --- a/www/api/data/components/1-styling/componentCss/style.css +++ b/www/api/data/components/1-styling/componentCss/style.css @@ -1,27 +1,27 @@ :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 */ @@ -29,11 +29,11 @@ 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); + 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; @@ -67,18 +67,18 @@ img { } 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); + background: var(--simplycode-support-background); + color: var(--simplycode-support-color); padding: 0.3em 0.5em; margin: 0 0.3em; border: 1px solid #ccc; @@ -92,8 +92,8 @@ a.simplycode-button { 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 { @@ -107,7 +107,7 @@ a.simplycode-button { 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" @@ -169,7 +169,7 @@ nav > ul > li[data-simply-command=expandMenu]::before { } .simplycode-part .simplycode-tab input[type=radio]:checked ~ span { font-weight: bold; - border-bottom: 2px solid var(--support-background); + border-bottom: 2px solid var(--simplycode-support-background); } .simplycode-part .simplycode-editor-code { display: grid; @@ -224,7 +224,7 @@ header { background-color: #404040; border-bottom: 2px solid #2222; vertical-align: middle; - z-index: 1; + z-index: 200; } header h1 { margin: 0; @@ -262,20 +262,20 @@ ul.simplycode-components-list li { --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-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, @@ -299,24 +299,24 @@ li.simply-toast { clear: both; margin-right: 0; margin-top: 60px; - background-color: var(--simply-grey-80); - color: var(--simply-white); + background-color: var(--simply-toast-grey-80); + color: var(--simply-toast-white); display: block; - border-left: 10px solid var(--simply-grey-50); + 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 { 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..0e3c082 --- /dev/null +++ b/www/api/data/components/simply-logo/meta.json @@ -0,0 +1 @@ +{"id":"simply-logo","description":""} \ 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-toobar-button.css b/www/api/data/components/simply-toolbar/componentCss/simply-toobar-button.css new file mode 100644 index 0000000..ebb660f --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentCss/simply-toobar-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..2b66fd1 --- /dev/null +++ b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css @@ -0,0 +1,87 @@ +:root { + --simply-toobar-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..1aeab60 --- /dev/null +++ b/www/api/data/components/simply-toolbar/meta.json @@ -0,0 +1 @@ +{"id":"simply-toolbar","description":""} \ No newline at end of file diff --git a/www/api/data/generated.html b/www/api/data/generated.html index 8446464..e063a3b 100644 --- a/www/api/data/generated.html +++ b/www/api/data/generated.html @@ -4,6 +4,488 @@ @@ -545,7 +1208,15 @@ - + +