SPACEBROWSER_INTERFACE/interface_base/master_styles/COMPONET SCSS PROFILES/ProfileDisplayName.scss
2025-08-07 20:28:59 -04:00

169 lines
3.6 KiB
SCSS

@import '../../../../styles/abstracts/variables';
.profile-display-name {
width: 100%;
padding: 4px;
justify-content: center;
border: 1px solid #e6e6e6;
border-radius: 8px;
margin-top: 20px;
&__content-wrapper {
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.error-message {
color: red;
font-size: 12px;
margin-top: 8px;
}
.ant-form-item {
margin-bottom: 0;
}
.ant-input.invalid {
border-color: red;
}
.overlay {
width: 100%;
height: 100%;
opacity: 0.6;
position: absolute;
background: white;
z-index: 3;
top: 0;
left: 0;
}
.border-box {
border-radius: 8px;
border: 1px solid #e6e6e6;
}
.border-box.active {
border-color: #58e5df;
}
.wrap-img {
width: 56px;
height: 56px;
background: linear-gradient(#e6e6e6, #e6e6e6);
border-radius: 8px;
margin-top: 8px;
padding: 1px !important;
cursor: pointer;
&.active {
background: linear-gradient(
270deg,
#17e391 21.47%,
#58e5df 77.04%,
#60e5e8 77.05%
);
padding: 2px !important;
}
&_item {
justify-content: center;
align-items: center;
display: flex;
width: 100%;
height: 100%;
border-radius: 6px;
background: white;
}
}
.ant-radio-group {
.ant-radio-button-wrapper {
margin-left: 0 !important;
width: 47px;
height: 32px;
padding: 0;
border: none !important;
background: $grey !important;
display: inline-flex;
justify-content: center;
align-items: center;
font-weight: $medium;
font-size: $medium1;
&.ant-radio-button-wrapper-checked {
color: $white;
}
.ant-radio-button {
display: flex;
justify-content: center;
align-items: center;
}
&:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 0;
background: $grey !important;
.ant-radio-button-checked {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background-color: $red;
}
}
&:last-child {
border-top-left-radius: 0 !important;
border-top-right-radius: 8px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 8px !important;
.ant-radio-button-checked {
border-top-right-radius: 8px !important;
border-bottom-right-radius: 8px !important;
background-color: $success;
}
}
}
}
input,
textarea {
height: 48px;
padding-left: 16px;
padding-right: 16px;
font-weight: $semi-bold;
font-size: $medium1;
&::placeholder {
color: rgba($text, 0.5);
font-weight: $regular;
}
}
&__content {
padding: 20px;
border-radius: 8px;
border: 1px solid $grey2;
&--item {
&.active {
background:
linear-gradient($white, $white) padding-box,
linear-gradient(to left, #17e391, #58e5df, #60e5e8) border-box;
border: 2px solid transparent;
display: inline-block;
}
padding: 20px;
border: 2px solid $border2;
border-radius: 8px;
cursor: pointer;
}
.ant-input[disabled] {
color: rgba($dark, $alpha: 0.5);
background-color: $white;
cursor: not-allowed;
opacity: 1;
}
}
&__divider {
width: 1px;
height: 100%;
background: $grey2;
}
}