[feature] refactor search box / add drawer outlines
- add outlines to some UI elements like the timeline and drawers - search “clear” button is now an actual `<button>`
This commit is contained in:
Zoë Bijl
@@ -346,7 +346,8 @@ class Search extends PureComponent {
|
||||
const hasValue = value.length > 0 || submitted;
|
||||
|
||||
return (
|
||||
<div className={classNames("search", { active: expanded })}>
|
||||
<div className={classNames('search', { active: expanded })}>
|
||||
<Icon id='magnifying-glass' className='search__icon' />
|
||||
<input
|
||||
ref={this.setRef}
|
||||
className='search__input'
|
||||
@@ -359,11 +360,9 @@ class Search extends PureComponent {
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
/>
|
||||
|
||||
<div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
|
||||
<Icon id='magnifying-glass' className={hasValue ? '' : 'active'} />
|
||||
<Icon id='x-circle' className={hasValue ? 'active' : ''} />
|
||||
</div>
|
||||
<button type="button" className={hasValue ? 'search__button active' : 'search__button'} onClick={this.handleClear}>
|
||||
<Icon id='x' />
|
||||
</button>
|
||||
<div className='search__popout'>
|
||||
{options.length === 0 && (
|
||||
<>
|
||||
|
||||
@@ -52,17 +52,14 @@
|
||||
}
|
||||
|
||||
@mixin search-input() {
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--color-accent-lines);
|
||||
border-radius: var(--drawer-border-radius);
|
||||
box-sizing: border-box;
|
||||
color: var(--color-accent-fg);
|
||||
font-family: inherit;
|
||||
background: $ui-base-color;
|
||||
color: $darker-text-color;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
background: var(--color-accent-bg);
|
||||
}
|
||||
|
||||
@mixin search-popout() {
|
||||
|
||||
@@ -361,8 +361,9 @@
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--color-accent-lines);
|
||||
cursor: default;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--color-accent-bg);
|
||||
|
||||
a,
|
||||
button {
|
||||
|
||||
@@ -343,6 +343,8 @@ $ui-header-height: 55px;
|
||||
|
||||
.column-header {
|
||||
display: flex;
|
||||
border: 1px solid var(--color-lines);
|
||||
border-bottom: 0;
|
||||
border-radius: var(--drawer-border-radius) var(--drawer-border-radius) 0 0;
|
||||
color: $darker-text-color;
|
||||
font-size: 16px;
|
||||
@@ -371,13 +373,13 @@ $ui-header-height: 55px;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
padding: 13px 0 13px 15px;
|
||||
padding: 12px 0 13px 15px;
|
||||
}
|
||||
|
||||
.column-header__buttons {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
padding: 4px 5px 5px;
|
||||
}
|
||||
|
||||
.column-header__button,
|
||||
@@ -418,9 +420,10 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
> .scrollable {
|
||||
border: 1px solid var(--color-lines);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 var(--drawer-border-radius) var(--drawer-border-radius);
|
||||
background: $ui-base-color;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -53,7 +53,8 @@
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--color-lines);
|
||||
border-radius: var(--drawer-border-radius);
|
||||
color: $darker-text-color;
|
||||
font-size: 16px;
|
||||
@@ -209,20 +210,21 @@
|
||||
}
|
||||
|
||||
.drawer__pager {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
border: 1px solid var(--color-lines);
|
||||
border-radius: var(--drawer-border-radius);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drawer__inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
background: lighten($ui-base-color, 13%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
@@ -238,8 +240,8 @@
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: lighten($ui-base-color, 13%)
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
|
||||
background: lighten($ui-base-color, 4%)
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z"/></svg>')
|
||||
no-repeat bottom / 100% auto;
|
||||
flex: 1;
|
||||
min-height: 47px;
|
||||
@@ -293,7 +295,7 @@
|
||||
bottom /
|
||||
100%
|
||||
auto,
|
||||
lighten($ui-base-color, 13%);
|
||||
lighten($ui-base-color, 4%);
|
||||
} @else {
|
||||
background:
|
||||
url('~flavours/glitch/images/wave-drawer-glitched.png')
|
||||
@@ -301,7 +303,7 @@
|
||||
bottom /
|
||||
100%
|
||||
auto,
|
||||
lighten($ui-base-color, 13%);
|
||||
lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
& > .mastodon {
|
||||
|
||||
@@ -1,184 +1,154 @@
|
||||
.search {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__popout {
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
margin-top: -2px;
|
||||
width: 100%;
|
||||
background: $ui-base-color;
|
||||
border-radius: 0 0 4px 4px;
|
||||
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
|
||||
z-index: 99;
|
||||
font-size: 13px;
|
||||
padding: 15px 5px;
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
color: $dark-text-color;
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__message {
|
||||
color: $dark-text-color;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
color: $darker-text-color;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
text-align: start;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&--flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.selected {
|
||||
background: $ui-highlight-color;
|
||||
color: $primary-text-color;
|
||||
|
||||
.icon-button {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
background: transparent;
|
||||
font-weight: 700;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
span {
|
||||
overflow: inherit;
|
||||
text-overflow: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.search__popout {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.search__icon,
|
||||
.search__icon.gts-icon {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 13px;
|
||||
--size: 20px;
|
||||
}
|
||||
|
||||
.search__input {
|
||||
@include search-input;
|
||||
|
||||
display: block;
|
||||
padding: 15px;
|
||||
padding-inline-end: 30px;
|
||||
line-height: 18px;
|
||||
padding: 12px 40px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
|
||||
&::placeholder {
|
||||
color: lighten($darker-text-color, 4%);
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: darken($ui-base-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.search__icon {
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
.search__button {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
display: none;
|
||||
padding: 6px;
|
||||
border: 0;
|
||||
border-radius: var(--button-border-radius);
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus {
|
||||
outline: 0 !important;
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.search__button.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search__popout {
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding: 15px 5px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-lines);
|
||||
border-radius: var(--drawer-border-radius);
|
||||
box-sizing: border-box;
|
||||
background: $ui-base-color;
|
||||
|
||||
inset-inline-start: 0;
|
||||
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
|
||||
z-index: 99;
|
||||
// font-size: 13px;
|
||||
// padding: 15px 5px;
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
color: $dark-text-color;
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
inset-inline-end: 10px;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transition: all 100ms linear;
|
||||
transition-property: color, transform, opacity;
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: $secondary-text-color;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
&__menu {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.active {
|
||||
pointer-events: auto;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-search {
|
||||
transform: rotate(0deg);
|
||||
|
||||
&.active {
|
||||
pointer-events: auto;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-times-circle {
|
||||
top: 17px;
|
||||
transform: rotate(0deg);
|
||||
color: $action-button-color;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
transform: rotate(90deg);
|
||||
opacity: 1;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: lighten($action-button-color, 7%);
|
||||
&__message {
|
||||
color: $dark-text-color;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
color: $darker-text-color;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
text-align: start;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&--flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.selected {
|
||||
background: $ui-highlight-color;
|
||||
color: $primary-text-color;
|
||||
|
||||
.icon-button {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
background: transparent;
|
||||
font-weight: 700;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
span {
|
||||
overflow: inherit;
|
||||
text-overflow: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search.active .search__popout {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-results__header {
|
||||
color: $dark-text-color;
|
||||
background: lighten($ui-base-color, 2%);
|
||||
|
||||
@@ -4,6 +4,14 @@
|
||||
:root {
|
||||
--drawer-border-radius: 8px;
|
||||
--button-border-radius: 6px;
|
||||
|
||||
--color-bg: #261f3c;
|
||||
--color-fg: #d6d2e0;
|
||||
--color-lines: #3d4455;
|
||||
|
||||
--color-accent-bg: #1f232b;
|
||||
--color-accent-fg: #ffffff;
|
||||
--color-accent-lines: rgba(172, 172, 249, 0.3);
|
||||
}
|
||||
|
||||
/* Diff */
|
||||
|
||||
Reference in New Issue
Block a user