Add small picker example

serebrov · May 2, 2021 · a1a708a · a1a708a
1 parent 0ebc0c8
commit a1a708a
Show file tree

Hide file tree

Showing 3 changed files with 4,377 additions and 4 deletions.
diff --git a/dist/emoji-mart.js b/dist/emoji-mart.js
diff --git a/docs/app.vue b/docs/app.vue
@@ -154,6 +154,18 @@
     <div class="row">
       <Picker :data="indexInclude" />
     </div>
+
+    <div class="row"></div>
+    <h2>Small picker example</h2>
+    <div class="row row-small-picker">
+      <Picker
+        :data="index"
+        :native="native"
+        :set="activeSet"
+        :emojiSize="12"
+        :perLine="5"
+      />
+    </div>
   </div>
 </template>
 
@@ -386,4 +398,24 @@ h2 {
   right: 30px;
   cursor: pointer;
 }
+
+.row-small-picker >>> .emoji-mart-anchors svg {
+  width: 9px;
+  height: 9px;
+}
+.row-small-picker >>> .emoji-mart-title-label {
+  font-size: 9px;
+}
+.row-small-picker >>> .emoji-mart-preview-data {
+  left: 40px;
+  font-size: 9px;
+}
+.row-small-picker >>> .emoji-mart-preview-name {
+  font-size: 9px;
+}
+.row-small-picker >>> .emoji-mart-preview-emoji .emoji-type-native {
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+}
 </style>