add styles to introduction tab

openpoke · Jan 16, 2024 · 459e51b · 459e51b
1 parent 1f03a38
commit 459e51b
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 6 deletions.
diff --git a/app/cells/decidim/newsletter_templates/agenda_events_settings_form/show.erb b/app/cells/decidim/newsletter_templates/agenda_events_settings_form/show.erb
@@ -4,10 +4,10 @@
   <%= settings_fields.text_field :font_color_over_bg, label: t(".font_color_over_bg"), type: "color" %>
 <% end %>
 
-<ul class="tabs flex items-center justify-around font-bold" data-tabs id="newsletter-tabs">
-  <li class="tabs-title is-active p-4 cursor-pointer"><a href="#panel1" aria-selected="true"><%= t(".introduction") %></a></li>
-  <li class="tabs-title p-4 cursor-pointer"><a data-tabs-target="panel2" href="#panel2"><%= t(".body") %></a></li>
-  <li class="tabs-title p-4 cursor-pointer"><a data-tabs-target="panel3" href="#panel3"><%= t(".footer") %></a></li>
+<ul class="tabs flex items-center py-4" data-tabs id="newsletter-tabs">
+  <li class="tabs-title is-active cursor-pointer"><a href="#panel1" aria-selected="true"><%= t(".introduction") %></a></li>
+  <li class="tabs-title cursor-pointer"><a data-tabs-target="panel2" href="#panel2"><%= t(".body") %></a></li>
+  <li class="tabs-title cursor-pointer"><a data-tabs-target="panel3" href="#panel3"><%= t(".footer") %></a></li>
 </ul>
 
 <div class="tabs-content" data-tabs-content="newsletter-tabs">

diff --git a/app/packs/entrypoints/decidim_newsletter_agenda.scss b/app/packs/entrypoints/decidim_newsletter_agenda.scss
@@ -1,11 +1,76 @@
 .tabs {
-  background-color: #7636D2 !important;
+  background-color: rgb(118, 54, 210) !important;
+  margin: 0;
+  border: 1px solid transparent;
+  background: #e8e8e8;
+  list-style-type: none;
+  margin-bottom: 0.5rem;
 }
 
 .tabs-title a{
-  color: #FFFFFF;
+  line-height: inherit;
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+  padding: 1.1rem 1rem;
 }
 
+.tabs-title > a {
+  padding: 1.25rem 1.5rem;
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.tabs-title > a:focus, .tabs-title > a[aria-selected=true], .tabs-title > a:hover {
+  background: #fff;
+  color: #039be5;
+}
+
+.tabs-title > a:focus, .tabs-title > a:hover {
+  text-decoration: underline;
+}
+
+.form input, 
+  .form select, 
+  .form textarea, 
+  .form .check-radio, 
+  .form .input-field, 
+  .form .data-picker {
+    margin-bottom: 1.5rem;
+}
+
+input[type=color] {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 2.4375rem;
+    margin: 0 0 1rem;
+    padding: 0.5rem;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    background-color: #fff;
+    box-shadow: inset 0 1px 2px rgba(26, 24, 29, 0.1);
+    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+    appearance: none;
+  }
+
+.form-defaults select {
+    padding-top: 0.05rem !important;
+}
+
+button#newsletter_images_main_image_button {
+    background-color: #039be5;
+    color: #fff;
+    margin: 0 0 1rem 0;
+    padding: 0.85em 1em;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    transition: background-color 0.25s ease-out, color 0.25s ease-out;
+    font-family: inherit;
+    line-height: 1;
+    text-align: center;
+    cursor: pointer;
+  }
+
 .accordion {
   .accordion-title,
   .accordion-item:first-child > :first-child,