1943 lines
38 KiB
Plaintext
1943 lines
38 KiB
Plaintext
/*
|
|
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 }}
|
|
*/
|
|
|
|
/* FONT IMPORTS */
|
|
@font-face {
|
|
font-family: "EuclidFlex";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/euclid-flexb/EuclidFlexB-Light-WebM.ttf")
|
|
format("truetype");
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "EuclidFlex";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/euclid-flexb/EuclidFlexB-Regular-WebM.ttf")
|
|
format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "EuclidFlex";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/euclid-flexb/EuclidFlexB-RegularItalic-WebM.ttf")
|
|
format("truetype");
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "EuclidFlex";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/euclid-flexb/EuclidFlexB-Medium-WebM.ttf")
|
|
format("truetype");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "EuclidFlex";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/euclid-flexb/EuclidFlexB-Semibold-WebM.ttf")
|
|
format("truetype");
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "EuclidFlex";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/euclid-flexb/EuclidFlexB-Bold-WebM.ttf")
|
|
format("truetype");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* ------------ Northpass Style Overrides ------------ */
|
|
|
|
/* ------ Learner/Admin Mode Button ------ */
|
|
@media screen and ( max-width: 35.5rem ) {
|
|
body .Container-sc-1cu1r9y-3 {
|
|
position: unset;
|
|
}
|
|
}
|
|
|
|
/* ------ Text ------ */
|
|
body {
|
|
font-family: 'EuclidFlex', "Roboto", sans-serif;
|
|
line-height: 1.5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
color: #5a616b;
|
|
}
|
|
|
|
main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
margin: 0;
|
|
}
|
|
|
|
p + p {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
a {
|
|
color: #2574e1;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
color: #ba37d6;
|
|
}
|
|
a:active {
|
|
color: #9630ab;
|
|
}
|
|
.np-text-light {
|
|
color: #6e7580;
|
|
}
|
|
|
|
.np-text-title {
|
|
color: #5a616b;
|
|
}
|
|
.np-resource-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0;
|
|
text-align: left;
|
|
color:#333333;
|
|
}
|
|
.np-resource-subtitle,
|
|
.np-training-events .np-resource-subtitle {
|
|
text-align: left;
|
|
padding: 0;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-resource-title {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Common Layout ------ */
|
|
|
|
/* --- Page Content --- */
|
|
.page__primary-content {
|
|
margin-top: 2rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.page__primary-content {
|
|
margin-top: 2.5rem;
|
|
}
|
|
}
|
|
|
|
/* --- Box Container (for signup/password reset etc) --- */
|
|
.np-box-container {
|
|
height: auto;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.np-box {
|
|
border-radius: 1rem;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: 550px
|
|
}
|
|
.np-box-header {
|
|
border-top-right-radius: 1rem;
|
|
border-top-left-radius: 1rem;
|
|
height: auto;
|
|
padding: 1.5rem 2rem 1rem;
|
|
}
|
|
.np-box-header-logo {
|
|
height: 50px;
|
|
}
|
|
|
|
.np-box-content-container {
|
|
padding: 2rem 2rem 3rem;
|
|
}
|
|
.np-box-content-container,
|
|
.np-alert + .np-box-content-container {
|
|
margin: 0;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-box-container::before,
|
|
.np-box-container::after {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
.np-box-container::before {
|
|
flex-grow: 1;
|
|
}
|
|
.np-box-container::after {
|
|
flex-grow: 2;
|
|
}
|
|
.np-box-container {
|
|
padding: 2rem;
|
|
}
|
|
.np-box-header {
|
|
padding: 2.5rem 2rem 2rem;
|
|
}
|
|
.np-box-header-logo {
|
|
height: 70px;
|
|
}
|
|
.np-box-content-container {
|
|
padding: 3rem 4rem 4rem;
|
|
}
|
|
.np-alert + .np-box-content-container {
|
|
padding-top: 2rem;
|
|
}
|
|
}
|
|
|
|
/* --- Section Horizontal Padding --- */
|
|
.np-header,
|
|
.np-sub-navigation,
|
|
.np-page-container,
|
|
.np-subpage-container,
|
|
.np-homepage-hero-content,
|
|
.page-section {
|
|
width: 100%;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-header,
|
|
.np-sub-navigation,
|
|
.np-page-container,
|
|
.np-subpage-container,
|
|
.np-homepage-hero-content,
|
|
.page-section {
|
|
padding-left: 5rem;
|
|
padding-right: 5rem;
|
|
}
|
|
}
|
|
|
|
/* --- Page Header Area --- */
|
|
.page__header-wrapper,
|
|
.np-catalog-header-wrapper {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.page__header-wrapper,
|
|
.np-catalog-header-wrapper {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
}
|
|
|
|
/* --- Blocks Layout --- */
|
|
.blocks-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.blocks-layout,
|
|
.blocks-layout > .blocks-layout {
|
|
width: calc( 100% + 1.5rem);
|
|
margin: -0.75rem;
|
|
}
|
|
.blocks-layout {
|
|
flex-wrap: wrap;
|
|
}
|
|
.blocks-layout > *,
|
|
.blocks-layout > .np-card {
|
|
padding: 0.75rem;
|
|
width: 100%;
|
|
}
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.blocks-layout,
|
|
.blocks-layout > .blocks-layout {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.blocks-layout {
|
|
flex-direction: row;
|
|
}
|
|
.blocks-layout,
|
|
.blocks-layout > .blocks-layout {
|
|
|
|
width: calc( 100% + 2rem );
|
|
margin: -1rem;
|
|
}
|
|
.blocks-layout > *,
|
|
.blocks-layout > .np-card {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* --- Columns --- */
|
|
/* Adding some column options for between the width of small and xs, in order to avoid overriding the other column sizing these only apply to the narrow range */
|
|
|
|
@media only screen and ( min-width: 35.5rem ) and ( max-width: calc(48rem - 1px) ) {
|
|
.col-x-sm-6 {
|
|
flex-basis: 50%;
|
|
max-width: 50%
|
|
}
|
|
}
|
|
|
|
/* ------ Page/Subpage Container ------ */
|
|
body,
|
|
.np-page-container,
|
|
.np-subpage-container {
|
|
background-color: #f5f7fa;
|
|
width: 100%;
|
|
}
|
|
|
|
.np-page-container,
|
|
.np-subpage-container {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.np-page-container {
|
|
position: relative;
|
|
margin:0;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-page-container {
|
|
padding-top: 5rem;
|
|
padding-bottom: 5rem;
|
|
margin-top: 0;
|
|
|
|
}
|
|
.np-subpage-container {
|
|
padding-top: 3rem;
|
|
padding-bottom: 3rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Footer ------ */
|
|
/* --- Logo --- */
|
|
.np-footer-logo-image {
|
|
filter: none;
|
|
height: 30px;
|
|
opacity: initial;
|
|
}
|
|
|
|
/* ------ Northpass Powered By Signet ------ */
|
|
div.np-powered-by {
|
|
display: none;
|
|
}
|
|
|
|
/* ------ Sub Navigation ------ */
|
|
/* --- Container --- */
|
|
.np-sub-navigation {
|
|
padding-top: 1.25rem;
|
|
margin-bottom: 0;
|
|
}
|
|
.np-sub-navigation-content {
|
|
margin-left: -0.75rem;
|
|
margin-right: -0.75rem;
|
|
}
|
|
|
|
/* --- Item --- */
|
|
.np-sub-navigation-content-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto;
|
|
margin: 0 0.75rem;
|
|
}
|
|
.np-sub-navigation-content-item-link {
|
|
height: auto;
|
|
flex-grow: 1;
|
|
line-height: 1.15;
|
|
}
|
|
.np-sub-navigation-content-item-inactive .np-sub-navigation-content-item-link {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.np-sub-navigation-content-item-icon,
|
|
.oa-sub-navigation-content-item-label {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.oa-sub-navigation-content-item-label {
|
|
color:#333333;
|
|
}
|
|
/* Inactive Item */
|
|
.np-sub-navigation-content-item-inactive .np-sub-navigation-content-item-icon {
|
|
color: #c5cbd1;
|
|
}
|
|
|
|
/* --- Seperator --- */
|
|
.oa-sub-navigation-seperator {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* ------------ Animations ------------ */
|
|
/* --- Transitions --- */
|
|
a,
|
|
button,
|
|
.np-button,
|
|
.np-course-outline-content-activity-link-completed::after,
|
|
.outline-card__icon-link,
|
|
.filter-list__item {
|
|
transition: all 0.3s ease;
|
|
}
|
|
/* --- Animation Defaults --- */
|
|
.is-animation {
|
|
animation-timing-function: cubic-bezier( 0.36, 0.45, 0.63, 0.53);
|
|
animation-duration: 20s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
/* --- Slide --- */
|
|
@keyframes slide-2 {
|
|
0% {
|
|
transform: translateX( 0% );
|
|
}
|
|
100% {
|
|
transform: translateX( -200% );
|
|
}
|
|
}
|
|
@keyframes slide-3 {
|
|
0% {
|
|
transform: translateX( 0% );
|
|
}
|
|
100% {
|
|
transform: translateX( -300% );
|
|
}
|
|
}
|
|
@keyframes slide-4 {
|
|
0% {
|
|
transform: translateX( 0% );
|
|
}
|
|
100% {
|
|
transform: translateX( -400% );
|
|
}
|
|
}
|
|
@keyframes slide-5 {
|
|
0% {
|
|
transform: translateX( 0% );
|
|
}
|
|
100% {
|
|
transform: translateX( -500% );
|
|
}
|
|
}
|
|
/* --- Rotate --- */
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
/* --- Pinwheel --- */
|
|
@keyframes pinwheel {
|
|
0% {
|
|
transform: rotate(45deg) translateX(0px);
|
|
}
|
|
100% {
|
|
transform: rotate(-25deg) translateX(20px);
|
|
}
|
|
}
|
|
/* --- Text Gradient --- */
|
|
@keyframes homepage-gradient {
|
|
0% {
|
|
background-position-x: 0;
|
|
}
|
|
100% {
|
|
background-position-x: 100%;
|
|
}
|
|
}
|
|
|
|
/* ------------ Components ------------ */
|
|
|
|
/* ------ Card ------ */
|
|
.np-card-container {
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
border-radius: 1rem;
|
|
justify-content: start;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.np-card:not(.card--horizontal) .np-card-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.np-card .np-card-text-wrapper {
|
|
flex-grow: 1;
|
|
width: auto;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-padding-dynamic {
|
|
padding: 3rem;
|
|
}
|
|
}
|
|
/* Vertical Cards */
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.np-card:not(.np-no-horizontal-padding) .np-card-container {
|
|
flex-direction: column;
|
|
}
|
|
.np-card:not(.np-no-horizontal-padding) .np-card-text-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.np-card.np-learning-path-outline-item .np-card-container {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
/* --- Ribbon --- */
|
|
.np-card-ribbon {
|
|
position: relative;
|
|
right: unset;
|
|
top: unset;
|
|
margin-left: 0.75rem;
|
|
background-color: #B6B9C2;
|
|
padding: 0.25rem 1rem;
|
|
border-radius: 1.5rem;
|
|
line-height: 1.1;
|
|
text-transform: none;
|
|
font-size: 0.75rem;
|
|
text-align: center;
|
|
align-self: start;
|
|
}
|
|
|
|
.np-card-ribbon i {
|
|
margin-right: 3px;
|
|
}
|
|
.card__image .np-card-ribbon {
|
|
position: absolute;
|
|
right: 0.75rem;
|
|
top: 0.75rem;
|
|
}
|
|
|
|
/* --- Image --- */
|
|
.card__image {
|
|
position: relative;
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 50%;
|
|
border-color: #e0f3ff;
|
|
border-style: solid;
|
|
border-radius: 1rem 0 0 1rem;
|
|
border-width: 0 1px 0 0;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.np-card:not(.card--horizontal) .card__image {
|
|
width: 100%;
|
|
padding-top: calc(500 / 820 * 100% /2);
|
|
padding-bottom: calc(500 / 820 * 100% /2);
|
|
border-radius: 1rem 1rem 0 0;
|
|
border-width: 0 0 1px 0;
|
|
}
|
|
|
|
/* .np-learning-path-outline-item .card__image {
|
|
text-align:center;
|
|
} */
|
|
|
|
/* Vertical Card */
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.card__image {
|
|
width: calc(100% / 3);
|
|
flex-shrink: 0;
|
|
}
|
|
.np-card:not(.card--horizontal) .card__image {
|
|
width: 100%;
|
|
padding-top: calc(500 / 820 * 100% /2);
|
|
padding-bottom: calc(500 / 820 * 100% /2);
|
|
border-radius: 1rem 1rem 0 0;
|
|
border-width: 0 0 1px 0;
|
|
}
|
|
}
|
|
|
|
/* --- Heading --- */
|
|
.np-card-heading {
|
|
font-weight: 900;
|
|
font-size: 1.25rem;
|
|
line-height: 1.3;
|
|
color: #24272e;
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-heading {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
}
|
|
/* --- Text --- */
|
|
.np-card-text {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
.np-card-text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-text {
|
|
font-size: 1.125rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
/* --- Content Area --- */
|
|
.np-card-content,
|
|
.np-learning-paths .np-card-content {
|
|
padding: 1.25rem;
|
|
height: 100%;
|
|
}
|
|
.np-card-content > * {
|
|
margin: 0;
|
|
}
|
|
.np-card-content > *:not(:last-child) {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.np-card-content-title {
|
|
line-height: 1.3;
|
|
color:#333333;
|
|
}
|
|
.np-card-content .np-card-content-title {
|
|
margin-top: 0;
|
|
}
|
|
.np-card-content-subtitle {
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
color: #795ae8;
|
|
}
|
|
/* Description */
|
|
.np-card-content-description {
|
|
flex-grow: 1;
|
|
display: block;
|
|
}
|
|
.np-card-content-description p {
|
|
margin: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-content-description {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
/* Footer */
|
|
.np-card-content-footer {
|
|
padding-top: 0.5rem;
|
|
align-items: baseline;
|
|
}
|
|
.np-card-content-footer > *:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.np-card-content-progress {
|
|
margin-top: 0;
|
|
margin-left: 0.5rem;
|
|
font-size: 1rem;
|
|
text-transform: none;
|
|
color: #795ae8;
|
|
}
|
|
|
|
/* Content Divider */
|
|
.np-card-content-divider {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
border-color: #94dbff;
|
|
}
|
|
.np-card-content-divider:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-content-divider {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
padding-top: 2rem;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-content-description {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
/* --- Card Stack --- */
|
|
.np-card-stack-level-1,
|
|
.np-card-stack-level-2 {
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
border-radius: 1rem;
|
|
height: 2rem;
|
|
margin-top: -1.4rem;
|
|
}
|
|
|
|
/* --- Course / Learning Path / Event Details Card --- */
|
|
/* Header Area */
|
|
.details-card__header {
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 0;
|
|
}
|
|
.np-top-title {
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
line-height: 1.3;
|
|
color: #24272e;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.details-card__header {
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
.np-resource-header {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-top: 2rem;
|
|
}
|
|
.np-top-title {
|
|
font-size: 2rem;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
/* Content Area */
|
|
.details-card__card-container {
|
|
justify-content: top;
|
|
flex-direction: column;
|
|
}
|
|
.details-card__card-content {
|
|
padding-top: 1.5rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.details-card__card-content {
|
|
padding-top: 2rem;
|
|
padding-bottom: 3rem;
|
|
}
|
|
}
|
|
/* Heading Styles for User Generated Content */
|
|
.details-card__card-content h4 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
color: #24272e;
|
|
font-weight: 700;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.details-card__card-content h4 {
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
|
|
/* --- Training Session Card --- */
|
|
|
|
/* Date Bar */
|
|
.np-card-training-session-date {
|
|
position: relative;
|
|
}
|
|
.np-card-training-session-date:not(:first-child) {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.np-card-training-session-date-bar {
|
|
background-color: #795ae8;
|
|
left: -1.25rem;
|
|
height: 100%;
|
|
width: 0.5rem;
|
|
border-top-right-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
|
|
}
|
|
.np-card-training-session-date-day {
|
|
color: #24272e;
|
|
font-weight: 900;
|
|
}
|
|
.card__month-year-container {
|
|
flex-grow: 1;
|
|
}
|
|
.np-card-training-session-date-month,
|
|
.np-card-training-session-date-year {
|
|
line-height: 1.1;
|
|
}
|
|
.np-card-training-session-date-month {
|
|
color: #795ae8;
|
|
text-transform: none;
|
|
}
|
|
.np-card-training-session-date-year {
|
|
color: #6e7580;
|
|
}
|
|
.session-date__other-info-container,
|
|
.session-date__other-info-container.np-training-session-cta-note {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 1rem;
|
|
margin-right: -1.25rem;
|
|
min-height: 60px;
|
|
border-top-left-radius: 0.25rem;
|
|
border-bottom-left-radius: 0.25rem;
|
|
}
|
|
.session-date__other-info-container {
|
|
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
|
background-color: #795ae8;
|
|
color: white;
|
|
}
|
|
.np-training-session-cta-note {
|
|
padding: 0.5rem 1.25rem 0.5rem 0.75rem;
|
|
margin-bottom: 0;
|
|
position: unset;
|
|
}
|
|
.session-date__other-info-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
align-content: center;
|
|
}
|
|
.session-date__other-info-wrapper > * {
|
|
margin: 0 auto;
|
|
padding: 0.25rem;
|
|
}
|
|
.session-date__other-info-container::before,
|
|
.session-date__other-info-container::after {
|
|
display: block;
|
|
content: "";
|
|
}
|
|
.session-date__other-info-container::before {
|
|
flex-basis: .5rem;
|
|
flex-shrink: 1;
|
|
padding: 0;
|
|
}
|
|
.session-date__other-info-container::after {
|
|
flex-basis: .75rem;
|
|
flex-shrink: 3;
|
|
padding: 0;
|
|
}
|
|
.np-card-training-sessions-icon {
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
.np-training-session-cta-note,
|
|
.np-card-training-sessions-label {
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
.np-card-training-sessions-label {
|
|
font-size: 0.875rem;
|
|
overflow: unset;
|
|
}
|
|
.np-card-training-sessions-label,
|
|
.session-date__other-info-wrapper > span {
|
|
white-space: unset;
|
|
}
|
|
|
|
/* ------ Divider ------ */
|
|
|
|
/* --- Padding--- */
|
|
.np-divider {
|
|
margin: 0 1.25rem;
|
|
border-color: #94dbff;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-divider {
|
|
margin: 0 3rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Course Banner ------ */
|
|
.banner-course {
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
background-color: #ffffff;
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
/* Course Content */
|
|
.banner-course__content {
|
|
padding: 1rem 0.75rem;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
.banner-course__content > * {
|
|
margin: 0.25rem 0.5rem;
|
|
}
|
|
.banner-course__title {
|
|
color: #1b3e4f;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
.banner-course__description {
|
|
flex-grow: 1;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.banner-course__title {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 64rem ) {
|
|
.banner-course {
|
|
border-radius: 2.5rem;
|
|
}
|
|
.banner-course__content {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.banner-course__description {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
/* Course Image */
|
|
.banner-course__image {
|
|
position: relative;
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 25%;
|
|
max-width: 14rem;
|
|
border-color: #e0f3ff;
|
|
border-style: solid;
|
|
border-radius: 1rem 0 0 1rem;
|
|
border-width: 0 1px 0 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ------ Call to Action ------ */
|
|
.cta__container {
|
|
margin: 1.5rem 0;
|
|
}
|
|
.cta__container:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.cta__container:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.np-top-cta {
|
|
border-radius: 3rem;
|
|
background-color: #e0f3ff;
|
|
padding: 0.5rem 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.np-top-cta .np-progress-bar-container {
|
|
background-color: #8B78FA;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.cta__container {
|
|
margin: 2rem 0;
|
|
}
|
|
.np-top-cta {
|
|
padding: 1rem;
|
|
margin-bottom: 0;
|
|
}
|
|
.np-top-cta .np-top-cta-progress-content {
|
|
margin-left: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Progress Bar ------ */
|
|
.np-progress-bar-container {
|
|
background-color: #dce1e5;
|
|
|
|
}
|
|
|
|
.np-top-cta-progress-content {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 1.5rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-top-cta-progress-content {
|
|
min-height: 1.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
/* Progress Bar Text and Bar */
|
|
.np-top-cta-progress-content > * {
|
|
margin: 0;
|
|
}
|
|
.np-top-cta-progress-content > * + * {
|
|
margin-left: 1rem;
|
|
}
|
|
/* Progress Bar Text */
|
|
.np-top-cta-progress-text,
|
|
.np-top-cta-progress-title {
|
|
font-size: 0.875rem;
|
|
text-transform: none;
|
|
line-height: 1.1;
|
|
}
|
|
.np-top-cta-progress-text {
|
|
flex-shrink: 0;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/* Card Progress bar */
|
|
.np-card .np-progress-bar-container {
|
|
margin-left: 0.5rem;
|
|
margin-top: 0;
|
|
}
|
|
.np-card-progress-bar {
|
|
background-color: {{ color_palette.learning_progress_bar_color }};
|
|
}
|
|
|
|
/* ------ Buttons ------ */
|
|
.np-button {
|
|
height: unset;
|
|
min-height: unset;
|
|
padding: 0.5rem 1.25rem;
|
|
border-radius: 1.5rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
.np-button:hover,
|
|
.np-button:focus,
|
|
.np-button:active {
|
|
color: #fff;
|
|
}
|
|
|
|
.np-button:focus {
|
|
background-color: {{ color_palette.button_hover_color }};
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.np-button:active {
|
|
background-color: #50185b;
|
|
}
|
|
|
|
/* --- Wide Buttons --- */
|
|
.np-button-wide {
|
|
padding-left: 1.75rem;
|
|
padding-right: 1.75rem;
|
|
}
|
|
|
|
/* --- Secondary Buttons --- */
|
|
.np-button-secondary {
|
|
color: #fff;
|
|
background-color: #6e7580 !important;
|
|
}
|
|
.np-button-secondary:hover,
|
|
.np-button-secondary:focus {
|
|
background-color: {{ color_palette.button_hover_color }} !important;
|
|
}
|
|
.np-button-secondary:active {
|
|
background-color: #50185b !important;
|
|
}
|
|
|
|
/* ------ Dropdowns ------ */
|
|
.dropdown-calendar-menu {
|
|
padding: 0.5rem 0;
|
|
border-radius: 1rem;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
}
|
|
.dropdown-calendar-menu.is-open {
|
|
overflow: hidden;
|
|
}
|
|
.dropdown-calendar-item-element {
|
|
padding: .5rem 1.25rem;
|
|
color: #5a616b;
|
|
}
|
|
.dropdown-calendar-item-element:hover,
|
|
.dropdown-calendar-item-element:focus,
|
|
.dropdown-calendar-item-element:active {
|
|
color: #50185b;
|
|
}
|
|
.dropdown-calendar-item-element:hover,
|
|
.dropdown-calendar-item-element:focus {
|
|
background-color: #fae3ff;
|
|
}
|
|
.dropdown-calendar-item-element:active {
|
|
background-color: #fdf3ff;
|
|
}
|
|
/* ------ Form & Inputs ------ */
|
|
.np-form-field {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.np-input-label {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #5a616b;
|
|
}
|
|
.np-input {
|
|
border-radius: 1.25rem;
|
|
height: 2.5rem;
|
|
padding: 0.5rem 1.25rem;
|
|
line-height: 1.5;
|
|
background-color: #f0feff;
|
|
border-color: #bfe4ff;
|
|
border-width: 2px;
|
|
}
|
|
.np-input:focus {
|
|
border-color: #4cc3ff;
|
|
}
|
|
.np-form-action {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.np-form-link {
|
|
font-size: 0.875rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
/* ------ Alerts ------ */
|
|
.np-alert-wrapper {
|
|
padding: 1rem 2rem;
|
|
width: 100%
|
|
}
|
|
.np-alert {
|
|
min-height: unset;
|
|
font-size: 0.875rem;
|
|
}
|
|
.np-alert-error {
|
|
background-color: #ffe1e8;
|
|
color: #b11932;
|
|
}
|
|
.np-alert-success {
|
|
background-color: #e8ffe1;
|
|
color: #1d6e2c;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-alert-wrapper {
|
|
padding: 1rem 4rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Filter List ------ */
|
|
.filter-list__container {
|
|
background-color: white;
|
|
border-radius: 1rem;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
}
|
|
/* --- Header --- */
|
|
.filter-list__header-container {
|
|
padding: 0.75rem 1.5rem 0.5rem;
|
|
}
|
|
.filter-list__header {
|
|
font-size: 1.125rem;
|
|
font-weight: 300;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.filter-list__header {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
/* --- Sections --- */
|
|
.filter-list__section {
|
|
border-top: 1px solid #e0f3ff;
|
|
}
|
|
/* Header */
|
|
.filter-list__section-header-container {
|
|
padding: 0.5rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
}
|
|
.filter-list__section-header-container:focus {
|
|
outline: 2px solid #e79ff7;
|
|
outline-offset: -2px;
|
|
}
|
|
.filter-list__section-header {
|
|
font-size: 1rem;
|
|
color: #1b3e4f;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.filter-list__section-header {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
/* Icons */
|
|
.filter-list__section-header-icon {
|
|
font-size: 1.5rem;
|
|
color: {{ color_palette.button_color }};
|
|
}
|
|
.filter-list__section-header-container:hover .filter-list__section-header-icon,
|
|
.filter-list__section-header-container:hover .filter-list__section-header-icon {
|
|
color: #ba37d6;
|
|
}
|
|
/* Body */
|
|
.filter-list__section-body {
|
|
padding: 0.75rem 0.75rem 0.75rem 1.5rem;
|
|
border-top: 1px solid #e0f3ff;
|
|
}
|
|
/* --- Interactivity --- */
|
|
/* Icons */
|
|
.filter-list__section.is-open .filter-list__open-icon,
|
|
.filter-list__section.is-collapsed .filter-list__collapse-icon {
|
|
display: none;
|
|
}
|
|
/* Body */
|
|
.filter-list__section-body-container {
|
|
transition: max-height 0.3s ease, visibility 0.3s ease;
|
|
max-height: 45rem;
|
|
overflow: hidden;
|
|
}
|
|
.filter-list__section.is-collapsed .filter-list__section-body-container {
|
|
max-height: 0;
|
|
visibility: hidden; /* Prevents tabbing through hidden items */
|
|
}
|
|
/* --- Subsections --- */
|
|
.filter-list__subsection-header {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.filter-list__subsection-header:not(:first-child) {
|
|
margin-top: 0.75rem;
|
|
}
|
|
/* --- List --- */
|
|
.filter-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
/* --- Item --- */
|
|
.filter-list__item {
|
|
list-style-type: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
line-height: 1.1;
|
|
margin-bottom: 3px;
|
|
margin-left: -0.75rem;
|
|
padding: 0.2rem 0.75rem;
|
|
border-radius: 0.75rem;
|
|
color: {{ color_palette.button_color }};
|
|
}
|
|
|
|
.filter-list__item:hover,
|
|
.filter-list__item:focus {
|
|
background-color: #fdf3ff;
|
|
color: #9630ab;
|
|
cursor: pointer;
|
|
}
|
|
.filter-list__item:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.filter-list__item.is-active {
|
|
background-color: {{ color_palette.button_color }};
|
|
color: #ffffff;
|
|
}
|
|
|
|
.filter-list__item.is-active:hover,
|
|
.filter-list__item.is-active:focus {
|
|
background-color: #ba37d6;
|
|
}
|
|
.filter-list__item-remove {
|
|
margin-left: 0.4rem;
|
|
}
|
|
.filter-list__item:not(.is-active) .filter-list__item-remove {
|
|
display: none;
|
|
}
|
|
|
|
/* ------ Clear Filters ------ */
|
|
.clear-filters__container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: -0.25rem -0.25rem 0.75rem;
|
|
}
|
|
.clear-filters__container > * {
|
|
margin: 0.25rem;
|
|
}
|
|
.clear-filters__button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
line-height: 1.1;
|
|
padding: 0.3rem 0.85rem;
|
|
border-radius: 0.85rem;
|
|
background-color: {{ color_palette.button_color }};
|
|
color: #ffffff;
|
|
}
|
|
.clear-filters__button-clear-all {
|
|
background-color: #ffffff;
|
|
color: {{ color_palette.button_color }};
|
|
}
|
|
.clear-filters__button:hover,
|
|
.clear-filters__button:focus {
|
|
background-color: #ba37d6;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
.clear-filters__button:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.clear-filters__button.is-active {
|
|
background-color: {{ color_palette.button_color }};
|
|
color: #ffffff;
|
|
}
|
|
.clear-filters__icon {
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
/* ------ Outdated Popup ------ */
|
|
.np-course-version-outdated-popup {
|
|
align-self: center;
|
|
margin-left: auto;
|
|
margin-right: 0.5rem
|
|
}
|
|
|
|
/* --- Trigger --- */
|
|
.np-course-version-outdated-popup-trigger {
|
|
color: #f8654c;
|
|
border-radius: 50%;
|
|
}
|
|
.np-course-version-outdated-popup-trigger:hover,
|
|
.np-course-version-outdated-popup-trigger:focus {
|
|
color: #d54224;
|
|
}
|
|
.np-course-version-outdated-popup-trigger:focus {
|
|
outline: 2px solid #ffa593;
|
|
}
|
|
|
|
.np-course-version-outdated-popup {
|
|
margin-left: 0.5rem;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* --- Popup --- */
|
|
.np-popup-tooltip--visible {
|
|
border: 2px solid #ffe5e1;
|
|
}
|
|
.np-popup-tail {
|
|
border-top: 4px solid #ffc9c0;
|
|
}
|
|
.np-popup-header {
|
|
background-color: #ffe5e1;
|
|
padding-left: 1.25rem;
|
|
padding-right: 1.25rem;
|
|
}
|
|
.np-popup-header-icon {
|
|
color: #f8654c;
|
|
}
|
|
.np-popup-body {
|
|
padding-left: 1.25rem;
|
|
}
|
|
.np-popup-body-button {
|
|
border-radius: 1.5rem;
|
|
background-color: {{ color_palette.button_color }};
|
|
}
|
|
.np-popup-body-button:hover,
|
|
.np-popup-body-button:focus {
|
|
background-color: {{ color_palette.button_hover_color }};
|
|
color: #fff;
|
|
}
|
|
.np-popup-body-button:focus {
|
|
outline: 2px solid #e79ff7;;
|
|
}
|
|
|
|
|
|
/* ------------ Pages ------------ */
|
|
|
|
|
|
/* ------ Catalog Page ------ */
|
|
/* --- Header --- */
|
|
.np-catalog-header-wrapper {
|
|
display: block;
|
|
}
|
|
.np-catalog-header {
|
|
align-items: start;
|
|
margin: 0;
|
|
}
|
|
|
|
/* --- Content Layout --- */
|
|
.catalog-layout__wrapper {
|
|
flex-direction: column-reverse;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.catalog-layout__filters {
|
|
width: 100%;
|
|
}
|
|
.catalog-layout__results {
|
|
align-content: start;
|
|
flex-grow: 1;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.catalog-layout__results {
|
|
width: 75%;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.catalog-layout__wrapper {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
/* ------ Course Overview Page ------ */
|
|
.page--course-overview .np-card-container {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
flex-direction: column;
|
|
}
|
|
/* Course Image */
|
|
.np-top-image-spacing {
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Course Outline --- */
|
|
.np-course-outline {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-course-outline {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
/* --- Course Instructors --- */
|
|
/* Container */
|
|
.instructors-list__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: -0.5rem;
|
|
}
|
|
.instructors-list__container > * {
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.instructors-list__container {
|
|
flex-direction: row;
|
|
align-items: start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.instructors-list__container > * {
|
|
width: 50%;
|
|
}
|
|
}
|
|
/* Item */
|
|
.np-content-instructors-content-item {
|
|
align-items: center;
|
|
}
|
|
.np-content-instructors-content-image {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
border: 1px solid #aeb5bd;
|
|
}
|
|
.np-content-instructors-content-description {
|
|
margin-left: 0.75rem;
|
|
}
|
|
.np-content-instructors-content-name {
|
|
color: #6e7580;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
.np-content-instructors-content-info {
|
|
font-size: 1rem;
|
|
line-height: 1.3;
|
|
color: #24272e;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-content-instructors-content-name {
|
|
font-size: 1.125rem;
|
|
}
|
|
.np-content-instructors-content-info {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
/* --- Table of Contents --- */
|
|
.np-course-outline-content-section-list {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
/* Section Title */
|
|
.np-course-outline-content-section-name {
|
|
color: #353a42;
|
|
font-size: 1rem;
|
|
line-height: 1.3;
|
|
border-bottom-width: 0;
|
|
padding-bottom:0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-course-outline-content-section-name {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
/* List Item */
|
|
.np-course-outline-content-activity-list {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom-width: 0;
|
|
padding: 0.3rem 0;
|
|
}
|
|
/* Icon */
|
|
.np-course-outline-content-activity-icon {
|
|
padding: 0 0.75rem 0 0;
|
|
color: #e9ecf0;
|
|
}
|
|
/* Connecting Bar */
|
|
.np-course-outline-content-activity-list-bar {
|
|
background-color: #e9ecf0;
|
|
height: calc(50% - 9px);
|
|
top: calc(50% + 9px);
|
|
bottom: 0;
|
|
left: 9px;
|
|
}
|
|
.np-course-outline-content-activity-list-bar:before {
|
|
background-color: #e9ecf0;
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
height: 100%;
|
|
top: calc(-100% - 18px);
|
|
width: 2px;
|
|
z-index: 1;
|
|
}
|
|
.np-course-outline-content-activity-list:first-child .np-course-outline-content-activity-list-bar:before {
|
|
display: none;
|
|
}
|
|
.np-course-outline-content-activity-list-bar.np-progress-background-color:before {
|
|
background-color: {{ color_palette.learning_progress_bar_color }};
|
|
}
|
|
/* Hide the last end bar without hiding the connecting element */
|
|
.np-course-outline-content-activity-list:last-child .np-course-outline-content-activity-list-bar {
|
|
display: block;
|
|
background-color: transparent;
|
|
}
|
|
/* Chapter Headings */
|
|
.np-course-outline-content-activity-icon-locked,
|
|
.np-course-outline-content-activity-link-completed {
|
|
color: #6e7580;
|
|
}
|
|
.np-course-outline-content-activity-link-completed:hover,
|
|
.np-course-outline-content-activity-link-completed:focus {
|
|
color: #131519;
|
|
}
|
|
/* Link Hover Effect */
|
|
.np-course-outline-content-activity-link-completed {
|
|
position: relative;
|
|
}
|
|
.np-course-outline-content-activity-link-completed::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 0%;
|
|
background-color: #4cc3ff;
|
|
height: 0;
|
|
border-radius: 1px;
|
|
}
|
|
.np-course-outline-content-activity-link-completed:hover::after,
|
|
.np-course-outline-content-activity-link-completed:focus::after {
|
|
width: 100%;
|
|
height: 2px;
|
|
}
|
|
.np-course-outline-content-activity-link-completed:active::after {
|
|
background-color: #ba37d6;
|
|
}
|
|
/* Locked Icon */
|
|
.np-course-outline-content-activity-icon-locked {
|
|
color: #aeb5bd;
|
|
font-weight: 700;
|
|
}
|
|
/* --- Course Events --- */
|
|
.np-course-events-content-item {
|
|
margin-top: 1rem;
|
|
}
|
|
.np-course-events-content-date {
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
text-transform: none;
|
|
background-color: #795ae8;
|
|
|
|
}
|
|
.np-course-events-content-month,
|
|
.np-course-events-content-day {
|
|
line-height: 1;
|
|
}
|
|
.np-course-events-content-name,
|
|
.np-course-events-content-type,
|
|
.np-course-events-content-time {
|
|
line-height: 1.3;
|
|
}
|
|
.np-course-events-content-name {
|
|
color: #353a42;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
.np-course-events-content-type,
|
|
.np-course-events-content-time {
|
|
font-size: 0.875rem;
|
|
}
|
|
.np-course-events-content-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.np-course-events-content-time {
|
|
color: #6b3fd1;
|
|
}
|
|
|
|
/* --- Outline Bar Divider --- */
|
|
.np-learning-path-outline-bar {
|
|
position: relative;
|
|
}
|
|
|
|
/* ------ Learning Path Overview ------ */
|
|
|
|
|
|
/* --- Top Vocabulary (Online or In Person Event) --- */
|
|
.np-training-session .np-top-vocabulary {
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
margin-bottom: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-training-session .np-top-vocabulary {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
.np-training-session .np-top-vocabulary .np-training-session-icon {
|
|
margin-left: 0;
|
|
margin-right: .5rem;
|
|
color: #795ae8;
|
|
}
|
|
|
|
/*
|
|
/* --- CTA for Outline --- */
|
|
.cta--outline {
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
}
|
|
.cta--outline .np-button {
|
|
width: 100%;
|
|
}
|
|
.cta--outline .np-top-cta {
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
}
|
|
|
|
/* --- Outline Divider --- */
|
|
.np-learning-path-outline-bar {
|
|
position: relative;
|
|
}
|
|
|
|
.np-learning-path-outline > div {
|
|
position:relative;
|
|
margin-bottom:16px;
|
|
}
|
|
|
|
.np-learning-path-outline > div:before {
|
|
content:"";
|
|
position: absolute;
|
|
height: calc(100% + 16px);
|
|
width: 1px;
|
|
border-right: 7px dashed #fff;
|
|
left: 50%;
|
|
top: 16px;
|
|
}
|
|
|
|
.np-learning-path-outline > div:last-child:before {
|
|
height: 0;
|
|
}
|
|
|
|
/* --- Outline Cards --- */
|
|
.np-learning-path-outline-item {
|
|
margin: 0;
|
|
border-radius: 1rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-learning-path-outline-item .np-card-container {
|
|
min-height: 135px;
|
|
}
|
|
}
|
|
.np-learning-path-outline-item:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.outline-card__icon-container {
|
|
padding: 0.5rem;
|
|
border-radius: 50%;
|
|
height: 2.25rem;
|
|
width: 2.25rem;
|
|
align-self: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.np-learning-path-outline-icon {
|
|
margin-left: unset;
|
|
font-size: 1rem;
|
|
}
|
|
/* Locked */
|
|
.outline-card__icon-locked {
|
|
background-color: #e9ecf0;
|
|
}
|
|
.outline-card__icon-locked .np-learning-path-outline-icon {
|
|
color: #5a616b;
|
|
}
|
|
/* Complete */
|
|
.outline-card__icon-complete {
|
|
background-color: #d7f7f1;
|
|
}
|
|
.outline-card__icon-complete .np-learning-path-outline-icon {
|
|
color: #008382;
|
|
}
|
|
/* Use an arrow icon on hvoer */
|
|
a:hover .outline-card__icon-complete .np-learning-path-outline-icon::before,
|
|
a:focus .outline-card__icon-complete .np-learning-path-outline-icon::before,
|
|
a:active .outline-card__icon-complete .np-learning-path-outline-icon::before {
|
|
content: "\f054";
|
|
}
|
|
/* Link */
|
|
.outline-card__icon-link {
|
|
background-color: #3E1191;
|
|
}
|
|
.outline-card__icon-link .np-learning-path-outline-icon {
|
|
color: #fff;
|
|
}
|
|
a:hover .outline-card__icon-container,
|
|
a:focus .outline-card__icon-container {
|
|
background-color: #7625F7;
|
|
}
|
|
a:focus .outline-card__icon-container {
|
|
outline: 2px solid #7625F7;
|
|
}
|
|
a:hover .np-learning-path-outline-icon,
|
|
a:focus .np-learning-path-outline-icon {
|
|
color: #fff;
|
|
}
|
|
a:active .np-learning-path-outline-icon {
|
|
color: #fff;
|
|
}*/
|
|
|
|
/* ------ Events Overview ------ */
|
|
|
|
/* --- Date Bar --- */
|
|
.np-training-session .np-card-training-session-date {
|
|
margin-top: 0;
|
|
}
|
|
.np-training-session .np-card-training-session-date-bar {
|
|
border-top-right-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
width: 0.5rem;
|
|
}
|
|
/* --- Session Details --- */
|
|
.training-session__details {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.training-session__details .np-training-session-icon {
|
|
color: #795ae8;
|
|
width: 1.5rem;
|
|
text-align: center;
|
|
margin-right: 0.25rem;
|
|
}
|
|
.np-training-session .np-training-session-time,
|
|
.np-training-session-location {
|
|
margin-top: 0;
|
|
}
|
|
/* --- CTA --- */
|
|
.np-training-session-cta {
|
|
padding-right: 0;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.np-training-session-cta-buttons form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: calc(100% + .5rem);
|
|
margin: -0.25rem;
|
|
}
|
|
.np-training-session-cta-buttons form > * {
|
|
margin: 0.25rem !important;
|
|
}
|
|
/* --- Additional Training Sessions --- */
|
|
.np-training-session-tile {
|
|
background-color: #ffffff;
|
|
border-radius: 1rem;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
color: #5a616b;
|
|
}
|
|
.np-training-session-tile:hover {
|
|
background-color: #ffffff;
|
|
}
|
|
.np-training-session-tile:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
/* Icon */
|
|
.np-training-session-tile-icon {
|
|
color: #795ae8;
|
|
}
|
|
/* Details */
|
|
.training-session-tile__details {
|
|
flex-grow: 1;
|
|
}
|
|
.np-training-session-tile-date {
|
|
color: #24272e;
|
|
}
|
|
.np-training-session-tile-time {
|
|
color: #5a616b;
|
|
font-size: 0.875rem;
|
|
}
|
|
/* Arrow */
|
|
.training-session-tile__icon-container {
|
|
padding: 0.5rem;
|
|
border-radius: 50%;
|
|
height: 2.25rem;
|
|
width: 2.25rem;
|
|
align-self: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 1rem;
|
|
flex-shrink: 0;
|
|
background-color: #e0f3ff;
|
|
margin-left: 1rem;
|
|
margin-right: 0;
|
|
}
|
|
.training-session-tile__icon {
|
|
margin-left: unset;
|
|
font-size: 1rem;
|
|
color: #2574e1;
|
|
}
|
|
a:hover .training-session-tile__icon-container,
|
|
a:focus .training-session-tile__icon-container {
|
|
background-color: #f9e1ff;
|
|
}
|
|
a:focus .training-session-tile__icon-container {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
a:hover .training-session-tile__icon,
|
|
a:focus .training-session-tile__icon {
|
|
color: #ba37d6;
|
|
}
|
|
a:active .training-session-tile__icon {
|
|
color: #712b80;
|
|
}
|
|
|
|
/* ------ Empty States ------ */
|
|
|
|
.np-dashboard-resources-container,
|
|
.np-learning-paths-resources-container,
|
|
.np-training-session-zero-state {
|
|
width: 100%;
|
|
border-radius: 1rem;
|
|
border: 3px solid #dce1e5;
|
|
}
|
|
.np-training-session-zero-state {
|
|
display: flex;
|
|
padding: 2.5rem 2rem;
|
|
align-items: center;
|
|
}
|
|
.np-training-session-zero-state img {
|
|
height: 68px;
|
|
margin-right: 1rem;
|
|
}
|
|
.np-zero-state-text {
|
|
color: #6e7580;
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
}
|
|
.np-zero-state-text button {
|
|
margin-top: 1rem;
|
|
}
|
|
.np-training-session-zero-state-text {
|
|
font-size: 1;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* ------ Search Results ------ */
|
|
|
|
/* --- Header / Summary --- */
|
|
.search-summary__emphasis {
|
|
color: #6b3fd1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
|
|
|
|
/* ------ Custom Pages ------ */
|
|
.custom-page__content {
|
|
margin-top: 0.75rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.custom-page__content {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Account Page ------ */
|
|
.np-account-form .np-card-container {
|
|
flex-direction: column;
|
|
}
|
|
@media screen and ( max-width: 48rem ) {
|
|
.np-account-avatar .np-card-container {
|
|
flex-direction: row !important;
|
|
}
|
|
}
|
|
|
|
/* ------------ Custom Freeform Content ------------ */
|
|
/* This content is shared between the main academy and the LX experience */
|
|
|
|
/* --- Button --- */
|
|
a.tutorial-button {
|
|
display: inline-block;
|
|
padding: 0.5rem 1.25rem;
|
|
border-radius: 1.5rem;
|
|
background-color: #2574e1;
|
|
color: #fff !important;
|
|
}
|
|
.tutorial-button:focus,
|
|
.tutorial-button:hover {
|
|
background-color: #712b80;
|
|
}
|
|
.tutorial-button:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.tutorial-button:active {
|
|
background-color: #50185b;
|
|
}
|
|
|
|
|
|
/* --- Time Estimate --- */
|
|
/* Includes a clock icon and light purple background with dark purple text */
|
|
.tutorial-time-estimate {
|
|
position: relative;
|
|
border-radius: 1.25rem;
|
|
background-color: #e9e9ff;
|
|
padding: 0.5rem 1rem 0.5rem calc(3rem + 16px);
|
|
display: block;
|
|
overflow: hidden;
|
|
font-size: 1rem;
|
|
color: #6b3fd1;
|
|
margin: 1.5rem 0 !important;
|
|
}
|
|
.tutorial-time-estimate::before {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: #6b3fd1;
|
|
color: #fff;
|
|
padding: 0.5rem 0.9rem 0.5rem 1rem;
|
|
content: "\f017";
|
|
font-family: 'Font Awesome 5 Pro';
|
|
font-size: 18px;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
/* ------------ Colors ------------ */
|
|
.np-color-danger {
|
|
color: #E52242;
|
|
}
|
|
.np-color-success {
|
|
color: #368645;
|
|
}
|
|
.np-progress-color {
|
|
color: #4cc3ff;
|
|
|
|
}
|
|
.np-progress-background-color {
|
|
background-color: #7625F7;
|
|
}
|