Responsywność i ułożenie opcji filtrów

src/components/TrainsView/TrainOptions.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="train-options">
+  <div class="filters-options">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--open" @click="showOptions = !showOptions">
+    <button class="btn--image" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
       {{ $t('options.filters') }}
     </button>
@@ -10,7 +10,7 @@
     <transition name="options-anim">
       <div class="options_wrapper" v-if="showOptions">
         <div class="options_content">
-          <h1>{{ $t('options.sort-title') }}</h1>
+          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
           <div class="options_sorters">
             <div v-for="opt in translatedSorterOptions">
               <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
@@ -19,7 +19,7 @@
             </div>
           </div>
 
-          <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+          <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
           <div class="options_filters">
             <div class="filter-option" v-for="filter in trainFilterList">
               <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
@@ -35,8 +35,9 @@
               <button @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
             </div>
           </div>
-          <h1>{{ $t('options.search-title') }}</h1>
-          <div class="content_search">
+
+          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
+          <div class="search_content">
             <div class="search-box">
               <input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
               <button class="search-exit">
@@ -134,119 +135,18 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/search_box.scss';
-@import '../../styles/variables.scss';
+@import '../../styles/filters_options.scss';
 
-.options-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease;
-  }
-}
-
-.bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  z-index: 10;
-}
-
-.journal-options {
-  position: relative;
-
-  margin-bottom: 0.5em;
-}
-
-.options_wrapper {
-  position: absolute;
-
-  background-color: #111111ee;
-  box-shadow: 0 0 10px 2px #111;
-
-  width: 100%;
-  max-width: 500px;
-
-  padding: 1em;
-
-  z-index: 100;
-}
-
-.btn--open {
-  display: flex;
-
-  padding: 0.4em 1em;
-  font-weight: bold;
-  font-size: 1em;
-
-  border-radius: 0.75em 0.75em 0 0;
-
-  img {
-    height: 1.3em;
-    margin-right: 0.5em;
-  }
-}
-
-h1 {
-  position: relative;
-  font-size: 1.1em;
-  margin: 0.7em 0 0.25em 0;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -4px;
-
-    width: 50%;
-    height: 2px;
-    background-color: white;
-    border-radius: 2px;
-  }
-}
-
-.options_sorters {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  padding: 0.25em 0.25em 0 0;
-}
-
-.content_search > div {
+.search_content > div {
   margin: 0.5em auto;
 }
 
-.content_search > button {
+.search_content > button {
   display: flex;
   justify-content: center;
   margin: 0 auto;
 }
 
-.options_filters {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0.5em 0 0 0;
-}
-
-.sort-option,
-.filter-option {
-  margin: 0.25em 0.25em 0.25em 0;
-}
-
-.sort-option[data-selected='true'] {
-  color: $accentCol;
-  font-weight: bold;
-}
-
 .filter-option {
   button {
     color: white;
@@ -257,29 +157,4 @@ h1 {
     }
   }
 }
-
-@include smallScreen() {
-  h1 {
-    text-align: center;
-
-    &::before {
-      width: 75%;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  .options_wrapper {
-    max-width: 100%;
-  }
-
-  .btn--open {
-    margin: 0 auto;
-  }
-
-  .options_filters,
-  .options_sorters {
-    justify-content: center;
-  }
-}
 </style>