From 62867920e9bd4b190d22d11cf18ec90f13a5edc5 Mon Sep 17 00:00:00 2001 From: yuriinalivaiko Date: Sat, 18 Jun 2022 16:52:57 +0300 Subject: [PATCH 1/2] - fixed select2 style conflicts with 3-party plugins --- assets/css/um-styles.css | 56 ++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/assets/css/um-styles.css b/assets/css/um-styles.css index 29e708cc..4d974a75 100644 --- a/assets/css/um-styles.css +++ b/assets/css/um-styles.css @@ -881,10 +881,10 @@ small.um-max-filesize span{ - Customize Select2 CSS */ -.select2-container.select2-container--open { +.um-field .select2-container.select2-container--open { z-index: 9999999; } -.select2.select2-container .select2-selection { +.um-field .select2.select2-container .select2-selection { display: block !important; height: 40px; padding: 0 0 0 12px !important; @@ -909,11 +909,11 @@ small.um-max-filesize span{ background-color: #fff !important; border: 1px solid #ddd !important; } -.rtl .select2.select2-container .select2-selection { +.rtl .um-field .select2.select2-container .select2-selection { padding: 0 12px 0 0 !important; } -.select2.select2-container .select2-selection .select2-selection__arrow { +.um-field .select2.select2-container .select2-selection .select2-selection__arrow { display: inline-block !important; width: 34px !important; height: 100% !important; @@ -928,12 +928,12 @@ small.um-max-filesize span{ background: transparent !important; border-left: 0 !important; } -.rtl .select2.select2-container .select2-selection .select2-selection__arrow { +.rtl .um-field .select2.select2-container .select2-selection .select2-selection__arrow { right: initial !important; left: 0 !important; } -.select2.select2-container .select2-selection .select2-selection__arrow:before { +.um-field .select2.select2-container .select2-selection .select2-selection__arrow:before { content: "\f3d0" !important; font-size: 28px !important; font-family: "Ionicons" !important; @@ -946,16 +946,16 @@ small.um-max-filesize span{ color: #aaaaaa; } -.select2.select2-container .select2-selection .select2-selection__arrow b[role="presentation"] { +.um-field .select2.select2-container .select2-selection .select2-selection__arrow b[role="presentation"] { display: none; } -.select2-container.select2-container--open .select2-dropdown { +.um-field .select2-container.select2-container--open .select2-dropdown { border: 1px solid #ddd !important; border-radius: 0; } -.select2-container.select2-container--open .select2-dropdown .select2-results li { +.um-field .select2-container.select2-container--open .select2-dropdown .select2-results li { list-style: none; display: list-item; background-image: none; @@ -967,24 +967,24 @@ small.um-max-filesize span{ min-height: 1em !important; } -.select2.select2-container .select2-selection.select2-selection--multiple { +.um-field .select2.select2-container .select2-selection.select2-selection--multiple { height: auto !important; line-height: 0.8 !important; min-height: 40px; padding-bottom: 4px !important; } -.select2-container--default .select2-selection--single .select2-selection__rendered { +.um-field .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 37px; padding-left: 0 !important; padding-right: 24px !important; } -.rtl .select2-container--default .select2-selection--single .select2-selection__rendered { +.rtl .um-field .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 24px !important; padding-right: 0 !important; } -.select2-container--default .select2-selection--multiple .select2-selection__rendered { +.um-field .select2-container--default .select2-selection--multiple .select2-selection__rendered { line-height: 37px; box-sizing: border-box; list-style: none; @@ -994,23 +994,23 @@ small.um-max-filesize span{ width: 100%; font-size: 13px; } -.rtl .select2-container--default .select2-selection--multiple .select2-selection__rendered { +.rtl .um-field .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding-left: 30px !important; padding-right: 0 !important; } -.select2-results li.select2-results__option.select2-results__option--highlighted { +.um-field .select2-results li.select2-results__option.select2-results__option--highlighted { background: none !important; background: #f4f4f4 !important; color: #666 !important; } -.select2-container--default .select2-results__option[aria-selected="true"] { +.um-field .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #ddd; } -.select2-container--default .select2-selection--single .select2-selection__clear, -.select2-container--default .select2-selection--multiple .select2-selection__clear { +.um-field .select2-container--default .select2-selection--single .select2-selection__clear, +.um-field .select2-container--default .select2-selection--multiple .select2-selection__clear { color: #aaaaaa !important; font-size: 28px; font-weight: normal; @@ -1020,42 +1020,42 @@ small.um-max-filesize span{ text-align: center; width: 1em; } -.rtl .select2-container--default .select2-selection--single .select2-selection__clear, -.rtl .select2-container--default .select2-selection--multiple .select2-selection__clear { +.rtl .um-field .select2-container--default .select2-selection--single .select2-selection__clear, +.rtl .um-field .select2-container--default .select2-selection--multiple .select2-selection__clear { left: 0; right: initial; } -.select2-container--default .select2-selection--multiple .select2-selection__clear { +.um-field .select2-container--default .select2-selection--multiple .select2-selection__clear { position: absolute; } -.select2-container--default .select2-selection--multiple .select2-selection__choice { +.um-field .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 5px 5px 0 0; + max-height: 28px; padding: 3px 3px 3px 5px; } -.rtl .select2-container--default .select2-selection--multiple .select2-selection__choice{ +.rtl .um-field .select2-container--default .select2-selection--multiple .select2-selection__choice{ margin: 5px 0 0 5px; - max-height: 28px; padding: 3px 5px 3px 3px; } -.um .um-form .select2-container .select2-search.select2-search--inline{ +.um-field .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline{ margin: 5px 5px 0 0; padding: 0px; } -.rtl .um .um-form .select2-container .select2-search.select2-search--inline{ +.rtl .um-field .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline{ margin: 5px 0 0 5px; } -.um .um-form .select2-container .select2-search.select2-search--inline > input { +.um-field .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline > input { border: none !important; padding: 0 !important; border-radius: 0 !important; max-height: 28px; } -.um .um-form .select2-container--default .select2-selection--multiple .select2-selection__rendered li { +.um-field .select2-container--default .select2-selection--multiple .select2-selection__rendered li { overflow-x: hidden; text-overflow: ellipsis; max-width: 100%; From e013db9102ea2fd8286911efd79b9545ce52bcc0 Mon Sep 17 00:00:00 2001 From: yuriinalivaiko Date: Wed, 22 Jun 2022 00:28:24 +0300 Subject: [PATCH 2/2] - added selectors for the .um-search-filter wrapper --- assets/css/um-styles.css | 113 ++++++++++++++++++--------------------- 1 file changed, 53 insertions(+), 60 deletions(-) diff --git a/assets/css/um-styles.css b/assets/css/um-styles.css index 4d974a75..4db8e5e5 100644 --- a/assets/css/um-styles.css +++ b/assets/css/um-styles.css @@ -881,9 +881,11 @@ small.um-max-filesize span{ - Customize Select2 CSS */ +.um-search-filter .select2-container.select2-container--open, .um-field .select2-container.select2-container--open { z-index: 9999999; } +.um-search-filter .select2.select2-container .select2-selection, .um-field .select2.select2-container .select2-selection { display: block !important; height: 40px; @@ -894,8 +896,6 @@ small.um-max-filesize span{ line-height: 35px !important; color: #666 !important; font-size: 15px !important; - text-align: left !important; - text-decoration: none !important; -moz-border-radius: 2px !important; -webkit-border-radius: 2px !important; border-radius: 2px !important; @@ -905,39 +905,37 @@ small.um-max-filesize span{ -moz-user-select: none; -ms-user-select: none; user-select: none; - background: none !important; - background-color: #fff !important; + background: #fff !important; border: 1px solid #ddd !important; } +.rtl .um-search-filter .select2.select2-container .select2-selection, .rtl .um-field .select2.select2-container .select2-selection { padding: 0 12px 0 0 !important; } +.um-search-filter .select2.select2-container .select2-selection .select2-selection__arrow, .um-field .select2.select2-container .select2-selection .select2-selection__arrow { display: inline-block !important; width: 34px !important; height: 100% !important; - position: absolute !important; - right: 0 !important; - top: 0 !important; - -moz-border-radius: 0 2px 2px 0 !important; - -webkit-border-radius: 0 2px 2px 0 !important; - border-radius: 0 2px 2px 0 !important; - background-clip: padding-box !important; - text-align: center !important; + position: absolute; + right: 0; + top: 0; + text-align: center; background: transparent !important; - border-left: 0 !important; + border: none !important; } +.rtl .um-search-filter .select2.select2-container .select2-selection .select2-selection__arrow, .rtl .um-field .select2.select2-container .select2-selection .select2-selection__arrow { - right: initial !important; - left: 0 !important; + right: initial; + left: 0; } +.um-search-filter .select2.select2-container .select2-selection .select2-selection__arrow:before, .um-field .select2.select2-container .select2-selection .select2-selection__arrow:before { content: "\f3d0" !important; font-size: 28px !important; font-family: "Ionicons" !important; - font-weight: normal; display: block; height: 100%; line-height: 40px; @@ -946,27 +944,31 @@ small.um-max-filesize span{ color: #aaaaaa; } +.um-search-filter .select2.select2-container .select2-selection .select2-selection__arrow b[role="presentation"], .um-field .select2.select2-container .select2-selection .select2-selection__arrow b[role="presentation"] { display: none; } +.um-search-filter .select2-container.select2-container--open .select2-dropdown, .um-field .select2-container.select2-container--open .select2-dropdown { border: 1px solid #ddd !important; border-radius: 0; } +.um-search-filter .select2-container.select2-container--open .select2-dropdown .select2-results li, .um-field .select2-container.select2-container--open .select2-dropdown .select2-results li { list-style: none; display: list-item; - background-image: none; + background: none; font-size: 15px; margin: 5px !important; color: #666 !important; padding: 3px 7px 4px !important; cursor: pointer; - min-height: 1em !important; + min-height: 1em; } +.um-search-filter .select2.select2-container .select2-selection.select2-selection--multiple, .um-field .select2.select2-container .select2-selection.select2-selection--multiple { height: auto !important; line-height: 0.8 !important; @@ -974,44 +976,50 @@ small.um-max-filesize span{ padding-bottom: 4px !important; } +.um-search-filter .select2-container--default .select2-selection--single .select2-selection__rendered, .um-field .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 37px; - padding-left: 0 !important; - padding-right: 24px !important; + padding-left: 0px; + padding-right: 24px; } +.rtl .um-search-filter .select2-container--default .select2-selection--single .select2-selection__rendered, .rtl .um-field .select2-container--default .select2-selection--single .select2-selection__rendered { - padding-left: 24px !important; - padding-right: 0 !important; + padding-left: 24px; + padding-right: 0px; } +.um-search-filter .select2-container--default .select2-selection--multiple .select2-selection__rendered, .um-field .select2-container--default .select2-selection--multiple .select2-selection__rendered { line-height: 37px; box-sizing: border-box; list-style: none; margin: 0; - padding-left: 0 !important; + padding-left: 0px; padding-right: 30px; width: 100%; font-size: 13px; } +.rtl .um-search-filter .select2-container--default .select2-selection--multiple .select2-selection__rendered, .rtl .um-field .select2-container--default .select2-selection--multiple .select2-selection__rendered { - padding-left: 30px !important; - padding-right: 0 !important; + padding-left: 30px; + padding-right: 0px; } -.um-field .select2-results li.select2-results__option.select2-results__option--highlighted { - background: none !important; - background: #f4f4f4 !important; - color: #666 !important; +.um-search-filter .select2-dropdown .select2-results li.select2-results__option.select2-results__option--highlighted, +.um-field .select2-dropdown .select2-results li.select2-results__option.select2-results__option--highlighted { + background: #f4f4f4; + color: #666; } -.um-field .select2-container--default .select2-results__option[aria-selected="true"] { +.um-search-filter .select2-dropdown .select2-results li.select2-results__option[aria-selected="true"], +.um-field .select2-dropdown .select2-results li.select2-results__option[aria-selected="true"] { background-color: #ddd; } - +.um-search-filter .select2-container--default .select2-selection--single .select2-selection__clear, +.um-search-filter .select2-container--default .select2-selection--multiple .select2-selection__clear, .um-field .select2-container--default .select2-selection--single .select2-selection__clear, .um-field .select2-container--default .select2-selection--multiple .select2-selection__clear { - color: #aaaaaa !important; + color: #aaaaaa; font-size: 28px; font-weight: normal; line-height: 34px; @@ -1020,41 +1028,49 @@ small.um-max-filesize span{ text-align: center; width: 1em; } +.rtl .um-search-filter .select2-container--default .select2-selection--single .select2-selection__clear, +.rtl .um-search-filter .select2-container--default .select2-selection--multiple .select2-selection__clear, .rtl .um-field .select2-container--default .select2-selection--single .select2-selection__clear, .rtl .um-field .select2-container--default .select2-selection--multiple .select2-selection__clear { left: 0; right: initial; } +.um-search-filter .select2-container--default .select2-selection--multiple .select2-selection__clear, .um-field .select2-container--default .select2-selection--multiple .select2-selection__clear { position: absolute; } +.um-search-filter .select2-container--default .select2-selection--multiple .select2-selection__choice, .um-field .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 5px 5px 0 0; max-height: 28px; padding: 3px 3px 3px 5px; } -.rtl .um-field .select2-container--default .select2-selection--multiple .select2-selection__choice{ +.rtl .um-search-filter .select2-container--default .select2-selection--multiple .select2-selection__choice, +.rtl .um-field .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 5px 0 0 5px; padding: 3px 5px 3px 3px; } -.um-field .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline{ +.um-search-filter .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline, +.um-field .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline { margin: 5px 5px 0 0; padding: 0px; } -.rtl .um-field .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline{ +.rtl .um-search-filter .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline, +.rtl .um-field .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline { margin: 5px 0 0 5px; } +.um-search-filter .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline > input, .um-field .select2-container--default .select2-selection--multiple .select2-search.select2-search--inline > input { border: none !important; padding: 0 !important; - border-radius: 0 !important; max-height: 28px; } +.um-search-filter .select2-container--default .select2-selection--multiple .select2-selection__rendered li, .um-field .select2-container--default .select2-selection--multiple .select2-selection__rendered li { overflow-x: hidden; text-overflow: ellipsis; @@ -1066,31 +1082,8 @@ small.um-max-filesize span{ /* - Multi-select */ -/*.um-field .select2-selection--multiple .select2-search{*/ - /*clear: both;*/ - /*float: none;*/ - /*margin-right: 12px;*/ - /*padding-top: 0.5rem;*/ - /*position: relative;*/ -/*}*/ -/*.um-field .select2-selection--multiple .select2-search:first-of-type{*/ - /*padding-top: 12px;*/ -/*}*/ -/*.um-field .select2-selection--multiple .select2-search::before {*/ - /*content: "\f21f";*/ - /*font-family: "Ionicons";*/ - /*font-size: 1.4rem;*/ - /*line-height: 2rem;*/ - /*right: 0.3rem;*/ - /*position: absolute;*/ -/*}*/ -/*.um-field .select2-selection--multiple .select2-search input.select2-search__field{*/ - /*background-color: rgba(128,128,128,0.1) !important;*/ - /*height: 2rem !important;*/ - /*width: 100% !important;*/ -/*}*/ -/* @todo maybe deprecated and used only for select and multiselect */ +/* @todo maybe deprecated and used only for select and multiselect */ .um-field-select .um-field-area .um-field-icon, .um-field-multiselect .um-field-area .um-field-icon { z-index: 99999999;