3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 03:02:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 New UI for auth screens

Browse source
This commit is contained in:
alonso.torres 2023-11-30 00:16:38 +01:00
parent 727d3cfb77
commit fa711cdd75
37 changed files with 1074 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/app/main/ui/components/forms.cljs
View file

@ -54,11 +54,11 @@
help-icon' (cond
(and (= input-type "password")
(= @type' "password"))
i/eye
i/shown-refactor
(and (= input-type "password")
(= @type' "text"))
i/eye-closed
i/hide-refactor
:else
help-icon)
@ -137,23 +137,30 @@
:input-label is-text?
:radio-label is-radio?
:checkbox-label is-checkbox?)
:tab-index "0"
:tab-index "-1"
:for (name input-name)} label
(when is-checkbox?
[:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor])
[:> :input props]]
(if is-checkbox?
[:> :input props]
[:div {:class (stl/css :input-and-icon)}
[:> :input props]
(when help-icon'
[:span {:class (stl/css :help-icon)
:on-click (when (= "password" input-type)
swap-text-password)}
help-icon'])])]
(some? children)
[:label {:for (name input-name)}
[:> :input props]
children])
(when help-icon'
[:span {:class (stl/css :help-icon)
:on-click (when (= "password" input-type)
swap-text-password)}
help-icon'])
(cond
(and touched? (:message error))
[:div {:id (dm/str "error-" input-name)
@ -387,7 +394,7 @@
(true? (unchecked-get props "disabled")))
klass (dm/str class " " (if disabled? "btn-disabled" ""))
new-klass (if disabled? (stl/css :btn-disabled) class)
new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) ""))
on-key-down
(mf/use-fn

32
frontend/src/app/main/ui/components/forms.scss
View file

@ -10,8 +10,8 @@
.input-wrapper {
display: flex;
flex-direction: column;
gap: $s-6;
align-items: center;
position: relative;
.input-with-label {
@include flexColumn;
gap: $s-8;
@ -24,11 +24,13 @@
cursor: pointer;
color: var(--modal-title-foreground-color);
text-transform: uppercase;
input {
@extend .input-element;
color: var(--input-foreground-color-active);
width: calc(100% - $s-1);
margin-top: 0;
width: 100%;
height: 100%;
&:focus {
outline: none;
@ -41,9 +43,12 @@
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--input-foreground-color-active) !important;
-webkit-box-shadow: 0 0 0 28px var(--input-background-color) inset !important;
-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-background-color);
-webkit-background-clip: text;
transition: background-color 5000s ease-in-out 0s;
caret-color: var(--input-foreground-color-active);
}
}
&:global(.invalid) {
@ -54,15 +59,29 @@
}
}
.input-and-icon {
position: relative;
width: var(--input-width, calc(100% - $s-1));
min-width: var(--input-min-width);
height: var(--input-height, $s-32);
}
.help-icon {
cursor: pointer;
position: absolute;
right: $s-12;
top: calc(50% - $s-8);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
stroke: $df-secondary;
width: $s-16;
height: $s-16;
}
}
.error {
color: var(--input-border-color-error);
width: 100%;
font-size: $fs-14;
}
.hint {
@ -181,9 +200,6 @@
// SUBMIT-BUTTON
.btn-disabled {
@extend .button-disabled;
height: $s-32;
padding: $s-8 $s-24;
border-radius: $br-8;
}
// MULTI INPUT