MD Settings: Internet: Enable SIM unlock with no cellular network

chrome/browser/resources/settings/settings_vars_css.html

Index: chrome/browser/resources/settings/settings_vars_css.html
diff --git a/chrome/browser/resources/settings/settings_vars_css.html b/chrome/browser/resources/settings/settings_vars_css.html
index 476e35fd627cedf8dd8c35b0155ad4cfd6ac8531..dcd1226134518b4d1cc03c74699026781ba5007c 100644
--- a/chrome/browser/resources/settings/settings_vars_css.html
+++ b/chrome/browser/resources/settings/settings_vars_css.html
@@ -3,43 +3,42 @@
 
 <!-- Common css variables for Material Design settings. -->
 <style is="custom-style">
-  /* We keep our vars in sort order, though some vars must be defined prior to
-   * others. The --settings-* vars are defined explicitly prior to the --paper-*
-   * and --iron-* vars.
-   */
+  /* Vars are kept in sort order, but some must be defined prior to others. */
+
+  /* Single attribute and other simple settings vars are defined first. */
   :root {
     /* Some colors use non-MD colors.  These custom colors are specified by
      * UX design (bettes@). */
 
     --settings-actionable: var(--cr-actionable);
-
     --settings-background-color: rgb(241, 241, 241);
+    --settings-box-row-padding: 20px;
     --settings-disabled-opacity: .65;
     --settings-error-color: var(--paper-red-700);
+    --settings-nav-grey: rgb(90, 90, 90);
+    --settings-page-vertical-margin: 21px;
+    --settings-row-min-height: 44px;
+    --settings-row-two-line-min-height: 56px;
+    --settings-separator-line: var(--cr-separator-line);
+    --settings-title-bar-background-color: var(--google-blue-700);
+    --settings-title-bar-color: rgb(255, 255, 255);
+    --settings-title-search-color: rgb(192, 199, 205);
+    --settings-toggle-color: var(--google-blue-500);
+  }
 
+  /* Style blocks are defined after single attribute vars. */
+  :root {
     --settings-list-frame-padding: {
-      -webkit-padding-end: 20px;
+      -webkit-padding-end: var(--settings-box-row-padding);
       -webkit-padding-start: 56px;
       padding-bottom: 0;
       padding-top: 0;
     }
-
-    --settings-nav-grey: rgb(90, 90, 90);
-
-    --settings-page-vertical-margin: 21px;
-
-    --settings-row-min-height: 44px;
-    --settings-row-two-line-min-height: 56px;
     --settings-secondary: {
       color: var(--paper-grey-600);
       font-weight: 400;
       margin-top: 4px;
     };
-    --settings-separator-line: var(--cr-separator-line);
-
-    --settings-title-bar-background-color: var(--google-blue-700);
-    --settings-title-bar-color: rgb(255, 255, 255);
-    --settings-title-search-color: rgb(192, 199, 205);
     --settings-toggle-bar-size: {
       height: 12px;
       width: 28px;
@@ -48,9 +47,9 @@
       height: 16px;
       width: 16px;
     };
-    --settings-toggle-color: var(--google-blue-500);
   }
 
+  /* Polymer vars are defined last. */
   :root {
     --checkbox-margin-start: 2px;

[michaelpg, 2016/09/15 02:24:28]

--checkbox-* are Settings vars, not Polymer vars

[stevenjb, 2016/09/15 17:42:17]

I will rename and move these and put all of these changes in a separate CL.

     --checkbox-size: 16px;