diff --git a/client/src/modules/ui/components/bd/templates/PluginsView.html b/client/src/modules/ui/components/bd/templates/PluginsView.html index ba7b5bb4..e2c6a522 100644 --- a/client/src/modules/ui/components/bd/templates/PluginsView.html +++ b/client/src/modules/ui/components/bd/templates/PluginsView.html @@ -26,23 +26,30 @@
-
-
+
+ +

{{setting.text}}

- -
- -
+
diff --git a/client/src/styles/partials/bdsettings/button.scss b/client/src/styles/partials/bdsettings/button.scss index 740772ea..e522f20a 100644 --- a/client/src/styles/partials/bdsettings/button.scss +++ b/client/src/styles/partials/bdsettings/button.scss @@ -46,3 +46,4 @@ } } } + diff --git a/client/src/styles/partials/generic/buttons.scss b/client/src/styles/partials/generic/buttons.scss index 740772ea..7392de51 100644 --- a/client/src/styles/partials/generic/buttons.scss +++ b/client/src/styles/partials/generic/buttons.scss @@ -46,3 +46,130 @@ } } } + +.bd-button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: #FFF; + background: #44474c; + text-align: center; + user-select: none; + font-weight: 500; + background: $colbdblue; + + + &:not(.bd-disabled):hover { + background: darken($colbdblue, 5%); + } + + &.bd-disabled { + filter: grayscale(90%); + cursor: not-allowed; + } + + &.bd-err { + background: $colerr; + + &:hover { + background: darken($colerr, 5%); + } + } + + &.bd-warn { + background: $colwarn; + + &:hover { + background: darken($colwarn, 5%); + } + } + + &.bd-ok { + background: $colok; + + &:hover { + background: darken($colok, 5%); + } + } + + .bd-spinner-7 { + opacity: .3; + } + + .material-design-icon svg { + width: 18px; + height: 18px; + } +} + +.bd-button-group { + display: flex; + + .bd-button, + .bd-material-button { + + &:first-of-type { + border-radius: 6px 0 0 6px; + } + + &:last-of-type { + border-radius: 0 6px 6px 0; + } + + &:not(:last-of-type) { + border-right: 1px solid rgba(114, 118, 126, 0.3); + } + + &:not(:first-of-type) { + border-left: 1px solid rgba(114, 118, 126, 0.1); + } + } +} + +.bd-tabheader { + .bd-button { + background: transparent; + border-bottom: 2px solid rgba(114, 118, 126, 0.3); + + h3 { + -webkit-user-select: none; + user-select: none; + display: block; + font-size: 1.17em; + margin-top: 1em; + margin-bottom: 1em; + margin-left: 0; + margin-right: 0; + font-weight: bold; + flex-grow: 1; + } + + .bd-material-button { + width: 30px; + height: 30px; + + .material-design-icon, + .bd-material-design-icon { + display: flex; + align-items: center; + fill: #FFF; + + svg { + width: 24px; + height: 24px; + } + } + + &:hover { + background: #2d2f34; + } + } + + &:hover, + &.bd-active { + background: transparent; + border-bottom: 2px solid $colbdblue; + } + } +} \ No newline at end of file diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss index a611c13f..b17f244a 100644 --- a/client/src/styles/partials/generic/forms.scss +++ b/client/src/styles/partials/generic/forms.scss @@ -51,3 +51,30 @@ font-weight: 500; user-select: none; } + +.bd-form-textinput .bd-title { + display: flex; +} + +.bd-form-textinput .bd-title input { + flex-grow: 1; +} + +.bd-form-textinput .bd-title h3 { + font-weight: 500; + color: #f6f6f7; + flex: 1; + line-height: 24px; + margin-bottom: 0; + margin-top: 0; +} + +.bd-form-textinput .bd-hint { + flex: 1 1 auto; + color: #72767d; + font-size: 14px; + font-weight: 500; + margin-bottom: 15px; + line-height: 30px; + border-bottom: 0px solid rgba(114, 118, 126, 0.1); +} \ No newline at end of file