diff --git a/.eslintrc.json b/.eslintrc similarity index 100% rename from .eslintrc.json rename to .eslintrc diff --git a/.sasslintrc b/.sasslintrc new file mode 100644 index 00000000..4dc7d948 --- /dev/null +++ b/.sasslintrc @@ -0,0 +1,29 @@ +{ + "rules": { + "no-transition-all": [ 0 ], + "nesting-depth": [ + 1, + { "max-depth": 5 } + ], + "no-vendor-prefixes": [ 0 ], + "property-sort-order": [ 0 ], + "indentation": [ + 1, + { "size": 4 } + ], + "no-color-literals": [ 0 ], + "class-name-format": [ + 1, + { + "convention": "^bd-[a-z]" + } + ], + "variable-name-format": [ + 2, + { + "convention": "camelcase" + } + ], + "url-quotes": [ 0 ] + } +} diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss index 1bce97fa..97f004a1 100644 --- a/client/src/styles/index.scss +++ b/client/src/styles/index.scss @@ -1 +1 @@ -@import './partials/index.scss'; +@import './partials/index'; diff --git a/client/src/styles/partials/bdsettings/button.scss b/client/src/styles/partials/bdsettings/button.scss index 8460d59c..b093e9a7 100644 --- a/client/src/styles/partials/bdsettings/button.scss +++ b/client/src/styles/partials/bdsettings/button.scss @@ -5,14 +5,14 @@ width: 70px; height: 48px; left: 0; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06); + box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 2px 0 rgba(0, 0, 0, .06); opacity: 1; - .platform-darwin & { + .platform-darwin & { // sass-lint:disable-line class-name-format top: 27px; } - .platform-linux & { + .platform-linux & { // sass-lint:disable-line class-name-format top: 0; } @@ -25,12 +25,14 @@ height: 100%; cursor: pointer; filter: grayscale(100%); - opacity: 0.5; - transition: all 0.4s ease-in-out; + opacity: .5; + transition: all .4s ease-in-out; - &:not(.bd-loading):hover { - filter: none; - opacity: 1; + &:not(.bd-loading) { + &:hover { + filter: none; + opacity: 1; + } } &.bd-loading { @@ -38,20 +40,22 @@ } &.bd-updates { - filter: hue-rotate(250deg) !important; - opacity: 1 !important; + filter: hue-rotate(250deg) !important; // sass-lint:disable-line no-important + opacity: 1 !important; // sass-lint:disable-line no-important } } &.bd-hideButton { - animation: bd-fadeOut 0.4s ease-out; + animation: bd-fadeOut .4s ease-out; &.bd-active { - animation: bd-fadeIn 0.4s ease-in; + animation: bd-fadeIn .4s ease-in; } - &:not(.bd-active):not(.bd-animating) { - display: none; + &:not(.bd-active) { + &:not(.bd-animating) { + display: none; + } } } diff --git a/client/src/styles/partials/bdsettings/card.scss b/client/src/styles/partials/bdsettings/card.scss index b74de81c..e313b4c7 100644 --- a/client/src/styles/partials/bdsettings/card.scss +++ b/client/src/styles/partials/bdsettings/card.scss @@ -3,7 +3,7 @@ flex-direction: column; flex-grow: 1; background: transparent; - border-bottom: 1px solid rgba(114, 118, 126, 0.3); + border-bottom: 1px solid rgba(114, 118, 126, .3); min-height: 150px; color: #b9bbbe; margin-top: 20px; @@ -51,7 +51,7 @@ align-items: flex-end; .bd-cardExtra { - color: rgba(255, 255, 255, 0.15); + color: rgba(255, 255, 255, .15); font-size: 10px; font-weight: 700; flex-grow: 1; @@ -75,9 +75,11 @@ width: 40px; height: 20px; - .bd-switch::before { - width: 14px; - height: 14px; + .bd-switch { + &::before { + width: 14px; + height: 14px; + } } } } diff --git a/client/src/styles/partials/bdsettings/collection.scss b/client/src/styles/partials/bdsettings/collection.scss index 3f086070..d8e5bfbd 100644 --- a/client/src/styles/partials/bdsettings/collection.scss +++ b/client/src/styles/partials/bdsettings/collection.scss @@ -2,8 +2,10 @@ display: flex; flex-direction: column; - div:first-child { - flex: 1 1 auto; + div { + &:first-child { + flex: 1 1 auto; + } } .bd-collectionItem { @@ -22,7 +24,7 @@ &:hover { svg { - fill: #FFF; + fill: #fff; } } @@ -50,7 +52,7 @@ &:hover { svg { - fill: #FFF; + fill: #fff; } } } diff --git a/client/src/styles/partials/bdsettings/e2ee.scss b/client/src/styles/partials/bdsettings/e2ee.scss index 62b5a2bb..cdeff6f9 100644 --- a/client/src/styles/partials/bdsettings/e2ee.scss +++ b/client/src/styles/partials/bdsettings/e2ee.scss @@ -31,7 +31,7 @@ } .bd-taDivider { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, .1); box-sizing: border-box; position: relative; top: 10%; @@ -41,24 +41,23 @@ } .bd-e2eeLockContextMenu { + border: 0; - border: none; - - .ctx-menu { - background: #23272A; + .ctx-menu { // sass-lint:disable-line class-name-format + background: #23272a; border-radius: 4px; box-shadow: none; padding: 0; .bd-e2eeLockContextMenuOption { - background: #23272A; - color: #99AAB5; - padding: 8px 8px; + background: #23272a; + color: #99aab5; + padding: 8px; font-weight: 500; cursor: default; &:hover { - background: #000000; + background: #000; } } } @@ -112,12 +111,16 @@ margin: 0; margin-top: 15px; - .bd-ok svg { - fill: $colbdgreen; + .bd-ok { + svg { + fill: $colbdgreen; + } } - .bd-warn svg { - fill: $colwarn; + .bd-warn { + svg { + fill: $colwarn; + } } .bd-popoverWrapper, @@ -126,11 +129,15 @@ .bd-popoverInner { display: flex; - > div:first-child { - display: flex; + > div { + &:first-child { + display: flex; - > div:not(:first-child) { - margin-left: 10px; + > div { + &:not(:first-child) { + margin-left: 10px; + } + } } } @@ -141,7 +148,7 @@ cursor: pointer; &:hover { - fill: #FFF; + fill: #fff; } } } @@ -153,33 +160,39 @@ } } -.bd-encryptedImage::before, -.bd-decryptedImage::before { - content: ""; - position: absolute; - background-color: $colbdgreen; - background-image: $lockIcon; - background-repeat: no-repeat; +.bd-encryptedImage, +.bd-decryptedImage { + &::before { + content: ''; + position: absolute; + background-color: $colbdgreen; + background-image: $lockIcon; + background-repeat: no-repeat; + } } -.bd-encryptedImage::before { - width: 100%; - height: 100%; - border-radius: 3px; - display: flex; - background-size: calc(100% / 2); - background-position: center; +.bd-encryptedImage { + &::before { + width: 100%; + height: 100%; + border-radius: 3px; + display: flex; + background-size: calc(100% / 2); + background-position: center; + } } -.bd-decryptedImage::before { - width: 11px; - height: 11px; - z-index: 1; - display: block; - background-size: cover; - border-radius: 100%; - border: 2px solid $colbdgreen; - top: 5px; - left: 5px; - opacity: .5; +.bd-decryptedImage { + &::before { + width: 11px; + height: 11px; + z-index: 1; + display: block; + background-size: cover; + border-radius: 100%; + border: 2px solid $colbdgreen; + top: 5px; + left: 5px; + opacity: .5; + } } diff --git a/client/src/styles/partials/bdsettings/index.scss b/client/src/styles/partials/bdsettings/index.scss index 69a04481..4bcde300 100644 --- a/client/src/styles/partials/bdsettings/index.scss +++ b/client/src/styles/partials/bdsettings/index.scss @@ -1,11 +1,11 @@ -@import './button.scss'; -@import './sidebarview.scss'; -@import './contentview.scss'; -@import './card.scss'; -@import './remotecard.scss'; -@import './tooltips.scss'; -@import './settings-schemes.scss'; -@import './updater.scss'; +@import './button'; +@import './sidebarview'; +@import './contentview'; +@import './card'; +@import './remotecard'; +@import './tooltips'; +@import './settings-schemes'; +@import './updater'; @import './window-preferences'; @import './kvp'; @import './collection'; diff --git a/client/src/styles/partials/bdsettings/remotecard.scss b/client/src/styles/partials/bdsettings/remotecard.scss index 96d72006..2a851cd8 100644 --- a/client/src/styles/partials/bdsettings/remotecard.scss +++ b/client/src/styles/partials/bdsettings/remotecard.scss @@ -4,7 +4,7 @@ margin-top: 10px; padding: 10px 0; border-radius: 0; - border-bottom: 1px solid rgba(114, 118, 126, 0.3); + border-bottom: 1px solid rgba(114, 118, 126, .3); &:hover { transform: scale(1.005); @@ -16,7 +16,7 @@ } .bd-remoteCardLikes { - color: red; + color: #f00; font-size: 12px; font-weight: 600; } @@ -45,7 +45,7 @@ .bd-remoteCardThumb { height: 100px; width: 180px; - background: rgba(0,0,0,.1); + background: rgba(0, 0, 0, .1); border-radius: 3px; } diff --git a/client/src/styles/partials/bdsettings/settings-schemes.scss b/client/src/styles/partials/bdsettings/settings-schemes.scss index e6c8662f..cafc4eda 100644 --- a/client/src/styles/partials/bdsettings/settings-schemes.scss +++ b/client/src/styles/partials/bdsettings/settings-schemes.scss @@ -1,6 +1,6 @@ .bd-settingsSchemes { margin-bottom: 15px; - border-bottom: 1px solid rgba(114, 118, 126, 0.3); + border-bottom: 1px solid rgba(114, 118, 126, .3); .bd-settingsSchemesContainer { margin-right: -15px; @@ -28,7 +28,7 @@ height: 120px; border: 2px solid $coldimwhite; border-radius: 3px; - transition: border-color 0.2s ease; + transition: border-color .2s ease; margin-bottom: 15px; background: center / cover no-repeat #2f3136; } diff --git a/client/src/styles/partials/bdsettings/sidebarview.scss b/client/src/styles/partials/bdsettings/sidebarview.scss index d912d55b..d4b55dba 100644 --- a/client/src/styles/partials/bdsettings/sidebarview.scss +++ b/client/src/styles/partials/bdsettings/sidebarview.scss @@ -10,7 +10,7 @@ transition: all .4s ease-in-out; pointer-events: none; - &.active { + &.bd-active { width: 900px; transform: none; opacity: 1; @@ -29,7 +29,7 @@ align-items: center; cursor: pointer; - .platform-darwin & { + .platform-darwin & { // sass-lint:disable-line class-name-format top: 43px; } @@ -48,7 +48,7 @@ } &:hover { - background-color: hsla(218,5%,47%,.3); + background-color: hsla(218, 5%, 47%, .3); .bd-materialDesignIcon { fill: #fff; @@ -67,9 +67,6 @@ color: #414245; font-weight: 700; font-size: 12px; - } - - .bd-vtext { flex-grow: 1; height: 20px; cursor: default; @@ -97,7 +94,7 @@ .bd-sidebarView { &::after { - content: ""; + content: ''; height: 100%; width: 310px; background-color: #202225; @@ -106,44 +103,51 @@ position: absolute; } - .bd-sidebarRegion .bd-scroller { - padding-top: 0; + .bd-sidebarRegion { + .bd-scroller { + padding-top: 0; + } } .bd-contentRegion { width: 590px; } - &.active { + &.bd-active { .bd-contentRegion { - transition: transform 0.4s ease-in-out, opacity 0.2s ease; + transition: transform .4s ease-in-out, opacity .2s ease; transform: none; opacity: 1; } } - &.bd-stop .bd-sidebarRegion { - z-index: 3004; - } - &.bd-stop .bd-contentRegion { - z-index: 3003; + &.bd-stop { + .bd-sidebarRegion { + z-index: 3004; + } + + .bd-contentRegion { + z-index: 3003; + } } } - .platform-darwin & { - top: 0px; + .platform-darwin & { // sass-lint:disable-line class-name-format + top: 0; - .bd-sidebarView .bd-sidebarRegion { - padding-top: 22px; + .bd-sidebarView { + .bd-sidebarRegion { + padding-top: 22px; + } } } - .platform-linux & { + .platform-linux & { // sass-lint:disable-line class-name-format top: 0; } - &:not(.active) > .bd-sidebarView.active, - &.bd-settingsOut .bd-sidebarView.active { + &:not(.bd-active) > .bd-sidebarView.bd-active, // sass-lint:disable-line force-element-nesting + &.bd-settingsOut .bd-sidebarView.bd-active { // sass-lint:disable-line force-element-nesting .bd-contentRegion { transform: translate(-600px, 0%); opacity: 0; @@ -151,18 +155,24 @@ } } - &:not(.active) .bd-sidebarView.active { - .bd-contentRegion { - transform: translate(-600px, 100%); + &:not(.bd-active) { + .bd-sidebarView { + &.bd-active { + .bd-contentRegion { + transform: translate(-600px, 100%); + } + } } } } -.bd-sidebar .bd-settingsButton { - position: absolute; - top: 0; +.bd-sidebar { + .bd-settingsButton { + position: absolute; + top: 0; - .platform-darwin & { - top: 22px; + .platform-darwin & { // sass-lint:disable-line class-name-format + top: 22px; + } } } diff --git a/client/src/styles/partials/bdsettings/tooltips.scss b/client/src/styles/partials/bdsettings/tooltips.scss index 3e9950a6..648f8b29 100644 --- a/client/src/styles/partials/bdsettings/tooltips.scss +++ b/client/src/styles/partials/bdsettings/tooltips.scss @@ -10,7 +10,7 @@ bd-tooltips { .bd-popover { background-color: #000; border-radius: 5px; - box-shadow: 0 2px 10px 0 rgba(0,0,0,.2); + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2); color: #dcddde; contain: layout; font-size: 14px; @@ -34,7 +34,7 @@ bd-tooltips { position: absolute; } - &[x-placement^="top"] { + &[x-placement^='top'] { margin-bottom: 10px; .bd-tooltipArrow, @@ -45,18 +45,18 @@ bd-tooltips { } } - &[x-placement^="bottom"] { + &[x-placement^='bottom'] { margin-top: 10px; .bd-tooltipArrow, .bd-popoverArrow { - border-width: 0 5px 5px 5px; + border-width: 0 5px 5px; top: -5px; border-bottom-color: #000; } } - &[x-placement^="right"] { + &[x-placement^='right'] { margin-left: 10px; .bd-tooltipArrow, @@ -67,7 +67,7 @@ bd-tooltips { } } - &[x-placement^="left"] { + &[x-placement^='left'] { margin-right: 10px; .bd-tooltipArrow, diff --git a/client/src/styles/partials/bdsettings/updater.scss b/client/src/styles/partials/bdsettings/updater.scss index cd44d124..3e239974 100644 --- a/client/src/styles/partials/bdsettings/updater.scss +++ b/client/src/styles/partials/bdsettings/updater.scss @@ -1,6 +1,6 @@ .bd-updaterview { p { margin: 0 0 10px; - color: #FFF; + color: #fff; } } diff --git a/client/src/styles/partials/bdsettings/window-preferences.scss b/client/src/styles/partials/bdsettings/window-preferences.scss index 0d1e04c5..cc1bc5fc 100644 --- a/client/src/styles/partials/bdsettings/window-preferences.scss +++ b/client/src/styles/partials/bdsettings/window-preferences.scss @@ -1,5 +1,7 @@ .bd-windowPreferences { - .bd-windowPreferencesDisabled p { - color: #f6f6f7; + .bd-windowPreferencesDisabled { + p { + color: #f6f6f7; + } } } diff --git a/client/src/styles/partials/discordoverrides.scss b/client/src/styles/partials/discordoverrides.scss index 672a35bb..aa767145 100644 --- a/client/src/styles/partials/discordoverrides.scss +++ b/client/src/styles/partials/discordoverrides.scss @@ -1,25 +1,26 @@ +// sass-lint:disable-all body:not(.bd-hideButton) { - [class*="guildsWrapper-"] { + [class*='guildsWrapper-'] { padding-top: 49px !important; } - .platform-osx [class*="guildsWrapper-"] { + .platform-osx [class*='guildsWrapper-'] { margin-top: 26px; } - [class*="guildsWrapper-"] + [class*="flex"] { + [class*='guildsWrapper-'] + [class*='flex'] { border-radius: 0 0 0 5px; } - [class*="unreadMentionsIndicatorTop-"] { + [class*='unreadMentionsIndicatorTop-'] { top: 49px; } - .platform-osx [class*="unreadMentionsIndicatorTop-"] { + .platform-osx [class*='unreadMentionsIndicatorTop-'] { top: 50px; } } // Any layers need to be above the main layer (where the BD button is placed) -[class*="layers-"] > * + * { +[class*='layers-'] > * + * { z-index: 900; } diff --git a/client/src/styles/partials/emotes.scss b/client/src/styles/partials/emotes.scss index f39cbb3b..f2a59aab 100644 --- a/client/src/styles/partials/emotes.scss +++ b/client/src/styles/partials/emotes.scss @@ -14,7 +14,7 @@ img { height: 32px; - margin: 0 .05em 0 .1em !important; + margin: 0 .05em 0 .1em !important; // sass-lint:disable-line no-important min-height: 22px; min-width: 22px; object-fit: contain; @@ -44,14 +44,23 @@ transition: fill .1s ease; } - &.bd-active svg { - fill: #fff; + &.bd-active { + svg { + fill: #fff; + } } } - &.bd-selected .bd-emoteFavouriteButton, - &:hover .bd-emoteFavouriteButton { - display: block; + &.bd-selected { + .bd-emoteFavouriteButton { + display: block; + } + } + + &:hover { + .bd-emoteFavouriteButton { + display: block; + } } } diff --git a/client/src/styles/partials/generic/autocomplete.scss b/client/src/styles/partials/generic/autocomplete.scss index 99668726..6f4edacf 100644 --- a/client/src/styles/partials/generic/autocomplete.scss +++ b/client/src/styles/partials/generic/autocomplete.scss @@ -78,7 +78,7 @@ } } - &.bd-active + [class*="inner"] { + &.bd-active + [class*='inner'] { border-top-left-radius: 0; border-top-right-radius: 0; } diff --git a/client/src/styles/partials/generic/badges.scss b/client/src/styles/partials/generic/badges.scss index 976484c3..5e58fc6e 100644 --- a/client/src/styles/partials/generic/badges.scss +++ b/client/src/styles/partials/generic/badges.scss @@ -3,13 +3,28 @@ margin-top: 8px; flex: 1 1 auto; - + [class*="profileBadges"] { + + [class*='profileBadges'] { display: inline-flex; } } .bd-profileBadges { display: flex; + + &.bd-profileBadgesNametag { + display: inline-block; + margin-left: 6px; + height: 11px; + + .bd-profileBadge { + width: 12px; + height: 12px; + + &:last-child { + margin-right: 0; + } + } + } } .bd-profileBadge { @@ -28,24 +43,9 @@ background-image: $logoSmallBw; filter: brightness(10); - .theme-light [class*="topSectionNormal-"] .bd-profileBadgesProfileModal > &, - .theme-light :not(.bd-profileBadgesProfileModal) > & { + .theme-light [class*='topSectionNormal-'] .bd-profileBadgesProfileModal > &, // sass-lint:disable-line force-element-nesting class-name-format + .theme-light :not(.bd-profileBadgesProfileModal) > & { // sass-lint:disable-line class-name-format background-image: $logoSmallLight; filter: none; } } - -.bd-profileBadges.bd-profileBadgesNametag { - display: inline-block; - margin-left: 6px; - height: 11px; - - .bd-profileBadge { - width: 12px; - height: 12px; - - &:last-child { - margin-right: 0; - } - } -} diff --git a/client/src/styles/partials/generic/buttons.scss b/client/src/styles/partials/generic/buttons.scss index 30601a0e..7ff5e80f 100644 --- a/client/src/styles/partials/generic/buttons.scss +++ b/client/src/styles/partials/generic/buttons.scss @@ -5,16 +5,17 @@ align-items: center; justify-content: center; cursor: pointer; - color: #FFF; - background: #44474c; + color: #fff; text-align: center; user-select: none; font-weight: 500; background: $colbdgreen; - &:not(.bd-disabled):hover { - background: darken($colbdgreen, 5%); + &:not(.bd-disabled) { + &:hover { + background: darken($colbdgreen, 5%); + } } &.bd-disabled { @@ -50,9 +51,11 @@ opacity: .3; } - .material-design-icon svg { - width: 18px; - height: 18px; + .bd-materialDesignIcon { + svg { + width: 18px; + height: 18px; + } } } @@ -71,12 +74,12 @@ border-bottom-right-radius: 6px; } - &:not(:last-of-type) { + &:not(:last-of-type) { // sass-lint:disable-line no-empty-rulesets // border-right: 1px solid rgba(114, 118, 126, 0.3); } &:not(:first-of-type) { - border-left: 1px solid rgba(114, 118, 126, 0.1); + border-left: 1px solid rgba(114, 118, 126, .1); } } } diff --git a/client/src/styles/partials/generic/drawers.scss b/client/src/styles/partials/generic/drawers.scss index 0ced6fa8..f7dc1b64 100644 --- a/client/src/styles/partials/generic/drawers.scss +++ b/client/src/styles/partials/generic/drawers.scss @@ -2,10 +2,14 @@ margin-bottom: 15px; .bd-settingsCategory > & { - border-bottom: 1px solid rgba(114, 118, 126, 0.3); + border-bottom: 1px solid rgba(114, 118, 126, .3); - .bd-drawerContents > .bd-formItem:last-child > .bd-formDivider:last-child { - display: none; + .bd-drawerContents > .bd-formItem { + &:last-child > .bd-formDivider { + &:last-child { + display: none; + } + } } } @@ -14,7 +18,7 @@ cursor: pointer; &:hover { - color: rgba(255, 255, 255, 0.25); + color: rgba(255, 255, 255, .25); } } @@ -22,12 +26,13 @@ position: relative; margin-right: 15px; - .bd-chevron1, .bd-chevron2 { + .bd-chevron1, + .bd-chevron2 { position: absolute; } svg { - transition: transform 0.5s ease; + transition: transform .5s ease; transform: none; } } @@ -39,13 +44,17 @@ .bd-drawerContents { // margin-top is set in JavaScript when the drawer is animating // It still needs to be set here for it to animate - transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease; + transition: transform .2s ease, margin-top .2s ease, opacity .2s ease; transform: scaleY(0) translateY(0%); margin-top: -100%; opacity: 0; - > .bd-formItem:last-child > .bd-formDivider:last-child { - display: none; + > .bd-formItem { + &:last-child > .bd-formDivider { + &:last-child { + display: none; + } + } } } @@ -57,28 +66,31 @@ } &.bd-drawerOpen { - > .bd-drawerHeader .bd-drawerOpenButton { - .bd-chevron1 { - svg { - transform: rotate(90deg) + > .bd-drawerHeader { + .bd-drawerOpenButton { + .bd-chevron1 { + svg { + transform: rotate(90deg); + } } } .bd-chevron2 { margin-left: -4px; + svg { - transform: rotate(270deg) + transform: rotate(270deg); } } } > .bd-drawerContentsWrap > .bd-drawerContents { transform: scaleY(1) translateY(0%); - margin-top: 0%; + margin-top: 0; opacity: 1; &::after { - content: ""; + content: ''; display: block; margin-top: 15px; } diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss index 66bbd377..c4ee6c23 100644 --- a/client/src/styles/partials/generic/forms.scss +++ b/client/src/styles/partials/generic/forms.scss @@ -1,8 +1,7 @@ .bd-formHeader { margin: 15px 0 10px; - color: rgba(255, 255, 255, 0.15); + color: rgba(255, 255, 255, .15); font-size: 14px; - font-weight: 700; line-height: 16px; text-transform: uppercase; font-weight: 600; @@ -30,24 +29,28 @@ } &:hover { - .bd-formHeaderButton svg { - fill: #fff; + .bd-formHeaderButton { + svg { + fill: #fff; + } } } } -.bd-formItem h5 { - color: #b9bbbe; - text-transform: uppercase; - font-weight: 600; - font-size: 12px; +.bd-formItem { + h5 { + color: #b9bbbe; + text-transform: uppercase; + font-weight: 600; + font-size: 12px; + } } .bd-formDivider { height: 1px; margin: 15px 0; - background: hsla(218,5%,47%,.3); - transition: background-color 0.2s ease; + background: hsla(218, 5%, 47%, .3); + transition: background-color .2s ease; .bd-formItemChanged > & { background: $colok; @@ -58,14 +61,14 @@ display: flex; margin-top: 20px; background: #d84040; - border: 1px solid #B30B0B; + border: 1px solid #b30b0b; opacity: .8; border-radius: 4px; padding: 10px; .bd-text { display: flex; - color: #FFF; + color: #fff; font-weight: 700; align-items: center; flex-grow: 1; @@ -74,10 +77,10 @@ .bd-formButton { margin: 0; align-self: flex-end; - background: #C42929; + background: #c42929; &:hover { - background: darken(#C42929, 2%); + background: darken(#c42929, 2%); } } } diff --git a/client/src/styles/partials/generic/forms/arrays.scss b/client/src/styles/partials/generic/forms/arrays.scss index 9676e130..a8755ceb 100644 --- a/client/src/styles/partials/generic/forms/arrays.scss +++ b/client/src/styles/partials/generic/forms/arrays.scss @@ -1,9 +1,12 @@ +// sass-lint:disable force-element-nesting force-pseudo-nesting .bd-formSettingsarray { - .bd-button.bd-buttonPrimary { - padding: 3px 8px; - border-radius: 3px; - font-size: 12px; - font-weight: 400; + .bd-button { + .bd-buttonPrimary { + padding: 3px 8px; + border-radius: 3px; + font-size: 12px; + font-weight: 400; + } } .bd-settingsarrayItems { diff --git a/client/src/styles/partials/generic/forms/collections.scss b/client/src/styles/partials/generic/forms/collections.scss index 1d84a8cb..1f354497 100644 --- a/client/src/styles/partials/generic/forms/collections.scss +++ b/client/src/styles/partials/generic/forms/collections.scss @@ -29,14 +29,16 @@ fill: #ccc; } - &:not(.bd-disabled):hover { - svg { - fill: #fff; + &:not(.bd-disabled) { + &:hover { + svg { + fill: #fff; + } } } &.bd-disabled { - opacity: 0.5; + opacity: .5; } } } @@ -58,7 +60,7 @@ &:hover { svg { - fill: #FFF; + fill: #fff; } } } diff --git a/client/src/styles/partials/generic/forms/colourpickers.scss b/client/src/styles/partials/generic/forms/colourpickers.scss index 3473bda4..a9646e52 100644 --- a/client/src/styles/partials/generic/forms/colourpickers.scss +++ b/client/src/styles/partials/generic/forms/colourpickers.scss @@ -2,41 +2,45 @@ width: 50px; height: 30px; border-radius: 3px; - border: 1px solid hsla(0,0%,100%,.1); + border: 1px solid hsla(0, 0%, 100%, .1); } .bd-formColourpicker { position: relative; - .vc-chrome { + .vc-chrome { // sass-lint:disable-line class-name-format position: absolute; right: 0; top: 35px; border-radius: 3px; z-index: 9001; - .vc-chrome-body { + .vc-chrome-body { // sass-lint:disable-line class-name-format background: #36393e; - .vc-chrome-fields-wrap { - .vc-input__input { + .vc-chrome-fields-wrap { // sass-lint:disable-line class-name-format + .vc-input__input { // sass-lint:disable-line class-name-format background: #1e2124; color: #fff; box-shadow: inset 0 0 0 1px #000; } - .vc-chrome-toggle-icon-highlight { + .vc-chrome-toggle-icon-highlight { // sass-lint:disable-line class-name-format background: #1e2124; } - .vc-chrome-toggle-btn svg path { - fill: #fff; + .vc-chrome-toggle-btn { // sass-lint:disable-line class-name-format + svg { + path { + fill: #fff; + } + } } } } &:not(.bd-hide) { - animation: bd-colourpickerSlidein 0.1s ease-in; + animation: bd-colourpickerSlidein .1s ease-in; } } } diff --git a/client/src/styles/partials/generic/forms/dropdowns.scss b/client/src/styles/partials/generic/forms/dropdowns.scss index 58e4dc74..4749002c 100644 --- a/client/src/styles/partials/generic/forms/dropdowns.scss +++ b/client/src/styles/partials/generic/forms/dropdowns.scss @@ -17,8 +17,8 @@ .bd-dropdownCurrent { color: #f6f6f7; - background: rgba(0,0,0,.1); - border: 1px solid rgba(0,0,0,.3); + background: rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .3); border-radius: 3px; padding: 11px; cursor: default; @@ -40,7 +40,7 @@ border-style: solid; border-width: 5px 5px 2.5px; display: inline-block; - transition: transform 0.15s ease; + transition: transform .15s ease; transform: none; } } @@ -48,8 +48,10 @@ &:hover { border-color: #040405; - .bd-dropdownArrowWrap .bd-dropdownArrow { - border-color: #f6f6f7 transparent transparent; + .bd-dropdownArrowWrap { + &.bd-dropdownArrow { + border-color: #f6f6f7 transparent transparent; + } } } } @@ -59,9 +61,11 @@ border-color: #040405; } - .bd-dropdownArrowWrap .bd-dropdownArrow { - transform: rotateX(180deg) translateY(2px); - border-color: #f6f6f7 transparent transparent; + .bd-dropdownArrowWrap { + .bd-dropdownArrow { + transform: rotateX(180deg) translateY(2px); + border-color: #f6f6f7 transparent transparent; + } } } @@ -79,16 +83,16 @@ overflow-y: scroll; .bd-dropdownOption { - color: white; + color: #fff; padding: 11px; cursor: pointer; &:hover { - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(0, 0, 0, .1); } &.bd-dropdownOptionSelected { - background-color: rgba(0, 0, 0, 0.2); + background-color: rgba(0, 0, 0, .2); } } diff --git a/client/src/styles/partials/generic/forms/files.scss b/client/src/styles/partials/generic/forms/files.scss index 728fba75..487d193f 100644 --- a/client/src/styles/partials/generic/forms/files.scss +++ b/client/src/styles/partials/generic/forms/files.scss @@ -1,9 +1,11 @@ .bd-formFileinput { - .bd-button.bd-buttonPrimary { - padding: 3px 8px; - border-radius: 3px; - font-size: 12px; - font-weight: 400; + .bd-button { + &.bd-buttonPrimary { + padding: 3px 8px; + border-radius: 3px; + font-size: 12px; + font-weight: 400; + } } .bd-selectedFiles { diff --git a/client/src/styles/partials/generic/forms/guilds.scss b/client/src/styles/partials/generic/forms/guilds.scss index b6451635..199a2520 100644 --- a/client/src/styles/partials/generic/forms/guilds.scss +++ b/client/src/styles/partials/generic/forms/guilds.scss @@ -10,7 +10,7 @@ margin: 10px 10px 0 0; border-radius: 50%; cursor: pointer; - transition: border-radius .4s cubic-bezier(0.5, 0, 0.27, 1.55), background-color .4s cubic-bezier(0.5, 0, 0.27, 1.55), box-shadow .3s cubic-bezier(0.5, 0, 0.27, 1.55); + transition: border-radius .4s cubic-bezier(.5, 0, .27, 1.55), background-color .4s cubic-bezier(.5, 0, .27, 1.55), box-shadow .3s cubic-bezier(.5, 0, .27, 1.55); .bd-guildText { float: left; diff --git a/client/src/styles/partials/generic/forms/index.scss b/client/src/styles/partials/generic/forms/index.scss index 6a4ab7dd..ad049adb 100644 --- a/client/src/styles/partials/generic/forms/index.scss +++ b/client/src/styles/partials/generic/forms/index.scss @@ -1,12 +1,12 @@ -@import './main.scss'; -@import './switches.scss'; -@import './text.scss'; -@import './dropdowns.scss'; -@import './radios.scss'; -@import './sliders.scss'; -@import './colourpickers.scss'; -@import './keybinds.scss'; -@import './files.scss'; -@import './guilds.scss'; -@import './arrays.scss'; -@import './collections.scss'; +@import './main'; +@import './switches'; +@import './text'; +@import './dropdowns'; +@import './radios'; +@import './sliders'; +@import './colourpickers'; +@import './keybinds'; +@import './files'; +@import './guilds'; +@import './arrays'; +@import './collections'; diff --git a/client/src/styles/partials/generic/forms/keybinds.scss b/client/src/styles/partials/generic/forms/keybinds.scss index 1ec32f70..8005df93 100644 --- a/client/src/styles/partials/generic/forms/keybinds.scss +++ b/client/src/styles/partials/generic/forms/keybinds.scss @@ -2,8 +2,8 @@ padding: 10px; display: flex; margin-top: 10px; - background-color: rgba(0,0,0,.1); - border: 1px solid rgba(0,0,0,.3); + background-color: rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .3); transition: border .15s ease; border-radius: 3px; box-sizing: border-box; @@ -17,7 +17,7 @@ &.bd-keybindUnset { .bd-keybindSelected { - color: hsla(240,6%,97%,.3); + color: hsla(240, 6%, 97%, .3); font-weight: 600; } } diff --git a/client/src/styles/partials/generic/forms/main.scss b/client/src/styles/partials/generic/forms/main.scss index 115a9094..2df95a69 100644 --- a/client/src/styles/partials/generic/forms/main.scss +++ b/client/src/styles/partials/generic/forms/main.scss @@ -28,14 +28,15 @@ margin-top: 5px; margin-bottom: 0; line-height: 20px; - border-bottom: 0px solid rgba(114, 118, 126, 0.1); + border-bottom: 0 solid rgba(114, 118, 126, .1); } .bd-disabled & { - opacity: 0.6; + opacity: .6; - &, input { - cursor: not-allowed !important; + &, + input { + cursor: not-allowed !important; // sass-lint:disable-line no-important } } } diff --git a/client/src/styles/partials/generic/forms/radios.scss b/client/src/styles/partials/generic/forms/radios.scss index f64c94c7..afa0869e 100644 --- a/client/src/styles/partials/generic/forms/radios.scss +++ b/client/src/styles/partials/generic/forms/radios.scss @@ -22,8 +22,8 @@ } .bd-radio { - background: rgba(0,0,0,.1); - border: 1px solid rgba(0,0,0,.3); + background: rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .3); border-radius: 3px; padding: 11px; align-items: center; @@ -47,7 +47,7 @@ .bd-radioText { flex: 1 1 auto; - color: white; + color: #fff; word-wrap: break-word; width: 1px; } diff --git a/client/src/styles/partials/generic/forms/sliders.scss b/client/src/styles/partials/generic/forms/sliders.scss index d79f8df9..b418bff1 100644 --- a/client/src/styles/partials/generic/forms/sliders.scss +++ b/client/src/styles/partials/generic/forms/sliders.scss @@ -40,7 +40,7 @@ text-align: center; &::after { - content: ""; + content: ''; background-color: #4f545c; height: 24px; width: 2px; @@ -65,7 +65,7 @@ overflow: hidden; &::before { - content: ""; + content: ''; background-color: $colbdgreen; height: 8px; width: 5px; @@ -90,9 +90,9 @@ height: 24px; position: relative; pointer-events: none; - background: #FFF; + background: #fff; border: 1px solid #dcddde; - 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); + 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); margin-left: -5px; border-radius: 3px; box-sizing: border-box; diff --git a/client/src/styles/partials/generic/forms/switches.scss b/client/src/styles/partials/generic/forms/switches.scss index 7a3349c3..ceb5c300 100644 --- a/client/src/styles/partials/generic/forms/switches.scss +++ b/client/src/styles/partials/generic/forms/switches.scss @@ -6,7 +6,7 @@ justify-content: flex-start; -webkit-box-align: stretch; align-items: stretch; - transition: opacity 0.2s ease; + transition: opacity .2s ease; } .bd-switchWrapper { @@ -37,7 +37,7 @@ transition: background .15s ease-in-out, box-shadow .15s ease-in-out, border .15s ease-in-out; &::before { - content: ""; + content: ''; display: block; width: 18px; height: 18px; @@ -48,7 +48,7 @@ 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); + 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 { diff --git a/client/src/styles/partials/generic/forms/text.scss b/client/src/styles/partials/generic/forms/text.scss index ca8dd48e..8b3d2650 100644 --- a/client/src/styles/partials/generic/forms/text.scss +++ b/client/src/styles/partials/generic/forms/text.scss @@ -12,13 +12,11 @@ margin-left: 15px; } - input[type="text"], - input[type="number"], - input[type="password"] { + input { background: transparent; - border: none; + border: 0; color: #b9bbbe; - border-bottom: 2px solid rgba(114, 118, 126, 0.3); + border-bottom: 2px solid rgba(114, 118, 126, .3); outline: none; line-height: 24px; font-size: 100%; @@ -56,34 +54,9 @@ .bd-formTextarea { .bd-formTextareaWrap, - textarea.bd-textarea { - margin-top: 15px; - background: rgba(0, 0, 0, 0.1); - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 3px; - color: #b9bbbe; - overflow-y: scroll; - max-height: 140px; - transition: border-color .2s ease, color .2s ease; - - &:focus { - color: #fff; - border-color: #040405; - } - - @include scrollbar; - } - - div[contenteditable], - textarea { - padding: 11px; - cursor: text; - min-height: 45px; - } - textarea { background: transparent; - border: none; + border: 0; resize: none; outline: none; width: 100%; @@ -92,17 +65,48 @@ box-sizing: border-box; overflow-y: visible; max-height: 140px; + padding: 11px; + cursor: text; + min-height: 45px; + + &.bd-textarea { + margin-top: 15px; + background: rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .3); + border-radius: 3px; + color: #b9bbbe; + overflow-y: scroll; + max-height: 140px; + transition: border-color .2s ease, color .2s ease; + + &:focus { + color: #fff; + border-color: #040405; + } + + @include scrollbar; + } + } + + div { + &[contenteditable] { + padding: 11px; + cursor: text; + min-height: 45px; + } } } .bd-number { position: relative; - input[type="number"] { - &::-webkit-inner-spin-button, - ::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; + input { + &[type='number'] { + &::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } } } @@ -124,8 +128,14 @@ border-width: 2.5px 5px 5px; } - &:hover .bd-upArrow { - border-color: transparent transparent rgb(200, 200, 200); + &:hover { + &.bd-upArrow { + border-color: transparent transparent rgb(200, 200, 200); + } + + .bd-downArrow { + border-color: rgb(200, 200, 200) transparent transparent; + } } .bd-downArrow { @@ -133,17 +143,13 @@ border-style: solid; border-width: 5px 5px 2.5px; } - - &:hover .bd-downArrow { - border-color: rgb(200, 200, 200) transparent transparent; - } } } } .bd-textInput { - background-color: rgba(0, 0, 0, 0.1); - border: 1px solid rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .3); border-radius: 3px; box-sizing: border-box; color: #f6f6f7; @@ -162,7 +168,7 @@ transition: all .5s ease-in-out; &::before { - content: "Search by name, description or tag..."; + content: 'Search by name, description or tag...'; color: #f6f6f7; position: relative; top: -20px; diff --git a/client/src/styles/partials/generic/index.scss b/client/src/styles/partials/generic/index.scss index 1d2df6f9..d193ab04 100644 --- a/client/src/styles/partials/generic/index.scss +++ b/client/src/styles/partials/generic/index.scss @@ -1,14 +1,14 @@ -@import './spinners/index.scss'; -@import './scrollable.scss'; -@import './buttons.scss'; -@import './tabs.scss'; -@import './forms.scss'; -@import './forms/index.scss'; -@import './material-buttons.scss'; -@import './drawers.scss'; -@import './preformatted.scss'; -@import './refreshbtn.scss'; -@import './autocomplete.scss'; -@import './layouts.scss'; -@import './toasts.scss'; -@import './badges.scss'; +@import './spinners/index'; +@import './scrollable'; +@import './buttons'; +@import './tabs'; +@import './forms'; +@import './forms/index'; +@import './material-buttons'; +@import './drawers'; +@import './preformatted'; +@import './refreshbtn'; +@import './autocomplete'; +@import './layouts'; +@import './toasts'; +@import './badges'; diff --git a/client/src/styles/partials/generic/preformatted.scss b/client/src/styles/partials/generic/preformatted.scss index 3a60e390..a35dbc63 100644 --- a/client/src/styles/partials/generic/preformatted.scss +++ b/client/src/styles/partials/generic/preformatted.scss @@ -1,6 +1,6 @@ .bd-preWrap { - background: rgba(0, 0, 0, 0.1); - border: 1px solid rgba(0, 0, 0, 0.3); + background: rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .3); border-radius: 3px; color: #b9bbbe; white-space: pre-wrap; diff --git a/client/src/styles/partials/generic/refreshbtn.scss b/client/src/styles/partials/generic/refreshbtn.scss index 1f42578b..f92301e3 100644 --- a/client/src/styles/partials/generic/refreshbtn.scss +++ b/client/src/styles/partials/generic/refreshbtn.scss @@ -65,65 +65,67 @@ &.bd-refreshed { .bd-svgRefresh { - transition: .5s cubic-bezier(.4,0,0,1) .2s; + transition: .5s cubic-bezier(.4, 0, 0, 1) .2s; } - .bd-svgCancelLine:nth-of-type(1) { - transform-origin: bottom; - transition: .5s cubic-bezier(0,0,0,1) .1s, transform-origin 1ms; - } + .bd-svgCancelLine { + &:nth-of-type(1) { + transform-origin: bottom; + transition: .5s cubic-bezier(0, 0, 0, 1) .1s, transform-origin 1ms; + } - .bd-svgCancelLine:nth-of-type(2) { - transform-origin: left; - transition: .5s cubic-bezier(0,0,0,1), transform-origin 1ms; + &:nth-of-type(2) { + transform-origin: left; + transition: .5s cubic-bezier(0, 0, 0, 1), transform-origin 1ms; + } } .bd-svgCircle { stroke-dasharray: 36.5, 200; stroke-dashoffset: -7.5; transform-origin: center; - animation: bd-refreshCircleAnimIn 1s cubic-bezier(.4,0,0,1); + animation: bd-refreshCircleAnimIn 1s cubic-bezier(.4, 0, 0, 1); } .bd-svgArrow { transform-origin: center; - animation: bd-refreshArrowRotate 1s cubic-bezier(.4,0,0,1); + animation: bd-refreshArrowRotate 1s cubic-bezier(.4, 0, 0, 1); } } &.bd-refreshing { .bd-svgRefresh { - transition: .5s cubic-bezier(.4,0,0,1); + transition: .5s cubic-bezier(.4, 0, 0, 1); opacity: .3; } .bd-svgCancelLine { opacity: 1; - } - .bd-svgCancelLine:nth-of-type(1) { - transform-origin: top; - transform: scale(1,1); - transition: .5s cubic-bezier(0,0,0,1) .4s, transform-origin 1ms; - } + &:nth-of-type(1) { + transform-origin: top; + transform: scale(1, 1); + transition: .5s cubic-bezier(0, 0, 0, 1) .4s, transform-origin 1ms; + } - .bd-svgCancelLine:nth-of-type(2) { - transform-origin: right; - transform: scale(1,1); - transition: .5s cubic-bezier(0,0,0,1) .3s, transform-origin 1ms; + &:nth-of-type(2) { + transform-origin: right; + transform: scale(1, 1); + transition: .5s cubic-bezier(0, 0, 0, 1) .3s, transform-origin 1ms; + } } .bd-svgCircle { stroke-dasharray: 36.5, 200; stroke-dashoffset: -44; transform-origin: center; - animation: bd-refreshCircleAnimOut 1s cubic-bezier(.4,0,0,1); + animation: bd-refreshCircleAnimOut 1s cubic-bezier(.4, 0, 0, 1); } .bd-svgArrow { transform-origin: center; transform: rotate(360deg); - transition: 1s cubic-bezier(.4,0,0,1); + transition: 1s cubic-bezier(.4, 0, 0, 1); } .bd-svgArrowTriangle { @@ -139,14 +141,14 @@ .bd-svgCancelLine { opacity: .4; - } - .bd-svgCancelLine:nth-of-type(1) { - transform: scale(1,0); - } + &:nth-of-type(1) { + transform: scale(1, 0); + } - .bd-svgCancelLine:nth-of-type(2) { - transform: scale(0,1); + &:nth-of-type(2) { + transform: scale(0, 1); + } } .bd-svgCircle { diff --git a/client/src/styles/partials/generic/scrollable.scss b/client/src/styles/partials/generic/scrollable.scss index 5bdad104..8eceb202 100644 --- a/client/src/styles/partials/generic/scrollable.scss +++ b/client/src/styles/partials/generic/scrollable.scss @@ -3,13 +3,12 @@ width: 100%; .bd-scroller { + @include scrollbar; display: flex; flex-grow: 1; flex-direction: column; overflow-y: auto; overflow-x: hidden; - - @include scrollbar; } &.bd-dark { diff --git a/client/src/styles/partials/generic/spinners/0.scss b/client/src/styles/partials/generic/spinners/0.scss index e9cd1809..b0670197 100644 --- a/client/src/styles/partials/generic/spinners/0.scss +++ b/client/src/styles/partials/generic/spinners/0.scss @@ -2,13 +2,13 @@ width: 40px; height: 40px; position: relative; - -webkit-animation: bd-spinnerAnim 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinnerAnim 2s cubic-bezier(0.4, 0, 0, 1) infinite; + -webkit-animation: bd-spinnerAnim 2s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinnerAnim 2s cubic-bezier(.4, 0, 0, 1) infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; &::before { - content: ""; + content: ''; background: #fff; height: 10px; width: 10px; @@ -16,14 +16,14 @@ border-radius: 50%; right: 5px; top: 15px; - -webkit-animation: bd-spinnerAnimBefore 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinnerAnimBefore 2s cubic-bezier(0.4, 0, 0, 1) infinite; + -webkit-animation: bd-spinnerAnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinnerAnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; } &::after { - content: ""; + content: ''; background: #fff; height: 10px; width: 10px; @@ -31,8 +31,8 @@ border-radius: 50%; left: 5px; top: 15px; - -webkit-animation: bd-spinnerAnimAfter 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinnerAnimAfter 2s cubic-bezier(0.4, 0, 0, 1) infinite; + -webkit-animation: bd-spinnerAnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinnerAnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; } diff --git a/client/src/styles/partials/generic/spinners/1.scss b/client/src/styles/partials/generic/spinners/1.scss index eca55808..38b9a42a 100644 --- a/client/src/styles/partials/generic/spinners/1.scss +++ b/client/src/styles/partials/generic/spinners/1.scss @@ -2,7 +2,7 @@ width: 40px; height: 40px; position: relative; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat; + 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 index 30f6ce43..dfda0cce 100644 --- a/client/src/styles/partials/generic/spinners/10.scss +++ b/client/src/styles/partials/generic/spinners/10.scss @@ -4,63 +4,63 @@ position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; - animation: bd-spinner10Anim 1s cubic-bezier(.4,0,0,1) infinite; + animation: bd-spinner10Anim 1s cubic-bezier(.4, 0, 0, 1) infinite; &::before { - content: ""; + content: ''; left: 0; top: 0; width: 40px; height: 40px; position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; - animation: bd-spinner10Anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite; + animation: bd-spinner10Anim1 1s cubic-bezier(.4, 0, 0, 1) -.05s infinite; } &::after { - content: ""; + content: ''; left: 0; top: 0; width: 40px; height: 40px; position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; - animation: bd-spinner10Anim1 1s cubic-bezier(.4,0,0,1) infinite; + animation: bd-spinner10Anim1 1s cubic-bezier(.4, 0, 0, 1) infinite; } } @keyframes bd-spinner10Anim { 0% { - transform: scale(0.8) rotate(0.01deg); + transform: scale(.8) rotate(.01deg); } 40% { - transform: scale(1.3) rotate(0.01deg); + transform: scale(1.3) rotate(.01deg); } 80% { - transform: scale(1) rotate(0.01deg); + transform: scale(1) rotate(.01deg); } 100% { - transform: scale(0.8) rotate(0.01deg); + transform: scale(.8) rotate(.01deg); } } @keyframes bd-spinner10Anim1 { 0% { - transform: rotate(-25deg) rotate(0.01deg); + transform: rotate(-25deg) rotate(.01deg); } 80% { - transform: rotate(375deg) rotate(0.01deg); + transform: rotate(375deg) rotate(.01deg); } 100% { - transform: rotate(335deg) rotate(0.01deg); + transform: rotate(335deg) rotate(.01deg); } } diff --git a/client/src/styles/partials/generic/spinners/2.scss b/client/src/styles/partials/generic/spinners/2.scss index 08c982b3..465190b3 100644 --- a/client/src/styles/partials/generic/spinners/2.scss +++ b/client/src/styles/partials/generic/spinners/2.scss @@ -2,7 +2,7 @@ width: 40px; height: 40px; position: relative; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat; + 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 index 7be1b9c2..66b2c880 100644 --- a/client/src/styles/partials/generic/spinners/3.scss +++ b/client/src/styles/partials/generic/spinners/3.scss @@ -6,7 +6,7 @@ -webkit-backface-visibility: hidden; &::before { - content: ""; + content: ''; background: #fff; height: 30px; width: 30px; @@ -14,14 +14,14 @@ border-radius: 50%; left: 5px; top: 5px; - -webkit-animation: bd-spinner3AnimBefore 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner3AnimBefore 3s cubic-bezier(0.4, 0, 0, 1) infinite; + -webkit-animation: bd-spinner3AnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinner3AnimBefore 3s cubic-bezier(.4, 0, 0, 1) infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; } &::after { - content: ""; + content: ''; background: #202225; height: 20px; width: 20px; @@ -29,7 +29,7 @@ border-radius: 50%; left: 10px; top: 10px; - -webkit-animation: bd-spinner3AnimAfter 2s cubic-bezier(0.4, 0, 0, 1) infinite; + -webkit-animation: bd-spinner3AnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite; animation: bd-spinner3AnimAfter 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; @@ -38,68 +38,68 @@ @-webkit-keyframes bd-spinner3AnimBefore { 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } 50% { - -webkit-transform: scale(1.2)rotate(0.01deg); - transform: scale(1.2)rotate(0.01deg); + -webkit-transform: scale(1.2) rotate(.01deg); + transform: scale(1.2) rotate(.01deg); } 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } } @keyframes bd-spinner3AnimBefore { 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } 50% { - -webkit-transform: scale(0.8)rotate(0.01deg); - transform: scale(1.2)rotate(0.01deg); + -webkit-transform: scale(.8) rotate(.01deg); + transform: scale(1.2) rotate(.01deg); } 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } } @-webkit-keyframes bd-spinner3AnimAfter { 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } 50% { - -webkit-transform: scale(0.4)rotate(0.01deg); - transform: scale(0.4)rotate(0.01deg); + -webkit-transform: scale(.4) rotate(.01deg); + transform: scale(.4) rotate(.01deg); } 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } } @keyframes bd-spinner3AnimAfter { 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } 50% { - -webkit-transform: scale(0.4)rotate(0.01deg); - transform: scale(0.4)rotate(0.01deg); + -webkit-transform: scale(.4) rotate(.01deg); + transform: scale(.4) rotate(.01deg); } 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } } diff --git a/client/src/styles/partials/generic/spinners/4.scss b/client/src/styles/partials/generic/spinners/4.scss index a03e4924..dc367971 100644 --- a/client/src/styles/partials/generic/spinners/4.scss +++ b/client/src/styles/partials/generic/spinners/4.scss @@ -2,13 +2,13 @@ width: 40px; height: 40px; position: relative; - -webkit-animation: bd-spinner4Anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite; - animation: bd-spinner4Anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite; + -webkit-animation: bd-spinner4Anim 1s cubic-bezier(.9, -.64, .05, 1.44) infinite; + animation: bd-spinner4Anim 1s cubic-bezier(.9, -.64, .05, 1.44) infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; &::before { - content: ""; + content: ''; background: #fff; height: 10px; width: 10px; @@ -21,7 +21,7 @@ } &::after { - content: ""; + content: ''; background: #fff; height: 10px; width: 10px; diff --git a/client/src/styles/partials/generic/spinners/5.scss b/client/src/styles/partials/generic/spinners/5.scss index 3fd7e11a..ea51bdfe 100644 --- a/client/src/styles/partials/generic/spinners/5.scss +++ b/client/src/styles/partials/generic/spinners/5.scss @@ -6,7 +6,7 @@ -webkit-backface-visibility: hidden; &::before { - content: ""; + content: ''; background: #fff; height: 10px; width: 10px; @@ -14,14 +14,14 @@ border-radius: 5px; left: 5px; bottom: 10px; - -webkit-animation: bd-spinnerAnimBefore 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner5AnimBefore 2s cubic-bezier(0.4, 0, 0, 1) -1s infinite; + -webkit-animation: bd-spinnerAnimBefore 2s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinner5AnimBefore 2s cubic-bezier(.4, 0, 0, 1) -1s infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; } &::after { - content: ""; + content: ''; background: #fff; height: 10px; width: 10px; @@ -29,8 +29,8 @@ border-radius: 5px; left: 5px; top: 10px; - -webkit-animation: bd-spinnerAnimAfter 2s cubic-bezier(0.4, 0, 0, 1) infinite; - animation: bd-spinner5AnimAfter 2s cubic-bezier(0.4, 0, 0, 1) infinite; + -webkit-animation: bd-spinnerAnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinner5AnimAfter 2s cubic-bezier(.4, 0, 0, 1) infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; } @@ -38,13 +38,13 @@ @-webkit-keyframes bd-spinner5AnimBefore { 0% { - left: 0px; + left: 0; width: 10px; height: 10px; } 25% { - left: 0px; + left: 0; width: 30px; height: 6px; } @@ -56,13 +56,13 @@ } 75% { - left: 0px; + left: 0; width: 30px; height: 6px; } 100% { - left: 0px; + left: 0; width: 10px; height: 10px; } @@ -70,13 +70,13 @@ @keyframes bd-spinner5AnimBefore { 0% { - left: 0px; + left: 0; width: 10px; height: 10px; } 25% { - left: 0px; + left: 0; width: 30px; height: 6px; } @@ -88,13 +88,13 @@ } 75% { - left: 0px; + left: 0; width: 30px; height: 6px; } 100% { - left: 0px; + left: 0; width: 10px; height: 10px; } diff --git a/client/src/styles/partials/generic/spinners/6.scss b/client/src/styles/partials/generic/spinners/6.scss index 681b3b27..fc8baffb 100644 --- a/client/src/styles/partials/generic/spinners/6.scss +++ b/client/src/styles/partials/generic/spinners/6.scss @@ -9,7 +9,7 @@ transform: rotate(45deg); &::before { - content: ""; + content: ''; background: #fff; height: 10px; width: 10px; @@ -23,7 +23,7 @@ } &::after { - content: ""; + content: ''; background: #fff; height: 10px; width: 10px; diff --git a/client/src/styles/partials/generic/spinners/7.scss b/client/src/styles/partials/generic/spinners/7.scss index 51b7ac64..7017ff5c 100644 --- a/client/src/styles/partials/generic/spinners/7.scss +++ b/client/src/styles/partials/generic/spinners/7.scss @@ -4,26 +4,26 @@ position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; - -webkit-animation: bd-spinner7Anim 1s cubic-bezier(.4,0,0,1) infinite; - animation: bd-spinner7Anim 1s cubic-bezier(.4,0,0,1) infinite; + -webkit-animation: bd-spinner7Anim 1s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinner7Anim 1s cubic-bezier(.4, 0, 0, 1) infinite; &::before { - content: ""; + content: ''; background: #fff; height: 8px; width: 8px; position: absolute; border-radius: 50%; - left: 0px; + left: 0; top: 16px; - -webkit-animation: bd-spinner7AnimBefore 1s cubic-bezier(.2,0,0,.2) infinite; - animation: bd-spinner7AnimBefore 1s cubic-bezier(.2,0,0,.2) infinite; + -webkit-animation: bd-spinner7AnimBefore 1s cubic-bezier(.2, 0, 0, .2) infinite; + animation: bd-spinner7AnimBefore 1s cubic-bezier(.2, 0, 0, .2) infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; } &::after { - content: ""; + content: ''; background: #fff; height: 8px; width: 8px; @@ -31,8 +31,8 @@ border-radius: 50%; left: 15px; top: 16px; - -webkit-animation: bd-spinner7AnimAfter 1s cubic-bezier(.4,0,0,1) infinite; - animation: bd-spinner7AnimAfter 1s cubic-bezier(.4,0,0,1) infinite; + -webkit-animation: bd-spinner7AnimAfter 1s cubic-bezier(.4, 0, 0, 1) infinite; + animation: bd-spinner7AnimAfter 1s cubic-bezier(.4, 0, 0, 1) infinite; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-box-shadow: 15px 0 0 0 #fff; @@ -42,67 +42,67 @@ @-webkit-keyframes bd-spinner7Anim { 0% { - -webkit-transform: translate(0,0)rotate(0.01deg); - transform: translate(0,0)rotate(0.01deg); + -webkit-transform: translate(0, 0) rotate(.01deg); + transform: translate(0, 0) rotate(.01deg); } 100% { - -webkit-transform: translate(30px,0)rotate(0.01deg); - transform: translate(30px,0)rotate(0.01deg); + -webkit-transform: translate(30px, 0) rotate(.01deg); + transform: translate(30px, 0) rotate(.01deg); } } @keyframes bd-spinner7Anim { 0% { - -webkit-transform: translate(0,0)rotate(0.01deg); - transform: translate(0,0)rotate(0.01deg); + -webkit-transform: translate(0, 0) rotate(.01deg); + transform: translate(0, 0) rotate(.01deg); } 100% { - -webkit-transform: translate(30px,0)rotate(0.01deg); - transform: translate(30px,0)rotate(0.01deg); + -webkit-transform: translate(30px, 0) rotate(.01deg); + transform: translate(30px, 0) rotate(.01deg); } } @-webkit-keyframes bd-spinner7AnimBefore { 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } 30% { - -webkit-transform: scale(1.4)rotate(0.01deg); - transform: scale(1.4)rotate(0.01deg); + -webkit-transform: scale(1.4) rotate(.01deg); + transform: scale(1.4) rotate(.01deg); } 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } } @keyframes bd-spinner7AnimBefore { 0% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } 30% { - -webkit-transform: scale(1.4)rotate(0.01deg); - transform: scale(1.4)rotate(0.01deg); + -webkit-transform: scale(1.4) rotate(.01deg); + transform: scale(1.4) rotate(.01deg); } 100% { - -webkit-transform: scale(1)rotate(0.01deg); - transform: scale(1)rotate(0.01deg); + -webkit-transform: scale(1) rotate(.01deg); + transform: scale(1) rotate(.01deg); } } @-webkit-keyframes bd-spinner7AnimAfter { 0% { opacity: 1; - -webkit-transform: translate(0,0)rotate(0.01deg); - transform: translate(0,0)rotate(0.01deg); + -webkit-transform: translate(0, 0) rotate(.01deg); + transform: translate(0, 0) rotate(.01deg); } 40% { @@ -111,16 +111,16 @@ 100% { opacity: 1; - -webkit-transform: translate(-45px,0)rotate(0.01deg); - transform: translate(-45px,0)rotate(0.01deg); + -webkit-transform: translate(-45px, 0) rotate(.01deg); + transform: translate(-45px, 0) rotate(.01deg); } } @keyframes bd-spinner7AnimAfter { 0% { opacity: 1; - -webkit-transform: translate(0,0)rotate(0.01deg); - transform: translate(0,0)rotate(0.01deg); + -webkit-transform: translate(0, 0) rotate(.01deg); + transform: translate(0, 0) rotate(.01deg); } 40% { @@ -129,7 +129,7 @@ 100% { opacity: 1; - -webkit-transform: translate(-45px,0)rotate(0.01deg); - transform: translate(-45px,0)rotate(0.01deg); + -webkit-transform: translate(-45px, 0) rotate(.01deg); + transform: translate(-45px, 0) rotate(.01deg); } } diff --git a/client/src/styles/partials/generic/spinners/8.scss b/client/src/styles/partials/generic/spinners/8.scss index c1d2b0f3..ae44f1f0 100644 --- a/client/src/styles/partials/generic/spinners/8.scss +++ b/client/src/styles/partials/generic/spinners/8.scss @@ -6,62 +6,62 @@ -webkit-backface-visibility: hidden; &::before { - content: ""; + content: ''; left: 0; top: 0; width: 40px; height: 40px; position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; - animation: bd-spinner8AnimBefore 1.5s cubic-bezier(.4,0,0,1) infinite; + animation: bd-spinner8AnimBefore 1.5s cubic-bezier(.4, 0, 0, 1) infinite; } &::after { - content: ""; + content: ''; left: 0; top: 0; width: 40px; height: 40px; position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; - animation: bd-spinner8AnimAfter 1.5s cubic-bezier(.4,0,0,1) infinite; + animation: bd-spinner8AnimAfter 1.5s cubic-bezier(.4, 0, 0, 1) infinite; } } @keyframes bd-spinner8AnimBefore { 0% { - transform: translate(0,0)rotate(0.01deg); + transform: translate(0, 0) rotate(.01deg); opacity: 1; } 50% { - transform: translate(-3px,0)rotate(0.01deg); + transform: translate(-3px, 0) rotate(.01deg); opacity: .6; } 100% { - transform: translate(0,0)rotate(0.01deg); + transform: translate(0, 0) rotate(.01deg); opacity: 1; } } @keyframes bd-spinner8AnimAfter { 0% { - transform: translate(0,0)rotate(0.01deg); + transform: translate(0, 0) rotate(.01deg); opacity: 1; } 50% { - transform: translate(3px,0)rotate(0.01deg); + transform: translate(3px, 0) rotate(.01deg); opacity: .6; } 100% { - transform: translate(0,0)rotate(0.01deg); + transform: translate(0, 0) rotate(.01deg); opacity: 1; } } diff --git a/client/src/styles/partials/generic/spinners/9.scss b/client/src/styles/partials/generic/spinners/9.scss index 7f71495b..5df61036 100644 --- a/client/src/styles/partials/generic/spinners/9.scss +++ b/client/src/styles/partials/generic/spinners/9.scss @@ -6,26 +6,26 @@ -webkit-backface-visibility: hidden; &::before { - content: ""; + content: ''; left: 0; top: 0; width: 40px; height: 40px; position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; - animation: bd-spinner9Anim 1s cubic-bezier(.4,0,0,1) -.05s infinite; + animation: bd-spinner9Anim 1s cubic-bezier(.4, 0, 0, 1) -.05s infinite; } &::after { - content: ""; + content: ''; left: 0; top: 0; width: 40px; height: 40px; position: absolute; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: bd-spinner9Anim 1s ease infinite; @@ -34,18 +34,18 @@ @keyframes bd-spinner9Anim { 0% { - transform: scale(1) rotate(0.01deg); + transform: scale(1) rotate(.01deg); } 20% { - transform: scale(1.3) rotate(0.01deg); + transform: scale(1.3) rotate(.01deg); } 40% { - transform: scale(0.9) rotate(0.01deg); + transform: scale(.9) rotate(.01deg); } 100% { - transform: scale(1) rotate(0.01deg); + transform: scale(1) rotate(.01deg); } } diff --git a/client/src/styles/partials/generic/spinners/index.scss b/client/src/styles/partials/generic/spinners/index.scss index fa8058f7..cf6997d8 100644 --- a/client/src/styles/partials/generic/spinners/index.scss +++ b/client/src/styles/partials/generic/spinners/index.scss @@ -1,11 +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'; +@import './0'; +@import './1'; +@import './2'; +@import './3'; +@import './4'; +@import './5'; +@import './6'; +@import './7'; +@import './8'; +@import './9'; +@import './10'; diff --git a/client/src/styles/partials/generic/tabs.scss b/client/src/styles/partials/generic/tabs.scss index 937ca8aa..5bb1f9da 100644 --- a/client/src/styles/partials/generic/tabs.scss +++ b/client/src/styles/partials/generic/tabs.scss @@ -5,14 +5,14 @@ .bd-button { background: transparent; - border-bottom: 2px solid rgba(114, 118, 126, 0.3); + border-bottom: 2px solid rgba(114, 118, 126, .3); cursor: pointer; margin-right: 15px; padding: 15px 0; color: #87909c; font-size: 14px; font-weight: 500; - transition: color 0.2s ease, border-bottom-color 0.2s ease; + transition: color .2s ease, border-bottom-color .2s ease; flex: 0 0; display: flex; @@ -63,12 +63,11 @@ flex: 0 0; cursor: pointer; - .material-design-icon, .bd-materialDesignIcon { display: flex; align-items: center; fill: #87909c; - transition: fill 0.2s ease; + transition: fill .2s ease; svg { width: 16px; diff --git a/client/src/styles/partials/generic/toasts.scss b/client/src/styles/partials/generic/toasts.scss index c9d93da0..dd6118f6 100644 --- a/client/src/styles/partials/generic/toasts.scss +++ b/client/src/styles/partials/generic/toasts.scss @@ -15,10 +15,10 @@ .bd-toast { position: relative; animation: bd-toastUp 300ms ease; - background: #36393F; + background: #36393f; padding: 10px; border-radius: 5px; - box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2); + box-shadow: 0 0 0 1px rgba(32, 34, 37, .6), 0 2px 10px 0 rgba(0, 0, 0, .2); font-weight: 500; color: #fff; user-select: text; @@ -44,6 +44,10 @@ &.bd-toastHasIcon { padding-left: 30px; } + + &.bd-toastClosing { + animation: bd-toastDown 300ms ease; + } } .bd-toastIcon { @@ -58,11 +62,7 @@ overflow: hidden; svg { - fill: white; + fill: #fff; } } - - .bd-toast.bd-toastClosing { - animation: bd-toastDown 300ms ease; - } } diff --git a/client/src/styles/partials/helpers.scss b/client/src/styles/partials/helpers.scss index 475688f9..9f264b3c 100644 --- a/client/src/styles/partials/helpers.scss +++ b/client/src/styles/partials/helpers.scss @@ -2,14 +2,18 @@ color: $colerr; } -.bd-p { +%bd-p { color: $coldimwhite; font-size: 14px; font-weight: 500; margin: 10px 0; } +.bd-p { + @extend %bd-p; +} + .bd-hint { - @extend .bd-p; + @extend %bd-p; color: #72767d; } diff --git a/client/src/styles/partials/index.scss b/client/src/styles/partials/index.scss index 4fa884bb..bc3324a7 100644 --- a/client/src/styles/partials/index.scss +++ b/client/src/styles/partials/index.scss @@ -1,12 +1,12 @@ -@import './variables/index.scss'; -@import './mixins/index.scss'; +@import './variables/index'; +@import './mixins/index'; -@import './sidebarview/index.scss'; -@import './bdsettings/index.scss'; -@import './generic/index.scss'; -@import './modals/index.scss'; +@import './sidebarview/index'; +@import './bdsettings/index'; +@import './generic/index'; +@import './modals/index'; -@import './discordoverrides.scss'; -@import './helpers.scss'; -@import './misc.scss'; -@import './emotes.scss'; +@import './discordoverrides'; +@import './helpers'; +@import './misc'; +@import './emotes'; diff --git a/client/src/styles/partials/misc.scss b/client/src/styles/partials/misc.scss index 7987a568..67526394 100644 --- a/client/src/styles/partials/misc.scss +++ b/client/src/styles/partials/misc.scss @@ -1,3 +1,8 @@ -.edit-message .markup.mutable { - display: none; +// sass-lint:disable class-name-format +.edit-message { + .markup { + &.mutable { + display: none; + } + } } diff --git a/client/src/styles/partials/mixins/index.scss b/client/src/styles/partials/mixins/index.scss index e99a7812..dabe4532 100644 --- a/client/src/styles/partials/mixins/index.scss +++ b/client/src/styles/partials/mixins/index.scss @@ -1 +1 @@ -@import './scrollbar.scss'; +@import './scrollbar'; diff --git a/client/src/styles/partials/mixins/scrollbar.scss b/client/src/styles/partials/mixins/scrollbar.scss index 5ea45aa3..e633277a 100644 --- a/client/src/styles/partials/mixins/scrollbar.scss +++ b/client/src/styles/partials/mixins/scrollbar.scss @@ -5,7 +5,6 @@ &::-webkit-scrollbar-thumb { background-color: #1e2124; - border-color: #36393e; border-color: transparent; } @@ -20,7 +19,6 @@ &::-webkit-scrollbar-track-piece { background-color: #2f3136; - border-color: #36393e; border-color: transparent; } } diff --git a/client/src/styles/partials/modals/backdrop.scss b/client/src/styles/partials/modals/backdrop.scss index 065f4eb1..a433a9d2 100644 --- a/client/src/styles/partials/modals/backdrop.scss +++ b/client/src/styles/partials/modals/backdrop.scss @@ -1,17 +1,17 @@ .bd-backdrop { position: fixed; - right: 0px; - left: 0px; - top: 0px; - bottom: 0px; + right: 0; + left: 0; + top: 0; + bottom: 0; background: #000; opacity: .85; padding: 20px; z-index: 9000; justify-content: center; + animation: bd-backdropIn .22s ease; - animation: bd-backdropIn 0.22s ease; &.bd-backdropOut { - animation: bd-backdropOut 0.22s ease; + animation: bd-backdropOut .22s ease; } } diff --git a/client/src/styles/partials/modals/error-modal.scss b/client/src/styles/partials/modals/error-modal.scss index 889199e8..be31f8a6 100644 --- a/client/src/styles/partials/modals/error-modal.scss +++ b/client/src/styles/partials/modals/error-modal.scss @@ -1,25 +1,46 @@ -.bd-modal.bd-err { - .bd-modalHeader .bd-modalIcon svg { - fill: $colerr; - } +.bd-modal { + &.bd-err { + .bd-modalHeader { + .bd-modalIcon { + svg { + fill: $colerr; + } + } + } - .bd-modalBody { - padding-bottom: 15px; - min-height: 70px; + .bd-modalBody { + padding-bottom: 15px; + min-height: 70px; + } } } -.bd-modalError .bd-modalErrorTitle { - padding: 5px; - background: rgba(0,0,0,.3); - border-radius: 3px 3px 0 0; -} - .bd-modalError { margin-top: 5px; + .bd-modalErrorTitle { + padding: 5px; + background: rgba(0, 0, 0, .3); + border-radius: 3px 3px 0 0; + } + + .bd-modalErrorBody { + white-space: pre-wrap; + font-size: 12px; + font-family: 'Consolas'; + padding: 0 5px; + border-radius: 3px; + max-height: 100px; + width: auto; + transition: transform .2s ease, margin-top .2s ease, opacity .2s ease; + transform: scaleY(0) translateY(0%); + margin-top: -50%; + opacity: 0; + } + .bd-scrollerWrap { - background: rgba(0,0,0,.2); + background: rgba(0, 0, 0, .2); + opacity: 0; .bd-scroller { overflow-x: auto; @@ -30,37 +51,21 @@ } } } -} -.bd-modalError .bd-scrollerWrap { - opacity: 0; -} + &.bd-open { + .bd-modalErrorBody { + transform: scaleY(1) translateY(0%); + margin-top: 0%; + opacity: 1; + user-select: all; -.bd-modalError.bd-open { - .bd-modalErrorBody { - transform: scaleY(1) translateY(0%); - margin-top: 0%; - opacity: 1; - user-select: all; - span { - font-weight: 700; + span { + font-weight: 700; + } + } + + .bd-scrollerWrap { + opacity: 1; } } - .bd-scrollerWrap { - opacity: 1; - } -} - -.bd-modalError .bd-modalErrorBody { - white-space: pre-wrap; - font-size: 12px; - font-family: 'Consolas'; - padding: 0 5px; - border-radius: 3px; - max-height: 100px; - width: auto; - transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease; - transform: scaleY(0) translateY(0%); - margin-top: -50%; - opacity: 0; } diff --git a/client/src/styles/partials/modals/footer-alert.scss b/client/src/styles/partials/modals/footer-alert.scss index 3cb2765b..e77be503 100644 --- a/client/src/styles/partials/modals/footer-alert.scss +++ b/client/src/styles/partials/modals/footer-alert.scss @@ -3,8 +3,8 @@ margin: -64px 10px 10px; height: 0; display: flex; - background-color: rgba(32, 34, 37, 0.9); - box-shadow: 0 2px 10px 0 rgba(0,0,0,.2); + background-color: rgba(32, 34, 37, .9); + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2); padding: 10px 10px 10px 16px; overflow: hidden; border-radius: 5px; @@ -15,7 +15,7 @@ &.bd-warn { background-color: $colerr; - animation: bd-warnShake 0.4s; + animation: bd-warnShake .4s; } &.bd-active { diff --git a/client/src/styles/partials/modals/header.scss b/client/src/styles/partials/modals/header.scss index c4226158..8a8e846c 100644 --- a/client/src/styles/partials/modals/header.scss +++ b/client/src/styles/partials/modals/header.scss @@ -3,7 +3,6 @@ padding: 15px; flex: 0 0; -webkit-transition: -webkit-box-shadow .1s ease-out; - transition: -webkit-box-shadow .1s ease-out; transition: box-shadow .1s ease-out; .bd-modalHeadertext { @@ -14,8 +13,10 @@ padding: 1px; } - .bd-modalIcon .bd-materialDesignIcon { - margin-right: 5px; + .bd-modalIcon { + .bd-materialDesignIcon { + margin-right: 5px; + } } .bd-modalX { @@ -44,7 +45,9 @@ } } -.bd-modalScrolled .bd-modalHeader { - -webkit-box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3); - box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3); +.bd-modalScrolled { + .bd-modalHeader { + -webkit-box-shadow: 0 1px 0 0 rgba(24, 25, 28, .3), 0 1px 2px 0 rgba(24, 25, 28, .3); + box-shadow: 0 1px 0 0 rgba(24, 25, 28, .3), 0 1px 2px 0 rgba(24, 25, 28, .3); + } } diff --git a/client/src/styles/partials/modals/index.scss b/client/src/styles/partials/modals/index.scss index 722a1aca..723202c8 100644 --- a/client/src/styles/partials/modals/index.scss +++ b/client/src/styles/partials/modals/index.scss @@ -1,10 +1,10 @@ -@import './backdrop.scss'; -@import './modals.scss'; -@import './header.scss'; -@import './footer-alert.scss'; +@import './backdrop'; +@import './modals'; +@import './header'; +@import './footer-alert'; -@import './basic-modal.scss'; -@import './error-modal.scss'; -@import './settings-modal.scss'; -@import './permission-modal.scss'; -@import './input-modal.scss'; +@import './basic-modal'; +@import './error-modal'; +@import './settings-modal'; +@import './permission-modal'; +@import './input-modal'; diff --git a/client/src/styles/partials/modals/modals.scss b/client/src/styles/partials/modals/modals.scss index a7ec57aa..65066f2b 100644 --- a/client/src/styles/partials/modals/modals.scss +++ b/client/src/styles/partials/modals/modals.scss @@ -1,5 +1,5 @@ .bd-modalWrap { - transition: all 0.2s ease; + transition: all .2s ease; width: 100%; height: 100%; position: absolute; @@ -14,7 +14,6 @@ .bd-modal { position: fixed; align-content: space-around; - display: flex; border-radius: 8px; width: 100%; height: 100%; @@ -22,21 +21,19 @@ top: 0; user-select: none; padding: 60px; - transform: scale(1) translateZ(0px); + transform: scale(1) translateZ(0); -webkit-box-direction: normal; -webkit-box-orient: vertical; - display: -webkit-box; - display: -ms-flexbox; display: flex; align-items: center; box-sizing: border-box; pointer-events: none; z-index: 9001; justify-content: center; - animation: bd-modalIn 0.22s ease; + animation: bd-modalIn .22s ease; &.bd-modalOut { - animation: bd-modalOut 0.22s ease; + animation: bd-modalOut .22s ease; } .bd-modalInner { @@ -46,8 +43,6 @@ pointer-events: auto; -webkit-box-direction: normal; -webkit-box-orient: vertical; - display: -webkit-box; - display: -ms-flexbox; display: flex; flex-grow: 1; border-radius: 4px; @@ -60,10 +55,12 @@ padding: 0 15px; display: flex; - .bd-scrollerWrap .bd-scroller { - color: #fff; - margin: 0; - padding: 0; + .bd-scrollerWrap { + .bd-scroller { + color: #fff; + margin: 0; + padding: 0; + } } } diff --git a/client/src/styles/partials/modals/permission-modal.scss b/client/src/styles/partials/modals/permission-modal.scss index e3c2d550..ee80f198 100644 --- a/client/src/styles/partials/modals/permission-modal.scss +++ b/client/src/styles/partials/modals/permission-modal.scss @@ -7,7 +7,7 @@ .bd-permCheck { -webkit-box-sizing: border-box; - background: hsla(0,0%,100%,.2); + background: hsla(0, 0%, 100%, .2); border-radius: 18px; box-sizing: border-box; height: 36px; @@ -33,7 +33,7 @@ justify-content: center; min-height: 45px; padding: 13px 0; - border-bottom: 1px solid hsla(0,0%,100%,.1); + border-bottom: 1px solid hsla(0, 0%, 100%, .1); .bd-permName { color: #fff; @@ -43,7 +43,7 @@ } .bd-permDesc { - color: hsla(0,0%,100%,.2); + color: hsla(0, 0%, 100%, .2); font-size: 12px; line-height: 15px; } diff --git a/client/src/styles/partials/modals/settings-modal.scss b/client/src/styles/partials/modals/settings-modal.scss index 5c7bc7d0..70721fe3 100644 --- a/client/src/styles/partials/modals/settings-modal.scss +++ b/client/src/styles/partials/modals/settings-modal.scss @@ -1,11 +1,13 @@ .bd-settingsModal { - .bd-modal .bd-modalBody { - padding: 0; - } + .bd-modal { + .bd-modalBody { + padding: 0; + } - .bd-modal .bd-modalFooter { - .bd-ok { - width: 100px; + .bd-modalFooter { + .bd-ok { + width: 100px; + } } } @@ -17,16 +19,20 @@ width: 40px; height: 20px; - .bd-switch::before { - width: 14px; - height: 14px; + .bd-switch { + &::before { + width: 14px; + height: 14px; + } } } } &.bd-edited { - .bd-scroller::-webkit-scrollbar-track { - margin-bottom: 74px; + .bd-scroller { + &::-webkit-scrollbar-track { + margin-bottom: 74px; + } } } } diff --git a/client/src/styles/partials/sidebarview/content.scss b/client/src/styles/partials/sidebarview/content.scss index 4b398b15..b911dcd0 100644 --- a/client/src/styles/partials/sidebarview/content.scss +++ b/client/src/styles/partials/sidebarview/content.scss @@ -12,7 +12,7 @@ &.bd-contentcolumn-enter-active, &.bd-contentcolumn-leave-active { - transition: opacity 0.4s ease; + transition: opacity .4s ease; } &.bd-contentcolumn-enter-to { diff --git a/client/src/styles/partials/sidebarview/index.scss b/client/src/styles/partials/sidebarview/index.scss index 861cf395..42353d09 100644 --- a/client/src/styles/partials/sidebarview/index.scss +++ b/client/src/styles/partials/sidebarview/index.scss @@ -1,4 +1,4 @@ -@import './main.scss'; -@import './sidebar.scss'; -@import './content.scss'; -@import './settingswrap.scss'; +@import './main'; +@import './sidebar'; +@import './content'; +@import './settingswrap'; diff --git a/client/src/styles/partials/sidebarview/main.scss b/client/src/styles/partials/sidebarview/main.scss index 89421484..60331fc4 100644 --- a/client/src/styles/partials/sidebarview/main.scss +++ b/client/src/styles/partials/sidebarview/main.scss @@ -11,8 +11,6 @@ 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%; @@ -32,7 +30,7 @@ background: #36393e; box-shadow: 0 0 4px #202225; backface-visibility: hidden; - transition: transform 0.6s ease; + transition: transform .6s ease; pointer-events: all; } diff --git a/client/src/styles/partials/sidebarview/settingswrap.scss b/client/src/styles/partials/sidebarview/settingswrap.scss index 4afdb92d..8cb710e4 100644 --- a/client/src/styles/partials/sidebarview/settingswrap.scss +++ b/client/src/styles/partials/sidebarview/settingswrap.scss @@ -6,7 +6,7 @@ flex: 1; min-height: 1px; box-sizing: border-box; - padding: 90px 15px 0 15px; + padding: 90px 15px 0; margin-bottom: 5px; } } @@ -23,8 +23,10 @@ > .bd-scroller { overflow-y: scroll; - .platform-darwin .bd-settings & { - padding-top: 22px; + .platform-darwin { // sass-lint:disable-line class-name-format + .bd-settings & { + padding-top: 22px; + } } } } @@ -64,7 +66,7 @@ .bd-settingswrapInfobox { display: flex; align-items: stretch; - background: rgba(32,34,37,.6); + background: rgba(32, 34, 37, .6); border-color: #202225; padding: 20px; border-radius: 5px; @@ -80,7 +82,7 @@ margin-bottom: 20px; h5 { - color: hsla(210,3%,87%,.3); + color: hsla(210, 3%, 87%, .3); letter-spacing: .5px; font-size: 12px; text-transform: uppercase; @@ -102,7 +104,7 @@ > span { color: #b9bbbe; - opacity: 0.5; + opacity: .5; } } } diff --git a/client/src/styles/partials/sidebarview/sidebar.scss b/client/src/styles/partials/sidebarview/sidebar.scss index bdc71d60..8993a6af 100644 --- a/client/src/styles/partials/sidebarview/sidebar.scss +++ b/client/src/styles/partials/sidebarview/sidebar.scss @@ -7,9 +7,8 @@ padding: 6px 0; margin-left: 10px; margin-top: 15px; - color: rgba(255, 255, 255, 0.15); + color: rgba(255, 255, 255, .15); font-size: 14px; - font-weight: 700; line-height: 16px; text-transform: uppercase; font-weight: 600; @@ -39,12 +38,12 @@ font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; &:hover, - &.active { + &.bd-active { background: $colbdgreen; color: #fff; } - &.active { + &.bd-active { cursor: default; } } diff --git a/client/src/styles/partials/variables/animations.scss b/client/src/styles/partials/variables/animations.scss index 7c3e9cdd..3c16e93b 100644 --- a/client/src/styles/partials/variables/animations.scss +++ b/client/src/styles/partials/variables/animations.scss @@ -1,5 +1,5 @@ @keyframes bd-slidein { - 0% { + 0% { transform: translateX(-100%); opacity: .2; } @@ -95,7 +95,7 @@ @keyframes bd-modalIn { 0% { - transform: scale(0.8); + transform: scale(.8); opacity: 0; } @@ -126,7 +126,7 @@ } 100% { - transform: scale(0.8); + transform: scale(.8); opacity: 0; } } @@ -144,19 +144,24 @@ } @keyframes bd-warnShake { - 10%, 90% { + 10%, + 90% { transform: translate3d(-4px, -4px, 0); } - 20%, 80% { + 20%, + 80% { transform: translate3d(4px, 4px, 0); } - 30%, 50%, 70% { + 30%, + 50%, + 70% { transform: translate3d(-4px, 4px, 0); } - 40%, 60% { + 40%, + 60% { transform: translate3d(4px, -4px, 0); } } @@ -202,14 +207,14 @@ @keyframes bd-keybindPulse { 0% { - box-shadow: 0 0 6px rgba(240,71,71,.3) + box-shadow: 0 0 6px rgba(240, 71, 71, .3); } 50% { - box-shadow: 0 0 10px rgba(240,71,71,.6) + box-shadow: 0 0 10px rgba(240, 71, 71, .6); } 100% { - box-shadow: 0 0 6px rgba(240,71,71,.3) + box-shadow: 0 0 6px rgba(240, 71, 71, .3); } } diff --git a/client/src/styles/partials/variables/index.scss b/client/src/styles/partials/variables/index.scss index 9b22f00f..83ea096e 100644 --- a/client/src/styles/partials/variables/index.scss +++ b/client/src/styles/partials/variables/index.scss @@ -1,3 +1,3 @@ -@import './colours.scss'; -@import './images.scss'; -@import './animations.scss'; +@import './colours'; +@import './images'; +@import './animations'; diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue index 9d4b9fd4..398437c7 100644 --- a/client/src/ui/components/BdSettings.vue +++ b/client/src/ui/components/BdSettings.vue @@ -9,7 +9,7 @@ */