Replace Bootstrap CSS with GitLab UI CSS

7 files changed, 42 insertions, 27 deletions

diff --git a/commands/frontend.rb b/commands/frontend.rb
index 0a174d4a..0e9e7e90 100644
--- a/commands/frontend.rb
+++ b/commands/frontend.rb
@@ -3,7 +3,7 @@
 usage       'frontend [options]'
 aliases     :ds, :stuff
 summary     'uses nanoc cli to execute frontend related tasks'
-description 'This command is used by the Nanoc CLI to bundle the JavaScript.'
+description 'This command is used by the Nanoc CLI to bundle JavaScript.'
 
 flag   :h, :help, 'show help for this command' do |value, cmd|
   puts cmd.help
@@ -28,7 +28,7 @@ run do |opts, args, cmd|
     ERROR
   end
 
-  puts 'Create icons.svg ...'
+  puts 'Creating icons.svg ...'
   root = File.expand_path('../', __dir__)
   path = 'node_modules/@gitlab/svgs/dist/icons.svg'
 
@@ -37,4 +37,16 @@ run do |opts, args, cmd|
   else
     puts 'Failed to create icons.svg!'
   end
+
+  puts 'Copying GitLab UI CSS...'
+  gl_ui_src = 'node_modules/@gitlab/ui/dist'
+  gl_ui_dest = 'public/assets/stylesheets/gitlab-ui'
+  Dir.mkdir gl_ui_dest
+
+  Dir.children("#{gl_ui_src}").each do |filename|
+    if filename.include?("css") && File.write("#{gl_ui_dest}/#{filename}", File.read("#{root}/#{gl_ui_src}/#{filename}"))
+      puts "Copied #{gl_ui_src}/#{filename}"
+    end
+  end
+
 end
