.patron .container %h1 Icônes %span.icon.follow %span.icon.unfollow %span.icon.archive %span.icon.unarchive %span.icon.folder %span.icon.new-folder %span.icon.accept %span.icon.refuse %span.icon.without-continuation %span.icon.edit %span.icon.in-progress %span.icon.bubble %span.icon.attached %span.icon.lock %span.icon.add %span.icon.justificatif %span.icon.printer %span.icon.account %span.icon.person %span.icon.super-admin %span.icon.mail %span.icon.reply %span.icon.search %span.icon.sign-out %span.icon.info %span.icon.delete %span.icon.help %span.icon.phone %span.icon.clock %span.icon.preview %span.icon.download %span.icon.download-white %span.icon.move-handle %span.icon.frown %span.icon.meh %span.icon.smile %h1 Formulaires %form.form = form_for @dossier, url: '', html: { class: 'form' } do |f| = f.fields_for :champs do |champ_form| - champ = champ_form.object = render partial: "shared/dossiers/editable_champs/editable_champ", locals: { champ: champ, form: champ_form, seen_at: nil } .editable-champ.editable-champ-text %label Mot de passe %input{ type: "password", value: "12345678" } %h2.header-section Bouton radio verticaux .editable-champ.editable-champ-radio.vertical = f.label :archived, 'Option A', value: true %p.notice Une option tout à fait valable. = f.radio_button :archived, true .editable-champ.editable-champ-radio.vertical = f.label :archived, 'Option B', value: false %p.notice Une autre option, pas mal non plus. = f.radio_button :archived, false .send-wrapper = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send' = f.submit 'Envoyer', class: 'button send primary' %hr %h1 Boutons .patron-section = link_to ".button", "#", class: "button" = link_to ".button.primary", "#", class: "button primary" = link_to ".button.secondary", "#", class: "button secondary" = link_to ".button.danger", "#", class: "button danger" = link_to "#", class: "button" do %span.icon.follow = "Bouton avec icone et texte" = link_to "#", class: "button icon-only" do %span.icon.follow .patron-section %button.button{ disabled: true } .button.disabled %button.button.primary{ disabled: true } .button.primary.disabled %button.button.secondary{ disabled: true } .button.secondary.disabled %button.button.danger{ disabled: true } .button.danger.disabled .patron-section = link_to ".button.accepted", "#", class: "button accepted" = link_to ".button.refused", "#", class: "button refused" = link_to ".button.without-continuation", "#", class: "button without-continuation" .patron-section = link_to ".button.small", "#", class: "button small" = link_to ".button.small.primary", "#", class: "button small primary" .patron-section = link_to ".button.large", "#", class: "button large" = link_to ".button.large.primary", "#", class: "button large primary" .patron-section = link_to ".button.primary.expand", "#", class: "button primary expand" %h1 Dropdown .dropdown .button.primary.dropdown-button .button.primary.dropdown-button .dropdown-content.fade-in-down %ul.dropdown-items %li .dropdown-content ul.dropdown-items li %li .dropdown-content ul.dropdown-items li .dropdown .button.dropdown-button .button.dropdown-button .dropdown-content.fade-in-down %ul.dropdown-items %li %a{ href: '#' } %span.icon.mail .dropdown-description %h4 Action %p Explanation %li %a{ href: '#' } %span.icon.edit .dropdown-description %h4 Other action %p Explanation .dropdown .button.dropdown-button .button.dropdown-button (left) .dropdown-content.fade-in-down.left-aligned %ul.dropdown-items %li .dropdown-content.left-aligned ul.dropdown-items li %li .dropdown-content.left-aligned ul.dropdown-items li %h1 Labels %span.label .label %span.label.brouillon .label.brouillon %span.label.instruction .label.instruction %span.label.construction .label.construction %span.label.accepted .label.accepted %span.label.refused .label.refused %span.label.without-continuation .label.without-continuation %h1 Badges %span.badge 1 %span.badge.warning 1 %h1 Cards .card .card-title Titre de la carte %p Et voici le contenu de la carte .card.featured .card-title Titre de la carte mise en avant %p Et voici le contenu de la carte .card.warning .card-title Titre de la carte d’avertissement %p Et voici le contenu de la carte .card.feedback .card-title Titre de la carte pour demander un avis %p Utilisez cette carte pour informer d’une nouveauté produit ou demander l’avis des utilisateurs. %h1 Table %table.table %thead %tr %th Header 1 %th Header 2 %tbody %tr %td Table Data 1 %td Table Data 2 %tr %td Table Data 3 %td Table Data 4 %h2 Hoverable (.table.hoverable) %table.table.hoverable %thead %tr %th Header 1 %th Header 2 %tbody %tr %td Table Data 1 %td Table Data 2 %tr %td Table Data 3 %td Table Data 4 %h2 Vertical layout (.table.vertical) %table.table.vertical %tbody %tr %th Header 1 %td Table Data 1 %tr %th Header 2 %td Table Data 2 %tr %th.header-section{ colspan: 2 } Header section %tr %th Header 3 %td Table Data 3 %h1 Header .sub-header .container Titre %ul.tabs = tab_item("Onglet actif", "#", active: true) = tab_item("Onglet inactif", "#") = tab_item("Onglet avec badge", "#", badge: 2) = tab_item("Onglet avec notification", "#", notification: true) .container %h1 Breadcrumbs %ul.breadcrumbs %li = link_to "Démarche 123", "#" %li = "Dossier n° 38" %h1 Layout deux colonnes .two-columns .columns-container .column Insérer ici le contenu de la colonne 1 .column Insérer ici le contenu de la colonne 2 .container %section.ask-avis %h1 Inviter une personne à donner son avis %p.avis-notice L'invité pourra consulter, donner un avis sur le dossier et contribuer au fil de messagerie, mais il ne pourra le modifier. = form_for Avis.new, url: '/', html: { class: 'form' } do |f| = f.email_field :email, placeholder: 'Adresse email', required: true = f.text_area :introduction, rows: 3, value: 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true .send-wrapper = f.submit 'Demander un avis', class: 'button send' %section.list-avis %h1.title Avis des invités %span.count 1 %ul %li.one-avis %h2.claimant Vous %span.date Demande d'avis envoyée le 12/01/2012 %p Bonjour, merci de me donner votre avis sur ce dossier. .answer.flex.align-start .icon.bubble.avis-icon .width-100 %h2.instructeur = CONTACT_EMAIL %span.date Réponse donnée le 13/01/2012 %p Je donne un avis favorable .container %h2.empty-text Aucun dossier %p.empty-text-details Vous n’avez commencé aucune démarche pour l’instant.