FB > elite.admin.scss included

src/client/js/components/HeaderSearchBox.jsx

@@ -69,7 +69,7 @@ class HeaderSearchBox extends React.Component {
       <FormGroup>
         <InputGroup>
           <InputGroup.Button className="btn-group-dropdown-scope" data-toggle="dropdown">
-            <DropdownButton id="dbScope" title={scopeLabel}>
+            <DropdownButton id="dbScope" className="pl-3 py-0" title={scopeLabel}>
               <MenuItem onClick={this.onClickAllPages}>All pages</MenuItem>
               <MenuItem onClick={this.onClickChildren}>{ t('header_search_box.item_label.This tree') }</MenuItem>
             </DropdownButton>

src/client/js/components/SearchForm.jsx

@@ -46,7 +46,7 @@ class SearchForm extends React.Component {
     return (
       <table className="table grw-search-table search-help m-0">
         <caption className="text-left text-success p-2">
-          <h5><i className="icon-magnifier pr-2 mb-2" />{ t('search_help.title') }</h5>
+          <h5 className="h6"><i className="icon-magnifier pr-2 mb-2" />{ t('search_help.title') }</h5>
         </caption>
         <tbody>
           <tr>
@@ -54,34 +54,34 @@ class SearchForm extends React.Component {
               <code>word1</code> <code>word2</code><br></br>
               <small>({ t('search_help.and.syntax help') })</small>
             </th>
-            <td className="align-middle"><h6 className="m-0">{ t('search_help.and.desc', { word1: 'word1', word2: 'word2' }) }</h6></td>
+            <td><h6 className="m-0">{ t('search_help.and.desc', { word1: 'word1', word2: 'word2' }) }</h6></td>
           </tr>
           <tr>
             <th className="text-right py-2">
               <code>&quot;This is GROWI&quot;</code><br></br>
               <small>({ t('search_help.phrase.syntax help') })</small>
             </th>
-            <td className="align-middle"><h6 className="m-0">{ t('search_help.phrase.desc', { phrase: 'This is GROWI' }) }</h6></td>
+            <td><h6 className="m-0">{ t('search_help.phrase.desc', { phrase: 'This is GROWI' }) }</h6></td>
           </tr>
           <tr>
             <th className="text-right py-2"><code>-keyword</code></th>
-            <td className="align-middle"><h6 className="m-0">{ t('search_help.exclude.desc', { word: 'keyword' }) }</h6></td>
+            <td><h6 className="m-0">{ t('search_help.exclude.desc', { word: 'keyword' }) }</h6></td>
           </tr>
           <tr>
             <th className="text-right py-2"><code>prefix:/user/</code></th>
-            <td className="align-middle"><h6 className="m-0">{ t('search_help.prefix.desc', { path: '/user/' }) }</h6></td>
+            <td><h6 className="m-0">{ t('search_help.prefix.desc', { path: '/user/' }) }</h6></td>
           </tr>
           <tr>
             <th className="text-right py-2"><code>-prefix:/user/</code></th>
-            <td className="align-middle"><h6 className="m-0">{ t('search_help.exclude_prefix.desc', { path: '/user/' }) }</h6></td>
+            <td><h6 className="m-0">{ t('search_help.exclude_prefix.desc', { path: '/user/' }) }</h6></td>
           </tr>
           <tr>
             <th className="text-right py-2"><code>tag:wiki</code></th>
-            <td className="align-middle"><h6 className="m-0">{ t('search_help.tag.desc', { tag: 'wiki' }) }</h6></td>
+            <td><h6 className="m-0">{ t('search_help.tag.desc', { tag: 'wiki' }) }</h6></td>
           </tr>
           <tr>
-            <th className="text-right pt-2"><code>-tag:wiki</code></th>
-            <td className="align-middle"><h6 className="m-0">{ t('search_help.exclude_tag.desc', { tag: 'wiki' }) }</h6></td>
+            <th className="text-right py-2"><code>-tag:wiki</code></th>
+            <td><h6 className="m-0">{ t('search_help.exclude_tag.desc', { tag: 'wiki' }) }</h6></td>
           </tr>
         </tbody>
       </table>

src/client/styles/scss/_layout.scss

@@ -180,36 +180,33 @@ $nav-main-left-tab-width: 95px;
 }
 
 // dropdown menu for search
+// inherited from elite.admin.scss //TODO:SCSSの分離
 .dropdown-menu {
-  .btn-group-dropdown-scope & {
-    position: absolute;
-    top: 43px;
-    left: -112px;
-    width: 209px;
-    padding: 0.25em 0.25em 0.25em 1.75em;
-    font-size: 13px;
-    font-weight: 900;
-    line-height: 2.75;
-    background: $grw-white-green;
-    border-radius: 3px;
-    a {
-      color: #333;
-    }
-    li {
-      list-style-type: disc;
+  $grw-dropdown-margin-top: 0.5em;
+  padding-bottom: 8px;
+  margin-top: $grw-dropdown-margin-top;
+  border: 1px solid $border;
+  border-radius: $radius;
+  -webkit-box-shadow: 0px !important;
+  -moz-box-shadow: 0px !important;
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
+  li > a {
+    padding: 0.5em 1em;
+    color: #333;
+    text-decoration: none;
+    white-space: nowrap;
+    &:focus,
+    &:hover {
+      background: aliceblue;
     }
   }
-}
 
-.dropdown-menu {
   .search-typeahead & {
-    position: absolute !important;
-    top: 14px !important;
-    left: 0 !important;
-    margin: 0 !important;
+    margin-top: $grw-dropdown-margin-top !important;
   }
 }
 
+//TODO:SCSSの分離（search 関連のスタイル）
 .grw-search-table {
   caption {
     display: table-header-group;

src/server/views/layout/layout.html

@@ -80,7 +80,7 @@
 
       <!--1 GROWI logo-->
       <a class="logo d-block top-left-part bg-grw-mos-green my-auto px-3" href="/">
-        <div class="logo-mark _white d-inline-block py-3">{% include '../widget/logo.html' %}</div>
+        <div class="logo-mark _white d-inline-block py-2">{% include '../widget/logo.html' %}</div>
         <span class="logo-text mx-3 text-white">
           {% set appTitle = appService.getAppTitle() %}
           {% set appTitleFontSize = getAppTitleFontSize(appTitle) %}
@@ -101,7 +101,7 @@
       </a>
 
       <!--4 search nav-->
-      <ul class="nav navbar-top-links d-none d-md-block bg-grw-light-green my-auto">
+      <ul class="nav navbar-top-links d-none d-md-block bg-grw-light-green ml-3 my-auto">
         {#  disabled temporary -- 2019.05.13 Yuki Takei
         <li class="nav-item-admin">
           <a href="/tags">