diff --git a/assets/css/um-styles.css b/assets/css/um-styles.css index ac55ba52..a6473056 100644 --- a/assets/css/um-styles.css +++ b/assets/css/um-styles.css @@ -877,34 +877,40 @@ small.um-max-filesize span{ right: 10px; } -/* Customize Select2 CSS */ +/* + - Customize Select2 CSS +*/ + .select2-container.select2-container--open { - z-index: 9999999; - } + z-index: 9999999; +} .select2.select2-container .select2-selection { - display: block !important; - height: 40px; - padding: 0 0 0 12px !important; - overflow: hidden !important; - position: relative !important; - white-space: nowrap !important; - 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; - background-clip: padding-box !important; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background: none !important; - background-color: #fff !important; - border: 1px solid #ddd !important; + display: block !important; + height: 40px; + padding: 0 0 0 12px !important; + overflow: hidden !important; + position: relative !important; + white-space: nowrap !important; + 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; + background-clip: padding-box !important; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: none !important; + background-color: #fff !important; + border: 1px solid #ddd !important; +} +.rtl .select2.select2-container .select2-selection { + padding: 0 12px 0 0 !important; } .select2.select2-container .select2-selection .select2-selection__arrow { @@ -922,51 +928,64 @@ small.um-max-filesize span{ background: transparent !important; border-left: 0 !important; } +.rtl .select2.select2-container .select2-selection .select2-selection__arrow { + right: initial !important; + left: 0 !important; +} .select2.select2-container .select2-selection .select2-selection__arrow:before { content: "\f3d0" !important; - font-size: 27px !important; - font-family: "Ionicons" !important; - width: 100% !important; - display: block; - height: 100%; - line-height: 35px; - color: #aaaaaa; + font-size: 28px !important; + font-family: "Ionicons" !important; + font-weight: normal; + display: block; + height: 100%; + line-height: 40px; + min-width: 1em; + text-align: center; + color: #aaaaaa; } .select2.select2-container .select2-selection .select2-selection__arrow b[role="presentation"] { - display:none; + display: none; } .select2-container.select2-container--open .select2-dropdown { - border: 1px solid #ddd !important; + border: 1px solid #ddd !important; border-radius: 0; } .select2-container.select2-container--open .select2-dropdown .select2-results li { list-style: none; - display: list-item; - background-image: none; - font-size: 15px; - margin: 5px !important; - color: #666 !important; - padding: 3px 7px 4px !important; - cursor: pointer; - min-height: 1em !important; - } + display: list-item; + background-image: none; + font-size: 15px; + margin: 5px !important; + color: #666 !important; + padding: 3px 7px 4px !important; + cursor: pointer; + min-height: 1em !important; +} .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 { - padding-left: 0 !important; line-height: 37px; + padding-left: 0 !important; + padding-right: 24px !important; +} +.rtl .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 { - line-height: 37px; + line-height: 37px; box-sizing: border-box; list-style: none; margin: 0; @@ -975,23 +994,36 @@ small.um-max-filesize span{ width: 100%; font-size: 13px; } +.rtl .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 { - background: none !important; - background: #f4f4f4 !important; - color: #666 !important; + background: none !important; + background: #f4f4f4 !important; + color: #666 !important; } .select2-container--default .select2-results__option[aria-selected="true"] { - background-color: #ddd; + background-color: #ddd; } .select2-container--default .select2-selection--single .select2-selection__clear, .select2-container--default .select2-selection--multiple .select2-selection__clear { - right: 10px; - font-size: 30px; color: #aaaaaa !important; + font-size: 28px; + font-weight: normal; + line-height: 34px; margin: 0 !important; + right: 0; + 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 { + left: 0; + right: initial; } .select2-container--default .select2-selection--multiple .select2-selection__clear { @@ -999,8 +1031,13 @@ small.um-max-filesize span{ } .select2-container--default .select2-selection--multiple .select2-selection__choice { + margin: 5px 5px 0 0; padding: 3px 3px 3px 5px; } +.rtl .select2-container--default .select2-selection--multiple .select2-selection__choice{ + margin: 5px 0 0 5px; + padding: 3px 5px 3px 3px; +} .um .um-form .select2-container .select2-search.select2-search--inline > input { border: none !important; @@ -1013,6 +1050,8 @@ small.um-max-filesize span{ text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; + line-height: 20px; + max-height: 28px; } /* @@ -1042,10 +1081,6 @@ small.um-max-filesize span{ /*width: 100% !important;*/ /*}*/ - - - - /* @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 {