element-web-Github/res/css/views/elements/_EditableItemList.pcss

/*
Copyright 2017-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/

.mx_EditableItemList {
    margin-top: 12px;
    margin-bottom: 10px;
}

.mx_EditableItem {
    display: flex;
    margin-bottom: 5px;
}

.mx_EditableItem_delete {
    @mixin customisedCancelButton;
    order: 3;
    margin-right: 5px;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background-color: $alert;
    mask-size: 100%;
}

.mx_EditableItem_email {
    vertical-align: middle;
}

.mx_EditableItem_promptText {
    margin-right: 10px;
    order: 2;
}

.mx_EditableItem_confirmBtn {
    margin-right: 5px;
}

.mx_EditableItem_item {
    flex: auto 1 0;
    order: 1;
    width: calc(100% - 14px); /* leave space for the remove button */
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.mx_EditableItemList_label {
    margin-bottom: 5px;
}
move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00			`/*`
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint 2024-09-09 21:57:16 +08:00			`Copyright 2017-2024 New Vector Ltd.`
move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint 2024-09-09 21:57:16 +08:00			`SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only`
			`Please see LICENSE files in the repository root for full details.`
move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00			`*/`

			`.mx_EditableItemList {`
			`margin-top: 12px;`
Rework EditableItemList to support mxField Also improves upon the general UX to be a bit friendlier for direct manipulation things. 2019-02-09 00:11:30 +08:00			`margin-bottom: 10px;`
move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00			`}`

			`.mx_EditableItem {`
make editable list look like something closer to design 2020-03-17 00:29:35 +08:00			`display: flex;`
Rework EditableItemList to support mxField Also improves upon the general UX to be a bit friendlier for direct manipulation things. 2019-02-09 00:11:30 +08:00			`margin-bottom: 5px;`
move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00			`}`

Rework EditableItemList to support mxField Also improves upon the general UX to be a bit friendlier for direct manipulation things. 2019-02-09 00:11:30 +08:00			`.mx_EditableItem_delete {`
Create a mixin of cancel button (#8526) 2022-05-08 03:08:00 +08:00			`@mixin customisedCancelButton;`
make editable list look like something closer to design 2020-03-17 00:29:35 +08:00			`order: 3;`
Rework EditableItemList to support mxField Also improves upon the general UX to be a bit friendlier for direct manipulation things. 2019-02-09 00:11:30 +08:00			`margin-right: 5px;`
			`vertical-align: middle;`
make editable list look like something closer to design 2020-03-17 00:29:35 +08:00			`width: 14px;`
			`height: 14px;`
Color cleanup 8 (#7108) * $accent-color -> $accent Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $notice-primary-color -> $alert Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $notice-primary-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-50pct Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $warning-color -> $alert Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-darker Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $orange-warning-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $warning-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $info-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> 2021-11-11 21:37:29 +08:00			`background-color: $alert;`
make editable list look like something closer to design 2020-03-17 00:29:35 +08:00			`mask-size: 100%;`
move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00			`}`

Rework EditableItemList to support mxField Also improves upon the general UX to be a bit friendlier for direct manipulation things. 2019-02-09 00:11:30 +08:00			`.mx_EditableItem_email {`
			`vertical-align: middle;`
move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00			`}`

Rework EditableItemList to support mxField Also improves upon the general UX to be a bit friendlier for direct manipulation things. 2019-02-09 00:11:30 +08:00			`.mx_EditableItem_promptText {`
			`margin-right: 10px;`
make editable list look like something closer to design 2020-03-17 00:29:35 +08:00			`order: 2;`
move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00			`}`

Rework EditableItemList to support mxField Also improves upon the general UX to be a bit friendlier for direct manipulation things. 2019-02-09 00:11:30 +08:00			`.mx_EditableItem_confirmBtn {`
			`margin-right: 5px;`
move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00			`}`

make editable list look like something closer to design 2020-03-17 00:29:35 +08:00			`.mx_EditableItem_item {`
			`flex: auto 1 0;`
			`order: 1;`
Disallow invalid inline style comments in stylesheets (#9099) 2022-07-27 21:39:29 +08:00			`width: calc(100% - 14px); /* leave space for the remove button */`
cap width of editable item list item to leave space for its X remove button Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> 2020-04-26 19:52:17 +08:00			`overflow-x: hidden;`
			`text-overflow: ellipsis;`
make editable list look like something closer to design 2020-03-17 00:29:35 +08:00			`}`

move components' CSS to be in the same repo as their JS 2018-04-12 07:23:35 +08:00			`.mx_EditableItemList_label {`
Rework EditableItemList to support mxField Also improves upon the general UX to be a bit friendlier for direct manipulation things. 2019-02-09 00:11:30 +08:00			`margin-bottom: 5px;`
Use flex: 1 for mx_Field to replace all the calc(100% - 20px) and more Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> 2019-06-14 06:48:47 +08:00			`}`