feat(Sidebar): minor fixes on the height of the total sidebar and imp…

…roved import of css vars
wfp · Feb 10, 2021 · a5e6565 · a5e6565
1 parent f57d968
commit a5e6565
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
@@ -21,6 +21,7 @@
 
 .sbdocs-preview {
   overflow: visible !important;
+  background: var(--ui-01) i !important;
   > div {
     > div {
       overflow: visible !important;

diff --git a/src/components/Item/Item.js b/src/components/Item/Item.js
@@ -38,9 +38,8 @@ export const Item = ({
       {image ? (
         <div className={`${prefix}--item__image`}>{image}</div>
       ) : noImage ? (
-        <div className={`${prefix}--item__image ${prefix}--item__image-empty`}>
-          Empty
-        </div>
+        <div
+          className={`${prefix}--item__image ${prefix}--item__image-empty`}></div>
       ) : null}
 
       <div className={`${prefix}--item__content`}>

diff --git a/src/components/Item/_item.scss b/src/components/Item/_item.scss
@@ -59,6 +59,11 @@
         background: var(--ui-02);
       }
     }
+    &--repeater {
+      cursor: pointer;
+      background: var(--ui-02);
+      margin-bottom: 1em;
+    }
     &--button {
       padding: 1em;
       &:hover {
@@ -149,7 +154,8 @@
   .#{$prefix}--item__image {
     svg,
     .svg-inline--fa,
-    img {
+    img,
+    video {
       margin: 0;
       display: block;
       width: 100%;

diff --git a/src/components/Sidebar/_sidebar.scss b/src/components/Sidebar/_sidebar.scss
@@ -60,7 +60,8 @@
       top: 0;
       background: var(--ui-01);
       width: 100%;
-      min-height: 100%;
+      height: 100%;
+      overflow: auto;
       transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
       z-index: 100;
     }

diff --git a/src/globals/scss/_theme-tokens.scss b/src/globals/scss/_theme-tokens.scss
@@ -22,9 +22,9 @@
   --text-01: #{$color__white};
   --text-02: #{$color__navy-gray-8};
   --text-03: #{$color__navy-gray-9};
-  --field-01: #{$color__navy-gray-2};
+  --field-01: #{$color__gray-80};
   --field-02: #{$color__navy-gray-2};
-  --field-border-01: #{$color__navy-gray-4};
+  --field-border-01: #{$color__gray-60};
   --focus-01: #{$color__navy-gray-1};
   --support-01: #{$color__red};
   --support-light-01: #{saturate(darken($color__red, 20), 40)}; //#{$color__red-60};
@@ -136,12 +136,12 @@
     @include darkTheme();
     background-color: var(--ui-01) !important;
   }
-}
 
-@media (prefers-color-scheme: dark) {
-  body {
-    &.wfp--theme-dark--auto {
-      @include darkTheme();
+  @media (prefers-color-scheme: dark) {
+    body {
+      &.wfp--theme-dark--auto {
+        @include darkTheme();
+      }
     }
   }
 }