diff --git a/content/assets/stylesheets/_landing.scss b/content/assets/stylesheets/_landing.scss
index a96461ae..193d7a63 100644
--- a/content/assets/stylesheets/_landing.scss
+++ b/content/assets/stylesheets/_landing.scss
@@ -268,7 +268,6 @@ version: 11
     }
 
     .transparent {
-      padding: 1rem;
 
       .card-title {
         font-style: normal;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 3c4b2375..b7c988c0 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -113,12 +113,8 @@ ol {
     height: 50px;
     flex-shrink: 0;
     border-radius: 0;
-    &:hover {
-      background-color: $gds-gray-200;
-    }
-    &:focus {
-      box-shadow: none;
-    }
+    box-shadow: none;
+    justify-content: left;
     .label {
       display: none;
     }
@@ -152,6 +148,12 @@ ol {
       transform: rotate(-45deg) translateY(-4px);
     }
   }
+  .gl-button.nav-toggle {
+    &:hover,
+    &:focus {
+      box-shadow: none;
+    }
+  }
   @media (max-width: $bp-xl) {
     width: 0;
 
@@ -269,6 +271,7 @@ ol {
   min-height: $header-height;
   background-color: $header-background-color;
   z-index: 3;
+  padding: 0.5rem 1rem;
 
   .navbar-brand {
     font-size: 1rem;
diff --git a/content/index.erb b/content/index.erb
index 4782d53d..05b35f29 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -4,15 +4,15 @@ title: GitLab Documentation
 <!-- Render the front page only if CI_PROJECT_NAME is gitlab-docs or is not set -->
 <% if ENV['CI_PROJECT_NAME'] == 'gitlab-docs' or ENV['CI_PROJECT_NAME'].nil? %>
   <!-- Hero-->
-  <section class="hero text-center pt-5 mt-3">
+  <section class="hero text-center pt-4 mt-4">
     <!-- Feedback Banner-->
-    <div class="mt-n4">
+    <div class="gl-mt-n3">
       <%= render '/banner.*' %>
     </div>
-    <div class="container py-5 mb-2">
+    <div class="container py-6 mb-3">
       <div class="row">
         <div class="col d-flex justify-content-center">
-          <div class="card search mt-3 pb-4">
+          <div class="card search mt-4 pb-4">
             <div class="card-body">
               <h5 class="card-title pb-3 mb-2">Search the docs</h5>
               <% if @item[:searchbar].nil? %>
@@ -27,7 +27,7 @@ title: GitLab Documentation
           </div>
         </div>
       </div>
-      <div class="row pb-4 pt-5">
+      <div class="row pb-4 pt-7">
         <div class="col">
           <h2>
             Get started with...
@@ -70,7 +70,7 @@ title: GitLab Documentation
   <!-- Popular Topics-->
   <section class="popular text-center">
     <div class="container">
-      <div class="row pt-5">
+      <div class="row pt-7">
         <div class="col">
           <h2 class="m-0 pb-4">
             Popular topics
@@ -122,7 +122,7 @@ title: GitLab Documentation
           </ul>
         </div>
       </div>
-      <div class="row pb-5">
+      <div class="row pb-6">
         <div class="col-md-3 col-12">
           <h5 class="align-top mt-0 text-left">
             General <br class="d-none d-md-block">topics
@@ -150,7 +150,7 @@ title: GitLab Documentation
   </section>
 
   <!-- Self Managed-->
-  <section class="self-managed text-center py-5 mb-3">
+  <section class="self-managed text-center py-6">
     <div class="container">
       <div class="row">
         <div class="col-12">
@@ -188,12 +188,12 @@ title: GitLab Documentation
         <% @items['/_data/landing.yaml'][:cards].each do |card| %>
           <div class="col-lg-4 col-12 py-3">
             <div class="card transparent text-left h-100">
-              <div class="card-body">
-                <h5 class="card-title my-2">
-                  <img src="/assets/images/download.svg" class="mr-3" alt="" role="img" />
+              <div class="p-3">
+                <h5 class="card-title">
+                  <img src="/assets/images/download.svg" class="mr-2" alt="" role="img" />
                   <a href="<%= card[:url] %>"><%= card[:title] %></a>
                 </h5>
-                <p class="card-text pl-5">
+                <p class="card-text pl-6">
                   <%= card[:description] %>
                 </p>
               </div>
@@ -261,8 +261,8 @@ title: GitLab Documentation
   </section>
 
   <!-- Support-->
-  <section class="support py-5">
-    <div class="container pt-3">
+  <section class="support py-9">
+    <div class="container">
       <div class="row">
         <div class="col d-flex justify-content-center">
           <div class="card text-center h-100">
diff --git a/layouts/default.html b/layouts/default.html
index 49da148d..9b2d91cc 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -8,7 +8,7 @@
   <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
-    <section class="gl-docs container-fluid mt-5">
+    <section class="gl-docs container-fluid mt-7">
       <div class="row">
         <div class="col-0 col-xl-2 pl-0">
           <div class="nav-wrapper active">
diff --git a/layouts/head.html b/layouts/head.html
index c36d15ad..8ff3b090 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -29,7 +29,8 @@
 <% end %>
 <!-- End of CSP headers -->
 
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+<link rel="stylesheet" href="/assets/stylesheets/gitlab-ui/index.css">
+<link rel="stylesheet" href="/assets/stylesheets/gitlab-ui/utility_classes.css">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/stylesheet.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/highlight.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/footer.*'].path %>">
diff --git a/layouts/header.html b/layouts/header.html
index f22633c4..f77ff133 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -1,5 +1,5 @@
-<nav class="navbar navbar-expand-md navbar-dark py-lg-0 fixed-top">
-  <a class="navbar-brand d-flex align-items-center justify-content-center" href="/">
+<nav class="navbar navbar-expand-md navbar-dark py-lg-0 px-3 fixed-top">
+  <a class="navbar-brand d-flex align-items-center justify-content-center mr-3" href="/">
     <img src="<%= @items['/assets/images/gitlab-logo-header.svg'].path %>" alt="GitLab documentation home" class="logo" />
     <span class="border-left border-light ml-2 pl-2">Docs</strong>
   </a>