chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MultiColumn - the first column auto-expands when search results are shown

Browse source
This commit is contained in:
Niléane 2023-11-17 01:12:25 +01:00
commit 4e8848b921
No known key found for this signature in database
4 changed files with 136 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

41
TangerineUI-purple.css
View file

@ -4342,14 +4342,12 @@ a:is(.active,
}
.layout-multiple-columns .drawer__header {
background-color: var(--color-content-bg);
border-top: 1px solid var(--color-lines);
border-left: 1px solid var(--color-lines);
border-right: 1px solid var(--color-lines);
border-radius: 8px 8px 0 0;
border: 1px solid var(--color-lines);
border-radius: 8px;
margin-bottom: 0;
}
.layout-multiple-columns .drawer .search__input {
border-radius: 0 0 8px 8px;
.layout-multiple-columns .drawer .search {
margin-top: 10px;
}
.layout-multiple-columns .drawer__tab {
transition: all .3s;
@ -4360,6 +4358,9 @@ a:is(.active,
box-sizing: border-box;
border: 0;
}
.layout-multiple-columns .drawer__tab .icon {
transform: scale(1.2);
}
.layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) {
background-color: var(--color-accent-bg);
}
@ -4400,10 +4401,15 @@ a:is(.active,
}
.app-body .getting-started .column-link {
margin-left: 0;
font-weight: 500;
color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) {
background-color: var(--color-accent-bg);
color: var(--color-accent);
color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link__icon {
transform: scale(1.4);
}
.app-body .getting-started .column-link__badge {
@ -4438,6 +4444,15 @@ a:is(.active,
display: none;
}
.layout-multiple-columns .drawer {
width: 280px;
transition: width .3s;
}
.layout-multiple-columns
.drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
width: 400px;
}
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
@ -4446,10 +4461,20 @@ a:is(.active,
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
> .search__input,
> .search__input {
border-radius: 8px 8px 0 0;
}
.layout-multiple-columns .drawer__pager {
border-radius: 0;
}
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
> .search__popout {
border-radius: 0 0 8px 8px;
margin-top: 0;
}
@media screen and (min-width:630px) and (max-width:1174px) {
.layout-multiple-columns

41
TangerineUI.css
View file

@ -4342,14 +4342,12 @@ a:is(.active,
}
.layout-multiple-columns .drawer__header {
background-color: var(--color-content-bg);
border-top: 1px solid var(--color-lines);
border-left: 1px solid var(--color-lines);
border-right: 1px solid var(--color-lines);
border-radius: 8px 8px 0 0;
border: 1px solid var(--color-lines);
border-radius: 8px;
margin-bottom: 0;
}
.layout-multiple-columns .drawer .search__input {
border-radius: 0 0 8px 8px;
.layout-multiple-columns .drawer .search {
margin-top: 10px;
}
.layout-multiple-columns .drawer__tab {
transition: all .3s;
@ -4360,6 +4358,9 @@ a:is(.active,
box-sizing: border-box;
border: 0;
}
.layout-multiple-columns .drawer__tab .icon {
transform: scale(1.2);
}
.layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) {
background-color: var(--color-accent-bg);
}
@ -4400,10 +4401,15 @@ a:is(.active,
}
.app-body .getting-started .column-link {
margin-left: 0;
font-weight: 500;
color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) {
background-color: var(--color-accent-bg);
color: var(--color-accent);
color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link__icon {
transform: scale(1.4);
}
.app-body .getting-started .column-link__badge {
@ -4438,6 +4444,15 @@ a:is(.active,
display: none;
}
.layout-multiple-columns .drawer {
width: 280px;
transition: width .3s;
}
.layout-multiple-columns
.drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
width: 400px;
}
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
@ -4446,10 +4461,20 @@ a:is(.active,
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
> .search__input,
> .search__input {
border-radius: 8px 8px 0 0;
}
.layout-multiple-columns .drawer__pager {
border-radius: 0;
}
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
> .search__popout {
border-radius: 0 0 8px 8px;
margin-top: 0;
}
@media screen and (min-width:630px) and (max-width:1174px) {
.layout-multiple-columns

41
mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
View file

@ -4342,14 +4342,12 @@ a:is(.active,
}
.layout-multiple-columns .drawer__header {
background-color: var(--color-content-bg);
border-top: 1px solid var(--color-lines);
border-left: 1px solid var(--color-lines);
border-right: 1px solid var(--color-lines);
border-radius: 8px 8px 0 0;
border: 1px solid var(--color-lines);
border-radius: 8px;
margin-bottom: 0;
}
.layout-multiple-columns .drawer .search__input {
border-radius: 0 0 8px 8px;
.layout-multiple-columns .drawer .search {
margin-top: 10px;
}
.layout-multiple-columns .drawer__tab {
transition: all .3s;
@ -4360,6 +4358,9 @@ a:is(.active,
box-sizing: border-box;
border: 0;
}
.layout-multiple-columns .drawer__tab .icon {
transform: scale(1.2);
}
.layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) {
background-color: var(--color-accent-bg);
}
@ -4400,10 +4401,15 @@ a:is(.active,
}
.app-body .getting-started .column-link {
margin-left: 0;
font-weight: 500;
color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) {
background-color: var(--color-accent-bg);
color: var(--color-accent);
color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link__icon {
transform: scale(1.4);
}
.app-body .getting-started .column-link__badge {
@ -4438,6 +4444,15 @@ a:is(.active,
display: none;
}
.layout-multiple-columns .drawer {
width: 280px;
transition: width .3s;
}
.layout-multiple-columns
.drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
width: 400px;
}
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
@ -4446,10 +4461,20 @@ a:is(.active,
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
> .search__input,
> .search__input {
border-radius: 8px 8px 0 0;
}
.layout-multiple-columns .drawer__pager {
border-radius: 0;
}
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
> .search__popout {
border-radius: 0 0 8px 8px;
margin-top: 0;
}
@media screen and (min-width:630px) and (max-width:1174px) {
.layout-multiple-columns

41
mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
View file

@ -4342,14 +4342,12 @@ a:is(.active,
}
.layout-multiple-columns .drawer__header {
background-color: var(--color-content-bg);
border-top: 1px solid var(--color-lines);
border-left: 1px solid var(--color-lines);
border-right: 1px solid var(--color-lines);
border-radius: 8px 8px 0 0;
border: 1px solid var(--color-lines);
border-radius: 8px;
margin-bottom: 0;
}
.layout-multiple-columns .drawer .search__input {
border-radius: 0 0 8px 8px;
.layout-multiple-columns .drawer .search {
margin-top: 10px;
}
.layout-multiple-columns .drawer__tab {
transition: all .3s;
@ -4360,6 +4358,9 @@ a:is(.active,
box-sizing: border-box;
border: 0;
}
.layout-multiple-columns .drawer__tab .icon {
transform: scale(1.2);
}
.layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) {
background-color: var(--color-accent-bg);
}
@ -4400,10 +4401,15 @@ a:is(.active,
}
.app-body .getting-started .column-link {
margin-left: 0;
font-weight: 500;
color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) {
background-color: var(--color-accent-bg);
color: var(--color-accent);
color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link__icon {
transform: scale(1.4);
}
.app-body .getting-started .column-link__badge {
@ -4438,6 +4444,15 @@ a:is(.active,
display: none;
}
.layout-multiple-columns .drawer {
width: 280px;
transition: width .3s;
}
.layout-multiple-columns
.drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
width: 400px;
}
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
@ -4446,10 +4461,20 @@ a:is(.active,
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
> .search__input,
> .search__input {
border-radius: 8px 8px 0 0;
}
.layout-multiple-columns .drawer__pager {
border-radius: 0;
}
.layout-multiple-columns
.drawer
> .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
> .search__popout {
border-radius: 0 0 8px 8px;
margin-top: 0;
}
@media screen and (min-width:630px) and (max-width:1174px) {
.layout-multiple-columns