Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/policy kb details screen #1024

Merged
merged 4 commits into from
Mar 31, 2023
Merged

Feat/policy kb details screen #1024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46510f9
feat(policy-knowledgebase-details):
astra1 Mar 29, 2023
67f586e
feat(policy-knowledgebase-details):
astra1 Mar 30, 2023
82de7e2
feat(policy-knowledgebase-details):
astra1 Mar 30, 2023
30e0166
feat(poliycy-knowledgebase-details): temporary hided parameters
astra1 Mar 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
257 changes: 112 additions & 145 deletions ...odules/compliance/policy-knowledgebase-details/policy-knowledgebase-details.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,217 +3,184 @@
*
* Licensed under the Apache License, Version 2.0 (the "License"); You may not use
* this file except in compliance with the License. A copy of the License is located at
*
*
* http://www.apache.org/licenses/LICENSE-2.0
*
*
* or in the "license" file accompanying this file. This file is distributed on
* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, express or
* implied. See the License for the specific language governing permissions and
* limitations under the License.
*/

.header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.header-text{
font: var(--text-headline-6);
color: var(--text-medium-emphasis);
}

.overview-wrapper{
display: flex;
width: 100%;
border-radius: 8px;
border: 1px solid var(--border-200);
border-right: none;
background-color: var(--background-white);
.header {
justify-content: space-between;
align-items: center;
}

.overview-tile{
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 0px 12px 24px;
.header-text {
min-height: 28px;
font: var(--text-headline-6);
color: var(--text-medium-emphasis);
}

.column{
width: 20%;
border-right: 1px solid var(--border-200);
.details-wrapper {
border: 1px solid var(--border-200);
border-radius: 8px;
background-color: var(--background-white);
}

.tile-header{
font: var(--text-body-2);
color: var(--text-medium-emphasis);
.details-header-text {
padding: 20px 0 20px 24px;
}

.tile-content{
font: var(--text-headline-5);
color: var(--text-high-emphasis);
text-overflow: ellipsis;
overflow: hidden;
.details-footer-text {
padding: 20px 0 20px 24px;
font: var(--text-body-2);
color: var(--primary-500);
gap: 4px;
align-items: center;
}

.header ::ng-deep mat-form-field{
background: var(--primary-400) ;
border: 1px solid var(--primary-400);
.right-arrow-icon {
width: 12px;
height: 12px;
}

.policy-knowledgebase-wrapper ::ng-deep .mat-select-arrow{
background-image: url("../../../../../assets/icons/white-arrow.svg") !important;
.policy-knowledgebase-wrapper {
overflow: scroll;
height: 100%;
flex-direction: column;
gap: 20px;
padding: 28px;
}

.details-wrapper{
border: 1px solid var(--border-200);
border-radius: 8px;
background-color: white;
img {
height: 20px;
width: 20px;
}

.details-header-text{
padding: 20px 0px 20px 24px;
font: var(--text-body-2);
color: var(--text-high-emphasis);
.details-content-wrapper {
padding: 24px;
flex-direction: column;
height: calc(100% - 117px);
border-bottom: 2px solid var(--border-100);
border-top: 2px solid var(--border-100);
gap: 32px;
}

.policy-knowledgebase-wrapper ::ng-deep .mat-form-field-label{
font: var(--text-body-2) !important;
color: white !important;
padding: 0px 12px !important ;
display: flex;
align-items: center !important;
.policy-parameters-wrapper,
.description-wrapper {
flex-direction: column;
gap: 12px;
}

.policy-knowledgebase-wrapper ::ng-deep .mat-form-field-infix{
width: 112px !important;
.attributes-wrapper {
gap: 20px;
}

.policy-knowledgebase-wrapper ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-appearance-legacy{
padding: 0px !important;
.policy-parameters-items {
gap: 6px 20px;
}

.color-txt{
color: var(--primary-400) !important;
.policy-parameters-value {
word-break: break-all;
}

.details-footer-text{
padding: 20px 0px 20px 24px;
font: var(--text-body-2);
color: var(--primary-500);
display: flex;
gap: 4px;
align-items: center;
.attribute-wrapper,
.policy-parameters-item {
flex-direction: column;
gap: 4px;
}

#right-arrow-icon{
width: 12px;
height: 12px;
.attribute-wrapper {
width: 33%;
}

.policy-knowledgebase-wrapper {
overflow: scroll;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
padding: 28px;
.attribute-header,
.desc-header,
.policy-parameters-header,
.policy-parameters-key {
font: var(--text-body-2);
color: var(--text-low-emphasis);
}

img{
height: 20px;
width: 20px;
}

.details-content-wrapper{
padding: 24px;
display: flex;
flex-direction: column;
height: calc(100% - 117px);
border-bottom: 2px solid var(--border-100);
border-top: 2px solid var(--border-100);
gap: 32px;
.attribute-value,
.details-header-text,
.policy-parameters-value {
font: var(--text-body-2);
color: var(--text-high-emphasis);
}

.tile-content-wrapper{
display: flex;
align-items: center;
gap: 8px;
.attribute-value {
gap: 6px;
}

.description-wrapper{
display: flex;
flex-direction: column;
gap: 12px;
.desc {
font: var(--text-body-1);
color: var(--text-high-emphasis);
}

.attributes-wrapper{
display: flex;
flex-direction: column;
gap: 20px;
.table-wrapper {
height: 300px;
}

.attribute-header{
font: var(--text-body-2);
color: var(--text-low-emphasis);
.dialog-body-header {
font: var(--text-headline-6);
color: var(--text-high-emphasis);
}

.attribute-value{
font: var(--text-body-2);
color: var(--text-high-emphasis);
.dialog-body-content {
font: var(--text-body-2);
color: var(--text-medium-emphasis);
}

.desc-header{
font: var(--text-body-2);
color: var(--text-low-emphasis);
.dialog-body {
flex-direction: column;
gap: 4px;
}

.desc{
font: var(--text-body-1);
color: var(--text-high-emphasis);
}
/* TODO: cursed ng-deep usage */

.row{
display: flex;
width: 100%;
.policy-knowledgebase-wrapper ::ng-deep .mat-form-field-label-wrapper {
top: -13px !important;
}

.attribute-wrapper{
display: flex;
flex-direction: column;
width: 33%;
.policy-knowledgebase-wrapper ::ng-deep .mat-form-field-label {
font: var(--text-body-2) !important;
color: white !important;
padding: 0 12px !important ;
display: flex;
align-items: center !important;
}

.table-wrapper{
height: 300px;
.header ::ng-deep mat-form-field {
background: var(--primary-400);
border: 1px solid var(--primary-400);
}

.policy-knowledgebase-wrapper ::ng-deep .mat-form-field-label-wrapper{
top: -13px !important;
.policy-knowledgebase-wrapper ::ng-deep .mat-select-arrow {
background-image: url('../../../../../assets/icons/white-arrow.svg') !important;
}

.dialog-body-header{
font: var(--text-headline-6);
color: var(--text-high-emphasis);
.policy-knowledgebase-wrapper ::ng-deep .mat-form-field-infix {
width: 112px !important;
}

.dialog-body-content{
font: var(--text-body-2);
color: var(--text-medium-emphasis);
.policy-knowledgebase-wrapper
::ng-deep
.mat-form-field-appearance-legacy
.mat-form-field-appearance-legacy {
padding: 0 !important;
}

.dialog-body{
display: flex;
flex-direction: column;
gap: 4px;
.policy-knowledgebase-wrapper
::ng-deep
.mat-form-field-can-float.mat-form-field-should-float
.mat-form-field-label {
display: none !important;
}

.policy-knowledgebase-wrapper ::ng-deep .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{
display: none !important;
.policy-knowledgebase-wrapper ::ng-deep .mat-select-value {
color: white !important;
padding: 0 4px !important;
}

.policy-knowledgebase-wrapper ::ng-deep .mat-select-value{
color: white !important;
padding: 0 4px !important;
}
Loading