Tim DownandCopybot
763bede00a
[web] CIAM design for Email confirmation form GitOrigin-RevId: 3e66c45fe20073eb0600b8243761dbe82d7dc6b2
166 lines
3.3 KiB
SCSS
166 lines
3.3 KiB
SCSS
@use 'sass:math';
|
|
|
|
.overleaf-ds-logo {
|
|
background-image: url('../../../frontend/js/shared/svgs/overleaf-a-ds-solution-mallard.svg');
|
|
}
|
|
|
|
.ciam-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ds-spacing-400);
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
gap: var(--ds-spacing-800);
|
|
}
|
|
}
|
|
|
|
.ciam-enabled {
|
|
@include ds-body-md-regular;
|
|
|
|
--password-visibility-toggle-width: calc(24px + 2 * var(--ds-spacing-250));
|
|
|
|
&,
|
|
h1 {
|
|
font-family: var(--ds-font-family-sans), sans-serif;
|
|
color: var(--ds-color-text-primary);
|
|
}
|
|
|
|
.ciam-container {
|
|
flex: 1 1 auto;
|
|
padding: 0 var(--ds-spacing-300);
|
|
}
|
|
|
|
.ciam-logo {
|
|
padding: var(--ds-spacing-800) 0 0 0;
|
|
text-align: center;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
padding-left: var(--ds-spacing-800);
|
|
padding-right: var(--ds-spacing-800);
|
|
}
|
|
}
|
|
|
|
.ciam-logo .brand {
|
|
flex-shrink: 0;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: contain;
|
|
height: 49px;
|
|
width: 107px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
height: 64px;
|
|
width: 130px;
|
|
margin: 9px 0; // Vertical margin isn't an exacting spacing value in the design
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
@include ds-heading-sm-semibold;
|
|
|
|
padding-bottom: var(--ds-spacing-200);
|
|
margin: 0;
|
|
}
|
|
|
|
.ciam-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ds-spacing-400);
|
|
background-color: var(--bg-light-primary);
|
|
box-shadow:
|
|
0 4px 6px -4px rgb(0 0 0 / 10%),
|
|
0 1px 29px -3px rgb(0 0 0 / 16%);
|
|
padding: var(--ds-spacing-800) var(--ds-spacing-400);
|
|
border-radius: var(--ds-border-radius-400);
|
|
max-width: 464px;
|
|
margin: 0 auto;
|
|
min-height: 500px;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
padding: var(--ds-spacing-1300);
|
|
}
|
|
|
|
.notification {
|
|
@include ds-body-sm-regular;
|
|
|
|
color: var(--ds-color-text-primary);
|
|
padding: 0 var(--ds-spacing-400);
|
|
border-width: 0;
|
|
border-radius: var(--ds-border-radius-200);
|
|
|
|
.notification-icon {
|
|
font-size: math.div(20em, 14);
|
|
}
|
|
|
|
.notification-content {
|
|
padding: var(--ds-spacing-400) 0;
|
|
}
|
|
|
|
&.notification-type-error {
|
|
background-color: var(--ds-color-red-50);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ciam-disclaimers p {
|
|
@include ds-body-sm-regular;
|
|
|
|
padding-bottom: var(--ds-spacing-250);
|
|
margin: 0;
|
|
}
|
|
|
|
.ciam-card-separator {
|
|
margin: var(--ds-spacing-500) 0;
|
|
height: 0;
|
|
border-top: solid 1px var(--ds-grey-20);
|
|
}
|
|
|
|
.ciam-card-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ds-spacing-250);
|
|
|
|
p {
|
|
@include ds-body-sm-regular;
|
|
|
|
color: var(--ds-color-text-secondary);
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.ciam-footer-ds-logo {
|
|
text-align: center;
|
|
padding: var(--ds-spacing-200) 0;
|
|
}
|
|
|
|
.ciam-stepper {
|
|
margin: 0;
|
|
height: 4px;
|
|
border-radius: var(--ds-border-radius-full);
|
|
|
|
.step {
|
|
background: var(--ds-color-neutral-200);
|
|
}
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
gap: var(--ds-spacing-600);
|
|
justify-content: center;
|
|
padding: var(--ds-spacing-300) 0;
|
|
margin: 0 auto;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
margin-left: var(--ds-spacing-800);
|
|
margin-right: var(--ds-spacing-800);
|
|
justify-content: start;
|
|
}
|
|
|
|
a {
|
|
@include ds-body-sm-regular;
|
|
}
|
|
}
|
|
}
|