studio-variable/geoproject-app
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions
geoproject-app/public/assets/css/src/_variables.scss

41 lines
640 B
SCSS
Raw Normal View History

feat: integrate Coloris color picker for background field Add Coloris.js library for enhanced color selection in PageSettings with automatic button state sync across tab changes. Features: - Color picker with swatches, alpha support, and format toggle (hex/rgb/hsl) - Button positioned to the left of input field - Automatic sync when switching tabs (remembers selected color) - Close button and click-outside-to-close functionality - Dark theme with pill UI style Changes: - Install @melloware/coloris package - PageSettings.vue: Integrate Coloris with data-coloris attribute, add tab visibility detection via provide/inject, force button update when returning to document tab - EditorPanel.vue: Provide activeTab to child components, increase panel width to 30rem - _forms.scss: Add .input-with-color styles with custom Coloris button positioning (absolute positioned to left of input) - Temporarily comment out rgb/hex format buttons (replaced by Coloris format toggle) Technical details: - Uses provide/inject pattern to detect tab changes - Triggers synthetic input events to force Coloris button refresh - Custom CSS overrides to position swatch button correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 15:03:29 +01:00
:root {
fonts & colors
2025-12-09 14:05:53 +01:00
feat: integrate Coloris color picker for background field Add Coloris.js library for enhanced color selection in PageSettings with automatic button state sync across tab changes. Features: - Color picker with swatches, alpha support, and format toggle (hex/rgb/hsl) - Button positioned to the left of input field - Automatic sync when switching tabs (remembers selected color) - Close button and click-outside-to-close functionality - Dark theme with pill UI style Changes: - Install @melloware/coloris package - PageSettings.vue: Integrate Coloris with data-coloris attribute, add tab visibility detection via provide/inject, force button update when returning to document tab - EditorPanel.vue: Provide activeTab to child components, increase panel width to 30rem - _forms.scss: Add .input-with-color styles with custom Coloris button positioning (absolute positioned to left of input) - Temporarily comment out rgb/hex format buttons (replaced by Coloris format toggle) Technical details: - Uses provide/inject pattern to detect tab changes - Triggers synthetic input events to force Coloris button refresh - Custom CSS overrides to position swatch button correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 15:03:29 +01:00
--color-browngray-050: #f5f3f0;
--color-browngray-200: #d0c4ba;
fonts & colors
2025-12-09 14:05:53 +01:00
filed font-size
2025-12-10 13:29:14 +01:00
--color-txt: var(--color-interface-900);
fonts & colors
2025-12-09 14:05:53 +01:00
--color-panel-bg: var(--color-interface-050);
feat: improve page highlight with orange color and template grouping - Add --color-page-highlight CSS variable (#ff8a50) - Change page edge highlight from blue to orange - Keep border visible while PagePopup is open - Highlight all pages using the same template (data-page-type) - Display dynamic page count in PagePopup header - Emit close event from PagePopup for proper cleanup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 12:29:55 +01:00
--color-page-highlight: #ff8a50;
feat: add purple highlight for content elements - Add --color-purple variable (#7136ff) - Hover: dashed purple outline on content elements - Selected: purple background with 30% opacity - ElementPopup: purple label and instance count - Track hovered and selected elements separately from pages - Clear element selection when popup closes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 14:15:06 +01:00
--color-purple: #7136ff;
feat: improve page highlight with orange color and template grouping - Add --color-page-highlight CSS variable (#ff8a50) - Change page edge highlight from blue to orange - Keep border visible while PagePopup is open - Highlight all pages using the same template (data-page-type) - Display dynamic page count in PagePopup header - Emit close event from PagePopup for proper cleanup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 12:29:55 +01:00
feat: integrate Coloris color picker for background field Add Coloris.js library for enhanced color selection in PageSettings with automatic button state sync across tab changes. Features: - Color picker with swatches, alpha support, and format toggle (hex/rgb/hsl) - Button positioned to the left of input field - Automatic sync when switching tabs (remembers selected color) - Close button and click-outside-to-close functionality - Dark theme with pill UI style Changes: - Install @melloware/coloris package - PageSettings.vue: Integrate Coloris with data-coloris attribute, add tab visibility detection via provide/inject, force button update when returning to document tab - EditorPanel.vue: Provide activeTab to child components, increase panel width to 30rem - _forms.scss: Add .input-with-color styles with custom Coloris button positioning (absolute positioned to left of input) - Temporarily comment out rgb/hex format buttons (replaced by Coloris format toggle) Technical details: - Uses provide/inject pattern to detect tab changes - Triggers synthetic input events to force Coloris button refresh - Custom CSS overrides to position swatch button correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 15:03:29 +01:00
--border-radius: 0.2rem;
fix: close Coloris picker on iframe clicks and improve editor styling Add click handler on iframe to close Coloris color picker when user clicks in the preview area. Also improve editor panel spacing and styling consistency. Coloris Close Fix: - Import Coloris in App.vue - Add click listener on iframe document to call Coloris.close() - Fixes issue where Coloris remained open when clicking in preview iframe (clicks in iframes don't bubble to parent document) Editor Styling Improvements: - Increase EditorPanel width from 30rem to 35rem for better readability - Add CSS variable --space-xs (0.5rem) for consistent spacing - Improve form field spacing with gaps and better padding - Add row-gap to margins subsection - Fix input-with-color width and button height (1.1rem) - Add gap to unit-toggle buttons - Better visual hierarchy with margins on h2 and h3 CSS Changes: - _forms.scss: Consistent spacing, better input padding, gap utilities - _variables.scss: Add --space-xs variable - Compiled CSS updated with new styles 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 16:14:50 +01:00
--space-xs: 0.5rem;
colors on label
2025-12-10 11:10:14 +01:00
--space-s: 1rem;
--space: 1.5rem;
filed font-size
2025-12-10 13:29:14 +01:00
--space-m: 2rem;
--space-big: 3em;
style: add button background and transition curve variable - Add sass-embedded as dev dependency for SCSS compilation - Add background color to buttons for better visibility - Add --curve CSS variable for consistent easing transitions across components - Rebuild compiled CSS files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 15:05:24 +01:00
--curve: cubic-bezier(0.86, 0, 0.07, 1);
fonts & colors
2025-12-09 14:05:53 +01:00
--sans-serif: 'DM Sans', sans-serif;
--mono: 'Inconsolata', monospace;
styles w/ differents colors
2025-12-09 17:08:40 +01:00
--input-h: 26px;
--input-w: 160px;
--input-w-small: 45px;
--label-w: 18ch;
font-size: 14px;
colors on label
2025-12-10 11:10:14 +01:00
--panel-w: 540px;
filed font-size
2025-12-10 13:29:14 +01:00
--panel-nav-h: 60px;
feat: integrate Coloris color picker for background field Add Coloris.js library for enhanced color selection in PageSettings with automatic button state sync across tab changes. Features: - Color picker with swatches, alpha support, and format toggle (hex/rgb/hsl) - Button positioned to the left of input field - Automatic sync when switching tabs (remembers selected color) - Close button and click-outside-to-close functionality - Dark theme with pill UI style Changes: - Install @melloware/coloris package - PageSettings.vue: Integrate Coloris with data-coloris attribute, add tab visibility detection via provide/inject, force button update when returning to document tab - EditorPanel.vue: Provide activeTab to child components, increase panel width to 30rem - _forms.scss: Add .input-with-color styles with custom Coloris button positioning (absolute positioned to left of input) - Temporarily comment out rgb/hex format buttons (replaced by Coloris format toggle) Technical details: - Uses provide/inject pattern to detect tab changes - Triggers synthetic input events to force Coloris button refresh - Custom CSS overrides to position swatch button correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 15:03:29 +01:00
}
Reference in a new issue Copy permalink