Style Update Drupal Menu Task Links (#923)

* task: update drupal task links * task: run format
phase2 · Aug 27, 2020 · a1482ac · a1482ac
1 parent 0498719
commit a1482ac
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/apps/drupal-default/particle_theme/templates/navigation/menu-local-task.html.twig b/apps/drupal-default/particle_theme/templates/navigation/menu-local-task.html.twig
@@ -15,10 +15,10 @@
  */
 #}
 
-{% set link_classes = ['nav-link', is_active ? 'active']|join(' ') %}
+{% set link_classes = ['task-link', is_active ? 'task-link--active' : 'task-link--inactive']|join(' ') %}
 
 {# Merge attributes/classes into link #}
-<li {{ attributes.addClass('nav-item') }}>
+<li {{ attributes.addClass('mr-3') }}>
   {{
     link|merge({
       '#options': {

diff --git a/apps/drupal-default/particle_theme/templates/navigation/menu-local-tasks.html.twig b/apps/drupal-default/particle_theme/templates/navigation/menu-local-tasks.html.twig
@@ -11,23 +11,21 @@
  * themed in menu-local-task.html.twig.
  */
 #}
-
-{% set nav_classes = ['nav', 'nav-tabs', 'mb-2']|join(' ') %}
+{% set list_classes = ['flex']|join(' ') %}
 
 {% if primary %}
   <h2 class="visually-hidden">
     {{ 'Primary tabs'|t }}
   </h2>
-  <ul class="{{ nav_classes }}">
+  <ul class="{{ list_classes }}">
     {{ primary }}
   </ul>
 {% endif %}
-
 {% if secondary %}
   <h2 class="visually-hidden">
     {{ 'Secondary tabs'|t }}
   </h2>
-  <ul class="{{ nav_classes }}">
+  <ul class="{{ list_classes }}">
     {{ secondary }}
   </ul>
 {% endif %}
diff --git a/source/default/_patterns/00-protons/tailwind.tokens.css b/source/default/_patterns/00-protons/tailwind.tokens.css
@@ -190,3 +190,24 @@ tr {
     @apply pb-16;
   }
 }
+
+/**
+ * Drupal Theme Overrides
+ */
+
+/* Menu-Local-Task Links */
+.task-link {
+  @apply inline-block border py-1 px-3;
+}
+
+.task-link--active {
+  @apply border-blue-500 bg-blue-500 text-white;
+}
+
+.task-link--inactive {
+  @apply border-white  text-blue-500;
+}
+
+.task-link--inactive:hover {
+  @apply border-gray-200 bg-gray-200;
+}