Page MenuHomePhabricator

D680.id.diff
No OneTemporary

D680.id.diff

diff --git a/demo/labels.demo.html b/demo/labels.demo.html
--- a/demo/labels.demo.html
+++ b/demo/labels.demo.html
@@ -223,6 +223,15 @@
<input type="text" id="helloworld6" class="frm-ctrl" placeholder="" value="">
</div>
</div>
+
+ <div class="spacer medium"></div>
+
+ <div class="row s1">
+ <div class="span s1">
+ <label for="helloemail1">Email address</label>
+ <input type="email" id="helloemail1" class="frm-ctrl" placeholder="" value="">
+ </div>
+ </div>
<div class="spacer medium"></div>
@@ -273,6 +282,17 @@
</div>
</div>
</div>
+
+ <div class="spacer medium"></div>
+
+ <div class="row s1">
+ <div class="span s1">
+ <div class="frm-ctrl-outer">
+ <input type="email" id="helloemail2" class="frm-ctrl ctrl-borderless" placeholder="" value="">
+ <label for="helloemail2">Email address</label>
+ </div>
+ </div>
+ </div>
<div class="spacer medium"></div>
diff --git a/ui/form/_controls.scss b/ui/form/_controls.scss
--- a/ui/form/_controls.scss
+++ b/ui/form/_controls.scss
@@ -260,6 +260,11 @@
.frm-ctrl-outer label,
.frm-ctrl-outer input[type="text"].frm-ctrl,
.frm-ctrl-outer input[type="password"].frm-ctrl,
+.frm-ctrl-outer input[type="email"].frm-ctrl,
+.frm-ctrl-outer input[type="search"].frm-ctrl,
+.frm-ctrl-outer input[type="tel"].frm-ctrl,
+.frm-ctrl-outer input[type="url"].frm-ctrl,
+.frm-ctrl-outer input[type="number"].frm-ctrl,
.frm-ctrl-outer textarea.frm-ctrl,
.frm-ctrl-outer select.frm-ctrl {
display: inline-block;
@@ -289,19 +294,6 @@
appearance: none;
}
-.frm-ctrl-outer input[type="text"].frm-ctrl,
-.frm-ctrl-outer input[type="password"].frm-ctrl,
-.frm-ctrl-outer select,
-.frm-ctrl-outer textarea {
- min-width: 10rem;
- border-radius: .3rem;
- transition: .2s ease all;
-
- &.ctrl-android {
- border-radius: 0;
- }
-}
-
.frm-ctrl-outer textarea.frm-ctrl {
resize: vertical;
/*
@@ -328,27 +320,39 @@
}
-.frm-ctrl-outer input[type="text"].frm-ctrl:placeholder-shown:not(:focus) + label,
-.frm-ctrl-outer input[type="password"].frm-ctrl:placeholder-shown:not(:focus) + label,
-.frm-ctrl-outer textarea.frm-ctrl:placeholder-shown:not(:focus) + label {
- transform: scale(1);
- top: .3rem;
-}
+.frm-ctrl-outer input[type="text"],
+.frm-ctrl-outer input[type="password"],
+.frm-ctrl-outer input[type="email"],
+.frm-ctrl-outer input[type="search"],
+.frm-ctrl-outer input[type="tel"],
+.frm-ctrl-outer input[type="url"],
+.frm-ctrl-outer input[type="number"],
+.frm-ctrl-outer textarea
+{
+
+ min-width: 10rem;
+ border-radius: .3rem;
+ transition: .2s ease all;
-.frm-ctrl-outer input[type="text"].frm-ctrl:focus + label,
-.frm-ctrl-outer input[type="password"].frm-ctrl:focus + label,
-.frm-ctrl-outer textarea.frm-ctrl:focus + label {
- color: #1c89d6;
-}
+ &.ctrl-android {
+ border-radius: 0;
+ }
+
+ &.frm-ctrl:placeholder-shown:not(:focus) + label {
+ transform: scale(1);
+ top: .3rem;
+ }
-.frm-ctrl-outer input[type="text"].frm-ctrl.ctrl-borderless:focus + label,
-.frm-ctrl-outer input[type="password"].frm-ctrl.ctrl-borderless:focus + label,
-.frm-ctrl-outer textarea.frm-ctrl.ctrl-borderless:focus + label {
- color: #222;
-}
+ &.frm-ctrl:focus + label {
+ color: #1c89d6;
+ }
+
+ &.frm-ctrl.ctrl-borderless:focus + label {
+ color: #222;
+ }
+
+ &.frm-ctrl.ctrl-android:focus + label {
+ color: #222;
+ }
-.frm-ctrl-outer input[type="text"].frm-ctrl.ctrl-android:focus + label,
-.frm-ctrl-outer input[type="password"].frm-ctrl.ctrl-android:focus + label,
-.frm-ctrl-outer textarea.frm-ctrl.ctrl-android:focus + label {
- color: #222;
}

File Metadata

Mime Type
text/plain
Expires
Apr 11 2021, 10:19 AM (9 w, 2 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
7063
Default Alt Text
D680.id.diff (3 KB)

Event Timeline