mirror of https://github.com/vector-im/riot-web
Organize style rules of AccessSecretStorageDialog to avoid visual bugs (#8395)
* .mx_AccessSecretStorageDialog Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_AccessSecretStorageDialog_primaryContainer Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_AccessSecretStorageDialog_titleWithIcon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Adopt BEM style Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>pull/28217/head
Suguru Hirahara
GitHub
parent
78ba5e35a3
commit
1b426ce0c8
|
|
@ -14,126 +14,132 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_AccessSecretStorageDialog_titleWithIcon::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-inline-end: $spacing-8;
|
||||
position: relative;
|
||||
top: 5px; // TODO: spacing variable
|
||||
background-color: $primary-content;
|
||||
}
|
||||
.mx_AccessSecretStorageDialog {
|
||||
.mx_AccessSecretStorageDialog_titleWithIcon {
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-inline-end: $spacing-8;
|
||||
position: relative;
|
||||
top: 5px; // TODO: spacing variable
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_resetBadge::before {
|
||||
// The image isn't capable of masking, so we use a background instead.
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
background-size: 24px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&.mx_AccessSecretStorageDialog_resetBadge::before {
|
||||
// The image isn't capable of masking, so we use a background instead.
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
background-size: 24px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_secureBackupTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
}
|
||||
&.mx_AccessSecretStorageDialog_secureBackupTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_securePhraseTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_keyStatus {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_passPhraseInput {
|
||||
width: 300px;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
|
||||
margin: $spacing-16;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
margin-inline-end: 5px; // TODO: spacing variable
|
||||
&.mx_AccessSecretStorageDialog_securePhraseTitle::before {
|
||||
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
|
||||
color: $accent;
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
.mx_AccessSecretStorageDialog_primaryContainer {
|
||||
.mx_AccessSecretStorageDialog_passPhraseInput {
|
||||
width: 300px;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
|
||||
color: $alert;
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
background-color: $alert;
|
||||
}
|
||||
}
|
||||
.mx_AccessSecretStorageDialog_keyStatus {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
|
||||
display: none;
|
||||
}
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_AccessSecretStorageDialog_primaryContainer {
|
||||
.mx_Dialog_buttons {
|
||||
$spacingStart: $spacing-24; // 16px icon + 8px padding
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
text-align: initial;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 14px; // TODO: spacing variable
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
|
||||
margin: $spacing-16;
|
||||
}
|
||||
|
||||
.mx_Dialog_buttons_additive {
|
||||
float: none;
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_reset {
|
||||
position: relative;
|
||||
padding-inline-start: $spacingStart;
|
||||
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 20px;
|
||||
margin-inline-end: 5px; // TODO: spacing variable
|
||||
}
|
||||
|
||||
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
|
||||
color: $accent;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 0;
|
||||
top: 2px; // alignment
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
background-size: contain;
|
||||
mask-image: url('$(res)/img/feather-customised/check.svg');
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_reset_link {
|
||||
color: $alert;
|
||||
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
|
||||
color: $alert;
|
||||
|
||||
&::before {
|
||||
mask-image: url('$(res)/img/feather-customised/x.svg');
|
||||
background-color: $alert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dialog_buttons_row {
|
||||
gap: $spacing-16; // TODO: needs normalization
|
||||
padding-inline-start: $spacingStart;
|
||||
.mx_Dialog_buttons {
|
||||
$spacingStart: $spacing-24; // 16px icon + 8px padding
|
||||
|
||||
text-align: initial;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 14px; // TODO: spacing variable
|
||||
|
||||
.mx_Dialog_buttons_additive {
|
||||
float: none;
|
||||
|
||||
.mx_AccessSecretStorageDialog_reset {
|
||||
position: relative;
|
||||
padding-inline-start: $spacingStart;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 0;
|
||||
top: 2px; // alignment
|
||||
background-image: url("$(res)/img/element-icons/warning-badge.svg");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.mx_AccessSecretStorageDialog_reset_link {
|
||||
color: $alert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dialog_buttons_row {
|
||||
gap: $spacing-16; // TODO: needs normalization
|
||||
padding-inline-start: $spacingStart;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -366,8 +366,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
|||
|
||||
const feedbackClasses = classNames({
|
||||
'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true,
|
||||
'mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid': this.state.recoveryKeyCorrect === true,
|
||||
'mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid': this.state.recoveryKeyCorrect === false,
|
||||
'mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid': this.state.recoveryKeyCorrect === true,
|
||||
'mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid': this.state.recoveryKeyCorrect === false,
|
||||
});
|
||||
const recoveryKeyFeedback = <div className={feedbackClasses}>
|
||||
{ this.getKeyValidationText() }
|
||||
|
|
|
|||
Loading…
Reference in New Issue