diff options
author | Evan Read <eread@gitlab.com> | 2022-05-30 01:14:14 +0300 |
---|---|---|
committer | Evan Read <eread@gitlab.com> | 2022-05-30 01:14:14 +0300 |
commit | 60aefa74ca12a5aa690cb64196013836bd4f960a (patch) | |
tree | ba45774782e6647863cf589677f211e185e73153 | |
parent | fc3b62d327d6a06cfab3c1d7bdd48051fb3755dd (diff) | |
parent | 7e06b75fa56205a5dbaf4a3245ed149d558368ea (diff) |
Merge branch 'gitlab-ui-css' into 'main'
Replace Bootstrap CSS with GitLab UI CSS
See merge request gitlab-org/gitlab-docs!2677
-rw-r--r-- | commands/frontend.rb | 16 | ||||
-rw-r--r-- | content/assets/stylesheets/_landing.scss | 1 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 15 | ||||
-rw-r--r-- | content/index.erb | 28 | ||||
-rw-r--r-- | layouts/default.html | 2 | ||||
-rw-r--r-- | layouts/head.html | 3 | ||||
-rw-r--r-- | layouts/header.html | 4 |
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> |