/* CMS Generated Pages: /about/*, /contact, /legal, /blog/*, /for/*, /events/* */ @mixin section-row-custom-gap($spacing) { // only update the padding between columns // not the padding before the first column // or the padding after the last column // rows can be nested, so only select direct col in row > div[class*='col-'] { &:not(:first-child, :last-child) { padding-left: $spacing; padding-right: $spacing; } &:first-child { padding-right: $spacing; } &:last-child { padding-left: $spacing; } } } .cms-page { .sales-contact-form-left-column { .sales-contact-form-heading-title { font-size: 2.25rem; font-family: var(--font-family-san-serif); font-style: normal; font-weight: 600; line-height: 1.333; padding-top: 8px; padding-right: 50px; } @include media-breakpoint-up(sm) { .names-container { display: flex; gap: 21px; } } .checkbox-label { font-size: 16px; font-weight: 400; } } .p-no-text-nodes:has(.btn) { margin-top: var(--spacing-09); @include media-breakpoint-down(md) { .btn { width: 100%; margin-left: 0; margin-top: var(--spacing-05); } .btn:first-child { margin-top: 0; } } } .card + .card { margin-top: var(--spacing-09); } .optional-text { font-size: 14px; } section { padding: var(--spacing-16) 0 0 0; &.no-top-padding { /* opt out of padding via the CMS */ padding-top: 0; } // TODO: confirm if we will still support this and if so what colors to use // &.color-block { // &.green-dark { // background-color: @ol-dark-green; // } // &.green { // background-color: @ol-green; // .no-card * { // .btn-primary, // .btn-success { // // only correct button colors when green on green // .btn-primary-on-primary-bg; // } // } // } // &.blue-gray-dark { // background-color: @ol-blue-gray-5; // } // &.blue-gray-light { // background-color: @ol-blue-gray-1; // } // &.green, // &.green-dark, // &.blue-gray-dark { // .no-card * { // &:not(.btn) { // color: @white; // } // a { // text-decoration: underline; // } // .btn { // text-decoration: none; // } // .form-control { // color: @input-color; // } // } // } // } } .section-row { @extend .container; } padding-bottom: 0; img { height: auto; max-width: 100%; } /* Tabs */ .tab-content { padding-left: 0; padding-right: 0; width: 100%; } /* When on preview mode */ .cms-preview { background-color: var(--blue-60); color: white; font-weight: bold; height: 30px; left: 0; line-height: 30px; opacity: 0.8; position: fixed; text-align: center; top: 0; width: 100%; z-index: 1000; &::after { content: 'Preview'; width: 100%; top: 0; left: 0; } } .tab-pane { .row:first-child { margin-top: 0; } } /* Tables */ .table-styled { overflow: hidden; overflow-x: auto; table { background: white; max-width: none; th, td { border: 1px solid var(--neutral-30); padding: var(--spacing-05); text-align: center; word-break: normal; } } } .table-styled, .features-table { .fa-check-square, .fa-check { color: var(--green-50); } } .features-table { max-width: none; th, td { border: 1px solid var(--neutral-30); hyphens: auto; padding: var(--spacing-05); text-align: center; width: 20%; } .btn { max-width: 100%; white-space: pre-wrap; word-wrap: break-word; } &.left-align-first-col { td, th { text-align: left; } td + td, th + th { text-align: center; } } .hidden-row-above-xs { display: none; } @include media-breakpoint-down(md) { tbody, thead { display: block; } tr { display: flex; flex-flow: row wrap; justify-content: space-around; } td, th { display: block; width: 25%; } tr:first-child { th { width: 50%; } th:first-child { width: 100%; } } td:first-child { text-align: center; width: 100%; } .hidden-row-xs { display: none; } .hidden-row-above-xs { display: flex; } .table-header { text-align: center; } } } /* universities page */ #universities-container { padding: var(--spacing-07); width: 100%; .row { border-bottom: 1px solid var(--neutral-10); div { padding: var(--spacing-07); vertical-align: middle; } } .row:first-child { // parent container contains padding div { padding-top: 0; } } .row:last-child { border: 0; // parent container contains padding div { border: 0; padding-bottom: 0; } } p { margin: 0 auto; width: 100%; } // Logos .uni-logo { margin: 0 auto; max-height: 55px; min-width: 55px; } .university-claim-btn { text-align: center; } @include media-breakpoint-up(sm) { display: table; table-layout: fixed; .row { display: table-row; div { border-bottom: 1px solid var(--neutral-10); display: table-cell; float: none; } } } } /* videos */ video { height: auto; max-width: 100%; box-shadow: 0 8px 16px 0 rgba(30 37 48 / 12%), 0 4px 6px 0 rgba(30 37 48 / 12%); } /* cards */ .card-body { // card-body all have div before the actual content // due to option to override font size > :first-child { > :first-child { margin-top: 0; } } > :last-child { > :last-child { margin-bottom: 0; } } } .card, .no-card { &.top-margin-sm { margin-top: var(--spacing-05); } &.top-margin-md { margin-top: var(--spacing-07); } &.top-margin-lg { margin-top: var(--spacing-09); } &.top-margin-xl { margin-top: var(--spacing-10); } &.top-margin-xxl { margin-top: var(--spacing-11); } } } .icon-with-content { display: flex; h2, h3, h4 { margin-top: 15px; } .icon-container { background-color: var(--green-10); padding: 7.5px; height: 56px; width: 56px; border-radius: 50%; margin-right: 24px; .icon-inner-container { align-items: center; border: var(--green-30) 3.5px solid; border-radius: 50%; display: flex; justify-content: center; height: 42px; width: 42px; } i { color: var(--green-50); font-size: 21px; } } } .svg-arrow-icon { position: relative; left: 4px; bottom: 1px; } .vertically-center-col { div[class*='col-'] { align-self: center; } // remove margin to better vertically align // some elements need to be nested within a container, and others are directly within .no-card/.card .card:first-child, .no-card:first-child { .cms-element-container { > *:first-child { margin-top: 0; } } > *:first-child:not(.cms-element-container) { margin-top: 0; } } .card:last-child, .no-card:last-child { .cms-element-container { > *:last-child { margin-bottom: 0; } } > *:last-child:not(.cms-element-container) { margin-bottom: 0; } } } .row-within-card { .no-card { > :first-child { margin-top: 0; } > :last-child { margin-bottom: 0; } } } .sidebar-blog { .card-body { padding: var(--spacing-06) !important; h2 { @extend .h5; padding: var(--spacing-04) var(--spacing-05); margin-bottom: unset; } .badge-link-list { padding: 0 var(--spacing-05); margin-bottom: 0 !important; } .sidebar-register-container { margin-top: var(--spacing-05); a { margin-top: var(--spacing-02); margin-left: var(--spacing-05); } } } } .contact-form-error-container { padding-bottom: var(--spacing-08); } .row-top-padding-sm { padding-top: var(--spacing-05); } .row-top-padding-md { padding-top: var(--spacing-07); } .row-top-padding-lg { padding-top: var(--spacing-09); } .row-top-padding-xl { padding-top: var(--spacing-10); } .row-top-padding-xxl { padding-top: var(--spacing-11); } .row-bottom-padding-sm { padding-bottom: var(--spacing-05); } .row-bottom-padding-md { padding-bottom: var(--spacing-07); } .row-bottom-padding-lg { padding-bottom: var(--spacing-09); } .row-bottom-padding-xl { padding-bottom: var(--spacing-10); } .row-bottom-padding-xxl { padding-bottom: var(--spacing-11); } // Desktop layout options depdendent on mobile breakpoint @include media-breakpoint-up(lg) { .row-equal-column-heights { div[class*='col-'] { .card, .no-card { height: 100%; } } } .section-row { &.section-row-max-800 { max-width: 800px !important; } &.section-row-max-900 { max-width: 900px !important; } &.section-row-max-1000 { max-width: 1000px !important; } &.section-row-max-unset { max-width: unset !important; } &.section-row-gap-spacing-16 { @include section-row-custom-gap(calc(var(--spacing-16) / 2)); } &.section-row-gap-spacing-15 { @include section-row-custom-gap(calc(var(--spacing-15) / 2)); } &.section-row-gap-spacing-14 { @include section-row-custom-gap(calc(var(--spacing-14) / 2)); } &.section-row-gap-spacing-13 { @include section-row-custom-gap(calc(var(--spacing-13) / 2)); } &.section-row-gap-spacing-12 { @include section-row-custom-gap(calc(var(--spacing-12) / 2)); } &.section-row-gap-spacing-11 { @include section-row-custom-gap(calc(var(--spacing-11) / 2)); } &.section-row-gap-spacing-10 { @include section-row-custom-gap(calc(var(--spacing-10) / 2)); } &.section-row-gap-spacing-09 { @include section-row-custom-gap(calc(var(--spacing-09) / 2)); } } } // Mobile layout options depdendent on mobile breakpoint @include media-breakpoint-down(lg) { .cms-page { div.row { row-gap: var(--spacing-13); } .reverse-col-order-mobile { flex-direction: column-reverse; } .section-row { &.section-row-mobile-gap-spacing-16 { @include section-row-custom-gap(calc(var(--spacing-16) / 2)); } &.section-row-mobile-gap-spacing-15 { @include section-row-custom-gap(calc(var(--spacing-15) / 2)); } &.section-row-mobile-gap-spacing-14 { @include section-row-custom-gap(calc(var(--spacing-14) / 2)); } &.section-row-mobile-gap-spacing-13 { @include section-row-custom-gap(calc(var(--spacing-13) / 2)); } &.section-row-mobile-gap-spacing-12 { @include section-row-custom-gap(calc(var(--spacing-12) / 2)); } &.section-row-mobile-gap-spacing-11 { @include section-row-custom-gap(calc(var(--spacing-11) / 2)); } &.section-row-mobile-gap-spacing-10 { @include section-row-custom-gap(calc(var(--spacing-10) / 2)); } &.section-row-mobile-gap-spacing-09 { @include section-row-custom-gap(calc(var(--spacing-09) / 2)); } } } } .bottom-align-last-entry { &.no-card { display: flex; flex-direction: column; * { &:last-child { flex: 1; align-content: end; } } } &.card { .card-body { display: flex; flex-direction: column; * { &:last-child { flex: 1; align-content: end; } } } } }