Merge pull request docker#11551 from thaJeztah/cleanup_styles_and_scripts

Cleanup styles and scripts

Author: usha-mandya

_scss/_buttons.scss

@@ -38,7 +38,7 @@ a.button.outline-btn.min-hgt {
     border: 1px solid rgba(0, 0, 0, 0.1);
     text-shadow: 0 1px rgba(0, 0, 0, 0.2);
 }
-
+/*
 .secondary-btn {
     background-color: rgba(255, 255, 255, 0.2);
     box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
@@ -52,20 +52,20 @@ a.button.outline-btn.min-hgt {
     border: 1px solid rgba(0, 0, 0, 0.1);
     text-shadow: 0 1px rgba(0, 0, 0, 0.2);
 }
+*/
 
 .outline-btn {
     background: #fff;
     border: 1px solid #0087C8;
     text-decoration: none;
     margin: 0;
+    &:hover {
+      color: #1488C6;
+    }
 }
 
-.outline-btn:hover,
+//.secondary-btn:hover,
 .primary-btn:hover,
-.secondary-btn:hover {
-    opacity: 0.8;
-}
-
 .outline-btn:hover {
-    color: #1488C6;
+    opacity: 0.8;
 }

_scss/_content.scss

@@ -11,35 +11,39 @@
 /*
  * Code formatting *************************************************************
  */
+pre, code {
+  background-color: #f5f8fa!important;
+  color: #0c5176 !important;
+}
 
 pre {
-    background-color: #F5F8FA!important;
+    border: 0;
+    border-radius: 4px;
     display: block;
     padding: 20.5px!important;
     margin: 0 0 10px;
     font-size: 13px;
     line-height: 1.42857143;
-    color: #333;
     word-break: normal !important;
     word-wrap: break-word;
-    border: 0!important;
-    border-radius: 4px;
+
+    code {
+        overflow-x: auto;
+        overflow-wrap: normal;
+        white-space: pre;
+    }
 }
 
 code {
-    background-color: #F5F8FA!important;
     border-radius: 2px;
-    color: #0c5176 !important;
     font-size: 90%;
     padding: 3px 7px;
     overflow-x: scroll;
     white-space: nowrap;
 }
 
-pre code {
-    overflow-x: auto;
-    overflow-wrap: normal;
-    white-space: pre;
+.highlighter-rouge {
+  margin: 15px 0;
 }
 
 /*
@@ -59,53 +63,18 @@ pre code {
     float: left;
     height: 250px;
     width: 100%;
-}
-
-.component-full {
-    padding: 5px 0 10px 20px;
-    float: left;
-    min-height: 100px;
-    margin: 0 0 15px 0;
-    width: 100%;
-}
-
-.component,
-.component-full {
     background: $bg-component;
-}
-
-.component-full-icon {
-    float: left;
-    padding: 5px 15px 0 7px;
-}
-
-.component-full p {
-    margin: 0;
-}
-
-.component-full h3 {
-    margin-top: 10px;
-}
-
-.component img,
-.component-full-icon img {
-    width: 70px;
-    height: 70px;
-}
-
-.component-icon {
-    margin: 0 auto;
-    width: 70px;
-}
-
-.component-full-copy {
-    float: left;
-    width: 80%;
-}
-
-.component h3,
-.component p {
-    margin: 0;
+    img {
+      width: 70px;
+      height: 70px;
+    }
+    .component-icon {
+      margin: 0 auto;
+      width: 70px;
+    }
+    h3, p {
+      margin: 0;
+    }
 }
 
 a.anchorLink {
@@ -130,29 +99,3 @@ a.glossary {
         text-decoration: none;
     }
 }
-
-.highlighter-rouge {
-    margin: 15px 0;
-}
-
-code {
-    padding: 3px 7px;
-    font-size: 90%;
-    color: #0c5176!important;
-    background-color: rgba(12, 81, 118, 0.1);
-    border-radius: 2px;
-}
-
-pre {
-    display: block;
-    padding: 9.5px;
-    margin: 0 0 10px;
-    font-size: 13px;
-    line-height: 1.42857143;
-    color: #333;
-    word-break: normal!important;
-    word-wrap: break-word;
-    background-color: #f5f5f5;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}

_scss/_global-header.scss

@@ -40,9 +40,7 @@
     height: unset;
 }
 
-.columns,
-.col-body {
-    display: flex;
+.columns {
     flex-direction: column;
 }
 
@@ -51,6 +49,7 @@
 }
 
 .col-body {
+    display: flex;
     flex-direction: row;
     flex: 1;
     min-height: 555px;
@@ -77,16 +76,12 @@
 }
 
 .content {
-    padding: 80px 70px 20px 70px;
+    padding: 80px 20px 40px 40px;
     max-width: 1024px;
     min-width: 300px;
     min-height: 500px;
 }
 
-.main-content {
-    padding: 0 35px 25px 30px;
-}
-
 section.section {
     margin: 0 auto;
 }