diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 2028b95efb..62a6320c11 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -1,20 +1,28 @@ +// base $baseline: 20px; +// ==================== + +// LAYOUT: grid $gw-column: 80px; $gw-gutter: 20px; - $fg-column: $gw-column; $fg-gutter: $gw-gutter; $fg-max-columns: 12; $fg-max-width: 1400px; $fg-min-width: 810px; -// fonts +// ==================== + +// FONTS $sans-serif: 'Open Sans', $verdana; $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $body-font-family: $sans-serif; $serif: $georgia; +// ==================== + +// MISC: base fonts/colors $body-font-size: em(14); $body-line-height: golden-ratio(.875em, 1); $base-font-color: rgb(60,60,60); @@ -23,6 +31,9 @@ $base-font-color: rgb(60,60,60); $lighter-base-font-color: rgb(100,100,100); $very-light-text: #fff; +// ==================== + +// COLORS: misc. $white: rgb(255,255,255); $black: rgb(0,0,0); $blue: rgb(29,157,217); @@ -38,11 +49,11 @@ $sidebar-color: rgb(246, 246, 246); $outer-border-color: rgb(170, 170, 170); $green: rgb(37, 184, 90); -// old variables +// COLORS: old variables $light-gray: #ddd; $dark-gray: #333; -// edx.org marketing site variables +// COLORS: edx.org marketing site variables $m-gray: #8A8C8F; $m-gray-l1: #97999B; $m-gray-l2: #A4A6A8; @@ -70,6 +81,8 @@ $m-pink-d1: #A0255B; $m-pink-d2: #8C204F; $m-pink-d3: #771C44; +// ==================== + $m-base-font-size: em(15); $base-font-color: rgb(60,60,60); @@ -90,57 +103,56 @@ $courseware-footer-border: none; $courseware-footer-shadow: none; $courseware-footer-margin: 0px; +// ==================== -// actions +// ACTIONS: general $button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%); $button-bg-color: transparent; $button-bg-hover-color: #fff; -// actions - primary +// ACTIONS: primary $action-primary-bg: $m-blue-d3; $action-primary-fg: $white; $action-primary-shadow: $m-blue-d4; -// focused - hover/active pseudo states +// ACTIONS: primary - focused - hover/active pseudo states $action-primary-focused-bg: $m-blue-d1; $action-primary-focused-fg: $white; -// current or active navigation item +// ACTIONS: primary - current or active navigation item $action-primary-active-bg: $m-blue; $action-primary-active-fg: $m-blue-d3; $action-primary-active-shadow: $m-blue-d2; $action-primary-active-focused-fg: $m-blue-d4; $action-primary-active-focused-shadow: $m-blue-d3; -// disabled +// ACTIONS: disabled $action-primary-disabled-bg: $m-gray-d3; $action-prmary-disabled-fg: $white; - - -// actions - secondary +// ACTIONS: secondary $action-secondary-bg: $m-pink; $action-secondary-fg: $white; $action-secondary-shadow: $m-pink-d2; -// focused - hover/active pseudo states +// ACTIONS: secondary - focused - hover/active pseudo states $action-secondary-focused-bg: $m-pink-l3; $action-secondary-focused-fg: $white; -// current or active navigation item +// ACTIONS: secondary - current or active navigation item $action-secondary-active-bg: $m-pink-l2; $action-secondary-active-fg: $m-pink-d1; $action-secondary-active-shadow: $m-pink-d1; $action-secondary-active-focused-fg: $m-pink-d3; $action-secondary-active-focused-shadow: $m-pink-d2; -// disabled +// ACTIONS: secondary - disabled $action-secondary-disabled-bg: $m-gray-d3; $action-secondary-disabled-fg: $white; +// ==================== - - +// MISC: visual horizontal rules $faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0)); $faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1)); $faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0)); @@ -148,51 +160,54 @@ $faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240 $faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0)); $faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0)); +// MISC: dashboard $dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)); $dashboard-profile-header-color: transparent; $dashboard-profile-color: rgb(252,252,252); $dot-color: $light-gray; +// MISC: course assets $content-wrapper-bg: $white; $course-bg-color: #d6d6d6; $course-bg-image: url(../images/bg-texture.png); $account-content-wrapper-bg: shade($body-bg, 2%); - $course-profile-bg: rgb(245,245,245); $course-header-bg: rgba(255,255,255, 0.93); +// MISC: borders $border-color-1: rgb(190,190,190); $border-color-2: rgb(200,200,200); $border-color-3: rgb(100,100,100); $border-color-4: rgb(252,252,252); +// MISC: links and buttons $link-color: $blue; $link-color-d1: $m-blue-d2; $link-hover: $pink; $site-status-color: $pink; - $button-color: $blue; $button-archive-color: #eee; +// MISC: shadow, form, modal $shadow-color: $blue; +$form-bg-color: #fff; +$modal-bg-color: rgb(245,245,245); +// MISC: sidebar $sidebar-chapter-bg-top: rgba(255, 255, 255, .6); $sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0); $sidebar-chapter-bg: #eee; $sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6); -$form-bg-color: #fff; -$modal-bg-color: rgb(245,245,245); - -//TOP HEADER IMAGE MARGIN +// TOP HEADER IMAGE MARGIN $header_image_margin: -69px; //FOOTER MARGIN $footer_margin: ($baseline/4) 0 ($baseline*1.5) 0; -//----------------- -// CSS BG Images -//----------------- +// ==================== + +// IMAGES: backgrounds $homepage-bg-image: '../images/homepage-bg.jpg'; $login-banner-image: url(../images/bg-banner-login.png); @@ -200,11 +215,11 @@ $register-banner-image: url(../images/bg-banner-register.png); $video-thumb-url: '../images/courses/video-thumb.jpg'; -//----------------- -// Newer variables ported from Studio -//----------------- +// ==================== -// fonts +// SPLINT: new standards + +// SPLINT: fonts $f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index 157d3d60df..477f21565c 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -134,45 +134,40 @@ // icons .t-icon1 { @include font-size(48); - @include line-height(48); } .t-icon2 { @include font-size(36); - @include line-height(36); } .t-icon3 { @include font-size(24); - @include line-height(24); } .t-icon4 { @include font-size(18); - @include line-height(18); } .t-icon5 { @include font-size(16); - @include line-height(16); } .t-icon6 { @include font-size(14); - @include line-height(14); } .t-icon7 { @include font-size(12); - @include line-height(12); } .t-icon8 { @include font-size(11); - @include line-height(11); } .t-icon9 { @include font-size(10); - @include line-height(10); +} + +.t-icon-solo { + @include line-height(0); } diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 01c37f5892..b052f84d94 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -1,39 +1,23 @@ // lms - views - verification flow // ==================== -body.register.verification { +// some nasty resets and standard styles +body.register.verification-process { font-family: 'Open Sans', sans-serif; -// some nasty resets and standard styles - h1, h2, h3, h4, h5, h6, p, input { - font-family: 'Open Sans', sans-serif; + // reset: typography - heading + h1, h2, h3, h4, h5 ,h6 { + @extend .t-title; } + // reset: typography - copy + p, ol, ul, dl, input, select, textarea { + font-family: $f-sans-serif; + } + + // reset: copy/text p { - margin-bottom: ($baseline*.75); - } - - input { - font-style: normal; - font-weight: 400; - margin-right: ($baseline/5); - } - - label { - font-style: normal; - font-family: 'Open Sans', sans-serif; - font-weight: 400; - } - - - - .faq { - @extend .t-copy-sub2; - - label { - font-size: 12px; - font-weight: bold; - } + margin-bottom: ($baseline*0.75); } dt { @@ -49,8 +33,33 @@ body.register.verification { margin: ($baseline/4) 0 0 ($baseline/2); } + // reset: forms + input { + font-style: normal; + font-weight: 400; + margin-right: ($baseline/5); + } -// basic reusable bits + label { + font-style: normal; + font-family: 'Open Sans', sans-serif; + font-weight: 400; + } + + .faq { + @extend .t-copy-sub2; + + label { + font-size: 12px; + font-weight: bold; + } + } + + + // ==================== + + + // elements: layout .content-wrapper { background: none repeat scroll 0 0 #F7F7F7; padding-bottom: 0; @@ -61,6 +70,13 @@ body.register.verification { padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5); } + // elements: common UI + .title { + @extend .t-title5; + margin-bottom: ($baseline/2); + font-weight: 300; + } + .tip { @extend .t-copy-sub2; @include transition(color 0.15s ease-in-out 0s); @@ -69,6 +85,11 @@ body.register.verification { color: $lighter-base-font-color; } + + // ==================== + + + // elements: header .page-header { .title { @@ -83,14 +104,7 @@ body.register.verification { } } - .title { - @extend .t-title5; - margin-bottom: ($baseline/2); - font-weight: 300; - } - - - + // elements: page options .pay-options { list-style-type: none; margin: 0; @@ -120,9 +134,10 @@ body.register.verification { vertical-align: middle; } } - } + + // elements - controls .m-btn-primary { margin-bottom: 0; padding: 0; @@ -155,6 +170,7 @@ body.register.verification { } + // NOTE: need to change this to a semantic class &.green { box-shadow: 0 2px 1px rgba(2,100,2,1); background-color: rgba(0,136,1,1); @@ -168,6 +184,10 @@ body.register.verification { } + // ==================== + + + // nav/status: progress .progress { @include clearfix; position: relative; @@ -175,7 +195,7 @@ body.register.verification { border-bottom: 1px solid #ccc; padding-bottom: $baseline; - ol { + .progress-steps { margin: 0; padding: 0; } @@ -199,7 +219,6 @@ body.register.verification { } } - &.done { color: #008801; @@ -210,8 +229,6 @@ body.register.verification { } } - - .number { height: 2em; width: 2em; @@ -246,7 +263,6 @@ body.register.verification { width: 20%; background-color: #008801; } - } .support { @@ -254,12 +270,11 @@ body.register.verification { } +// ==================== - - -// select a track page - &.select-track { +// VIEW: select a track + &.step-select-track { .select { @include clearfix(); @@ -353,8 +368,12 @@ body.register.verification { } } -// requirements page - &.requirements { + + // ==================== + + + // VIEW: requirements + &.step-requirements { .section-head .title { @extend .t-title4; @@ -437,14 +456,17 @@ body.register.verification { margin-left: 65px; } } - } - } -// take and review photos page - &.photos { - // for dev placement only + + // ==================== + + + // VIEW: take and review photos + &.step-photos { + + // TEMP: for dev placement only .placeholder-cam, .placeholder-photo { height: 300px; @@ -546,25 +568,21 @@ body.register.verification { float: left; padding-right: $baseline; } - } .photo-tips { width: 45%; float: left; - ul { - margin: 0; - padding: 0; - list-style-type: none; - } - - li { - margin-bottom: $baseline; - } - - + ul { + margin: 0; + padding: 0; + list-style-type: none; + } + li { + margin-bottom: $baseline; + } } .next-step { @@ -589,5 +607,4 @@ body.register.verification { margin-right: $baseline; } } - }