@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/badges.html

@@ -0,0 +1,212 @@
+<!-- ================================
+     BADGE SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- BASIC BADGES -->
+
+<!-- Primary Badge -->
+<span class="pa-badge pa-badge--primary">Primary</span>
+
+<!-- Secondary Badge -->
+<span class="pa-badge pa-badge--secondary">Secondary</span>
+
+<!-- Success Badge -->
+<span class="pa-badge pa-badge--success">Success</span>
+
+<!-- Danger Badge -->
+<span class="pa-badge pa-badge--danger">Danger</span>
+
+<!-- Warning Badge -->
+<span class="pa-badge pa-badge--warning">Warning</span>
+
+<!-- Info Badge -->
+<span class="pa-badge pa-badge--info">Info</span>
+
+<!-- Light Badge -->
+<span class="pa-badge pa-badge--light">Light</span>
+
+<!-- Dark Badge -->
+<span class="pa-badge pa-badge--dark">Dark</span>
+
+
+<!-- BADGE SIZES -->
+
+<!-- Extra Small Badge -->
+<span class="pa-badge pa-badge--primary pa-badge--xs">XS</span>
+
+<!-- Small Badge -->
+<span class="pa-badge pa-badge--primary pa-badge--sm">Small</span>
+
+<!-- Default Badge -->
+<span class="pa-badge pa-badge--primary">Default</span>
+
+<!-- Large Badge -->
+<span class="pa-badge pa-badge--primary pa-badge--lg">Large</span>
+
+<!-- Extra Large Badge -->
+<span class="pa-badge pa-badge--primary pa-badge--xl">XL</span>
+
+
+<!-- PILL BADGES -->
+
+<!-- Primary Pill -->
+<span class="pa-badge pa-badge--primary pa-badge--pill">Pill Badge</span>
+
+<!-- Success Pill -->
+<span class="pa-badge pa-badge--success pa-badge--pill">Active</span>
+
+
+<!-- BADGES WITH ICONS -->
+
+<!-- Badge with Icon -->
+<span class="pa-badge pa-badge--success">
+  <span class="pa-badge__icon">✓</span>
+  Verified
+</span>
+
+<!-- Small Badge with Icon -->
+<span class="pa-badge pa-badge--warning pa-badge--sm">
+  <span class="pa-badge__icon">⚠</span>
+  Alert
+</span>
+
+
+<!-- FIXED WIDTH BADGES -->
+
+<!-- Fixed Width 5x -->
+<span class="pa-badge pa-badge--primary pa-badge--w-5x">Status</span>
+
+<!-- Fixed Width 8x with Ellipsis -->
+<span class="pa-tooltip pa-tooltip--bottom" data-tooltip="Very Long Badge Text That Needs Truncation">
+  <span class="pa-badge pa-badge--info pa-badge--w-8x">Very Long Badge Text That Needs Truncation</span>
+</span>
+
+<!-- Fixed Width with Left Ellipsis (for paths, breadcrumbs) -->
+<span class="pa-tooltip pa-tooltip--bottom pa-tooltip--multiline" data-tooltip="Settings > User Preferences > Notifications > Email">
+  <span class="pa-badge pa-badge--secondary pa-badge--w-6x pa-badge--ellipsis-left">Settings > User Preferences > Notifications > Email</span>
+</span>
+
+
+<!-- COMPOSITE BADGES -->
+
+<!-- Standard Composite Badge -->
+<div class="pa-composite-badge pa-composite-badge--primary">
+  <span class="pa-composite-badge__icon">🔔</span>
+  <span class="pa-composite-badge__label">Notifications</span>
+  <span class="pa-composite-badge__button">5</span>
+</div>
+
+<!-- Success Composite Badge -->
+<div class="pa-composite-badge pa-composite-badge--success">
+  <span class="pa-composite-badge__icon">✓</span>
+  <span class="pa-composite-badge__label">Completed</span>
+  <span class="pa-composite-badge__button">12</span>
+</div>
+
+<!-- Danger Composite Badge -->
+<div class="pa-composite-badge pa-composite-badge--danger">
+  <span class="pa-composite-badge__icon">⚠</span>
+  <span class="pa-composite-badge__label">Errors</span>
+  <span class="pa-composite-badge__button">3</span>
+</div>
+
+
+<!-- BADGE GROUP -->
+
+<!-- Badge Group (shows first 5, then "more") -->
+<div class="pa-badge-group">
+  <span class="pa-badge pa-badge--primary">JavaScript</span>
+  <span class="pa-badge pa-badge--info">React</span>
+  <span class="pa-badge pa-badge--success">Node.js</span>
+  <span class="pa-badge pa-badge--warning">Python</span>
+  <span class="pa-badge pa-badge--danger">Ruby</span>
+  <span class="pa-badge pa-badge--secondary">
+    <span class="pa-badge__icon">»</span>
+    10 more
+  </span>
+</div>
+
+<!-- Badge Group - Show All -->
+<div class="pa-badge-group pa-badge-group--show-all">
+  <span class="pa-badge pa-badge--primary">Tag 1</span>
+  <span class="pa-badge pa-badge--info">Tag 2</span>
+  <span class="pa-badge pa-badge--success">Tag 3</span>
+  <!-- All badges visible -->
+</div>
+
+
+<!-- ================================
+     LABELS
+     Lightweight inline indicators
+     ================================ -->
+
+<!-- Basic Labels -->
+<span class="pa-label pa-label--primary">Primary</span>
+<span class="pa-label pa-label--secondary">Secondary</span>
+<span class="pa-label pa-label--success">Success</span>
+<span class="pa-label pa-label--danger">Danger</span>
+<span class="pa-label pa-label--warning">Warning</span>
+<span class="pa-label pa-label--info">Info</span>
+
+<!-- Labels are lighter-weight than badges -->
+<!-- Use for inline status indicators, tags, categories -->
+
+<!-- Label Sizes -->
+<span class="pa-label pa-label--primary pa-label--sm">Small</span>
+<span class="pa-label pa-label--primary">Default</span>
+<span class="pa-label pa-label--primary pa-label--lg">Large</span>
+
+
+<!-- ================================
+     COMPONENT REFERENCE
+     ================================ -->
+
+<!--
+BADGE CLASSES:
+- .pa-badge: Base badge class
+
+VARIANTS (colors):
+- .pa-badge--primary: Blue badge
+- .pa-badge--secondary: Gray badge
+- .pa-badge--success: Green badge
+- .pa-badge--danger: Red badge
+- .pa-badge--warning: Yellow/orange badge
+- .pa-badge--info: Cyan badge
+- .pa-badge--light: Light gray badge
+- .pa-badge--dark: Dark badge
+
+SIZES:
+- .pa-badge--xs: Extra small (10px font)
+- .pa-badge--sm: Small (12px font)
+- (default): Standard size (12px font, standard padding)
+- .pa-badge--lg: Large (14px font)
+- .pa-badge--xl: Extra large (16px font)
+
+MODIFIERS:
+- .pa-badge--pill: Rounded pill shape
+- .pa-badge--w-1x through .pa-badge--w-10x: Fixed widths (1rem to 10rem)
+- .pa-badge--ellipsis-left: Truncate from left instead of right
+
+ELEMENTS:
+- .pa-badge__icon: Icon container inside badge
+
+COMPOSITE BADGE:
+- .pa-composite-badge: Three-part badge container
+- .pa-composite-badge--{variant}: Color variants
+- .pa-composite-badge__icon: Icon section
+- .pa-composite-badge__label: Label/text section
+- .pa-composite-badge__button: Button/count section
+- .pa-composite-badge--label-{variant}: Label section color override
+- .pa-composite-badge--btn-{variant}: Button section color override
+
+BADGE GROUP:
+- .pa-badge-group: Container for multiple badges
+- .pa-badge-group--show-all: Show all badges (disable limit)
+
+LABELS (lightweight alternative to badges):
+- .pa-label: Base label class
+- .pa-label--primary, --secondary, --success, --danger, --warning, --info: Color variants
+- .pa-label--sm: Small size
+- .pa-label--lg: Large size
+-->

