vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Cosmetics for doc section buttons

pull/4615/head
Cagatay Civici 2023-10-15 13:13:22 +03:00
parent 15dc080c9e
commit f275f4c289
4 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/styles/layout/_doc.scss
View File

@ -235,7 +235,8 @@
background: rgba(255,255,255,.05);
border-radius: 10px;
padding: 4px;
backdrop-filter: blur(20px);
backdrop-filter: blur(6px);
box-shadow: 0 0 10px 1px rgba(187, 247, 208, .6);
button {
outline: 0 none;

4
assets/styles/layout/variables/main/_dark.scss
View File

@ -6,9 +6,9 @@
--topbar-border: var(--surface-border);
--mobile-menu-bg: rgba(0,0,0,.3);
--demo-code-bg: var(--surface-card);
--demo-code-button-color: var(--surface-400);
--demo-code-button-color: var(--surface-500);
--demo-code-button-hover-bg: rgba(255,255,255,.1);
--demo-code-button-hover-color: var(--surface-500);
--demo-code-button-hover-color: var(--surface-700);
--doc-highlight-text-bg: var(--highlight-bg);
--doc-highlight-text-color: var(--highlight-text-color);
}

4
assets/styles/layout/variables/main/_light.scss
View File

@ -6,9 +6,9 @@
--topbar-border: rgba(0,0,0,.05);
--mobile-menu-bg: var(--surface-overlay);
--demo-code-bg: var(--surface-700);
--demo-code-button-color: var(--surface-400);
--demo-code-button-color: var(--surface-300);
--demo-code-button-hover-bg: rgba(255,255,255,.1);
--demo-code-button-hover-color: var(--surface-300);
--demo-code-button-hover-color: var(--surface-100);
--doc-highlight-text-bg: var(--primary-100);
--doc-highlight-text-color: var(--primary-900);
}

2
components/doc/DocSectionCode.vue
View File

@ -1,6 +1,6 @@
<template>
<div v-if="!embedded" class="doc-section-code">
<div class="doc-section-code-buttons fadein animation-duration-300">
<div class="doc-section-code-buttons scalein animation-duration-300">
<template v-if="codeMode !== 'basic' && !hideToggleCode">
<button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
<button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>