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
9ae067164d
discourse/app/assets/stylesheets/common/select-kit/combo-box.scss

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

122 lines
2.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 {
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
&.combo-box {
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-body {
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
border-radius: 0;
FIX: search icon is rendered outside of tag-selector filter-input Make the selectors from this sheet match the ones from selectors from the select-kit sheet... different states for the filter-input were causing it to expand outside of the tag-selector and push the search icon.
2018-05-15 15:28:27 +08:00
box-shadow: shadow("dropdown");
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-row {
Matching select-kit padding with inputs
2018-04-19 23:36:09 +08:00
margin: 0;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
min-height: 1px;
UX: homogenises sk row padding and topic-admin-menu (#9920)
2020-05-29 15:35:43 +08:00
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
&.no-content {
font-weight: normal;
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-filter {
FIX: search icon is rendered outside of tag-selector filter-input Make the selectors from this sheet match the ones from selectors from the select-kit sheet... different states for the filter-input were causing it to expand outside of the tag-selector and push the search icon.
2018-05-15 15:28:27 +08:00
.filter-input,
.filter-input:focus,
.filter-input:active {
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
flex: 1;
FIX: search icon is rendered outside of tag-selector filter-input Make the selectors from this sheet match the ones from selectors from the select-kit sheet... different states for the filter-input were causing it to expand outside of the tag-selector and push the search icon.
2018-05-15 15:28:27 +08:00
}
.filter-icon {
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
margin-left: 0.25em;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
}
FIX: search icon is rendered outside of tag-selector filter-input Make the selectors from this sheet match the ones from selectors from the select-kit sheet... different states for the filter-input were causing it to expand outside of the tag-selector and push the search icon.
2018-05-15 15:28:27 +08:00
s/select-box-kit/select-kit Definitely remove legacy naming.
2018-02-06 01:25:39 +08:00
.select-kit-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(--secondary);
border: 1px solid var(--primary-medium);
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 0.25em 0 0.5em;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
font-weight: 500;
UX: Type system rebuild (#5492)
2018-01-13 06:27:38 +08:00
font-size: $font-0;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
&.is-focused {
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
border: 1px solid var(--tertiary);
UX: Implementing a box-shadow system, cleaning up existing shadows
2018-02-21 01:18:20 +08:00
box-shadow: shadow("focus");
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
}
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
.select-kit-collection {
display: flex;
flex-direction: column;
padding: 0;
min-width: 100px;
.collection-header {
a {
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(--primary);
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
line-height: $line-height-medium;
font-weight: bold;
display: block;
UX: homogenises sk row padding and topic-admin-menu (#9920)
2020-05-29 15:35:43 +08:00
padding: 0.75em;
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(--tertiary);
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
&:hover {
text-decoration: underline;
}
}
}
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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
.select-kit-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
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
}
&.is-highlighted {
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-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
border: 1px solid var(--tertiary);
UX: Implementing a box-shadow system, cleaning up existing shadows
2018-02-21 01:18:20 +08:00
box-shadow: shadow("focus");
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
}
&.is-expanded {
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-wrapper {
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
display: block;
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
border: 1px solid var(--tertiary);
UX: Implementing a box-shadow system, cleaning up existing shadows
2018-02-21 01:18:20 +08:00
box-shadow: shadow("focus");
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
}
&.is-expanded.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-header {
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
border-radius: 0 0 3px 3px;
}
FIX: various sizing issues on select-kit
2017-11-27 00:21:39 +08:00
.select-kit-body {
border-radius: 3px 3px 0 0;
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
FIX: search icon is rendered outside of tag-selector filter-input Make the selectors from this sheet match the ones from selectors from the select-kit sheet... different states for the filter-input were causing it to expand outside of the tag-selector and push the search icon.
2018-05-15 15:28:27 +08:00
&.tag-drop,
&.group-dropdown {
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
min-width: auto;
UX: Tag combo box styles should match tags on topics
2019-12-12 03:49:39 +08:00
}
&.tag-drop {
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);
UX: Tag combo box styles should match tags on topics
2019-12-12 03:49:39 +08:00
}
&.group-dropdown {
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
.select-kit-row {
font-weight: bold;
}
select-kit consistency fix
2018-05-03 23:08:14 +08:00
}
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
FIX: search icon is rendered outside of tag-selector filter-input Make the selectors from this sheet match the ones from selectors from the select-kit sheet... different states for the filter-input were causing it to expand outside of the tag-selector and push the search icon.
2018-05-15 15:28:27 +08:00
&.is-expanded .select-kit-wrapper,
.select-kit-wrapper {
select-kit consistency fix
2018-05-03 23:08:14 +08:00
display: none;
Streamlining select-kit styles for simpler styling
2018-05-02 08:41:28 +08:00
}
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
}
Reference in New Issue Copy Permalink