mirror of
https://github.com/neosubhamoy/neosubhamoy-portfolio.git
synced 2025-12-20 01:09:35 +05:30
(feat): implemented basic mobile floating bottom navbar and share button
This commit is contained in:
@@ -1,3 +1,17 @@
|
||||
<?php
|
||||
function isNavPageActive($pageName, $pageRoute) {
|
||||
$currentPage = $_SERVER['PHP_SELF'];
|
||||
$currentRoute = parse_url($_SERVER['REQUEST_URI'])['path'];
|
||||
if (strpos($currentPage, $pageName) !== false || strpos($currentRoute, $pageRoute) !== false) {
|
||||
if ($pageRoute == '/' && ($pos = strrpos($currentRoute, $pageRoute)) !== false && $pos < strlen($currentRoute) - 1) {
|
||||
return '';
|
||||
}
|
||||
return 'w-full';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
?>
|
||||
|
||||
<div id="floatingwindowwrapper" class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] hidden"></div>
|
||||
<div id="phpHostBasePath" class="hidden" data-base-path="<?php echo htmlspecialchars($basePath);?>"></div>
|
||||
<div id="searchwindow" class="searchwindow w-[90vw] md:w-[44vw] mx-auto h-fit min-h-[15vh] max-h-[45vh] md:max-h-[60vh] fixed inset-x-0 top-[30vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-y-scroll no-scrollbar hidden">
|
||||
@@ -123,7 +137,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
|
||||
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] hidden lg:flex justify-center items-center">
|
||||
<div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 shadow-[0px_0px_30px] shadow-bg_primary hover:shadow-accent_primary_extratransparent transition transform duration-300">
|
||||
<button class="bg-accent_primary px-3 py-2 rounded-full"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
|
||||
<p id="searchtext" class="ml-3 mr-4 text-accent_three">Search</p>
|
||||
@@ -133,3 +147,35 @@
|
||||
<button id="closebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
|
||||
<button id="shareclosebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
|
||||
</div>
|
||||
<div id="mobile-floating-bar" class="fixed inset-x-0 bottom-[3vh] z-[50] flex lg:hidden justify-center items-center">
|
||||
<div class="bottomnav w-[90vw] p-3 bg-bg_secondary rounded-xl relative flex justify-around items-center shadow-[0px_0px_30px] shadow-bg_primary">
|
||||
<span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/cnpvyndp.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Home</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('home.php', '/');?>"></span>
|
||||
</span>
|
||||
<span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/projects' ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/utpmnzxz.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Projects</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('projects.php', '/projects');?>"></span>
|
||||
</span>
|
||||
<div class="flex items-center absolute -top-1/2">
|
||||
<button id="mobilesearchbutton" class="searchbutton bg-accent_primary px-5 py-4 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary transition transform duration-300 border-[8px] border-bg_primary before:content-[''] before:absolute before:top-1/2 before:-left-6 before:w-[20px] before:h-[20px] before:bg-[transparent] before:rounded-tr-full after:shadow-[0px_-10px_0_0_rgb(15,_23,_42)] after:content-[''] after:absolute after:top-1/2 after:-right-6 after:w-[20px] after:h-[20px] after:bg-[transparent] after:rounded-tl-full before:shadow-[0px_-10px_0_0_rgb(15,_23,_42)]"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
|
||||
</div>
|
||||
<div class="spacer w-[20%]"></div>
|
||||
<span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/blog' ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/lyrrgrsl.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Blog</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('blog.php', '/blog');?>"></span>
|
||||
</span>
|
||||
<span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/contact' ?>'">
|
||||
<lord-icon class="mx-1" src="https://cdn.lordicon.com/kthelypq.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
|
||||
<p class="mx-1 text-xs">Contact</p>
|
||||
<span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('contact.php', '/contact');?>"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile-floating-share" class="fixed right-[1rem] -bottom-[10vh] z-[40] flex lg:hidden justify-center items-center">
|
||||
<button id="mobilesharebutton" class="sharebutton bg-accent_primary px-[1.30rem] py-4 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button>
|
||||
<button id="mobileshareclose" class="closebutton bg-accent_primary px-[1.35rem] py-4 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
|
||||
</div>
|
||||
@@ -124,6 +124,16 @@ background: #38BDF8;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.floatingshare-slide-up {
|
||||
transform: translateY(-15vh);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.floatingshare-slide-down {
|
||||
transform: translateY(15vh);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.floatingbar-click-slide-up {
|
||||
transform: translateY(-70vh);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
|
||||
@@ -17,6 +17,11 @@ const spinnerQr = document.getElementById("qrspinnercont");
|
||||
const qrCode = document.getElementById("pageqrcode");
|
||||
const linkInput = document.getElementById("pageurlinput");
|
||||
const embedCode = document.getElementById("embedcodetag");
|
||||
const mobileFloatingBar = document.getElementById("mobile-floating-bar");
|
||||
const mobileFloatingShare = document.getElementById("mobile-floating-share");
|
||||
const mobileSearchBtn = document.getElementById("mobilesearchbutton");
|
||||
const mobileShareBtn = document.getElementById("mobilesharebutton");
|
||||
const mobileShareCloseBtn = document.getElementById("mobileshareclose");
|
||||
const basePath = document.getElementById('phpHostBasePath').dataset.basePath;
|
||||
let lastScrollTop = 0, isSearchActive = false, isShareActive = false;
|
||||
|
||||
@@ -28,11 +33,19 @@ window.addEventListener("scroll", function () {
|
||||
floatingBar.classList.remove("floatingbar-click-slide-down");
|
||||
floatingBar.classList.add("floatingbar-slide-down");
|
||||
floatingBar.classList.remove("floatingbar-slide-up");
|
||||
mobileFloatingBar.classList.add("floatingbar-slide-down");
|
||||
mobileFloatingBar.classList.remove("floatingbar-slide-up");
|
||||
mobileFloatingShare.classList.remove("floatingshare-slide-down");
|
||||
mobileFloatingShare.classList.add("floatingshare-slide-up");
|
||||
} else {
|
||||
// Scrolling up
|
||||
floatingBar.classList.remove("floatingbar-click-slide-down");
|
||||
floatingBar.classList.remove("floatingbar-slide-down");
|
||||
floatingBar.classList.add("floatingbar-slide-up");
|
||||
mobileFloatingBar.classList.remove("floatingbar-slide-down");
|
||||
mobileFloatingBar.classList.add("floatingbar-slide-up");
|
||||
mobileFloatingShare.classList.remove("floatingshare-slide-up");
|
||||
mobileFloatingShare.classList.add("floatingshare-slide-down");
|
||||
}
|
||||
|
||||
lastScrollTop = st <= 0 ? 0 : st;
|
||||
@@ -41,6 +54,12 @@ window.addEventListener("scroll", function () {
|
||||
// function to open floating search window
|
||||
function activate_search() {
|
||||
isSearchActive = true;
|
||||
mobileFloatingBar.classList.remove("flex", "lg:hidden");
|
||||
mobileFloatingBar.classList.add("hidden");
|
||||
if(window.innerWidth < 1024) {
|
||||
floatingBar.classList.remove("hidden", "lg:flex");
|
||||
floatingBar.classList.add("flex");
|
||||
}
|
||||
floatingBar.classList.remove("floatingbar-click-slide-down");
|
||||
floatingBar.classList.add("floatingbar-click-slide-up");
|
||||
searchBar.classList.remove("searchbar-click-decrease-width");
|
||||
@@ -58,6 +77,12 @@ function activate_search() {
|
||||
|
||||
// function to close floating search window
|
||||
function close_search() {
|
||||
mobileFloatingBar.classList.remove("hidden");
|
||||
mobileFloatingBar.classList.add("flex", "lg:hidden");
|
||||
if(window.innerWidth < 1024) {
|
||||
floatingBar.classList.remove("flex");
|
||||
floatingBar.classList.add("hidden", "lg:flex");
|
||||
}
|
||||
floatingBar.classList.remove("floatingbar-click-slide-up");
|
||||
floatingBar.classList.add("floatingbar-click-slide-down");
|
||||
searchBar.classList.remove("searchbar-click-increase-width");
|
||||
@@ -84,6 +109,18 @@ searchBar.addEventListener("click", function () {
|
||||
}
|
||||
});
|
||||
|
||||
// when the search icon is clicked on mobile view
|
||||
mobileSearchBtn.addEventListener("click", function () {
|
||||
if(!isShareActive) {
|
||||
activate_search();
|
||||
}
|
||||
else {
|
||||
close_share();
|
||||
activate_search();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// when ALT + K shortcut key is pressed
|
||||
document.addEventListener("keydown", function(event) {
|
||||
if (event.altKey && event.key === "k") {
|
||||
@@ -350,7 +387,9 @@ function activate_share() {
|
||||
windowWrapper.classList.remove("hidden");
|
||||
windowWrapper.classList.add("flotingbar-window-wrapper-show");
|
||||
shareBtn.classList.add("hidden");
|
||||
mobileShareBtn.classList.add("hidden");
|
||||
shareCloseBtn.classList.remove("hidden");
|
||||
mobileShareCloseBtn.classList.remove("hidden");
|
||||
shareWin.classList.add("floatingshare-window-show");
|
||||
document.body.classList.add("overflow-hidden");
|
||||
show_qr_loading_delay(); //show qrcode loading delay spinner
|
||||
@@ -361,7 +400,9 @@ function close_share() {
|
||||
windowWrapper.classList.remove("flotingbar-window-wrapper-show");
|
||||
windowWrapper.classList.add("hidden");
|
||||
shareCloseBtn.classList.add("hidden");
|
||||
mobileShareCloseBtn.classList.add("hidden");
|
||||
shareBtn.classList.remove("hidden");
|
||||
mobileShareBtn.classList.remove("hidden");
|
||||
shareWin.classList.remove("floatingshare-window-show");
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
isShareActive = false;
|
||||
@@ -378,11 +419,27 @@ shareBtn.addEventListener("click", function () {
|
||||
}
|
||||
});
|
||||
|
||||
// when the Share Button is clicked on mobile view
|
||||
mobileShareBtn.addEventListener("click", function () {
|
||||
if(!isSearchActive) {
|
||||
activate_share();
|
||||
}
|
||||
else {
|
||||
close_search();
|
||||
activate_share();
|
||||
}
|
||||
});
|
||||
|
||||
// when Close Share button is pressed
|
||||
shareCloseBtn.addEventListener("click", function () {
|
||||
close_share();
|
||||
});
|
||||
|
||||
// when the Close Share button is clicked on mobile view
|
||||
mobileShareCloseBtn.addEventListener("click", function () {
|
||||
close_share();
|
||||
});
|
||||
|
||||
// when ALT + L shortcut key is pressed
|
||||
document.addEventListener("keydown", function(event) {
|
||||
if (event.altKey && event.key === "l") {
|
||||
|
||||
@@ -581,6 +581,10 @@ video {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.-top-7 {
|
||||
top: -1.75rem;
|
||||
}
|
||||
|
||||
.-top-\[0\.60rem\] {
|
||||
top: -0.60rem;
|
||||
}
|
||||
@@ -597,6 +601,10 @@ video {
|
||||
bottom: 20vh;
|
||||
}
|
||||
|
||||
.bottom-\[3vh\] {
|
||||
bottom: 3vh;
|
||||
}
|
||||
|
||||
.bottom-\[5\.5rem\] {
|
||||
bottom: 5.5rem;
|
||||
}
|
||||
@@ -669,6 +677,46 @@ video {
|
||||
top: 4.7rem;
|
||||
}
|
||||
|
||||
.-top-1\/2 {
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
.-bottom-5 {
|
||||
bottom: -1.25rem;
|
||||
}
|
||||
|
||||
.bottom-5 {
|
||||
bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.-bottom-2 {
|
||||
bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.-bottom-3 {
|
||||
bottom: -0.75rem;
|
||||
}
|
||||
|
||||
.left-\[1rem\] {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.right-\[1rem\] {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.bottom-\[5vh\] {
|
||||
bottom: 5vh;
|
||||
}
|
||||
|
||||
.-bottom-\[5vh\] {
|
||||
bottom: -5vh;
|
||||
}
|
||||
|
||||
.-bottom-\[10vh\] {
|
||||
bottom: -10vh;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -697,6 +745,10 @@ video {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.z-\[40\] {
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
@@ -1050,22 +1102,18 @@ video {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-\[3px\] {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.max-h-\[45vh\] {
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
.min-h-\[10vh\] {
|
||||
min-height: 10vh;
|
||||
}
|
||||
|
||||
.min-h-\[15vh\] {
|
||||
min-height: 15vh;
|
||||
}
|
||||
|
||||
.min-h-\[12vh\] {
|
||||
min-height: 12vh;
|
||||
}
|
||||
|
||||
.w-0 {
|
||||
width: 0px;
|
||||
}
|
||||
@@ -1078,6 +1126,10 @@ video {
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
.w-\[20\%\] {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.w-\[200px\] {
|
||||
width: 200px;
|
||||
}
|
||||
@@ -1155,6 +1207,10 @@ video {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-\[3rem\] {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.max-w-\[45vw\] {
|
||||
max-width: 45vw;
|
||||
}
|
||||
@@ -1320,6 +1376,14 @@ video {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-tl-full {
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-tr-full {
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.border-\[1px\] {
|
||||
border-width: 1px;
|
||||
}
|
||||
@@ -1340,6 +1404,18 @@ video {
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.border-\[12px\] {
|
||||
border-width: 12px;
|
||||
}
|
||||
|
||||
.border-\[6px\] {
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.border-\[8px\] {
|
||||
border-width: 8px;
|
||||
}
|
||||
|
||||
.border-b-\[1px\] {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
@@ -1414,6 +1490,11 @@ video {
|
||||
border-color: rgb(217 217 217 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-bg_primary {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(15 23 42 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-b-accent_secondary_transparent {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.30);
|
||||
}
|
||||
@@ -1584,6 +1665,11 @@ video {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.py-5 {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
@@ -1619,6 +1705,21 @@ video {
|
||||
padding-bottom: 0.30rem;
|
||||
}
|
||||
|
||||
.px-\[1\.50rem\] {
|
||||
padding-left: 1.50rem;
|
||||
padding-right: 1.50rem;
|
||||
}
|
||||
|
||||
.px-\[1\.30rem\] {
|
||||
padding-left: 1.30rem;
|
||||
padding-right: 1.30rem;
|
||||
}
|
||||
|
||||
.px-\[1\.35rem\] {
|
||||
padding-left: 1.35rem;
|
||||
padding-right: 1.35rem;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
@@ -1900,6 +2001,132 @@ video {
|
||||
hostname: port;
|
||||
}
|
||||
|
||||
.before\:absolute::before {
|
||||
content: var(--tw-content);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.before\:top-0::before {
|
||||
content: var(--tw-content);
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.before\:-left-10::before {
|
||||
content: var(--tw-content);
|
||||
left: -2.5rem;
|
||||
}
|
||||
|
||||
.before\:-left-5::before {
|
||||
content: var(--tw-content);
|
||||
left: -1.25rem;
|
||||
}
|
||||
|
||||
.before\:top-1\/2::before {
|
||||
content: var(--tw-content);
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.before\:-left-7::before {
|
||||
content: var(--tw-content);
|
||||
left: -1.75rem;
|
||||
}
|
||||
|
||||
.before\:-left-6::before {
|
||||
content: var(--tw-content);
|
||||
left: -1.5rem;
|
||||
}
|
||||
|
||||
.before\:h-\[20px\]::before {
|
||||
content: var(--tw-content);
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.before\:w-\[20px\]::before {
|
||||
content: var(--tw-content);
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.before\:rounded-tr-full::before {
|
||||
content: var(--tw-content);
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
|
||||
.before\:bg-bg_primary::before {
|
||||
content: var(--tw-content);
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(15 23 42 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.before\:bg-accent_primary::before {
|
||||
content: var(--tw-content);
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(56 189 248 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.before\:bg-\[transparent\]::before {
|
||||
content: var(--tw-content);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.before\:shadow-\[0px_-10px_0_0_rgb\(15\2c _23\2c _42\)\]::before {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px -10px 0 0 rgb(15, 23, 42);
|
||||
--tw-shadow-colored: 0px -10px 0 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.before\:content-\[\'\'\]::before {
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
|
||||
.after\:absolute::after {
|
||||
content: var(--tw-content);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.after\:-right-6::after {
|
||||
content: var(--tw-content);
|
||||
right: -1.5rem;
|
||||
}
|
||||
|
||||
.after\:top-1\/2::after {
|
||||
content: var(--tw-content);
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.after\:h-\[20px\]::after {
|
||||
content: var(--tw-content);
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.after\:w-\[20px\]::after {
|
||||
content: var(--tw-content);
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.after\:rounded-tl-full::after {
|
||||
content: var(--tw-content);
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
|
||||
.after\:bg-\[transparent\]::after {
|
||||
content: var(--tw-content);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.after\:shadow-\[0px_-10px_0_0_rgb\(15\2c _23\2c _42\)\]::after {
|
||||
content: var(--tw-content);
|
||||
--tw-shadow: 0px -10px 0 0 rgb(15, 23, 42);
|
||||
--tw-shadow-colored: 0px -10px 0 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.after\:content-\[\'\'\]::after {
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
|
||||
.last\:mb-3:last-child {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user