You are here

Home » API reference » Gin Layout Builder 8.2

wingsuit-lb.link.css in Gin Layout Builder 8.2 

.ws-lb-link {
  width: 100%;
  position: relative;
  padding-bottom: 56%;
  border: 1px solid var(--colorGinTableBorder);
  border-radius: 8px;
  overflow: hidden;
  background-color: #F3F4F6;
}

.ws-lb-link:hover {
  box-shadow: 4px 4px 10px var(--colorGinLayer2Background);
}

.ws-lb-link__label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: left;
  font-weight: bold;
  background-color: #ffffff;
  padding: 12px;
  box-shadow: 0px -15px 20px rgba(243, 244, 246, 0.9);
}

.ws-lb-link svg, .ws-lb-link img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  padding: 10px 40px;
  transform: translate(-50%, -50%);
}

File

modules/wingsuit_lb/css/wingsuit-lb.link.css
View source 
  1. .ws-lb-link {

  2.   width: 100%;

  3.   position: relative;

  4.   padding-bottom: 56%;

  5.   border: 1px solid var(--colorGinTableBorder);

  6.   border-radius: 8px;

  7.   overflow: hidden;

  8.   background-color: #F3F4F6;

  9. }

  10. 

  11. .ws-lb-link:hover {

  12.   box-shadow: 4px 4px 10px var(--colorGinLayer2Background);

  13. }

  14. 

  15. .ws-lb-link__label {

  16.   position: absolute;

  17.   bottom: 0;

  18.   left: 0;

  19.   width: 100%;

  20.   text-align: left;

  21.   font-weight: bold;

  22.   background-color: #ffffff;

  23.   padding: 12px;

  24.   box-shadow: 0px -15px 20px rgba(243, 244, 246, 0.9);

  25. }

  26. 

  27. .ws-lb-link svg, .ws-lb-link img {

  28.   max-width: 100%;

  29.   max-height: 100%;

  30.   width: auto;

  31.   position: absolute;

  32.   top: calc(50% - 20px);

  33.   left: 50%;

  34.   padding: 10px 40px;

  35.   transform: translate(-50%, -50%);

  36. }