imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move components' CSS to be in the same repo as their JS

Browse source
This commit is contained in:
Matthew Hodgson 2018-04-12 00:23:35 +01:00
parent 70f3804227
commit 79d3cca6e9
113 changed files with 9623 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

24
res/css/views/elements/_AccessibleButton.scss Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AccessibleButton:focus {
outline: 0;
filter: brightness($focus-brightness);
}
.mx_AccessibleButton {
cursor: pointer;
}

45
res/css/views/elements/_AddressSelector.scss Normal file
View file

@ -0,0 +1,45 @@
/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AddressSelector {
position: absolute;
background-color: $primary-bg-color;
width: 485px;
max-height: 116px;
overflow-y: auto;
border-radius: 3px;
background-color: $primary-bg-color;
border: solid 1px $accent-color;
cursor: pointer;
}
.mx_AddressSelector.mx_AddressSelector_empty {
display: none;
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: $primary-bg-color;
border: solid 1px $primary-bg-color;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
background-color: $selected-color;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
background-color: $selected-color;
border: solid 1px $selected-color;
}

138
res/css/views/elements/_AddressTile.scss Normal file
View file

@ -0,0 +1,138 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AddressTile {
display: inline-block;
border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1);
border: solid 1px $input-border-color;
line-height: 26px;
color: $primary-fg-color;
font-size: 14px;
font-weight: normal;
margin-right: 4px;
}
.mx_AddressTile.mx_AddressTile_error {
background-color: rgba(255, 0, 100, 0.1);
color: $warning-color;
border-color: $warning-color;
}
.mx_AddressTile_network {
display: inline-block;
position: relative;
padding-left: 2px;
padding-right: 4px;
vertical-align: middle;
}
.mx_AddressTile_avatar {
display: inline-block;
position: relative;
padding-left: 2px;
padding-right: 7px;
vertical-align: middle;
}
.mx_AddressTile_mx {
display: inline-block;
margin: 0;
border: 0;
padding: 0;
}
.mx_AddressTile_name {
display: inline-block;
padding-right: 4px;
font-weight: 600;
overflow: hidden;
height: 26px;
vertical-align: middle;
}
.mx_AddressTile_name.mx_AddressTile_justified {
width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_id {
display: inline-block;
padding-right: 11px;
}
.mx_AddressTile_id.mx_AddressTile_justified {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_unknownMx {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
width: 380px; /* name + id width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_email {
display: inline-block;
font-weight: 600;
padding-right: 11px;
}
.mx_AddressTile_email.mx_AddressTile_justified {
width: 200px; /* same as id width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_unknown {
display: inline-block;
padding-right: 11px;
}
.mx_AddressTile_unknown.mx_AddressTile_justified {
width: 380px; /* name + id width */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_dismiss {
display: inline-block;
padding-right: 11px;
padding-left: 1px;
cursor: pointer;
}
.mx_AddressTile_dismiss object {
pointer-events: none;
}

70
res/css/views/elements/_DirectorySearchBox.scss Normal file
View file

@ -0,0 +1,70 @@
/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_DirectorySearchBox {
position: relative;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
}
.mx_DirectorySearchBox_container {
display: flex;
padding-left: 9px;
padding-right: 9px;
}
.mx_DirectorySearchBox_input {
flex-grow: 1;
border: 0;
padding: 0;
font-weight: 300;
font-size: 13px;
}
input[type=text].mx_DirectorySearchBox_input:focus {
border: 0;
}
.mx_DirectorySearchBox_joinButton {
display: table-cell;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
background-color: $plinth-bg-color;
border-radius: 3px;
background-image: url('../../img/icon-return.svg');
background-position: 8px 70%;
background-repeat: no-repeat;
text-indent: 18px;
font-weight: 600;
font-size: 12px;
user-select: none;
cursor: pointer;
}
.mx_DirectorySearchBox_clear_wrapper {
display: table-cell;
}
.mx_DirectorySearchBox_clear {
display: inline-block;
vertical-align: middle;
background: url('../../img/icon_context_delete.svg');
background-position: 0 50%;
background-repeat: no-repeat;
width: 15px;
height: 15px;
cursor: pointer;
}

131
res/css/views/elements/_Dropdown.scss Normal file
View file

@ -0,0 +1,131 @@
/*
Copyright 2017 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_Dropdown {
position: relative;
}
.mx_Dropdown_disabled {
opacity: 0.3;
}
.mx_Dropdown_input {
position: relative;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
user-select: none;
}
.mx_Dropdown_input:focus {
border-color: $accent-color;
}
/* Disable dropdown highlight on focus */
.mx_Dropdown_input.mx_AccessibleButton:focus {
filter: none;
}
.mx_Dropdown_arrow {
border-color: $primary-fg-color transparent transparent;
border-style: solid;
border-width: 5px 5px 0;
display: block;
height: 0;
position: absolute;
right: 10px;
top: 14px;
width: 0
}
.mx_Dropdown.left_aligned .mx_Dropdown_arrow {
left: 10px;
}
.mx_Dropdown_input > .mx_Dropdown_option {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option {
padding-left: 25px;
}
.mx_Dropdown_option {
height: 35px;
line-height: 35px;
padding-left: 8px;
padding-right: 8px;
}
.mx_Dropdown_option div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_Dropdown_option img {
margin: 5px;
width: 27px;
vertical-align: middle;
}
input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
border: 0;
padding-top: 0;
padding-bottom: 0;
// XXX: hack to prevent text box being too big and pushing
// its parent out / overlapping the dropdown arrow. Only really
// works in the Country dropdown.
width: 60%;
}
.mx_Dropdown_menu {
position: absolute;
left: -1px;
right: -1px;
top: 100%;
z-index: 2;
margin: 0;
padding: 0px;
border-radius: 3px;
border: 1px solid $accent-color;
background-color: $primary-bg-color;
max-height: 200px;
overflow-y: auto;
}
.mx_Dropdown_menu .mx_Dropdown_option {
height: auto;
min-height: 35px;
}
.mx_Dropdown_menu .mx_Dropdown_option_highlight {
background-color: $focus-bg-color;
}
.mx_Dropdown_menu {
font-weight: bold;
}
.mx_Dropdown_searchPrompt {
font-weight: normal;
margin-left: 5px;
margin-bottom: 5px;
}

62
res/css/views/elements/_EditableItemList.scss Normal file
View file

@ -0,0 +1,62 @@
/*
Copyright 2017 New Vector Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_EditableItemList {
margin-top: 12px;
margin-bottom: 0px;
}
.mx_EditableItem {
display: flex;
margin-left: 56px;
}
.mx_EditableItem .mx_EditableItem_editable {
border: 0px;
border-bottom: 1px solid $strong-input-border-color;
padding: 0px;
min-width: 240px;
max-width: 400px;
margin-bottom: 16px;
}
.mx_EditableItem .mx_EditableItem_editable:focus {
border-bottom: 1px solid $accent-color;
outline: none;
box-shadow: none;
}
.mx_EditableItem .mx_EditableItem_editablePlaceholder {
color: $settings-grey-fg-color;
}
.mx_EditableItem .mx_EditableItem_addButton,
.mx_EditableItem .mx_EditableItem_removeButton {
padding-left: 0.5em;
position: relative;
cursor: pointer;
visibility: hidden;
}
.mx_EditableItem:hover .mx_EditableItem_addButton,
.mx_EditableItem:hover .mx_EditableItem_removeButton {
visibility: visible;
}
.mx_EditableItemList_label {
margin-bottom: 8px;
}

134
res/css/views/elements/_ImageView.scss Normal file
View file

@ -0,0 +1,134 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* This has got to be the most fragile piece of CSS ever written.
But empirically it works on Chrome/FF/Safari
*/
.mx_ImageView {
display: flex;
width: 100%;
height: 100%;
align-items: center;
}
.mx_ImageView_lhs {
order: 1;
flex: 1 1 10%;
min-width: 60px;
// background-color: #080;
// height: 20px;
}
.mx_ImageView_content {
order: 2;
/* min-width hack needed for FF */
min-width: 0px;
height: 90%;
flex: 15 15 0;
display: flex;
align-items: center;
justify-content: center;
}
.mx_ImageView_content img {
max-width: 100%;
/* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
max-height: 100%;
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
object-fit: contain;
/* background-image: url('../../img/trans.png'); */
pointer-events: all;
}
.mx_ImageView_labelWrapper {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
overflow: auto;
pointer-events: all;
}
.mx_ImageView_label {
text-align: left;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 30px;
padding-right: 30px;
min-height: 100%;
max-width: 240px;
color: $lightbox-fg-color;
}
.mx_ImageView_cancel {
position: absolute;
top: 0px;
right: 0px;
padding: 35px;
cursor: pointer;
}
.mx_ImageView_name {
font-size: 18px;
margin-bottom: 6px;
word-wrap: break-word;
}
.mx_ImageView_metadata {
font-size: 15px;
opacity: 0.5;
}
.mx_ImageView_download {
display: table;
margin-top: 24px;
margin-bottom: 6px;
border-radius: 5px;
background-color: $lightbox-bg-color;
font-size: 14px;
padding: 9px;
border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
font-size: 11px;
}
.mx_ImageView_link {
color: $lightbox-fg-color ! important;
text-decoration: none ! important;
}
.mx_ImageView_button {
font-size: 15px;
opacity: 0.5;
margin-top: 18px;
cursor: pointer;
}
.mx_ImageView_shim {
height: 30px;
}
.mx_ImageView_rhs {
order: 3;
flex: 1 1 10%;
min-width: 300px;
// background-color: #800;
// height: 20px;
}

24
res/css/views/elements/_InlineSpinner.scss Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2017 New Vector Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_InlineSpinner {
display: inline;
}
.mx_InlineSpinner img {
margin: 0px 6px;
vertical-align: -3px;
}

71
res/css/views/elements/_MemberEventListSummary.scss Normal file
View file

@ -0,0 +1,71 @@
/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MemberEventListSummary {
position: relative;
}
.mx_TextualEvent.mx_MemberEventListSummary_summary {
font-size: 14px;
display: inline-flex;
}
.mx_MemberEventListSummary_avatars {
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: 12px;
}
.mx_MemberEventListSummary_avatars .mx_BaseAvatar {
margin-right: -4px;
cursor: pointer;
}
.mx_MemberEventListSummary_toggle {
color: $accent-color;
cursor: pointer;
float: right;
margin-right: 10px;
margin-top: 8px;
}
.mx_MemberEventListSummary_line {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;
line-height: 30px;
}
.mx_MatrixChat_useCompactLayout {
.mx_MemberEventListSummary {
font-size: 13px;
.mx_EventTile_line {
line-height: 20px;
}
}
.mx_MemberEventListSummary_line {
line-height: 22px;
}
.mx_MemberEventListSummary_toggle {
margin-top: 3px;
}
.mx_TextualEvent.mx_MemberEventListSummary_summary {
font-size: 13px;
}
}

25
res/css/views/elements/_ProgressBar.scss Normal file
View file

@ -0,0 +1,25 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ProgressBar {
height: 5px;
border: 1px solid $progressbar-color;
}
.mx_ProgressBar_fill {
height: 100%;
background-color: $progressbar-color;
}

26
res/css/views/elements/_Quote.scss Normal file
View file

@ -0,0 +1,26 @@
/*
Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_Quote .mx_DateSeparator {
font-size: 1em !important;
margin-bottom: 0;
padding-bottom: 1px;
bottom: -5px;
}
.mx_Quote_show {
cursor: pointer;
}

75
res/css/views/elements/_RichText.scss Normal file
View file

@ -0,0 +1,75 @@
// XXX: bleurgh, what is this? These classes totally break the component
// naming scheme; it's completely unclear where or how they're being used
// --Matthew
.mx_UserPill,
.mx_RoomPill,
.mx_AtRoomPill {
border-radius: 16px;
display: inline-block;
height: 20px;
line-height: 20px;
padding-left: 5px;
}
.mx_EventTile_body .mx_UserPill,
.mx_EventTile_body .mx_RoomPill {
cursor: pointer;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_UserPill,
.mx_UserPill {
color: $primary-fg-color;
background-color: $other-user-pill-bg-color;
padding-right: 5px;
}
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
.mx_EventTile_content .mx_AtRoomPill,
.mx_MessageComposer_input .mx_AtRoomPill {
color: $accent-fg-color;
background-color: $mention-user-pill-bg-color;
padding-right: 5px;
}
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_RoomPill,
.mx_RoomPill {
color: $accent-fg-color;
background-color: $rte-room-pill-color;
padding-right: 5px;
}
.mx_UserPill .mx_BaseAvatar,
.mx_RoomPill .mx_BaseAvatar,
.mx_AtRoomPill .mx_BaseAvatar {
position: relative;
left: -3px;
top: 2px;
}
.mx_Markdown_BOLD {
font-weight: bold;
}
.mx_Markdown_ITALIC {
font-style: italic;
}
.mx_Markdown_CODE {
padding: .2em 0;
margin: 0;
font-size: 85%;
background-color: $rte-code-bg-color;
border-radius: 3px;
}
.mx_Markdown_HR {
display: block;
background: $rte-bg-color;
}
.mx_Markdown_STRIKETHROUGH {
text-decoration: line-through;
}

33
res/css/views/elements/_RoleButton.scss Normal file
View file

@ -0,0 +1,33 @@
/*
Copyright 2107 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoleButton {
margin-left: 4px;
margin-right: 4px;
cursor: pointer;
display: inline-block;
}
.mx_RoleButton object {
pointer-events: none;
}
.mx_RoleButton_tooltip {
display: inline-block;
position: relative;
top: -25px;
left: 6px;
}

28
res/css/views/elements/_Spinner.scss Normal file
View file

@ -0,0 +1,28 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_Spinner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
flex: 1;
}
.mx_MatrixChat_middlePanel .mx_Spinner {
height: auto;
}

21
res/css/views/elements/_SyntaxHighlight.scss Normal file
View file

@ -0,0 +1,21 @@
/*
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SyntaxHighlight {
/* inhibit hljs styling */
background: none !important;
color: $light-fg-color !important;
}

51
res/css/views/elements/_ToolTipButton.scss Normal file
View file

@ -0,0 +1,51 @@
/*
Copyright 2017 New Vector Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ToolTipButton {
display: inline-block;
width: 11px;
height: 11px;
margin-left: 5px;
border: 2px solid $neutral-badge-color;
border-radius: 20px;
color: $neutral-badge-color;
transition: opacity 0.2s ease-in;
opacity: 0.6;
line-height: 11px;
text-align: center;
cursor: pointer;
}
.mx_ToolTipButton:hover {
opacity: 1.0;
}
.mx_ToolTipButton_container {
position: relative;
top: -18px;
left: 4px;
}
.mx_ToolTipButton_helpText {
width: 400px;
text-align: start;
line-height: 17px !important;
}