github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-03 18:43:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
208007d9a0
discourse/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/modal.scss

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

113 lines
2.1 KiB
SCSS
Raw Normal View History

UX: fix sidebar modal (#24646) * UX: fix modal width
2023-12-04 15:10:17 +08:00
.d-modal {
&__container {
width: 100%;
DEV: Refactor edit tags/categories modal to reduce duplication (#22240) Why this change? There was alot of duplication between the edit navigation menu tags/categories modal which was making it hard to introduce new changes as the work had to be duplicated into multiple places. This commit mainly extracts the duplicated code into common components such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
}
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
}
DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
.sidebar__edit-navigation-menu__filter {
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
display: flex;
UX: adjust sidebar modal styles, consolidate css (#22444) This gets all the related CSS into the common file, and removes desktop and mobile variants. This also makes some general styling adjustments.
2023-07-07 06:54:47 +08:00
gap: 0.5em;
UX: fix sidebar modal (#24646) * UX: fix modal width
2023-12-04 15:10:17 +08:00
padding: 1rem 0.66em 0;
UX: adjust sidebar modal styles, consolidate css (#22444) This gets all the related CSS into the common file, and removes desktop and mobile variants. This also makes some general styling adjustments.
2023-07-07 06:54:47 +08:00
@include breakpoint("tablet", min-width) {
UX: fix sidebar modal (#24646) * UX: fix modal width
2023-12-04 15:10:17 +08:00
padding: 1rem 1.5rem 0;
UX: adjust sidebar modal styles, consolidate css (#22444) This gets all the related CSS into the common file, and removes desktop and mobile variants. This also makes some general styling adjustments.
2023-07-07 06:54:47 +08:00
}
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
.sidebar__edit-navigation-menu__filter-dropdown {
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
.select-kit-header {
background: var(--secondary);
color: var(--primary);
border: 1px solid var(--primary-low-mid);
font-size: var(--font-0);
FEATURE: Add dropdown to filter by selected in edit nav menu modal (#22251) What does this change do? This change adds a dropdown filter that allows a user to filter by selected or unselected categories/tags in the edit navigation menu modal. For the categories modal, parent categories that do not match the dropdown filter will be displayed as disabled since those parent categories need to be displayed to maintain the hieracy of the child child categories.
2023-06-23 10:29:00 +08:00
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
&:hover,
&:focus {
FEATURE: Add dropdown to filter by selected in edit nav menu modal (#22251) What does this change do? This change adds a dropdown filter that allows a user to filter by selected or unselected categories/tags in the edit navigation menu modal. For the categories modal, parent categories that do not match the dropdown filter will be displayed as disabled since those parent categories need to be displayed to maintain the hieracy of the child child categories.
2023-06-23 10:29:00 +08:00
background: var(--secondary);
color: var(--primary);
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
.d-icon {
FEATURE: Add dropdown to filter by selected in edit nav menu modal (#22251) What does this change do? This change adds a dropdown filter that allows a user to filter by selected or unselected categories/tags in the edit navigation menu modal. For the categories modal, parent categories that do not match the dropdown filter will be displayed as disabled since those parent categories need to be displayed to maintain the hieracy of the child child categories.
2023-06-23 10:29:00 +08:00
color: var(--primary);
}
}
}
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
}
FEATURE: Add dropdown to filter by selected in edit nav menu modal (#22251) What does this change do? This change adds a dropdown filter that allows a user to filter by selected or unselected categories/tags in the edit navigation menu modal. For the categories modal, parent categories that do not match the dropdown filter will be displayed as disabled since those parent categories need to be displayed to maintain the hieracy of the child child categories.
2023-06-23 10:29:00 +08:00
DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
.sidebar__edit-navigation-menu__filter-input {
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
display: flex;
flex-direction: row;
margin-right: auto;
width: 100%;
position: relative;
UX: adjust sidebar modal styles, consolidate css (#22444) This gets all the related CSS into the common file, and removes desktop and mobile variants. This also makes some general styling adjustments.
2023-07-07 06:54:47 +08:00
flex: 1 1 70%;
input {
margin: 0;
}
}
.sidebar__edit-navigation-menu__filter-dropdown-wrapper {
flex: 1 1 30%;
display: flex;
.select-kit {
width: 100%;
summary {
height: 100%;
}
}
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
}
DEV: Refactor edit tags/categories modal to reduce duplication (#22240) Why this change? There was alot of duplication between the edit navigation menu tags/categories modal which was making it hard to introduce new changes as the work had to be duplicated into multiple places. This commit mainly extracts the duplicated code into common components such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
.sidebar__edit-navigation-menu__filter-input-icon {
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
position: absolute;
left: 0.5em;
top: 0.65em;
color: var(--primary-low-mid);
}
DEV: Refactor edit tags/categories modal to reduce duplication (#22240) Why this change? There was alot of duplication between the edit navigation menu tags/categories modal which was making it hard to introduce new changes as the work had to be duplicated into multiple places. This commit mainly extracts the duplicated code into common components such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
.sidebar__edit-navigation-menu__filter-input-field {
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
border-color: var(--primary-low-mid);
padding-left: 1.75em;
width: 100%;
DEV: Refactor edit tags/categories modal to reduce duplication (#22240) Why this change? There was alot of duplication between the edit navigation menu tags/categories modal which was making it hard to introduce new changes as the work had to be duplicated into multiple places. This commit mainly extracts the duplicated code into common components such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
UX: Fix position of filters in edit categories/tags nav menu modals (#22292) Why this change? We want the position of the filters to remain fixed when scrolling through the list of categories or tags. Otherwise, the user has to scroll all the way back to othe top in order to access the filters when the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
&:focus {
border-color: var(--tertiary);
outline: none;
outline-offset: 0;
box-shadow: inset 0px 0px 0px 1px var(--tertiary);
DEV: Refactor edit tags/categories modal to reduce duplication (#22240) Why this change? There was alot of duplication between the edit navigation menu tags/categories modal which was making it hard to introduce new changes as the work had to be duplicated into multiple places. This commit mainly extracts the duplicated code into common components such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
}
}
}
DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
.sidebar__edit-navigation-menu__footer {
display: flex;
width: 100%;
UX: adjust sidebar modal styles, consolidate css (#22444) This gets all the related CSS into the common file, and removes desktop and mobile variants. This also makes some general styling adjustments.
2023-07-07 06:54:47 +08:00
margin-top: 0.25em;
DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
.btn.sidebar__edit-navigation-menu__reset-defaults-button {
DEV: Refactor edit tags/categories modal to reduce duplication (#22240) Why this change? There was alot of duplication between the edit navigation menu tags/categories modal which was making it hard to introduce new changes as the work had to be duplicated into multiple places. This commit mainly extracts the duplicated code into common components such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
margin-left: auto;
UX: adjust sidebar modal styles, consolidate css (#22444) This gets all the related CSS into the common file, and removes desktop and mobile variants. This also makes some general styling adjustments.
2023-07-07 06:54:47 +08:00
margin-right: 0;
DEV: Refactor edit tags/categories modal to reduce duplication (#22240) Why this change? There was alot of duplication between the edit navigation menu tags/categories modal which was making it hard to introduce new changes as the work had to be duplicated into multiple places. This commit mainly extracts the duplicated code into common components such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
.d-icon {
font-size: var(--font-down-1);
color: var(--tertiary);
}
&:focus,
&:active {
background: none;
}
}
}
DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
.sidebar__edit-navigation-menu__deselect-wrapper {
UX: adjust sidebar modal styles, consolidate css (#22444) This gets all the related CSS into the common file, and removes desktop and mobile variants. This also makes some general styling adjustments.
2023-07-07 06:54:47 +08:00
margin: 0 1em 0 0;
line-height: var(--line-height-medium);
DEV: Refactor edit tags/categories modal to reduce duplication (#22240) Why this change? There was alot of duplication between the edit navigation menu tags/categories modal which was making it hard to introduce new changes as the work had to be duplicated into multiple places. This commit mainly extracts the duplicated code into common components such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
.btn-flat.sidebar__edit-navigation-menu__deselect-button {
DEV: Refactor edit tags/categories modal to reduce duplication (#22240) Why this change? There was alot of duplication between the edit navigation menu tags/categories modal which was making it hard to introduce new changes as the work had to be duplicated into multiple places. This commit mainly extracts the duplicated code into common components such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
margin-left: auto;
padding: 0;
&:focus,
&:active {
background: none;
}
}
}
Reference in New Issue Copy Permalink