mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
Website: Update button styles (#10699)
Changes: - Updated the bootstrap overrides for `btn-info` and `btn-primary` button styles. - Removed the text underline from the buttons on landing pages
This commit is contained in:
parent
f361137110
commit
d2124b711f
5 changed files with 45 additions and 10 deletions
49
website/assets/styles/bootstrap-overrides.less
vendored
49
website/assets/styles/bootstrap-overrides.less
vendored
|
|
@ -96,12 +96,27 @@ a.text-danger:hover, a.text-danger:focus {
|
|||
&.btn-primary {
|
||||
background-color: #ff5c83;
|
||||
border-color: #ff5c83;
|
||||
&:hover {
|
||||
background-color: darken(#ff5c83, 10%);
|
||||
border-color: darken(#ff5c83, 10%);
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
&:before {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
opacity: 1;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -5px;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
transform: skew(-10deg);
|
||||
transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
|
||||
}
|
||||
&:focus, &.focus {
|
||||
box-shadow: 0 0 0.25rem 0.2rem #ff5c83;
|
||||
&:hover:before {
|
||||
opacity: 0;
|
||||
left: 160px;
|
||||
width: 110%;
|
||||
}
|
||||
&.disabled, &:disabled {
|
||||
color: #fff;
|
||||
|
|
@ -121,9 +136,27 @@ a.text-danger:hover, a.text-danger:focus {
|
|||
&.btn-info {
|
||||
background-color: #6A67FE;
|
||||
border-color: #6A67FE;
|
||||
&:hover {
|
||||
background-color: #6A67FE;
|
||||
border-color: #6A67FE;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
&:before {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
opacity: 1;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -5px;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
transform: skew(-10deg);
|
||||
transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
|
||||
}
|
||||
&:hover:before {
|
||||
opacity: 0;
|
||||
left: 160px;
|
||||
width: 110%;
|
||||
}
|
||||
&:not(:disabled):not(.disabled):active {
|
||||
background-color: #6A67FE;
|
||||
|
|
|
|||
1
website/assets/styles/pages/compliance.less
vendored
1
website/assets/styles/pages/compliance.less
vendored
|
|
@ -72,6 +72,7 @@
|
|||
align-items: center;
|
||||
color: #FFF;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
[purpose='cta-button']::before {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
|
|
|
|||
3
website/assets/styles/pages/homepage.less
vendored
3
website/assets/styles/pages/homepage.less
vendored
|
|
@ -259,7 +259,7 @@
|
|||
[purpose='cta-button']::before {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
opacity: 1;
|
||||
content: ' ';
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -5px;
|
||||
|
|
@ -269,7 +269,6 @@
|
|||
transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
|
||||
}
|
||||
[purpose='cta-button']:hover:before {
|
||||
opacity: 0;
|
||||
left: 160px;
|
||||
width: 110%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@
|
|||
align-items: center;
|
||||
color: #FFF;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
[purpose='cta-button']::before {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@
|
|||
align-items: center;
|
||||
color: #FFF;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
[purpose='cta-button']::before {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
|
|
|
|||
Loading…
Reference in a new issue