<style include="md-select settings-shared input-device-settings-shared">
#container {
position: relative;
transition: background 150ms ease;
}
:host([is-being-dragged_]) #container {
background: var(--cros-sys-highlight_shape);
#buttonLabel {
color: var(--cros-text-color-disabled);
}
.edit-button {
--cr-icon-button-fill-color: var(--cros-text-color-disabled);
}
}
/* These pseudo-elements are used to display the drop indicator above or
* below each customize-button-row element. */
#container::after,
#container::before {
border: 0;
content: '';
display: block;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
width: 100%;
}
:host(.drop-indicator-top) #container::before,
:host(.drop-indicator-bottom) #container::after {
background: var(--cros-app-scrollbar-color);
height: 2px;
/* Add offset to account for separator between customize-button-rows. */
--indicator-offset: calc(-1.5 * var(--cr-separator-height));
}
:host(.drop-indicator-top) #container::before {
top: var(--indicator-offset);
}
:host(.drop-indicator-bottom) #container::after {
bottom: var(--indicator-offset);
}
#header {
display: flex;
}
.edit-button {
--cr-icon-button-icon-start-offset: 4px;
--cr-icon-button-margin-start: 0;
opacity: 0;
transition: opacity 300ms, transform 100ms;
}
.move-button,
.edit-button {
--cr-icon-button-icon-size: 16px;
--cr-icon-button-fill-color: var(--cros-sys-on_surface);
}
/* Show edit-button when user hover on the row container. */
#container:hover .edit-button,
.edit-button:focus-visible {
opacity: 1;
}
.settings-box {
align-self: stretch;
height: 64px;
padding-inline-start: 0;
}
select {
padding-inline-end: 12px;
padding-inline-start: 16px;
}
.edit-icon-container {
align-items: center;
flex: auto;
size: 48px;
}
#buttonLabelContainer {
padding-inline-end: 6px;
margin-inline-end: 6px;
max-width: 292px;
}
#keyCombination {
display: none;
}
cr-icon-button {
margin-inline-end: 24px;
margin-inline-start: 0;
}
</style>
<div id="container" class="settings-box"
on-mousedown="onContainerMouseDown_"
on-dragstart="onDragStart_" on-dragend="onDragEnd_" draggable="true">
<div class="move-icon-container">
<cr-icon-button
class="move-button"
iron-icon="os-settings:move"
id="reorderButton"
aria-label="[[getReorderButtonLabel_(buttonRemappingName_)]]">
</cr-icon-button>
</div>
<div id="buttonLabelContainer">
<div id="buttonLabel">[[buttonRemappingName_]]</div>
</div>
<div class="edit-icon-container">
<cr-icon-button class="edit-button" id="renameButton"
aria-label="$i18n{renameIconLabel}"
aria-describedby="buttonLabel"
iron-icon="os-settings:edit"
on-click="onEditButtonLabelClicked_">
</cr-icon-button>
</div>
<div id="dropdownContainer" class="text-field-container">
<customize-button-select id="remappingActionDropdown"
aria-describedby="buttonLabel"
action-list="[[actionList]]"
button-remapping-list="{{buttonRemappingList}}"
remapping-index="[[remappingIndex]]"
meta-key="[[metaKey]]">
</customize-button-select>
</div>
</div>