Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 09:28:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 30
fleet/website/assets/styles/pages/device-management.less
Eric d2f760e240
Website: Add Jamf Pro comparison to MDM features table. (#20465) 
Closes: #20439

Changes:
- Added a Jamf pro to the comparison table on the device management
page.

---------

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
2024-07-18 17:37:04 -05:00

988 lines
21 KiB
Text
Vendored
Raw Blame History

#device-management-page {
@heading-lineheight: 120%;
@text-lineheight: 150%;
background: linear-gradient(180deg, #E8F1F6 0%, #FFF 8.76%);
h1 {
font-size: 48px;
font-weight: 800;
line-height: @heading-lineheight;
}
h2 {
font-weight: 800;
font-size: 32px;
line-height: @heading-lineheight;
margin-bottom: 24px;
}
h3 {
font-size: 20px;
font-weight: 800;
line-height: @heading-lineheight;
}
h4 {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
text-transform: uppercase;
color: @core-fleet-black-75;
margin-bottom: 8px;
}
p {
font-size: 14px;
line-height: @text-lineheight;
color: @core-fleet-black-75;
}
strong {
color: @core-fleet-black;
}
[purpose='page-container'] {
padding-left: 64px;
padding-right: 64px;
padding-bottom: 64px;
padding-top: 64px;
margin-left: auto;
margin-right: auto;
}
[purpose='page-content'] {
max-width: 1072px;
}
[purpose='page-section'] {
padding-top: 64px;
padding-bottom: 64px;
}
[purpose='comparison-section'] {
padding-top: 64px;
padding-bottom: 64px;
}
[purpose='testimonials'] {
padding-top: 32px;
padding-bottom: 32px;
}
[purpose='testimonial-quote'] {
max-width: 640px;
a {
text-decoration: none;
color: unset;
&:hover {
text-decoration: none;
}
}
[purpose='quote'] {
p {
color: @core-fleet-black-75;
font-size: 20px;
font-style: italic;
font-weight: 400;
line-height: @text-lineheight;
}
}
[purpose='quote-image'] {
margin-right: 16px;
img {
width: 48px;
height: 48px;
}
}
[purpose='quote-attribution'] {
display: inline-flex;
padding: 4px 16px 4px 4px;
border-radius: 28px;
width: fit-content;
margin-top: 8px;
[purpose='name'] {
font-size: 12px;
font-weight: 700;
line-height: 18px;
margin-bottom: 0px;
}
[purpose='title'] {
color: @core-fleet-black-75;
font-size: 12px;
font-weight: 400;
line-height: 18px;
margin-bottom: 0px;
}
&:hover {
background-color: #F9FAFC;
}
&:active {
background-color: #F2F2F5;
}
}
}
[parasails-component='logo-carousel'] {
padding-top: 64px;
padding-bottom: 16px;
margin-bottom: 0px;
}
// Desktop features comparison table styles
[purpose='desktop-comparison-table'] {
margin-top: 32px;
}
[purpose='comparison-table-header'] {
font-size: 14px;
color: @core-fleet-black;
div {
padding: 12px 24px;
}
[purpose='comparison-selector'] {
width: 152px;
height: 48px;
border-radius: 8px;
padding: 0px 12px;
background: #FFF;
color: @core-fleet-black;
border: 1px solid @core-vibrant-blue-15;
cursor: pointer;
font-weight: 700;
}
[purpose='comparison-selector-dropwdown'] {
width: 152px;
cursor: pointer;
font-size: 14px;
padding: 0px;
.dropdown-item {
display: flex;
justify-content: center;
border-top: 1px solid @core-vibrant-blue-15;
padding: 0px 12px;
height: 48px;
&:active {
color: unset;
}
}
}
}
[purpose='comparison-column'] {
text-align: center;
display: flex;
justify-content: center;
align-self: center;
min-width: 200px;
}
[purpose='fleet-column'] {
text-align: center;
display: flex;
justify-content: center;
align-self: center;
min-width: 200px;
}
[purpose='feature-name'] {
width: 100%;
}
[purpose='table-new-badge'] {
background-color: #0587FF;
display: inline;
padding: 2.554px 5.109px;
align-items: center;
border-radius: 14px;
color: #FFF;
font-size: 7.024px;
font-weight: 500;
line-height: 11.494px;
text-transform: uppercase;
width: min-content;
}
[purpose='comparison-table'] {
border-radius: 8px;
border: 1px solid #E2E4EA;
margin-bottom: 32px;
[purpose='table-row'] {
div {
padding: 12px 24px;
display: flex;
align-items: center;
}
display: flex;
img {
width: 16px;
height: 16px;
&:not(:first-of-type) {
margin-left: 12px;
}
}
p {
margin-bottom: 0px;
}
&:not(:last-of-type) {
border-bottom: 1px solid #E2E4EA;
}
&:nth-of-type(even) {
background-color: #F9FAFC;
}
}
}
// Mobile features comparison table styles
[purpose='mobile-comparison-selector'] {
height: 48px;
display: flex;
width: 100%;
padding: 0px 12px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 6px;
border: 1px solid #E2E4EA;
background: #FFF;
margin-bottom: 48px;
font-weight: 700;
color: #192147;
}
[purpose='mobile-comparison-table'] {
p {
color: @core-fleet-black;
}
[purpose='comparison-selector-dropwdown'] {
width: calc(~' 100% - 48px');
cursor: pointer;
font-size: 14px;
padding: 0px;
.dropdown-item {
display: flex;
justify-content: center;
border-top: 1px solid @core-vibrant-blue-15;
padding: 0px 12px;
height: 48px;
&:active {
color: unset;
}
}
}
margin-top: 32px;
margin-bottom: 32px;
}
[purpose='feature-table'] {
display: flex;
flex-direction: column;
border-radius: 8px;
border: 1px solid #E2E4EA;
margin-bottom: 16px;
line-height: 21px;
font-size: 14px;
color: #515774;
[purpose='feature-name'] {
color: @core-fleet-black;
display: flex;
height: 36px;
padding: 12px 16px 12px 16px;
align-items: center;
align-self: stretch;
border-bottom: 1px solid #E2E4EA;
background-color: #F9FAFC;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
p {
margin-bottom: 0px;
font-size: 14px;
font-weight: 700;
line-height: 21px;
color: #192147;
}
}
[purpose='feature-table-row'] {
padding: 12px 16px;
display: flex;
flex-direction: row;
height: 36px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E2E4EA;
&:last-of-type {
border: none;
background-color: #F9FAFC;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
[purpose='feature-status'] {
display: flex;
flex-direction: row;
justify-content: center;
img {
height: 16px;
&:not(:first-of-type) {
margin-left: 8px;
}
}
}
}
[purpose='calendar-feature'] {
flex-direction: row-reverse !important;//lesshint-disable-line importantRule
h3 {
font-size: 32px;
margin-bottom: 32px;
}
[purpose='calendar-feature-text'] {
max-width: 480px;
p {
margin-bottom: 0px;
}
}
[purpose='new-badge'] {
background-color: #0587FF;
padding: 4px 8px 3px 8px;
display: flex;
align-items: center;
border-radius: 14px;
color: #FFF;
font-size: 12px;
font-weight: 500;
line-height: 18px;
text-transform: uppercase;
margin-bottom: 12px;
width: min-content;
}
[purpose='calendar-checklist'] {
margin-top: 8px;
margin-bottom: 24px;
p {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
padding-left: 37px;
text-indent: -37px;
margin-bottom: 1.5rem;
&:last-of-type {
margin-bottom: 0px;
}
}
p::before {
content: ' ';
background-image: url('/images/icon-checkmark-green-20x20@2x.png');
background-size: 20px 20px;
display: inline-block;
position: relative;
top: 5px;
margin-right: 16px;
width: 20px;
height: 20px;
}
}
[purpose='feature-video'] {
// margin-right: 0px;
max-width: 528px;
video {
max-width: 100%;
max-height: 100%;
border-radius: 16px;
}
}
[purpose='video-button'] {
margin-top: 32px;
cursor: pointer;
img {
height: 32px;
margin-right: 8px;
}
font-size: 14px;
font-weight: 700;
line-height: 21px;
}
}
[purpose='feature'] {
margin-bottom: 140px;
h3 {
margin-bottom: 24px;
}
&:last-of-type {
margin-bottom: 0px;
}
}
[purpose='feature-note'] {
padding-top: 40px;
font-size: 12px;
margin-bottom: 0px;
}
[purpose='feature-image'] {
max-width: 528px;
img {
border-radius: 8px;
max-width: 100%;
max-height: 100%;
width: 528px;
}
}
[purpose='feature'].flex-column {
[purpose='feature-text'] {
margin-left: 32px;
}
}
[purpose='feature'].flex-column-reverse {
[purpose='feature-text'] {
margin-right: 32px;
}
}
[purpose='feature-text'] {
width: 468px;
h2 {
margin-bottom: 32px;
}
p {
margin-bottom: 32px;
}
}
[purpose='checklist'] {
p {
font-size: 14px;
font-style: normal;
font-weight: 400;
padding-left: 37px;
text-indent: -37px;
margin-bottom: 24px;
&:last-of-type {
margin-bottom: 0px;
}
}
p::before {
content: ' ';
background-image: url('/images/icon-checkmark-green-20x20@2x.png');
background-size: 20px 20px;
display: inline-block;
position: relative;
top: 5px;
margin-right: 16px;
width: 20px;
height: 20px;
}
}
[purpose='feature-headline'] {
max-width: 510px;
margin-bottom: 80px;
}
[purpose='feature-row'] {
margin-bottom: 64px;
[purpose='feature-column'] {
margin-left: 32px;
margin-right: 32px;
max-width: 440px;
p {
font-size: 14px;
margin-bottom: 0px;
}
img {
height: 48px;
width: auto;
margin-bottom: 16px;
}
h5 {
font-weight: 800;
font-size: 16px;
line-height: @heading-lineheight;
margin-bottom: 16px;
}
}
}
[purpose='three-column-features'] {
margin-bottom: 160px;
max-width: 1080px;
[purpose='feature-row'] {
[purpose='feature-column'] {
max-width: 267px;
}
}
}
[purpose='button-row'] {
a {
font-weight: 700;
font-size: 16px;
line-height: @text-lineheight;
white-space: nowrap;
}
[purpose='cta-button'] {
cursor: pointer;
margin-right: 32px;
background: @core-vibrant-red;
border-radius: 8px;
padding: 16px 32px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
position: relative;
text-decoration: none;
overflow: hidden;
}
[purpose='cta-button']::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: 70%;
height: 100%;
transform: skew(-10deg);
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%;
}
}
[purpose='tweets-container'] {
padding-top: 64px;
max-width: 1072px;
padding-left: 64px;
padding-right: 64px;
}
[parasails-component='scrollable-tweets'] {
[purpose='tweets'] {
margin-top: 40px;
margin-bottom: 0px;
padding-bottom: 64px;
padding-left: 64px;
}
}
[purpose='bottom-gradient'] {
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
}
[purpose='bottom-cloud-city-banner'] {
background: linear-gradient(180deg, #E9F4F4 0%, #FFFFFF 100%);
img {
width: 100%;
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
width: 100%;
max-width: 100%;
}
[purpose='modal-content'] {
max-width: 1140px;
height: 641px;
background-color: transparent;
box-shadow: none;
border: none;
padding: 0px;
margin-top: 150px;
margin-left: auto;
margin-right: auto;
[purpose='modal-close-button'] {
top: -40px;
right: 0px;
border-radius: 50%;
width: 32px;
height: 32px;
padding: 0px 0px 4px 0px;
background-color: #192147;
color: #FFF;
opacity: 1;
}
}
iframe {
width: 1140px;
height: 641px;
}
}
@media (max-width: 1199px) {
[purpose='feature'].flex-column {
[purpose='feature-text'] {
margin-left: 32px;
}
}
[purpose='feature'].flex-column-reverse {
[purpose='feature-text'] {
margin-right: 32px;
}
}
[purpose='feature-image'] {
// max-width: 528px;
img {
border-radius: 8px;
max-width: 100%;
max-height: 100%;
width: 455px;
}
}
[purpose='calendar-feature'] {
[purpose='feature-video'] {
// width: 455px;
margin-right: 16px;
}
[purpose='calendar-feature-text'] {
margin-left: 32px;
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
width: 100%;
max-width: 100%;
}
[purpose='modal-content'] {
max-width: 1072px;
height: 540px;
}
iframe {
width: 1072px;
height: 540px;
}
}
}
@media (max-width: 990px) {
[purpose='page-container'] {
padding-left: 32px;
padding-right: 32px;
}
[purpose='tweets-container'] {
padding-left: 32px;
padding-right: 32px;
}
[parasails-component='scrollable-tweets'] {
[purpose='tweets'] {
padding-left: 32px;
}
}
[purpose='feature-row'] {
[purpose='feature-column'] {
margin-left: 8px;
margin-right: 8px;
width: 50%;
}
}
[purpose='testimonial-videos'] {
width: 410px;
}
[purpose='hero-text'] {
width: 410px;
}
[purpose='feature-text'] {
width: 410px;
}
[purpose='feature'].flex-column {
[purpose='feature-text'] {
margin-left: 40px;
}
}
[purpose='feature'].flex-column-reverse {
[purpose='feature-text'] {
margin-right: 40px;
}
}
[purpose='comparison-column'] {
max-width: 140px;
min-width: 160px;
}
[purpose='comparison-table-header'] {
font-size: 14px;
div {
padding: 12px 24px;
}
[purpose='comparison-selector'] {
min-width: 152px;
height: 48px;
border-radius: 8px;
padding: 0px 12px;
background: #FFF;
border: 1px solid @core-vibrant-blue-15;
cursor: pointer;
}
[purpose='comparison-selector-dropwdown'] {
width: 152px;
cursor: pointer;
padding: 0px;
.dropdown-item {
display: flex;
justify-content: center;
border-top: 1px solid @core-vibrant-blue-15;
padding: 0px 12px;
}
}
}
[purpose='fleet-column'] {
min-width: 140px;
max-width: 140px;
}
[purpose='comparison-table-header'] {
div {
padding: 12px 16px;
}
}
[purpose='comparison-table'] {
border-radius: 8px;
border: 1px solid #E2E4EA;
[purpose='table-row'] {
div {
padding: 12px 16px;
}
}
}
}
@media (max-width: 767px) {
[purpose='page-headline'] {
width: 100%;
h2 {
font-size: 42px;
}
}
[purpose='calendar-feature'] {
[purpose='feature-video'] {
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
max-width: 100%;
video {
width: 100%;
}
}
[purpose='calendar-feature-text'] {
margin-left: 0;
}
}
[purpose='feature-image'] {
max-width: 100%;
margin-bottom: 64px;
img {
border-radius: 8px;
max-width: 100%;
max-height: 100%;
width: 100%;
}
}
[purpose='calendar-feature'] {
flex-direction: column-reverse !important;//lesshint-disable-line importantRule
}
[purpose='calendar-card-body'] {
width: 100%;
padding-left: 24px;
padding-right: 24px;
padding-bottom: 48px;
padding-top: 60px;
margin-right: 0px;
text-align: center;
}
[purpose='calendar-card'] {
height: unset;
}
[purpose='calendar-image'] {
padding-top: 0;
padding-bottom: 0;
height: 420px;
width: 100%;
&:before {
content: '';
background: none;
}
}
[purpose='feature-text'] {
width: 510px;
margin-left: auto;
margin-right: auto;
}
[purpose='feature'].flex-column {
[purpose='feature-text'] {
margin-left: auto;
}
}
[purpose='feature'].flex-column-reverse {
[purpose='feature-text'] {
margin-right: auto;
}
}
[purpose='feature-image'] {
margin-bottom: 60px;
&.left {
margin-right: auto;
}
&.right {
margin-left: auto;
}
}
[purpose='hero-image'] {
margin-bottom: 60px;
}
[purpose='section-headline'] {
h1 {
font-size: 32px;
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
max-width: 97vw;
}
[purpose='modal-content'] {
max-width: 540px;
height: 304px;
}
iframe {
width: 540px;
height: 304px;
}
}
}
@media (max-width: 575px) {
[purpose='feature-text'] {
width: 100%;
margin-left: auto;
margin-right: auto;
}
[purpose='feature-image'] {
margin-bottom: 48px;
img {
max-width: 100%;
}
}
[purpose='hero-image'] {
img {
max-width: 100%;
}
}
[purpose='page-container'] {
padding: 64px 24px;
}
[parasails-component='scrollable-tweets'] {
[purpose='tweets'] {
padding-left: 24px;
}
}
[purpose='page-section'] {
padding-top: 48px;
padding-bottom: 48px;
}
[purpose='calendar-section'] {
padding: 0px 24px 40px 24px;
}
[purpose='testimonial-quote'] {
[purpose='quote'] {
p {
font-size: 16px;
}
}
}
[purpose='video-modal'] {
[purpose='modal-content'] {
width: 95vw;
height: calc(~'9/16 * 95vw');
}
iframe {
width: 95vw;
height: calc(~'9/16 * 95vw');
}
}
[purpose='two-column-features'] {
[purpose='feature-row'] {
margin-bottom: 64px;
[purpose='feature-column'] {
max-width: unset;
margin-bottom: 64px;
margin-left: 0px;
margin-right: 0px;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
p {
margin-bottom: 0px;
}
}
}
}
}
@media (max-width: 390px) {
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
[purpose='testimonial-quote'] {
[purpose='quote'] {
p {
font-size: 16px;
}
}
}
[purpose='page-headline'] {
width: 100%;
h2 {
font-size: 24px;
}
}
[purpose='calendar-feature-text'] {
h3 {
font-size: 24px;
}
}
[purpose='feature-table'] {
[purpose='feature-name'] {
display: flex;
height: unset;
}
}
[parasails-component='logo-carousel'] {
padding-top: 32px;
}
[purpose='calendar-image'] {
height: 287px;
}
[purpose='calendar-card-body'] {
padding-left: 16px;
padding-right: 16px;
}
[purpose='calendar-section'] {
padding: 0px 16px 40px 16px;
}
[purpose='page-container'] {
padding: 48px 16px;
}
[purpose='mobile-comparison-table'] {
[purpose='comparison-selector-dropwdown'] {
dispaly: flex;
flex-direction: column;
width: calc(~' 100% - 32px');
}
}
[purpose='tweets-container'] {
padding-left: 16px;
padding-right: 16px;
}
[parasails-component='scrollable-tweets'] {
[purpose='tweets'] {
margin-top: 32px;
margin-bottom: 0px;
padding-left: 16px;
padding-bottom: 32px;
}
}
}
}
Reference in a new issue View git blame Copy permalink