penpot/frontend/src/app/main/ui/onboarding.scss
2024-03-01 11:04:24 +01:00

86 lines
1.6 KiB
SCSS

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss";
.modal-overlay {
@extend .modal-overlay-base;
}
.modal-container {
@extend .modal-container-base;
position: relative;
display: grid;
grid-template-columns: auto auto;
gap: $s-32;
padding-inline: $s-100;
padding-block-start: $s-100;
padding-block-end: $s-72;
margin: 0;
width: $s-960;
height: $s-632;
max-width: $s-960;
max-height: $s-632;
}
.modal-left {
width: $s-240;
margin-block-end: $s-64;
img {
width: $s-240;
height: 100%;
border-radius: $br-8 0 0 $br-8;
}
}
.modal-right {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: $s-40 auto auto auto $s-32;
gap: $s-24;
position: relative;
}
.release {
@include bodySmallTypography;
position: absolute;
top: calc(-1 * $s-28);
right: 0;
padding: $s-8;
color: var(--modal-text-foreground-color);
}
.modal-title {
@include bigTitleTipography;
color: var(--modal-title-foreground-color);
}
.modal-text,
.property-description {
@include bodyLargeTypography;
margin: 0;
color: var(--modal-text-foreground-color);
}
.modal-link {
@include bodyLargeTypography;
color: var(--modal-link-foreground-color);
margin: 0;
}
.text-wrapper {
@include flexColumn;
}
.property-title a {
@include medTitleTipography;
color: var(--modal-title-foreground-color);
}
.accept-btn {
@extend .modal-accept-btn;
justify-self: flex-end;
}