bootstrap: Remove bootstrap CSS for input-append class.

We use input-append class only for some search elements
in the app and the CSS rules applied by bootstrap which
are really used are "white-space" and "margin-bottom"
for a couple of ".input-append" elements and "margin-left"
property on clear button which is re-added to the CSS for
specific elements in this commit.

Others are either redundant or overridden by the other CSS
for the specific elements.

The border-radius property for the clear button was applied
but since we use "x" for it, there is no border for that
button and hence it is redundant.
This commit is contained in:
Sahil Batra 2023-06-28 12:40:12 +05:30 committed by Tim Abbott
parent 08dfebafcf
commit b95d23bb07
4 changed files with 24 additions and 65 deletions

View File

@ -114,6 +114,10 @@ li.show-more-topics {
& input { & input {
width: calc(100% - 50px); width: calc(100% - 50px);
} }
.clear_search_button {
margin-left: -1px;
}
} }
& li { & li {
@ -714,9 +718,18 @@ li.topic-list-item {
top: -0.5px; top: -0.5px;
z-index: 1; z-index: 1;
.input-append {
white-space: nowrap;
margin-bottom: 10px;
& input { & input {
padding-right: 20px; padding-right: 20px;
} }
.clear_search_button {
margin-left: -1px;
}
}
} }
.streams_subheader { .streams_subheader {

View File

@ -267,6 +267,9 @@ $user_status_emoji_width: 24px;
} }
#user_search_section { #user_search_section {
white-space: nowrap;
margin-bottom: 10px;
& input { & input {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -274,6 +277,10 @@ $user_status_emoji_width: 24px;
padding-right: 20px; padding-right: 20px;
width: calc(100% - 40px - 3px); width: calc(100% - 40px - 3px);
} }
.clear_search_button {
margin-left: -1px;
}
} }
@media (width < $sm_min) { @media (width < $sm_min) {

View File

@ -497,6 +497,7 @@ h4.user_group_setting_subsection_title {
#clear_search_stream_name, #clear_search_stream_name,
#clear_search_group_name { #clear_search_group_name {
right: 5px !important; right: 5px !important;
margin-left: -1px;
} }
.stream-title { .stream-title {

View File

@ -455,63 +455,8 @@ input:focus:invalid:focus {
vertical-align: middle; vertical-align: middle;
padding-left: 5px; padding-left: 5px;
} }
.input-append {
display: inline-block;
margin-bottom: 10px;
vertical-align: middle;
font-size: 0;
white-space: nowrap;
}
.input-append input,
.input-append .dropdown-menu,
.input-append .popover {
font-size: 14px;
}
.input-append input {
position: relative;
margin-bottom: 0;
vertical-align: top;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.input-append input:focus {
z-index: 2;
}
.input-append .btn,
.input-append .btn-group > .dropdown-toggle {
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.input-append .active {
background-color: #a9dba9;
border-color: #46a546;
}
.input-append input {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.input-append input + .btn-group .btn:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.input-append .btn,
.input-append .btn-group {
margin-left: -1px;
}
.input-append .btn:last-child,
.input-append .btn-group:last-child > .dropdown-toggle {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.form-inline input, .form-inline input,
.form-inline .help-inline, .form-inline .help-inline {
.form-inline .input-append {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
@ -523,9 +468,6 @@ input:focus:invalid:focus {
.form-inline .btn-group { .form-inline .btn-group {
display: inline-block; display: inline-block;
} }
.form-inline .input-append {
margin-bottom: 0;
}
.nav { .nav {
margin-left: 0; margin-left: 0;
margin-bottom: 20px; margin-bottom: 20px;
@ -1322,10 +1264,6 @@ button.close {
.row { .row {
margin-left: 0; margin-left: 0;
} }
.input-append input {
display: inline-block;
width: auto;
}
.modal { .modal {
position: fixed; position: fixed;
top: 20px; top: 20px;