diff --git a/client/src/styles/partials/generic/drawers.scss b/client/src/styles/partials/generic/drawers.scss index cdf02b62..5232c825 100644 --- a/client/src/styles/partials/generic/drawers.scss +++ b/client/src/styles/partials/generic/drawers.scss @@ -1,10 +1,16 @@ .bd-drawer { .bd-form-header { cursor: pointer; + + &:hover { + color: rgba(255, 255, 255, 0.25); + } } + .bd-drawer-open-button { position: relative; margin-right: 15px; + .bd-chevron-1, .bd-chevron-2 { position: absolute; } diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss index 4c4d77c5..8f26c36a 100644 --- a/client/src/styles/partials/generic/forms.scss +++ b/client/src/styles/partials/generic/forms.scss @@ -26,10 +26,12 @@ height: 16px; cursor: pointer; fill: #ccc; + } + } - &:hover { - fill: #fff; - } + &:hover { + .bd-form-header-button svg { + fill: #fff; } } } @@ -43,15 +45,8 @@ .bd-form-divider { height: 1px; - margin-top: 8px; - margin-bottom: 40px; + margin: 15px 0; background: hsla(218,5%,47%,.3); - - .bd-form-textinput + &, - .bd-form-fileinput + &, - .bd-setting-switch + & { - margin: 15px 0; - } } .bd-form-warning { @@ -93,245 +88,3 @@ font-weight: 500; user-select: none; } - -.bd-form-textinput, -.bd-form-fileinput, -.bd-form-numberinput, -.bd-setting-switch { - .bd-title { - display: flex; - - h3 { - font-weight: 500; - color: #f6f6f7; - flex: 1; - line-height: 24px; - margin-bottom: 0; - margin-top: 0; - } - } - - .bd-hint { - flex: 1 1 auto; - color: #72767d; - font-size: 14px; - font-weight: 500; - margin-top: 5px; - line-height: 20px; - border-bottom: 0px solid rgba(114, 118, 126, 0.1); - } -} - -.bd-form-textinput, .bd-form-numberinput { - input[type="text"], input[type="number"] { - background: transparent; - border: none; - color: #b9bbbe; - border-bottom: 2px solid rgba(114, 118, 126, 0.3); - outline: none; - line-height: 24px; - font-size: 100%; - font-weight: 500; - - &:focus { - color: #FFF; - border-color: $colbdblue; - } - } -} - -.bd-form-fileinput { - .bd-button.bd-button-primary { - padding: 3px 8px; - border-radius: 3px; - font-size: 12px; - font-weight: 400; - } - - .bd-selected-files { - margin: 15px 0; - - .bd-selected-file { - margin: 10px 0; - color: #aaa; - font-size: 15px; - display: flex; - - .bd-file-path { - flex: 1 1; - } - - .bd-file-open, - .bd-file-remove { - flex: 0 0; - margin-left: 5px; - - svg { - width: 16px; - height: 16px; - cursor: pointer; - fill: #ccc; - - &:hover { - fill: #fff; - } - } - } - } - } -} - -.bd-number { - position: relative; - - input[type=number] { - &::-webkit-inner-spin-button, - ::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - } - - .bd-number-spinner { - position: absolute; - top: 0; - right: 0; - height: 100%; - justify-content: space-around; - - .bd-arrow { - padding: 3px 5px; - cursor: pointer; - font-size: 0; - - .bd-up-arrow { - border-color: transparent transparent rgb(153, 153, 153); - border-style: solid; - border-width: 2.5px 5px 5px; - } - - &:hover .bd-up-arrow { - border-color: transparent transparent rgb(200, 200, 200); - } - - .bd-down-arrow { - border-color: rgb(153, 153, 153) transparent transparent; - border-style: solid; - border-width: 5px 5px 2.5px; - } - - &:hover .bd-down-arrow { - border-color: rgb(200, 200, 200) transparent transparent; - } - } - } -} - -.bd-radio-option { - background: rgb(50, 50, 50); - border: 2px solid rgb(39, 39, 39); - border-radius: 5px; - padding: 3px; - align-items: center; - cursor: pointer; - - input[type="radio"] { - display: none; - - &:checked + .bd-radio { - background-color: white; - } - } - - .bd-radio { - background: rgb(50, 50, 50); - border: 1px solid rgb(114, 118, 125); - border-radius: 50%; - width: 12px; - height: 12px; - transition: background-color .1s; - } - - span { - color: white; - margin: 0px 5px; - } - - &:not(:last-child) { - margin-bottom: 5px; - } -} - -.bd-dropdown { - position: relative; - - .bd-dropdown-current { - color: white; - background: rgb(50, 50, 50); - border: 2px solid rgb(39, 39, 39); - border-radius: 5px; - padding: 8px; - cursor: pointer; - - .bd-dropdown-arrow { - border-color: rgb(153, 153, 153) transparent transparent; - border-style: solid; - border-width: 5px 5px 2.5px; - display: inline-block; - margin-left: 10px; - } - } - - .bd-dropdown-options { - position: absolute; - top: calc(100% - 2.5px); - width: 100%; - max-height: 100px; - box-sizing: border-box; - background: rgb(50, 50, 50); - border: 2px solid rgb(39, 39, 39); - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - overflow-y: scroll; - - div { - color: white; - padding: 5px; - cursor: pointer; - - &:hover { - background: rgb(59, 59, 59); - } - - &:last-child { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - } - } - - &::-webkit-scrollbar { - width: 14px; - } - - &::-webkit-scrollbar-thumb { - background-color: #1e2124; - border-color: #36393e; - border-color: transparent; - } - - &::-webkit-scrollbar-thumb, - &::-webkit-scrollbar-track-piece { - background-clip: padding-box; - border-width: 3px; - border-style: solid; - border-radius: 7px; - border-color: transparent; - } - - &::-webkit-scrollbar-track-piece { - background-color: #2f3136; - border-color: #36393e; - border-color: transparent; - } - } -} \ No newline at end of file diff --git a/client/src/styles/partials/generic/forms/dropdowns.scss b/client/src/styles/partials/generic/forms/dropdowns.scss new file mode 100644 index 00000000..709df8ce --- /dev/null +++ b/client/src/styles/partials/generic/forms/dropdowns.scss @@ -0,0 +1,106 @@ +.bd-dropdown { + position: relative; + + .bd-dropdown-current { + color: #f6f6f7; + background: rgba(0,0,0,.1); + border: 1px solid rgba(0,0,0,.3); + border-radius: 3px; + padding: 11px; + cursor: default; + outline: none; + transition: border .15s ease; + width: 180px; + box-sizing: border-box; + display: flex; + + .bd-dropdown-text { + flex: 1 1 auto; + } + + .bd-dropdown-arrow-wrap { + flex: 0 0 auto; + margin-left: 10px; + + .bd-dropdown-arrow { + border-color: rgb(153, 153, 153) transparent transparent; + border-style: solid; + border-width: 5px 5px 2.5px; + display: inline-block; + transition: transform 0.15s ease; + transform: none; + } + } + + &:hover { + border-color: #040405; + + .bd-dropdown-arrow-wrap .bd-dropdown-arrow { + border-color: #f6f6f7 transparent transparent; + } + } + } + + &.bd-active { + .bd-dropdown-current { + border-color: #040405; + } + + .bd-dropdown-arrow-wrap .bd-dropdown-arrow { + transform: rotateX(180deg) translateY(2px); + border-color: #f6f6f7 transparent transparent; + } + } + + .bd-dropdown-options { + position: absolute; + top: calc(100% - 2.5px); + width: 100%; + max-height: 180px; + box-sizing: border-box; + background-color: #303237; + border: 1px solid #202225; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + overflow-y: scroll; + + .bd-dropdown-option { + color: white; + padding: 11px; + cursor: pointer; + + &:hover { + background-color: rgba(0, 0, 0, 0.1); + } + + &.bd-dropdown-option-selected { + background-color: rgba(0, 0, 0, 0.2); + } + } + + &::-webkit-scrollbar { + width: 14px; + } + + &::-webkit-scrollbar-thumb { + background-color: #1e2124; + border-color: #36393e; + border-color: transparent; + } + + &::-webkit-scrollbar-thumb, + &::-webkit-scrollbar-track-piece { + background-clip: padding-box; + border-width: 3px; + border-style: solid; + border-radius: 7px; + border-color: transparent; + } + + &::-webkit-scrollbar-track-piece { + background-color: #2f3136; + border-color: #36393e; + border-color: transparent; + } + } +} diff --git a/client/src/styles/partials/generic/forms/files.scss b/client/src/styles/partials/generic/forms/files.scss new file mode 100644 index 00000000..80b303a9 --- /dev/null +++ b/client/src/styles/partials/generic/forms/files.scss @@ -0,0 +1,40 @@ +.bd-form-fileinput { + .bd-button.bd-button-primary { + padding: 3px 8px; + border-radius: 3px; + font-size: 12px; + font-weight: 400; + } + + .bd-selected-files { + margin: 15px 0; + + .bd-selected-file { + margin: 10px 0; + color: #aaa; + font-size: 15px; + display: flex; + + .bd-file-path { + flex: 1 1; + } + + .bd-file-open, + .bd-file-remove { + flex: 0 0; + margin-left: 5px; + + svg { + width: 16px; + height: 16px; + cursor: pointer; + fill: #ccc; + + &:hover { + fill: #fff; + } + } + } + } + } +} diff --git a/client/src/styles/partials/generic/forms/index.scss b/client/src/styles/partials/generic/forms/index.scss new file mode 100644 index 00000000..f4e88128 --- /dev/null +++ b/client/src/styles/partials/generic/forms/index.scss @@ -0,0 +1,5 @@ +@import './main.scss'; +@import './text.scss'; +@import './files.scss'; +@import './dropdowns.scss'; +@import './radios.scss'; diff --git a/client/src/styles/partials/generic/forms/main.scss b/client/src/styles/partials/generic/forms/main.scss new file mode 100644 index 00000000..08964d32 --- /dev/null +++ b/client/src/styles/partials/generic/forms/main.scss @@ -0,0 +1,29 @@ +.bd-form-textinput, +.bd-form-fileinput, +.bd-form-dropdown, +.bd-form-radio, +.bd-form-numberinput, +.bd-setting-switch { + .bd-title { + display: flex; + + h3 { + font-weight: 500; + color: #f6f6f7; + flex: 1; + line-height: 24px; + margin-bottom: 0; + margin-top: 0; + } + } + + .bd-hint { + flex: 1 1 auto; + color: #72767d; + font-size: 14px; + font-weight: 500; + margin-top: 5px; + line-height: 20px; + border-bottom: 0px solid rgba(114, 118, 126, 0.1); + } +} diff --git a/client/src/styles/partials/generic/forms/radios.scss b/client/src/styles/partials/generic/forms/radios.scss new file mode 100644 index 00000000..ee5b9346 --- /dev/null +++ b/client/src/styles/partials/generic/forms/radios.scss @@ -0,0 +1,71 @@ +.bd-form-radio { + display: flex; + + .bd-form-radio-details { + flex: 1 1 auto; + } + + .bd-form-radio-group { + width: 180px; + flex: 0 0 auto; + margin-left: 20px; + } +} + +.bd-radio { + background: rgba(0,0,0,.1); + border: 1px solid rgba(0,0,0,.3); + border-radius: 3px; + padding: 11px; + align-items: center; + cursor: pointer; + display: flex; + + .bd-radio-control-wrap { + flex: 0 0 auto; + margin: -3px; + margin-right: 10px; + height: 20px; + width: 20px; + border-radius: 3px; + border: 1px solid #72767d; + + .bd-radio-control { + // background: rgb(50, 50, 50); + // border: 1px solid rgb(114, 118, 125); + // border-radius: 50%; + // width: 12px; + // height: 12px; + // transition: background-color .1s; + margin: 1px; + opacity: 0; + } + } + + .bd-radio-text { + flex: 1 1 auto; + color: white; + } + + &:not(:last-child) { + margin-bottom: 5px; + } + + &:hover { + border-color: #040405; + } + + &.bd-radio-selected { + background-color: $colbdblue; + border-color: $colbdblue; + + .bd-radio-control-wrap { + border-color: #fff; + background-color: #fff; + + .bd-radio-control { + opacity: 1; + } + } + } +} diff --git a/client/src/styles/partials/generic/forms/text.scss b/client/src/styles/partials/generic/forms/text.scss new file mode 100644 index 00000000..5fa7fb6f --- /dev/null +++ b/client/src/styles/partials/generic/forms/text.scss @@ -0,0 +1,66 @@ +.bd-form-textinput, +.bd-form-numberinput { + input[type="text"], + input[type="number"] { + background: transparent; + border: none; + color: #b9bbbe; + border-bottom: 2px solid rgba(114, 118, 126, 0.3); + outline: none; + line-height: 24px; + font-size: 100%; + font-weight: 500; + width: 180px; + + &:focus { + color: #fff; + border-color: $colbdblue; + } + } +} + +.bd-number { + position: relative; + + input[type="number"] { + &::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + } + + .bd-number-spinner { + position: absolute; + top: 0; + right: 0; + height: 100%; + justify-content: space-around; + + .bd-arrow { + padding: 3px 5px; + cursor: pointer; + font-size: 0; + + .bd-up-arrow { + border-color: transparent transparent rgb(153, 153, 153); + border-style: solid; + border-width: 2.5px 5px 5px; + } + + &:hover .bd-up-arrow { + border-color: transparent transparent rgb(200, 200, 200); + } + + .bd-down-arrow { + border-color: rgb(153, 153, 153) transparent transparent; + border-style: solid; + border-width: 5px 5px 2.5px; + } + + &:hover .bd-down-arrow { + border-color: rgb(200, 200, 200) transparent transparent; + } + } + } +} diff --git a/client/src/styles/partials/generic/index.scss b/client/src/styles/partials/generic/index.scss index 15e03cab..0fb371a7 100644 --- a/client/src/styles/partials/generic/index.scss +++ b/client/src/styles/partials/generic/index.scss @@ -3,6 +3,7 @@ @import './scrollable.scss'; @import './buttons.scss'; @import './forms.scss'; +@import './forms/index.scss'; @import './material-buttons.scss'; @import './modals.scss'; @import './drawers.scss'; diff --git a/client/src/ui/components/bd/pluginsetting/Dropdown.vue b/client/src/ui/components/bd/pluginsetting/Dropdown.vue index e0ca6dc5..e00c03fd 100644 --- a/client/src/ui/components/bd/pluginsetting/Dropdown.vue +++ b/client/src/ui/components/bd/pluginsetting/Dropdown.vue @@ -9,13 +9,18 @@ */