github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 06:30:15 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
e313190fdb
discourse/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss

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

96 lines
2.0 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 {
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
&.single-select {
&.dropdown-select-box {
display: inline-flex;
min-width: auto;
border: none;
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
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 {
.select-kit-collection,
.select-kit-body {
border-radius: 0;
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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-body {
border: 1px solid var(--primary-low);
background-clip: padding-box;
box-shadow: shadow("dropdown");
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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 {
margin: 0;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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
.icons {
display: flex;
align-self: flex-start;
margin-right: 0.5em;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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
.d-icon {
flex: 0 0 100%;
overflow: hidden;
DEV: Use css var font sizes (#18518) For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 21:31:59 +08:00
font-size: var(--font-up-2);
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-right: 0;
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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
.texts {
DEV: Use more css vars (#18561) Followup to #18518 This time it's mostly line-height vars and a couple of other uncommon vars.
2022-10-12 22:05:42 +08:00
line-height: var(--line-height-medium);
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
flex: 1 1 0%;
align-items: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: column;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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
.name {
flex: 1 1 auto;
font-weight: bold;
DEV: Use css var font sizes (#18518) For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 21:31:59 +08:00
font-size: var(--font-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
color: var(--primary);
padding: 0;
@include ellipsis;
max-width: 100%;
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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
.desc {
flex: 1 1 auto;
DEV: Use css var font sizes (#18518) For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 21:31:59 +08:00
font-size: var(--font-down-1);
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
font-weight: normal;
color: var(--primary-medium);
white-space: normal;
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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-collection {
padding: 0;
max-height: 100%;
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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-header {
UX: Normalize sizing for inputs, buttons, dropdowns (#14226) See PR for details
2021-09-09 23:01:56 +08:00
display: inline-flex;
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
align-items: center;
justify-content: space-between;
flex-direction: row;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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
.d-icon + .d-icon {
margin-left: 0.25em;
}
&.is-focused {
outline-style: auto;
outline-color: var(--tertiary);
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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
&.user-notifications-dropdown {
.select-kit-header .d-icon {
margin-left: 0;
}
.select-kit-header-wrapper {
justify-content: center;
}
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
Reference in New Issue Copy Permalink