Fixed some typos and corrected grammar.

[bookstack] / resources / sass / _components.scss

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index aba79bac289e5d1f7f89da411b3f31da526279ad..4509c2b9a4b8a610e424eddfc54493d073b509a6 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -1,3 +1,4 @@
+

 // System wide notifications
 [notification] {
   position: fixed;
 // System wide notifications
 [notification] {
   position: fixed;


@@ -137,33 +138,49 @@
   }
 }
 
   }
 }
 

-.popup-footer button, .popup-header-close {
-  position: absolute;
-  top: 0;
-  right: 0;
+.popup-header button, .popup-footer button {

   margin: 0;
   margin: 0;

-  height: 40px;

   border-radius: 0;
   box-shadow: none;
   border-radius: 0;
   box-shadow: none;

-  &:active {
-    outline: 0;
+  color: #FFF;
+  padding: $-xs $-m;
+}
+
+.popup-header button:not(.popup-header-close) {
+  font-size: 0.8rem;
+}
+
+.popup-header button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.popup-footer {
+  justify-content: end;
+  background-color: var(--color-primary-light);
+  min-height: 41px;
+  button {
+    padding: 10px $-m;

   }
 }
   }
 }

+

 .popup-header-close {
 .popup-header-close {

-  background-color: transparent;

   border: 0;
   color: #FFF;
   font-size: 16px;
   border: 0;
   color: #FFF;
   font-size: 16px;

-  padding: 0 $-m;
+  cursor: pointer;
+  svg {
+    margin-right: 0;
+  }

 }
 
 .popup-header, .popup-footer {
 }
 
 .popup-header, .popup-footer {

-  display: block !important;
+  display: flex;

   position: relative;
   height: 40px;
   position: relative;
   height: 40px;

-  flex: none !important;
+  flex: 0;

   .popup-title {
     color: #FFF;
   .popup-title {
     color: #FFF;

+    margin-right: auto;

     padding: 8px $-m;
   }
   &.flex-container-row {
     padding: 8px $-m;
   }
   &.flex-container-row {


@@ -301,12 +318,6 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
 }
 
   }
 }
 

-.image-manager .corner-button {
-  margin: 0;
-  border-radius: 0;
-  padding: $-m;
-}
-

 // Dropzone
 /*
  * The MIT License
 // Dropzone
 /*
  * The MIT License


@@ -633,22 +644,29 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 
 .code-editor .CodeMirror {
 }
 
 .code-editor .CodeMirror {

-  height: 400px;
+  height: auto;
+  min-height: 50vh;
+  border-bottom: 0;

 }
 
 .code-editor .lang-options {
   overflow-y: scroll;
 }
 
 .code-editor .lang-options {
   overflow-y: scroll;

+  flex-basis: 200px;
+  flex-grow: 1;

 }
 
 .code-editor .lang-options button {
   display: block;
   padding: $-xs $-m;
 }
 
 .code-editor .lang-options button {
   display: block;
   padding: $-xs $-m;

-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid;
+  @include lightDark(color, #333, #AAA);
+  @include lightDark(border-bottom-color, #EEE, #000);
+  cursor: pointer;

   width: 100%;
   text-align: left;
   font-family: $mono;
   font-size: 0.7rem;
   width: 100%;
   text-align: left;
   font-family: $mono;
   font-size: 0.7rem;

-  &:hover {
+  &:hover, &.active {

     background-color: var(--color-primary-light);
     color: var(--color-primary);
   }
     background-color: var(--color-primary-light);
     color: var(--color-primary);
   }


@@ -659,32 +677,43 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   width: 100%;
   color: var(--color-primary);
   padding: $-xxs $-m;
   width: 100%;
   color: var(--color-primary);
   padding: $-xxs $-m;

+  margin-bottom: 0;

 }
 
 .code-editor-language-list {
 }
 
 .code-editor-language-list {

-  flex-basis: 200px;
-  border-right: 1px solid #DDD;
-  box-shadow: $bs-card;
+  position: relative;
+  width: 160px;
+  z-index: 2;
+  align-items: stretch;

 }
 
 .code-editor-language-list input {
   border-radius: 0;
   border: 0;
   border-bottom: 1px solid #DDD;
 }
 
 .code-editor-language-list input {
   border-radius: 0;
   border: 0;
   border-bottom: 1px solid #DDD;

+  padding: $-xs $-m;

 }
 
 .code-editor-main {
   flex: 1;
 }
 
 .code-editor-main {
   flex: 1;

-  height: 100%;
-  overflow-y: scroll;
+  min-width: 0;
+  .CodeMirror {
+    margin-bottom: 0;
+    z-index: 1;
+    max-width: 100%;
+    width: 100%;
+  }

 }
 
 }
 

-@include smaller-than($m) {
+@include smaller-than($s) {

   .code-editor .lang-options {
   .code-editor .lang-options {

-    max-width: 100%;
+    display: none;

   }
   }

-  .code-editor .CodeMirror {
-    height: 200px;
+  .code-editor-body-wrap {
+    flex-direction: column;
+  }
+  .code-editor-language-list, .code-editor-language-list input {
+    width: 100%;

   }
 }
 
   }
 }