From f845f68896645830f27db9b6357c72620d8f1bb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Farr=C3=A9?= Date: Mon, 13 Jan 2025 14:57:58 +0000 Subject: [PATCH] update --- .../css/select2Theme/build.less | 3 + .../css/select2Theme/select2-humhub.css | 1 + .../css/select2Theme/select2-humhub.less | 679 ++++++++++++++++++ .../less/humhub.modified/less/activities.less | 20 + .../less/humhub.modified/less/badge.less | 31 + resources/less/humhub.modified/less/base.less | 109 +++ .../less/humhub.modified/less/button.less | 253 +++++++ .../less/humhub.modified/less/cards.less | 262 +++++++ .../less/humhub.modified/less/comment.less | 156 ++++ .../less/humhub.modified/less/dark-mode.less | 546 ++++++++++++++ .../less/humhub.modified/less/datepicker.less | 43 ++ .../less/humhub.modified/less/dropdown.less | 102 +++ resources/less/humhub.modified/less/file.less | 221 ++++++ resources/less/humhub.modified/less/form.less | 411 +++++++++++ .../less/humhub.modified/less/gridview.less | 65 ++ .../less/humhub.modified/less/humhub.less | 217 ++++++ resources/less/humhub.modified/less/icon.less | 32 + .../less/humhub.modified/less/installer.less | 42 ++ .../less/humhub.modified/less/list-group.less | 66 ++ .../less/humhub.modified/less/loader.less | 46 ++ .../less/humhub.modified/less/login.less | 49 ++ .../less/humhub.modified/less/markdown.less | 181 +++++ .../less/humhub.modified/less/media.less | 165 +++++ .../less/humhub.modified/less/mentioning.less | 99 +++ .../less/humhub.modified/less/mixins.less | 111 +++ .../less/humhub.modified/less/mobile.less | 143 ++++ .../less/humhub.modified/less/modal.less | 113 +++ .../less/humhub.modified/less/modules.less | 263 +++++++ resources/less/humhub.modified/less/nav.less | 305 ++++++++ .../humhub.modified/less/notification.less | 67 ++ .../less/humhub.modified/less/oembed.less | 76 ++ .../less/humhub.modified/less/pagination.less | 23 + .../less/humhub.modified/less/panel.less | 200 ++++++ .../less/humhub.modified/less/popover.less | 30 + .../less/humhub.modified/less/print.less | 17 + .../less/humhub.modified/less/profile.less | 29 + .../less/humhub.modified/less/progress.less | 21 + .../less/humhub.modified/less/richtext.less | 590 +++++++++++++++ .../less/humhub.modified/less/search.less | 214 ++++++ .../less/humhub.modified/less/sidebar.less | 5 + .../less/humhub.modified/less/space.less | 87 +++ .../less/humhub.modified/less/stream.less | 397 ++++++++++ .../less/humhub.modified/less/table.less | 49 ++ resources/less/humhub.modified/less/tags.less | 79 ++ .../less/humhub.modified/less/tooltip.less | 41 ++ .../less/humhub.modified/less/topbar.less | 365 ++++++++++ resources/less/humhub.modified/less/tour.less | 21 + .../humhub.modified/less/user-feedback.less | 108 +++ .../less/humhub.modified/less/variables.less | 101 +++ resources/less/humhub.modified/less/well.less | 20 + themes/Clean/scss/humhub/_stream.scss | 120 ++-- 51 files changed, 7354 insertions(+), 40 deletions(-) create mode 100644 resources/less/humhub.modified/css/select2Theme/build.less create mode 100644 resources/less/humhub.modified/css/select2Theme/select2-humhub.css create mode 100644 resources/less/humhub.modified/css/select2Theme/select2-humhub.less create mode 100644 resources/less/humhub.modified/less/activities.less create mode 100644 resources/less/humhub.modified/less/badge.less create mode 100644 resources/less/humhub.modified/less/base.less create mode 100644 resources/less/humhub.modified/less/button.less create mode 100644 resources/less/humhub.modified/less/cards.less create mode 100644 resources/less/humhub.modified/less/comment.less create mode 100644 resources/less/humhub.modified/less/dark-mode.less create mode 100644 resources/less/humhub.modified/less/datepicker.less create mode 100644 resources/less/humhub.modified/less/dropdown.less create mode 100644 resources/less/humhub.modified/less/file.less create mode 100644 resources/less/humhub.modified/less/form.less create mode 100644 resources/less/humhub.modified/less/gridview.less create mode 100644 resources/less/humhub.modified/less/humhub.less create mode 100644 resources/less/humhub.modified/less/icon.less create mode 100644 resources/less/humhub.modified/less/installer.less create mode 100644 resources/less/humhub.modified/less/list-group.less create mode 100644 resources/less/humhub.modified/less/loader.less create mode 100644 resources/less/humhub.modified/less/login.less create mode 100644 resources/less/humhub.modified/less/markdown.less create mode 100644 resources/less/humhub.modified/less/media.less create mode 100644 resources/less/humhub.modified/less/mentioning.less create mode 100644 resources/less/humhub.modified/less/mixins.less create mode 100644 resources/less/humhub.modified/less/mobile.less create mode 100644 resources/less/humhub.modified/less/modal.less create mode 100644 resources/less/humhub.modified/less/modules.less create mode 100644 resources/less/humhub.modified/less/nav.less create mode 100644 resources/less/humhub.modified/less/notification.less create mode 100644 resources/less/humhub.modified/less/oembed.less create mode 100644 resources/less/humhub.modified/less/pagination.less create mode 100644 resources/less/humhub.modified/less/panel.less create mode 100644 resources/less/humhub.modified/less/popover.less create mode 100644 resources/less/humhub.modified/less/print.less create mode 100644 resources/less/humhub.modified/less/profile.less create mode 100644 resources/less/humhub.modified/less/progress.less create mode 100644 resources/less/humhub.modified/less/richtext.less create mode 100644 resources/less/humhub.modified/less/search.less create mode 100644 resources/less/humhub.modified/less/sidebar.less create mode 100644 resources/less/humhub.modified/less/space.less create mode 100644 resources/less/humhub.modified/less/stream.less create mode 100644 resources/less/humhub.modified/less/table.less create mode 100644 resources/less/humhub.modified/less/tags.less create mode 100644 resources/less/humhub.modified/less/tooltip.less create mode 100644 resources/less/humhub.modified/less/topbar.less create mode 100644 resources/less/humhub.modified/less/tour.less create mode 100644 resources/less/humhub.modified/less/user-feedback.less create mode 100644 resources/less/humhub.modified/less/variables.less create mode 100644 resources/less/humhub.modified/less/well.less diff --git a/resources/less/humhub.modified/css/select2Theme/build.less b/resources/less/humhub.modified/css/select2Theme/build.less new file mode 100644 index 0000000..b7b6517 --- /dev/null +++ b/resources/less/humhub.modified/css/select2Theme/build.less @@ -0,0 +1,3 @@ +@import "../../../../../../../vendor/bower-asset/bootstrap/less/variables"; +@import "../../../../../../../vendor/bower-asset/bootstrap/less/mixins"; +@import "select2-humhub.less"; \ No newline at end of file diff --git a/resources/less/humhub.modified/css/select2Theme/select2-humhub.css b/resources/less/humhub.modified/css/select2Theme/select2-humhub.css new file mode 100644 index 0000000..8d2efc5 --- /dev/null +++ b/resources/less/humhub.modified/css/select2Theme/select2-humhub.css @@ -0,0 +1 @@ +/*! Select2 humhub Theme v0.1.0-beta.4 | MIT License | github.com/select2/select2-humhub-theme */.select2-container--humhub{display:block}.select2-container--humhub .select2-selection{background-color:#fff;border:2px solid #ededed;border-radius:4px;color:#555;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;outline:0}.select2-container--humhub .select2-search--dropdown .select2-search__field{background-color:#fff;border:2px solid #ededed;border-radius:4px;color:#555;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px}.select2-container--humhub .select2-search__field{outline:0}.select2-container--humhub .select2-search__field::-webkit-input-placeholder{color:#999}.select2-container--humhub .select2-search__field:-moz-placeholder{color:#999}.select2-container--humhub .select2-search__field::-moz-placeholder{color:#999;opacity:1}.select2-container--humhub .select2-search__field:-ms-input-placeholder{color:#999}.select2-container--humhub .select2-results__option[role=group]{padding:0}.select2-container--humhub .select2-results__option[aria-disabled=true]{color:#777;cursor:not-allowed}.select2-container--humhub .select2-results__option[aria-selected=true]{background-color:#f5f5f5;color:#262626;border-left:3px solid transparent}.select2-container--humhub .select2-results__option[aria-selected=false]{border-left:3px solid transparent}.select2-container--humhub .select2-results__option--highlighted[aria-selected]{background-color:#f7f7f7;border-left:3px solid #6fdbe8;color:#555}.select2-container--humhub .select2-results__option .select2-results__option{padding:6px 12px}.select2-container--humhub .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--humhub .select2-results__option .select2-results__option .select2-results__option{margin-left:-12px;padding-left:24px}.select2-container--humhub .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-24px;padding-left:36px}.select2-container--humhub .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-36px;padding-left:48px}.select2-container--humhub .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-48px;padding-left:60px}.select2-container--humhub .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-60px;padding-left:72px}.select2-container--humhub .select2-results__group{color:#777;display:block;padding:6px 12px;font-size:12px;line-height:1.42857143;white-space:nowrap}.select2-container--humhub.select2-container--focus .select2-selection,.select2-container--humhub.select2-container--open .select2-selection{border:2px solid #6fdbe8;outline:0;box-shadow:none}.select2-container--humhub.select2-container--open .select2-selection .select2-selection__arrow b{border-color:transparent transparent #999 transparent;border-width:0 4px 4px 4px}.select2-container--humhub .select2-selection__clear{color:#999;cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--humhub .select2-selection__clear:hover{color:#333}.select2-container--humhub.select2-container--disabled .select2-selection{border-color:#ccc;-webkit-box-shadow:none;box-shadow:none}.select2-container--humhub.select2-container--disabled .select2-selection,.select2-container--humhub.select2-container--disabled .select2-search__field{cursor:not-allowed}.select2-container--humhub.select2-container--disabled .select2-selection,.select2-container--humhub.select2-container--disabled .select2-selection--multiple .select2-selection__choice{background-color:#eee}.select2-container--humhub.select2-container--disabled .select2-selection__clear,.select2-container--humhub.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove{display:none}.select2-container--humhub .select2-dropdown{-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175);border-color:#d7d7d7;overflow-x:hidden;margin-top:-1px}.select2-container--humhub .select2-dropdown--above{margin-top:1px}.select2-container--humhub .select2-results>.select2-results__options{max-height:400px;overflow-y:auto}.select2-container--humhub .select2-selection--single{height:34px;line-height:1.42857143;padding:6px 24px 6px 12px}.select2-container--humhub .select2-selection--single .select2-selection__arrow{position:absolute;bottom:0;right:12px;top:0;width:4px}.select2-container--humhub .select2-selection--single .select2-selection__arrow b{border-color:#999 transparent transparent transparent;border-style:solid;border-width:4px 4px 0 4px;height:0;left:0;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--humhub .select2-selection--single .select2-selection__rendered{color:#555;padding:0}.select2-container--humhub .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--humhub .select2-selection--multiple{min-height:34px;padding:2px}.select2-container--humhub .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;display:block;line-height:1.42857143;list-style:none;margin:0;overflow:hidden;padding:0;width:100%;text-overflow:ellipsis;white-space:nowrap}.select2-container--humhub .select2-selection--multiple .select2-selection__placeholder{color:#999;float:left;margin-top:5px}.select2-container--humhub .select2-selection--multiple .select2-selection__choice{color:#555;border-radius:4px;cursor:default;padding:0 6px;background-color:#6fdbe8;color:#fff;border-radius:3px;font-size:12px !important;padding:2px 5px 2px 2px;float:left;margin:2px;height:28px}.select2-container--humhub .select2-selection--multiple .select2-selection__choice img,.select2-container--humhub .select2-selection--multiple .select2-selection__choice div{margin-right:5px}.select2-container--humhub .select2-selection--multiple .select2-selection__choice span.no-image{line-height:27px;padding-left:5px}.select2-container--humhub .select2-selection--multiple .select2-selection__choice i{margin:0 2px}.select2-container--humhub .select2-selection--multiple .select2-selection__choice .picker-close{cursor:pointer}.select2-container--humhub .select2-selection--multiple .select2-search--inline .select2-search__field{background:transparent;padding:0 5px;width:auto !important;height:32px;line-height:1.42857143;margin-top:0;min-width:5em}.select2-container--humhub .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:none;font-weight:bold;margin-right:3px}.select2-container--humhub .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--humhub .select2-selection--multiple .select2-selection__clear{margin-top:6px}.select2-container--humhub.input-sm,.select2-container--humhub.input-lg{border-radius:0;font-size:12px;height:auto;line-height:1;padding:0}.select2-container--humhub.input-sm .select2-selection--single,.input-group-sm .select2-container--humhub .select2-selection--single,.form-group-sm .select2-container--humhub .select2-selection--single{border-radius:3px;font-size:12px;height:30px;line-height:1.5;padding:5px 22px 5px 10px}.select2-container--humhub.input-sm .select2-selection--single .select2-selection__arrow b,.input-group-sm .select2-container--humhub .select2-selection--single .select2-selection__arrow b,.form-group-sm .select2-container--humhub .select2-selection--single .select2-selection__arrow b{margin-left:-5px}.select2-container--humhub.input-sm .select2-selection--multiple,.input-group-sm .select2-container--humhub .select2-selection--multiple,.form-group-sm .select2-container--humhub .select2-selection--multiple{min-height:30px}.select2-container--humhub.input-sm .select2-selection--multiple .select2-selection__choice,.input-group-sm .select2-container--humhub .select2-selection--multiple .select2-selection__choice,.form-group-sm .select2-container--humhub .select2-selection--multiple .select2-selection__choice{font-size:12px;line-height:1.5;margin:4px 0 0 5px;padding:0 5px}.select2-container--humhub.input-sm .select2-selection--multiple .select2-search--inline .select2-search__field,.input-group-sm .select2-container--humhub .select2-selection--multiple .select2-search--inline .select2-search__field,.form-group-sm .select2-container--humhub .select2-selection--multiple .select2-search--inline .select2-search__field{padding:0 10px;font-size:12px;height:28px;line-height:1.5}.select2-container--humhub.input-sm .select2-selection--multiple .select2-selection__clear,.input-group-sm .select2-container--humhub .select2-selection--multiple .select2-selection__clear,.form-group-sm .select2-container--humhub .select2-selection--multiple .select2-selection__clear{margin-top:5px}.select2-container--humhub.input-lg .select2-selection--single,.input-group-lg .select2-container--humhub .select2-selection--single,.form-group-lg .select2-container--humhub .select2-selection--single{border-radius:6px;font-size:18px;height:46px;line-height:1.3333333;padding:10px 31px 10px 16px}.select2-container--humhub.input-lg .select2-selection--single .select2-selection__arrow,.input-group-lg .select2-container--humhub .select2-selection--single .select2-selection__arrow,.form-group-lg .select2-container--humhub .select2-selection--single .select2-selection__arrow{width:5px}.select2-container--humhub.input-lg .select2-selection--single .select2-selection__arrow b,.input-group-lg .select2-container--humhub .select2-selection--single .select2-selection__arrow b,.form-group-lg .select2-container--humhub .select2-selection--single .select2-selection__arrow b{border-width:5px 5px 0 5px;margin-left:-5px;margin-left:-10px;margin-top:-2.5px}.select2-container--humhub.input-lg .select2-selection--multiple,.input-group-lg .select2-container--humhub .select2-selection--multiple,.form-group-lg .select2-container--humhub .select2-selection--multiple{min-height:46px}.select2-container--humhub.input-lg .select2-selection--multiple .select2-selection__choice,.input-group-lg .select2-container--humhub .select2-selection--multiple .select2-selection__choice,.form-group-lg .select2-container--humhub .select2-selection--multiple .select2-selection__choice{font-size:18px;line-height:1.3333333;border-radius:4px;margin:9px 0 0 8px;padding:0 10px}.select2-container--humhub.input-lg .select2-selection--multiple .select2-search--inline .select2-search__field,.input-group-lg .select2-container--humhub .select2-selection--multiple .select2-search--inline .select2-search__field,.form-group-lg .select2-container--humhub .select2-selection--multiple .select2-search--inline .select2-search__field{padding:0 16px;font-size:18px;height:44px;line-height:1.3333333}.select2-container--humhub.input-lg .select2-selection--multiple .select2-selection__clear,.input-group-lg .select2-container--humhub .select2-selection--multiple .select2-selection__clear,.form-group-lg .select2-container--humhub .select2-selection--multiple .select2-selection__clear{margin-top:10px}.select2-container--humhub.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #999 transparent;border-width:0 5px 5px 5px}.input-group-lg .select2-container--humhub.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #999 transparent;border-width:0 5px 5px 5px}.select2-container--humhub[dir="rtl"] .select2-selection--single{padding-left:24px;padding-right:12px}.select2-container--humhub[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:0;padding-left:0;text-align:right}.select2-container--humhub[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--humhub[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:12px;right:auto}.select2-container--humhub[dir="rtl"] .select2-selection--single .select2-selection__arrow b{margin-left:0}.select2-container--humhub[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--humhub[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder{float:right}.select2-container--humhub[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:0;margin-right:6px}.select2-container--humhub[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.has-warning .select2-dropdown,.has-warning .select2-selection{border-color:#8a6d3b}.has-warning .select2-container--focus .select2-selection,.has-warning .select2-container--open .select2-selection{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #c0a16b;border-color:#66512c}.has-warning.select2-drop-active{border-color:#66512c}.has-warning.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#66512c}.has-error .select2-dropdown,.has-error .select2-selection{border-color:#a94442}.has-error .select2-container--focus .select2-selection,.has-error .select2-container--open .select2-selection{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;border-color:#843534}.has-error.select2-drop-active{border-color:#843534}.has-error.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#843534}.has-success .select2-dropdown,.has-success .select2-selection{border-color:#3c763d}.has-success .select2-container--focus .select2-selection,.has-success .select2-container--open .select2-selection{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168;border-color:#2b542c}.has-success.select2-drop-active{border-color:#2b542c}.has-success.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#2b542c}.input-group .select2-container--humhub{display:table;table-layout:fixed;position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group.select2-humhub-prepend .select2-container--humhub .select2-selection{border-bottom-left-radius:0;border-top-left-radius:0}.input-group.select2-humhub-append .select2-container--humhub .select2-selection{border-bottom-right-radius:0;border-top-right-radius:0}.select2-humhub-append .select2-container--humhub,.select2-humhub-prepend .select2-container--humhub,.select2-humhub-append .input-group-btn,.select2-humhub-prepend .input-group-btn,.select2-humhub-append .input-group-btn .btn,.select2-humhub-prepend .input-group-btn .btn{vertical-align:top}.form-control.select2-hidden-accessible{position:absolute !important;width:1px !important}.form-inline .select2-container--humhub{display:inline-block} \ No newline at end of file diff --git a/resources/less/humhub.modified/css/select2Theme/select2-humhub.less b/resources/less/humhub.modified/css/select2Theme/select2-humhub.less new file mode 100644 index 0000000..1689c3c --- /dev/null +++ b/resources/less/humhub.modified/css/select2Theme/select2-humhub.less @@ -0,0 +1,679 @@ +/*! Select2 humhub Theme v0.1.0-beta.4 | MIT License | github.com/select2/select2-humhub-theme */ +// +// Variables +// -------------------------------------------------- +// humhub defaults not available as pre-defined variables +// These should not be overridden. +// @see https://github.com/twbs/humhub-sass/blob/master/assets/stylesheets/humhub/_forms.scss#L127 +@form-control-default-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); +// @see https://github.com/twbs/humhub-sass/blob/master/assets/stylesheets/humhub/mixins/_forms.scss#L43 +@form-control-focus-box-shadow: @form-control-default-box-shadow, 0 0 8px rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), 0.6); +// @see https://github.com/twbs/humhub-sass/blob/master/assets/stylesheets/humhub/_forms.scss#L128 +@form-control-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +// Custom variables +// ------------------------- +@dropdown-arrow-color: @input-color-placeholder; +@dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175); +@clear-selection-color: @dropdown-arrow-color; +// +// Mixins +// -------------------------------------------------- +// @see https://github.com/twbs/humhub-sass/blob/master/assets/stylesheets/humhub/_forms.scss#L115 +.humhub-input-defaults() { + background-color: @input-bg; + border: 2px solid @background-color-page; + border-radius: @input-border-radius; + color: @input-color; + font-family: @font-family-base; + font-size: @font-size-base; +} +// @see http://gethumhub.com/css/#forms-control-validation +// @see https://github.com/twbs/humhub-sass/blob/master/assets/stylesheets/humhub/_forms.scss#L388 +//.validation-state-focus(@color) { +// @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@color, 20%); +// +// .select2-dropdown, +// .select2-selection { +// border-color: @color; +// } +// +// .select2-container--focus .select2-selection, +// .select2-container--open .select2-selection { +// .box-shadow(@shadow); +// border-color: darken(@color, 10%); +// } +// +// &.select2-drop-active { +// border-color: darken(@color, 10%); +// +// &.select2-drop.select2-drop-above { +// border-top-color: darken(@color, 10%); +// } +// } +//} +// dropdown arrow when dropdown is open +.dropdown-arrow() { + .select2-selection--single { + /** + * Make the dropdown arrow point up while the dropdown is visible. + */ + .select2-selection__arrow b { + border-color: transparent transparent @dropdown-arrow-color transparent; + border-width: 0 @caret-width-large @caret-width-large @caret-width-large; + } + } +} +.select2-container--humhub { + display: block; + /*------------------------------------*\ + #COMMON STYLES + \*------------------------------------*/ + .picker-color { + display: inline-block; + width:16px; + height:16px; + border-radius: 4px; + position: relative; + top: 3px; + } + .select2-selection { + .humhub-input-defaults; + outline: 0; + min-height: 35px; + } + /** + * Search field in the Select2 dropdown. + */ + .select2-search--dropdown { + .select2-search__field { + .humhub-input-defaults; + } + } + /** + * No outline for all search fields - in the dropdown + * and inline in multi Select2s. + */ + .select2-search__field { + outline: 0; + &::placeholder { + color: @input-color-placeholder; + font-weight: normal; + } + } + /** + * Adjust Select2's choices hover and selected styles to match + * humhub 3's default dropdown styles. + * + * @see http://gethumhub.com/components/#dropdowns + */ + .select2-results__option { + &[role=group] { + padding: 0; + } + /** + * Disabled results. + * + * @see https://select2.github.io/examples.html#disabled-results + */ + &[aria-disabled=true] { + color: @dropdown-link-disabled-color; + cursor: @cursor-disabled; + } + /** + * Hover state. + */ + &[aria-selected=true] { + background-color: @dropdown-link-hover-bg; + color: @dropdown-link-hover-color; + border-left:3px solid transparent; + } + &[aria-selected=false] { + border-left:3px solid transparent; + } + /** + * Selected state. + */ + &--highlighted[aria-selected] { + background-color: @background-color-secondary; + border-left:3px solid @info; + color: @text-color-highlight; + } + .select2-results__option { + padding: @padding-base-vertical @padding-base-horizontal; + .select2-results__group { + padding-left: 0; + } + .select2-results__option { + margin-left: -@padding-base-horizontal; + padding-left: @padding-base-horizontal*2; + .select2-results__option { + margin-left: -@padding-base-horizontal*2; + padding-left: @padding-base-horizontal*3; + .select2-results__option { + margin-left: -@padding-base-horizontal*3; + padding-left: @padding-base-horizontal*4; + .select2-results__option { + margin-left: -@padding-base-horizontal*4; + padding-left: @padding-base-horizontal*5; + .select2-results__option { + margin-left: -@padding-base-horizontal*5; + padding-left: @padding-base-horizontal*6; + } + } + } + } + } + } + } + .select2-results__group { + color: @dropdown-header-color; + display: block; + padding: @padding-base-vertical @padding-base-horizontal; + font-size: @font-size-small; + line-height: @line-height-base; + white-space: nowrap; + } + &.select2-container--focus, + &.select2-container--open { + .select2-selection { + border: 2px solid @info; + outline: 0; + box-shadow: none; + } + } + &.select2-container--open { + /** + * Make the dropdown arrow point up while the dropdown is visible. + */ + .select2-selection .select2-selection__arrow b { + border-color: transparent transparent @dropdown-arrow-color transparent; + border-width: 0 @caret-width-base @caret-width-base @caret-width-base; + } + /** + * Handle border radii of the container when the dropdown is showing. + */ + &.select2-container--below { + .select2-selection { + //.border-bottom-radius(0); + //border-bottom-color: transparent; + } + } + &.select2-container--above { + .select2-selection { + //.border-top-radius(0); + //border-top-color: transparent; + } + } + } + /** + * Clear the selection. + */ + .select2-selection__clear { + color: @clear-selection-color; + cursor: pointer; + float: right; + font-weight: bold; + margin-right: 10px; + &:hover { + color: #333; + } + } + /** + * Address disabled Select2 styles. + * + * @see https://select2.github.io/examples.html#disabled + * @see http://gethumhub.com/css/#forms-control-disabled + */ + &.select2-container--disabled { + .select2-selection { + border-color: @input-border; + .box-shadow(none); + } + .select2-selection, + .select2-search__field { + cursor: @cursor-disabled; + } + .select2-selection { + background-color: @input-bg-disabled; + } + .select2-selection--multiple .select2-selection__choice { + background-color: @btn-link-disabled-color; + } + .select2-selection__clear, + .select2-selection--multiple .select2-selection__choice__remove { + display: none; + } + } + /*------------------------------------*\ + #DROPDOWN + \*------------------------------------*/ + /** + * Dropdown border color and box-shadow. + */ + .select2-dropdown { + .box-shadow(@dropdown-box-shadow); + border-color: @background3; + overflow-x: hidden; + margin-top: -1px; + &--above { + margin-top: 1px; + } + } + /** + * Limit the dropdown height. + */ + .select2-results > .select2-results__options { + max-height: 400px; + overflow-y: auto; + } + /*------------------------------------*\ + #SINGLE SELECT2 + \*------------------------------------*/ + .select2-selection--single { + height: @input-height-base; + line-height: @line-height-base; + padding: @padding-base-vertical @padding-base-horizontal + @caret-width-base*3 @padding-base-vertical @padding-base-horizontal; + /** + * Adjust the single Select2's dropdown arrow button appearance. + */ + .select2-selection__arrow { + position: absolute; + bottom: 0; + right: @padding-base-horizontal; + top: 0; + width: @caret-width-base; + b { + border-color: @dropdown-arrow-color transparent transparent transparent; + border-style: solid; + border-width: @caret-width-base @caret-width-base 0 @caret-width-base; + height: 0; + left: 0; + margin-left: -@caret-width-base; + margin-top: -@caret-width-base/2; + position: absolute; + top: 50%; + width: 0; + } + } + .select2-selection__rendered { + color: @input-color; + padding: 0; + } + .select2-selection__placeholder { + color: @input-color-placeholder; + } + } + /*------------------------------------*\ + #MULTIPLE SELECT2 + \*------------------------------------*/ + .select2-selection--multiple { + min-height: @input-height-base; + padding:2px; + .picker-color { + top: 4px; + margin-left: 3px; + } + .select2-selection__rendered { + box-sizing: border-box; + display: block; + line-height: @line-height-base; + list-style: none; + margin: 0; + overflow: hidden; + padding: 0; + width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + } + .select2-selection__placeholder { + color: @input-color-placeholder; + float: left; + margin-top: 5px; + } + /** + * Make Multi Select2's choices match humhub 3's default button styles. + */ + .select2-selection__choice { + color: @input-color; + border-radius: 4px; + cursor: default; + float: left; + padding: 0 @padding-base-vertical; + background-color: @info; + color: #fff; + border-radius: 3px; + font-size: 12px !important; + padding: 0 5px 2px 2px; + float: left; + margin: 2px; + height: 28px; + img, div { + margin-right:5px; + } + span.no-image { + line-height:27px; + padding-left:5px; + } + i { + margin: 0px 2px; + line-height:27px; + } + .picker-close { + cursor: pointer; + } + } + /** + * Minus 2px borders. + */ + .select2-search--inline { + .select2-search__field { + background: transparent; + padding: 0 5px; + width: auto !important; + height: @input-height-base - 2; + line-height: @line-height-base; + margin-top: 0; + min-width: 5em; + } + } + .select2-selection__choice__remove { + color: #999; + cursor: pointer; + display: none; + font-weight: bold; + margin-right: @padding-base-vertical / 2; + &:hover { + color: #333; + } + } + /** + * Clear the selection. + */ + .select2-selection__clear { + margin-top: @padding-base-vertical; + } + } + /** + * Address humhub control sizing classes + * + * 1. Reset humhub defaults. + * 2. Adjust the dropdown arrow button icon position. + * + * @see http://gethumhub.com/css/#forms-control-sizes + */ + /* 1 */ + &.input-sm, + &.input-lg { + border-radius: 0; + font-size: 12px; + height: auto; + line-height: 1; + padding: 0; + } + &.input-sm, + .input-group-sm &, + .form-group-sm & { + .select2-selection--single { + border-radius: @border-radius-small; + font-size: @font-size-small; + height: @input-height-small; + line-height: @line-height-small; + padding: @padding-small-vertical @padding-small-horizontal + @caret-width-base*3 @padding-small-vertical @padding-small-horizontal; + /* 2 */ + .select2-selection__arrow b { + margin-left: -@padding-small-vertical; + } + } + .select2-selection--multiple { + min-height: @input-height-small; + .select2-selection__choice { + font-size: @font-size-small; + line-height: @line-height-small; + margin: (@padding-small-vertical - 1) 0 0 @padding-small-horizontal/2; + padding: 0 @padding-small-vertical; + } + .select2-search--inline .select2-search__field { + padding: 0 @padding-small-horizontal; + font-size: @font-size-small; + height: @input-height-small - 2; + line-height: @line-height-small; + } + .select2-selection__clear { + margin-top: @padding-small-vertical; + } + } + } + &.input-lg, + .input-group-lg &, + .form-group-lg & { + .select2-selection--single { + border-radius: @border-radius-large; + font-size: @font-size-large; + height: @input-height-large; + line-height: @line-height-large; + padding: @padding-large-vertical @padding-large-horizontal + @caret-width-large*3 @padding-large-vertical @padding-large-horizontal; + /* 1 */ + .select2-selection__arrow { + width: @caret-width-large; + b { + border-width: @caret-width-large @caret-width-large 0 @caret-width-large; + margin-left: -@caret-width-large; + margin-left: -@padding-large-vertical; + margin-top: -@caret-width-large/2; + } + } + } + .select2-selection--multiple { + min-height: @input-height-large; + .select2-selection__choice { + font-size: @font-size-large; + line-height: @line-height-large; + border-radius: 4px; + margin: (@padding-large-vertical - 1) 0 0 @padding-large-horizontal/2; + padding: 0 @padding-large-vertical; + } + .select2-search--inline .select2-search__field { + padding: 0 @padding-large-horizontal; + font-size: @font-size-large; + height: @input-height-large - 2; + line-height: @line-height-large; + } + .select2-selection__clear { + margin-top: @padding-large-vertical; + } + } + } + &.input-lg.select2-container--open { + .dropdown-arrow; + } + .input-group-lg & { + &.select2-container--open { + .dropdown-arrow; + } + } + /*------------------------------------*\ + #RTL SUPPORT + \*------------------------------------*/ + &[dir="rtl"] { + /** + * Single Select2 + * + * 1. Makes sure that .select2-selection__placeholder is positioned + * correctly. + */ + .select2-selection--single { + padding-left: @padding-base-horizontal + @caret-width-base*3; + padding-right: @padding-base-horizontal; + .select2-selection__rendered { + padding-right: 0; + padding-left: 0; + text-align: right; /* 1 */ + } + .select2-selection__clear { + float: left; + } + .select2-selection__arrow { + left: @padding-base-horizontal; + right: auto; + b { + margin-left: 0; + } + } + } + /** + * Multiple Select2 + */ + .select2-selection--multiple { + .select2-selection__choice, + .select2-selection__placeholder { + float: right; + } + .select2-selection__choice { + margin-left: 0; + margin-right: @padding-base-horizontal/2; + } + .select2-selection__choice__remove { + margin-left: 2px; + margin-right: auto; + } + } + } +} +/*------------------------------------*\ + #ADDITIONAL GOODIES +\*------------------------------------*/ +/** + * Address humhub's validation states + * + * If a Select2 widget parent has one of humhub's validation state modifier + * classes, adjust Select2's border colors and focus states accordingly. + * You may apply said classes to the Select2 dropdown (body > .select2-container) + * via JavaScript match humhubs' to make its styles match. + * + * @see http://gethumhub.com/css/#forms-control-validation + */ +.has-warning { + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px var(--warning-lighten-20); + .select2-dropdown, + .select2-selection { + border-color: @warning; + } + .select2-container--focus .select2-selection, + .select2-container--open .select2-selection { + .box-shadow(@shadow); + border-color: var(--warning-darken-10); + } + &.select2-drop-active { + border-color: var(--warning-darken-10); + &.select2-drop.select2-drop-above { + border-top-color: var(--warning-darken-10); + } + } +} +.has-error { + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px var(--danger-lighten-20); + .select2-dropdown, + .select2-selection { + border-color: @danger; + } + .select2-container--focus .select2-selection, + .select2-container--open .select2-selection { + .box-shadow(@shadow); + border-color: var(--danger-darken-10); + } + &.select2-drop-active { + border-color: var(--danger-darken-10); + &.select2-drop.select2-drop-above { + border-top-color: var(--danger-darken-10); + } + } +} +.has-success { + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px var(--success-lighten-20); + .select2-dropdown, + .select2-selection { + border-color: @success; + } + .select2-container--focus .select2-selection, + .select2-container--open .select2-selection { + .box-shadow(@shadow); + border-color: var(--success-darken-10); + } + &.select2-drop-active { + border-color: var(--success-darken-10); + &.select2-drop.select2-drop-above { + border-top-color: var(--success-darken-10); + } + } +} +/** + * Select2 widgets in humhub Input Groups + * + * When Select2 widgets are combined with other elements using humhubs + * "Input Group" component, we don't want specific edges of the Select2 + * container to have a border-radius. + * + * Use .select2-humhub-prepend and .select2-humhub-append on + * a humhub 3 .input-group to let the contained Select2 widget know which + * edges should not be rounded as they are directly followed by another element. + * + * @see http://gethumhub.com/components/#input-groups + */ +/** + * Mimick humhubs .input-group .form-control styles. + * + * @see https://github.com/twbs/humhub/blob/master/less/input-groups.less + */ +.input-group .select2-container--humhub { + display: table; + table-layout: fixed; + position: relative; + z-index: 2; + float: left; + width: 100%; + margin-bottom: 0; +} +.input-group.select2-humhub-prepend .select2-container--humhub { + .select2-selection { + .border-left-radius(0); + } +} +.input-group.select2-humhub-append .select2-container--humhub { + .select2-selection { + .border-right-radius(0); + } +} +/** + * Adjust alignment of humhub buttons in humhub Input Groups to address + * Multi Select2's height which - depending on how many elements have been selected - + * may grow taller than its initial size. + * + * @see http://gethumhub.com/components/#input-groups + */ +.select2-humhub-append, +.select2-humhub-prepend { + .select2-container--humhub, + .input-group-btn, + .input-group-btn .btn { + vertical-align: top; + } +} +/** + * Temporary fix for https://github.com/select2/select2-humhub-theme/issues/9 + * + * Provides `!important` for certain properties of the class applied to the + * original `