diff --git a/client/js/app.js b/client/js/app.js index d728dda4..e43e4c64 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -95,6 +95,7 @@ Vue.use(VeeValidate, { // Register Vue Components // ==================================== +Vue.component('editor', () => import(/* webpackChunkName: "editor" */ './components/editor.vue')) Vue.component('login', () => import(/* webpackMode: "eager" */ './components/login.vue')) Vue.component('navigator', () => import(/* webpackMode: "eager" */ './components/navigator.vue')) Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue')) diff --git a/client/js/components/editor-code.vue b/client/js/components/editor-code.vue new file mode 100644 index 00000000..6f2f7ff4 --- /dev/null +++ b/client/js/components/editor-code.vue @@ -0,0 +1,231 @@ + + + + + diff --git a/client/js/components/editor.vue b/client/js/components/editor.vue new file mode 100644 index 00000000..9002f2ff --- /dev/null +++ b/client/js/components/editor.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/client/scss/app.scss b/client/scss/app.scss index c764b423..273e939d 100644 --- a/client/scss/app.scss +++ b/client/scss/app.scss @@ -1,39 +1,22 @@ @import "global"; +@import 'base/icons'; + @import "libs/animate"; -@import 'components/alert'; @import 'components/button'; -@import 'components/collapsable-nav'; -@import 'components/color-picker'; -@import 'components/footer'; -@import 'components/form'; -@import 'components/grid'; -@import 'components/hero'; -@import 'components/history'; -@import 'components/markdown-content'; -@import 'components/modal'; -@import 'components/nav'; @import 'components/navigator'; @import 'components/panel'; -@import 'components/search'; @import 'components/setup'; -@import 'components/sidebar'; -@import 'components/table'; @import 'components/toggle'; @import 'components/typography'; @import 'libs/twemoji-awesome'; @import 'node_modules/highlight.js/styles/atom-one-dark'; -@import 'node_modules/simplemde/dist/simplemde.min'; @import 'node_modules/diff2html/dist/diff2html.min'; -@import 'components/editor'; - @import 'pages/welcome'; -@import 'layout/_header'; -@import 'layout/_loader'; @import 'layout/_rtl'; @import 'base/print'; diff --git a/client/scss/base/fonts.scss b/client/scss/base/fonts.scss deleted file mode 100644 index 212f59f6..00000000 --- a/client/scss/base/fonts.scss +++ /dev/null @@ -1,1104 +0,0 @@ - -// ======================================== -// Wiki.js Icon Set -// -// Contains selections from: -// - Feather, by Cole Bemis, licensed under MIT -// - FontAwesome, by Dave Gandy, licensed under SIL OFL 1.1 -// ======================================== - -@font-face { - font-family: 'wiki-js'; - src: - url('/fonts/wiki-js.woff2?1497824388') format('woff2'), - url('/fonts/wiki-js.woff?1497824388') format('woff'); - font-weight: normal; - font-style: normal; -} - -[class^="icon-"], [class*=" icon-"] { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'wiki-js' !important; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -// Wiki.js Icon Set Reference - -$icon-bold: "\f032"; -$icon-italic: "\f033"; -$icon-twitter: "\f099"; -$icon-facebook: "\f09a"; -$icon-facebook-f: "\f09a"; -$icon-github: "\f09b"; -$icon-strikethrough: "\f0cc"; -$icon-pinterest: "\f0d2"; -$icon-google-plus: "\f0d5"; -$icon-linkedin: "\f0e1"; -$icon-github-alt: "\f113"; -$icon-youtube-play: "\f16a"; -$icon-dropbox: "\f16b"; -$icon-stack-overflow: "\f16c"; -$icon-instagram: "\f16d"; -$icon-flickr: "\f16e"; -$icon-bitbucket: "\f171"; -$icon-apple: "\f179"; -$icon-windows2: "\f17a"; -$icon-android: "\f17b"; -$icon-linux: "\f17c"; -$icon-skype: "\f17e"; -$icon-trello: "\f181"; -$icon-slack: "\f198"; -$icon-wordpress: "\f19a"; -$icon-google: "\f1a0"; -$icon-reddit: "\f1a1"; -$icon-behance: "\f1b4"; -$icon-steam: "\f1b6"; -$icon-codepen: "\f1cb"; -$icon-git-square: "\f1d2"; -$icon-git: "\f1d3"; -$icon-header: "\f1dc"; -$icon-twitch: "\f1e8"; -$icon-pinterest-p: "\f231"; -$icon-get-pocket: "\f265"; -$icon-wikipedia-w: "\f266"; -$icon-safari: "\f267"; -$icon-chrome: "\f268"; -$icon-firefox: "\f269"; -$icon-opera: "\f26a"; -$icon-internet-explorer: "\f26b"; -$icon-amazon: "\f270"; -$icon-vimeo: "\f27d"; -$icon-reddit-alien: "\f281"; -$icon-edge: "\f282"; -$icon-gitlab: "\f296"; -$icon-snapchat-ghost: "\f2ac"; -$icon-eye2: "\e000"; -$icon-paper-clip: "\e001"; -$icon-mail2: "\e002"; -$icon-toggle: "\e003"; -$icon-layout: "\e004"; -$icon-link2: "\e005"; -$icon-bell2: "\e006"; -$icon-lock: "\e007"; -$icon-unlock: "\e008"; -$icon-ribbon: "\e009"; -$icon-image: "\e010"; -$icon-signal: "\e011"; -$icon-target: "\e012"; -$icon-clipboard: "\e013"; -$icon-clock: "\e014"; -$icon-watch2: "\e015"; -$icon-air-play: "\e016"; -$icon-camera: "\e017"; -$icon-video: "\e018"; -$icon-disc: "\e019"; -$icon-printer: "\e020"; -$icon-monitor: "\e021"; -$icon-server: "\e022"; -$icon-cog: "\e023"; -$icon-heart: "\e024"; -$icon-paragraph: "\e025"; -$icon-align-justify: "\e026"; -$icon-align-left: "\e027"; -$icon-align-center: "\e028"; -$icon-align-right: "\e029"; -$icon-book: "\e030"; -$icon-layers: "\e031"; -$icon-stack: "\e032"; -$icon-stack-2: "\e033"; -$icon-paper: "\e034"; -$icon-paper-stack: "\e035"; -$icon-search: "\e036"; -$icon-zoom-in: "\e037"; -$icon-zoom-out: "\e038"; -$icon-reply: "\e039"; -$icon-circle-plus: "\e040"; -$icon-circle-minus: "\e041"; -$icon-circle-check: "\e042"; -$icon-circle-cross: "\e043"; -$icon-square-plus: "\e044"; -$icon-square-minus: "\e045"; -$icon-square-check: "\e046"; -$icon-square-cross: "\e047"; -$icon-microphone: "\e048"; -$icon-record: "\e049"; -$icon-skip-back: "\e050"; -$icon-rewind: "\e051"; -$icon-play: "\e052"; -$icon-pause: "\e053"; -$icon-stop: "\e054"; -$icon-fast-forward: "\e055"; -$icon-skip-forward: "\e056"; -$icon-shuffle: "\e057"; -$icon-repeat: "\e058"; -$icon-folder2: "\e059"; -$icon-umbrella: "\e060"; -$icon-moon: "\e061"; -$icon-thermometer: "\e062"; -$icon-drop: "\e063"; -$icon-sun: "\e064"; -$icon-cloud: "\e065"; -$icon-cloud-upload: "\e066"; -$icon-cloud-download: "\e067"; -$icon-upload: "\e068"; -$icon-download: "\e069"; -$icon-location2: "\e070"; -$icon-location-2: "\e071"; -$icon-map: "\e072"; -$icon-battery: "\e073"; -$icon-head: "\e074"; -$icon-briefcase: "\e075"; -$icon-speech-bubble: "\e076"; -$icon-anchor: "\e077"; -$icon-globe: "\e078"; -$icon-box: "\e079"; -$icon-reload: "\e080"; -$icon-share: "\e081"; -$icon-marquee: "\e082"; -$icon-marquee-plus: "\e083"; -$icon-marquee-minus: "\e084"; -$icon-tag2: "\e085"; -$icon-power2: "\e086"; -$icon-command: "\e087"; -$icon-alt: "\e088"; -$icon-esc: "\e089"; -$icon-bar-graph: "\e090"; -$icon-bar-graph-2: "\e091"; -$icon-pie-graph: "\e092"; -$icon-star2: "\e093"; -$icon-arrow-left2: "\e094"; -$icon-arrow-right2: "\e095"; -$icon-arrow-up2: "\e096"; -$icon-arrow-down2: "\e097"; -$icon-volume: "\e098"; -$icon-mute: "\e099"; -$icon-content-right: "\e100"; -$icon-content-left: "\e101"; -$icon-grid: "\e102"; -$icon-grid-2: "\e103"; -$icon-columns: "\e104"; -$icon-loader: "\e105"; -$icon-bag: "\e106"; -$icon-ban: "\e107"; -$icon-flag2: "\e108"; -$icon-trash2: "\e109"; -$icon-expand: "\e110"; -$icon-contract: "\e111"; -$icon-maximize: "\e112"; -$icon-minimize: "\e113"; -$icon-plus: "\e114"; -$icon-minus: "\e115"; -$icon-check: "\e116"; -$icon-cross: "\e117"; -$icon-move: "\e118"; -$icon-delete2: "\e119"; -$icon-menu: "\e120"; -$icon-archive: "\e121"; -$icon-inbox: "\e122"; -$icon-outbox: "\e123"; -$icon-file: "\e124"; -$icon-file-add: "\e125"; -$icon-file-subtract: "\e126"; -$icon-help: "\e127"; -$icon-open: "\e128"; -$icon-ellipsis: "\e129"; - -.icon-bold { - &:before { - content: $icon-bold; - } -} -.icon-italic { - &:before { - content: $icon-italic; - } -} -.icon-twitter { - &:before { - content: $icon-twitter; - } -} -.icon-facebook { - &:before { - content: $icon-facebook; - } -} -.icon-facebook-f { - &:before { - content: $icon-facebook-f; - } -} -.icon-github { - &:before { - content: $icon-github; - } -} -.icon-strikethrough { - &:before { - content: $icon-strikethrough; - } -} -.icon-pinterest { - &:before { - content: $icon-pinterest; - } -} -.icon-google-plus { - &:before { - content: $icon-google-plus; - } -} -.icon-linkedin { - &:before { - content: $icon-linkedin; - } -} -.icon-github-alt { - &:before { - content: $icon-github-alt; - } -} -.icon-youtube-play { - &:before { - content: $icon-youtube-play; - } -} -.icon-dropbox { - &:before { - content: $icon-dropbox; - } -} -.icon-stack-overflow { - &:before { - content: $icon-stack-overflow; - } -} -.icon-instagram { - &:before { - content: $icon-instagram; - } -} -.icon-flickr { - &:before { - content: $icon-flickr; - } -} -.icon-bitbucket { - &:before { - content: $icon-bitbucket; - } -} -.icon-apple { - &:before { - content: $icon-apple; - } -} -.icon-windows2 { - &:before { - content: $icon-windows2; - } -} -.icon-android { - &:before { - content: $icon-android; - } -} -.icon-linux { - &:before { - content: $icon-linux; - } -} -.icon-skype { - &:before { - content: $icon-skype; - } -} -.icon-trello { - &:before { - content: $icon-trello; - } -} -.icon-slack { - &:before { - content: $icon-slack; - } -} -.icon-wordpress { - &:before { - content: $icon-wordpress; - } -} -.icon-google { - &:before { - content: $icon-google; - } -} -.icon-reddit { - &:before { - content: $icon-reddit; - } -} -.icon-behance { - &:before { - content: $icon-behance; - } -} -.icon-steam { - &:before { - content: $icon-steam; - } -} -.icon-codepen { - &:before { - content: $icon-codepen; - } -} -.icon-git-square { - &:before { - content: $icon-git-square; - } -} -.icon-git { - &:before { - content: $icon-git; - } -} -.icon-header { - &:before { - content: $icon-header; - } -} -.icon-twitch { - &:before { - content: $icon-twitch; - } -} -.icon-pinterest-p { - &:before { - content: $icon-pinterest-p; - } -} -.icon-get-pocket { - &:before { - content: $icon-get-pocket; - } -} -.icon-wikipedia-w { - &:before { - content: $icon-wikipedia-w; - } -} -.icon-safari { - &:before { - content: $icon-safari; - } -} -.icon-chrome { - &:before { - content: $icon-chrome; - } -} -.icon-firefox { - &:before { - content: $icon-firefox; - } -} -.icon-opera { - &:before { - content: $icon-opera; - } -} -.icon-internet-explorer { - &:before { - content: $icon-internet-explorer; - } -} -.icon-amazon { - &:before { - content: $icon-amazon; - } -} -.icon-vimeo { - &:before { - content: $icon-vimeo; - } -} -.icon-reddit-alien { - &:before { - content: $icon-reddit-alien; - } -} -.icon-edge { - &:before { - content: $icon-edge; - } -} -.icon-gitlab { - &:before { - content: $icon-gitlab; - } -} -.icon-snapchat-ghost { - &:before { - content: $icon-snapchat-ghost; - } -} -.icon-eye2 { - &:before { - content: $icon-eye2; - } -} -.icon-paper-clip { - &:before { - content: $icon-paper-clip; - } -} -.icon-mail2 { - &:before { - content: $icon-mail2; - } -} -.icon-toggle { - &:before { - content: $icon-toggle; - } -} -.icon-layout { - &:before { - content: $icon-layout; - } -} -.icon-link2 { - &:before { - content: $icon-link2; - } -} -.icon-bell2 { - &:before { - content: $icon-bell2; - } -} -.icon-lock { - &:before { - content: $icon-lock; - } -} -.icon-unlock { - &:before { - content: $icon-unlock; - } -} -.icon-ribbon { - &:before { - content: $icon-ribbon; - } -} -.icon-image { - &:before { - content: $icon-image; - } -} -.icon-signal { - &:before { - content: $icon-signal; - } -} -.icon-target { - &:before { - content: $icon-target; - } -} -.icon-clipboard { - &:before { - content: $icon-clipboard; - } -} -.icon-clock { - &:before { - content: $icon-clock; - } -} -.icon-watch2 { - &:before { - content: $icon-watch2; - } -} -.icon-air-play { - &:before { - content: $icon-air-play; - } -} -.icon-camera { - &:before { - content: $icon-camera; - } -} -.icon-video { - &:before { - content: $icon-video; - } -} -.icon-disc { - &:before { - content: $icon-disc; - } -} -.icon-printer { - &:before { - content: $icon-printer; - } -} -.icon-monitor { - &:before { - content: $icon-monitor; - } -} -.icon-server { - &:before { - content: $icon-server; - } -} -.icon-cog { - &:before { - content: $icon-cog; - } -} -.icon-heart { - &:before { - content: $icon-heart; - } -} -.icon-paragraph { - &:before { - content: $icon-paragraph; - } -} -.icon-align-justify { - &:before { - content: $icon-align-justify; - } -} -.icon-align-left { - &:before { - content: $icon-align-left; - } -} -.icon-align-center { - &:before { - content: $icon-align-center; - } -} -.icon-align-right { - &:before { - content: $icon-align-right; - } -} -.icon-book { - &:before { - content: $icon-book; - } -} -.icon-layers { - &:before { - content: $icon-layers; - } -} -.icon-stack { - &:before { - content: $icon-stack; - } -} -.icon-stack-2 { - &:before { - content: $icon-stack-2; - } -} -.icon-paper { - &:before { - content: $icon-paper; - } -} -.icon-paper-stack { - &:before { - content: $icon-paper-stack; - } -} -.icon-search { - &:before { - content: $icon-search; - } -} -.icon-zoom-in { - &:before { - content: $icon-zoom-in; - } -} -.icon-zoom-out { - &:before { - content: $icon-zoom-out; - } -} -.icon-reply { - &:before { - content: $icon-reply; - } -} -.icon-circle-plus { - &:before { - content: $icon-circle-plus; - } -} -.icon-circle-minus { - &:before { - content: $icon-circle-minus; - } -} -.icon-circle-check { - &:before { - content: $icon-circle-check; - } -} -.icon-circle-cross { - &:before { - content: $icon-circle-cross; - } -} -.icon-square-plus { - &:before { - content: $icon-square-plus; - } -} -.icon-square-minus { - &:before { - content: $icon-square-minus; - } -} -.icon-square-check { - &:before { - content: $icon-square-check; - } -} -.icon-square-cross { - &:before { - content: $icon-square-cross; - } -} -.icon-microphone { - &:before { - content: $icon-microphone; - } -} -.icon-record { - &:before { - content: $icon-record; - } -} -.icon-skip-back { - &:before { - content: $icon-skip-back; - } -} -.icon-rewind { - &:before { - content: $icon-rewind; - } -} -.icon-play { - &:before { - content: $icon-play; - } -} -.icon-pause { - &:before { - content: $icon-pause; - } -} -.icon-stop { - &:before { - content: $icon-stop; - } -} -.icon-fast-forward { - &:before { - content: $icon-fast-forward; - } -} -.icon-skip-forward { - &:before { - content: $icon-skip-forward; - } -} -.icon-shuffle { - &:before { - content: $icon-shuffle; - } -} -.icon-repeat { - &:before { - content: $icon-repeat; - } -} -.icon-folder2 { - &:before { - content: $icon-folder2; - } -} -.icon-umbrella { - &:before { - content: $icon-umbrella; - } -} -.icon-moon { - &:before { - content: $icon-moon; - } -} -.icon-thermometer { - &:before { - content: $icon-thermometer; - } -} -.icon-drop { - &:before { - content: $icon-drop; - } -} -.icon-sun { - &:before { - content: $icon-sun; - } -} -.icon-cloud { - &:before { - content: $icon-cloud; - } -} -.icon-cloud-upload { - &:before { - content: $icon-cloud-upload; - } -} -.icon-cloud-download { - &:before { - content: $icon-cloud-download; - } -} -.icon-upload { - &:before { - content: $icon-upload; - } -} -.icon-download { - &:before { - content: $icon-download; - } -} -.icon-location2 { - &:before { - content: $icon-location2; - } -} -.icon-location-2 { - &:before { - content: $icon-location-2; - } -} -.icon-map { - &:before { - content: $icon-map; - } -} -.icon-battery { - &:before { - content: $icon-battery; - } -} -.icon-head { - &:before { - content: $icon-head; - } -} -.icon-briefcase { - &:before { - content: $icon-briefcase; - } -} -.icon-speech-bubble { - &:before { - content: $icon-speech-bubble; - } -} -.icon-anchor { - &:before { - content: $icon-anchor; - } -} -.icon-globe { - &:before { - content: $icon-globe; - } -} -.icon-box { - &:before { - content: $icon-box; - } -} -.icon-reload { - &:before { - content: $icon-reload; - } -} -.icon-share { - &:before { - content: $icon-share; - } -} -.icon-marquee { - &:before { - content: $icon-marquee; - } -} -.icon-marquee-plus { - &:before { - content: $icon-marquee-plus; - } -} -.icon-marquee-minus { - &:before { - content: $icon-marquee-minus; - } -} -.icon-tag2 { - &:before { - content: $icon-tag2; - } -} -.icon-power2 { - &:before { - content: $icon-power2; - } -} -.icon-command { - &:before { - content: $icon-command; - } -} -.icon-alt { - &:before { - content: $icon-alt; - } -} -.icon-esc { - &:before { - content: $icon-esc; - } -} -.icon-bar-graph { - &:before { - content: $icon-bar-graph; - } -} -.icon-bar-graph-2 { - &:before { - content: $icon-bar-graph-2; - } -} -.icon-pie-graph { - &:before { - content: $icon-pie-graph; - } -} -.icon-star2 { - &:before { - content: $icon-star2; - } -} -.icon-arrow-left2 { - &:before { - content: $icon-arrow-left2; - } -} -.icon-arrow-right2 { - &:before { - content: $icon-arrow-right2; - } -} -.icon-arrow-up2 { - &:before { - content: $icon-arrow-up2; - } -} -.icon-arrow-down2 { - &:before { - content: $icon-arrow-down2; - } -} -.icon-volume { - &:before { - content: $icon-volume; - } -} -.icon-mute { - &:before { - content: $icon-mute; - } -} -.icon-content-right { - &:before { - content: $icon-content-right; - } -} -.icon-content-left { - &:before { - content: $icon-content-left; - } -} -.icon-grid { - &:before { - content: $icon-grid; - } -} -.icon-grid-2 { - &:before { - content: $icon-grid-2; - } -} -.icon-columns { - &:before { - content: $icon-columns; - } -} -.icon-loader { - &:before { - content: $icon-loader; - } -} -.icon-bag { - &:before { - content: $icon-bag; - } -} -.icon-ban { - &:before { - content: $icon-ban; - } -} -.icon-flag2 { - &:before { - content: $icon-flag2; - } -} -.icon-trash2 { - &:before { - content: $icon-trash2; - } -} -.icon-expand { - &:before { - content: $icon-expand; - } -} -.icon-contract { - &:before { - content: $icon-contract; - } -} -.icon-maximize { - &:before { - content: $icon-maximize; - } -} -.icon-minimize { - &:before { - content: $icon-minimize; - } -} -.icon-plus { - &:before { - content: $icon-plus; - } -} -.icon-minus { - &:before { - content: $icon-minus; - } -} -.icon-check { - &:before { - content: $icon-check; - } -} -.icon-cross { - &:before { - content: $icon-cross; - } -} -.icon-move { - &:before { - content: $icon-move; - } -} -.icon-delete2 { - &:before { - content: $icon-delete2; - } -} -.icon-menu { - &:before { - content: $icon-menu; - } -} -.icon-archive { - &:before { - content: $icon-archive; - } -} -.icon-inbox { - &:before { - content: $icon-inbox; - } -} -.icon-outbox { - &:before { - content: $icon-outbox; - } -} -.icon-file { - &:before { - content: $icon-file; - } -} -.icon-file-add { - &:before { - content: $icon-file-add; - } -} -.icon-file-subtract { - &:before { - content: $icon-file-subtract; - } -} -.icon-help { - &:before { - content: $icon-help; - } -} -.icon-open { - &:before { - content: $icon-open; - } -} -.icon-ellipsis { - &:before { - content: $icon-ellipsis; - } -} diff --git a/client/scss/components/alert.scss b/client/scss/components/alert.scss deleted file mode 100644 index f17dc76f..00000000 --- a/client/scss/components/alert.scss +++ /dev/null @@ -1,49 +0,0 @@ -.alert { - background-color: #FFF; - border-right: 3px solid mc('grey', '500'); - position: fixed; - top: 60px; - margin-left: 10px; - right: 10px; - max-width: 500px; - z-index: 1000; - display: flex; - box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); - animation-duration: .6s; - - &-icon { - width: 50px; - height: 50px; - background-color: mc('grey', '500'); - color: #FFF; - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - } - - &-msg { - padding: 0 15px; - display: flex; - align-items: center; - justify-content: flex-start; - border-top: 1px solid mc('grey', '200'); - font-size: 14px; - font-weight: 500; - } - - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - border-right-color: mc($color, '500'); - - .alert-icon { - background-color: mc($color, '500'); - } - .alert-msg { - color: mc($color, '900'); - } - - } - } - -} diff --git a/client/scss/components/collapsable-nav.scss b/client/scss/components/collapsable-nav.scss deleted file mode 100644 index f190b0a2..00000000 --- a/client/scss/components/collapsable-nav.scss +++ /dev/null @@ -1,122 +0,0 @@ -.has-collapsable-nav { - background-color: mc('blue-grey', '50'); - display: flex; - justify-content: flex-start; - align-items: stretch; -} - -.collapsable-nav { - width: 300px; - background-color: mc('blue-grey', '900'); - color: #FFF; - min-height: 80vh; - transition: all .6s ease; - border-left: 1px solid darken(mc('blue-grey', '900'), 5%); - - &:last-child { - border-bottom-right-radius: 5px; - } - - &.has-children { - width: 50px; - background-color: mc($primary, '500'); - border-left: 1px solid mc($primary, '700'); - - &:nth-child(2) { - border-left: 1px solid darken(mc('blue-grey', '900'), 5%); - } - - li { - border-top: none; - display: none; - } - - } - - li { - display: flex; - border-top: 1px solid darken(mc('blue-grey', '900'), 5%); - - &.is-title { - background-color: mc('blue-grey', '800'); - padding: 8px 15px; - color: mc('blue-grey', '300'); - font-size: 13px; - letter-spacing: 1px; - text-transform: uppercase; - box-shadow: 0 0 5px rgba(0,0,0,0.3); - margin-right:1px; - } - - &.is-active { - display: flex; - height: 50px; - width: 300px; - min-width: 80vh; - @include prefix(transform, rotate(90deg) translate(0, -50px)); - transform-origin: 0 0; - - a { - height: 50px; - - &:nth-child(2) { - display: none; - } - - } - } - - } - - a { - display: flex; - flex: 1 1 auto; - min-height: 40px; - width: 100%; - align-items: center; - padding: 0 15px; - color: #FFF; - cursor: pointer; - transition: all .4s ease; - background-color: rgba(0,0,0,0); - - &.is-pagelink { - flex: 0 1 70px; - justify-content: center; - } - - &:hover { - background-color: rgba(0,0,0,.1); - text-decoration: none; - } - - i { - font-size: 14px; - - &:first-of-type { - margin-right: 10px; - } - - } - - span { - display: block; - padding: 5px 0; - } - - } - -} - -/* THEME OVERRIDE - START */ - -@each $color, $colorvalue in $material-colors { - .is-primary-#{$color} .collapsable-nav { - &.has-children { - background-color: mc($color, '500'); - border-left-color: mc($color, '700'); - } - } -} - -/* THEME OVERRIDE - END */ diff --git a/client/scss/components/color-picker.scss b/client/scss/components/color-picker.scss deleted file mode 100644 index d8ccb41e..00000000 --- a/client/scss/components/color-picker.scss +++ /dev/null @@ -1,54 +0,0 @@ -.colorpicker { - display: flex; - align-items: center; - height: 60px; - - &-choice { - width: 40px; - height: 40px; - border: 0 solid #FFF; - transition: all .2s ease; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - margin-right: 1px; - - &:first-child { - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - } - &:last-child { - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - } - - &.is-active, &:hover { - border-width: 5px; - border-radius: 5px; - width: 55px; - height: 55px; - } - - &.is-active::before { - content: '|'; - font-weight: 700; - color: rgba(255,255,255,.5); - margin-bottom: 3px; - } - - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - background-color: mc($color, '500'); - background-image: linear-gradient(45deg, mc($color, '400'), mc($color, '700')); - border-color: mc($color,'500'); - - &.is-active, &:hover { - border-color: mc($color,'300'); - } - } - } - - } - -} diff --git a/client/scss/components/editor.scss b/client/scss/components/editor.scss deleted file mode 100644 index 856329b5..00000000 --- a/client/scss/components/editor.scss +++ /dev/null @@ -1,390 +0,0 @@ - -.editor-toolbar { - z-index: 2; - background: linear-gradient(to bottom, mc('blue-grey', '900'), mc('blue-grey', '700')); - border: none; - border-top: 1px solid mc('blue-grey', '400'); - border-top-left-radius: 0; - border-top-right-radius: 0; - opacity: 1; - position: fixed; - top: 50px; - left: 0; - width: 100%; - box-shadow: 0 0 5px rgba(0,0,0,.75); - - &:hover { - opacity: 1; - } - - a { - color: #FFF !important; - border: none; - transition: background-color 0.4s ease; - - &.active, &:hover, &:focus { - background-color: rgba(0,0,0,0.5); - outline: none; - } - - } - - i.separator { - margin-top: 5px; - border-left-color: #000; - border-right-color: #AAA; - } - -} - -.editor-modal-load { - - display: flex; - align-items: center; - opacity: 0; - transition: opacity .5s ease; - - span { - font-size: 12px; - color: mc('blue', '500'); - } - - i { - margin-left: 10px; - width: 32px; - height: 32px; - display: flex; - justify-content: center; - align-items: center; - - &::before { - content: " "; - @include spinner(mc('blue', '500'),0.5s,24px); - } - } - - &.is-active { - opacity: 1; - } - -} - -#btn-editor-image-upload, #btn-editor-file-upload { - position: relative; - overflow: hidden; - - > label { - display: block; - opacity: 0; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - cursor: pointer; - - input[type=file] { - opacity: 0; - position: absolute; - top: -9999px; - left: -9999px; - } - - } - - - -} - -.editor-modal-image-choices { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - - overflow: auto; - overflow-x: hidden; - - > em { - display: flex; - align-items: center; - padding: 25px; - color: mc('grey', '500'); - - > i { - font-size: 32px; - margin-right: 10px; - color: mc('grey', '300'); - } - - } - - > figure { - display: flex; - flex-direction: column; - background-color: #FAFAFA; - border-radius: 5px; - padding: 5px; - width: 160px; - min-height: 205px; - margin: 0 5px 10px 5px; - cursor: pointer; - justify-content: center; - align-items: center; - transition: background-color 0.4s ease; - - > img { - border: 1px solid #DDD; - border-radius: 5px; - padding: 2px; - background-color: #FFF; - margin: 0 0 5px 0; - } - - > span { - font-size: 12px; - - > strong { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - width: 150px; - text-align: center; - } - - } - - &:hover { - background-color: #DDD; - } - - &.is-active { - background-color: mc('green', '500'); - color: #FFF; - - > img { - border-color: darken(mc('green', '500'), 10%); - } - - > span > strong { - color: #FFF; - } - - } - - &.is-contextopen { - background-color: mc('blue', '500'); - color: #FFF; - - > img { - border-color: darken(mc('blue', '500'), 10%); - } - - > span > strong { - color: #FFF; - } - - } - - } - -} - -.editor-modal-file-choices { - overflow: auto; - overflow-x: hidden; - - > em { - display: flex; - align-items: center; - padding: 25px; - color: mc('grey', '500'); - - > i { - font-size: 32px; - margin-right: 10px; - color: mc('grey', '300'); - } - - } - - > figure { - display: flex; - background-color: #FAFAFA; - border-radius: 3px; - padding: 5px; - height: 34px; - margin: 0 0 5px 0; - cursor: pointer; - justify-content: flex-start; - align-items: center; - transition: background-color 0.4s ease; - - > i { - width: 16px; - } - - > span { - font-size: 14px; - flex: 0 1 auto; - padding: 0 15px; - color: mc('grey', '600'); - - &:first-of-type { - flex: 1 0 auto; - color: mc('grey', '800'); - } - - &:last-of-type { - width: 100px; - } - - } - - &:hover { - background-color: #DDD; - } - - &.is-active { - background-color: mc('green', '500'); - color: #FFF; - - > span, strong { - color: #FFF; - } - - } - - &.is-contextopen { - background-color: mc('blue', '500'); - color: #FFF; - - > span, strong { - color: #FFF; - } - - } - - } - -} - -.editor-modal-imagealign { - - .control > span { - letter-spacing: 1px; - text-transform: uppercase; - color: #aeb1b5; - font-size: 11px; - } - - > .is-grouped { - display: flex; - align-items: center; - justify-content: center; - } - - .button > .icon { - margin: 0; - } - -} - -.editor-modal-folderlist { - height: 100%; - overflow: auto; - overflow-x: hidden; -} - -// CODE MIRROR - -.CodeMirror { - border-left: none; - border-right: none; - margin-top: 49px; - font-family: $core-font-standard; - border: 10px solid mc('blue-grey', '100'); -} - -.CodeMirror .CodeMirror-code { - .cm-url { - color: #00ACC1; - } - .cm-header-1 { - color: #635c8c; - font-size: 2em; - font-weight: 400; - } - .cm-header-2 { - color: #222324; - font-size: 1.75em; - font-weight: 300; - } - .cm-header-3 { - color: #222324; - font-size: 1.5em; - font-weight: 300; - } - .cm-formatting-code-block, .cm-comment { - font-family: $core-font-monospace; - } -} - -.editor-toolbar .fa { - font-size: 14px; -} - -// ACE EDITOR - -.ace-container { - position: relative; -} - -/*.ace_scroller { - width: 100%; -} -.ace_content { - height: 100%; -}*/ - -main > .ace-container { - min-height: 95vh; -} - -#modal-editor-codeblock .ace-container { - display: flex; - align-items: stretch; - padding: 0; - position: relative; - width: 100%; - height: 100%; -} - -#source-display, #codeblock-editor { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} - -.editor-sd { - max-width: 250px; - flex: 0 1 250px; - background-color: mc('blue-grey', '100'); - - &-item { - background-color: mc('blue-grey', '500'); - padding: 5px; - - &:first-child { - margin-top: 60px; - } - - & + .editor-sd-item { - margin-top: 5px; - } - - } - -} diff --git a/client/scss/components/footer.scss b/client/scss/components/footer.scss deleted file mode 100644 index db2f66c2..00000000 --- a/client/scss/components/footer.scss +++ /dev/null @@ -1,38 +0,0 @@ -.footer { - background-color: mc('blue-grey','50'); - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 25px; - height: 70px; - font-size: 13px; - font-weight: 500; - color: mc('blue-grey','500'); - position: absolute; - right: 0; - bottom: 0; - left: 0; - transition: background-color 1s ease; - - ul { - padding: 0; - margin: 0; - list-style-type: none; - display: flex; - justify-content: center; - align-items: center; - - li { - padding: 0 15px; - } - - } - - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - background-color: mc($color,'50'); - color: mc($color,'500'); - } - } - -} diff --git a/client/scss/components/form.scss b/client/scss/components/form.scss deleted file mode 100644 index 87df9b1d..00000000 --- a/client/scss/components/form.scss +++ /dev/null @@ -1,256 +0,0 @@ - -.control { - - & + .control { - margin-top: 15px; - } - - // =============================================================== - // TEXTBOX - // =============================================================== - - input[type=text], input[type=password] { - background-color: #FFF; - display: flex; - height: 30px; - align-items: center; - padding: 0 12px; - border: 1px solid mc('grey', '400'); - border-radius: 3px; - font-family: $core-font-standard; - font-size: 14px; - color: mc('grey', '700'); - transition: all .4s ease; - box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); - - &:focus { - outline: none; - border-color: mc('light-blue', '500'); - box-shadow: inset 0 0 5px 0 rgba(mc('light-blue', '500'), 0.3); - } - - &:disabled { - background-color: mc('grey', '100'); - } - - &.is-dirty.is-invalid { - border-color: mc('red', '500'); - box-shadow: inset 0 0 5px 0 mc('red', '100'); - } - - @include placeholder { - color: mc('grey', '400'); - } - - } - - &.is-fullwidth { - - input[type=text], input[type=password], select, textarea { - width: 100%; - } - - } - - textarea { - background-color: #FFF; - display: flex; - padding: 6px 12px; - border: 1px solid mc('grey', '400'); - border-radius: 3px; - font-family: $core-font-standard; - font-size: 14px; - color: mc('grey', '700'); - transition: all .4s ease; - box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); - min-height: 100px; - - &:focus { - outline: none; - border-color: mc('light-blue', '500'); - box-shadow: inset 0 0 5px 0 rgba(mc('light-blue', '500'), 0.3); - } - - &:disabled { - background-color: mc('grey', '100'); - } - - &.is-dirty.is-invalid { - border-color: mc('red', '500'); - box-shadow: inset 0 0 5px 0 mc('red', '100'); - } - - } - - // =============================================================== - // DROPDOWN - // =============================================================== - - select { - background-color: #FFF; - display: flex; - height: 30px; - align-items: center; - padding: 0 12px; - border: 1px solid mc('grey', '400'); - border-radius: 3px; - font-family: $core-font-standard; - font-size: 14px; - color: mc('grey', '700'); - transition: all .4s ease; - box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); - cursor: pointer; - - &:focus { - outline: none; - border-color: mc('light-blue', '500'); - box-shadow: inset 0 0 5px 0 rgba(mc('light-blue', '500'), 0.3); - } - - &:disabled { - background-color: mc('grey', '100'); - } - - } - - // =============================================================== - // CHECKBOX / RADIO BUTTONS - // =============================================================== - - input[type=radio], input[type=checkbox] { - position: absolute; - left: -9999px; - opacity: 0; - - & + label { - position: relative; - padding: 0 15px 0 25px; - cursor: pointer; - display: inline-block; - height: 25px; - line-height: 25px; - font-size: 14px; - transition: .28s ease; - @include prefix('user-select', none); - - &:before, &:after { - content: ''; - position: absolute; - left: 0; - top: 0; - margin: 4px; - border: 2px solid mc($primary, '600'); - margin: 4px; - width: 16px; - height: 16px; - border-radius: 50%; - z-index: 0; - transition: .28s ease; - } - - } - - &:checked + label { - - &:before, &:after { - border-color: mc($primary, '600'); - } - - &:after { - @include prefix('transform', scale(0.5)); - background-color: mc($primary, '600'); - } - - } - - } - - input[type=checkbox] + label { - &:before, &:after { - border-radius: 3px; - } - } - - .help { - font-size: 12px; - - &.is-red { - color: mc('red','600'); - } - - } - - & + label { - margin-top: 20px; - } - - > i:first-child { - margin-right: 8px; - } - -} - -.label { - margin-bottom: 5px; - font-size: 14px; - font-weight: 500; - display: block; - - strong { - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - color: mc($color, '600'); - } - } - } - -} - -.form-sections { - - section { - border-top: 1px solid mc('grey', '200'); - padding: 20px; - @include prefix(animation-duration, .6s); - - &:first-child { - border-top: none; - } - - .button + .button { - margin-left: 10px; - } - - .desc { - display: inline-block; - padding: 10px 0 0 0px; - font-size: 12px; - color: mc('grey', '500'); - } - - .section-block { - padding-left: 20px; - font-size: 14px; - color: mc('blue-grey', '800'); - - h6 { - font-size: 14px; - font-weight: 500; - color: mc('blue-grey', '600'); - margin-top: 15px; - border-bottom: 1px dotted mc('blue-grey', '200'); - } - - p { - padding: 5px 0; - - &.is-small { - font-size: 13px; - } - - } - } - - } - -} diff --git a/client/scss/components/grid.scss b/client/scss/components/grid.scss deleted file mode 100644 index 01830648..00000000 --- a/client/scss/components/grid.scss +++ /dev/null @@ -1,501 +0,0 @@ -.column { - flex-basis: 0; - flex-grow: 1; - flex-shrink: 1; - padding: 10px; - - .columns.is-mobile > &.is-narrow { - flex: none; - } - - .columns.is-mobile > &.is-full { - flex: none; - width: 100%; - } - - .columns.is-mobile > &.is-three-quarters { - flex: none; - width: 75%; - } - - .columns.is-mobile > &.is-two-thirds { - flex: none; - width: 66.6666%; - } - - .columns.is-mobile > &.is-half { - flex: none; - width: 50%; - } - - .columns.is-mobile > &.is-one-third { - flex: none; - width: 33.3333%; - } - - .columns.is-mobile > &.is-one-quarter { - flex: none; - width: 25%; - } - - .columns.is-mobile > &.is-offset-three-quarters { - margin-left: 75%; - } - - .columns.is-mobile > &.is-offset-two-thirds { - margin-left: 66.6666%; - } - - .columns.is-mobile > &.is-offset-half { - margin-left: 50%; - } - - .columns.is-mobile > &.is-offset-one-third { - margin-left: 33.3333%; - } - - .columns.is-mobile > &.is-offset-one-quarter { - margin-left: 25%; - } - - @for $i from 1 through 12 { - .columns.is-mobile > &.is-#{$i} { - flex: none; - width: $i / 12 * 100%; - } - - .columns.is-mobile > &.is-offset-#{$i} { - margin-left: $i / 12 * 100%; - } - } - - @include mobile { - &.is-narrow-mobile { - flex: none; - } - - &.is-full-mobile { - flex: none; - width: 100%; - } - - &.is-three-quarters-mobile { - flex: none; - width: 75%; - } - - &.is-two-thirds-mobile { - flex: none; - width: 66.6666%; - } - - &.is-half-mobile { - flex: none; - width: 50%; - } - - &.is-one-third-mobile { - flex: none; - width: 33.3333%; - } - - &.is-one-quarter-mobile { - flex: none; - width: 25%; - } - - &.is-offset-three-quarters-mobile { - margin-left: 75%; - } - - &.is-offset-two-thirds-mobile { - margin-left: 66.6666%; - } - - &.is-offset-half-mobile { - margin-left: 50%; - } - - &.is-offset-one-third-mobile { - margin-left: 33.3333%; - } - - &.is-offset-one-quarter-mobile { - margin-left: 25%; - } - - @for $i from 1 through 12 { - &.is-#{$i}-mobile { - flex: none; - width: $i / 12 * 100%; - } - - &.is-offset-#{$i}-mobile { - margin-left: $i / 12 * 100%; - } - } - } - - - @include tablet { - &.is-narrow, - &.is-narrow-tablet { - flex: none; - } - - &.is-full, - &.is-full-tablet { - flex: none; - width: 100%; - } - - &.is-three-quarters, - &.is-three-quarters-tablet { - flex: none; - width: 75%; - } - - &.is-two-thirds, - &.is-two-thirds-tablet { - flex: none; - width: 66.6666%; - } - - &.is-half, - &.is-half-tablet { - flex: none; - width: 50%; - } - - &.is-one-third, - &.is-one-third-tablet { - flex: none; - width: 33.3333%; - } - - &.is-one-quarter, - &.is-one-quarter-tablet { - flex: none; - width: 25%; - } - - &.is-offset-three-quarters, - &.is-offset-three-quarters-tablet { - margin-left: 75%; - } - - &.is-offset-two-thirds, - &.is-offset-two-thirds-tablet { - margin-left: 66.6666%; - } - - &.is-offset-half, - &.is-offset-half-tablet { - margin-left: 50%; - } - - &.is-offset-one-third, - &.is-offset-one-third-tablet { - margin-left: 33.3333%; - } - - &.is-offset-one-quarter, - &.is-offset-one-quarter-tablet { - margin-left: 25%; - } - - @for $i from 1 through 12 { - &.is-#{$i}, - &.is-#{$i}-tablet { - flex: none; - width: $i / 12 * 100%; - } - - &.is-offset-#{$i}, - &.is-offset-#{$i}-tablet { - margin-left: $i / 12 * 100%; - } - } - } - - - @include desktop { - &.is-narrow-desktop { - flex: none; - } - - &.is-full-desktop { - flex: none; - width: 100%; - } - - &.is-three-quarters-desktop { - flex: none; - width: 75%; - } - - &.is-two-thirds-desktop { - flex: none; - width: 66.6666%; - } - - &.is-half-desktop { - flex: none; - width: 50%; - } - - &.is-one-third-desktop { - flex: none; - width: 33.3333%; - } - - &.is-one-quarter-desktop { - flex: none; - width: 25%; - } - - &.is-offset-three-quarters-desktop { - margin-left: 75%; - } - - &.is-offset-two-thirds-desktop { - margin-left: 66.6666%; - } - - &.is-offset-half-desktop { - margin-left: 50%; - } - - &.is-offset-one-third-desktop { - margin-left: 33.3333%; - } - - &.is-offset-one-quarter-desktop { - margin-left: 25%; - } - - @for $i from 1 through 12 { - &.is-#{$i}-desktop { - flex: none; - width: $i / 12 * 100%; - } - - &.is-offset-#{$i}-desktop { - margin-left: $i / 12 * 100%; - } - } - } - - - @include widescreen { - &.is-narrow-widescreen { - flex: none; - } - - &.is-full-widescreen { - flex: none; - width: 100%; - } - - &.is-three-quarters-widescreen { - flex: none; - width: 75%; - } - - &.is-two-thirds-widescreen { - flex: none; - width: 66.6666%; - } - - &.is-half-widescreen { - flex: none; - width: 50%; - } - - &.is-one-third-widescreen { - flex: none; - width: 33.3333%; - } - - &.is-one-quarter-widescreen { - flex: none; - width: 25%; - } - - &.is-offset-three-quarters-widescreen { - margin-left: 75%; - } - - &.is-offset-two-thirds-widescreen { - margin-left: 66.6666%; - } - - &.is-offset-half-widescreen { - margin-left: 50%; - } - - &.is-offset-one-third-widescreen { - margin-left: 33.3333%; - } - - &.is-offset-one-quarter-widescreen { - margin-left: 25%; - } - - @for $i from 1 through 12 { - &.is-#{$i}-widescreen { - flex: none; - width: $i / 12 * 100%; - } - - &.is-offset-#{$i}-widescreen { - margin-left: $i / 12 * 100%; - } - } - } -} - -.columns { - margin-left: -10px; - margin-right: -10px; - margin-top: -10px; - - &:last-child { - margin-bottom: -10px; - } - - &:not(:last-child) { - margin-bottom: 10px; - } - - // Modifiers - &.is-centered { - justify-content: center; - } - - &.is-gapless { - margin-left: 0; - margin-right: 0; - margin-top: 0; - - &:last-child { - margin-bottom: 0; - } - - &:not(:last-child) { - margin-bottom: 20px; - } - - & > .column { - margin: 0; - padding: 0; - } - } - - &.is-stretched { - flex-grow: 1; - align-items: stretch; - align-self: stretch; - } - - &.is-grid { - // Responsiveness - @include tablet { - flex-wrap: wrap; - - & > .column { - max-width: 33.3333%; - padding: 10px; - width: 33.3333%; - - & + .column { - margin-left: 0; - } - } - } - } - - &.is-mobile { - display: flex; - } - - &.is-multiline { - flex-wrap: wrap; - } - - &.is-vcentered { - align-items: center; - } - - // Responsiveness - @include tablet { - &:not(.is-desktop) { - display: flex; - } - } - - - @include desktop { - // Modifiers - &.is-desktop { - display: flex; - } - } -} - -.tile { - align-items: stretch; - flex-basis: auto; - flex-grow: 1; - flex-shrink: 1; - min-height: min-content; - - // Modifiers - &.is-ancestor { - margin-left: -10px; - margin-right: -10px; - margin-top: -10px; - - &:last-child { - margin-bottom: -10px; - } - - &:not(:last-child) { - margin-bottom: 10px; - } - } - - &.is-child { - margin: 0 !important; - } - - &.is-parent { - padding: 10px; - } - - &.is-vertical { - flex-direction: column; - - & > .tile.is-child:not(:last-child) { - margin-bottom: 20px !important; - } - } - - // Responsiveness - @include tablet { - &:not(.is-child) { - display: flex; - } - - @for $i from 1 through 12 { - &.is-#{$i} { - flex: none; - width: $i / 12 * 100%; - } - } - } -} - -.column.is-white { - background-color: #FFF; -} diff --git a/client/scss/components/hero.scss b/client/scss/components/hero.scss deleted file mode 100644 index 21d92fb6..00000000 --- a/client/scss/components/hero.scss +++ /dev/null @@ -1,93 +0,0 @@ -.hero { - padding: 20px; - background-color: mc('grey', '50'); - border-bottom: 1px solid mc('grey', '200'); - position: relative; - - h1 { - font-size: 28px; - color: mc($primary, '500'); - font-weight: 300; - } - - h2 { - font-size: 18px; - color: mc('grey', '500'); - font-weight: 400; - } - - .pageicon { - position:absolute; - right: 20px; - top: 28px; - font-size: 48px; - color: mc('blue-grey', '500'); - } - - .hero-menu { - position: absolute; - right: 20px; - bottom: -1px; - z-index: 1; - display: flex; - - li { - display: flex; - margin-left: 1px; - - a, button { - background-color: mc('light-blue', '500'); - color: #FFF; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 15px; - height: 32px; - border: 1px solid mc('light-blue', '600'); - font-family: $core-font-standard; - font-size: 13px; - transition: all 0.4s ease; - cursor: pointer; - text-decoration: none; - text-transform: uppercase; - - i { - margin-right: 10px; - } - - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - background-color: mc($color, '600'); - border-color: mc($color, '600'); - - &:hover { - background-color: mc($color, '800'); - } - - } - } - - } - - } - - } - -} - -/* THEME OVERRIDE - START */ - -@each $color, $colorvalue in $material-colors { - .is-primary-#{$color} .hero { - h1 { - color: mc($color, '500'); - } - } - .is-alternate-#{$color} .hero { - .pageicon { - color: mc($color, '500'); - } - } -} - -/* THEME OVERRIDE - END */ diff --git a/client/scss/components/history.scss b/client/scss/components/history.scss deleted file mode 100644 index 39d91852..00000000 --- a/client/scss/components/history.scss +++ /dev/null @@ -1,59 +0,0 @@ -.history { - - &-title { - border-top: 1px solid mc('blue-grey', '900'); - padding: 8px; - color: mc('blue-grey', '800'); - font-size: 13px; - letter-spacing: 1px; - text-transform: uppercase; - background-color: mc('blue-grey', '100'); - text-align: center; - box-shadow: 0 0 5px rgba(0,0,0,0.3); - } - - &-info { - background-color: mc('blue-grey', '50'); - padding: 5px 10px; - - &-meta { - i { - margin-right: 8px; - } - - p { - padding: 5px 0; - font-size: 14px; - color: mc('blue-grey', '800'); - display: flex; - align-items: center; - } - } - - &-actions { - display: flex; - flex-basis: initial; - flex-grow: initial; - flex-direction: column; - align-items: center; - justify-content: center; - - .button-group { - margin-bottom: 10px; - } - } - - } - - &-diff { - position: relative; - - .d2h-wrapper { - position: absolute; - left: 0; - right: 0; - } - - } - -} diff --git a/client/scss/components/list.scss b/client/scss/components/list.scss deleted file mode 100644 index 47a72ad2..00000000 --- a/client/scss/components/list.scss +++ /dev/null @@ -1,62 +0,0 @@ -.list { - background-color: #FFF; - min-height: 25px; - - .list-header { - background-color: mc('grey','100'); - height: 30px; - display: flex; - align-items: center; - padding: 0 20px; - text-transform: uppercase; - font-size: 13px; - color: mc($primary,'500'); - text-shadow: 1px 1px 0 #FFF; - - span { - font-weight: 500; - } - - i { - margin-right: 10px; - } - - } - - .list-row { - border-top: 1px solid mc('grey','100'); - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 20px; - - &:first-child { - border-top: none; - } - - } - - .list-item { - display: flex; - justify-content: flex-start; - align-items: center; - } - - .list-icon { - margin-right: 15px; - color: mc('grey','500'); - } - .list-content { - display: flex; - flex-direction: column; - - strong { - color: mc('grey','700'); - } - span { - color: mc('grey','600'); - } - - } - -} \ No newline at end of file diff --git a/client/scss/components/markdown-content.scss b/client/scss/components/markdown-content.scss deleted file mode 100644 index 1de8538c..00000000 --- a/client/scss/components/markdown-content.scss +++ /dev/null @@ -1,429 +0,0 @@ -.has-mkcontent { - width:100%; - overflow:hidden; - - .columns, .column { - width: 100%; - overflow: hidden; - } - -} - -.mkcontent { - font-size: 14px; - color: mc('grey', '700'); - padding: 0 0 20px 0; - width: 100%; - overflow: hidden; - - h1, h2, h3 { - font-weight: 400; - margin: 10px 0 0; - padding: 7px 20px; - font-weight: 500; - } - - h1 { - background-color: mc('blue-grey', '50'); - background: linear-gradient(to bottom, mc('blue-grey', '50'), mc('indigo', '50')); - border-bottom: 2px solid mc('indigo', '100'); - font-size: 18px; - color: mc('indigo', '500'); - - &:first-child { - margin-top: 1px; - } - - /*& + h2 { - margin-top: 1px; - border-top: none; - }*/ - - & + p { - padding-top: 20px; - } - - } - - h2 { - background-color: lighten(mc('teal', '50'), 5%); - background: linear-gradient(to bottom, lighten(mc('teal', '50'), 5%), mc('teal', '50')); - border: 1px solid mc('teal', '100'); - border-right-width: 5px; - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - font-size: 16px; - color: mc('teal', '900'); - margin-left: 20px; - } - - .indent-h2 { - border-right: 5px solid mc('teal', '100'); - margin-left: 20px; - padding-top: 1px; - padding-bottom: 20px; - overflow: hidden; - - & + h1, & + h2 { - margin-top: 1px; - } - - &:last-child { - padding-bottom: 5px; - } - - h3:first-child { - margin-top: 0; - border-top: none; - } - - } - - h3 { - background-color: lighten(mc('blue', '50'), 3%); - background: linear-gradient(to bottom, lighten(mc('blue', '50'), 3%), mc('blue', '50')); - border: 1px solid mc('blue', '100'); - border-right-width: 5px; - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - font-size: 14px; - color: mc('blue', '700'); - margin-left: 20px; - margin-right: 1px; - padding: 5px 20px; - } - - .indent-h3 { - border-right: 5px solid mc('teal', '100'); - margin-left: 20px; - margin-right: 1px; - padding-bottom: 10px; - - & + h1, & + h2, & + h3 { - margin-top: 1px; - } - - &:last-child { - padding-bottom: 0; - } - - } - - a { - text-decoration: underline; - font-weight: 400; - - &:hover { - color: mc('blue', '700'); - } - - &.toc-anchor { - font-size: 80%; - color: mc('indigo', '300'); - border-bottom: none; - text-decoration: none; - - &:visited { - color: mc('indigo', '300') !important; - } - - } - - &.external-link { - position: relative; - padding-left: 5px; - //display: inline-flex; - //align-items: center; - - &:before { - content: '\ee70'; - display: inline-block; - font-family: 'Nucleo Outline'; - font-style: normal; - font-weight: normal; - text-decoration: none; - color: mc('grey', '500'); - font-size: 14px; - margin-right: 5px; - } - - &:hover:before { - text-decoration: none; - } - - } - - } - - ul { - padding: 10px 0 10px 40px; - list-style-type: square; - - li { - padding: 1px 0; - - > ul { - padding: 5px 0 5px 15px; - list-style-type: disc; - } - - p { - padding: 0; - - &:first-child { - padding: 0; - } - - } - - } - - } - - ol { - padding: 10px 40px; - list-style-type: decimal; - - li { - padding: 1px 0; - } - - } - - p { - padding: 10px 20px; - - &:first-child { - padding-top: 20px; - } - - &.is-gapless { - padding: 0 20px; - - & + p { - padding-top: 20px; - } - - & + h1 { - margin-top: 1px; - } - - } - - } - - table { - width: auto; - border-collapse: collapse; - margin: 10px 20px; - font-size: 14px; - - th { - background-color: mc('blue', '500'); - color: #FFF; - border: 1px solid mc('blue', '500'); - padding: 5px 15px; - - &:first-child { - border-left-color: mc('blue', '500'); - } - - &:last-child { - border-right-color: mc('blue', '500'); - } - - } - - td { - border: 1px solid mc('grey', '500'); - padding: 5px 15px; - } - - tr:nth-child(even) { - background-color: mc('grey', '100'); - } - - } - - code { - font-weight: 500; - color: mc('purple', '500'); - background-color: lighten(mc('purple', '50'), 5%); - padding: 0 5px; - border-radius: 4px; - } - - pre { - background-color: mc('blue-grey', '900'); - border-left: 7px solid mc('indigo', '500'); - padding: 20px 20px 20px 13px; - font-family: $core-font-monospace; - white-space: pre; - overflow-x: auto; - - > code { - border-radius: 5px; - font-weight: 400; - background-color: transparent; - color: mc('blue-grey', '100'); - padding: 0; - font-family: $core-font-monospace; - font-size: 13px; - } - - & + p { - padding-top: 1em; - } - - & + h1, & + h2, & + h3 { - margin-top: 1px; - } - - } - - &.is-code-dark { - pre, pre.hljs { - background-color: mc('blue-grey', '900'); - border-left-color: mc('blue-grey', '500'); - - > code { - color: mc('blue-grey', '100'); - } - } - } - - &.is-code-light { - @import 'node_modules/highlight.js/styles/atom-one-light'; - pre, pre.hljs { - background-color: lighten(mc('blue-grey', '50'), 3%); - border-left: 7px solid mc('blue-grey', '100'); - border-top: 1px solid mc('blue-grey', '100'); - border-bottom: 1px solid mc('blue-grey', '100'); - - > code { - color: mc('blue-grey', '800'); - } - } - } - - &.is-code-dark, &.is-code-light { - pre, pre.hljs { - padding: 20px 20px 20px 13px; - font-family: $core-font-monospace; - white-space: pre; - overflow-x: auto; - - > code { - border-radius: 5px; - font-weight: 400; - background-color: transparent; - padding: 0; - font-family: $core-font-monospace; - font-size: 13px; - } - - & + p { - padding-top: 1em; - } - - & + h1, & + h2, & + h3 { - margin-top: 1px; - } - - } - } - - .align-right { - float:right; - margin: 0 0 10px 10px; - max-width: 30vw; - } - .align-center { - text-align: center; - } - - img.pagelogo { - position: absolute; - right: 20px; - top: 20px; - max-width: 200px; - max-height: 100px; - z-index: 3; - } - - strong { - color: mc('grey', '700'); - } - - .twa { - font-size: 120%; - } - - hr { - margin: 20px; - border-top: 1px dotted mc('grey', '500'); - } - - blockquote { - background-color: mc('teal', '50'); - background: linear-gradient(to bottom right, lighten(mc('teal', '50'), 5%), mc('teal', '50')); - border: 1px solid mc('teal', '100'); - border-left-width: 7px; - box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1); - border-radius: 5px; - padding: 0 10px; - margin: 10px 20px; - - p { - padding: 10px 0; - color: mc('teal', '800'); - - &:first-child { - padding: 10px 0; - } - - strong { - color: inherit; - } - - } - - &.is-danger { - background-color: mc('red', '100'); - background: linear-gradient(to bottom right, lighten(mc('red', '50'), 5%), mc('red', '50')); - border-color: mc('red', '200'); - p { - color: mc('red', '900'); - } - } - - &.is-warning { - background-color: mc('amber', '50'); - background: linear-gradient(to bottom right, lighten(mc('amber', '50'), 5%), mc('amber', '50')); - border-color: mc('amber', '200'); - p { - color: darken(mc('amber', '900'), 10%); - } - } - - &.is-success { - background-color: mc('green', '50'); - background: linear-gradient(to bottom right, lighten(mc('green', '50'), 5%), mc('green', '50')); - border-color: mc('green', '200'); - p { - color: darken(mc('green', '900'), 10%); - } - } - - &.is-info { - background-color: mc('blue', '50'); - background: linear-gradient(to bottom right, lighten(mc('blue', '50'), 5%), mc('blue', '50')); - border-color: mc('blue', '200'); - p { - color: darken(mc('blue', '900'), 10%); - } - } - - } - -} diff --git a/client/scss/components/modal.scss b/client/scss/components/modal.scss deleted file mode 100644 index 16e84c16..00000000 --- a/client/scss/components/modal.scss +++ /dev/null @@ -1,365 +0,0 @@ -.modal { - align-items: flex-start; - display: block; - - &.is-superimposed { - .modal-background { - z-index: 20; - } - .modal-container { - z-index: 21; - } - } - -} -.modal-background { - top: 0; - left: 0; - width: 100vw; - height: 100vh; - position: fixed; - background-color: rgba(0,0,0,0.85); - z-index: 10; - - &-enter-active { - animation: .4s ease fadeIn; - } - &-leave-active { - animation: .4s ease fadeOut; - } - -} -.modal-container { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 11; - display: flex; - justify-content: center; - align-items: center; -} -.modal-content { - width: 600px; - background-color: #FFF; - - &-enter-active { - animation: .3s ease zoomIn; - } - &-leave-active { - animation: .3s ease zoomOut; - } - - &.is-expanded { - align-self: stretch; - width: 100%; - margin: 20px; - display: flex; - flex-direction: column; - - > section { - flex-grow: 1; - } - - } - - header { - background-color: mc('teal', '600'); - color: #FFF; - display: flex; - flex-shrink: 0; - height: 40px; - align-items: center; - font-weight: 400; - font-size: 16px; - padding: 0 20px; - position: relative; - - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - background-color: mc($color, '600'); - } - } - - .modal-notify { - position: absolute; - display: none; - align-items: center; - height: 40px; - right: 20px; - top: 0; - - &.is-active { - display: flex; - } - - span { - font-size: 12px; - letter-spacing: 1px; - text-transform: uppercase; - } - - i { - margin-left: 15px; - display: inline-block; - @include spinner(#FFF, .5s, 20px); - } - - } - - } - - section { - padding: 20px; - border-top: 1px dotted mc('grey', '300'); - - &:first-of-type { - border-top: none; - padding-top: 20px; - } - &:last-of-type { - padding-bottom: 20px; - } - - &.is-gapless { - padding: 10px; - display: flex; - } - - &.modal-loading { - display: flex; - flex-direction: column; - align-items: center; - - > i { - display: block; - @include spinner(mc('blue','500'), .4s, 32px); - margin-bottom: 10px; - } - - > span { - color: mc('grey', '600'); - } - - > em { - font-size: 12px; - color: mc('grey', '500'); - font-style: normal; - } - - } - - &.modal-instructions { - display: flex; - flex-direction: column; - align-items: center; - color: mc('grey', '800'); - - img { - height: 100px; - - & + * { - margin-top: 10px; - } - - } - - i.is-huge { - font-size: 72px; - margin-bottom: 10px; - } - - > span { - color: mc('grey', '800'); - } - - > em { - font-size: 12px; - color: mc('grey', '600'); - font-style: normal; - margin-top: 10px; - display: block; - } - - } - - .bullets { - list-style-type: square; - padding: 5px 0 0 30px; - font-size: 14px; - color: mc('grey', '800'); - } - - .note { - display: block; - margin-top: 10px; - font-size: 14px; - color: mc('grey', '800'); - - &:first-child { - margin-top: 0; - } - - ul { - color: mc('grey', '800'); - padding-left: 10px; - - li { - margin-top: 5px; - display: flex; - align-items: center; - - > i { - margin-right: 8px; - font-size: 18px; - } - - } - } - - } - - } - - footer { - padding: 20px; - text-align: right; - - .button { - margin-left: 10px; - } - - } - -} - -.modal-toolbar { - background-color: mc('teal', '700'); - padding: 7px 20px; - display: flex; - flex-shrink: 0; - justify-content: center; - - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - background-color: mc($color, '700'); - - .button { - border-color: mc($color, '900'); - background-color: mc($color, '900'); - - &:hover { - border-color: mc($color, '900'); - background-color: mc($color, '800'); - } - - } - - } - } - - // BUTTONS - - .button { - border: 1px solid mc('teal', '900'); - background-color: mc('teal', '900'); - transition: all .4s ease; - color: #FFF; - border-radius: 0; - - &:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - - &:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - - &:hover { - border-color: mc('teal', '900'); - background-color: mc('teal', '800'); - color: #FFF; - } - - } - - .button + .button { - margin-left: 1px; - } - -} - -.modal-sidebar { - - background-color: mc('teal', '50'); - padding: 0; - //padding: 7px 20px; - - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - background-color: mc($color, '50'); - - .model-sidebar-header { - background-color: mc($color, '100'); - color: mc($color, '800'); - } - - .model-sidebar-list > li a { - &:hover { - background-color: mc($color, '200'); - } - &.is-active { - background-color: mc($color, '500'); - } - } - - } - } - - .model-sidebar-header { - padding: 7px 20px; - } - - .model-sidebar-content { - padding: 7px 20px; - } - - .model-sidebar-list { - - > li { - padding: 0; - - a { - display: flex; - align-items: center; - height: 34px; - padding: 0 20px; - cursor: pointer; - color: mc('grey', '800'); - - &:hover { - background-color: mc('teal', '200'); - } - - &.is-active { - color: #FFF; - } - - i { - margin-right: 7px; - } - - } - - } - - } - -} - -.modal-content .card-footer-item.featured { - animation: flash 4s ease 0 infinite; -} diff --git a/client/scss/components/nav.scss b/client/scss/components/nav.scss deleted file mode 100644 index 0590ec37..00000000 --- a/client/scss/components/nav.scss +++ /dev/null @@ -1,211 +0,0 @@ - -.nav { - align-items: stretch; - background-color: mc($primary, '500'); - display: flex; - min-height: 50px; - position: relative; - text-align: center; - box-shadow: 0 2px 3px rgba(mc($primary, '500'), 0.2); - z-index: 2; - color: #FFF; - transition: background-color 1s ease; - - /* THEME OVERRIDE - START */ - - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - background-color: mc($color, '500'); - box-shadow: 0 2px 3px rgba(mc($color, '500'), 0.2); - - .nav-item a, a.nav-item { - color: mc($color, '50'); - - &:hover { - color: mc($color, '200'); - } - - } - - h1:hover { - color: mc($color, '100'); - } - - .nav-item { - - .button { - background-color: mc($color, '800'); - - &.is-outlined { - background-color: mc($color, '600'); - color: mc($color, '100'); - } - - &:hover { - background-color: mc($color, '900'); - } - - } - - } - - .control { - - input[type=text] { - background-color: mc($color, '800'); - border-color: mc($color, '400'); - color: mc($color, '50'); - - &:focus { - border-color: mc($color, '200'); - box-shadow: inset 0 0 5px 0 rgba(mc($color, '900'), 0.5); - } - - @include placeholder { - color: mc($color, '200'); - } - - } - - } - - } - } - - /* THEME OVERRIDE - END */ - -} - -.nav-left { - align-items: stretch; - display: flex; - flex-basis: 0; - flex-grow: 1; - justify-content: flex-start; - overflow: hidden; - overflow-x: auto; - white-space: nowrap; -} - -.nav-center { - align-items: stretch; - display: flex; - justify-content: center; - margin-left: auto; - margin-right: auto; -} - -.nav-right { - @include tablet { - align-items: stretch; - display: flex; - flex-basis: 0; - flex-grow: 1; - justify-content: flex-end; - } - - .nav-item { - align-items: stretch; - padding: 0 0 0 10px; - } -} - -.nav-item { - align-items: center; - display: flex; - justify-content: center; - padding: 0 10px; - - // LINKS - - @at-root .nav-item a, a.nav-item { - color: mc($primary, '50'); - transition: color .4s ease; - cursor: pointer; - - &:hover { - color: mc($primary, '200'); - text-decoration: none; - } - - } - - // LOGO - - img { - max-height: 34px; - } - - // HEADERS - - h1 { - font-size: 16px; - font-weight: 400; - letter-spacing: 0.5px; - text-transform: uppercase; - transition: color .4s ease; - color: #FFF; - padding-left: 10px; - - i { - margin-right: 8px; - } - - &:hover { - color: mc($primary, '100'); - } - } - - @at-root h2.nav-item, .nav-item h2 { - color: mc($primary, '50'); - } - - // BUTTONS - - .button { - border: none; - background-color: mc($primary, '600'); - transition: all .4s ease; - color: #FFF; - border-radius: 0; - height: auto; - - &.is-outlined { - background-color: mc($primary, '500'); - color: mc($primary, '100'); - } - - &.is-icon-only i { - margin-right: 0; - } - - &:hover { - background-color: mc($primary, '700'); - color: #FFF; - } - - } - - // INPUTS - - .control { - - input[type=text] { - background-color: mc($primary, '800'); - border-color: mc($primary, '400'); - color: mc($primary, '50'); - - &:focus { - border-color: mc($primary, '200'); - box-shadow: inset 0 0 5px 0 rgba(mc($primary, '900'), 0.5); - } - - @include placeholder { - color: mc($primary, '200'); - } - - } - - } - -} diff --git a/client/scss/components/search.scss b/client/scss/components/search.scss deleted file mode 100644 index fe30714e..00000000 --- a/client/scss/components/search.scss +++ /dev/null @@ -1,66 +0,0 @@ -.searchresults { - position: fixed; - top: 50px; - left: 0; - right: 0; - margin: 0 auto; - width: 500px; - z-index: 1; - background-color: darken(mc('blue-grey', '900'), 2%); - border: 1px solid mc('blue-grey', '900'); - box-shadow: 0 0 5px mc('blue-grey', '500'); - color: #FFF; - transition: max-height 1s ease; - - &-enter-active, &-leave-active { - overflow: hidden; - } - &-enter-to, &-leave { - max-height: 500px; - } - &-enter, &-leave-to { - max-height: 0px; - } - - .searchresults-label { - background-color: mc('blue-grey', '800'); - color: mc('blue-grey', '300'); - padding: 8px; - font-size: 13px; - letter-spacing: 1px; - text-transform: uppercase; - box-shadow: 0 0 5px rgba(0,0,0,0.3); - } - - .searchresults-list { - padding-bottom: 5px; - - > li { - display: flex; - font-size: 14px; - transition: background-color .2s linear; - - &:nth-child(odd) { - background-color: mc('blue-grey', '900'); - } - - &.is-active, &:hover { - background-color: mc('blue-grey', '600'); - color: #FFF; - } - - a { - color: mc('blue-grey', '50'); - display: flex; - align-items: center; - height: 30px; - padding: 0 20px; - width: 100%; - cursor: pointer; - } - - } - - } - -} diff --git a/client/scss/components/sidebar.scss b/client/scss/components/sidebar.scss deleted file mode 100644 index b6305e94..00000000 --- a/client/scss/components/sidebar.scss +++ /dev/null @@ -1,191 +0,0 @@ - -.sidebar { - background-color: mc('blue-grey', '900'); - color: mc('blue-grey', '50'); - width: 250px; - max-width: 250px; - min-height: calc(100vh - 120px); - transition: background-color 1s ease; - - aside { - padding: 1px 0 15px 0; - - &:last-child { - padding-bottom: 20px; - } - - .sidebar-label { - padding: 8px; - color: mc('blue-grey', '300'); - font-size: 13px; - letter-spacing: 1px; - text-transform: uppercase; - background-color: mc('blue-grey', '800'); - margin: 0 0 15px 0; - text-align: center; - box-shadow: 0 0 5px rgba(0,0,0,0.3); - transition: background-color 1s ease; - - i { - margin-right: 5px; - } - - } - - .sidebar-menu { - - li { - display: block; - - a { - display: flex; - min-height: 30px; - align-items: center; - padding: 5px 20px; - color: mc('blue-grey', '50'); - font-size: 14px; - transition: all .4s ease; - line-height: 14px; - cursor: pointer; - - &.is-multiline { - flex-wrap: wrap; - } - - &.is-active { - border-left: 5px solid mc('blue', '500'); - color: mc('blue', '300'); - padding-left: 15px; - - .is-small { - color: mc('blue', '500'); - } - - } - - i { - margin-right: 7px; - color: mc('blue-grey', '300'); - } - - &:hover { - color: mc('blue-grey', '400'); - text-decoration: none; - } - - .is-small { - flex: 1 0 100%; - display: block; - font-size: 11px; - color: rgba(255,255,255,.5) - } - - } - - > ul { - border-top: 1px solid lighten(mc('blue-grey', '900'), 3%); - border-bottom: 1px solid lighten(mc('blue-grey', '900'), 2%); - background-color: darken(mc('blue-grey', '900'), 2%); - margin-bottom: 10px; - padding: 10px 0; - - li { - padding-left: 10px; - //border-left: 5px solid mc('blue-grey', '800'); - - a { - min-height: 24px; - color: mc('blue-grey', '100'); - } - - } - - } - - } - - } - - } - - &.is-collapsed { - width: 50px; - - aside { - .sidebar-menu li a { - padding: 10px 0; - justify-content: center; - - i { - margin: 0; - font-size: 20px; - transition: color .6s ease; - } - - span { - display: none; - } - - &:hover { - i { - color: #FFF; - } - } - } - - } - - } - -} - -/* THEME OVERRIDE - START */ - -@each $color, $colorvalue in $material-colors { - .is-alternate-#{$color} .sidebar { - background-color: mc($color, '900'); - color: mc($color, '50'); - - aside { - .sidebar-label { - color: mc($color, '300'); - background-color: mc($color, '800'); - } - .sidebar-menu { - li { - a { - color: mc($color, '50'); - - &.is-active { - border-left-color: mc($color, '500'); - color: mc($color, '300'); - - .is-small { - color: mc($color, '500'); - } - } - - &:hover { - color: mc($color, '400'); - } - - i { - color: mc($color, '300'); - } - } - > ul { - border-top-color: lighten(mc($color, '900'), 3%); - border-bottom-color: lighten(mc($color, '900'), 2%); - background-color: darken(mc($color, '900'), 2%); - - li a { - color: mc($color, '100'); - } - } - } - } - } - } -} - -/* THEME OVERRIDE - END */ diff --git a/client/scss/components/table.scss b/client/scss/components/table.scss deleted file mode 100644 index 0a444dde..00000000 --- a/client/scss/components/table.scss +++ /dev/null @@ -1,90 +0,0 @@ -.table { - border-spacing: collapse; - padding: 1px; - width: 100%; - font-size: 14px; - - thead { - background-color: mc('blue-grey', '500'); - color: #FFF; - - th { - padding: 5px 10px; - font-weight: 500; - text-align: center; - border-left: 1px solid mc('blue-grey', '200'); - - &:first-child { - border-left: none; - } - - } - - @each $color, $colorvalue in $material-colors { - &.is-#{$color} { - background-color: mc($color, '500'); - - th { - border-left-color: mc($color, '200'); - } - - } - } - - } - - tbody { - - tr { - background-color: mc('blue-grey', '100'); - - &:nth-child(odd) { - background-color: mc('blue-grey', '50'); - } - - td { - padding: 5px 10px; - border-left: 1px solid #FFF; - vertical-align: middle; - - &:first-child { - border-left: none; - } - - } - - } - - } - - .is-centered { - text-align: center; - } - - .has-icons i { - margin-right: 8px; - } - - .is-icon { - font-size: 14px; - width: 20px; - } - - .has-action-icons { - i { - cursor: pointer; - font-size: 20px; - } - } - -} - -.table-actions { - text-align: right; - - .button { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - -} diff --git a/client/scss/global.scss b/client/scss/global.scss index 29f9da89..761f4149 100644 --- a/client/scss/global.scss +++ b/client/scss/global.scss @@ -6,6 +6,4 @@ $primary: 'indigo'; @import "base/material"; @import "base/reset"; @import "base/mixins"; -@import "base/fonts"; -@import "base/icons"; -@import "base/base"; \ No newline at end of file +@import "base/base"; diff --git a/client/scss/layout/_header.scss b/client/scss/layout/_header.scss deleted file mode 100644 index 0a014dd5..00000000 --- a/client/scss/layout/_header.scss +++ /dev/null @@ -1,36 +0,0 @@ - -#header-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 4; -} - -#header { - z-index: 5; -} - -#notifload { - width: 42px; - display: flex; - justify-content: center; - align-items: center; - opacity: 0; - transition: opacity .5s ease; - - &::before { - content: " "; - @include spinner(mc('indigo', '100'),0.5s,24px); - } - - &.is-active { - opacity: 1; - } - -} - -#search-input { - max-width: 300px; - width: 33vw; -} diff --git a/client/scss/layout/_loader.scss b/client/scss/layout/_loader.scss deleted file mode 100644 index d8204c39..00000000 --- a/client/scss/layout/_loader.scss +++ /dev/null @@ -1,50 +0,0 @@ -.page-loader { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: mc('blue-grey', '800'); - z-index: 100; - display: flex; - justify-content: center; - align-items: center; - color: mc('blue-grey', '100'); - font-weight: 300; - font-size: 18px; - flex-direction: column; - - > i { - width: 48px; - height: 48px; - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 25px; - - &::before { - content: " "; - @include spinner(mc('blue-grey', '200'), 0.4s, 48px); - } - } - - &-leave-active { - animation: pageLoaderExit 1s ease forwards; - } - - @include keyframes(pageLoaderExit) { - 0% { - opacity: 1; - } - 99% { - display: flex; - opacity: 0; - transform: scale(1.1, 1.1); - } - 100% { - opacity: 0; - display: none; - } - } - -} diff --git a/client/scss/pages/_account.scss b/client/scss/pages/_account.scss deleted file mode 100644 index 208fd461..00000000 --- a/client/scss/pages/_account.scss +++ /dev/null @@ -1,17 +0,0 @@ -.account-profile-provider { - height: 32px; - display: flex; - align-items: center; - - .fa { - margin-right: 10px; - } - - .is-blue { - color: $blue; - } - .is-purple { - color: $purple; - } - -} \ No newline at end of file diff --git a/client/scss/pages/_error.scss b/client/scss/pages/_error.scss deleted file mode 100644 index 5aa02851..00000000 --- a/client/scss/pages/_error.scss +++ /dev/null @@ -1,52 +0,0 @@ - -body { - display: flex; - align-items: center; - min-height: 100vh; - width: 100vw; - padding: 25px 0; - margin: 0; - color: #FFF; - - &.is-notexist { - background-color: mc('blue-grey', '900'); - } - - &.is-forbidden { - background-color: darken(mc('blue-grey', '900'), 5%); - } - - &.is-error { - background-color: darken(mc('blue-grey', '900'), 10%); - } - -} - -.container { - text-align: center; - - h1 { - margin-top: 30px; - } - - h2 { - margin-bottom: 50px; - } - - a.button { - margin: 0 5px; - } - - h3 { - text-align: left; - margin-top: 50px; - } - - pre { - margin-top: 10px; - text-align: left; - color: mc('blue-grey', '200'); - font-size: 12px; - } - -} diff --git a/client/scss/pages/_welcome.scss b/client/scss/pages/_welcome.scss index c63e4c26..ddbb6232 100644 --- a/client/scss/pages/_welcome.scss +++ b/client/scss/pages/_welcome.scss @@ -16,10 +16,21 @@ top: 0; left: 0; background-image: url('../static/svg/login-bg-motif.svg'); + background-position: center center; background-repeat: repeat; background-size: 500px; z-index: 0; opacity: .75; + animation: onboardingBgReveal 50s linear infinite; + + @include keyframes(onboardingBgReveal) { + 0% { + background-position-y: 0; + } + 100% { + background-position-y: -2000px; + } + } } img { diff --git a/client/svg/icons.svg b/client/svg/icons.svg index 9559bb12..9b764366 100644 --- a/client/svg/icons.svg +++ b/client/svg/icons.svg @@ -1,4 +1,4 @@ - @@ -448,4 +448,33 @@ - \ No newline at end of file + + + + + + + bold + + + + italic + + + + Strikethrough + + + + Link + + + + list-ol + + + + list-ul + + + diff --git a/package.json b/package.json index 0f41793a..bc8586ed 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,6 @@ "semver": "5.5.0", "sequelize": "4.32.2", "serve-favicon": "2.4.5", - "simplemde": "1.11.2", "uuid": "3.2.1", "validator": "9.3.0", "validator-as-promised": "1.0.2", @@ -190,6 +189,7 @@ "vee-validate": "2.0.3", "vue": "2.5.13", "vue-clipboards": "1.2.1", + "vue-codemirror": "4.0.3", "vue-hot-reload-api": "2.2.4", "vue-loader": "13.7.0", "vue-simple-breakpoints": "1.0.3", diff --git a/server/controllers/common.js b/server/controllers/common.js index 17cb037f..47c2965b 100644 --- a/server/controllers/common.js +++ b/server/controllers/common.js @@ -1,6 +1,13 @@ const express = require('express') const router = express.Router() +/** + * Create/Edit document + */ +router.get('/e/*', (req, res, next) => { + res.render('main/editor') +}) + /** * View document */ diff --git a/server/views/main/all.pug b/server/views/main/all.pug deleted file mode 100644 index a460414f..00000000 --- a/server/views/main/all.pug +++ /dev/null @@ -1,24 +0,0 @@ -extends ../layout.pug - -block content - .container.is-fluid.has-collapsable-nav - .sidebar.is-collapsed - aside - .sidebar-label - span= t('sidebar.nav') - ul.sidebar-menu - li - a(href='/') - i.nc-icon-outline.ui-1_home-minimal - span= t('nav.root') - if !isGuest - li - a(href='/admin') - i.nc-icon-outline.ui-1_settings-gear-63 - span= t('nav.account') - else - li - a(href='/login') - i.nc-icon-outline.arrows-1_log-in - span= t('nav.login') - tree diff --git a/server/views/main/create.pug b/server/views/main/create.pug deleted file mode 100644 index d0383277..00000000 --- a/server/views/main/create.pug +++ /dev/null @@ -1,25 +0,0 @@ -extends ../layout.pug - -block rootNavCenter - h2.nav-item= t('header.createdoc') - -block rootNavRight - loading-spinner - span.nav-item - a.button.is-outlined(v-on:click='$store.dispatch("modalDiscardPage/open")') - i.nc-icon-outline.ui-1_simple-remove - span= t('nav.discard') - a.button(v-on:click='$root.$emit("editor/save")') - i.nc-icon-outline.ui-1_check - span= t('nav.savedocument') - -block content - editor(inline-template, current-path=pageData.meta.path, v-cloak) - .editor-area - textarea(ref='editorTextArea', v-pre)= pageData.markdown - - editor-file - editor-video - editor-codeblock - modal-discard-page(mode='create', current-path=pageData.meta.path) - page-loader(text=t('loading.editor')) diff --git a/server/views/main/edit.pug b/server/views/main/edit.pug deleted file mode 100644 index f9de8fad..00000000 --- a/server/views/main/edit.pug +++ /dev/null @@ -1,29 +0,0 @@ -extends ../layout.pug - -block rootNavCenter - h2.nav-item= pageData.meta.title - -block rootNavRight - loading-spinner - span.nav-item - a.button.is-outlined(v-on:click='$store.dispatch("modalDiscardPage/open")') - i.nc-icon-outline.ui-1_simple-remove - span= t('nav.discard') - a.button(v-on:click='$root.$emit("editor/save")') - i.nc-icon-outline.ui-1_check - span= t('nav.savechanges') - -block content - editor(inline-template, current-path=pageData.meta.path, v-cloak) - .columns.is-gapless - .column.editor-area - textarea(ref='editorTextArea', v-pre)= pageData.markdown - //- .column.editor-sd - .editor-sd-item Images - .editor-sd-item Files - - editor-file - editor-video - editor-codeblock - modal-discard-page(mode='edit', current-path=pageData.meta.path) - page-loader(text=t('loading.editor')) diff --git a/server/views/main/editor.pug b/server/views/main/editor.pug new file mode 100644 index 00000000..5370755f --- /dev/null +++ b/server/views/main/editor.pug @@ -0,0 +1,6 @@ +extends ../master.pug + +block body + body + #app + editor diff --git a/server/views/main/history.pug b/server/views/main/history.pug deleted file mode 100644 index 5d921fde..00000000 --- a/server/views/main/history.pug +++ /dev/null @@ -1,11 +0,0 @@ -extends ../layout.pug - -block rootNavRight - i.nav-item#notifload - .nav-item - a.button(href='/' + pageData.meta._id) - i.nc-icon-outline.ui-3_select - span= t('nav.viewlatest') - -block content - history(current-path=pageData.meta._id, history-data=JSON.stringify(pageData.history)) diff --git a/server/views/main/setup.pug b/server/views/main/setup.pug deleted file mode 100644 index 8cedecf6..00000000 --- a/server/views/main/setup.pug +++ /dev/null @@ -1,5 +0,0 @@ -extends ../master.pug - -block body - body - #app.setup: setup(telemetry-id=telemetryClientID, wiki-version=packageObj.version, :langs!=JSON.stringify(data.langs).replace(/"/g, "'")) diff --git a/server/views/main/source.pug b/server/views/main/source.pug deleted file mode 100644 index 80b688cb..00000000 --- a/server/views/main/source.pug +++ /dev/null @@ -1,32 +0,0 @@ -extends ../layout.pug - -block rootNavCenter - h2.nav-item= pageData.meta.title - -block rootNavRight - loading-spinner - span.nav-item - if rights.write && pageData.meta.path !== 'home' - a.button.is-outlined(v-on:click='$store.dispatch("modalMovePage/open")') - i.nc-icon-outline.arrows-1_shuffle-98 - span= t('nav.move') - a.button.is-outlined(href='/' + pageData.meta.path) - i.nc-icon-outline.ui-2_book - span= t('nav.normalview') - if rights.write - a.button.is-orange(href='/edit/' + pageData.meta.path) - i.nc-icon-outline.ui-1_edit-76 - span= t('nav.edit') - a.button(v-on:click='$store.dispatch("modalCreatePage/open")') - i.nc-icon-outline.ui-1_simple-add - span= t('nav.create') - -block content - - source-view(inline-template, entrypath=pageData.meta.path, v-cloak) - .ace-container - #source-display(v-pre)= pageData.markdown - - modal-create-page(basepath=pageData.meta.path) - modal-move-page(current-path=pageData.meta.path) - page-loader(text=t('loading.source')) diff --git a/server/views/main/view.pug b/server/views/main/view.pug deleted file mode 100644 index 76462c38..00000000 --- a/server/views/main/view.pug +++ /dev/null @@ -1,89 +0,0 @@ -extends ../layout.pug - -mixin tocMenu(ti) - each node in ti - li - a(href='#' + node.anchor, title=node.content)= node.content - if node.nodes.length > 0 - ul - +tocMenu(node.nodes) - -block rootNavRight - loading-spinner - .nav-item - if rights.write && pageData.meta.path !== 'home' - a.button.is-outlined.is-icon-only(@click='$store.dispatch("modalDeletePage/open")') - i.nc-icon-outline.ui-1_trash - a.button.is-outlined(v-on:click='$store.dispatch("modalMovePage/open")') - i.nc-icon-outline.arrows-1_shuffle-98 - span= t('nav.move') - if appconfig.theme.viewSource === 'all' || (rights.write && appconfig.theme.viewSource === 'write') - a.button.is-outlined(href='/source/' + pageData.meta.path) - i.nc-icon-outline.education_paper - span= t('nav.source') - //-a.button.is-outlined(href='/hist/' + pageData.meta.path) - i.nc-icon-outline.ui-2_time - span= t('nav.history') - if rights.write - a.button(href='/edit/' + pageData.meta.path) - i.nc-icon-outline.ui-1_edit-76 - span= t('nav.edit') - a.button(v-on:click='$store.dispatch("modalCreatePage/open")') - i.nc-icon-outline.ui-1_simple-add - span= t('nav.create') - -block content - - content-view(inline-template) - .container.is-fluid.has-mkcontent - .columns.is-gapless - - .column.is-narrow.is-hidden-touch.sidebar - - aside - .sidebar-label - span= t('sidebar.navigation') - ul.sidebar-menu - li - a(href='/') - i.nc-icon-outline.ui-1_home-minimal - span= t('nav.root') - li - a(href='/all') - i.nc-icon-outline.business_hierarchy-55 - span= t('nav.allpages') - if pageData.parent - li - a(href='/' + pageData.parent.path) - i.icon-reply - span= pageData.parent.title - if !isGuest - li - a(href='/admin') - i.nc-icon-outline.ui-1_settings-gear-63 - span= t('nav.settings') - else - li - a(href='/login') - i.nc-icon-outline.arrows-1_log-in - span= t('nav.login') - aside.sidebar-pagecontents - .sidebar-label - span= t('sidebar.pagecontents') - ul.sidebar-menu - li.is-hidden-until-scroll: a(href='#root', title='Top of Page') - i.icon-arrow-up2 - +tocMenu(pageData.tree) - - .column - .hero - h1.title#title= pageData.meta.title - if pageData.meta.subtitle - h2.subtitle= pageData.meta.subtitle - .content.mkcontent(v-pre, class=[appconfig.theme.code.dark ? 'is-code-dark' : 'is-code-light']) - != pageData.html - - modal-create-page(basepath=pageData.meta.path) - modal-move-page(current-path=pageData.meta.path) - modal-delete-page(current-path=pageData.meta.path) - anchor diff --git a/server/views/main/welcome.pug b/server/views/main/welcome.pug index b6fffa00..d81d1466 100644 --- a/server/views/main/welcome.pug +++ b/server/views/main/welcome.pug @@ -7,4 +7,4 @@ block body img(src='/svg/logo-wikijs.svg', alt='Wiki.js') h1= t('welcome.title') h2= t('welcome.subtitle') - a.button.is-blue(href='/create/home')= t('welcome.createhome') + a.button.is-blue(href='/e/home')= t('welcome.createhome') diff --git a/yarn.lock b/yarn.lock index ad70d711..8b8436ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2270,15 +2270,9 @@ code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" -codemirror-spell-checker@*: - version "1.1.2" - resolved "https://registry.yarnpkg.com/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz#1c660f9089483ccb5113b9ba9ca19c3f4993371e" - dependencies: - typo-js "*" - -codemirror@*: - version "5.27.4" - resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.27.4.tgz#0e817c839bfea9959dd16cd48ae14acc0e43c3b6" +codemirror@^5.32.0: + version "5.34.0" + resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.34.0.tgz#e345dcc09a6149db65cc70dff9d389c1c4b0cd06" collection-visit@^1.0.0: version "1.0.0" @@ -3091,6 +3085,10 @@ dicer@0.2.5, dicer@^0.2.5: readable-stream "1.1.x" streamsearch "0.1.2" +diff-match-patch@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.0.tgz#1cc3c83a490d67f95d91e39f6ad1f2e086b63048" + diff2html@2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/diff2html/-/diff2html-2.3.3.tgz#31bb815881c975634c7f3907a5e789341e1560bc" @@ -6277,10 +6275,6 @@ markdown-it@8.4.0: mdurl "^1.0.1" uc.micro "^1.0.3" -marked@*: - version "0.3.6" - resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7" - math-expression-evaluator@^1.2.14: version "1.2.17" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac" @@ -9236,14 +9230,6 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" -simplemde@1.11.2: - version "1.11.2" - resolved "https://registry.yarnpkg.com/simplemde/-/simplemde-1.11.2.tgz#a23a35d978d2c40ef07dec008c92f070d8e080e3" - dependencies: - codemirror "*" - codemirror-spell-checker "*" - marked "*" - slash@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55" @@ -9873,10 +9859,6 @@ typical@^2.6.0, typical@^2.6.1: version "2.6.1" resolved "https://registry.yarnpkg.com/typical/-/typical-2.6.1.tgz#5c080e5d661cbbe38259d2e70a3c7253e873881d" -typo-js@*: - version "1.0.3" - resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.0.3.tgz#54d8ebc7949f1a7810908b6002c6841526c99d5a" - uc.micro@^1.0.1, uc.micro@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192" @@ -10174,6 +10156,13 @@ vue-clipboards@1.2.1: dependencies: clipboard "^1.7.1" +vue-codemirror@4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/vue-codemirror/-/vue-codemirror-4.0.3.tgz#83721031e1f606f428136a3dfd9fc710ffdec149" + dependencies: + codemirror "^5.32.0" + diff-match-patch "^1.0.0" + vue-eslint-parser@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.2.tgz#8d603545e9d7c134699075bd1772af1ffd86b744"