mirror of
https://github.com/penpot/penpot.git
synced 2025-05-20 22:26:12 +02:00
♻️ Update onboarding modals
This commit is contained in:
Eva Marco
Andrey Antukh
parent
5590210088
commit
7624797acf
109 changed files with 1054 additions and 836 deletions
|
|
@ -12,46 +12,6 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.input-with-label {
|
||||
@include flexColumn;
|
||||
gap: $s-8;
|
||||
@include titleTipography;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $s-8;
|
||||
input {
|
||||
@extend .input-element;
|
||||
color: var(--input-foreground-color-active);
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 $s-16;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border-radius: $br-8;
|
||||
}
|
||||
}
|
||||
// Input autofill
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--input-foreground-color-active);
|
||||
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
-webkit-background-clip: text;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
caret-color: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
&.valid {
|
||||
input {
|
||||
border: $s-1 solid var(--input-border-color-success);
|
||||
|
|
@ -78,11 +38,52 @@
|
|||
}
|
||||
}
|
||||
|
||||
.input-with-label {
|
||||
@include flexColumn;
|
||||
gap: $s-8;
|
||||
@include bodyMedTipography;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $s-8;
|
||||
input {
|
||||
@extend .input-element;
|
||||
color: var(--input-foreground-color-active);
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 $s-8;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
border-radius: $br-8;
|
||||
}
|
||||
}
|
||||
// Input autofill
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--input-foreground-color-active);
|
||||
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
|
||||
border: $s-1 solid var(--input-border-color);
|
||||
-webkit-background-clip: text;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
caret-color: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
.input-and-icon {
|
||||
position: relative;
|
||||
width: var(--input-width, calc(100% - $s-1));
|
||||
min-width: var(--input-min-width);
|
||||
height: var(--input-height, $s-40);
|
||||
height: var(--input-height, $s-32);
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
|
|
@ -142,7 +143,7 @@
|
|||
}
|
||||
|
||||
.hint {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--modal-text-foreground-color);
|
||||
width: 99%;
|
||||
}
|
||||
|
|
@ -150,7 +151,7 @@
|
|||
.checkbox {
|
||||
@extend .input-checkbox;
|
||||
.checkbox-label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
|
|
@ -185,7 +186,7 @@
|
|||
background-color: var(--input-background-color);
|
||||
.main-content {
|
||||
@include flexColumn;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
|
|
@ -230,7 +231,7 @@
|
|||
|
||||
select {
|
||||
@extend .menu-dropdown;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -246,7 +247,7 @@
|
|||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
option {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
color: var(--title-foreground-color-hover);
|
||||
background-color: var(--menu-background-color);
|
||||
appearance: none;
|
||||
|
|
@ -271,7 +272,7 @@
|
|||
overflow-y: hidden;
|
||||
.inside-input {
|
||||
@include removeInputStyle;
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include textEllipsis;
|
||||
width: 100%;
|
||||
max-width: calc(100% - $s-1);
|
||||
|
|
@ -281,6 +282,7 @@
|
|||
padding: $s-8;
|
||||
margin: 0;
|
||||
border-radius: $br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color);
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
&:focus {
|
||||
|
|
@ -309,7 +311,7 @@
|
|||
border: $s-1 solid var(--pill-background-color);
|
||||
box-sizing: border-box;
|
||||
.text {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
padding-right: $s-8;
|
||||
color: var(--pill-foreground-color);
|
||||
}
|
||||
|
|
@ -342,15 +344,20 @@
|
|||
.custom-radio {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: $s-16;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
@include titleTipography;
|
||||
@include bodyMedTipography;
|
||||
@include flexRow;
|
||||
align-items: flex-start;
|
||||
gap: $s-8;
|
||||
min-height: $s-32;
|
||||
height: fit-content;
|
||||
border-radius: $br-8;
|
||||
padding: $s-0 $s-2;
|
||||
padding: $s-8;
|
||||
color: var(--input-foreground-color);
|
||||
border: $s-1 solid transparent;
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: none;
|
||||
|
|
@ -376,18 +383,16 @@
|
|||
}
|
||||
|
||||
.radio-label.with-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: $s-120;
|
||||
width: $s-140;
|
||||
padding: $s-64 $s-4 0 $s-4;
|
||||
margin-top: $s-16;
|
||||
margin-right: 0;
|
||||
@include smallTitleTipography;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 0px;
|
||||
justify-items: center;
|
||||
gap: 0;
|
||||
height: $s-116;
|
||||
width: $s-92;
|
||||
border-radius: $br-8;
|
||||
margin: 0;
|
||||
border: 1px solid var(--color-background-tertiary);
|
||||
background-size: 50px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 0.75rem;
|
||||
cursor: pointer;
|
||||
&:global(.checked) {
|
||||
border: 1px solid var(--color-accent-primary);
|
||||
|
|
@ -399,10 +404,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
.image-inside {
|
||||
width: $s-60;
|
||||
height: $s-48;
|
||||
background-size: $s-48;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.icon-inside {
|
||||
width: $s-60;
|
||||
height: $s-48;
|
||||
svg {
|
||||
width: $s-60;
|
||||
height: $s-48;
|
||||
stroke: var(--icon-foreground);
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
//TEXTAREA
|
||||
|
||||
.textarea-label {
|
||||
@include tabTitleTipography;
|
||||
@include uppercaseTitleTipography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: $s-8;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue