You are here

Home » API reference » View Modes Inventory - Bootstrap Ready 8.2

hero-xlarge.css in View Modes Inventory - Bootstrap Ready 8.2

Same filename in this branch
  1. 8.2 css/hero/layout/hero-xlarge.css
  2. 8.2 css/hero/theme/hero-xlarge.css
Same filename and directory in other branches
  1. 8 css/hero/theme/hero-xlarge.css
.hero-view-mode.xlarge .hero-content {
  color: #fff;
  background: black;
  background: rgba(0, 0, 0, 0.7);
}

.hero-view-mode.xlarge .hero-content h3 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: calc(1.425rem + 2.1vw);
}

@media (min-width: 1200px) {
  .hero-view-mode.xlarge .hero-content h3 {
    font-size: 3rem;
  }
}

.hero-view-mode.xlarge .hero-content a {
  text-decoration: none;
  color: #fff;
}

.hero-view-mode.xlarge .hero-content:hover,
.hero-view-mode.xlarge .hero-content:focus,
.hero-view-mode.xlarge .hero-content:active {
  opacity: 0.7;
}

File

css/hero/theme/hero-xlarge.css
View source 
  1. .hero-view-mode.xlarge .hero-content {

  2.   color: #fff;

  3.   background: black;

  4.   background: rgba(0, 0, 0, 0.7);

  5. }

  6. 

  7. .hero-view-mode.xlarge .hero-content h3 {

  8.   margin: 0;

  9.   padding: 0;

  10.   color: #fff;

  11.   font-size: calc(1.425rem + 2.1vw);

  12. }

  13. 

  14. @media (min-width: 1200px) {

  15.   .hero-view-mode.xlarge .hero-content h3 {

  16.     font-size: 3rem;

  17.   }

  18. }

  19. 

  20. .hero-view-mode.xlarge .hero-content a {

  21.   text-decoration: none;

  22.   color: #fff;

  23. }

  24. 

  25. .hero-view-mode.xlarge .hero-content:hover,

  26. .hero-view-mode.xlarge .hero-content:focus,

  27. .hero-view-mode.xlarge .hero-content:active {

  28.   opacity: 0.7;

  29. }