open-consul/website/components/cloud-offerings-list/style.css
Kendall Strautman e33ed2356e
[Assembly]: Website Branding Refresh (#9884)
* style: update gray brand colors

* style: update brand colors

* chore: upgrades base platform deps

* style: updates learn callouts label color

* style: icons to flat consul primary color

* style: errand link styles

* refactor(home): use react-learn-callout

* chore; adds ts config, upgrades components

* chore: upgrade deps

chore: upgrade to latest component styles

chore: upgrades nextjs-scripts

* chore: fix-router

* update deps, add new downloads page

* chore: upgrade to stable deps

chore: use npm 7

* style: home callouts body copy to gray-2

* chore: upgrade hashi-stack-menu

* style: home feature icons update

* chore: upgrade deps body copy colors

* chore: upgrades alert banner

* feat: updates favicon

* style(downloads): adds pre-release and release candidate styles

* fix(home): adds right padding to quote

* content(home): swap assets

* content(uses-cases): updates assets

* chore: removes use cases icon override

* content(use-cases): swap out svgs for pngs

* content: copies asset

* trying again with this asset

* try putting asset in public

* content(use-cases): updates mercedes case study aseset

* chore: upgrades product download page prerelease

* chore: updates product download page to stable

* chore: updates favicon path

Co-authored-by: Jeff Escalante <jescalan@users.noreply.github.com>
2021-05-03 12:01:36 -07:00

58 lines
1 KiB
CSS

ul.g-cloud-offerings-list {
list-style: none;
padding: 0;
margin: -16px;
display: flex;
@media (width < 769px) {
flex-direction: column;
}
& li {
flex-grow: 1;
margin: 16px;
background: var(--white);
border: 1px solid var(--gray-5);
border-radius: 2px;
text-align: center;
transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
&:hover {
box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
transform: translateY(-4px);
cursor: pointer;
}
& > a {
display: block;
padding: 32px;
color: inherit;
& > img {
display: block;
width: 400px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 14px;
}
& > span {
color: var(--gray-3);
}
& > h4 {
text-decoration: none;
margin-top: 8px;
margin-bottom: 0;
}
& > p {
font-size: 19px;
margin-top: 8px;
margin-bottom: 24px;
}
}
}
}