Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Teams
Engagement
Websites
GNOME HIG CSS Library
Commits
d42deb15
Commit
d42deb15
authored
Apr 02, 2021
by
Pranjay Pathak
Browse files
added spacing between element and its code snippet in input-documentaion
parent
ebe4653d
Changes
2
Hide whitespace changes
Inline
Side-by-side
documentation/components/inputs.md
View file @
d42deb15
...
...
@@ -12,7 +12,7 @@ permalink: /components/inputs
For single line inputs.
<div
class=
"flex flex-col w-1/2"
>
<div
class=
"flex flex-col w-1/2
my-4
"
>
<label
for=
"first-name"
>
First Name
</label>
<input
type=
"text"
id=
"first-name"
class=
"mt-2"
placeholder=
"Write your first name here"
>
</div>
...
...
@@ -27,7 +27,7 @@ For single line inputs.
For multiline inputs.
<div
class=
"flex flex-col"
>
<div
class=
"flex flex-col
my-4
"
>
<label
for=
"message"
>
Biography
</label>
<textarea
id=
"message"
class=
"mt-2"
></textarea>
</div>
...
...
@@ -40,7 +40,7 @@ For multiline inputs.
## Date
<div
class=
"flex flex-col"
>
<div
class=
"flex flex-col
my-4
"
>
<label
for=
"date"
>
Birthday
</label>
<input
type=
"date"
class=
"mt-2"
id=
"date"
>
</div>
...
...
@@ -53,12 +53,12 @@ For multiline inputs.
## Email
<div
class=
"flex flex-col w-1/2"
>
<div
class=
"flex flex-col w-1/2
my-4
"
>
<label
for=
"email"
>
Email
</label>
<input type="email" class="mt-2" id="email" placeholder="your@email.com">
</div>
~~~
html
<div
class=
"flex flex-col w-1/2"
>
<div
class=
"flex flex-col w-1/2
my-4
"
>
<label
for=
"email"
>
Email
</label>
<input
type=
"email"
class=
"mt-2"
id=
"email"
placeholder=
"your@email.com"
>
</div>
...
...
@@ -66,7 +66,7 @@ For multiline inputs.
## Password
<div
class=
"flex flex-col w-1/2"
>
<div
class=
"flex flex-col w-1/2
my-4
"
>
<label
for=
"password"
>
Password
</label>
<input
type=
"password"
class=
"mt-2"
id=
"password"
>
</div>
...
...
@@ -81,7 +81,7 @@ For multiline inputs.
When some input has invalid data or is not filled, apply the
`danger`
class.
<div
class=
"flex flex-col w-1/2"
>
<div
class=
"flex flex-col w-1/2
my-4
"
>
<label
for=
"invalid"
>
Invalid input
</label>
<input
type=
"email"
class=
"mt-2 danger"
id=
"invalid"
>
</div>
...
...
@@ -97,7 +97,7 @@ When some input has invalid data or is not filled, apply the `danger` class.
For predetermined options.
<label
for=
"select"
class=
"mt-6"
>
Select language
</label>
<div
class=
"flex-shrink w-1/3 inline-block relative mt-2"
>
<div
class=
"flex-shrink w-1/3 inline-block relative mt-2
mb-4
"
>
<select
class=
"form-select cursor-pointer"
>
<option>
English
</option>
<option>
French
</option>
...
...
@@ -117,7 +117,7 @@ For predetermined options.
## Checkbox
<div
class=
"flex flex-col"
>
<div
class=
"flex flex-col
my-4
"
>
<div
class=
"inline-flex items-center"
>
<input
type=
"checkbox"
class=
"form-checkbox cursor-pointer"
name=
"checkbox-group"
>
<span
class=
"ml-2"
>
Checkbox 1
</span>
...
...
@@ -150,7 +150,7 @@ For predetermined options.
## Radio button
<div
class=
"flex flex-col"
>
<div
class=
"flex flex-col
my-4
"
>
<div
class=
"inline-flex items-center"
>
<input
type=
"radio"
class=
"form-radio cursor-pointer"
name=
"radio-group"
>
<span
class=
"ml-2"
>
Radio 1
</span>
...
...
@@ -184,7 +184,7 @@ For predetermined options.
## Toggle/ switch
Refers to enabling or disabling options.
<div>
<div
class=
"my-4"
>
<div
class=
"toggle"
>
<input
type=
"checkbox"
name=
"toggle"
id=
"toggle"
class=
"toggle-checkbox"
/>
<label
for=
"toggle"
class=
"toggle-label"
></label>
...
...
@@ -207,9 +207,8 @@ Refers to enabling or disabling options.

