Skip to content

A
AdminLTE

知鸟1号 / AdminLTE
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
A
AdminLTE

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 cd5f84b2 编写于 作者: R REJack
浏览文件
操作

enhanced default select2 theme (built in) 

- created build/scss/plugins/_mixins.scss
- updated build/scss/plugins/_select2.scss
- added color variation for select2
- updated build/scss/AdminLTE(-raw).scss
- updated pages/forms/advanced.html with color variations and both themes
上级 60993562
隐藏空白更改
内联 并排
Showing with 300 addition and 50 deletion
build/scss/AdminLTE-raw.scss
浏览文件 @ cd5f84b2
......@@ -63,6 +63,7 @@
// Plugins
// ---------------------------------------------------
@import 'plugins/mixins';
@import 'plugins/fullcalendar';
@import 'plugins/select2';
@import 'plugins/bootstrap-slider';
......
build/scss/AdminLTE.scss
浏览文件 @ cd5f84b2
......@@ -59,6 +59,7 @@
// Plugins
// ---------------------------------------------------
@import 'plugins/mixins';
@import 'plugins/fullcalendar';
@import 'plugins/select2';
@import 'plugins/bootstrap-slider';
......
build/scss/plugins/_mixins.scss 0 → 100644
浏览文件 @ cd5f84b2
//
// General: Mixins
//
// Select2 Variant
@mixin select2-variant($name, $color) {
.select2-#{$name} {
.select2-container--default &,
.select2-container--default {
&.select2-dropdown,
.select2-dropdown,
.select2-search--inline {
.select2-search__field {
&:focus {
border: $input-border-width solid lighten($color, 25%);
}
}
}
.select2-results__option--highlighted {
background-color: $color;
color: color-yiq($color);
&[aria-selected] {
&,
&:hover {
background-color: darken($color, 3%);
color: color-yiq(darken($color, 3%));
}
}
}
//Multiple select
& {
.select2-selection--multiple {
&:focus {
border-color: lighten($color, 25%);
}
}
&.select2-container--focus .select2-selection--multiple {
border-color: lighten($color, 25%);
}
}
.select2-selection--multiple {
.select2-selection__choice {
background-color: $color;
border-color: darken($color, 5%);
color: color-yiq($color);
}
.select2-selection__choice__remove {
color: rgba(color-yiq($color), 0.7);
&:hover {
color: color-yiq($color);
}
}
}
}
}
}
build/scss/plugins/_select2.scss
浏览文件 @ cd5f84b2
......@@ -3,36 +3,32 @@
//
//Signle select
.select2-container--default,
.select2-selection {
&.select2-container--focus,
&:focus,
&:active {
outline: none;
}
// .select2-container--default,
// .select2-selection {
// &.select2-container--focus,
// &:focus,
// &:active {
// outline: none;
// }
// }
.select2-container--default {
.select2-selection--single {
border: 1px solid $gray-x-light;
border: $input-border-width solid $input-border-color;
//border-radius: $input-radius;
padding: 6px 12px;
height: $input-height;
}
}
.select2-container--default {
&.select2-container--open {
border-color: theme-color("primary");
border-color: $primary;
}
& .select2-dropdown {
border: 1px solid $gray-x-light;
border: $input-border-width solid $input-border-color;
//border-radius: $input-radius;
}
& .select2-results__option--highlighted[aria-selected] {
background-color: theme-color("primary");
color: white;
}
& .select2-results__option {
padding: 6px 12px;
user-select: none;
......@@ -63,66 +59,130 @@
.select2-dropdown,
.select2-search--inline {
.select2-search__field {
border: 1px solid $gray-x-light;
border: $input-border-width solid $input-border-color;
&:focus {
outline: none;
border: 1px solid theme-color("primary");
border: $input-border-width solid $input-focus-border-color;
}
}
}
& .select2-results__option[aria-disabled=true] {
color: #999;
.select2-dropdown {
&.select2-dropdown--below {
border-top: 0;
}
&.select2-dropdown--above {
border-bottom: 0;
}
}
.select2-results__option {
&[aria-disabled='true'] {
color: $gray-600;
}
&[aria-selected='true'] {
$color: $gray-300;
background-color: $color;
&,
&:hover {
color: color-yiq($color);
}
}
}
& .select2-results__option[aria-selected=true] {
background-color: #ddd;
&,
&:hover {
color: #444;
.select2-results__option--highlighted {
$color: $primary;
background-color: $color;
color: color-yiq($color);
&[aria-selected] {
$color: darken($color, 3%);
&,
&:hover {
background-color: $color;
color: color-yiq($color);
}
}
}
//Multiple select
& {
.select2-selection--multiple {
min-height: $input-height;
border: 1px solid $gray-x-light;
//border-radius: $input-radius;
border: $input-border-width solid $input-border-color;
height: $input-height;
&:focus {
border-color: theme-color("primary");
border-color: $input-focus-border-color;
}
.select2-selection__rendered li:first-child.select2-search.select2-search--inline {
width: 100%;
.select2-selection__rendered {
padding: 0 $input-padding-y;
li:first-child.select2-search.select2-search--inline {
width: 100%;
.select2-search__field {
width: 100% !important;
.select2-search__field {
width: 100% !important;
}
}
.select2-search.select2-search--inline {
.select2-search__field {
border: 0;
margin-top: 6px;
}
}
}
}
&.select2-container--focus .select2-selection--multiple {
border-color: $gray-x-light;
border-color: $input-focus-border-color;
.select2-search__field {
border: 0;
}
}
}
& .select2-selection--multiple .select2-selection__choice {
background-color: theme-color("primary");
border-color: darken(theme-color("primary"), 5%);
padding: 0 10px;
color: $white;
}
.select2-selection--multiple {
.select2-selection__choice {
background-color: $primary;
border-color: darken($primary, 5%);
color: color-yiq($primary);
padding: 0 10px;
}
& .select2-selection--multiple .select2-selection__choice__remove {
margin-right: 5px;
color: rgba(255, 255, 255, 0.7);
&:hover {
color: $white;
.select2-selection__choice__remove {
color: rgba(255, 255, 255, 0.7);
float: right;
margin-left: 5px;
margin-right: -2px;
&:hover {
color: $white;
}
}
}
& .select2-selection--single .select2-selection__rendered li {
padding-right: 10px;
}
}
// Background colors (theme colors)
@each $name, $color in $theme-colors {
@include select2-variant($name, $color);
}
// Background colors (colors)
@each $name, $color in $colors {
@include select2-variant($name, $color);
}
pages/forms/advanced.html
浏览文件 @ cd5f84b2
......@@ -714,7 +714,7 @@
<!-- SELECT2 EXAMPLE -->
<div class="card card-default">
<div class="card-header">
<h3 class="card-title">Select2</h3>
<h3 class="card-title">Select2 (Default Theme)</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
......@@ -756,8 +756,7 @@
<div class="col-md-6">
<div class="form-group">
<label>Multiple</label>
<select class="select2" multiple="multiple" data-placeholder="Select a State"
style="width: 100%;">
<select class="select2" multiple="multiple" data-placeholder="Select a State" style="width: 100%;">
<option>Alabama</option>
<option>Alaska</option>
<option>California</option>
......@@ -785,6 +784,128 @@
<!-- /.col -->
</div>
<!-- /.row -->
<h5>Custom Color Variants</h5>
<div class="row">
<div class="col-12 col-sm-6">
<div class="form-group">
<label>Minimal (.select2-danger)</label>
<select class="form-control select2 select2-danger" data-dropdown-css-class="select2-danger" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6">
<div class="form-group">
<label>Multiple (.select2-purple)</label>
<div class="select2-purple">
<select class="select2" multiple="multiple" data-placeholder="Select a State" data-dropdown-css-class="select2-purple" style="width: 100%;">
<option>Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.card-body -->
<div class="card-footer">
Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about
the plugin.
</div>
</div>
<!-- /.card -->
<!-- SELECT2 EXAMPLE -->
<div class="card card-default">
<div class="card-header">
<h3 class="card-title">Select2 (Bootstrap4 Theme)</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-remove"></i></button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Minimal</label>
<select class="form-control select2bs4" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
<!-- /.form-group -->
<div class="form-group">
<label>Disabled</label>
<select class="form-control select2bs4" disabled="disabled" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-md-6">
<div class="form-group">
<label>Multiple</label>
<select class="select2bs4" multiple="multiple" data-placeholder="Select a State"
style="width: 100%;">
<option>Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
<!-- /.form-group -->
<div class="form-group">
<label>Disabled Result</label>
<select class="form-control select2bs4" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option disabled="disabled">California (disabled)</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.card-body -->
<div class="card-footer">
......@@ -1230,10 +1351,13 @@
<script>
$(function () {
//Initialize Select2 Elements
$('.select2').select2({
$('.select2bs4').select2({
theme: 'bootstrap4'
})
//Initialize Select2 Elements
$('.select2').select2()
//Datemask dd/mm/yyyy
$('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
//Datemask2 mm/dd/yyyy
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或