Commit bb5d2b08 authored by Hugues's avatar Hugues

72-form le module input-group devient un sous-modules de forms

parent e18efd6a
......@@ -66,6 +66,16 @@ $form-feedback-valid-color: $state-success-text !default;
$form-feedback-invalid-color: $state-danger-text !default;
// $btn-toolbar-margin: .5rem !default;
// $btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default;
$font-weight-normal: 400 !default;
$input-group-addon-color: $input-color !default;
// $input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !default;
// Form validation icons
$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;
......@@ -79,7 +89,7 @@ $form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
// styles
@import "style-forms";
@import "style-forms-inline";
@import "style-forms-plaintext";
@import "style-forms-size";
@import "style-forms-error";
@import "style-forms-plus";
@import "style-forms-input-group";
// stylelint-disable selector-no-qualifying-type
//
// Base styles
// Forms-input-group
//
.input-group {
......
# Input-group
Présentation
--------------------------------------------------------------------
Le module input-group de Scampi est une copie quasi conforme de son homologue de Bootstrap. Il permet de réunir visuellement les éléments de formulaire et boutons.
Dépendances
--------------------------------------------------------------------
Ce module nécessite l’utilisation des modules buttons et form.
Utilisation
--------------------------------------------------------------------
La présentation des éléments de formulaire passe presque uniquement par la personnalisation des variables et l’ajout de classes sur les éléments html.
Nous vous invitons à vous référer à la documentation spécifique de [Bootstrap concernant les formulaires](http://v4-alpha.getbootstrap.com/components/input-group/).
Exemples
--------------------------------------------------------------------
```html
<form>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
</form>
<form>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
</form>
```
......@@ -12,6 +12,8 @@ Ce qui n’est pas repris :
- form-plaintext
- custom-form
Le module `input-group` devient un sous-module de `forms`.
Utilisation
---------------------------------------------------------------------
......
// settings
// input-group
$btn-toolbar-margin: .5rem !default;
$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
$input-group-addon-color: $input-color !default;
// $input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !default;
@import "style-input-group";
# Input-group
Présentation
------------
Le module input-group de Scampi est une copie quasi conforme de son homologue de Bootstrap. Il permet de réunir visuellement les éléments de formulaire et boutons.
Dépendances
-----------
Ce module nécessite l’utilisation des modules buttons et form.
Utilisation
-----------
La présentation des éléments de formulaire passe presque uniquement par la personnalisation des variables et l’ajout de classes sur les éléments html.
Nous vous invitons à vous référer à la documentation spécifique de [Bootstrap concernant les formulaires](http://v4-alpha.getbootstrap.com/components/input-group/).
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