Flattening CSS

src/components/Output/index.tsx

@@ -188,6 +188,7 @@ export default class Output extends Component<Props, State> {
       <div class={`${style.output} ${altBackground ? style.altBackground : ''}`}>
         <two-up
           legacy-clip-compat
+          class={style.twoUp}
           orientation={orientation}
           // Event redirecting. See onRetargetableEvent.
           onTouchStartCapture={this.onRetargetableEvent}
@@ -198,6 +199,7 @@ export default class Output extends Component<Props, State> {
           onWheelCapture={this.onRetargetableEvent}
         >
           <pinch-zoom
+            class={style.pinchZoom}
             onChange={this.onPinchZoomLeftChange}
             ref={linkRef(this, 'pinchZoomLeft')}
           >
@@ -213,7 +215,7 @@ export default class Output extends Component<Props, State> {
               }}
             />
           </pinch-zoom>
-          <pinch-zoom ref={linkRef(this, 'pinchZoomRight')}>
+          <pinch-zoom class={style.pinchZoom} ref={linkRef(this, 'pinchZoomRight')}>
             <canvas
               class={style.outputCanvas}
               ref={linkRef(this, 'canvasRight')}
@@ -229,7 +231,7 @@ export default class Output extends Component<Props, State> {
         </two-up>
 
         <div class={style.controls}>
-          <div class={style.group}>
+          <div class={style.zoomControls}>
             <button class={style.button} onClick={this.zoomOut}>
               <RemoveIcon />
             </button>
@@ -247,7 +249,7 @@ export default class Output extends Component<Props, State> {
               />
             ) : (
               <span class={style.zoom} tabIndex={0} onFocus={this.editScale}>
-                <strong>{Math.round(scale * 100)}</strong>
+                <span class={style.zoomValue}>{Math.round(scale * 100)}</span>
                 %
               </span>
             )}

src/components/Output/style.scss

@@ -2,134 +2,68 @@
 Note: These styles are temporary. They will be replaced before going live.
 */
 
-%fill {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  contain: strict;
-}
-
 .output {
-  @extend %fill;
+  composes: abs-fill from '../../lib/util.scss';
 
-  &:before {
+  &::before {
     content: '';
-    @extend %fill;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     background: #000;
     opacity: 0;
     transition: opacity 500ms ease;
   }
-  &.altBackground:before {
-    opacity: .6;
-  }
 
-  > two-up {
+  &.alt-background::before {
-    @extend %fill;
+    opacity: 0.6;
-    --accent-color: var(--button-fg);
-
-    > pinch-zoom {
-      @extend %fill;
-      outline: none;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
   }
 }
 
+.two-up {
+  composes: abs-fill from '../../lib/util.scss';
+  --accent-color: var(--button-fg);
+}
+
+.pinch-zoom {
+  composes: abs-fill from '../../lib/util.scss';
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .controls {
   position: absolute;
   display: flex;
   justify-content: center;
-  left: 220px;
+  top: 0;
-  right: 220px;
+  left: 0;
-  bottom: 0;
+  right: 0;
   padding: 9px;
   overflow: hidden;
   flex-wrap: wrap;
   contain: content;
 
-  @media (max-width: 680px) {
+  @media (min-width: 680px) {
-    top: 0;
+    top: auto;
-    bottom: auto;
+    left: 220px;
-    left: 0;
+    right: 220px;
-    right: 0;
+    bottom: 0;
   }
+}
 
-  > * {
+.zoom-controls {
-    z-index: 2;
+  display: flex;
-  }
 
-  .group {
+  & :not(:first-child) {
-    display: flex;
-  }
-
-  .button,
-  .zoom {
-    display: flex;
-    align-items: center;
-    flex: 0;
-    box-sizing: border-box;
-    height: 48px;
-    padding: 0 16px;
-    margin: 4px;
-    background-color: #fff;
-    border: 1px solid rgba(0,0,0,0.2);
-    border-radius: 5px;
-    line-height: 1;
-    font-size: 110%;
-    white-space: nowrap;
-
-    &:focus {
-      box-shadow: 0 0 0 2px var(--button-fg);
-      outline: none;
-      z-index: 1;
-    }
-  }
-
-  .button {
-    text-transform: uppercase;
-    color: var(--button-fg);
-    cursor: pointer;
-    text-indent: 6px;
-  }
-
-  .button:hover {
-    background-color: #eee;
-  }
-
-  .zoom {
-    flex: 0 0 6em;
-    color: #625E80;
-    font: inherit;
-    cursor: text;
-    width: 6em;
-    text-align: center;
-    justify-content: center;
-
-    &:focus {
-      box-shadow: inset 0 1px 4px rgba(0,0,0,0.2), 0 0 0 2px var(--button-fg);
-    }
-
-    strong {
-      position: relative;
-      top: 1px;
-      margin: 0 3px 0 0;
-      color: #888;
-      font-weight: normal;
-      border-bottom: 1px dashed #999;
-    }
-  }
-
-  .group > :not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     margin-left: 0;
   }
-  .group > :not(:last-child) {
+  & :not(:last-child) {
     margin-right: 0;
     border-right-width: 0;
     border-top-right-radius: 0;
@@ -137,6 +71,61 @@ Note: These styles are temporary. They will be replaced before going live.
   }
 }
 
+.button,
+.zoom {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 48px;
+  padding: 0 16px;
+  margin: 4px;
+  background-color: #fff;
+  border: 1px solid rgba(0,0,0,0.2);
+  border-radius: 5px;
+  line-height: 1;
+  white-space: nowrap;
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--button-fg);
+    outline: none;
+    z-index: 1;
+  }
+}
+
+.button {
+  text-transform: uppercase;
+  color: var(--button-fg);
+  cursor: pointer;
+  text-indent: 6px;
+  font-size: 110%;
+
+  &:hover {
+    background-color: #eee;
+  }
+}
+
+.zoom {
+  flex: 0 0 6em;
+  color: #625E80;
+  cursor: text;
+  width: 6em;
+  font: inherit;
+  text-align: center;
+  justify-content: center;
+
+  &:focus {
+    box-shadow: inset 0 1px 4px rgba(0,0,0,0.2), 0 0 0 2px var(--button-fg);
+  }
+}
+
+.zoom-value {
+  position: relative;
+  top: 1px;
+  margin: 0 3px 0 0;
+  color: #888;
+  border-bottom: 1px dashed #999;
+}
+
 .output-canvas {
   flex-shrink: 0;
 }

src/components/compress/style.scss

@@ -4,7 +4,6 @@
 
 .option-pair {
   display: flex;
-  justify-content: flex-end;
   width: 100%;
   height: 100%;
 
@@ -15,5 +14,6 @@
 
   &.vertical {
     flex-direction: column;
+    justify-content: flex-end;
   }
 }

src/lib/icons.tsx

@@ -2,31 +2,29 @@ import { h } from 'preact';
 
 // tslint:disable:max-line-length variable-name
 
-export interface IconProps extends JSX.HTMLAttributes {}
+const Icon = (props: JSX.HTMLAttributes) => (
-
-const Icon = (props: IconProps) => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" {...props} />
 );
 
-export const DownloadIcon = (props: IconProps) => (
+export const DownloadIcon = (props: JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" />
   </Icon>
 );
 
-export const ToggleIcon = (props: IconProps) => (
+export const ToggleIcon = (props: JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
   </Icon>
 );
 
-export const AddIcon = (props: IconProps) => (
+export const AddIcon = (props: JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
   </Icon>
 );
 
-export const RemoveIcon = (props: IconProps) => (
+export const RemoveIcon = (props: JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M19 13H5v-2h14v2z"/>
   </Icon>

src/lib/util.scss

@@ -5,6 +5,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  contain: strict;
 }
 
 .unbutton {