improve sponsor drop down style

SharifAIChallenge · Apr 20, 2021 · aa54785 · aa54785
1 parent c74c548
commit aa54785
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/assets/fonts/fonts.scss b/assets/fonts/fonts.scss
@@ -24,3 +24,9 @@
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: LTZaridSans;
+  src: url('./29LTZaridSans-Bold.otf');
+  font-weight: bold;
+  font-style: normal;
+}
diff --git a/components/landing/SponserDropdown.vue b/components/landing/SponserDropdown.vue
@@ -6,9 +6,15 @@
         <span>اسپانسر</span>
       </v-btn>
     </template>
-    <v-list>
-      <v-list-item link :to="item.to" v-for="(item, index) in items" :key="index">
-        <v-list-item-title>{{ item.title }}</v-list-item-title>
+    <v-list class="sponsor-dropdown">
+      <v-list-item link :to="items[0].to">
+        <v-list-item-title>{{ items[0].title }}</v-list-item-title>
+      </v-list-item>
+      <v-list-item link :to="items[1].to" class="aparat">
+        <v-list-item-title>
+          {{ items[1].title }}
+          <span>(حامی رسانه‌ای)</span>
+        </v-list-item-title>
       </v-list-item>
     </v-list>
   </v-menu>
@@ -19,7 +25,7 @@ export default {
   data: () => ({
     items: [
       { title: ' دیجی کالا', to: '/sponsors/digikala' },
-      { title: 'آپارات (حامی رسانه‌ای) ', to: '/sponsors/aparat' },
+      { title: 'آپارات ', to: '/sponsors/aparat' },
     ],
   }),
   methods: {
@@ -30,7 +36,30 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+.sponsor-dropdown {
+  padding: 0px;
+  .v-list-item {
+    border-bottom: 1px solid var(--v-primary-base);
+    &:hover {
+      background-color: #0e1224;
+      .v-list-item__title {
+        color: var(--v-primary-base);
+        transition: all 0.5s;
+      }
+      transition: all 0.5s;
+    }
+  }
+  .v-list-item__title {
+    font-family: LTZaridSans;
+    font-weight: bold;
+  }
+  .aparat {
+    span {
+      font-size: 13px;
+    }
+  }
+}
 // .hover_white {
 //   &.v-btn--active,
 //   &:hover {