Skip to content

Commit

Permalink
ref: ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@githubering182
githubering182 committed Mar 27, 2024
1 parent e041e6a commit d040730
Show file tree
Hide file tree
Showing 14 changed files with 281 additions and 244 deletions.
3 changes: 2 additions & 1 deletion frontend-app/src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ a {
}

input[type="checkbox"] {
background-color: white;
appearance: none;
width: 22px;
height: 22px;
Expand Down Expand Up @@ -86,7 +87,7 @@ input[type="checkbox"]:checked::after {
.iss__pageContent {
max-width: var(--maxWidth);
width: 100%;
padding: 40px 20px;
padding: 20px;
display: flex;
flex-direction: column;
}
Expand Down
23 changes: 14 additions & 9 deletions frontend-app/src/components/FilesDownload/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
}

.iss__filesDownload__form > input {
border-radius: 4px;
border: 1px solid var(--issBrand);
padding: 4px 8px;
outline: none;
Expand All @@ -43,13 +44,16 @@
}

.iss__filesDownload__selector {
border-radius: 4px;
border: 1px solid var(--issBrand);
position: relative;
place-self: center;
width: 100%;
}

.iss__filesDownload__selected {
background-color: white;
border-radius: 4px;
width: 100%;
height: 100%;
padding: 4px 8px;
Expand All @@ -69,14 +73,13 @@
max-height: 0;
position: absolute;
width: 100%;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
left: 0;
bottom: 0;
transform: translateY(100%);
background-color: white;
border: 1px solid var(--issBrand);
box-shadow: 1px 1px 2px var(--issBrand);
z-index: 1;
}

Expand Down Expand Up @@ -108,21 +111,21 @@
}

.iss__filesDownload__button {
border-radius: 4px;
background-color: white;
max-width: 120px;
width: 100%;
background: none;
border: 1px solid var(--issBrand);
color: var(--issBrand);
cursor: pointer;
padding: 4px 8px;
text-decoration: none;
display: flex;
place-content: center;
transition:
color 0.3s ease,
background-color 0.3s ease;
transition: background-color 0.3s ease;
}
.iss__filesDownload__button > span {
transition: color 0.3s ease;
}

