Showcase variables refactored
Cagatay Civici
parent
31f465c702
commit
c61852d2c7
|
|
@ -128,6 +128,6 @@ pre[class*="language-"] {
|
||||||
|
|
||||||
pre[class*="language-"] {
|
pre[class*="language-"] {
|
||||||
code {
|
code {
|
||||||
background: var(--p-dark-surface-900, var(--p-surface-800));
|
background: var(--code-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background: var(--surface-card);
|
background: var(--card-background);
|
||||||
border: var(--card-border);
|
border: var(--card-border);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
html {
|
html {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
font-feature-settings: "cv02","cv03","cv04","cv11";
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -7,17 +9,15 @@ body {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background-color: var(--surface-ground);
|
background-color: var(--ground-background);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
font-family: var(--p-font-family);
|
|
||||||
font-feature-settings: var(--p-font-feature-settings);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-wrapper {
|
.layout-wrapper {
|
||||||
background-color: var(--surface-ground);
|
background-color: var(--ground-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -25,8 +25,8 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background-color: var(--p-dark-highlight-bg, var(--p-highlight-bg));
|
background-color: var(--selection-background);
|
||||||
color: var(--p-dark-highlight-text-color, var(--p-highlight-text-color));
|
color: var(--selection-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
|
@ -34,7 +34,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: var(--p-dark-surface-0, var(--p-surface-900));
|
color: var(--high-contrast-text-color);
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -77,7 +77,7 @@ p {
|
||||||
|
|
||||||
.px-link {
|
.px-link {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
border-radius: var(--p-border-radius);
|
border-radius: 6px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -85,7 +85,6 @@ p {
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
@include focus-visible();
|
@include focus-visible();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -94,6 +93,6 @@ p {
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
font-family: var(--p-font-family);
|
font-family: inherit;
|
||||||
font-feature-settings: var(--p-font-feature-settings);
|
font-feature-settings: inherit;
|
||||||
}
|
}
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 1px solid var(--surface-border);
|
border-bottom: 1px solid var(--border-color);
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -31,14 +31,16 @@
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transition: all 0.2s;
|
transition: outline-color 0.2s, border-color 0.2s;
|
||||||
|
outline-color: transparent;
|
||||||
border-bottom: 1px solid transparent;
|
border-bottom: 1px solid transparent;
|
||||||
border-top-right-radius: var(--p-border-radius);
|
border-top-right-radius: 6px;
|
||||||
border-top-left-radius: var(--p-border-radius);
|
border-top-left-radius: 6px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
--focus-ring-offset: -1px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-bottom-color: var(--p-dark-surface-600, var(--p-surface-400));
|
border-bottom-color: var(--hover-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
@ -50,8 +52,8 @@
|
||||||
|
|
||||||
&.doc-tabmenu-active {
|
&.doc-tabmenu-active {
|
||||||
button {
|
button {
|
||||||
border-bottom-color: var(--primary-color-default);
|
border-bottom-color: var(--primary-text-color);
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -78,7 +80,6 @@
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
color: var(--text-color);
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -97,12 +98,13 @@
|
||||||
scroll-margin-top: 6.5rem;
|
scroll-margin-top: 6.5rem;
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
display: none;
|
display: none;
|
||||||
transition: all .2s;
|
transition: outline-color 0.2s, border-color 0.2s, opacity 0.2s;
|
||||||
border-radius: var(--p-border-radius);
|
outline-color: transparent;
|
||||||
|
border-radius: 6px;
|
||||||
@include focus-visible();
|
@include focus-visible();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -120,7 +122,6 @@
|
||||||
.doc-section-description {
|
.doc-section-description {
|
||||||
> p {
|
> p {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: var(--text-color);
|
|
||||||
|
|
||||||
i {
|
i {
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
@ -128,8 +129,8 @@
|
||||||
font-size: .875rem;
|
font-size: .875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
background-color: var(--p-dark-surface-800, var(--p-surface-200));
|
background: var(--mark-background);
|
||||||
color: var(--p-dark-surface-300, var(--p-surface-700));
|
color: var(--mark-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -142,8 +143,8 @@
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: var(--p-dark-surface-800, var(--p-surface-200));
|
background: var(--mark-background);
|
||||||
color: var(--p-dark-surface-300, var(--p-surface-700));
|
color: var(--mark-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -163,12 +164,12 @@
|
||||||
|
|
||||||
> .navbar-item {
|
> .navbar-item {
|
||||||
.navbar-item-content {
|
.navbar-item-content {
|
||||||
border-left: 1px solid var(--surface-border);
|
border-left: 1px solid var(--border-color);
|
||||||
padding-left: .25rem;
|
padding-left: .25rem;
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-left-color: var(--p-dark-surface-600, var(--p-surface-400));
|
border-left-color: var(--hover-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -185,7 +186,8 @@
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
transition: all .2s;
|
transition: outline-color 0.2s, border-color .2s;
|
||||||
|
outline-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -197,10 +199,10 @@
|
||||||
|
|
||||||
&.active-navbar-item {
|
&.active-navbar-item {
|
||||||
> .navbar-item-content {
|
> .navbar-item-content {
|
||||||
border-color: var(--primary-color-default);
|
border-color: var(--primary-text-color);
|
||||||
|
|
||||||
.px-link {
|
.px-link {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -261,12 +263,12 @@
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
transition: background-color .2s, box-shadow .2s;
|
transition: background-color .2s, box-shadow .2s;
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
color: var(--p-dark-surface-300, var(--p-surface-300));
|
color: var(--code-button-text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(255,255,255,.1);
|
background-color: rgba(255,255,255,.1);
|
||||||
color: var(--p-dark-surface-100, var(--p-surface-100));
|
color: var(--code-button-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.code-active {
|
&.code-active {
|
||||||
|
|
@ -293,7 +295,7 @@
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
th {
|
th {
|
||||||
border-bottom: 1px solid var(--surface-border);
|
border-bottom: 1px solid var(--border-color);
|
||||||
padding: .75rem 1rem;
|
padding: .75rem 1rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
|
@ -301,25 +303,25 @@
|
||||||
|
|
||||||
tbody {
|
tbody {
|
||||||
tr:hover {
|
tr:hover {
|
||||||
background: var(--surface-hover);
|
background: var(--hover-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
padding: .75rem 1rem;
|
padding: .75rem 1rem;
|
||||||
border-bottom: 1px solid var(--surface-border);
|
border-bottom: 1px solid var(--border-color);
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
scroll-margin-top: 6.5rem;
|
scroll-margin-top: 6.5rem;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-option-type {
|
.doc-option-type {
|
||||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
.doc-option-type-options-container {
|
.doc-option-type-options-container {
|
||||||
|
|
@ -339,8 +341,8 @@
|
||||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
|
||||||
position: relative;
|
position: relative;
|
||||||
scroll-margin-top: 6.5rem;
|
scroll-margin-top: 6.5rem;
|
||||||
background-color: var(--p-dark-surface-800, var(--p-surface-200));
|
background-color: var(--mark-background);
|
||||||
color: var(--p-dark-surface-300, var(--p-surface-700));
|
color: var(--mark-text);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -351,7 +353,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: -1.5rem;
|
right: -1.5rem;
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
display: none;
|
display: none;
|
||||||
transition: opacity 0.3s, colors 0.3s;
|
transition: opacity 0.3s, colors 0.3s;
|
||||||
|
|
@ -381,8 +383,8 @@
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
max-width: min-content;
|
max-width: min-content;
|
||||||
border-color: var(--surface-border);
|
border-color: var(--border-color);
|
||||||
background-color: var(--surface-card);
|
background-color: var(--card-background);
|
||||||
color: var(--text-secondary-color);
|
color: var(--text-secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -392,7 +394,7 @@
|
||||||
|
|
||||||
.doc-option-parameter-type {
|
.doc-option-parameter-type {
|
||||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.doc-option-params {
|
.doc-option-params {
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,16 @@
|
||||||
.DocSearch-Button {
|
.DocSearch-Button {
|
||||||
border-radius: var(--p-border-radius);
|
border-radius: 6px;
|
||||||
border: 1px solid var(--surface-border);
|
border: 1px solid var(--border-color);
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
background-color: var(--surface-card);
|
background-color: var(--card-background);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transition: all .3s;
|
transition: outline-color .2s, border-color .2s;
|
||||||
|
outline-color: transparent;
|
||||||
padding: 0 .5rem;
|
padding: 0 .5rem;
|
||||||
@include focus-visible();
|
@include focus-visible();
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--p-primary-color);
|
border-color: var(--primary-color);
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--p-primary-color);
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -43,7 +40,7 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
font-family: var(--p-font-family);
|
font-family: inherit;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
|
|
@ -79,25 +76,25 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Modal {
|
.DocSearch-Modal {
|
||||||
border: 1px solid var(--surface-border);
|
border: 1px solid var(--border-color);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Footer {
|
.DocSearch-Footer {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-top: 1px solid var(--surface-border);
|
border-top: 1px solid var(--border-color);
|
||||||
background-color: var(--surface-overlay);
|
background-color: var(--overlay-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Form {
|
.DocSearch-Form {
|
||||||
background: var(--surface-card);
|
background: var(--card-background);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border: 1px solid var(--surface-border);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: var(--p-border-radius);
|
border-radius: 6px;
|
||||||
transition: border-color .3s;
|
transition: border-color .3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--p-primary-color);
|
border-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-MagnifierLabel, .DocSearch-Reset {
|
.DocSearch-MagnifierLabel, .DocSearch-Reset {
|
||||||
|
|
@ -106,21 +103,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Hit {
|
.DocSearch-Hit {
|
||||||
border-bottom: 1px solid var(--surface-border);
|
border-bottom: 1px solid var(--border-color);
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
margin-bottom: .25rem;
|
margin-bottom: .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Hit-source {
|
.DocSearch-Hit-source {
|
||||||
color: var(--p-primary-color);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
|
.DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
|
||||||
fill: var(--p-primary-color);
|
fill: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Prefill {
|
.DocSearch-Prefill {
|
||||||
color: var(--p-primary-color);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Button-Placeholder {
|
.DocSearch-Button-Placeholder {
|
||||||
|
|
@ -130,20 +127,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--docsearch-searchbox-focus-background: var(--surface-card);
|
--docsearch-searchbox-focus-background: var(--card-background);
|
||||||
--docsearch-text-color: var(--text-color);
|
--docsearch-text-color: var(--text-color);
|
||||||
--docsearch-muted-color: var(--text-color);
|
--docsearch-muted-color: var(--text-color);
|
||||||
--docsearch-searchbox-background: var(--surface-card);
|
--docsearch-searchbox-background: var(--card-background);
|
||||||
--docsearch-text-color: var(--text-color);
|
--docsearch-text-color: var(--text-color);
|
||||||
--docsearch-modal-background: var(--surface-overlay);
|
--docsearch-modal-background: var(--overlay-background);
|
||||||
--docsearch-key-gradient: var(--surface-ground);
|
--docsearch-key-gradient: var(--ground-background);
|
||||||
--docsearch-key-shadow: none;
|
--docsearch-key-shadow: none;
|
||||||
--docsearch-container-background: var(--p-mask-bg);
|
--docsearch-container-background: var(--docsearch-mask-background);
|
||||||
--docsearch-hit-background: var(--surface-overlay);
|
--docsearch-hit-background: var(--overlay-background);
|
||||||
--docsearch-hit-shadow: none;
|
--docsearch-hit-shadow: none;
|
||||||
--docsearch-spacing: 1rem;
|
--docsearch-spacing: 1rem;
|
||||||
--docsearch-hit-color: var(--text-color);
|
--docsearch-hit-color: var(--text-color);
|
||||||
--docsearch-highlight-color: var(--p-primary-color);
|
--docsearch-highlight-color: var(--primary-color);
|
||||||
--docsearch-hit-active-color: var(--p-primary-color-inverse);
|
--docsearch-hit-active-color: var(--primary-inverse-color);
|
||||||
|
--docsearch-searchbox-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,14 +6,15 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--text-800);
|
color: var(--text-color);
|
||||||
border-top: 1px solid var(--surface-border);
|
border-top: 1px solid var(--border-color);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
transition: all .3s;
|
transition: outline-color .2s, border-color .2s;
|
||||||
border-radius: var(--p-border-radius);
|
outline-color: transparent;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
@include focus-visible();
|
@include focus-visible();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
@mixin focus-visible($type:null) {
|
@mixin focus-visible() {
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
outline: 0 none;
|
outline: 1px solid var(--primary-color);
|
||||||
outline-offset: 0;
|
outline-offset: var(--focus-ring-offset, 2px);
|
||||||
box-shadow: $type var(--focus-ring);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin doc-link() {
|
@mixin doc-link() {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all .2s;
|
transition: outline-color .2s, border-color .2s;
|
||||||
border-radius: var(--p-border-radius);
|
outline-color: transparent;
|
||||||
|
border-radius: 6px;
|
||||||
@include focus-visible();
|
@include focus-visible();
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
.layout-news-link,
|
.layout-news-link,
|
||||||
.layout-news-link:visited,
|
.layout-news-link:visited,
|
||||||
.layout-news-link:active {
|
.layout-news-link:active {
|
||||||
color:var(--p-primary-color-inverse);
|
color:var(--primary-color-inverse);
|
||||||
font-weight:700;
|
font-weight:700;
|
||||||
}
|
}
|
||||||
.layout-news-link:hover {
|
.layout-news-link:hover {
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
z-index: 1102;
|
z-index: 1102;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
background-color: var(--mobile-menu-bg);
|
background-color: var(--mobile-menu-background);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
width: 300px;
|
width: 300px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
|
||||||
|
|
@ -36,19 +36,19 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: .5rem 0;
|
padding: .5rem 1px;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
transition: all .2s;
|
transition: outline-color 0.2s;
|
||||||
|
outline-color: transparent;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: var(--p-border-radius);
|
|
||||||
|
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
border-radius: var(--p-border-radius);
|
border-radius: 6px;
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
border: 1px solid var(--surface-border);
|
border: 1px solid var(--border-color);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -69,29 +69,30 @@
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
background-color: var(--surface-card);
|
background-color: var(--card-background);
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-toggle-icon {
|
.menu-toggle-icon {
|
||||||
color: var(--surface-900);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.router-link-active {
|
&.router-link-active {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
|
|
||||||
> .menu-icon {
|
> .menu-icon {
|
||||||
i {
|
i {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include focus-visible(inset);
|
@include focus-visible();
|
||||||
|
--focus-ring-offset: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
|
|
@ -102,28 +103,27 @@
|
||||||
|
|
||||||
li {
|
li {
|
||||||
a {
|
a {
|
||||||
border-left: 1px solid var(--surface-border);
|
border-left: 1px solid var(--border-color);
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
font-weight: 450;
|
font-weight: 450;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: .5rem .5rem .5rem 1rem;
|
padding: .5rem .5rem .5rem 1rem;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
transition: border-color .2s;
|
transition: outline-color 0.2s, border-color .2s;
|
||||||
|
outline-color: transparent;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:focus-visible {
|
@include focus-visible();
|
||||||
outline: 0 none;
|
--focus-ring-offset: -1px;
|
||||||
box-shadow: inset var(--focus-ring);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-left-color: var(--p-dark-surface-600, var(--p-surface-400));
|
border-left-color: var(--hover-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.router-link-active {
|
&.router-link-active {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-text-color);
|
||||||
border-left-color: var(--primary-color-default);
|
border-left-color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@
|
||||||
border-bottom: 1px solid transparent;
|
border-bottom: 1px solid transparent;
|
||||||
|
|
||||||
&.layout-topbar-sticky {
|
&.layout-topbar-sticky {
|
||||||
border-bottom: 1px solid var(--surface-border);
|
border-bottom: 1px solid var(--border-color);
|
||||||
background-color: var(--topbar-sticky-bg);
|
background-color: var(--topbar-sticky-background);
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -28,7 +28,8 @@
|
||||||
|
|
||||||
.layout-topbar-logo,
|
.layout-topbar-logo,
|
||||||
.layout-topbar-icon {
|
.layout-topbar-icon {
|
||||||
border-radius: 6px;
|
transition: outline-color .2s;
|
||||||
|
outline-color: transparent;
|
||||||
@include focus-visible();
|
@include focus-visible();
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
@ -73,20 +74,21 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border: 1px solid var(--surface-border);
|
border: 1px solid var(--border-color);
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
transition: all .2s;
|
transition: outline-color .2s, border-color .2s;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: var(--surface-card);
|
outline-color: transparent;
|
||||||
|
background-color: var(--card-background);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@include focus-visible();
|
@include focus-visible();
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--primary-color-default);
|
border-color: var(--p-primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
i, span {
|
i, span {
|
||||||
|
|
@ -98,7 +100,7 @@
|
||||||
background-color: var(--p-primary-color);
|
background-color: var(--p-primary-color);
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--p-primary-color-inverse);
|
color: var(--p-primary-inverse-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -108,9 +110,9 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 14rem;
|
width: 14rem;
|
||||||
padding: .75rem;
|
padding: .75rem;
|
||||||
background-color: var(--surface-overlay);
|
background-color: var(--overlay-background);
|
||||||
border-radius: var(--p-border-radius);
|
border-radius: 6px;
|
||||||
border: 1px solid var(--surface-border);
|
border: 1px solid var(--border-color);
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||||
|
|
||||||
|
|
@ -146,7 +148,7 @@
|
||||||
outline-offset: 1px;
|
outline-offset: 1px;
|
||||||
|
|
||||||
&.active-color {
|
&.active-color {
|
||||||
outline-color: var(--primary-color-default);
|
outline-color: var(--p-primary-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -179,12 +181,12 @@
|
||||||
|
|
||||||
.versions-panel {
|
.versions-panel {
|
||||||
padding: .25rem;
|
padding: .25rem;
|
||||||
background-color: var(--surface-overlay);
|
background-color: var(--overlay-background);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: calc(100% + 2px);
|
top: calc(100% + 2px);
|
||||||
border-radius: var(--p-border-radius);
|
border-radius: 6px;
|
||||||
border: 1px solid var(--surface-border);
|
border: 1px solid var(--border-color);
|
||||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
|
|
@ -205,17 +207,17 @@
|
||||||
a {
|
a {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
padding: 0.5rem .75rem;
|
padding: 0.5rem .75rem;
|
||||||
border-radius: var(--p-border-radius);
|
border-radius: 6px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--surface-hover);
|
background-color: var(--hover-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
span:first-child {
|
span:first-child {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--p-dark-surface-0, var(--p-surface-900));
|
color: var(--high-contrast-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
span:last-child {
|
span:last-child {
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,26 @@
|
||||||
:root[class="p-dark"] {
|
:root[class="p-dark"] {
|
||||||
--primary-color-default:var(--p-dark-primary-400);
|
--primary-text-color:var(--p-primary-400);
|
||||||
--primary-color-inverse-default:var(--p-dark-zinc-900);
|
--primary-color: var(--p-primary-color);
|
||||||
--text-color: var(--p-dark-surface-0);
|
--primary-inverse-color:var(--p-primary-inverse-color);
|
||||||
--text-secondary-color: var(--p-dark-surface-400);
|
--text-color: var(--p-text-color);
|
||||||
--card-border: 1px solid transparent;
|
--text-secondary-color: var(--p-text-secondar-color);
|
||||||
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
|
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
|
||||||
--glow-blend: hard-light, color-dodge;
|
--glow-blend: hard-light, color-dodge;
|
||||||
--topbar-sticky-bg:rgba(0,0,0,.3);
|
--topbar-sticky-background:rgba(0,0,0,.3);
|
||||||
--mobile-menu-bg: rgba(0,0,0,.3);
|
--mobile-menu-background: rgba(0,0,0,.3);
|
||||||
--surface-card: var(--p-dark-surface-900);
|
--card-border: 1px solid transparent;
|
||||||
--surface-border: var(--p-dark-surface-800);
|
--card-background: var(--p-surface-900);
|
||||||
--surface-ground: var(--p-dark-surface-950);
|
--border-color: var(--p-surface-800);
|
||||||
--surface-overlay: var(--p-dark-surface-900);
|
--ground-background: var(--p-surface-950);
|
||||||
--surface-hover: var(--p-dark-surface-800);
|
--overlay-background: var(--p-surface-900);
|
||||||
|
--hover-background: var(--p-surface-800);
|
||||||
|
--code-background: var(--p-surface-900);
|
||||||
|
--high-contrast-text-color: var(--p-surface-0);
|
||||||
|
--hover-border-color: var(--p-surface-600);
|
||||||
|
--mark-background: var(--p-surface-800);
|
||||||
|
--mark-text-color: var(--p-surface-300);
|
||||||
|
--selection-background: color-mix(in srgb, var(--primary-color-default), transparent 84%);
|
||||||
|
--selection-text-color: rgba(255,255,255,.87);
|
||||||
|
--code-button-text-color: var(--p-surface-300);
|
||||||
|
--docsearch-mask-background: var(-p-mask-bg);
|
||||||
}
|
}
|
||||||
|
|
@ -1,16 +1,26 @@
|
||||||
:root {
|
:root {
|
||||||
--primary-color-default:var(--p-primary-600);
|
--primary-text-color:var(--p-primary-600);
|
||||||
--primary-color-inverse-default:var(--p-surface-0);
|
--primary-color: var(--p-primary-color);
|
||||||
--text-color: var(--p-surface-700);
|
--primary-inverse-color:var(--p-primary-inverse-color);
|
||||||
--text-secondary-color: var(--p-surface-500);
|
--text-color: var(--p-text-color);
|
||||||
--card-border: 1px solid var(--p-surface-200);
|
--text-secondary-color: var(--p-text-secondar-color);
|
||||||
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
|
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
|
||||||
--glow-blend: hard-light, multiply;
|
--glow-blend: hard-light, multiply;
|
||||||
--topbar-sticky-bg:rgba(255,255,255,.7);
|
--topbar-sticky-background:rgba(255,255,255,.7);
|
||||||
--mobile-menu-bg: var(--p-surface-0);
|
--mobile-menu-background: #ffffff;
|
||||||
--surface-card: var(--p-surface-0);
|
--card-border: 1px solid var(--p-surface-200);
|
||||||
--surface-border: var(--p-surface-200);
|
--card-background: #ffffff;
|
||||||
--surface-ground: var(--p-surface-50);
|
--border-color: var(--p-surface-200);
|
||||||
--surface-overlay: var(--p-surface-0);
|
--ground-background: var(--p-surface-50);
|
||||||
--surface-hover: var(--p-surface-100);
|
--overlay-background: #ffffff;
|
||||||
|
--hover-background: var(--p-surface-100);
|
||||||
|
--code-background: var(--p-surface-800);
|
||||||
|
--high-contrast-text-color: var(--p-surface-900);
|
||||||
|
--hover-border-color: var(--p-surface-400);
|
||||||
|
--mark-background: var(--p-surface-200);
|
||||||
|
--mark-text-color: var(--p-surface-700);
|
||||||
|
--selection-background: var(--p-primary-50);
|
||||||
|
--selection-text-color: var(--p-primary-700);
|
||||||
|
--code-button-text-color: var(--p-surface-300);
|
||||||
|
--docsearch-mask-background: var(-p-mask-bg);
|
||||||
}
|
}
|
||||||
|
|
@ -85,10 +85,14 @@ export default {
|
||||||
},
|
},
|
||||||
primary: {
|
primary: {
|
||||||
color: '{primary.500}',
|
color: '{primary.500}',
|
||||||
colorInverse: '{primary.0}'
|
inverseColor: '#ffffff'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
color: '{surface.700}',
|
||||||
|
secondaryColor: '{surface.500}'
|
||||||
},
|
},
|
||||||
highlight: {
|
highlight: {
|
||||||
bg: '{primary.50}',
|
background: '{primary.50}',
|
||||||
textColor: '{primary.700}'
|
textColor: '{primary.700}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -109,10 +113,14 @@ export default {
|
||||||
},
|
},
|
||||||
primary: {
|
primary: {
|
||||||
color: '{primary.400}',
|
color: '{primary.400}',
|
||||||
colorInverse: '{surface.900}'
|
inverseColor: '{surface.900}'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
color: '{surface.700}',
|
||||||
|
secondaryColor: '{surface.500}'
|
||||||
},
|
},
|
||||||
highlight: {
|
highlight: {
|
||||||
bg: 'color-mix(in srgb, {primary.400}, transparent 84%)',
|
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
|
||||||
textColor: 'rgba(255,255,255,.87)'
|
textColor: 'rgba(255,255,255,.87)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
export interface Surface {
|
|
||||||
surface0?: string | undefined;
|
|
||||||
surface50?: string | undefined;
|
|
||||||
surface100?: string | undefined;
|
|
||||||
surface200?: string | undefined;
|
|
||||||
surface300?: string | undefined;
|
|
||||||
surface400?: string | undefined;
|
|
||||||
surface500?: string | undefined;
|
|
||||||
surface600?: string | undefined;
|
|
||||||
surface700?: string | undefined;
|
|
||||||
surface800?: string | undefined;
|
|
||||||
surface900?: string | undefined;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,142 +0,0 @@
|
||||||
export default {
|
|
||||||
variables: {
|
|
||||||
common: {
|
|
||||||
header: {
|
|
||||||
paddingX: '{p.5}',
|
|
||||||
paddingY: '{p.5}',
|
|
||||||
borderWidth: '1px',
|
|
||||||
borderStyle: 'solid',
|
|
||||||
fontWeight: 700
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
paddingX: '{p.5}',
|
|
||||||
paddingY: '{p.5}',
|
|
||||||
borderWidth: '1px',
|
|
||||||
borderStyle: 'solid'
|
|
||||||
},
|
|
||||||
tab: {
|
|
||||||
gap: '4px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
light: {
|
|
||||||
header: {
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
color: '{shade.600}',
|
|
||||||
background: '{shade.100}',
|
|
||||||
states: {
|
|
||||||
hover: {
|
|
||||||
background: '{shade.200}',
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
color: '{shade.800}'
|
|
||||||
},
|
|
||||||
active: {
|
|
||||||
background: '{shade.100}',
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
color: '{shade.800}',
|
|
||||||
states: {
|
|
||||||
hover: {
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
background: '{shade.200}',
|
|
||||||
color: '{shade.800}'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
background: '{shade.0}',
|
|
||||||
color: '{shade.700}'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
header: {
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
color: '{shade.600}',
|
|
||||||
background: '{shade.100}',
|
|
||||||
states: {
|
|
||||||
hover: {
|
|
||||||
background: '{shade.200}',
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
color: '{shade.800}'
|
|
||||||
},
|
|
||||||
active: {
|
|
||||||
background: '{shade.100}',
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
color: '{shade.800}'
|
|
||||||
},
|
|
||||||
activeHover: {
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
background: '{shade.200}',
|
|
||||||
color: '{shade.800}'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
borderColor: '{shade.300}',
|
|
||||||
background: '{shade.0}',
|
|
||||||
color: '{shade.700}'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
css: `
|
|
||||||
.p-accordion-header-action {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
user-select: none;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: var(--p-accordion-header-padding-y) var(--p-accordion-header-padding-x);
|
|
||||||
border: var(--p-accordion-header-border-width) var(--p-accordion-header-border-style) var(--p-accordion-header-border-color);
|
|
||||||
color: var(--p-accordion-header-color);
|
|
||||||
background: var(--p-accordion-header-background);
|
|
||||||
font-weight: var(--p-accordion-header-font-weight);
|
|
||||||
border-radius: var(--p-border-radius);
|
|
||||||
transition: var(--p-transition);
|
|
||||||
outline-color: transparent;
|
|
||||||
}
|
|
||||||
.p-accordion-header-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.p-accordion-toggle-icon {
|
|
||||||
margin-right: var(--p-inline-gap);
|
|
||||||
}
|
|
||||||
.p-accordion-header:not(.p-disabled) .p-accordion-header-action: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);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-action {
|
|
||||||
background: var(--p-accordion-header-hover-background);
|
|
||||||
border-color: var(--p-accordion-header-hover-border-color);
|
|
||||||
color: var(--p-accordion-header-hover-color);
|
|
||||||
}
|
|
||||||
.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-action {
|
|
||||||
background: var(--p-accordion-header-active-background);
|
|
||||||
border-color: var(--p-accordion-header-active-border-color);
|
|
||||||
color: var(--p-accordion-header-active-color);
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
.p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-action {
|
|
||||||
border-color: var(--p-accordion-header-active-hover-border-color);
|
|
||||||
background: var(--p-accordion-header-active-hover-background);
|
|
||||||
color: var(--p-accordion-header-active-hover-color);
|
|
||||||
}
|
|
||||||
.p-accordion-content {
|
|
||||||
padding: var(--p-accordion-content-padding-y) var(--p-accordion-content-padding-x);
|
|
||||||
border: var(--p-accordion-content-border-width) var(--p-accordion-content-border-style) var(--p-accordion-content-border-color);
|
|
||||||
background: var(--p-accordion-content-background);
|
|
||||||
color: var(--p-accordion-content-color);
|
|
||||||
border-top: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-right-radius: var(--p-border-radius);
|
|
||||||
border-bottom-left-radius: var(--p-border-radius);
|
|
||||||
}
|
|
||||||
.p-accordion-tab {
|
|
||||||
margin-bottom: var(--p-accordion-tab-gap);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
export default {
|
|
||||||
variables: {
|
|
||||||
common: {
|
|
||||||
body: {
|
|
||||||
paddingX: '{p.5}',
|
|
||||||
paddingY: '{p.5}',
|
|
||||||
gap: '{gap.5}'
|
|
||||||
},
|
|
||||||
caption: {
|
|
||||||
gap: '{gap.2}'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: '{text.2xl}',
|
|
||||||
fontWeight: 700
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
fontWeight: 400
|
|
||||||
}
|
|
||||||
},
|
|
||||||
light: {
|
|
||||||
root: {
|
|
||||||
background: '{shade.0}',
|
|
||||||
color: '{shade.700}',
|
|
||||||
boxShadow: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
color: '{shade.600}'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
root: {
|
|
||||||
background: '{shade.0}',
|
|
||||||
color: '{shade.700}',
|
|
||||||
boxShadow: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
color: '{shade.600}'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
css: `
|
|
||||||
.p-card {
|
|
||||||
background: var(--p-card-background);
|
|
||||||
color: var(--p-card-color);
|
|
||||||
box-shadow: var(--p-card-box-shadow);
|
|
||||||
border-radius: var(--p-border-radius);
|
|
||||||
}
|
|
||||||
.p-card-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--p-card-body-gap);
|
|
||||||
padding: var(--p-card-body-padding-y) var(--p-card-body-padding-x);
|
|
||||||
}
|
|
||||||
.p-card-caption {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--p-card-caption-gap);
|
|
||||||
}
|
|
||||||
.p-card-title {
|
|
||||||
font-size: var(--p-card-title-font-size);
|
|
||||||
font-weight: var(--p-card-title-font-weight);
|
|
||||||
}
|
|
||||||
.p-card-subtitle {
|
|
||||||
font-weight: var(--p-card-subtitle-font-weight);
|
|
||||||
color: var(--p-card-subtitle-color);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
export default {
|
|
||||||
variables: {
|
|
||||||
common: {},
|
|
||||||
light: {},
|
|
||||||
dark: {}
|
|
||||||
},
|
|
||||||
css: `
|
|
||||||
.p-divider-horizontal {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
align-items: center;
|
|
||||||
margin: var(--p-divider-horizontal-margin);
|
|
||||||
padding: var(--p-divider-horizontal-padding);
|
|
||||||
}
|
|
||||||
.p-divider-horizontal:before {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
content: "";
|
|
||||||
border-top: var(--p-divider-size) var(--p-divider-color);
|
|
||||||
}
|
|
||||||
.p-divider-content {
|
|
||||||
z-index: 1;
|
|
||||||
background-color: var(--p-panel-content-bg);
|
|
||||||
}
|
|
||||||
.p-divider-vertical {
|
|
||||||
min-height: 100%;
|
|
||||||
margin: var(--p-divider-vertical-margin);
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
justify-content: center;
|
|
||||||
padding: var(--p-divider-vertical-padding);
|
|
||||||
}
|
|
||||||
.p-divider-vertical:before {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
height: 100%;
|
|
||||||
content: "";
|
|
||||||
border-left: var(--p-divider-size) var(--p-divider-color);
|
|
||||||
}
|
|
||||||
.p-divider-solid.p-divider-horizontal:before {
|
|
||||||
border-top-style: solid;
|
|
||||||
}
|
|
||||||
.p-divider-solid.p-divider-vertical:before {
|
|
||||||
border-left-style: solid;
|
|
||||||
}
|
|
||||||
.p-divider-dashed.p-divider-horizontal:before {
|
|
||||||
border-top-style: dashed;
|
|
||||||
}
|
|
||||||
.p-divider-dashed.p-divider-vertical:before {
|
|
||||||
border-left-style: dashed;
|
|
||||||
}
|
|
||||||
.p-divider-dotted.p-divider-horizontal:before {
|
|
||||||
border-top-style: dotted;
|
|
||||||
}
|
|
||||||
.p-divider-dotted.p-divider-vertical:before {
|
|
||||||
border-left-style: dotted;
|
|
||||||
}
|
|
||||||
.p-divider-horizontal .p-divider-content {
|
|
||||||
padding: 0 var(--p-inline-spacing);
|
|
||||||
}
|
|
||||||
.p-divider-vertical .p-divider-content {
|
|
||||||
padding: var(--p-inline-spacing) 0;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
export default {
|
|
||||||
variables: {
|
|
||||||
common: {},
|
|
||||||
light: {},
|
|
||||||
dark: {}
|
|
||||||
},
|
|
||||||
css: `
|
|
||||||
.p-fieldset-legend > a,
|
|
||||||
.p-fieldset-legend > span {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.p-fieldset-toggleable .p-fieldset-legend a {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: var(--p-panel-header-padding);
|
|
||||||
color: var(--p-panel-header-text-color);
|
|
||||||
border-radius: var(--p-border-radius);
|
|
||||||
transition: var(--p-list-item-transition);
|
|
||||||
}
|
|
||||||
.p-fieldset-legend-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.p-fieldset {
|
|
||||||
border: var(--p-panel-content-border);
|
|
||||||
background: var(--p-panel-content-bg);
|
|
||||||
color: var(--p-panel-content-text-color);
|
|
||||||
border-radius: var(--p-border-radius);
|
|
||||||
}
|
|
||||||
.p-fieldset-legend {
|
|
||||||
padding: var(--p-panel-header-padding);
|
|
||||||
border: var(--p-panel-header-border);
|
|
||||||
color: var(--p-panel-header-text-color);
|
|
||||||
background: var(--p-panel-header-bg);
|
|
||||||
font-weight: var(--p-panel-header-font-weight);
|
|
||||||
border-radius: var(--p-border-radius);
|
|
||||||
}
|
|
||||||
.p-fieldset-content {
|
|
||||||
padding: var(--p-panel-content-padding);
|
|
||||||
}
|
|
||||||
.p-fieldset-toggleable .p-fieldset-legend {
|
|
||||||
padding: 0;
|
|
||||||
transition: var(--p-action-icon-transition);
|
|
||||||
}
|
|
||||||
.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
|
|
||||||
margin-right: var(--p-inline-spacing);
|
|
||||||
}
|
|
||||||
.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
|
|
||||||
outline: var(--p-focus-outline);
|
|
||||||
outline-offset: var(--p-focus-outline-offset);
|
|
||||||
box-shadow: var(--p-focus-shadow);
|
|
||||||
}
|
|
||||||
.p-fieldset-toggleable .p-fieldset-legend a:hover {
|
|
||||||
color: var(--p-panel-header-text-hover-color);
|
|
||||||
}
|
|
||||||
.p-fieldset-toggleable .p-fieldset-legend:hover {
|
|
||||||
background: var(--p-panel-header-hover-bg);
|
|
||||||
border-color: var(--p-panel-header-hover-border-color);
|
|
||||||
color: var(--p-panel-header-text-hover-color);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -1,95 +0,0 @@
|
||||||
export default {
|
|
||||||
css: `
|
|
||||||
@font-face {
|
|
||||||
font-family: "Inter var";
|
|
||||||
font-weight: 100 900;
|
|
||||||
font-display: swap;
|
|
||||||
font-style: normal;
|
|
||||||
font-named-instance: "Regular";
|
|
||||||
src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: "Inter var";
|
|
||||||
font-weight: 100 900;
|
|
||||||
font-display: swap;
|
|
||||||
font-style: italic;
|
|
||||||
font-named-instance: "Italic";
|
|
||||||
src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-component {
|
|
||||||
font-family: var(--p-font-family);
|
|
||||||
font-feature-settings: var(--p-font-feature-settings, normal);
|
|
||||||
font-size: var(--p-font-size);
|
|
||||||
font-weight: var(--p-font-weight);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-component-overlay {
|
|
||||||
background-color: var(--p-mask-bg);
|
|
||||||
transition-duration: var(--p-transition-duration);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-disabled,
|
|
||||||
.p-component:disabled {
|
|
||||||
opacity: var(--p-disabled-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-error {
|
|
||||||
color: var(--p-error-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-text-secondary {
|
|
||||||
color: var(--p-text-secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pi {
|
|
||||||
font-size: var(--p-prime-icon-font-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-icon {
|
|
||||||
width: var(--p-prime-icon-font-size);
|
|
||||||
height: var(--p-prime-icon-font-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-link {
|
|
||||||
font-family: var(--p-font-family);
|
|
||||||
font-feature-settings: var(--p-font-feature-settings, normal);
|
|
||||||
font-size: var(--p-font-size);
|
|
||||||
border-radius: var(--p-border-radius);
|
|
||||||
}
|
|
||||||
.p-link:focus-visible {
|
|
||||||
outline: var(--p-focus-outline);
|
|
||||||
outline-offset: var(--p-focus-outline-offset);
|
|
||||||
box-shadow: var(--p-focus-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-component-overlay-enter {
|
|
||||||
animation: p-component-overlay-enter-animation 150ms forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-component-overlay-leave {
|
|
||||||
animation: p-component-overlay-leave-animation 150ms forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes p-component-overlay-enter-animation {
|
|
||||||
from {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
background-color: var(--maskbg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes p-component-overlay-leave-animation {
|
|
||||||
from {
|
|
||||||
background-color: var(--maskbg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,172 +0,0 @@
|
||||||
import accordion from 'primevue/theme/lara/accordion';
|
|
||||||
import card from 'primevue/theme/lara/card';
|
|
||||||
import global from 'primevue/theme/lara/global';
|
|
||||||
import panel from 'primevue/theme/lara/panel';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
primitive: {
|
|
||||||
/*** @todo Remove ***/
|
|
||||||
shade: {
|
|
||||||
0: '#ffffff',
|
|
||||||
100: '#f9fafb',
|
|
||||||
200: '#f3f4f6',
|
|
||||||
300: '#e5e7eb',
|
|
||||||
400: '#d1d5db',
|
|
||||||
500: '#9ca3af',
|
|
||||||
600: '#6b7280',
|
|
||||||
700: '#4b5563',
|
|
||||||
800: '#374151',
|
|
||||||
900: '#1f2937'
|
|
||||||
},
|
|
||||||
/********************/
|
|
||||||
emerald: {
|
|
||||||
50: '#ecfdf5',
|
|
||||||
100: '#d1fae5',
|
|
||||||
200: '#a7f3d0',
|
|
||||||
300: '#6ee7b7',
|
|
||||||
400: '#34d399',
|
|
||||||
500: '#10b981',
|
|
||||||
600: '#059669',
|
|
||||||
700: '#047857',
|
|
||||||
800: '#065f46',
|
|
||||||
900: '#064e3b',
|
|
||||||
950: '#022c22'
|
|
||||||
},
|
|
||||||
slate: {
|
|
||||||
50: '#f8fafc',
|
|
||||||
100: '#f1f5f9',
|
|
||||||
200: '#e2e8f0',
|
|
||||||
300: '#cbd5e1',
|
|
||||||
400: '#94a3b8',
|
|
||||||
500: '#64748b',
|
|
||||||
600: '#475569',
|
|
||||||
700: '#334155',
|
|
||||||
800: '#1e293b',
|
|
||||||
900: '#0f172a',
|
|
||||||
950: '#020617'
|
|
||||||
},
|
|
||||||
gap: {
|
|
||||||
1: '0.25rem',
|
|
||||||
2: '0.5rem',
|
|
||||||
3: '0.75rem',
|
|
||||||
4: '1rem',
|
|
||||||
5: '1.25rem',
|
|
||||||
6: '1.5rem'
|
|
||||||
},
|
|
||||||
p: {
|
|
||||||
1: '0.25rem',
|
|
||||||
2: '0.5rem',
|
|
||||||
3: '0.75rem',
|
|
||||||
4: '1rem',
|
|
||||||
5: '1.25rem',
|
|
||||||
6: '1.5rem',
|
|
||||||
7: '1.75rem',
|
|
||||||
8: '2rem'
|
|
||||||
},
|
|
||||||
m: {
|
|
||||||
1: '0.25rem',
|
|
||||||
2: '0.5rem',
|
|
||||||
3: '0.75rem',
|
|
||||||
4: '1rem',
|
|
||||||
5: '1.25rem',
|
|
||||||
6: '1.5rem',
|
|
||||||
7: '1.75rem',
|
|
||||||
8: '2rem'
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
xs: '0.75rem',
|
|
||||||
sm: '0.875rem',
|
|
||||||
base: '1rem',
|
|
||||||
lg: '1.125rem',
|
|
||||||
xl: '1.25rem',
|
|
||||||
'2xl': '1.5rem'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
semantic: {
|
|
||||||
colorScheme: {
|
|
||||||
light: {
|
|
||||||
primary: {
|
|
||||||
50: '{emerald.50}',
|
|
||||||
100: '{emerald.100}',
|
|
||||||
200: '{emerald.200}',
|
|
||||||
300: '{emerald.300}',
|
|
||||||
400: '{emerald.400}',
|
|
||||||
500: '{emerald.500}',
|
|
||||||
600: '{emerald.600}',
|
|
||||||
700: '{emerald.700}',
|
|
||||||
800: '{emerald.800}',
|
|
||||||
900: '{emerald.900}',
|
|
||||||
950: '{emerald.950}'
|
|
||||||
},
|
|
||||||
surface: {
|
|
||||||
0: '#ffffff',
|
|
||||||
50: '{slate.50}',
|
|
||||||
100: '{slate.100}',
|
|
||||||
200: '{slate.200}',
|
|
||||||
300: '{slate.300}',
|
|
||||||
400: '{slate.400}',
|
|
||||||
500: '{slate.500}',
|
|
||||||
600: '{slate.600}',
|
|
||||||
700: '{slate.700}',
|
|
||||||
800: '{slate.800}',
|
|
||||||
900: '{slate.900}',
|
|
||||||
950: '{slate.950}'
|
|
||||||
},
|
|
||||||
textColor: '{surface.700}',
|
|
||||||
textSecondaryColor: '{surface.500}',
|
|
||||||
borderColor: '{surface.300}'
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
primary: {
|
|
||||||
50: '{emerald.50}',
|
|
||||||
100: '{emerald.100}',
|
|
||||||
200: '{emerald.200}',
|
|
||||||
300: '{emerald.300}',
|
|
||||||
400: '{emerald.400}',
|
|
||||||
500: '{emerald.500}',
|
|
||||||
600: '{emerald.600}',
|
|
||||||
700: '{emerald.700}',
|
|
||||||
800: '{emerald.800}',
|
|
||||||
900: '{emerald.900}',
|
|
||||||
950: '{emerald.950}'
|
|
||||||
},
|
|
||||||
surface: {
|
|
||||||
0: '#ffffff',
|
|
||||||
50: '{zinc.50}',
|
|
||||||
100: '{zinc.100}',
|
|
||||||
200: '{zinc.200}',
|
|
||||||
300: '{zinc.300}',
|
|
||||||
400: '{zinc.400}',
|
|
||||||
500: '{zinc.500}',
|
|
||||||
600: '{zinc.600}',
|
|
||||||
700: '{zinc.700}',
|
|
||||||
800: '{zinc.800}',
|
|
||||||
900: '{zinc.900}',
|
|
||||||
950: '{zinc.950}'
|
|
||||||
},
|
|
||||||
textColor: '{dark.surface.0}',
|
|
||||||
textSecondaryColor: '{dark.surface.500}',
|
|
||||||
borderColor: '{dark.surface.700}'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
common: {
|
|
||||||
fontFamily: '"Inter var", sans-serif',
|
|
||||||
borderRadius: '6px',
|
|
||||||
inlineGap: '{gap.2}', // inline-spacing
|
|
||||||
transitionDuration: '.2s',
|
|
||||||
transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}, outline-color {transitionDuration}',
|
|
||||||
focusRing: {
|
|
||||||
width: '2px',
|
|
||||||
style: 'solid',
|
|
||||||
color: '{primary.500}',
|
|
||||||
offset: '2px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
global,
|
|
||||||
accordion,
|
|
||||||
card,
|
|
||||||
panel
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
export default {
|
|
||||||
css: `
|
|
||||||
.p-panel-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
border: var(--p-panel-header-border-width) var(--p-panel-header-border-style) var(--p-panel-header-border-color);
|
|
||||||
padding: var(--p-panel-header-padding-y) var(--p-panel-header-padding-x);
|
|
||||||
background: var(--p-dark-surface-900, var(--p-surface-100));
|
|
||||||
color: var(--p-panel-header-color);
|
|
||||||
border-top-right-radius: var(--p-border-radius);
|
|
||||||
border-top-left-radius: var(--p-border-radius);
|
|
||||||
}
|
|
||||||
.p-panel-title {
|
|
||||||
line-height: 1;
|
|
||||||
font-weight: var(--p-panel-header-font-weight);
|
|
||||||
}
|
|
||||||
.p-panel-header-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
width: var(--p-panel-header-icon-width);
|
|
||||||
height: var(--p-panel-header-icon-height);
|
|
||||||
color: var(--p-panel-header-icon-color);
|
|
||||||
border: var(--p-panel-header-icon-border-width) var(--p-panel-header-icon-border-style) var(--p-panel-header-icon-border-color);
|
|
||||||
background: var(--p-panel-header-icon-background);
|
|
||||||
border-radius: var(--p-panel-header-icon-border-radius);
|
|
||||||
transition: var(--p-transition);
|
|
||||||
outline-color: transparent;
|
|
||||||
}
|
|
||||||
.p-panel-header-icon:enabled:hover {
|
|
||||||
color: var(--p-panel-header-icon-hover-color);
|
|
||||||
border-color: var(--p-panel-header-icon-hover-border-color);
|
|
||||||
background: var(--p-panel-header-icon-hover-background);
|
|
||||||
}
|
|
||||||
.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-toggleable > .p-panel-header {
|
|
||||||
padding: var(--p-panel-toggleable-header-padding-y) var(--p-panel-toggleable-header-padding-x);
|
|
||||||
}
|
|
||||||
.p-panel-content {
|
|
||||||
padding: var(--p-panel-content-padding-y) var(--p-panel-content-padding-x);
|
|
||||||
border: var(--p-panel-content-border-width) var(--p-panel-content-border-style) var(--p-panel-content-border-color);
|
|
||||||
background: var(--p-panel-content-background);
|
|
||||||
color: var(--p-panel-content-color);
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
.p-panel-content:last-child {
|
|
||||||
border-bottom-right-radius: var(--p-border-radius);
|
|
||||||
border-bottom-left-radius: var(--p-border-radius);
|
|
||||||
}
|
|
||||||
.p-panel-footer {
|
|
||||||
padding: var(--p-panel-footer-padding-y) var(--p-panel-footer-padding-x);
|
|
||||||
border: var(--p-panel-footer-border-width) var(--p-panel-footer-border-style) var(--p-panel-footer-border-color);
|
|
||||||
background: var(--p-panel-footer-background);
|
|
||||||
color: var(--p-panel-footer-color);
|
|
||||||
border-bottom-right-radius: var(--p-border-radius);
|
|
||||||
border-bottom-left-radius: var(--p-border-radius);
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
export default {
|
|
||||||
variables: {
|
|
||||||
common: {},
|
|
||||||
light: {},
|
|
||||||
dark: {}
|
|
||||||
},
|
|
||||||
css: `
|
|
||||||
.p-scrollpanel-wrapper {
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.p-scrollpanel-content {
|
|
||||||
height: calc(100% + 18px);
|
|
||||||
width: calc(100% + 18px);
|
|
||||||
padding: 0 18px 18px 0;
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
.p-scrollpanel-content::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.p-scrollpanel-bar {
|
|
||||||
position: relative;
|
|
||||||
background: var(--p-scroll-panel-track-bg);
|
|
||||||
border-radius: 3px;
|
|
||||||
z-index: 2;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0;
|
|
||||||
transition: var(--p-form-element-transition);
|
|
||||||
border: var(--p-scroll-panel-track-border);
|
|
||||||
}
|
|
||||||
.p-scrollpanel-bar-y {
|
|
||||||
width: 9px;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.p-scrollpanel-bar-x {
|
|
||||||
height: 9px;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
.p-scrollpanel-hidden {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
.p-scrollpanel:active .p-scrollpanel-bar,
|
|
||||||
.p-scrollpanel:hover .p-scrollpanel-bar {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.p-scrollpanel-grabbed {
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.p-scrollpanel-bar:focus-visible {
|
|
||||||
outline: var(--p-focus-outline);
|
|
||||||
outline-offset: var(--p-focus-outline-offset);
|
|
||||||
box-shadow: var(--p-focus-shadow);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
export default {
|
|
||||||
variables: {
|
|
||||||
common: {},
|
|
||||||
light: {},
|
|
||||||
dark: {}
|
|
||||||
},
|
|
||||||
css: `
|
|
||||||
.p-splitter {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
border: var(--p-panel-content-border);
|
|
||||||
background: var(--p-panel-content-bg);
|
|
||||||
border-radius: var(--p-border-radius);
|
|
||||||
color: var(--p-panel-content-text-color);
|
|
||||||
}
|
|
||||||
.p-splitter-vertical {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.p-splitter-gutter {
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: col-resize;
|
|
||||||
transition: var(--p-action-icon-transition);
|
|
||||||
background: var(--p-splitter-gutter-bg);
|
|
||||||
}
|
|
||||||
.p-splitter-horizontal.p-splitter-resizing {
|
|
||||||
cursor: col-resize;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
|
|
||||||
height: 24px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.p-splitter-horizontal > .p-splitter-gutter {
|
|
||||||
cursor: col-resize;
|
|
||||||
}
|
|
||||||
.p-splitter-vertical.p-splitter-resizing {
|
|
||||||
cursor: row-resize;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.p-splitter-vertical > .p-splitter-gutter {
|
|
||||||
cursor: row-resize;
|
|
||||||
}
|
|
||||||
.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
|
|
||||||
width: 24px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.p-splitter-gutter-handle {
|
|
||||||
background: var(--p-splitter-gutter-handle-bg);
|
|
||||||
transition: var(--p-form-element-transition);
|
|
||||||
}
|
|
||||||
.p-splitter-gutter-handle:focus-visible {
|
|
||||||
outline: var(--p-focus-outline);
|
|
||||||
outline-offset: var(--p-focus-outline-offset);
|
|
||||||
box-shadow: var(--p-focus-shadow);
|
|
||||||
}
|
|
||||||
.p-splitter-gutter-resizing {
|
|
||||||
background: var(--p-splitter-gutter-handle-bg);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
export default {
|
|
||||||
variables: {
|
|
||||||
common: {},
|
|
||||||
light: {},
|
|
||||||
dark: {}
|
|
||||||
},
|
|
||||||
css: `
|
|
||||||
.p-tabview-nav-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.p-tabview-scrollable .p-tabview-nav-container {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.p-tabview-nav-content {
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
scrollbar-width: none;
|
|
||||||
overscroll-behavior: contain auto;
|
|
||||||
}
|
|
||||||
.p-tabview-nav {
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
background: var(--p-tabview-nav-bg);
|
|
||||||
border: var(--p-tabview-nav-border);
|
|
||||||
border-width: var(--p-tabview-nav-border-width);
|
|
||||||
}
|
|
||||||
.p-tabview-header-action {
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.p-tabview-ink-bar {
|
|
||||||
display: none;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.p-tabview-header-action:focus {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.p-tabview-title {
|
|
||||||
line-height: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.p-tabview-nav-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: 2;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.p-tabview-nav-prev {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.p-tabview-nav-next {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
.p-tabview-nav-content::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.p-tabview-nav li {
|
|
||||||
margin-right: var(--p-tabview-header-spacing);
|
|
||||||
}
|
|
||||||
.p-tabview-nav-link {
|
|
||||||
border: var(--p-tabview-header-border);
|
|
||||||
border-width: var(--p-tabview-header-border-width);
|
|
||||||
border-color: var(--p-tabview-header-border-color);
|
|
||||||
background: var(--p-tabview-header-bg);
|
|
||||||
color: var(--p-tabview-header-text-color);
|
|
||||||
padding: var(--p-tabview-header-padding);
|
|
||||||
font-weight: var(--p-tabview-header-font-weight);
|
|
||||||
border-top-right-radius: var(--p-border-radius);
|
|
||||||
border-top-left-radius: var(--p-border-radius);
|
|
||||||
transition:
|
|
||||||
background-color 0.2s,
|
|
||||||
border-color 0.2s,
|
|
||||||
box-shadow 0.2s;
|
|
||||||
margin: var(--p-tabview-header-margin);
|
|
||||||
}
|
|
||||||
.p-tabview-nav-link:not(.p-disabled):focus-visible {
|
|
||||||
outline: var(--p-focus-outline);
|
|
||||||
outline-offset: var(--p-focus-outline-offset);
|
|
||||||
box-shadow: inset var(--p-focus-shadow);
|
|
||||||
}
|
|
||||||
.p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
|
|
||||||
background: var(--p-tabview-header-hover-bg);
|
|
||||||
border-color: var(--p-tabview-header-hover-border-color);
|
|
||||||
color: var(--p-tabview-header-text-hover-color);
|
|
||||||
}
|
|
||||||
.p-tabview-nav li.p-highlight .p-tabview-nav-link {
|
|
||||||
border-color: var(--p-tabview-header-active-border-color);
|
|
||||||
}
|
|
||||||
.p-tabview-nav li.p-highlight .p-tabview-nav-link,
|
|
||||||
.p-tabview-nav-btn.p-link {
|
|
||||||
background: var(--p-tabview-header-active-bg);
|
|
||||||
color: var(--p-tabview-header-text-active-color);
|
|
||||||
}
|
|
||||||
.p-tabview-nav-btn.p-link {
|
|
||||||
width: var(--p-button-icon-only-width);
|
|
||||||
box-shadow: var(--p-raised-button-shadow);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
.p-tabview-nav-btn.p-link:focus-visible {
|
|
||||||
outline: var(--p-focus-outline);
|
|
||||||
outline-offset: var(--p-focus-outline-offset);
|
|
||||||
box-shadow: inset var(--p-focus-shadow);
|
|
||||||
}
|
|
||||||
.p-tabview-panels {
|
|
||||||
background: var(--p-tabview-content-bg);
|
|
||||||
padding: var(--p-tabview-content-padding);
|
|
||||||
border: var(--p-tabview-content-border);
|
|
||||||
color: var(--p-tabview-content-text-color);
|
|
||||||
border-bottom-right-radius: var(--p-border-radius);
|
|
||||||
border-bottom-left-radius: var(--p-border-radius);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
export default {
|
|
||||||
variables: {
|
|
||||||
common: {},
|
|
||||||
light: {},
|
|
||||||
dark: {}
|
|
||||||
},
|
|
||||||
css: `
|
|
||||||
.p-toolbar {
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
background: var(--p-panel-header-bg);
|
|
||||||
border: var(--p-panel-header-border);
|
|
||||||
padding: var(--p-panel-header-padding);
|
|
||||||
border-radius: var(--p-border-radius);
|
|
||||||
gap: var(--p-inline-spacing);
|
|
||||||
}
|
|
||||||
.p-toolbar,
|
|
||||||
.p-toolbar-group-center,
|
|
||||||
.p-toolbar-group-end,
|
|
||||||
.p-toolbar-group-left,
|
|
||||||
.p-toolbar-group-right,
|
|
||||||
.p-toolbar-group-start {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.p-toolbar-separator {
|
|
||||||
margin: 0 var(--p-inline-spacing);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"main": "./index.cjs.js",
|
|
||||||
"module": "./index.esm.js",
|
|
||||||
"unpkg": "./index.min.js",
|
|
||||||
"types": "./index.d.ts"
|
|
||||||
}
|
|
||||||
|
|
@ -52,7 +52,10 @@ export default defineNuxtConfig({
|
||||||
{ property: 'og:image', content: 'https://www.primefaces.org/static/social/primevue-preview.jpg' },
|
{ property: 'og:image', content: 'https://www.primefaces.org/static/social/primevue-preview.jpg' },
|
||||||
{ property: 'og:ttl', content: '604800' }
|
{ property: 'og:ttl', content: '604800' }
|
||||||
],
|
],
|
||||||
link: [{ rel: 'icon', href: baseUrl + 'favicon.ico' }],
|
link: [
|
||||||
|
{ rel: 'icon', href: baseUrl + 'favicon.ico' },
|
||||||
|
{ rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
|
||||||
|
],
|
||||||
script: [
|
script: [
|
||||||
{
|
{
|
||||||
src: baseUrl + 'scripts/prism.js',
|
src: baseUrl + 'scripts/prism.js',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue