discourse/app/assets/stylesheets/common/select-kit/category-drop.scss

.select-kit {
  &.combo-box {
    &.category-drop {
      min-width: auto;

      .badge-wrapper {
        font-size: var(--font-0);
        font-weight: normal;
        max-width: 260px;

        &.box {
          margin: 0;

          span.badge-category {
            margin: 0;
            .d-icon-lock {
              margin-right: 5px;
            }
          }
        }
      }

      &.box.has-selection .category-drop-header {
        .badge-wrapper.box {
          padding: 0;
        }
      }

      .category-drop-header {
        &.is-none .selected-name {
          color: inherit;
        }

        .badge-wrapper {
          margin-right: 0;
        }
      }

      .select-kit-row {
        flex-direction: column;
        align-items: flex-start;

        &[data-value="all-categories"],
        &[data-value="no-categories"] {
          color: var(--tertiary);
          font-weight: 700;
        }

        .category-desc {
          font-weight: normal;
          color: var(--primary-medium);
          margin-top: 2px;
        }

        .category-status {
          align-items: center;
        }

        .topic-count {
          margin-left: 0.5em;
          font-weight: normal;
          color: var(--primary-medium);
          font-size: var(--font-down-1);
        }

        .badge-wrapper {
          margin: 0;

          &:nth-child(2) {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`.select-kit {`
			`&.combo-box {`
			`&.category-drop {`
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 14:22:14 +01:00			`min-width: auto;`

FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`.badge-wrapper {`
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 15:31:59 +02:00			`font-size: var(--font-0);`
FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`font-weight: normal;`
UX: add ellipsis for long category names in category chooser dropdown (#17758) 2022-08-02 21:57:47 +05:30			`max-width: 260px;`
FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00
			`&.box {`
			`margin: 0;`

			`span.badge-category {`
			`margin: 0;`
UI: Fix 'lock' icon spacing in category dropdown 2020-03-25 08:59:00 -05:00			`.d-icon-lock {`
			`margin-right: 5px;`
			`}`
FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`}`
			`}`
			`}`

FIX: category drop header padding when using category box style 2018-03-01 11:59:13 +01:00			`&.box.has-selection .category-drop-header {`
Prevent category dropdowns from cropping text, simplify styles 2018-10-01 11:53:18 -04:00			`.badge-wrapper.box {`
			`padding: 0;`
			`}`
FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`}`

			`.category-drop-header {`
FIX: do not lighten color when no selection for cat and tag drops 2018-03-29 15:20:47 +02:00			`&.is-none .selected-name {`
			`color: inherit;`
			`}`

FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`.badge-wrapper {`
			`margin-right: 0;`
			`}`
			`}`

			`.select-kit-row {`
			`flex-direction: column;`
			`align-items: flex-start;`

FIX: improves category/tag drops header shortcuts (#6610) - wont appear when filtering - can now be selected with keyboard - fix bugs on click with safari/firefox 2018-11-15 15:21:40 +01:00			`&[data-value="all-categories"],`
			`&[data-value="no-categories"] {`
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-03 22:57:10 -04:00			`color: var(--tertiary);`
FIX: improves category/tag drops header shortcuts (#6610) - wont appear when filtering - can now be selected with keyboard - fix bugs on click with safari/firefox 2018-11-15 15:21:40 +01:00			`font-weight: 700;`
			`}`

FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`.category-desc {`
			`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-03 22:57:10 -04:00			`color: var(--primary-medium);`
Streamlining select-kit styles for simpler styling 2018-05-01 20:41:28 -04:00			`margin-top: 2px;`
FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`}`

			`.category-status {`
			`align-items: center;`
			`}`

			`.topic-count {`
UI: makes topic count less visible in category drop (#9938) 2020-05-30 00:32:20 +02:00			`margin-left: 0.5em;`
FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01: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-03 22:57:10 -04:00			`color: var(--primary-medium);`
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 15:31:59 +02:00			`font-size: var(--font-down-1);`
FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`}`

			`.badge-wrapper {`
			`margin: 0;`
UX: Include subcategories in search result of all categories drop down 2018-10-31 23:03:24 +05:30
			`&:nth-child(2) {`
			`margin-left: 10px;`
			`}`
FEATURE: replaces category/tag dropdowns by select-kit 2018-01-24 11:48:20 +01:00			`}`
			`}`
			`}`
			`}`
			`}`