libreria-astro-lefebvre 0.2.20 → 0.2.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "libreria-astro-lefebvre",
3
- "version": "0.2.20",
3
+ "version": "0.2.21",
4
4
  "description": "Librería de componentes Astro, React y Vue para Lefebvre",
5
5
  "author": "Equipo web desarrollo Lefebvre",
6
6
  "type": "module",
@@ -97,7 +97,7 @@ const videoUrl = iframeSrc || '';
97
97
  </g>
98
98
  </svg>
99
99
  <div class={`w-full ${orientation === 'left' ? `pl-[${paddingLeft}px]` : `pr-[${paddingLeft}px]`}`}>
100
- {title && <h1 class="font-body text-[#1b1b1b] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#ebe7da] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
100
+ {title && <h1 class="flex items-center gap-2 before:content-[''] before:size-1.5 before:shrink-0 before:rounded-full before:bg-[#d71635] font-mono text-[#403830] text-center lg:text-left text-sm font-normal leading-5 tracking-[0.84px] uppercase rounded bg-black/[0.04] [font-feature-settings:'liga'_off,'clig'_off] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0"><span set:html={title}></span></h1>}
101
101
  <h2 class={`font-heading text-[#1b1b1b] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 ${h2Size === '40px' ? `text-[36px] leading-[44px] ${h2AltSizeClass} ${h2AltLeadingClass}` : `text-[36px] leading-[44px] ${h2IcoSizeClass} ${h2IcoLeadingClass}`}`} set:html={subtitle}></h2>
102
102
 
103
103
  <div
@@ -134,7 +134,7 @@ const videoUrl = iframeSrc || '';
134
134
  </style>
135
135
  <div class={`w-full ${contentFlex1Class} ${contentMinW0Class} ${contentPaddingClass} ${orientation === 'left' ? 'css-mq-pl-767' : 'pr-[var(--padding-left)] pl-0' }`}
136
136
  style={{ 'padding-left': `${paddingLeft}px` }}>
137
- {title && <h1 class="font-body text-[#1b1b1b] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#ebe7da] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
137
+ {title && <h1 class="flex items-center gap-2 before:content-[''] before:size-1.5 before:shrink-0 before:rounded-full before:bg-[#d71635] font-mono text-[#403830] text-center lg:text-left text-sm font-normal leading-5 tracking-[0.84px] uppercase rounded bg-black/[0.04] [font-feature-settings:'liga'_off,'clig'_off] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0"><span set:html={title}></span></h1>}
138
138
  <h2 class={`font-heading text-[#1b1b1b] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 ${h2Size === '40px' ? `text-[36px] leading-[44px] ${h2AltSizeClass} ${h2AltLeadingClass}` : `text-[40px] leading-[48px] ${h2LargeSizeClass} ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
139
139
  <div
140
140
  class={`text-[#403830] font-body font-normal text-${fontSize} not-italic leading-6 flex flex-col gap-4 mb-8`}
@@ -186,7 +186,7 @@ const videoUrl = iframeSrc || '';
186
186
  </svg>
187
187
 
188
188
  <div class="w-1/2 p-4 flex flex-col flex-wrap ">
189
- {title && <h1 class="font-body text-[#1b1b1b] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#ebe7da] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
189
+ {title && <h1 class="flex items-center gap-2 before:content-[''] before:size-1.5 before:shrink-0 before:rounded-full before:bg-[#d71635] font-mono text-[#403830] text-center lg:text-left text-sm font-normal leading-5 tracking-[0.84px] uppercase rounded bg-black/[0.04] [font-feature-settings:'liga'_off,'clig'_off] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0"><span set:html={title}></span></h1>}
190
190
  <h2 class={`font-heading text-[#1b1b1b] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 ${h2Size === '40px' ? `text-[36px] leading-[44px] ${h2AltSizeClass} ${h2AltLeadingClass}` : `text-[40px] leading-[48px] ${h2LargeSizeClass} ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
191
191
  <div
192
192
  class="text-[#403830] font-body font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8"
@@ -209,7 +209,7 @@ const videoUrl = iframeSrc || '';
209
209
 
210
210
  ) : (
211
211
  <div class="w-1/2 p-4 flex flex-col flex-wrap ">
212
- {title && <h1 class="font-body text-[#1b1b1b] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#ebe7da] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
212
+ {title && <h1 class="flex items-center gap-2 before:content-[''] before:size-1.5 before:shrink-0 before:rounded-full before:bg-[#d71635] font-mono text-[#403830] text-center lg:text-left text-sm font-normal leading-5 tracking-[0.84px] uppercase rounded bg-black/[0.04] [font-feature-settings:'liga'_off,'clig'_off] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0"><span set:html={title}></span></h1>}
213
213
  <h2 class={`font-heading text-[#1b1b1b] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 ${h2Size === '40px' ? `text-[36px] leading-[44px] ${h2AltSizeClass} ${h2AltLeadingClass}` : `text-[40px] leading-[48px] ${h2LargeSizeClass} ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
214
214
  <div
215
215
  class="text-[#403830] font-body font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8"
@@ -66,17 +66,17 @@ const structuredData = `<script type="application/ld+json">
66
66
  <article class="w-full flex flex-col items-center justify-center">
67
67
  <div class="w-full flex justify-center items-center relative text-[56px] text-center font-body leading-[64px] mt-10">
68
68
  <!-- <div class="flex bg-transparent md:bg-[#fafaf5] md:border md:border-[#e1c8b4] rounded-lg"> -->
69
- <div class="flex gap-1 md:gap-8 items-center">
69
+ <div class="flex gap-1 md:gap-0 items-center md:p-1 md:rounded-full md:bg-[rgba(107,58,8,0.04)]">
70
70
  {tabs.map((tab: Tab, index: number) => (
71
71
  <p class="font-body text-base">
72
72
  <button data-linkedto={`${identifier}${index + 1}`}
73
73
  class={`
74
- btn py-3.5 px-5 font-body
75
- cursor-pointer border border-[#e1c8b4]
76
- hover:border hover:border-[#6d5e52] hover:!bg-[#ffffff] rounded-lg ${identifier}button
74
+ btn py-3 px-5 md:py-2 md:px-4 leading-6 font-body
75
+ cursor-pointer border border-transparent md:border-0
76
+ hover:bg-[rgba(107,58,8,0.08)] rounded-full ${identifier}button
77
77
  ${index === 0 ? 'active' : ''}
78
- bg-ebe7da text-gray-100 max-w-10 max-h-5 text-[0px] md:w-[150px]
79
- md:bg-[#fafaf5] md:text-black md:max-w-none md:max-h-none md:text-[16px]
78
+ bg-[#ebe7da] text-gray-100 max-w-10 max-h-5 text-[0px] md:w-[150px]
79
+ md:bg-transparent md:text-[#403830] md:max-w-none md:max-h-none md:text-[16px]
80
80
  `}
81
81
  >{tab.name}</button>
82
82
  </p>
@@ -121,20 +121,20 @@ const structuredData = `<script type="application/ld+json">
121
121
 
122
122
 
123
123
  <style>
124
- .bg-ebe7da {
125
- background-color: #ebe7da;
126
- }
127
124
  .active{
128
- background-color: #ffffff;
129
- border: 1px solid #6d5e52;
130
- color: black;
125
+ background-color: #1b1b1b;
126
+ color: #ffffff;
131
127
  max-width: none;
132
128
  max-height: none;
133
129
  font-size: 16px;
134
130
 
135
131
  &:hover{
136
- background-color: #ffffff;
137
- border: 1px solid #6d5e52;
132
+ background-color: #1b1b1b;
133
+ }
134
+ }
135
+ @media (min-width: 768px) {
136
+ .active {
137
+ box-shadow: 0 2px 4px 0 rgba(107, 58, 8, 0.08), 0 4px 8px 0 rgba(107, 58, 8, 0.04);
138
138
  }
139
139
  }
140
140
  </style>
@@ -72,17 +72,17 @@ const structuredData = `<script type="application/ld+json">
72
72
  {showTabBar && (
73
73
  <div class="w-full flex justify-center items-center relative text-[56px] text-center font inter leading-[64px] mt-10">
74
74
  <!-- <div class="flex bg-transparent md:bg-[#fafaf5] md:border md:border-[#e1c8b4] rounded-lg"> -->
75
- <div class="flex gap-1 md:gap-8 items-center">
75
+ <div class="flex gap-1 md:gap-0 items-center md:p-1 md:rounded-full md:bg-[rgba(107,58,8,0.04)]">
76
76
  {tabs.map((tab: Tab, index: number) => (
77
77
  <p class="font-body text-base">
78
78
  <button data-linkedto={`${identifier}${index + 1}`}
79
79
  class={`
80
- btn py-3.5 px-5 font-body
81
- cursor-pointer border border-[#e1c8b4]
82
- hover:border hover:border-[#6d5e52] hover:!bg-[#ffffff] rounded-lg ${identifier}button
80
+ btn py-3 px-5 md:py-2 md:px-4 leading-6 font-body
81
+ cursor-pointer border border-transparent md:border-0
82
+ hover:bg-[rgba(107,58,8,0.08)] rounded-full ${identifier}button
83
83
  ${index === 0 ? 'active' : ''}
84
- bg-ebe7da text-gray-100 max-w-10 max-h-5 text-[0px] md:w-[150px]
85
- md:bg-[#fafaf5] md:text-black md:max-w-none md:max-h-none md:text-[16px]
84
+ bg-[#ebe7da] text-gray-100 max-w-10 max-h-5 text-[0px] md:w-[150px]
85
+ md:bg-transparent md:text-[#403830] md:max-w-none md:max-h-none md:text-[16px]
86
86
  `}
87
87
  >{tab.name || `Pestaña ${index + 1}`}</button>
88
88
  </p>
@@ -123,20 +123,20 @@ const structuredData = `<script type="application/ld+json">
123
123
 
124
124
 
125
125
  <style>
126
- .bg-ebe7da {
127
- background-color: #ebe7da;
128
- }
129
126
  .active{
130
- background-color: #ffffff;
131
- border: 1px solid #6d5e52;
132
- color: black;
127
+ background-color: #1b1b1b;
128
+ color: #ffffff;
133
129
  max-width: none;
134
130
  max-height: none;
135
131
  font-size: 16px;
136
132
 
137
133
  &:hover{
138
- background-color: #ffffff;
139
- border: 1px solid #6d5e52;
134
+ background-color: #1b1b1b;
135
+ }
136
+ }
137
+ @media (min-width: 768px) {
138
+ .active {
139
+ box-shadow: 0 2px 4px 0 rgba(107, 58, 8, 0.08), 0 4px 8px 0 rgba(107, 58, 8, 0.04);
140
140
  }
141
141
  }
142
142
  </style>
@@ -97,7 +97,7 @@ const structuredData = items.length > 0 ? `<script type="application/ld+json">
97
97
  <div class="w-full max-w-7xl">
98
98
  <div id={carouselId} class="glider w-full">
99
99
  {items.map((item, idx) => (
100
- <div class="flex flex-col items-center p-10 bg-white">
100
+ <div class="flex flex-col items-center p-10">
101
101
  {item.iframeSrc ? (
102
102
  <>
103
103
  <div class="w-full">
@@ -139,7 +139,7 @@ const structuredData = items.length > 0 ? `<script type="application/ld+json">
139
139
  <div id={"popup-iframe-modal-" + randomId } class="fixed w-full h-full top-0 left-0 z-9999 hidden">
140
140
  <div class="flex flex-col justify-center items-center w-full h-full bg-[#ebe7da]/90 p-4">
141
141
  <div class="w-full flex justify-end">
142
- <button class="js-close-popup w-auto m-4 p-2 bg-white rounded transition-transform hover:scale-125 cursor-pointer">X</button>
142
+ <button class="js-close-popup w-auto m-4 p-2 rounded transition-transform hover:scale-125 cursor-pointer">X</button>
143
143
  </div>
144
144
  <div class="w-full h-full flex items-center justify-center">
145
145
  <iframe
@@ -59,7 +59,7 @@ const structuredData = items.length > 0 ? `<script type="application/ld+json">
59
59
  <article class="w-full flex flex-col items-center justify-center">
60
60
  <div class="w-2/5 flex justify-center items-center relative text-[40px] leading-[48px] md:text-[56px] md:leading-[64px] text-center font-heading font-normal mb-0 md:mb-12">
61
61
  <!-- <div class="flex bg-[#d71635]/4 border border-[#e1c8b4] rounded-lg"> -->
62
- <div class="flex gap-1 md:gap-0 items-center md:p-1 md:rounded-full md:bg-[rgba(0,25,120,0.04)]">
62
+ <div class="flex gap-1 md:gap-0 items-center md:p-1 md:rounded-full md:bg-[rgba(107,58,8,0.04)]">
63
63
  {items.map((item, index) => (
64
64
  <p class="font-body text-base">
65
65
  {/* <a href={`#accordion${index + 1}`} class="btn py-[20px] px-[16px]">{item}</a> */}
@@ -67,11 +67,11 @@ const structuredData = items.length > 0 ? `<script type="application/ld+json">
67
67
  class={`
68
68
  btn py-3 px-5 md:py-2 md:px-4 leading-6 font-body
69
69
  cursor-pointer border border-transparent md:border-0 bg-[#ebe7da]
70
- hover:bg-[rgba(0,25,120,0.08)] rounded-full ${idAccordion}button
70
+ hover:bg-[rgba(107,58,8,0.08)] rounded-full ${idAccordion}button
71
71
  ${item.default ? 'active' : ''}
72
72
  text-gray-100 max-w-10 max-h-5 text-[0px]
73
- md:bg-transparent md:text-[#363942] md:max-w-none md:max-h-none md:text-[16px]
74
- [&.active]:bg-[rgba(0,9,44,0.9)] [&.active]:hover:bg-[rgba(0,9,44,0.9)] [&.active]:text-white
73
+ md:bg-transparent md:text-[#403830] md:max-w-none md:max-h-none md:text-[16px]
74
+ [&.active]:bg-[#1b1b1b] [&.active]:hover:bg-[#1b1b1b] [&.active]:text-white
75
75
  md:[&.active]:shadow-[0_2px_4px_0_rgba(107,58,8,0.08),0_4px_8px_0_rgba(107,58,8,0.04)]
76
76
  [&.active]:max-w-none [&.active]:max-h-none [&.active]:text-[16px]
77
77
  `}