user management v1.6-alpha.1

2026-04-24 18:00:40 +00:00 · 2020-05-27 10:22:33 +02:00
parent 143aca64dc
commit a76d1dec3b
54 changed files with 3489 additions and 535 deletions
@@ -0,0 +1,129 @@
+<template>
+    <div class="setup-box" :class="theme">
+        <b class="title">{{ title }}</b>
+        <p class="description">{{ description }}</p>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'SetupBox',
+        props: ['title', 'description', 'theme'],
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .setup-box {
+        padding: 20px;
+        border-radius: 8px;
+
+        .title {
+            @include font-size(19);
+            margin-bottom: 15px;
+            display: block;
+            //color: $theme;
+        }
+
+        .description {
+            @include font-size(15);
+            line-height: 1.5;
+            margin-bottom: 20px;
+        }
+
+        &.base {
+            background: $light_background;
+        }
+
+        &.danger {
+            background: $light_background;
+
+            .title {
+                color: $danger;
+            }
+        }
+
+        /deep/ .form {
+            margin-top: 20px;
+
+            &.block-form {
+                max-width: 450px;
+
+                .single-line-form {
+                    display: flex;
+
+                    .submit-button {
+                        margin-left: 20px;
+                    }
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        .setup-box {
+
+            /deep/ .form {
+
+                &.block-form {
+                    max-width: 100%;
+                }
+
+                input {
+                    min-width: initial;
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .setup-box {
+
+            /deep/ .form.block-form {
+
+                .single-line-form {
+                    display: block;
+
+                    .submit-button {
+                        margin-left: 0;
+                        margin-top: 10px;
+                    }
+                }
+            }
+        }
+
+    }
+
+
+    @media (prefers-color-scheme: dark) {
+
+        .setup-box {
+
+            &.base {
+                background: $dark_mode_foreground;
+            }
+
+            &.danger {
+                background: $dark_mode_foreground;
+            }
+
+            /deep/ input {
+
+                &[type='text'],
+                &[type='number'],
+                .input-area {
+                    background: $dark_mode_background;
+                }
+            }
+
+            /deep/ .input-area {
+                background: $dark_mode_background;
+            }
+        }
+    }
+</style>