Unverified Commit d04a553a authored by Benjamin Neff's avatar Benjamin Neff

Merge pull request #7380 from svbergerem/refactor-mentions-css

Refactor mentions-input-box css
parents af0a5e32 a1199ac2
......@@ -9,7 +9,6 @@
@import 'media-box';
@import 'entypo';
@import 'icons';
@import 'mentions';
@import 'animations';
@import 'flash_messages';
@import 'sprites';
......
......@@ -7,7 +7,6 @@ body {
}
.publisher {
.mentions-input-box { background-color: $gray; }
form {
#publisher_textarea_wrapper { background-color: $gray; }
.btn.btn-link.question_mark:hover .entypo-cog { color: $gray-light; }
......
.mentions-input-box {
border-radius: 3px;
background: #fff;
position: relative;
textarea {
display: block;
background: transparent;
border: 1px solid #dcdcdc;
border-radius: 3px;
outline: 0;
overflow: hidden;
position: relative;
resize: none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-control[disabled] { background-color: transparent; }
.mentions-autocomplete-list {
background: white;
display: none;
left: 0;
margin-left: -1px;
position: absolute;
right: 0;
z-index: 10000;
ul {
border: 1px solid $border-dark-grey;
margin: 0;
padding: 0;
border-radius: 0px 0px 5px 5px;
li {
color: #444;
background: white;
border-bottom: 1px solid #ccc;
cursor: pointer;
font-size: 15px;
height: 26px;
line-height: 26px;
list-style: none;
margin: 0;
overflow: hidden;
padding: 5px;
white-space: nowrap;
&:hover, &.active { background: $background-grey; }
&:last-child { border-radius: 0px 0px 5px 5px; }
img, div.icon {
float: left;
height: 25px;
margin-right: 5px;
width: 25px;
}
}
}
}
}
.typeahead-mention-box-wrap .twitter-typeahead {
left: -1px;
width: calc(100% + 2px);
.tt-menu {
// Override inline rule of Typeahead
// If this is not overridden (`position: absolute` by default in Typeahead) then
// the box is cut when opened because of the `overflow: hidden` from parent classes of comment form styles. By
// having `position: relative` here we make it visible by inserting it in the flow.
// This has a side effect of "Comment" button move down when box is open, but it feels like the least evil.
// scss-lint:disable ImportantRule
position: relative !important;
// scss-lint:enable ImportantRule
width: 100%;
}
}
......@@ -76,11 +76,12 @@
}
textarea {
background: transparent;
border: 0 solid $light-grey;
margin: 0;
box-shadow: none;
resize: none;
height: 50px;
margin: 0;
resize: none;
}
&.active textarea {
......@@ -195,6 +196,8 @@
}
.publisher-textarea-wrapper {
position: relative;
&:not(.with-location) .location-container,
&.markdown-preview .location-container,
&:not(.with-poll) .poll-creator-container,
......
......@@ -43,3 +43,21 @@
}
}
}
.typeahead-mention-box-wrap .twitter-typeahead {
left: -1px;
width: calc(100% + 2px);
.tt-menu {
// Override inline rule of Typeahead
// If this is not overridden (`position: absolute` by default in Typeahead) then
// the box is cut when opened because of the `overflow: hidden` from parent classes of comment form styles. By
// having `position: relative` here we make it visible by inserting it in the flow.
// This has a side effect of "Comment" button move down when box is open, but it feels like the least evil.
// scss-lint:disable ImportantRule
position: relative !important;
// scss-lint:enable ImportantRule
width: 100%;
}
}
......@@ -4,19 +4,18 @@
= status.error_messages
%params
.publisher-textarea-wrapper#publisher_textarea_wrapper
.mentions-input-box
- if current_user.getting_started?
= status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
:tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
"data-title" => popover_with_close_html("1. " + t("shared.public_explain.share")),
"data-content" => t("shared.public_explain.new_user_welcome_message"),
"class" => "form-control mention-textarea"
- else
= status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
:tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
"class" => "form-control mention-textarea"
.typeahead-mention-box-wrap
%input.typeahead-mention-box.hidden{type: "text"}
- if current_user.getting_started?
= status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
:tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
"data-title" => popover_with_close_html("1. " + t("shared.public_explain.share")),
"data-content" => t("shared.public_explain.new_user_welcome_message"),
"class" => "form-control mention-textarea"
- else
= status.text_area :text, :rows => 2, :value => h(publisher_formatted_text),
:tabindex => 1, :placeholder => "#{t('contacts.index.start_a_conversation')}...",
"class" => "form-control mention-textarea"
.typeahead-mention-box-wrap
%input.typeahead-mention-box.hidden{type: "text"}
.container-fluid.photodropzone-container#photodropzone_container
%ul#photodropzone
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment