Merge pull request #2124 from hypothesis/cleanup-sidebar-root-css

Cleanup sidebar CSS

src/sidebar/components/focused-mode-header.js

@@ -49,7 +49,7 @@ export default function FocusedModeHeader() {
   })();
 
   return (
-    <div className="focused-mode-header sheet sheet--short">
+    <div className="focused-mode-header">
       {filterStatus}
       <button onClick={toggleFocusedMode} className="focused-mode-header__btn">
         {buttonText}

src/sidebar/components/hypothesis-app.js

@@ -151,7 +151,7 @@ function HypothesisApp({
 
   return (
     <div
-      className="app-content-wrapper js-thread-list-scroll-root"
+      className="hypothesis-app js-thread-list-scroll-root"
       style={backgroundStyle}
     >
       <TopBar
@@ -161,7 +161,7 @@ function HypothesisApp({
         onLogout={logout}
         isSidebar={isSidebar}
       />
-      <div className="content">
+      <div className="hypothesis-app__content">
         <ToastMessages />
         <HelpPanel auth={authState} />
         <ShareAnnotationsPanel />

src/styles/mixins/layout.scss

+@use "./responsive";
+
+@mixin sidebar-content {
+  margin-left: auto;
+  margin-right: auto;
+
+  @include responsive.respond-to(tablets desktops) {
+    margin: auto;
+    max-width: responsive.$break-tablet;
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}

src/styles/reset.scss

@@ -109,8 +109,3 @@ h6 {
   font-style: normal;
   vertical-align: baseline;
 }
-
-// Custom elements
-markdown {
-  display: block;
-}

src/styles/sidebar/common.scss

-@use "../variables" as var;
-
-//ELEMENT STYLES////////////////////////////////
-body {
-  position: relative;
-  background-color: var.$body-background;
-  color: var.$text-color;
-}
-
-p {
-  hyphens: auto;
-
-  & + p {
-    margin: 1em 0 0;
-  }
-}
-
-em {
-  font-style: italic;
-}
-
-html {
-  font-size: var.$base-font-size;
-  line-height: var.$base-line-height;
-}
-
-//MCRANDOM////////////////////////////////
-
-.small {
-  font-size: var.$body1-font-size;
-}
-
-//CLOSER////////////////////////////////
-.close {
-  cursor: pointer;
-  float: right;
-  opacity: 0.6;
-  &:active,
-  &:hover {
-    opacity: 1;
-  }
-}
-
-//FORM RELATED////////////////////////////////
-.form-vertical {
-  legend {
-    font-size: var.$body1-font-size;
-    line-height: var.$body1-line-height;
-    margin-top: 1.5em;
-    margin-bottom: 1.5em;
-  }
-
-  select,
-  textarea,
-  input,
-  button {
-    display: block;
-    // margin-top: .75em;
-  }
-}

src/styles/sidebar/components/focused-mode-header.scss

 @use "../../mixins/focus";
 @use "../../mixins/forms";
+@use "../../variables" as var;
 
 // A dark grey button used for the primary action
 // in a form
 .focused-mode-header {
   display: flex;
   align-items: center;
+  position: relative;
+
+  background-color: var.$body-background;
+  border-radius: 2px;
+  border: solid 1px var.$grey-3;
+  font-family: var.$sans-font-family;
+  font-weight: 300;
+  margin-bottom: 0.72em;
+  padding: 0.5em 1em;
 
   &__btn {
     @include forms.primary-action-btn;

src/styles/forms.scss → src/styles/sidebar/components/form-input.scss

-@use "mixins/forms";
-@use "variables" as var;
+@use "../../mixins/forms";
+@use "../../variables" as var;
 
 .form-input {
   @include forms.form-input;

src/styles/sidebar/components/hypothesis-app.scss

+@use "../../variables" as var;
+@use "../mixins/layout";
+@use "../mixins/responsive";
+
+.hypothesis-app {
+  $sidebar-h-padding: 9px;
+
+  background: var.$grey-2;
+  min-height: 100%;
+  height: 100%;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+  padding: $sidebar-h-padding;
+  padding-top: $sidebar-h-padding + var.$top-bar-height;
+
+  @include responsive.respond-to(tablets desktops) {
+    padding-bottom: 4rem;
+  }
+
+  &__content {
+    @include layout.sidebar-content;
+  }
+}
+
+// Disable scroll anchoring as it interferes with `ThreadList` and
+// `visible-threads` calculations and can cause a render loop
+.js-thread-list-scroll-root {
+  overflow-anchor: none;
+}

src/styles/sidebar/components/top-bar.scss

 @use "../../mixins/buttons";
+@use "../../mixins/layout";
 @use "../../variables" as var;
 
 .top-bar {
@@ -63,6 +64,8 @@
 }
 
 .top-bar__inner {
+  @include layout.sidebar-content;
+
   // the edges of the top-bar's contents should be aligned
   // with the edges of annotation cards displayed below
   $h-padding: 9px;

src/styles/sidebar/elements.scss

@@ -16,6 +16,14 @@ a:hover {
   color: var.$link-color-hover;
 }
 
+p {
+  hyphens: auto;
+
+  & + p {
+    margin: 1em 0 0;
+  }
+}
+
 ol {
   list-style-type: decimal;
   padding-left: 3em;

src/styles/sidebar/sidebar.scss

-// Variables and mixins
-// --------------------
 @use '../variables' as var with (
   $base-font-size: 12px,
   $base-line-height: 20px
 );
-@use '../mixins/buttons';
-@use '../mixins/focus';
-@use '../mixins/forms';
-@use '../mixins/icons';
-@use '../mixins/responsive';
 
 // Base styles
 // -----------
@@ -16,12 +9,6 @@
 @use '../util';
 @use './elements';
 
-// Misc. legacy :(
-// ---------------
-@use '../forms' as forms2;
-@use './styled-text';
-@use './common';
-
 // Components
 // ----------
 @use './components/annotation-action-bar';
@@ -39,9 +26,11 @@
 @use './components/button';
 @use './components/excerpt';
 @use './components/focused-mode-header';
+@use './components/form-input';
 @use './components/group-list';
 @use './components/group-list-item';
 @use './components/help-panel';
+@use './components/hypothesis-app';
 @use './components/logged-out-message';
 @use './components/markdown-editor';
 @use './components/markdown-view';
@@ -72,106 +61,14 @@
 
 // Top-level styles
 // ----------------
-html,
-body {
-  height: 100%;
-}
 
 body {
-  background: var.$grey-2;
-  font-family: var.$sans-font-family;
-  font-weight: normal;
-  -webkit-overflow-scrolling: touch;
-}
-
-hypothesis-app {
-  display: block;
   height: 100%;
-}
-
-.app-content-wrapper {
-  $sidebar-h-padding: 9px;
-
-  background: var.$grey-2;
-  min-height: 100%;
-  height: 100%;
-  overflow: scroll;
-  -webkit-overflow-scrolling: touch;
-  padding: $sidebar-h-padding;
-  padding-top: $sidebar-h-padding + var.$top-bar-height;
-
-  @include responsive.respond-to(tablets desktops) {
-    padding-bottom: 4rem;
-  }
-}
-
-.content {
-  margin-left: auto;
-  margin-right: auto;
-
-  @include responsive.respond-to(tablets desktops) {
-    margin: auto;
-    max-width: responsive.$break-tablet;
-    padding-left: 4rem;
-    padding-right: 4rem;
-  }
-}
-
-// Disable scroll anchoring as it interferes with `ThreadList` and
-// `visible-threads` calculations and can cause a render loop
-.js-thread-list-scroll-root {
-  overflow-anchor: none;
-}
-
-// Elements in root template (viewer.html)
-// ---------------------------------------
 
-.sheet {
-  border: solid 1px var.$grey-3;
-  border-radius: 2px;
-  font-family: var.$sans-font-family;
-  font-weight: 300;
-  margin-bottom: 0.72em;
-  padding: 1em;
-  position: relative;
   background-color: var.$body-background;
-
-  .close {
-    position: absolute;
-    right: 1em;
-    top: 1em;
-  }
-}
-
-.sheet--short {
-  padding: 0.5em 1em;
-}
-
-.sheet--is-theme-clean {
-  padding-left: 30px;
-  padding-bottom: 30px;
-  margin-bottom: 20px;
-  margin-left: 5px;
-  margin-right: 5px;
-}
-
-.annotation-unavailable-message {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var.$grey-3;
-  padding-top: 30px;
-  padding-bottom: 30px;
-  border-radius: 3px;
-  align-items: center;
-
-  &__label {
-    text-align: center;
-  }
-
-  &__icon {
-    background-image: url(../images/icons/lock.svg);
-    background-repeat: no-repeat;
-    width: 56px;
-    height: 48px;
-  }
+  color: var.$text-color;
+  font-family: var.$sans-font-family;
+  font-size: var.$base-font-size;
+  font-weight: normal;
+  line-height: var.$base-line-height;
 }