Просмотр исходного кода

apply bootstrap to html[plain]

Yuki Takei 6 лет назад
Родитель
Сommit
1149af4470

+ 2 - 0
src/client/js/services/AppContainer.js

@@ -374,10 +374,12 @@ export default class AppContainer extends Container {
 
     // switch to dark mode
     if (isDarkMode) {
+      document.documentElement.removeAttribute('light');
       document.documentElement.setAttribute('dark', 'true');
     }
     // switch to light mode
     else {
+      document.documentElement.setAttribute('light', 'true');
       document.documentElement.removeAttribute('dark');
     }
   }

+ 13 - 5
src/client/styles/scss/_vendor.scss

@@ -1,12 +1,20 @@
-// import bootstrap
-@import '~bootstrap/scss/bootstrap';
+// import bootstrap configurations
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
+
+// import styles against to 'html[plain]' for GROWI theming
+html[plain] {
+  // import bootstrap
+  @import '~bootstrap/scss/bootstrap';
+  // import toastr styles
+  @import '~toastr/build/toastr';
+}
 
 // import react-bootstrap-typeahead
 @import '~react-bootstrap-typeahead/css/Typeahead';
 
-// import toastr styles
-@import '~toastr/build/toastr';
-
 // import CodeMirror styles
 @import '~codemirror/lib/codemirror.css';
 @import '~codemirror/theme/elegant.css';

+ 5 - 3
src/client/styles/scss/style-app.scss

@@ -8,8 +8,10 @@
 // vendor
 @import 'vendor';
 
-// override bootstrap
-@import 'override-bootstrap';
+// override bootstrap against to 'html[plain]' for GROWI theming
+html[plain] {
+  @import 'override-bootstrap';
+}
 
 // override react-bootstrap-typeahead styles
 @import 'override-rbt';
@@ -20,7 +22,7 @@
 @import 'atoms/spinners';
 @import 'atoms/custom_control';
 
-// crowi component
+// growi component
 @import 'admin';
 @import 'attachments';
 @import 'comment';

+ 5 - 1
src/client/styles/scss/theme/_apply-colors.scss

@@ -8,8 +8,12 @@ $body-color: $color-global;
 $link-color: $color-link;
 $link-hover-color: $color-link-hover;
 
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
+@import 'reboot-toastr-colors';
 
 // Link buttons
 .btn-link {
@@ -317,4 +321,4 @@ body.on-edit {
       }
     }
   }
-}
+}

+ 0 - 3
src/client/styles/scss/theme/_reboot-bootstrap-colors.scss

@@ -1,6 +1,3 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
 //
 //
 // Apply partially

+ 15 - 0
src/client/styles/scss/theme/_reboot-toastr-colors.scss

@@ -0,0 +1,15 @@
+.toast-success {
+  background-color: $success;
+}
+
+.toast-error {
+  background-color: $danger;
+}
+
+.toast-info {
+  background-color: $info;
+}
+
+.toast-warning {
+  background-color: $warning;
+}

+ 1 - 1
src/client/styles/scss/theme/default.scss

@@ -15,7 +15,7 @@
 
 //== Light Mode
 //
-html:not([dark]) {
+html[light] {
   $primary: #112744;
 
   // Background colors

+ 1 - 1
src/server/views/installer.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html plain>
 {% block html_head %}
 <head>
   <meta charset="utf-8">

+ 1 - 1
src/server/views/layout/layout.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html plain>
 {% block html_head %}
 <head>
   <meta charset="utf-8">