apply stylelint

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 160,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.stylelintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "stylelint-config-recess-order",
+    "./node_modules/prettier-stylelint/config.js"
+  ],
+  "rules": {
+    "indentation": 2,
+    "string-quotes": "single",
+    "rule-empty-line-before": [ "always-multi-line", {
+      "ignore": ["after-comment", "stylelint-commands"]
+    } ],
+    "selector-combinator-space-before": "always",
+    "selector-combinator-space-after": "always"
+  }
+}

.vscode/extensions.json

@@ -4,13 +4,13 @@
 
 	// List of extensions which should be recommended for users of this workspace.
 	"recommendations": [
-    "hookyqr.beautify",
     "msjsdiag.debugger-for-chrome",
     "hbenl.vscode-firefox-debug",
     "editorconfig.editorconfig",
     "dbaeumer.vscode-eslint",
     "eg2.vscode-npm-script",
     "christian-kohler.npm-intellisense",
+    "esbenp.prettier-vscode",
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": [

.vscode/settings.json

@@ -4,5 +4,11 @@
   // 指定した構文に対してプロファイルを定義するか、特定の規則がある独自のプロファイルをご使用ください。
   "emmet.syntaxProfiles": {
     "javascript": "jsx"
+  },
+
+  // for prettier-stylelint
+  "prettier.stylelintIntegration": true,
+  "[scss]": {
+    "editor.formatOnSave": true
   }
 }

package.json

@@ -33,6 +33,8 @@
     "clean": "npm-run-all -p clean:*",
     "heroku-postbuild": "sh bin/heroku/install-plugins.sh && npm run build:prod",
     "lint:fix": "eslint . --fix",
+    "lint:styles:fix": "prettier-stylelint --quiet --write src/client/styles/scss/**/*.scss",
+    "lint:styles": "stylelint src/client/styles/scss/**/*.scss",
     "lint": "eslint .",
     "migrate": "npm run migrate:up",
     "migrate:create": "migrate-mongo create -f config/migrate.js -- ",
@@ -183,6 +185,7 @@
     "penpal": "^3.0.3",
     "plantuml-encoder": "^1.2.5",
     "postcss-loader": "^3.0.0",
+    "prettier-stylelint": "^0.4.2",
     "react": "^16.8.3",
     "react-bootstrap": "^0.32.1",
     "react-bootstrap-typeahead": "^3.3.4",
@@ -202,6 +205,7 @@
     "socket.io-client": "^2.0.3",
     "stream-to-promise": "^2.2.0",
     "style-loader": "^0.23.0",
+    "stylelint-config-recess-order": "^2.0.1",
     "terser-webpack-plugin": "^1.2.2",
     "throttle-debounce": "^2.0.0",
     "toastr": "^2.1.2",

src/client/styles/scss/_admin.scss

@@ -1,17 +1,16 @@
 .admin-page {
-
   .admin-user-menu {
     .dropdown-menu {
-      left: auto;
       right: 0;
+      left: auto;
       width: 300px;
     }
-   }
+  }
 
   .admin-group-menu {
     .dropdown-menu {
-      left: auto;
       right: 0;
+      left: auto;
     }
   }
 
@@ -19,7 +18,7 @@
     @import 'hljs';
 
     .ss-container img {
-      padding: .5em;
+      padding: 0.5em;
       background-color: #ddd;
     }
 
