diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js index 03889ddf0..3dd40e858 100644 --- a/app/soapbox/features/compose/components/compose_form.js +++ b/app/soapbox/features/compose/components/compose_form.js @@ -329,7 +329,7 @@ class ComposeForm extends ImmutablePureComponent { onSuggestionSelected={this.onSpoilerSuggestionSelected} searchTokens={[':']} id='cw-spoiler-input' - className='mb-2' + className='mb-2 border-none shadow-none px-0 py-2 text-base' autoFocus /> diff --git a/app/soapbox/features/compose/components/compose_form_button.tsx b/app/soapbox/features/compose/components/compose_form_button.tsx index 3f80c4b6a..0cef5b30b 100644 --- a/app/soapbox/features/compose/components/compose_form_button.tsx +++ b/app/soapbox/features/compose/components/compose_form_button.tsx @@ -21,7 +21,7 @@ const ComposeFormButton: React.FC = ({ return (
span:last-child { + flex: 1; + } + + .autossugest-input { + flex: 1 1 auto; + } + + input[type=text] { + @apply border border-solid border-primary-600; + display: block; + box-sizing: border-box; + width: 100%; + font-size: 14px; + outline: 0; + font-family: inherit; + border-radius: 4px; + padding: 6px 10px; + + &:focus { + @apply border border-solid border-primary-500; + } + } + + &.selectable { + cursor: pointer; + } + + &.editable { + display: flex; + align-items: center; + overflow: visible; + + .autosuggest-input { + width: 100%; + } + } + } + + &__input { + @apply border border-solid border-primary-600; + display: inline-block; + position: relative; + box-sizing: border-box; + width: 18px; + height: 18px; + flex: 0 0 auto; + margin-right: 10px; + top: -1px; + border-radius: 50%; + vertical-align: middle; + + &.checkbox { + border-radius: 4px; + } + + &.active { + border-color: $valid-value-color; + background: $valid-value-color; + } + + &:active, + &:focus, + &:hover { + border-width: 4px; + background: none; + } + + &::-moz-focus-inner { + outline: 0 !important; + border: 0; + } + + &:focus, + &:active { + outline: 0 !important; + } + } + + &__number { + display: inline-block; + width: 36px; + font-weight: 700; + padding: 0 10px; + text-align: right; + } + + &.voted &__number { + width: 52px; + padding-left: 8px; + flex: 0 0 52px; + } + + &__vote__mark { + float: left; + color: var(--highlight-text-color); + line-height: 18px; + } + + &__footer { + padding-top: 6px; + padding-bottom: 5px; + color: var(--primary-text-color); + } + + &__link { + display: inline; + background: transparent; + padding: 0; + margin: 0; + border: 0; + color: var(--primary-text-color); + text-decoration: underline; + font-size: inherit; + + &:hover { + text-decoration: none; + } + + &:active, + &:focus { + background-color: hsla(var(--primary-text-color_hsl), 0.1); + } + } + + .button { + height: 36px; + padding: 0 16px; + margin-right: 10px; + font-size: 14px; + } + + &__cancel { + height: 20px; + + .svg-icon { + height: 20px; + width: 20px; + } + } +} + +.compose-form__poll-wrapper { + border-top: 1px solid var(--foreground-color); + + ul { + padding: 10px; + } + + .poll__footer { + border-top: 1px solid var(--foreground-color); + padding: 10px; + margin: -5px 0 0 -5px; + + button, + select { + flex: 1 1 50%; + margin: 5px 0 0 5px; + } + } + + .button.button-secondary { + font-size: 14px; + font-weight: 400; + padding: 6px 10px; + height: auto; + line-height: inherit; + color: var(--brand-color); + border-color: var(--brand-color); + } + + li { + display: flex; + align-items: center; + + .poll__text { + flex: 0 0 auto; + width: calc(100% - (23px + 6px)); + margin-right: 6px; + } + } + + select { + @apply border border-solid border-primary-600; + box-sizing: border-box; + font-size: 14px; + display: inline-block; + width: auto; + outline: 0; + font-family: inherit; + background-color: var(--foreground-color); + background-repeat: no-repeat; + background-position: right 8px center; + background-size: auto 16px; + border-radius: 4px; + padding: 6px 10px; + padding-right: 30px; + } + + .icon-button.disabled { + color: var(--brand-color); + } +} + +.muted .poll { + color: var(--primary-text-color); + + &__chart { + background: hsla(var(--brand-color_hsl), 0.2); + + &.leading { + background: hsla(var(--brand-color_hsl), 0.2); + } + } +}