feat: Nouveaux composants et styles Lions.dev
Ajout de nouveaux composants composites et styles SCSS Lions.dev pour enrichir l'extension Freya. ## Nouveaux composants - confirmDialog: Dialogue de confirmation avec actions - dialog: Dialogue générique personnalisable - menu: Menu de navigation vertical - menubar: Barre de menu horizontale - messages: Composant d'affichage de messages multiples - overlayPanel: Panneau overlay positionnable - sidebar: Panneau latéral collapsible - toast: Notifications toast ## Améliorations composants existants - Amélioration support Ajax pour tous les champs (fieldInput, fieldSelect, etc.) - Correction attributs pour compatibilité avec composite:clientBehavior - Optimisation panel avec support toggleable et collapsed - Amélioration button, commandButton, linkButton avec severities - Amélioration dataTable et dataView avec pagination ## Styles SCSS Lions.dev - Création architecture SCSS modulaire dans sass/lions/ - Variables globales Lions.dev (_variables.scss) - Mixins réutilisables (_mixins.scss) - Styles par catégorie de composants (12 fichiers) - Point d'entrée lions.scss pour compilation ## Tests et démo - Page buttons-showcase pour démonstration boutons - Amélioration components-demo avec nouveaux composants - Styles CSS demo pour tests visuels ## Infrastructure - Mise à jour .gitignore (exclusion docs temporaires) - Mise à jour versions dans pom.xml Tous les composants respectent les patterns PrimeFaces et la charte graphique Lions.dev.
This commit is contained in:
dahoud
@@ -4,7 +4,7 @@
|
||||
<parent>
|
||||
<groupId>dev.lions</groupId>
|
||||
<artifactId>primefaces-freya-extension-parent</artifactId>
|
||||
<version>1.0.0-SNAPSHOT</version>
|
||||
<version>1.0.0</version>
|
||||
</parent>
|
||||
<artifactId>primefaces-freya-extension-integration-tests</artifactId>
|
||||
<name>PrimeFaces Freya Extension - Integration Tests</name>
|
||||
|
||||
@@ -38,6 +38,7 @@ public class DemoBean implements Serializable {
|
||||
|
||||
// Données pour les nouveaux composants
|
||||
private List<SampleUser> sampleUsers;
|
||||
private SampleUser selectedUser; // Pour la sélection dans dataTable
|
||||
private MenuModel breadcrumbModel;
|
||||
private MenuModel stepsModel;
|
||||
private MenuModel splitButtonModel;
|
||||
@@ -264,6 +265,14 @@ public class DemoBean implements Serializable {
|
||||
this.sampleUsers = sampleUsers;
|
||||
}
|
||||
|
||||
public SampleUser getSelectedUser() {
|
||||
return selectedUser;
|
||||
}
|
||||
|
||||
public void setSelectedUser(SampleUser selectedUser) {
|
||||
this.selectedUser = selectedUser;
|
||||
}
|
||||
|
||||
public MenuModel getBreadcrumbModel() {
|
||||
return breadcrumbModel;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,595 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
||||
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
xmlns:fr="http://primefaces.org/freya">
|
||||
|
||||
<h:head>
|
||||
<title>Lions.dev - Showcase Boutons</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- Freya Official Resources -->
|
||||
<h:outputStylesheet name="freya-layout/css/primeicons.css" />
|
||||
<h:outputStylesheet name="freya-layout/css/primeflex.min.css" />
|
||||
<h:outputStylesheet name="freya-layout/css/layout-light.css" />
|
||||
<h:outputScript name="freya-layout/js/layout.js" />
|
||||
|
||||
<!-- Lions.dev SCSS (compiled) -->
|
||||
<h:outputStylesheet library="sass" name="lions/lions.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #E8F4FD 0%, #FFF9E6 100%);
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
color: #1F252B;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.showcase-header {
|
||||
background: linear-gradient(135deg, #2D9BEF 0%, #2275BC 100%);
|
||||
color: white;
|
||||
padding: 3rem 2rem;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 20px 25px -5px rgba(45, 155, 239, 0.25);
|
||||
}
|
||||
|
||||
.showcase-header h1 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.showcase-header p {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem 0;
|
||||
color: #2D9BEF;
|
||||
border-bottom: 3px solid #2D9BEF;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.subsection-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 1.5rem 0 1rem 0;
|
||||
color: #4F5861;
|
||||
}
|
||||
|
||||
.button-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #F4F6F8;
|
||||
border: 1px solid #D2D9DF;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 0.875rem;
|
||||
color: #363E46;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #E8F4FD;
|
||||
border-left: 4px solid #2D9BEF;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
color: #1C61A3;
|
||||
}
|
||||
|
||||
.badge-demo {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</h:head>
|
||||
|
||||
<h:body>
|
||||
<div class="showcase-header">
|
||||
<h1>🦁 Lions.dev - Showcase Boutons</h1>
|
||||
<p>Démonstration complète du système de boutons avec identité visuelle Lions.dev</p>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; opacity: 0.9;">
|
||||
Version 1.0.0 | Priority #1 CRITIQUE | Gradients élégants • Animations hover • Focus accessible WCAG 2.1 AA
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h:form id="showcaseForm">
|
||||
<p:messages id="messages" closable="true" />
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 1: PALETTE DE COULEURS
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">🎨 Palette de Couleurs Lions.dev</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<h3 class="subsection-title">Couleurs Signature</h3>
|
||||
<p><span class="color-swatch" style="background: #2D9BEF;"></span><strong>Lions Blue:</strong> #2D9BEF (Primary)</p>
|
||||
<p><span class="color-swatch" style="background: #FFC700;"></span><strong>Lions Gold:</strong> #FFC700 (Premium/Help)</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<h3 class="subsection-title">Couleurs Sémantiques</h3>
|
||||
<p><span class="color-swatch" style="background: #22BB69;"></span><strong>Success:</strong> #22BB69</p>
|
||||
<p><span class="color-swatch" style="background: #00BCD4;"></span><strong>Info:</strong> #00BCD4</p>
|
||||
<p><span class="color-swatch" style="background: #FF9800;"></span><strong>Warning:</strong> #FF9800</p>
|
||||
<p><span class="color-swatch" style="background: #F44336;"></span><strong>Danger:</strong> #F44336</p>
|
||||
<p><span class="color-swatch" style="background: #8995A1;"></span><strong>Secondary:</strong> #8995A1</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 2: BOUTONS SOLID (Par défaut)
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">🎯 Boutons Solid - Toutes les Severities</h2>
|
||||
<p class="text-secondary mb-3">Boutons avec gradients Lions.dev élégants et ombres colorées</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Primary (Blue)" icon="pi pi-check" severity="primary"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Secondary (Gray)" icon="pi pi-cog" severity="secondary"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Success (Green)" icon="pi pi-check-circle" severity="success"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Info (Cyan)" icon="pi pi-info-circle" severity="info"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Warning (Orange)" icon="pi pi-exclamation-triangle" severity="warning"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Help (Gold Premium)" icon="pi pi-star" severity="help"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Danger (Red)" icon="pi pi-times-circle" severity="danger"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<fr:commandButton value="Primary" severity="primary" />
|
||||
<fr:commandButton value="Success" severity="success" />
|
||||
<fr:commandButton value="Help (Gold)" severity="help" />
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<p><strong>💡 Astuce:</strong> Passez la souris sur les boutons pour voir les animations (translateY -2px + shadow elevation)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 3: BOUTONS OUTLINED
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">📝 Boutons Outlined - Bordures Colorées</h2>
|
||||
<p class="text-secondary mb-3">Boutons avec bordure colorée et background transparent</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Primary Outlined" icon="pi pi-check" severity="primary" outlined="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Secondary Outlined" icon="pi pi-cog" severity="secondary" outlined="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Success Outlined" icon="pi pi-check-circle" severity="success" outlined="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Info Outlined" icon="pi pi-info-circle" severity="info" outlined="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Warning Outlined" icon="pi pi-exclamation-triangle" severity="warning" outlined="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Help Outlined" icon="pi pi-star" severity="help" outlined="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Danger Outlined" icon="pi pi-times-circle" severity="danger" outlined="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<fr:commandButton value="Primary Outlined" severity="primary" outlined="true" />
|
||||
<fr:commandButton value="Danger Outlined" severity="danger" outlined="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 4: BOUTONS TEXT
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">🔗 Boutons Text - Minimalistes</h2>
|
||||
<p class="text-secondary mb-3">Boutons sans bordure ni background (sauf au hover)</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Primary Text" icon="pi pi-check" severity="primary" text="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Success Text" icon="pi pi-check-circle" severity="success" text="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Info Text" icon="pi pi-info-circle" severity="info" text="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
|
||||
<fr:commandButton value="Danger Text" icon="pi pi-trash" severity="danger" text="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<fr:commandButton value="Primary Text" severity="primary" text="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 5: TAILLES (sm, base, lg)
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">📏 Tailles de Boutons</h2>
|
||||
<p class="text-secondary mb-3">Support de 3 tailles : sm (32px), base/défaut (40px), lg (48px)</p>
|
||||
|
||||
<h3 class="subsection-title">Small (32px height)</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Small Primary" icon="pi pi-check" severity="primary" size="sm"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Small Success" icon="pi pi-save" severity="success" size="sm"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Small Outlined" icon="pi pi-times" severity="danger" outlined="true" size="sm"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Base / Défaut (40px height)</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Base Primary" icon="pi pi-check" severity="primary"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Base Success" icon="pi pi-save" severity="success"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Base Outlined" icon="pi pi-times" severity="danger" outlined="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Large (48px height)</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Large Primary" icon="pi pi-check" severity="primary" size="lg"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Large Success" icon="pi pi-save" severity="success" size="lg"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Large Outlined" icon="pi pi-times" severity="danger" outlined="true" size="lg"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<fr:commandButton value="Small" size="sm" />
|
||||
<fr:commandButton value="Base" /> <!-- size="base" par défaut -->
|
||||
<fr:commandButton value="Large" size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 6: BOUTONS ROUNDED (Pill shape)
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">🔵 Boutons Rounded - Forme Pill</h2>
|
||||
<p class="text-secondary mb-3">Boutons avec border-radius: 9999px (forme pill/capsule)</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Rounded Primary" icon="pi pi-check" severity="primary" rounded="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Rounded Success" icon="pi pi-save" severity="success" rounded="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Rounded Outlined" icon="pi pi-heart" severity="danger" outlined="true" rounded="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Rounded Gold" icon="pi pi-star" severity="help" rounded="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<fr:commandButton value="Rounded Primary" severity="primary" rounded="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 7: BOUTONS RAISED (Elevated)
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">📐 Boutons Raised - Effet d'Élévation</h2>
|
||||
<p class="text-secondary mb-3">Boutons avec shadow-lg pour effet surélevé (au hover: shadow-xl)</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Raised Primary" icon="pi pi-check" severity="primary" raised="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Raised Success" icon="pi pi-save" severity="success" raised="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Raised Gold Premium" icon="pi pi-star" severity="help" raised="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Raised Danger" icon="pi pi-trash" severity="danger" raised="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<fr:commandButton value="Raised" severity="primary" raised="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 8: COMBINAISONS DE VARIANTES
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">✨ Combinaisons de Variantes</h2>
|
||||
<p class="text-secondary mb-3">Combinaisons de plusieurs attributs pour des boutons uniques</p>
|
||||
|
||||
<h3 class="subsection-title">Rounded + Raised</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Rounded + Raised Primary" icon="pi pi-star" severity="primary"
|
||||
rounded="true" raised="true" action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Rounded + Raised Gold" icon="pi pi-crown" severity="help"
|
||||
rounded="true" raised="true" action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Outlined + Rounded</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Outlined + Rounded" icon="pi pi-heart" severity="danger"
|
||||
outlined="true" rounded="true" action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Outlined + Rounded Info" icon="pi pi-info-circle" severity="info"
|
||||
outlined="true" rounded="true" action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Large + Rounded + Raised</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Large + Rounded + Raised" icon="pi pi-bolt" severity="warning"
|
||||
size="lg" rounded="true" raised="true" action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<fr:commandButton value="Combo" severity="primary"
|
||||
rounded="true" raised="true" size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 9: ICON-ONLY BUTTONS
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">🎨 Icon-Only Buttons (Carrés et Ronds)</h2>
|
||||
<p class="text-secondary mb-3">Boutons sans texte, uniquement avec icône (utilisez l'attribut title pour accessibilité)</p>
|
||||
|
||||
<h3 class="subsection-title">Icon-Only Square (défaut)</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton icon="pi pi-search" severity="primary" title="Rechercher"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-heart" severity="danger" title="Favoris"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-cog" severity="secondary" title="Paramètres"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-trash" severity="danger" outlined="true" title="Supprimer"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Icon-Only Rounded (cercles)</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton icon="pi pi-plus" severity="success" rounded="true" title="Ajouter"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-pencil" severity="info" rounded="true" title="Éditer"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-trash" severity="danger" rounded="true" title="Supprimer"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-download" severity="primary" rounded="true" raised="true" title="Télécharger"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Différentes Tailles</h3>
|
||||
<div class="button-grid" style="align-items: center;">
|
||||
<fr:commandButton icon="pi pi-star" severity="help" size="sm" title="Petit"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-star" severity="help" title="Moyen (défaut)"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-star" severity="help" size="lg" title="Grand"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<fr:commandButton icon="pi pi-search" title="Rechercher" />
|
||||
<fr:commandButton icon="pi pi-plus" rounded="true" title="Ajouter" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 10: DISABLED STATE
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">❌ État Disabled</h2>
|
||||
<p class="text-secondary mb-3">Boutons désactivés avec opacity: 0.5 et cursor: not-allowed</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Disabled Primary" icon="pi pi-check" severity="primary" disabled="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Disabled Success" icon="pi pi-save" severity="success" disabled="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Disabled Outlined" icon="pi pi-times" severity="danger" outlined="true" disabled="true"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-trash" severity="danger" rounded="true" disabled="true" title="Supprimer"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
|
||||
<div class="code-block">
|
||||
<fr:commandButton value="Disabled" severity="primary" disabled="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 11: EXEMPLES PRATIQUES
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">💼 Exemples Pratiques - Cas d'Usage Réels</h2>
|
||||
|
||||
<h3 class="subsection-title">Formulaire d'Édition</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Enregistrer" icon="pi pi-check" severity="success"
|
||||
action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Annuler" icon="pi pi-times" severity="secondary" outlined="true"
|
||||
action="#{demoBean.cancel}" update="messages" />
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Actions Dangereuses avec Confirmation</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Supprimer définitivement" icon="pi pi-trash" severity="danger" raised="true"
|
||||
action="#{demoBean.delete}" update="messages">
|
||||
<p:confirm header="Confirmation" message="Êtes-vous sûr de vouloir supprimer?" icon="pi pi-exclamation-triangle" />
|
||||
</fr:commandButton>
|
||||
<fr:commandButton value="Archiver" icon="pi pi-inbox" severity="warning" outlined="true"
|
||||
action="#{demoBean.archive}" update="messages" />
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Actions Premium / Upgrade</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Passer à Premium" icon="pi pi-star" severity="help" size="lg" rounded="true" raised="true"
|
||||
action="#{demoBean.upgrade}" update="messages" />
|
||||
<fr:commandButton value="En savoir plus" icon="pi pi-info-circle" severity="help" outlined="true"
|
||||
action="#{demoBean.learnMore}" update="messages" />
|
||||
</div>
|
||||
|
||||
<h3 class="subsection-title">Toolbar d'Actions</h3>
|
||||
<div class="button-grid">
|
||||
<fr:commandButton icon="pi pi-plus" severity="success" rounded="true" title="Ajouter"
|
||||
action="#{demoBean.add}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-pencil" severity="info" rounded="true" title="Éditer"
|
||||
action="#{demoBean.edit}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-trash" severity="danger" rounded="true" title="Supprimer"
|
||||
action="#{demoBean.delete}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-download" severity="primary" rounded="true" title="Exporter"
|
||||
action="#{demoBean.export}" update="messages" />
|
||||
<fr:commandButton icon="pi pi-refresh" severity="secondary" rounded="true" title="Rafraîchir"
|
||||
action="#{demoBean.refresh}" update="messages" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
SECTION 12: ACCESSIBILITÉ
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">♿ Accessibilité WCAG 2.1 AA</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<h3 class="subsection-title">✅ Fonctionnalités Accessibles</h3>
|
||||
<ul>
|
||||
<li><strong>Focus Ring:</strong> Anneau de focus visible (3px solid rgba blue) avec offset 2px</li>
|
||||
<li><strong>Contrastes:</strong> Tous les boutons respectent WCAG AA (ratio ≥ 4.5:1)</li>
|
||||
<li><strong>Navigation Clavier:</strong> Tous les boutons sont focusables et activables au clavier</li>
|
||||
<li><strong>Tailles Touch-Friendly:</strong> Minimum 44px sur mobile (iOS guidelines)</li>
|
||||
<li><strong>Reduced Motion:</strong> Support de prefers-reduced-motion (pas d'animations)</li>
|
||||
<li><strong>High Contrast:</strong> Support de prefers-contrast: high (bordures 2px)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<h3 class="subsection-title">🧪 Testez le Focus</h3>
|
||||
<p class="text-secondary mb-3">Utilisez la touche TAB pour naviguer entre les boutons et observer le focus ring</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<fr:commandButton value="Focus 1" severity="primary" action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Focus 2" severity="success" action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Focus 3" severity="info" action="#{demoBean.save}" update="messages" />
|
||||
<fr:commandButton value="Focus 4" severity="danger" action="#{demoBean.save}" update="messages" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box" style="margin-top: 1.5rem;">
|
||||
<p><strong>💡 Astuce Accessibilité:</strong> Pour les boutons icon-only, TOUJOURS utiliser l'attribut <code>title</code> pour fournir un label accessible aux lecteurs d'écran.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════
|
||||
FOOTER
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div class="section" style="background: #F4F6F8; border: 2px solid #2D9BEF;">
|
||||
<h2 class="section-title">📊 Résumé Technique</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<h3 class="subsection-title">🎨 Design System</h3>
|
||||
<ul style="font-size: 0.875rem;">
|
||||
<li>Lions Blue #2D9BEF (Primary)</li>
|
||||
<li>Lions Gold #FFC700 (Premium)</li>
|
||||
<li>7 Severities disponibles</li>
|
||||
<li>Gradients 135deg</li>
|
||||
<li>Shadows colorées rgba(color, 0.25)</li>
|
||||
<li>Border-radius: 8px (base)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<h3 class="subsection-title">⚡ Animations</h3>
|
||||
<ul style="font-size: 0.875rem;">
|
||||
<li>Transition: 250ms cubic-bezier</li>
|
||||
<li>Hover: translateY(-2px)</li>
|
||||
<li>Hover: shadow elevation +10%</li>
|
||||
<li>Active: translateY(0)</li>
|
||||
<li>Support prefers-reduced-motion</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<h3 class="subsection-title">📏 Tailles</h3>
|
||||
<ul style="font-size: 0.875rem;">
|
||||
<li>Small: 32px height</li>
|
||||
<li>Base: 40px height (défaut)</li>
|
||||
<li>Large: 48px height</li>
|
||||
<li>Touch minimum: 44px mobile</li>
|
||||
<li>Icon spacing: 8px (base)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 1.5rem; font-size: 0.875rem; color: #4F5861; text-align: center;">
|
||||
<strong>© 2026 Lions Development Team</strong> | Version 1.0.0 | Priority #1 CRITIQUE ✅ COMPLÉTÉ
|
||||
</p>
|
||||
</div>
|
||||
</h:form>
|
||||
|
||||
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
|
||||
<p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" />
|
||||
<p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" />
|
||||
</p:confirmDialog>
|
||||
</h:body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,122 @@
|
||||
/* Common styles for Freya demo components */
|
||||
|
||||
.order-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
|
||||
.order-badge.order-delivered {
|
||||
background: #ACEBB4;
|
||||
color: #348861;
|
||||
}
|
||||
|
||||
.order-badge.order-cancelled {
|
||||
background: #FABD9A;
|
||||
color: #AD342B;
|
||||
}
|
||||
|
||||
.order-badge.order-pending {
|
||||
background: #F8D895;
|
||||
color: #A76927;
|
||||
}
|
||||
|
||||
.order-badge.order-returned {
|
||||
background: #EFB8E5;
|
||||
color: #833F91;
|
||||
}
|
||||
|
||||
.product-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-badge.status-instock {
|
||||
background: #ACEBB4;
|
||||
color: #348861;
|
||||
}
|
||||
|
||||
.product-badge.status-outofstock {
|
||||
background: #FABD9A;
|
||||
color: #AD342B;
|
||||
}
|
||||
|
||||
.product-badge.status-lowstock {
|
||||
background: #F8D895;
|
||||
color: #A76927;
|
||||
}
|
||||
|
||||
.customer-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
|
||||
.customer-badge.status-qualified {
|
||||
background: #ACEBB4;
|
||||
color: #348861;
|
||||
}
|
||||
|
||||
.customer-badge.status-unqualified {
|
||||
background: #FABD9A;
|
||||
color: #AD342B;
|
||||
}
|
||||
|
||||
.customer-badge.status-negotiation {
|
||||
background: #F8D895;
|
||||
color: #A76927;
|
||||
}
|
||||
|
||||
.customer-badge.status-new {
|
||||
background: #9BF2F7;
|
||||
color: #2B7AA4;
|
||||
}
|
||||
|
||||
.customer-badge.status-renewal {
|
||||
background: #EFB8E5;
|
||||
color: #833F91;
|
||||
}
|
||||
|
||||
.customer-badge.status-proposal {
|
||||
background: #FFD8B2;
|
||||
color: #805B36;
|
||||
}
|
||||
|
||||
.filter-container .ui-inputtext {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.ui-selection-column {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.filter-container {
|
||||
width: 100%;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.filter-container .ui-inputtext {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-selection-column {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-selection-column .ui-column-title {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,734 @@
|
||||
.order-badge {
|
||||
border-radius: 2px;
|
||||
padding: 0.25em 0.5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.order-badge.order-delivered {
|
||||
background: #ACEBB4;
|
||||
color: #348861;
|
||||
}
|
||||
.order-badge.order-cancelled {
|
||||
background: #FABD9A;
|
||||
color: #AD342B;
|
||||
}
|
||||
.order-badge.order-pending {
|
||||
background: #F8D895;
|
||||
color: #A76927;
|
||||
}
|
||||
.order-badge.order-returned {
|
||||
background: #EFB8E5;
|
||||
color: #833F91;
|
||||
}
|
||||
|
||||
.product-badge {
|
||||
border-radius: 2px;
|
||||
padding: 0.25em 0.5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
text-align: center;
|
||||
}
|
||||
.product-badge.status-instock {
|
||||
background: #ACEBB4;
|
||||
color: #348861;
|
||||
}
|
||||
.product-badge.status-outofstock {
|
||||
background: #FABD9A;
|
||||
color: #AD342B;
|
||||
}
|
||||
.product-badge.status-lowstock {
|
||||
background: #F8D895;
|
||||
color: #A76927;
|
||||
}
|
||||
|
||||
.customer-badge {
|
||||
border-radius: 2px;
|
||||
padding: 0.25em 0.5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.customer-badge.status-qualified {
|
||||
background: #ACEBB4;
|
||||
color: #348861;
|
||||
}
|
||||
.customer-badge.status-unqualified {
|
||||
background: #FABD9A;
|
||||
color: #AD342B;
|
||||
}
|
||||
.customer-badge.status-negotiation {
|
||||
background: #F8D895;
|
||||
color: #A76927;
|
||||
}
|
||||
.customer-badge.status-new {
|
||||
background: #9BF2F7;
|
||||
color: #2B7AA4;
|
||||
}
|
||||
.customer-badge.status-renewal {
|
||||
background: #EFB8E5;
|
||||
color: #833F91;
|
||||
}
|
||||
.customer-badge.status-proposal {
|
||||
background: #FFD8B2;
|
||||
color: #805B36;
|
||||
}
|
||||
|
||||
.filter-container .ui-inputtext {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.ui-selection-column {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.filter-container {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-container .ui-inputtext {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-selection-column {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.ui-selection-column .ui-column-title {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.crud-demo .ui-datatable {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.crud-demo .product-image {
|
||||
width: 100px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.crud-demo .ui-dialog .product-image {
|
||||
width: 250px;
|
||||
margin: 0 auto 2rem auto;
|
||||
display: block;
|
||||
}
|
||||
.crud-demo .ui-dialog-footer .ui-button {
|
||||
min-width: 6rem;
|
||||
}
|
||||
.crud-demo .ui-datatable .ui-column-filter {
|
||||
display: none;
|
||||
}
|
||||
.crud-demo .products-table-header {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.crud-demo .edit-button.ui-button {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.crud-demo .orders-subtable {
|
||||
padding: 1rem;
|
||||
}
|
||||
.crud-demo .products-table > .ui-datatable-tablewrapper > table > thead > tr > th:nth-child(2) {
|
||||
width: 2rem;
|
||||
}
|
||||
.crud-demo .products-table .ui-rating {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.products-table > .ui-datatable-tablewrapper > table > thead > tr > th:nth-child(2) .ui-column-title,
|
||||
.products-table > .ui-datatable-tablewrapper > table > tbody > tr > td:nth-child(2) .ui-column-title {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.products-buttonbar {
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.products-buttonbar > div:last-child {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
.docs li {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.icons-demo .icons-list {
|
||||
text-align: center;
|
||||
color: rgba(41, 50, 65, 0.8);
|
||||
}
|
||||
.icons-demo .icons-list i {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.list-demo .product-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.list-demo .product-description {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
.list-demo .product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.list-demo .product-category {
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.list-demo .product-list-item {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
.list-demo .product-list-item img {
|
||||
width: 150px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.list-demo .product-list-item .product-list-detail {
|
||||
flex: 1 1 0;
|
||||
-ms-flex: 1 1 0px;
|
||||
}
|
||||
.list-demo .product-list-item .ui-rating {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
.list-demo .product-list-item .product-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.list-demo .product-list-item .product-list-action {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.list-demo .product-list-item .ui-button {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.list-demo .product-grid-item {
|
||||
border: 1px solid #dee2e6;
|
||||
box-shadow: none;
|
||||
}
|
||||
.list-demo .product-grid-item .product-grid-item-top,
|
||||
.list-demo .product-grid-item .product-grid-item-bottom {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.list-demo .product-grid-item img {
|
||||
width: 75%;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.list-demo .product-grid-item .product-grid-item-content {
|
||||
text-align: center;
|
||||
}
|
||||
.list-demo .product-grid-item .product-price {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.list-demo .product-list-item {
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.list-demo .product-list-item img {
|
||||
width: 75%;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.list-demo .product-list-item .product-list-detail {
|
||||
text-align: center;
|
||||
}
|
||||
.list-demo .product-list-item .product-price {
|
||||
align-self: center;
|
||||
}
|
||||
.list-demo .product-list-item .product-list-action {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.list-demo .product-list-item .product-list-action {
|
||||
margin-top: 2rem;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.messages-demo .ui-button.ui-widget {
|
||||
min-width: 6rem;
|
||||
}
|
||||
.messages-demo .field > label {
|
||||
width: 125px;
|
||||
}
|
||||
|
||||
.misc-demo .ui-button.ui-widget {
|
||||
min-width: 6rem;
|
||||
}
|
||||
.misc-demo .badges .ui-badge,
|
||||
.misc-demo .badges .ui-tag {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.misc-demo .ui-chip.custom-chip {
|
||||
background: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
.misc-demo .custom-scrolltop {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
.misc-demo .custom-scrolltop:hover {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
.misc-demo .custom-scrolltop .ui-scrolltop-icon {
|
||||
font-size: 1rem;
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
.misc-demo .custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.misc-demo .custom-skeleton ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.table-demo .ui-datatable .ui-column-filter {
|
||||
display: none;
|
||||
}
|
||||
.table-demo .customers-table-header {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.table-demo .ui-progressbar {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
.custom-marker {
|
||||
display: flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ui-chronoline-event-content,
|
||||
.ui-chronoline-event-opposite {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.customized-chronoline .ui-chronoline-event:nth-child(even) {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.customized-chronoline .ui-chronoline-event:nth-child(even) .ui-chronoline-event-content {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.customized-chronoline .ui-chronoline-event-opposite {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.customized-chronoline .ui-card {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.floatlabel-demo .field {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
|
||||
* @author Tim Shedor
|
||||
*/
|
||||
code[class*=language-],
|
||||
pre[class*=language-] {
|
||||
color: black;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*=language-] {
|
||||
position: relative;
|
||||
margin: 0.5em 0;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
pre[class*=language-] > code {
|
||||
position: relative;
|
||||
border-left: 10px solid #358ccb;
|
||||
box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
|
||||
background-color: #fdfdfd;
|
||||
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
|
||||
background-size: 3em 3em;
|
||||
background-origin: content-box;
|
||||
background-attachment: local;
|
||||
}
|
||||
|
||||
code[class*=language] {
|
||||
max-height: inherit;
|
||||
padding: 0 1em;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Margin bottom to accomodate shadow */
|
||||
:not(pre) > code[class*=language-],
|
||||
pre[class*=language-] {
|
||||
background-color: #fdfdfd;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*=language-] {
|
||||
position: relative;
|
||||
padding: 0.2em;
|
||||
border-radius: 0.3em;
|
||||
color: #c92c2c;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
display: inline;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
pre[class*=language-]:before,
|
||||
pre[class*=language-]:after {
|
||||
content: "";
|
||||
z-index: -2;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0.75em;
|
||||
left: 0.18em;
|
||||
width: 40%;
|
||||
height: 20%;
|
||||
max-height: 13em;
|
||||
box-shadow: 0px 13px 8px #979797;
|
||||
-webkit-transform: rotate(-2deg);
|
||||
-moz-transform: rotate(-2deg);
|
||||
-ms-transform: rotate(-2deg);
|
||||
-o-transform: rotate(-2deg);
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
:not(pre) > code[class*=language-]:after,
|
||||
pre[class*=language-]:after {
|
||||
right: 0.75em;
|
||||
left: auto;
|
||||
-webkit-transform: rotate(2deg);
|
||||
-moz-transform: rotate(2deg);
|
||||
-ms-transform: rotate(2deg);
|
||||
-o-transform: rotate(2deg);
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #7D8B99;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #5F6364;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function-name,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #c92c2c;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.function,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #2f9c0a;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.token.variable {
|
||||
color: #a67f59;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword,
|
||||
.token.class-name {
|
||||
color: #1990b8;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.token.important {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
pre[class*=language-]:before,
|
||||
pre[class*=language-]:after {
|
||||
bottom: 14px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
/* Plugin styles */
|
||||
.token.tab:not(:empty):before,
|
||||
.token.cr:before,
|
||||
.token.lf:before {
|
||||
color: #e0d7d1;
|
||||
}
|
||||
|
||||
/* Plugin styles: Line Numbers */
|
||||
pre[class*=language-].line-numbers {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
pre[class*=language-].line-numbers code {
|
||||
padding-left: 3.8em;
|
||||
}
|
||||
|
||||
pre[class*=language-].line-numbers .line-numbers-rows {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Plugin styles: Line Highlight */
|
||||
pre[class*=language-][data-line] {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
pre[data-line] code {
|
||||
position: relative;
|
||||
padding-left: 4em;
|
||||
}
|
||||
|
||||
pre .line-highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* PrimeFaces styles */
|
||||
pre[class*=language-]:before, pre[class*=language-]:after {
|
||||
display: none !important;
|
||||
}
|
||||
pre[class*=language-] code {
|
||||
border-left: 6px solid var(--surface-border) !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-ground) !important;
|
||||
margin: 1em 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.block-section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.block-header {
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--surface-section);
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border: 1px solid var(--surface-d);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.block-header .block-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.block-header .block-title .badge-free {
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--orange-500);
|
||||
color: white;
|
||||
margin-left: 1rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.block-header .block-title .badge-new {
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--green-500);
|
||||
color: white;
|
||||
margin-left: 1rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.block-header .block-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
}
|
||||
.block-header .block-actions a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color 0.2s;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.block-header .block-actions a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.block-header .block-actions a:not(.block-action-disabled):hover {
|
||||
background-color: var(--surface-c);
|
||||
}
|
||||
.block-header .block-actions a.block-action-active {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.block-header .block-actions a.block-action-copy i {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.block-header .block-actions a.block-action-disabled {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
cursor: auto !important;
|
||||
}
|
||||
.block-header .block-actions a .pi-lock {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.block-content {
|
||||
padding: 0;
|
||||
border: 1px solid var(--surface-d);
|
||||
border-top: 0 none;
|
||||
}
|
||||
.block-content > div {
|
||||
display: none;
|
||||
}
|
||||
.block-content > div.block-content-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.block-section pre[class*=language-] {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.block-section pre[class*=language-]:before, .block-section pre[class*=language-]:after {
|
||||
display: none !important;
|
||||
}
|
||||
.block-section pre[class*=language-] code {
|
||||
border-left: 0 none !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-e) !important;
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
padding: 1.5rem 2rem !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.block-header {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
.block-header .block-actions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
.order-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
|
||||
&.order-delivered {
|
||||
background: #ACEBB4;
|
||||
color: #348861;
|
||||
}
|
||||
|
||||
&.order-cancelled {
|
||||
background: #FABD9A;
|
||||
color:#AD342B;
|
||||
}
|
||||
|
||||
&.order-pending {
|
||||
background: #F8D895;
|
||||
color: #A76927;
|
||||
}
|
||||
|
||||
&.order-returned {
|
||||
background: #EFB8E5;
|
||||
color: #833F91;
|
||||
}
|
||||
}
|
||||
|
||||
.product-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
text-align: center;
|
||||
|
||||
&.status-instock {
|
||||
background: #ACEBB4;
|
||||
color: #348861;
|
||||
}
|
||||
|
||||
&.status-outofstock {
|
||||
background: #FABD9A;
|
||||
color:#AD342B;
|
||||
}
|
||||
|
||||
&.status-lowstock {
|
||||
background: #F8D895;
|
||||
color: #A76927;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-badge {
|
||||
border-radius: 2px;
|
||||
padding: .25em .5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
letter-spacing: .3px;
|
||||
|
||||
&.status-qualified {
|
||||
background: #ACEBB4;
|
||||
color: #348861;
|
||||
}
|
||||
|
||||
&.status-unqualified {
|
||||
background: #FABD9A;
|
||||
color:#AD342B;
|
||||
}
|
||||
|
||||
&.status-negotiation {
|
||||
background: #F8D895;
|
||||
color: #A76927;
|
||||
}
|
||||
|
||||
&.status-new {
|
||||
background: #9BF2F7;
|
||||
color: #2B7AA4;
|
||||
}
|
||||
|
||||
&.status-renewal {
|
||||
background: #EFB8E5;
|
||||
color: #833F91;
|
||||
}
|
||||
|
||||
&.status-proposal {
|
||||
background: #FFD8B2;
|
||||
color: #805B36;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
.ui-inputtext {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-selection-column {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.filter-container {
|
||||
width: 100%;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.filter-container .ui-inputtext {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-selection-column {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
|
||||
.ui-column-title {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user