styles export tableur form

Resources/public/css/chillevent.css

@@ -2,3 +2,56 @@ div#event_date { display: flex; flex-direction: row; flex-wrap: nowrap; }
 div#event_date input#event_date_date { margin-right: 1em; }
 div#event_date div#event_date_time { min-width: 140px; }
 
+
+
+
+.input-group {
+    position: relative;
+    width: 100%;
+    display: -ms-flexbox; display: flex;
+    -ms-flex-wrap: wrap; flex-wrap: wrap;
+    -ms-flex-align: stretch; align-items: stretch;
+}
+
+/*
+*   form#export_tableur
+*   design du formulaires dropdown + submit
+*/
+form#export_tableur {
+    width: 19.5em;
+    margin-right: 0;
+}
+
+.custom-select {
+    padding: .375rem 1.75rem .375rem .75rem;
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
+    no-repeat right .75rem center/8px 10px; background-color: white;
+    border-radius: .25rem; border: 1px solid #ced4da;
+    -webkit-appearance: none; -moz-appearance: none; appearance: none;
+}
+.input-group > .custom-select {
+    position: relative;
+    width: 1%;
+    margin-bottom: 0;
+    -ms-flex: 1 1 auto; flex: 1 1 auto;
+    color: #999;
+}
+.input-group > span.select2-container--default  > span > span.select2-selection--single,
+.input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0;
+    height: 38px; padding: 8px;
+}
+/* override correction style */
+.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
+.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: unset; }
+
+.input-group > .input-group-append > .sc-button { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.input-group-append { display: -ms-flexbox; display: flex; margin-left: -1px; }
+.input-group-append .sc-button { position: relative; z-index: 2; }
+.sc-button {
+    display: inline-block;
+    text-align: center; vertical-align: middle;
+    padding: .375rem .75rem;
+    font-weight: 400; font-size: 1rem; line-height: 1.5;
+    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}

Resources/views/Event/show.html.twig

@@ -108,57 +108,6 @@
         {% endif %}
     </ul>
 
-    <style>
-        {#
-        /*
-        *   REMARQUE ces styles règlent pour cette page le design des formulaires dropdown + submit
-        *   ils surchargent notamment des styles plus généraux de Chill
-        *   -> devrait être ramené vers la feuille de style générale après vérifications
-        */
-        #}
-
-        .input-group {
-            position: relative;
-            width: 100%;
-            display: -ms-flexbox; display: flex;
-            -ms-flex-wrap: wrap; flex-wrap: wrap;
-            -ms-flex-align: stretch; align-items: stretch;
-        }
-        .custom-select {
-            padding: .375rem 1.75rem .375rem .75rem;
-            background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
-                no-repeat right .75rem center/8px 10px; background-color: white;
-            border-radius: .25rem; border: 1px solid #ced4da;
-            -webkit-appearance: none; -moz-appearance: none; appearance: none;
-        }
-        .input-group > .custom-select {
-            position: relative;
-            width: 1%;
-            margin-bottom: 0;
-            -ms-flex: 1 1 auto; flex: 1 1 auto;
-            color: #999;
-        }
-        .input-group > span.select2-container--default  > span > span.select2-selection--single,
-        .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0;
-            height: 38px; padding: 8px;
-        }
-        /* override correction style */
-        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
-        .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: unset; }
-
-        .input-group > .input-group-append > .sc-button { border-top-left-radius: 0; border-bottom-left-radius: 0; }
-        .input-group-append { display: -ms-flexbox; display: flex; margin-left: -1px; }
-        .input-group-append .sc-button { position: relative; z-index: 2; }
-        .sc-button {
-            display: inline-block;
-            text-align: center; vertical-align: middle;
-            padding: .375rem .75rem;
-            font-weight: 400; font-size: 1rem; line-height: 1.5;
-            -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
-            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-        }
-    </style>
-
     <div style="margin-bottom: 10em;">
         <div class="grid-8">
             {{ form_start(form_add_participation_by_person) }}
@@ -176,7 +125,7 @@
         </div>
 
         <div class="grid-4">
-            {{ form_start(form_export) }}
+            {{ form_start(form_export, {'attr': {'id': 'export_tableur'}}) }}
             <div class="input-group">
                 {{ form_widget(form_export.format, { 'attr' : { 'class': 'custom-select' } }) }}
                 <div class="input-group-append">