Jelajahi Sumber

adjust input css on edit

yusuketk 7 tahun lalu
induk
melakukan
fb3c5beb79
1 mengubah file dengan 29 tambahan dan 16 penghapusan
  1. 29 16
      src/client/styles/scss/_on-edit.scss

+ 29 - 16
src/client/styles/scss/_on-edit.scss

@@ -1,6 +1,7 @@
 @import 'editor-overlay';
 @import 'editor-overlay';
 
 
 body:not(.on-edit) {
 body:not(.on-edit) {
+
   // hide .page-editor-footer
   // hide .page-editor-footer
   .page-editor-footer {
   .page-editor-footer {
     display: none !important;
     display: none !important;
@@ -18,10 +19,11 @@ body.on-edit {
 
 
   // for growi layout
   // for growi layout
   .main {
   .main {
-    > .row {
+    >.row {
       margin: 0;
       margin: 0;
-      > .col-lg-10,
-      > .col-md-9 {
+
+      >.col-lg-10,
+      >.col-md-9 {
         width: 100%;
         width: 100%;
         padding: 0;
         padding: 0;
       }
       }
@@ -63,12 +65,14 @@ body.on-edit {
   &.hackmd .nav-tab-edit {
   &.hackmd .nav-tab-edit {
     display: none;
     display: none;
   }
   }
+
   &:not(.hackmd) .nav-tab-hackmd {
   &:not(.hackmd) .nav-tab-hackmd {
     display: none;
     display: none;
   }
   }
 
 
   // hide hackmd related alert
   // hide hackmd related alert
   &.hackmd #page-status-alert {
   &.hackmd #page-status-alert {
+
     .alert-hackmd-someone-editing,
     .alert-hackmd-someone-editing,
     .alert-hackmd-draft-exists {
     .alert-hackmd-draft-exists {
       display: none;
       display: none;
@@ -94,17 +98,16 @@ body.on-edit {
 
 
     background: none;
     background: none;
 
 
-    > .header-container {
+    >.header-container {
       width: 100%; //   for crowi layout
       width: 100%; //   for crowi layout
       padding: 0; //    for crowi layout
       padding: 0; //    for crowi layout
       pointer-events: initial; // enable pointer-events
       pointer-events: initial; // enable pointer-events
     }
     }
 
 
-    .header-wrap {
-      overflow-x: hidden;
-    }
     div.title-container {
     div.title-container {
       margin-right: 0px;
       margin-right: 0px;
+      overflow-x: hidden;
+
       h1#revision-path {
       h1#revision-path {
         @include variable-font-size(20px);
         @include variable-font-size(20px);
         line-height: 1em;
         line-height: 1em;
@@ -113,17 +116,17 @@ body.on-edit {
         .d-flex {
         .d-flex {
           flex-wrap: nowrap;
           flex-wrap: nowrap;
         }
         }
+
         .path-segment {
         .path-segment {
           white-space: nowrap;
           white-space: nowrap;
         }
         }
       }
       }
     }
     }
+
     div#page-tag {
     div#page-tag {
       display: inline;
       display: inline;
-      margin-right: auto;
-      .page-tag-form {
-        border-radius: 5px;
-      }
+      min-width: 100px;
+      margin-left: 2px;
     }
     }
 
 
     // hide if screen size is less than tablet
     // hide if screen size is less than tablet
@@ -144,6 +147,7 @@ body.on-edit {
         min-width: 150px;
         min-width: 150px;
       }
       }
     }
     }
+
     .btn-submit {
     .btn-submit {
       width: 100px;
       width: 100px;
     }
     }
@@ -163,16 +167,19 @@ body.on-edit {
   }
   }
 
 
   &.builtin-editor {
   &.builtin-editor {
+
     /*****************
     /*****************
     * Editor styles
     * Editor styles
     *****************/
     *****************/
     .page-editor-editor-container {
     .page-editor-editor-container {
       border-right: 1px solid transparent;
       border-right: 1px solid transparent;
+
       // override CodeMirror styles
       // override CodeMirror styles
       .CodeMirror {
       .CodeMirror {
         .cm-matchhighlight {
         .cm-matchhighlight {
           background-color: cyan;
           background-color: cyan;
         }
         }
+
         .CodeMirror-selection-highlight-scrollbar {
         .CodeMirror-selection-highlight-scrollbar {
           background-color: darkcyan;
           background-color: darkcyan;
         }
         }
@@ -201,8 +208,8 @@ body.on-edit {
         border: none;
         border: none;
       }
       }
     }
     }
-    .page-editor-preview-container {
-    }
+
+    .page-editor-preview-container {}
 
 
     .page-editor-preview-body {
     .page-editor-preview-body {
       padding-top: 18px;
       padding-top: 18px;
@@ -221,7 +228,8 @@ body.on-edit {
           display: inline-block;
           display: inline-block;
           width: 20px;
           width: 20px;
         }
         }
-        .dropdown-menu > li > a {
+
+        .dropdown-menu>li>a {
           display: flex;
           display: flex;
           align-items: center;
           align-items: center;
           justify-content: space-between;
           justify-content: space-between;
@@ -250,7 +258,9 @@ body.on-edit {
         min-width: 150px;
         min-width: 150px;
       }
       }
     }
     }
-  } // .builtin-editor .tab-pane#edit
+  }
+
+  // .builtin-editor .tab-pane#edit
 
 
   &.hackmd {
   &.hackmd {
     #page-editor-options-selector {
     #page-editor-options-selector {
@@ -258,7 +268,7 @@ body.on-edit {
     }
     }
 
 
     .hackmd-preinit,
     .hackmd-preinit,
-    #iframe-hackmd-container > iframe {
+    #iframe-hackmd-container>iframe {
       border: none;
       border: none;
     }
     }
 
 
@@ -274,12 +284,14 @@ body.on-edit {
         padding-bottom: 6px; // for SplitButton
         padding-bottom: 6px; // for SplitButton
       }
       }
     }
     }
+
     .hackmd-resume-button-container {
     .hackmd-resume-button-container {
       .dropdown-menu {
       .dropdown-menu {
         right: 0;
         right: 0;
         left: unset;
         left: unset;
       }
       }
     }
     }
+
     .hackmd-discard-button {
     .hackmd-discard-button {
       text-decoration: underline;
       text-decoration: underline;
       vertical-align: unset;
       vertical-align: unset;
@@ -316,6 +328,7 @@ body.on-edit {
       width: 30px;
       width: 30px;
     }
     }
   }
   }
+
   // active line
   // active line
   .CodeMirror-hint-active.crowi-emoji-autocomplete {
   .CodeMirror-hint-active.crowi-emoji-autocomplete {
     .img-container {
     .img-container {