optimize style

PeakTai · Aug 22, 2016 · 4f43a6f · 4f43a6f
1 parent b85aba4
commit 4f43a6f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 21 deletions.
diff --git a/src/modules/font/dashboard.vue b/src/modules/font/dashboard.vue
@@ -1,19 +1,26 @@
+<style>
+    .vue-html5-editor .dashboard .dashboard-font {
+        line-height: 36px;
+    }
+</style>
 <template>
-    <div>
-        <label>{{$parent.locale["heading"]}}:</label>
-        <button v-for="h in 6" type="button" @click="setHeading(h+1)">H{{h+1}}</button>
-    </div>
-    <div>
-        <label>
-            {{$parent.locale["font name"]}}:
-        </label>
-        <button v-for="name in nameList" type="button" @click="setFontName(name)">{{name}}</button>
-    </div>
-    <div>
-        <label>
-            {{$parent.locale["font size"]}}:
-        </label>
-        <button v-for="size in 7" type="button" @click="setFontSize(size+1)">{{size+1}}</button>
+    <div class="dashboard-font">
+        <div>
+            <label>{{$parent.locale["heading"]}}:</label>
+            <button v-for="h in 6" type="button" @click="setHeading(h+1)">H{{h+1}}</button>
+        </div>
+        <div>
+            <label>
+                {{$parent.locale["font name"]}}:
+            </label>
+            <button v-for="name in nameList" type="button" @click="setFontName(name)">{{name}}</button>
+        </div>
+        <div>
+            <label>
+                {{$parent.locale["font size"]}}:
+            </label>
+            <button v-for="size in 7" type="button" @click="setFontSize(size+1)">{{size+1}}</button>
+        </div>
     </div>
 </template>
 <script>

diff --git a/src/style.less b/src/style.less
@@ -36,13 +36,13 @@
     background-color: @background-color;
     position: relative;
 
-    ul {
+    & > ul {
       list-style: none;
       padding: 0;
       margin: 0;
       border-bottom: 1px solid @border-color;
 
-      li {
+      & > li {
         display: inline-block;
         cursor: pointer;
         width: 50px;
@@ -120,9 +120,12 @@
         }
       }
 
+      input, button, select {
+        line-height: normal;
+      }
+
       label {
-        margin-bottom: 5px;
-        font-weight: 700;
+        font-weight: bolder;
       }
 
     }
@@ -151,10 +154,13 @@
 @media (max-width: 767px) {
   .vue-html5-editor {
     .dashboard {
-      label, input[type='text'], input[type='number'], button {
+      label, input[type='text'], input[type='number'], button, select {
         display: block;
         margin-bottom: 5px;
         width: 100% !important;
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
     }
   }
@@ -163,7 +169,7 @@
 @media (min-width: 768px) {
   .vue-html5-editor {
     .dashboard {
-      label, input, button {
+      label, input, button, select {
         display: inline-block;
         margin-right: 4px;
         max-width: 100%;