egghead-styles 1.0.29

data/app/assets/stylesheets/components/technology/page-all-technologies/_page-all-technologies.css.scss

@@ -0,0 +1,798 @@
+.technology-pages-wrapper {
+
+  // Jump Into These Technologies section
+  .section-jump-into-technologies {
+    .section-title-holder {
+      position: relative;
+      z-index: 1;
+      padding: 40px 0;
+      background: url('elements/section-title-bg.png') 0 0 repeat;
+      background-size: 150px 150px; // Made it compressed (original size is 300x300) because of blurring on Retina
+      text-align: center;
+      box-shadow: 0 2px 5px $color-alto;
+      .title {
+        font-style: italic;
+        font-size: 40px;
+        line-height: 50px;
+        color: $color-mine-shaft;
+        margin: 0;
+      }
+      @include respond-to(tablets-portrait) {
+        padding: 20px 30px;
+        .title {
+          font-size: 30px;
+          line-height: 40px;
+        }
+      }
+      @include respond-to(phones-landscape) {
+        padding: 15px;
+        background: $color-wild-sand;
+        box-shadow: none;
+        flex-shrink: 0;
+        .title {
+          font-size: 18px;
+          line-height: 20px;
+          text-align: left;
+        }
+      }
+    }
+    .section-content-holder {
+      display: flex;
+      flex-grow: 1;
+      padding: 25px 0;
+      justify-content: center;
+      background: $color-white;
+      @include respond-to(tablets-portrait) {
+        padding-left: 30px;
+        padding-right: 30px;
+      }
+      @include respond-to(phones-landscape) {
+        padding: 0;
+        background: $color-wild-sand;
+        overflow: scroll;
+        &::-webkit-scrollbar { width: 0 !important }
+      }
+    }
+    #jump-into-technologies {
+      overflow: hidden;
+      @include respond-to(phones-landscape) {
+        display: flex;
+        flex-direction: column;
+        height: 0;
+        transition: all 300ms 0s ease-in;
+        box-shadow: 0 2px 4px $color-dusty-gray;
+        background: $color-wild-sand;
+        position: relative;
+        &:after {
+          content: '';
+          width: 100%;
+          height: 20px;
+          position: absolute;
+          z-index: 1;
+          left: 0;
+          bottom: 10px;
+          @include gradient-vertical(rgba($color-wild-sand, 0), rgba($color-wild-sand, 1), 0%, 100%);
+        }
+        &.expanded {
+          height: 325px;
+          padding-bottom: 10px;
+        }
+      }
+    }
+    .sticky-trigger {
+      display: none;
+      font-size: 12px;
+      line-height: 16px;
+      padding: 4px 5px 4px 15px;
+      height: 24px;
+      background: $color-emperor;
+      color: $color-white;
+      font-style: italic;
+      font-weight: 600;
+      text-decoration: none;
+      position: absolute;
+      z-index: 1;
+      &:after {
+        position: absolute;
+        right: -18px;
+        top: 0;
+        content: '';
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 24px 18px 0 0;
+        border-color: $color-emperor transparent transparent transparent;
+      }
+      .caret {
+        margin-left: 10px;
+        &:before {
+          display: flex;
+          content: '';
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-width: 5px 4px 0 4px;
+          border-color: $color-silver-chalice transparent transparent transparent;
+        }
+      }
+      &.clicked {
+        .caret {
+          &:before {
+            border-width: 0 4px 5px 4px;
+            border-color: transparent transparent $color-silver-chalice transparent;
+          }
+        }
+      }
+      @include respond-to(phones-landscape) {
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+    .technologies-list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      max-width: 930px;
+      a, a:hover, a:visited {
+        color: inherit;
+        text-decoration: none;
+      }
+      a:hover .text-holder {
+        color: lighten($color-emperor, 20);
+      }
+      .item-wrapper {
+        display: flex;
+        flex-basis: 33.33333%;
+      }
+      .item {
+        display: flex;
+        padding: 15px 40px 15px 0;
+      }
+      .tech-logo-holder {
+        padding-right: 20px;
+        margin-top: 8px;
+        flex-shrink: 0;
+      }
+      .tech-logo {
+        width: 46px;
+        max-height: 50px;
+        display: block;
+      }
+      .title-holder {
+        display: flex;
+        margin-bottom: 3px;
+      }
+      .title {
+        margin: 0;
+        color: $color-emperor;
+        font-size: 16px;
+        margin-right: 10px;
+      }
+      @include respond-to(tablets-portrait) {
+        .tech-logo-holder {
+          padding-right: 15px;
+        }
+        .tech-logo {
+          width: 35px;
+          max-height: 38px;
+        }
+        .title {
+          font-size: 14px;
+        }
+      }
+      @include respond-to(phones-landscape) {
+        justify-content: space-around;
+        padding: 0 15px 30px 15px;
+        .item-wrapper {
+          flex-basis: 25%;
+          align-items: center;
+          justify-content: center;
+        }
+        .item {
+          flex-direction: column;
+          width: 76px;
+          padding: 5px;
+          border: none;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 15px;
+          background: $color-white;
+          border-radius: 3px;
+          box-shadow: 0 2px 4px $color-silver-chalice;
+        }
+        .text-holder {
+          display: none;
+        }
+        .title-holder {
+          flex-direction: column;
+          align-items: center;
+        }
+        .badge {
+          align-self: center;
+        }
+        .title {
+          display: none;
+        }
+        .tech-logo-holder {
+          padding: 0;
+          margin: 0 0 5px 0;
+        }
+        .tech-logo {
+          width: 38px;
+          max-height: 41px;
+        }
+      }
+      @include respond-to(phones-portrait) {
+        .item-wrapper {
+          flex-basis: 33.33333%;
+        }
+      }
+    }
+    @include respond-to(phones-landscape) {
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  // Technology Details section
+  .section-technology-details {
+    padding: 55px 0;
+    .section-inner {
+      max-width: 1260px;
+      padding: 0 20px;
+      margin: 0 auto;
+    }
+    .technology-set {
+      &:not(:last-child) {
+        margin-bottom: 100px;
+      }
+    }
+    .section-title-holder {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+      .tech-logo {
+        width: 46px;
+        max-height: 50px;
+        margin-right: 10px;
+      }
+      .section-title {
+        color: $color-cape-cod;
+        font-size: 50px;
+        line-height: 50px;
+        font-weight: 400;
+        margin: 0;
+      }
+      @include respond-to(tablets-portrait) {
+        .tech-logo {
+          width: 38px;
+          max-height: 41px;
+        }
+        .section-title {
+          font-size: 36px;
+          line-height: 40px;
+        }
+      }
+      @include respond-to(phones-landscape) {
+        margin-bottom: 10px;
+        .tech-logo {
+          width: 30px;
+          max-height: 33px;
+        }
+        .section-title {
+          font-size: 32px;
+          line-height: 34px;
+        }
+      }
+    }
+    .grid-row {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .grid-item {
+      display: flex;
+    }
+    .card {
+      background: $color-white;
+      border: 1px solid $color-alto;
+      box-shadow: 0 2px 4px $color-alto;
+      padding: 20px;
+      flex-grow: 1;
+      font-size: 15px;
+      color: $color-mako;
+      .info-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .lesson-info-line {
+          display: flex;
+          align-items: flex-start;
+          a, span {
+            margin-left: 15px;
+            color: $color-dove-gray;
+            text-decoration: none;
+            &:first-child {
+              margin-left: 0;
+            }
+          }
+        }
+        .lesson-tech-logo {
+          width: 18px;
+          max-height: 20px;
+        }
+        .author {
+          display: flex;
+          align-items: flex-start;
+          &:before {
+            content: '';
+            background: url('../images/elements/egg.svg') 0 0 no-repeat;
+            background-size: 9px 11px;
+            width: 9px;
+            height: 11px;
+            margin-right: 3px;
+            margin-top: 2px;
+          }
+        }
+        .duration {
+          .icon {
+            margin-right: 3px;
+          }
+        }
+        .link-add-to {
+          color: $color-dove-gray;
+          text-decoration: none;
+          font-size: 14px;
+          .icon {
+            margin-right: 5px;
+          }
+        }
+        .btn-play {
+          font-size: 20px;
+          color: $color-submarine;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          text-decoration: none;
+          height: 36px;
+          border: 1px solid $color-alto;
+          border-radius: 10px;
+          padding: 9px 20px;
+        }
+        @include respond-to(phones-landscape) {
+          .lesson-info-line {
+            font-size: 12px;
+            a, span {
+              margin-left: 10px;
+              &:first-child {
+                margin-left: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Courses section card
+    .card-course {
+      @extend .card;
+      padding: 30px;
+      position: relative;
+      height: auto;
+      .course-author-avatar {
+        width: 36px;
+        height: 36px;
+        border: 3px solid $color-wild-sand;
+        border-radius: 50%;
+        position: absolute;
+        top: -18px;
+        left: 50%;
+        margin-left: -18px;
+        z-index: 1;
+      }
+      .course-subtitle {
+        color: $color-submarine;
+        text-transform: uppercase;
+        font-size: 12px;
+        line-height: 14px;
+        text-align: center;
+        margin-bottom: 10px;
+      }
+      .course-title {
+        margin-bottom: 20px;
+        font-size: 23px;
+        line-height: 24px;
+        text-align: center;
+        color: $color-nevada;
+        font-weight: 400;
+      }
+      .card-content {
+        display: flex;
+        .course-image-holder {
+          flex-basis: 20%;
+          flex-shrink: 0;
+          margin-right: 25px;
+        }
+        .course-image {
+          width: 100%;
+        }
+        .course-description-holder {
+          flex-grow: 1;
+        }
+        .description-text {
+          font-size: 16px;
+          line-height: 20px;
+          color: $color-dusty-gray;
+          margin-bottom: 20px;
+        }
+      }
+      .lessons-in-course-number-holder {
+        .title {
+          font-size: 20px;
+          font-style: italic;
+          color: $color-fiord;
+          margin-bottom: 15px;
+        }
+      }
+      @include respond-to(phones-landscape) {
+        padding: 25px 15px 15px 15px;
+        .course-subtitle {
+          font-size: 10px;
+          margin-bottom: 5px;
+        }
+        .course-title {
+          font-size: 16px;
+          line-height: 18px;
+          margin-bottom: 15px;
+        }
+        .card-content {
+          .course-image-holder {
+            margin-right: 15px;
+          }
+          .description-text {
+            font-size: 12px;
+            line-height: 15px;
+            margin-bottom: 10px;
+          }
+        }
+        .lessons-in-course-number-holder {
+          .title {
+            font-size: 12px;
+            margin-bottom: 5px;
+          }
+        }
+      }
+    }
+
+    // Lessons section card
+    .card-lesson {
+      @extend .card;
+      @extend .ticket-stub;
+      padding: 15px 25px;
+      .title {
+        font-size: 15px;
+        color: $color-cape-cod;
+        margin-bottom: 7px;
+      }
+      .description-holder {
+        margin-bottom: 10px;
+      }
+      @include respond-to(phones-landscape) {
+        padding: 15px;
+        .title {
+          font-size: 13px;
+          margin-bottom: 5px;
+        }
+        .description-holder {
+          font-size: 12px;
+        }
+      }
+    }
+
+    // Playlists section card
+    .card-featured-playlist {
+      @extend .card;
+      padding: 0;
+      display: flex;
+      .card-spine {
+        padding: 15px 0;
+        display: flex;
+        justify-content: center;
+        background: rgba($color-silver-chalice, 0.8);
+        color: $color-white;
+        font-size: 18px;
+        flex-basis: 26px;
+        flex-shrink: 0;
+      }
+      .card-content {
+        padding: 15px 15px 15px 10px;
+      }
+      .title {
+        font-size: 16px;
+        color: $color-cape-cod;
+        margin-bottom: 7px;
+      }
+      .description-holder {
+        margin-bottom: 10px;
+      }
+      .lessons-preview {
+        margin-bottom: 15px;
+        .title {
+          font-size: 14px;
+          font-style: italic;
+          margin-bottom: 5px;
+          span {
+            font-size: 13px;
+            font-weight: 400;
+          }
+        }
+      }
+      .lessons-list {
+        margin: 0;
+        padding: 0 0 0 7px;
+        list-style: none;
+        position: relative;
+        &:before {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+          @include gradient-vertical(rgba($color-white, 0.1), rgba($color-white, 0.9), 0%, 100%);
+        }
+        li {
+          position: relative;
+          padding-left: 10px;
+          border-left: 2px solid $color-silver-chalice;
+          &:before {
+            content: '';
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: $color-silver-chalice;
+            left: -4px;
+            top: 5px;
+            display: block;
+          }
+        }
+      }
+      .progress-bar-row {
+        margin-bottom: 15px;
+      }
+      @include respond-to(phones-landscape) {
+        .title {
+          font-size: 13px;
+        }
+        .description-holder {
+          font-size: 12px;
+          margin-bottom: 5px;
+        }
+        .lessons-list {
+          font-size: 13px;
+        }
+        .progress-bar-row {
+          margin-bottom: 5px;
+        }
+      }
+    }
+    .subsection:not(:last-child) {
+      margin-bottom: 40px;
+      @include respond-to(phones-landscape) {
+        margin-bottom: 30px;
+      }
+    }
+
+    // Courses subsection grid special values
+    .subsection-courses {
+      .grid-row {
+        margin: 0 -5px;
+      }
+      .grid-item {
+        padding: 20px 5px;
+        flex-basis: 33.33333%;
+      }
+      @include respond-to(tablets-portrait) {
+        .grid-row {
+          margin: 0 -18px;
+        }
+        .grid-item {
+          flex-basis: 50%;
+        }
+      }
+      @include respond-to(phones-landscape) {
+        .grid-row {
+          margin: 0 -10px;
+          justify-content: center;
+        }
+        .grid-item {
+          padding-left: 10px;
+          padding-right: 10px;
+          flex-basis: 100%;
+          max-width: 350px;
+        }
+      }
+    }
+
+    // New Lessons subsection grid special values
+    .subsection-new-lessons {
+      .grid-row {
+        margin: 0 -20px;
+      }
+      .grid-item {
+        padding: 10px 20px;
+        flex-basis: 33.33333%;
+      }
+      @include respond-to(tablets-portrait) {
+        .grid-row {
+          margin: 0 -12px;
+          justify-content: center;
+        }
+        .grid-item {
+          padding: 20px 12px 5px 12px;
+          flex-basis: 50%;
+        }
+      }
+      @include respond-to(phones-landscape) {
+        .grid-row {
+          margin: 0 -10px;
+        }
+        .grid-item {
+          padding: 15px 10px 0 10px;
+          flex-basis: 100%;
+          max-width: 350px;
+        }
+      }
+    }
+
+    // Featured Playlists subsection grid special values
+    .subsection-featured-playlists {
+      .grid-row {
+        margin: 0 -20px;
+        justify-content: center;
+      }
+      .grid-item {
+        padding: 10px 20px;
+        flex-basis: 36%;
+      }
+      @include respond-to(tablets-portrait) {
+        .grid-item {
+          flex-basis: 50%;
+        }
+      }
+      @include respond-to(phones-landscape) {
+        .grid-row {
+          margin: 0 -10px;
+          justify-content: center;
+        }
+        .grid-item {
+          padding: 15px 10px 0 10px;
+          flex-basis: 100%;
+          max-width: 350px;
+        }
+      }
+    }
+
+    .subsection-title-holder {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 10px;
+      position: relative;
+      .title {
+        font-size: 15px;
+        line-height: 17px;
+        text-transform: uppercase;
+        color: $color-dove-gray;
+        margin: 0;
+      }
+      .total-items {
+        position: absolute;
+        right: 0;
+        color: $color-dusty-gray;
+        font-size: 14px;
+        .description {
+          margin: 0 1px 0 3px;
+          &:after {
+            content: '|';
+            margin-left: 3px;
+          }
+        }
+        .view-all-link {
+          color: $color-boulder;
+          text-decoration: underline;
+        }
+      }
+      @include respond-to(phones-landscape) {
+        flex-direction: column;
+        justify-content: center;
+        margin-bottom: 0;
+        .title-holder {
+          margin-bottom: 5px;
+        }
+        .title {
+          font-size: 11px;
+        }
+        .total-items {
+          position: static;
+          margin-top: 8px;
+        }
+      }
+    }
+    .progress-bar-row {
+      display: flex;
+      align-items: center;
+      .progress-bar-holder {
+        flex-basis: 100px;
+        margin-right: 15px;
+        flex-shrink: 1;
+        .progress-bar {
+          width: 100%;
+          height: 10px;
+          padding: 2px;
+          background: $color-bali-hai;
+          .inner {
+            background: $color-alto;
+            height: 6px;
+          }
+        }
+      }
+      .value-holder {
+        color: $color-fiord;
+        font-size: 16px;
+        font-weight: 400;
+        flex-shrink: 0;
+        .total {
+          font-weight: 600;
+        }
+        @include respond-to(phones-landscape) {
+          font-size: 12px;
+        }
+      }
+    }
+    @include respond-to(tablets-portrait) {
+      padding: 35px 0;
+      .section-inner {
+        max-width: 1260px;
+        padding: 0 30px;
+      }
+    }
+    @include respond-to(phones-landscape) {
+      padding: 40px 0 25px 0;
+      .section-inner {
+        padding: 0 10px;
+      }
+    }
+  }
+}
+
+// Ticket-Stub effect
+.ticket-stub {
+  position: relative;
+  &:before,
+  &:after {
+    position: absolute;
+    top: 50%;
+    margin-top: -8px;
+    content: '';
+    width: 16px;
+    height: 16px;
+    background: $color-wild-sand;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  &:before {
+    left: -8px;
+    box-shadow: inset -2px 0px 2px -2px rgba($color-mine-shaft, 0.3);
+  }
+  &:after {
+    right: -8px;
+    box-shadow: inset 2px 0px 2px -2px rgba($color-mine-shaft, 0.3);
+  }
+}