From dc277061936043fa76dc982b14be9bf685be6c52 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 6 Apr 2022 13:55:05 -0500 Subject: [PATCH] Update website button styles (#4957) * update button styles, make get-started match our styling conventions * fix lint test, remove text-muted * Update bootstrap-overrides.less * remove `width: auto` --- .../assets/styles/bootstrap-overrides.less | 23 ++++++ .../pages/docs/basic-documentation.less | 52 +++--------- website/assets/styles/pages/get-started.less | 81 +++---------------- .../views/pages/docs/basic-documentation.ejs | 8 +- website/views/pages/get-started.ejs | 26 +++--- 5 files changed, 64 insertions(+), 126 deletions(-) diff --git a/website/assets/styles/bootstrap-overrides.less b/website/assets/styles/bootstrap-overrides.less index ec4805536b..9199eaa061 100644 --- a/website/assets/styles/bootstrap-overrides.less +++ b/website/assets/styles/bootstrap-overrides.less @@ -72,6 +72,10 @@ a.text-danger:hover, a.text-danger:focus { line-height: 23px; border-radius: 10px; + &:focus { + box-shadow: none; + } + &.btn-link { color: #ffffff; font-weight: 400; @@ -133,6 +137,25 @@ a.text-danger:hover, a.text-danger:focus { box-shadow: none; } } + + &.btn-outline-secondary { + color: @core-fleet-black; + border: 1px solid #C5C7D1; + &:hover { + background: #fff; + } + &:focus { + box-shadow: none; + } + &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { + color: @core-fleet-black; + background: none; + border: 1px solid #C5C7D1; + } + &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus, .show > &.dropdown-toggle:focus { + box-shadow: none; + } + } } .card { diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less index 0ae247ef88..73b1212f7f 100644 --- a/website/assets/styles/pages/docs/basic-documentation.less +++ b/website/assets/styles/pages/docs/basic-documentation.less @@ -21,7 +21,7 @@ } - a { + a:not(.btn) { color: @core-vibrant-blue; } @@ -480,45 +480,17 @@ ol { padding-inline-start: 16px; } - [purpose='next-steps-buttons'] { - - - .btn { - font-size: 16px; - line-height: 25px; - padding: 16px 32px; - } - - .btn-primary { - color: #fff; - &:active { - background: @core-vibrant-red; - border-color: @core-vibrant-red; - } - } - .btn-slack { - color: @core-fleet-black; - img { - display: inline; - height: 24px; - width: auto; - padding-top: 0px; - padding-bottom: 0px; - margin: 0px; - } - &:focus { - box-shadow: none; - } - } - .btn-outline-secondary { - color: @core-fleet-black; - border: 1px solid #C5C7D1; - &:hover { - background: #fff; - } - &:focus { - box-shadow: none; - } + [purpose='next-steps-button'] { + font-size: 16px; + line-height: 25px; + padding: 16px 32px; + img { + display: inline; + height: 24px; + width: auto; + padding-top: 0px; + padding-bottom: 0px; + margin: 0px; } } diff --git a/website/assets/styles/pages/get-started.less b/website/assets/styles/pages/get-started.less index e0391b31be..cb9185ec0c 100644 --- a/website/assets/styles/pages/get-started.less +++ b/website/assets/styles/pages/get-started.less @@ -1,70 +1,9 @@ #get-started { - a { + a:not(.btn) { color: @core-vibrant-blue; } - .btn { - font-size: 16px; - line-height: 25px; - padding: 16px 32px; - } - - .btn-primary { - color: #fff; - &:active { - background: @core-vibrant-red; - border-color: @core-vibrant-red; - } - } - - .btn-outline-secondary { - color: @core-fleet-black; - border: 1px solid #C5C7D1; - &:hover { - background: #fff; - } - &:focus { - box-shadow: none; - } - } - - .btn-node { - color: #fff; - background: #333; - img { - display: inline; - height: 36px; - width: auto; - } - &:focus { - box-shadow: none; - } - } - - .btn-docker { - color: #fff; - background: #0073EC; - img { - display: inline; - height: 36px; - width: auto; - } - &:focus { - box-shadow: none; - } - } - - .btn-slack { - img { - display: inline; - height: 24px; - width: auto; - } - &:focus { - box-shadow: none; - } - } code { background-color: @ui-off-white; border: 1px solid @border-lt-gray; @@ -76,24 +15,28 @@ display: inline-block; border-radius: 6px; } - .muted { + + [purpose='get-started-buttons'] { + a { + font-size: 16px; + line-height: 25px; + padding: 16px 32px; + } + } + + [purpose='terminal-commands'] { padding: 24px; border: 1px solid @core-fleet-black-25; border-radius: 4px; margin: 16px 0px 32px; background: @ui-off-white; p { + color: @core-fleet-black; font-family: @code-font; font-weight: @normal; font-size: 18px; line-height: 32px; margin-bottom: 0px; } - .comment { - color: @core-fleet-black-50; - } - .command { - color: @core-fleet-black; - } } } diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs index dd87762e39..125c175a32 100644 --- a/website/views/pages/docs/basic-documentation.ejs +++ b/website/views/pages/docs/basic-documentation.ejs @@ -209,13 +209,13 @@ ) ) %> -
-

Next steps

+
+

Next steps

- + Learn how to deploy Fleet - + Slack logo Ask for help on Slack diff --git a/website/views/pages/get-started.ejs b/website/views/pages/get-started.ejs index 582bb5d080..c353a58c4f 100644 --- a/website/views/pages/get-started.ejs +++ b/website/views/pages/get-started.ejs @@ -6,15 +6,15 @@

1. Install Node (optional) and Docker

The quickest way to install Fleet is with Node.js and Docker.

-
+
- NodeJS logo + style="color: #fff; background: #333;" class="d-flex btn btn-md justify-content-center align-items-center mr-sm-3"> + NodeJS logo Find my Node installer - Docker logo + style="color: #fff; background: #0073EC;" class="d-flex btn btn-md justify-content-center align-items-center mt-3 mt-sm-0"> + Docker logo Get Docker
@@ -27,11 +27,11 @@

2. Install Fleet

To install Fleet:

-
-

# Install the Fleet command-line tool

-

sudo npm install -g fleetctl

-

# Run a local demo of the Fleet server

-

sudo fleetctl preview

+
+

# Install the Fleet command-line tool

+

sudo npm install -g fleetctl

+

# Run a local demo of the Fleet server

+

sudo fleetctl preview

A small circle with an 'I' inside of it