diff --git a/000-default.conf b/000-default.conf index ba4af08..7ec48bc 100644 --- a/000-default.conf +++ b/000-default.conf @@ -1,4 +1,4 @@ - + Options Indexes FollowSymLinks AllowOverride All Require all granted @@ -29,4 +29,4 @@ SSLOptions +StdEnvVars - \ No newline at end of file + diff --git a/npm_post_install.sh b/npm_post_install.sh new file mode 100755 index 0000000..fee8923 --- /dev/null +++ b/npm_post_install.sh @@ -0,0 +1,58 @@ +#!/usr/bin/env bash +current_pwd=`pwd` + +if [[ ${INIT_CWD} != ${current_pwd} ]]; then + exit 0; # Skip posinstall when we are installed as a dependancy +fi + +#if (process.cwd().includes('node_modules')) { +# return; # Skip postinstall when we are installed as a dependancy. +#} + +installCodeMirror() { + sSourceDir="${npm_config_local_prefix}/node_modules" + sTargetDir="${npm_config_local_prefix}/www/js" + + mkdir -p \ + "${sTargetDir}/codemirror/lib/" \ + "${sTargetDir}/codemirror/mode/css/" \ + "${sTargetDir}/codemirror/mode/htmlmixed/" \ + "${sTargetDir}/codemirror/mode/javascript/" \ + "${sTargetDir}/codemirror/mode/xml/" \ + "${sTargetDir}/codemirror/theme/" + + cp -f "${sSourceDir}/codemirror/lib/codemirror.css" "${sTargetDir}/codemirror/lib/codemirror.css" + cp -f "${sSourceDir}/codemirror/lib/codemirror.js" "${sTargetDir}/codemirror/lib/codemirror.js" + cp -f "${sSourceDir}/codemirror/mode/css/css.js" "${sTargetDir}/codemirror/mode/css/css.js" + cp -f "${sSourceDir}/codemirror/mode/htmlmixed/htmlmixed.js" "${sTargetDir}/codemirror/mode/htmlmixed/htmlmixed.js" + cp -f "${sSourceDir}/codemirror/mode/javascript/javascript.js" "${sTargetDir}/codemirror/mode/javascript/javascript.js" + cp -f "${sSourceDir}/codemirror/mode/xml/xml.js" "${sTargetDir}/codemirror/mode/xml/xml.js" + cp -f "${sSourceDir}/codemirror/theme/base16-dark.css" "${sTargetDir}/codemirror/theme/base16-dark.css" +} + +installSimplyEdit() { + local sSourceDir sTargetDir + + readonly sSourceDir="${npm_config_local_prefix}/node_modules/simplyedit" + readonly sTargetDir="${npm_config_local_prefix}/www" + + mkdir -p \ + "${sTargetDir}/js/" \ + "${sTargetDir}/hope/" \ + "${sTargetDir}/simply/" \ + + cp -a "${sSourceDir}/js/"* "${sTargetDir}/js" + cp -a "${sSourceDir}/hope/"* "${sTargetDir}/hope" + cp -a "${sSourceDir}/simply/"* "${sTargetDir}/simply" +} + +if [[ ${BASH_SOURCE[0]} != "${0}" ]]; then + export -f installSimplyEdit + export -f installCodeMirror +else + installSimplyEdit + installCodeMirror + exit $? +fi + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..1220aea --- /dev/null +++ b/package-lock.json @@ -0,0 +1,25 @@ +{ + "name": "simplycode", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "simplycode", + "hasInstallScript": true, + "license": "MIT", + "dependencies": { + "codemirror": "5.65.2", + "simplyedit": "github:simplyedit/simplyedit" + } + }, + "node_modules/codemirror": { + "version": "5.65.2", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.2.tgz", + "integrity": "sha512-SZM4Zq7XEC8Fhroqe3LxbEEX1zUPWH1wMr5zxiBuiUF64iYOUH/JI88v4tBag8MiBS8B8gRv8O1pPXGYXQ4ErA==", + "license": "MIT" + }, + "node_modules/simplyedit": { + "resolved": "git+ssh://git@github.com/simplyedit/simplyedit.git#004c14675574c1edb5a1fc3ccae32097f9154069" + } + } +} diff --git a/package.json b/package.json index 80932e2..d347deb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,10 @@ { "author": "SimplyEdit", "description": "Code editor in the SimplyEdit family", + "dependencies": { + "codemirror": "5.65.2", + "simplyedit": "github:simplyedit/simplyedit" + }, "keywords": [ "code", "ide", @@ -16,5 +20,8 @@ "repository": { "type": "git", "url": "git+https://github.com/SimplyEdit/simplycode.git" + }, + "scripts": { + "postinstall": "./npm_post_install.sh" } } 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/assets/img/simplycode-narrow.svg b/www/api/data/assets/img/simplycode-narrow.svg new file mode 100644 index 0000000..f7dea5a --- /dev/null +++ b/www/api/data/assets/img/simplycode-narrow.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/api/data/base-components/automatic-preview/commands/autoRunPreviews.js b/www/api/data/base-components/automatic-preview/commands/autoRunPreviews.js index dc228c0..ca87fee 100644 --- a/www/api/data/base-components/automatic-preview/commands/autoRunPreviews.js +++ b/www/api/data/base-components/automatic-preview/commands/autoRunPreviews.js @@ -1,25 +1,25 @@ function(el) { - var previewRunners = document.querySelectorAll("iframe.sb-full-preview"); + var previewRunners = document.querySelectorAll("iframe.simplycode-full-preview"); previewRunners.forEach(function(previewRunner) { previewRunner.contentWindow.document.previewRunner = previewRunner; simplyApp.commands.resetPreview(previewRunner) .then(function(previewRunner) { previewRunner.contentWindow.document.open(); - previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".sb-preview-code").innerText); + previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".simplycode-preview-code").innerText); previewRunner.contentWindow.document.close(); }); }); - var previewRunners = document.querySelectorAll("iframe.sb-component-preview"); + var previewRunners = document.querySelectorAll("iframe.simplycode-component-preview"); previewRunners.forEach(function(previewRunner) { previewRunner.contentWindow.document.previewRunner = previewRunner; simplyApp.commands.resetPreview(previewRunner) .then(function(previewRunner) { previewRunner.contentWindow.document.open(); - previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".sb-preview-code").innerText); + previewRunner.contentWindow.document.write(previewRunner.parentNode.querySelector(".simplycode-preview-code").innerText); previewRunner.contentWindow.document.close(); previewRunner.contentWindow.addEventListener("simply-content-loaded", function() { - var previewData = previewRunner.parentNode.querySelector(".sb-preview-data").innerText; + var previewData = previewRunner.parentNode.querySelector(".simplycode-preview-data").innerText; try { previewData = JSON.parse(previewData); } catch(e) { diff --git a/www/api/data/base-components/automatic-tests/commands/autoRunTests.js b/www/api/data/base-components/automatic-tests/commands/autoRunTests.js index 6ae3b8c..b3e2ad8 100644 --- a/www/api/data/base-components/automatic-tests/commands/autoRunTests.js +++ b/www/api/data/base-components/automatic-tests/commands/autoRunTests.js @@ -1,5 +1,5 @@ function(el) { - var testRunners = document.querySelectorAll(".sb-component[open] iframe.qunit"); + var testRunners = document.querySelectorAll(".simplycode-component[open] iframe.qunit"); testRunners.forEach(function(testRunner) { testRunner.contentWindow.document.testRunner = testRunner; testRunner.contentWindow.document.open(); diff --git a/www/api/data/base-components/codemirror/commands/codeMirrorInit.js b/www/api/data/base-components/codemirror/commands/codeMirrorInit.js index c6cde72..43897a9 100644 --- a/www/api/data/base-components/codemirror/commands/codeMirrorInit.js +++ b/www/api/data/base-components/codemirror/commands/codeMirrorInit.js @@ -1,5 +1,5 @@ function() { - var textareas = document.querySelectorAll(".sb-component[open] textarea[data-codemirror-mode]:not([style])"); + var textareas = document.querySelectorAll(".simplycode-component[open] textarea[data-codemirror-mode]:not([style])"); textareas.forEach(function(textarea) { var mode = "javascript"; if (textarea.hasAttribute("data-codemirror-mode")) { diff --git a/www/api/data/base-components/codemirror/footHtml/Codemirror base.html b/www/api/data/base-components/codemirror/footHtml/Codemirror base.html index 1bdcad5..894c0f9 100644 --- a/www/api/data/base-components/codemirror/footHtml/Codemirror base.html +++ b/www/api/data/base-components/codemirror/footHtml/Codemirror base.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/www/api/data/base-components/codemirror/footHtml/Codemirror modes.html b/www/api/data/base-components/codemirror/footHtml/Codemirror modes.html index def9544..b99261f 100644 --- a/www/api/data/base-components/codemirror/footHtml/Codemirror modes.html +++ b/www/api/data/base-components/codemirror/footHtml/Codemirror modes.html @@ -1,4 +1,4 @@ - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/www/api/data/base-components/codemirror/footHtml/Codemirror styles.html b/www/api/data/base-components/codemirror/footHtml/Codemirror styles.html index bf3d94e..f5ab220 100644 --- a/www/api/data/base-components/codemirror/footHtml/Codemirror styles.html +++ b/www/api/data/base-components/codemirror/footHtml/Codemirror styles.html @@ -1,2 +1,2 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/www/api/data/base-components/home/routes/home.js b/www/api/data/base-components/home/routes/home.js index d39b1e3..89595e8 100644 --- a/www/api/data/base-components/home/routes/home.js +++ b/www/api/data/base-components/home/routes/home.js @@ -2,6 +2,6 @@ function() { simplyApp.actions.listComponents() .then(function(components) { editor.pageData.components = components; - editor.pageData.page = "List components"; + editor.pageData.page = "List-components"; }); } \ No newline at end of file diff --git a/www/api/data/components/1-styling/componentCss/1-style.css b/www/api/data/components/1-styling/componentCss/1-style.css new file mode 100644 index 0000000..74e94e6 --- /dev/null +++ b/www/api/data/components/1-styling/componentCss/1-style.css @@ -0,0 +1,2420 @@ + + +/* Simply Branding +: Brands */ + + + +/* Basic styles: 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; +} + +/* Basic styles: Colors */ + +.ds-color { + display: flex; + text-align: center; + font-size: 0.8em; + align-items: center; + justify-content: center; +} +:root { + --ds-black: #000; + --ds-white: #FFF; + --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) ); + /* 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); +} + + +/* Basic styles: Available colors + */ + +:root { + --ds-simplyview: #0083CA; + --ds-simplyview-dark: #0083CA; + --ds-simplyview-contrast: var(--ds-white); + --ds-simplyview-light: #04A7FF; + --ds-simplyview-bump: #039FF4; + --ds-simplyview-gradient: linear-gradient( 180deg, var(--ds-simplyview-light), var(--ds-simplyview-dark) ); + --ds-simplyview-gradient-bump: linear-gradient( 180deg, var(--ds-simplyview-bump), var(--ds-simplyview-light) 95%, var(--ds-simplyview-dark) 100%); + + --ds-simplyedit: #F26522; + --ds-simplyedit-light: #F47B3E; + --ds-simplyedit-dark: #D74B14; + --ds-simplyedit-bump: #EA5922; + --ds-simplyedit-contrast: var(--ds-white); + --ds-simplyedit-gradient: linear-gradient( 180deg, var(--ds-simplyedit-light), var(--ds-simplyedit-dark) ); + --ds-simplyedit-gradient-bump: linear-gradient( 180deg, var(--ds-simplyedit-bump), var(--ds-simplyedit-light) 95%, var(--ds-simplyedit-dark) 100%); + + --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-simplypresent: #00d455; + --ds-simplypresent-light:#02da58;; + --ds-simplypresent-dark:#01973d; + --ds-simplypresent-bump:#00b865; + --ds-simplypresent-contrast: var(--ds-white); + --ds-simplypresent-gradient: linear-gradient( 180deg, var(--ds-simplypresent-light), var(--ds-simplypresent-dark) ); + --ds-simplypresent-gradient-bump: linear-gradient( 180deg, var(--ds-simplypresent-bump), var(--ds-simplypresent-light) 95%, var(--ds-simplypresent-dark) 100%); + + --ds-simplystore: #ffcc00; + --ds-simplystore-light: #ffe680; + --ds-simplystore-dark: #e4a802; + --ds-simplystore-bump: #ffbb00; + --ds-simplystore-contrast: var(--ds-black); + --ds-simplystore-gradient: linear-gradient( 180deg, var(--ds-simplystore-light), var(--ds-simplystore-dark)); + --ds-simplystore-gradient-bump: linear-gradient( 180deg, var(--ds-simplystore-bump), var(--ds-simplystore-light) 95%, var(--ds-simplystore-dark) 100%); +} +.ds-bg-simplyview { + background-color: var(--ds-simplyview); + color: var(--ds-simplyview-contrast); +} +.ds-bg-simplyview-gradient { + color: var(--ds-simplyview-contrast); + background: var(--ds-simplyview-gradient); +} +.ds-bg-simplyview-gradient-bump { + color: var(--ds-simplyview-contrast); + background: var(--ds-simplyview-gradient-bump); +} + +.ds-bg-simplyedit { + background-color: var(--ds-simplyedit); + color: var(--ds-simplyedit-contrast); +} +.ds-bg-simplyedit-gradient { + color: var(--ds-simplyview-contrast); + background: var(--ds-simplyedit-gradient); +} +.ds-bg-simplyedit-gradient-bump { + color: var(--ds-simplyview-contrast); + background: var(--ds-simplyedit-gradient-bump); +} + +.ds-bg-simplycode { + background-color: var(--ds-simplycode); + color: var(--ds-simplycode-contrast); +} +.ds-bg-simplycode-gradient { + color: var(--ds-simplycode-contrast); + background: var(--ds-simplycode-gradient); +} +.ds-bg-simplycode-gradient-bump { + color: var(--ds-simplycode-contrast); + background: var(--ds-simplycode-gradient-bump); +} + +.ds-bg-simplypresent { + background-color: var(--ds-simplypresent); + color: var(--ds-simplypresent-contrast); +} +.ds-bg-simplypresent-gradient { + color: var(--ds-simplypresent-contrast); + background: var(--ds-simplypresent-gradient); +} +.ds-bg-simplypresent-gradient-bump { + color: var(--ds-simplypresent-contrast); + background: var(--ds-simplypresent-gradient-bump); +} + +.ds-bg-simplystore { + background-color: var(--ds-simplystore); + color: var(--ds-simplystore-contrast); +} +.ds-bg-simplystore-gradient { + color: var(--ds-simplystore-contrast); + background: var(--ds-simplystore-gradient); +} +.ds-bg-simplystore-gradient-bump { + color: var(--ds-simplystore-contrast); + background: var(--ds-simplystore-gradient-bump); +} + +/* Basic styles: Alert Colors + */ + + + +/* Basic styles: 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; +} + + +/* Basic styles: Typography + */ + +: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); +} +:root, html, body { + background-color: var(--ds-background); + color: var(--ds-color); +} +body { + font-family: var(--ds-body-font); + font-size: var(--ds-font-size); + font-weight: var(--ds-font-weight); + line-height: var(--ds-line-height); +} +h1 { + --ds-font-size: calc(1em * var(--ds-heading-multiplier) * var(--ds-heading-multiplier) * var(--ds-heading-multiplier)); + line-height: calc(2 * var(--ds-line-height)); +} +h2 { + --ds-font-size: calc(1em * var(--ds-heading-multiplier) * var(--ds-heading-multiplier)); + line-height: calc(2 * var(--ds-line-height)); +} +h3 { + --ds-font-size: calc(1em * var(--ds-heading-multiplier)); +} +h1, h2, h3, h4, h5, h6 { + font-size: var(--ds-font-size); + font-weight: var(--ds-heading-weight); + font-family: var(--ds-heading-font); +} +h4, h5, h6 { + font-size: 1em; +} +h1, h2, h3, h4, h5, h6, p, ol, ul, dl { + margin: var(--ds-spacing) 0; +} +dd, li, blockquote { + margin-left: var(--ds-spacing); +} +a:link { + color: var(--ds-primary-dark); +} +a:visited { + color: var(--ds-support-dark); +} +a.ds-link-hover, +a:hover { + color: var(--ds-primary-light); +} +a.ds-link-active, +a:active { + color: var(--ds-primary-light); +} + +/* Basic styles: Feather Icons */ + +.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; +} + +/* Basic styles: Feather Icons */ + +:root { + --ds-icon-arrow-updown-black: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCIgaGVpZ2h0PSIyMHB4Ij4KPHBhdGggZD0iTTczLjA5MiwxNjQuNDUyaDI1NS44MTNjNC45NDksMCw5LjIzMy0xLjgwNywxMi44NDgtNS40MjRjMy42MTMtMy42MTYsNS40MjctNy44OTgsNS40MjctMTIuODQ3ICAgIGMwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg1TDIxMy44NDYsNS40MjRDMjEwLjIzMiwxLjgxMiwyMDUuOTUxLDAsMjAwLjk5OSwwcy05LjIzMywxLjgxMi0xMi44NSw1LjQyNEw2MC4yNDIsMTMzLjMzMSAgICBjLTMuNjE3LDMuNjE3LTUuNDI0LDcuOTAxLTUuNDI0LDEyLjg1YzAsNC45NDgsMS44MDcsOS4yMzEsNS40MjQsMTIuODQ3QzYzLjg2MywxNjIuNjQ1LDY4LjE0NCwxNjQuNDUyLDczLjA5MiwxNjQuNDUyeiIvPgo8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3ICAgIGMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2ICAgIGMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cjwvc3ZnPg=='); + --ds-icon-arrow-up-black: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMTIwKSI+CjxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MiBoMjU1LjgxMyBjNC45NDksMCw5LjIzMy0xLjgwNywxMi44NDgtNS40MjQgYzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NyAgICBjMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEgICAgYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KPC9nPjwvc3ZnPg=='); + --ds-icon-arrow-down-black: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEyMCkiPgogICAgPHBhdGggZD0iTTMyOC45MDUsMjM3LjU0OUg3My4wOTJjLTQuOTUyLDAtOS4yMzMsMS44MDgtMTIuODUsNS40MjFjLTMuNjE3LDMuNjE3LTUuNDI0LDcuODk4LTUuNDI0LDEyLjg0NyAgICBjMCw0Ljk0OSwxLjgwNyw5LjIzMyw1LjQyNCwxMi44NDhMMTg4LjE0OSwzOTYuNTdjMy42MjEsMy42MTcsNy45MDIsNS40MjgsMTIuODUsNS40MjhzOS4yMzMtMS44MTEsMTIuODQ3LTUuNDI4bDEyNy45MDctMTI3LjkwNiAgICBjMy42MTMtMy42MTQsNS40MjctNy44OTgsNS40MjctMTIuODQ4YzAtNC45NDgtMS44MTMtOS4yMjktNS40MjctMTIuODQ3QzMzOC4xMzksMjM5LjM1MywzMzMuODU0LDIzNy41NDksMzI4LjkwNSwyMzcuNTQ5eiIvPgo8L2c+Cjwvc3ZnPgo='); +} + + +/* Grid: 12 column grid */ + +:root { + --ds-grid-spacing: var(--ds-spacing); + --ds-grid-spacing-column: var(--ds-grid-spacing); + --ds-grid-spacing-row: var(--ds-grid-spacing); + --ds-grid-columns: 1; + --ds-screen-size: tiny; +} +.ds-grid-fixed { + display: grid; + grid-column-gap: var(--ds-grid-spacing-column); + grid-row-gap: var(--ds-grid-spacing-row); + /* add row-gap/column-gap or gap */ + grid-auto-flow: row; + grid-template-rows: repeat(1, auto); + grid-template-columns: repeat(var(--ds-grid-columns), 1fr); +} +.ds-grid-dense { + grid-auto-flow: dense; +} +.ds-grid-fixed > * { /* FIXME: only target grid items */ + max-width: 100%; + overflow: hidden; /* FIXME: better alternative? */ +} +.ds-grid-span-2 { + grid-column: auto / span 2; +} +.ds-grid-span-3 { + grid-column: auto / span 3; +} +.ds-grid-span-4 { + grid-column: auto / span 4; +} +.ds-grid-span-5 { + grid-column: auto / span 5; +} +.ds-grid-span-6 { + grid-column: auto / span 6; +} +.ds-grid-span-7 { + grid-column: auto / span 7; +} +.ds-grid-span-8 { + grid-column: auto / span 8; +} +.ds-grid-span-9 { + grid-column: auto / span 9; +} +.ds-grid-span-10 { + grid-column: auto / span 10; +} +.ds-grid-span-11 { + grid-column: auto / span 11; +} +.ds-grid-span-6 { + grid-column: auto / span 12; +} +.ds-grid-span-all { + grid-column: 1 / -1; +} +.ds-grid-row-2 { + grid-row: auto / span 2; +} +.ds-grid-row-3 { + grid-row: auto / span 3; +} +.ds-grid-row-4 { + grid-row: auto / span 4; +} +.ds-grid-row-5 { + grid-row: auto / span 5; +} +.ds-grid-row-6 { + grid-row: auto / span 6; +} +.ds-grid-row-7 { + grid-row: auto / span 7; +} +.ds-grid-row-8 { + grid-row: auto / span 8; +} +.ds-grid-row-9 { + grid-row: auto / span 9; +} +.ds-grid-row-10 { + grid-row: auto / span 10; +} +:root { + --ds-screen-size: tiny; + --ds-grid-columns: 1; +} +@media (min-width: 480px) { + :root { + --ds-screen-size: small; + } + :root, + .ds-grid-2, + .ds-grid-3, + .ds-grid-4, + .ds-grid-6, + .ds-grid-12 { + --ds-grid-columns: 2; + } +} +@media (min-width: 640px) { + :root { + --ds-screen-size: tablet; + } + :root, + .ds-grid-4, + .ds-grid-6, + .ds-grid-12 { + --ds-grid-columns: 4; + } + .ds-grid-3 { + --ds-grid-columns: 3; + } +} +@media (min-width: 992px) { + :root { + --ds-screen-size: medium; + } + :root, + .ds-grid-6, + .ds-grid-12 { + --ds-grid-columns: 6; + } + .ds-grid-6, + .ds-grid-12 { + --ds-grid-columns: 6; + } +} +@media (min-width: 1200px) { + :root { + --ds-screen-size: large; + } + .ds-grid-12 { + --ds-grid-columns: 12; + } +} +@media (min-width: 1800px) { + :root { + --ds-screen-size: extra-large; + } +} + + +/* Grid: Flexible grid + */ + +:root { + --ds-grid-min-colwidth: 15rem; +} +.ds-grid { + --ds-grid-spacing-column: var(--ds-grid-spacing); + --ds-grid-spacing-row: var(--ds-grid-spacing); + display: grid; + grid-column-gap: var(--ds-grid-spacing-column); + grid-row-gap: var(--ds-grid-spacing-row); + grid-template-columns: repeat(auto-fit, minmax(var(--ds-grid-min-colwidth), 1fr)); +} + +/* Forms: Buttons */ + +: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; +} +: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%; +} + +/* Forms: Icon Buttons + */ + +.ds-button { + position: relative; +} +.ds-button .ds-icon { + height: var(--ds-button-line-height); +} +.ds-button-bar .ds-button:not(:last-child):not(:only-child) { + margin-right: 0; + border-right: 0; +} +.ds-button:disabled { + background: transparent; +} +.ds-button-icon:active { + border-bottom: 2px solid var(--ds-primary); + box-shadow: none; +} + + + + +/* Forms: Nightmode */ + +.ds-nightmode { + --ds-color: var(--ds-white); + --ds-color-transparent: rgba(255,255,255,0); + --ds-contrast: var(--ds-grey-80); + --ds-background: var(--ds-grey-80); + --ds-background-transparent: rgba(255,255,255,0); + + --ds-button-bg-color: var(--ds-grey-dark); + --ds-button-default-bg-color: var(--ds-grey-dark); + --ds-button-border-color: var(--ds-grey-light); + --ds-button-disabled-color: var(--ds-grey-medium); + --ds-button-disabled-bg-color: var(--ds-medium); + + --ds-input-border: var(--ds-grey-70); + + background-color: var(--ds-background); + color: var(--ds-color); +} +.ds-nightmode a:link, +.ds-nightmode a:visited, +.ds-nightmode a.ds-link-hover, +.ds-nightmode a:hover, +.ds-nightmode a.ds-link-active, +.ds-nightmode a:active { + color: var(--ds-primary-light); +} +.ds-nightmode .ds-button[disabled] { + background-color: transparent; + color: var(--ds-grey-60); +} + +/* Forms: Icon Buttons with State + */ + + .ds-button[data-simply-state] { + height: var(--ds-button-line-height); + overflow: hidden; + box-sizing: content-box; + white-space: normal; + } + .ds-button[data-simply-state] .ds-button-state { + height: var(--ds-button-line-height); + transform: translateY(calc(-1 * var(--ds-button-line-height))); + transition: transform 0.2s ease; + display: block; + margin: 0; + } + .ds-button[data-simply-state="open"] .ds-button-state, + label[data-simply-state] > input[type="checkbox"]:checked ~ .ds-button-state { + transform: translateY(0); + } + label[data-simply-state] > input[type="checkbox"], + label[data-simply-state] > input[type="radio"] { + display: none; + } + + +/* Forms: Icon Buttons with State + */ + + + +/* Forms: Inputs */ + +:root { + --ds-input-border: var(--ds-grey-light); + --ds-input-spacing: var(--ds-spacing); + --ds-input-font: var(--ds-font-family); + --ds-radio-spacing: 0.2em; +} +.ds-form-group { + margin: var(--ds-input-spacing) 0; +} +label { + display: block; +} +form.ds-grid-fixed label, +form.ds-grid label, +form .ds-grid-fixed label, +form .ds-grid label { + margin: 0; +} +input[type="text"], +input[type="number"], +input[type="email"], +input[type="date"], +input[type="datetime-local"], +input[type="time"], +input[type="week"], +input[type="file"], +input[type="password"], +input[type="search"], +input[type="tel"], +input[type="url"], +select { + width: 100%; + display: block; + height: calc(var(--ds-line-height) * 1.5); + margin: 0; + margin-bottom: calc(var(--ds-line-height) * 0.5); + box-sizing: border-box; + background: inherit; + border: 0px; + outline: 1px solid var(--ds-input-border); + padding: 0 0.5em; + font-family: var(--ds-input-font); + font-size: inherit; + line-height: inherit; + color: inherit; +} +textarea { + width: 100%; + border: 0; + outline: 1px solid var(--ds-input-border); + padding: 0 0.5em; + font-family: var(--ds-input-font); + font-size: inherit; + line-height: inherit; + margin: 0; + height: calc(3 * var(--ds-line-height)); + margin-bottom: cal(0.5 * var(--ds-line-height)); + display: block; + color: inherit; + background: inherit; +} +input[type="radio"], +input[type="checkbox"] { + width: auto; + height: auto; + padding: 0; +} +.ds-form-radio label { + margin: 0; +} +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCIgaGVpZ2h0PSIyMHB4Ij4KPHBhdGggZD0iTTczLjA5MiwxNjQuNDUyaDI1NS44MTNjNC45NDksMCw5LjIzMy0xLjgwNywxMi44NDgtNS40MjRjMy42MTMtMy42MTYsNS40MjctNy44OTgsNS40MjctMTIuODQ3ICAgIGMwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg1TDIxMy44NDYsNS40MjRDMjEwLjIzMiwxLjgxMiwyMDUuOTUxLDAsMjAwLjk5OSwwcy05LjIzMywxLjgxMi0xMi44NSw1LjQyNEw2MC4yNDIsMTMzLjMzMSAgICBjLTMuNjE3LDMuNjE3LTUuNDI0LDcuOTAxLTUuNDI0LDEyLjg1YzAsNC45NDgsMS44MDcsOS4yMzEsNS40MjQsMTIuODQ3QzYzLjg2MywxNjIuNjQ1LDY4LjE0NCwxNjQuNDUyLDczLjA5MiwxNjQuNDUyeiIvPgo8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3ICAgIGMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2ICAgIGMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cjwvc3ZnPg=='); + background-repeat: no-repeat; + background-position: right 1em center; +} +select[multiple] { + height: auto; + background: none; + -webkit-appearance: menulist; + -moz-appearance: menulist; + appearance: menulist; +} + + +/* Components: Accordion */ + +.ds-accordion summary { + outline: none; + cursor: pointer; + border-top: 1px solid var(--ds-contrast); + padding: calc(0.5 * var(--ds-spacing)) var(--ds-spacing); + margin-bottom: -1px; /* to collapse the borders */ +} +.ds-accordion summary:last-of-type { + border-bottom: 1px solid var(--ds-contrast); +} +.ds-accordion summary.ds-grey-light { + border-color: var(--ds-grey-medium); +} + +.ds-accordion details[open] summary ~ * { + animation: ds-animate-grow 0.5s ease-in-out; +} +@keyframes ds-animate-grow { + 0% { max-height: 0; overflow: hidden;} + 99% { overflow: hidden;} + 100% { max-height: 10em; overflow: auto;} +} +@keyframes ds-animate-sweep { + 0% { opacity: 0; margin-left: -10px} + 100% { opacity: 1; margin-left: 0px} +} +.ds-accordion section { + box-sizing: border-box; + padding: var(--ds-spacing); +} + + +/* Components: Alert */ + +:root { + --ds-error-color: rgb(253, 143, 143); + --ds-warning-color: #FFFFCC; + --ds-info-color: rgb(140, 180, 250); +} +.ds-alert { + padding: 0.05px; /* contain child margins */ + color: var(--ds-black); +} +@supports (display: flow-root) { + .ds-alert { + display: flow-root; + padding: 0; + } +} +.ds-alert-error { + background-color: var(--ds-error-color); +} +.ds-alert-warning { + background-color: var(--ds-warning-color); +} +.ds-alert-info { + background-color: var(--ds-info-color); +} + +/* Components: Badge */ + +.ds-badge { + --ds-badge-color: var(--ds-grey-50); + --ds-badge-font-color: var(--ds-white); + --ds-badge-label-color: var(--ds-primary); + --ds-badge-label-contrast-color: var(--ds-primary-contrast); + --ds-badge-font-size: 0.66em; + --ds-badge-height: 2em; + font-size: var(--ds-badge-font-size); + display: inline-block; + align-items: center; + background: var(--ds-badge-color); + color: var(--ds-badge-font-color); + border-radius: 0.3em; + padding: 0 0.6em; + text-align: center; + margin: 0.05em 0; + margin-right: 0.3em; + line-height: var(--ds-badge-height); + max-height: var(--ds-badge-height); + position: relative; +} +.ds-badge-label, +.ds-badge > label { + display: inline-flex; + margin: 0; + margin-left: -0.6em; + margin-right: 0.6em; + padding: 0 0.5em; + background: var(--ds-badge-label-color); + color: var(--ds-badge-label-contrast-color); + float: left; + min-height: var(--ds-badge-height); + align-items: center; + border-radius: 0.3em 0 0 0.3em; +} +a.ds-badge { + color: inherit; +} +.ds-badge label .ds-icon, +.ds-badge-label .ds-icon { + margin-top: 0; + height: var(--ds-badge-height); +} +.ds-badge-inline { + display: inline; +} +.ds-badge-inverted { + background: var(--ds-badge-label-color); + color: var(--ds-badge-label-contrast-color); +} +.ds-badge-inverted .ds-badge-label { + background: var(--ds-badge-color); + color: var(--ds-badge-font-color); +} +.ds-badge-tag { + position: relative; + border-radius: 0.3em 0 0 0.3em; + padding-right: 0.2em; + margin-right: 0.6em; +} +.ds-badge-tag::after { + content: ""; + display: block; + border: calc(0.5 * var(--ds-badge-height)) solid transparent; + border-left: 0.8em solid var(--ds-badge-color); + position: absolute; + top: 0; + left: 100%; +} +.ds-badge-tag-reverse { + position: relative; + border-radius: 0 5px 5px 0; + padding-left: 0.2em; + margin-left: 0.6em; +} +.ds-badge-tag-reverse::before { + content: ""; + display: block; + border: calc(0.5 * var(--ds-badge-height)) solid transparent; + border-right: 0.8em solid var(--ds-badge-color); + position: absolute; + top: 0; + right: 100%; +} +.ds-badge-inverted.ds-badge-tag::after { + border-left-color: var(--ds-badge-label-color); +} +.ds-badge-inverted.ds-badge-tag-reverse::before { + border-right-color: var(--ds-badge-label-color); +} + + +/* Components: Box */ + +:root { + --ds-box-radius: 3px; + --ds-box-shadow: var(--ds-shadow-small); +} +.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-dark-background { + color: white; + text-shadow: 0 0 2px var(--ds-black); +} + + +/* Components: Card */ + +:root { + --ds-card-radius: var(--ds-box-radius); + --ds-card-padding: var(--ds-spacing); + --ds-card-shadow: var(--ds-box-shadow); +} +.ds-card { + display: flex; + flex-direction: column; + box-shadow: var(--ds-card-shadow); + border-radius: var(--ds-card-radius); + position: relative; + break-inside: avoid; + padding: 0.05px; +} +.ds-card-header, +.ds-card-header-image > img { + border-radius: var(--ds-card-radius) var(--ds-card-radius) 0 0; +} +.ds-card-footer, +.ds-card-footer-image > img { + border-radius: 0 0 var(--ds-card-radius) var(--ds-card-radius); +} +.ds-card-header, +.ds-card-footer { + flex-grow: 0; +} +.ds-card-header, +.ds-card-footer, +.ds-card-content { + position: relative; +} +.ds-card-header-image, +.ds-card-footer-image { + min-height: calc(var(--ds-line-height) * 6); + color: white; + text-shadow: 0 0 3px var(--ds-black); +} +.ds-card-content { + flex-grow: 1; +} +.ds-card img { + max-width: 100%; + max-height: 100%; + object-fit: cover; +} +.ds-background-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; +} + +/* Components: Crumbs */ + +:root { + --ds-crumb-separator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); + --ds-crumb-color: var(--ds-color); + --ds-crumb-active-color: var(--ds-primary); + --ds-crumb-active-background: var(--ds-background); +} +.ds-nightmode { + --ds-crumb-separator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); + --ds-crumb-color: var(--ds-color); + --ds-crumb-active-color: var(--ds-primary-light); + --ds-crumb-active-background: var(--ds-background); +} +.ds-crumbs { + display: flex; + flex-direction: row; +} +.ds-crumb { + list-style: none; + margin-left: 0; + display: flex; + flex-direction: row; + justify-content: center; +} +.ds-crumb::before { + content: var(--ds-crumb-separator) +} +.ds-crumb:first-child::before { + content: ""; +} +.ds-crumb a:link { + text-decoration: none; + color: var(--ds-crumb-color); +} +.ds-crumb:hover a, +.ds-crumb.ds-selected a, +.ds-crumb a:active { + color: var(--ds-crumb-active-color); + background: var(--ds-crumb-active-background); +} + +/* Components: Datatable */ + +:root { + --ds-datatable-heading-color: var(--ds-primary); + --ds-datatable-heading-contrast: var(--ds-primary-contrast); + --ds-datatable-ruler-color: var(--ds-grey-70); + --ds-datatable-ruler: calc(3 * var(--ds-line-height) - 1px); + --ds-datatable-ruler-end: calc(var(--ds-datatable-ruler) + 1px); +} +.ds-datatable { + table-layout: fixed; + width: 100%; + border-collapse: collapse; +} +.ds-datatable thead { + background: linear-gradient(to top, var(--ds-primary) 0px, var(--ds-primary) 2px, transparent 2px, transparent); + line-height: var(--ds-line-height); + text-align: left; +} +.ds-datatable th { + padding: 0 0.5em; + cursor: pointer; +} +.ds-datatable th::after { + background-position: center right; + background-repeat: no-repeat; + background-image: var(--ds-icon-arrow-updown-black); + content: ""; + display: inline-block; + width: 1em; + height: var(--ds-line-height); + position: absolute; + margin-left: 0.5em; + line-height: calc(0.3 * var(--ds-line-height)); + opacity: 0.6; +} +.ds-datatable th.ds-datatable-disable-sort { + cursor: default; +} +.ds-datatable th.ds-datatable-disable-sort::after { + display: none; +} +.ds-datatable td { + line-height: var(--ds-line-height); + padding: 0 0.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.ds-datatable th.ds-datatable-sorted-descending::after { + background-image: var(--ds-icon-arrow-down-black); + opacity: 1; +} +.ds-datatable th.ds-datatable-sorted-ascending::after { + background-image: var(--ds-icon-arrow-up-black); + opacity: 1; +} + +.ds-datatable-rulers tbody tr:nth-child(3n) { + border-bottom: 1px solid var(--ds-datatable-ruler-color); +} + +.ds-datatable-sticky-header thead { + position: sticky; + top: 0px; + background-color: var(--ds-datatable-heading-contrast); + transform: scale(0.9999999); + background-clip: padding-box; +} + +/* Components: Dialog */ + +:root { + --ds-dialog-radius: calc( 2 * var(--ds-box-radius)); + --ds-dialog-shadow: var(--ds-shadow-large); +} +.ds-dialog { + border: 0; + width: calc( 50% - (1/2 * var(--ds-spacing))); + min-width: 30em; + min-height: 50vh; + box-shadow: var(--ds-dialog-shadow); + padding: 0; + z-index: 101; + border-radius: calc(2px + var(--ds-dialog-radius)); + transition:all .3s,z-index .3s step-end; + color: var(--ds-color); + background-color: var(--ds-background) +} +.ds-dialog[open] { + transition:all .3s,z-index .3s step-start; +} +.ds-dialog-narrow { + width: calc( 33% - (1/2 * var(--ds-spacing))); + min-width: 20em; +} + +.ds-dialog-header, +.ds-dialog-header-image > img { + border-radius: var(--ds-dialog-radius) var(--ds-dialog-radius) 0 0; +} +.ds-dialog-footer, +.ds-dialog-footer-image > img { + border-radius: 0 0 var(--ds-dialog-radius) var(--ds-dialog-radius); +} + +.ds-dialog-header, +.ds-dialog-footer { + flex-grow: 0; +} + +.ds-dialog-header, +.ds-dialog-footer, +.ds-dialog-content { + position: relative; + padding: 0.05px; +} + +.ds-dialog-header-image, +.ds-dialog-footer-image { + min-height: calc(var(--ds-line-height) * 6); + color: var(--ds-white); + text-shadow: 0 0 3px var(--ds-black); +} +.ds-dialog-content { + flex-grow: 1; +} + +.ds-dialog-content .ds-alert { + margin-bottom: var(--ds-dialog-padding); +} + +.ds-dialog-overlay { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: rgba(0,0,0,0.5); + z-index: 11; + display: none; + transition: opacity .3s linear,z-index .3s step-end,visibility .3s step-end; +} +dialog[open] ~ .ds-dialog-overlay { + display: block; + transition: opacity .3s linear,z-index .3s step-start,visibility .3s step-start; +} + +dialog .ds-toolbar { + position: relative; +} + +@media screen and (max-width: 720px) { + .ds-dialog { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + min-width: unset; + } +} + +/* Components: Dropdown */ + +:root { + --ds-dropdown-background: var(--ds-white); + --ds-dropdown-color: var(--ds-black); + --ds-dropdown-width: 200px; +} +.ds-dropdown { + margin: 0; + padding: 0; + outline: none; + box-shadow: none; + display: inline; + position: relative; +} +.ds-dropdown-icon { + padding: 0 0.25em; + width: 1.5em; + border-radius: 2px; +} +.ds-dropdown-icon:hover { + background: var(--ds-grey-40); +} +.ds-dropdown-nav { + width: var(--ds-dropdown-width); + background: var(--ds-dropdown-background); + color: var(--ds-dropdown-color); + display: none; + position: absolute; + left: 0; + box-shadow: var(--ds-shadow-medium); + border-radius: var(--ds-box-radius); + z-index: 101; + text-align: left; +} +.ds-dropdown-nav::before { + content: ""; + display: block; + width: 0.5rem; + height: 0.5rem; + background: var(--ds-dropdown-background); + position: absolute; + top: -0.2rem; + left: 0.75rem; + transform: rotate(45deg); + filter: drop-shadow(-1px -1px 2px #DDD); + clip-path: polygon(-2px 0.6rem, -2px -2px, 0.6rem -2px); +} +.ds-dropdown-state { + display: none; +} +.ds-dropdown-state:checked ~ .ds-dropdown-nav { + display: block; +} +.ds-dropdown-list { + list-style: none; + margin: 0; + padding: calc(0.25 * var(--ds-spacing)) calc(0.5 * var(--ds-spacing)); +} +.ds-dropdown-item { + list-style: none; + margin: 0; + padding: 0; +} +.ds-dropdown-right { + left: auto; + right: 0; +} + +.ds-dropdown-right::before { + left: auto; + right: 0.5rem; + top: -0.15rem; +} + +.ds-dropdown-up { + bottom: 1.5em +} +.ds-dropdown-nav.ds-dropdown-up::before { + transform: rotate(-135deg); + top: auto; + bottom: -0.2rem; + filter: drop-shadow(1px 1px 2px #000); +} + +.ds-dropdown-center { + margin-left: calc(-0.5 * var(--ds-dropdown-width) + 50%); +} +.ds-dropdown-nav.ds-dropdown-center::before { + left: calc(50% - 0.25rem); +} + + +/* Components: Media */ + +:root { + --ds-media-radius: var(--ds-box-radius); + --ds-media-shadow: var(--ds-box-shadow); + --ds-media-media-size: 100px; +} +.ds-media { + display: flex; + align-items: flex-start; + position: relative; +} + +.ds-media-media { + width: var(--ds-media-media-size); + margin: var(--ds-spacing); +} +.ds-media-nospace > .ds-media-media { + margin-top: 0; + margin-left: 0; +} +.ds-media-media img { + width: 100%; +} +.ds-media-content { + flex: 1; +} +.ds-media-nospace > .ds-media-content > :first-child { + margin-top: 0; +} + +/* Components: Scrollbox */ + +.ds-scrollbox { + --ds-scrollbox-height: calc(8 * var(--ds-line-height)); + max-height: var(--ds-scrollbox-height); + overflow: auto; + background: + /* Shadow covers */ + linear-gradient(var(--ds-background) 30%, var(--ds-background-transparent)), + linear-gradient(var(--ds-background-transparent), var(--ds-background) 70%) 0 100%, + + /* Shadows */ + radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), + radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; + background: + /* Shadow covers */ + linear-gradient(var(--ds-background) 30%, var(--ds-background-transparent)), + linear-gradient(var(--ds-background-transparent), var(--ds-background) 70%) 0 100%, + + /* Shadows */ + radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), + radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; + background-repeat: no-repeat; + background-color: white; + background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; + /* Opera doesn't support this in the shorthand */ + background-attachment: local, local, scroll, scroll; +} + + +/* Components: Slides */ + +.ds-slides { + display: flex; + width: 100%; + height: 100%; + position: relative; + overflow-y: hidden; + overflow-x: scroll; + /* IE10 (touch only) + Edge*/ + -ms-scroll-snap-type: mandatory; + /* safari 9 */ + -webkit-scroll-snap-type: mandatory; + -webkit-scroll-snap-points-x: repeat(100%); + -webkit-overflow-scrolling: touch; + /* firefox */ + scroll-snap-destination: 0% 100%; + scroll-snap-points-x: repeat(100%); + scroll-snap-type: mandatory; + /* standard */ + scroll-snap-type: x mandatory; + scroll-behavior: smooth; +} +.ds-slides-slide { + flex-shrink: 0; + width: 100%; + height: 100%; + overflow: hidden; + /* standard */ + scroll-snap-align: start; +} +.ds-slides-slide { + position: relative; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.ds-slides-slide:not(:first-child)::before { + content: "\3008"; + position: absolute; + top: 50%; + left: 1em; + color: var(--ds-white); + font-size: var(--ds-line-height); + font-weight: bold; + margin-top: calc(-0.5 * var(--ds-line-height)); + text-shadow: 0 0 2px var(--ds-black); +} +.ds-slides-slide:not(:last-child)::after { + content: "\3009"; + text-shadow: 0 0 3px var(--ds-black); + position: absolute; + z-index: 10; + top: 50%; + right: 1em; + color: var(--ds-white); + font-size: var(--ds-line-height); + font-weight: bold; + margin-top: calc(-0.5 * var(--ds-line-height)); +} +img.ds-cover { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Components: Slides Vertical + */ + +.ds-slides-vertical { + flex-direction: column; + overflow-x: hidden; + overflow-y: scroll; + /* safari 9 */ + -webkit-scroll-snap-points-x: none; + -webkit-scroll-snap-points-y: repeat(100%); + /* firefox */ + scroll-snap-points-x: none; + scroll-snap-points-y: repeat(100%); + /* standard */ + scroll-snap-type: y mandatory; + scroll-behavior: smooth; +} +.ds-slides-vertical .ds-slides-slide:not(:first-child)::before { + transform: rotate(90deg); + top: 1em; + left: 50%; + margin-left: -0.5em; +} +.ds-slides-vertical .ds-slides-slide:not(:last-child)::after { + transform: rotate(90deg); + top: auto; + right: auto; + bottom: 1em; + left: 50%; + margin-left: -0.5em; +} + +/* Components: Tabs */ + +:root { + --ds-tabs-spacing: var(--ds-button-spacing); + --ds-tabs-bg-color: var(--ds-background); + --ds-tabs-color: var(--ds-color); + --ds-tabs-default-bg-color: transparent; + --ds-tabs-primary-bg-color: var(--ds-primary); + --ds-tabs-primary-color: var(--ds-primary-contrast); + --ds-tabs-line-height: var(--ds-button-line-height); + --ds-tabs-border-color: var(--ds-primary); + --ds-tabs-direction: row; + --ds-tabs-border-alignment: top; + --ds-tabs-radius: var(--ds-button-radius); +} + +.ds-tabs { + display: flex; + flex-direction: var(--ds-tabs-direction); + margin: 0; + list-style: none; + padding: 0 0 1px 0; + flex-wrap: wrap; + justify-content: center; +} +.ds-tabs li { + margin: 0; + padding: 0; +} +:root .ds-tabs-tab { + line-height: var(--ds-tabs-line-height); + min-height: var(--ds-tabs-line-height); +} + +.ds-tabs-tab { + display: block; + margin: 0; + overflow: visible; + box-sizing: border-box; + margin: 0 var(--ds-tabs-spacing) 0 0; + padding: 0 calc(0.5 * var(--ds-tabs-line-height)); + vertical-align: middle; + font-size: calc(0.875 * var(--ds-font-size)); + text-align: center; + text-decoration: none; + background-color: transparent; + border: 0; + white-space: nowrap; + border-radius: var(--ds-tabs-radius) var(--ds-tabs-radius) 0 0; +} +.ds-tabs-tab:hover, +.ds-tabs-tab:focus { + cursor: pointer; + text-decoration: none; +} +a.ds-tabs-tab, +a.ds-tabs-tab:hover, +a.ds-tabs-tab:active, +a.ds-tabs-tab:visited { + color: inherit; +} +.ds-tabs-support { + --ds-tabs-border-color: var(--ds-support); +} +.ds-tabs-primary { + --ds-tabs-border-color: var(--ds-primary); +} +.ds-tabs-primary .ds-tabs-tab, +.ds-tabs a.ds-tabs-primary, .ds-tabs a.ds-tabs-primary:hover, +.ds-tabs a.ds-tabs-primary:active, .ds-tabs a.ds-tabs-primary:visited { + background-color: var(--ds-primary); + color: var(--ds-primary-contrast); + border-color: var(--ds-tabs-border-color); +} +.ds-tabs-support .ds-tabs-tab, +.ds-tabs a.ds-tabs-support, .ds-tabs a.ds-tabs-support:hover, +.ds-tabs a.ds-tabs-support:active, .ds-tabs a.ds-tabs-support:visited { + background-color: var(--ds-support); + color: var(--ds-support-contrast); + border-color: var(--ds-tabs-border-color); +} +.ds-tabs-border li { + background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 1px, transparent 1px); + padding-bottom: 1px; +} +.ds-tabs-border .ds-tabs-tab-selected { + border: 1px solid var(--ds-tabs-border-color); + border-bottom: 0; + position: relative; + top: 1px; + line-height: calc(var(--ds-tabs-line-height) - 1px); + background: var(--ds-tabs-bg-color); +} +.ds-tabs-border .ds-tabs-tab-selected { + position: relative; + top: 1px; + line-height: calc(var(--ds-tabs-line-height) - 1px); +} +.ds-tabs-border-bottom li { + background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 1px, transparent 1px); +} +.ds-tabs-border-bottom .ds-tabs-tab-selected { + background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 2px, transparent 2px); +} +.ds-tabs-border-color li { + background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-grey-20) 0px, var(--ds-grey-20) 1px, transparent 1px); +} +.ds-tabs-border-color .ds-tabs-tab-selected { + background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 1px, transparent 1px); +} + +.ds-tabs-vertical { + --ds-tabs-direction: column; + --ds-tabs-border-alignment: right; + flex-direction: var(--ds-tabs-direction); +} +.ds-tabs-vertical .ds-tabs-tab { + text-align: left; +} +.ds-tabs-vertical.ds-tabs-border-color li { + background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-grey-20) 0px, var(--ds-grey-20) 1px, transparent 1px); +} +.ds-tabs-vertical.ds-tabs-border-color .ds-tabs-tab-selected { + background: linear-gradient(to var(--ds-tabs-border-alignment), var(--ds-tabs-border-color) 0px, var(--ds-tabs-border-color) 1px, transparent 1px); +} + + +/* Components: Looping tabs + */ + +.dsc-loopingtabs { + display: grid; + grid-template-areas: "tabs" "text" "media"; +} +.dsc-loopingtabs-panel { + display: contents; +} +.dsc-loopingtabs-tabs { + grid-area: tabs; +} +.dsc-loopingtabs-text { + grid-area: text; + text-align: center; +} +.dsc-loopingtabs-media { + grid-area: media; + margin: 0 var(--ds-spacing); +} +.dsc-loopingtabs-panel { + display: none; +} +.dsc-loopingtabs-panel.dsc-loopingtabs-selected { + display: contents; +} +@media only screen and (min-width: 500px) { + .dsc-loopingtabs { + grid-template-areas: + "media text" + "media tabs"; + --ds-tabs-direction: column; + --ds-tabs-border-alignment: right; + } + .ds-tabs-tab { + text-align: left; + } + .dsc-loopingtabs-text { + text-align: left; + margin: 0; + } +} + +/* Components: Toast */ + + +:root { + --ds-toast-height: 60px; + --ds-toast-hide-delay: 3s; /* 5 seems better */ + --ds-toast-show-duration: 0.3s; + --ds-toast-hide-duration: 0.5s; + --ds-toast-margin: 20px; + --ds-toast-shadow: var(--ds-shadow-medium); +} + +ul.ds-toasts, +ol.ds-toasts, +.ds-toasts { + position: absolute; + right: 0; + top: 0; + z-index: 101; + display: block; + list-style: none; + margin: 0; + padding: 0; + max-width: 50%; + min-width: 300px; +} +.ds-toast, +li.ds-toast { + min-width: 300px; + float: right; + clear: both; + margin-top: var(--ds-spacing); + margin-right: var(--ds-spacing); + background-color: var(--ds-grey-80); + color: var(--ds-white); + display: block; + border-left: 10px solid var(--ds-grey-50); + box-shadow: var(--ds-toast-shadow); +} +.ds-toast-error, +li.ds-toast-error { + border-color: var(--ds-error-color); +} +.ds-toast-info, +li.ds-toast-info { + border-color: var(--ds-info-color); +} +.ds-toast-warning, +li.ds-toast-warning { + border-color: var(--ds-warning-color); +} + +@keyframes ds-toast-show { + 0% { + transform: scaleX(0); + transform-origin: right; + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + transform: scaleX(1); + transform-origin: right; + opacity: 1; + } +} +@keyframes ds-toast-hide { + 0% { + transform: scaleX(1); + transform-origin: right; + opacity: 1; + } + 50% { + opacity: 1; + } + 100% { + transform: scaleX(0); + transform-origin: right; + opacity: 0; + } +} +@keyframes ds-toast-move { + 0% { + transform: translateY(-80px); /* toast-height + toast-margin */ + } + 100% { + transform: translateY(0px); + } +} +.ds-toast[data-state="new"] { + animation: ds-toast-show var(--ds-toast-show-duration) forwards; +} +.ds-toast-autohide[data-state="new"] { + animation: ds-toast-show var(--ds-toast-show-duration); + animation-delay: 0s; +} +.ds-toast-autohide.ds-toast-animated[data-state="shown"] { + animation: ds-toast-hide var(--ds-toast-hide-duration) forwards; + animation-delay: calc(var(--ds-toast-hide-delay) - var(--ds-toast-show-duration)); +} +.ds-toast-autohide:not(.ds-toast-animated)[data-state="shown"] { + animation: ds-toast-move var(--ds-toast-show-duration), ds-toast-hide var(--ds-toast-hide-duration) forwards; + animation-delay: 0s, var(--ds-toast-hide-delay); +} + + +/* Components: Tooltip */ + +:root { + --ds-tooltip-shadow: var(--ds-shadow-small); + --ds-tooltip-background: var(--ds-support); + --ds-tooltip-color: var(--ds-support-contrast); + --ds-tooltip-radius: var(--ds-box-radius); + --ds-tooltip-width: 20em; + --ds-tooltip-font-size: 0.7em; + --ds-tooltip-line-height: 1.3em; +} +.ds-tooltip { + position: relative; + cursor: help; +} +.ds-tooltip::after { + content: attr(data-title); + display: block; + position: absolute; + left: -9999px; + top: calc(100% + 0.5em); + background-color: var(--ds-tooltip-background); + color: var(--ds-tooltip-color); + padding: 0.5em; + border-radius: var(--ds-tooltip-radius); + width: var(--ds-tooltip-width); + margin-left: calc((-0.5 * var(--ds-tooltip-width)) - 0.5em); + font-size: var(--ds-tooltip-font-size); + line-height: var(--ds-tooltip-line-height); + opacity: 0; + z-index: -1; + transition: opacity 0.2s ease-in; + box-shadow: var(--ds-shadow-small); +} +.ds-tooltip::before { + content: ""; + border-style: solid; + border-width: 0 0.6em 0.6em 0.6em; + border-color: transparent transparent var(--ds-tooltip-background) transparent; + position: absolute; + top: 100%; + left: -9999px; + margin-left: -0.6em; + opacity: 0; + z-index: 112 !important; + transition: opacity 0.2s ease-in; + font-size: var(--ds-tooltip-font-size); +} +.ds-tooltip:hover::after, +.ds-tooltip:focus::after, +.ds-tooltip:hover::before, +.ds-tooltip:focus::before, +.ds-tooltip.ds-tooltip-open::after, +.ds-tooltip.ds-tooltip-open::before { + opacity: 1; + z-index: 111; + left: 50%; +} + +.ds-tooltip-top::after { + top: unset; + bottom: calc(100% + 0.7em); +} +.ds-tooltip-top::before { + top: unset; + bottom: calc(100% + 0.2em); + border-width: 0.6em 0.6em 0 0.6em; + border-color: var(--ds-tooltip-background) transparent transparent transparent; +} +.ds-super { + font-size: small; + position: relative; + bottom: 0.5em; +} + +/* Components: Navigation */ + +:root { + --ds-navbar-shadow: var(--ds-shadow-small); +} +.ds-navbar { + display: flex; + box-shadow: var(--ds-navbar-shadow); + justify-content: space-between; + flex-wrap: wrap; +} +.ds-navbar-left { + order: -1; + display: flex; + justify-content: flex-start; +} +.ds-navbar-right { + display: flex; + justify-content: flex-end; + order: 1; +} +.ds-navbar-right *:last-child { + margin-right:0; +} +.ds-navbar-center { + display: flex; + justify-content: center; +} +.ds-navbar > * { + flex: 1; +} +ul.ds-navbar { + list-style: none; + margin-left: 0; + padding-left: 0; +} +.ds-navbar .ds-button, +.ds-navbar input, +.ds-navbar select { + border-top: 0; + border-bottom: 0; + outline: 0; + margin-bottom: 0; +} +.ds-navbar-nav { + margin: 0; + padding: 0; + display: flex; +} +.ds-navbar-nav li { + margin: 0; + padding: 0; + list-style: none; +} +.ds-navbar-nav a { + text-decoration: none; + color: inherit; +} +.ds-navbar-nav .ds-button { + margin-bottom: 0; +} +.ds-navbar-nav .ds-button:last-child { + margin-right: 0; +} + +/* Components: Navigation Static Menu + */ + +.ds-navbar-fullwidth { + order: 2; + flex-shrink:0; + max-width: 100%; +} +.ds-navbar-fullwidth .ds-navbar-nav { + width: max-content; + max-width: 100%; + overflow: auto; +} + +/* Components: Navigation Sidebar + */ + +:root { + --ds-navbar-padding: calc(0.5 * var(--ds-line-height)); + --ds-navbar-indent: var(--ds-spacing); +} +.ds-navbar-side, +.ds-navbar-side .ds-navbar-nav { + flex-direction: column; +} +.ds-navbar-side .ds-nav { + display: block; + position: relative; + padding: var(--ds-navbar-padding); + text-align: left; +} +.ds-navbar-side .ds-nav .ds-icon { + margin-right: calc(0.3 * var(--ds-spacing)); +} +.ds-navbar-side .ds-selected, +.ds-navbar-side .ds-nav:hover, +.ds-navbar-side .ds-nav-hover { + background: rgba(0,0,0,0.2); +} +.ds-navbar-side .ds-navbar-nav .ds-navbar-nav .ds-nav { + padding-left: calc(var(--ds-navbar-indent) + var(--ds-navbar-padding)); +} +.ds-navbar-side .ds-navbar-nav .ds-navbar-nav .ds-navbar-nav .ds-nav { + padding-left: calc((2 * var(--ds-navbar-indent)) + var(--ds-navbar-padding)); +} + + + +/* Components: Paging */ + +.ds-navbar-nav.ds-paging { + display: none; + line-height: var(--ds-button-line-height); +} +.ds-paging .ds-navbar-nav.ds-paging { + display: flex; +} +.ds-paging .ds-paging-info { + padding: 0 1em; +} +.ds-paging .ds-button { + display: block; +} +.ds-paging li:first-child .ds-button { + margin-right: 0; +} + +/* SimplyCode: Toolbar */ + +:root { + --simply-button-font: arial, helvetica, sans-serif; + --simply-button-font-size: 11px; + --simply-button-width: 60px; + --simply-button-height: 60px; + --simply-button-color: #333; + --simply-button-primary: var(--ds-primary); +} +.simply-button { + height: var(--simply-button-height); + border-top: 1px solid transparent; + border-bottom: 2px solid transparent; + transition: background 0.2s ease; + font-size: var(--simply-button-font-size); + letter-spacing: 0; + font-family: var(--simply-button-font); + white-space: nowrap; + user-select: none; + vertical-align: top; + min-width: var(--simply-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-button-color); +} +.simply-button:hover { + border-bottom: 2px solid var(--simply-button-primary); + box-shadow: none; +} +.simply-button .ds-icon { + height: 26px; + font-size: 26px; + padding: 0 4px; + display: block; + margin: 6px auto -14px; + position: relative; +} +.simply-button.ds-selected { + border-top-color: var(--ds-grey-40); + background-color: var(--ds-grey-light); + border-left: 1px solid var(--ds-grey-40); + border-right: 1px solid var(--ds-white); +} + +.simply-toolbar { + position: absolute; + top: 0; + border-top: 1px solid var(--simply-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: 60px; + display: flex; +} +.simply-toolbar .ds-button { + margin: 0; +} +.simply-toolbar-title { + padding: 0 10px; + font-size: 16px; + width: auto; + font-family: sans-serif; + text-transform: none; + border: 0; + height: 60px; + 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: 60px; + position: absolute; + display: inline-block; +} +.simply-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-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; +} +header .simply-toolbar { + border-top-width: 5px; +} + +.ds-nightmode .simply-toolbar { + background: linear-gradient(var(--ds-grey-90) 0%, var(--ds-grey-90) 95%, black 100%); + color: var(--ds-white); +} +.ds-nightmode .simply-button { + color: var(--ds-white); +} +.ds-nightmode .simply-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); +} +.ds-nightmode .simply-button[disabled] { + background-color: transparent; + color: var(--ds-grey-60); +} + +/* SimplyCode: SimplyCode Box */ + +:root { + --simplycode-boxes-spacing-row: calc(0.5 * var(--ds-grid-spacing-row)); + --simplycode-boxes-spacing-column: calc(0.5 * var(--ds-grid-spacing-column)); + --simplycode-boxes-min-colwidth: 10rem; + --simplycode-box-font-size: calc(0.9 * var(--ds-font-size)); + --simplycode-box-background: var(--ds-grey-40); + --simplycode-box-background-active: var(--ds-grey-20); + --simplycode-box-color: var(--ds-black); +} +.ds-nightmode { + --simplycode-box-background: var(--ds-grey-90); + --simplycode-box-background-active: var(--ds-grey-70); + --simplycode-box-color: var(--ds-white); +} + +.simplycode-boxes { + display: grid; + grid-column-gap: var(--simplycode-boxes-spacing-column); + grid-row-gap: var(--simplycode-boxes-spacing-row); + grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-boxes-min-colwidth), 1fr)); + + font-size: var(--simplycode-box-font-size); + line-height: 1.6em; + margin-bottom: var(--simplycode-boxes-spacing-column); +} +.simplycode-box { + background-color: var(--simplycode-box-background); + padding: calc(0.5 * var(--simplycode-boxes-spacing-column)); + display: flex; + flex-direction: column; + flex: 1 1 0; +} + +.simplycode-box, +a.simplycode-box, +a.simplycode-box * { + text-decoration: none; + color: var(--simplycode-box-color); +} +.simplycode-box:hover, +a.simplycode-box:hover, +a.simplycode-box:active { + background-color: var(--simplycode-box-background-active); +} + +.simplycode-box > :first-child { + margin-top: 0; +} +.simplycode-box > :last-child { + margin-bottom: 0; +} + + + +/* SimplyCode: Home */ + +header { + position: sticky; + top: 0; + z-index: 100; +} +main { + margin-top: 75px; + margin-bottom: 75px; + padding: 0 var(--ds-spacing); +} +@media screen and (max-width: 720px) { + :root { + --ds-spacing: calc(0.5 * var(--ds-line-height)); + } +} +input.simply-input-small { + width: 7em; +} + + +/* SimplyCode: Add Component + */ + +.simplycode-form { + background-color: var(--simplycode-box-background); + padding: var(--simplycode-boxes-spacing-row) var(--simplycode-boxes-spacing-column); +} +.simplycode-form > :first-child { + margin-top: 0; +} +.simplycode-form > :last-child { + margin-bottom: 0; +} + +/* SimplyCode: Edit Component + */ + +.CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-type,.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta{color:#555}.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error{color:red}.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0} +.cm-s-base16-dark.CodeMirror{background:#151515;color:#e0e0e0}.cm-s-base16-dark div.CodeMirror-selected{background:#303030}.cm-s-base16-dark .CodeMirror-line::selection,.cm-s-base16-dark .CodeMirror-line>span::selection,.cm-s-base16-dark .CodeMirror-line>span>span::selection{background:rgba(48,48,48,.99)}.cm-s-base16-dark .CodeMirror-line::-moz-selection,.cm-s-base16-dark .CodeMirror-line>span::-moz-selection,.cm-s-base16-dark .CodeMirror-line>span>span::-moz-selection{background:rgba(48,48,48,.99)}.cm-s-base16-dark .CodeMirror-gutters{background:#151515;border-right:0}.cm-s-base16-dark .CodeMirror-guttermarker{color:#ac4142}.cm-s-base16-dark .CodeMirror-guttermarker-subtle{color:#505050}.cm-s-base16-dark .CodeMirror-linenumber{color:#505050}.cm-s-base16-dark .CodeMirror-cursor{border-left:1px solid #b0b0b0}.cm-s-base16-dark.cm-fat-cursor .CodeMirror-cursor{background-color:#8e8d8875!important}.cm-s-base16-dark .cm-animate-fat-cursor{background-color:#8e8d8875!important}.cm-s-base16-dark span.cm-comment{color:#8f5536}.cm-s-base16-dark span.cm-atom{color:#aa759f}.cm-s-base16-dark span.cm-number{color:#aa759f}.cm-s-base16-dark span.cm-attribute,.cm-s-base16-dark span.cm-property{color:#90a959}.cm-s-base16-dark span.cm-keyword{color:#ac4142}.cm-s-base16-dark span.cm-string{color:#f4bf75}.cm-s-base16-dark span.cm-variable{color:#90a959}.cm-s-base16-dark span.cm-variable-2{color:#6a9fb5}.cm-s-base16-dark span.cm-def{color:#d28445}.cm-s-base16-dark span.cm-bracket{color:#e0e0e0}.cm-s-base16-dark span.cm-tag{color:#ac4142}.cm-s-base16-dark span.cm-link{color:#aa759f}.cm-s-base16-dark span.cm-error{background:#ac4142;color:#b0b0b0}.cm-s-base16-dark .CodeMirror-activeline-background{background:#202020}.cm-s-base16-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important} + .sb-html-valid, + .sb-html-invalid { + padding: 4px 10px; + background-color: #D2E0E6; + color: #2B81AF; + } + .sb-html-valid { + border-top: 5px solid #C6E746; /* pass color from qunit */ + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + margin-bottom: 10px; + } + .sb-html-invalid { + border-top: 5px solid #EE5757; /* fail color from qunit */ + } + .sb-html-messages:not(.simply-empty) { + padding: 4px 10px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + margin-bottom: 10px; + background-color: #D2E0E6; + color: #2B81AF; + } + .sb-html-message:not(:last-child) { + border-bottom: 1px solid #2B81AF; + } + .sb-html-message [data-simply-field=firstLine]:not(:empty):after { + content: " - "; + } + .sb-editor-code { + font-size: 13px; + border-radius: 8px; + overflow: hidden; + } + + .simply-component-single { + display: inline-block; + padding-top: 0; + padding-bottom: 0; + } + + :root .ds-button-inline { + margin: 0; + line-height: var(--ds-line-height); + min-height: unset; + min-width: unset; + height: unset; + font-size: inherit; + color: var(--ds-grey-40); + } + .ds-button-inline:hover { + border-bottom: 0px; + color: var(--ds-white); + } + .ds-button-inline .ds-icon { + display: inline-block; + margin: 0; + padding: 0; + font-size: inherit; + height: 1em; + width: 1em; + } + +/* SimplyCode: Search Components + */ + + + +/* Utility: Alignment */ + +.ds-center { + text-align: center; + margin-left: auto; + margin-right: auto; +} +.ds-center-middle { + display: flex; + align-items: center; + justify-content: center; +} +.ds-align-right { + float: right; +} + +/* Utility: Background Image + */ + +.ds-background-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; +} + + +/* Utility: Color classes + */ + + .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-primary { + color: var(--ds-primary); +} +.ds-color-support { + color: var(--ds-support); +} + +/* Utility: Contain Margins + */ + +.ds-contain { + padding: 0.05px; /* IE fallback */ +} +@supports (display: flow-root) { + .ds-contain { + padding: 0; + display: flow-root; + } +} + +/* Utility: Hide items + */ + +.ds-hidden { + max-height: 0; + overflow: hidden; +} + +/* Utility: 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-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); +} + +/* Utility: Space */ + +.ds-margin-up { + margin-top: calc(-1 * var(--ds-spacing)); +} + +.ds-no-space { + 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); +} + +/* Utility: Text on dark and light backgrounds + */ + +.ds-dark-background { + color: white; + text-shadow: 0 0 2px var(--ds-black); +} +.ds-light-background { + color: var(--ds-color); + text-shadow: 0 0 3px white; +} \ 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 1fc2f3d..3d7f9a1 100644 --- a/www/api/data/components/1-styling/componentCss/extra.css +++ b/www/api/data/components/1-styling/componentCss/extra.css @@ -1,26 +1,38 @@ +@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i'); +:root { + --ds-primary: var(--ds-simplyedit); + --ds-primary-dark: var(--ds-simplyedit-dark); + --ds-primary-contrast: var(--ds-white); + --ds-primary-light: var(--ds-simplyedit-light); + --ds-primary-gradient: var(--ds-simplyedit-gradient); + --ds-primary-gradient-bump: var(--ds-simplyedit-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) ); +} html, body { - margin: 0; - padding: 0; - width: 100%; + height: 100%; } -main { - padding: 0px 15px; +body { + display: grid; + grid-template-columns: 210px 2fr 2fr; + grid-template-rows: 60px 2fr 2fr; + gap: 0px 0px; + grid-template-areas: + "header header header" + "nav pane pane" + "nav pane pane" } -[data-simply-command] { - cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */ +body > header { + grid-area: header; } -textarea { - width: 100%; - height: 120px; - color: #e0e0e0; - background-color: #151515; - border: 0; - padding: 10px; +body > nav { + grid-area: nav; + overflow: auto; } -input:not([type]), -input[type=text] { - color: #e0e0e0; - background-color: #151515; - border: 0; - padding: 5px; +body > div.main { + grid-area: pane; + overflow: auto; } \ No newline at end of file diff --git a/www/api/data/components/1-styling/componentCss/simplycode-manual.css b/www/api/data/components/1-styling/componentCss/simplycode-manual.css new file mode 100644 index 0000000..cc09ac4 --- /dev/null +++ b/www/api/data/components/1-styling/componentCss/simplycode-manual.css @@ -0,0 +1,72 @@ +.simplycode-part { + margin-top: 1em; +} +.simplycode-part-header { + display: grid; + grid-template-columns: 1fr 1fr; +} +.simplycode-part-header .simplycode-options { + 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; +} +.simplycode-part .simplycode-tab input[type=radio] { + display: none; +} +.simplycode-part .simplycode-tab input[type=radio]:checked ~ span { + font-weight: bold; + border-bottom: 2px solid var(--support-background); +} +.simplycode-part .simplycode-editor-code { + display: grid; + grid-template-columns: 1fr; +} +.simplycode-part .simplycode-dual { + display: grid; + grid-template-columns: 1fr 1fr; +} +.simplycode-part .simplycode-dual-preview { + display: grid; + grid-template-columns: auto 480px; +} +.simplycode-test-header { + display: grid; + grid-template-columns: 1fr 1fr; +} +.simplycode-test-header .simplycode-options { + text-align: right; +} +.simplycode-component summary { + font-size: 1.2em; +} +.simplycode-component { + margin: 10px 0px; +} +.simplycode-header { + display: grid; + grid-template-columns: 3fr 1fr; + vertical-align: middle; +} +.simplycode-header .simplycode-controls { + text-align: right; +} +.simplycode-header h1 span { + white-space: nowrap; +} +.simplycode-component summary .simplycode-controls { + display: none; + margin-left: 1em; +} +.simplycode-component[open] summary .simplycode-controls { + display: inline-block; +} +.simplycode-editor-code textarea { + margin-top: -1px; +} diff --git a/www/api/data/components/1-styling/componentCss/style.css b/www/api/data/components/1-styling/componentCss/style.css deleted file mode 100644 index 9e93fbf..0000000 --- a/www/api/data/components/1-styling/componentCss/style.css +++ /dev/null @@ -1,381 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i'); - -:root { - --highlight-dark: #f16623; - --highlight-light: #ff8003; - --highlight-color: #fff; - --highlight-background: linear-gradient( to left, var(--highlight-light), var(--highlight-dark) ); - - --support-dark: #444; - --support-light: #484848; - --support-color: #eee; - --support-background: linear-gradient( to left, var(--support-light), var(--support-dark) ); - - --grey-dark: #38393c; - --grey-medium: #7f8185; - --grey-light: #e9ebec; - --grey-dark: #38393c; - --black: #000; - --white: #fff; - --grey-background: var(--grey-dark); - - --font-family: 'Alegreya Sans', sans-serif; - --font-size: 14px; - --line-height: 1.5em; - --color: #7f8185; - --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); -} -body { - overflow-y: scroll; -} -body:last-child { - margin-bottom: 1.5em; -} -h1 { - 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; -} - -* { - box-sizing: border-box; -} - -img { - display: block; - max-width: 100%; -} - -a { - color: var(--highlight-dark); -} -a:visited { - color: var(--highlight-dark); -} - -/* custom styling for custom elements */ - -.sb-button, -a.sb-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; -} - -.sb-button:first-child { - margin-left: 0; -} -.sb-button:last-child { - margin-right: 0; -} -.sb-button.highlight { - background: var(--highlight-background); - color: var(--highlight-color); -} - -.text-content { - padding: 2.2375em; - max-width: 50em; -} -.text-content *:first-child { - margin-top: 0; -} - -body { - display: grid; - grid-template-columns: 210px 2fr 2fr; - grid-template-rows: 60px 2fr 2fr; - gap: 0px 0px; - grid-template-areas: - "header header header" - "nav pane pane" - "nav pane pane" -} -body > header { - grid-area: header; -} -body > nav { - grid-area: nav; -} -body > div.main { - grid-area: pane; -} -nav ul ul .sb-expand { - display: none; - padding: 0 1.7em; -} -nav ul { - list-style: none; - margin: 0 0.5em; - padding: 0; -} -nav ul ul { - padding: 0 1.7em; -} - -nav > ul > li[data-simply-command=expandMenu][open]::before { - content: "[-] "; - font-family: monospace; -} -nav > ul > li[data-simply-command=expandMenu]::before { - content: "[+] "; - font-family: monospace; -} -.sb-part { - margin-top: 1em; -} - -.sb-part-header { - display: grid; - grid-template-columns: 1fr 1fr; -} -.sb-part-header .sb-options { - text-align: right; -} -.sb-part .sb-tab { - padding: 10px 5px; - margin: 0; - background-color: #151515; - color: #ddd; - border: 0; - text-align: center; - margin-right: 5px; -} -.sb-part .sb-tab input[type=radio] { - display: none; -} -.sb-part .sb-tab input[type=radio]:checked ~ span { - font-weight: bold; - border-bottom: 2px solid var(--support-background); -} -.sb-part .sb-editor-code { - display: grid; - grid-template-columns: 1fr; -} -.sb-part .sb-dual { - display: grid; - grid-template-columns: 1fr 1fr; -} -.sb-part .sb-dual-preview { - display: grid; - grid-template-columns: auto 480px; -} -.sb-test-header { - display: grid; - grid-template-columns: 1fr 1fr; -} -.sb-test-header .sb-options { - text-align: right; -} -.sb-component summary { - font-size: 1.2em; -} -.sb-component { - margin: 10px 0px; -} -.sb-header { - display: grid; - grid-template-columns: 3fr 1fr; - vertical-align: middle; -} -.sb-header .sb-controls { - text-align: right; -} -.sb-header h1 span { - white-space: nowrap; -} -.sb-component summary .sb-controls { - display: none; - margin-left: 1em; -} -.sb-component[open] summary .sb-controls { - 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; -} -header h1 { - margin: 0; -} -header .sb-controls { - padding-top: 5px; - padding-right: 5px; - text-align: right; -} -.sb-editor-code textarea { - margin-top: -1px; -} - -ul.sb-components-list { - list-style: none; - padding: 0; - margin: 0; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 10px; - margin-bottom: 1em; -} -ul.sb-components-list li { - border: 1px solid #555; - background-color: #2a2a2a; - padding: 10px; - border-radius: 2px; -} - -/* 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; -} - -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; -} -.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; -} -.simply-toast-error, -li.simply-toast-error { - border-color: var(--simply-error-color); -} -.simply-toast-info, -li.simply-toast-info { - border-color: var(--simply-info-color); -} -.simply-toast-warning, -li.simply-toast-warning { - border-color: var(--simply-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; - } -} -@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; - } -} -@keyframes simply-toast-move { - 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; -} -.simply-toast-autohide[data-state="new"] { - 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)); -} -.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); -} diff --git a/www/api/data/components/1-styling/meta.json b/www/api/data/components/1-styling/meta.json index 64f5a99..1d9da25 100644 --- a/www/api/data/components/1-styling/meta.json +++ b/www/api/data/components/1-styling/meta.json @@ -1 +1 @@ -{"id":"styling","description":""} \ No newline at end of file +{"id":"1-styling","description":""} \ No newline at end of file diff --git a/www/api/data/components/component-actions/commands/tests/addAction/Add%20two%20actions.js b/www/api/data/components/component-actions/commands/tests/addAction/Add%20two%20actions.js new file mode 100644 index 0000000..18329e0 --- /dev/null +++ b/www/api/data/components/component-actions/commands/tests/addAction/Add%20two%20actions.js @@ -0,0 +1,26 @@ +function(assert) { + var button = document.createElement("button"); + window.editor = { + "pageData" : { + "component" : { + "parts" : { + "actions" : [] + } + } + } + }; + + commands.addAction(button); + assert.equal( + editor.pageData.component.parts.actions.length, + 1, + "button adds an action" + ); + + commands.addAction(button); + assert.equal( + editor.pageData.component.parts.actions.length, + 2, + "button adds an action" + ); +} \ No newline at end of file diff --git a/www/api/data/components/component-actions/componentTemplates/componentActions.html b/www/api/data/components/component-actions/componentTemplates/componentActions.html index aeb0259..cc2ee0d 100644 --- a/www/api/data/components/component-actions/componentTemplates/componentActions.html +++ b/www/api/data/components/component-actions/componentTemplates/componentActions.html @@ -1,42 +1,42 @@ -
+
Actions - - + + -
+