Scanning: Add media queries

 - Update css variables to conform to responsiveness specs at
   different breakpoints.

Spec: https://carbon.googleplex.com/cros-ux/pages/scanning/responsiveness

Screenshots:

 600px <= width < 768px: http://shortn/_jbKNxJrAMB
 768px <= width < 960px: http://shortn/_Jy9QYyvf63
 1280px: http://shortn/_ARoXo5FcD4


Bug: 1059779
Test: browser_tests --gtest_filter=ScanningAppBrowserTest.All
Change-Id: I30390bde40f0a2bb033f30e7b12b92aea8669239
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2514660Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Michael Checo <michaelcheco@google.com>
Cr-Commit-Position: refs/heads/master@{#824642}

chrome/test/data/webui/chromeos/scanning/scanning_app_test.js

@@ -335,8 +335,8 @@ export function scanningAppTest() {
       const panelContainer = scanningApp.$$('.panel-container');
       assertTrue(!!panelContainer);
 
-      const leftPanel = scanningApp.$$('.panel-container > #leftPanel');
-      const rightPanel = scanningApp.$$('.panel-container > #rightPanel');
+      const leftPanel = scanningApp.$$('.panel-container > .left-panel');
+      const rightPanel = scanningApp.$$('.panel-container > .right-panel');
 
       assertTrue(!!leftPanel);
       assertTrue(!!rightPanel);

chromeos/components/scanning/resources/scanning_app.html

@@ -52,9 +52,10 @@
     width: var(--container-width);
   }
 
-  .panel {
-    padding-inline: var(--panel-padding);
-    width: var(--panel-width);
+  .left-panel {
+    padding-inline-end: var(--left-panel-padding-end);
+    padding-inline-start: var(--left-panel-padding-start);
+    width: var(--left-panel-width);
   }
 
   .panel-container {
@@ -63,6 +64,12 @@
     margin-top: var(--panel-container-margin-top);
   }
 
+  .right-panel {
+    padding-inline-end: var(--right-panel-padding-end);
+    padding-inline-start: var(--right-panel-padding-start);
+    width: var(--right-panel-width);
+  }
+
   .scan-button-container {
     display: flex;
     justify-content: flex-end;
@@ -71,10 +78,10 @@
 </style>
 <div id="scanningContainer">
   <div class="panel-container">
-    <div id="leftPanel" class="panel">
+    <div class="left-panel">
       <scan-preview></scan-preview>
     </div>
-    <div id="rightPanel" class="panel">
+    <div class="right-panel">
       <h1 id="appTitle">[[i18n('appTitle')]]</h1>
       <scanner-select id="scannerSelect" scanners="[[scanners_]]" loaded="[[loaded_]]"
           settings-disabled="[[settingsDisabled_]]"

chromeos/components/scanning/resources/scanning_shared_css.html

@@ -6,18 +6,51 @@
 
 <template>
   <style include="cr-shared-style md-select">
-    /* TODO(michaelcheco): Add media queries that update css vars to match the
-     * values found in the spec. */
-    :host {
-      --container-width: 960px;
-      --panel-container-margin-bottom: 32px;
-      --panel-container-margin-top: 20px;
-      --panel-padding: 48px;
-      --panel-width: 384px;
-    }
-
     html {
       background-color: var(--cros-bg-color);
     }
+
+    /* TODO(michaelcheco): Update once responsiveness spec is finalized. */
+    @media (min-width:600px) and (max-width: 767px) {
+      :host {
+        --container-width: 767px;
+        --left-panel-padding-end: 32px;
+        --left-panel-padding-start: 32px;
+        --left-panel-width: 288px;
+        --panel-container-margin-bottom: 20px;
+        --panel-container-margin-top: 20px;
+        --right-panel-padding-end: 32px;
+        --right-panel-padding-start: 0px;
+        --right-panel-width: 384px;
+      }
+    }
+
+    @media (min-width:768px) and (max-width: 1279px) {
+      :host {
+        --container-width: 960px;
+        --left-panel-padding-end: 48px;
+        --left-panel-padding-start: 48px;
+        --left-panel-width: 384px;
+        --panel-container-margin-bottom: 32px;
+        --panel-container-margin-top: 20px;
+        --right-panel-padding-end: 48px;
+        --right-panel-padding-start: 48px;
+        --right-panel-width: 384px;
+      }
+    }
+
+    @media (min-width:1280px) {
+      :host {
+        --container-width: 1280px;
+        --left-panel-padding-end: 60px;
+        --left-panel-padding-start: 164px;
+        --left-panel-width: 416px;
+        --panel-container-margin-bottom: 64px;
+        --panel-container-margin-top: 64px;
+        --right-panel-padding-end: 164px;
+        --right-panel-padding-start: 60px;
+        --right-panel-width: 416px;
+      }
+    }
   </style>
 </template>