package/snippets/buttons.html

@@ -0,0 +1,287 @@
+<!-- ================================
+     BUTTON SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- BASIC BUTTONS - Variants -->
+
+<!-- Primary Button -->
+<button class="pa-btn pa-btn--primary">Primary</button>
+
+<!-- Secondary Button -->
+<button class="pa-btn pa-btn--secondary">Secondary</button>
+
+<!-- Success Button -->
+<button class="pa-btn pa-btn--success">Success</button>
+
+<!-- Warning Button -->
+<button class="pa-btn pa-btn--warning">Warning</button>
+
+<!-- Danger Button -->
+<button class="pa-btn pa-btn--danger">Danger</button>
+
+<!-- Info Button -->
+<button class="pa-btn pa-btn--info">Info</button>
+
+<!-- Light Button -->
+<button class="pa-btn pa-btn--light">Light</button>
+
+<!-- Dark Button -->
+<button class="pa-btn pa-btn--dark">Dark</button>
+
+
+<!-- BUTTON SIZES -->
+
+<!-- Extra Small Button -->
+<button class="pa-btn pa-btn--primary pa-btn--xs">Extra Small</button>
+
+<!-- Small Button -->
+<button class="pa-btn pa-btn--primary pa-btn--sm">Small</button>
+
+<!-- Default Button -->
+<button class="pa-btn pa-btn--primary">Default</button>
+
+<!-- Large Button -->
+<button class="pa-btn pa-btn--primary pa-btn--lg">Large</button>
+
+<!-- Extra Large Button -->
+<button class="pa-btn pa-btn--primary pa-btn--xl">Extra Large</button>
+
+
+<!-- OUTLINE BUTTONS -->
+
+<!-- Outline Primary -->
+<button class="pa-btn pa-btn--outline-primary">Primary</button>
+
+<!-- Outline Secondary -->
+<button class="pa-btn pa-btn--outline-secondary">Secondary</button>
+
+<!-- Outline Success -->
+<button class="pa-btn pa-btn--outline-success">Success</button>
+
+<!-- Outline Warning -->
+<button class="pa-btn pa-btn--outline-warning">Warning</button>
+
+<!-- Outline Danger -->
+<button class="pa-btn pa-btn--outline-danger">Danger</button>
+
+<!-- Outline Info -->
+<button class="pa-btn pa-btn--outline-info">Info</button>
+
+
+<!-- BUTTON STATES -->
+
+<!-- Normal Button -->
+<button class="pa-btn pa-btn--primary">Normal</button>
+
+<!-- Disabled Button -->
+<button class="pa-btn pa-btn--primary" disabled>Disabled</button>
+
+<!-- Loading Button -->
+<button class="pa-btn pa-btn--primary pa-btn--loading">
+  <span class="pa-btn__spinner"></span>
+  Loading...
+</button>
+
+
+<!-- BLOCK BUTTONS -->
+
+<!-- Block Level Button -->
+<button class="pa-btn pa-btn--primary pa-btn--block">Block Level Button</button>
+
+
+<!-- BUTTON GROUPS -->
+
+<!-- Horizontal Button Group (default) -->
+<div class="pa-btn-group">
+  <button class="pa-btn pa-btn--secondary">Left</button>
+  <button class="pa-btn pa-btn--secondary">Middle</button>
+  <button class="pa-btn pa-btn--secondary">Right</button>
+</div>
+
+<!-- Vertical Button Group -->
+<div class="pa-btn-group pa-btn-group--vertical">
+  <button class="pa-btn pa-btn--secondary">Top</button>
+  <button class="pa-btn pa-btn--secondary">Middle</button>
+  <button class="pa-btn pa-btn--secondary">Bottom</button>
+</div>
+
+
+<!-- BUTTON GROUP GAP VARIANTS -->
+
+<!-- Compact Gap (tight spacing) -->
+<div class="pa-btn-group pa-btn-group--compact">
+  <button class="pa-btn pa-btn--primary">A</button>
+  <button class="pa-btn pa-btn--primary">B</button>
+  <button class="pa-btn pa-btn--primary">C</button>
+</div>
+
+<!-- Default Gap -->
+<div class="pa-btn-group">
+  <button class="pa-btn pa-btn--primary">A</button>
+  <button class="pa-btn pa-btn--primary">B</button>
+  <button class="pa-btn pa-btn--primary">C</button>
+</div>
+
+<!-- Loose Gap (spacious) -->
+<div class="pa-btn-group pa-btn-group--loose">
+  <button class="pa-btn pa-btn--primary">A</button>
+  <button class="pa-btn pa-btn--primary">B</button>
+  <button class="pa-btn pa-btn--primary">C</button>
+</div>
+
+
+<!-- BUTTON GROUP VERTICAL ALIGNMENT -->
+
+<!-- Vertical Left (default) -->
+<div class="pa-btn-group pa-btn-group--vertical">
+  <button class="pa-btn pa-btn--secondary">Short</button>
+  <button class="pa-btn pa-btn--secondary">Medium Button</button>
+  <button class="pa-btn pa-btn--secondary">Longer Button Text</button>
+</div>
+
+<!-- Vertical Center -->
+<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--center">
+  <button class="pa-btn pa-btn--secondary">Short</button>
+  <button class="pa-btn pa-btn--secondary">Medium Button</button>
+  <button class="pa-btn pa-btn--secondary">Longer Button Text</button>
+</div>
+
+<!-- Vertical End (right) -->
+<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--end">
+  <button class="pa-btn pa-btn--secondary">Short</button>
+  <button class="pa-btn pa-btn--secondary">Medium Button</button>
+  <button class="pa-btn pa-btn--secondary">Longer Button Text</button>
+</div>
+
+<!-- Vertical Stretch (full-width) -->
+<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--stretch">
+  <button class="pa-btn pa-btn--primary">Save</button>
+  <button class="pa-btn pa-btn--secondary">Cancel</button>
+  <button class="pa-btn pa-btn--danger">Delete</button>
+</div>
+
+
+<!-- BUTTON GROUP RESPONSIVE DIRECTION -->
+
+<!-- Horizontal on mobile, Vertical on md+ -->
+<div class="pa-btn-group pa-btn-group--md-vertical">
+  <button class="pa-btn pa-btn--primary">Save</button>
+  <button class="pa-btn pa-btn--secondary">Cancel</button>
+</div>
+
+<!-- Vertical on mobile/tablet, Horizontal on lg+ -->
+<div class="pa-btn-group pa-btn-group--vertical pa-btn-group--lg-horizontal">
+  <button class="pa-btn pa-btn--primary">Save</button>
+  <button class="pa-btn pa-btn--secondary">Cancel</button>
+</div>
+
+
+<!-- BUTTON GROUP NO-WRAP -->
+
+<!-- Prevent wrapping (single line, may overflow) -->
+<div class="pa-btn-group pa-btn-group--nowrap">
+  <button class="pa-btn pa-btn--primary">One</button>
+  <button class="pa-btn pa-btn--primary">Two</button>
+  <button class="pa-btn pa-btn--primary">Three</button>
+  <button class="pa-btn pa-btn--primary">Four</button>
+  <button class="pa-btn pa-btn--primary">Five</button>
+</div>
+
+
+<!-- BUTTONS WITH ICONS -->
+
+<!-- Button with Icon (Text Icon) -->
+<button class="pa-btn pa-btn--primary">
+  <span class="pa-btn__icon">→</span>
+  Next
+</button>
+
+<!-- Button with Icon (Font Awesome) -->
+<button class="pa-btn pa-btn--primary">
+  <span class="pa-btn__icon"><i class="fa-solid fa-floppy-disk"></i></span>
+  Save
+</button>
+
+
+<!-- ICON-ONLY BUTTONS -->
+
+<!-- Icon Only - Default Size -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only" title="Save">
+  <i class="fa-solid fa-floppy-disk"></i>
+</button>
+
+<!-- Icon Only - XS (for tables) -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--xs" title="View">
+  👁️
+</button>
+
+<!-- Icon Only - SM -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--sm" title="Edit">
+  <i class="fa-solid fa-pen"></i>
+</button>
+
+<!-- Icon Only - LG -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--lg" title="Delete">
+  <i class="fa-solid fa-trash"></i>
+</button>
+
+<!-- Icon Only - XL -->
+<button class="pa-btn pa-btn--primary pa-btn--icon-only pa-btn--xl" title="Info">
+  <i class="fa-solid fa-circle-info"></i>
+</button>
+
+
+<!-- FIXED WIDTH BUTTONS -->
+
+<!-- Fixed Width 6x -->
+<button class="pa-btn pa-btn--primary pa-btn--w-6x">
+  <span class="pa-btn__icon">✓</span>
+  OK
+</button>
+
+<!-- Fixed Width 8x -->
+<button class="pa-btn pa-btn--success pa-btn--w-8x">
+  <span class="pa-btn__icon">→</span>
+  Continue
+</button>
+
+
+<!-- BUTTON ALIGNMENT -->
+
+<!-- Left Aligned (icon flush to left) -->
+<button class="pa-btn pa-btn--primary pa-btn--w-8x pa-btn--align-left">
+  <span class="pa-btn__icon">✓</span>
+  Save
+</button>
+
+<!-- Right Aligned (icon flush to right) -->
+<button class="pa-btn pa-btn--primary pa-btn--w-8x pa-btn--align-right">
+  Save
+  <span class="pa-btn__icon">✓</span>
+</button>
+
+<!-- Center Aligned -->
+<button class="pa-btn pa-btn--primary pa-btn--w-8x pa-btn--align-center">
+  <span class="pa-btn__icon">✓</span>
+  Save
+</button>
+
+<!-- Justified (space-between) -->
+<button class="pa-btn pa-btn--primary pa-btn--w-8x pa-btn--align-justify">
+  <span class="pa-btn__icon">✓</span>
+  Save
+</button>
+
+
+<!-- INTERACTIVE BUTTONS -->
+
+<!-- Ripple Effect Button -->
+<button class="pa-btn pa-btn--primary pa-btn--ripple" data-ripple>
+  Primary Ripple
+</button>
+
+<!-- Button with Loading Demo -->
+<button class="pa-btn pa-btn--primary pa-btn--ripple" data-loading-demo data-ripple>
+  Save Changes
+</button>