Skip to content
GitLab
Commit d42deb15 authored by Pranjay Pathak's avatar Pranjay Pathak
Browse files

added spacing between element and its code snippet in input-documentaion

parent ebe4653d
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.
![Regular search](../assets/regular-search.gif)
<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
![Collapsable search](../assets/collapsable-search.gif)
<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="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"
......@@ -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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment