bootstrap: Remove bootstrap CSS for url type inputs.

We use url type inputs in the add and edit custom field modals
and also to show the url type custom fields in "Profile" panel
and "Manage user" modal.

This commit re-adds the bootstrap CSS rules to these specific
input elements using modal_url_input and settings_url_input
class and thus removes the CSS for url type inputs from
bootstrap.css.

We might replace the new class added here with a common class
for all type of inputs in further commits.
This commit is contained in:
Sahil Batra
2023-06-19 15:01:39 +05:30
committed by Tim Abbott
parent 9cf214a7cb
commit a860e717bb
6 changed files with 25 additions and 10 deletions

View File

@@ -356,7 +356,8 @@
width: 206px; width: 206px;
} }
.modal_password_input { .modal_password_input,
.modal_url_input {
padding: 4px 6px; padding: 4px 6px;
color: hsl(0deg 0% 33%); color: hsl(0deg 0% 33%);
border-radius: 4px; border-radius: 4px;

View File

@@ -1945,3 +1945,20 @@ $option_title_width: 180px;
opacity: 0.7; opacity: 0.7;
} }
} }
.settings_url_input {
padding: 4px 6px;
color: hsl(0deg 0% 33%);
border-radius: 4px;
border: 1px solid hsl(0deg 0% 80%);
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
transition: border linear 0.2s, box-shadow linear 0.2s;
margin-bottom: 10px;
&:focus {
border-color: hsl(206deg 80% 62% / 80%);
outline: 0;
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsl(206deg 80% 62% / 60%);
}
}

View File

@@ -34,7 +34,7 @@
</div> </div>
<div class="input-group" id="custom_external_account_url_pattern"> <div class="input-group" id="custom_external_account_url_pattern">
<label for="custom_field_url_pattern" >{{t "URL pattern" }}</label> <label for="custom_field_url_pattern" >{{t "URL pattern" }}</label>
<input type="url" id="custom_field_url_pattern" name="url_pattern" autocomplete="off" maxlength="1024" placeholder="https://example.com/path/%(username)s"/> <input type="url" id="custom_field_url_pattern" class="modal_url_input" name="url_pattern" autocomplete="off" maxlength="1024" placeholder="https://example.com/path/%(username)s"/>
</div> </div>
<div class="input-group"> <div class="input-group">
<label class="checkbox profile_field_display_label" for="profile_field_display_in_profile_summary"> <label class="checkbox profile_field_display_label" for="profile_field_display_in_profile_summary">

View File

@@ -21,7 +21,7 @@
value="{{ field_value.value }}" /> value="{{ field_value.value }}" />
<span class="remove_date"><i class="fa fa-close"></i></span> <span class="remove_date"><i class="fa fa-close"></i></span>
{{else if is_url_field }} {{else if is_url_field }}
<input class="custom_user_field_value {{#if for_manage_user_modal}}modal_text_input{{else}}settings_text_input{{/if}}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="2048" /> <input class="custom_user_field_value {{#if for_manage_user_modal}}modal_text_input modal_url_input{{else}}settings_text_input settings_url_input{{/if}}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="2048" />
{{else if is_pronouns_field}} {{else if is_pronouns_field}}
<input class="custom_user_field_value pronouns_type_field {{#if for_manage_user_modal}}modal_text_input{{else}}settings_text_input{{/if}}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" /> <input class="custom_user_field_value pronouns_type_field {{#if for_manage_user_modal}}modal_text_input{{else}}settings_text_input{{/if}}" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
{{else}} {{else}}

View File

@@ -33,7 +33,7 @@
</div> </div>
<div class="input-group custom_external_account_detail"> <div class="input-group custom_external_account_detail">
<label for="url_pattern">{{t "URL pattern" }}</label> <label for="url_pattern">{{t "URL pattern" }}</label>
<input type="url" name="url_pattern" autocomplete="off" maxlength="80" /> <input type="url" class="modal_url_input" name="url_pattern" autocomplete="off" maxlength="80" />
</div> </div>
{{/if}} {{/if}}
{{#if valid_to_display_in_summary}} {{#if valid_to_display_in_summary}}

View File

@@ -420,8 +420,7 @@ label {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
input[type="text"], input[type="text"] {
input[type="url"] {
display: inline-block; display: inline-block;
height: 20px; height: 20px;
padding: 4px 6px; padding: 4px 6px;
@@ -434,8 +433,7 @@ input[type="url"] {
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
} }
input[type="text"], input[type="text"] {
input[type="url"] {
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #cccccc; border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -446,8 +444,7 @@ input[type="url"] {
-o-transition: border linear .2s, box-shadow linear .2s; -o-transition: border linear .2s, box-shadow linear .2s;
transition: border linear .2s, box-shadow linear .2s; transition: border linear .2s, box-shadow linear .2s;
} }
input[type="text"]:focus, input[type="text"]:focus {
input[type="url"]:focus {
border-color: rgba(82, 168, 236, 0.8); border-color: rgba(82, 168, 236, 0.8);
outline: 0; outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);