优化后台 ui

This commit is contained in:
pushuo 2022-08-17 19:27:06 +08:00
parent 97780cb2f9
commit e916e943c2
7 changed files with 93 additions and 28 deletions

View File

@ -9351,7 +9351,7 @@ textarea.form-control-lg {
.was-validated .form-control:valid, .form-control.is-valid { .was-validated .form-control:valid, .form-control.is-valid {
border-color: #71c20b; border-color: #71c20b;
padding-right: calc(1.5em + 0.75rem); padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2371c20b' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-image: none;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center; background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@ -9371,7 +9371,7 @@ textarea.form-control-lg {
} }
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
padding-right: 4.125rem; padding-right: 4.125rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2371c20b' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), none;
background-position: right 0.75rem center, center right 2.25rem; background-position: right 0.75rem center, center right 2.25rem;
background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
} }
@ -17013,7 +17013,17 @@ textarea.form-control-lg {
box-shadow: none; box-shadow: none;
} }
.was-validated .form-control:valid, .form-control.is-valid { .was-validated .form-control:valid,
.was-validated .form-select:valid {
border-color: #e2e2e2; border-color: #e2e2e2;
background-image: none; }
.was-validated .form-check-input:valid {
border-color: rgba(0, 0, 0, 0.25);
}
.was-validated .form-check-input:valid:checked {
background-color: #fd560f;
border-color: #fd560f;
}
.was-validated .form-check-input:valid ~ .form-check-label {
color: inherit;
} }

View File

@ -9352,7 +9352,7 @@ textarea.form-control-lg {
.was-validated .form-control:valid, .form-control.is-valid { .was-validated .form-control:valid, .form-control.is-valid {
border-color: #71c20b; border-color: #71c20b;
padding-right: calc(1.5em + 0.92rem); padding-right: calc(1.5em + 0.92rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2371c20b' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-image: none;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right calc(0.375em + 0.23rem) center; background-position: right calc(0.375em + 0.23rem) center;
background-size: calc(0.75em + 0.46rem) calc(0.75em + 0.46rem); background-size: calc(0.75em + 0.46rem) calc(0.75em + 0.46rem);
@ -9372,7 +9372,7 @@ textarea.form-control-lg {
} }
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
padding-right: 4.125rem; padding-right: 4.125rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2371c20b' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), none;
background-position: right 0.75rem center, center right 2.25rem; background-position: right 0.75rem center, center right 2.25rem;
background-size: 16px 12px, calc(0.75em + 0.46rem) calc(0.75em + 0.46rem); background-size: 16px 12px, calc(0.75em + 0.46rem) calc(0.75em + 0.46rem);
} }
@ -17043,7 +17043,17 @@ textarea.form-control-lg {
color: #212529; color: #212529;
} }
.was-validated .form-control:valid, .form-control.is-valid { .was-validated .form-control:valid,
.was-validated .form-select:valid {
border-color: #ced4da; border-color: #ced4da;
background-image: none; }
.was-validated .form-check-input:valid {
border-color: rgba(0, 0, 0, 0.25);
}
.was-validated .form-check-input:valid:checked {
background-color: #fd560f;
border-color: #fd560f;
}
.was-validated .form-check-input:valid ~ .form-check-label {
color: inherit;
} }

View File

