Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Verification: revised Sass organization - WIP

Browse Source
This commit is contained in:
Brian Talbot
2013-08-26 19:25:52 -04:00
parent e5cede572a
commit af8339c72d
3 changed files with 133 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
lms/static/sass/base/_variables.scss
View File

@@ -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;

13
lms/static/sass/elements/_typography.scss
View File

@@ -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);
}

151
lms/static/sass/views/_verification.scss
View File

@@ -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;
}
}
}