Skip to content

Commit

Permalink
Merge pull request #10 from moreonion/select2v4
Browse files Browse the repository at this point in the history 
Update styles for select2 upgrade.
  • Loading branch information
@torotil
torotil authored Dec 4, 2018
2 parents 2439af9 + c815901 commit fcfd59f
Showing 1 changed file with 125 additions and 127 deletions.
252 changes: 125 additions & 127 deletions core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,8 @@ input.form-autocomplete,
input.form-text,
textarea.form-textarea,
select.form-select,
.select2-container-multi .select2-choices {
.select2-container .select2-selection,
.select2-container .select2-search--dropdown .select2-search__field {
padding: 0.4em 0.5em .3em;
margin-bottom: 0.4em;
border-width:2px;
Expand All @@ -510,135 +511,129 @@ select.form-select,
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
}

input.form-autocomplete:hover,
input.form-text:hover,
textarea.form-textarea:hover,
select.form-select:hover,
input.form-autocomplete:focus,
input.form-text:focus,
textarea.form-textarea:focus,
select.form-select:focus,
.select2-container-multi.select2-container-active .select2-choices,
.select2-container-multi .select2-choices:hover {
color:#575555;
border: 2px solid #18CBDB;
-webkit-box-shadow:#1AE3F2 0px 0px 3px;
-moz-box-shadow: #1AE3F2 0px 0px 3px;
box-shadow: #1AE3F2 0px 0px 3px;
}
input.form-autocomplete:hover,
input.form-text:hover,
textarea.form-textarea:hover,
select.form-select:hover,
input.form-autocomplete:focus,
input.form-text:focus,
textarea.form-textarea:focus,
select.form-select:focus,
.select2-container.select2-container--focus .select2-selection,
.select2-container .select2-selection:hover,
.select2-container .select2-search--dropdown .select2-search__field:hover,
.select2-container .select2-search--dropdown .select2-search__field:focus{
color:#575555;
border: 2px solid #18CBDB;
-webkit-box-shadow:#1AE3F2 0px 0px 3px;
-moz-box-shadow: #1AE3F2 0px 0px 3px;
box-shadow: #1AE3F2 0px 0px 3px;
}

/* Select2 multiselect overrides */
.select2-container-multi {
position: relative;
width: 100%!important;
background: #fff;
border-radius: 5px;
}
.select2-container-multi::before {
content: "\25BE";
display: block;
position: absolute;
right: 8px;
top: calc(50% - 5px);
line-height: 10px;
color: #444;
}
.select2-container-multi .select2-choices {
margin-bottom: 0;
padding-bottom: 0;
padding-right: 20px;
background: none transparent;
}
.select2-container-multi .select2-choices .select2-search-field input {
padding: 3px 5px 7px;
}
.select2-container-multi .select2-choices .select2-search-choice {
border: 1px solid #c5c5c5;
background-color: #b5d5d8;
background-image: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.select2-container-multi .select2-choices .select2-search-choice-focus {
background: #76c5cc;
}
.select2-dropdown-open.select2-drop-above .select2-choices {
border-color: #18CBDB;
border-top-color: transparent;
background-image: none;
}
.select2-drop {
background: #fff;
color: #333;
border: 1px solid #c6c6c6;
border-top: 0;
border-radius: 0 0 4px 4px;
}
.select2-drop.select2-drop-above {
border-top: 1px solid #c6c6c6;
border-bottom: 1px solid #c6c6c6;
}
.select2-drop-active {
border: 1px solid #c6c6c6;
border-top: none;
}
.select2-drop.select2-drop-above.select2-drop-active {
border-top: 1px solid #c6c6c6;
}
.select2-drop-auto-width {
border-top: 1px solid #c6c6c6;
}
.select2-results .select2-highlighted {
background: #76c5cc;
color: inherit;
}
.select2-results .select2-selected {
display: list-item;
background: #b5d5d8;
cursor: not-allowed;
}
.select2-results .select2-selected .select2-result-label {
cursor: not-allowed;
}
.select2-results .select2-selected:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
margin-left: 5px;
background: url(images/checkmark.png) center center no-repeat transparent;
background-size: contain;
}
.select2-result:not(.select2-selected) {
padding-left: 17px;
}
.select2-results .select2-result-label {
display: inline-block;
}
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error,
.select2-results .select2-selection-limit {
padding-left: 10px;
color: #BD5330;
background: transparent;
}
/* End of Select2 multiselect overrides */

input.fluid {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:100%;
}
.form-builder-element .form-autocomplete,
.form-builder-element input.form-text,
.form-builder-element textarea.form-textarea,
.form-builder-element select.form-select {
box-sizing: border-box;
width: 100%;
}

.form-builder-element select.form-select {
pointer-events: none;
}

.select2-container .select2-selection {
min-height: 1.4em;
}
.select2-container--open .select2-selection,
.select2-container .select2-search--dropdown .select2-search__field {
margin: 0;
}

/* Select2 multiselect overrides */
select[multiple] + .select2-container {
min-width: 100%;
}
.select2-container .select2-selection--multiple .select2-selection__choice {
border-color: #b5d5d8;
background-color: #b5d5d8;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
color: #108b96;
}

/* Select2 singleselect overrides */
select:not([multiple]) + .select2-container {
min-width: 15em;
}
.select2-container .select2-selection--single {
height: auto;
}
.select2-container .select2-selection--single .select2-selection__rendered {
line-height: inherit;
color: #575555;
}
.select2-container .select2-selection--single .select2-selection__placeholder {
color: #575555;
}
.select2-container .select2-selection--single .select2-selection__arrow {
height: 2.4em;
}

/* Select2 dropdown overrides */
.select2-dropdown {
border-color: #c6c2ba;
border-width: 2px;
border-radius: 5px;
}
.select2-container .select2-results__option--highlighted[aria-selected] {
background-color: #76c5cc;
color: white;
}
.select2-container .select2-results__option[aria-selected=true],
.select2-container .select2-results__option--highlighted[aria-selected=true] {
background-color: #b5d5d8;
color: inherit;
}
.select2-container .select2-results__option[aria-selected=true]:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
margin-right: 5px;
margin-top: -2px;
background: url(images/checkmark.png) center center no-repeat transparent;
background-size: contain;
}
.select2-container .select2-results__message {
color: #BD5330;
}

/* Select2 form builder overrides */
.form-builder-element .select2-container {
pointer-events: none;
}
.form-builder-element select:not([multiple]) + .select2-container {
min-width: 100%;
}
.form-builder-element .select2-container .select2-selection {
min-height: 2.5em;
}

/* Fluid input */
input.fluid {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:100%;
}

table input.fluid { width:auto; }
table input.fluid { width:auto; }

html.js input.form-autocomplete { background-position:100% 7px; }
html.js input.throbbing { background-position:100% -13px; }
html.js input.form-autocomplete { background-position:100% 7px; }
html.js input.throbbing { background-position:100% -13px; }

.form-select:hover {
cursor: pointer;
Expand Down Expand Up @@ -890,7 +885,10 @@ form .form-actions {
.admin-enabled { color: #099; }
.admin-missing { color: #c30; }

.form-item input.error, .form-item textarea.error, .form-item select.error {
.form-item input.error,
.form-item textarea.error,
.form-item select.error,
.form-item select.error + .select2-container .select2-selection {
border-color: #d66540;
}
.form-required {
Expand Down

0 comments on commit fcfd59f

Please sign in to comment.