avvo-styleguide

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>kss-node Style Guide</title> <meta name="description" content=""> <meta name="generator" content="kss-node"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="kss-assets/kss.css"> <link rel="stylesheet" href="styles.css"> </head> <body id="kss-node" > <div class="kss-sidebar kss-style"> <header class="kss-header"> <h1 class="kss-doc-title">kss-node Style Guide</h1> </header> <nav class="kss-nav"> <ul class="kss-nav__menu"> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="./"> <span class="kss-nav__ref">0</span ><span class="kss-nav__name">Overview</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-spec.html"> <span class="kss-nav__ref">1</span><span class="kss-nav__name">KSS Spec</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-javascript-api.html"> <span class="kss-nav__ref">2</span><span class="kss-nav__name">JavaScript API</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-demo.html"> <span class="kss-nav__ref">3</span><span class="kss-nav__name">Demo</span> </a> <ul class="kss-nav__menu-child"> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-demo.html#kssref-demo-mixins"> <span class="kss-nav__ref ">3.1</span ><span class="kss-nav__name">Mixins</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-demo.html#kssref-demo-mixins-button-colorize"> <span class="kss-nav__ref kss-nav__ref-child">3.1.1</span ><span class="kss-nav__name">.button-colorize(@color)</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-demo.html#kssref-demo-mixins-example"> <span class="kss-nav__ref kss-nav__ref-child">3.1.2</span ><span class="kss-nav__name">.colors(@bg, @color)</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-demo.html#kssref-demo-components"> <span class="kss-nav__ref ">3.2</span ><span class="kss-nav__name">Components</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-demo.html#kssref-demo-components-buttons"> <span class="kss-nav__ref kss-nav__ref-child">3.2.1</span ><span class="kss-nav__name">Buttons</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-demo.html#kssref-demo-forms"> <span class="kss-nav__ref ">3.3</span ><span class="kss-nav__name">Forms</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-demo.html#kssref-demo-forms-text"> <span class="kss-nav__ref kss-nav__ref-child">3.3.1</span ><span class="kss-nav__name">Text Input</span> </a> </li> </ul> </li> </ul> </nav> </div> <article role="main" class="kss-main"> <div id="kssref-demo" class="kss-section kss-section--depth-1 "> <div class="kss-style"> <h1 class="kss-title kss-title--level-1"> <a class="kss-title__permalink" href="#kssref-demo"> <span class="kss-title__ref"> 3 <span class="kss-title__permalink-hash"> #demo </span> </span> Demo </a> </h1> <div class="kss-description"> <p>The source files for this demo can be found in the <a href="https://github.com/kss-node/kss-node/tree/master/demo">demo folder</a> on GitHub.</p> </div> </div> <div class="kss-source kss-style"> Source: <code>kss-headings.less</code>, line 27 </div> </div> <section id="kssref-demo-mixins" class="kss-section kss-section--depth-2 "> <div class="kss-style"> <h2 class="kss-title kss-title--level-2"> <a class="kss-title__permalink" href="#kssref-demo-mixins"> <span class="kss-title__ref"> 3.1 <span class="kss-title__permalink-hash"> #demo.mixins </span> </span> Mixins </a> </h2> <div class="kss-description"> <p>LESS mixins used in this demo.</p> </div> </div> <div class="kss-source kss-style"> Source: <code>styles.less</code>, line 1 </div> </section> <section id="kssref-demo-mixins-button-colorize" class="kss-section kss-section--depth-3 "> <div class="kss-style"> <h3 class="kss-title kss-title--level-3"> <a class="kss-title__permalink" href="#kssref-demo-mixins-button-colorize"> <span class="kss-title__ref"> 3.1.1 <span class="kss-title__permalink-hash"> #demo.mixins.button-colorize </span> </span> .button-colorize(@color) </a> </h3> <div class="kss-description"> <p>Creates button styling with the specified color.</p> </div> <div class="kss-parameters__title">Parameters:</div> <ul class="kss-parameters"> <li class="kss-parameters__item"> <div class="kss-parameters__name"><code>@color</code></div> <div class="kss-parameters__description"> Button color. </div> </li> </ul> </div> <div class="kss-source kss-style"> Source: <code>components/buttons.less</code>, line 61 </div> </section> <section id="kssref-demo-mixins-example" class="kss-section kss-section--depth-3 "> <div class="kss-style"> <h3 class="kss-title kss-title--level-3"> <a class="kss-title__permalink" href="#kssref-demo-mixins-example"> <span class="kss-title__ref"> 3.1.2 <span class="kss-title__permalink-hash"> #demo.mixins.example </span> </span> .colors(@bg, @color) </a> </h3> <div class="kss-description"> <p>Applies foreground and background colors.</p> </div> <div class="kss-parameters__title">Parameters:</div> <ul class="kss-parameters"> <li class="kss-parameters__item"> <div class="kss-parameters__name"><code>@bg</code></div> <div class="kss-parameters__description"> Background color. <div class="kss-parameters__default-value"> Defaults to: <code>#f5f5f5</code> </div> </div> </li> <li class="kss-parameters__item"> <div class="kss-parameters__name"><code>@color</code></div> <div class="kss-parameters__description"> Foreground color. <div class="kss-parameters__default-value"> Defaults to: <code>#900</code> </div> </div> </li> </ul> </div> <div class="kss-source kss-style"> Source: <code>mixins/example.less</code>, line 1 </div> </section> <section id="kssref-demo-components" class="kss-section kss-section--depth-2 "> <div class="kss-style"> <h2 class="kss-title kss-title--level-2"> <a class="kss-title__permalink" href="#kssref-demo-components"> <span class="kss-title__ref"> 3.2 <span class="kss-title__permalink-hash"> #demo.components </span> </span> Components </a> </h2> <div class="kss-description"> <p>Reusable components that can be used across the site. So far this just includes buttons.</p> </div> </div> <div class="kss-source kss-style"> Source: <code>styles.less</code>, line 10 </div> </section> <section id="kssref-demo-components-buttons" class="kss-section kss-section--depth-3 "> <div class="kss-style"> <h3 class="kss-title kss-title--level-3"> <a class="kss-title__permalink" href="#kssref-demo-components-buttons"> <span class="kss-title__ref"> 3.2.1 <span class="kss-title__permalink-hash"> #demo.components.buttons </span> </span> Buttons </a> </h3> <p class="kss-toolbar"> <a href="#kssref-demo-components-buttons" data-kss-fullscreen="kssref-demo-components-buttons"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-demo-components-buttons.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-demo-components-buttons" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-demo-components-buttons" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>A majority of buttons in the site are built from the same base class.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Examples </div> <div class="kss-modifier__default-name kss-style"> Default styling </div> <div class="kss-modifier__example"> <a href="#" class="button ">Link Button</a> <button class="button ">Button Element</button> <input type="button" class="button " value="input[type='button']"/> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .primary </div> <div class="kss-modifier__description kss-style"> Use this class to indicate that the button is the primary feature of this form. </div> <div class="kss-modifier__example"> <a href="#" class="button primary">Link Button</a> <button class="button primary">Button Element</button> <input type="button" class="button primary" value="input[type='button']"/> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .remove </div> <div class="kss-modifier__description kss-style"> Use this class to indicate that the button will remove a feature, or other negative connotations. </div> <div class="kss-modifier__example"> <a href="#" class="button remove">Link Button</a> <button class="button remove">Button Element</button> <input type="button" class="button remove" value="input[type='button']"/> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> :hover </div> <div class="kss-modifier__description kss-style"> Highlight the button when hovered. </div> <div class="kss-modifier__example"> <a href="#" class="button pseudo-class-hover">Link Button</a> <button class="button pseudo-class-hover">Button Element</button> <input type="button" class="button pseudo-class-hover" value="input[type='button']"/> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> :disabled </div> <div class="kss-modifier__description kss-style"> Make the button change appearance to reflect it being disabled. </div> <div class="kss-modifier__example"> <a href="#" class="button pseudo-class-disabled">Link Button</a> <button class="button pseudo-class-disabled">Button Element</button> <input type="button" class="button pseudo-class-disabled" value="input[type='button']"/> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> :active </div> <div class="kss-modifier__description kss-style"> "Press" the button down when clicked. </div> <div class="kss-modifier__example"> <a href="#" class="button pseudo-class-active">Link Button</a> <button class="button pseudo-class-active">Button Element</button> <input type="button" class="button pseudo-class-active" value="input[type='button']"/> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup: <code>components/buttons.hbs</code> </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><a href="#" class="button {{modifier_class}}">Link Button</a> <button class="button {{modifier_class}}">Button Element</button> <input type="button" class="button {{modifier_class}}" value="input[type='button']"/> </code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/buttons.less</code>, line 1 </div> </section> <section id="kssref-demo-forms" class="kss-section kss-section--depth-2 "> <div class="kss-style"> <h2 class="kss-title kss-title--level-2"> <a class="kss-title__permalink" href="#kssref-demo-forms"> <span class="kss-title__ref"> 3.3 <span class="kss-title__permalink-hash"> #demo.forms </span> </span> Forms </a> </h2> <p class="kss-toolbar"> <a href="#kssref-demo-forms" data-kss-fullscreen="kssref-demo-forms"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-demo-forms.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-demo-forms" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-demo-forms" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>Covers styles used for forms, such as the <code><input></code> and <code><select></code> elements.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <form> <p><input type="text" class="" value="Text input"/></p> <div class="mod-input text "> <label>Text Label</label> <input type="text" class="" value="Text input"/></div> <p> <a href="#" class="button ">Link Button</a> <button class="button ">Button Element</button> <input type="button" class="button " value="input[type='button']"/> </p> </form> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup: <code>forms/forms.hbs</code> </summary> <pre class="prettyprint linenums lang-html"><code data-language="html">{{!-- Handlebars partials can nest other section's partials. --}} <form> <p>{{> "demo.forms.text.single-line" }}</p> {{> "demo.forms.text.label-pairs" }} <p> {{> "buttons" }} </p> </form> </code></pre> </details> <div class="kss-source kss-style"> Source: <code>styles.less</code>, line 18 </div> </section> <section id="kssref-demo-forms-text" class="kss-section kss-section--depth-3 "> <div class="kss-style"> <h3 class="kss-title kss-title--level-3"> <a class="kss-title__permalink" href="#kssref-demo-forms-text"> <span class="kss-title__ref"> 3.3.1 <span class="kss-title__permalink-hash"> #demo.forms.text </span> </span> Text Input </a> </h3> <div class="kss-description"> <p>Below are the text-oriented form elements used on the site.</p> </div> </div> <div class="kss-source kss-style"> Source: <code>forms/base.less</code>, line 1 </div> </section> <section id="kssref-demo-forms-text-single-line" class="kss-section kss-section--depth-4 "> <div class="kss-style"> <h4 class="kss-title kss-title--level-4"> <a class="kss-title__permalink" href="#kssref-demo-forms-text-single-line"> <span class="kss-title__ref"> 3.3.1.1 <span class="kss-title__permalink-hash"> #demo.forms.text.single-line </span> </span> Single-Line Text Boxes </a> </h4> <p class="kss-toolbar"> <a href="#kssref-demo-forms-text-single-line" data-kss-fullscreen="kssref-demo-forms-text-single-line"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-demo-forms-text-single-line.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-demo-forms-text-single-line" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-demo-forms-text-single-line" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>Your standard, everyday text boxes.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Examples </div> <div class="kss-modifier__default-name kss-style"> Default styling </div> <div class="kss-modifier__example"> <input type="text" class="" value="Text input"/> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> :hover </div> <div class="kss-modifier__description kss-style"> Highlight the text box when hovering </div> <div class="kss-modifier__example"> <input type="text" class="pseudo-class-hover" value="Text input"/> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> :focus </div> <div class="kss-modifier__description kss-style"> Similar to <code>:hover</code>, however it should demand more attention than when an input is simply hovered. </div> <div class="kss-modifier__example"> <input type="text" class="pseudo-class-focus" value="Text input"/> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> :disabled </div> <div class="kss-modifier__description kss-style"> When disabled, the input's appearance should reflect as such. </div> <div class="kss-modifier__example"> <input type="text" class="pseudo-class-disabled" value="Text input"/> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><input type="text" class="[modifier class]" value="Text input"/></code></pre> </details> <div class="kss-source kss-style"> Source: <code>forms/base.less</code>, line 8 </div> </section> <section id="kssref-demo-forms-text-label-pairs" class="kss-section kss-section--depth-4 "> <div class="kss-style"> <h4 class="kss-title kss-title--level-4"> <a class="kss-title__permalink" href="#kssref-demo-forms-text-label-pairs"> <span class="kss-title__ref"> 3.3.1.2 <span class="kss-title__permalink-hash"> #demo.forms.text.label-pairs </span> </span> Label/Text box Pairs </a> </h4> <p class="kss-toolbar"> <a href="#kssref-demo-forms-text-label-pairs" data-kss-fullscreen="kssref-demo-forms-text-label-pairs"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-demo-forms-text-label-pairs.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-demo-forms-text-label-pairs" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-demo-forms-text-label-pairs" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>All labelled text boxes should be included in a wrapper <code><div></code> element for both layout convenience and specific styling.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Examples </div> <div class="kss-modifier__default-name kss-style"> Default styling </div> <div class="kss-modifier__example"> <div class="mod-input text "> <label>Text Label</label> <input type="text" class="" value="Text input"/></div> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .disabled </div> <div class="kss-modifier__description kss-style"> Use this class when the text input inside is expected to be disabled. </div> <div class="kss-modifier__example"> <div class="mod-input text disabled"> <label>Text Label</label> <input type="text" class="" value="Text input"/></div> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .invalid </div> <div class="kss-modifier__description kss-style"> Use this class if the input has failed a validation check. </div> <div class="kss-modifier__example"> <div class="mod-input text invalid"> <label>Text Label</label> <input type="text" class="" value="Text input"/></div> <div class="kss-modifier__example-footer"></div> </div> <div class="kss-modifier__name kss-style"> .valid </div> <div class="kss-modifier__description kss-style"> Use this class if the input has passed a validation check (intended for live validation in particular). </div> <div class="kss-modifier__example"> <div class="mod-input text valid"> <label>Text Label</label> <input type="text" class="" value="Text input"/></div> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="mod-input text [modifier class]"> <label>Text Label</label> <input type="text" class="" value="Text input"/></div></code></pre> </details> <div class="kss-source kss-style"> Source: <code>forms/base.less</code>, line 58 </div> </section> </article>  <script src="kss-assets/kss.js"></script> <script src="kss-assets/scrollspy.js"></script> <script src="kss-assets/prettify.js"></script> <script src="kss-assets/kss-fullscreen.js"></script> <script src="kss-assets/kss-guides.js"></script> <script src="kss-assets/kss-markup.js"></script> <script> prettyPrint(); var spy = new ScrollSpy('#kss-node', { nav: '.kss-nav__menu-child > li > a', className: 'is-in-viewport' }); var kssFullScreen = new KssFullScreen({ idPrefix: 'kss-fullscreen-', bodyClass: 'kss-fullscreen-mode', elementClass: 'is-fullscreen' }); var kssGuides = new KssGuides({ bodyClass: 'kss-guides-mode' }); var kssMarkup = new KssMarkup({ bodyClass: 'kss-markup-mode', detailsClass: 'kss-markup' }); </script> <footer class="kss-github">  <a href="https://github.com/kss-node/kss-node"><img src="kss-assets/github-fork--black.png" alt="Fork me on GitHub"></a> </footer>  </body> </html>