Flattening CSS

2018-10-15 23:59:48 +01:00
parent 51ee851811
commit d216fd4b0b
5 changed files with 102 additions and 112 deletions
--- a/src/components/Output/index.tsx
+++ b/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>
            )}
--- a/src/components/Output/style.scss
+++ b/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 {
-    @extend %fill;
-    --accent-color: var(--button-fg);
-
-    > pinch-zoom {
-      @extend %fill;
-      outline: none;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+  &.alt-background::before {
+    opacity: 0.6;
  }
 }

+.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;
-  right: 220px;
-  bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
  padding: 9px;
  overflow: hidden;
  flex-wrap: wrap;
  contain: content;

-  @media (max-width: 680px) {
-    top: 0;
-    bottom: auto;
-    left: 0;
-    right: 0;
+  @media (min-width: 680px) {
+    top: auto;
+    left: 220px;
+    right: 220px;
+    bottom: 0;
  }
+}

-  > * {
-    z-index: 2;
-  }
+.zoom-controls {
+  display: flex;

-  .group {
-    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) {
+  & :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;
 }
--- a/src/components/compress/style.scss
+++ b/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;
  }
 }
--- a/src/lib/icons.tsx
+++ b/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: IconProps) => (
+const Icon = (props: JSX.HTMLAttributes) => (
  <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>
--- a/src/lib/util.scss
+++ b/src/lib/util.scss
@@ -5,6 +5,7 @@
  width: 100%;
  height: 100%;
  box-sizing: border-box;
+  contain: strict;
 }

 .unbutton {