egghead-styles 1.0.29 → 1.0.30

data/app/assets/stylesheets/components/playlists/_playlist.css.scss

@@ -1,29 +0,0 @@
-tr.destroyed td {
-  background-color: $gray-light;
-}
-
-tr.lesson-row-new {
-  background-color: $site-color-green-light;
-}
-
-.playlist-form {
-  .cell-lesson-title {
-    .title {
-	  margin-bottom: 10px;
-	  margin-top: 10px;
-	}
-  }
-}
-
-.playlists-list-row {
-	.cell {
-		vertical-align: top;
-	}
-	.title {
-		margin-bottom: 5px;
-	}
-}
-.cell-technology-title,
-.cell-admin-title {
-	width: 150px;
-}

data/app/assets/stylesheets/components/technology/_technology-pages.css.scss

@@ -1,3 +0,0 @@
-@import 'shared/shared.css.scss';
-@import 'page-all-technologies/page-all-technologies.css.scss';
-@import 'page-single-technology/page-single-technology.css.scss';

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

@@ -1,798 +0,0 @@
-.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);
-  }
-}