Styles on select elements

Author: zachleat

src/site/generators.njk

@@ -21,7 +21,7 @@ layout: layouts/base.njk
       </div>
       <label class="inline-flex pr-4 pb-2">
         <span class="sr-only">Language</span>
-        <select data-filter-bind="language" data-filter-delimiter="," class="text-white py-1 rounded border border-white bg-transparent">
+        <select data-filter-bind="language" data-filter-delimiter="," class="text-white py-1 px-2 rounded-default border border-white bg-transparent">
           <option selected value="">All Languages</option>
           {%- for language in collections.generators | select("data.language") | flatten | unique | sort(false, false) %}
           <option value="{{ language | lower }}">{{ language }}</option>
@@ -30,7 +30,7 @@ layout: layouts/base.njk
       </label>
       <label class="inline-flex pr-4 pb-2">
         <span class="sr-only">Template</span>
-        <select data-filter-bind="template" data-filter-delimiter="," class="text-white py-1 rounded border border-white bg-transparent">
+        <select data-filter-bind="template" data-filter-delimiter="," class="text-white py-1 px-2 rounded-default border border-white bg-transparent">
           <option selected value="">All Templates</option>
           {%- for template in collections.generators | select("data.templates") | flatten | unique | sort(false, false) %}
           <option value="{{ template | lower }}">{{ template }}</option>
@@ -39,7 +39,7 @@ layout: layouts/base.njk
       </label>
       <label class="inline-flex pr-4 pb-2">
         <span class="sr-only">License</span>
-        <select data-filter-bind="license" data-filter-delimiter="," class="text-white py-1 rounded border border-white bg-transparent">
+        <select data-filter-bind="license" data-filter-delimiter="," class="text-white py-1 px-2 rounded-default border border-white bg-transparent">
           <option selected value="">All Licenses</option>
           {%- for license in collections.generators | select("data.license") | flatten | unique | sort(false, false) %}
           <option value="{{ license | lower }}">{{ license }}</option>

src/site/headless-cms.njk

@@ -21,7 +21,7 @@ layout: layouts/base.njk
       </div>
       <label class="inline-flex pr-4 pb-2">
         <span class="sr-only">CMS Type</span>
-        <select data-filter-bind="typeofcms" class="text-white py-1 rounded border border-white bg-transparent">
+        <select data-filter-bind="typeofcms" class="text-white py-1 px-2 rounded-default border border-white bg-transparent">
           <option selected value="">Any CMS Type</option>
           {%- for template in collections.cms | select("data.typeofcms") | unique | sort(false, false) %}
           <option value="{{ template | lower }}">{{ template }}</option>
@@ -30,7 +30,7 @@ layout: layouts/base.njk
       </label>
       <label class="inline-flex pr-4 pb-2">
         <span class="sr-only">License</span>
-        <select data-filter-bind="opensource" class="text-white py-1 rounded border border-white bg-transparent">
+        <select data-filter-bind="opensource" class="text-white py-1 px-2 rounded-default border border-white bg-transparent">
           <option selected value="">Any License</option>
           {%- for opensource in collections.cms | select("data.opensource") | unique | sort(true, false) %}
           <option value="{{ opensource | lower }}">{% if opensource == "No" %}Closed{% else %}Open{% endif %} source</option>