Cin7 was upset that the design work wasn't complete yet so I downloaded and started chipping away at some of the items that are remaining. Still working on Anthology's CSV mapping functionality. Modified their master dictionary since the CSV stuff isn't ready.

This commit is contained in:
Norm Rasmussen
2024-01-19 19:47:00 -05:00
parent 760bf3925a
commit 620797240d
113 changed files with 3359 additions and 18 deletions

View File

@ -0,0 +1,375 @@
/*
Put your custom overlay styles in here
You can use your northpass color palette in this file
{{ color_palette.button_font_color }}
{{ color_palette.button_color }}
{{ color_palette.button_hover_color }}
{{ color_palette.header_font_color }}
{{ color_palette.header_font_hover_color }}
{{ color_palette.header_color }}
*/
body {
font-family: "Inter", sans-serif;
background: #fff;
}
.lora {
font-family: 'Lora';
}
.hero-text {
font-family: 'Lora';
}
.np-header-desktop-nav-link {
font-weight: 700;
}
.header-search-input {
border: 3px solid #002e6e;
border-radius: 8px;
max-width: 150px;
}
.note-desc {
font-size: 1vw
}
.hero-text {
font-size: 3.5rem;
font-weight: 400;
}
.hero-homepage {
background: url('https://s3.amazonaws.com/static.northpass.com/Cin7/Hero+banner.png');
background-position: center;
background-size: cover;
padding: 5%;
color: #002f6f;
}
.hero-subheading {
margin-top: 2%;
}
.np-sub-navigation-content-item-active {
background: #002f6f !important;
}
.np-sub-navigation-content-item-link {
display: flex;
justify-content: center;
background: #05cbbf;
color: #fff;
padding: 15px;
border-radius: 8px;
font-weight: 700;
}
.sub-navigation {
background: #fff;
padding: 1rem 0;
}
.np-sub-navigation-content-item {
margin: 0 15px;
}
.info-icon {
width: 125px;
object-fit: cover;
}
.card {
border-radius: 25px;
background: #fff;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.learning-path-card-image {
width: 100%;
border-radius: 20px 20px 0 0;
}
.card-content-title {
color: #002f6f;
font-size: 1.25rem;
margin: 0;
}
.course-time {
margin-top: 15px;
color: #000000b5;
display: flex;
align-items: center;
gap: 10px
}
.course-desc {
margin-top: 15px;
color: #002f6f;
}
.lp-link {
text-decoration: none;
}
.slick-track {
margin-left: 0 !important;
margin-right: 0 !important;
}
.section-lp {
background: #dde9fe;
}
.heading {
font-size: 2.5rem;
color: #002f6f;
padding: 2rem 0;
font-weight: 400;
}
.section {
padding-bottom: 3rem;
}
.section-featured {
background: #fff;
}
.np-top-cta {
background: #fff;
border: 3px solid #002e6e;
border-radius: 20px;
}
.lp-progress-text {
font-weight: 700;
font-size: 1.5rem;
}
.lp-button {
background: #05cbbf;
color: #fff;
text-decoration: none;
font-weight: 700;
padding: 10px 25px;
display: flex;
border-radius: 8px;
white-space: nowrap;
}
.lp-course-card {
margin: 15px 0;
background: #fff;
border: 3px solid #002e6e;
border-radius: 20px;
}
.learning-path-outline-content {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
}
.lp-desktop-wrapper {
padding: 15px 25px;
background: #fff;
}
.lp-progress-and-cta-wrapper {
margin-top: 20px;
}
.card {
margin: 10px;
}
.right-arrow {
position: absolute;
bottom: -30px;
padding-left: 50px;
cursor: pointer;
right: 10px;
}
.left-arrow {
position: absolute;
bottom: -30px;
z-index: 1;
padding-left: 10px;
cursor: pointer;
right: 40px;
}
.heading-dashboard {
text-align: left;
font-size: 2.5rem;
color: #002f6f;
padding: 2rem 0;
font-weight: 700;
margin-left: 2rem;
}
.my-learning-paths {
background: #fff;
}
.my-courses {
background: #dde9fe;
}
.my-events {
background: #4d98ff;
}
.events {
background: #fff;
}
.card-container {
text-decoration: none;
}
.events-container {
margin: 0 20px;
}
.catalog-button {
display: flex;
justify-content: center;
background: #002f6f;
color: #fff;
padding: 15px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
}
.catalog-button-container {
display: flex;
justify-content: flex-end;
}
.hero-catalog-category {
background: #f2ede8;
padding: 5% 20px;
}
.hero-text-catalog-category {
color: #002f6f;
font-size: 3.5rem;
font-weight: 700;
}
.card-learning-path-desktop {
border-radius: 40px;
}
.image-learning-path-desktop {
border-radius: 40px;
}
.category-wrapper {
}
.category-container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.category-link {
text-decoration: none;
font-size: 1.5rem;
font-weight: 500;
color: #002f6f;
background: #fff;
border: 3px solid;
border-radius: 20px;
padding: 2rem;
max-width: 1000px;
width: 100%;
margin: 10px 0;
}
.category-container {
margin: 20px 0;
}
.np-card-container {
border-radius: 25px;
box-shadow: none;
}
.np-learning-path-image {
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
}
.card-content {
background: #fff;
border-radius: 0 0 25px 25px;
padding: 1.5rem;
}
.catalog-btn {
background: #002f6f;
color: #fff;
padding: 15px 25px;
border-radius: 25px;
text-decoration: none;
font-weight: 700;
}
.button-wrapper {
display: flex;
justify-content: center;
}
.info {
display: flex;
align-items: center;
max-width: 350px;
}
.info-wrapper {
display: flex;
gap: 20px;
justify-content: space-between;
flex-wrap: wrap;
}
.info-heading {
color: #002f6f;
font-weight: 600;
font-size: 1.25rem;
}
.info-desc {
color: #002f6f;
font-size: 1rem;
margin-top: 5px;
}
.np-footer-logo-image {
filter: none;
opacity: 1;
}
.np-footer {
background: #0f3a76;
}
.np-footer-navigation-link {
color: #fff;
}
.np-footer-navigation-list {
flex-direction: column;
gap: 10px;
}
.np-footer-navigation {
min-height: 52px;
display: flex;
width: 100%;
justify-content: end;
}
.np-learning-path-outline-inactive-item {
border: 3px solid #002e6e;
}
.np-top-image {
max-width: 500px;
border-radius: 25px;
}
.content-lp-card-padding {
padding: 25px;
}
.np-card-heading, .np-learning-path-outline-name {
color: #002f6f;
}
.np-card-text {
color: #002f6f;
}
.np-learning-paths {
background: #dde9fe;
}
.np-learning-path {
border: 3px solid #002e6e;
border-radius: 25px;
}
.lp-header-container {
background: #f2ede7;
}
.lp-heading {
font-size: 2.5rem;
color: #002f6f;
padding: 3rem 2rem;
font-weight: 700;
}
.category-card {
text-decoration: none;
}
.page-content {
margin: 20px;
}