[Redesign] Revert the installation instructions (#8765)

Reverts the installation instructions added in #8690. Addresses #8762
NuGet · Aug 27, 2021 · 2f3fdd3 · 2f3fdd3
1 parent c98395f
commit 2f3fdd3
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 250 deletions.
diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css
diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css
diff --git a/src/Bootstrap/less/buttons.less b/src/Bootstrap/less/buttons.less
@@ -87,11 +87,6 @@
 .btn-danger {
   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
-// Blue button for installation instructions
-.btn-blue {
-  .button-variant(@btn-default-color; #0078D4; @btn-default-border);
-}
-
 
 // Link buttons
 // -------------------------

diff --git a/src/Bootstrap/less/theme/page-display-package-v2.less b/src/Bootstrap/less/theme/page-display-package-v2.less
@@ -160,48 +160,6 @@
     margin-bottom: 15px;
   }
 
-  .installation-instructions {
-    background-color: #F3F2F1;
-
-    .installation-instructions-dropdown {
-      font-size: 14px;
-      background-color: #F3F2F1;
-      height: 31px;
-      border-left: 0px;
-      border-top: 0px;
-      border-right: 0px;
-    }
-
-    .installation-instruction {
-      background-color: #FAF9F8;
-      font-size: 14px;
-
-      pre {
-        background-color: #FAF9F8;
-        border: 0px;
-        margin-bottom: 0px;
-        width: 100%;
-      }
-
-      .alert {
-        margin-top: 0px;
-      }
-    }
-  }
-
-  button {
-    width: 32px;
-    height: 32px;
-    float: right;
-    padding: 0px;
-
-    .ms-Icon--Copy {
-      color: #FFFFFF;
-      width: 16px;
-      height: 16px;
-    }
-  }
-
   .package-details-main {
     .break-word;
 
@@ -420,6 +378,55 @@
       font-weight: 600;
       text-decoration: underline;
     }
+
+    .tab-content {
+      .tab-pane {
+        > div {
+          display: table;
+          height: 1px;
+        }
+
+        .install-script-row {
+          display: table-row;
+          height: 100%;
+
+          .install-script {
+            display: table-cell;
+            background-color: @panel-footer-bg;
+            font-family: @font-family-monospace;
+            font-size: 1em;
+            color: #fff;
+            width: 100%;
+            max-width: 1px;
+            line-height: 1.5;
+            white-space: pre-wrap;
+            // Add a border with the same color as the background to support visual callout
+            // in high contrast mode (since borders are shown).
+            border-color: @panel-footer-bg;
+            border-style: solid;
+            border-width: 1px 0 1px 1px;
+            user-select: all;
+            vertical-align: middle;
+            word-break: break-word;
+          }
+
+          .copy-button {
+            height: 100%;
+
+            button {
+              height: 100%;
+              min-height: 42px;
+              line-height: 1.5;
+            }
+          }
+        }
+
+        .alert {
+          margin: 0;
+          width: 100%;
+        }
+      }
+    }
   }
 
   .body-tabs {