fleet/frontend/pages/software/SoftwareDetailsPage/_styles.scss

98 lines
1.7 KiB
SCSS

.software-details-page {
background-color: $ui-off-white;
&__wrapper {
display: grid;
gap: $pad-medium;
}
.header {
flex: 100%;
display: flex;
flex-direction: column;
}
.section {
flex: 100%;
display: flex;
flex-direction: column;
background-color: $core-white;
border-radius: 16px;
border: 1px solid $ui-fleet-blue-15;
padding: $pad-xxlarge;
box-shadow: 0px 3px 0px rgba(226, 228, 234, 0.4);
&__header {
font-size: $medium;
font-weight: $bold;
margin: 0 0 $pad-large 0;
}
.info-flex {
display: flex;
flex-wrap: wrap;
.info-flex__item--title {
margin-bottom: 2.5rem;
}
&__item {
font-size: $x-small;
display: flex;
flex-direction: column;
white-space: nowrap;
&--title {
margin-right: $pad-xxlarge;
.info-flex__data {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
&__header {
color: $core-fleet-black;
font-weight: $bold;
}
}
}
.title,
.info {
flex-direction: row;
justify-content: space-between;
margin: 0;
padding-bottom: 0;
}
.name-container {
display: flex;
align-items: center;
}
.name {
font-size: $large;
font-weight: $bold;
}
&__back-link {
display: flex;
align-items: center;
padding-bottom: $pad-small;
height: 16px;
font-size: $x-small;
color: $core-vibrant-blue;
font-weight: $bold;
text-decoration: none;
}
#back-chevron {
width: 16px;
height: 16px;
margin-right: $pad-small;
}
}