maintain scss

packages/app/src/pages/_app.tsx

@@ -4,7 +4,7 @@ import { AppProps } from 'next/app';
 
 // import { appWithTranslation } from '~/i18n';
 
-import '~/styles/style-app.scss';
+import '~/styles/style-next.scss';
 import '~/styles/theme/default.scss';
 // import InterceptorManager from '~/service/interceptor-manager';
 

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

@@ -4,78 +4,78 @@
 @import 'mixins';
 @import 'override-bootstrap-variables';
 
-// // vendor
-// @import 'vendor';
-
-// // override bootstrap
-// @import 'override-bootstrap';
-
-// // override codemirror
-// @import 'override-codemirror';
-
-// // override react-bootstrap-typeahead styles
-// @import 'override-rbt';
-
-// // override simplebar-react styles
-// @import 'override-simplebar';
-
-// // atoms
-// @import 'atoms/buttons';
-// @import 'atoms/code';
-// @import 'atoms/nav';
-// @import 'atoms/pre';
-// @import 'atoms/spinners';
-// @import 'atoms/custom_control';
-
-// // molecules
-// @import 'molecules/copy-dropdown';
-// @import 'molecules/page-editor-mode-manager';
-// @import 'molecules/slack-notification';
-// @import 'molecules/duplicated-paths-table.scss';
-
-// // growi component
-// @import 'admin';
-// @import 'attachments';
-// @import 'comment';
-// @import 'comment_growi';
-// @import 'drawio';
-// @import 'create-page';
-// @import 'draft';
-// @import 'editor-attachment';
-// @import 'editor-navbar';
-// @import 'page-content-footer';
-// @import 'handsontable';
-// @import 'layout';
-// @import 'login';
-// @import 'me';
-// @import 'mirror_mode';
-// @import 'modal';
-// @import 'navbar';
-// @import 'old-ios';
-// @import 'on-edit';
-// @import 'page-duplicate-modal';
-// @import 'page_list';
-// @import 'page-accessories-control';
-// @import 'page-accessories-modal';
-// @import 'page-path';
-// @import 'page-tree';
-// @import 'page';
-// @import 'page-presentation';
-// @import 'page-history';
-// @import 'recent-changes';
-// @import 'search';
-// @import 'shortcuts';
-// @import 'sidebar';
-// @import 'sidebar-wiki';
-// @import 'subnav';
-// @import 'tag';
-// @import 'toc';
-// @import 'user';
-// @import 'staff_credit';
-// @import 'waves';
-// @import 'wiki';
-// @import 'sharelink';
-// @import 'linkedit-preview';
+// vendor
+@import 'vendor';
+
+// override bootstrap
+@import 'override-bootstrap';
+
+// override codemirror
+@import 'override-codemirror';
+
+// override react-bootstrap-typeahead styles
+@import 'override-rbt';
+
+// override simplebar-react styles
+@import 'override-simplebar';
+
+// atoms
+@import 'atoms/buttons';
+@import 'atoms/code';
+@import 'atoms/nav';
+@import 'atoms/pre';
+@import 'atoms/spinners';
+@import 'atoms/custom_control';
+
+// molecules
+@import 'molecules/copy-dropdown';
+@import 'molecules/page-editor-mode-manager';
+@import 'molecules/slack-notification';
+@import 'molecules/duplicated-paths-table.scss';
+
+// growi component
+@import 'admin';
+@import 'attachments';
+@import 'comment';
+@import 'comment_growi';
+@import 'drawio';
+@import 'create-page';
+@import 'draft';
+@import 'editor-attachment';
+@import 'editor-navbar';
+@import 'page-content-footer';
+@import 'handsontable';
+@import 'layout';
+@import 'login';
+@import 'me';
+@import 'mirror_mode';
+@import 'modal';
+@import 'navbar';
+@import 'old-ios';
+@import 'on-edit';
+@import 'page-duplicate-modal';
+@import 'page_list';
+@import 'page-accessories-control';
+@import 'page-accessories-modal';
+@import 'page-path';
+@import 'page-tree';
+@import 'page';
+@import 'page-presentation';
+@import 'page-history';
+@import 'recent-changes';
+@import 'search';
+@import 'shortcuts';
+@import 'sidebar';
+@import 'sidebar-wiki';
+@import 'subnav';
+@import 'tag';
+@import 'toc';
+@import 'user';
+@import 'staff_credit';
+@import 'waves';
+@import 'wiki';
+@import 'sharelink';
+@import 'linkedit-preview';
 
 /*
  * for Guest User Mode

packages/app/src/styles/style-next.scss

@@ -0,0 +1,164 @@
+// import variables
+@import 'variables';
+
+@import 'mixins';
+@import 'override-bootstrap-variables';
+
+// vendor
+@import 'vendor';
+
+// override bootstrap
+@import 'override-bootstrap';
+
+// // override codemirror
+// @import 'override-codemirror';
+
+// // override react-bootstrap-typeahead styles
+// @import 'override-rbt';
+
+// // override simplebar-react styles
+// @import 'override-simplebar';
+
+// // atoms
+// @import 'atoms/buttons';
+// @import 'atoms/code';
+// @import 'atoms/nav';
+// @import 'atoms/pre';
+// @import 'atoms/spinners';
+// @import 'atoms/custom_control';
+
+// // molecules
+// @import 'molecules/copy-dropdown';
+// @import 'molecules/page-editor-mode-manager';
+// @import 'molecules/slack-notification';
+// @import 'molecules/duplicated-paths-table.scss';
+
+// // growi component
+// @import 'admin';
+// @import 'attachments';
+// @import 'comment';
+// @import 'comment_growi';
+// @import 'drawio';
+// @import 'create-page';
+// @import 'draft';
+// @import 'editor-attachment';
+// @import 'editor-navbar';
+// @import 'page-content-footer';
+// @import 'handsontable';
+// @import 'layout';
+// @import 'login';
+// @import 'me';
+// @import 'mirror_mode';
+// @import 'modal';
+// @import 'navbar';
+// @import 'old-ios';
+// @import 'on-edit';
+// @import 'page-duplicate-modal';
+// @import 'page_list';
+// @import 'page-accessories-control';
+// @import 'page-accessories-modal';
+// @import 'page-path';
+// @import 'page-tree';
+// @import 'page';
+// @import 'page-presentation';
+// @import 'page-history';
+// @import 'recent-changes';
+// @import 'search';
+// @import 'shortcuts';
+// @import 'sidebar';
+// @import 'sidebar-wiki';
+// @import 'subnav';
+// @import 'tag';
+// @import 'toc';
+// @import 'user';
+// @import 'staff_credit';
+// @import 'waves';
+// @import 'wiki';
+// @import 'sharelink';
+// @import 'linkedit-preview';
+
+/*
+ * for Guest User Mode
+ */
+// TODO: reactify and replace with `grw-not-available-for-guest`
+.dropdown-toggle.dropdown-toggle-disabled {
+  cursor: not-allowed;
+}
+
+// TODO: reactify and replace with `grw-not-available-for-guest`
+.edit-button.edit-button-disabled {
+  cursor: not-allowed;
+}
+
+.grw-not-available-for-guest {
+  cursor: not-allowed !important;
+}
+
+/*
+ * Helper Classes
+ */
+
+.mw-0 {
+  min-width: 0;
+}
+
+.flex-basis-0 {
+  flex-basis: 0;
+}
+
+.picture {
+  width: 24px;
+  height: 24px;
+
+  // size list
+  &.picture-lg {
+    width: 48px;
+    height: 48px;
+  }
+
+  &.picture-md {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.picture-sm {
+    width: 18px;
+    height: 18px;
+  }
+
+  &.picture-xs {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+// transplant from FontAwesome
+.icon-fw {
+  display: inline-block;
+  width: 1.4em;
+  text-align: left;
+}
+
+.cmd-key.mac {
+  &:after {
+    content: '⌘';
+  }
+}
+
+.cmd-key.win {
+  &:after {
+    content: 'Ctrl';
+  }
+}
+
+.grw-page-control-dropdown-item {
+  display: flex !important;
+  align-items: center;
+
+  .grw-page-control-dropdown-icon {
+    display: flex;
+    justify-content: center;
+    width: 25px;
+  }
+
+}