.block--button {
pointer-events: none;
}
Expand All @@ -144,6 +147,8 @@
@media (hover: hover) {
.iss__filesDownload__button:hover {
background-color: var(--issBrand);
}
.iss__filesDownload__button:hover > span {
color: white;
}

Expand Down
1 change: 1 addition & 0 deletions frontend-app/src/components/FilesValidate/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
place-content: center;
}
.iss__validation {
min-height: 520px;
flex-grow: 1;
width: 100%;
display: flex;
Expand Down
244 changes: 129 additions & 115 deletions frontend-app/src/components/ProjectEdit/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,145 @@
.iss__projectEdit__form {
width: 100%;
border: none;
display: grid;
grid-template-columns: 35% 1px auto;
column-gap: 20px;
row-gap: 60px;
grid-template-areas:
"project_field form_border attribute_field"
". edit-button .";
background-color: white;
border-radius: 4px;
padding: 40px 20px;
width: 100%;
border: none;
display: grid;
grid-template-columns: 35% 1px auto;
column-gap: 20px;
row-gap: 60px;
grid-template-areas:
"project_field form_border attribute_field"
". edit-button .";
}
.iss__projectEdit__fieldset {
border: none;
display: flex;
gap: 20px;
margin-bottom: 40px;
border: none;
display: flex;
gap: 20px;
margin-bottom: 40px;
}
.iss__projectEdit__form__set {
border: none;
display: flex;
flex-direction: column;
place-items: center;
gap: 20px;
border: none;
display: flex;
flex-direction: column;
place-items: center;
gap: 20px;
}
.iss__projectEdit__form__set:nth-child(1) {
grid-area: project_field;
grid-area: project_field;
}
.iss__projectEdit__form__border {
grid-area: form_border;
background-color: var(--issBrand);
margin: -20px 0;
grid-area: form_border;
background-color: var(--issBrand);
margin: -20px 0;
}
.iss__projectEdit__form__input {
display: flex;
flex-direction: column;
width: 100%;
gap: 8px;
display: flex;
flex-direction: column;
width: 100%;
gap: 8px;
}
.iss__projectEdit__form__input textarea, .iss__projectEdit__form__input input {
border: 1px solid var(--issBrand);
padding: 12px;
.iss__projectEdit__form__input textarea,
.iss__projectEdit__form__input input {
border-radius: 4px;
border: 1px solid var(--issBrand);
padding: 12px;
}
.iss__projectEdit__form__input textarea {
resize: vertical;
min-height: 200px;
resize: vertical;
min-height: 200px;
}
.iss__projectEdit__form__submitButton {
grid-area: edit-button;
place-self: center;
width: fit-content;
background: none;
border: 1px solid var(--issBrand);
cursor: pointer;
padding: 12px 20px;
transition: background-color 0.3s ease;
}
.iss__projectEdit__form__submitButton>span {
text-transform: uppercase;
white-space: nowrap;
transition: color 0.3s ease;
}
.iss__projectEdit__visibilityLink, .iss__projectEdit__deleteButton {
padding: 4px 8px;
font-size: 14px;
cursor: pointer;
user-select: none;
outline: none;
width: fit-content;
height: fit-content;
transition: background-color 0.3s ease, color 0.3s ease;
border-radius: 4px;
grid-area: edit-button;
place-self: center;
width: fit-content;
background: none;
border: 1px solid var(--issBrand);
cursor: pointer;
padding: 12px 20px;
transition: background-color 0.3s ease;
}
.iss__projectEdit__form__submitButton > span {
text-transform: uppercase;
white-space: nowrap;
transition: color 0.3s ease;
}
.iss__projectEdit__visibilityLink,
.iss__projectEdit__deleteButton {
border-radius: 4px;
padding: 4px 8px;
font-size: 14px;
cursor: pointer;
user-select: none;
outline: none;
width: fit-content;
height: fit-content;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.iss__projectEdit__visibilityLink {
flex-shrink: 0;
background-color: var(--issLightBrand);
border: 1px solid var(--issBrand);
color: var(--issBrand);
text-decoration: none;
flex-shrink: 0;
background-color: var(--issLightBrand);
border: 1px solid var(--issBrand);
color: var(--issBrand);
text-decoration: none;
}
.iss__projectEdit__deleteButton {
background-color: rgb(255, 98, 98, 0.2);
border: 1px solid var(--issRed);
color: var(--issRed);
background-color: rgb(255, 98, 98, 0.2);
border: 1px solid var(--issRed);
color: var(--issRed);
}
.iss__projectEdit__deleteProceed {
width: 100%;
display: flex;
gap: 12px;
place-items: center;
flex-wrap: wrap;
width: 100%;
display: flex;
gap: 12px;
place-items: center;
flex-wrap: wrap;
}
.iss__projectEdit__deleteProceed>span {
width: 100%;
.iss__projectEdit__deleteProceed > span {
width: 100%;
}
.iss__projectEdit__delete--yes,
.iss__projectEdit__delete--no {
padding: 4px 8px;
font-size: 14px;
cursor: pointer;
user-select: none;
outline: none;
transition: background-color 0.3s ease, color 0.3s ease;
border-radius: 4px;
padding: 4px 8px;
font-size: 14px;
cursor: pointer;
user-select: none;
outline: none;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
.iss__projectEdit__delete--yes {
background-color: rgb(255, 98, 98, 0.2);
border: 1px solid var(--issRed);
color: var(--issRed);
background-color: rgb(255, 98, 98, 0.2);
border: 1px solid var(--issRed);
color: var(--issRed);
}
.iss__projectEdit__delete--no {
background-color: unset;
border: 1px solid var(--issBrand);
background-color: white;
border: 1px solid var(--issBrand);
}
.iss__projectEdit__attributes {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.iss__projectEdit__attributeSeparator {
max-width: 557px;
width: 100%;
height: 1px;
background-color: var(--issBrand);
margin-bottom: 20px;
max-width: 557px;
width: 100%;
height: 1px;
background-color: var(--issBrand);
margin-bottom: 20px;
}
.iss__projectEdit__delete__input {
padding: 4px 8px;
max-width: 240px;
border: 1px solid var(--issBrand);
overflow-x: scroll;
outline: none;
border-radius: 4px;
padding: 4px 8px;
max-width: 240px;
border: 1px solid var(--issBrand);
overflow-x: scroll;
outline: none;
}
.iss__projectEdit__preview::before {
content: "Preview Description:";
Expand All @@ -137,27 +151,27 @@
width: 100%;
font-size: 14px;
}
@media (hover:hover) {
.iss__projectEdit__delete--yes:hover {
background-color: var(--issRed);
color: white;
}
.iss__projectEdit__delete--no:hover {
background-color: var(--issBrand);
color: white;
}
.iss__projectEdit__visibilityLink:hover {
background-color: var(--issBrand);
color: white;
}
.iss__projectEdit__deleteButton:hover {
background-color: var(--issRed);
color: white;
}
.iss__projectEdit__form__submitButton:hover {
background-color: var(--issBrand);
}
.iss__projectEdit__form__submitButton:hover>span {
color: white;
}
@media (hover: hover) {
.iss__projectEdit__delete--yes:hover {
background-color: var(--issRed);
color: white;
}
.iss__projectEdit__delete--no:hover {
background-color: var(--issBrand);
color: white;
}
.iss__projectEdit__visibilityLink:hover {
background-color: var(--issBrand);
color: white;
}
.iss__projectEdit__deleteButton:hover {
background-color: var(--issRed);
color: white;
}
.iss__projectEdit__form__submitButton:hover {
background-color: var(--issBrand);
}
.iss__projectEdit__form__submitButton:hover > span {
color: white;
}
}
Loading

0 comments on commit d040730

Please sign in to comment.