@ -13,12 +13,13 @@ $success: #71c20b;
$info: #1a8eff; $info: #1a8eff;
$body-bg: #f9fbfd; $body-bg: #f9fbfd;
$font-family-base: 'poppins', sans-serif; $font-family-base: 'poppins',
$border-radius: 0; sans-serif;
$border-radius: 0;
$btn-border-radius: 0; $btn-border-radius: 0;
$btn-border-radius-sm: 0; $btn-border-radius-sm: 0;
$btn-border-radius-lg: 0; $btn-border-radius-lg: 0;
$input-btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1); $input-btn-focus-box-shadow: 0 0 11px 0 rgba($color: $primary, $alpha: .1);
// $btn-border-width: 0; // $btn-border-width: 0;
$font-size-base: 0.82rem; $font-size-base: 0.82rem;
@ -26,10 +27,10 @@ $form-check-input-width: 1.2em;
$form-switch-width: 2.6em; $form-switch-width: 2.6em;
$link-decoration: none; $link-decoration: none;
$link-color: #1890ff; $link-color: #1890ff;
$form-floating-input-padding-t: 1.325rem; $form-floating-input-padding-t: 1.325rem;
$form-floating-input-padding-b: .625rem; $form-floating-input-padding-b: .625rem;
$form-floating-padding-y: .9rem; $form-floating-padding-y: .9rem;
$form-floating-height: 50px; $form-floating-height: 50px;
$btn-focus-width: 0; $btn-focus-width: 0;
$table-border-color: #e9ecef; $table-border-color: #e9ecef;
$border-color: #e8e8e8; $border-color: #e8e8e8;
@ -37,13 +38,16 @@ $input-border-color: #e2e2e2;
$badge-border-radius: 2px; $badge-border-radius: 2px;
$text-muted: #95aac9; $text-muted: #95aac9;
$form-feedback-icon-valid: none;
$form-feedback-icon-valid-color: inherit;
$alert-padding-y: 0.5rem; $alert-padding-y: 0.5rem;
@import './bootstrap-icons'; @import './bootstrap-icons';
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap'; @import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
// @import 'node_modules/bootstrap/scss/bootstrap'; // @import 'node_modules/bootstrap/scss/bootstrap';
.table > :not(:first-child) { .table> :not(:first-child) {
border-top: none; border-top: none;
} }
@ -71,7 +75,26 @@ $alert-padding-y: 0.5rem;
} }
} }
.was-validated .form-control:valid, .form-control.is-valid { .was-validated {
border-color: $input-border-color; .form-control,
background-image: none; .form-select {
&:valid {
border-color: $input-border-color;
}
}
.form-check-input {
&:valid {
border-color: rgba(#000, .25);
&:checked {
background-color: $primary;
border-color: $primary;
}
&~.form-check-label {
color: inherit;
}
}
}
} }

View File

@ -26,10 +26,10 @@
</ul> </ul>
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item me-3">
<div class="dropdown"> <div class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img src="http://dummyimage.com/100x100" class="avatar img-fluid rounded-circle me-1"> {{-- <img src="http://dummyimage.com/100x100" class="avatar img-fluid rounded-circle me-1"> --}}
<span class="text-dark ml-2">{{ current_user()->name }}</span> <span class="text-dark ml-2">{{ current_user()->name }}</span>
</a> </a>

View File

@ -6,7 +6,7 @@
<div id="category-app" class="card"> <div id="category-app" class="card">
<div class="card-header">编辑分类</div> <div class="card-header">编辑分类</div>
<div class="card-body"> <div class="card-body">
<form action="{{ admin_route($category->id ? 'categories.update' : 'categories.store', $category) }}" <form class="needs-validation" novalidate action="{{ admin_route($category->id ? 'categories.update' : 'categories.store', $category) }}"
method="POST"> method="POST">
@csrf @csrf
@method($category->id ? 'PUT' : 'POST') @method($category->id ? 'PUT' : 'POST')
@ -16,7 +16,7 @@
<x-admin-alert type="success" msg="{{ session('success') }}" class="mt-4"/> <x-admin-alert type="success" msg="{{ session('success') }}" class="mt-4"/>
@endif @endif
<x-admin-form-input-locale name="descriptions.*.name" title="名称" :value="$descriptions" required /> <x-admin-form-input-locale name="descriptions.*.name" title="名称" :value="$descriptions" :required="true" />
<x-admin-form-input-locale name="descriptions.*.content" title="内容" :value="$descriptions" /> <x-admin-form-input-locale name="descriptions.*.content" title="内容" :value="$descriptions" />
{{-- <x-admin-form-select title="上级分类" name="parent_id" :value="old('parent_id', $category->parent_id ?? 0)" :options="$categories->toArray()" key="id" label="name" /> --}} {{-- <x-admin-form-select title="上级分类" name="parent_id" :value="old('parent_id', $category->parent_id ?? 0)" :options="$categories->toArray()" key="id" label="name" /> --}}

View File

@ -44,8 +44,8 @@
<div class="row"> <div class="row">
<label class="filter-title"></label> <label class="filter-title"></label>
<div class="col-auto"> <div class="col-auto">
<button type="button" @click="search" class="btn btn-primary">筛选</button> <button type="button" @click="search" class="btn btn-outline-primary btn-sm">筛选</button>
<button type="button" @click="resetSearch" class="btn btn-outline-primary">重置</button> <button type="button" @click="resetSearch" class="btn btn-outline-secondary btn-sm">重置</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -67,6 +67,9 @@ $card-border-width: 0;
$alert-padding-y: 0.5rem; $alert-padding-y: 0.5rem;
$form-feedback-icon-valid: none;
$form-feedback-icon-valid-color: inherit;
// $dropdown-divider-bg: rgba(0, 0, 0, 0.1); // $dropdown-divider-bg: rgba(0, 0, 0, 0.1);
@import './bootstrap-icons'; @import './bootstrap-icons';
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap'; @import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
@ -134,7 +137,26 @@ $alert-padding-y: 0.5rem;
} }
} }
.was-validated .form-control:valid, .form-control.is-valid { .was-validated {
border-color: $input-border-color; .form-control,
background-image: none; .form-select {
&:valid {
border-color: $input-border-color;
}
}
.form-check-input {
&:valid {
border-color: rgba(#000, .25);
&:checked {
background-color: $primary;
border-color: $primary;
}
&~.form-check-label {
color: inherit;
}
}
}
} }