LogalDeveloper/owncast
0
Fork 0
Code Activity

initial temp fixes on form fields

Browse Source
This commit is contained in:
gingervitis
2021-01-31 10:13:35 -08:00
parent add2f1329b
commit 037e8f25a7
7 changed files with 196 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/styles/ant-overrides.scss
View File

@@ -28,14 +28,14 @@
// INPUT
.ant-input-affix-wrapper {
border-radius: 5px;
background-color: rgba(255,255,255,.1);
// border-radius: 5px;
// background-color: rgba(255,255,255,.1);
textarea {
border-radius: 5px;
// border-radius: 5px;
}
input {
background-color: transparent;
// background-color: transparent;
}
}

85
web/styles/config-formfields.scss Normal file
View File

@@ -0,0 +1,85 @@
.textfield-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
.label-side {
padding-right: 1em;
text-align: right;
width: 12rem;
margin: .2em 0;
}
.textfield-label {
font-weight: 400;
font-size: .85rem;
color: var(--owncast-purple);
}
.required-label {
color: var(--ant-error);
}
.input-side {
max-width: 500px;
width: 100%;
}
.input-group,
.status-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.status-container {
margin: 0 .25em;
min-height: 1.5em;
font-size: .75em;
.status-icon {
display: inline-block;
margin-right: .5em;
}
}
.tip {
margin: .5em .5em;
font-size: .75rem;
color: rgba(255,255,255,.75);
}
@media (max-width: 800px) {
// flex-direction: column;
flex-wrap: wrap;
.label-side {
text-align: left;
}
}
}
.status-message {
// margin: 1rem 0;
// min-height: 1.4em;
// font-size: .75rem;
&.success {
color: var(--ant-success);
}
&.error {
color: var(--ant-error);
}
}
.textfield-with-submit-container {
display: flex;
flex-direction: row;
.update-button-container {
display: inline-block;
margin: .25em;
}
}

108
web/styles/config.scss
View File

@@ -27,72 +27,62 @@
}
.status-message {
margin: 1rem 0;
min-height: 1.4em;
font-size: .75rem;
&.success {
color: var(--ant-success);
}
&.error {
color: var(--ant-error);
}
}
// form-textfield
// form-textfield
.textfield-container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
position: relative;
width: 314px;
// .textfield-container {
// display: flex;
// flex-direction: column;
// align-items: flex-start;
// justify-content: flex-end;
// position: relative;
// width: 314px;
// &.type-numeric {
// .ant-form-item-control {
// flex-direction: row;
// .ant-form-item-control-input {
// margin-right: .75rem;
// }
// }
// }
}
.textfield {
display: flex;
flex-direction: row;
align-items: flex-start;
// // &.type-numeric {
// // .ant-form-item-control {
// // flex-direction: row;
// // .ant-form-item-control-input {
// // margin-right: .75rem;
// // }
// // }
// // }
// }
// .textfield {
// display: flex;
// flex-direction: row;
// align-items: flex-start;
.field {
width: 18rem;
// .field {
// width: 18rem;
&.ant-input-number {
width: 8em;
}
// &.ant-input-number {
// width: 8em;
// }
}
.info-tip {
margin-right: .75rem;
}
.ant-form-item {
margin-bottom: 16px;
&.ant-form-item-with-help {
margin-bottom: 16px;
}
}
.ant-form-item-label label {
font-weight: bold;
color: var(--owncast-purple);
}
.ant-form-item-explain {
width: 70%;
}
}
.submit-button {
position: absolute;
right: 0;
bottom: .5em;
}
// }
// .info-tip {
// margin-right: .75rem;
// }
// .ant-form-item {
// margin-bottom: 16px;
// &.ant-form-item-with-help {
// margin-bottom: 16px;
// }
// }
// .ant-form-item-label label {
// font-weight: bold;
// color: var(--owncast-purple);
// }
// .ant-form-item-explain {
// width: 70%;
// }
// }
// .submit-button {
// position: absolute;
// right: 0;
// bottom: .5em;
// }
// .ant-form-horizontal {
// .textfield-container.type-numeric {
// width: auto;