@front10/landing-page-book

Version:
A react library for landing page
67 lines (55 loc) • 2.13 kB
CSS
:root {
  --Card__Summary-fontSize: 0.8rem;
  --Card__Title-fontSize: 1.2rem;
  --Card__Subtitle-fontSize: 0.9rem;
  --Card-boxShadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }

:root {
  --Image-boxShadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }

.img-shadow {
  box-shadow: var(--Image-boxShadow); }

.Card {
  border: none;
  background-color: transparent; }
  .Card .Card__Summary {
    font-size: var(--Card__Summary-fontSize); }
  .Card .Card__Summary--justified {
    text-align: justify; }
  .Card .Card__Title {
    font-size: var(--Card__Title-fontSize); }
  .Card .Card__Subtitle {
    font-size: var(--Card__Subtitle-fontSize); }

.Card--shadow {
  box-shadow: var(--Card-boxShadow); }

:root {
  --Features__CardFooter__Link-padding: none;
  --Features__CardFooter__Link-box-shadow: none;
  --Features__CardFooter__Link-background-color: none;
  --Features__CardFooter__Link-box-shadow-hover: none;
  --Features__CardFooter__Link-background-color-hover: none;
  --Features__CardFooter__Link-color: none;
  --Features__CardFooter__Link-fontSize: none;
  --Features__Image-width: 100px;
  --Features__Image-height: 100px; }

.Features .Card img {
  width: var(--Features__Image-width);
  height: var(--Features__Image-height);
  margin-top: 1.25rem;
  padding: 1rem; }

.Features--center .Card img {
  margin-left: auto;
  margin-right: auto; }

.Features--left .Card img {
  margin-right: auto; }

.Features--right .Card img {
  margin-left: auto; }

.Features .card .card-footer a {
  padding: var(--Features__CardFooter__Link-padding);
  box-shadow: var(--Features__CardFooter__Link-box-shadow);
  background-color: var(--Features__CardFooter__Link-background-color);
  color: var(--Features__CardFooter__Link-color);
  font-size: var(--Features__CardFooter__Link-fontSize); }

.Features .card .card-footer a:focus,
.Features .card .card-footer a:active,
.Features .card .card-footer a:hover {
  background-color: var(--Features__CardFooter__Link-background-color-hover) !important;
  box-shadow: var(--Features__CardFooter__Link-box-shadow-hover) !important; }