Commit 70e64a38 authored by Pooja Patel's avatar Pooja Patel 😊
Browse files

Fixed pipeline failure due to input styles and improved docs

parent bc75b08b
......@@ -16,6 +16,7 @@ Colors in buttons are also related to communicating messages to the users about
Use the `btn` class for a default button, and combine it with other colors if a color different than `gnome-blue` is needed. The `btn` class should always be used on the buttons variants described on the next topics, except for the `links`.
<br>
<div class="container flex-grow">
<button class="btn mr-2 my-2">GNOME Blue</button>
<button class="btn red mr-2 my-2">Red</button>
......@@ -23,6 +24,7 @@ Use the `btn` class for a default button, and combine it with other colors if a
<button class="btn yellow mr-2 my-2">Yellow</button>
<button class="btn green my-2">Green</button>
</div>
<br>
~~~html
<div class="container flex-grow">
<button class="btn mr-2 my-2">GNOME Blue</button>
......@@ -37,6 +39,7 @@ Use the `btn` class for a default button, and combine it with other colors if a
Outline buttons are used for secondary or tertiary actions. To use this variation, add `outline` class to the button and combine it with other colors.
<br>
<div class="container flex-grow">
<button class="btn outline mr-2 my-2">GNOME Blue</button>
<button class="btn outline-red mr-2 my-2">Red</button>
......@@ -44,6 +47,7 @@ Outline buttons are used for secondary or tertiary actions. To use this variatio
<button class="btn outline-yellow mr-2 my-2">Yellow</button>
<button class="btn outline-green mr-2 my-2">Green</button>
</div>
<br>
~~~html
<div class="container flex-grow">
<button class="btn outline mr-2 my-2">GNOME Blue</button>
......@@ -58,6 +62,7 @@ Outline buttons are used for secondary or tertiary actions. To use this variatio
Usually, squared buttons give a more serious feeling to the website. It can be used by default on the website (even combined with other variants like outlined) or it can be used in specific spots, but it is not recommended to be used next to a rounded button - it may cause inconsistency. Use `squared` class to produce this variant.
<br>
<div class="container flex-grow">
<button class="btn squared mr-2 my-2">GNOME Blue</button>
<button class="btn red squared mr-2 my-2">Red</button>
......@@ -65,6 +70,7 @@ Usually, squared buttons give a more serious feeling to the website. It can be u
<button class="btn outline-yellow squared mr-2 my-2">Yellow</button>
<button class="btn outline-green squared mr-2 my-2">Green</button>
</div>
<br>
~~~html
<div class="container flex-grow">
<button class="btn squared mr-2 my-2">GNOME Blue</button>
......@@ -79,6 +85,7 @@ Usually, squared buttons give a more serious feeling to the website. It can be u
Larger buttons can be used to draw user attention, while smaller buttons can be used to fit inside smaller spaces. Add `small` or `large` classes to produce buttons in different sizes, but be careful not to create inconsistency by placing buttons with different sizes close to each other.
<br>
<div class="container flex-grow">
<button class="btn small mr-2 my-2">Small</button>
<button class="btn red small mr-2 my-2">Small</button>
......@@ -86,7 +93,7 @@ Larger buttons can be used to draw user attention, while smaller buttons can be
<button class="btn outline-yellow small squared mr-2 my-2">Small</button>
<button class="btn outline-green small mr-2 my-2">Small</button>
</div>
<br>
<div class="container flex-grow">
<button class="btn large mr-2 my-2">Large</button>
<button class="btn red large mr-2 my-2">Large</button>
......@@ -94,6 +101,7 @@ Larger buttons can be used to draw user attention, while smaller buttons can be
<button class="btn outline-yellow large squared mr-2 my-2">Large</button>
<button class="btn outline-green large mr-2 my-2">Large</button>
</div>
<br>
~~~html
<div class="container flex-grow">
<button class="btn small mr-2 my-2">Small</button>
......@@ -102,7 +110,6 @@ Larger buttons can be used to draw user attention, while smaller buttons can be
<button class="btn outline-yellow small squared mr-2 my-2">Small</button>
<button class="btn outline-green small mr-2 my-2">Small</button>
</div>
<div class="container flex-grow">
<button class="btn large mr-2 my-2">Large</button>
<button class="btn red large mr-2 my-2">Large</button>
......@@ -116,6 +123,7 @@ Larger buttons can be used to draw user attention, while smaller buttons can be
When the user is forbidden to click some button, like when they need to fill a form before being able to click "Continue", it makes sense to show the user they can't click there. The disabled state can be added by using the `disabled` class.
<br>
<div class="container flex-grow">
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled small mr-2 my-2">Disabled</button>
......@@ -123,6 +131,7 @@ When the user is forbidden to click some button, like when they need to fill a f
<button class="btn disabled large squared mr-2 my-2">Disabled</button>
<button class="btn disabled large mr-2 my-2">Disabled</button>
</div>
<br>
~~~html
<div class="container flex-grow">
<button class="btn disabled small mr-2 my-2">Disabled</button>
......@@ -137,6 +146,7 @@ When the user is forbidden to click some button, like when they need to fill a f
Buttons placed in columns instead of next to each other need to have the same width, otherwise, they'll look disharmonious. You may want to change the width to make the button look aligned with the text or form above it too. For spacing references, check the [spacing](#spacing) page on this documentation.
<br>
<div class="container flex-grow">
<div class="flex-col w-64 mx-auto">
<button class="btn mr-2 my-2 w-full">GNOME Blue</button>
......@@ -146,6 +156,7 @@ Buttons placed in columns instead of next to each other need to have the same wi
<button class="btn green my-2 w-full">Green</button>
</div>
</div>
<br>
~~~html
<div class="container flex-grow">
<div class="flex-col w-64 mx-auto">
......@@ -157,10 +168,12 @@ Buttons placed in columns instead of next to each other need to have the same wi
</div>
</div>
~~~
## Links
link buttons behave like regular anchors but they have a special look - they are buttons with no background, borders, or shadows, but they respect buttons colors and have an underline hover effect. Use the `link` class combined with colors.
<br>
<div class="container flex-grow">
<button class="link mr-2 my-2">Link</button>
<button class="link gnome-blue mr-2 my-2">Link</button>
......@@ -170,6 +183,7 @@ link buttons behave like regular anchors but they have a special look - they are
<button class="link green mr-2 my-2">Link</button>
<button class="link white mr-2 my-2">Link</button>
</div>
<br>
~~~html
<div class="container flex-grow">
<button class="link mr-2 my-2">Link</button>
......
......@@ -9,31 +9,31 @@ permalink: /components/inputs
# Inputs
## Basic text
For single line inputs.
For single line inputs.
<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>
<br>
~~~html
<div class="flex flex-col w-1/2">
<label for="first-name" >First Name</label>
<label for="first-name">First Name</label>
<input type="text" id="first-name" class="mt-2" placeholder="Write your first name here">
</div>
~~~
## Text area
For multiline inputs.
For multi-line inputs.
<div class="flex flex-col my-4">
<label for="message" >Biography</label>
<textarea id="message" class="mt-2"></textarea>
</div>
<br>
~~~html
<div class="flex flex-col">
<label for="message" >Biography</label>
<label for="message">Biography</label>
<textarea id="message" class="mt-2"></textarea>
</div>
~~~
......@@ -44,6 +44,7 @@ For multiline inputs.
<label for="date">Birthday</label>
<input type="date" class="mt-2" id="date">
</div>
<br>
~~~html
<div class="flex flex-col ">
<label for="date">Birthday</label>
......@@ -57,6 +58,7 @@ For multiline inputs.
<label for="email" >Email</label>
<input type="email" class="mt-2" id="email" placeholder="your@email.com">
</div>
<br>
~~~html
<div class="flex flex-col w-1/2 my-4">
<label for="email" >Email</label>
......@@ -70,6 +72,7 @@ For multiline inputs.
<label for="password" >Password</label>
<input type="password" class="mt-2" id="password">
</div>
<br>
~~~html
<div class="flex flex-col w-1/2">
<label for="password" >Password</label>
......@@ -78,13 +81,13 @@ For multiline inputs.
~~~
## Invalid inputs
When some input has invalid data or is not filled, apply the `danger` class.
When some input has invalid data or is not filled, apply the `danger` class.
<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>
<br>
~~~html
<div class="flex flex-col w-1/2">
<label for="invalid">Invalid input</label>
......@@ -93,21 +96,21 @@ When some input has invalid data or is not filled, apply the `danger` class.
~~~
## Select
For predetermined options.
For pre-determined options.
<label for="select" class="mt-6">Select language</label>
<div class="flex-shrink w-1/3 inline-block relative mt-2 mb-4">
<select class="form-select cursor-pointer">
<div class="inline-block relative mt-2">
<select class="w-auto form-select cursor-pointer pr-8">
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<br>
~~~html
<label for="select" class="mt-6">Select language</label>
<div class="flex-shrink w-1/3 inline-block relative mt-2">
<select class="form-select cursor-pointer">
<div class="inline-block relative mt-2">
<select class="w-auto form-select cursor-pointer pr-8">
<option>English</option>
<option>French</option>
<option>Spanish</option>
......@@ -119,30 +122,31 @@ For predetermined options.
<div class="flex flex-col my-4">
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
<input type="checkbox" class="cursor-pointer" name="checkbox-group">
<span class="ml-2">Checkbox 1</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
<input type="checkbox" class="cursor-pointer" name="checkbox-group">
<span class="ml-2">Checkbox 2</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
<input type="checkbox" class="cursor-pointer" name="checkbox-group">
<span class="ml-2">Checkbox 3</span>
</div>
</div>
<br>
~~~html
<div class="flex flex-col">
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
<input type="checkbox" class="cursor-pointer" name="checkbox-group">
<span class="ml-2">Checkbox 1</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
<input type="checkbox" class="cursor-pointer" name="checkbox-group">
<span class="ml-2">Checkbox 2</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
<input type="checkbox" class="cursor-pointer" name="checkbox-group">
<span class="ml-2">Checkbox 3</span>
</div>
</div>
......@@ -152,30 +156,31 @@ For predetermined options.
<div class="flex flex-col my-4">
<div class="inline-flex items-center">
<input type="radio" class="form-radio cursor-pointer" name="radio-group">
<input type="radio" class="cursor-pointer" name="radio-group">
<span class="ml-2">Radio 1</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio cursor-pointer" name="radio-group">
<input type="radio" class="cursor-pointer" name="radio-group">
<span class="ml-2">Radio 2</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio cursor-pointer" name="radio-group">
<input type="radio" class="cursor-pointer" name="radio-group">
<span class="ml-2">Radio 3</span>
</div>
</div>
<br>
~~~html
<div class="flex flex-col">
<div class="inline-flex items-center">
<input type="radio" class="form-radio cursor-pointer" name="radio-group">
<input type="radio" class="cursor-pointer" name="radio-group">
<span class="ml-2">Radio 1</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio cursor-pointer" name="radio-group">
<input type="radio" class="cursor-pointer" name="radio-group">
<span class="ml-2">Radio 2</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio cursor-pointer" name="radio-group">
<input type="radio" class="cursor-pointer" name="radio-group">
<span class="ml-2">Radio 3</span>
</div>
</div>
......@@ -191,6 +196,7 @@ Refers to enabling or disabling options.
</div>
<label for="toggle">Toggle</label>
</div>
<br>
~~~html
<div>
<div class="toggle">
......@@ -205,20 +211,41 @@ Refers to enabling or disabling options.
### Regular search
![Regular search](../assets/regular-search.gif)
<div id="search" class="search mr-6 mb-4">
<span class="absolute inset-y-1 left-0 flex items-center px-1">
<svg class="search-icon" id="search-icon" 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" class="feather feather-search inline-block">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</span>
<input type="search" onfocus="addBlueToSearchIcon('search-icon')"
onfocusout="removeBlueFromSearchIcon('search-icon')" class="w-52" placeholder="Search for content">
</div>
<script>
function addBlueToSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
<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">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="search" class="static w-50"
onfocus="addBlueToSearchIcon('search-icon-input')"
onfocusout="removeBlueFromSearchIcon('search-icon-input')"
placeholder="Search for content">
function removeBlueFromSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
~~~html
<div id="search" class="search mr-6 mb-4">
<span class="absolute inset-y-1 left-0 flex items-center px-1">
<svg class="search-icon" id="search-icon" 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" class="feather feather-search inline-block">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</span>
<input type="search" onfocus="addBlueToSearchIcon('search-icon')"
onfocusout="removeBlueFromSearchIcon('search-icon')" class="w-52" placeholder="Search for content">
</div>
<script>
......@@ -258,31 +285,80 @@ Refers to enabling or disabling options.
</script>
~~~
### Collapsable Search
<h3 class="mt-8 mb-4">Collapsable Search</h3>
<div id="search" class="search mr-6 mb-2">
<span class="absolute inset-y-1 left-0 flex items-center px-1">
<svg class="search-icon cursor-pointer" id="collapsable-search-icon"
onclick="toggleSearchInputDisplay('collapsable-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" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</span>
<input type="search" id="collapsable-search" onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')" class="w-52"
placeholder="Search for content">
</div>
<script>
function toggleSearchInputDisplay(id) {
let collapsableSearch = document.getElementById(id);
console.log(collapsableSearch.style.display);
if (collapsableSearch.style.display === "block") {
hideSearchInput(id);
} else {
console.log("displaying");
collapsableSearch.style.display = "block";
collapsableSearch.focus();
addBlueToCollapsableSearchIcon(id + "-icon");
}
}
function hideSearchInput(id) {
let collapsableSearch = document.getElementById(id);
removeBlueFromCollapsableSearchIcon(id + "-icon");
if (!collapsableSearch.value) {
collapsableSearch.style.display = "none";
}
}
![Collapsable search](../assets/collapsable-search.gif)
function toggleSearchIconColor(id) {
let searchIcon = document.getElementById(id);
if (searchIcon.classList.contains("text-gnome-blue-500")) {
removeBlueFromCollapsableSearchIcon(id);
} else {
addBlueToCollapsableSearchIcon(id);
}
}
function addBlueToCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
<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"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<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-input" class="static w-50"
disabled="true"
onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')"
function removeBlueFromCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
<br>
~~~html
<div id="search" class="search mr-6 mb-2">
<span class="absolute inset-y-1 left-0 flex items-center px-1">
<svg class="search-icon cursor-pointer" id="collapsable-search-icon"
onclick="toggleSearchInputDisplay('collapsable-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" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</span>
<input type="search" id="collapsable-search" onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')" class="w-52"
placeholder="Search for content">
</div>
<script>
function addBlueToCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
......
input,
input[type='text'],
input[type='date'],
input[type='email'],
input[type='password'],
input[type='number'],
textarea,
select {
@apply form-input border border-gray-200 bg-white shadow text-gray-800 px-4 py-2;
@apply border border-gray-200 bg-white shadow text-gray-800 px-4 py-2 rounded;
&:focus {
@apply outline-none ring-3 ring-gnome-blue-500 ring-opacity-50;
@apply outline-none ring-3 ring-gnome-blue-500 ring-opacity-50 rounded;
}
&.danger {
@apply text-red-400 border border-red-400;
@apply text-red-400 border border-red-400 rounded;
&:focus {
@apply outline-none ring-3 ring-red-400 ring-opacity-50;
@apply outline-none ring-3 ring-red-400 ring-opacity-50 rounded;
}
}
}
.form-checkbox {
@apply text-gnome-blue-500;
input[type='checkbox'] {
@apply text-gnome-blue-500 rounded;
&:focus {
@apply outline-none ring-3 ring-gnome-blue-500 ring-opacity-50;
}
}
.form-radio {
input[type='radio'] {
@apply text-gnome-blue-500;
&:focus {
@apply outline-none ring-3 ring-gnome-blue-500 ring-opacity-50;
}
}
.toggle {
......@@ -48,8 +60,8 @@ select {
}
}
input[type=search] {
@apply pl-10 border-transparent shadow-none rounded-none transition duration-200 ease-in-out;
input[type='search'] {
@apply pl-8 border-transparent shadow-none rounded-none transition duration-200 ease-in-out;
@apply border-t-0 border-r-0 border-b-2 border-l-0 border-gray-900;
&:focus {
......@@ -58,16 +70,13 @@ input[type=search] {
}
}
input[type=date]{
@apply p-2 pl-5 w-40;
}
.search-icon {
@apply left-0 top-0 my-3 text-gray-900 h-5 w-5 inline-block items-center;
.search {
@apply relative;
}
&:focus {
@apply text-gnome-blue-500;
}
.search-input-icon {
@apply absolute h-5 w-5 text-gray-900 my-3 mx-2 bottom-0;
}
#collapsable-search-input {
......
Markdown is supported
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