github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 23:48:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
85c4e8fd32
discourse/app/assets/stylesheets/common/select-kit/select-kit.scss

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

298 lines
5.2 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: Apply `unselectable` style consistently
2020-09-21 19:32:46 +08:00
@include unselectable;
FIX: various sizing issues on select-kit
2017-11-27 00:21:39 +08:00
border: none;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
box-sizing: border-box;
select-box minor fixes
2017-08-26 01:56:57 +08:00
display: inline-block;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
flex-direction: column;
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
position: relative;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
vertical-align: middle;
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
&.is-disabled {
pointer-events: none;
Replaces remaining {{category-chooser}} by {{category-select-box}} To achieve replacement, this commit also adds support for: - clearSelectionLabel which will allows to unselect any chosen category - select-box inside a modal - fixes minor css positioning issues Note: {{category-chooser}} will be removed in the next weeks.
2017-08-30 23:04:17 +08:00
}
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
&.is-expanded {
UX: Implementing a z-index system (#5507)
2018-01-17 08:05:12 +08:00
z-index: z("dropdown");
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
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
.select-kit-body {
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
display: flex;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
flex-direction: column;
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
align-items: center;
justify-content: center;
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
Revert "Revert "FEATURE: improves select-box to support category selection on new topic"" This reverts commit 1d90f6016ae71e72ab292f4a2d73de99788ae90a.
2017-08-24 22:04:47 +08:00
(S)CSS cleanup: 0px => O and removal of duplicated properties (#5526)
2018-01-25 22:53:36 +08:00
.select-kit-collection {
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
border-radius: inherit;
UX: Use border-box sizing on SK2 dropdowns
2020-02-13 03:14:36 +08:00
box-sizing: border-box;
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
width: 100%;
Revert "Revert "FEATURE: improves select-box to support category selection on new topic"" This reverts commit 1d90f6016ae71e72ab292f4a2d73de99788ae90a.
2017-08-24 22:04:47 +08:00
}
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
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
&.is-loading {
.select-kit-collection {
overflow: hidden;
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
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
}
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
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
&.is-above {
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
.select-kit-filter {
border-top: 0;
}
.select-kit-wrapper {
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
bottom: 0;
top: auto;
}
}
.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-high);
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-header {
FEATURE: support for multi-combo-box
2017-11-10 02:57:53 +08:00
box-sizing: border-box;
overflow: hidden;
DEV: adds prettier (#5956) Run `prettier --write "app/assets/stylesheets/**/*.scss" "plugins/**/*.scss"` after making sure you installed it with `yarn` It's recommended to configure your editor to run prettier on file save.
2018-06-08 17:49:31 +08:00
transition: all 0.25s;
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
cursor: pointer;
select-box minor fixes
2017-08-26 01:56:57 +08:00
display: flex;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
align-items: center;
flex-direction: row;
UX: general cleanup of inputs, buttons and select elements - part 1
2018-09-19 20:37:04 +08:00
min-height: 30px;
DEV: adds prettier (#5956) Run `prettier --write "app/assets/stylesheets/**/*.scss" "plugins/**/*.scss"` after making sure you installed it with `yarn` It's recommended to configure your editor to run prettier on file save.
2018-06-08 17:49:31 +08:00
Revert "Revert "Merge branch 'master' of https://github.com/discourse/discourse"" This reverts commit 20780a1eeed56b321daf18ee6bbfe681a51d1bf4. * SECURITY: re-adds accidentally reverted commit: 03d26cd6: ensure embed_url contains valid http(s) uri * when the merge commit e62a85cf was reverted, git chose the 2660c2e2 parent to land on instead of the 03d26cd6 parent (which contains security fixes)
2020-05-23 12:56:13 +08:00
.d-icon-spinner {
-webkit-animation: rotate-forever 1s infinite linear;
animation: rotate-forever 1s infinite linear;
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
.selected-name {
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
text-align: left;
IE11 Fix: Select-kit items shouldn't have flex-grow
2018-11-15 23:08:27 +08:00
flex: 0 1 auto;
Center align items in select kit headers
2020-06-13 05:07:50 +08:00
align-items: center;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
color: inherit;
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
display: flex;
FIX: displays a title on sk header if no selected name (#9794) none has to be defined.
2020-05-15 23:36:00 +08:00
outline: none;
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
UX: introduces icon-picker component for badges (#8844)
2020-02-05 07:41:10 +08:00
.d-icon + .name {
margin-left: 0.5em;
}
UX: Minor user admin page adjustments, accomodating for long group names
2019-12-18 22:25:42 +08:00
.name {
display: inline-block;
UX: Better spacing for icons in select-kit labels Followup to c14e3adac5349b0500fe7d51bd96704d7a813929
2020-03-28 04:06:40 +08:00
> .d-icon {
UX: Better spacing for icon in select-kit label
2020-03-13 21:36:04 +08:00
margin-left: 0.5em;
margin-right: 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
}
UX: Better spacing for icons in select-kit labels Followup to c14e3adac5349b0500fe7d51bd96704d7a813929
2020-03-28 04:06:40 +08:00
> .d-icon {
margin-right: 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
&.select-kit-selected-color {
border-bottom-width: 5px;
border-bottom-style: solid;
UX: Minor user admin page adjustments, accomodating for long group names
2019-12-18 22:25:42 +08:00
}
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
.btn-clear {
FIX: replaces fake null value by clearable option (#8875)
2020-02-06 15:30:26 +08:00
margin-left: 0.25em;
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.25em;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
border: 0;
background: none;
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
min-height: auto;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
.icon {
margin-right: 5px;
}
.caret-icon {
UX: Improving aligment within topic timer modal
2019-01-23 01:33:46 +08:00
margin-left: auto;
UX: allows dropdown-select-box to display a caret (#9803) ``` selectKitOptions: { showCaret: true // default false } ```
2020-05-18 16:50:33 +08:00
margin-right: 0;
UX: Improving aligment within topic timer modal
2019-01-23 01:33:46 +08:00
padding-left: 5px;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
pointer-events: none;
FIX: caret icon should inherit its color (#9513)
2020-04-22 19:10:02 +08:00
color: inherit;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
}
uses select-box for pinned-button This commit also moves more logic in dropdown-select-box instead of duplicating it for notifications-options and pinned-options
2017-09-12 01:14:22 +08:00
.d-button-label {
display: flex;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
align-items: center;
uses select-box for pinned-button This commit also moves more logic in dropdown-select-box instead of duplicating it for notifications-options and pinned-options
2017-09-12 01:14:22 +08:00
white-space: nowrap;
overflow: hidden;
UX: Type system rebuild (#5492)
2018-01-13 06:27:38 +08:00
line-height: $line-height-medium;
uses select-box for pinned-button This commit also moves more logic in dropdown-select-box instead of duplicating it for notifications-options and pinned-options
2017-09-12 01:14:22 +08:00
.d-icon {
margin-left: 5px;
margin-right: 0;
}
}
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-body {
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
display: none;
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);
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
box-sizing: border-box;
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-row {
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
cursor: pointer;
outline: none;
display: flex;
FIX: better handling of collection height
2018-01-24 23:42:13 +08:00
flex: 1 0 auto;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
box-sizing: border-box;
align-items: center;
justify-content: flex-start;
UX: homogenises sk row padding and topic-admin-menu (#9920)
2020-05-29 15:35:43 +08:00
padding: 0.75em;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
.name {
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
margin: 0;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
overflow: hidden;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
text-overflow: ellipsis;
Select-kit dropdown fix
2018-11-13 01:21:54 +08:00
flex: 1 1 0%;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
}
UX: introduces icon-picker component for badges (#8844)
2020-02-05 07:41:10 +08:00
.d-icon + .name,
.svg-icon-title + .name {
margin-left: 0.5em;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
}
&.is-highlighted {
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(--tertiary-low);
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
}
FEATURE: improves keyboard handling of select-box - arrow keys - escape key
2017-09-11 01:12:03 +08:00
&.is-selected {
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(--highlight-medium);
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
}
FEATURE: improves keyboard handling of select-box - arrow keys - escape key
2017-09-11 01:12:03 +08:00
&.is-selected.is-highlighted {
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(--tertiary-low);
FEATURE: improves keyboard handling of select-box - arrow keys - escape key
2017-09-11 01:12:03 +08:00
}
FEATURE: revamp full-page-search UI (#5703) This is the first iteration of this revamp, a following iteration will focus on improving the controls in the advanced search sidebar.
2018-04-09 23:51:09 +08:00
DEV: adds prettier (#5956) Run `prettier --write "app/assets/stylesheets/**/*.scss" "plugins/**/*.scss"` after making sure you installed it with `yarn` It's recommended to configure your editor to run prettier on file save.
2018-06-08 17:49:31 +08:00
.discourse-tag,
DEV: Use tag renderer in tags filter dropdown (#11378) A small change that would allow components to extend the tag display in the filter dropdown, like they can in other contexts. Was requested in the tag icons component, see https://meta.discourse.org/t/tag-icons-component/109757/60?u=pmusaraj The PR also standardises tag styling in select-kit dropdowns.
2020-12-08 01:10:21 +08:00
.discourse-tag:visited,
UX: Use uniform style for tag counts (#11743)
2021-01-19 04:11:23 +08:00
.discourse-tag:hover {
DEV: Use tag renderer in tags filter dropdown (#11378) A small change that would allow components to extend the tag display in the filter dropdown, like they can in other contexts. Was requested in the tag icons component, see https://meta.discourse.org/t/tag-icons-component/109757/60?u=pmusaraj The PR also standardises tag styling in select-kit dropdowns.
2020-12-08 01:10:21 +08:00
color: var(--primary-high);
FEATURE: revamp full-page-search UI (#5703) This is the first iteration of this revamp, a following iteration will focus on improving the controls in the advanced search sidebar.
2018-04-09 23:51:09 +08:00
}
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
&.create-color-row {
border-left-style: solid;
border-left-width: 5px;
}
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-collection {
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: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
overflow-x: hidden;
overflow-y: auto;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
border-radius: inherit;
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
-webkit-overflow-scrolling: touch;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
margin: 0;
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
padding: 0;
UI: various select-kit dropdown tweaks/cleaning (#9922)
2020-05-29 17:11:28 +08:00
max-height: 250px;
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
width: 100%;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
FEATURE: implements minimum selection for select-kit
2018-04-05 22:45:19 +08:00
.validation-message {
white-space: nowrap;
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(--danger);
FEATURE: implements minimum selection for select-kit
2018-04-05 22:45:19 +08:00
flex: 1 0 auto;
margin: 5px;
padding: 0 2px;
}
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
.select-kit-collection {
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
padding: 0;
margin: 0;
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
&:hover .select-kit-row.is-highlighted:hover {
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(--tertiary-low);
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
}
}
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
}
&::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 5px;
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-med-or-secondary-med);
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
}
&::-webkit-scrollbar-track {
background: transparent;
border-radius: 0;
}
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-filter {
FIX: various sizing issues on select-kit
2017-11-27 00:21:39 +08:00
box-sizing: border-box;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
align-items: center;
justify-content: space-between;
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
width: 100%;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
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
.filter-input {
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
background: none;
margin: 0;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
padding: 0;
FIX: IE11 layout glitches IE11 requires a unit on the third parameter (flex-basis) of the flex property
2019-01-22 02:40:55 +08:00
flex: 1 0 0px;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
outline: none;
border: 0;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
border-radius: 0;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
box-shadow: none;
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
width: auto;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
&.is-hidden {
width: 1px;
height: 1px;
border: 0;
FIX: removes clip causing UI glitches on safari
2017-11-12 04:16:00 +08:00
margin: -1px;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
padding: 0;
overflow: hidden;
position: fixed;
outline: 0;
(S)CSS cleanup: 0px => O and removal of duplicated properties (#5526)
2018-01-25 22:53:36 +08:00
left: 0;
top: 0;
FEATURE: uses select-box for topic-notifications-button component - Introduces ComponentConnector to use a component inside a widget - Use css to set size of components instead of properties - Smarted positionning - Style tweaks
2017-09-06 22:58:00 +08:00
}
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-wrapper {
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
position: absolute;
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
top: 0;
left: 0;
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
background: none;
display: none;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
box-sizing: border-box;
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
pointer-events: none;
}
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
.select-kit-errors-collection {
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(--danger);
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.25em 1em;
margin: 0;
width: 100%;
box-sizing: border-box;
.select-kit-error {
list-style: none;
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(--secondary);
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
}
}
.no-content,
.is-loading {
display: flex;
flex: 1 0 auto;
padding: 0.5em;
width: 100%;
box-sizing: border-box;
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);
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
}
.is-loading {
align-items: center;
justify-content: center;
}
FEATURE: initial implementation of an ember native select
2017-08-13 20:34:50 +08:00
}
Reference in New Issue Copy Permalink