mirror of
https://github.com/imfing/hextra.git
synced 2025-07-01 22:37:10 -04:00
feat: add hx-
prefix to Hextra Tailwind CSS classes (#300)
* feat: add prefix to tailwind css classes * fix: remove unnecessary prefixes * fix: add missing prefix in other places * chore: regenerate hugo_stats.json * chore: run `npm run build:css` * chore: add `hx-` prefix to _index.fa.md * fix: lang switcher display issue * fix: add `hx-` prefix to showcase/index.fa.md * fix: lang switch param mistake
This commit is contained in:
@ -2,6 +2,6 @@
|
||||
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
|
||||
) {
|
||||
.code-copy-btn {
|
||||
@apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
|
||||
@apply hx-backdrop-blur-md hx-bg-opacity-[.85] dark:hx-bg-opacity-80;
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
nav {
|
||||
.search-wrapper {
|
||||
@apply hidden md:inline-block;
|
||||
@apply hx-hidden md:hx-inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,13 +8,13 @@ nav {
|
||||
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
|
||||
) {
|
||||
.nav-container-blur {
|
||||
@apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
|
||||
@apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-menu svg {
|
||||
g {
|
||||
@apply origin-center;
|
||||
@apply hx-origin-center;
|
||||
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
path {
|
||||
@ -37,16 +37,16 @@ nav {
|
||||
|
||||
&.open > {
|
||||
path {
|
||||
@apply opacity-0;
|
||||
@apply hx-opacity-0;
|
||||
}
|
||||
g:nth-of-type(1) {
|
||||
@apply rotate-45;
|
||||
@apply hx-rotate-45;
|
||||
path {
|
||||
transform: translate3d(0, 4px, 0);
|
||||
}
|
||||
}
|
||||
g:nth-of-type(2) {
|
||||
@apply -rotate-45;
|
||||
@apply -hx-rotate-45;
|
||||
path {
|
||||
transform: translate3d(0, -4px, 0);
|
||||
}
|
||||
|
@ -4,18 +4,18 @@
|
||||
|
||||
scrollbar-gutter: stable;
|
||||
&::-webkit-scrollbar {
|
||||
@apply w-3 h-3;
|
||||
@apply hx-w-3 hx-h-3;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
@apply hx-bg-transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply rounded-[10px];
|
||||
@apply hx-rounded-[10px];
|
||||
}
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid transparent;
|
||||
background-color: var(--tw-shadow-color);
|
||||
background-clip: content-box;
|
||||
@apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
|
||||
@apply hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
|
||||
}
|
||||
}
|
||||
|
@ -1,31 +1,31 @@
|
||||
.search-wrapper {
|
||||
li {
|
||||
@apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
|
||||
@apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-gray-800 contrast-more:hx-border-transparent dark:hx-text-gray-300;
|
||||
a {
|
||||
@apply block scroll-m-12 px-2.5 py-2;
|
||||
@apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
|
||||
}
|
||||
|
||||
.title {
|
||||
@apply text-base font-semibold leading-5;
|
||||
@apply hx-text-base hx-font-semibold hx-leading-5;
|
||||
}
|
||||
|
||||
.active {
|
||||
@apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
|
||||
@apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
|
||||
}
|
||||
}
|
||||
|
||||
.no-result {
|
||||
@apply block select-none p-8 text-center text-sm text-gray-400;
|
||||
@apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
|
||||
}
|
||||
|
||||
.prefix {
|
||||
@apply mx-2.5 mb-2 mt-6 select-none border-b border-black/10 px-2.5 pb-1.5 text-xs font-semibold
|
||||
uppercase text-gray-500 first:mt-0 dark:border-white/20 dark:text-gray-300 contrast-more:border-gray-600
|
||||
contrast-more:text-gray-900 contrast-more:dark:border-gray-50 contrast-more:dark:text-gray-50;
|
||||
@apply hx-mx-2.5 hx-mb-2 hx-mt-6 hx-select-none hx-border-b hx-border-black/10 hx-px-2.5 hx-pb-1.5 hx-text-xs hx-font-semibold
|
||||
hx-uppercase hx-text-gray-500 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-gray-300 contrast-more:hx-border-gray-600
|
||||
contrast-more:hx-text-gray-900 contrast-more:dark:hx-border-gray-50 contrast-more:dark:hx-text-gray-50;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
@apply overflow-hidden text-ellipsis mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50;
|
||||
@apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-gray-600 dark:hx-text-gray-400 contrast-more:dark:hx-text-gray-50;
|
||||
display: -webkit-box;
|
||||
line-clamp: 1;
|
||||
-webkit-line-clamp: 1;
|
||||
@ -33,6 +33,6 @@
|
||||
}
|
||||
|
||||
.match {
|
||||
@apply text-primary-600;
|
||||
@apply hx-text-primary-600;
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
@media (max-width: 767px) {
|
||||
.sidebar-container {
|
||||
@apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
|
||||
@apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark;
|
||||
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
|
||||
will-change: transform, opacity;
|
||||
contain: layout style;
|
||||
@ -10,12 +10,12 @@
|
||||
|
||||
.sidebar-container {
|
||||
li > div {
|
||||
@apply h-0;
|
||||
@apply hx-h-0;
|
||||
}
|
||||
li.open > div {
|
||||
@apply h-auto pt-1;
|
||||
@apply hx-h-auto hx-pt-1;
|
||||
}
|
||||
li.open > a > span > svg > path {
|
||||
@apply rotate-90;
|
||||
@apply hx-rotate-90;
|
||||
}
|
||||
}
|
||||
|
@ -2,10 +2,10 @@
|
||||
counter-increment: step;
|
||||
|
||||
&:before {
|
||||
@apply absolute w-[33px] h-[33px];
|
||||
@apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
|
||||
@apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
|
||||
@apply mt-[3px] ml-[-41px];
|
||||
@apply hx-absolute hx-w-[33px] hx-h-[33px];
|
||||
@apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
|
||||
@apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
|
||||
@apply hx-mt-[3px] hx-ml-[-41px];
|
||||
content: counter(step);
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user