overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
Jessica Lawshe e8f602db9b Merge pull request #20545 from overleaf/jel-remove-comment
[web] Remove commented out CSS code

GitOrigin-RevId: 8d6c392735eb2637a3c7bbc4cd4d17d5dc92d1e4
2024-09-25 08:06:11 +00:00

553 lines
8.7 KiB
SCSS

/*
CMS Generated Pages:
/about/*, /contact, /legal, /blog/*, /for/*, /events/*
*/
.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;
}
}
}
.btn + .btn {
margin-left: var(--spacing-06);
}
.optional-text {
font-size: 14px;
}
.section-row {
margin: 0 auto;
max-width: 1440px;
}
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%;
}
/*
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;
}
}
}
}
.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 {
// 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;
}
}
}
.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%;
}
}
}
.vertically-center-col {
div[class*='col-'] {
align-self: center;
}
}
}
// Mobile layout options depdendent on mobile breakpoint
@include media-breakpoint-down(lg) {
.cms-page {
div[class*='col-'] {
&:not(:first-child) {
padding-top: var(--spacing-13);
}
}
.reverse-col-order-mobile {
flex-direction: column-reverse;
// 1st column is displayed as 2nd column on mobile when reversed
div[class*='col-'] {
&:not(:last-child) {
padding-top: var(--spacing-13);
}
&:last-child {
padding-top: 0; // unset padding from default rows above
}
}
}
}
}
// TODO: will be deprecated and gap option used instead
@include media-breakpoint-up(lg) {
.desktop-left-margin-sm {
margin-left: var(--spacing-05);
}
.desktop-left-margin-md {
margin-left: var(--spacing-07);
}
.desktop-left-margin-lg {
margin-left: var(--spacing-09);
}
.desktop-left-margin-xl {
margin-left: var(--spacing-10);
}
.desktop-left-margin-xxl {
margin-left: var(--spacing-11);
}
.desktop-right-margin-sm {
margin-right: var(--spacing-05);
}
.desktop-right-margin-md {
margin-right: var(--spacing-07);
}
.desktop-right-margin-lg {
margin-right: var(--spacing-09);
}
.desktop-right-margin-xl {
margin-right: var(--spacing-10);
}
.desktop-right-margin-xxl {
margin-right: var(--spacing-11);
}
}
.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);
}
.bottom-align-last-entry {
display: flex;
flex-direction: column;
* {
&:last-child {
flex: 1;
align-content: end;
}
}
}