github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-04 04:26:18 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
680cf443f4
discourse/app/assets/stylesheets/common/select-kit/multi-select.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

98 lines
2.1 KiB
SCSS
Raw Normal View History

s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit {
Introduces select-kit * renames `select-box-kit` into `select-kit` * introduces `single-select` and `multi-select` as base components * introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search * improves events handling in select-kit * recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component * replaces category-selector by a component using select-kit and based on multi-select * improves positioning of wrapper * removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components * introduces a formal plugin api for select-kit based components * introduces a formal pattern for loading and updating select-kit based components: ``` computeValue() computeContent() mutateValue() ```
2017-11-21 18:53:09 +08:00
&.multi-select {
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
width: 300px;
FEATURE: automatic dark mode (#10341) A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-04 10:57:10 +08:00
background: var(--secondary);
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-filter {
DEV: select-kit third major update with focus on accessibility (#13303) Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
2021-08-23 16:44:19 +08:00
& + .selected-content,
& + .select-kit-collection {
border-top: 1px solid var(--primary-low);
}
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
}
DEV: select-kit third major update with focus on accessibility (#13303) Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
2021-08-23 16:44:19 +08:00
.select-kit-row {
min-height: 1px;
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
}
&.is-disabled {
Introduces select-kit * renames `select-box-kit` into `select-kit` * introduces `single-select` and `multi-select` as base components * introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search * improves events handling in select-kit * recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component * replaces category-selector by a component using select-kit and based on multi-select * improves positioning of wrapper * removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components * introduces a formal plugin api for select-kit based components * introduces a formal pattern for loading and updating select-kit based components: ``` computeValue() computeContent() mutateValue() ```
2017-11-21 18:53:09 +08:00
.multi-select-header {
FEATURE: automatic dark mode (#10341) A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-04 10:57:10 +08:00
background: var(--primary-low);
border-color: var(--primary-low-mid);
color: var(--primary-medium);
UX: update disabled dropdowns style w/ color variables
2019-10-23 04:32:24 +08:00
.d-icon {
FEATURE: automatic dark mode (#10341) A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-04 10:57:10 +08:00
color: var(--primary-medium);
UX: update disabled dropdowns style w/ color variables
2019-10-23 04:32:24 +08:00
}
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
}
}
DEV: select-kit third major update with focus on accessibility (#13303) Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
2021-08-23 16:44:19 +08:00
.selected-content {
display: flex;
width: 100%;
flex-wrap: wrap;
padding: 0;
justify-content: flex-start;
box-sizing: border-box;
border-bottom: 1px solid var(--primary-low);
padding: 0.25em 0.25em 0 0.25em;
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
DEV: select-kit third major update with focus on accessibility (#13303) Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
2021-08-23 16:44:19 +08:00
.selected-choice {
margin: 0 0.25em 0.25em 0;
font-size: var(--font-down-1);
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
DEV: select-kit third major update with focus on accessibility (#13303) Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
2021-08-23 16:44:19 +08:00
&.selected-choice-color {
border-bottom: 2px solid transparent;
UX: Uniformize styles for focus states (#11933)
2021-02-04 00:45:54 +08:00
}
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
}
}
DEV: select-kit third major update with focus on accessibility (#13303) Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
2021-08-23 16:44:19 +08:00
.multi-select-header {
background: var(--secondary);
UX: change to input field + label styling (#24060)
2023-10-23 23:36:36 +08:00
border-color: var(--primary-400);
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
DEV: Fix typos "formated" -> "formatted" (#17156) (nothing in all-the* relies on these)
2022-06-21 02:02:05 +08:00
.formatted-selection {
DEV: select-kit third major update with focus on accessibility (#13303) Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
2021-08-23 16:44:19 +08:00
margin: 0;
cursor: pointer;
@include ellipsis;
UX: Minor layout tweaks to dropdowns (#14299) - fixes mini-tag-chooser validation message - fixes ellipsis overflow in mini-tag-chooser - removes redundant `border-radius: 0` styles - simplifies `user-notifications-dropdown` styling and adds example to styleguide
2021-09-10 21:00:41 +08:00
display: inline-block;
FEATURE: replaces tag-chooser/tag-group-chooser with select-kit component These component were also the last using select2. As a consequence select2 is removed from Discourse in this commit.
2018-02-26 18:42:57 +08:00
}
UX: Compact option for multi-selects (#22239) Adds an alternative to the default multi select item, better suited for quickly adding/removing tags.
2023-07-25 23:00:02 +08:00
.select-kit-header--filter {
display: flex;
flex-wrap: wrap;
UX: More tweaks to compact tag picker (#22859) Input font size was too small.
2023-07-29 00:11:24 +08:00
margin: -0.35em;
margin-left: -0.25em;
UX: Compact option for multi-selects (#22239) Adds an alternative to the default multi select item, better suited for quickly adding/removing tags.
2023-07-25 23:00:02 +08:00
position: relative;
.selected-choice {
UX: More tweaks to compact tag picker (#22859) Input font size was too small.
2023-07-29 00:11:24 +08:00
margin: 0.125em 0.25em 0.125em 0;
UX: Compact option for multi-selects (#22239) Adds an alternative to the default multi select item, better suited for quickly adding/removing tags.
2023-07-25 23:00:02 +08:00
padding: 0.2em 0.3em;
font-size: var(--font-down-1);
&.selected-choice-color {
border-bottom: 2px solid transparent;
}
}
.select-kit-filter {
display: inline-flex;
flex: 1 1 30px;
width: auto;
margin-left: 0.25em;
position: static;
UX: Minor alignment fix for compact tag selector (#22810)
2023-07-27 02:13:39 +08:00
min-height: 28px;
UX: Compact option for multi-selects (#22239) Adds an alternative to the default multi select item, better suited for quickly adding/removing tags.
2023-07-25 23:00:02 +08:00
&.is-expanded {
padding: 0;
}
.filter-input {
UX: Minor alignment fix for compact tag selector (#22810)
2023-07-27 02:13:39 +08:00
min-height: auto;
UX: Compact option for multi-selects (#22239) Adds an alternative to the default multi select item, better suited for quickly adding/removing tags.
2023-07-25 23:00:02 +08:00
}
}
}
DEV: select-kit third major update with focus on accessibility (#13303) Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
2021-08-23 16:44:19 +08:00
}
FEATURE: replaces tag-chooser/tag-group-chooser with select-kit component These component were also the last using select2. As a consequence select2 is removed from Discourse in this commit.
2018-02-26 18:42:57 +08:00
UX: Minor layout tweaks to dropdowns (#14299) - fixes mini-tag-chooser validation message - fixes ellipsis overflow in mini-tag-chooser - removes redundant `border-radius: 0` styles - simplifies `user-notifications-dropdown` styling and adds example to styleguide
2021-09-10 21:00:41 +08:00
&.is-expanded .multi-select-header,
DEV: select-kit third major update with focus on accessibility (#13303) Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
2021-08-23 16:44:19 +08:00
.multi-select-header:focus {
@include default-focus;
}
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
}
}
Reference in New Issue Copy Permalink