src/sass/_agendaItemHistory.scss
.agenda-item-history-container {
.aih-header-container {
color: $color-black;
font-family: 'Merriweather';
font-size: 1em;
margin-left: 15px;
padding: 20px 0 0 20px;
a {
text-decoration: none;
}
.fa {
padding-right: 10px;
}
.aih-title {
border-bottom: 2px solid $color-black;
color: $color-black;
}
.aih-title-dash {
padding-left: 5px;
}
}
.agenda-controls-container {
justify-content: flex-end;
.agenda-results-controls {
align-items: center;
display: flex;
justify-content: flex-end;
margin-top: 10px;
padding: 0 35px;
}
}
.button-back-link {
margin: 15px 0 0 0;
}
.create-ai-link {
color: inherit;
}
.arrow {
color: $bg-gray-dark-2;
font-size: small;
span {
margin-left: 25px;
}
}
.ai-history-cards-container {
display: flex;
flex-wrap: wrap;
.tm-spinner-agenda-item-history {
left: 50%;
position: absolute;
top: 300px;
img {
width: 7em;
}
}
.usa-alert {
width: 100%;
}
.ai-history-card {
background-color: $color-white;
border-radius: 10px;
box-shadow: rgb(0 0 0 / 25%) -5px 5px 15px 1px;
display: flex;
flex-direction: column;
height: 250px;
margin: 25px 15px;
padding: 35px 15px 15px 15px;
position: relative;
width: 350px;
.ai-history-card-title {
display: flex;
font-family: 'Roboto';
font-size: 1.6rem;
font-weight: bold;
justify-content: space-between;
margin: 20px 0 0 0;
.title-arrow {
align-items: center;
display: flex;
.arrow-tail {
background-color: $color-black;
height: 4px;
margin: 3px;
width: 10px;
}
.arrow-right {
border-bottom: 6px solid transparent;
border-left: 8px solid $color-black;
border-top: 6px solid transparent;
height: 0;
margin: -3px;
width: 0;
}
}
}
.ai-history-card-date {
position: absolute;
bottom: 10px;
right: 10px;
font-size: small;
}
.ai-history-card-footer {
bottom: 5px;
position: absolute;
right: 5px;
text-align: right;
span {
color: $bg-blue-dark-0;
font-size: 18px;
}
span:hover {
color: $tertiary-cool-blue;
font-size: 20px;
}
}
}
@media screen and (max-width: 1400px) {
.ai-history-card {
margin: 10px;
}
}
.first-card {
border: 1px dashed $bg-blue-dark-0;
.plusIcon {
color: $bg-blue-dark-0;
font-size: 100px;
margin: auto;
}
.plusIcon:hover {
color: $tertiary-cool-blue;
font-size: 110px;
}
}
}
@media screen and (max-width: 1400px) {
.profile-content-inner-container {
padding: 20px 0;
.button-back-link, .hello-greeting {
margin-left: 35px;
}
}
}
}