@@ -32,9 +31,9 @@
 
   .admin-security {
     .passport-logo {
-      margin-top: -.5em;
-      padding: 3px;
       height: 32px;
+      padding: 3px;
+      margin-top: -0.5em;
       background-color: black;
     }
 
@@ -45,21 +44,21 @@
 
   .admin-notification {
     .td-abs-center {
+      width: 1px; // to keep the cell small
       text-align: center;
       vertical-align: middle;
-      width: 1px; // to keep the cell small
     }
   }
 
   .admin-importer {
     table.table-mapping {
-      th, td {
+      th,
+      td {
         text-align: center;
       }
     }
   }
 
-
   // Toggle Twitter Bootstrap button class when active
   // https://jsfiddle.net/ms040m01/3/
   @mixin active-color($color, $bg-color, $border-color) {
@@ -75,18 +74,18 @@
     .btn {
       min-width: 60px;
     }
-    .btn.active[data-active-class="default"] {
+    .btn.active[data-active-class='default'] {
       @include active-color($btn-default-color, $btn-default-bg, $btn-default-border);
     }
-    .btn.active[data-active-class="primary"] {
+    .btn.active[data-active-class='primary'] {
       @include active-color($btn-primary-color, $btn-primary-bg, $btn-primary-border);
     }
 
     // disabled btn-group styles
     &.btn-group-disabled {
       .btn:hover {
-        background-color: unset;
         cursor: not-allowed;
+        background-color: unset;
       }
     }
   }
@@ -97,9 +96,9 @@
     .theme-option-container {
       min-width: 100px;
       a {
+        padding: 3px;
         margin-right: 10px;
         margin-bottom: 10px;
-        padding: 3px;
 
         svg {
           display: block;
@@ -108,14 +107,14 @@
     }
 
     &.disabled {
-      opacity: 0.5;
       cursor: not-allowed;
+      opacity: 0.5;
     }
 
     // style
     .theme-option-container a {
-      border: 1px solid #ccc;
       background-color: #f5f5f5;
+      border: 1px solid #ccc;
     }
     .theme-option-name {
       opacity: 0.3;

src/client/styles/scss/_attachments.scss

@@ -6,34 +6,33 @@
     list-style: none;
   }
 }
-.page-attachments, .page-meta {
+.page-attachments,
+.page-meta {
   font-size: 0.95em;
 
   .attachment-in-use {
-    margin: 0 0 0 4px;
     padding: 1px 5px;
+    margin: 0 0 0 4px;
   }
 
   .attachment-filetype {
-    margin: 0 0 0 4px;
     padding: 1px 5px;
+    margin: 0 0 0 4px;
     font-weight: normal;
   }
 
   .attachment-download {
-    cursor: pointer;
     margin: 0 0 0 4px;
+    cursor: pointer;
   }
 
   .attachment-delete {
-    cursor: pointer;
     margin: 0 0 0 4px;
+    cursor: pointer;
   }
-
 }
 
 .attachment-delete-modal {
-
   .attachment-delete-image {
     text-align: center;
 

src/client/styles/scss/_comment.scss

@@ -3,9 +3,9 @@
     // delete button
     .page-comment-control {
       position: absolute;
-      display: none;    // default hidden
       top: 0;
       right: 0;
+      display: none; // default hidden
     }
   }
 
@@ -13,9 +13,9 @@
   .page-comment-delete-modal .modal-content {
     .modal-body {
       .comment-body {
+        max-height: 13em;
         // scrollable
         overflow-y: auto;
-        max-height: 13em;
       }
     }
   }
@@ -23,14 +23,13 @@
 
 .main-container {
   .page-comments {
-
     .page-comments-list-toggle-newer,
     .page-comments-list-toggle-older {
-      text-align: center;
       display: block;
       margin: 8px;
-      font-size: .9em;
+      font-size: 0.9em;
       color: #999;
+      text-align: center;
     }
 
     // older comments
@@ -38,7 +37,7 @@
     }
     // newer comments
     .page-comments-list-newer .page-comment {
-      opacity: .7;
+      opacity: 0.7;
 
       &:hover {
         opacity: 1;

src/client/styles/scss/_comment_growi.scss

@@ -1,10 +1,9 @@
-.growi.main-container  {
-
+.growi.main-container {
   %comment-section {
     position: relative;
     padding: 1em;
-    margin-left: 4.5em;
     margin-bottom: 1em;
+    margin-left: 4.5em;
     // screen-xs
     @media (max-width: $screen-xs) {
       margin-left: 3.5em;
@@ -12,14 +11,14 @@
 
     // speech balloon
     &:before {
-      border: 1em solid transparent;
-      border-left-width: 0;
+      position: absolute;
+      top: 1.5em;
       left: -1em;
-      content: "";
       display: block;
-      top: 1.5em;
-      position: absolute;
       width: 0;
+      content: '';
+      border: 1em solid transparent;
+      border-left-width: 0;
 
       // screen-xs
       @media (max-width: $screen-xs) {
@@ -30,9 +29,9 @@
 
   %picture {
     float: left;
-    margin-top: 0.8em;
     width: 3em;
     height: 3em;
+    margin-top: 0.8em;
     // screen-xs
     @media (max-width: $screen-xs) {
       width: 2em;
@@ -41,8 +40,8 @@
   }
 
   .page-comments-row {
-    border-top: 5px solid;
     margin: 30px 0px;
+    border-top: 5px solid;
   }
 
   .page-comments {
@@ -78,8 +77,8 @@
     }
 
     .page-comment-meta {
+      font-size: 0.9em;
       color: #999;
-      font-size: .9em;
       text-align: right;
 
       * {
@@ -96,10 +95,9 @@
   // display cheatsheet for comment form only
   .comment-form {
     .editor-cheatsheet {
-        display: none;
+      display: none;
     }
 
-
     position: relative;
     margin-top: 2em;
     // user icon
@@ -118,9 +116,10 @@
     }
     .comment-form-comment {
       height: 80px;
-      &:focus, &:not(:invalid) {
-        transition: height 0.2s ease-out;
+      &:focus,
+      &:not(:invalid) {
         height: 180px;
+        transition: height 0.2s ease-out;
       }
     }
     .comment-form-preview {

src/client/styles/scss/_comment_kibela.scss

@@ -1,28 +1,27 @@
-
 .kibela.main-container {
   /* Comment section */
   %comment-section {
     position: relative;
     padding: 1em;
-    margin-left: 4.5em;
     margin-bottom: 1em; // screen-xs
+    margin-left: 4.5em;
     @media (max-width: $screen-xs) {
       margin-left: 3.5em;
     } // speech balloon
     &:before {
+      position: absolute;
+      top: 1.5em;
+      left: -1em;
+      display: block;
       width: 0;
+      width: 0; // screen-xs
       height: 0;
+      content: '';
       border-top: 20px solid transparent;
-      border-left: 20px solid transparent;
+      border-right: 20px solid #e6e9ec;
       border-bottom: 20px solid transparent;
-      border-right: 20px solid #E6E9EC;
+      border-left: 20px solid transparent;
       border-left-width: 0;
-      left: -1em;
-      content: "";
-      display: block;
-      top: 1.5em;
-      position: absolute;
-      width: 0; // screen-xs
       @media (max-width: $screen-xs) {
         top: 1em;
       }
@@ -30,9 +29,9 @@
   }
   %picture {
     float: left;
-    margin-top: 0.8em;
     width: 3em;
     height: 3em; // screen-xs
+    margin-top: 0.8em;
     @media (max-width: $screen-xs) {
       width: 2em;
       height: 2em;
@@ -58,7 +57,7 @@
     } // コメントセクション
     .page-comment-main {
       @extend %comment-section;
-      background: #E6E9EC;
+      background: #e6e9ec;
       border-radius: 0.35em;
     } // コメント本文
     .page-comment-body {
@@ -66,30 +65,30 @@
       word-wrap: break-word;
     }
     .page-comment-meta {
-      color: #E5ECF1;
-      font-size: .9em;
+      font-size: 0.9em;
+      color: #e5ecf1;
       text-align: right;
       * {
         vertical-align: 25%;
       }
     }
   } // show when hover
-  .page-comment-main:hover>.page-comment-control {
+  .page-comment-main:hover > .page-comment-control {
     display: block;
   } // display cheatsheet for comment form only
   .comment-form {
+    position: relative;
+    margin-top: 2em; // user icon
     border: none;
     .editor-cheatsheet {
       display: none;
     }
-    position: relative;
-    margin-top: 2em; // user icon
     .picture {
       @extend %picture;
     } // seciton
     .comment-form-main {
       @extend %comment-section;
-      background: #E6E9EC;
+      background: #e6e9ec;
       border-radius: 0.35em;
       .CodeMirror {
         border: 0px;
@@ -102,8 +101,8 @@
       height: 80px;
       &:focus,
       &:not(:invalid) {
-        transition: height 0.2s ease-out;
         height: 180px;
+        transition: height 0.2s ease-out;
       }
     }
     .CodeMirror {

src/client/styles/scss/_create-page.scss

@@ -1,6 +1,6 @@
 .modal.create-page {
-
-  @media (min-width: $screen-sm-min) { // {{{ more than tablet size
+  // more than tablet size
+  @media (min-width: $screen-sm-min) {
     .modal-dialog {
       width: 750px;
     }
@@ -11,8 +11,8 @@
       margin-bottom: 10px;
     }
 
-    form, #template-form {
-
+    form,
+    #template-form {
       // layout
       .create-page-input-container {
         .create-page-input-row {
@@ -39,10 +39,10 @@
       }
       .page-today-input1 {
         width: 60px;
-        margin-left: 5px;
-        margin-right: 5px;
-        padding-left: 2px;
         padding-right: 2px;
+        padding-left: 2px;
+        margin-right: 5px;
+        margin-left: 5px;
       }
       .page-today-suffix {
       }
@@ -55,7 +55,7 @@
         flex: 1;
         input {
           min-width: 300px; // Workaround to display placeholder.
-                            //   cf https://github.com/ericgio/react-bootstrap-typeahead/issues/256
+          //   cf https://github.com/ericgio/react-bootstrap-typeahead/issues/256
         }
       }
 

src/client/styles/scss/_editor-attachment.scss

@@ -1,7 +1,6 @@
 @import 'editor-overlay';
 
 .editor-container {
-
   // for Dropzone
   .dropzone {
     @mixin insertSimpleLineIcons($code) {
@@ -12,14 +11,15 @@
       }
     }
 
-    position: relative;   // against .overlay position: absolute
+    position: relative; // against .overlay position: absolute
 
     @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
 
     // unuploadable or rejected
-    &.dropzone-unuploadable, &.dropzone-rejected {
+    &.dropzone-unuploadable,
+    &.dropzone-rejected {
       .overlay.overlay-dropzone-active {
-        background: rgba(200,200,200,0.8);
+        background: rgba(200, 200, 200, 0.8);
 
         .overlay-content {
           color: #444;
@@ -36,9 +36,9 @@
       .overlay.overlay-dropzone-active {
         .overlay-content {
           // insert content
-          @include insertSimpleLineIcons("\e617");  // icon-exclamation
+          @include insertSimpleLineIcons('\e617'); // icon-exclamation
           &:after {
-            content: "File uploading is disabled";
+            content: 'File uploading is disabled';
           }
         }
       }
@@ -52,13 +52,13 @@
 
           .overlay-content {
             // insert content
-            @include insertSimpleLineIcons("\e084");  // icon-cloud-upload
+            @include insertSimpleLineIcons('\e084'); // icon-cloud-upload
             &:after {
-              content: "Drop here to upload";
+              content: 'Drop here to upload';
             }
             // style
             color: #666;
-            background: rgba(200,200,200,0.8);
+            background: rgba(200, 200, 200, 0.8);
           }
         }
       }
@@ -67,9 +67,9 @@
         .overlay.overlay-dropzone-active {
           .overlay-content {
             // insert content
-            @include insertSimpleLineIcons("\e032");  // icon-picture
+            @include insertSimpleLineIcons('\e032'); // icon-picture
             &:after {
-              content: "Only an image file is allowed";
+              content: 'Only an image file is allowed';
             }
           }
         }
@@ -79,9 +79,9 @@
         .overlay.overlay-dropzone-active {
           .overlay-content {
             // insert content
-            @include insertSimpleLineIcons("\e617");  // icon-exclamation
+            @include insertSimpleLineIcons('\e617'); // icon-exclamation
             &:after {
-              content: "Only 1 file is allowed";
+              content: 'Only 1 file is allowed';
             }
           }
         }
@@ -91,17 +91,16 @@
 
   .btn-open-dropzone {
     z-index: 2;
-    font-size: small;
     padding-top: 3px;
     padding-bottom: 3px;
+    font-size: small;
     border: none;
-    border-radius: 0;
     border-top: 1px dotted #ccc;
+    border-radius: 0;
     &:active {
       box-shadow: none;
     }
   }
-
 }
 
 #page-editor {

src/client/styles/scss/_editor-navbar.scss

@@ -5,12 +5,12 @@
     }
 
     button {
-      margin: 0 2px;
       padding: 8px;
-      border: none;
-      background-color: transparent;
+      margin: 0 2px;
       font-size: 14px;
       line-height: 1;
+      background-color: transparent;
+      border: none;
     }
 
     img {

src/client/styles/scss/_editor-overlay.scss

@@ -2,10 +2,10 @@
   .overlay.#{$additionalSelector} {
     background: rgba(255, 255, 255, 0.5);
     .overlay-content {
-      background: rgba(200, 200, 200, 0.5);
-      color: #444;
-      font-size: $contentFontSize;
       padding: $contentPadding;
+      font-size: $contentFontSize;
+      color: #444;
+      background: rgba(200, 200, 200, 0.5);
     }
   }
 }
@@ -13,16 +13,15 @@
 // overlay in .editor-container
 .editor-container {
   .overlay {
-    // layout
-    display: flex;
-    justify-content: center;
-    align-items: center;
     position: absolute;
-    z-index: 7; // forward than .CodeMirror-vscrollbar
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
+    z-index: 7; // forward than .CodeMirror-vscrollbar
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   // loading keymap
@@ -30,18 +29,18 @@
 
   // cheat sheat
   .overlay.overlay-gfm-cheatsheet {
-    justify-content: flex-end;
     align-items: flex-end;
+    justify-content: flex-end;
 
     pointer-events: none;
 
     .panel.gfm-cheatsheet {
-      opacity: 0.6;
       box-shadow: unset;
+      opacity: 0.6;
       .panel-body {
-        color: $text-muted;
-        font-family: monospace;
         min-width: 30em;
+        font-family: monospace;
+        color: $text-muted;
       }
       ul > li {
         list-style: none;
@@ -49,13 +48,14 @@
     }
 
     a.gfm-cheatsheet-modal-link {
+      color: $text-muted;
       pointer-events: all;
       cursor: pointer;
 
       opacity: 0.6;
-      color: $text-muted;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         opacity: 1;
       }
     }

src/client/styles/scss/_hljs.scss

@@ -1,34 +1,34 @@
 pre.hljs {
+  position: relative;
+
   // override Highlight Js Style Border
   border-radius: 3px;
   &.hljs-no-border {
     border: none;
   }
 
-  position: relative;
-
   cite {
     position: absolute;
     top: 0;
     right: 0;
     padding: 0 4px;
-    background: #ccc;
-    color: #333;
     font-style: normal;
     font-weight: bold;
+    color: #333;
+    background: #ccc;
     opacity: 0.6;
   }
 }
 
 // styles for highlightjs-line-numbers
 .hljs-ln td.hljs-ln-numbers {
-  user-select: none;
+  padding-right: 5px;
+  color: #ccc;
 
   text-align: center;
-  color: #ccc;
-  border-right: 1px solid #CCC;
   vertical-align: top;
-  padding-right: 5px;
+  user-select: none;
+  border-right: 1px solid #ccc;
 }
 .hljs-ln td.hljs-ln-code {
   padding-left: 10px;

src/client/styles/scss/_layout.scss

@@ -1,17 +1,23 @@
-.main-container { // {{{
-  h1, h2, h3, h4, h5, h6 {
+.main-container {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-weight: 500;
   }
 
-  .navbar-top-links { // {{{
+  .navbar-top-links {
     .confidential {
       a {
-        cursor: default;
         font-weight: bold;
+        cursor: default;
       }
     }
 
-    .nav-item-admin, .nav-item-create-page {
+    .nav-item-admin,
+    .nav-item-create-page {
       span {
         margin-left: 0.5em;
         @media (max-width: $screen-xs-min) {
@@ -19,7 +25,7 @@
         }
       }
     }
-  } // }}}
+  }
 
   /*
    * header
@@ -34,11 +40,11 @@
 
     // affix
     &.affix {
-      width: 100%;
       top: 0;
       left: 0;
-      padding: 2px 20px;
       z-index: 15; // over the .sidebar
+      width: 100%;
+      padding: 2px 20px;
       box-shadow: 0 0px 2px #999;
 
       h1 {
@@ -49,35 +55,35 @@
 
   .main {
     .header-wrap {
-      padding: 15px 15px 0 15px;
       min-height: 70px;
+      padding: 15px 15px 0 15px;
     }
   }
 
-  .layout-control { // {{{
-    transition: .3s ease;
+  .layout-control {
     position: fixed;
-    display: block;
-    text-align: center;
     right: 25%;
     bottom: 25px;
+    z-index: 1039;
+    display: block;
     padding: 5px 8px;
+    font-size: 0.8em;
+    text-align: center;
     border: solid 1px #ccc;
     border-right: none;
     border-radius: 5px 0 0 5px;
-    z-index: 1039;
-    font-size: .8em;
+    transition: 0.3s ease;
 
     &:hover {
       text-decoration: none;
       cursor: pointer;
     }
-  } // }}}
+  }
 
   .revision-toc {
-    font-size: .9em;
     max-width: 250px;
     overflow: hidden;
+    font-size: 0.9em;
 
     .revision-toc-content {
       padding: 10px;
@@ -89,15 +95,15 @@
         }
       }
 
-      > ul > li { // first level of li
-        margin: 4px 4px 4px 15px;
+      // first level of li
+      > ul > li {
         padding: 5px;
+        margin: 4px 4px 4px 15px;
       }
     }
   }
 } // }}}
 
-
 // fix tab width to 95 pixels
 // see also '_on-edit.scss'
 $nav-main-left-tab-width: 95px;
@@ -106,15 +112,15 @@ $nav-main-left-tab-width: 95px;
     width: $nav-main-left-tab-width;
     text-align: center;
     a {
-      padding-left: 0;
       padding-right: 0;
+      padding-left: 0;
     }
   }
 }
 
-
-@media print { // {{{ printable style
-  .main-container { // {{{
+// printable style
+@media print {
+  .main-container {
     padding: 30px;
 
     a:after {
@@ -131,11 +137,11 @@ $nav-main-left-tab-width: 95px;
 
       .revision-toc {
         float: none;
-        font-size: .9em;
-        border: solid 1px #aaa;
-        border-radius: 5px;
         max-width: 100%;
         margin-bottom: 20px;
+        font-size: 0.9em;
+        border: solid 1px #aaa;
+        border-radius: 5px;
 
         .revision-toc-head {
           display: inline-block;
@@ -149,23 +155,21 @@ $nav-main-left-tab-width: 95px;
       }
 
       .meta {
-        border-top: solid 1px #ccc;
         margin-top: 32px;
         color: #666;
+        border-top: solid 1px #ccc;
       }
-
-
     }
   }
-} // }}}
+}
 
 .system-version {
   position: fixed;
   right: 0.5em;
   bottom: 0;
-  opacity: .6;
+  opacity: 0.6;
 
   > span {
-    margin-left: .5em;
+    margin-left: 0.5em;
   }
 }

src/client/styles/scss/_layout_crowi.scss

@@ -9,31 +9,30 @@
 
   .revision-toc {
     float: right;
-    border: solid 1px #aaa;
-    border-radius: 5px;
     max-width: 250px;
     overflow: hidden;
+    border: solid 1px #aaa;
+    border-radius: 5px;
 
     .revision-toc-head {
       display: inline-block;
       float: right;
-      border-left: solid 1px #aaa;
-      border-bottom: solid 1px #aaa;
-      border-radius: 0 5px;
       padding: 3px 11px;
+      margin-bottom: 5px;
+      margin-left: 5px;
       font-weight: bold;
       background: $gray-lighter;
-      margin-left: 5px;
-      margin-bottom: 5px;
+      border-bottom: solid 1px #aaa;
+      border-left: solid 1px #aaa;
+      border-radius: 0 5px;
 
       &.collapsed {
-        border: none;
         margin: 0;
+        border: none;
       }
     }
     .revision-toc-content {
       background: #fcfcfc;
     }
   }
-
 }

src/client/styles/scss/_layout_crowi_sidebar.scss

@@ -1,21 +1,20 @@
-.crowi-sidebar { // {{{
+.crowi-sidebar {
   position: fixed;
-  padding: 65px 0 0 0;
-  height: 100%;
-  right: 0;
   top: 0;
+  right: 0;
+  height: 100%;
+  padding: 65px 0 0 0;
   overflow: auto;
   border-left: solid 1px transparent;
 
-  transition: .3s ease;
-
+  transition: 0.3s ease;
 
   .page-meta {
     padding: 15px 15px 5px 15px;
-    font-size: .9em;
-    border-bottom: solid 1px #ccc;
+    font-size: 0.9em;
 
     line-height: 1.4em;
+    border-bottom: solid 1px #ccc;
     p {
       line-height: 1.4em;
     }
@@ -41,10 +40,11 @@
       .dl-horizontal {
         margin-bottom: 0;
 
-        dt, dd {
-          border-top: solid 1px #ccc;
+        dt,
+        dd {
           padding-top: 5px;
           padding-bottom: 5px;
+          border-top: solid 1px #ccc;
         }
         dt {
           width: 80px;
@@ -56,16 +56,17 @@
       }
     }
 
-    .liker-user-count, .seen-user-count {
+    .liker-user-count,
+    .seen-user-count {
+      margin-bottom: 5px;
       font-size: 1.2em;
       font-weight: bold;
-      margin-bottom: 5px;
     }
   }
 
   .side-content {
-    margin-bottom: 100px;
     padding: 15px;
+    margin-bottom: 100px;
 
     h3 {
       font-size: 1.1em;
@@ -94,7 +95,7 @@
             font-size: 12px;
           }
           .overlay-gfm-cheatsheet {
-            display: none;  // hide cheatsheet
+            display: none; // hide cheatsheet
           }
           .CodeMirror {
             height: 150px;
@@ -111,8 +112,8 @@
 
       .page-comments-list {
         .page-comment {
-          margin-top: 8px;
           padding-top: 8px;
+          margin-top: 8px;
 
           .picture {
             float: left;
@@ -129,8 +130,8 @@
             margin-left: 40px;
 
             .page-comment-meta {
+              font-size: 0.9em;
               color: #aaa;
-              font-size: .9em;
             }
             .page-comment-body {
               padding: 8px 0;
@@ -138,9 +139,9 @@
             }
             .page-comment-control {
               position: absolute;
-              display: none;    // default hidden
               top: 0;
               right: 0;
+              display: none; // default hidden
             }
           }
 
@@ -151,7 +152,6 @@
         }
       }
     }
-
   }
 
   .portal-form-button {
@@ -160,20 +160,19 @@
 
   .system-version {
     position: fixed;
-    z-index: 1;
     right: 1.4em;
-    width: calc(25% - 1.5em);
     bottom: 0.1em;
-    padding-right: 1em;
-    opacity: 1;
+    z-index: 1;
 
     display: flex;
     justify-content: space-between;
+    width: calc(25% - 1.5em);
+    padding-right: 1em;
+    opacity: 1;
 
-    transition: .3s ease;
+    transition: 0.3s ease;
   }
-
-} // }}}
+}
 
 body:not(.aside-hidden) #toggle-sidebar {
   i.ti-angle-left {
@@ -183,7 +182,7 @@ body:not(.aside-hidden) #toggle-sidebar {
     display: block;
   }
 }
-.aside-hidden { // {{{
+.aside-hidden {
   #toggle-sidebar {
     right: 0;
     i.ti-angle-right {
@@ -194,12 +193,13 @@ body:not(.aside-hidden) #toggle-sidebar {
     }
   }
 
-  .crowi-sidebar, .system-version { // {{{
+  .crowi-sidebar,
+  .system-version {
     right: -25%;
-  } // }}}
+  }
 
   .bg-title .col-md-9,
   .main {
     width: 100%;
   }
-} // }}}
+}

src/client/styles/scss/_layout_growi.scss

@@ -4,19 +4,20 @@
   }
 
   .liker-and-seenusers {
-    height: 42px;   // .nav height
+    height: 42px; // .nav height
     border-bottom: 1px solid $border;
 
-    .liker-user-count, .seen-user-count {
+    .liker-user-count,
+    .seen-user-count {
       font-weight: bold;
     }
   }
 
   .revision-toc {
     &.affix {
-      margin-top: 5px;
       top: calc(46px + 5px);
-      min-width: calc(#{100/12*2%} - #{$grid-gutter-width});  // width of 2column - padding
+      min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
+      margin-top: 5px;
     }
 
     .revision-toc-content {
@@ -24,5 +25,3 @@
     }
   }
 }
-
-

src/client/styles/scss/_layout_kibela.scss

@@ -4,7 +4,7 @@ body.kibela {
   .nav-main-left-tab,
   .tav-pane,
   .active {
-    color: #5882FA;
+    color: #5882fa;
   }
   .bg-white {
     background: #fefffe !important;
@@ -12,8 +12,8 @@ body.kibela {
   .logo {
     background: transparent;
     .logo-mark {
-      background-color: white;
       height: 50px;
+      background-color: white;
       box-shadow: none;
       svg {
         width: 60px;
@@ -48,16 +48,16 @@ body.kibela {
     background: white;
   }
   .page-attachments-row {
+    background-color: #e5ecf1 !important;
     border: 0px;
-    background-color: #E5ECF1 !important;
   }
   .round-corner {
     border-radius: 0.35em;
   }
   .round-corner-top {
-    border-radius: 0.35em;
-    border-top: solid 0.4em #5584E1;
     z-index: absolute;
+    border-top: solid 0.4em #5584e1;
+    border-radius: 0.35em;
   }
   .kibela-block {
     position: absolute;
@@ -65,11 +65,11 @@ body.kibela {
     right: 100px;
     bottom: 0px;
     left: 0px;
-    margin: auto;
+    z-index: absolute;
     height: 11em;
+    margin: auto;
+    border-top: solid 0.4em #5584e1;
     border-radius: 0.35em;
-    border-top: solid 0.4em #5584E1;
-    z-index: absolute;
   }
   .bg-title {
     position: relative;
@@ -84,10 +84,10 @@ body.kibela {
   }
   .revision-toc {
     &.affix {
+      top: calc(60px + 5px);
       right: 10rem;
+      min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
       margin-top: 40px;
-      top: calc(60px + 5px);
-      min-width: calc(#{100/12*2%} - #{$grid-gutter-width}); // width of 2column - padding
     }
     .revision-toc-content {
       padding: 0;
@@ -102,54 +102,54 @@ body.kibela {
   /* search page */
   .search-result-list,
   .page-list-li {
-    background: #F4F5F6;
+    background: #f4f5f6;
   }
   /* Tabs */
   .nav.nav-tabs {
-    border-bottom-color: #F4F5F6;
-    >li>a {
+    border-bottom-color: #f4f5f6;
+    > li > a {
       &,
       &:hover,
       &:focus {
         background: transparent;
         border-top: none;
-        border-left: none;
         border-right: none;
+        border-left: none;
       }
     }
-    >li.active>a {
+    > li.active > a {
       background: transparent !important;
-      border-bottom: solid 2.7px #5584E1;
       border-top: none;
-      border-left: none;
       border-right: none;
+      border-bottom: solid 2.7px #5584e1;
+      border-left: none;
     }
     .wiki {
       h1 {
-        border-bottom: solid 2px #5584E1 !important;
+        border-bottom: solid 2px #5584e1 !important;
       }
       h2 {
-        border-color: solid 1px #5584E1;
+        border-color: solid 1px #5584e1;
       }
     }
   }
   /* user page */
   .header-wrap {
-    margin-left: 2em;
     padding: 0px;
+    margin-left: 2em;
   }
   /* edit */
   .CodeMirror {
+    border: solid 1.2px #d8d8d8;
+    border-top: solid 0.3em #5584e1 !important;
     border-radius: 0.35em;
-    border-top: solid 0.3em #5584E1 !important;
-    border: solid 1.2px #D8D8D8;
   }
   &.on-edit {
-    $header-plus-footer: 42px                     // .nav height
-                        + 5.5px                   // .kibela-block border-top
-                        + 15px                    // .tab-content padding-top
-                        + 1px                     // .page-editor-footer border-top
-                        + 60px;                   // .page-editor-footer min-height
+    $header-plus-footer: 42px //  .nav height
+      + 5.5px //                  .kibela-block border-top
+      + 15px //                   .tab-content padding-top
+      + 1px //                    .page-editor-footer border-top
+      + 60px; //                  .page-editor-footer min-height
 
     @include expand-editor($header-plus-footer);
 
@@ -165,8 +165,8 @@ body.kibela {
     .tab-content {
       padding-top: 15px;
       #edit {
-        margin-left: 1em;
         margin-right: 1em;
+        margin-left: 1em;
       }
     }
     .tab-pane {
@@ -176,14 +176,14 @@ body.kibela {
       }
     }
     .page-editor-preview-container {
-      background: white !important;
       padding-right: 0px !important;
       padding-left: 2em;
+      background: white !important;
     }
     .page-editor-footer {
-      margin: 0;
-      padding: 13px;
       min-height: 60px;
+      padding: 13px;
+      margin: 0;
     }
   }
 }

src/client/styles/scss/_login.scss

@@ -2,10 +2,8 @@
   $gray-dark-for-login: darken(white, 30%);
 
   // background color
-  background:
-    linear-gradient(45deg, darken($inverse, 30%)  0%, hsla(340, 100%, 55%, 0) 70%),
-    linear-gradient(135deg, $growi-green 10%, hsla(225, 95%, 50%, 0) 70%),
-    linear-gradient(225deg, $growi-blue  10%, hsla(140, 90%, 50%, 0) 80%),
+  background: linear-gradient(45deg, darken($inverse, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
+    linear-gradient(135deg, $growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, $growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
     linear-gradient(315deg, darken($inverse, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
   #page-wrapper {
     background: none;
@@ -16,9 +14,9 @@
     height: 100vh;
 
     #page-wrapper {
-      height: 100vh;
       display: flex;
       align-items: center;
+      height: 100vh;
 
       .main {
         width: 100vw;
@@ -29,45 +27,43 @@
         }
 
         .login-header {
-          padding-top: 30px;
-          padding-bottom: 10px;
-
           display: flex;
           flex-direction: column;
           align-items: center;
+          padding-top: 30px;
+          padding-bottom: 10px;
         }
 
         .login-form-errors {
           width: 100%;
 
           .alert {
+            padding: 5px;
             margin-top: 10px;
             margin-bottom: 0;
-            padding: 5px;
 
             ul {
               padding-left: 1.5em;
             }
           }
         }
-
-      }  // .main
-    }  // #page-wrapper
+      } // .main
+    } // #page-wrapper
   } // #wrapper
 
   // styles
   .login-header {
     background-color: rgba(white, 0.5);
     .logo {
-      .group1, .group2 {
+      .group1,
+      .group2 {
         fill: rgba(black, 0.5);
       }
-
     }
     h1 {
-      color: rgba(black, 0.5);
       font-size: 22px;
       line-height: 1em;
+      color: rgba(black, 0.5);
     }
   }
   .login-dialog {
@@ -78,11 +74,11 @@
     margin-bottom: 10px;
 
     .input-group-addon {
+      color: $gray-dark-for-login;
       text-align: center;
+      background-color: rgba(black, 0.4);
       border: none;
       border-radius: 0;
-      color: $gray-dark-for-login;
-      background-color: rgba(black, 0.4);
     }
     .form-control {
       color: white;
@@ -107,7 +103,7 @@
 
     form {
       flex: 1;
-      @media(min-width: 350px) {
+      @media (min-width: 350px) {
         flex: 0.49;
       }
     }
@@ -117,14 +113,17 @@
   }
 
   // button style
-  .btn-login.fcbtn, .btn-register.fcbtn, .btn-login-oauth.fcbtn, .btn-collapse-oauth {
-    border: none;
+  .btn-login.fcbtn,
+  .btn-register.fcbtn,
+  .btn-login-oauth.fcbtn,
+  .btn-collapse-oauth {
     color: white;
     background-color: rgba(lighten(black, 20%), 0.4);
+    border: none;
 
     .btn-label {
-      margin: -8px 20px -8px -20px;
       padding: 9px 15px;
+      margin: -8px 20px -8px -20px;
     }
     &:focus {
       border: none;
@@ -200,15 +199,18 @@
 
   // footer link text
   .link-growi-org {
-    color: rgba(black, 0.4);
-    font-weight: bold;
     font-size: smaller;
+    font-weight: bold;
+    color: rgba(black, 0.4);
 
-    &, .growi, .org {
+    &,
+    .growi,
+    .org {
       transition: color 0.8s;
     }
 
-    &:hover, &.focus {
+    &:hover,
+    &.focus {
       color: black;
       .growi {
         color: darken($growi-green, 20%);
@@ -226,11 +228,10 @@
   }
 }
 
-
 .login-page {
   // layout
   .main .row {
-    @media(min-width: 350px) {
+    @media (min-width: 350px) {
       .col-sm-offset-4 {
         margin-left: calc(50% - 160px);
       }
@@ -241,8 +242,8 @@
   }
   .link-growi-org {
     position: absolute;
-    z-index: 2;
     bottom: 9px;
+    z-index: 2;
   }
 
   // flip animation
@@ -257,7 +258,8 @@
       }
     }
 
-    .front, .back {
+    .front,
+    .back {
       transition: 0.4s;
       backface-visibility: hidden;
       transform-style: preserve-3d;
@@ -271,8 +273,8 @@
     .back {
       position: absolute;
       top: 0;
-      left: 15px;
       right: 15px;
+      left: 15px;
     }
     .back,
     &.to-flip .front {
@@ -289,14 +291,13 @@
       transform: rotateY(0deg);
     }
   }
-
 }
 
-
-.installer, .invited, .nologin.error {
-  // layout
+.installer,
+.invited,
+.nologin.error {
   .main .row {
-    @media(min-width: 510px) {
+    @media (min-width: 510px) {
       .col-sm-offset-4 {
         margin-left: calc(50% - 240px);
       }

src/client/styles/scss/_mixins.scss

@@ -1,61 +1,65 @@
 @mixin variable-font-size($basesize) {
   font-size: $basesize;
-  @media(max-width: $screen-lg) {
+  @media (max-width: $screen-lg) {
     font-size: #{$basesize * 0.9};
   }
-  @media(max-width: $screen-md) {
+  @media (max-width: $screen-md) {
     font-size: #{$basesize * 0.8};
   }
-  @media(max-width: $screen-sm) {
+  @media (max-width: $screen-sm) {
     font-size: #{$basesize * 0.7};
   }
-  @media(max-width: $screen-xs) {
+  @media (max-width: $screen-xs) {
     font-size: #{$basesize * 0.6};
   }
 }
 
 @mixin expand-editor($header-plus-footer) {
-  $header-plus-footer: $header-plus-footer + 2px;   // add .main padding-top
-  $editor-margin: $header-plus-footer
-                  + 25px        // add .btn-open-dropzone height
-                  + 30px;       // add .navbar-editor height
+  $header-plus-footer: $header-plus-footer + 2px; // add .main padding-top
+
+  $editor-margin: $header-plus-footer //
+    + 25px //   add .btn-open-dropzone height
+    + 30px; //  add .navbar-editor height
 
   .main {
     width: 100%;
     height: 100vh;
-    margin-top: 0px !important;
     padding-top: 2px;
-    padding-left: 0;
     padding-right: 0;
+    padding-left: 0;
+    margin-top: 0px !important;
 
     &,
     .content-main,
     .tab-content {
       display: flex;
-      flex-direction: column;
       flex: 1;
+      flex-direction: column;
 
-      .tab-pane#edit, .tab-pane#hackmd {
-        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+      .tab-pane#edit,
+      .tab-pane#hackmd {
         height: calc(100vh - #{$header-plus-footer});
+        min-height: calc(100vh - #{$header-plus-footer}); // for IE11
       }
 
       #page-editor {
         // right(preview)
         &,
-        &>.row,
+        & > .row,
         .page-editor-preview-container,
         .page-editor-preview-body {
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
           height: calc(100vh - #{$header-plus-footer});
+          min-height: calc(100vh - #{$header-plus-footer}); // for IE11
         }
 
         // left(editor)
         .page-editor-editor-container {
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
           height: calc(100vh - #{$header-plus-footer});
+          min-height: calc(100vh - #{$header-plus-footer}); // for IE11
 
-          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
+          .react-codemirror2,
+          .CodeMirror,
+          .CodeMirror-scroll,
           .textarea-editor {
             height: calc(100vh - #{$editor-margin});
           }
@@ -68,10 +72,11 @@
 
       #page-editor-with-hackmd {
         &,
-        .hackmd-preinit, #iframe-hackmd-container > iframe {
+        .hackmd-preinit,
+        #iframe-hackmd-container > iframe {
           width: 100vw;
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
           height: calc(100vh - #{$header-plus-footer});
+          min-height: calc(100vh - #{$header-plus-footer}); // for IE11
         }
       }
     }

src/client/styles/scss/_navbar_kibela.scss

@@ -1,84 +1,84 @@
- /* navbar */
+/* navbar */
 
- .kibela {
-   .navbar-header {
-     display: inline-block;
-     overflow: visible;
-     min-width: 320px;
-     background: white;
-     color: #3c4a60;
-     border-bottom: solid 1px #E6E9EC;
-     height: 60px;
-     padding: 5px 8px 5px 8px;
-     .navbar-right {
-       a {
-         margin-right: 1.5em;
-       }
-     }
-     .top-left-part {
-       background: white;
-     }
-     .navbar-top-links>li>a {
-       border-radius: 0.35em;
-       height: 40px !important;
-       color: #3c4a60;
-     }
-     .create-page {
-       background: #5584E1;
-       border-radius: 0.35em;
-       width: 8em;
-       text-align: center;
-       &:hover {
-         background: rgb(124, 168, 255);
-       }
-       span,
-       i {
-         color: white;
-       }
-     }
-     .dropdown {
-       a {
-         .user-name {
-           margin-right: 0.5em;
-           margin-left: 0.5em;
-         }
-       }
-       .img-circle {
-         width: 36px;
-         height: 36px;
-       }
-     }
-     @media screen and (max-width: 790px) {
-       .search-top,
-       .navbar-toggle {
-         display: none !important;
-       }
-       @media screen and (max-width: 540px) {
-         .user-name {
-           display: none;
-         }
-         .navbar-right {
-           width: 80%;
-           li {
-             text-align: center;
-             width: 25%;
-             a {
-               margin-right: 0px;
-             }
-             .create-page {
-               width: 100%;
-             }
-             .dropdown {
-               text-align: center;
-               .dropdown-toggle {
-                 padding-left: 0em;
-                 margin-right: 0px;
-                 width: 100%;
-               }
-             }
-           }
-         }
-       }
-     }
-   }
- }
+.kibela {
+  .navbar-header {
+    display: inline-block;
+    min-width: 320px;
+    height: 60px;
+    padding: 5px 8px 5px 8px;
+    overflow: visible;
+    color: #3c4a60;
+    background: white;
+    border-bottom: solid 1px #e6e9ec;
+    .navbar-right {
+      a {
+        margin-right: 1.5em;
+      }
+    }
+    .top-left-part {
+      background: white;
+    }
+    .navbar-top-links > li > a {
+      height: 40px !important;
+      color: #3c4a60;
+      border-radius: 0.35em;
+    }
+    .create-page {
+      width: 8em;
+      text-align: center;
+      background: #5584e1;
+      border-radius: 0.35em;
+      &:hover {
+        background: rgb(124, 168, 255);
+      }
+      span,
+      i {
+        color: white;
+      }
+    }
+    .dropdown {
+      a {
+        .user-name {
+          margin-right: 0.5em;
+          margin-left: 0.5em;
+        }
+      }
+      .img-circle {
+        width: 36px;
+        height: 36px;
+      }
+    }
+    @media screen and (max-width: 790px) {
+      .search-top,
+      .navbar-toggle {
+        display: none !important;
+      }
+      @media screen and (max-width: 540px) {
+        .user-name {
+          display: none;
+        }
+        .navbar-right {
+          width: 80%;
+          li {
+            width: 25%;
+            text-align: center;
+            a {
+              margin-right: 0px;
+            }
+            .create-page {
+              width: 100%;
+            }
+            .dropdown {
+              text-align: center;
+              .dropdown-toggle {
+                width: 100%;
+                padding-left: 0em;
+                margin-right: 0px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/client/styles/scss/_notification.scss

@@ -3,7 +3,8 @@
   .input-group-addon {
     padding: 2px 8px;
     line-height: 1em;
-    img, input {
+    img,
+    input {
       vertical-align: middle;
     }
   }

src/client/styles/scss/_on-edit.scss

@@ -9,11 +9,10 @@ body:not(.on-edit) {
 }
 
 body.on-edit {
-
   // calculate margin
-  $header-plus-footer: 42px                     // .nav height
-                      + 1px                     // .page-editor-footer border-top
-                      + 40px !default;          // .page-editor-footer min-height
+  $header-plus-footer: 42px //  .nav height
+    + 1px //                    .page-editor-footer border-top
+    + 40px !default; //         .page-editor-footer min-height
 
   @include expand-editor($header-plus-footer);
 
@@ -21,7 +20,8 @@ body.on-edit {
   .main {
     > .row {
       margin: 0;
-      > .col-lg-10, > .col-md-9 {
+      > .col-lg-10,
+      > .col-md-9 {
         width: 100%;
         padding: 0;
       }
@@ -40,7 +40,9 @@ body.on-edit {
   .portal-form-button,
   .alert-info.alert-moved,
   .alert-info.alert-unlinked,
-  .btn-like, .btn-bookmark, .btn-edit,
+  .btn-like,
+  .btn-bookmark,
+  .btn-edit,
   .authors,
   footer {
     display: none !important;
@@ -67,7 +69,8 @@ body.on-edit {
 
   // hide hackmd related alert
   &.hackmd #page-status-alert {
-    .alert-hackmd-someone-editing, .alert-hackmd-draft-exists {
+    .alert-hackmd-someone-editing,
+    .alert-hackmd-draft-exists {
       display: none;
     }
   }
@@ -80,23 +83,23 @@ body.on-edit {
   }
 
   .row.bg-title {
-    $left-margin: $nav-main-left-tab-width * 2 + 25px;  // width of .nav-main-left-tab x 2 + some margin
-    $right-margin: 128px + 94px + 46px;                 // width of all of nav-main-right-tab
+    $left-margin: $nav-main-left-tab-width * 2 + 25px; // width of .nav-main-left-tab x 2 + some margin
+    $right-margin: 128px + 94px + 46px; //                width of all of nav-main-right-tab
 
     position: absolute;
-    z-index: 1;
     left: $left-margin;
+    z-index: 1;
     width: calc(100% - #{$left-margin} - #{$right-margin});
-    pointer-events: none;                               // disable pointer-events because it becomes an obstacle
+    pointer-events: none; // disable pointer-events because it becomes an obstacle
+
+    background: none;
 
     > .header-container {
-      pointer-events: initial;                          // enable pointer-events
-      padding: 0;   // for crowi layout
-      width: 100%;  // for crowi layout
+      width: 100%; //   for crowi layout
+      padding: 0; //    for crowi layout
+      pointer-events: initial; // enable pointer-events
     }
 
-    background: none;
-
     .header-wrap {
       overflow-x: hidden;
     }
@@ -121,9 +124,9 @@ body.on-edit {
 
   .page-editor-footer {
     width: 100%;
-    margin: 0;
-    padding: 3px;
     min-height: 40px;
+    padding: 3px;
+    margin: 0;
     border-top: solid 1px transparent;
 
     .grant-selector {
@@ -138,11 +141,11 @@ body.on-edit {
 
   #page-status-alert .myadmin-alert {
     position: absolute;
-    opacity: 0.8;
-    bottom: 42px;
     right: 3px;
+    bottom: 42px;
     left: 3px;
     box-shadow: 2px 2px 5px #666;
+    opacity: 0.8;
 
     &:hover {
       opacity: 1;
@@ -150,7 +153,6 @@ body.on-edit {
   }
 
   &.builtin-editor {
-
     /*****************
     * Editor styles
     *****************/
@@ -173,23 +175,21 @@ body.on-edit {
       // add icon on cursor
       .autoformat-markdown-table-activated .CodeMirror-cursor {
         &:after {
-          display: block;
-          content: ' ';
-          background-image: url(/images/icons/editor/table.svg);
-
           position: relative;
-          width: 14px;
-          height: 14px;
           top: -16px;
           left: 5px;
+          display: block;
+          width: 14px;
+          height: 14px;
+          content: ' ';
+          background-image: url(/images/icons/editor/table.svg);
         }
       }
 
       .textarea-editor {
-        border: none;
         font-family: monospace;
+        border: none;
       }
-
     }
     .page-editor-preview-container {
     }
@@ -213,8 +213,8 @@ body.on-edit {
         }
         .dropdown-menu > li > a {
           display: flex;
-          justify-content: space-between;
           align-items: center;
+          justify-content: space-between;
 
           .menuitem-label {
             flex: 1;
@@ -223,7 +223,8 @@ body.on-edit {
         }
       }
 
-      @media (max-width: $screen-xs-max) { // {{{ less than smartphone size
+      // less than smartphone size
+      @media (max-width: $screen-xs-max) {
         display: none;
       }
     }
@@ -241,13 +242,13 @@ body.on-edit {
     }
   } // .builtin-editor .tab-pane#edit
 
-
   &.hackmd {
     #page-editor-options-selector {
       display: none;
     }
 
-    .hackmd-preinit, #iframe-hackmd-container > iframe {
+    .hackmd-preinit,
+    #iframe-hackmd-container > iframe {
       border: none;
     }
 
@@ -256,28 +257,26 @@ body.on-edit {
       color: $muted;
     }
 
-    .hackmd-start-button-container, .hackmd-resume-button-container {
+    .hackmd-start-button-container,
+    .hackmd-resume-button-container {
       .btn-lg .btn-label {
-        padding-top: 6px;     // for SplitButton
-        padding-bottom: 6px;  // for SplitButton
+        padding-top: 6px; // for SplitButton
+        padding-bottom: 6px; // for SplitButton
       }
     }
     .hackmd-resume-button-container {
       .dropdown-menu {
-        left: unset;
         right: 0;
+        left: unset;
       }
     }
     .hackmd-discard-button {
-      vertical-align: unset;
       text-decoration: underline;
+      vertical-align: unset;
     }
-
   }
-
 }
 
-
 /*
  * for creating portal
  */
@@ -309,12 +308,11 @@ body.on-edit {
   // active line
   .CodeMirror-hint-active.crowi-emoji-autocomplete {
     .img-container {
-      font-size: 15px;  // adjust to .wiki
       padding-top: 0.3em;
       padding-bottom: 0.3em;
+      font-size: 15px; // adjust to .wiki
     }
   }
-
 }
 
 // overwrite .CodeMirror-placeholder

src/client/styles/scss/_override-rbt.scss

@@ -3,8 +3,8 @@
 .rbt-input.form-control {
   // focus
   &.focus {
-    box-shadow: none;
     border-color: inherit;
+    box-shadow: none;
   }
 }
 // hide loading icon

src/client/styles/scss/_page.scss

@@ -1,5 +1,5 @@
 // import diff2html styles
-@import "~diff2html/dist/diff2html.css";
+@import '~diff2html/dist/diff2html.css';
 
 .main-container {
   // padding controll of .header-wrap and .content-main are moved to _layout and _form
@@ -13,25 +13,30 @@
       margin-right: auto;
     }
 
-    .btn-copy, .btn-copy-link, .btn-edit {
+    .btn-copy,
+    .btn-copy-link,
+    .btn-edit {
       @extend .text-muted;
-      opacity: 0.3;
       border: none;
+      opacity: 0.3;
       &:not(:hover) {
         background-color: transparent;
       }
     }
     // change button opacity
     &:hover {
-      .btn.btn-copy, .btn-copy-link, .btn.btn-edit {
+      .btn.btn-copy,
+      .btn-copy-link,
+      .btn.btn-edit {
         opacity: unset;
       }
     }
 
-    .btn-like, .btn-bookmark {
-      border: none;
+    .btn-like,
+    .btn-bookmark {
       font-size: 1.2em;
       line-height: 0.8em;
+      border: none;
       &:not(:hover):not(.active) {
         background-color: transparent;
       }
@@ -48,15 +53,15 @@
     }
 
     .url-line {
-      color: #999;
       font-size: 1rem;
+      color: #999;
     }
 
     h1#revision-path {
       margin-top: 0;
       margin-bottom: 0;
       .d-flex {
-        flex-wrap: wrap;  // for long page path
+        flex-wrap: wrap; // for long page path
       }
 
       // crowi layout only
@@ -67,12 +72,14 @@
           color: inherit;
         }
       }
-
     }
   }
 
   // alert component settings
-  .alert-trash, .alert-moved, .alert-unlinked, .alert-grant {
+  .alert-trash,
+  .alert-moved,
+  .alert-unlinked,
+  .alert-grant {
     padding: 10px 15px;
   }
 
@@ -82,8 +89,7 @@
   }
 }
 
-.main-container .main .content-main .revision-history { // {{{
-
+.main-container .main .content-main .revision-history {
   .revision-history-list {
     .revision-history-outer {
       // add border-top except of first element
@@ -103,8 +109,8 @@
         }
 
         .caret {
-          transform: rotate(-90deg);
           transition: 0.4s;
+          transform: rotate(-90deg);
 
           &.caret-opened {
             transform: rotate(0deg);
@@ -142,9 +148,7 @@
   .d2h-diff-tbody {
     background-color: white;
   }
-
-} // }}}
-
+}
 
 /**
  * for table with handsontable modal button
@@ -153,16 +157,16 @@
   position: relative;
 
   .handsontable-modal-trigger {
-    opacity: 0;
     position: absolute;
     top: 11px;
     right: 10px;
     padding: 0;
-    border: none;
-    background-color: transparent;
     font-size: 16px;
     line-height: 1;
     vertical-align: bottom;
+    background-color: transparent;
+    border: none;
+    opacity: 0;
   }
 
   .page-mobile & .handsontable-modal-trigger {
@@ -181,15 +185,15 @@
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 9999;
   width: 100%;
   height: 0;
-  background: rgba(0, 0, 0, .5);
-  z-index: 9999;
+  background: rgba(0, 0, 0, 0.5);
   opacity: 0;
-  transition: opacity .3s ease-out;
+  transition: opacity 0.3s ease-out;
 
   & > * {
-    box-shadow: 0 0 20px rgba(0, 0, 0, .8);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
   }
 }
 .overlay-on {
@@ -198,8 +202,8 @@
   }
 
   .fullscreen-layer {
-    opacity: 1;
     height: 100%;
+    opacity: 1;
   }
 }
 

src/client/styles/scss/_page_growi.scss

@@ -1,17 +1,16 @@
 .growi.main-container {
   header {
-
     div.title-logo-container {
-      display: none;  // hide in default
+      display: none; // hide in default
 
       a {
-        width: 32px;
-        height: 32px;
 
         // centering
         display: flex;
         align-items: center;
         justify-content: center;
+        width: 32px;
+        height: 32px;
 
         img {
           width: 16px;
@@ -24,8 +23,8 @@
       margin: 0;
 
       li {
-        list-style: none;
         font-size: 12px;
+        list-style: none;
       }
 
       .picture {
@@ -34,7 +33,6 @@
         border: 1px solid #ccc;
       }
     }
-
   }
 
   /*
@@ -44,8 +42,8 @@
     // show logo link
     div.title-logo-container {
       display: unset;
-      margin-left: -12px;
       margin-right: 6px;
+      margin-left: -12px;
     }
     // hide authors in affix
     .authors {

src/client/styles/scss/_page_list.scss

@@ -1,13 +1,12 @@
-
 .page-list {
   .page-list-container {
-    line-height: 1.6em;
     font-size: 15px;
+    line-height: 1.6em;
   }
 
   .page-list-ul {
-    margin: 0;
     padding-left: 0;
+    margin: 0;
 
     > li {
       margin: 0;
@@ -25,10 +24,10 @@
       }
 
       > span.page-list-meta {
-        font-size: .9em;
+        font-size: 0.9em;
 
-        >span {
-          margin-right: .3rem;
+        > span {
+          margin-right: 0.3rem;
         }
 
         i {
@@ -47,17 +46,16 @@
       padding-left: 0;
     }
   }
-
 }
 
 .popular-page-high {
-  color: #e80000;
   font-size: 1.1em;
   font-weight: bold;
+  color: #e80000;
 }
 .popular-page-mid {
-  color: #e47800;
   font-weight: bold;
+  color: #e47800;
 }
 .popular-page-low {
   color: #ab7c7c;

src/client/styles/scss/_search.scss

@@ -1,32 +1,32 @@
 // import react-bootstrap-typeahead
-@import "~react-bootstrap-typeahead/css/Typeahead";
+@import '~react-bootstrap-typeahead/css/Typeahead';
 .search-listpage-icon {
   font-size: 16px;
   color: #999;
 }
 
 .search-listpage-clear {
-  display: none;
   position: absolute;
   right: 8px;
-  font-size: 0.6em;
+  display: none;
   width: 22px;
   height: 22px;
-  color: #ccc;
   padding: 8px;
+  font-size: 0.6em;
+  color: #ccc;
 }
 
 .search-typeahead {
   position: relative;
   .search-clear {
     position: absolute;
-    z-index: 3;
     top: 4px;
     right: 4px;
+    z-index: 3;
     width: 24px;
     height: 24px;
-    color: #999;
     padding: 0;
+    color: #999;
   }
   .rbt-menu {
     margin-top: 3px;
@@ -38,19 +38,19 @@
         color: inherit;
       }
       .page-list-meta {
-        font-size: .9em;
+        font-size: 0.9em;
         color: #999;
-        >span {
-          margin-right: .3rem;
+        > span {
+          margin-right: 0.3rem;
         }
       }
     }
   }
 }
 
-
 // top and sidebar input styles
-.search-top, .search-sidebar {
+.search-top,
+.search-sidebar {
   .search-clear {
     top: 3px;
     right: 26px;
@@ -59,19 +59,19 @@
   .btn-group-dropdown-scope .dropdown-toggle {
     min-width: 95px;
     height: 30px;
-    border-top-left-radius: 40px;
-    border-bottom-left-radius: 40px;
     padding-top: 4px;
-    padding-bottom: 4px;
     padding-right: 4px;
+    padding-bottom: 4px;
+    border-top-left-radius: 40px;
+    border-bottom-left-radius: 40px;
   }
   // using react-bootstrap-typeahead
   // see: https://github.com/ericgio/react-bootstrap-typeahead
   .rbt-input.form-control {
+    height: 30px;
     border: none;
     border-top-right-radius: 40px;
     border-bottom-right-radius: 40px;
-    height: 30px;
 
     .rbt-input-wrapper {
       margin-left: 8px;
@@ -103,7 +103,10 @@
   }
 }
 .search-sidebar {
-  .search-form, .form-group, .rbt-input.form-control, .input-group {
+  .search-form,
+  .form-group,
+  .rbt-input.form-control,
+  .input-group {
     width: 100%;
   }
   .btn-group-submit-search {
@@ -113,26 +116,28 @@
 
 @mixin search-typeahead-rbtmenu-mt($margin-top) {
   .search-typeahead .rbt-menu {
-    margin-top: $margin-top;    // DIRTY HACK
-                                //   note: 'transform: translate3d(0px, XXpx, 0px)' calculation has failed
-                                //         since upgrade react-bootstrap-typeahead to v3.3.2 -- 2019.02.05 Yuki Takei
+    margin-top: $margin-top; // DIRTY HACK
+    //                            note: 'transform: translate3d(0px, XXpx, 0px)' calculation has failed
+    //                                  since upgrade react-bootstrap-typeahead to v3.3.2 -- 2019.02.05 Yuki Takei
   }
 }
-#search-top, #renamePage, #duplicatePage, .search-page-input {
+#search-top,
+#renamePage,
+#duplicatePage,
+.search-page-input {
   @include search-typeahead-rbtmenu-mt(36px);
 }
 
 .search-result {
-
   .search-result-list {
     nav {
       padding-right: 0;
       &.affix {
         top: 58px;
         width: 33%;
+        height: 100%;
         padding-right: 5px;
         padding-bottom: 50px;
-        height: 100%;
         overflow-y: scroll;
       }
       .nav {
@@ -161,9 +166,9 @@
     padding-bottom: 32px;
 
     .search-result-page {
+      padding-top: 48px;
       // adjust for anchor links by the height of fixed .search-page-input
       margin-top: -48px;
-      padding-top: 48px;
 
       > h2 {
         font-size: 20px;
@@ -174,22 +179,22 @@
       }
 
       .wiki {
-        border: solid 1px #ccc;
         padding: 16px;
-        border-radius: 3px;
         font-size: 13px;
+        border: solid 1px #ccc;
+        border-radius: 3px;
       }
     }
   }
 }
 
 .search-page-input {
-  padding: 10px 0;
   position: sticky;
   top: 0;
   z-index: 99;
-  .input-group-btn .btn{
-    padding: 0px 10px;
+  padding: 10px 0;
+  .input-group-btn .btn {
     height: 34px;
+    padding: 0px 10px;
   }
 }

src/client/styles/scss/_shortcuts.scss

@@ -1,10 +1,12 @@
 #shortcuts-modal {
-  @media (min-width: $screen-sm-min) { // {{{ more than tablet size
+  // more than tablet size
+  @media (min-width: $screen-sm-min) {
     .modal-dialog {
       width: 750px;
     }
   }
-  @media (max-width: $screen-xs-max) { // {{{ less than tablet size
+  // less than tablet size
+  @media (max-width: $screen-xs-max) {
     table {
       table-layout: fixed;
     }
@@ -26,18 +28,18 @@
   // see http://coliss.com/articles/build-websites/operation/css/css-apple-keyboard-style-by-nrjmadan.html
   .key {
     /*Box Properties*/
-    display:inline-block;
-    width:36px;
-    height:36px;
+    display: inline-block;
+    width: 36px;
+    height: 36px;
     margin: 0px 4px;
+    /*Text Properties*/
+    font: 18px/36px Helvetica, serif;
+    color: #666;
+    text-align: center;
+    text-transform: uppercase;
     background: #fff;
     border-radius: 4px;
     box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
-    /*Text Properties*/
-    font: 18px/36px Helvetica, serif ;
-    text-transform: uppercase;
-    text-align: center;
-    color: #666;
     /* SVG Properties*/
     polygon {
       fill: #666;
@@ -53,15 +55,14 @@
 
   .dl-horizontal {
     dt {
-      // width: 180px;
-      height: 41px;
       display: flex;
-      justify-content: flex-end;
       align-items: center;
+      justify-content: flex-end;
+      // width: 180px;
+      height: 41px;
     }
     // dd {
     //   margin-left: 190px;
     // }
   }
-
 }

src/client/styles/scss/_user.scss

@@ -1,6 +1,5 @@
 .main-container {
   .user-page-header {
-
     #revision-path {
       margin-bottom: 0;
     }
@@ -16,8 +15,8 @@
     }
 
     .picture {
-      height: 64px;
       width: 64px;
+      height: 64px;
     }
 
     .user-page-meta {
@@ -38,17 +37,17 @@
       }
     }
 
-    .btn-like, .btn-bookmark {
+    .btn-like,
+    .btn-bookmark {
       &.btn-lg {
-        font-size: 1.5em;
         padding: 8px;
+        font-size: 1.5em;
       }
     }
   }
 
   // affix
   .user-page-header.affix {
-
     .users-meta {
       margin-left: 15px;
     }
@@ -59,14 +58,13 @@
     }
 
     .picture {
-      height: 48px;
       width: 48px;
+      height: 48px;
     }
   }
 }
 
 .user-component {
-
   img.picture {
     margin-right: 4px;
   }

src/client/styles/scss/_user_growi.scss

@@ -1,5 +1,4 @@
 .growi.main-container .user-page {
-
   // affix
   .user-page-header.affix {
     #revision-path {

src/client/styles/scss/_variables.scss

@@ -1,2 +1,2 @@
 // override bootstrap
-$font-family-monospace-not-strictly: Monaco, Menlo, Consolas, "Courier New", MeiryoKe_Gothic, monospace;
+$font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;

src/client/styles/scss/_vendor.scss

@@ -1,9 +1,9 @@
 // import bootstrap
 $bootstrap-sass-asset-helper: true;
-@import "~bootstrap-sass/assets/stylesheets/bootstrap";
+@import '~bootstrap-sass/assets/stylesheets/bootstrap';
 
 // import bootstrap4 utility classes
-@import "../bootstrap4/bootstrap";
+@import '../bootstrap4/bootstrap';
 
 // import toastr styles
 @import '~toastr/build/toastr';

src/client/styles/scss/_wiki.scss

@@ -8,12 +8,17 @@ div.body {
 }
 
 .wiki {
-  line-height: 1.8em;
   font-size: 15px;
+  line-height: 1.8em;
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin-top: 1.6em;
-    margin-bottom: .8em;
+    margin-bottom: 0.8em;
 
     &:first-child {
       margin-top: 0;
@@ -21,8 +26,8 @@ div.body {
   }
 
   h1 {
-    margin-top: 2em;
     padding-bottom: 0.3em;
+    margin-top: 2em;
     font-size: 1.8em;
     line-height: 1.1em;
     border-bottom: solid 1px transparent;
@@ -30,8 +35,8 @@ div.body {
   h2 {
     padding-bottom: 0.5em;
     font-size: 1.4em;
-    line-height: 1.225;
     font-weight: bold;
+    line-height: 1.225;
     border-bottom: 1px solid transparent;
   }
   h3 {
@@ -48,19 +53,19 @@ div.body {
   }
 
   p {
-    font-weight: normal;
     margin: 15px 0;
+    font-weight: normal;
   }
   blockquote {
-    font-size: .9em;
-    margin: 0 0 30px 0;
     padding: 0 20px;
+    margin: 0 0 30px 0;
+    font-size: 0.9em;
     color: lighten($gray-dark, 35%);
   }
 
   img {
-    margin: 5px 0;
     max-width: 100%;
+    margin: 5px 0;
   }
 
   img.emojione {
@@ -70,7 +75,8 @@ div.body {
     box-shadow: none;
   }
 
-  ul, ol {
+  ul,
+  ol {
     padding-left: 30px;
     margin: 20px 0;
 
@@ -79,23 +85,24 @@ div.body {
       line-height: 1.8em;
     }
 
-    ul, ol {
+    ul,
+    ol {
       margin: 0;
     }
   }
 
   .task-list {
     .task-list-item {
-      list-style-type: none;
       margin: 0 0.2em 0.25em -1.6em;
+      list-style-type: none;
     }
     .task-list-item > .task-list {
       margin-left: 30px;
     }
     // use awesome-bootstrap-checkbox
-    .task-list-item .checkbox input[type="checkbox"] {
+    .task-list-item .checkbox input[type='checkbox'] {
       // layout
-      +label {
+      + label {
         padding-left: 0.3em;
         &:before {
           margin-top: 0.4em;
@@ -103,17 +110,19 @@ div.body {
       }
       // styles
       cursor: default;
-      +label {
+      + label {
         cursor: default;
         opacity: 1;
-        &:before, &:after {
+        &:before,
+        &:after {
           cursor: default;
         }
       }
     }
   }
 
-  p code {  // only inline code blocks
+  // only inline code blocks
+  p code {
     font-family: $font-family-monospace-not-strictly;
   }
 
@@ -150,12 +159,17 @@ div.body {
 
   $ratio: 0.95;
   &.comment {
-    line-height: 1.5em;
     font-size: 14px;
+    line-height: 1.5em;
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       margin-top: 1.6em * $ratio;
-      margin-bottom: .8em * $ratio;
+      margin-bottom: 0.8em * $ratio;
 
       &:first-child {
         margin-top: 15px;
@@ -163,8 +177,8 @@ div.body {
     }
 
     h1 {
-      margin-top: 2em * $ratio;
       padding-bottom: 0.3em * $ratio;
+      margin-top: 2em * $ratio;
       font-size: 1.8em * $ratio;
       line-height: 1.1em * $ratio;
     }
@@ -178,14 +192,15 @@ div.body {
     }
 
     blockquote {
-      font-size: .9em * $ratio;
+      font-size: 0.9em * $ratio;
     }
 
     img.emojione {
       margin-top: -0.3em * $ratio !important;
     }
 
-    ul, ol {
+    ul,
+    ol {
       padding-left: 15px;
       margin: 10px 0;
 
@@ -212,7 +227,8 @@ div.body {
   }
 }
 
-@media (max-width: $screen-sm-max) { // {{{ tablet and iphone size
+// tablet and iphone size
+@media (max-width: $screen-sm-max) {
   .main-container .main .wiki {
     img {
       max-width: 100%;

src/client/styles/scss/style-app.scss

@@ -51,7 +51,6 @@
   cursor: not-allowed;
 }
 
-
 /*
  * Helper Classes
  */
@@ -81,8 +80,8 @@
 
 // transplant from FontAwesome
 .icon-fw {
-  width: 1.4em;
   display: inline-block;
+  width: 1.4em;
   text-align: left;
 }
 

src/client/styles/scss/style-presentation.scss

@@ -1,8 +1,8 @@
 // import Growi variable
 @import 'variables';
 
-@import "~reveal.js/css/reveal.css";
-@import "~reveal.js/css/theme/black.css";
+@import '~reveal.js/css/reveal.css';
+@import '~reveal.js/css/theme/black.css';
 
 // hljs
 .reveal {
@@ -20,7 +20,12 @@
     padding: 0;
 
     &.only.present {
-      h1, h2, h3, h4, h5, h6 {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
         font-size: 2.5em;
       }
     }
@@ -44,14 +49,14 @@
     }
 
     ul {
-      margin-top: .2em;
-      margin-bottom: .1em;
+      margin-top: 0.2em;
+      margin-bottom: 0.1em;
       > li {
+        margin-bottom: 0.5em;
         line-height: 1.6;
-        margin-bottom: .5em;
 
         > ul > li {
-          font-size: .85em;
+          font-size: 0.85em;
         }
       }
     }
@@ -62,7 +67,10 @@
     h2:first-child {
       font-size: 1.8em;
     }
-    h3, h4, h5, h6 {
+    h3,
+    h4,
+    h5,
+    h6 {
       &:first-child {
         font-size: 1.5em;
       }
@@ -74,7 +82,9 @@
       margin-bottom: 1em;
 
       border-collapse: collapse;
-      tr, td, th {
+      tr,
+      td,
+      th {
         border-collapse: collapse;
       }
 
@@ -132,6 +142,5 @@
       }
     }
     // }}}
-
   }
 }

src/client/styles/scss/theme/_override-agileadmin.scss

@@ -18,7 +18,7 @@
   .logo .logo-text {
     display: none;
   }
-  @media(min-width:768px) {
+  @media (min-width: 768px) {
     .sidebar {
       display: none;
     }
@@ -41,9 +41,9 @@
 .logo {
   .logo-mark {
     svg {
-      padding: 12px;
       width: 50px;
       height: 50px;
+      padding: 12px;
     }
   }
   .logo-text {
@@ -67,7 +67,8 @@
  * Link
  */
 a {
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     text-decoration: underline;
   }
 }
@@ -82,28 +83,32 @@ a {
 
   &.alert-info {
     a:not(.btn) {
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: lighten($info, 40%);
       }
     }
   }
   &.alert-success {
     a:not(.btn) {
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: lighten($success, 40%);
       }
     }
   }
   &.alert-warning {
     a:not(.btn) {
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: lighten($warning, 30%);
       }
     }
   }
   &.alert-danger {
     a:not(.btn) {
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: lighten($danger, 30%);
       }
     }
@@ -137,7 +142,6 @@ button.btn.btn-link:hover {
   }
 }
 
-
 /*
  * Modal
  */
@@ -145,20 +149,20 @@ button.btn.btn-link:hover {
   border: none;
   // border-radius: 0;
 
-  .modal-header, .modal-footer {
+  .modal-header,
+  .modal-footer {
     padding: 10px 15px;
   }
 }
 
-
 /*
  * Wells
  */
 .well {
+  padding: 0.7em;
   border-radius: 3px;
-  padding: .7em;
   &.well-sm {
-    padding: .5em;
+    padding: 0.5em;
   }
 
   a {
@@ -166,7 +170,6 @@ button.btn.btn-link:hover {
   }
 }
 
-
 /*
  * Panel
  */
@@ -182,11 +185,9 @@ button.btn.btn-link:hover {
     padding: 7px 15px;
   }
 }
-.panel.panel-primary .panel-heading{
-
+.panel.panel-primary .panel-heading {
 }
 
-
 /*
  * Label
  */
@@ -194,7 +195,6 @@ button.btn.btn-link:hover {
   padding: 2px 7px;
 }
 
-
 /*
  * Wiki
  */