gab-social/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.scss
mgabdev 280dc51d85 Large update for all components
reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*
2019-08-07 01:02:36 -04:00

86 lines
1.6 KiB
SCSS

.autosuggest-input {
position: relative;
}
.autosuggest-textarea {
&__suggestions-wrapper {
position: relative;
height: 0;
}
&__wrapper {
position: relative;
}
&__textarea {
display: block;
box-sizing: border-box;
min-height: 100px;
border-radius: 5px 5px 0 0;
resize: none;
scrollbar-color: initial;
padding: 14px 32px 13px 10px !important;
width: 100%;
margin: 0;
color: $inverted-text-color;
background: $simple-background-color;
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
body.theme-gabsocial-light & {
background: $gab-background-base-light;
}
&:focus {
outline: 0;
}
@media screen and (max-width: 600px) {
font-size: 16px;
}
&::-webkit-scrollbar {
all: unset;
}
@media screen and (max-width: 600px) {
max-height: 100px !important; // prevent auto-resize textarea
resize: vertical;
}
}
&__suggestions {
display: none;
box-sizing: border-box;
position: absolute;
top: 100%;
width: 100%;
z-index: 9999;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
background: $ui-secondary-color;
color: $inverted-text-color;
border-radius: 0 0 4px 4px;
font-size: 14px;
padding: 6px;
&--visible {
display: block;
}
&__item {
padding: 10px;
cursor: pointer;
border-radius: 4px;
&:hover,
&:focus,
&:active,
&.selected {
background: darken($ui-secondary-color, 10%);
}
}
}
}