mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 17:08:53 +00:00
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`
This commit is contained in:
Eric
GitHub
parent
3d8a994af4
commit
dc27706193
5 changed files with 64 additions and 126 deletions
23
website/assets/styles/bootstrap-overrides.less
vendored
23
website/assets/styles/bootstrap-overrides.less
vendored
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
81
website/assets/styles/pages/get-started.less
vendored
81
website/assets/styles/pages/get-started.less
vendored
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -209,13 +209,13 @@
|
|||
)
|
||||
) %>
|
||||
|
||||
<div class="d-block pb-3" purpose="next-steps-buttons" v-if="thisPage.title === 'Learn how to use Fleet'">
|
||||
<h3 style="font-size: 24px;line-height: 28px;">Next steps</h3>
|
||||
<div class="d-block pb-3" v-if="thisPage.title === 'Learn how to use Fleet'">
|
||||
<h3 style="font-size: 24px; line-height: 28px;">Next steps</h3>
|
||||
<div class="d-sm-flex">
|
||||
<a href="/docs/deploying" class="d-flex btn btn-primary btn-md justify-content-center mr-sm-3">
|
||||
<a href="/docs/deploying" class="d-flex btn btn-primary btn-md justify-content-center mr-sm-3" purpose="next-steps-button">
|
||||
Learn how to deploy Fleet
|
||||
</a>
|
||||
<a href="/slack" target="_blank" class="d-flex btn btn-md btn-outline-secondary btn-slack justify-content-center align-items-center mt-3 mt-sm-0">
|
||||
<a href="/slack" target="_blank" class="d-flex btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-sm-0" purpose="next-steps-button">
|
||||
<img class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
|
||||
Ask for help on Slack
|
||||
</a>
|
||||
|
|
|
|||
26
website/views/pages/get-started.ejs
vendored
26
website/views/pages/get-started.ejs
vendored
|
|
@ -6,15 +6,15 @@
|
|||
<div class="pt-4 pb-4">
|
||||
<h2 class="mb-3">1. Install Node (optional) and Docker</h2>
|
||||
<p>The quickest way to install Fleet is with Node.js and Docker.</p>
|
||||
<div class="d-sm-flex">
|
||||
<div class="d-sm-flex" purpose="get-started-buttons">
|
||||
<a href="https://nodejs.org/en/download/" target="_blank"
|
||||
class="d-flex btn btn-md btn-node justify-content-center align-items-center mr-sm-3">
|
||||
<img class="pr-3" alt="NodeJS logo" src="/images/logo-node-59x36@2x.png" />
|
||||
style="color: #fff; background: #333;" class="d-flex btn btn-md justify-content-center align-items-center mr-sm-3">
|
||||
<img style="height: 36px;" class="pr-3 d-inline" alt="NodeJS logo" src="/images/logo-node-59x36@2x.png"/>
|
||||
Find my Node installer
|
||||
</a>
|
||||
<a href="https://docs.docker.com/get-docker/" target="_blank"
|
||||
class="d-flex btn btn-md btn-docker justify-content-center align-items-center mt-3 mt-sm-0">
|
||||
<img class="pr-3" alt="Docker logo" src="/images/logo-docker-51x36@2x.png" />
|
||||
style="color: #fff; background: #0073EC;" class="d-flex btn btn-md justify-content-center align-items-center mt-3 mt-sm-0">
|
||||
<img style="height: 36px;" class="pr-3 d-inline" alt="Docker logo" src="/images/logo-docker-51x36@2x.png"/>
|
||||
Get Docker
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -27,11 +27,11 @@
|
|||
<div>
|
||||
<h2 class="pt-3 mb-3">2. Install Fleet</h2>
|
||||
<p>To install Fleet:</p>
|
||||
<div class="muted">
|
||||
<p class="comment"># Install the Fleet command-line tool</p>
|
||||
<p class="command">sudo npm install -g fleetctl</p>
|
||||
<p class="comment"># Run a local demo of the Fleet server</p>
|
||||
<p class="command">sudo fleetctl preview</p>
|
||||
<div purpose="terminal-commands">
|
||||
<p class="text-muted"># Install the Fleet command-line tool</p>
|
||||
<p>sudo npm install -g fleetctl</p>
|
||||
<p class="text-muted"># Run a local demo of the Fleet server</p>
|
||||
<p>sudo fleetctl preview</p>
|
||||
</div>
|
||||
<p class="mb-0"><img alt="A small circle with an 'I' inside of it"
|
||||
style="width: 16px; display: inline; margin-right: 8px; margin-bottom: 3px"
|
||||
|
|
@ -50,14 +50,14 @@
|
|||
</div>
|
||||
<div style="padding-top: 60px;">
|
||||
<h2 class="mb-4">Next steps</h2>
|
||||
<div class="d-sm-flex">
|
||||
<div class="d-sm-flex" purpose="get-started-buttons">
|
||||
<a href="/docs/using-fleet/learn-how-to-use-fleet"
|
||||
class="d-flex btn btn-primary btn-md justify-content-center mr-sm-3">
|
||||
Learn how to use Fleet
|
||||
</a>
|
||||
<a href="/slack" target="_blank"
|
||||
class="d-flex btn btn-md btn-outline-secondary btn-slack justify-content-center align-items-center mt-3 mt-sm-0">
|
||||
<img class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png" />
|
||||
class="d-flex btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-sm-0">
|
||||
<img style="height: 24px;" class="pr-3 d-inline" alt="Slack logo" src="/images/logo-slack-24x24@2x.png" />
|
||||
Ask for help on Slack
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue