github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 09:42:07 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity
77b8347158
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.

78 lines
1.6 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
border-radius: 0;
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;
border-radius: 0;
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: Normalize sizing for inputs, buttons, dropdowns (#14226) See PR for details
2021-09-09 23:01:56 +08:00
border-color: var(--primary-medium);
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
.formated-selection {
margin: 0;
border: 0;
DEV: select-kit 2 (#7998) This new iteration of select-kit focuses on following best principales and disallowing mutations inside select-kit components. A best effort has been made to avoid breaking changes, however if you content was a flat array, eg: ["foo", "bar"] You will need to set valueProperty=null and nameProperty=null on the component. Also almost every component should have an `onChange` handler now to decide what to do with the updated data. **select-kit will not mutate your data by itself anymore**
2020-02-03 21:22:14 +08:00
padding: 0;
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
outline: none;
box-shadow: none;
cursor: pointer;
@include ellipsis;
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
}
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
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 {
border-radius: 0;
@include default-focus;
}
DEV: select-kit 2 (#7998) This new iteration of select-kit focuses on following best principales and disallowing mutations inside select-kit components. A best effort has been made to avoid breaking changes, however if you content was a flat array, eg: ["foo", "bar"] You will need to set valueProperty=null and nameProperty=null on the component. Also almost every component should have an `onChange` handler now to decide what to do with the updated data. **select-kit will not mutate your data by itself anymore**
2020-02-03 21:22:14 +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
&.is-expanded {
.multi-select-header {
border-radius: 0;
@include default-focus;
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
}
}
}
}
Reference in New Issue Copy Permalink