paesaggistica/liferay-plugins-sdk-6.2/themes/portos-private-fe-theme/docroot/css/component/mediaobject.scss

@import "compass";

.aui {
  .page-list {
    .mediaobject {
      padding: 50px;
      vertical-align: top;

      @media (max-width: $tablet) {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-right: 15px;
        padding-left: 15px;
      }

      @media (max-width: $mobile) {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 15px;
        padding-left: 15px;
      }

      &:hover {
        .page_title.green b {
          color: $green-menu;
        }
        .page_title.blue b {
          color: $blue-menu;
        }
        .page_title.yellow b {
          color: $yellow-menu;
        }
        .page_title.red b {
          color: $red-menu;
        }
        .page_title.orange b {
          color: $orange-menu;
        }
        .page_title.camel b {
          color: $camel-menu;
        }
        .page_title.purple b {
          color: $purple-menu;
        }
      }

      .container-icon {
        width: em(210px);
        height: em(210px);
        border-radius: 50%;
        margin: 0 auto;
        @include display-flex();
        @include justify-content(center);
        @include align-items(center);

        .mediaobject_icon {
          font-size: em(110px);
          color: $w;
        }
      }
      .page_title_outer {
        position: relative;
        @include display-flex();
        @include align-items(center);
        @include justify-content(center);
        margin-top: 20px;
        margin-bottom: 20px;

        .page_title {
          position: relative;
          width: 100%;
          text-align: center;
          margin: 0;
          font-size: em(30px);
          font-family: $second-font;
          b {
            transition: all $speed;
          }
          .title_down {
            display: inline-block;
          }
        }
      }

      .page_description:before {
        content: "";
        width: 10%;
        margin: 0px auto 20px;
        background: blue;
        height: 3px;
        display: block;
      }

    }
  }

  .mediaobject.green {
    .container-icon, .page_description:before {
      background-color: $green-menu;
    }
  }
  .mediaobject.blue {
    .container-icon, .page_description:before {
      background-color: $blue-menu;
    }
  }
  .mediaobject.yellow {
    .container-icon, .page_description:before {
      background-color: $yellow-menu;
    }
  }
  .mediaobject.red {
    .container-icon, .page_description:before {
      background-color: $red-menu;
    }
  }
  .mediaobject.orange {
    .container-icon, .page_description:before {
      background-color: $orange-menu;
    }
  }
  .mediaobject.camel {
    .container-icon, .page_description:before {
      background-color: $camel-menu;
    }
  }
  .mediaobject.purple {
    .container-icon, .page_description:before {
      background-color: $purple-menu;
    }
  }
}