open-consul/website/components/learn-callout/style.css

169 lines
3.0 KiB
CSS
Raw Normal View History

2020-04-24 18:52:30 +00:00
.g-learn-callout {
padding-top: 88px;
padding-bottom: 88px;
@media (max-width: 768px) {
padding-top: 64px;
padding-bottom: 64px;
}
& .learn-container {
@media (max-width: 1200px) {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
& .mobile-button {
@media (min-width: 1201px) {
display: none;
}
}
}
& .column-container {
display: flex;
justify-content: space-between;
margin: 0 36px;
@media (max-width: 1200px) {
margin: 0 -16px;
flex-wrap: wrap;
}
& .column-content {
& h2 {
@media (max-width: 1200px) {
margin: 0;
}
}
}
& .desktop-button {
@media (max-width: 1200px) {
display: none;
}
}
& > div {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 16px;
width: 33.333%;
overflow: auto;
@media (max-width: 1200px) {
text-align: center;
display: block;
width: 100%;
margin: 0;
margin-bottom: 48px;
}
}
& > a {
margin: 0 16px;
width: 33.333%;
transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
2020-05-19 19:29:18 +00:00
display: flex;
cursor: pointer;
2020-04-24 18:52:30 +00:00
&:hover {
2020-05-19 19:29:18 +00:00
box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
2020-04-24 18:52:30 +00:00
transform: translateY(-4px);
}
@media (max-width: 1200px) {
width: calc(50% - 32px);
margin-bottom: 48px;
}
@media (max-width: 768px) {
width: 100%;
&:last-child {
margin-bottom: 48px;
}
}
2020-05-19 19:29:18 +00:00
& .course {
border: 1px solid var(--gray-6);
2020-04-24 18:52:30 +00:00
display: flex;
2020-05-19 19:29:18 +00:00
flex-direction: column;
width: 100%;
2020-04-24 18:52:30 +00:00
2020-05-19 19:29:18 +00:00
& > div {
min-height: 200px;
padding: 25px;
2020-04-24 18:52:30 +00:00
}
2020-05-19 19:29:18 +00:00
& .image {
background: var(--gray-7);
position: relative;
2020-04-24 18:52:30 +00:00
display: flex;
justify-content: center;
align-items: center;
2020-05-19 19:29:18 +00:00
& img {
max-width: 80px;
max-height: 80px;
width: 100%;
}
2020-04-24 18:52:30 +00:00
}
& h4 {
2020-05-19 19:29:18 +00:00
color: var(--gray-2);
}
& .time {
color: var(--gray-4);
position: absolute;
top: 10px;
right: 10px;
}
& .content {
text-align: center;
background: #fff;
@media (max-width: 768px) {
display: flex;
justify-content: center;
align-items: center;
}
& h4 {
margin: 24px 0;
}
2020-04-24 18:52:30 +00:00
}
}
}
2020-05-19 19:29:18 +00:00
&.brand-consul {
& .content label {
color: var(--consul);
}
2020-04-24 18:52:30 +00:00
}
2020-05-19 19:29:18 +00:00
/* Brand -- Nomad */
&.brand-nomad {
& .content label {
color: var(--nomad);
}
2020-04-24 18:52:30 +00:00
}
2020-05-19 19:29:18 +00:00
/* Brand -- Packer */
&.brand-packer {
& .content label {
color: var(--packer);
}
2020-04-24 18:52:30 +00:00
}
2020-05-19 19:29:18 +00:00
/* Brand -- Terraform */
&.brand-terraform {
& .content label {
color: var(--terraform);
}
2020-04-24 18:52:30 +00:00
}
}
}