first commit
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
.ol-accordions-container :last-child {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.ol-accordions-container {
|
||||
.custom-accordion-item {
|
||||
width: 100%;
|
||||
padding-top: var(--spacing-08);
|
||||
padding-bottom: var(--spacing-09);
|
||||
border-bottom: 1px solid var(--border-divider);
|
||||
|
||||
.custom-accordion-header {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
font-size: var(--font-size-04);
|
||||
font-weight: 600;
|
||||
line-height: var(--line-height-03);
|
||||
color: var(--content-primary);
|
||||
background-color: unset;
|
||||
border: unset;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: unset;
|
||||
|
||||
.custom-accordion-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: transform 0.35s ease;
|
||||
margin-left: var(--spacing-08);
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
.custom-accordion-icon {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.35s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-accordion-body {
|
||||
@include body-base;
|
||||
|
||||
background-color: unset;
|
||||
text-align: left;
|
||||
padding: unset;
|
||||
padding-right: 2rem;
|
||||
margin-top: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@import 'accordion';
|
||||
@import 'button';
|
||||
@import 'button-group';
|
||||
@import 'dropdown-menu';
|
||||
@import 'image';
|
||||
@import 'notifications';
|
||||
@import 'system-messages';
|
||||
@import 'tooltip';
|
||||
@import 'popover';
|
||||
@import 'card';
|
||||
@import 'badge';
|
||||
@import 'form';
|
||||
@import 'icon';
|
||||
@import 'input-suggestions';
|
||||
@import 'list';
|
||||
@import 'modal';
|
||||
@import 'quote';
|
||||
@import 'footer';
|
||||
@import 'nav';
|
||||
@import 'navbar';
|
||||
@import 'styled-text';
|
||||
@import 'table';
|
||||
@import 'blog-posts';
|
||||
@import 'tabs';
|
||||
@import 'beta-badges';
|
||||
@import 'list-group';
|
||||
@import 'select';
|
||||
@import 'dictionary';
|
||||
@import 'link';
|
||||
@import 'pagination';
|
||||
@import 'interstitial';
|
||||
@import 'loading-spinner';
|
||||
@import 'gallery-search';
|
||||
@import 'error-boundary';
|
||||
@import 'close-button';
|
||||
@import 'recurly';
|
||||
@import 'dev-toolbar';
|
||||
@import 'tos';
|
||||
@import 'collapsible-file-header';
|
||||
@import 'stepper';
|
||||
@import 'radio-chip';
|
||||
@import 'panel-heading';
|
||||
@import 'menu-bar';
|
||||
@import 'invite';
|
||||
@import 'upgrade-prompt';
|
||||
@import 'integrations-panel';
|
||||
@import 'group-members';
|
||||
@@ -0,0 +1,152 @@
|
||||
$max-width: 160px;
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
max-width: 100%;
|
||||
line-height: var(--line-height-01);
|
||||
padding: 0 var(--bs-badge-padding-x);
|
||||
|
||||
&:not(.badge-tag) {
|
||||
max-width: $max-width;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-prepend {
|
||||
margin-right: var(--spacing-02);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.material-symbols {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-close {
|
||||
@include reset-button;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0 var(--spacing-02);
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: inherit;
|
||||
user-select: none;
|
||||
|
||||
.badge-close-icon {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-close,
|
||||
.badge-tag-content-btn {
|
||||
&:hover {
|
||||
background-color: var(--neutral-40);
|
||||
}
|
||||
}
|
||||
|
||||
.badge-content {
|
||||
@include text-truncate;
|
||||
|
||||
padding: var(--bs-badge-padding-y) 0;
|
||||
min-width: 1em;
|
||||
}
|
||||
|
||||
.badge-tag {
|
||||
@include body-sm;
|
||||
|
||||
padding: 0;
|
||||
color: $dark;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--neutral-30) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-tag-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
max-width: $max-width;
|
||||
padding-left: var(--bs-badge-padding-x);
|
||||
padding-right: var(--bs-badge-padding-x);
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-tag-content-btn {
|
||||
@include reset-button;
|
||||
|
||||
padding-left: var(--bs-badge-padding-x);
|
||||
padding-right: var(--bs-badge-padding-x);
|
||||
}
|
||||
|
||||
.badge-tag-circle {
|
||||
display: block;
|
||||
margin: var(--spacing-02);
|
||||
width: var(--spacing-04);
|
||||
height: var(--spacing-04);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.badge-premium {
|
||||
background-color: var(--neutral-20);
|
||||
color: var(--neutral-90);
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
font-weight: var(--badge-font-weight);
|
||||
}
|
||||
|
||||
.badge-premium-gradient {
|
||||
background: var(--premium-gradient);
|
||||
color: var(--content-primary-dark);
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
font-weight: var(--badge-font-weight);
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
display: inline-block;
|
||||
|
||||
&.badge-link-light:hover .badge {
|
||||
background-color: var(--neutral-30) !important;
|
||||
}
|
||||
|
||||
&.badge-link-no-max-width {
|
||||
.badge {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
@include body-sm;
|
||||
|
||||
padding: 0 var(--bs-badge-padding-x);
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-link-list {
|
||||
display: flex;
|
||||
gap: var(--spacing-05);
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-content: flex-start;
|
||||
|
||||
.badge {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.info-badge {
|
||||
color: var(--blue-50);
|
||||
}
|
||||
|
||||
.alpha-badge {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
.split-test-badge-tooltip .tooltip-inner {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
/*
|
||||
v2
|
||||
Blog Pages
|
||||
*/
|
||||
|
||||
.blog-container,
|
||||
.blog-tagged-list-container,
|
||||
.blog-post-main-container {
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-container {
|
||||
margin-top: var(--spacing-16);
|
||||
|
||||
.blog-list-container-title {
|
||||
margin-top: 0; // needed to override bootstrap * + h1
|
||||
|
||||
small {
|
||||
@include body-lg;
|
||||
|
||||
display: block;
|
||||
margin-top: var(--spacing-06);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-tagged-list-container {
|
||||
margin-top: var(--spacing-10);
|
||||
|
||||
.blog-list-container-title {
|
||||
margin-top: var(--spacing-11);
|
||||
|
||||
small {
|
||||
color: var(--neutral-70);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post-main-container {
|
||||
margin-top: var(--spacing-10);
|
||||
}
|
||||
|
||||
.blog {
|
||||
margin-top: var(--spacing-16);
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.blog-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card-header {
|
||||
margin-bottom: var(--margin-sm);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> li {
|
||||
.blog-date {
|
||||
margin-top: var(--spacing-07);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: var(--spacing-09);
|
||||
border-bottom: 1px solid var(--neutral-20);
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--spacing-09);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post-container {
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post {
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-right: var(--spacing-09);
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
margin-bottom: var(--spacing-04);
|
||||
}
|
||||
|
||||
.blog-post-title-link {
|
||||
@include heading-lg;
|
||||
|
||||
margin-top: var(--spacing-04);
|
||||
margin-bottom: var(--spacing-06);
|
||||
|
||||
a {
|
||||
@extend .link-black-text;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-date {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
margin-top: var(--spacing-08);
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-content-preview {
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& + .blog-tags > div > .tags {
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
|
||||
.blog-content,
|
||||
.blog-content-preview {
|
||||
img {
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.blog-footer-tags {
|
||||
margin-top: var(--spacing-12);
|
||||
}
|
||||
|
||||
.blog-read-more {
|
||||
margin-bottom: var(--spacing-07);
|
||||
|
||||
a {
|
||||
@include font-mono;
|
||||
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid var(--neutral-40);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-04);
|
||||
}
|
||||
|
||||
.figure {
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--neutral-40);
|
||||
display: inline-block;
|
||||
margin: 0 auto var(--margin-sm) 0;
|
||||
max-width: 100%;
|
||||
padding: var(--spacing-04);
|
||||
|
||||
.figure-caption {
|
||||
padding-top: var(--spacing-04);
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: var(--spacing-09) 0 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.btn-group {
|
||||
> .btn {
|
||||
&:first-of-type {
|
||||
padding-left: var(--spacing-05);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toolbar {
|
||||
gap: var(--spacing-03);
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
.btn {
|
||||
// Focus style for all buttons
|
||||
--bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--bs-btn-bg);
|
||||
}
|
||||
|
||||
// Sizes
|
||||
|
||||
// Default size
|
||||
@include ol-button-size(
|
||||
$font-size: var(--font-size-03),
|
||||
$line-height: var(--line-height-03),
|
||||
$padding-y: var(--spacing-03)
|
||||
);
|
||||
|
||||
&.btn-lg {
|
||||
@include ol-button-size(
|
||||
$font-size: var(--font-size-03),
|
||||
$line-height: var(--line-height-03),
|
||||
$padding-y: var(--spacing-05)
|
||||
);
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
@include ol-button-size(
|
||||
$font-size: var(--font-size-02),
|
||||
$line-height: var(--line-height-02),
|
||||
$padding-y: var(--spacing-01),
|
||||
$padding-x: var(--spacing-05)
|
||||
);
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.btn-primary {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary-dark),
|
||||
$background: var(--bg-accent-01),
|
||||
$hover-background: var(--bg-accent-02),
|
||||
$hover-border: var(--bg-accent-02)
|
||||
);
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary),
|
||||
$background: var(--bg-light-primary),
|
||||
$border: var(--border-primary),
|
||||
$hover-background: var(--bg-light-tertiary),
|
||||
$hover-border: var(--border-primary),
|
||||
$borderless: false
|
||||
);
|
||||
}
|
||||
|
||||
&.btn-ghost {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary),
|
||||
$background: var(--bg-light-primary),
|
||||
$hover-background: var(--bg-light-tertiary)
|
||||
);
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary-dark),
|
||||
$background: var(--bg-danger-01),
|
||||
$border: var(--bg-danger-01),
|
||||
$hover-background: var(--bg-danger-02)
|
||||
);
|
||||
}
|
||||
|
||||
&.btn-danger-ghost {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-danger),
|
||||
$background: var(--bg-light-primary),
|
||||
$hover-background: var(--bg-danger-03)
|
||||
);
|
||||
}
|
||||
|
||||
&.btn-premium {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary-dark),
|
||||
$background: var(--blue-70)
|
||||
);
|
||||
|
||||
background: var(--premium-gradient);
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--blue-70);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-premium-secondary {
|
||||
@include ol-button-variant(
|
||||
$color: var(--blue-60),
|
||||
$background: var(--bg-light-primary),
|
||||
$border: var(--blue-60),
|
||||
$hover-background: var(--bg-info-03),
|
||||
$hover-border: var(--blue-60),
|
||||
$borderless: false
|
||||
);
|
||||
}
|
||||
|
||||
&.btn-blue {
|
||||
@include ol-button-variant(
|
||||
$color: var(--content-primary-dark),
|
||||
$background: var(--sapphire-blue),
|
||||
$border: var(--sapphire-blue),
|
||||
$hover-background: (
|
||||
var(--sapphire-blue-dark),
|
||||
),
|
||||
$hover-border: (
|
||||
var(--sapphire-blue-dark),
|
||||
),
|
||||
$borderless: false
|
||||
);
|
||||
}
|
||||
|
||||
&.btn-social {
|
||||
@extend .btn-secondary;
|
||||
|
||||
padding-left: var(--spacing-03);
|
||||
|
||||
.btn-social-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: var(--spacing-01);
|
||||
margin-right: var(--spacing-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link buttons
|
||||
// -------------------------
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
color: var(--link-color);
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
font-size: inherit;
|
||||
vertical-align: inherit;
|
||||
border-radius: 0;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--link-hover-color);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
color: var(--content-danger);
|
||||
|
||||
// since it's a link, override the button states
|
||||
&:active {
|
||||
color: var(--content-danger);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: transparent;
|
||||
outline: -webkit-focus-ring-color auto 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-inline-link {
|
||||
@extend .btn-link;
|
||||
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.button-loading {
|
||||
align-items: center;
|
||||
display: inline-grid;
|
||||
grid-template-areas: 'container'; // Define a single grid area
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.button-loading > * {
|
||||
grid-area: container; // Position all the direct children within the single grid area
|
||||
}
|
||||
|
||||
.button-loading .spinner-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.loading-spinner-small {
|
||||
border-width: 0.2em;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.loading-spinner-large {
|
||||
border-width: 0.2em;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide the text when the spinner is visible
|
||||
.button-loading > [aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.button-content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-04); // Add gap between text and icons
|
||||
justify-content: center;
|
||||
|
||||
.icon-small {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.icon-large {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
margin: var(--spacing-01);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button-small {
|
||||
padding: var(--spacing-01);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
padding: var(--spacing-04);
|
||||
}
|
||||
|
||||
.icon-button-large {
|
||||
padding: var(--spacing-05);
|
||||
}
|
||||
|
||||
// Set the visited colour for a link that is styled as a button. This is necessary because we have a generic rule that
|
||||
// sets the colour of visited links
|
||||
a[role='button']:visited,
|
||||
a.btn:visited {
|
||||
color: var(--bs-btn-color);
|
||||
}
|
||||
|
||||
// Copy icon button
|
||||
.copy-button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
@include reset-button;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
background: none !important;
|
||||
border-radius: 0 !important;
|
||||
color: inherit !important;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
background: none !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
.card {
|
||||
--bs-card-bg: var(--white);
|
||||
--bs-card-border-width: 0;
|
||||
--bs-card-border-radius: var(--border-radius-base);
|
||||
--bs-card-spacer-x: var(--spacing-08);
|
||||
--bs-card-spacer-y: var(--spacing-08);
|
||||
|
||||
.card-body {
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-dark-green-bg {
|
||||
background: var(--dark-jungle-green);
|
||||
border-radius: var(--border-radius-large);
|
||||
color: var(--green-10);
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-09);
|
||||
}
|
||||
|
||||
a:not(.btn) {
|
||||
color: var(--green-30);
|
||||
|
||||
&:hover {
|
||||
color: var(--green-30);
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p {
|
||||
color: var(--green-10);
|
||||
}
|
||||
}
|
||||
|
||||
&.card-purple-top-border {
|
||||
background-color: white;
|
||||
border-radius: var(--border-radius-medium);
|
||||
box-shadow:
|
||||
0 2px 4px 0 #1e253014,
|
||||
0 4px 12px 0 #1e25301f;
|
||||
border-top: 8px solid var(--sapphire-blue);
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-09) var(--spacing-10);
|
||||
}
|
||||
}
|
||||
|
||||
&.card-premium-border {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: var(--blue-60);
|
||||
}
|
||||
|
||||
border-radius: var(--spacing-04);
|
||||
border: 2px solid transparent;
|
||||
background:
|
||||
linear-gradient(white, white) padding-box,
|
||||
linear-gradient(to right, var(--blue-40), #254c84, var(--blue-70))
|
||||
border-box;
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-10);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-blue-border {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: var(--sapphire-blue);
|
||||
}
|
||||
|
||||
background-color: white;
|
||||
border-radius: var(--spacing-04);
|
||||
border: 2px solid var(--sapphire-blue);
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-10);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-pattern {
|
||||
border-radius: var(--border-radius-medium);
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0 0 0 / 40%) 0%,
|
||||
var(--dark-jungle-green) 25%,
|
||||
var(--dark-jungle-green) 75%,
|
||||
rgba(0 0 0 / 40%) 100%
|
||||
),
|
||||
url('../../../../public/img/website-redesign/overleaf-pattern-purple.png');
|
||||
|
||||
h2 {
|
||||
@include heading-lg;
|
||||
}
|
||||
|
||||
p {
|
||||
@include body-lg;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-13);
|
||||
}
|
||||
}
|
||||
|
||||
&.card-pattern-left-only {
|
||||
border-radius: var(--border-radius-medium);
|
||||
color: var(--white);
|
||||
background-size: cover;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba(0 0 0 / 40%) 0%,
|
||||
var(--dark-jungle-green) 20%,
|
||||
var(--dark-jungle-green) 100%
|
||||
),
|
||||
url('../../../../public/img/website-redesign/overleaf-pattern-purple.png');
|
||||
|
||||
h2 {
|
||||
@include heading-lg;
|
||||
}
|
||||
|
||||
p {
|
||||
@include body-lg;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-13);
|
||||
}
|
||||
}
|
||||
|
||||
&.card-grey-border {
|
||||
background-color: white;
|
||||
border-radius: var(--border-radius-medium);
|
||||
border: 2px solid var(--neutral-20);
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-10);
|
||||
}
|
||||
}
|
||||
|
||||
&.card-green-border {
|
||||
background-color: white;
|
||||
border-radius: var(--border-radius-medium);
|
||||
border: 2px solid var(--green-50);
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-09);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-gray {
|
||||
background-color: var(--neutral-10);
|
||||
}
|
||||
|
||||
.card-gray-dark {
|
||||
background-color: var(--neutral-10);
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-10) var(--spacing-09);
|
||||
}
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-08);
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-light-secondary);
|
||||
color: var(--content-secondary);
|
||||
|
||||
.material-symbols {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
&.text-primary {
|
||||
background-color: var(--bg-accent-03);
|
||||
}
|
||||
|
||||
&.text-danger {
|
||||
background-color: var(--bg-danger-03);
|
||||
}
|
||||
}
|
||||
|
||||
.card-description-secondary {
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// This is our own implementation because the Bootstrap close button requires more customization than is worthwhile
|
||||
.close {
|
||||
@include reset-button;
|
||||
|
||||
color: var(--content-primary);
|
||||
|
||||
&.dark {
|
||||
color: var(--content-primary-dark);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
:root {
|
||||
--collapsible-file-header-bg-color: var(--bg-light-tertiary);
|
||||
|
||||
@include theme('default') {
|
||||
.ide-redesign-main {
|
||||
--collapsible-file-header-bg-color: var(--bg-dark-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-file-header {
|
||||
all: unset;
|
||||
padding: var(--spacing-03) var(--spacing-04);
|
||||
font-size: var(--font-size-02);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-04);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.collapsible-file-header-count {
|
||||
background-color: var(--collapsible-file-header-bg-color);
|
||||
padding: var(--spacing-01) var(--spacing-02);
|
||||
margin-left: auto;
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
.dev-toolbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
height: 40px;
|
||||
background-color: var(--bg-dark-primary);
|
||||
padding: var(--spacing-02) var(--spacing-05);
|
||||
|
||||
button.widget {
|
||||
color: var(--neutral-10);
|
||||
margin: 0 var(--spacing-02);
|
||||
padding: 0 var(--spacing-02);
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
|
||||
.badge {
|
||||
font-size: var(--font-size-03);
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
margin-top: calc(var(--spacing-01) * -1);
|
||||
color: var(--neutral-50);
|
||||
border-color: transparent;
|
||||
|
||||
span {
|
||||
font-size: var(--font-size-07);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--border-primary-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dev-tool-bar-open-button {
|
||||
position: fixed;
|
||||
bottom: -2px;
|
||||
left: 6px;
|
||||
color: var(--neutral-70);
|
||||
|
||||
span {
|
||||
font-size: var(--font-size-07);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--border-primary-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.dev-toolbar-tooltip {
|
||||
opacity: 1 !important;
|
||||
|
||||
a {
|
||||
color: var(--blue-20) !important;
|
||||
text-decoration: none;
|
||||
|
||||
&.btn {
|
||||
color: var(--neutral-10);
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip.top {
|
||||
margin-top: calc(var(--spacing-04) * -1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
padding: var(--spacing-01) var(--spacing-04) var(--spacing-04)
|
||||
var(--spacing-04);
|
||||
text-align: left;
|
||||
min-width: 300px;
|
||||
max-height: 800px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: var(--spacing-02);
|
||||
}
|
||||
|
||||
.test-card {
|
||||
text-align: left;
|
||||
color: var(--neutral-10);
|
||||
padding: var(--spacing-03);
|
||||
border: var(--spacing-01) solid var(--neutral-70);
|
||||
background-color: var(--bg-dark-secondary);
|
||||
border-radius: var(--border-radius-base);
|
||||
margin-top: var(--spacing-04);
|
||||
|
||||
&.override {
|
||||
border-color: var(--blue-40);
|
||||
}
|
||||
|
||||
.test-name {
|
||||
font-family: monospace;
|
||||
font-size: var(--font-size-01);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul {
|
||||
li.variant-row {
|
||||
line-height: var(--line-height-03);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-01) 0;
|
||||
|
||||
.btn-inline-link {
|
||||
color: var(--content-primary-dark) !important;
|
||||
opacity: 1;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
|
||||
.material-symbols {
|
||||
vertical-align: sub;
|
||||
font-weight: 400;
|
||||
font-size: var(--font-size-03);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: var(--spacing-04);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
#dictionary-modal {
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dictionary-entries-list {
|
||||
overflow-y: scroll;
|
||||
max-height: calc(100vh - 225px);
|
||||
margin: 0;
|
||||
padding: var(--spacing-04);
|
||||
}
|
||||
|
||||
.dictionary-entry {
|
||||
word-break: break-all;
|
||||
display: flex;
|
||||
padding: var(--spacing-04);
|
||||
border-bottom: solid 1px var(--border-divider);
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dictionary-entry-name {
|
||||
flex-grow: 1;
|
||||
padding-right: var(--spacing-02);
|
||||
}
|
||||
|
||||
.dictionary-empty-body {
|
||||
padding: var(--spacing-07);
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
$dropdown-item-min-height: 36px;
|
||||
|
||||
.dropdown {
|
||||
display: inline-flex;
|
||||
|
||||
.no-left-border {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.custom-toggle {
|
||||
&::after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
padding-left: var(--spacing-04);
|
||||
padding-right: var(--spacing-05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
@include body-xs;
|
||||
|
||||
min-height: $dropdown-item-min-height; // a minimum height of 36px to be accessible for touch screens
|
||||
padding: var(--spacing-05) var(--spacing-06) var(--spacing-02)
|
||||
var(--spacing-04);
|
||||
}
|
||||
|
||||
.dropdown-menu.dropdown-menu-unpositioned {
|
||||
position: unset;
|
||||
top: unset;
|
||||
left: unset;
|
||||
z-index: unset;
|
||||
display: block;
|
||||
float: unset;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include shadow-md;
|
||||
|
||||
min-width: 240px;
|
||||
|
||||
&.dropdown-menu-sm-width {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.subdued {
|
||||
color: var(--content-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@include body-sm;
|
||||
|
||||
--bs-dropdown-item-border-radius: var(--border-radius-base);
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
place-content: center start;
|
||||
min-height: $dropdown-item-min-height; // a minimum height of 36px to be accessible for touch screens
|
||||
position: relative;
|
||||
|
||||
&:active {
|
||||
background-color: var(--bg-accent-03);
|
||||
}
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&:visited {
|
||||
color: var(--neutral-90);
|
||||
}
|
||||
|
||||
&:hover:not(.active),
|
||||
&:focus:not(.active),
|
||||
&.nested-dropdown-toggle-shown {
|
||||
background-color: var(--bg-light-secondary);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
color: var(--content-danger);
|
||||
|
||||
&:hover:not(.active),
|
||||
&:focus:not(.active) {
|
||||
background-color: var(--bg-danger-03);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--bg-accent-03);
|
||||
color: var(--green-70);
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top-color: var(--border-divider);
|
||||
margin: var(--spacing-01) var(--spacing-03);
|
||||
}
|
||||
|
||||
.dropdown-item-description {
|
||||
@include body-xs;
|
||||
|
||||
color: var(--content-secondary);
|
||||
margin-top: var(--spacing-01);
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
.dropdown-item-description-container {
|
||||
grid-auto-flow: row;
|
||||
min-height: 44px;
|
||||
display: grid;
|
||||
place-content: center start;
|
||||
}
|
||||
|
||||
.dropdown-item-trailing-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.dropdown-item-leading-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: var(--spacing-04);
|
||||
|
||||
&.spinner {
|
||||
margin-left: var(--spacing-01);
|
||||
margin-right: var(--spacing-01);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item-leading-icon,
|
||||
.dropdown-item-trailing-icon {
|
||||
.material-symbols {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item-leading-icon-empty {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
// description text should look disabled when the dropdown item is disabled
|
||||
.dropdown-item.disabled .dropdown-item-description,
|
||||
.dropdown-item[aria-disabled='true'] .dropdown-item-description {
|
||||
background-color: transparent;
|
||||
color: var(--content-disabled);
|
||||
}
|
||||
|
||||
// override disabled styles when the state is active
|
||||
.dropdown-item.active .dropdown-item-description {
|
||||
background-color: initial;
|
||||
color: var(--green-70);
|
||||
}
|
||||
|
||||
.dropdown-button-toggle {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
padding-right: var(--spacing-05);
|
||||
padding-left: var(--spacing-05);
|
||||
margin-left: 0;
|
||||
|
||||
&.btn-primary,
|
||||
&.btn-danger {
|
||||
border-left: 1px solid rgb($neutral-90, 0.16);
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
border-left: 1px solid var(--neutral-60);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[aria-disabled='true'] {
|
||||
border-left: 1px solid var(--neutral-10);
|
||||
}
|
||||
}
|
||||
|
||||
.select-dropdown-menu {
|
||||
top: 100%;
|
||||
margin-top: var(--spacing-04);
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.dropdown-item-highlighted {
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
|
||||
.dropdown-item-material-icon-small {
|
||||
.material-symbols,
|
||||
&.material-symbols {
|
||||
font-size: var(--bs-body-font-size);
|
||||
|
||||
// Centre the symbol in a 20px-by-20px box
|
||||
width: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nested-dropdown-toggle {
|
||||
&::after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.error-boundary-alert {
|
||||
padding: var(--spacing-05);
|
||||
}
|
||||
|
||||
.error-boundary-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-06);
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.error-message {
|
||||
align-items: center;
|
||||
color: var(--content-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-02);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,464 @@
|
||||
@use 'sass:map';
|
||||
|
||||
// Max width of the sidebar
|
||||
$footer-width-delta: 320px;
|
||||
|
||||
@mixin footer-container-up($bp) {
|
||||
$size: map.get($grid-breakpoints, $bp);
|
||||
|
||||
@supports (container-type: inline-size) {
|
||||
@container fatfooter (width >= #{$size}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (container-type: inline-size) {
|
||||
@at-root {
|
||||
.project-ds-nav-page & {
|
||||
@media (min-width: #{$size + $footer-width-delta}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
:not(.project-ds-nav-page *) & {
|
||||
@media (min-width: #{$size}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin footer-container-down($bp) {
|
||||
$size: map.get($grid-breakpoints, $bp);
|
||||
|
||||
@supports (container-type: inline-size) {
|
||||
@container fatfooter (width < #{$size}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (container-type: inline-size) {
|
||||
@at-root {
|
||||
.project-ds-nav-page & {
|
||||
@media (max-width: #{$size + $footer-width-delta}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
:not(.project-ds-nav-page *) & {
|
||||
@media (max-width: #{$size}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer.site-footer {
|
||||
--link-color: var(--link-web);
|
||||
--link-hover-color: var(--link-web-hover);
|
||||
--link-visited-color: var(--link-web-visited);
|
||||
--link-text-decoration: none;
|
||||
--link-hover-text-decoration: underline;
|
||||
|
||||
background-color: var(--bg-light-primary);
|
||||
border-top: 1px solid var(--border-primary-dark);
|
||||
|
||||
@include body-sm;
|
||||
|
||||
min-height: $thin-footer-height;
|
||||
line-height: $thin-footer-height - 1; // Hack — in Chrome, using the full $footer-height would generate vertical scrolling
|
||||
|
||||
ul.site-footer-items {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
margin: 0 var(--spacing-04);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: var(--font-size-05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer-content {
|
||||
@extend .container-fluid;
|
||||
}
|
||||
|
||||
.sprite-icon-lang {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#language-picker-toggle {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.language-picker-text {
|
||||
text-decoration: var(--link-hover-text-decoration);
|
||||
}
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
vertical-align: -0.1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.language-picker .dropdown-menu {
|
||||
.dropdown-item {
|
||||
&.active {
|
||||
color: var(--green-70);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fat-footer {
|
||||
--footer-text-color: var(--content-secondary-dark);
|
||||
--footer-background-color: var(--bg-dark-primary);
|
||||
--link-color: var(--footer-text-color);
|
||||
--link-hover-color: var(--footer-text-color);
|
||||
--link-visited-color: var(--footer-text-color);
|
||||
--link-text-decoration: none;
|
||||
--link-hover-text-decoration: underline;
|
||||
|
||||
container-name: fatfooter;
|
||||
container-type: inline-size;
|
||||
background: var(--footer-background-color);
|
||||
color: var(--footer-text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.fat-footer-container {
|
||||
margin: var(--spacing-11) auto;
|
||||
|
||||
@include footer-container-down(sm) {
|
||||
margin: var(--spacing-11) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-brand-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fat-footer-sections {
|
||||
display: grid;
|
||||
column-gap: var(--spacing-07);
|
||||
padding: 0 var(--spacing-07) var(--spacing-07);
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: block;
|
||||
height: 37px;
|
||||
width: 130px;
|
||||
background-image: url('../../../../public/img/ol-brand/overleaf-white.svg');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
}
|
||||
|
||||
.footer-section-heading {
|
||||
color: var(--footer-text-color);
|
||||
|
||||
@include heading-sm;
|
||||
|
||||
margin-bottom: var(--spacing-07);
|
||||
margin-top: var(--spacing-07);
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
@include body-sm;
|
||||
}
|
||||
|
||||
.footer-section li {
|
||||
padding-bottom: var(--spacing-04);
|
||||
}
|
||||
|
||||
#footer-brand {
|
||||
grid-column: 1/-1;
|
||||
margin-top: var(--spacing-07);
|
||||
}
|
||||
|
||||
.fat-footer-base {
|
||||
color: var(--content-disabled);
|
||||
|
||||
@include body-sm;
|
||||
|
||||
#language-picker-toggle {
|
||||
color: var(--footer-text-color);
|
||||
}
|
||||
|
||||
.fat-footer-base-meta a:not(.dropdown-toggle) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.language-picker .dropdown-menu {
|
||||
.dropdown-header {
|
||||
display: none; /* hiding rather than removing as still needed in the thin footer */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fat-footer-base-item {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fat-footer-social {
|
||||
&.x-logo svg path {
|
||||
fill: var(--footer-text-color);
|
||||
}
|
||||
|
||||
&.facebook-logo svg,
|
||||
&.linkedin-logo svg {
|
||||
path.background {
|
||||
fill: var(--footer-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.facebook-logo svg {
|
||||
path.text {
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.linkedin-logo svg {
|
||||
path.text {
|
||||
fill: var(--footer-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include footer-container-down(md) {
|
||||
.fat-footer-sections {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(4, auto);
|
||||
}
|
||||
|
||||
.fat-footer-base {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.fat-footer-base-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fat-footer-base-social {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.fat-footer-base-meta {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.fat-footer-base-item {
|
||||
flex-wrap: wrap;
|
||||
padding: var(--spacing-02);
|
||||
margin: var(--spacing-06);
|
||||
}
|
||||
|
||||
.fat-footer-base-meta .fat-footer-base-item {
|
||||
gap: var(--spacing-09);
|
||||
justify-content: center;
|
||||
|
||||
@include footer-container-down(sm) {
|
||||
gap: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
|
||||
.fat-footer-base-social .fat-footer-base-item {
|
||||
gap: var(--spacing-07);
|
||||
margin-top: var(--spacing-00);
|
||||
}
|
||||
|
||||
.fat-footer-base-copyright {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include footer-container-up(md) {
|
||||
.fat-footer-container {
|
||||
width: (map.get($grid-breakpoints, 'md') - ($spacing-04 * 2));
|
||||
}
|
||||
|
||||
#footer-brand {
|
||||
grid-column: auto;
|
||||
grid-row: 1/-1;
|
||||
}
|
||||
|
||||
.fat-footer-sections {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(2, auto);
|
||||
}
|
||||
|
||||
.footer-section:last-of-type {
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
.fat-footer-base {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: var(--spacing-07) auto;
|
||||
|
||||
.fat-footer-base-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fat-footer-base-item {
|
||||
padding: var(--spacing-02);
|
||||
margin: var(--spacing-02);
|
||||
}
|
||||
|
||||
.fat-footer-base-meta .fat-footer-base-item {
|
||||
gap: var(--spacing-07);
|
||||
}
|
||||
|
||||
.fat-footer-social {
|
||||
margin: var(--spacing-07) var(--spacing-03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include footer-container-up(lg) {
|
||||
.fat-footer-container {
|
||||
width: (map.get($grid-breakpoints, 'lg') - $spacing-07);
|
||||
}
|
||||
|
||||
.fat-footer-sections {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@include footer-container-up(xl) {
|
||||
.fat-footer-container {
|
||||
width: (map.get($grid-breakpoints, 'xl') - $spacing-09);
|
||||
}
|
||||
|
||||
.fat-footer-sections {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.footer-section:last-of-type {
|
||||
grid-column: 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-banner {
|
||||
@include body-sm;
|
||||
|
||||
padding: var(--spacing-05) var(--spacing-07);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
color: var(--content-secondary);
|
||||
background: var(--bg-light-secondary);
|
||||
box-shadow: 0 -5px 8px 0 #0000001a;
|
||||
|
||||
.cookie-banner-actions {
|
||||
padding-top: var(--spacing-04);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.cookie-banner-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cookie-banner-actions {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
padding-top: var(--spacing-00);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.website-redesign-fat-footer,
|
||||
.website-redesign .fat-footer {
|
||||
--footer-text-color: var(--content-primary);
|
||||
|
||||
.fat-footer-container {
|
||||
@include footer-container-down(sm) {
|
||||
margin: var(--spacing-11) 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.fat-footer {
|
||||
background: var(--content-primary-dark);
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fat-footer-base {
|
||||
color: var(--content-primary);
|
||||
|
||||
#language-picker-toggle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// This is duplication of fill colours in the SVGs themselves. This could be fixed by using :has() but that's not
|
||||
// supported in older versions of browsers and these logos need to be correct.
|
||||
.fat-footer-social {
|
||||
&.x-logo svg path {
|
||||
fill: #0f1419;
|
||||
}
|
||||
|
||||
&.facebook-logo svg,
|
||||
&.linkedin-logo svg {
|
||||
path.text {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.facebook-logo svg {
|
||||
path.background {
|
||||
fill: #0866ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.linkedin-logo svg {
|
||||
path.background {
|
||||
fill: #0b66c3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
background-image: url('../../../../public/img/ol-brand/overleaf-black.svg');
|
||||
}
|
||||
|
||||
@include footer-container-down(sm) {
|
||||
.fat-footer-sections {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-template-rows: repeat(6, auto);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
.form-check-input {
|
||||
@function form-check-box-svg($color) {
|
||||
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
|
||||
}
|
||||
|
||||
@function form-check-radio-svg($color) {
|
||||
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$color}'/></svg>");
|
||||
}
|
||||
|
||||
@function form-check-indeterminate-svg($color) {
|
||||
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:not(:disabled) {
|
||||
border-color: var(--border-hover);
|
||||
|
||||
&:checked,
|
||||
&[type='checkbox']:indeterminate {
|
||||
background-color: var(--bg-accent-02);
|
||||
border-color: var(--bg-accent-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@include input-disabled-styles;
|
||||
|
||||
&[type='checkbox']:indeterminate {
|
||||
@include input-disabled-styles;
|
||||
|
||||
background-image: escape-svg(form-check-indeterminate-svg($neutral-40));
|
||||
}
|
||||
}
|
||||
|
||||
// Use disabled attribute in addition of :disabled pseudo-class
|
||||
// See: https://github.com/twbs/bootstrap/issues/28247
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
~ .form-check-label {
|
||||
color: $input-disabled-color;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&[type='checkbox'] {
|
||||
background-image: escape-svg(form-check-box-svg($neutral-40));
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
background-image: escape-svg(form-check-radio-svg($neutral-40));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
&::placeholder {
|
||||
color: var(--content-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fake disabled checkbox style
|
||||
.readonly-disabled-checkbox input.form-check-input {
|
||||
@include input-disabled-styles;
|
||||
|
||||
&:hover:not(:disabled):checked {
|
||||
@include input-disabled-styles;
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch {
|
||||
.form-check-input {
|
||||
--bs-form-check-bg: var(--bg-dark-tertiary);
|
||||
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.32;
|
||||
background-color: var(--bg-dark-tertiary);
|
||||
|
||||
&:checked {
|
||||
background-color: var(--bg-accent-01);
|
||||
background-image: #{escape-svg(
|
||||
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$component-active-color}'/></svg>")
|
||||
)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label-description {
|
||||
.form-text-inner {
|
||||
margin-top: var(--spacing-01) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-text {
|
||||
.form-control[disabled] ~ & {
|
||||
color: var(--content-disabled);
|
||||
}
|
||||
|
||||
.form-text-inner {
|
||||
display: flex;
|
||||
gap: var(--spacing-02);
|
||||
line-height: var(--line-height-02);
|
||||
margin-top: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
.form-label {
|
||||
&:has(+ .form-control[disabled], + .form-control-wrapper-disabled) {
|
||||
color: var(--content-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $form-group-margin-bottom;
|
||||
}
|
||||
|
||||
.form-control-wrapper {
|
||||
position: relative;
|
||||
|
||||
&.form-control-wrapper-disabled {
|
||||
.form-control-start-icon,
|
||||
.form-control-end-icon {
|
||||
& > * {
|
||||
color: var(--content-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-start-icon,
|
||||
.form-control-end-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-control-start-icon {
|
||||
left: 0;
|
||||
padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width));
|
||||
}
|
||||
|
||||
.form-control-end-icon {
|
||||
right: 0;
|
||||
padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));
|
||||
|
||||
.form-control-search-clear-btn {
|
||||
@include reset-button;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
--icon-width: 20px;
|
||||
--form-control-padding-x: var(--spacing-04);
|
||||
--form-control-icon-offset-y: var(--spacing-04);
|
||||
|
||||
&.form-control-wrapper-sm {
|
||||
--form-control-padding-x: var(--spacing-03);
|
||||
--form-control-icon-offset-y: var(--spacing-02);
|
||||
}
|
||||
|
||||
&.form-control-wrapper-lg {
|
||||
--form-control-padding-x: var(--spacing-05);
|
||||
--form-control-icon-offset-y: var(--spacing-05);
|
||||
}
|
||||
|
||||
.form-control-offset-start {
|
||||
padding-left: calc(
|
||||
var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
|
||||
var(--icon-width)
|
||||
);
|
||||
}
|
||||
|
||||
.form-control-offset-end {
|
||||
padding-right: calc(
|
||||
var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
|
||||
var(--icon-width)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
&:focus,
|
||||
&:invalid:focus,
|
||||
&.is-invalid:focus,
|
||||
&:focus-visible,
|
||||
&:invalid:focus-visible,
|
||||
&.is-invalid:focus-visible {
|
||||
color: $input-focus-color;
|
||||
background-color: $input-focus-bg;
|
||||
outline: 0;
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.website-redesign {
|
||||
label {
|
||||
color: $form-text-color;
|
||||
display: inline-block;
|
||||
margin-bottom: var(--spacing-02);
|
||||
font-weight: bold;
|
||||
|
||||
@include body-sm;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
margin-left: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
|
||||
%input-focus-style {
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: $form-check-input-focus-box-shadow;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Feedback states
|
||||
.has-success {
|
||||
@include form-control-validation($bg-accent-01);
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
@include form-control-validation($bg-warning-03);
|
||||
}
|
||||
|
||||
.has-error {
|
||||
@include form-control-validation($bg-danger-01);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
.gallery-search {
|
||||
margin-bottom: var(--spacing-16);
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-04);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.form-control-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
padding-top: var(--spacing-06);
|
||||
padding-right: var(--spacing-06);
|
||||
padding-bottom: var(--spacing-06);
|
||||
height: 48px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 544px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-hits {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-08);
|
||||
|
||||
.search-hits-loading,
|
||||
.search-hits-empty,
|
||||
.search-hit:first-of-type {
|
||||
margin-top: var(--spacing-16);
|
||||
}
|
||||
|
||||
.search-hit {
|
||||
display: flex;
|
||||
gap: var(--spacing-08);
|
||||
|
||||
.search-image {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: var(--neutral-90);
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--border-radius-base);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
img {
|
||||
@include shadow-md;
|
||||
|
||||
width: 185px;
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 35vw;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.08;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-title {
|
||||
margin-bottom: var(--spacing-04);
|
||||
max-width: $templates-search-max-width;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
@include heading-md;
|
||||
|
||||
line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow-y: hidden;
|
||||
color: var(--content-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
@include heading-sm;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
@include heading-xs;
|
||||
|
||||
line-clamp: 3;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-highlight {
|
||||
max-width: $templates-search-max-width;
|
||||
}
|
||||
|
||||
.search-author {
|
||||
display: block;
|
||||
|
||||
& + .badge-link-list {
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-official {
|
||||
margin-left: var(--spacing-06);
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
/* Styles for group-subscription members view */
|
||||
|
||||
.structured-list.managed-entities-list {
|
||||
/* Override scrolling behaviour on structured-list */
|
||||
overflow: initial;
|
||||
overflow-y: initial;
|
||||
overflow-x: initial;
|
||||
}
|
||||
|
||||
.managed-entities-list {
|
||||
vertical-align: middle;
|
||||
|
||||
.security-state-invite-pending {
|
||||
color: var(--content-disabled);
|
||||
}
|
||||
|
||||
.security-state-managed {
|
||||
color: var(--content-positive);
|
||||
}
|
||||
|
||||
.security-state-not-managed {
|
||||
color: var(--content-danger);
|
||||
}
|
||||
|
||||
.managed-entity-row {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.managed-user-security {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.managed-entities-table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.cell-checkbox {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.cell-email {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
&.group-sso-active .cell-email {
|
||||
width: 29%;
|
||||
}
|
||||
|
||||
.cell-name {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.cell-last-active {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.cell-security {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.cell-managed {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.cell-dropdown {
|
||||
width: 26%;
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cell-accepted-invite {
|
||||
width: 17%;
|
||||
}
|
||||
|
||||
&.managed-users-active {
|
||||
.cell-email {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
&.group-sso-active {
|
||||
.cell-checkbox {
|
||||
width: 3%;
|
||||
}
|
||||
|
||||
.cell-email {
|
||||
width: 37%;
|
||||
}
|
||||
|
||||
.cell-last-active {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.cell-name {
|
||||
width: 18%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.cell-checkbox {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.cell-email {
|
||||
width: 41%;
|
||||
}
|
||||
|
||||
&.group-sso-active .cell-email {
|
||||
width: 41%;
|
||||
}
|
||||
|
||||
.cell-name {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.cell-last-active {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.cell-security {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.cell-managed {
|
||||
width: 13%;
|
||||
}
|
||||
|
||||
.cell-dropdown {
|
||||
width: 19%;
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cell-accepted-invite {
|
||||
width: 17%;
|
||||
}
|
||||
|
||||
&.managed-users-active {
|
||||
.cell-email {
|
||||
width: 41%;
|
||||
}
|
||||
|
||||
&.group-sso-active {
|
||||
.cell-checkbox {
|
||||
width: 3%;
|
||||
}
|
||||
|
||||
.cell-email {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.cell-name {
|
||||
width: 18%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.managed-user-security {
|
||||
.material-symbols {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.icon-double-green-round-background {
|
||||
border-radius: 50%;
|
||||
background: var(--green-30);
|
||||
color: var(--dark-jungle-green);
|
||||
display: inline-flex;
|
||||
border: var(--spacing-04) solid var(--green-10);
|
||||
padding: var(--spacing-04);
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-large-purple-text {
|
||||
color: var(--sapphire-blue);
|
||||
|
||||
i {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.img-rounded {
|
||||
border-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
.images-border-radius-base {
|
||||
img {
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
.images-border-radius-medium {
|
||||
img {
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.images-border-radius-large {
|
||||
img {
|
||||
border-radius: var(--border-radius-large);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.input-suggestions {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-suggestions-main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.input-suggestions-shadow {
|
||||
background-color: $input-bg;
|
||||
color: var(--content-placeholder);
|
||||
|
||||
& + .input-suggestions-main {
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
:root {
|
||||
--integrations-panel-bg: var(--bg-dark-primary);
|
||||
--integrations-panel-color: var(--content-primary-dark);
|
||||
--integrations-panel-description-color: var(--content-secondary-dark);
|
||||
--integrations-panel-card-border: var(--border-divider-dark);
|
||||
--integrations-panel-card-button-hover-background: var(--bg-dark-secondary);
|
||||
--integrations-panel-card-button-background: var(--bg-dark-primary);
|
||||
--integrations-panel-badge-color: var(--content-primary);
|
||||
--integrations-panel-badge-background: var(--bg-light-tertiary);
|
||||
}
|
||||
|
||||
@include theme('light') {
|
||||
--integrations-panel-bg: var(--white);
|
||||
--integrations-panel-color: var(--content-primary);
|
||||
--integrations-panel-description-color: var(--content-secondary);
|
||||
--integrations-panel-card-border: var(--border-divider);
|
||||
--integrations-panel-card-button-hover-background: var(--bg-light-secondary);
|
||||
--integrations-panel-card-button-background: var(--white);
|
||||
--integrations-panel-badge-color: var(--content-primary);
|
||||
--integrations-panel-badge-background: var(--bg-light-tertiary);
|
||||
}
|
||||
|
||||
.integrations-panel {
|
||||
background-color: var(--integrations-panel-bg);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.integrations-panel-card-button {
|
||||
all: unset;
|
||||
background-color: var(--integrations-panel-card-button-background);
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: var(
|
||||
--integrations-panel-card-button-hover-background
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.integrations-panel-card-contents {
|
||||
display: flex;
|
||||
margin: 0 var(--spacing-04);
|
||||
padding: var(--spacing-04) 0;
|
||||
gap: var(--spacing-04);
|
||||
border-bottom: 1px solid var(--integrations-panel-card-border);
|
||||
}
|
||||
|
||||
.integrations-panel-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.material-symbols {
|
||||
background: linear-gradient(
|
||||
245.63deg,
|
||||
#214475 0%,
|
||||
#254c84 28.54%,
|
||||
#6597e0 96.69%
|
||||
);
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
|
||||
.integrations-panel-card-inner {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.integrations-panel-card-premium-badge.badge {
|
||||
color: var(--integrations-panel-badge-color);
|
||||
background-color: var(--integrations-panel-badge-background) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.integrations-panel-card-title {
|
||||
font-size: var(--font-size-02);
|
||||
color: var(--integrations-panel-color);
|
||||
}
|
||||
|
||||
.integrations-panel-card-description {
|
||||
font-size: var(--font-size-01);
|
||||
color: var(--integrations-panel-description-color);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
.interstitial {
|
||||
max-width: 400px;
|
||||
padding: var(--spacing-08);
|
||||
margin: 0 auto;
|
||||
background: var(--bg-light-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.logo {
|
||||
width: 130px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: var(--spacing-08);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.interstitial-header {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-02);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.link-sharing-invite {
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
|
||||
.link-sharing-invite-header {
|
||||
font-size: var(--font-size-07);
|
||||
line-height: var(--line-height-06);
|
||||
}
|
||||
}
|
||||
|
||||
.sharing-updates {
|
||||
h1 {
|
||||
// heading-sm
|
||||
font-size: var(--font-size-05);
|
||||
line-height: var(--line-height-04);
|
||||
color: var(--content-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.previous-page-link-container {
|
||||
margin-bottom: var(--spacing-09);
|
||||
}
|
||||
|
||||
.previous-page-link {
|
||||
@extend .link-black-text;
|
||||
@include body-sm;
|
||||
|
||||
i {
|
||||
margin-right: var(--spacing-02);
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@mixin list-checkmark {
|
||||
$icon-size: 24px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-top: var(--spacing-06);
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
min-height: $icon-size;
|
||||
background-size: $icon-size $icon-size;
|
||||
margin-bottom: var(--spacing-05);
|
||||
padding-left: calc(var(--spacing-05) + $icon-size);
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-checkmark-green {
|
||||
@include list-checkmark;
|
||||
|
||||
li {
|
||||
background: url('../../../../public/img/website-redesign/check-in-green-circle.svg')
|
||||
no-repeat left top;
|
||||
}
|
||||
}
|
||||
|
||||
.list-checkmark-blue {
|
||||
@include list-checkmark;
|
||||
|
||||
li {
|
||||
background: url('../../../../public/img/website-redesign/check-in-blue-circle.svg')
|
||||
no-repeat left top;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
.loading {
|
||||
display: inline-flex;
|
||||
|
||||
.spinner-border-sm,
|
||||
.spinner-border {
|
||||
// Ensure the thickness of the spinner is independent of the font size of its container
|
||||
font-size: var(--font-size-03);
|
||||
}
|
||||
|
||||
// Adjust the small spinner to be 25% larger than Bootstrap's default in each dimension
|
||||
.spinner-border-sm {
|
||||
--bs-spinner-width: 1.25rem;
|
||||
--bs-spinner-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.full-size-loading-spinner-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.menu-bar-toggle {
|
||||
border: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-02);
|
||||
font-size: var(--font-size-03);
|
||||
line-height: var(--line-height-03);
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
:root {
|
||||
--bs-heading-color: var(--content-primary);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.modal-dialog {
|
||||
@include modal-md;
|
||||
}
|
||||
|
||||
.modal-sm {
|
||||
@include modal-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.modal-md {
|
||||
@include modal-md;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.modal-lg {
|
||||
@include modal-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include shadow-lg;
|
||||
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
.modal-header {
|
||||
.modal-title {
|
||||
@include heading-sm;
|
||||
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: var(--spacing-06);
|
||||
gap: var(--spacing-04);
|
||||
|
||||
> * {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Git bridge modal
|
||||
.git-bridge-copy {
|
||||
background: var(--bg-light-secondary);
|
||||
color: var(--content-primary);
|
||||
padding: var(--spacing-05);
|
||||
border-radius: var(--border-radius-base);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-05);
|
||||
align-items: center;
|
||||
margin: var(--spacing-09) 0;
|
||||
|
||||
& code {
|
||||
color: var(--content-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.git-bridge-optional-tokens {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-07);
|
||||
margin: var(--spacing-09) 0;
|
||||
}
|
||||
|
||||
.git-bridge-optional-tokens-header {
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
.git-bridge-optional-tokens-actions {
|
||||
margin-top: var(--spacing-05);
|
||||
}
|
||||
|
||||
.upgrade-track-changes-modal {
|
||||
.teaser-title {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-05);
|
||||
margin-bottom: var(--spacing-05);
|
||||
margin-top: var(--spacing-05);
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
|
||||
ul.list-unstyled li {
|
||||
font-family: var(--font-sans);
|
||||
padding: var(--spacing-02) 0;
|
||||
color: var(--content-secondary);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-04);
|
||||
}
|
||||
|
||||
ul.list-unstyled li .check-icon {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
@import 'bootstrap-5/scss/functions';
|
||||
|
||||
:root {
|
||||
// Basics
|
||||
--navbar-item-spacing-horizontal: var(--spacing-06);
|
||||
--navbar-bg: var(--bg-dark-primary);
|
||||
--navbar-border: transparent;
|
||||
--navbar-padding-h: var(--spacing-05);
|
||||
--navbar-padding: 0 var(--navbar-padding-h);
|
||||
--navbar-brand-width: 130px;
|
||||
--navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-white.svg');
|
||||
|
||||
// Title, when used instead of a logo
|
||||
--navbar-title-font-size: var(--font-size-05);
|
||||
--navbar-title-color: var(--neutral-20);
|
||||
--navbar-title-color-hover: var(--neutral-40);
|
||||
|
||||
// Button-like top-level items
|
||||
--navbar-btn-font-size: #{$font-size-base};
|
||||
--navbar-btn-border-radius: #{$border-radius-full};
|
||||
--navbar-btn-border-width: #{$spacing-01};
|
||||
--navbar-btn-font-weight: #{$font-weight-base};
|
||||
--navbar-btn-padding-v: #{$spacing-02};
|
||||
--navbar-btn-padding-h: #{$spacing-06};
|
||||
--navbar-btn-line-height: #{$line-height-base};
|
||||
|
||||
// Properties of "subdued" items
|
||||
--navbar-subdued-padding: calc(
|
||||
var(--navbar-btn-padding-v) + var(--navbar-btn-border-width)
|
||||
)
|
||||
calc(var(--navbar-btn-padding-h) + 1px);
|
||||
--navbar-subdued-color: var(--white);
|
||||
--navbar-subdued-hover-bg: var(--white);
|
||||
--navbar-subdued-hover-color: var(--green-50);
|
||||
|
||||
// Properties of "primary" items
|
||||
--navbar-primary-color: var(--white);
|
||||
--navbar-primary-border-color: var(--green-50);
|
||||
--navbar-primary-bg: var(--green-50);
|
||||
--navbar-primary-hover-bg: var(--green-60);
|
||||
--navbar-primary-hover-border-color: var(--navbar-primary-hover-bg);
|
||||
|
||||
// Links
|
||||
--navbar-link-color: var(--white);
|
||||
--navbar-link-border-color: var(--navbar-link-color);
|
||||
--navbar-link-hover-color: var(--white);
|
||||
--navbar-link-hover-bg: var(--green-50);
|
||||
--navbar-link-hover-border-color: var(--navbar-link-hover-bg);
|
||||
|
||||
// Toggler
|
||||
--navbar-toggler-expanded-color: var(--navbar-link-color);
|
||||
--navbar-toggler-expanded-bg: var(--blue-60);
|
||||
|
||||
// Mobile view
|
||||
--navbar-hamburger-submenu-bg: var(--bg-dark-secondary);
|
||||
--navbar-hamburger-submenu-item-color: var(--navbar-link-color);
|
||||
--navbar-hamburger-submenu-item-hover-color: var(--navbar-link-color);
|
||||
--navbar-hamburger-submenu-item-hover-bg: var(--navbar-link-hover-bg);
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
display: block;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--spacing-04) var(--spacing-06);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: var(--bg-info-01);
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
&.disabled > a {
|
||||
color: var(--content-disabled);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--content-disabled);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open dropdowns
|
||||
.open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--bg-info-01);
|
||||
border-color: var(--link-ui);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
// Default navbar
|
||||
.navbar-default {
|
||||
background-color: var(--navbar-bg);
|
||||
border-color: var(--navbar-border);
|
||||
padding: var(--navbar-padding);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: $header-height;
|
||||
|
||||
.navbar-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
width: var(--navbar-brand-width);
|
||||
height: $header-height;
|
||||
padding: 0;
|
||||
background: var(--navbar-brand-image-url) no-repeat left center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
display: inline-block;
|
||||
font-size: var(--navbar-title-font-size);
|
||||
color: var(--navbar-title-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--navbar-title-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
> li {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
> .nav-link,
|
||||
> .dropdown-toggle {
|
||||
display: block;
|
||||
color: var(--navbar-link-color);
|
||||
background-color: transparent;
|
||||
padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
|
||||
margin-left: var(--navbar-item-spacing-horizontal);
|
||||
border: var(--navbar-btn-border-width) solid
|
||||
var(--navbar-link-border-color);
|
||||
border-radius: var(--navbar-btn-border-radius);
|
||||
font-size: var(--navbar-btn-font-size);
|
||||
font-weight: var(--navbar-btn-font-weight);
|
||||
line-height: var(--navbar-btn-line-height);
|
||||
text-decoration: none;
|
||||
|
||||
&.show,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--navbar-link-hover-color);
|
||||
background-color: var(--navbar-link-hover-bg);
|
||||
border-color: var(--navbar-link-hover-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.subdued > .nav-link,
|
||||
&.subdued > .dropdown-toggle {
|
||||
border: 0;
|
||||
color: var(--navbar-subdued-color);
|
||||
padding: var(--navbar-subdued-padding);
|
||||
margin-left: 0;
|
||||
|
||||
&.show,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--navbar-subdued-hover-color);
|
||||
background-color: var(--navbar-subdued-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&.primary > .nav-link {
|
||||
color: var(--navbar-primary-color);
|
||||
background-color: var(--navbar-primary-bg);
|
||||
border-color: var(--navbar-primary-border-color);
|
||||
|
||||
&.show,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--navbar-primary-hover-bg);
|
||||
border-color: var(--navbar-primary-hover-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
--bs-navbar-toggler-padding-x: var(--spacing-04);
|
||||
|
||||
color: var(--navbar-link-color);
|
||||
border-radius: var(--border-radius-base);
|
||||
border-width: 0;
|
||||
transition: 0.2s ease-out;
|
||||
|
||||
&:not(.collapsed) {
|
||||
color: var(--navbar-toggler-expanded-color);
|
||||
background-color: var(--navbar-toggler-expanded-bg);
|
||||
transition: 0.2s ease-in;
|
||||
}
|
||||
|
||||
& .material-symbols {
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: var(--navbar-border);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-only(lg) {
|
||||
:root {
|
||||
--navbar-btn-padding-h: #{$spacing-04};
|
||||
}
|
||||
}
|
||||
|
||||
// Different (stacked) layout for smaller screens
|
||||
@include media-breakpoint-down(lg) {
|
||||
.navbar-default .navbar-collapse {
|
||||
&.show {
|
||||
min-height: calc(100vh - $header-height);
|
||||
}
|
||||
|
||||
background-color: var(--navbar-bg);
|
||||
margin: 0 calc(-1 * var(--navbar-padding-h));
|
||||
z-index: 1;
|
||||
|
||||
.navbar-nav {
|
||||
> li {
|
||||
display: block;
|
||||
|
||||
> a,
|
||||
> .dropdown-toggle,
|
||||
> .nav-link {
|
||||
margin: 0;
|
||||
padding-top: var(--spacing-05);
|
||||
padding-bottom: var(--spacing-05);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// Dropdowns get custom display when collapsed
|
||||
.dropdown-menu.show {
|
||||
--bs-dropdown-spacer: 0;
|
||||
|
||||
box-shadow: none;
|
||||
background-color: var(--navbar-hamburger-submenu-bg);
|
||||
width: auto;
|
||||
|
||||
.dropdown-item {
|
||||
padding: var(--spacing-02) var(--spacing-06) var(--spacing-02)
|
||||
var(--spacing-08);
|
||||
|
||||
&:not(.disabled) {
|
||||
color: var(--navbar-hamburger-submenu-item-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--navbar-hamburger-submenu-item-hover-color);
|
||||
background-color: var(--navbar-hamburger-submenu-item-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Accessibility
|
||||
.skip-to-content {
|
||||
color: var(--navbar-link-color);
|
||||
background-color: var(--navbar-link-bg);
|
||||
border: var(--spacing-01) solid transparent;
|
||||
border-radius: var(--navbar-btn-border-radius);
|
||||
font-size: var(--navbar-btn-font-size);
|
||||
font-weight: var(--navbar-btn-font-weight);
|
||||
left: calc(var(--navbar-brand-width) + var(--spacing-09));
|
||||
line-height: var(--navbar-btn-line-height);
|
||||
padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
|
||||
position: absolute;
|
||||
top: -200px;
|
||||
z-index: 1;
|
||||
|
||||
&:focus {
|
||||
background-color: var(--navbar-link-hover-bg);
|
||||
border: var(--spacing-01) solid var(--navbar-link-hover-color);
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
top: calc(($header-height - 36px) / 2); // 36px is the height of the link
|
||||
}
|
||||
}
|
||||
|
||||
.website-redesign-navbar,
|
||||
.website-redesign .navbar-default {
|
||||
--navbar-title-color: var(--content-primary);
|
||||
--navbar-title-color-hover: var(--content-secondary);
|
||||
--navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-black.svg');
|
||||
--navbar-subdued-color: var(--content-primary);
|
||||
--navbar-subdued-hover-bg: var(--bg-dark-primary);
|
||||
--navbar-subdued-hover-color: var(--content-primary-dark);
|
||||
--navbar-bg: var(--bg-light-primary);
|
||||
|
||||
// Navbar links
|
||||
--navbar-link-color: var(--content-primary);
|
||||
--navbar-link-border-color: var(--border-primary);
|
||||
--navbar-link-hover-color: var(--navbar-link-color);
|
||||
--navbar-link-hover-bg: var(--bg-light-tertiary);
|
||||
--navbar-link-hover-border-color: var(--navbar-link-border-color);
|
||||
|
||||
// Toggler
|
||||
--navbar-toggler-expanded-color: var(--white);
|
||||
--navbar-toggler-expanded-bg: var(--bg-dark-primary);
|
||||
|
||||
// Mobile view
|
||||
--navbar-hamburger-submenu-bg: var(--bg-light-secondary);
|
||||
--navbar-hamburger-submenu-item-color: var(--navbar-link-color);
|
||||
--navbar-hamburger-submenu-item-hover-color: var(--white);
|
||||
--navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-primary);
|
||||
}
|
||||
@@ -0,0 +1,259 @@
|
||||
.notification-body {
|
||||
// will be deprecated once notifications moved to use .notification (see below)
|
||||
flex-grow: 1;
|
||||
width: 90%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-action {
|
||||
$line-height-computed: $font-size-base * $line-height-base; // 24px
|
||||
|
||||
// will be deprecated once notifications moved to use .notification (see below)
|
||||
margin-top: calc($line-height-computed / 2); // match paragraph padding
|
||||
order: 1;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-top: 0;
|
||||
order: 0;
|
||||
padding-left: $spacing-05;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-close {
|
||||
// will be deprecated once notifications moved to use .notification (see below)
|
||||
padding-left: $spacing-05;
|
||||
text-align: right;
|
||||
width: 10%;
|
||||
|
||||
button {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
float: right;
|
||||
padding: 5.5px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba($neutral-90, 0.08);
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
border-radius: $border-radius-base;
|
||||
color: var(--content-primary);
|
||||
display: flex;
|
||||
padding: 0 $spacing-06; // vertical padding added by elements within notification
|
||||
width: 100%;
|
||||
|
||||
a:not(.btn) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: $spacing-02;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
flex-grow: 0;
|
||||
padding: 18px $spacing-06 0 0;
|
||||
}
|
||||
|
||||
.notification-content-and-cta {
|
||||
// shared container to align cta with text on smaller screens
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-wrap: wrap;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
flex-grow: 1;
|
||||
padding: $spacing-06 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.notification-cta {
|
||||
padding-bottom: $spacing-06;
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-disclaimer {
|
||||
color: var(--neutral-60);
|
||||
font-size: $font-size-sm;
|
||||
padding-bottom: $spacing-06;
|
||||
}
|
||||
|
||||
.notification-close-btn {
|
||||
height: $spacing-12;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 0 0 $spacing-06;
|
||||
|
||||
button {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
float: right;
|
||||
padding: 5.5px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba($neutral-90, 0.08);
|
||||
color: var(--content-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.notification-type-info {
|
||||
background-color: var(--bg-info-03);
|
||||
border: 1px solid var(--blue-20);
|
||||
|
||||
.notification-icon {
|
||||
color: var(--blue-50);
|
||||
}
|
||||
}
|
||||
|
||||
&.notification-type-success {
|
||||
background-color: var(--bg-accent-03);
|
||||
border: 1px solid var(--green-20);
|
||||
|
||||
.notification-icon {
|
||||
color: var(--green-50);
|
||||
}
|
||||
}
|
||||
|
||||
&.notification-type-warning {
|
||||
background-color: var(--bg-warning-03);
|
||||
border: 1px solid var(--yellow-20);
|
||||
|
||||
.notification-icon {
|
||||
color: var(--yellow-40);
|
||||
}
|
||||
}
|
||||
|
||||
&.notification-type-error {
|
||||
background-color: var(--bg-danger-03);
|
||||
border: 1px solid var(--red-20);
|
||||
|
||||
.notification-icon {
|
||||
color: var(--red-50);
|
||||
}
|
||||
}
|
||||
|
||||
&.notification-type-offer {
|
||||
background-color: var(--bg-light-primary);
|
||||
border: 1px solid var(--neutral-20);
|
||||
|
||||
.notification-icon {
|
||||
color: var(--neutral-50);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&:not(.notification-cta-below-content) {
|
||||
.notification-content-and-cta {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.notification-cta {
|
||||
height: $spacing-12;
|
||||
padding-left: $spacing-06;
|
||||
padding-bottom: 0;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-with-scroll-margin {
|
||||
scroll-margin: $spacing-06;
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
.notification {
|
||||
margin-bottom: $spacing-07;
|
||||
}
|
||||
}
|
||||
|
||||
// Reconfirmation notification
|
||||
|
||||
.reconfirm-notification {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.fa-warning {
|
||||
margin-right: $spacing-05;
|
||||
}
|
||||
|
||||
.btn-reconfirm {
|
||||
float: right;
|
||||
margin-left: $spacing-05;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.group-invitation-cancel-subscription-notification-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Settings page
|
||||
.affiliations-table {
|
||||
.reconfirm-notification {
|
||||
margin: 0 auto $spacing-05 auto !important;
|
||||
padding: $spacing-07;
|
||||
}
|
||||
|
||||
.reconfirm-row {
|
||||
td {
|
||||
border: 0;
|
||||
|
||||
.alert {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:not(.alert) {
|
||||
.reconfirm-notification {
|
||||
background-color: var(--neutral-10);
|
||||
border-radius: $border-radius-base;
|
||||
|
||||
.fa-warning {
|
||||
color: var(--yellow-40);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
// Pagination (multiple pages)
|
||||
// --------------------------------------------------
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
|
||||
> a,
|
||||
> span,
|
||||
> button {
|
||||
position: relative;
|
||||
float: left; // Collapse white-space
|
||||
padding: var(--spacing-04) var(--spacing-06);
|
||||
line-height: var(--line-height-base);
|
||||
text-decoration: none;
|
||||
color: var(--neutral-90);
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--neutral-30);
|
||||
margin-left: -1px;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--neutral-90);
|
||||
background-color: var(--neutral-10);
|
||||
border-color: var(--neutral-30);
|
||||
text-decoration: none;
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
> a,
|
||||
> span,
|
||||
> button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a,
|
||||
> .active > span,
|
||||
> .active > button {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
color: var(--green-70);
|
||||
background-color: var(--green-10);
|
||||
border-color: var(--neutral-30);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.ellipses {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
:root {
|
||||
--panel-heading-color: var(--content-primary);
|
||||
--panel-heading-button-hover-color: var(--bg-light-tertiary);
|
||||
|
||||
@include theme('default') {
|
||||
.ide-redesign-main {
|
||||
--panel-heading-color: var(--content-primary-dark);
|
||||
--panel-heading-button-hover-color: var(--bg-dark-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
color: var(--panel-heading-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-03) var(--spacing-02);
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.panel-heading-label {
|
||||
font-size: var(--font-size-02);
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
text-align: start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-02);
|
||||
}
|
||||
|
||||
.panel-heading-close-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--panel-heading-color);
|
||||
padding: var(--spacing-01);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--panel-heading-button-hover-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.popover {
|
||||
@include shadow-md;
|
||||
@include dark-bg;
|
||||
|
||||
line-height: var(--line-height-02);
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: var(--spacing-02);
|
||||
font-weight: 600;
|
||||
|
||||
& + .popover-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
blockquote {
|
||||
p {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote.quote-large-text-centered {
|
||||
text-align: center;
|
||||
font-size: var(--font-size-07);
|
||||
font-weight: 600;
|
||||
line-height: var(--line-height-06);
|
||||
|
||||
// customize open/close quote placement.
|
||||
// Otherwise, close is after footer and before is above quote
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin-bottom: var(--spacing-08);
|
||||
|
||||
&::before {
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: close-quote;
|
||||
}
|
||||
}
|
||||
|
||||
.quote-img {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
height: 64px;
|
||||
max-width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
color: inherit;
|
||||
font-size: var(--font-size-03);
|
||||
font-weight: 400;
|
||||
line-height: var(--line-height-03);
|
||||
padding: var(--spacing-04) 0 0 0;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.quote-link {
|
||||
text-align: center;
|
||||
margin-top: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: var(--font-size-04);
|
||||
line-height: var(--line-height-04);
|
||||
|
||||
footer {
|
||||
font-size: var(--font-size-02);
|
||||
line-height: var(--line-height-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote.quote-left-green-border {
|
||||
border-left: 2px solid var(--green-60);
|
||||
text-align: left;
|
||||
font-size: var(--font-size-07);
|
||||
font-weight: 600;
|
||||
line-height: var(--line-height-06);
|
||||
color: var(--neutral-90);
|
||||
padding: var(--spacing-04) 0 var(--spacing-04) var(--spacing-06);
|
||||
|
||||
// customize open/close quote placement.
|
||||
// Otherwise, close is after footer and before is above quote
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.quote {
|
||||
&::before {
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: close-quote;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
@include heading-xs;
|
||||
|
||||
color: var(--neutral-70);
|
||||
font-weight: 400;
|
||||
margin: var(--spacing-09) 0 0 0;
|
||||
padding: 0;
|
||||
|
||||
&::before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
|
||||
.quote-link {
|
||||
margin-top: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.radio-chip {
|
||||
background: #fff;
|
||||
border: 1px solid var(--neutral-60);
|
||||
border-radius: var(--border-radius-full);
|
||||
color: var(--neutral-90);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-weight: 400;
|
||||
gap: var(--spacing-02);
|
||||
inline-size: fit-content;
|
||||
line-height: 1.4;
|
||||
padding: var(--spacing-04) var(--spacing-06) var(--spacing-04)
|
||||
var(--spacing-04);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--neutral-20);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: 0 0 0 2px var(--blue-30);
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
accent-color: var(--green-50);
|
||||
cursor: pointer;
|
||||
height: 16px;
|
||||
margin: var(--spacing-02);
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-chip[data-disabled='true'] {
|
||||
border-color: var(--neutral-20);
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
grid-gap: var(--spacing-06);
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-wrap: nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.recurly-element-card {
|
||||
height: 50px;
|
||||
border: 1px solid var(--neutral-60);
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
&.recurly-element-card-invalid {
|
||||
border-color: var(--red-50);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-trigger {
|
||||
cursor: default;
|
||||
|
||||
& + .form-control-end-icon {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select-highlighted {
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.stepper {
|
||||
display: flex;
|
||||
gap: var(--spacing-05);
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
|
||||
.step {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
background: var(--neutral-20);
|
||||
}
|
||||
|
||||
.step.completed {
|
||||
background: var(--green-50);
|
||||
}
|
||||
|
||||
.step.active {
|
||||
background: var(--green-20);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.text-with-bg {
|
||||
@include font-mono;
|
||||
|
||||
padding: 0 var(--spacing-04);
|
||||
border-radius: var(--border-radius-medium);
|
||||
margin-top: var(--spacing-02);
|
||||
|
||||
// will make all spans content inline while avoiding overflowing the viewport in mobile
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root
|
||||
// https://css-tricks.com/display-flow-root/
|
||||
display: inline flow-root;
|
||||
|
||||
&.tangerine-bg {
|
||||
background-color: var(--vivid-tangerine);
|
||||
}
|
||||
|
||||
&.purple-bg {
|
||||
background-color: var(--ceil);
|
||||
}
|
||||
|
||||
&.yellow-bg {
|
||||
background-color: var(--caramel);
|
||||
}
|
||||
|
||||
&.green-bg {
|
||||
background-color: var(--green-30);
|
||||
}
|
||||
}
|
||||
|
||||
.mono-text {
|
||||
@include font-mono;
|
||||
@include body-lg;
|
||||
|
||||
color: var(--green-60);
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eyebrow-text {
|
||||
@extend .mono-text;
|
||||
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-04);
|
||||
}
|
||||
|
||||
p:has(.eyebrow-text) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p:has(.eyebrow-text) + h1,
|
||||
p:has(.eyebrow-text) + h2,
|
||||
p:has(.eyebrow-text) + h3,
|
||||
p:has(.eyebrow-text) + h4,
|
||||
p:has(.eyebrow-text) + h5,
|
||||
p:has(.eyebrow-text) + h6 {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@use 'sass:color';
|
||||
|
||||
.system-messages {
|
||||
@include list-unstyled;
|
||||
|
||||
margin: 0;
|
||||
|
||||
.system-message {
|
||||
padding: var(--spacing-03) var(--spacing-05);
|
||||
background-color: var(--bg-info-01);
|
||||
color: var(--content-primary-dark);
|
||||
border-bottom: solid 1px color.adjust($blue-50, $lightness: 10%);
|
||||
|
||||
a {
|
||||
color: var(--content-primary-dark);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
.table-container {
|
||||
flex: 1;
|
||||
margin-bottom: var(--spacing-06);
|
||||
background-color: var(--white);
|
||||
padding: var(--spacing-04);
|
||||
|
||||
.table {
|
||||
margin-bottom: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
th,
|
||||
td {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th[scope='row'] {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
th {
|
||||
.form-label {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-table-button-toggle {
|
||||
@include action-button;
|
||||
|
||||
padding: var(--spacing-04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-container-bordered {
|
||||
padding: var(--spacing-04);
|
||||
border-color: $table-border-color;
|
||||
border-radius: var(--border-radius-base);
|
||||
border-width: var(--bs-border-width);
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
> tbody > tr:nth-of-type(#{$table-striped-order}) {
|
||||
&:hover > * {
|
||||
--#{$prefix}table-hover-bg: var(--bg-light-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.ol-tabs {
|
||||
--border-width-base: 3px;
|
||||
|
||||
.nav-tabs-container {
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: inline-flex;
|
||||
gap: var(--spacing-04);
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
border-bottom: var(--border-width-base) solid var(--border-divider);
|
||||
text-align: center;
|
||||
border-top: 2px solid transparent; // so that top focus border is visible
|
||||
min-width: max-content; // This is for horizontal scrolling
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
margin-bottom: calc(var(--border-width-base) * -0.6);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: var(--content-secondary);
|
||||
margin-right: unset;
|
||||
padding: var(--spacing-04);
|
||||
line-height: var(--line-height-03);
|
||||
text-decoration: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
background-color: unset;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-light-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include box-shadow-button-input;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li > a.active,
|
||||
li > button.active {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-bottom: 3px solid var(--green-50);
|
||||
color: var(--content-primary);
|
||||
}
|
||||
|
||||
&.align-left {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: var(--spacing-11);
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll the page up a bit to allow tab links to be shown when navigating to
|
||||
// a bookmarked tab hash
|
||||
[data-ol-bookmarkable-tabset] .tab-pane {
|
||||
scroll-margin-top: 120px;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.tooltip {
|
||||
line-height: 20px;
|
||||
|
||||
@include shadow-md;
|
||||
|
||||
&.#{$prefix}tooltip-top {
|
||||
bottom: -1px !important;
|
||||
}
|
||||
&.#{$prefix}tooltip-end {
|
||||
top: 1px !important;
|
||||
left: -1px !important;
|
||||
}
|
||||
&.#{$prefix}tooltip-bottom {
|
||||
top: -1px !important;
|
||||
}
|
||||
&.#{$prefix}tooltip-start {
|
||||
top: 1px !important;
|
||||
right: -1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
text-align: initial;
|
||||
|
||||
.tooltip-wide & {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.tos-agreement-notice {
|
||||
@include body-xs;
|
||||
|
||||
text-align: center;
|
||||
margin: var(--spacing-04) 0 0 0;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
.upgrade-prompt {
|
||||
border-radius: var(--border-radius-base);
|
||||
box-shadow: 0 4px 6px 0 #1e25301f;
|
||||
padding: var(--spacing-06);
|
||||
background-color: var(--white);
|
||||
container: inline-size; // Defines the parent as a container
|
||||
|
||||
.upgrade-prompt-card-container {
|
||||
@container (max-width: 700px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.upgrade-prompt-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.upgrade-prompt-summary {
|
||||
margin-bottom: var(--spacing-10);
|
||||
}
|
||||
|
||||
.upgrade-prompt-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--border-radius-medium);
|
||||
padding: var(--spacing-09);
|
||||
height: 100%;
|
||||
font-size: var(--font-size-02);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade-prompt-card-premium {
|
||||
border: 2px solid transparent;
|
||||
background:
|
||||
linear-gradient(white, white) padding-box,
|
||||
var(--premium-gradient) border-box;
|
||||
}
|
||||
|
||||
.upgrade-prompt-card-free {
|
||||
border: 2px solid var(--border-divider);
|
||||
}
|
||||
|
||||
.upgrade-prompt-price {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
.upgrade-prompt-price-number {
|
||||
@include heading-xl;
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.upgrade-prompt-list {
|
||||
margin-bottom: var(--spacing-08);
|
||||
|
||||
& .material-symbols {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
& li:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade-prompt-all-plans {
|
||||
@include body-xs;
|
||||
|
||||
margin-top: var(--spacing-07);
|
||||
margin-bottom: 0;
|
||||
|
||||
& .material-symbols {
|
||||
vertical-align: bottom;
|
||||
font-size: var(--font-size-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user