scss Select2 Flat UI https://github.com/techhysahil/Select2-Flat-UI/blob/master/Overide.css
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss Select2 Flat UI https://github.com/techhysahil/Select2-Flat-UI/blob/master/Overide.css相关的知识,希望对你有一定的参考价值。
/*********************************
Author : Techhysahil
Link : http://techhysahil.com
Gist: https://github.com/techhysahil/Select2-Flat-UI/blob/master/Overide.css
*********************************/
/* Assign min-width to container */
.select2-container{
min-width:200px;
}
/*Theme Color override*/
.select2-container--default .select2-results__option--highlighted[aria-selected]{
background: white !important;
color: $sfe_primary_color;
}
.select2-container--default .select2-results__option[aria-selected=true]{
background: white;
color: $sfe_primary_color;
opacity: 0.8;
}
.select2-container .select2-choice {
border: 2px solid $sfe_primary_color;
//height: 36px;
border-radius: 0px ;
font-family: $sfe_primary_font;
//font-size: 14px;
text-indent: 1px;
box-shadow: none;
background-image: none;
}
.select2-container *:focus{
outline:0px;
}
.select2-container--default .select2-selection--single{
border-radius:0px;
}
.select2-container.select2-drop-above .select2-choice {
border-bottom-color: white;
border-radius:0px;
}
.select2-drop {
margin-top: -2px;
border: 2px solid white;
border-top: 0;
border-radius: 0px !important;
border-radius:0 0 6px 6px;
box-shadow: none;
}
.select2-drop.select2-drop-above {
margin-top: 2px;
border-top: 2px solid white;
border-bottom: 0;
border-radius: 6px 6px 0 0;
box-shadow: none;
}
.select2-container .select2-choice div {
border-left: 2px solid white;
border-radius: 0 4px 4px 0;
background-clip: padding-box;
}
.select2-search{
margin-top: 3px;
}
.select2-search input {
height: 30px !important;
border: 2px solid white;
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
border: 2px solid white;
outline: none;
box-shadow: none;
}
.select2-dropdown-open .select2-choice {
box-shadow: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-dropdown-open .select2-choice div {
background: transparent;
border-left: none;
filter: none;
}
.select2-results .select2-highlighted {
background: white;
color: $sfe_primary_color;
border-radius: 0px;
}
.select2-results{
padding: 0 0 0 0px;
margin: 4px 0px 0px 0;
}
.select2-container-multi .select2-choices {
height: auto !important;
height: 1%;
border: 2px solid white;
}
.select2-container-multi.select2-container-active .select2-choices {
border: 2px solid white;
border-radius: 6px;
box-shadow: none;
}
.select2-container .select2-choice .select2-arrow{
border: 0px;
border-radius: 0px;
background: transparent;
background-image: none;
}
/*New Changes*/
.select2-container--default .select2-selection--single{
background: white;
border: 0px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
color: white;
}
.select2-container--default .select2-selection--single .select2-selection__rendewhite{
color: $sfe_primary_color;
line-height:34px;
}
.select2-container .select2-selection--single{
height:34px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b
{
border-color: $sfe_primary_color transparent transparent transparent;
top: 60%;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
border-color: transparent transparent $sfe_primary_color transparent;
}
// Border above dropdown
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above{
background: white;
}
/*
Tags
*/
.select2-container--default .select2-selection--multiple .select2-selection__choice{
background-color: white;
color: $sfe_primary_color;
border: 1px solid white;
border-radius: 2px;
padding: 5px 7px;
@include rem(font-size, 12px);
font-weight: bold;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
color: $sfe_primary_color;
margin-right: 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
margin-left: 6px;
float: right;
}
/*
Main input box
*/
.select2-container--default .select2-selection--multiple,.select2-container--default.select2-container--focus .select2-selection--multiple{
border: 2px solid white;
background-color: transparent;
border-radius: 5px;
padding: 2px;
}
//Placeholder text
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: $sfe_primary_color;
}
以上是关于scss Select2 Flat UI https://github.com/techhysahil/Select2-Flat-UI/blob/master/Overide.css的主要内容,如果未能解决你的问题,请参考以下文章
1Flat UI Getting started(文档翻译)
Angular UI select2 指令 - 以编程方式更新模型未反映在小部件上