mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 17:05:18 +00:00
46802ee56a
Closes: #12954 Changes: - Added an admin page that displays a table containing all of the users that are currently on the Fleet Sandbox waitlist where admins can approve waitlisted users. - Added a new email template that tells users that their Fleet Sandbox instance is ready. - Added a new action: `admin/provision-sandbox-instance-and-deliver-email.js`, an action that provisions a Fleet sandbox instance for a single user and sends them an email telling them that their Fleet Sandbox Instance is ready. - Added a script that provisions a Fleet Sandbox instance for the user who has been on the waitlist the longest and sends them an email telling them that their Sandbox instance is ready.
450 lines
9.4 KiB
Plaintext
Vendored
450 lines
9.4 KiB
Plaintext
Vendored
@footer-height: 254px;
|
|
@container-md-max-width: 1100px;
|
|
|
|
[v-cloak] { display: none; }
|
|
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
[purpose='page-wrap'] {
|
|
height: 100%;
|
|
height: auto !important;//lesshint-disable-line importantRule,duplicateProperty
|
|
min-height: 100%;
|
|
position: relative;
|
|
padding-bottom: @footer-height;
|
|
background: linear-gradient(180deg, #E8F1F6 0%, #FFFFFF 200px);
|
|
background-position: center 40px;
|
|
}
|
|
|
|
// Styles for the page header
|
|
[purpose='header-container'] {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-bottom: 1px solid #FFFFFF;
|
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
|
|
backdrop-filter: blur(15px);
|
|
-webkit-backdrop-filter: blur(15px);
|
|
|
|
// rules for sticky nav transitions
|
|
transition-property: background-color, transform, bottom;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 500ms;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 199;
|
|
position: sticky;
|
|
position: -webkit-sticky; //lesshint-disable-line duplicateProperty
|
|
top: 0;
|
|
}
|
|
|
|
[purpose='header-ribbon-cta'] {
|
|
background-color: #7487C2;
|
|
p {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #fff;
|
|
}
|
|
a {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
[purpose='page-header'] {
|
|
max-width: 1200px;
|
|
height: 80px;
|
|
[purpose='header-logo'] {
|
|
max-width: 118px;
|
|
img {
|
|
height: 41px;
|
|
width: 118px;
|
|
}
|
|
}
|
|
|
|
[purpose='glass-header-btn'] {
|
|
color: #FFFFFF;
|
|
height: 32px;
|
|
position: relative;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
padding: 16px;
|
|
box-shadow: 1px 1px 2px rgba(25, 33, 71, 0.24);
|
|
border-radius: 4px;
|
|
background-color: @core-vibrant-red;
|
|
}
|
|
|
|
[purpose='glass-header-btn']::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: 60%;
|
|
height: 100%;
|
|
transform: skew(-10deg);
|
|
transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
|
|
}
|
|
[purpose='glass-header-btn']:hover:before {
|
|
opacity: 0;
|
|
left: 160px;
|
|
width: 110%;
|
|
}
|
|
|
|
[purpose='mobile-nav-toggle-btn'] {
|
|
color: #192147;
|
|
cursor: unset;
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
font-family: @navigation-font;
|
|
font-weight: @bold;
|
|
height: 100%;
|
|
img {
|
|
width: 16px;
|
|
}
|
|
}
|
|
[purpose='mobile-nav'] {
|
|
[purpose='mobile-header-logo'] {
|
|
img {
|
|
height: 92px;
|
|
width: 162px;
|
|
}
|
|
}
|
|
position: fixed;
|
|
min-height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
background-color: #ffffff;
|
|
a:not(.btn) {
|
|
width: 100%;
|
|
padding: 8px 24px 8px 0px;
|
|
margin-bottom: 4px;
|
|
font-weight: 700;
|
|
color: #212529;
|
|
cursor: pointer;
|
|
}
|
|
hr {
|
|
margin-top: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
[purpose='mobile-nav-close-btn'] {
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
img {
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
[purpose='mobile-dropdown-toggle'] {
|
|
font-weight: 700;
|
|
color: @core-fleet-black;
|
|
margin-bottom: 0px;
|
|
&[aria-expanded='true'] {
|
|
color: #6a67fe;
|
|
outline: none;
|
|
margin-bottom: 4px;
|
|
}
|
|
}
|
|
[purpose='mobile-nav-btn'] {
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
[purpose='mobile-dropdown'] {
|
|
[purpose='beta-label'] {
|
|
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
text-transform: uppercase;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
line-height: 20px;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
span {
|
|
display: inline-flex;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
line-height: 24px;
|
|
color: @core-fleet-black-50;
|
|
margin-bottom: 4px;
|
|
}
|
|
a {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
padding: 8px 24px 8px 0px;
|
|
font-weight: 400;
|
|
color: #212529;
|
|
white-space: nowrap;
|
|
background-color: transparent;
|
|
}
|
|
a:hover {
|
|
color: #6a67fe;
|
|
text-decoration: none;
|
|
}
|
|
[purpose='beta-label'] {
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
line-height: 20px;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
[purpose='header-nav'] {
|
|
[purpose='glass-header-btn'] {
|
|
color: #FFFFFF;
|
|
height: 32px;
|
|
position: relative;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
padding: 16px;
|
|
box-shadow: 1px 1px 2px rgba(25, 33, 71, 0.24);
|
|
border-radius: 4px;
|
|
background-color: @core-vibrant-red;
|
|
text-decoration: none;
|
|
}
|
|
[purpose='header-nav-btn'][aria-expanded='true'] {
|
|
font-weight: 700;
|
|
outline: none;
|
|
}
|
|
[purpose='header-nav-btn']:before {
|
|
display: block;
|
|
content: attr(button-text);
|
|
font-weight: bold;
|
|
height: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
[purpose='header-nav-btn'] {
|
|
color: #192147;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
&:focus {
|
|
outline-color: none;
|
|
}
|
|
.current-section {
|
|
font-weight: 700;
|
|
svg {
|
|
path {
|
|
fill: #6a67fe;
|
|
}
|
|
}
|
|
}
|
|
[purpose='logout-btn'] {
|
|
color: @core-fleet-black;
|
|
text-decoration: none;
|
|
line-height: 23px;
|
|
}
|
|
&:hover {
|
|
font-weight: 700;
|
|
}
|
|
[purpose='header-dropdown'] {
|
|
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.4);
|
|
border-radius: 8px;
|
|
a {
|
|
color: @core-fleet-black;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
}
|
|
a:hover {
|
|
color: #6a67fe;
|
|
text-decoration: none;
|
|
}
|
|
[purpose='beta-label'] {
|
|
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
text-transform: uppercase;
|
|
color: #FFF;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
line-height: 20px;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
[purpose='admin-nav'] {
|
|
justify-content: center;
|
|
a {
|
|
margin-left: 30px;
|
|
margin-right: 30px;
|
|
color: @core-fleet-black-75;
|
|
&:hover {
|
|
color: @core-fleet-black;
|
|
}
|
|
}
|
|
span {
|
|
color: @core-fleet-black;
|
|
font-weight: 600;
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
|
|
// Footer styles
|
|
[purpose='page-footer'] {
|
|
background-color: #FFF;
|
|
color: #515774;
|
|
height: @footer-height;
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
a {
|
|
color: #515774;
|
|
}
|
|
[purpose='footer-logo'] {
|
|
width: 118px;
|
|
height: 41px;
|
|
}
|
|
[purpose='footer-container'] {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
padding-bottom: 32px;
|
|
padding-top: 40px;
|
|
max-width: 1248px;
|
|
}
|
|
[purpose='footer-nav'] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
[purpose='footer-bottom'] {
|
|
background-color: #FFF;
|
|
padding-left: 40px;
|
|
padding-right: 70px;
|
|
}
|
|
[purpose='legal-and-social-nav'] {
|
|
max-width: 1248px;
|
|
[purpose='legal-section'] {
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
img {
|
|
width: 80px;
|
|
height: 15px;
|
|
}
|
|
[purpose='legal-links'] {
|
|
a {
|
|
padding-left: 16px;
|
|
display: inline;
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
[purpose='footer-socials'] {
|
|
img {
|
|
height: 20px;
|
|
width: auto;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
// Landing page footer styles
|
|
[purpose='landing-footer'] {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
color: #FFFF;
|
|
background-color: #182147;
|
|
height: 60px;
|
|
}
|
|
|
|
body.detected-mobile {
|
|
// Above and beyond the media queries below, this selector (which relies on
|
|
// `parasails` automatically attaching this class, if appropriate) contains
|
|
// styles intended to be activated specifically when loaded from a recognized
|
|
// mobile device, regardless of viewport dimensions. This includes tablet
|
|
// devices (like the iPad) as well as handset devices (like the iPhone).
|
|
// …
|
|
}
|
|
@media (max-width: 992px) {
|
|
.homepage-cta-banner+.homepage-header-top {
|
|
top: 72px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
[purpose='page-wrap'] {
|
|
padding-bottom: 264px;
|
|
|
|
[purpose='page-footer'] {
|
|
height: 264px;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 605px) {
|
|
.homepage-cta-banner + .homepage-header-top {
|
|
top: 92px;
|
|
}
|
|
}
|
|
@media (max-width: 575px) {
|
|
[purpose='page-wrap'] {
|
|
padding-bottom: 371px;
|
|
[purpose='page-footer'] {
|
|
height: 371px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 490px) {
|
|
[purpose='header-ribbon-cta'] {
|
|
p {
|
|
width: 220px;
|
|
}
|
|
}
|
|
[purpose='page-wrap'] {
|
|
padding-bottom: 581px;
|
|
|
|
[purpose='page-footer'] {
|
|
height: 581px;
|
|
|
|
[purpose='footer-nav'] {
|
|
display: block;
|
|
}
|
|
[purpose='legal-nav'] {
|
|
padding-left: 0px;
|
|
display: block;
|
|
}
|
|
}
|
|
// Landing page footer styles
|
|
[purpose='landing-footer'] {
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 393px) {
|
|
.homepage-cta-banner + .homepage-header-top {
|
|
top: 112px;
|
|
}
|
|
}
|
|
@media (max-width: 330px) {
|
|
.homepage-cta-banner + .homepage-header-top {
|
|
top: 132px;
|
|
}
|
|
}
|
|
|
|
// Some utilities for the sticky nav behaviour
|
|
.translate-y-0 {
|
|
transform: translateY(-235px);
|
|
}
|