Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add components

Browse Source
This commit is contained in:
Laux Dev
2026-03-02 15:33:21 +08:00
parent f16b78834c
commit 1023990822
20 changed files with 1234 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css Normal file
View File

@@ -0,0 +1,288 @@
.container {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background-color: #00000037;
}
.modal {
display: flex;
width: 593px;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
border-radius: 8px;
background: #21232f;
animation-name: modalAnimation;
animation-duration: 200ms;
}
@keyframes modalAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.header > svg {
cursor: pointer;
}
.header > p {
color: #d2d3e1;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.24px;
}
.contentContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.contentContainer > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
align-self: stretch;
}
.contentHeader {
display: flex;
padding-top: 8px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.contentHeader > div {
display: flex;
padding: 0 6px 6px 6px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.16px;
cursor: pointer;
}
.selectActive {
border-bottom: 2px solid #8187ff;
}
.fieldContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.fields {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.horizontalInput {
display: flex;
align-items: center;
align-self: stretch;
}
.horizontalInput > div {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex: 1 0 0;
}
.horizontalInput > div > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.verticalInput {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
align-self: stretch;
}
.verticalInput > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.verticalInput p {
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput textarea {
display: flex;
height: 120px;
padding: 12px;
width: 100%;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-family: inter;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput textarea {
display: flex;
height: 120px;
padding: 12px;
width: 100%;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-family: inter;
font-style: normal;
font-weight: 400;
outline: none;
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput textarea:focus {
border-radius: 6px;
border: 1px solid #959aff;
background: rgba(75, 79, 109, 0.25);
}
.verticalInput textarea:focus::placeholder {
color: #4b4f6d;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.radioButtonsContainer {
display: flex;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.radioButtonsContainer > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.radioButtonsContainer p {
display: flex;
align-items: flex-start;
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.radioButtonsContainer > div > div {
display: flex;
align-items: flex-start;
gap: 24px;
}
.radioButtonsContainer > div > div > div {
display: flex;
padding: 12px 4px;
align-items: center;
gap: 12px;
}
.radio {
display: flex;
align-items: center;
cursor: pointer;
gap: 8px;
}
.radio input {
display: none;
}
.radio .custom {
width: 20px;
height: 20px;
border: 2px solid #4b4f6d;
border-radius: 50%;
position: relative;
background-color: #fff;
}
.radio .custom::after {
content: "";
width: 10px;
height: 10px;
background: #5980f1;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.radio input:checked + .custom::after {
transform: translate(-50%, -50%) scale(1);
}
.addButtonContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
align-self: stretch;
}