From dcd3120be6410248d8f5ab311218799d96e82cc1 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 7 Feb 2024 17:17:00 +0300 Subject: [PATCH] Implemented panel --- components/lib/theme/aura/global.js | 29 ++++++++ components/lib/theme/aura/index.js | 3 + components/lib/theme/aura/panel/index.d.ts | 31 --------- components/lib/theme/aura/panel/index.js | 80 ++++++++-------------- layouts/AppConfigurator.vue | 2 +- 5 files changed, 61 insertions(+), 84 deletions(-) delete mode 100644 components/lib/theme/aura/panel/index.d.ts diff --git a/components/lib/theme/aura/global.js b/components/lib/theme/aura/global.js index 4efdbf7c0..70f3be1d5 100644 --- a/components/lib/theme/aura/global.js +++ b/components/lib/theme/aura/global.js @@ -216,5 +216,34 @@ export default { background-color: transparent; } } + +.p-ripple { + overflow: hidden; + position: relative; +} + +.p-ink { + display: block; + position: absolute; + background: rgba(255, 255, 255, 0.5); + border-radius: 100%; + transform: scale(0); + pointer-events: none; +} + +.p-ink-active { + animation: ripple 0.4s linear; +} + +.p-ripple-disabled .p-ink { + display: none; +} + +@keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } +} ` }; diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 62eac79f8..f4ac79983 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -150,6 +150,9 @@ export default { textColor: 'var(--p-dark-highlight-text-color, var(--p-highlight-text-color))' }, anchorGutter: '2px', + hover: { + bg: 'var(--p-dark-hover-bg, var(--p-hover-bg))' + }, mask: { bg: 'rgba(0,0,0,0.4)' } diff --git a/components/lib/theme/aura/panel/index.d.ts b/components/lib/theme/aura/panel/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/aura/panel/index.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -interface PanelThemeVariables { - panelHeaderBorder?: string | undefined; - panelHeaderPadding?: string | undefined; - panelHeaderBg?: string | undefined; - panelHeaderTextColor?: string | undefined; - panelHeaderFontWeight?: string | undefined; - panelHeaderIconWidth?: string | undefined; - panelHeaderIconHeight?: string | undefined; - panelHeaderIconColor?: string | undefined; - panelHeaderIconBorder?: string | undefined; - panelHeaderIconBg?: string | undefined; - panelHeaderIconBorderRadius?: string | undefined; - panelHeaderIconTransition?: string | undefined; - panelHeaderIconHoverColor?: string | undefined; - panelHeaderIconHoverBorderColor?: string | undefined; - panelHeaderIconHoverBg?: string | undefined; - panelHeaderIconFocusOutline?: string | undefined; - panelHeaderIconFocusOutlineOffset?: string | undefined; - panelHeaderIconFocusShadow?: string | undefined; - panelToggleableHeaderPadding?: string | undefined; - panelContentPadding?: string | undefined; - panelContentBorder?: string | undefined; - panelContentBg?: string | undefined; - panelContentTextColor?: string | undefined; - panelContentBorderTop?: string | undefined; - panelFooterPadding?: string | undefined; - panelFooterBorder?: string | undefined; - panelFooterBg?: string | undefined; - panelFooterTextColor?: string | undefined; - panelFooterBorderTop?: string | undefined; -} diff --git a/components/lib/theme/aura/panel/index.js b/components/lib/theme/aura/panel/index.js index be7af21f1..51a305c1d 100644 --- a/components/lib/theme/aura/panel/index.js +++ b/components/lib/theme/aura/panel/index.js @@ -1,84 +1,60 @@ export default { css: ` +.p-panel { + border: 1px solid var(--p-dark-surface-700, var(--p-surface-200)); + border-radius: 6px; + background-color: var(--p-dark-surface-900, var(--p-surface-0)); + color: var(--p-text-color); +} + .p-panel-header { display: flex; justify-content: space-between; align-items: center; + padding: 1.125rem; } + +.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; +} + .p-panel-title { line-height: 1; + font-weight: 600; } + .p-panel-header-icon { display: inline-flex; justify-content: center; align-items: center; cursor: pointer; - text-decoration: none; - overflow: hidden; - position: relative; -} -.p-panel .p-panel-header { - padding: 1.125rem; - color: var(--p-dark-surface-0, var(--p-surface-700)); - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} -.p-panel .p-panel-header .p-panel-title { - font-weight: 600; -} -.p-panel .p-panel-header .p-panel-header-icon { width: 1.75rem; height: 1.75rem; - color: #a1a1aa; + position: relative; + color: var(--p-text-secondary-color); border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, - box-shadow 0.2s, outline-color 0.2s; + transition: background-color 0.2s, color 0.2s, outline-color 0.2s; outline-color: transparent; } -.p-panel .p-panel-header .p-panel-header-icon:enabled:hover { - color: var(--p-dark-surface-0, var(--p-surface-700)); - border-color: transparent; - background: rgba(255, 255, 255, 0.03); + +.p-panel-header-icon:enabled:hover { + color: var(--p-text-color); + background: var(--p-hover-bg); } -.p-panel .p-panel-header .p-panel-header-icon:focus-visible { - outline: 1px solid var(--p-focus-ring-color); - outline-offset: 2px; - box-shadow: none; -} -.p-panel.p-panel-toggleable .p-panel-header { - padding: 0.75rem 1.125rem; + +.p-panel-header-icon:focus-visible { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color); + outline-offset: var(--p-focus-ring-offset); } + .p-panel .p-panel-content { padding: 0 1.125rem 1.125rem 1.125rem; - color: var(--p-dark-surface-0, var(--p-surface-700)); - border-top: 0 none; -} -.p-panel .p-panel-content:last-child { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; } + .p-panel .p-panel-footer { padding: 0 1.125rem 1.125rem 1.125rem; - color: var(--p-dark-surface-0, var(--p-surface-700)); - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - border-top: 0 none; -} -.p-panel { - border: 1px solid var(--p-dark-surface-700, var(--p-surface-200)); - border-radius: 6px; - background-color: var(--p-dark-surface-900, var(--p-surface-0)); -} -.p-panel .p-panel-header, -.p-panel .p-panel-content, -.p-panel .p-panel-footer { - background: transparent; - border: 0 none; -} -.p-panel:has(.p-panel-footer) .p-panel-content { - padding-bottom: 0.875rem; } ` }; diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue index a6f4320b0..3bbbd9797 100755 --- a/layouts/AppConfigurator.vue +++ b/layouts/AppConfigurator.vue @@ -118,7 +118,7 @@ export default { colors.forEach((color, index) => { document.documentElement.style.setProperty(`--p-${type}-${shades[index]}`, color); - document.documentElement.style.setProperty(`--p-dark-${type}-${shades[index]}`, color); + //document.documentElement.style.setProperty(`--p-dark-${type}-${shades[index]}`, color); }); }, onRippleChange(value) {