github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 22:26:29 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
4602e14cac
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.

89 lines
1.7 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
&.dropdown-select-box {
display: inline-flex;
min-width: auto;
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
border: none;
[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-collection,
.select-kit-body {
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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-body {
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(--primary-low);
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
background-clip: padding-box;
UX: Implementing a box-shadow system, cleaning up existing shadows
2018-02-21 01:18:20 +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 {
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
margin: 0;
.icons {
display: flex;
Minor dropdown icon width fix
2020-06-05 05:26:57 +08:00
align-self: flex-start;
UI: various select-kit dropdown tweaks/cleaning (#9922)
2020-05-29 17:11:28 +08:00
margin-right: 0.5em;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
.d-icon {
Minor dropdown icon width fix
2020-06-05 05:26:57 +08:00
flex: 0 0 100%;
remove inaccurate comment, follow up to c028936
2020-06-20 04:49:56 +08:00
overflow: hidden;
UX: Type system rebuild (#5492)
2018-01-13 06:27:38 +08:00
font-size: $font-up-2;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
margin-right: 0;
}
}
.texts {
UI: various select-kit dropdown tweaks/cleaning (#9922)
2020-05-29 17:11:28 +08:00
line-height: $line-height-medium;
Select-kit dropdown fix
2018-11-13 01:21:54 +08:00
flex: 1 1 0%;
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
align-items: flex-start;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
display: flex;
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
flex-wrap: wrap;
flex-direction: column;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
.name {
IE11 select-kit fix
2018-11-14 00:21:19 +08:00
flex: 1 1 auto;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
font-weight: bold;
UX: Type system rebuild (#5492)
2018-01-13 06:27:38 +08:00
font-size: $font-0;
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);
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
padding: 0;
Adding a text-overflow: ellipsis; mixin and related cleanup
2019-11-07 03:00:29 +08:00
@include ellipsis;
FIX: adds ellipsis on name of dropdown-select-box row
2018-04-12 17:39:45 +08:00
max-width: 100%;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
.desc {
IE11 select-kit fix
2018-11-14 00:21:19 +08:00
flex: 1 1 auto;
UX: Type system rebuild (#5492)
2018-01-13 06:27:38 +08:00
font-size: $font-down-1;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
font-weight: normal;
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);
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
white-space: normal;
UX: attempts to have a better use of available space with sk (#9639)
2020-05-05 18:59:47 +08:00
min-width: 350px;
[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-collection {
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
padding: 0;
FIX: max-height auto is not valid
2018-02-02 01:08:55 +08:00
max-height: 100%;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
.dropdown-select-box-header {
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
box-sizing: border-box;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
border: 0;
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
align-items: center;
justify-content: space-between;
flex-direction: row;
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
display: inline-flex;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
.d-icon + .d-icon {
UI: various select-kit dropdown tweaks/cleaning (#9922)
2020-05-29 17:11:28 +08:00
margin-left: 0.25em;
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +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
&.is-focused {
outline-style: auto;
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
outline-color: var(--tertiary);
[WIP] select-box-kit refactoring
2017-10-20 03:51:08 +08:00
}
}
}
}
Reference in New Issue Copy Permalink