mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-04-20 19:21:52 +02:00
updated carousel shorcode to support latest version of tw-elements
This commit is contained in:
Nuno Coração
parent
705f9acb30
commit
15836936d2
3 changed files with 134 additions and 11 deletions
|
|
@ -1275,6 +1275,10 @@ select {
|
|||
position: fixed;
|
||||
}
|
||||
|
||||
.\!absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -1443,6 +1447,10 @@ select {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.z-\[2\] {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.z-\[999\] {
|
||||
z-index: 999;
|
||||
}
|
||||
|
|
@ -1459,6 +1467,10 @@ select {
|
|||
float: left;
|
||||
}
|
||||
|
||||
.\!-m-px {
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -1495,6 +1507,16 @@ select {
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mx-\[15\%\] {
|
||||
margin-left: 15%;
|
||||
margin-right: 15%;
|
||||
}
|
||||
|
||||
.mx-\[3px\] {
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -1543,6 +1565,10 @@ select {
|
|||
margin-right: -12rem;
|
||||
}
|
||||
|
||||
.-mr-\[100\%\] {
|
||||
margin-right: -100%;
|
||||
}
|
||||
|
||||
.-mt-3 {
|
||||
margin-top: -0.75rem;
|
||||
}
|
||||
|
|
@ -1747,6 +1773,10 @@ select {
|
|||
height: 0px !important;
|
||||
}
|
||||
|
||||
.\!h-px {
|
||||
height: 1px !important;
|
||||
}
|
||||
|
||||
.h-0 {
|
||||
height: 0px;
|
||||
}
|
||||
|
|
@ -1855,6 +1885,10 @@ select {
|
|||
height: 32px;
|
||||
}
|
||||
|
||||
.h-\[3px\] {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.h-\[40px\] {
|
||||
height: 40px;
|
||||
}
|
||||
|
|
@ -1931,6 +1965,10 @@ select {
|
|||
min-height: auto;
|
||||
}
|
||||
|
||||
.\!w-px {
|
||||
width: 1px !important;
|
||||
}
|
||||
|
||||
.w-0 {
|
||||
width: 0px;
|
||||
}
|
||||
|
|
@ -2160,6 +2198,10 @@ select {
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flex-initial {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.flex-none {
|
||||
flex: none;
|
||||
}
|
||||
|
|
@ -2493,6 +2535,10 @@ select {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.\!overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -2523,6 +2569,10 @@ select {
|
|||
white-space: normal;
|
||||
}
|
||||
|
||||
.\!whitespace-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -2617,6 +2667,10 @@ select {
|
|||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.\!border-0 {
|
||||
border-width: 0px !important;
|
||||
}
|
||||
|
||||
.\!border-\[3px\] {
|
||||
border-width: 3px !important;
|
||||
}
|
||||
|
|
@ -2641,6 +2695,11 @@ select {
|
|||
border-width: 14px;
|
||||
}
|
||||
|
||||
.border-y-\[10px\] {
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 10px;
|
||||
}
|
||||
|
||||
.border-b-2 {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
|
@ -2907,6 +2966,10 @@ select {
|
|||
object-position: left;
|
||||
}
|
||||
|
||||
.\!p-0 {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -3172,6 +3235,10 @@ select {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.-indent-\[999px\] {
|
||||
text-indent: -999px;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -3706,6 +3773,12 @@ select {
|
|||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.delay-\[0ms\] {
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
|
@ -3734,6 +3807,10 @@ select {
|
|||
transition-duration: 400ms;
|
||||
}
|
||||
|
||||
.duration-\[600ms\] {
|
||||
transition-duration: 600ms;
|
||||
}
|
||||
|
||||
.ease-\[cubic-bezier\(0\2c 0\2c 0\.15\2c 1\)\2c _cubic-bezier\(0\2c 0\2c 0\.15\2c 1\)\] {
|
||||
transition-timing-function: cubic-bezier(0,0,0.15,1), cubic-bezier(0,0,0.15,1);
|
||||
}
|
||||
|
|
@ -3766,6 +3843,10 @@ select {
|
|||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.\!\[clip\:rect\(0\2c 0\2c 0\2c 0\)\] {
|
||||
clip: rect(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
.\[direction\:ltr\] {
|
||||
direction: ltr;
|
||||
}
|
||||
|
|
@ -5394,6 +5475,21 @@ body:has(#menu-controller:checked) {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.after\:clear-both::after {
|
||||
content: var(--tw-content);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.after\:block::after {
|
||||
content: var(--tw-content);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.after\:content-\[\'\'\]::after {
|
||||
--tw-content: '';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
|
||||
.first\:mt-8:first-child {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
|
|
|||
18
assets/lib/tw-elements/index.min.js
vendored
18
assets/lib/tw-elements/index.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -4,48 +4,59 @@
|
|||
{{ $images := .Page.Resources.Match (.Get "images") }}
|
||||
{{ $interval := default "2000" (.Get "interval") }}
|
||||
|
||||
<div id="{{ $id }}" class="carousel slide relative" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-2">
|
||||
<div id="{{ $id }}" class="relative" data-te-carousel-init data-te-carousel-slide>
|
||||
<div class="absolute right-0 bottom-0 left-0 z-[2] mx-[15%] mb-10 flex list-none justify-center p-0"
|
||||
data-te-carousel-indicators>
|
||||
|
||||
{{ $num := 0 }}
|
||||
{{ range $images }}
|
||||
|
||||
<button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{ $num }}" {{ if eq $num 0 }}
|
||||
class="active" aria-current="true" {{ end }} aria-label="Slide {{ $num }}"></button>
|
||||
<button type="button" data-te-target="#{{ $id }}" data-te-slide-to="{{ $num }}" {{ if eq $num 0 }} data-te-carousel-active aria-current="true" {{ end }}
|
||||
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-neutral bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
|
||||
aria-label="Slide {{ $num }}"></button>
|
||||
|
||||
{{ $num = add $num 1 }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
<div class="carousel-inner relative w-full overflow-hidden">
|
||||
<div class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
|
||||
|
||||
{{ $num := 0 }}
|
||||
{{ range $images }}
|
||||
|
||||
<div class="carousel-item {{ if eq $num 0 }} active {{ end }} relative float-left w-full ratio-{{ $aspect }} single_hero_background"
|
||||
style="background-image:url({{ . }})" data-bs-interval="{{ $interval }}"></div>
|
||||
<div class="relative float-left -mr-[100%] {{ if not (eq $num 0) }} hidden {{ end }} w-full transition-transform duration-[{{ $interval }}ms] ease-in-out motion-reduce:transition-none"
|
||||
data-te-carousel-item {{ if eq $num 0 }} data-te-carousel-active {{ end }}>
|
||||
<div class="ratio-{{ $aspect }} single_hero_background">
|
||||
<img src="{{ . }}" class="block absolute top-0 object-cover w-full h-full nozoom" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ $num = add $num 1 }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
<button
|
||||
class="absolute top-0 bottom-0 left-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
|
||||
class="absolute top-0 bottom-0 left-0 z-[2] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
|
||||
type="button" data-te-target="#{{ $id }}" data-te-slide="prev">
|
||||
<span class="inline-block h-8 w-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4.5"
|
||||
stroke="currentColor" class="h-6 w-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
|
||||
</button>
|
||||
<button
|
||||
class="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
|
||||
type="button" data-te-target="#{{ $id }}" data-te-slide="next">
|
||||
<span class="inline-block h-8 w-8">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4.5"
|
||||
stroke="currentColor" class="h-6 w-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Nextsads</span>
|
||||
</button>
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue