From ecfc2ca7d6d19d3af91487942a24c810fb882657 Mon Sep 17 00:00:00 2001 From: Samuel Elliott Date: Wed, 24 Jan 2018 20:34:13 +0000 Subject: [PATCH] Tidied SCSS files Organised SCSS files for the client, moved all styles still in a Vue file to an SCSS file and moved styles for the CSS editor to their own files. JsSucks/BetterDiscordApp#41 --- .../src/modules/ui/components/BdSettings.vue | 15 - .../modules/ui/components/bd/PluginsView.vue | 54 +- client/src/styles/partials/bdsettings.scss | 128 --- .../styles/partials/bdsettings/button.scss | 48 + .../src/styles/partials/bdsettings/index.scss | 4 + .../partials/{ => bdsettings}/plugincard.scss | 0 .../styles/partials/bdsettings/plugins.scss | 48 + .../partials/bdsettings/sidebarview.scss | 65 ++ client/src/styles/partials/generic.scss | 244 ----- .../src/styles/partials/generic/buttons.scss | 24 + client/src/styles/partials/generic/forms.scss | 53 + client/src/styles/partials/generic/index.scss | 6 + .../partials/generic/material-buttons.scss | 17 + .../styles/partials/generic/scrollable.scss | 51 + .../styles/partials/generic/spinners/0.scss | 131 +++ .../styles/partials/generic/spinners/1.scss | 8 + .../styles/partials/generic/spinners/10.scss | 66 ++ .../styles/partials/generic/spinners/2.scss | 8 + .../styles/partials/generic/spinners/3.scss | 105 ++ .../styles/partials/generic/spinners/4.scss | 59 ++ .../styles/partials/generic/spinners/5.scss | 101 ++ .../styles/partials/generic/spinners/6.scss | 186 ++++ .../styles/partials/generic/spinners/7.scss | 135 +++ .../styles/partials/generic/spinners/8.scss | 67 ++ .../styles/partials/generic/spinners/9.scss | 51 + .../partials/generic/spinners/index.scss | 11 + .../src/styles/partials/generic/switches.scss | 108 ++ client/src/styles/partials/index.scss | 13 +- client/src/styles/partials/sidebarview.scss | 155 --- .../styles/partials/sidebarview/content.scss | 56 ++ .../styles/partials/sidebarview/index.scss | 3 + .../src/styles/partials/sidebarview/main.scss | 47 + .../styles/partials/sidebarview/sidebar.scss | 50 + client/src/styles/partials/spinners.scss | 942 ------------------ .../partials/{ => variables}/colours.scss | 2 +- .../partials/{ => variables}/images.scss | 3 +- .../src/styles/partials/variables/index.scss | 2 + csseditor/src/Editor.vue | 313 +----- csseditor/src/index.js | 10 +- csseditor/src/styles/codemirror.scss | 105 ++ csseditor/src/styles/editor.scss | 17 + csseditor/src/styles/images.scss | 1 + csseditor/src/styles/index.scss | 13 + csseditor/src/styles/main.scss | 36 + csseditor/src/styles/spinner.scss | 14 + csseditor/src/styles/titlebar.scss | 72 ++ csseditor/src/styles/tools.scss | 51 + 47 files changed, 1840 insertions(+), 1858 deletions(-) delete mode 100644 client/src/styles/partials/bdsettings.scss create mode 100644 client/src/styles/partials/bdsettings/button.scss create mode 100644 client/src/styles/partials/bdsettings/index.scss rename client/src/styles/partials/{ => bdsettings}/plugincard.scss (100%) create mode 100644 client/src/styles/partials/bdsettings/plugins.scss create mode 100644 client/src/styles/partials/bdsettings/sidebarview.scss delete mode 100644 client/src/styles/partials/generic.scss create mode 100644 client/src/styles/partials/generic/buttons.scss create mode 100644 client/src/styles/partials/generic/forms.scss create mode 100644 client/src/styles/partials/generic/index.scss create mode 100644 client/src/styles/partials/generic/material-buttons.scss create mode 100644 client/src/styles/partials/generic/scrollable.scss create mode 100644 client/src/styles/partials/generic/spinners/0.scss create mode 100644 client/src/styles/partials/generic/spinners/1.scss create mode 100644 client/src/styles/partials/generic/spinners/10.scss create mode 100644 client/src/styles/partials/generic/spinners/2.scss create mode 100644 client/src/styles/partials/generic/spinners/3.scss create mode 100644 client/src/styles/partials/generic/spinners/4.scss create mode 100644 client/src/styles/partials/generic/spinners/5.scss create mode 100644 client/src/styles/partials/generic/spinners/6.scss create mode 100644 client/src/styles/partials/generic/spinners/7.scss create mode 100644 client/src/styles/partials/generic/spinners/8.scss create mode 100644 client/src/styles/partials/generic/spinners/9.scss create mode 100644 client/src/styles/partials/generic/spinners/index.scss create mode 100644 client/src/styles/partials/generic/switches.scss delete mode 100644 client/src/styles/partials/sidebarview.scss create mode 100644 client/src/styles/partials/sidebarview/content.scss create mode 100644 client/src/styles/partials/sidebarview/index.scss create mode 100644 client/src/styles/partials/sidebarview/main.scss create mode 100644 client/src/styles/partials/sidebarview/sidebar.scss delete mode 100644 client/src/styles/partials/spinners.scss rename client/src/styles/partials/{ => variables}/colours.scss (76%) rename client/src/styles/partials/{ => variables}/images.scss (99%) create mode 100644 client/src/styles/partials/variables/index.scss create mode 100644 csseditor/src/styles/codemirror.scss create mode 100644 csseditor/src/styles/editor.scss create mode 100644 csseditor/src/styles/images.scss create mode 100644 csseditor/src/styles/index.scss create mode 100644 csseditor/src/styles/main.scss create mode 100644 csseditor/src/styles/spinner.scss create mode 100644 csseditor/src/styles/titlebar.scss create mode 100644 csseditor/src/styles/tools.scss diff --git a/client/src/modules/ui/components/BdSettings.vue b/client/src/modules/ui/components/BdSettings.vue index 9f5367a6..83532d78 100644 --- a/client/src/modules/ui/components/BdSettings.vue +++ b/client/src/modules/ui/components/BdSettings.vue @@ -94,18 +94,3 @@ } } - - \ No newline at end of file diff --git a/client/src/modules/ui/components/bd/PluginsView.vue b/client/src/modules/ui/components/bd/PluginsView.vue index 87658df5..db9f937d 100644 --- a/client/src/modules/ui/components/bd/PluginsView.vue +++ b/client/src/modules/ui/components/bd/PluginsView.vue @@ -15,7 +15,7 @@ try { await PluginManager.refreshPlugins(); } catch (err) { - + } } @@ -56,55 +56,3 @@ } } - - \ No newline at end of file diff --git a/client/src/styles/partials/bdsettings.scss b/client/src/styles/partials/bdsettings.scss deleted file mode 100644 index 085f00a5..00000000 --- a/client/src/styles/partials/bdsettings.scss +++ /dev/null @@ -1,128 +0,0 @@ -@import './plugincard.scss'; - -.bd-pluginsView { - .bd-button { - text-align: center; - background: transparent; - h3 { - -webkit-user-select: none; - user-select: none; - display: block; - font-size: 1.17em; - margin-top: 1em; - margin-bottom: 1em; - margin-left: 0; - margin-right: 0; - font-weight: bold; - } - - &:hover, - &.bd-active { - color: #fff; - background: transparent; - border-bottom: 2px solid #3e82e5; - } - } -} - -.bd-settings-button { - position: absolute; - z-index: 1; - top: 22px; - width: 70px; - height: 48px; - left: 0; - background: #202225; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06); - opacity: 1; - - .bd-settings-button-btn { - background-image: $logoSmallBw; - background-size: 50% 50%; - background-repeat: no-repeat; - background-position: center; - width: 100%; - height: 100%; - z-index: 3000; - cursor: pointer; - filter: grayscale(100%); - opacity: 0.5; - transition: all 0.4s ease-in-out; - - &:hover { - filter: none; - opacity: 1; - } - } - - &.active { - background: transparent; - opacity: 1; - box-shadow: none; - z-index: 90000; - - .bd-settings-button-btn { - background-image: $logoBigBw; - filter: none; - opacity: 1; - width: 130px; - height: 80px; - background-size: 100% 100%; - margin-left: 20px; - cursor: default; - } - } -} - -.bd-settings { - position: absolute; - top: 22px; - left: 0; - bottom: 0; - z-index: 3000; - width: 310px; - transform: translateX(-100%) translateY(-100%); - opacity: 0; - transition: all .4s ease-in-out; - - &.active { - width: 900px; - transform: none; - opacity: 1; - } - - .bd-settings-x { - position: absolute; - top: 15px; - left: 250px; - border: 2px solid #6e6e6e; - border-radius: 50%; - width: 25px; - height: 25px; - justify-content: center; - display: flex; - align-items: center; - cursor: pointer; - - span { - color: #72767d; - position: absolute; - top: 32px; - font-weight: 600; - font-size: 13px; - } - - &:hover { - background-color: hsla(218,5%,47%,.3); - } - } - - .platform-darwin & { - top: 0px; - - .bd-sidebar-view .bd-sidebar-region, - .bd-sidebar-view .bd-content-region { - padding-top: 22px; - } - } -} \ No newline at end of file diff --git a/client/src/styles/partials/bdsettings/button.scss b/client/src/styles/partials/bdsettings/button.scss new file mode 100644 index 00000000..740772ea --- /dev/null +++ b/client/src/styles/partials/bdsettings/button.scss @@ -0,0 +1,48 @@ +.bd-settings-button { + position: absolute; + z-index: 1; + top: 22px; + width: 70px; + height: 48px; + left: 0; + background: #202225; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06); + opacity: 1; + + .bd-settings-button-btn { + background-image: $logoSmallBw; + background-size: 50% 50%; + background-repeat: no-repeat; + background-position: center; + width: 100%; + height: 100%; + z-index: 3000; + cursor: pointer; + filter: grayscale(100%); + opacity: 0.5; + transition: all 0.4s ease-in-out; + + &:hover { + filter: none; + opacity: 1; + } + } + + &.active { + background: transparent; + opacity: 1; + box-shadow: none; + z-index: 90000; + + .bd-settings-button-btn { + background-image: $logoBigBw; + filter: none; + opacity: 1; + width: 130px; + height: 80px; + background-size: 100% 100%; + margin-left: 20px; + cursor: default; + } + } +} diff --git a/client/src/styles/partials/bdsettings/index.scss b/client/src/styles/partials/bdsettings/index.scss new file mode 100644 index 00000000..836a858b --- /dev/null +++ b/client/src/styles/partials/bdsettings/index.scss @@ -0,0 +1,4 @@ +@import './button.scss'; +@import './sidebarview.scss'; +@import './plugins.scss'; +@import './plugincard.scss'; diff --git a/client/src/styles/partials/plugincard.scss b/client/src/styles/partials/bdsettings/plugincard.scss similarity index 100% rename from client/src/styles/partials/plugincard.scss rename to client/src/styles/partials/bdsettings/plugincard.scss diff --git a/client/src/styles/partials/bdsettings/plugins.scss b/client/src/styles/partials/bdsettings/plugins.scss new file mode 100644 index 00000000..0b722a97 --- /dev/null +++ b/client/src/styles/partials/bdsettings/plugins.scss @@ -0,0 +1,48 @@ +.bd-pluginsView { + .bd-button { + text-align: center; + background: transparent; + display: flex; + border-bottom: 2px solid #2b2d31; + align-items: center; + + h3 { + -webkit-user-select: none; + user-select: none; + display: block; + font-size: 1.17em; + margin-top: 1em; + margin-bottom: 1em; + margin-left: 0; + margin-right: 0; + font-weight: bold; + flex-grow: 1; + } + + .material-design-icon { + display: flex; + align-items: center; + fill: #fff; + } + + &:hover, + &.bd-active { + color: #fff; + background: transparent; + border-bottom: 2px solid #3e82e5; + } + } + + .bd-spinner-container { + display: flex; + flex-grow: 1; + align-items: center; + align-content: center; + justify-content: center; + + .bd-spinner-2 { + width: 200px; + height: 200px; + } + } +} diff --git a/client/src/styles/partials/bdsettings/sidebarview.scss b/client/src/styles/partials/bdsettings/sidebarview.scss new file mode 100644 index 00000000..1b616e28 --- /dev/null +++ b/client/src/styles/partials/bdsettings/sidebarview.scss @@ -0,0 +1,65 @@ +.bd-settings { + position: absolute; + top: 22px; + left: 0; + bottom: 0; + z-index: 3000; + width: 310px; + transform: translateX(-100%) translateY(-100%); + opacity: 0; + transition: all .4s ease-in-out; + + &.active { + width: 900px; + transform: none; + opacity: 1; + } + + .bd-settings-x { + position: absolute; + top: 15px; + left: 250px; + border: 2px solid #6e6e6e; + border-radius: 50%; + width: 25px; + height: 25px; + justify-content: center; + display: flex; + align-items: center; + cursor: pointer; + + span { + color: #72767d; + position: absolute; + top: 32px; + font-weight: 600; + font-size: 13px; + } + + &:hover { + background-color: hsla(218,5%,47%,.3); + } + } + + .bd-info { + display: flex; + flex-grow: 1; + align-items: flex-end; + overflow: hidden; + + span { + color: #414245; + font-weight: 700; + font-size: 12px; + } + } + + .platform-darwin & { + top: 0px; + + .bd-sidebar-view .bd-sidebar-region, + .bd-sidebar-view .bd-content-region { + padding-top: 22px; + } + } +} diff --git a/client/src/styles/partials/generic.scss b/client/src/styles/partials/generic.scss deleted file mode 100644 index 011331cf..00000000 --- a/client/src/styles/partials/generic.scss +++ /dev/null @@ -1,244 +0,0 @@ -.bd-scroller-wrap { - display: flex; - width: 100%; - - .bd-scroller { - display: flex; - flex-grow: 1; - flex-direction: column; - overflow-y: auto; - overflow-x: hidden; - - &::-webkit-scrollbar { - width: 14px; - } - - &::-webkit-scrollbar-thumb { - background-color: #1e2124; - border-color: #36393e; - border-color: transparent; - } - - &::-webkit-scrollbar-thumb, - &::-webkit-scrollbar-track-piece { - background-clip: padding-box; - border-width: 3px; - border-style: solid; - border-radius: 7px; - border-color: transparent; - } - - &::-webkit-scrollbar-track-piece { - background-color: #2f3136; - border-color: #36393e; - border-color: transparent; - } - } - - &.bd-dark { - .bd-scroller { - &::-webkit-scrollbar-thumb { - background-color: #36393e; - border-color: transparent; - } - - &::-webkit-scrollbar-track-piece { - background-color: #2b2e31; - border-color: transparent; - } - } - } -} - -.bd-content-region, -.bd-content-region .bd-content-column { - backface-visibility: hidden; -} - -.bd-button { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - color: #FFF; - text-align: center; - user-select: none; - font-weight: 500; - background: $colbdblue; - - &:not(.bd-disabled):hover { - background: darken($colbdblue, 5%); - } - - &.bd-disabled { - filter: grayscale(90%); - cursor: not-allowed; - } - - .bd-spinner-7 { - opacity: .3; - } -} - -.bd-form-item h5 { - color: #b9bbbe; - text-transform: uppercase; - font-weight: 600; - font-size: 12px; -} - -.bd-form-divider { - height: 1px; - margin-top: 8px; - margin-bottom: 40px; - background: hsla(218,5%,47%,.3); -} - -.bd-form-warning { - display: flex; - margin-top: 20px; - background: #d84040; - border: 1px solid #B30B0B; - opacity: .8; - border-radius: 4px; - padding: 10px; -} - -.bd-form-warning .bd-text { - display: flex; - color: #FFF; - font-weight: 700; - align-items: center; - flex-grow: 1; -} - -.bd-form-warning .bd-form-button { - margin: 0; - align-self: flex-end; - background: #C42929; - - &:hover { - background: darken(#C42929, 2%); - } -} - -.bd-form-button { - width: 100px; - height: 30px; - line-height: 30px; - text-align: center; - border-radius: 4px; - margin-top: 10px; - cursor: pointer; - font-weight: 500; - user-select: none; -} - -.bd-setting-switch { - display: flex; - flex-direction: column; - flex-wrap: nowrap; - -webkit-box-pack: start; - justify-content: flex-start; - -webkit-box-align: stretch; - align-items: stretch; -} - -.bd-setting-switch .bd-title { - display: flex; - justify-content: flex-start; - -webkit-box-align: stretch; - align-items: stretch; - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - flex-direction: row; - box-sizing: border-box; -} - -.bd-setting-switch .bd-switch-wrapper { - flex: 0 0 auto; - user-select: none; - position: relative; - width: 44px; - height: 24px; - display: block; -} - -.bd-switch-wrapper input { - position: absolute; - opacity: 0; - cursor: pointer; - width: 100%; - height: 100%; - z-index: 1; -} - -.bd-switch-wrapper .bd-switch { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: #72767d; - border-radius: 14px; - transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out; -} - -.bd-setting-switch .bd-title h3 { - font-weight: 500; - color: #f6f6f7; - flex: 1; - line-height: 24px; - margin-bottom: 0; - margin-top: 0; -} - -.bd-setting-switch .bd-hint { - flex: 1 1 auto; - color: #72767d; - font-size: 14px; - font-weight: 500; - margin-bottom: 15px; - line-height: 30px; - border-bottom: 0px solid hsla(218,5%,47%,.1); -} - -.bd-switch-wrapper .bd-switch:before { - content: ""; - display: block; - width: 18px; - height: 18px; - position: absolute; - top: 3px; - left: 3px; - bottom: 3px; - background: #f6f6f7; - border-radius: 10px; - transition: all .15s ease; - box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05); -} - -.bd-switch-wrapper .bd-switch.bd-checked { - background: $colbdblue; -} - -.bd-switch-wrapper .bd-switch.bd-checked:before { - transform: translateX(20px); -} - -.bd-setting-switch + .bd-form-divider { - margin: 0 0 10px 0; -} - -.bd-setting-switch.bd-disabled { - - input { - cursor: not-allowed; - } - .bd-switch:before { - background: #888888; - } -} \ No newline at end of file diff --git a/client/src/styles/partials/generic/buttons.scss b/client/src/styles/partials/generic/buttons.scss new file mode 100644 index 00000000..a10695b9 --- /dev/null +++ b/client/src/styles/partials/generic/buttons.scss @@ -0,0 +1,24 @@ +.bd-button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: #FFF; + text-align: center; + user-select: none; + font-weight: 500; + background: $colbdblue; + + &:not(.bd-disabled):hover { + background: darken($colbdblue, 5%); + } + + &.bd-disabled { + filter: grayscale(90%); + cursor: not-allowed; + } + + .bd-spinner-7 { + opacity: .3; + } +} diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss new file mode 100644 index 00000000..a611c13f --- /dev/null +++ b/client/src/styles/partials/generic/forms.scss @@ -0,0 +1,53 @@ +.bd-form-item h5 { + color: #b9bbbe; + text-transform: uppercase; + font-weight: 600; + font-size: 12px; +} + +.bd-form-divider { + height: 1px; + margin-top: 8px; + margin-bottom: 40px; + background: hsla(218,5%,47%,.3); +} + +.bd-form-warning { + display: flex; + margin-top: 20px; + background: #d84040; + border: 1px solid #B30B0B; + opacity: .8; + border-radius: 4px; + padding: 10px; + + .bd-text { + display: flex; + color: #FFF; + font-weight: 700; + align-items: center; + flex-grow: 1; + } + + .bd-form-button { + margin: 0; + align-self: flex-end; + background: #C42929; + + &:hover { + background: darken(#C42929, 2%); + } + } +} + +.bd-form-button { + width: 100px; + height: 30px; + line-height: 30px; + text-align: center; + border-radius: 4px; + margin-top: 10px; + cursor: pointer; + font-weight: 500; + user-select: none; +} diff --git a/client/src/styles/partials/generic/index.scss b/client/src/styles/partials/generic/index.scss new file mode 100644 index 00000000..a264e17d --- /dev/null +++ b/client/src/styles/partials/generic/index.scss @@ -0,0 +1,6 @@ +@import './switches.scss'; +@import './spinners/index.scss'; +@import './scrollable.scss'; +@import './buttons.scss'; +@import './forms.scss'; +@import './material-buttons.scss'; diff --git a/client/src/styles/partials/generic/material-buttons.scss b/client/src/styles/partials/generic/material-buttons.scss new file mode 100644 index 00000000..abc7dd5a --- /dev/null +++ b/client/src/styles/partials/generic/material-buttons.scss @@ -0,0 +1,17 @@ +.bd-material-button { + border-radius: 3px; + display: flex; + align-items: center; + align-content: center; + justify-content: center; + width: 30px; + height: 30px; + + > span { + display: flex; + } + + &:hover { + background: #2d2f34; + } +} diff --git a/client/src/styles/partials/generic/scrollable.scss b/client/src/styles/partials/generic/scrollable.scss new file mode 100644 index 00000000..e93a426f --- /dev/null +++ b/client/src/styles/partials/generic/scrollable.scss @@ -0,0 +1,51 @@ +.bd-scroller-wrap { + display: flex; + width: 100%; + + .bd-scroller { + display: flex; + flex-grow: 1; + flex-direction: column; + overflow-y: auto; + overflow-x: hidden; + + &::-webkit-scrollbar { + width: 14px; + } + + &::-webkit-scrollbar-thumb { + background-color: #1e2124; + border-color: #36393e; + border-color: transparent; + } + + &::-webkit-scrollbar-thumb, + &::-webkit-scrollbar-track-piece { + background-clip: padding-box; + border-width: 3px; + border-style: solid; + border-radius: 7px; + border-color: transparent; + } + + &::-webkit-scrollbar-track-piece { + background-color: #2f3136; + border-color: #36393e; + border-color: transparent; + } + } + + &.bd-dark { + .bd-scroller { + &::-webkit-scrollbar-thumb { + background-color: #36393e; + border-color: transparent; + } + + &::-webkit-scrollbar-track-piece { + background-color: #2b2e31; + border-color: transparent; + } + } + } +} diff --git a/client/src/styles/partials/generic/spinners/0.scss b/client/src/styles/partials/generic/spinners/0.scss new file mode 100644 index 00000000..478cd98d --- /dev/null +++ b/client/src/styles/partials/generic/spinners/0.scss @@ -0,0 +1,131 @@ +.bd-spinner { + width: 40px; + height: 40px; + position: relative; + -webkit-animation: bd-spinner-anim 2s cubic-bezier(0.4, 0, 0, 1) infinite; + animation: bd-spinner-anim 2s cubic-bezier(0.4, 0, 0, 1) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + + &::before { + content: ""; + background: #fff; + height: 10px; + width: 10px; + position: absolute; + border-radius: 50%; + right: 5px; + top: 15px; + -webkit-animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite; + animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } + + &::after { + content: ""; + background: #fff; + height: 10px; + width: 10px; + position: absolute; + border-radius: 50%; + left: 5px; + top: 15px; + -webkit-animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite; + animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } +} + +@-webkit-keyframes bd-spinner-anim { + from { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes bd-spinner-anim { + from { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@-webkit-keyframes bd-spinner-anim-before { + 0% { + -webkit-transform: translate(-10px, 0); + transform: translate(-10px, 0); + } + + 50% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + + 100% { + -webkit-transform: translate(-10px, 0); + transform: translate(-10px, 0); + } +} + +@keyframes bd-spinner-anim-before { + 0% { + -webkit-transform: translate(-10px, 0); + transform: translate(-10px, 0); + } + + 50% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + + 100% { + -webkit-transform: translate(-10px, 0); + transform: translate(-10px, 0); + } +} + +@-webkit-keyframes bd-spinner-anim-after { + 0% { + -webkit-transform: translate(10px, 0); + transform: translate(10px, 0); + } + + 50% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + + 100% { + -webkit-transform: translate(10px, 0); + transform: translate(10px, 0); + } +} + +@keyframes bd-spinner-anim-after { + 0% { + -webkit-transform: translate(10px, 0); + transform: translate(10px, 0); + } + + 50% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } + + 100% { + -webkit-transform: translate(10px, 0); + transform: translate(10px, 0); + } +} diff --git a/client/src/styles/partials/generic/spinners/1.scss b/client/src/styles/partials/generic/spinners/1.scss new file mode 100644 index 00000000..297a144b --- /dev/null +++ b/client/src/styles/partials/generic/spinners/1.scss @@ -0,0 +1,8 @@ +.bd-spinner-1 { + width: 40px; + height: 40px; + position: relative; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} diff --git a/client/src/styles/partials/generic/spinners/10.scss b/client/src/styles/partials/generic/spinners/10.scss new file mode 100644 index 00000000..cdae4a77 --- /dev/null +++ b/client/src/styles/partials/generic/spinners/10.scss @@ -0,0 +1,66 @@ +.bd-spinner-10 { + width: 40px; + height: 40px; + position: relative; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + animation: bd-spinner-10-anim 1s cubic-bezier(.4,0,0,1) infinite; + + &::before { + content: ""; + left: 0; + top: 0; + width: 40px; + height: 40px; + position: absolute; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite; + } + + &::after { + content: ""; + left: 0; + top: 0; + width: 40px; + height: 40px; + position: absolute; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) infinite; + } +} + +@keyframes bd-spinner-10-anim { + 0% { + transform: scale(0.8) rotate(0.01deg); + } + + 40% { + transform: scale(1.3) rotate(0.01deg); + } + + 80% { + transform: scale(1) rotate(0.01deg); + } + + 100% { + transform: scale(0.8) rotate(0.01deg); + } +} + +@keyframes bd-spinner-10-anim1 { + 0% { + transform: rotate(-25deg) rotate(0.01deg); + } + + 80% { + transform: rotate(375deg) rotate(0.01deg); + } + + 100% { + transform: rotate(335deg) rotate(0.01deg); + } +} diff --git a/client/src/styles/partials/generic/spinners/2.scss b/client/src/styles/partials/generic/spinners/2.scss new file mode 100644 index 00000000..ed19a505 --- /dev/null +++ b/client/src/styles/partials/generic/spinners/2.scss @@ -0,0 +1,8 @@ +.bd-spinner-2 { + width: 40px; + height: 40px; + position: relative; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} diff --git a/client/src/styles/partials/generic/spinners/3.scss b/client/src/styles/partials/generic/spinners/3.scss new file mode 100644 index 00000000..375ee639 --- /dev/null +++ b/client/src/styles/partials/generic/spinners/3.scss @@ -0,0 +1,105 @@ +.bd-spinner-3 { + width: 40px; + height: 40px; + position: relative; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + + &::before { + content: ""; + background: #fff; + height: 30px; + width: 30px; + position: absolute; + border-radius: 50%; + left: 5px; + top: 5px; + -webkit-animation: bd-spinner-3-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite; + animation: bd-spinner-3-anim-before 3s cubic-bezier(0.4, 0, 0, 1) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } + + &::after { + content: ""; + background: #202225; + height: 20px; + width: 20px; + position: absolute; + border-radius: 50%; + left: 10px; + top: 10px; + -webkit-animation: bd-spinner-3-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite; + animation: bd-spinner-3-anim-after 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } +} + +@-webkit-keyframes bd-spinner-3-anim-before { + 0% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } + + 50% { + -webkit-transform: scale(1.2)rotate(0.01deg); + transform: scale(1.2)rotate(0.01deg); + } + + 100% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } +} + +@keyframes bd-spinner-3-anim-before { + 0% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } + + 50% { + -webkit-transform: scale(0.8)rotate(0.01deg); + transform: scale(1.2)rotate(0.01deg); + } + + 100% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } +} + +@-webkit-keyframes bd-spinner-3-anim-after { + 0% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } + + 50% { + -webkit-transform: scale(0.4)rotate(0.01deg); + transform: scale(0.4)rotate(0.01deg); + } + + 100% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } +} + +@keyframes bd-spinner-3-anim-after { + 0% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } + + 50% { + -webkit-transform: scale(0.4)rotate(0.01deg); + transform: scale(0.4)rotate(0.01deg); + } + + 100% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } +} diff --git a/client/src/styles/partials/generic/spinners/4.scss b/client/src/styles/partials/generic/spinners/4.scss new file mode 100644 index 00000000..1a24c74d --- /dev/null +++ b/client/src/styles/partials/generic/spinners/4.scss @@ -0,0 +1,59 @@ +.bd-spinner-4 { + width: 40px; + height: 40px; + position: relative; + -webkit-animation: bd-spinner-4-anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite; + animation: bd-spinner-4-anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + + &::before { + content: ""; + background: #fff; + height: 10px; + width: 10px; + position: absolute; + border-radius: 50%; + left: 5px; + top: 15px; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } + + &::after { + content: ""; + background: #fff; + height: 10px; + width: 10px; + position: absolute; + border-radius: 50%; + right: 5px; + top: 15px; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } +} + +@-webkit-keyframes bd-spinner-4-anim { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + } +} + +@keyframes bd-spinner-4-anim { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + } +} diff --git a/client/src/styles/partials/generic/spinners/5.scss b/client/src/styles/partials/generic/spinners/5.scss new file mode 100644 index 00000000..2b345a16 --- /dev/null +++ b/client/src/styles/partials/generic/spinners/5.scss @@ -0,0 +1,101 @@ +.bd-spinner-5 { + width: 40px; + height: 40px; + position: relative; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + + &::before { + content: ""; + background: #fff; + height: 10px; + width: 10px; + position: absolute; + border-radius: 5px; + left: 5px; + bottom: 10px; + -webkit-animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite; + animation: bd-spinner-5-anim-before 2s cubic-bezier(0.4, 0, 0, 1) -1s infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } + + &::after { + content: ""; + background: #fff; + height: 10px; + width: 10px; + position: absolute; + border-radius: 5px; + left: 5px; + top: 10px; + -webkit-animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite; + animation: bd-spinner-5-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } +} + +@-webkit-keyframes bd-spinner-5-anim-before { + 0% { + left: 0px; + width: 10px; + height: 10px; + } + + 25% { + left: 0px; + width: 30px; + height: 6px; + } + + 50% { + left: 20px; + width: 10px; + height: 10px; + } + + 75% { + left: 0px; + width: 30px; + height: 6px; + } + + 100% { + left: 0px; + width: 10px; + height: 10px; + } +} + +@keyframes bd-spinner-5-anim-before { + 0% { + left: 0px; + width: 10px; + height: 10px; + } + + 25% { + left: 0px; + width: 30px; + height: 6px; + } + + 50% { + left: 20px; + width: 10px; + height: 10px; + } + + 75% { + left: 0px; + width: 30px; + height: 6px; + } + + 100% { + left: 0px; + width: 10px; + height: 10px; + } +} diff --git a/client/src/styles/partials/generic/spinners/6.scss b/client/src/styles/partials/generic/spinners/6.scss new file mode 100644 index 00000000..de9d1c55 --- /dev/null +++ b/client/src/styles/partials/generic/spinners/6.scss @@ -0,0 +1,186 @@ +.bd-spinner-6 { + width: 40px; + height: 40px; + position: relative; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + + &::before { + content: ""; + background: #fff; + height: 10px; + width: 10px; + position: absolute; + right: 5px; + bottom: 5px; + -webkit-animation: bd-spinner-6-anim-before 2s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinner-6-anim-before 2s cubic-bezier(.4, 0, 0, 1) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } + + &::after { + content: ""; + background: #fff; + height: 10px; + width: 10px; + position: absolute; + left: 5px; + top: 5px; + -webkit-animation: bd-spinner-6-anim-after 2s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinner-6-anim-after 2s cubic-bezier(.4, 0, 0, 1) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } +} + +@-webkit-keyframes bd-spinner-6-anim-before { + 0% { + bottom: 10px; + right: 10px; + width: 10px; + height: 10px; + } + + 25% { + bottom: 10px; + right: 10px; + width: 20px; + height: 10px; + } + + 50% { + bottom: 10px; + right: 20px; + width: 10px; + height: 10px; + } + + 75% { + bottom: 10px; + right: 20px; + width: 10px; + height: 20px; + } + + 100% { + bottom: 20px; + right: 20px; + width: 10px; + height: 10px; + } +} + +@keyframes bd-spinner-6-anim-before { + 0% { + bottom: 10px; + right: 10px; + width: 10px; + height: 10px; + } + + 25% { + bottom: 10px; + right: 10px; + width: 20px; + height: 10px; + } + + 50% { + bottom: 10px; + right: 20px; + width: 10px; + height: 10px; + } + + 75% { + bottom: 10px; + right: 20px; + width: 10px; + height: 20px; + } + + 100% { + bottom: 20px; + right: 20px; + width: 10px; + height: 10px; + } +} + +@-webkit-keyframes bd-spinner-6-anim-after { + 0% { + top: 10px; + left: 10px; + width: 10px; + height: 10px; + } + + 25% { + top: 10px; + left: 10px; + width: 20px; + height: 10px; + } + + 50% { + top: 10px; + left: 20px; + width: 10px; + height: 10px; + } + + 75% { + top: 10px; + left: 20px; + width: 10px; + height: 20px; + } + + 100% { + top: 20px; + left: 20px; + width: 10px; + height: 10px; + } +} + +@keyframes bd-spinner-6-anim-after { + 0% { + top: 10px; + left: 10px; + width: 10px; + height: 10px; + } + + 25% { + top: 10px; + left: 10px; + width: 20px; + height: 10px; + } + + 50% { + top: 10px; + left: 20px; + width: 10px; + height: 10px; + } + + 75% { + top: 10px; + left: 20px; + width: 10px; + height: 20px; + } + + 100% { + top: 20px; + left: 20px; + width: 10px; + height: 10px; + } +} diff --git a/client/src/styles/partials/generic/spinners/7.scss b/client/src/styles/partials/generic/spinners/7.scss new file mode 100644 index 00000000..cab3dd83 --- /dev/null +++ b/client/src/styles/partials/generic/spinners/7.scss @@ -0,0 +1,135 @@ +.bd-spinner-7 { + width: 40px; + height: 40px; + position: relative; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -webkit-animation: bd-spinner-7-anim 1s cubic-bezier(.4,0,0,1) infinite; + animation: bd-spinner-7-anim 1s cubic-bezier(.4,0,0,1) infinite; + + &::before { + content: ""; + background: #fff; + height: 8px; + width: 8px; + position: absolute; + border-radius: 50%; + left: 0px; + top: 16px; + -webkit-animation: bd-spinner-7-anim-before 1s cubic-bezier(.2,0,0,.2) infinite; + animation: bd-spinner-7-anim-before 1s cubic-bezier(.2,0,0,.2) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } + + &::after { + content: ""; + background: #fff; + height: 8px; + width: 8px; + position: absolute; + border-radius: 50%; + left: 15px; + top: 16px; + -webkit-animation: bd-spinner-7-anim-after 1s cubic-bezier(.4,0,0,1) infinite; + animation: bd-spinner-7-anim-after 1s cubic-bezier(.4,0,0,1) infinite; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -webkit-box-shadow: 15px 0 0 0 #fff; + box-shadow: 15px 0 0 0 #fff; + } +} + +@-webkit-keyframes bd-spinner-7-anim { + 0% { + -webkit-transform: translate(0,0)rotate(0.01deg); + transform: translate(0,0)rotate(0.01deg); + } + + 100% { + -webkit-transform: translate(30px,0)rotate(0.01deg); + transform: translate(30px,0)rotate(0.01deg); + } +} + +@keyframes bd-spinner-7-anim { + 0% { + -webkit-transform: translate(0,0)rotate(0.01deg); + transform: translate(0,0)rotate(0.01deg); + } + + 100% { + -webkit-transform: translate(30px,0)rotate(0.01deg); + transform: translate(30px,0)rotate(0.01deg); + } +} + +@-webkit-keyframes bd-spinner-7-anim-before { + 0% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } + + 30% { + -webkit-transform: scale(1.4)rotate(0.01deg); + transform: scale(1.4)rotate(0.01deg); + } + + 100% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } +} + +@keyframes bd-spinner-7-anim-before { + 0% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } + + 30% { + -webkit-transform: scale(1.4)rotate(0.01deg); + transform: scale(1.4)rotate(0.01deg); + } + + 100% { + -webkit-transform: scale(1)rotate(0.01deg); + transform: scale(1)rotate(0.01deg); + } +} + +@-webkit-keyframes bd-spinner-7-anim-after { + 0% { + opacity: 1; + -webkit-transform: translate(0,0)rotate(0.01deg); + transform: translate(0,0)rotate(0.01deg); + } + + 40% { + opacity: .5; + } + + 100% { + opacity: 1; + -webkit-transform: translate(-45px,0)rotate(0.01deg); + transform: translate(-45px,0)rotate(0.01deg); + } +} + +@keyframes bd-spinner-7-anim-after { + 0% { + opacity: 1; + -webkit-transform: translate(0,0)rotate(0.01deg); + transform: translate(0,0)rotate(0.01deg); + } + + 40% { + opacity: .5; + } + + 100% { + opacity: 1; + -webkit-transform: translate(-45px,0)rotate(0.01deg); + transform: translate(-45px,0)rotate(0.01deg); + } +} diff --git a/client/src/styles/partials/generic/spinners/8.scss b/client/src/styles/partials/generic/spinners/8.scss new file mode 100644 index 00000000..e33f77ab --- /dev/null +++ b/client/src/styles/partials/generic/spinners/8.scss @@ -0,0 +1,67 @@ +.bd-spinner-8 { + width: 40px; + height: 40px; + position: relative; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + + &::before { + content: ""; + left: 0; + top: 0; + width: 40px; + height: 40px; + position: absolute; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + animation: bd-spinner-8-anim-before 1.5s cubic-bezier(.4,0,0,1) infinite; + } + + &::after { + content: ""; + left: 0; + top: 0; + width: 40px; + height: 40px; + position: absolute; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + animation: bd-spinner-8-anim-after 1.5s cubic-bezier(.4,0,0,1) infinite; + } +} + +@keyframes bd-spinner-8-anim-before { + 0% { + transform: translate(0,0)rotate(0.01deg); + opacity: 1; + } + + 50% { + transform: translate(-3px,0)rotate(0.01deg); + opacity: .6; + } + + 100% { + transform: translate(0,0)rotate(0.01deg); + opacity: 1; + } +} + +@keyframes bd-spinner-8-anim-after { + 0% { + transform: translate(0,0)rotate(0.01deg); + opacity: 1; + } + + 50% { + transform: translate(3px,0)rotate(0.01deg); + opacity: .6; + } + + 100% { + transform: translate(0,0)rotate(0.01deg); + opacity: 1; + } +} diff --git a/client/src/styles/partials/generic/spinners/9.scss b/client/src/styles/partials/generic/spinners/9.scss new file mode 100644 index 00000000..d475f47d --- /dev/null +++ b/client/src/styles/partials/generic/spinners/9.scss @@ -0,0 +1,51 @@ +.bd-spinner-9 { + width: 40px; + height: 40px; + position: relative; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + + &::before { + content: ""; + left: 0; + top: 0; + width: 40px; + height: 40px; + position: absolute; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + animation: bd-spinner-9-anim 1s cubic-bezier(.4,0,0,1) -.05s infinite; + } + + &::after { + content: ""; + left: 0; + top: 0; + width: 40px; + height: 40px; + position: absolute; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + animation: bd-spinner-9-anim 1s ease infinite; + } +} + +@keyframes bd-spinner-9-anim { + 0% { + transform: scale(1) rotate(0.01deg); + } + + 20% { + transform: scale(1.3) rotate(0.01deg); + } + + 40% { + transform: scale(0.9) rotate(0.01deg); + } + + 100% { + transform: scale(1) rotate(0.01deg); + } +} diff --git a/client/src/styles/partials/generic/spinners/index.scss b/client/src/styles/partials/generic/spinners/index.scss new file mode 100644 index 00000000..fa8058f7 --- /dev/null +++ b/client/src/styles/partials/generic/spinners/index.scss @@ -0,0 +1,11 @@ +@import './0.scss'; +@import './1.scss'; +@import './2.scss'; +@import './3.scss'; +@import './4.scss'; +@import './5.scss'; +@import './6.scss'; +@import './7.scss'; +@import './8.scss'; +@import './9.scss'; +@import './10.scss'; diff --git a/client/src/styles/partials/generic/switches.scss b/client/src/styles/partials/generic/switches.scss new file mode 100644 index 00000000..7d9d8b05 --- /dev/null +++ b/client/src/styles/partials/generic/switches.scss @@ -0,0 +1,108 @@ +.bd-setting-switch { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + -webkit-box-pack: start; + justify-content: flex-start; + -webkit-box-align: stretch; + align-items: stretch; + + .bd-title { + display: flex; + justify-content: flex-start; + -webkit-box-align: stretch; + align-items: stretch; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + flex-direction: row; + box-sizing: border-box; + } + + .bd-switch-wrapper { + flex: 0 0 auto; + user-select: none; + position: relative; + width: 44px; + height: 24px; + display: block; + + input { + position: absolute; + opacity: 0; + cursor: pointer; + width: 100%; + height: 100%; + z-index: 1; + } + + .bd-switch { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #72767d; + border-radius: 14px; + transition: background .15s ease-in-out, box-shadow .15s ease-in-out, border .15s ease-in-out; + + &::before { + content: ""; + display: block; + width: 18px; + height: 18px; + position: absolute; + top: 3px; + left: 3px; + bottom: 3px; + background: #f6f6f7; + border-radius: 10px; + transition: all .15s ease; + box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05); + } + + &.bd-checked { + background: $colbdblue; + + &::before { + transform: translateX(20px); + } + } + } + } + + .bd-title h3 { + font-weight: 500; + color: #f6f6f7; + flex: 1; + line-height: 24px; + margin-bottom: 0; + margin-top: 0; + } + + .bd-hint { + flex: 1 1 auto; + color: #72767d; + font-size: 14px; + font-weight: 500; + margin-bottom: 15px; + line-height: 30px; + border-bottom: 0px solid hsla(218,5%,47%,.1); + } + + + .bd-form-divider { + margin: 0 0 10px 0; + } + + &.bd-disabled { + input { + cursor: not-allowed; + } + + .bd-switch::before { + background: #888888; + } + } +} diff --git a/client/src/styles/partials/index.scss b/client/src/styles/partials/index.scss index 5d99201e..d40d30a0 100644 --- a/client/src/styles/partials/index.scss +++ b/client/src/styles/partials/index.scss @@ -1,10 +1,9 @@ -@import './images.scss'; -@import './colours.scss'; +@import './variables/index.scss'; @import './animations.scss'; -@import './spinners.scss'; @import './layouts.scss'; -@import './bdsettings.scss'; -@import './sidebarview.scss'; -@import './generic.scss'; -@import './discordoverrides.scss'; \ No newline at end of file +@import './sidebarview/index.scss'; +@import './bdsettings/index.scss'; +@import './generic/index.scss'; + +@import './discordoverrides.scss'; diff --git a/client/src/styles/partials/sidebarview.scss b/client/src/styles/partials/sidebarview.scss deleted file mode 100644 index 043cb8e7..00000000 --- a/client/src/styles/partials/sidebarview.scss +++ /dev/null @@ -1,155 +0,0 @@ -.bd-sidebar-view { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - display: flex; - box-sizing: border-box; - - .bd-sidebar-region { - background: #202225; - -webkit-box-flex: 1; - -webkit-box-pack: end; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - justify-content: flex-end; - flex: 1 0 30%; - z-index: 5; - max-width: 310px; - min-width: 310px; - - .bd-settingsWrap { - display: flex; - height: 100%; - -webkit-box-flex: 1; - flex: 1; - min-height: 1px; - box-sizing: border-box; - padding: 80px 15px 15px 15px; - - .bd-scroller.bd-sidebar { - width: 100%; - padding-right: 20px; - padding: 0; - - .bd-header { - padding: 6px 0; - margin-left: 10px; - margin-top: 15px; - color: rgba(255, 255, 255, 0.15); - font-size: 14px; - font-weight: 700; - line-height: 16px; - text-transform: uppercase; - font-weight: 600; - flex-shrink: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; - } - - .bd-item { - border-radius: 3px; - margin-bottom: 2px; - padding-bottom: 6px; - padding-top: 6px; - padding: 6px 10px; - color: $coldimwhite; - cursor: pointer; - font-size: 17px; - line-height: 20px; - position: relative; - flex-shrink: 0; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; - - &:hover, - &.active { - background: $colbdblue; - } - - &.active { - color: #FFF; - } - } - } - } - } - - .bd-content-region { - flex-grow: 1; - transform: translateX(-100%); - background: #36393e; - box-shadow: 0 0 4px #202225; - - .bd-content-column { - display: flex; - flex-grow: 1; - flex-direction: column; - height: 100%; - - > div { - display: flex; - flex-direction: column; - flex-grow: 1; - } - - .bd-settingsWrap { - display: flex; - flex-direction: column; - flex-grow: 1; - - .bd-scroller-wrap { - flex-grow: 1; - height: 100%; - } - - .bd-settingsWrap-header { - color: $colbdblue; - text-transform: uppercase; - font-weight: 600; - margin-top: 10px; - margin-bottom: 20px; - font-size: 100%; - outline: 0; - padding: 0; - vertical-align: baseline; - } - } - } - } - - .bd-content-column > div:not(.active) { - opacity: 0; - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; - } - - .bd-content { - animation: bd-fade-in .4s forwards; - - .animating { - animation: bd-fade-out .4s forwards; - } - - .bd-settingsWrap { - padding: 20px 15px 15px 15px; - } - } - - - - &.active { - .bd-content-region { - animation: bd-slidein .6s forwards; - } - } -} diff --git a/client/src/styles/partials/sidebarview/content.scss b/client/src/styles/partials/sidebarview/content.scss new file mode 100644 index 00000000..adce9648 --- /dev/null +++ b/client/src/styles/partials/sidebarview/content.scss @@ -0,0 +1,56 @@ +.bd-content-column { + display: flex; + flex-direction: column; + height: 100%; + flex-grow: 1; + backface-visibility: hidden; + + > div { + display: flex; + flex-direction: column; + flex-grow: 1; + } + + .bd-settingsWrap { + display: flex; + flex-direction: column; + flex-grow: 1; + + .bd-scroller-wrap { + flex-grow: 1; + height: 100%; + } + + .bd-settingsWrap-header { + color: $colbdblue; + text-transform: uppercase; + font-weight: 600; + margin-top: 10px; + margin-bottom: 20px; + font-size: 100%; + outline: 0; + padding: 0; + vertical-align: baseline; + } + } + + > div:not(.active) { + opacity: 0; + position: absolute; + width: 100%; + height: 100%; + pointer-events: none; + } +} + +.bd-content { + animation: bd-fade-in .4s forwards; + + .animating { + animation: bd-fade-out .4s forwards; + } + + .bd-settingsWrap { + padding: 20px 15px 15px 15px; + } +} diff --git a/client/src/styles/partials/sidebarview/index.scss b/client/src/styles/partials/sidebarview/index.scss new file mode 100644 index 00000000..8345343f --- /dev/null +++ b/client/src/styles/partials/sidebarview/index.scss @@ -0,0 +1,3 @@ +@import './main.scss'; +@import './sidebar.scss'; +@import './content.scss'; diff --git a/client/src/styles/partials/sidebarview/main.scss b/client/src/styles/partials/sidebarview/main.scss new file mode 100644 index 00000000..f3e14e12 --- /dev/null +++ b/client/src/styles/partials/sidebarview/main.scss @@ -0,0 +1,47 @@ +.bd-sidebar-view { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + box-sizing: border-box; + + .bd-sidebar-region { + background: #202225; + -webkit-box-flex: 1; + -webkit-box-pack: end; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + justify-content: flex-end; + flex: 1 0 30%; + z-index: 5; + max-width: 310px; + min-width: 310px; + + .bd-settingsWrap { + display: flex; + height: 100%; + -webkit-box-flex: 1; + flex: 1; + min-height: 1px; + box-sizing: border-box; + padding: 80px 15px 15px 15px; + } + } + + .bd-content-region { + flex-grow: 1; + transform: translateX(-100%); + background: #36393e; + box-shadow: 0 0 4px #202225; + backface-visibility: hidden; + } + + &.active { + .bd-content-region { + animation: bd-slidein .6s forwards; + } + } +} diff --git a/client/src/styles/partials/sidebarview/sidebar.scss b/client/src/styles/partials/sidebarview/sidebar.scss new file mode 100644 index 00000000..1a90c637 --- /dev/null +++ b/client/src/styles/partials/sidebarview/sidebar.scss @@ -0,0 +1,50 @@ +.bd-sidebar { + width: 100%; + padding-right: 20px; + padding: 0; + + .bd-header { + padding: 6px 0; + margin-left: 10px; + margin-top: 15px; + color: rgba(255, 255, 255, 0.15); + font-size: 14px; + font-weight: 700; + line-height: 16px; + text-transform: uppercase; + font-weight: 600; + flex-shrink: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; + } + + .bd-item { + border-radius: 3px; + margin-bottom: 2px; + padding-bottom: 6px; + padding-top: 6px; + padding: 6px 10px; + color: $coldimwhite; + cursor: pointer; + font-size: 17px; + line-height: 20px; + position: relative; + flex-shrink: 0; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; + + &:hover, + &.active { + background: $colbdblue; + } + + &.active { + color: #FFF; + } + } +} diff --git a/client/src/styles/partials/spinners.scss b/client/src/styles/partials/spinners.scss deleted file mode 100644 index 9d7bcf7e..00000000 --- a/client/src/styles/partials/spinners.scss +++ /dev/null @@ -1,942 +0,0 @@ -.bd-spinner { - width: 40px; - height: 40px; - position: relative; - -webkit-animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner::after { - content: ""; - background: #fff; - height: 10px; - width: 10px; - position: absolute; - border-radius: 50%; - left: 5px; - top: 15px; - -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner::before { - content: ""; - background: #fff; - height: 10px; - width: 10px; - position: absolute; - border-radius: 50%; - right: 5px; - top: 15px; - -webkit-animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -@-webkit-keyframes bd-spinner-anim1 { - 0% { - -webkit-transform: translate(10px, 0); - transform: translate(10px, 0); - } - - 50% { - -webkit-transform: translate(0, 0); - transform: translate(0, 0); - } - - 100% { - -webkit-transform: translate(10px, 0); - transform: translate(10px, 0); - } -} - -@keyframes bd-spinner-anim1 { - 0% { - -webkit-transform: translate(10px, 0); - transform: translate(10px, 0); - } - - 50% { - -webkit-transform: translate(0, 0); - transform: translate(0, 0); - } - - 100% { - -webkit-transform: translate(10px, 0); - transform: translate(10px, 0); - } -} - -@-webkit-keyframes bd-spinner-anim2 { - 0% { - -webkit-transform: translate(-10px, 0); - transform: translate(-10px, 0); - } - - 50% { - -webkit-transform: translate(0, 0); - transform: translate(0, 0); - } - - 100% { - -webkit-transform: translate(-10px, 0); - transform: translate(-10px, 0); - } -} - -@keyframes bd-spinner-anim2 { - 0% { - -webkit-transform: translate(-10px, 0); - transform: translate(-10px, 0); - } - - 50% { - -webkit-transform: translate(0, 0); - transform: translate(0, 0); - } - - 100% { - -webkit-transform: translate(-10px, 0); - transform: translate(-10px, 0); - } -} - -@-webkit-keyframes bd-spinner-anim3 { - from { - -webkit-transform: rotate(0); - transform: rotate(0); - } - - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes bd-spinner-anim3 { - from { - -webkit-transform: rotate(0); - transform: rotate(0); - } - - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - - -/*BD-SPINNER-1*/ -.bd-spinner-1 { - width: 40px; - height: 40px; - position: relative; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - - -/*BD-SPINNER-2*/ -.bd-spinner-2 { - width: 40px; - height: 40px; - position: relative; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - - -/*BD-SPINNER-3*/ -.bd-spinner-3 { - width: 40px; - height: 40px; - position: relative; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-3::before { - content: ""; - background: #fff; - height: 30px; - width: 30px; - position: absolute; - border-radius: 50%; - left: 5px; - top: 5px; - -webkit-animation: bd-spinner-3-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner-3-anim1 3s cubic-bezier(0.4, 0, 0, 1) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-3::after { - content: ""; - background: #202225; - height: 20px; - width: 20px; - position: absolute; - border-radius: 50%; - left: 10px; - top: 10px; - -webkit-animation: bd-spinner-3-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner-3-anim2 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -@-webkit-keyframes bd-spinner-3-anim1 { - 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } - - 50% { - -webkit-transform: scale(1.2)rotate(0.01deg); - transform: scale(1.2)rotate(0.01deg); - } - - 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } -} - -@keyframes bd-spinner-3-anim1 { - 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } - - 50% { - -webkit-transform: scale(0.8)rotate(0.01deg); - transform: scale(1.2)rotate(0.01deg); - } - - 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } -} - -@-webkit-keyframes bd-spinner-3-anim2 { - 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } - - 50% { - -webkit-transform: scale(0.4)rotate(0.01deg); - transform: scale(0.4)rotate(0.01deg); - } - - 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } -} - -@keyframes bd-spinner-3-anim2 { - 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } - - 50% { - -webkit-transform: scale(0.4)rotate(0.01deg); - transform: scale(0.4)rotate(0.01deg); - } - - 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } -} - - -/*BD-SPINNER-4*/ -.bd-spinner-4 { - width: 40px; - height: 40px; - position: relative; - -webkit-animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite; - animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-4::before { - content: ""; - background: #fff; - height: 10px; - width: 10px; - position: absolute; - border-radius: 50%; - left: 5px; - top: 15px; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-4::after { - content: ""; - background: #fff; - height: 10px; - width: 10px; - position: absolute; - border-radius: 50%; - right: 5px; - top: 15px; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -@-webkit-keyframes bd-spinner-4-anim1 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } -} - -@keyframes bd-spinner-4-anim1 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } -} - -/*BD-SPINNER-5*/ -.bd-spinner-5 { - width: 40px; - height: 40px; - position: relative; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-5::after { - content: ""; - background: #fff; - height: 10px; - width: 10px; - position: absolute; - border-radius: 5px; - left: 5px; - top: 10px; - -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner-5-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-5::before { - content: ""; - background: #fff; - height: 10px; - width: 10px; - position: absolute; - border-radius: 5px; - left: 5px; - bottom: 10px; - -webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner-5-anim1 2s cubic-bezier(0.4, 0, 0, 1) -1s infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -@-webkit-keyframes bd-spinner-5-anim1 { - 0% { - left: 0px; - width: 10px; - height: 10px; - } - - 25% { - left: 0px; - width: 30px; - height: 6px; - } - - 50% { - left: 20px; - width: 10px; - height: 10px; - } - - 75% { - left: 0px; - width: 30px; - height: 6px; - } - - 100% { - left: 0px; - width: 10px; - height: 10px; - } -} - -@keyframes bd-spinner-5-anim1 { - 0% { - left: 0px; - width: 10px; - height: 10px; - } - - 25% { - left: 0px; - width: 30px; - height: 6px; - } - - 50% { - left: 20px; - width: 10px; - height: 10px; - } - - 75% { - left: 0px; - width: 30px; - height: 6px; - } - - 100% { - left: 0px; - width: 10px; - height: 10px; - } -} - -/*BD-SPINNER-6*/ -.bd-spinner-6 { - width: 40px; - height: 40px; - position: relative; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg) -} - -.bd-spinner-6::after { - content: ""; - background: #fff; - height: 10px; - width: 10px; - position: absolute; - left: 5px; - top: 5px; - -webkit-animation: bd-spinner-6-anim1 2s cubic-bezier(.4, 0, 0, 1) infinite; - animation: bd-spinner-6-anim1 2s cubic-bezier(.4, 0, 0, 1) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-6::before { - content: ""; - background: #fff; - height: 10px; - width: 10px; - position: absolute; - right: 5px; - bottom: 5px; - -webkit-animation: bd-spinner-6-anim2 2s cubic-bezier(.4, 0, 0, 1) infinite; - animation: bd-spinner-6-anim2 2s cubic-bezier(.4, 0, 0, 1) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -@-webkit-keyframes bd-spinner-6-anim1 { - 0% { - top: 10px; - left: 10px; - width: 10px; - height: 10px; - } - - 25% { - top: 10px; - left: 10px; - width: 20px; - height: 10px; - } - - 50% { - top: 10px; - left: 20px; - width: 10px; - height: 10px; - } - - 75% { - top: 10px; - left: 20px; - width: 10px; - height: 20px; - } - - 100% { - top: 20px; - left: 20px; - width: 10px; - height: 10px; - } -} - -@keyframes bd-spinner-6-anim1 { - 0% { - top: 10px; - left: 10px; - width: 10px; - height: 10px; - } - - 25% { - top: 10px; - left: 10px; - width: 20px; - height: 10px; - } - - 50% { - top: 10px; - left: 20px; - width: 10px; - height: 10px; - } - - 75% { - top: 10px; - left: 20px; - width: 10px; - height: 20px; - } - - 100% { - top: 20px; - left: 20px; - width: 10px; - height: 10px; - } -} - -@-webkit-keyframes bd-spinner-6-anim2 { - 0% { - bottom: 10px; - right: 10px; - width: 10px; - height: 10px; - } - - 25% { - bottom: 10px; - right: 10px; - width: 20px; - height: 10px; - } - - 50% { - bottom: 10px; - right: 20px; - width: 10px; - height: 10px; - } - - 75% { - bottom: 10px; - right: 20px; - width: 10px; - height: 20px; - } - - 100% { - bottom: 20px; - right: 20px; - width: 10px; - height: 10px; - } -} - -@keyframes bd-spinner-6-anim2 { - 0% { - bottom: 10px; - right: 10px; - width: 10px; - height: 10px; - } - - 25% { - bottom: 10px; - right: 10px; - width: 20px; - height: 10px; - } - - 50% { - bottom: 10px; - right: 20px; - width: 10px; - height: 10px; - } - - 75% { - bottom: 10px; - right: 20px; - width: 10px; - height: 20px; - } - - 100% { - bottom: 20px; - right: 20px; - width: 10px; - height: 10px; - } -} - - -/*BD-SPINNER-7*/ -.bd-spinner-7 { - width: 40px; - height: 40px; - position: relative; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -webkit-animation: bd-spinner-7-anim3 1s cubic-bezier(.4,0,0,1) infinite; - animation: bd-spinner-7-anim3 1s cubic-bezier(.4,0,0,1) infinite; -} - -.bd-spinner-7::before { - content: ""; - background: #fff; - height: 8px; - width: 8px; - position: absolute; - border-radius: 50%; - left: 0px; - top: 16px; - -webkit-animation: bd-spinner-7-anim1 1s cubic-bezier(.2,0,0,.2) infinite; - animation: bd-spinner-7-anim1 1s cubic-bezier(.2,0,0,.2) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-7::after { - content: ""; - background: #fff; - height: 8px; - width: 8px; - position: absolute; - border-radius: 50%; - left: 15px; - top: 16px; - -webkit-animation: bd-spinner-7-anim2 1s cubic-bezier(.4,0,0,1) infinite; - animation: bd-spinner-7-anim2 1s cubic-bezier(.4,0,0,1) infinite; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -webkit-box-shadow: 15px 0 0 0 #fff; - box-shadow: 15px 0 0 0 #fff; -} - -@-webkit-keyframes bd-spinner-7-anim1 { - 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } - - 30% { - -webkit-transform: scale(1.4)rotate(0.01deg); - transform: scale(1.4)rotate(0.01deg); - } - - 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } -} - -@keyframes bd-spinner-7-anim1 { - 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } - - 30% { - -webkit-transform: scale(1.4)rotate(0.01deg); - transform: scale(1.4)rotate(0.01deg); - } - - 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); - } -} - -@-webkit-keyframes bd-spinner-7-anim2 { - 0% { - opacity: 1; - -webkit-transform: translate(0,0)rotate(0.01deg); - transform: translate(0,0)rotate(0.01deg); - } - - 40% { - opacity: .5; - } - - 100% { - opacity: 1; - -webkit-transform: translate(-45px,0)rotate(0.01deg); - transform: translate(-45px,0)rotate(0.01deg); - } -} - -@keyframes bd-spinner-7-anim2 { - 0% { - opacity: 1; - -webkit-transform: translate(0,0)rotate(0.01deg); - transform: translate(0,0)rotate(0.01deg); - } - - 40% { - opacity: .5; - } - - 100% { - opacity: 1; - -webkit-transform: translate(-45px,0)rotate(0.01deg); - transform: translate(-45px,0)rotate(0.01deg); - } -} - -@-webkit-keyframes bd-spinner-7-anim3 { - 0% { - -webkit-transform: translate(0,0)rotate(0.01deg); - transform: translate(0,0)rotate(0.01deg); - } - - 100% { - -webkit-transform: translate(30px,0)rotate(0.01deg); - transform: translate(30px,0)rotate(0.01deg); - } -} - -@keyframes bd-spinner-7-anim3 { - 0% { - -webkit-transform: translate(0,0)rotate(0.01deg); - transform: translate(0,0)rotate(0.01deg); - } - - 100% { - -webkit-transform: translate(30px,0)rotate(0.01deg); - transform: translate(30px,0)rotate(0.01deg); - } -} - -/*BD-SPINNER-8*/ -.bd-spinner-8 { - width: 40px; - height: 40px; - position: relative; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-8::before { - content: ""; - left: 0; - top: 0; - width: 40px; - height: 40px; - position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - animation: bd-spinner-8-anim1 1.5s cubic-bezier(.4,0,0,1) infinite; -} - -.bd-spinner-8::after { - content: ""; - left: 0; - top: 0; - width: 40px; - height: 40px; - position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - animation: bd-spinner-8-anim2 1.5s cubic-bezier(.4,0,0,1) infinite; -} - -@keyframes bd-spinner-8-anim1 { - 0% { - transform: translate(0,0)rotate(0.01deg); - opacity: 1; - } - - 50% { - transform: translate(-3px,0)rotate(0.01deg); - opacity: .6; - } - - 100% { - transform: translate(0,0)rotate(0.01deg); - opacity: 1; - } -} - -@keyframes bd-spinner-8-anim2 { - 0% { - transform: translate(0,0)rotate(0.01deg); - opacity: 1; - } - - 50% { - transform: translate(3px,0)rotate(0.01deg); - opacity: .6; - } - - 100% { - transform: translate(0,0)rotate(0.01deg); - opacity: 1; - } -} - -/*BD-SPINNER-9*/ -.bd-spinner-9 { - width: 40px; - height: 40px; - position: relative; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -.bd-spinner-9::before { - content: ""; - left: 0; - top: 0; - width: 40px; - height: 40px; - position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - animation: bd-spinner-9-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite; -} - -.bd-spinner-9::after { - content: ""; - left: 0; - top: 0; - width: 40px; - height: 40px; - position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - animation: bd-spinner-9-anim1 1s ease infinite; -} - -@keyframes bd-spinner-9-anim1 { - 0% { - transform: scale(1)rotate(0.01deg); - } - - 20% { - transform: scale(1.3)rotate(0.01deg); - } - - 40% { - transform: scale(0.9)rotate(0.01deg); - } - - 100% { - transform: scale(1)rotate(0.01deg); - } -} - -/*BD-SPINNER-10*/ -.bd-spinner-10 { - width: 40px; - height: 40px; - position: relative; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - animation: bd-spinner-10-anim2 1s cubic-bezier(.4,0,0,1) infinite; -} - -.bd-spinner-10::before { - content: ""; - left: 0; - top: 0; - width: 40px; - height: 40px; - position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite; -} - -.bd-spinner-10::after { - content: ""; - left: 0; - top: 0; - width: 40px; - height: 40px; - position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) infinite; -} - -@keyframes bd-spinner-10-anim1 { - 0% { - transform: rotate(-25deg)rotate(0.01deg); - } - - 80% { - transform: rotate(375deg)rotate(0.01deg); - } - - 100% { - transform: rotate(335deg)rotate(0.01deg); - } -} - -@keyframes bd-spinner-10-anim2 { - 0% { - transform: scale(0.8)rotate(0.01deg); - } - - 40% { - transform: scale(1.3)rotate(0.01deg); - } - - 80% { - transform: scale(1)rotate(0.01deg); - } - - 100% { - transform: scale(0.8)rotate(0.01deg); - } -} diff --git a/client/src/styles/partials/colours.scss b/client/src/styles/partials/variables/colours.scss similarity index 76% rename from client/src/styles/partials/colours.scss rename to client/src/styles/partials/variables/colours.scss index 57ce15be..65c39906 100644 --- a/client/src/styles/partials/colours.scss +++ b/client/src/styles/partials/variables/colours.scss @@ -2,4 +2,4 @@ $colbdblue: #3e82e5; $colerr: #d84040; $colwarn: #faa61a; $colok: #43b581; -$coldimwhite: #b9bbbe; \ No newline at end of file +$coldimwhite: #b9bbbe; diff --git a/client/src/styles/partials/images.scss b/client/src/styles/partials/variables/images.scss similarity index 99% rename from client/src/styles/partials/images.scss rename to client/src/styles/partials/variables/images.scss index 7925ce2b..25e043fd 100644 --- a/client/src/styles/partials/images.scss +++ b/client/src/styles/partials/variables/images.scss @@ -1,2 +1,3 @@ $logoSmallBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); -$logoBigBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==); \ No newline at end of file + +$logoBigBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==); diff --git a/client/src/styles/partials/variables/index.scss b/client/src/styles/partials/variables/index.scss new file mode 100644 index 00000000..dfd679c8 --- /dev/null +++ b/client/src/styles/partials/variables/index.scss @@ -0,0 +1,2 @@ +@import './colours.scss'; +@import './images.scss'; diff --git a/csseditor/src/Editor.vue b/csseditor/src/Editor.vue index 921a2f2f..4d1d7e1c 100644 --- a/csseditor/src/Editor.vue +++ b/csseditor/src/Editor.vue @@ -16,8 +16,8 @@
Loading Please Wait...
- @@ -191,312 +191,3 @@ } } - - \ No newline at end of file diff --git a/csseditor/src/index.js b/csseditor/src/index.js index 9f5eeee2..c108fad1 100644 --- a/csseditor/src/index.js +++ b/csseditor/src/index.js @@ -1,3 +1,5 @@ +const styles = require('./styles/index.scss'); + import Vue from 'vue'; import Editor from './Editor.vue'; import VueCodemirror from 'vue-codemirror' @@ -10,4 +12,10 @@ new Vue({ el: '#root', template: '', components: { Editor } -}); \ No newline at end of file +}); + +const style = document.createElement('style'); +style.id = 'bd-main'; +style.type = 'text/css'; +style.appendChild(document.createTextNode(styles)); +document.head.appendChild(style); diff --git a/csseditor/src/styles/codemirror.scss b/csseditor/src/styles/codemirror.scss new file mode 100644 index 00000000..b945ac14 --- /dev/null +++ b/csseditor/src/styles/codemirror.scss @@ -0,0 +1,105 @@ +.CodeMirror-scroll { + cursor: text; +} + +.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler { + background: #38444a; +} + +.CodeMirror-overlayscroll-horizontal div, +.CodeMirror-overlayscroll-vertical div { + background: rgb(41, 43, 47); +} + +.CodeMirror-overlayscroll-horizontal, +.CodeMirror-overlayscroll-horizontal div { + height: 10px; +} + +.CodeMirror-overlayscroll-vertical, +.CodeMirror-overlayscroll-vertical div { + width: 10px; +} + +.CodeMirror-scrollbar-filler { + width: 10px; + height: 10px; + background: rgb(41, 43, 47); +} + +.cm-s-material.CodeMirror { + background: #36393f; +} + +.CodeMirror-scroll { + cursor: text; +} + +.cm-s-material .CodeMirror-gutters { + background: #292b2f; +} + +.CodeMirror-gutter { + min-width: 34px; + border-right: 1px solid hsla(218,5%,47%,.3); + cursor: default; +} + +.CodeMirror-hints { + /*background: #1e262a;*/ + background: #292b2f; + box-shadow: 2px 3px 5px rgba(4, 4, 4, 0.22); + border: 1px solid #262f33; + + &::-webkit-scrollbar { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba(0,0,0,.4); + border-color: transparent; + } + + &::-webkit-scrollbar-thumb, + &::-webkit-scrollbar-track { + background-clip: padding-box; + border-width: 3px; + border-style: solid; + border-radius: 7px; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + border-color: transparent; + } +} + +.CodeMirror-linenumber, +.CodeMirror-line { + padding: 0 5px !important; +} + +.CodeMirror-linenumber { + cursor: text; +} + +.cm-s-material .CodeMirror-linenumber { + color: #f6f6f7; +} + +.CodeMirror-hint { + color: #bac9d2; +} + +li.CodeMirror-hint-active { + color: #bac9d2; + /*background: #3b4950;*/ + background: #36393f; +} + +.CodeMirror-dialog-top { + bottom: 0; + top: auto; + border: none; + background: #1e262a; +} diff --git a/csseditor/src/styles/editor.scss b/csseditor/src/styles/editor.scss new file mode 100644 index 00000000..a46844dc --- /dev/null +++ b/csseditor/src/styles/editor.scss @@ -0,0 +1,17 @@ +.editor { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; + + .vue-codemirror { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; + + &, & .CodeMirror { + flex-grow: 1; + } + } +} diff --git a/csseditor/src/styles/images.scss b/csseditor/src/styles/images.scss new file mode 100644 index 00000000..d488f2ae --- /dev/null +++ b/csseditor/src/styles/images.scss @@ -0,0 +1 @@ +$bdicon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); diff --git a/csseditor/src/styles/index.scss b/csseditor/src/styles/index.scss new file mode 100644 index 00000000..a3ed0e36 --- /dev/null +++ b/csseditor/src/styles/index.scss @@ -0,0 +1,13 @@ +@import '../../../node_modules/codemirror/lib/codemirror.css'; +@import '../../../node_modules/codemirror/theme/material.css'; +@import '../../../node_modules/codemirror/addon/scroll/simplescrollbars.css'; +@import '../../../node_modules/codemirror/addon/dialog/dialog.css'; +@import '../../../node_modules/codemirror/addon/hint/show-hint.css'; + +@import './images.scss'; +@import './main.scss'; +@import './titlebar.scss'; +@import './spinner.scss'; +@import './editor.scss'; +@import './tools.scss'; +@import './codemirror.scss'; diff --git a/csseditor/src/styles/main.scss b/csseditor/src/styles/main.scss new file mode 100644 index 00000000..20c89ea8 --- /dev/null +++ b/csseditor/src/styles/main.scss @@ -0,0 +1,36 @@ +html, body { + margin: 0; + padding: 0; + max-height: 100%; + height: 100%; + background: #2c383e; + min-width: 700px; + min-height: 400px; +} + +* { + outline: none; +} + +.flex-spacer { + flex-grow: 1; +} + +.flex-row { + display: flex; + flex-direction: row; +} + +.valign { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.container { + display: flex; + flex-grow: 1; + flex-direction: column; + height: 100%; +} diff --git a/csseditor/src/styles/spinner.scss b/csseditor/src/styles/spinner.scss new file mode 100644 index 00000000..97acdd91 --- /dev/null +++ b/csseditor/src/styles/spinner.scss @@ -0,0 +1,14 @@ +#spinner { + background: rgba(51, 48, 48, 0.41); + position: absolute; + top: 34px; + left: 0; + right: 0; + bottom: 0; + color: #bac9d2; + font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; + font-weight: 600; + font-size: 2em; + z-index: 90000; + user-select: none; +} diff --git a/csseditor/src/styles/titlebar.scss b/csseditor/src/styles/titlebar.scss new file mode 100644 index 00000000..fb1cf701 --- /dev/null +++ b/csseditor/src/styles/titlebar.scss @@ -0,0 +1,72 @@ +.titlebar { + display: flex; + height: 25px; + padding: 4px 5px; + background: #292b2f; + border-bottom: 1px solid hsla(218,5%,47%,.3); + user-select: none; + cursor: default; + + .icon { + width: 31px; + height: 25px; + + .inner { + width: 25px; + height: 25px; + background-image: $bdicon; + background-size: 22px 22px; + background-repeat: no-repeat; + background-position: center; + } + } + + .title { + color: #bac9d2; + font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; + line-height: 25px; + font-size: 15px; + } + + .controls { + margin: 0 0 0 2px; + font-size: 0; + + button { + -webkit-app-region: no-drag; + border-radius: 3px; + width: 25px; + font-size: 12px; + font-weight: 600; + /*background: #263238;*/ + background: #36393f; + color: #bac9d2; + font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; + transition: background-color .2s ease; + cursor: default; + border: 0; + height: 25px; + z-index: 900062; + padding: 0; + margin: 0 0 0 4px; + + &:hover { + background: #44474e; + color: #FFF; + } + + &.active { + background: #3a71c1; + } + } + } + + .draggable { + top: 0; + left: 0; + right: 63px; + position: absolute; + height: 33px; + -webkit-app-region: drag; + } +} diff --git a/csseditor/src/styles/tools.scss b/csseditor/src/styles/tools.scss new file mode 100644 index 00000000..d2fc3c16 --- /dev/null +++ b/csseditor/src/styles/tools.scss @@ -0,0 +1,51 @@ +.tools { + height: 36px; + background: #292b2f; + border-top: 1px solid hsla(218,5%,47%,.3); + display: flex; + flex-direction: column; + user-select: none; + + .flex-row { + flex-grow: 1; + padding: 4px 5px; + } + + button { + border-radius: 3px; + width: 100px; + padding: 3px 10px; + font-size: 12px; + font-weight: 600; + background: #36393f; + color: #bac9d2; + font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; + transition: background-color .2s ease; + cursor: pointer; + border: 0; + margin-right: 4px; + + &:hover { + background: #44474e; + color: #FFF; + } + } + + #chkboxLiveUpdate { + padding: 3px 10px; + line-height: 22px; + + input[type="checkbox"] { + margin: 0 6px 0 0; + cursor: pointer; + } + + span { + font-size: 12px; + font-weight: 500; + color: #bac9d2; + font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; + cursor: default; + } + } +}