Commit ed8e32e1 authored by Pranjay Pathak's avatar Pranjay Pathak Committed by Claudio W
Browse files

remove samples from documentation

parent 7447bac3
---
layout: default
title: Buttons
parent: Samples
nav_order: 1
permalink: /samples/buttons
---
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Buttons</h2>
<div class="container flex-grow">
<h3 class="py-2">Default</h3>
<button class="btn mr-2 my-2">GNOME Blue</button>
<button class="btn red mr-2 my-2">Red</button>
<button class="btn orange mr-2 my-2">Orange</button>
<button class="btn yellow mr-2 my-2">Yellow</button>
<button class="btn green my-2">Green</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Outline</h3>
<button class="btn outline mr-2 my-2">GNOME Blue</button>
<button class="btn outline-red mr-2 my-2">Red</button>
<button class="btn outline-orange mr-2 my-2">Orange</button>
<button class="btn outline-yellow mr-2 my-2">Yellow</button>
<button class="btn outline-green mr-2 my-2">Green</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Squared</h3>
<button class="btn squared mr-2 my-2">GNOME Blue</button>
<button class="btn red squared mr-2 my-2">Red</button>
<button class="btn outline-orange squared mr-2 my-2">Orange</button>
<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>
<div class="container flex-grow">
<h3 class="py-2">Other sizes</h3>
<button class="btn small mr-2 my-2">Small</button>
<button class="btn red small mr-2 my-2">Small</button>
<button class="btn outline-orange small squared mr-2 my-2">Small</button>
<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>
<button class="btn outline-orange large squared mr-2 my-2">Large</button>
<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>
<div class="container flex-grow">
<h3 class="py-2">Disabled</h3>
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled squared mr-2 my-2">Disabled</button>
<button class="btn disabled large squared mr-2 my-2">Disabled</button>
<button class="btn disabled large mr-2 my-2">Disabled</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Links & text</h3>
<button class="link mr-2 my-2">Link</button>
<button class="link gnome-blue mr-2 my-2">Link</button>
<button class="link red mr-2 my-2">Link</button>
<button class="link orange mr-2 my-2">Link</button>
<button class="link yellow mr-2 my-2">Link</button>
<button class="link green mr-2 my-2">Link</button>
<button class="link white mr-2 my-2">Link</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Customized width</h3>
<div class="flex-col w-64 mx-auto">
<button class="btn mr-2 my-2 w-full">GNOME Blue</button>
<button class="btn red mr-2 my-2 w-full">Red</button>
<button class="btn orange mr-2 my-2 w-full">Orange</button>
<button class="btn yellow mr-2 my-2 w-full">Yellow</button>
<button class="btn green my-2 w-full">Green</button>
</div>
</div>
</div>
</body>
~~~html
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Buttons</h2>
<div class="container flex-grow">
<h3 class="py-2">Default</h3>
<button class="btn mr-2 my-2">GNOME Blue</button>
<button class="btn red mr-2 my-2">Red</button>
<button class="btn orange mr-2 my-2">Orange</button>
<button class="btn yellow mr-2 my-2">Yellow</button>
<button class="btn green my-2">Green</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Outline</h3>
<button class="btn outline mr-2 my-2">GNOME Blue</button>
<button class="btn outline-red mr-2 my-2">Red</button>
<button class="btn outline-orange mr-2 my-2">Orange</button>
<button class="btn outline-yellow mr-2 my-2">Yellow</button>
<button class="btn outline-green mr-2 my-2">Green</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Squared</h3>
<button class="btn squared mr-2 my-2">GNOME Blue</button>
<button class="btn red squared mr-2 my-2">Red</button>
<button class="btn outline-orange squared mr-2 my-2">Orange</button>
<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>
<div class="container flex-grow">
<h3 class="py-2">Other sizes</h3>
<button class="btn small mr-2 my-2">Small</button>
<button class="btn red small mr-2 my-2">Small</button>
<button class="btn outline-orange small squared mr-2 my-2">Small</button>
<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>
<button class="btn outline-orange large squared mr-2 my-2">Large</button>
<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>
<div class="container flex-grow">
<h3 class="py-2">Disabled</h3>
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled squared mr-2 my-2">Disabled</button>
<button class="btn disabled large squared mr-2 my-2">Disabled</button>
<button class="btn disabled large mr-2 my-2">Disabled</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Links & text</h3>
<button class="link mr-2 my-2">Link</button>
<button class="link gnome-blue mr-2 my-2">Link</button>
<button class="link red mr-2 my-2">Link</button>
<button class="link orange mr-2 my-2">Link</button>
<button class="link yellow mr-2 my-2">Link</button>
<button class="link green mr-2 my-2">Link</button>
<button class="link white mr-2 my-2">Link</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Customized width</h3>
<div class="flex-col w-64 mx-auto">
<button class="btn mr-2 my-2 w-full">GNOME Blue</button>
<button class="btn red mr-2 my-2 w-full">Red</button>
<button class="btn orange mr-2 my-2 w-full">Orange</button>
<button class="btn yellow mr-2 my-2 w-full">Yellow</button>
<button class="btn green my-2 w-full">Green</button>
</div>
</div>
</div>
</body>
~~~
This diff is collapsed.
---
layout: default
title: Samples
permalink: /samples/
nav_order: 4
---
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mx-auto">GNOME UI Samples</h2>
<ul class="flex-col w-64 mx-auto my-4">
<li>
<a href="./typography/index.html">
<button class="btn my-2 w-full">Typography</button>
</a>
</li>
<li>
<a href="./colors/index.html">
<button class="btn my-2 w-full">Colors</button>
</a>
</li>
<li>
<a href="./buttons/index.html">
<button class="btn my-2 w-full">Buttons</button>
</a>
</li>
<li>
<a href="./inputs/index.html">
<button class="btn my-2 w-full">Inputs</button>
</a>
</li>
</ul>
</div>
</body>
~~~html
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mx-auto">GNOME UI Samples</h2>
<ul class="flex-col w-64 mx-auto my-4">
<li>
<a href="./typography/index.html">
<button class="btn my-2 w-full">Typography</button>
</a>
</li>
<li>
<a href="./colors/index.html">
<button class="btn my-2 w-full">Colors</button>
</a>
</li>
<li>
<a href="./buttons/index.html">
<button class="btn my-2 w-full">Buttons</button>
</a>
</li>
<li>
<a href="./inputs/index.html">
<button class="btn my-2 w-full">Inputs</button>
</a>
</li>
</ul>
</div>
</body>
~~~
---
layout: default
title: Inputs
nav_order: 3
parent: Samples
permalink: /samples/inputs
---
<div class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Inputs</h2>
<form class="flex flex-col">
<h3>This is a form</h3>
<div class="flex items-center justify-between">
<div class="flex flex-col w-1/2 mr-4">
<label for="first-name" class="mt-6">First Name</label>
<input type="text" id="first-name" class="mt-2" placeholder="Write your first name here">
</div>
<div class="flex flex-col w-1/2 ml-4">
<label for="last-name" class="mt-6">Last Name</label>
<input type="text" class="mt-2" id="last-name" placeholder="Write your last name here">
</div>
</div>
<label for="email" class="mt-6">Email</label>
<input type="email" class="mt-2" id="email">
<label for="password" class="mt-6">Password</label>
<input type="password" class="mt-2" id="password">
<label for="date" class="mt-6">Birthday</label>
<input type="date" class="mt-2" id="date">
<label for="invalid" class="mt-6">Invalid input</label>
<input type="email" class="mt-2 danger" id="invalid">
<label for="message" class="mt-6">Biography</label>
<textarea id="message" class="mt-2"></textarea>
<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">
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<label class="mt-6 items-center flex flex-col mr-auto">
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="checkbox-group">
<span class="ml-2">Checkbox 1</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="checkbox-group">
<span class="ml-2">Checkbox 2</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="checkbox-group">
<span class="ml-2">Checkbox 3</span>
</div>
</label>
<label class="mt-6 items-center flex flex-col mr-auto">
<div class="inline-flex items-center">
<input type="radio" class="form-radio" name="radio-group">
<span class="ml-2">Radio 1</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio" name="radio-group">
<span class="ml-2">Radio 2</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio" name="radio-group">
<span class="ml-2">Radio 3</span>
</div>
</label>
<label class="mt-6">
<div class="toggle">
<input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox" />
<label for="toggle" class="toggle-label"></label>
</div>
<label for="toggle">Toggle</label>
</label>
<label for="search" class="mt-8">Default search</label>
<div id="search" class="search mr-6 mb-8">
<input type="search" onfocus="addBlueToSearchIcon('search-icon')"
onfocusout="removeBlueFromSearchIcon('search-icon')" class="w-48" placeholder="Search for content">
<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">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<label for="search" class="mt-8">Collapsed search</label>
<div id="search" class="search mr-6 mb-8">
<input type="search" id="collapsable-search" onfocus="addBlueToSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromSearchIcon('collapsable-search-icon')" class="w-48"
placeholder="Search for content">
<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>
</div>
</form>
</div>
</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();
addBlueToSearchIcon(id + "-icon");
}
}
function hideSearchInput(id) {
let collapsableSearch = document.getElementById(id);
removeBlueFromSearchIcon(id + "-icon");
if (!collapsableSearch.value) {
collapsableSearch.style.display = "none";
}
}
function toggleSearchIconColor(id) {
let searchIcon = document.getElementById(id);
if (searchIcon.classList.contains("text-gnome-blue-500")) {
removeBlueFromSearchIcon(id);
} else {
addBlueToSearchIcon(id);
}
}
function addBlueToSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
function removeBlueFromSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
~~~html
<div class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Inputs</h2>
<form class="flex flex-col">
<h3>This is a form</h3>
<div class="flex items-center justify-between">
<div class="flex flex-col w-1/2 mr-4">
<label for="first-name" class="mt-6">First Name</label>
<input type="text" id="first-name" class="mt-2" placeholder="Write your first name here">
</div>
<div class="flex flex-col w-1/2 ml-4">
<label for="last-name" class="mt-6">Last Name</label>
<input type="text" class="mt-2" id="last-name" placeholder="Write your last name here">
</div>
</div>
<label for="email" class="mt-6">Email</label>
<input type="email" class="mt-2" id="email">
<label for="password" class="mt-6">Password</label>
<input type="password" class="mt-2" id="password">
<label for="date" class="mt-6">Birthday</label>
<input type="date" class="mt-2" id="date">
<label for="invalid" class="mt-6">Invalid input</label>
<input type="email" class="mt-2 danger" id="invalid">
<label for="message" class="mt-6">Biography</label>
<textarea id="message" class="mt-2"></textarea>
<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">
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<label class="mt-6 items-center flex flex-col mr-auto">
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox 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">
<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">
<span class="ml-2">Checkbox 3</span>
</div>
</label>
<label class="mt-6 items-center flex flex-col mr-auto">
<div class="inline-flex items-center">
<input type="radio" class="form-radio 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">
<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">
<span class="ml-2">Radio 3</span>
</div>
</label>
<label class="mt-6">
<div class="toggle">
<input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox" />
<label for="toggle" class="toggle-label"></label>
</div>
<label for="toggle">Toggle</label>
</label>
<label for="search" class="mt-8">Default search</label>
<div id="search" class="search mr-6 mb-8">
<input type="search" onfocus="addBlueToSearchIcon('search-icon')"
onfocusout="removeBlueFromSearchIcon('search-icon')" class="w-52" placeholder="Search for content">
<svg class="search-icon ml-2" 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">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<label for="search" class="mt-8">Collapsed search</label>
<div id="search" class="search mr-6 mb-8">
<input type="search" id="collapsable-search" onfocus="addBlueToSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromSearchIcon('collapsable-search-icon')" class="w-52"
placeholder="Search for content">
<svg class="search-icon cursor-pointer ml-2" 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>
</div>
</form>
</div>
</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();
addBlueToSearchIcon(id + "-icon");
}
}
function hideSearchInput(id) {
let collapsableSearch = document.getElementById(id);
removeBlueFromSearchIcon(id + "-icon");
if (!collapsableSearch.value) {
collapsableSearch.style.display = "none";
}
}
function toggleSearchIconColor(id) {
let searchIcon = document.getElementById(id);
if (searchIcon.classList.contains("text-gnome-blue-500")) {
removeBlueFromSearchIcon(id);
} else {
addBlueToSearchIcon(id);
}
}
function addBlueToSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
function removeBlueFromSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
~~~
---
layout: default
title: Typography
nav_order: 4
parent: Samples
permalink: /samples/typography
---
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Typography</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p class="text-2xl">Large text</p>
<p class="text-xl">Medium text</p>
<p class="text-base">Regular text</p>
<p class="text-sm">Small text</p>
</div>
</body>
~~~
~~~html
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Typography</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p class="text-2xl">Large text</p>
<p class="text-xl">Medium text</p>
<p class="text-base">Regular text</p>
<p class="text-sm">Small text</p>
</div>
</body>
~~~
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