<label
for=
"search"
>
Regular search
</label>
<div
id=
"search"
class=
"search"
>
<svg id="search-icon" class="feather feather-search search-icon "
<div
id=
"search"
class=
"search my-4"
>
<svg id="search-icon-input" class="search-input-icon feather feather-search"
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
...
...
@@ -217,8 +216,8 @@ Refers to enabling or disabling options.
<line
x1=
"21"
y1=
"21"
x2=
"16.65"
y2=
"16.65"
></line>
</svg>
<input type="search" class="static w-50"
onfocus="addBlueToSearchIcon('search-icon')"
onfocusout="removeBlueFromSearchIcon('search-icon')"
onfocus="addBlueToSearchIcon('search-
input-
icon')"
onfocusout="removeBlueFromSearchIcon('search-
input-
icon')"
placeholder="Search for content">
</div>
...
...
@@ -232,11 +231,9 @@ Refers to enabling or disabling options.
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
~~~
html
<label
for=
"search"
>
Regular search
</label>
<div
id=
"search"
class=
"search"
>
<svg
id=
"search-icon"
class=
"feather feather-search
search-icon
"
<svg
id=
"search-icon
-input
"
class=
"
search-input-icon
feather feather-search"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
fill=
"none"
stroke=
"currentColor"
stroke-width=
"2"
stroke-linecap=
"round"
stroke-linejoin=
"round"
>
...
...
@@ -244,8 +241,8 @@ Refers to enabling or disabling options.
<line
x1=
"21"
y1=
"21"
x2=
"16.65"
y2=
"16.65"
></line>
</svg>
<input
type=
"search"
class=
"static w-50"
onfocus=
"addBlueToSearchIcon('search-icon')"
onfocusout=
"removeBlueFromSearchIcon('search-icon')"
onfocus=
"addBlueToSearchIcon('search-icon
-input
')"
onfocusout=
"removeBlueFromSearchIcon('search-icon
-input
')"
placeholder=
"Search for content"
>
</div>
...
...
@@ -260,12 +257,15 @@ Refers to enabling or disabling options.
}
</script>
~~~
### CollapsableSearch
### Collapsable Search

<div
id=
"search"
class=
"search"
>
<svg id="collapse-search-icon" class="feather feather-search search-icon cursor-pointer z-10"
onclick="toggleSearchInputOpacity('collapsable-search')"
<div
id=
"search"
class=
"search my-4"
>
<svg id="collapsable-search-icon" class="feather feather-search search-input-icon cursor-pointer z-10"
onclick="toggleSearchInputOpacity('collapsable-search-input')"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24"
viewBox="0 0 24 24"
...
...
@@ -277,13 +277,21 @@ Refers to enabling or disabling options.
<circle
cx=
"11"
cy=
"11"
r=
"8"
></circle>
<line
x1=
"21"
y1=
"21"
x2=
"16.65"
y2=
"16.65"
></line>
</svg>
<input type="search" id="collapsable-search" class="static w-50"
<input type="search" id="collapsable-search
-input
" class="static w-50"
disabled="true"
onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')"
placeholder="Search for content">
</div>
<script>
function addBlueToCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
function removeBlueFromCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
function toggleSearchInputOpacity(id) {
let collapsableSearch = document.getElementById(id);
if (collapsableSearch.style.opacity == 1) {
...
...
@@ -295,22 +303,11 @@ Refers to enabling or disabling options.
collapsableSearch.focus();
}
}
function addBlueToCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
function removeBlueFromCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
~~~
html
<div
id=
"search"
class=
"search"
>
<svg
id=
"collapse-search-icon"
class=
"feather feather-search search-icon cursor-pointer z-10"
onclick=
"toggleSearchInputOpacity('collapsable-search')"
<svg
id=
"collaps
abl
e-search-icon"
class=
"feather feather-search search-
input-
icon cursor-pointer z-10"
onclick=
"toggleSearchInputOpacity('collapsable-search
-input
')"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
...
...
@@ -322,7 +319,7 @@ Refers to enabling or disabling options.
<circle
cx=
"11"
cy=
"11"
r=
"8"
></circle>
<line
x1=
"21"
y1=
"21"
x2=
"16.65"
y2=
"16.65"
></line>
</svg>
<input
type=
"search"
id=
"collapsable-search"
class=
"static w-50"
<input
type=
"search"
id=
"collapsable-search
-input
"
class=
"static w-50"
disabled=
"true"
onfocus=
"addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout=
"removeBlueFromCollapsableSearchIcon('collapsable-search-icon')"
...
...
src/components/input.pcss
View file @
d42deb15
...
...
@@ -59,17 +59,17 @@ input[type=search] {
}
input[type=date]{
@apply p-2 pl-5 w-40
;
@apply p-2 pl-5 w-40;
}
.search {
@apply relative;
}
.search-icon {
@apply absolute h-5 w-5 text-gray-900 my-3 mx-2 bottom-0
;
.search-
input-
icon {
@apply absolute h-5 w-5 text-gray-900 my-3 mx-2 bottom-0;
}
#collapsable-search {
#collapsable-search
-input
{
@apply opacity-0 transition-opacity duration-300;
}
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment