/* GENERAL styles */ .section { padding: 50px 0; @include respond-to(tablets-small) { padding: 40px 0; } @include respond-to(tablets-small) { padding: 30px 0; } @include respond-to(phones) { padding: 20px 0; } &.section-even { background-color: $section-even-bg; } } .clearfix-row { @extend .clearfix; margin-bottom: 30px; &:last-child { margin-bottom: 0; } } .with-gap, .with-gap:last-child { margin-bottom: 30px !important; } .title-subtitle-block { margin-bottom: 45px; text-align: center; @include respond-to(tablets-small) { margin-bottom: 35px; } @include respond-to(phones) { margin-bottom: 25px; } .title { margin-bottom: 15px; color: $site-color-dark-graphite; font-size: 40px; @include respond-to(tablets-small) { font-size: 30px; } @include respond-to(phones) { font-size: 22px; } } .subtitle { margin-bottom: 0; color: $site-color-medium-graphite; a { color: $site-color-medium-graphite; &:hover { color: $site-color-dark-graphite; } } } } //Vartical align help classes .vertical-top { vertical-align: top !important; } .vertical-middle { vertical-align: middle !important; } .vertical-bottom { vertical-align: bottom !important; } //Like-table blocks .block-table { display: table; width: 100%; font-size: 0; &.block-table-fixed { table-layout: fixed; } } .block-table-cell { font-size: $body-font-size; display: table-cell; padding-left: 5px; padding-right: 5px; &[class*='xs-'] { @include respond-to(phones) { display: block; display: inline-block; } } &.xs-4 { @include respond-to(phones) { width: 33.33333%; } } &.xs-6 { @include respond-to(phones) { width: 50%; } } } .logo-holder { margin: 30px auto 40px auto; text-align: center; img { padding: 5px; } } .tab-content > .tab-pane { visibility: visible; } .alert { color: $site-color-white; font-size: $body-font-size; line-height: 22px; padding: 20px; &.green { background: $site-color-green-dim; } button.close { color: rgba($site-color-black, 0.5); float: right; height: 22px; opacity: 1.0; line-height: 22px; text-shadow: none; font-size: 20px; .icon { font-size: 20px; line-height: 22px; vertical-align: middle; } } } /* MISCELLANEOUS */ .mb-mobile { @include respond-to(phones) { margin-bottom: 20px; } } /* File Input styles */ .file-input-name { font-weight: 600; margin-left: 25px; } .delete-link { text-decoration: none; color: $site-color-light-graphite; &:hover { color: $site-color-red; } } /* STATUS BAR styles */ .section-status-bar { padding: 15px; color: $site-color-white; @extend .clearfix; .part-left { float: left; padding: 9px 0; @include respond-to(tablets-small) { margin-bottom: 15px; } @include respond-to(phones) { margin-bottom: 5px; } } .part-right { float: right; } .part-left, .part-right { @include respond-to(tablets-small) { float: none; text-align: center; } } &.status-bar-red { background: $site-color-red; } &.status-bar-green { background: $site-color-green-dim; } .lesson-actions { position: relative; font-size: 22px; color: rgba($site-color-black, 0.6); margin: 0 12px; vertical-align: middle; @include respond-to(tablets-small) { margin: 0 10px; } &:hover { color: rgba($site-color-black, 0.9); } } .lesson-status-title { vertical-align: middle; margin-left: 20px; &:before { content: 'Lesson status:'; margin-right: 5px; } @include respond-to(tablets-small) { margin-left: 10px; } @include respond-to(phones) { display: block; margin-top: 15px; margin-left: 0; } } } .search-field-holder { position: relative; box-shadow: none; margin-bottom: 40px; &:last-child { margin-bottom: 0; } //margin-bottom: 50px; .input-search { border-radius: 0; padding: 9px 40px 9px 15px; border: 1px solid $site-color-silver; height: 40px; font-size: 16px; line-height: 22px; @include custom-placeholder($color: $site-color-dusty-gray, $font-size: 16px, $line-height: 22px); &:focus { box-shadow: none; } } .btn-submit { position: absolute; width: 40px; height: 40px; right: 0; top: 0; z-index: 10; border: none; text-align: center; background: none; color: $site-color-red; } } .colored-box { padding: 30px; margin-bottom: 40px; color: $body-font-color; line-height: $body-line-height; @extend .clearfix; &:last-child { margin-bottom: 0; } @include respond-to(phones) { padding: 15px; margin-bottom: 25px; } &.small-padding { padding: 20px; @include respond-to(phones) { padding: 10px; margin-bottom: 20px; } } &.grey { background-color: $site-color-grey; } &.green { background-color: $site-color-green-dim; } &.light-blue { background-color: $site-color-blue-light; } } .related-lessons-list { margin-bottom: 0; @extend .list-unstyled; > li { margin-bottom: 5px; &:last-child { margin-bottom: 0; } } .related-lesson-logo { height: 34px; margin-right: 15px; float: left; } .custom-checkbox { .icon-holder { margin-top: 7px; } .checkbox-icon { width: 20px; height: 20px; line-height: 18px; &:before { font-size: 14px; } } input[type='checkbox'] { &:checked { ~ .lesson-title { font-weight: 600; } } } } .label-text { margin-top: 5px; } .lesson-title { display: inline-block; vertical-align: middle; white-space: pre-line; } } /* LISTS */ .animated-list { > li { } } .list-related-lessons { padding: 0; list-style: none; margin-bottom: 20px; > li { overflow: hidden; padding: 7px 20px; margin-bottom: 2px; background: $site-color-grey; &:last-child { margin-bottom: 0; } @extend .clearfix; } .lesson-logo { height: 34px; float: left; margin-right: 15px; } .btn-close { float: right; margin-left: 15px; color: $site-color-boulder; &:hover, &:focus { text-decoration: none; } .icon { vertical-align: middle; font-size: 20px; line-height: 34px; } } .lesson-title { line-height: 18px; padding: 8px 0; margin: 0; @include respond-to(phones) { padding: 0; } } } .item-holder { @include respond-to(phones) { max-width: 360px; margin: 0 auto 40px auto; &:last-child { margin-bottom: 0; } } } .media-holder { position: relative; } .media-subscription-holder { margin-top: 20px; position: relative; .title { margin-bottom: 10px; line-height: 1.3em; } .description { margin-bottom: 10px; display: block; &:last-child { margin-bottom: 0; } } } .info-line { margin-bottom: 10px; line-height: 0; font-size: 0; &:last-child { margin-bottom: 0; } small { margin-left: 10px; color: $site-color-light-graphite; font-size: 16px; line-height: 1.3em; @include respond-to(tablets-small) { font-size: 14px; } @include respond-to(phones) { font-size: 13px; } &:first-child { margin-left: 0; } } .update-date { font-size: 10px; } a { @extend .underlined; color: inherit; &:hover { color: inherit; } } .custom-label { color: #fff; text-decoration: none; &:hover { color: #fff; } } &.with-separator { small { margin-left: 5px; &+ small { &:before { margin-right: 5px; content: '\BB'; } } } } } .buttons-holder { @extend .clearfix; .custom-btn { margin-right: 30px; &:last-child { margin-right: 0; } } .actions-holder { margin-right: 15px; &:first-child { margin-left: 0; } @include respond-to(tablets-small) { margin-right: 10px; } @include respond-to(phones) { display: block; margin-top: 15px; } @include respond-to(phones) { margin-right: 0; } .custom-btn { margin-right: 0; } } .action { margin-right: 10px; color: $site-color-medium-graphite; font-size: 16px; } } .admin-buttons-holder { text-align: right; .custom-btn + .custom-btn { margin-left: 30px; } } .lesson-description-holder { margin-bottom: 60px; .info-line { margin-bottom: 15px; } .description-text-holder { margin-bottom: 15px; } } /* BANNERS */ .banner-holder { .logos-holder { margin-bottom: 15px; } .img-holder { &:not(:last-child):after { content: '+'; margin: 0 5px; line-height: 50px; font-size: 20px; font-weight: 600; } img { height: 50px; } .big-img { height: 80px; } } } .announce-banner-holder { .content { @extend .clearfix; @extend .media; margin-top: 0; } .left-part { float: left; margin-right: 40px; } .content-body { @extend .media-body; } .title { margin-top: 10px; } } .nav-tabs { border-bottom: 2px solid $site-color-blue; padding-left: 10px; margin-bottom: 20px; &.sticky { margin-bottom: 0; } > li { > a { background: $tab-bg; color: $tab-color; border: none; padding: 10px 20px; font-weight: 600; &:hover { background: $tab-bg-active; color: $tab-color-active; } } &.active { > a, a:hover, a:focus { background: $tab-bg-active; color: $tab-color-active; border: none; } } } } //.tabs-holder { // .tab-pane { // padding: 35px 30px; // background: none $tab-pane-bg; // @include respond-to(phones) { // padding: 15px; // } // } //} .tab-pane-code { padding: 0 0 !important; @include respond-to(phones) { padding: 15px; } } .share-lesson-holder { padding-top: 10px; } .section-lesson { padding: 30px 0; .part-left { @include respond-to(tablets-small) { margin-bottom: 25px; } } .part-right { .series-lessons-holder { margin-top: 35px; margin-bottom: 35px; } } } .section-learn-these-tools { .item { text-align: center; margin-bottom: 40px; @include respond-to(phones) { max-width: 290px; margin-left: auto; margin-right: auto; } .logo-holder { height: 200px; opacity: 0.8; background: $site-color-grey; margin-bottom: 20px; position: relative; @include box-shadow(rgba(black, 0.3) 1px 1px 1px); &:hover { @include transition(75ms); opacity: 1; background: $site-color-light-grey; @include box-shadow(rgba(black, 0.4) 2px 2px 4px); @include transform(scale(1.01)); } @include respond-to(tablets-small) { height: 100px; } @include respond-to(phones) { margin-bottom: 10px; } .tech-logo { height: 110px; width: auto; margin-top: 40px; @include respond-to(tablets-small) { height: 83px; margin-top: 9px; } } } } } .faq-holder { .title { margin-bottom: 5px; } } .browse-all-lessons-holder { line-height: 34px; .playlist-edit { @extend a; border: none; background: transparent; } .block-lessons { margin-bottom: 40px; @include respond-to(phones) { margin-bottom: 20px; } } .tab-view-tiles { .item { &:before { position: absolute; content: ''; width: 100%; height: 100%; left: 0; top: 0; background: none; } &.lesson-watched { &:before { z-index: 10; background: rgba(255, 255, 255, 0.6); } .overlay { background: rgba(0, 0, 0, 0.4); } } } } .tab-view-list { .title { margin-bottom: 0; } .pseudo-checkbox-holder { margin: 0; &:hover { cursor: pointer; } } .lesson-row { > td { position: relative; &:before { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: none; } } &:hover { background-color: $site-color-light-grey; cursor: pointer; } &.lesson-watched { > td { &:before { z-index: 10; background: rgba(255, 255, 255, 0.6); } } } } .category-logo { width: auto; height: 32px; display: block; position: relative; } } } .tool-bar { @include clearfix(); margin-bottom: 30px; padding: 10px 20px; min-height: 54px; background: none $site-color-grey; @include respond-to(phones) { text-align: center; } .items-list { margin: 0; padding: 0; > li { vertical-align: middle; display: inline-block; margin-left: 40px; &:first-child { margin-left: 0; } &.search-filter-holder { @include respond-to(tablets-small) { display: block; margin-bottom: 10px; } } @include respond-to(phones) { display: block; margin-bottom: 10px; &:last-child { margin-bottom: 0; } } } } .actions-list { margin: 0; padding: 6px 0; float: left; @include respond-to(phones) { padding: 0; float: none; margin-bottom: 10px; } .filter-trigger { color: $site-color-medium-graphite; @extend .underlined; &.active { font-weight: 700; cursor: default; text-decoration: none; } } } .show-completed-checkbox-holder { padding: 5px 0; @include respond-to(phones) { float: none; margin-left: 0; margin-bottom: 10px; } label { margin-bottom: 0; padding-left: 23px; position: relative; font-weight: 400; font-size: 16px; line-height: 1.4em; color: $site-color-medium-graphite; } input[type='checkbox'] { position: absolute; left: -9999px; visibility: hidden; & ~ .pseudo-checkbox { @include icon-FontAwesome(); @extend .icon-check-empty; position: absolute; left: 0; font-size: 16px; line-height: 1.4em; cursor: pointer; } &:checked { & ~ .pseudo-checkbox { @extend .icon-check; } } } } .view-switchers-holder { float: right; margin-top: 7px; @include respond-to(phones) { float: none; display: inline-block; margin-bottom: 4px; margin-top: 0; } } .btn-view-switcher { color: $site-color-medium-graphite; font-weight: 400; .icon { line-height: 20%; &:before { vertical-align: middle; } } } .lessons-to-show-holder { float: right; margin-right: 30px; margin-top: 6px; white-space: nowrap; .chosen-container { max-width: 80px; display: inline-block; } } } .cell-pseudo-checkbox { text-align: center; width: 50px; .pseudo-checkbox { margin-right: 0; vertical-align: middle; } } .cell-category-logo { width: 50px; } .cell-admin-action { width: 100px; text-align: center; a { margin: 0 10px; display: inline-block; text-decoration: none; &:hover { text-decoration: none; color: $site-color-red; } } } .pseudo-checkbox-holder { margin-right: 5px; display: inline-block; } .pseudo-checkbox { @include icon-FontAwesome(); @extend .icon-check-empty; line-height: 1.3em; font-size: 18px; height: 1px; &:before { vertical-align: middle; } } .lesson-watched { .pseudo-checkbox { @extend .icon-check; color: $site-color-green; } } .table-responsive > .table > tbody > tr > td { @include respond-to(phones) { white-space: normal; } } .table { > tbody { > tr { > td { &.cell { padding-top: 12px; padding-bottom: 12px; position: relative; &.cell-pro { @include respond-to(phones) { padding-right: 10px; } } } } } } } /* PRESENTED BY styles */ .presented-by-holder { @include respond-to(phones) { margin-top: 15px; text-align: center; } .title { margin-bottom: 10px; } .portrait-holder { width: 120px; margin-bottom: 15px; img { width: 100%; } @include respond-to(phones) { margin-left: auto; margin-right: auto; } } .name { margin-bottom: 15px; } } .pointer { cursor: pointer; } //.comments { // font-size: 14px; //} /* HOLIDAY PAGE styles */ .logo-holiday-hat { max-width: 300px; margin: 0 auto 30px auto; @include respond-to(tablets-small) { max-width: 150px; } @include respond-to(phones) { max-width: 75px; } } .egghead-logo { max-width: 250px; @include respond-to(tablets-small) { max-width: 150px; } @include respond-to(phones) { max-width: 75px; } } .egghead-logo-small { max-width: 150px; @include respond-to(tablets-large) { max-width: 90px; } @include respond-to(tablets-small) { max-width: 75px; } @include respond-to(phones) { max-width: 75px; } } .banner-left-img { max-height: 100px; } [ng-cloak] { display: none; } .category-logo { width: auto; height: 32px; display: block; position: relative; } body.dragging, body.dragging * { cursor: move !important; } .dragged { position: absolute; opacity: 0.5; z-index: 2000; } tr.placeholder:before { content: ""; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-left-color: red; margin-top: -5px; left: -5px; border-right: none; } .instructor-avatar { @extend .avatar; margin-bottom: 30px; border: 2px solid black; @include respond-to(tablets-small) { width: 120px; } @include respond-to(phones) { width: 80px; } } .errata-warn { display: inline-block; vertical-align: middle; padding-left: 4px; padding-right: 4px; color: #ffcb5d; opacity: 0.8; } .errata { margin-bottom: 40px; .title { color: $site-color-dark-graphite; .icon { vertical-align: middle; color: $site-color-light-graphite; } } p { font-size: $body-font-size; color: $body-font-color; margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .admin { margin-top: 15px; } } .no-underline { text-decoration: none; } .red-dash-border { border: dashed 2px #B95527; background-color: #fffef0; } .centering { } .frontend-masters { padding: 10px; .btn-gold { @extend .btn-primary; background-color: #FFFF00; } h3 { margin-top: 5px; } } .content { background-color: #fefefe; padding-top: 10px; } .sign-up { background-color: #f5f5f5; margin-bottom: 10px; padding: 8px; border: 1px dashed #d4e3e6; } .padded { margin-top: 10px; } .padded-well { padding-left: 30px; padding-right: 30px; } .twitter:hover { text-decoration: none !important; } .twitter { text-decoration: none !important; } .play-icon { padding-left: 5px; } .check { padding-right: 5px; } .footer { padding-top: 5px; } .stars { color: rgba(255, 244, 130, 0.85); text-shadow: 1px 1px 1px #ccc; } .big-logo { height: 125px; width: auto; } /* Override the bootstrap style */ .social-media-list li { display:block; float: left; width:13.3%; text-align:center; margin: 0 auto;} .twitter-widget-pad { padding-left: 15px; } .light-text { color: #666666; } .bundle-logo { width: auto; height: 200px; padding: 10px; } .float-right { float: right; } .guarantee { width: 100px; height: auto; margin-right: 20px; } .guarantee-box { padding: 10px; } .twitter-tweet { padding-top: 15px; padding-bottom: 15px; } .highlighter { background-color: rgba(255,255,0,.65); padding: 0 3px; @include border-radius(2px); display: inline-block; z-index: -10; } .strike { text-decoration: line-through; } .support-button { background-color: #d9534f; border-color: #d43f3a; &:hover { background-color: #d2322d; border-color: #ac2925; } a { color: #FFFFFF !important; } } .img-centered { margin: 0 auto; } .admin { display: none; margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .editor { display: none; } .footer { padding-top: 20px; } .undecorated { text-decoration: none !important; } .thumb_gen { padding-top: 80px; text-align: center; font-family: "droid-sans-mono",sans-serif !important; color: #0c0c0c !important; .presents { font-size: 18px; } .plus { padding-top: 56px; } .title { text-align: center; font-size: 10px; } // .tech-logo { // padding-left: 50px; // padding-right: 30px; // } // .egghead-logo { // padding-left: 30px; // padding-right: 30px; // } } .tech-footer { background-color: #2a2a2a; color: #e7e7e7; padding: 50px; } /* *= require autocomplete *= require search */ form input.st-search-input { height: 29px !important; width: 180px !important; } .light-gray-background { background-color: $gray-lighter; } .gray-border { border: 1px solid $gray; } .info-icon { color: $gray-light; font-size: 1.2em; &:hover { text-decoration: none; } } .font-droid-sans { font-family: "droid-sans-mono",sans-serif !important; } .big-st-search-input { font-size: 1.6em; padding: 5px 10px 5px 10px; height: 55px; width: 85%; color: $gray-light; border: 1px solid $gray-light; outline: none; line-height: normal; @include border-radius(5px) } .search-icon { color: $brand-primary; font-size: 2.2em; padding-right: 5px; } img.opacity { opacity: 0.85; filter: alpha(opacity=85); } img.opacity:hover { opacity: 1; filter: alpha(opacity=100); } .complete { color: $brand-success; } .hero-row { background-color: rgba(254, 241, 53, 0.04); @include border-radius(10px); } .book-sales { padding-bottom: 50px; } .enterprise-logo { height: 50px; width: auto; } [ng-cloak] { display: none; } .circular-md { width: 150px; border-radius: 50%; } .circular-sm { width: 75px; border-radius: 50%; }