SASS diff from stanford themed branch for master
This commit is contained in:
committed by
Nate Hardison
parent
4ea6692e11
commit
27fce3e473
@@ -63,10 +63,10 @@ $text-color: $dark-gray;
|
||||
|
||||
$body-bg: rgb(250,250,250);
|
||||
$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
|
||||
$header-bg: transparent;
|
||||
$header-bg: $white;
|
||||
$courseware-header-image: linear-gradient(top, #fff, #eee);
|
||||
$courseware-header-bg: transparent;
|
||||
$footer-bg: transparent;
|
||||
$footer-bg: $white;
|
||||
$courseware-footer-border: none;
|
||||
$courseware-footer-shadow: none;
|
||||
$courseware-footer-margin: 0px;
|
||||
@@ -118,9 +118,30 @@ $sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6);
|
||||
$form-bg-color: #fff;
|
||||
$modal-bg-color: rgb(245,245,245);
|
||||
|
||||
//TOP HEADER IMAGE MARGIN
|
||||
$header_image_margin: -69px;
|
||||
|
||||
//FOOTER MARGIN
|
||||
$footer_margin: ($baseline/4) 0 ($baseline*1.5) 0;
|
||||
|
||||
//-----------------
|
||||
// CSS BG Images
|
||||
//-----------------
|
||||
$homepage-bg-image: '../images/homepage-bg.jpg';
|
||||
|
||||
$login-banner-image: 'transparent url("../images/bg-banner-login.png") 0 0 no-repeat';
|
||||
$register-banner-image: 'transparent url("../images/bg-banner-register.png") 0 0 no-repeat';
|
||||
|
||||
$video-thumb-url: '../images/courses/video-thumb.jpg';
|
||||
|
||||
//-----------------
|
||||
// Mixin Styles
|
||||
//
|
||||
// THIS MIGHT BE A GOOD WAY TO DEAL WITH LARGE CHUNKS OF SASS THAT WE WANT TO ALLOW THEMING ON...
|
||||
// WE MAY WANT TO SEPERATE THEM OUT INTO ITS OWN "MIXINS" SCSS FILE
|
||||
//-----------------
|
||||
@mixin login_register_h1_style {}
|
||||
|
||||
@mixin footer_references_style {
|
||||
margin: -10px 0 0 0;
|
||||
}
|
||||
|
||||
@@ -65,7 +65,7 @@ header.global.slim {
|
||||
height: auto;
|
||||
padding: 5px 0 10px 0;
|
||||
border-bottom: 1px solid $outer-border-color;
|
||||
background: $white;
|
||||
background: $header-bg;
|
||||
|
||||
.guest .secondary {
|
||||
margin-right: 0;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
footer {
|
||||
border: $courseware-footer-border;
|
||||
box-shadow: $courseware-footer-shadow;
|
||||
margin-top: $courseware-footer-margin;
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
// page-level
|
||||
.view-register, .view-login, .view-passwordreset {
|
||||
background: $white;
|
||||
background: $body-bg;
|
||||
|
||||
|
||||
|
||||
@@ -20,16 +20,16 @@
|
||||
.heading-2 {
|
||||
font-size: 25px;
|
||||
margin: 0 0 $baseline 0;
|
||||
font-weight: 300;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: $m-blue;
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
.heading-3 {
|
||||
font-size: 21px;
|
||||
margin: 0 0 $baseline 0;
|
||||
font-weight: 300;
|
||||
color: $m-gray-d2;
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
.heading-4 {
|
||||
@@ -37,7 +37,7 @@
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0 !important;
|
||||
color: $m-blue-s1;
|
||||
color: saturate($link-color,15%);
|
||||
}
|
||||
|
||||
.heading-5 {
|
||||
@@ -48,7 +48,7 @@
|
||||
font-size: 18px;
|
||||
margin: 0 0 $baseline 0;
|
||||
font-weight: 300;
|
||||
color: $m-gray-a1;
|
||||
color: $base-font-color;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
line-height: lh(1.1);
|
||||
}
|
||||
@@ -56,18 +56,18 @@
|
||||
.body-text {
|
||||
font-size: 15px;
|
||||
margin: 0 0 $baseline 0;
|
||||
color: $m-gray-a1;
|
||||
color: $base-font-color;
|
||||
line-height: lh(1);
|
||||
}
|
||||
|
||||
// specific examples - buttons
|
||||
.button-primary {
|
||||
@include border-radius(0);
|
||||
@include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%);
|
||||
@include linear-gradient(saturate($link-color,15%) 5%, shade($link-color,15%) 95%);
|
||||
display: inline-block;
|
||||
padding: $baseline/2 $baseline*2.5;
|
||||
text-transform: lowercase;
|
||||
color: $white;
|
||||
color: $very-light-text;
|
||||
letter-spacing: 0.1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@@ -80,11 +80,11 @@
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
@include linear-gradient($m-gray 5%, $m-gray-d1 95%);
|
||||
@include linear-gradient($outer-border-color 5%, $lighter-base-font-color 95%);
|
||||
display: inline-block;
|
||||
padding: $baseline/2 $baseline*2.5;
|
||||
text-transform: lowercase;
|
||||
color: $white;
|
||||
color: $very-light-text;
|
||||
letter-spacing: 0.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -98,7 +98,7 @@
|
||||
|
||||
// layout
|
||||
.content-wrapper {
|
||||
background: $m-gray-l2;
|
||||
background: $content-wrapper-bg;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
@include clearfix;
|
||||
margin: 0 auto;
|
||||
width: 960px;
|
||||
background: $white;
|
||||
background: $body-bg;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -139,17 +139,18 @@
|
||||
}
|
||||
|
||||
a {
|
||||
@include transition(color 0.15s ease-in-out, border 0.15s ease-in-out);
|
||||
@include transition($link-color 0.15s ease-in-out, border 0.15s ease-in-out);
|
||||
|
||||
&:link, &:visited, &:hover, &:active {
|
||||
color: $m-blue;
|
||||
color: $link-color;
|
||||
font-weight: bold;
|
||||
text-decoration: none !important;
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
border-bottom: 1px dotted $m-blue-l1;
|
||||
color: $m-blue-l1;
|
||||
border-bottom: 1px solid saturate($link-color,15%);
|
||||
color: saturate($link-color,15%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -254,20 +255,20 @@
|
||||
font-family: $sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
color: $m-gray-d2;
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
label {
|
||||
@include transition(color 0.15s ease-in-out);
|
||||
@include transition($link-color 0.15s ease-in-out);
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: tint($black, 20%);
|
||||
}
|
||||
|
||||
.tip {
|
||||
@include transition(color 0.15s ease-in-out);
|
||||
@include transition($link-color 0.15s ease-in-out);
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: tint($m-gray, 50%);
|
||||
color: tint($outer-border-color, 50%);
|
||||
font-size: em(13);
|
||||
}
|
||||
|
||||
@@ -330,7 +331,7 @@
|
||||
}
|
||||
|
||||
textarea, input {
|
||||
background: $white;
|
||||
background: $body-bg;
|
||||
color: rgba(0,0,0,.25);
|
||||
}
|
||||
}
|
||||
@@ -339,11 +340,11 @@
|
||||
&.is-focused {
|
||||
|
||||
label {
|
||||
color: $m-blue-l1;
|
||||
color: saturate($link-color,15%);
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: $m-blue-l1;
|
||||
color: saturate($link-color,15%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -461,7 +462,7 @@
|
||||
|
||||
// misc
|
||||
.orn-plus {
|
||||
color: $white;
|
||||
color: $very-light-text;
|
||||
padding: 0 $baseline/4;
|
||||
}
|
||||
|
||||
@@ -492,7 +493,11 @@
|
||||
header {
|
||||
height: 120px;
|
||||
border-bottom: 1px solid $m-gray;
|
||||
background: transparent url("../images/bg-banner-login.png") 0 0 no-repeat;
|
||||
background: $login-banner-image;
|
||||
|
||||
h1 {
|
||||
@include login_register_h1_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -507,13 +512,17 @@
|
||||
height: 120px;
|
||||
border-bottom: 1px solid $m-gray;
|
||||
background: transparent url("../images/bg-banner-register.png") 0 0 no-repeat;
|
||||
|
||||
h1 {
|
||||
@include login_register_h1_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// password reset
|
||||
.view-passwordreset {
|
||||
background: $m-gray-l2;
|
||||
background: $sidebar-color;
|
||||
|
||||
header.global {
|
||||
|
||||
@@ -543,7 +552,7 @@
|
||||
|
||||
.inner-wrapper {
|
||||
@include border-radius(2px);
|
||||
background: $white;
|
||||
background: $body-bg;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
border-bottom: 1px solid $border-color-3;
|
||||
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
|
||||
height: 280px;
|
||||
margin-top: -69px;
|
||||
margin-top: $header_image_margin;
|
||||
padding-top: 150px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
border-bottom: 1px solid $border-color-3;
|
||||
@include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3));
|
||||
height: 430px;
|
||||
margin-top: -69px;
|
||||
margin-top: $header_image_margin;
|
||||
width: 100%;
|
||||
|
||||
.inner-wrapper {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
@include clearfix;
|
||||
height: 460px;
|
||||
overflow: hidden;
|
||||
margin-top: -69px;
|
||||
margin-top: $header_image_margin;
|
||||
padding: 0px;
|
||||
width: flex-grid(12);
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@include box-shadow(0 -1px 5px 0 rgba(0,0,0, 0.1));
|
||||
border-top: 1px solid tint($m-gray,50%);
|
||||
padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
|
||||
background: $white;
|
||||
background: $footer-bg;
|
||||
|
||||
footer {
|
||||
@include clearfix();
|
||||
@@ -16,18 +16,18 @@
|
||||
}
|
||||
|
||||
a {
|
||||
@include transition(color 0.15s ease-in-out, border 0.15s ease-in-out);
|
||||
@include transition(link-color 0.15s ease-in-out, border 0.15s ease-in-out);
|
||||
|
||||
&:link, &:visited, &:hover, &:active {
|
||||
border-bottom: none;
|
||||
color: $m-blue;
|
||||
color: $link-color;
|
||||
text-decoration: none !important;
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
border-bottom: 1px dotted $m-blue-s1;
|
||||
color: $m-blue-s1;
|
||||
border-bottom: 1px dotted $link-color;
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
.nav-colophon {
|
||||
@include clearfix();
|
||||
margin: ($baseline/4) 0 ($baseline*1.5) 0;
|
||||
margin: $footer_margin;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
@@ -49,7 +49,7 @@
|
||||
color: tint($black, 20%);
|
||||
|
||||
&:hover, &:active {
|
||||
color: $m-blue-s1;
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
|
||||
// references
|
||||
.references {
|
||||
margin: -10px 0 0 0;
|
||||
@include footer_references_style;
|
||||
width: flex-grid(4,12);
|
||||
float: right;
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
header.global {
|
||||
border-bottom: 1px solid $m-gray;
|
||||
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
|
||||
background: $white;
|
||||
background: $header-bg;
|
||||
height: 76px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -246,12 +246,12 @@ header.global {
|
||||
a {
|
||||
display:block;
|
||||
padding: ($baseline/4);
|
||||
color: $m-gray-d1;
|
||||
color: $lighter-base-font-color;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover, &:active {
|
||||
text-decoration: none;
|
||||
color: $m-blue-s1;
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -259,7 +259,7 @@ header.global {
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $m-blue-s1;
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -280,11 +280,11 @@ header.global {
|
||||
|
||||
a {
|
||||
@include border-radius(0);
|
||||
@include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%);
|
||||
@include linear-gradient(shade($link-color,15%) 5%, saturate($link-color,15%) 95%);
|
||||
display: inline-block;
|
||||
padding: $baseline/2 $baseline*2.5;
|
||||
text-transform: lowercase;
|
||||
color: $white;
|
||||
color: $very-light-text;
|
||||
letter-spacing: 0.1rem;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
@@ -324,6 +324,6 @@ header.global {
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $m-blue-s1 !important;
|
||||
color: $link-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user