Skip to content

E
edx-platform
Commit cb627973 by David Baumgold
Options

Merge pull request #347 from edx/update-sass 

Update SASS and Bourbon, add Neat
parents 9824ba43 18474986
Showing with 2277 additions and 1307 deletions
CHANGELOG.rst
...@@ -27,6 +27,8 @@ Blades: User answer now preserved (and changeable) after clicking "show answer" ...@@ -27,6 +27,8 @@ Blades: User answer now preserved (and changeable) after clicking "show answer"
LMS: Removed press releases LMS: Removed press releases
Common: Updated Sass and Bourbon libraries, added Neat library
LMS: Users are no longer auto-activated if they click "reset password" LMS: Users are no longer auto-activated if they click "reset password"
This is now done when they click on the link in the reset password This is now done when they click on the link in the reset password
email they receive (along with usual path through activation email). email they receive (along with usual path through activation email).
......
Gemfile
source 'https://rubygems.org' source 'https://rubygems.org'
gem 'rake', '~> 10.0.3' gem 'rake', '~> 10.0.3'
gem 'sass', '3.1.15' gem 'sass', '3.2.9'
gem 'bourbon', '~> 1.3.6' gem 'bourbon', '~> 3.1.8'
gem 'neat', '~> 1.3.0'
gem 'colorize', '~> 0.5.8' gem 'colorize', '~> 0.5.8'
gem 'launchy', '~> 2.1.2' gem 'launchy', '~> 2.1.2'
gem 'sys-proctable', '~> 0.9.3' gem 'sys-proctable', '~> 0.9.3'
cms/static/sass/_base.scss
...@@ -19,9 +19,9 @@ body, input, button { ...@@ -19,9 +19,9 @@ body, input, button {
} }
a { a {
@include transition(color $tmg-f2 ease-in-out 0s);
text-decoration: none; text-decoration: none;
color: $blue; color: $blue;
@include transition(color 0.25s ease-in-out);
&:hover { &:hover {
color: $orange-d1; color: $orange-d1;
...@@ -591,8 +591,8 @@ hr.divide { ...@@ -591,8 +591,8 @@ hr.divide {
} }
.window { .window {
// @include border-radius(3px); // border-radius: 3px;
// @include box-shadow(0 1px 1px $shadow-l1); // box-shadow: 0 1px 1px $shadow-l1;
// margin-bottom: $baseline; // margin-bottom: $baseline;
// border: 1px solid $gray-l2; // border: 1px solid $gray-l2;
// background: $white; // background: $white;
...@@ -607,7 +607,7 @@ hr.divide { ...@@ -607,7 +607,7 @@ hr.divide {
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey; background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
font-size: 14px; font-size: 14px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
} }
...@@ -642,6 +642,7 @@ hr.divide { ...@@ -642,6 +642,7 @@ hr.divide {
// system notifications // system notifications
.toast-notification { .toast-notification {
@include transition(all $tmg-f2 linear 0s);
display: none; display: none;
position: fixed; position: fixed;
top: 20px; top: 20px;
...@@ -653,11 +654,10 @@ hr.divide { ...@@ -653,11 +654,10 @@ hr.divide {
border: 1px solid #333; border: 1px solid #333;
@include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
background-color: rgba(30, 30, 30, .92); background-color: rgba(30, 30, 30, .92);
@include box-shadow(0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset); box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #fff; color: #fff;
@include transition(all .2s);
p, span { p, span {
color: #fff; color: #fff;
...@@ -794,7 +794,7 @@ hr.divide { ...@@ -794,7 +794,7 @@ hr.divide {
.tooltip { .tooltip {
@include font-size(12); @include font-size(12);
@include transition(opacity 0.1s ease-out); @include transition(opacity $tmg-f3 ease-out 0s);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -857,7 +857,7 @@ body.js { ...@@ -857,7 +857,7 @@ body.js {
.content-modal { .content-modal {
@include border-bottom-radius(2px); @include border-bottom-radius(2px);
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 2px 4px $shadow-d1); box-shadow: 0 2px 4px $shadow-d1;
position: relative; position: relative;
display: none; display: none;
width: 700px; width: 700px;
...@@ -867,7 +867,7 @@ body.js { ...@@ -867,7 +867,7 @@ body.js {
background: $white; background: $white;
.action-modal-close { .action-modal-close {
@include transition(top .25s ease-in-out); @include transition(top $tmg-f3 ease-in-out 0s);
@include border-bottom-radius(3px); @include border-bottom-radius(3px);
position: absolute; position: absolute;
top: -3px; top: -3px;
......
cms/static/sass/_mixins-inherited.scss 0 → 120000
../../../common/static/sass/_mixins-inherited.scss
\ No newline at end of file
cms/static/sass/_reset.scss
...@@ -143,7 +143,7 @@ abbr[title] { ...@@ -143,7 +143,7 @@ abbr[title] {
width: 100%; width: 100%;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
//background-color: $lightBluishGrey; //background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
li:first-child { li:first-child {
margin-left: 20px; margin-left: 20px;
......
cms/static/sass/_variables.scss
...@@ -161,6 +161,17 @@ $shadow-d2: rgba($black, 0.6); ...@@ -161,6 +161,17 @@ $shadow-d2: rgba($black, 0.6);
// ==================== // ====================
// timing - used for animation/transition mixin syncing
$tmg-s3: 3.0s;
$tmg-s2: 2.0s;
$tmg-s1: 1.0s;
$tmg-avg: 0.75s;
$tmg-f1: 0.50s;
$tmg-f2: 0.25s;
$tmg-f3: 0.125s;
// ====================
// specific UI // specific UI
$notification-height: ($baseline*10); $notification-height: ($baseline*10);
......
cms/static/sass/assets/_anims.scss
// studio animations & keyframes // studio animations & keyframes
// ==================== // ====================
// rotate clockwise // fade in
@mixin rotateClockwise { @include keyframes(fadeIn) {
0% { 0% {
@include transform(rotate(0deg)); opacity: 0.0;
}
50% {
opacity: 0.5;
} }
100% { 100% {
@include transform(rotate(360deg)); opacity: 1.0;
} }
} }
@-moz-keyframes rotateClockwise { @include rotateClockwise(); } // canned animation - use if you want out of the box/non-customized anim
@-webkit-keyframes rotateClockwise { @include rotateClockwise(); } .anim-fadeIn {
@-o-keyframes rotateClockwise { @include rotateClockwise(); } @include animation(fadeIn $tmg-f2 linear 1);
@keyframes rotateClockwise { @include rotateClockwise();} }
@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) { // fade out
@include animation-name(rotateClockwise); @include keyframes(fadeOut) {
@include animation-duration($duration); 0% {
@include animation-delay($delay); opacity: 1.0;
@include animation-timing-function($timing); }
@include animation-iteration-count($count);
@include animation-fill-mode(both);
50% {
opacity: 0.5;
}
100% {
opacity: 0.0;
}
} }
// canned animation - use if you want out of the box/non-customized anim
.anim-fadeOut {
@include animation(fadeOut $tmg-f2 linear 1);
}
// ==================== // ====================
// notifications slide up
@mixin notificationsSlideUp { // rotate up
@include keyframes(rotateUp) {
0% { 0% {
@include transform(translateY(0)); @include transform(rotate(0deg));
} }
90% { 50% {
@include transform(translateY(-($notification-height))); @include transform(rotate(-90deg));
} }
100% { 100% {
@include transform(translateY(-($notification-height*0.99))); @include transform(rotate(-180deg));
} }
} }
@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); } // canned animation - use if you want out of the box/non-customized anim
@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); } .anim-rotateUp {
@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); } @include animation(rotateUp $tmg-f2 ease-in-out 1);
@keyframes notificationsSlideUp { @include notificationsSlideUp();} }
// rotate up
@include keyframes(rotateDown) {
0% {
@include transform(rotate(0deg));
}
50% {
@include transform(rotate(90deg));
}
@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) { 100% {
@include animation-name(notificationsSlideUp); @include transform(rotate(180deg));
@include animation-duration($duration); }
@include animation-delay($delay); }
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
// canned animation - use if you want out of the box/non-customized anim
.anim-rotateDown {
@include animation(rotateDown $tmg-f2 ease-in-out 1);
} }
// ====================
// notifications slide down // rotate clockwise
@mixin notificationsSlideDown { @include keyframes(rotateCW) {
0% { 0% {
@include transform(translateY(-($notification-height*0.99))); @include transform(rotate(0deg));
} }
10% { 50% {
@include transform(translateY(-($notification-height))); @include transform(rotate(180deg));
} }
100% { 100% {
@include transform(translateY(0)); @include transform(rotate(360deg));
} }
} }
@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); } // canned animation - use if you want out of the box/non-customized anim
@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); } .anim-rotateCW {
@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); } @include animation(rotateCW $tmg-s1 linear infinite);
@keyframes notificationsSlideDown { @include notificationsSlideDown();} }
// rotate counter-clockwise
@include keyframes(rotateCCW) {
0% {
@include transform(rotate(0deg));
}
50% {
@include transform(rotate(-180deg));
}
100% {
@include transform(rotate(-360deg));
}
}
@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) { // canned animation - use if you want out of the box/non-customized anim
@include animation-name(notificationsSlideDown); .anim-rotateCCW {
@include animation-duration($duration); @include animation(rotateCCW $tmg-s1 linear infinite);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
} }
// ==================== // ====================
// bounce in
@mixin bounceIn { // notifications slide up
@include keyframes(notificationSlideUp) {
0% { 0% {
opacity: 0.0; @include transform(translateY(0));
@include transform(scale(0.3));
} }
50% { 90% {
opacity: 1.0; @include transform(translateY(-($notification-height)));
@include transform(scale(1.05));
} }
100% { 100% {
@include transform(scale(1)); @include transform(translateY(-($notification-height*0.99)));
} }
} }
@-moz-keyframes bounceIn { @include bounceIn(); } // notifications slide down
@-webkit-keyframes bounceIn { @include bounceIn(); } @include keyframes(notificationSlideDown) {
@-o-keyframes bounceIn { @include bounceIn(); } 0% {
@keyframes bounceIn { @include bounceIn();} @include transform(translateY(-($notification-height*0.99)));
}
10% {
@include transform(translateY(-($notification-height)));
}
@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) { 100% {
@include animation-name(bounceIn); @include transform(translateY(0));
@include animation-duration($duration); }
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
} }
// ==================== // ====================
// bounce in // bounce in
@mixin bounceOut { @include keyframes(bounceIn) {
0% { 0% {
opacity: 0.0; opacity: 0.0;
@include transform(scale(0.3)); @include transform(scale(0.3));
...@@ -140,7 +182,16 @@ ...@@ -140,7 +182,16 @@
100% { 100% {
@include transform(scale(1)); @include transform(scale(1));
} }
}
// canned animation - use if you want out of the box/non-customized anim
.anim-bounceIn {
@include animation(bounceIn $tmg-f1 ease-in-out 1);
}
// bounce out
@include keyframes(bounceOut) {
0% { 0% {
@include transform(scale(1)); @include transform(scale(1));
} }
...@@ -156,16 +207,7 @@ ...@@ -156,16 +207,7 @@
} }
} }
@-moz-keyframes bounceOut { @include bounceOut(); } // canned animation - use if you want out of the box/non-customized anim
@-webkit-keyframes bounceOut { @include bounceOut(); } .anim-bounceOut {
@-o-keyframes bounceOut { @include bounceOut(); } @include animation(bounceOut $tmg-f1 ease-in-out 1);
@keyframes bounceOut { @include bounceOut();}
@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(bounceOut);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
} }
cms/static/sass/assets/_graphics.scss
.expand-collapse-icon { .expand-collapse-icon {
@include transition(none);
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 9px; width: 9px;
height: 11px; height: 11px;
margin-right: 10px; margin-right: 10px;
background: url(../img/expand-collapse-icons.png) no-repeat; background: url(../img/expand-collapse-icons.png) no-repeat;
@include transition(none);
&.expand { &.expand {
top: 1px; top: 1px;
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
background: url(../img/edit-icon.png) no-repeat; background: url(../img/edit-icon.png) no-repeat;
&.white { &.white {
background: url(../img/edit-icon-white.png) no-repeat; background: url(../img/edit-icon-white.png) no-repeat;
} }
} }
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
background: url(../img/delete-icon.png) no-repeat; background: url(../img/delete-icon.png) no-repeat;
&.white { &.white {
background: url(../img/delete-icon-white.png) no-repeat; background: url(../img/delete-icon-white.png) no-repeat;
} }
} }
......
cms/static/sass/elements/_controls.scss
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
} }
&.current, &.active, &.is-selected { &.current, &.active, &.is-selected {
@include box-shadow(inset 0 1px 2px 1px $shadow-l1); box-shadow: inset 0 1px 2px 1px $shadow-l1;
border-color: $gray-l3; border-color: $gray-l3;
} }
} }
......
cms/static/sass/elements/_footer.scss
...@@ -44,12 +44,12 @@ ...@@ -44,12 +44,12 @@
} }
a { a {
@include border-radius(2px); border-radius: 2px;
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline/2) ($baseline*0.75);
background: transparent; background: transparent;
[class^="icon-"] { [class^="icon-"] {
@include transition(top .25s ease-in-out .25s); @include transition(top $tmg-f2 ease-in-out 0.25s);
@include font-size(15); @include font-size(15);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
......
cms/static/sass/elements/_forms.scss
...@@ -12,7 +12,7 @@ textarea.text { ...@@ -12,7 +12,7 @@ textarea.text {
border-radius: 2px; border-radius: 2px;
@include linear-gradient($gray-l5, $white); @include linear-gradient($gray-l5, $white);
background-color: $gray-l5; background-color: $gray-l5;
@include box-shadow(inset 0 1px 2px $shadow-l1); box-shadow: inset 0 1px 2px $shadow-l1;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 11px; font-size: 11px;
color: $baseFontColor; color: $baseFontColor;
...@@ -135,6 +135,6 @@ code { ...@@ -135,6 +135,6 @@ code {
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5; background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
font-family: Monaco, monospace; font-family: Monaco, monospace;
} }
cms/static/sass/elements/_header.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.wrapper-header { .wrapper-header {
@extend .depth3; @extend .depth3;
@include box-shadow(0 1px 2px 0 $shadow-l1); box-shadow: 0 1px 2px 0 $shadow-l1;
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0; margin: 0;
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
.title { .title {
@extend .t-action2; @extend .t-action2;
@extend .btn-dd-nav-primary; @extend .btn-dd-nav-primary;
@include transition(all 0.25s ease-in-out 0); @include transition(all $tmg-f2 ease-in-out 0s);
.label, .icon-caret-down { .label, .icon-caret-down {
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
// entire link // entire link
.course-link { .course-link {
@include transition(color 0.25s ease-in-out); @include transition(color $tmg-f2 ease-in-out 0s);
display: block; display: block;
color: $gray-d1; color: $gray-d1;
...@@ -310,7 +310,6 @@ ...@@ -310,7 +310,6 @@
.action-signup { .action-signup {
@include blue-button; @include blue-button;
@include transition(all .15s);
@include font-size(14); @include font-size(14);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
text-transform: uppercase; text-transform: uppercase;
...@@ -319,7 +318,6 @@ ...@@ -319,7 +318,6 @@
.action-signin { .action-signin {
@include white-button; @include white-button;
@include transition(all .15s);
@include font-size(14); @include font-size(14);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
text-transform: uppercase; text-transform: uppercase;
......
cms/static/sass/elements/_navigation.scss
...@@ -33,7 +33,7 @@ nav { ...@@ -33,7 +33,7 @@ nav {
} }
.ui-toggle-dd { .ui-toggle-dd {
@include transition(rotate .25s ease-in-out .25s); @include transition(all $tmg-f2 ease-in-out 0s);
margin-left: ($baseline/10); margin-left: ($baseline/10);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -58,7 +58,7 @@ nav { ...@@ -58,7 +58,7 @@ nav {
} }
.wrapper-nav-sub { .wrapper-nav-sub {
@include transition (opacity 1.0s ease-in-out 0s); @include transition(opacity $tmg-f2 ease-in-out 0s);
position: absolute; position: absolute;
top: ($baseline*2.5); top: ($baseline*2.5);
opacity: 0.0; opacity: 0.0;
...@@ -74,9 +74,9 @@ nav { ...@@ -74,9 +74,9 @@ nav {
} }
.nav-sub { .nav-sub {
@include border-radius(2px); border-radius: 2px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 1px $shadow-l1); box-shadow: 0 1px 1px $shadow-l1;
position: relative; position: relative;
width: 100%; width: 100%;
border: 1px solid $gray-l3; border: 1px solid $gray-l3;
......
cms/static/sass/elements/_system-feedback.scss
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
// prompts // prompts
.wrapper-prompt { .wrapper-prompt {
@extend .depth5; @extend .depth5;
@include transition(all 0.05s ease-in-out); @include transition(all $tmg-f3 ease-in-out 0s);
position: fixed; position: fixed;
top: 0; top: 0;
background: $black-t0; background: $black-t0;
...@@ -162,8 +162,8 @@ ...@@ -162,8 +162,8 @@
} }
.prompt { .prompt {
@include border-radius(($baseline/5)); border-radius: ($baseline/5);
@include box-shadow(0 0 3px $shadow-d1); box-shadow: 0 0 3px $shadow-d1;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: $baseline*17.5; width: $baseline*17.5;
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
} }
.nav-actions { .nav-actions {
@include box-shadow(inset 0 1px 2px $shadow-d1); box-shadow: inset 0 1px 2px $shadow-d1;
border-top: 1px solid $black-t1; border-top: 1px solid $black-t1;
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
background: $gray-d4; background: $gray-d4;
...@@ -244,14 +244,14 @@ ...@@ -244,14 +244,14 @@
.wrapper-notification { .wrapper-notification {
@extend .depth5; @extend .depth5;
@include clearfix(); @include clearfix();
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue); box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
padding: $baseline ($baseline*2); padding: $baseline ($baseline*2);
&.wrapper-notification-warning { &.wrapper-notification-warning {
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $orange); box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $orange;
[class^="icon"] { [class^="icon"] {
color: $orange; color: $orange;
...@@ -259,7 +259,7 @@ ...@@ -259,7 +259,7 @@
} }
&.wrapper-notification-error { &.wrapper-notification-error {
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $red-l1); box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $red-l1;
[class^="icon"] { [class^="icon"] {
color: $red-l1; color: $red-l1;
...@@ -267,7 +267,7 @@ ...@@ -267,7 +267,7 @@
} }
&.wrapper-notification-confirmation { &.wrapper-notification-confirmation {
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $green); box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $green;
[class^="icon"] { [class^="icon"] {
color: $green; color: $green;
...@@ -275,7 +275,7 @@ ...@@ -275,7 +275,7 @@
} }
&.wrapper-notification-saving { &.wrapper-notification-saving {
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $pink); box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $pink;
} }
// shorter/status notifications // shorter/status notifications
...@@ -364,7 +364,7 @@ ...@@ -364,7 +364,7 @@
} }
[class^="icon"] { [class^="icon"] {
@include transition (color 0.5s ease-in-out); @include transition (color 0.50s ease-in-out 0s);
@include font-size(22); @include font-size(22);
width: flex-grid(1, 12); width: flex-grid(1, 12);
height: ($baseline*1.25); height: ($baseline*1.25);
...@@ -437,7 +437,7 @@ ...@@ -437,7 +437,7 @@
&.saving { &.saving {
[class^="icon"] { [class^="icon"] {
@include anim-rotateClockwise(3s, linear, infinite); @include animation(rotateCW $tmg-s3 linear infinite);
width: 25px; width: 25px;
margin: -4px 10px 0 0; margin: -4px 10px 0 0;
@include transform-origin(52% 60%); @include transform-origin(52% 60%);
...@@ -455,7 +455,7 @@ ...@@ -455,7 +455,7 @@
.wrapper-alert { .wrapper-alert {
@extend .depth2; @extend .depth2;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue); box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
...@@ -472,7 +472,7 @@ ...@@ -472,7 +472,7 @@
} }
&.wrapper-alert-warning { &.wrapper-alert-warning {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange); box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange;
[class^="icon"] { [class^="icon"] {
color: $orange; color: $orange;
...@@ -480,7 +480,7 @@ ...@@ -480,7 +480,7 @@
} }
&.wrapper-alert-error { &.wrapper-alert-error {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1); box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1;
[class^="icon"] { [class^="icon"] {
color: $red-l1; color: $red-l1;
...@@ -488,7 +488,7 @@ ...@@ -488,7 +488,7 @@
} }
&.wrapper-alert-confirmation { &.wrapper-alert-confirmation {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green); box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green;
[class^="icon"] { [class^="icon"] {
color: $green; color: $green;
...@@ -496,7 +496,7 @@ ...@@ -496,7 +496,7 @@
} }
&.wrapper-alert-announcement { &.wrapper-alert-announcement {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue); box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
[class^="icon"] { [class^="icon"] {
color: $blue; color: $blue;
...@@ -504,7 +504,7 @@ ...@@ -504,7 +504,7 @@
} }
&.wrapper-alert-step-required { &.wrapper-alert-step-required {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink); box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink;
[class^="icon"] { [class^="icon"] {
color: $pink; color: $pink;
...@@ -531,7 +531,7 @@ ...@@ -531,7 +531,7 @@
} }
[class^="icon"] { [class^="icon"] {
@include transition (color 0.5s ease-in-out); @include transition (color 0.50s ease-in-out 0s);
@include font-size(22); @include font-size(22);
width: flex-grid(1, 12); width: flex-grid(1, 12);
margin: ($baseline/4) flex-gutter() 0 0; margin: ($baseline/4) flex-gutter() 0 0;
...@@ -627,16 +627,16 @@ ...@@ -627,16 +627,16 @@
pointer-events: none; pointer-events: none;
.prompt { .prompt {
opacity: 0.0;
} }
} }
// prompt showing/hiding // prompt showing
&.prompt-is-shown { &.prompt-is-shown {
.wrapper-view { .wrapper-view {
-webkit-filter: blur(2px) grayscale(25%); -webkit-filter: blur(($baseline/10)) grayscale(25%);
filter: blur(2px) grayscale(25%); filter: blur(($baseline/10)) grayscale(25%);
} }
.wrapper-prompt.is-shown { .wrapper-prompt.is-shown {
...@@ -644,8 +644,23 @@ ...@@ -644,8 +644,23 @@
pointer-events: auto; pointer-events: auto;
.prompt { .prompt {
@include anim-bounceIn(0.5s); @include animation(bounceIn $tmg-f1 ease-in-out 1);
opacity: 1.0; }
}
}
// prompt hiding
&.prompt-is-hiding {
.wrapper-view {
-webkit-filter: blur(($baseline/10)) grayscale(25%);
filter: blur(($baseline/10)) grayscale(25%);
}
.wrapper-prompt {
.prompt {
@include animation(bounceOut $tmg-f1 ease-in-out 1);
} }
} }
} }
...@@ -665,11 +680,13 @@ ...@@ -665,11 +680,13 @@
// varying animations // varying animations
&.is-shown { &.is-shown {
@include anim-notificationsSlideUp(1s); @include animation(notificationSlideUp $tmg-s1 ease-in-out 1);
@include animation-fill-mode(forwards);
} }
&.is-hiding { &.is-hiding {
@include anim-notificationsSlideDown(0.25s); @include animation(notificationSlideDown $tmg-s1 ease-in-out 1);
@include animation-fill-mode(forwards);
} }
} }
} }
......
cms/static/sass/elements/_system-help.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// notices - in-context: to be used as notices to users within the context of a form/action // notices - in-context: to be used as notices to users within the context of a form/action
.notice-incontext { .notice-incontext {
@extend .ui-well; @extend .ui-well;
@include border-radius(($baseline/10)); border-radius: ($baseline/10);
.title { .title {
@extend .t-title7; @extend .t-title7;
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
.copy { .copy {
@extend .t-copy-sub1; @extend .t-copy-sub1;
@include transition(opacity 0.25s ease-in-out 0); @include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.75; opacity: 0.75;
} }
......
cms/static/sass/elements/_tender-widget.scss
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
} }
#tender_window { #tender_window {
@include border-radius(3px); border-radius: 3px;
@include box-shadow(0 2px 3px $shadow); box-shadow: 0 2px 3px $shadow;
height: ($baseline*35) !important; height: ($baseline*35) !important;
background: $white !important; background: $white !important;
border: 2px solid $blue; border: 2px solid $blue;
......
cms/static/sass/elements/_vendor.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
background: #fff; background: #fff;
font-family: $f-sans-serif; font-family: $f-sans-serif;
font-size: 12px; font-size: 12px;
@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1)); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
z-index: 100000 !important; z-index: 100000 !important;
.ui-widget-header { .ui-widget-header {
......
cms/static/sass/views/_account.scss
...@@ -57,8 +57,8 @@ body.signup, body.signin { ...@@ -57,8 +57,8 @@ body.signup, body.signin {
form { form {
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 2px $shadow-l1); box-shadow: 0 1px 2px $shadow-l1;
@include border-radius(2px); border-radius: 2px;
width: 100%; width: 100%;
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
...@@ -70,7 +70,7 @@ body.signup, body.signin { ...@@ -70,7 +70,7 @@ body.signup, body.signin {
.action-primary { .action-primary {
@include blue-button; @include blue-button;
@extend .t-action2; @extend .t-action2;
@include transition(all .15s); @include transition(all $tmg-f3 linear 0s);
display: block; display: block;
width: 100%; width: 100%;
padding: ($baseline*0.75) ($baseline/2); padding: ($baseline*0.75) ($baseline/2);
...@@ -109,7 +109,7 @@ body.signup, body.signin { ...@@ -109,7 +109,7 @@ body.signup, body.signin {
label { label {
@extend .t-copy-sub1; @extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out); @include transition(color $tmg-f3 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
&.is-focused { &.is-focused {
...@@ -172,7 +172,7 @@ body.signup, body.signin { ...@@ -172,7 +172,7 @@ body.signup, body.signin {
.tip { .tip {
@extend .t-copy-sub2; @extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out); @include transition(color $tmg-f3 ease-in-out 0s);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: $gray-l3; color: $gray-l3;
......
cms/static/sass/views/_assets.scss
...@@ -81,7 +81,7 @@ body.course.uploads { ...@@ -81,7 +81,7 @@ body.course.uploads {
} }
.embeddable-xml-input { .embeddable-xml-input {
@include box-shadow(none); box-shadow: none;
width: 100%; width: 100%;
} }
...@@ -194,7 +194,7 @@ body.course.uploads { ...@@ -194,7 +194,7 @@ body.course.uploads {
} }
.embeddable-xml-input { .embeddable-xml-input {
@include box-shadow(none); box-shadow: none;
width: 400px; width: 400px;
} }
......
cms/static/sass/views/_checklists.scss
...@@ -31,7 +31,7 @@ body.course.checklists { ...@@ -31,7 +31,7 @@ body.course.checklists {
background: $gray-l4; background: $gray-l4;
.viz-checklist-status-value { .viz-checklist-status-value {
@include transition(width 2s ease-in-out .25s); @include transition(width $tmg-s2 ease-in-out .25s);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -49,19 +49,19 @@ body.course.checklists { ...@@ -49,19 +49,19 @@ body.course.checklists {
// header/title // header/title
header { header {
@include clearfix(); @include clearfix();
@include box-shadow(inset 0 -1px 1px $shadow-l1); box-shadow: inset 0 -1px 1px $shadow-l1;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 1px solid $gray-l3; border-bottom: 1px solid $gray-l3;
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
.checklist-title { .checklist-title {
@include transition(color .15s .25s ease-in-out); @include transition(color $tmg-f2 ease-in-out 0s);
width: flex-grid(6, 9); width: flex-grid(6, 9);
margin: 0 flex-gutter() 0 0; margin: 0 flex-gutter() 0 0;
float: left; float: left;
.ui-toggle-expansion { .ui-toggle-expansion {
@include transition(rotate .15s ease-in-out .25s); @include transition(all $tmg-f2 ease-in-out 0s);
@include font-size(21); @include font-size(21);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -118,8 +118,8 @@ body.course.checklists { ...@@ -118,8 +118,8 @@ body.course.checklists {
// checklist actions // checklist actions
.course-checklist-actions { .course-checklist-actions {
@include clearfix(); @include clearfix();
@include box-shadow(inset 0 1px 1px $shadow-l1); @include transition(border $tmg-f2 ease-in-out .25s);
@include transition(border .15s ease-in-out .25s); box-shadow: inset 0 1px 1px $shadow-l1;
border-top: 1px solid $gray-l2; border-top: 1px solid $gray-l2;
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
background: $gray-l4; background: $gray-l4;
...@@ -155,7 +155,7 @@ body.course.checklists { ...@@ -155,7 +155,7 @@ body.course.checklists {
&.is-collapsed { &.is-collapsed {
header { header {
@include box-shadow(none); box-shadow: none;
.checklist-title { .checklist-title {
...@@ -208,8 +208,7 @@ body.course.checklists { ...@@ -208,8 +208,7 @@ body.course.checklists {
overflow: hidden; overflow: hidden;
.task { .task {
@include transition(background .15s ease-in-out .25s); @include transition(background $tmg-f2 ease-in-out 0s, border $tmg-f3 ease-in-out 0s);
@include transition(border .15s ease-in-out .25s);
@include clearfix(); @include clearfix();
position: relative; position: relative;
border-top: 1px solid $white; border-top: 1px solid $white;
...@@ -239,7 +238,7 @@ body.course.checklists { ...@@ -239,7 +238,7 @@ body.course.checklists {
font-weight: 500; font-weight: 500;
.task-name { .task-name {
@include transition(color .15s .25s ease-in-out); @include transition(color $tmg-f2 ease-in-out 0s);
vertical-align: baseline; vertical-align: baseline;
cursor: pointer; cursor: pointer;
margin-bottom: 0; margin-bottom: 0;
...@@ -247,20 +246,20 @@ body.course.checklists { ...@@ -247,20 +246,20 @@ body.course.checklists {
.task-description { .task-description {
@extend .t-copy-sub1; @extend .t-copy-sub1;
@include transition(color .15s .25s ease-in-out); @include transition(color $tmg-f2 ease-in-out 0s);
color: $gray-l2; color: $gray-l2;
} }
.task-support { .task-support {
@extend .t-copy-sub2; @extend .t-copy-sub2;
@include transition(opacity .15s .25s ease-in-out); @include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.0; opacity: 0.0;
pointer-events: none; pointer-events: none;
} }
} }
.task-actions { .task-actions {
@include transition(opacity .15s .25s ease-in-out); @include transition(opacity $tmg-f2 ease-in-out 0.25s);
@include clearfix(); @include clearfix();
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -274,7 +273,6 @@ body.course.checklists { ...@@ -274,7 +273,6 @@ body.course.checklists {
.action-primary { .action-primary {
@include blue-button; @include blue-button;
@extend .t-action4; @extend .t-action4;
@include transition(all .15s);
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
......
cms/static/sass/views/_dashboard.scss
...@@ -10,9 +10,9 @@ body.dashboard { ...@@ -10,9 +10,9 @@ body.dashboard {
.class-list { .class-list {
margin-top: 20px; margin-top: 20px;
border-radius: 3px; border-radius: 3px;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
background: #fff; background: #fff;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
li { li {
position: relative; position: relative;
...@@ -27,7 +27,7 @@ body.dashboard { ...@@ -27,7 +27,7 @@ body.dashboard {
display: block; display: block;
padding: 20px 25px; padding: 20px 25px;
line-height: 1.3; line-height: 1.3;
&:hover { &:hover {
background: $paleYellow; background: $paleYellow;
...@@ -57,7 +57,7 @@ body.dashboard { ...@@ -57,7 +57,7 @@ body.dashboard {
z-index: 10000; z-index: 10000;
position: absolute; position: absolute;
top: 15px; top: 15px;
right: $baseline; right: $baseline;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
opacity: 0.0; opacity: 0.0;
pointer-events: none; pointer-events: none;
...@@ -73,7 +73,7 @@ body.dashboard { ...@@ -73,7 +73,7 @@ body.dashboard {
padding: 15px 25px; padding: 15px 25px;
margin-top: 20px; margin-top: 20px;
border-radius: 3px; border-radius: 3px;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
background: #fff; background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
@include clearfix; @include clearfix;
...@@ -121,4 +121,4 @@ body.dashboard { ...@@ -121,4 +121,4 @@ body.dashboard {
@include white-button; @include white-button;
} }
} }
} }
\ No newline at end of file
cms/static/sass/views/_index.scss
...@@ -114,7 +114,7 @@ body.index { ...@@ -114,7 +114,7 @@ body.index {
// feature content // feature content
.wrapper-content-features { .wrapper-content-features {
@include box-shadow(0 -1px ($baseline/4) $shadow); box-shadow: 0 -1px ($baseline/4) $shadow;
padding-bottom: ($baseline*2); padding-bottom: ($baseline*2);
padding-top: ($baseline*3); padding-top: ($baseline*3);
background: $white; background: $white;
...@@ -141,7 +141,7 @@ body.index { ...@@ -141,7 +141,7 @@ body.index {
a { a {
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px ($baseline/10) $shadow-l1); box-shadow: 0 1px ($baseline/10) $shadow-l1;
position: relative; position: relative;
top: 0; top: 0;
display: block; display: block;
...@@ -151,7 +151,7 @@ body.index { ...@@ -151,7 +151,7 @@ body.index {
background: $white; background: $white;
.action-zoom { .action-zoom {
@include transition(bottom .50s ease-in-out); @include transition(bottom $tmg-f2 ease-in-out 0s);
position: absolute; position: absolute;
bottom: -30px; bottom: -30px;
right: ($baseline/2); right: ($baseline/2);
...@@ -214,8 +214,8 @@ body.index { ...@@ -214,8 +214,8 @@ body.index {
.proofpoint { .proofpoint {
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(($baseline/4)); @include transition(all $tmg-f2 ease-in-out 0s);
@include transition(color .50s ease-in-out); border-radius: ($baseline/4);
position: relative; position: relative;
top: 0; top: 0;
float: left; float: left;
...@@ -233,7 +233,8 @@ body.index { ...@@ -233,7 +233,8 @@ body.index {
} }
&:hover { &:hover {
@include box-shadow(0 1px ($baseline/10) $shadow-l1); @extend .fake-link;
box-shadow: 0 1px ($baseline/10) $shadow-l1;
background: $blue-l5; background: $blue-l5;
top: -($baseline/5); top: -($baseline/5);
...@@ -319,7 +320,6 @@ body.index { ...@@ -319,7 +320,6 @@ body.index {
&.action-primary { &.action-primary {
@extend .t-action1; @extend .t-action1;
@include blue-button; @include blue-button;
@include transition(all .15s);
padding: ($baseline*0.75) ($baseline/2); padding: ($baseline*0.75) ($baseline/2);
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
......
cms/static/sass/views/_outline.scss
...@@ -36,7 +36,7 @@ body.course.outline { ...@@ -36,7 +36,7 @@ body.course.outline {
display: none; display: none;
width: 110px; width: 110px;
padding: 5px 40px 5px 10px; padding: 5px 40px 5px 10px;
@include border-radius(3px); border-radius: 3px;
color: $lightGrey; color: $lightGrey;
text-align: right; text-align: right;
font-weight: bold; font-weight: bold;
...@@ -64,9 +64,9 @@ body.course.outline { ...@@ -64,9 +64,9 @@ body.course.outline {
.menu { .menu {
@include font-size(12); @include font-size(12);
@include border-radius(4px); @include transition(opacity $tmg-f2 linear 0s);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); border-radius: 4px;
@include transition(opacity .15s); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
z-index: 1; z-index: 1;
display: none; display: none;
opacity: 0.0; opacity: 0.0;
...@@ -143,7 +143,7 @@ body.course.outline { ...@@ -143,7 +143,7 @@ body.course.outline {
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
margin-top: 15px; margin-top: 15px;
padding-bottom: 12px; padding-bottom: 12px;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
...@@ -199,7 +199,7 @@ body.course.outline { ...@@ -199,7 +199,7 @@ body.course.outline {
.datepair .date, .datepair .date,
.datepair .time { .datepair .time {
@include font-size(13); @include font-size(13);
@include box-shadow(none); box-shadow: none;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
border: none; border: none;
...@@ -246,8 +246,8 @@ body.course.outline { ...@@ -246,8 +246,8 @@ body.course.outline {
} }
.section-name-span { .section-name-span {
@include transition(color $tmg-f2 linear 0s);
cursor: pointer; cursor: pointer;
@include transition(color .15s);
&:hover { &:hover {
color: $orange; color: $orange;
...@@ -277,7 +277,7 @@ body.course.outline { ...@@ -277,7 +277,7 @@ body.course.outline {
.section-published-date { .section-published-date {
float: right; float: right;
@include border-radius(3px); border-radius: 3px;
background: $lightGrey; background: $lightGrey;
.published-status { .published-status {
...@@ -312,7 +312,7 @@ body.course.outline { ...@@ -312,7 +312,7 @@ body.course.outline {
.status-label { .status-label {
@include font-size(12); @include font-size(12);
@include border-radius(3px); border-radius: 3px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 2px; right: 2px;
...@@ -342,10 +342,9 @@ body.course.outline { ...@@ -342,10 +342,9 @@ body.course.outline {
.menu { .menu {
@include font-size(12); @include font-size(12);
@include border-radius(4px); @include transition(opacity $tmg-f2 linear 0s, display $tmg-f2 linear 0s);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); border-radius: 4px;
@include transition(opacity .15s); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
@include transition(display .15s);
z-index: 1; z-index: 1;
display: none; display: none;
opacity: 0.0; opacity: 0.0;
...@@ -428,9 +427,9 @@ body.course.outline { ...@@ -428,9 +427,9 @@ body.course.outline {
} }
.expand-collapse-icon { .expand-collapse-icon {
@include transition(none);
float: left; float: left;
margin: 25px 6px 16px 16px; margin: 25px 6px 16px 16px;
@include transition(none);
&.expand { &.expand {
background-position: 0 0; background-position: 0 0;
...@@ -453,8 +452,8 @@ body.course.outline { ...@@ -453,8 +452,8 @@ body.course.outline {
} }
.section-name-span { .section-name-span {
@include transition(color $tmg-f2 linear 0s);
cursor: pointer; cursor: pointer;
@include transition(color .15s);
&:hover { &:hover {
color: $orange; color: $orange;
...@@ -542,7 +541,7 @@ body.course.outline { ...@@ -542,7 +541,7 @@ body.course.outline {
[class^="icon-"] { [class^="icon-"] {
@include font-size(11); @include font-size(11);
@include border-radius(20px); border-radius: 20px;
position: relative; position: relative;
top: -1px; top: -1px;
display: inline-block; display: inline-block;
...@@ -582,7 +581,7 @@ body.course.outline { ...@@ -582,7 +581,7 @@ body.course.outline {
left: 110px; left: 110px;
z-index: 9999; z-index: 9999;
border: 1px solid #3C3C3C; border: 1px solid #3C3C3C;
@include box-shadow(0 1px 15px rgba(0, 0, 0, .2)); box-shadow: 0 1px 15px rgba(0, 0, 0, .2);
} }
.preview { .preview {
...@@ -688,7 +687,7 @@ body.course.outline { ...@@ -688,7 +687,7 @@ body.course.outline {
} }
.ui-draggable-dragging { .ui-draggable-dragging {
@include box-shadow(0 1px 2px rgba(0, 0, 0, .3)); box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
opacity : 0.2; opacity : 0.2;
&:hover { &:hover {
......
cms/static/sass/views/_settings.scss
...@@ -98,7 +98,7 @@ body.course.settings { ...@@ -98,7 +98,7 @@ body.course.settings {
.tip { .tip {
@extend .t-copy-sub2; @extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out); @include transition(color $tmg-f2 ease-in-out 0s);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: $gray-l3; color: $gray-l3;
...@@ -115,12 +115,12 @@ body.course.settings { ...@@ -115,12 +115,12 @@ body.course.settings {
// buttons // buttons
.remove-item { .remove-item {
@include white-button; @include white-button;
@extend .t-action-3; @extend .t-action3;
font-weight: 400; font-weight: 400;
} }
.new-button { .new-button {
// @extend .t-action-3; - bad buttons won't render this properly // @extend .t-action3; - bad buttons won't render this properly
@include font-size(14); @include font-size(14);
} }
...@@ -155,7 +155,7 @@ body.course.settings { ...@@ -155,7 +155,7 @@ body.course.settings {
label { label {
@extend .t-copy-sub1; @extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out); @include transition(color $tmg-f2 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
font-weight: 400; font-weight: 400;
...@@ -214,7 +214,7 @@ body.course.settings { ...@@ -214,7 +214,7 @@ body.course.settings {
.field-group { .field-group {
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); border-radius: 3px;
background: $gray-l5; background: $gray-l5;
padding: $baseline; padding: $baseline;
...@@ -266,7 +266,7 @@ body.course.settings { ...@@ -266,7 +266,7 @@ body.course.settings {
input, textarea { input, textarea {
@extend .t-copy-lead1; @extend .t-copy-lead1;
@include box-shadow(none); box-shadow: none;
border: none; border: none;
background: none; background: none;
padding: 0; padding: 0;
...@@ -294,8 +294,8 @@ body.course.settings { ...@@ -294,8 +294,8 @@ body.course.settings {
// course link note // course link note
.note-promotion-courseURL { .note-promotion-courseURL {
@include box-shadow(0 2px 1px $shadow-l1); box-shadow: 0 2px 1px $shadow-l1;
@include border-radius(($baseline/5)); border-radius: ($baseline/5);
margin-top: ($baseline*1.5); margin-top: ($baseline*1.5);
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
padding: ($baseline/2) 0 0 0; padding: ($baseline/2) 0 0 0;
...@@ -330,19 +330,18 @@ body.course.settings { ...@@ -330,19 +330,18 @@ body.course.settings {
} }
.list-actions { .list-actions {
@include box-shadow(inset 0 1px 1px $shadow-l1); box-shadow: inset 0 1px 1px $shadow-l1;
border-top: 1px solid $gray-l2; border-top: 1px solid $gray-l2;
padding: ($baseline/2); padding: ($baseline/2);
background: $gray-l5; background: $gray-l5;
.action-primary { .action-primary {
@include blue-button(); @include blue-button();
@extend .t-action-3; @extend .t-action3;
font-weight: 600; font-weight: 600;
[class^="icon-"] { [class^="icon-"] {
@extend .t-icon; @extend .t-icon5;
@include font-size(16);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-top: -3px; margin-top: -3px;
...@@ -410,7 +409,7 @@ body.course.settings { ...@@ -410,7 +409,7 @@ body.course.settings {
.input-existing { .input-existing {
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); border-radius: 3px;
background: $gray-l5; background: $gray-l5;
padding: ($baseline/2); padding: ($baseline/2);
...@@ -453,7 +452,7 @@ body.course.settings { ...@@ -453,7 +452,7 @@ body.course.settings {
.new-grade-button { .new-grade-button {
@include box-sizing(border-box); @include box-sizing(border-box);
@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
width: flex-grid(1,9); width: flex-grid(1,9);
height: ($baseline*2); height: ($baseline*2);
position: relative; position: relative;
...@@ -555,7 +554,7 @@ body.course.settings { ...@@ -555,7 +554,7 @@ body.course.settings {
top: 0; top: 0;
height: 50px; height: 50px;
text-align: right; text-align: right;
@include border-radius(2px); border-radius: 2px;
&:hover, &:hover,
&.is-dragging { &.is-dragging {
...@@ -620,7 +619,7 @@ body.course.settings { ...@@ -620,7 +619,7 @@ body.course.settings {
height: 50px; height: 50px;
width: 2px; width: 2px;
background-color: #fff; background-color: #fff;
@include box-shadow(-1px 0 3px rgba(0,0,0,0.1)); box-shadow: -1px 0 3px rgba(0,0,0,0.1);
cursor: ew-resize; cursor: ew-resize;
@include transition(none); @include transition(none);
...@@ -714,7 +713,7 @@ body.course.settings { ...@@ -714,7 +713,7 @@ body.course.settings {
} }
.tip { .tip {
@include transition (opacity 0.5s ease-in-out 0s); @include transition(opacity $tmg-f1 ease-in-out 0s);
opacity: 0.0; opacity: 0.0;
position: absolute; position: absolute;
bottom: ($baseline*1.25); bottom: ($baseline*1.25);
...@@ -768,7 +767,7 @@ body.course.settings { ...@@ -768,7 +767,7 @@ body.course.settings {
.CodeMirror { .CodeMirror {
@extend .t-copy-base; @extend .t-copy-base;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
@include linear-gradient($lightGrey, tint($lightGrey, 90%)); @include linear-gradient($lightGrey, tint($lightGrey, 90%));
padding: 5px 8px; padding: 5px 8px;
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
......
cms/static/sass/views/_static-pages.scss
...@@ -39,7 +39,7 @@ body.course.static-pages { ...@@ -39,7 +39,7 @@ body.course.static-pages {
.component-editor { .component-editor {
@include edit-box; @include edit-box;
@include box-shadow(none); box-shadow: none;
display: none; display: none;
padding: 0; padding: 0;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
...@@ -51,7 +51,7 @@ body.course.static-pages { ...@@ -51,7 +51,7 @@ body.course.static-pages {
// This duplicates the styling from Unit page editing // This duplicates the styling from Unit page editing
.module-actions { .module-actions {
@include box-shadow(inset 0 1px 1px $shadow); box-shadow: inset 0 1px 1px $shadow;
padding: 0px 0 10px 10px; padding: 0px 0 10px 10px;
background-color: $gray-l6; background-color: $gray-l6;
...@@ -74,7 +74,7 @@ body.course.static-pages { ...@@ -74,7 +74,7 @@ body.course.static-pages {
&.new-component-item { &.new-component-item {
background: transparent; background: transparent;
border: none; border: none;
@include box-shadow(none); box-shadow: none;
} }
} }
...@@ -137,11 +137,11 @@ body.course.static-pages { ...@@ -137,11 +137,11 @@ body.course.static-pages {
} }
.xmodule_display { .xmodule_display {
@include transition(background-color $tmg-s3 linear 0s);
padding: 20px 20px 22px; padding: 20px 20px 22px;
font-size: 24px; font-size: 24px;
font-weight: 300; font-weight: 300;
background: #fff; background: #fff;
@include transition(background-color 3s);
} }
.static-page-item { .static-page-item {
...@@ -151,7 +151,7 @@ body.course.static-pages { ...@@ -151,7 +151,7 @@ body.course.static-pages {
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
.page-name { .page-name {
font-size: 19px; font-size: 19px;
...@@ -186,14 +186,14 @@ body.course.static-pages { ...@@ -186,14 +186,14 @@ body.course.static-pages {
.page-contents { .page-contents {
@include box-sizing(border-box); @include box-sizing(border-box);
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
width: 100%; width: 100%;
height: 360px; height: 360px;
padding: 15px; padding: 15px;
border: 1px solid #b0b6c2; border: 1px solid #b0b6c2;
border-radius: 2px; border-radius: 2px;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
background-color: #edf1f5; background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
font-family: Monaco, monospace; font-family: Monaco, monospace;
font-size: 13px; font-size: 13px;
color: #3c3c3c; color: #3c3c3c;
......
cms/static/sass/views/_subsection.scss
...@@ -144,7 +144,7 @@ body.course.subsection { ...@@ -144,7 +144,7 @@ body.course.subsection {
.url { .url {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
@include box-shadow(none); box-shadow: none;
} }
.draft-tag, .draft-tag,
...@@ -335,6 +335,7 @@ body.course.subsection { ...@@ -335,6 +335,7 @@ body.course.subsection {
} }
.menu { .menu {
@include transition(opacity $tmg-f2 linear 0s);
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: -12px; top: -12px;
...@@ -347,9 +348,8 @@ body.course.subsection { ...@@ -347,9 +348,8 @@ body.course.subsection {
background: $white; background: $white;
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
font-size: 12px; font-size: 12px;
@include border-radius(4px); border-radius: 4px;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
@include transition(opacity .15s);
li { li {
......
cms/static/sass/views/_textbooks.scss
...@@ -129,7 +129,7 @@ body.course.textbooks { ...@@ -129,7 +129,7 @@ body.course.textbooks {
.edit-textbook { .edit-textbook {
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(2px); border-radius: 2px;
width: 100%; width: 100%;
background: $white; background: $white;
...@@ -143,7 +143,7 @@ body.course.textbooks { ...@@ -143,7 +143,7 @@ body.course.textbooks {
} }
.actions { .actions {
@include box-shadow(inset 0 1px 2px $shadow); box-shadow: inset 0 1px 2px $shadow;
border-top: 1px solid $gray-l1; border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
background: $gray-l6; background: $gray-l6;
...@@ -383,9 +383,9 @@ body.course.textbooks { ...@@ -383,9 +383,9 @@ body.course.textbooks {
} }
.dialog { .dialog {
@include box-shadow(0px 0px 7px $shadow-d1);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(($baseline/5)); box-shadow: 0px 0px 7px $shadow-d1;
border-radius: ($baseline/5);
background-color: $gray-l4; background-color: $gray-l4;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -413,7 +413,7 @@ body.course.textbooks { ...@@ -413,7 +413,7 @@ body.course.textbooks {
padding: 0; padding: 0;
.form-content { .form-content {
@include box-shadow(0 0 3px $shadow-d1); box-shadow: 0 0 3px $shadow-d1;
padding: ($baseline*1.5); padding: ($baseline*1.5);
background-color: $white; background-color: $white;
} }
...@@ -427,7 +427,7 @@ body.course.textbooks { ...@@ -427,7 +427,7 @@ body.course.textbooks {
margin-top: $baseline; margin-top: $baseline;
.wrapper-progress { .wrapper-progress {
@include box-shadow(inset 0 0 3px $shadow-d1); box-shadow: inset 0 0 3px $shadow-d1;
display: block; display: block;
border-radius: ($baseline*0.75); border-radius: ($baseline*0.75);
background-color: $gray-l5; background-color: $gray-l5;
......
cms/static/sass/views/_unit.scss
...@@ -49,7 +49,7 @@ body.course.unit { ...@@ -49,7 +49,7 @@ body.course.unit {
border-bottom: 1px solid #cbd1db; border-bottom: 1px solid #cbd1db;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%); @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
background-color: #edf1f5; background-color: #edf1f5;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
@include clearfix; @include clearfix;
li { li {
...@@ -140,7 +140,7 @@ body.course.unit { ...@@ -140,7 +140,7 @@ body.course.unit {
font-size: 15px; font-size: 15px;
line-height: 14px; line-height: 14px;
text-align: center; text-align: center;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;
.name { .name {
position: absolute; position: absolute;
...@@ -160,7 +160,7 @@ body.course.unit { ...@@ -160,7 +160,7 @@ body.course.unit {
border-radius: 3px; border-radius: 3px;
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
background-color: #fff; background-color: #fff;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;
@include clearfix; @include clearfix;
.cancel-button { .cancel-button {
...@@ -208,7 +208,7 @@ body.course.unit { ...@@ -208,7 +208,7 @@ body.course.unit {
width: 100%; width: 100%;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey; background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
li:first-child { li:first-child {
margin-left: $baseline; margin-left: $baseline;
...@@ -221,7 +221,7 @@ body.course.unit { ...@@ -221,7 +221,7 @@ body.course.unit {
width: auto; width: auto;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: tint($lightBluishGrey, 10%); background-color: tint($lightBluishGrey, 10%);
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
opacity: 0.8; opacity: 0.8;
&:hover { &:hover {
...@@ -250,15 +250,15 @@ body.course.unit { ...@@ -250,15 +250,15 @@ body.course.unit {
.new-component-template { .new-component-template {
a { a {
@include transition(none);
background: #fff; background: #fff;
border: 0px; border: 0px;
color: #3c3c3c; color: #3c3c3c;
@include transition (none);
&:hover { &:hover {
@include transition(background-color $tmg-f2 linear 0s);
background: tint($green,30%); background: tint($green,30%);
color: #fff; color: #fff;
@include transition(background-color .15s);
} }
} }
...@@ -291,7 +291,7 @@ body.course.unit { ...@@ -291,7 +291,7 @@ body.course.unit {
float: left; float: left;
[class^="icon-"] { [class^="icon-"] {
@include transition(opacity .15s); @include transition(opacity $tmg-f2 linear 0s);
display: inline-block; display: inline-block;
top: 1px; top: 1px;
margin-right: 5px; margin-right: 5px;
...@@ -303,7 +303,7 @@ body.course.unit { ...@@ -303,7 +303,7 @@ body.course.unit {
} }
.editor-indicator { .editor-indicator {
@include transition(opacity .15s); @include transition(opacity $tmg-f2 linear 0s);
float: right; float: right;
position: relative; position: relative;
top: 3px; top: 3px;
...@@ -426,7 +426,7 @@ body.course.unit { ...@@ -426,7 +426,7 @@ body.course.unit {
.component-editor { .component-editor {
@include edit-box; @include edit-box;
@include box-shadow(none); box-shadow: none;
display: none; display: none;
padding: 0; padding: 0;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
...@@ -449,7 +449,7 @@ body.course.unit { ...@@ -449,7 +449,7 @@ body.course.unit {
// Module Actions, also used for Static Pages // Module Actions, also used for Static Pages
.module-actions { .module-actions {
@include box-shadow(inset 0 1px 1px $shadow); box-shadow: inset 0 1px 1px $shadow;
padding: 0 0 $baseline $baseline; padding: 0 0 $baseline $baseline;
background-color: $gray-l6; background-color: $gray-l6;
...@@ -507,7 +507,6 @@ body.course.unit { ...@@ -507,7 +507,6 @@ body.course.unit {
@include blue-button; @include blue-button;
&.is-set { &.is-set {
@include transition(box-shadow 0.5 ease-in-out);
@include linear-gradient($blue, $blue); @include linear-gradient($blue, $blue);
color: $blue-d1; color: $blue-d1;
box-shadow: inset 0 1px 2px 1px $shadow-l1; box-shadow: inset 0 1px 2px 1px $shadow-l1;
...@@ -587,7 +586,7 @@ body.course.unit { ...@@ -587,7 +586,7 @@ body.course.unit {
} }
&:hover { &:hover {
@include transition(opacity 0.25s ease-in-out); @include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 1.0; opacity: 1.0;
} }
...@@ -612,7 +611,7 @@ body.course.unit { ...@@ -612,7 +611,7 @@ body.course.unit {
label.setting-label { label.setting-label {
@extend .t-copy-sub1; @extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out); @include transition(color $tmg-f2 ease-in-out 0s);
font-weight: 400; font-weight: 400;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
...@@ -657,7 +656,7 @@ body.course.unit { ...@@ -657,7 +656,7 @@ body.course.unit {
input[type="number"] { input[type="number"] {
width: 38.5%; width: 38.5%;
@include box-shadow(0 1px 2px $shadow-l1 inset); box-shadow: 0 1px 2px $shadow-l1 inset;
//For webkit browsers which render number fields differently, make input wider. //For webkit browsers which render number fields differently, make input wider.
-moz-column-width: { -moz-column-width: {
width: 32%; width: 32%;
...@@ -669,11 +668,11 @@ body.course.unit { ...@@ -669,11 +668,11 @@ body.course.unit {
} }
select { select {
//@include box-shadow(0 1px 2px $shadow-l1 inset); //box-shadow: 0 1px 2px $shadow-l1 inset;
&:focus { &:focus {
@include box-shadow(0 0 1px $shadow); box-shadow: 0 0 1px $shadow;
@include transition(opacity 0.25s ease-in-out); @include transition(opacity $tmg-f2 ease-in-out 0s);
background-color: $yellow; background-color: $yellow;
} }
...@@ -697,8 +696,8 @@ body.course.unit { ...@@ -697,8 +696,8 @@ body.course.unit {
background-color: $gray-l4; background-color: $gray-l4;
&:hover { &:hover {
@include box-shadow(0 1px 1px $shadow); box-shadow: 0 1px 1px $shadow;
@include transition(opacity 0.15s ease-in-out); @include transition(opacity $tmg-f2 ease-in-out 0s);
background-color: $blue-s3; background-color: $blue-s3;
border: 1px solid $blue-s3; border: 1px solid $blue-s3;
color: $white; color: $white;
...@@ -856,7 +855,7 @@ body.unit { ...@@ -856,7 +855,7 @@ body.unit {
.unit-location { .unit-location {
.url { .url {
@include box-shadow(none); box-shadow: none;
width: 100%; width: 100%;
margin-bottom: $baseline/2; margin-bottom: $baseline/2;
} }
...@@ -956,7 +955,7 @@ body.unit { ...@@ -956,7 +955,7 @@ body.unit {
&:hover { &:hover {
@include transition(opacity 0.25s ease-in-out); @include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 1.0s; opacity: 1.0s;
} }
} }
......
common/lib/xmodule/xmodule/css/capa/display.scss
...@@ -110,8 +110,8 @@ section.problem { ...@@ -110,8 +110,8 @@ section.problem {
padding: 9px 15px 20px; padding: 9px 15px 20px;
background: #FFF; background: #FFF;
position: relative; position: relative;
@include box-shadow(inset 0 0 0 1px #eee); box-shadow: inset 0 0 0 1px #eee;
@include border-radius(3px); border-radius: 3px;
&:empty { &:empty {
display: none; display: none;
...@@ -214,7 +214,7 @@ section.problem { ...@@ -214,7 +214,7 @@ section.problem {
background: #f1f1f1; background: #f1f1f1;
border: 1px solid #e3e3e3; border: 1px solid #e3e3e3;
@include inline-block; @include inline-block;
@include border-radius(4px); border-radius: 4px;
min-width: 30px; min-width: 30px;
} }
} }
...@@ -464,7 +464,7 @@ section.problem { ...@@ -464,7 +464,7 @@ section.problem {
white-space: nowrap; white-space: nowrap;
border: 1px solid #EAEAEA; border: 1px solid #EAEAEA;
background-color: #F8F8F8; background-color: #F8F8F8;
@include border-radius(3px); border-radius: 3px;
font-size: .9em; font-size: .9em;
} }
...@@ -475,7 +475,7 @@ section.problem { ...@@ -475,7 +475,7 @@ section.problem {
line-height: 1.4; line-height: 1.4;
overflow: auto; overflow: auto;
padding: 6px 10px; padding: 6px 10px;
@include border-radius(3px); border-radius: 3px;
> code { > code {
margin: 0; margin: 0;
...@@ -499,7 +499,7 @@ section.problem { ...@@ -499,7 +499,7 @@ section.problem {
} }
pre { pre {
@include border-radius(0); border-radius: 0;
border-radius: 0; border-radius: 0;
border-width: 0; border-width: 0;
margin: 0; margin: 0;
...@@ -566,7 +566,7 @@ section.problem { ...@@ -566,7 +566,7 @@ section.problem {
} }
.save { .save {
@extend .blue-button; @extend .blue-button !optional;
} }
.show { .show {
...@@ -580,7 +580,7 @@ section.problem { ...@@ -580,7 +580,7 @@ section.problem {
.submission_feedback { .submission_feedback {
// background: #F3F3F3; // background: #F3F3F3;
// border: 1px solid #ddd; // border: 1px solid #ddd;
// @include border-radius(3px); // border-radius: 3px;
// padding: 8px 12px; // padding: 8px 12px;
// margin-top: 10px; // margin-top: 10px;
@include inline-block; @include inline-block;
...@@ -658,7 +658,7 @@ section.problem { ...@@ -658,7 +658,7 @@ section.problem {
display: block; display: block;
padding: 9px; padding: 9px;
background: #F6F6F6; background: #F6F6F6;
@include box-shadow(inset 0 0 0 1px #fff); box-shadow: inset 0 0 0 1px #fff;
} }
} }
...@@ -689,8 +689,8 @@ section.problem { ...@@ -689,8 +689,8 @@ section.problem {
margin-bottom: 10px; margin-bottom: 10px;
background: #FFF; background: #FFF;
position: relative; position: relative;
@include box-shadow(inset 0 0 0 1px #eee); box-shadow: inset 0 0 0 1px #eee;
@include border-radius(3px); border-radius: 3px;
p:last-of-type { p:last-of-type {
margin-bottom: 0; margin-bottom: 0;
......
common/lib/xmodule/xmodule/css/combinedopenended/display.scss
...@@ -292,8 +292,8 @@ section.open-ended-child { ...@@ -292,8 +292,8 @@ section.open-ended-child {
padding: 9px 15px 20px; padding: 9px 15px 20px;
background: #FFF; background: #FFF;
position: relative; position: relative;
@include box-shadow(inset 0 0 0 1px #eee); box-shadow: inset 0 0 0 1px #eee;
@include border-radius(3px); border-radius: 3px;
&:empty { &:empty {
display: none; display: none;
...@@ -577,7 +577,7 @@ section.open-ended-child { ...@@ -577,7 +577,7 @@ section.open-ended-child {
margin-top: 20px; margin-top: 20px;
input.save { input.save {
@extend .blue-button; @extend .blue-button !optional;
} }
.submission_feedback { .submission_feedback {
...@@ -649,7 +649,7 @@ section.open-ended-child { ...@@ -649,7 +649,7 @@ section.open-ended-child {
input[type=radio]:checked + label { input[type=radio]:checked + label {
background: #666; background: #666;
color: white; color: white;
} }
input[class='grade-selection'] { input[class='grade-selection'] {
display: none; display: none;
......
common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
color: $darkGrey !important; color: $darkGrey !important;
pointer-events: none; pointer-events: none;
cursor: none; cursor: none;
&:hover { &:hover {
box-shadow: 0 0 0 0 !important; box-shadow: 0 0 0 0 !important;
} }
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
@include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px); @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
@include transition(width .3s); @include transition(width .3s linear 0s);
&.shown { &.shown {
width: 300px; width: 300px;
......
common/lib/xmodule/xmodule/css/crowdsource_hinter/display.scss
.crowdsource-wrapper { .crowdsource-wrapper {
@include box-shadow(inset 0 1px 2px 1px rgba(0,0,0,0.1)); box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.1);
@include border-radius(2px); border-radius: 2px;
display: none; display: none;
margin-top: 20px; margin-top: 20px;
padding: (15px); padding: (15px);
......
common/lib/xmodule/xmodule/css/problem/edit.scss
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
@include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px); @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
@include transition(width .3s); @include transition(width .3s linear 0s);
&.shown { &.shown {
width: 300px; width: 300px;
......
common/lib/xmodule/xmodule/css/sequence/display.scss
$border-color: #C8C8C8;
// repeated extends - needed since LMS styling was referenced
.block-link {
border-left: 1px solid lighten($border-color, 10%);
display: block;
&:hover {
background: none;
}
}
.topbar {
@include clearfix();
border-bottom: 1px solid $border-color;
@media print {
display: none;
}
a {
&.block-link {
border-left: 1px solid lighten($border-color, 10%);
display: block;
&:hover {
background: none;
}
}
}
}
// ====================
nav.sequence-nav { nav.sequence-nav {
// TODO (cpennington): This doesn't work anymore. XModules aren't able to // TODO (cpennington): This doesn't work anymore. XModules aren't able to
// import from external sources. // import from external sources.
...@@ -37,7 +71,7 @@ nav.sequence-nav { ...@@ -37,7 +71,7 @@ nav.sequence-nav {
height: 44px; height: 44px;
margin: 0 30px; margin: 0 30px;
@include linear-gradient(top, #ddd, #eee); @include linear-gradient(top, #ddd, #eee);
@include box-shadow(0 1px 3px rgba(0, 0, 0, .1) inset); box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
} }
ol { ol {
...@@ -70,7 +104,7 @@ nav.sequence-nav { ...@@ -70,7 +104,7 @@ nav.sequence-nav {
display: block; display: block;
padding: 0; padding: 0;
position: relative; position: relative;
@include transition(); @include transition(none);
outline: 0; outline: 0;
&:focus { &:focus {
...@@ -174,7 +208,7 @@ nav.sequence-nav { ...@@ -174,7 +208,7 @@ nav.sequence-nav {
position: absolute; position: absolute;
top: 48px; top: 48px;
text-shadow: 0 -1px 0 #000; text-shadow: 0 -1px 0 #000;
@include transition(all, .1s, $ease-in-out-quart); @include transition(all .1s $ease-in-out-quart 0s);
white-space: pre; white-space: pre;
z-index: 99; z-index: 99;
...@@ -228,7 +262,7 @@ nav.sequence-nav { ...@@ -228,7 +262,7 @@ nav.sequence-nav {
width: 70px; width: 70px;
border: 1px solid #ccc; border: 1px solid #ccc;
@include linear-gradient(top, #eee, #ddd); @include linear-gradient(top, #eee, #ddd);
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
&.prev, &.next { &.prev, &.next {
...@@ -239,7 +273,7 @@ nav.sequence-nav { ...@@ -239,7 +273,7 @@ nav.sequence-nav {
height: 34px; height: 34px;
width: 40px; width: 40px;
text-indent: -9999px; text-indent: -9999px;
@include transition(all, .2s, $ease-in-out-quad); @include transition(all .2s $ease-in-out-quad 0s);
outline: 0; outline: 0;
&:focus { &:focus {
...@@ -294,7 +328,7 @@ nav.sequence-bottom { ...@@ -294,7 +328,7 @@ nav.sequence-bottom {
text-align: center; text-align: center;
ul { ul {
@extend .clearfix; @include clearfix();
@include inline-block(); @include inline-block();
li { li {
...@@ -303,7 +337,7 @@ nav.sequence-bottom { ...@@ -303,7 +337,7 @@ nav.sequence-bottom {
height: 44px; height: 44px;
border: 1px solid #ccc; border: 1px solid #ccc;
@include linear-gradient(top, #eee, #ddd); @include linear-gradient(top, #eee, #ddd);
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
&.prev, &.next { &.prev, &.next {
margin-bottom: 0; margin-bottom: 0;
...@@ -315,7 +349,7 @@ nav.sequence-bottom { ...@@ -315,7 +349,7 @@ nav.sequence-bottom {
display: block; display: block;
padding: lh(.5) 4px; padding: lh(.5) 4px;
text-indent: -9999px; text-indent: -9999px;
@include transition(all, .2s, $ease-in-out-quad); @include transition(all .2s $ease-in-out-quad 0s);
outline: 0; outline: 0;
&:hover { &:hover {
......
common/lib/xmodule/xmodule/css/video/display.scss
...@@ -49,30 +49,30 @@ div.video { ...@@ -49,30 +49,30 @@ div.video {
@include clearfix(); @include clearfix();
background: #c2c2c2; background: #c2c2c2;
border: 1px solid #000; border: 1px solid #000;
@include border-radius(0); border-radius: 0;
border-top: 1px solid #000; border-top: 1px solid #000;
@include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555); box-shadow: inset 0 1px 0 #eee, 0 1px 0 #555;
height: 7px; height: 7px;
margin-left: -1px; margin-left: -1px;
margin-right: -1px; margin-right: -1px;
@include transition(height 2.0s ease-in-out); @include transition(height 2.0s ease-in-out 0s);
div.ui-widget-header { div.ui-widget-header {
background: #777; background: #777;
@include box-shadow(inset 0 1px 0 #999); box-shadow: inset 0 1px 0 #999;
} }
a.ui-slider-handle { a.ui-slider-handle {
background: $pink url(../images/slider-handle.png) center center no-repeat; background: $pink url(../images/slider-handle.png) center center no-repeat;
@include background-size(50%); background-size: 50%;
border: 1px solid darken($pink, 20%); border: 1px solid darken($pink, 20%);
@include border-radius(15px); border-radius: 15px;
@include box-shadow(inset 0 1px 0 lighten($pink, 10%)); box-shadow: inset 0 1px 0 lighten($pink, 10%);
cursor: pointer; cursor: pointer;
height: 15px; height: 15px;
margin-left: -7px; margin-left: -7px;
top: -4px; top: -4px;
@include transition(height 2.0s ease-in-out, width 2.0s ease-in-out); @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
width: 15px; width: 15px;
&:focus, &:hover { &:focus, &:hover {
...@@ -83,7 +83,6 @@ div.video { ...@@ -83,7 +83,6 @@ div.video {
} }
ul.vcr { ul.vcr {
@extend .dullify;
float: left; float: left;
list-style: none; list-style: none;
margin: 0 lh() 0 0; margin: 0 lh() 0 0;
...@@ -96,13 +95,13 @@ div.video { ...@@ -96,13 +95,13 @@ div.video {
a { a {
border-bottom: none; border-bottom: none;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555); box-shadow: 1px 0 0 #555;
cursor: pointer; cursor: pointer;
display: block; display: block;
line-height: 46px; line-height: 46px;
padding: 0 lh(.75); padding: 0 lh(.75);
text-indent: -9999px; text-indent: -9999px;
@include transition(background-color, opacity); @include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
width: 14px; width: 14px;
background: url('../images/vcr.png') 15px 15px no-repeat; background: url('../images/vcr.png') 15px 15px no-repeat;
outline: 0; outline: 0;
...@@ -144,7 +143,6 @@ div.video { ...@@ -144,7 +143,6 @@ div.video {
} }
div.secondary-controls { div.secondary-controls {
@extend .dullify;
float: right; float: right;
div.speeds { div.speeds {
...@@ -169,7 +167,7 @@ div.video { ...@@ -169,7 +167,7 @@ div.video {
background: url('../images/closed-arrow.png') 10px center no-repeat; background: url('../images/closed-arrow.png') 10px center no-repeat;
border-left: 1px solid #000; border-left: 1px solid #000;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
@include clearfix(); @include clearfix();
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
...@@ -178,7 +176,7 @@ div.video { ...@@ -178,7 +176,7 @@ div.video {
margin-right: 0; margin-right: 0;
padding-left: 15px; padding-left: 15px;
position: relative; position: relative;
@include transition(); @include transition(none);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
width: 116px; width: 116px;
outline: 0; outline: 0;
...@@ -215,8 +213,8 @@ div.video { ...@@ -215,8 +213,8 @@ div.video {
// fix for now // fix for now
ol.video_speeds { ol.video_speeds {
@include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444); box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
@include transition(); @include transition(none);
background-color: #444; background-color: #444;
border: 1px solid #000; border: 1px solid #000;
bottom: 46px; bottom: 46px;
...@@ -227,7 +225,7 @@ div.video { ...@@ -227,7 +225,7 @@ div.video {
z-index: 10; z-index: 10;
li { li {
@include box-shadow( 0 1px 0 #555); box-shadow: 0 1px 0 #555;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
...@@ -249,7 +247,7 @@ div.video { ...@@ -249,7 +247,7 @@ div.video {
} }
&:last-child { &:last-child {
@include box-shadow(none); box-shadow: none;
border-bottom: 0; border-bottom: 0;
margin-top: 0; margin-top: 0;
} }
...@@ -277,7 +275,7 @@ div.video { ...@@ -277,7 +275,7 @@ div.video {
> a { > a {
background: url('../images/volume.png') 10px center no-repeat; background: url('../images/volume.png') 10px center no-repeat;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
@include clearfix(); @include clearfix();
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
...@@ -286,7 +284,7 @@ div.video { ...@@ -286,7 +284,7 @@ div.video {
margin-right: 0; margin-right: 0;
padding-left: 15px; padding-left: 15px;
position: relative; position: relative;
@include transition(); @include transition(none);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
width: 30px; width: 30px;
...@@ -296,8 +294,8 @@ div.video { ...@@ -296,8 +294,8 @@ div.video {
} }
.volume-slider-container { .volume-slider-container {
@include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444); box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
@include transition(); @include transition(none);
background-color: #444; background-color: #444;
border: 1px solid #000; border: 1px solid #000;
bottom: 46px; bottom: 46px;
...@@ -316,18 +314,18 @@ div.video { ...@@ -316,18 +314,18 @@ div.video {
margin: 14px auto; margin: 14px auto;
background: #666; background: #666;
border: 1px solid #000; border: 1px solid #000;
@include box-shadow(0 1px 0 #333); box-shadow: 0 1px 0 #333;
a.ui-slider-handle { a.ui-slider-handle {
background: $pink url(../images/slider-handle.png) center center no-repeat; background: $pink url(../images/slider-handle.png) center center no-repeat;
@include background-size(50%); background-size: 50%;
border: 1px solid darken($pink, 20%); border: 1px solid darken($pink, 20%);
@include border-radius(15px); border-radius: 15px;
@include box-shadow(inset 0 1px 0 lighten($pink, 10%)); box-shadow: inset 0 1px 0 lighten($pink, 10%);
cursor: pointer; cursor: pointer;
height: 15px; height: 15px;
left: -6px; left: -6px;
@include transition(height 2.0s ease-in-out, width 2.0s ease-in-out); @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
width: 15px; width: 15px;
} }
...@@ -341,7 +339,7 @@ div.video { ...@@ -341,7 +339,7 @@ div.video {
a.add-fullscreen { a.add-fullscreen {
background: url(../images/fullscreen.png) center no-repeat; background: url(../images/fullscreen.png) center no-repeat;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
color: #797979; color: #797979;
display: block; display: block;
float: left; float: left;
...@@ -349,7 +347,7 @@ div.video { ...@@ -349,7 +347,7 @@ div.video {
margin-left: 0; margin-left: 0;
padding: 0 lh(.5); padding: 0 lh(.5);
text-indent: -9999px; text-indent: -9999px;
@include transition(); @include transition(none);
width: 30px; width: 30px;
&:hover { &:hover {
...@@ -362,7 +360,7 @@ div.video { ...@@ -362,7 +360,7 @@ div.video {
a.quality_control { a.quality_control {
background: url(../images/hd.png) center no-repeat; background: url(../images/hd.png) center no-repeat;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
color: #797979; color: #797979;
display: block; display: block;
float: left; float: left;
...@@ -370,7 +368,7 @@ div.video { ...@@ -370,7 +368,7 @@ div.video {
margin-left: 0; margin-left: 0;
padding: 0 lh(.5); padding: 0 lh(.5);
text-indent: -9999px; text-indent: -9999px;
@include transition(); @include transition(none);
width: 30px; width: 30px;
&:hover { &:hover {
...@@ -399,7 +397,7 @@ div.video { ...@@ -399,7 +397,7 @@ div.video {
padding: 0 lh(.5); padding: 0 lh(.5);
position: relative; position: relative;
text-indent: -9999px; text-indent: -9999px;
@include transition(); @include transition(none);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
width: 30px; width: 30px;
...@@ -426,7 +424,7 @@ div.video { ...@@ -426,7 +424,7 @@ div.video {
margin-top: -7px; margin-top: -7px;
a.ui-slider-handle { a.ui-slider-handle {
@include border-radius(20px); border-radius: 20px;
height: 20px; height: 20px;
margin-left: -10px; margin-left: -10px;
top: -4px; top: -4px;
...@@ -470,7 +468,6 @@ div.video { ...@@ -470,7 +468,6 @@ div.video {
} }
&.closed { &.closed {
@extend .trans;
article.video-wrapper { article.video-wrapper {
width: flex-grid(9,9); width: flex-grid(9,9);
...@@ -545,7 +542,7 @@ div.video { ...@@ -545,7 +542,7 @@ div.video {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
@include transition(); @include transition(none);
li { li {
color: #aaa; color: #aaa;
......
common/lib/xmodule/xmodule/css/videoalpha/display.scss
...@@ -49,30 +49,30 @@ div.video { ...@@ -49,30 +49,30 @@ div.video {
@include clearfix(); @include clearfix();
background: #c2c2c2; background: #c2c2c2;
border: 1px solid #000; border: 1px solid #000;
@include border-radius(0); border-radius: 0;
border-top: 1px solid #000; border-top: 1px solid #000;
@include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555); box-shadow: inset 0 1px 0 #eee, 0 1px 0 #555;
height: 7px; height: 7px;
margin-left: -1px; margin-left: -1px;
margin-right: -1px; margin-right: -1px;
@include transition(height 2.0s ease-in-out); @include transition(height 2.0s ease-in-out 0s);
div.ui-widget-header { div.ui-widget-header {
background: #777; background: #777;
@include box-shadow(inset 0 1px 0 #999); box-shadow: inset 0 1px 0 #999;
} }
a.ui-slider-handle { a.ui-slider-handle {
background: $pink url(../images/slider-handle.png) center center no-repeat; background: $pink url(../images/slider-handle.png) center center no-repeat;
@include background-size(50%); background-size: 50%;
border: 1px solid darken($pink, 20%); border: 1px solid darken($pink, 20%);
@include border-radius(15px); border-radius: 15px;
@include box-shadow(inset 0 1px 0 lighten($pink, 10%)); box-shadow: inset 0 1px 0 lighten($pink, 10%);
cursor: pointer; cursor: pointer;
height: 15px; height: 15px;
margin-left: -7px; margin-left: -7px;
top: -4px; top: -4px;
@include transition(height 2.0s ease-in-out, width 2.0s ease-in-out); @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
width: 15px; width: 15px;
&:focus, &:hover { &:focus, &:hover {
...@@ -83,7 +83,6 @@ div.video { ...@@ -83,7 +83,6 @@ div.video {
} }
ul.vcr { ul.vcr {
@extend .dullify;
float: left; float: left;
list-style: none; list-style: none;
margin: 0 lh() 0 0; margin: 0 lh() 0 0;
...@@ -96,13 +95,13 @@ div.video { ...@@ -96,13 +95,13 @@ div.video {
a { a {
border-bottom: none; border-bottom: none;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555); box-shadow: 1px 0 0 #555;
cursor: pointer; cursor: pointer;
display: block; display: block;
line-height: 46px; line-height: 46px;
padding: 0 lh(.75); padding: 0 lh(.75);
text-indent: -9999px; text-indent: -9999px;
@include transition(background-color, opacity); @include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
width: 14px; width: 14px;
background: url('../images/vcr.png') 15px 15px no-repeat; background: url('../images/vcr.png') 15px 15px no-repeat;
outline: 0; outline: 0;
...@@ -144,7 +143,6 @@ div.video { ...@@ -144,7 +143,6 @@ div.video {
} }
div.secondary-controls { div.secondary-controls {
@extend .dullify;
float: right; float: right;
div.speeds { div.speeds {
...@@ -169,7 +167,7 @@ div.video { ...@@ -169,7 +167,7 @@ div.video {
background: url('../images/closed-arrow.png') 10px center no-repeat; background: url('../images/closed-arrow.png') 10px center no-repeat;
border-left: 1px solid #000; border-left: 1px solid #000;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
@include clearfix(); @include clearfix();
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
...@@ -178,7 +176,7 @@ div.video { ...@@ -178,7 +176,7 @@ div.video {
margin-right: 0; margin-right: 0;
padding-left: 15px; padding-left: 15px;
position: relative; position: relative;
@include transition(); @include transition(none);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
width: 116px; width: 116px;
outline: 0; outline: 0;
...@@ -215,8 +213,8 @@ div.video { ...@@ -215,8 +213,8 @@ div.video {
// fix for now // fix for now
ol.video_speeds { ol.video_speeds {
@include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444); box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
@include transition(); @include transition(none);
background-color: #444; background-color: #444;
border: 1px solid #000; border: 1px solid #000;
bottom: 46px; bottom: 46px;
...@@ -227,7 +225,7 @@ div.video { ...@@ -227,7 +225,7 @@ div.video {
z-index: 10; z-index: 10;
li { li {
@include box-shadow( 0 1px 0 #555); box-shadow: 0 1px 0 #555;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
...@@ -249,7 +247,7 @@ div.video { ...@@ -249,7 +247,7 @@ div.video {
} }
&:last-child { &:last-child {
@include box-shadow(none); box-shadow: none;
border-bottom: 0; border-bottom: 0;
margin-top: 0; margin-top: 0;
} }
...@@ -277,7 +275,7 @@ div.video { ...@@ -277,7 +275,7 @@ div.video {
> a { > a {
background: url('../images/volume.png') 10px center no-repeat; background: url('../images/volume.png') 10px center no-repeat;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
@include clearfix(); @include clearfix();
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
...@@ -286,7 +284,7 @@ div.video { ...@@ -286,7 +284,7 @@ div.video {
margin-right: 0; margin-right: 0;
padding-left: 15px; padding-left: 15px;
position: relative; position: relative;
@include transition(); @include transition(none);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
width: 30px; width: 30px;
...@@ -296,8 +294,8 @@ div.video { ...@@ -296,8 +294,8 @@ div.video {
} }
.volume-slider-container { .volume-slider-container {
@include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444); box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
@include transition(); @include transition(none);
background-color: #444; background-color: #444;
border: 1px solid #000; border: 1px solid #000;
bottom: 46px; bottom: 46px;
...@@ -316,18 +314,18 @@ div.video { ...@@ -316,18 +314,18 @@ div.video {
margin: 14px auto; margin: 14px auto;
background: #666; background: #666;
border: 1px solid #000; border: 1px solid #000;
@include box-shadow(0 1px 0 #333); box-shadow: 0 1px 0 #333;
a.ui-slider-handle { a.ui-slider-handle {
background: $pink url(../images/slider-handle.png) center center no-repeat; background: $pink url(../images/slider-handle.png) center center no-repeat;
@include background-size(50%); background-size: 50%;
border: 1px solid darken($pink, 20%); border: 1px solid darken($pink, 20%);
@include border-radius(15px); border-radius: 15px;
@include box-shadow(inset 0 1px 0 lighten($pink, 10%)); box-shadow: inset 0 1px 0 lighten($pink, 10%);
cursor: pointer; cursor: pointer;
height: 15px; height: 15px;
left: -6px; left: -6px;
@include transition(height 2.0s ease-in-out, width 2.0s ease-in-out); @include transition(height 2.0s ease-in-out 0s, width 2.0s ease-in-out 0s);
width: 15px; width: 15px;
} }
...@@ -341,7 +339,7 @@ div.video { ...@@ -341,7 +339,7 @@ div.video {
a.add-fullscreen { a.add-fullscreen {
background: url(../images/fullscreen.png) center no-repeat; background: url(../images/fullscreen.png) center no-repeat;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
color: #797979; color: #797979;
display: block; display: block;
float: left; float: left;
...@@ -349,7 +347,7 @@ div.video { ...@@ -349,7 +347,7 @@ div.video {
margin-left: 0; margin-left: 0;
padding: 0 lh(.5); padding: 0 lh(.5);
text-indent: -9999px; text-indent: -9999px;
@include transition(); @include transition(none);
width: 30px; width: 30px;
&:hover { &:hover {
...@@ -362,7 +360,7 @@ div.video { ...@@ -362,7 +360,7 @@ div.video {
a.quality_control { a.quality_control {
background: url(../images/hd.png) center no-repeat; background: url(../images/hd.png) center no-repeat;
border-right: 1px solid #000; border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;
color: #797979; color: #797979;
display: block; display: block;
float: left; float: left;
...@@ -370,7 +368,7 @@ div.video { ...@@ -370,7 +368,7 @@ div.video {
margin-left: 0; margin-left: 0;
padding: 0 lh(.5); padding: 0 lh(.5);
text-indent: -9999px; text-indent: -9999px;
@include transition(); @include transition(none);
width: 30px; width: 30px;
&:hover { &:hover {
...@@ -399,7 +397,7 @@ div.video { ...@@ -399,7 +397,7 @@ div.video {
padding: 0 lh(.5); padding: 0 lh(.5);
position: relative; position: relative;
text-indent: -9999px; text-indent: -9999px;
@include transition(); @include transition(none);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
width: 30px; width: 30px;
...@@ -426,7 +424,7 @@ div.video { ...@@ -426,7 +424,7 @@ div.video {
margin-top: -7px; margin-top: -7px;
a.ui-slider-handle { a.ui-slider-handle {
@include border-radius(20px); border-radius: 20px;
height: 20px; height: 20px;
margin-left: -10px; margin-left: -10px;
top: -4px; top: -4px;
...@@ -470,7 +468,6 @@ div.video { ...@@ -470,7 +468,6 @@ div.video {
} }
&.closed { &.closed {
@extend .trans;
article.video-wrapper { article.video-wrapper {
width: flex-grid(9,9); width: flex-grid(9,9);
...@@ -545,7 +542,7 @@ div.video { ...@@ -545,7 +542,7 @@ div.video {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
@include transition(); @include transition(none);
li { li {
color: #aaa; color: #aaa;
......
cms/static/sass/_mixins-inherited.scss → common/static/sass/_mixins-inherited.scss
...@@ -108,8 +108,8 @@ ...@@ -108,8 +108,8 @@
// inherited - ui // inherited - ui
.window { .window {
@include clearfix(); @include clearfix();
@include border-radius(3px); box-shadow: 0 1px 1px $shadow-l1;
@include box-shadow(0 1px 1px $shadow-l1); border-radius: 3px;
margin-bottom: $baseline; margin-bottom: $baseline;
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
background: $white; background: $white;
...@@ -120,8 +120,8 @@ ...@@ -120,8 +120,8 @@
// mixins - grandfathered // mixins - grandfathered
@mixin button { @mixin button {
@include font-size(14); @include font-size(14);
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0)); @include transition(background-color 0.15s, box-shadow 0.15s);
@include transition(background-color .15s, box-shadow .15s); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline ($baseline/4); padding: ($baseline/5) $baseline ($baseline/4);
font-weight: 700; font-weight: 700;
...@@ -139,14 +139,14 @@ ...@@ -139,14 +139,14 @@
} }
&:hover, &.active { &:hover, &.active {
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15)); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
} }
} }
@mixin green-button { @mixin green-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
border: 1px solid $green-d1; border: 1px solid $green-d1;
border-radius: 3px; border-radius: 3px;
background-color: $green; background-color: $green;
...@@ -161,7 +161,7 @@ ...@@ -161,7 +161,7 @@
border: 1px solid $green-l3 !important; border: 1px solid $green-l3 !important;
background: $green-l3 !important; background: $green-l3 !important;
color: $white !important; color: $white !important;
@include box-shadow(none); box-shadow: none;
} }
} }
...@@ -179,7 +179,7 @@ ...@@ -179,7 +179,7 @@
} }
&.disabled { &.disabled {
@include box-shadow(none); box-shadow: none;
border: 1px solid $blue-l3 !important; border: 1px solid $blue-l3 !important;
background: $blue-l3 !important; background: $blue-l3 !important;
color: $white !important; color: $white !important;
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
} }
&.disabled { &.disabled {
@include box-shadow(none); box-shadow: none;
border: 1px solid $red-l3 !important; border: 1px solid $red-l3 !important;
background: $red-l3 !important; background: $red-l3 !important;
color: $white !important; color: $white !important;
...@@ -221,7 +221,7 @@ ...@@ -221,7 +221,7 @@
} }
&.disabled { &.disabled {
@include box-shadow(none); box-shadow: none;
border: 1px solid $pink-l3 !important; border: 1px solid $pink-l3 !important;
background: $pink-l3 !important; background: $pink-l3 !important;
color: $white !important; color: $white !important;
...@@ -231,7 +231,7 @@ ...@@ -231,7 +231,7 @@
@mixin orange-button { @mixin orange-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%); @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
border: 1px solid $orange-d1; border: 1px solid $orange-d1;
border-radius: 3px; border-radius: 3px;
background-color: $orange; background-color: $orange;
...@@ -246,14 +246,14 @@ ...@@ -246,14 +246,14 @@
border: 1px solid $orange-l3 !important; border: 1px solid $orange-l3 !important;
background: $orange-l2 !important; background: $orange-l2 !important;
color: $gray-l1 !important; color: $gray-l1 !important;
@include box-shadow(none); box-shadow: none;
} }
} }
@mixin white-button { @mixin white-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
border-radius: 3px; border-radius: 3px;
background-color: #dfe5eb; background-color: #dfe5eb;
...@@ -269,7 +269,7 @@ ...@@ -269,7 +269,7 @@
@mixin grey-button { @mixin grey-button {
@include button; @include button;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
border: 1px solid $gray-d2; border: 1px solid $gray-d2;
border-radius: 3px; border-radius: 3px;
background-color: #d1dae3; background-color: #d1dae3;
...@@ -284,7 +284,7 @@ ...@@ -284,7 +284,7 @@
@mixin gray-button { @mixin gray-button {
@include button; @include button;
@include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0)); @include linear-gradient(top, $white-t1, rgba(255, 255, 255, 0));
@include box-shadow(0 1px 0 $white-t1 inset); box-shadow: 0 1px 0 $white-t1 inset;
border: 1px solid $gray-d1; border: 1px solid $gray-d1;
border-radius: 3px; border-radius: 3px;
background-color: $gray-d2; background-color: $gray-d2;
...@@ -311,7 +311,7 @@ ...@@ -311,7 +311,7 @@
} }
@mixin edit-box { @mixin edit-box {
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
padding: 15px 20px; padding: 15px 20px;
border-radius: 3px; border-radius: 3px;
background-color: $lightBluishGrey2; background-color: $lightBluishGrey2;
...@@ -448,7 +448,7 @@ ...@@ -448,7 +448,7 @@
// sunsetted mixins // sunsetted mixins
@mixin active { @mixin active {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset); box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset;
background-color: rgba(255, 255, 255, .3); background-color: rgba(255, 255, 255, .3);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
} }
common/static/sass/_mixins.scss
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
// extends - buttons // extends - buttons
.btn { .btn {
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(color 0.25s ease-in-out, border-color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out); @include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s);
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
...@@ -140,11 +140,11 @@ ...@@ -140,11 +140,11 @@
// pill button // pill button
.btn-pill { .btn-pill {
@include border-radius($baseline/5); border-radius: ($baseline/5);
} }
.btn-rounded { .btn-rounded {
@include border-radius($baseline/2); border-radius: ($baseline/2);
} }
// primary button // primary button
...@@ -158,14 +158,14 @@ ...@@ -158,14 +158,14 @@
text-align: center; text-align: center;
&:hover, &:active { &:hover, &:active {
@include box-shadow(0 2px 1px $shadow-l1); box-shadow: 0 2px 1px $shadow-l1;
} }
&.current, &.active { &.current, &.active {
@include box-shadow(inset 1px 1px 2px $shadow-d1); box-shadow: inset 1px 1px 2px $shadow-d1;
&:hover, &:active { &:hover, &:active {
@include box-shadow(inset 1px 1px 1px $shadow-d1); box-shadow: inset 1px 1px 1px $shadow-d1;
} }
} }
} }
...@@ -238,6 +238,6 @@ ...@@ -238,6 +238,6 @@
// UI archetypes - well // UI archetypes - well
.ui-well { .ui-well {
@include box-shadow(inset 0 1px 2px 1px $shadow); box-shadow: inset 0 1px 2px 1px $shadow;
padding: ($baseline*0.75); padding: ($baseline*0.75);
} }
common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss 0 → 100644
//************************************************************************//
// These mixins/functions are deprecated
// They will be removed in the next MAJOR version release
//************************************************************************//
@mixin box-shadow ($shadows...) {
@include prefixer(box-shadow, $shadows, spec);
@warn "box-shadow is deprecated and will be removed in the next major version release";
}
@mixin background-size ($lengths...) {
@include prefixer(background-size, $lengths, spec);
@warn "background-size is deprecated and will be removed in the next major version release";
}
common/static/sass/bourbon/_bourbon.scss
// Custom Helpers
@import "helpers/deprecated-webkit-gradient";
@import "helpers/gradient-positions-parser";
@import "helpers/linear-positions-parser";
@import "helpers/radial-arg-parser";
@import "helpers/radial-positions-parser";
@import "helpers/render-gradients";
@import "helpers/shape-size-stripper";
// Custom Functions // Custom Functions
@import "functions/deprecated-webkit-gradient"; @import "functions/compact";
@import "functions/flex-grid"; @import "functions/flex-grid";
@import "functions/grid-width"; @import "functions/grid-width";
@import "functions/linear-gradient"; @import "functions/linear-gradient";
@import "functions/modular-scale"; @import "functions/modular-scale";
@import "functions/px-to-em";
@import "functions/radial-gradient"; @import "functions/radial-gradient";
@import "functions/render-gradients";
@import "functions/tint-shade"; @import "functions/tint-shade";
@import "functions/transition-property-name";
// CSS3 Mixins // CSS3 Mixins
@import "css3/animation"; @import "css3/animation";
@import "css3/appearance"; @import "css3/appearance";
@import "css3/backface-visibility";
@import "css3/background";
@import "css3/background-image"; @import "css3/background-image";
@import "css3/background-size";
@import "css3/border-image"; @import "css3/border-image";
@import "css3/border-radius"; @import "css3/border-radius";
@import "css3/box-shadow";
@import "css3/box-sizing"; @import "css3/box-sizing";
@import "css3/columns"; @import "css3/columns";
@import "css3/flex-box"; @import "css3/flex-box";
@import "css3/font-face";
@import "css3/hidpi-media-query";
@import "css3/image-rendering";
@import "css3/inline-block"; @import "css3/inline-block";
@import "css3/keyframes";
@import "css3/linear-gradient"; @import "css3/linear-gradient";
@import "css3/perspective";
@import "css3/radial-gradient"; @import "css3/radial-gradient";
@import "css3/transform"; @import "css3/transform";
@import "css3/transition"; @import "css3/transition";
@import "css3/user-select"; @import "css3/user-select";
@import "css3/placeholder";
// Addons & other mixins // Addons & other mixins
@import "addons/button"; @import "addons/button";
@import "addons/clearfix"; @import "addons/clearfix";
@import "addons/font-family"; @import "addons/font-family";
@import "addons/hide-text";
@import "addons/html5-input-types"; @import "addons/html5-input-types";
@import "addons/position"; @import "addons/position";
@import "addons/prefixer";
@import "addons/retina-image";
@import "addons/size";
@import "addons/timing-functions"; @import "addons/timing-functions";
@import "addons/triangle";
// Soon to be deprecated Mixins
@import "bourbon-deprecated-upcoming";
common/static/sass/bourbon/addons/_button.scss
...@@ -34,6 +34,11 @@ ...@@ -34,6 +34,11 @@
@include pill($base-color); @include pill($base-color);
} }
} }
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
} }
...@@ -59,18 +64,19 @@ ...@@ -59,18 +64,19 @@
} }
border: 1px solid $border; border: 1px solid $border;
@include border-radius (3px); border-radius: 3px;
@include box-shadow (inset 0 1px 0 0 $inset-shadow); box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color; color: $color;
display: inline; display: inline-block;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient); @include linear-gradient ($base-color, $stop-gradient);
padding: 6px 18px 7px; padding: 7px 18px;
text-decoration: none;
text-shadow: 0 1px 0 $text-shadow; text-shadow: 0 1px 0 $text-shadow;
-webkit-background-clip: padding-box; background-clip: padding-box;
&:hover { &:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
...@@ -81,12 +87,12 @@ ...@@ -81,12 +87,12 @@
$stop-gradient-hover: grayscale($stop-gradient-hover); $stop-gradient-hover: grayscale($stop-gradient-hover);
} }
@include box-shadow (inset 0 1px 0 0 $inset-shadow-hover); box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
cursor: pointer; cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover); @include linear-gradient ($base-color-hover, $stop-gradient-hover);
} }
&:active { &:active:not(:disabled) {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
...@@ -96,7 +102,7 @@ ...@@ -96,7 +102,7 @@
} }
border: 1px solid $border-active; border: 1px solid $border-active;
@include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee); box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
} }
} }
...@@ -130,19 +136,19 @@ ...@@ -130,19 +136,19 @@
border: 1px solid $border; border: 1px solid $border;
border-bottom: 1px solid $border-bottom; border-bottom: 1px solid $border-bottom;
@include border-radius(5px); border-radius: 5px;
@include box-shadow(inset 0 1px 0 0 $inset-shadow); box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color; color: $color;
display: inline; display: inline-block;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
padding: 7px 20px 8px; padding: 8px 20px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow; text-shadow: 0 -1px 1px $text-shadow;
&:hover { &:hover:not(:disabled) {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
...@@ -162,14 +168,14 @@ ...@@ -162,14 +168,14 @@
$fourth-stop-hover 100%); $fourth-stop-hover 100%);
} }
&:active { &:active:not(:disabled) {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
@if $grayscale == true { @if $grayscale == true {
$inset-shadow-active: grayscale($inset-shadow-active); $inset-shadow-active: grayscale($inset-shadow-active);
} }
@include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff); box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
} }
} }
...@@ -201,20 +207,21 @@ ...@@ -201,20 +207,21 @@
border: 1px solid $border-top; border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom; border-color: $border-top $border-sides $border-bottom;
@include border-radius(16px); border-radius: 16px;
@include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3); box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
color: $color; color: $color;
display: inline; display: inline-block;
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
@include linear-gradient ($base-color, $stop-gradient); @include linear-gradient ($base-color, $stop-gradient);
padding: 3px 16px 5px; padding: 5px 16px;
text-align: center; text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow; text-shadow: 0 -1px 1px $text-shadow;
-webkit-background-clip: padding-box; background-clip: padding-box;
&:hover { &:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%); $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
...@@ -235,14 +242,14 @@ ...@@ -235,14 +242,14 @@
border: 1px solid $border-top; border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom; border-color: $border-top $border-sides $border-bottom;
@include box-shadow(inset 0 1px 0 0 $inset-shadow-hover); box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
cursor: pointer; cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover); @include linear-gradient ($base-color-hover, $stop-gradient-hover);
text-shadow: 0 -1px 1px $text-shadow-hover; text-shadow: 0 -1px 1px $text-shadow-hover;
-webkit-background-clip: padding-box; background-clip: padding-box;
} }
&:active { &:active:not(:disabled) {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
...@@ -260,8 +267,7 @@ ...@@ -260,8 +267,7 @@
background: $active-color; background: $active-color;
border: 1px solid $border-active; border: 1px solid $border-active;
border-bottom: 1px solid $border-bottom-active; border-bottom: 1px solid $border-bottom-active;
@include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff); box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
text-shadow: 0 -1px 1px $text-shadow-active; text-shadow: 0 -1px 1px $text-shadow-active;
} }
} }
common/static/sass/bourbon/addons/_clearfix.scss
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
// } // }
@mixin clearfix { @mixin clearfix {
zoom: 1; *zoom: 1;
&:before, &:before,
&:after { &:after {
content: ""; content: " ";
display: table; display: table;
} }
......
common/static/sass/bourbon/addons/_hide-text.scss 0 → 100644
@mixin hide-text {
color: transparent;
font: 0/0 a;
text-shadow: none;
}
common/static/sass/bourbon/addons/_html5-input-types.scss
...@@ -21,15 +21,35 @@ $inputs-list: 'input[type="email"]', ...@@ -21,15 +21,35 @@ $inputs-list: 'input[type="email"]',
'input[type="week"]'; 'input[type="week"]';
$unquoted-inputs-list: (); $unquoted-inputs-list: ();
@each $input-type in $inputs-list { @each $input-type in $inputs-list {
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
} }
$all-text-inputs: $unquoted-inputs-list; $all-text-inputs: $unquoted-inputs-list;
// Hover Pseudo-class
//************************************************************************//
$all-text-inputs-hover: ();
@each $input-type in $unquoted-inputs-list {
$input-type-hover: $input-type + ":hover";
$all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
}
// Focus Pseudo-class
//************************************************************************//
$all-text-inputs-focus: ();
@each $input-type in $unquoted-inputs-list {
$input-type-focus: $input-type + ":focus";
$all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
}
// You must use interpolation on the variable: // You must use interpolation on the variable:
// #{$all-text-inputs} // #{$all-text-inputs}
// #{$all-text-inputs-hover}
// #{$all-text-inputs-focus}
// Example
//************************************************************************// //************************************************************************//
// #{$all-text-inputs}, textarea { // #{$all-text-inputs}, textarea {
// border: 1px solid red; // border: 1px solid red;
......
common/static/sass/bourbon/addons/_position.scss
...@@ -12,19 +12,31 @@ ...@@ -12,19 +12,31 @@
position: $position; position: $position;
@if not(unitless($top)) { @if $top == auto {
top: $top;
}
@else if not(unitless($top)) {
top: $top; top: $top;
} }
@if not(unitless($right)) { @if $right == auto {
right: $right;
}
@else if not(unitless($right)) {
right: $right; right: $right;
} }
@if not(unitless($bottom)) { @if $bottom == auto {
bottom: $bottom;
}
@else if not(unitless($bottom)) {
bottom: $bottom; bottom: $bottom;
} }
@if not(unitless($left)) { @if $left == auto {
left: $left;
}
@else if not(unitless($left)) {
left: $left; left: $left;
} }
} }
common/static/sass/bourbon/addons/_prefixer.scss 0 → 100644
//************************************************************************//
// Example: @include prefixer(border-radius, $radii, webkit ms spec);
//************************************************************************//
$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default; // required for keyframe mixin
@mixin prefixer ($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
@if $prefix-for-webkit {
-webkit-#{$property}: $value;
}
}
@else if $prefix == moz {
@if $prefix-for-mozilla {
-moz-#{$property}: $value;
}
}
@else if $prefix == ms {
@if $prefix-for-microsoft {
-ms-#{$property}: $value;
}
}
@else if $prefix == o {
@if $prefix-for-opera {
-o-#{$property}: $value;
}
}
@else if $prefix == spec {
@if $prefix-for-spec {
#{$property}: $value;
}
}
@else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
}
@mixin disable-prefix-for-all() {
$prefix-for-webkit: false;
$prefix-for-mozilla: false;
$prefix-for-microsoft: false;
$prefix-for-opera: false;
$prefix-for-spec: false;
}
common/static/sass/bourbon/addons/_retina-image.scss 0 → 100644
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
@if $asset-pipeline {
background-image: image-url("#{$filename}.#{$extension}");
}
@else {
background-image: url("#{$filename}.#{$extension}");
}
@include hidpi {
@if $asset-pipeline {
@if $retina-filename {
background-image: image-url("#{$retina-filename}.#{$extension}");
}
@else {
background-image: image-url("#{$filename}@2x.#{$extension}");
}
}
@else {
@if $retina-filename {
background-image: url("#{$retina-filename}.#{$extension}");
}
@else {
background-image: url("#{$filename}@2x.#{$extension}");
}
}
background-size: $background-size;
}
}
common/static/sass/bourbon/addons/_size.scss 0 → 100644
@mixin size($size) {
@if length($size) == 1 {
@if $size == auto {
width: $size;
height: $size;
}
@else if unitless($size) {
width: $size + px;
height: $size + px;
}
@else if not(unitless($size)) {
width: $size;
height: $size;
}
}
// Width x Height
@if length($size) == 2 {
$width: nth($size, 1);
$height: nth($size, 2);
@if $width == auto {
width: $width;
}
@else if not(unitless($width)) {
width: $width;
}
@else if unitless($width) {
width: $width + px;
}
@if $height == auto {
height: $height;
}
@else if not(unitless($height)) {
height: $height;
}
@else if unitless($height) {
height: $height + px;
}
}
}
common/static/sass/bourbon/addons/_triangle.scss 0 → 100644
@mixin triangle ($size, $color, $direction) {
height: 0;
width: 0;
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
border-color: transparent;
border-style: solid;
border-width: $size / 2;
@if $direction == up {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == down {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
}
}
@else if ($direction == up-right) or ($direction == up-left) {
border-top: $size solid $color;
@if $direction == up-right {
border-left: $size solid transparent;
} @else if $direction == up-left {
border-right: $size solid transparent;
}
}
@else if ($direction == down-right) or ($direction == down-left) {
border-bottom: $size solid $color;
@if $direction == down-right {
border-left: $size solid transparent;
} @else if $direction == down-left {
border-right: $size solid transparent;
}
}
}
common/static/sass/bourbon/css3/_animation.scss
...@@ -2,170 +2,51 @@ ...@@ -2,170 +2,51 @@
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
// Official animation shorthand property. // Official animation shorthand property.
@mixin animation ($animation-1, @mixin animation ($animations...) {
$animation-2: false, $animation-3: false, @include prefixer(animation, $animations, webkit moz spec);
$animation-4: false, $animation-5: false,
$animation-6: false, $animation-7: false,
$animation-8: false, $animation-9: false)
{
$full: compact($animation-1, $animation-2, $animation-3, $animation-4,
$animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
-webkit-animation: $full;
-moz-animation: $full;
animation: $full;
} }
// Individual Animation Properties // Individual Animation Properties
@mixin animation-name ($name-1, @mixin animation-name ($names...) {
$name-2: false, $name-3: false, @include prefixer(animation-name, $names, webkit moz spec);
$name-4: false, $name-5: false,
$name-6: false, $name-7: false,
$name-8: false, $name-9: false)
{
$full: compact($name-1, $name-2, $name-3, $name-4,
$name-5, $name-6, $name-7, $name-8, $name-9);
-webkit-animation-name: $full;
-moz-animation-name: $full;
animation-name: $full;
} }
@mixin animation-duration ($time-1: 0, @mixin animation-duration ($times...) {
$time-2: false, $time-3: false, @include prefixer(animation-duration, $times, webkit moz spec);
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
-webkit-animation-duration: $full;
-moz-animation-duration: $full;
animation-duration: $full;
}
@mixin animation-timing-function ($motion-1: ease,
// ease | linear | ease-in | ease-out | ease-in-out
$motion-2: false, $motion-3: false,
$motion-4: false, $motion-5: false,
$motion-6: false, $motion-7: false,
$motion-8: false, $motion-9: false)
{
$full: compact($motion-1, $motion-2, $motion-3, $motion-4,
$motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
-webkit-animation-timing-function: $full;
-moz-animation-timing-function: $full;
animation-timing-function: $full;
} }
@mixin animation-iteration-count ($value-1: 1, @mixin animation-timing-function ($motions...) {
// infinite | <number> // ease | linear | ease-in | ease-out | ease-in-out
$value-2: false, $value-3: false, @include prefixer(animation-timing-function, $motions, webkit moz spec);
$value-4: false, $value-5: false,
$value-6: false, $value-7: false,
$value-8: false, $value-9: false)
{
$full: compact($value-1, $value-2, $value-3, $value-4,
$value-5, $value-6, $value-7, $value-8, $value-9);
-webkit-animation-iteration-count: $full;
-moz-animation-iteration-count: $full;
animation-iteration-count: $full;
} }
@mixin animation-direction ($direction-1: normal, @mixin animation-iteration-count ($values...) {
// normal | alternate // infinite | <number>
$direction-2: false, $direction-3: false, @include prefixer(animation-iteration-count, $values, webkit moz spec);
$direction-4: false, $direction-5: false,
$direction-6: false, $direction-7: false,
$direction-8: false, $direction-9: false)
{
$full: compact($direction-1, $direction-2, $direction-3, $direction-4,
$direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
-webkit-animation-direction: $full;
-moz-animation-direction: $full;
animation-direction: $full;
} }
@mixin animation-play-state ($state-1: running, @mixin animation-direction ($directions...) {
// running | paused // normal | alternate
$state-2: false, $state-3: false, @include prefixer(animation-direction, $directions, webkit moz spec);
$state-4: false, $state-5: false,
$state-6: false, $state-7: false,
$state-8: false, $state-9: false)
{
$full: compact($state-1, $state-2, $state-3, $state-4,
$state-5, $state-6, $state-7, $state-8, $state-9);
-webkit-animation-play-state: $full;
-moz-animation-play-state: $full;
animation-play-state: $full;
} }
@mixin animation-delay ($time-1: 0, @mixin animation-play-state ($states...) {
$time-2: false, $time-3: false, // running | paused
$time-4: false, $time-5: false, @include prefixer(animation-play-state, $states, webkit moz spec);
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4,
$time-5, $time-6, $time-7, $time-8, $time-9);
-webkit-animation-delay: $full;
-moz-animation-delay: $full;
animation-delay: $full;
} }
@mixin animation-fill-mode ($mode-1: none, @mixin animation-delay ($times...) {
// http://goo.gl/l6ckm @include prefixer(animation-delay, $times, webkit moz spec);
// none | forwards | backwards | both
$mode-2: false, $mode-3: false,
$mode-4: false, $mode-5: false,
$mode-6: false, $mode-7: false,
$mode-8: false, $mode-9: false)
{
$full: compact($mode-1, $mode-2, $mode-3, $mode-4,
$mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
-webkit-animation-fill-mode: $full;
-moz-animation-fill-mode: $full;
animation-fill-mode: $full;
} }
// Deprecated @mixin animation-fill-mode ($modes...) {
@mixin animation-basic ($name, $time: 0, $motion: ease) { // none | forwards | backwards | both
$length-of-name: length($name); @include prefixer(animation-fill-mode, $modes, webkit moz spec);
$length-of-time: length($time);
$length-of-motion: length($motion);
@if $length-of-name > 1 {
@include animation-name(zip($name));
} @else {
@include animation-name( $name);
}
@if $length-of-time > 1 {
@include animation-duration(zip($time));
} @else {
@include animation-duration( $time);
}
@if $length-of-motion > 1 {
@include animation-timing-function(zip($motion));
} @else {
@include animation-timing-function( $motion);
}
@warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
} }
common/static/sass/bourbon/css3/_appearance.scss
@mixin appearance ($value) { @mixin appearance ($value) {
-webkit-appearance: $value; @include prefixer(appearance, $value, webkit moz ms o spec);
-moz-appearance: $value;
-ms-appearance: $value;
-o-appearance: $value;
appearance: $value;
} }
common/static/sass/bourbon/css3/_backface-visibility.scss 0 → 100644
//************************************************************************//
// Backface-visibility mixin
//************************************************************************//
@mixin backface-visibility($visibility) {
@include prefixer(backface-visibility, $visibility, webkit spec);
}
common/static/sass/bourbon/css3/_background-image.scss
...@@ -3,42 +3,35 @@ ...@@ -3,42 +3,35 @@
// gradients, or for stringing multiple gradients together. // gradients, or for stringing multiple gradients together.
//************************************************************************// //************************************************************************//
@mixin background-image( @mixin background-image($images...) {
$image-1 , $image-2: false, background-image: _add-prefix($images, webkit);
$image-3: false, $image-4: false, background-image: _add-prefix($images);
$image-5: false, $image-6: false,
$image-7: false, $image-8: false,
$image-9: false, $image-10: false
) {
$images: compact($image-1, $image-2,
$image-3, $image-4,
$image-5, $image-6,
$image-7, $image-8,
$image-9, $image-10);
background-image: add-prefix($images, webkit);
background-image: add-prefix($images, moz);
background-image: add-prefix($images, ms);
background-image: add-prefix($images, o);
background-image: add-prefix($images);
} }
@function _add-prefix($images, $vendor: false) {
@function add-prefix($images, $vendor: false) {
$images-prefixed: (); $images-prefixed: ();
$gradient-positions: false;
@for $i from 1 through length($images) { @for $i from 1 through length($images) {
$type: type-of(nth($images, $i)); // Get type of variable - List or String $type: type-of(nth($images, $i)); // Get type of variable - List or String
// If variable is a list - Gradient // If variable is a list - Gradient
@if $type == list { @if $type == list {
$gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial) $gradient-type: nth(nth($images, $i), 1); // linear or radial
$gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) $gradient-pos: null;
$gradient-args: null;
$gradient: render-gradients($gradient-args, $gradient-type, $vendor);
@if ($gradient-type == linear) or ($gradient-type == radial) {
$gradient-pos: nth(nth($images, $i), 2); // Get gradient position
$gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
}
@else {
$gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
}
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
$gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
$images-prefixed: append($images-prefixed, $gradient, comma); $images-prefixed: append($images-prefixed, $gradient, comma);
} }
// If variable is a string - Image // If variable is a string - Image
@else if $type == string { @else if $type == string {
$images-prefixed: join($images-prefixed, nth($images, $i), comma); $images-prefixed: join($images-prefixed, nth($images, $i), comma);
...@@ -47,11 +40,9 @@ ...@@ -47,11 +40,9 @@
@return $images-prefixed; @return $images-prefixed;
} }
//Examples: //Examples:
//@include background-image(linear-gradient(top, orange, red)); //@include background-image(linear-gradient(top, orange, red));
//@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
//@include background-image(url("/images/a.png"), linear-gradient(orange, red)); //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
//@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
//@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red); //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
common/static/sass/bourbon/css3/_background-size.scss deleted 100644 → 0
@mixin background-size ($length-1,
$length-2: false, $length-3: false,
$length-4: false, $length-5: false,
$length-6: false, $length-7: false,
$length-8: false, $length-9: false)
{
$full: compact($length-1, $length-2, $length-3, $length-4,
$length-5, $length-6, $length-7, $length-8, $length-9);
-webkit-background-size: $full;
-moz-background-size: $full;
-ms-background-size: $full;
-o-background-size: $full;
background-size: $full;
}
common/static/sass/bourbon/css3/_background.scss 0 → 100644
//************************************************************************//
// Background property for adding multiple backgrounds using shorthand
// notation.
//************************************************************************//
@mixin background(
$background-1 , $background-2: false,
$background-3: false, $background-4: false,
$background-5: false, $background-6: false,
$background-7: false, $background-8: false,
$background-9: false, $background-10: false,
$fallback: false
) {
$backgrounds: compact($background-1, $background-2,
$background-3, $background-4,
$background-5, $background-6,
$background-7, $background-8,
$background-9, $background-10);
$fallback-color: false;
@if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback;
}
@else {
$fallback-color: _extract-background-color($backgrounds);
}
@if $fallback-color {
background-color: $fallback-color;
}
background: _background-add-prefix($backgrounds, webkit);
background: _background-add-prefix($backgrounds);
}
@function _extract-background-color($backgrounds) {
$final-bg-layer: nth($backgrounds, length($backgrounds));
@if type-of($final-bg-layer) == list {
@for $i from 1 through length($final-bg-layer) {
$value: nth($final-bg-layer, $i);
@if type-of($value) == color {
@return $value;
}
}
}
@return false;
}
@function _background-add-prefix($backgrounds, $vendor: false) {
$backgrounds-prefixed: ();
@for $i from 1 through length($backgrounds) {
$shorthand: nth($backgrounds, $i); // Get member for current index
$type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
// If shorthand is a list (gradient)
@if $type == list {
$first-member: nth($shorthand, 1); // Get first member of shorthand
// Linear Gradient
@if index(linear radial, nth($first-member, 1)) {
$gradient-type: nth($first-member, 1); // linear || radial
$gradient-args: false;
$gradient-positions: false;
$shorthand-start: false;
@if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
$gradient-positions: nth($first-member, 2);
$gradient-args: nth($first-member, 3);
$shorthand-start: 2;
}
@else { // Linear gradient only - lg(red,orange),...
$gradient-positions: nth($shorthand, 2);
$gradient-args: nth($shorthand, 3); // Get gradient (red, blue)
}
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
$gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
// Append any additional shorthand args to gradient
@if $shorthand-start {
@for $j from $shorthand-start through length($shorthand) {
$gradient: join($gradient, nth($shorthand, $j), space);
}
}
$backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
}
// Image with additional properties
@else {
$backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
}
}
// If shorthand is a simple string (color or image)
@else if $type == string {
$backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
}
}
@return $backgrounds-prefixed;
}
//Examples:
//@include background(linear-gradient(top, orange, red));
//@include background(radial-gradient(circle at 40% 40%, orange, red));
//@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
//@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
common/static/sass/bourbon/css3/_border-image.scss
@mixin border-image($images) { @mixin border-image($images) {
-webkit-border-image: border-add-prefix($images, webkit); -webkit-border-image: _border-add-prefix($images, webkit);
-moz-border-image: border-add-prefix($images, moz); -moz-border-image: _border-add-prefix($images, moz);
-o-border-image: border-add-prefix($images, o); -o-border-image: _border-add-prefix($images, o);
border-image: border-add-prefix($images); border-image: _border-add-prefix($images);
} }
@function border-add-prefix($images, $vendor: false) { @function _border-add-prefix($images, $vendor: false) {
$border-image: (); $border-image: null;
$images-type: type-of(nth($images, 1)); $images-type: type-of(nth($images, 1));
$first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial)
// If input is a gradient // If input is a gradient
@if $images-type == string { @if $images-type == string {
@if ($first-var == "linear") or ($first-var == "radial") { @if ($first-var == "linear") or ($first-var == "radial") {
@for $i from 2 through length($images) { $gradient-type: nth($images, 1); // Get type of gradient (linear || radial)
$gradient-type: nth($images, 1); // Get type of gradient (linear || radial) $gradient-pos: nth($images, 2); // Get gradient position
$gradient-args: nth($images, $i); // Get actual gradient (red, blue) $gradient-args: nth($images, 3); // Get actual gradient (red, blue)
$border-image: render-gradients($gradient-args, $gradient-type, $vendor); $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
} $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
} }
// If input is a URL // If input is a URL
@else { @else {
$border-image: $images; $border-image: $images;
} }
} }
// If input is gradient or url + additional args // If input is gradient or url + additional args
@else if $images-type == list { @else if $images-type == list {
@for $i from 1 through length($images) { $type: type-of(nth($images, 1)); // Get type of variable - List or String
$type: type-of(nth($images, $i)); // Get type of variable - List or String
// If variable is a list - Gradient // If variable is a list - Gradient
@if $type == list { @if $type == list {
$gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial) $gradient: nth($images, 1);
$gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial)
$border-image: render-gradients($gradient-args, $gradient-type, $vendor); $gradient-pos: nth($gradient, 2); // Get gradient position
} $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue)
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
$border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
// If variable is a string - Image or number @for $i from 2 through length($images) {
@else if ($type == string) or ($type == number) {
$border-image: append($border-image, nth($images, $i)); $border-image: append($border-image, nth($images, $i));
} }
} }
...@@ -54,3 +52,4 @@ ...@@ -54,3 +52,4 @@
// @include border-image(linear-gradient(45deg, orange, yellow) stretch); // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
// @include border-image(radial-gradient(top, cover, orange, yellow, orange)); // @include border-image(radial-gradient(top, cover, orange, yellow, orange));
common/static/sass/bourbon/css3/_border-radius.scss
@mixin border-radius ($radii) { //************************************************************************//
-webkit-border-radius: $radii; // Shorthand Border-radius mixins
-moz-border-radius: $radii; //************************************************************************//
-ms-border-radius: $radii;
-o-border-radius: $radii;
border-radius: $radii;
}
@mixin border-top-left-radius($radii) {
-webkit-border-top-left-radius: $radii;
-moz-border-top-left-radius: $radii;
-moz-border-radius-topleft: $radii;
-ms-border-top-left-radius: $radii;
-o-border-top-left-radius: $radii;
border-top-left-radius: $radii;
}
@mixin border-top-right-radius($radii) {
-webkit-border-top-right-radius: $radii;
-moz-border-top-right-radius: $radii;
-moz-border-radius-topright: $radii;
-ms-border-top-right-radius: $radii;
-o-border-top-right-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-bottom-left-radius($radii) {
-webkit-border-bottom-left-radius: $radii;
-moz-border-bottom-left-radius: $radii;
-moz-border-radius-bottomleft: $radii;
-ms-border-bottom-left-radius: $radii;
-o-border-bottom-left-radius: $radii;
border-bottom-left-radius: $radii;
}
@mixin border-bottom-right-radius($radii) {
-webkit-border-bottom-right-radius: $radii;
-moz-border-bottom-right-radius: $radii;
-moz-border-radius-bottomright: $radii;
-ms-border-bottom-right-radius: $radii;
-o-border-bottom-right-radius: $radii;
border-bottom-right-radius: $radii;
}
@mixin border-top-radius($radii) { @mixin border-top-radius($radii) {
@include border-top-left-radius($radii); @include prefixer(border-top-left-radius, $radii, spec);
@include border-top-right-radius($radii); @include prefixer(border-top-right-radius, $radii, spec);
}
@mixin border-right-radius($radii) {
@include border-top-right-radius($radii);
@include border-bottom-right-radius($radii);
} }
@mixin border-bottom-radius($radii) { @mixin border-bottom-radius($radii) {
@include border-bottom-left-radius($radii); @include prefixer(border-bottom-left-radius, $radii, spec);
@include border-bottom-right-radius($radii); @include prefixer(border-bottom-right-radius, $radii, spec);
} }
@mixin border-left-radius($radii) { @mixin border-left-radius($radii) {
@include border-top-left-radius($radii); @include prefixer(border-top-left-radius, $radii, spec);
@include border-bottom-left-radius($radii); @include prefixer(border-bottom-left-radius, $radii, spec);
}
@mixin border-right-radius($radii) {
@include prefixer(border-top-right-radius, $radii, spec);
@include prefixer(border-bottom-right-radius, $radii, spec);
} }
common/static/sass/bourbon/css3/_box-shadow.scss deleted 100644 → 0
// Box-Shadow Mixin Requires Sass v3.1.1+
@mixin box-shadow ($shadow-1,
$shadow-2: false, $shadow-3: false,
$shadow-4: false, $shadow-5: false,
$shadow-6: false, $shadow-7: false,
$shadow-8: false, $shadow-9: false)
{
$full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
$shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
-webkit-box-shadow: $full;
-moz-box-shadow: $full;
box-shadow: $full;
}
common/static/sass/bourbon/css3/_box-sizing.scss
@mixin box-sizing ($box) { @mixin box-sizing ($box) {
// content-box | border-box | inherit // content-box | border-box | inherit
-webkit-box-sizing: $box; @include prefixer(box-sizing, $box, webkit moz spec);
-moz-box-sizing: $box;
box-sizing: $box; *behavior: url(/static/scripts/boxsizing.htc);
} }
common/static/sass/bourbon/css3/_columns.scss
@mixin columns($arg: auto) { @mixin columns($arg: auto) {
// <column-count> || <column-width> // <column-count> || <column-width>
-webkit-columns: $arg; @include prefixer(columns, $arg, webkit moz spec);
-moz-columns: $arg;
columns: $arg;
} }
@mixin column-count($int: auto) { @mixin column-count($int: auto) {
// auto || integer // auto || integer
-webkit-column-count: $int; @include prefixer(column-count, $int, webkit moz spec);
-moz-column-count: $int;
column-count: $int;
} }
@mixin column-gap($length: normal) { @mixin column-gap($length: normal) {
// normal || length // normal || length
-webkit-column-gap: $length; @include prefixer(column-gap, $length, webkit moz spec);
-moz-column-gap: $length;
column-gap: $length;
} }
@mixin column-fill($arg: auto) { @mixin column-fill($arg: auto) {
// auto || length // auto || length
-webkit-columns-fill: $arg; @include prefixer(columns-fill, $arg, webkit moz spec);
-moz-columns-fill: $arg;
columns-fill: $arg;
} }
@mixin column-rule($arg) { @mixin column-rule($arg) {
// <border-width> || <border-style> || <color> // <border-width> || <border-style> || <color>
-webkit-column-rule: $arg; @include prefixer(column-rule, $arg, webkit moz spec);
-moz-column-rule: $arg;
column-rule: $arg;
} }
@mixin column-rule-color($color) { @mixin column-rule-color($color) {
-webkit-column-rule-color: $color; @include prefixer(column-rule-color, $color, webkit moz spec);
-moz-column-rule-color: $color;
column-rule-color: $color;
} }
@mixin column-rule-style($style: none) { @mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
-webkit-column-rule-style: $style; @include prefixer(column-rule-style, $style, webkit moz spec);
-moz-column-rule-style: $style;
column-rule-style: $style;
} }
@mixin column-rule-width ($width: none) { @mixin column-rule-width ($width: none) {
-webkit-column-rule-width: $width; @include prefixer(column-rule-width, $width, webkit moz spec);
-moz-column-rule-width: $width;
column-rule-width: $width;
} }
@mixin column-span($arg: none) { @mixin column-span($arg: none) {
// none || all // none || all
-webkit-column-span: $arg; @include prefixer(column-span, $arg, webkit moz spec);
-moz-column-span: $arg;
column-span: $arg;
} }
@mixin column-width($length: auto) { @mixin column-width($length: auto) {
// auto || length // auto || length
-webkit-column-width: $length; @include prefixer(column-width, $length, webkit moz spec);
-moz-column-width: $length;
column-width: $length;
} }
common/static/sass/bourbon/css3/_flex-box.scss
...@@ -16,52 +16,37 @@ ...@@ -16,52 +16,37 @@
@mixin box-orient($orient: inline-axis) { @mixin box-orient($orient: inline-axis) {
// horizontal|vertical|inline-axis|block-axis|inherit // horizontal|vertical|inline-axis|block-axis|inherit
-webkit-box-orient: $orient; @include prefixer(box-orient, $orient, webkit moz spec);
-moz-box-orient: $orient;
box-orient: $orient;
} }
@mixin box-pack($pack: start) { @mixin box-pack($pack: start) {
// start|end|center|justify // start|end|center|justify
-webkit-box-pack: $pack; @include prefixer(box-pack, $pack, webkit moz spec);
-moz-box-pack: $pack;
box-pack: $pack;
} }
@mixin box-align($align: stretch) { @mixin box-align($align: stretch) {
// start|end|center|baseline|stretch // start|end|center|baseline|stretch
-webkit-box-align: $align; @include prefixer(box-align, $align, webkit moz spec);
-moz-box-align: $align;
box-align: $align;
} }
@mixin box-direction($direction: normal) { @mixin box-direction($direction: normal) {
// normal|reverse|inherit // normal|reverse|inherit
-webkit-box-direction: $direction; @include prefixer(box-direction, $direction, webkit moz spec);
-moz-box-direction: $direction;
box-direction: $direction;
} }
@mixin box-lines($lines: single) { @mixin box-lines($lines: single) {
// single|multiple // single|multiple
-webkit-box-lines: $lines; @include prefixer(box-lines, $lines, webkit moz spec);
-moz-box-lines: $lines;
box-lines: $lines;
} }
@mixin box-ordinal-group($integer: 1) { @mixin box-ordinal-group($int: 1) {
-webkit-box-ordinal-group: $integer; @include prefixer(box-ordinal-group, $int, webkit moz spec);
-moz-box-ordinal-group: $integer;
box-ordinal-group: $integer;
} }
@mixin box-flex($value: 0.0) { @mixin box-flex($value: 0.0) {
-webkit-box-flex: $value; @include prefixer(box-flex, $value, webkit moz spec);
-moz-box-flex: $value;
box-flex: $value;
} }
@mixin box-flex-group($integer: 1) { @mixin box-flex-group($int: 1) {
-webkit-box-flex-group: $integer; @include prefixer(box-flex-group, $int, webkit moz spec);
-moz-box-flex-group: $integer;
box-flex-group: $integer;
} }
common/static/sass/bourbon/css3/_font-face.scss 0 → 100644
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
@font-face {
font-family: $font-family;
font-weight: $weight;
font-style: $style;
@if $asset-pipeline == true {
src: font-url('#{$file-path}.eot');
src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
font-url('#{$file-path}.woff') format('woff'),
font-url('#{$file-path}.ttf') format('truetype'),
font-url('#{$file-path}.svg##{$font-family}') format('svg');
} @else {
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
}
}
}
common/static/sass/bourbon/css3/_hidpi-media-query.scss 0 → 100644
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
@mixin hidpi($ratio: 1.3) {
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min--moz-device-pixel-ratio: $ratio),
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
only screen and (min-resolution: #{round($ratio*96)}dpi),
only screen and (min-resolution: #{$ratio}dppx) {
@content;
}
}
common/static/sass/bourbon/css3/_image-rendering.scss 0 → 100644
@mixin image-rendering ($mode:optimizeQuality) {
@if ($mode == optimize-contrast) {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
}
@else {
image-rendering: $mode;
}
}
common/static/sass/bourbon/css3/_inline-block.scss
// Legacy support for inline-block in IE7 (maybe IE6) // Legacy support for inline-block in IE7 (maybe IE6)
@mixin inline-block { @mixin inline-block {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
......
common/static/sass/bourbon/css3/_keyframes.scss 0 → 100644
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
@mixin keyframes($name) {
$original-prefix-for-webkit: $prefix-for-webkit;
$original-prefix-for-mozilla: $prefix-for-mozilla;
$original-prefix-for-microsoft: $prefix-for-microsoft;
$original-prefix-for-opera: $prefix-for-opera;
$original-prefix-for-spec: $prefix-for-spec;
@if $original-prefix-for-webkit {
@include disable-prefix-for-all();
$prefix-for-webkit: true;
@-webkit-keyframes #{$name} {
@content;
}
}
@if $original-prefix-for-mozilla {
@include disable-prefix-for-all();
$prefix-for-mozilla: true;
@-moz-keyframes #{$name} {
@content;
}
}
@if $original-prefix-for-opera {
@include disable-prefix-for-all();
$prefix-for-opera: true;
@-o-keyframes #{$name} {
@content;
}
}
@if $original-prefix-for-spec {
@include disable-prefix-for-all();
$prefix-for-spec: true;
@keyframes #{$name} {
@content;
}
}
$prefix-for-webkit: $original-prefix-for-webkit;
$prefix-for-mozilla: $original-prefix-for-mozilla;
$prefix-for-microsoft: $original-prefix-for-microsoft;
$prefix-for-opera: $original-prefix-for-opera;
$prefix-for-spec: $original-prefix-for-spec;
}
common/static/sass/bourbon/css3/_linear-gradient.scss
...@@ -3,15 +3,25 @@ ...@@ -3,15 +3,25 @@
$G5: false, $G6: false, $G5: false, $G6: false,
$G7: false, $G8: false, $G7: false, $G8: false,
$G9: false, $G10: false, $G9: false, $G10: false,
$deprecated-pos1: left top,
$deprecated-pos2: left bottom,
$fallback: false) { $fallback: false) {
// Detect what type of value exists in $pos // Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1)); $pos-type: type-of(nth($pos, 1));
$pos-spec: null;
$pos-degree: null;
// If $pos is missing from mixin, reassign vars and add default position // If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") { @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: top; // Default position $pos: null;
}
@if $pos {
$positions: _linear-positions-parser($pos);
$pos-degree: nth($positions, 1);
$pos-spec: nth($positions, 2);
} }
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
...@@ -25,17 +35,7 @@ ...@@ -25,17 +35,7 @@
} }
background-color: $fallback-color; background-color: $fallback-color;
background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0 background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full); background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
background-image: -ms-linear-gradient($pos, $full);
background-image: -o-linear-gradient($pos, $full);
background-image: unquote("linear-gradient(#{$pos}, #{$full})");
} }
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
// @include linear-gradient(#1e5799, #2989d8);
// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
common/static/sass/bourbon/css3/_perspective.scss 0 → 100644
@mixin perspective($depth: none) {
// none | <length>
@include prefixer(perspective, $depth, webkit moz spec);
}
@mixin perspective-origin($value: 50% 50%) {
@include prefixer(perspective-origin, $value, webkit moz spec);
}
common/static/sass/bourbon/css3/_placeholder.scss 0 → 100644
$placeholders: '-webkit-input-placeholder',
'-moz-placeholder',
'-ms-input-placeholder';
@mixin placeholder {
@each $placeholder in $placeholders {
@if $placeholder == "-webkit-input-placeholder" {
&::#{$placeholder} {
@content;
}
}
@else if $placeholder == "-moz-placeholder" {
// FF 18-
&:#{$placeholder} {
@content;
}
// FF 19+
&::#{$placeholder} {
@content;
}
}
@else {
&:#{$placeholder} {
@content;
}
}
}
}
common/static/sass/bourbon/css3/_radial-gradient.scss
// Requires Sass 3.1+ // Requires Sass 3.1+
@mixin radial-gradient($pos, $shape-size, @mixin radial-gradient($G1, $G2,
$G1, $G2,
$G3: false, $G4: false, $G3: false, $G4: false,
$G5: false, $G6: false, $G5: false, $G6: false,
$G7: false, $G8: false, $G7: false, $G8: false,
$G9: false, $G10: false, $G9: false, $G10: false,
$pos: null,
$shape-size: null,
$deprecated-pos1: center center,
$deprecated-pos2: center center,
$deprecated-radius1: 0,
$deprecated-radius2: 460,
$fallback: false) { $fallback: false) {
$data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
$G1: nth($data, 1);
$G2: nth($data, 2);
$pos: nth($data, 3);
$shape-size: nth($data, 4);
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
// Strip deprecated cover/contain for spec
$shape-size-spec: _shape-size-stripper($shape-size);
// Set $G1 as the default fallback color // Set $G1 as the default fallback color
$fallback-color: nth($G1, 1); $first-color: nth($full, 1);
$fallback-color: nth($first-color, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") { @if (type-of($fallback) == color) or ($fallback == "transparent") {
$fallback-color: $fallback; $fallback-color: $fallback;
} }
// Add Commas and spaces
$shape-size: if($shape-size, '#{$shape-size}, ', null);
$pos: if($pos, '#{$pos}, ', null);
$pos-spec: if($pos, 'at #{$pos}', null);
$shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
background-color: $fallback-color; background-color: $fallback-color;
background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0 background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
background-image: -webkit-radial-gradient($pos, $shape-size, $full); background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
background-image: -moz-radial-gradient($pos, $shape-size, $full); background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
background-image: -ms-radial-gradient($pos, $shape-size, $full);
background-image: -o-radial-gradient($pos, $shape-size, $full);
background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
} }
// Usage: Gradient position and shape-size are required. Color stops are optional.
// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
common/static/sass/bourbon/css3/_transform.scss
@mixin transform($property: none) { @mixin transform($property: none) {
// none | <transform-function> // none | <transform-function>
-webkit-transform: $property; @include prefixer(transform, $property, webkit moz ms o spec);
-moz-transform: $property;
-ms-transform: $property;
-o-transform: $property;
transform: $property;
} }
@mixin transform-origin($axes: 50%) { @mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | % // x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | % // y-axis - top | center | bottom | length | %
// z-axis - length // z-axis - length
-webkit-transform-origin: $axes; @include prefixer(transform-origin, $axes, webkit moz ms o spec);
-moz-transform-origin: $axes; }
-ms-transform-origin: $axes;
-o-transform-origin: $axes; @mixin transform-style ($style: flat) {
transform-origin: $axes; @include prefixer(transform-style, $style, webkit moz ms o spec);
} }
common/static/sass/bourbon/css3/_transition.scss
...@@ -3,102 +3,32 @@ ...@@ -3,102 +3,32 @@
// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) { @mixin transition ($properties...) {
@if length($properties) >= 1 {
// Detect # of args passed into each variable @include prefixer(transition, $properties, webkit moz spec);
$length-of-property: length($property);
$length-of-duration: length($duration);
$length-of-timing-function: length($timing-function);
$length-of-delay: length($delay);
@if $length-of-property > 1 {
@include transition-property(zip($property)); }
@else {
@include transition-property( $property);
}
@if $length-of-duration > 1 {
@include transition-duration(zip($duration)); }
@else {
@include transition-duration( $duration);
} }
@if $length-of-timing-function > 1 {
@include transition-timing-function(zip($timing-function)); }
@else { @else {
@include transition-timing-function( $timing-function); $properties: all 0.15s ease-out 0;
} @include prefixer(transition, $properties, webkit moz spec);
@if $length-of-delay > 1 {
@include transition-delay(zip($delay)); }
@else {
@include transition-delay( $delay);
} }
} }
@mixin transition-property ($properties...) {
@mixin transition-property ($prop-1: all, -webkit-transition-property: transition-property-names($properties, 'webkit');
$prop-2: false, $prop-3: false, -moz-transition-property: transition-property-names($properties, 'moz');
$prop-4: false, $prop-5: false, transition-property: transition-property-names($properties, false);
$prop-6: false, $prop-7: false,
$prop-8: false, $prop-9: false)
{
$full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
$prop-6, $prop-7, $prop-8, $prop-9);
-webkit-transition-property: $full;
-moz-transition-property: $full;
-ms-transition-property: $full;
-o-transition-property: $full;
transition-property: $full;
} }
@mixin transition-duration ($time-1: 0, @mixin transition-duration ($times...) {
$time-2: false, $time-3: false, @include prefixer(transition-duration, $times, webkit moz spec);
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
-webkit-transition-duration: $full;
-moz-transition-duration: $full;
-ms-transition-duration: $full;
-o-transition-duration: $full;
transition-duration: $full;
} }
@mixin transition-timing-function ($motion-1: ease, @mixin transition-timing-function ($motions...) {
$motion-2: false, $motion-3: false,
$motion-4: false, $motion-5: false,
$motion-6: false, $motion-7: false,
$motion-8: false, $motion-9: false)
{
$full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
$motion-6, $motion-7, $motion-8, $motion-9);
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-webkit-transition-timing-function: $full; @include prefixer(transition-timing-function, $motions, webkit moz spec);
-moz-transition-timing-function: $full;
-ms-transition-timing-function: $full;
-o-transition-timing-function: $full;
transition-timing-function: $full;
} }
@mixin transition-delay ($time-1: 0, @mixin transition-delay ($times...) {
$time-2: false, $time-3: false, @include prefixer(transition-delay, $times, webkit moz spec);
$time-4: false, $time-5: false,
$time-6: false, $time-7: false,
$time-8: false, $time-9: false)
{
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
$time-6, $time-7, $time-8, $time-9);
-webkit-transition-delay: $full;
-moz-transition-delay: $full;
-ms-transition-delay: $full;
-o-transition-delay: $full;
transition-delay: $full;
} }
common/static/sass/bourbon/css3/_user-select.scss
@mixin user-select($arg: none) { @mixin user-select($arg: none) {
-webkit-user-select: $arg; @include prefixer(user-select, $arg, webkit moz ms spec);
-moz-user-select: $arg;
-ms-user-select: $arg;
user-select: $arg;
} }
common/static/sass/bourbon/functions/_compact.scss 0 → 100644
// Remove `false` values from a list
@function compact($vars...) {
$list: ();
@each $var in $vars {
@if $var {
$list: append($list, $var, comma);
}
}
@return $list;
}
common/static/sass/bourbon/functions/_flex-grid.scss
...@@ -14,13 +14,17 @@ ...@@ -14,13 +14,17 @@
// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
// This function takes the fluid grid equation (target / context = result) and uses columns to help define each. // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
// //
// The calculation presumes that your column structure will be missing the last gutter:
//
// -- column -- gutter -- column -- gutter -- column
//
// $fg-column: 60px; // Column Width // $fg-column: 60px; // Column Width
// $fg-gutter: 25px; // Gutter Width // $fg-gutter: 25px; // Gutter Width
// $fg-max-columns: 12; // Total Columns For Main Container // $fg-max-columns: 12; // Total Columns For Main Container
// //
// div { // div {
// width: flex-grid(4); // returns (315px / 1020px) = 30.882353%; // width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
// margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%; // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
// //
// p { // p {
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
...@@ -32,4 +36,4 @@ ...@@ -32,4 +36,4 @@
// float: left; // float: left;
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
// } // }
// } // }
\ No newline at end of file
common/static/sass/bourbon/functions/_linear-gradient.scss
@function linear-gradient($pos: top, $G1: false, $G2: false, @function linear-gradient($pos, $gradients...) {
$G3: false, $G4: false, $type: linear;
$G5: false, $G6: false,
$G7: false, $G8: false,
$G9: false, $G10: false) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1)); $pos-type: type-of(nth($pos, 1));
// If $pos is missing from mixin, reassign vars and add default position // if $pos doesn't exist, fix $gradient
@if ($pos-type == color) or (nth($pos, 1) == "transparent") { @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; $gradients: zip($pos $gradients);
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; $pos: false;
$pos: top; // Default position
} }
$type: linear; $type-gradient: $type, $pos, $gradients;
$gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
$type-gradient: append($type, $gradient, comma);
@return $type-gradient; @return $type-gradient;
} }
common/static/sass/bourbon/functions/_px-to-em.scss 0 → 100644
// Convert pixels to ems
// eg. for a relational value of 12px write em(12) when the parent is 16px
// if the parent is another value say 24px write em(12, 24)
@function em($pxval, $base: 16) {
@return ($pxval / $base) * 1em;
}
common/static/sass/bourbon/functions/_radial-gradient.scss
// This function is required and used by the background-image mixin. // This function is required and used by the background-image mixin.
@function radial-gradient($pos, $shape-size, @function radial-gradient($G1, $G2,
$G1, $G2,
$G3: false, $G4: false, $G3: false, $G4: false,
$G5: false, $G6: false, $G5: false, $G6: false,
$G7: false, $G8: false, $G7: false, $G8: false,
$G9: false, $G10: false) { $G9: false, $G10: false,
$pos: null,
$shape-size: null) {
$data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
$G1: nth($data, 1);
$G2: nth($data, 2);
$pos: nth($data, 3);
$shape-size: nth($data, 4);
$type: radial; $type: radial;
$gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
$type-gradient: append($type, $gradient, comma);
$type-gradient: $type, $shape-size $pos, $gradient;
@return $type-gradient; @return $type-gradient;
} }
common/static/sass/bourbon/functions/_render-gradients.scss deleted 100644 → 0
// User for linear and radial gradients within background-image or border-image properties
@function render-gradients($gradients, $gradient-type, $vendor: false) {
$vendor-gradients: false;
@if $vendor {
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
}
@else if $vendor == false {
$vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
}
common/static/sass/bourbon/functions/_transition-property-name.scss 0 → 100644
// Return vendor-prefixed property names if appropriate
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
//************************************************************************//
@function transition-property-names($props, $vendor: false) {
$new-props: ();
@each $prop in $props {
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
}
@return $new-props;
}
@function transition-property-name($prop, $vendor: false) {
// put other properties that need to be prefixed here aswell
@if $vendor and $prop == transform {
@return unquote('-'+$vendor+'-'+$prop);
}
@else {
@return $prop;
}
}
\ No newline at end of file
common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss → common/static/sass/bourbon/helpers/_deprecated-webkit-gradient.scss
// Render Deprecated Webkit Gradient - Linear || Radial // Render Deprecated Webkit Gradient - Linear || Radial
//************************************************************************// //************************************************************************//
@function deprecated-webkit-gradient($type, $full) { @function _deprecated-webkit-gradient($type,
$deprecated-pos1, $deprecated-pos2,
$full,
$deprecated-radius1: false, $deprecated-radius2: false) {
$gradient-list: (); $gradient-list: ();
$gradient: false; $gradient: false;
$full-length: length($full); $full-length: length($full);
...@@ -14,7 +17,7 @@ ...@@ -14,7 +17,7 @@
$color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
$gradient-list: join($gradient-list, $color-stop, comma); $gradient-list: join($gradient-list, $color-stop, comma);
} }
@else { @else if $gradient != null {
@if $i == $full-length { @if $i == $full-length {
$percentage: 100%; $percentage: 100%;
} }
...@@ -27,10 +30,10 @@ ...@@ -27,10 +30,10 @@
} }
@if $type == radial { @if $type == radial {
$gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list); $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
} }
@else if $type == linear { @else if $type == linear {
$gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list); $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
} }
@return $gradient; @return $gradient;
} }
common/static/sass/bourbon/helpers/_gradient-positions-parser.scss 0 → 100644
@function _gradient-positions-parser($gradient-type, $gradient-positions) {
@if $gradient-positions
and ($gradient-type == linear)
and (type-of($gradient-positions) != color) {
$gradient-positions: _linear-positions-parser($gradient-positions);
}
@else if $gradient-positions
and ($gradient-type == radial)
and (type-of($gradient-positions) != color) {
$gradient-positions: _radial-positions-parser($gradient-positions);
}
@return $gradient-positions;
}
common/static/sass/bourbon/helpers/_linear-positions-parser.scss 0 → 100644
@function _linear-positions-parser($pos) {
$type: type-of(nth($pos, 1));
$spec: null;
$degree: null;
$side: null;
$corner: null;
$length: length($pos);
// Parse Side and corner positions
@if ($length > 1) {
@if nth($pos, 1) == "to" { // Newer syntax
$side: nth($pos, 2);
@if $length == 2 { // eg. to top
// Swap for backwards compatability
$degree: _position-flipper(nth($pos, 2));
}
@else if $length == 3 { // eg. to top left
$corner: nth($pos, 3);
}
}
@else if $length == 2 { // Older syntax ("top left")
$side: _position-flipper(nth($pos, 1));
$corner: _position-flipper(nth($pos, 2));
}
@if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
@else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
}
$spec: to $side $corner;
}
@else if $length == 1 {
// Swap for backwards compatability
@if $type == string {
$degree: $pos;
$spec: to _position-flipper($pos);
}
@else {
$degree: -270 - $pos; //rotate the gradient opposite from spec
$spec: $pos;
}
}
$degree: unquote($degree + ",");
$spec: unquote($spec + ",");
@return $degree $spec;
}
@function _position-flipper($pos) {
@return if($pos == left, right, null)
if($pos == right, left, null)
if($pos == top, bottom, null)
if($pos == bottom, top, null);
}
common/static/sass/bourbon/helpers/_radial-arg-parser.scss 0 → 100644
@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
@each $value in $G1, $G2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
$spec-at-index: null;
// Determine if spec was passed to mixin
@if type-of($value) == list {
$spec-at-index: if(index($value, at), index($value, at), false);
}
@if $spec-at-index {
@if $spec-at-index > 1 {
@for $i from 1 through ($spec-at-index - 1) {
$shape-size: $shape-size nth($value, $i);
}
@for $i from ($spec-at-index + 1) through length($value) {
$pos: $pos nth($value, $i);
}
}
@else if $spec-at-index == 1 {
@for $i from ($spec-at-index + 1) through length($value) {
$pos: $pos nth($value, $i);
}
}
$G1: false;
}
// If not spec calculate correct values
@else {
@if ($pos-type != color) or ($first-val != "transparent") {
@if ($pos-type == number)
or ($first-val == "center")
or ($first-val == "top")
or ($first-val == "right")
or ($first-val == "bottom")
or ($first-val == "left") {
$pos: $value;
@if $pos == $G1 {
$G1: false;
}
}
@else if
($first-val == "ellipse")
or ($first-val == "circle")
or ($first-val == "closest-side")
or ($first-val == "closest-corner")
or ($first-val == "farthest-side")
or ($first-val == "farthest-corner")
or ($first-val == "contain")
or ($first-val == "cover") {
$shape-size: $value;
@if $value == $G1 {
$G1: false;
}
@else if $value == $G2 {
$G2: false;
}
}
}
}
}
@return $G1, $G2, $pos, $shape-size;
}
common/static/sass/bourbon/helpers/_radial-positions-parser.scss 0 → 100644
@function _radial-positions-parser($gradient-pos) {
$shape-size: nth($gradient-pos, 1);
$pos: nth($gradient-pos, 2);
$shape-size-spec: _shape-size-stripper($shape-size);
$pre-spec: unquote(if($pos, "#{$pos}, ", null))
unquote(if($shape-size, "#{$shape-size},", null));
$pos-spec: if($pos, "at #{$pos}", null);
$spec: "#{$shape-size-spec} #{$pos-spec}";
// Add comma
@if ($spec != ' ') {
$spec: "#{$spec},"
}
@return $pre-spec $spec;
}
common/static/sass/bourbon/helpers/_render-gradients.scss 0 → 100644
// User for linear and radial gradients within background-image or border-image properties
@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
$pre-spec: null;
$spec: null;
$vendor-gradients: null;
@if $gradient-type == linear {
@if $gradient-positions {
$pre-spec: nth($gradient-positions, 1);
$spec: nth($gradient-positions, 2);
}
}
@else if $gradient-type == radial {
$pre-spec: nth($gradient-positions, 1);
$spec: nth($gradient-positions, 2);
}
@if $vendor {
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
}
@else if $vendor == false {
$vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
$vendor-gradients: unquote($vendor-gradients);
}
@return $vendor-gradients;
}
common/static/sass/bourbon/helpers/_shape-size-stripper.scss 0 → 100644
@function _shape-size-stripper($shape-size) {
$shape-size-spec: null;
@each $value in $shape-size {
@if ($value == "cover") or ($value == "contain") {
$value: null;
}
$shape-size-spec: "#{$shape-size-spec} #{$value}";
}
@return $shape-size-spec;
}
common/static/sass/bourbon/lib/bourbon.rb deleted 100644 → 0
require "bourbon/generator"
module Bourbon
if defined?(Rails)
class Engine < ::Rails::Engine
require 'bourbon/engine'
end
module Rails
class Railtie < ::Rails::Railtie
rake_tasks do
load "tasks/install.rake"
end
end
end
end
end
require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")
common/static/sass/bourbon/lib/bourbon/sass_extensions.rb deleted 100644 → 0
module Bourbon::SassExtensions
end
require "sass"
require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb deleted 100644 → 0
module Bourbon::SassExtensions::Functions
end
require File.join(File.dirname(__FILE__), "/functions/compact")
module Sass::Script::Functions
include Bourbon::SassExtensions::Functions::Compact
end
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
class Sass::Script::Functions::EvaluationContext
include Sass::Script::Functions
end
common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb deleted 100644 → 0
# Compact function pulled from compass
module Bourbon::SassExtensions::Functions::Compact
def compact(*args)
sep = :comma
if args.size == 1 && args.first.is_a?(Sass::Script::List)
args = args.first.value
sep = args.first.separator
end
Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
end
end
common/static/sass/neat/_neat-helpers.scss 0 → 100644
// Functions
@import "functions/private";
@import "functions/new-breakpoint";
@import "functions/px-to-em";
// Settings
@import "settings/grid";
@import "settings/visual-grid";
common/static/sass/neat/_neat.scss 0 → 100644
// Bourbon Neat
// MIT Licensed
// Copyright (c) 2012-2013 thoughtbot, inc.
// Helpers
@import "neat-helpers";
// Grid
@import "grid/private";
@import "grid/reset";
@import "grid/grid";
@import "grid/omega";
@import "grid/outer-container";
@import "grid/span-columns";
@import "grid/row";
@import "grid/shift";
@import "grid/pad";
@import "grid/fill-parent";
@import "grid/media";
@import "grid/to-deprecate";
@import "grid/visual-grid";
common/static/sass/neat/functions/_new-breakpoint.scss 0 → 100644
@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
@if length($query) == 1 {
$query: $default-feature nth($query, 1) $total-columns;
}
@else if length($query) == 2 or length($query) == 4 {
$query: append($query, $total-columns);
}
@if not belongs-to($query, $visual-grid-breakpoints) {
$visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
}
@return $query;
}
common/static/sass/neat/functions/_private.scss 0 → 100644
// Checks if a number is even
@function is-even($int) {
@if $int%2 == 0 {
@return true;
}
@return false;
}
// Checks if an element belongs to a list
@function belongs-to($tested-item, $list) {
@each $item in $list {
@if $item == $tested-item {
@return true;
}
}
@return false;
}
// Contains display value
@function contains-display-value($query) {
@if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) {
@return true;
}
@return false;
}
// Parses the first argument of span-columns()
@function container-span($span: $span) {
@if length($span) == 3 {
$container-columns: nth($span, 3);
@return $container-columns;
}
@else if length($span) == 2 {
$container-columns: nth($span, 2);
@return $container-columns;
}
@else {
@return $grid-columns;
}
}
// Generates a striped background
@function gradient-stops($grid-columns, $color: $visual-grid-color) {
$transparent: rgba(0,0,0,0);
$column-width: flex-grid(1, $grid-columns);
$gutter-width: flex-gutter($grid-columns);
$column-offset: $column-width;
$values: ($transparent 0, $color 0);
@for $i from 1 to $grid-columns*2 {
@if is-even($i) {
$values: append($values, $transparent $column-offset);
$values: append($values, $color $column-offset);
$column-offset: $column-offset + $column-width;
}
@else {
$values: append($values, $color $column-offset);
$values: append($values, $transparent $column-offset);
$column-offset: $column-offset + $gutter-width;
}
}
@return $values;
}
// Layout direction
@function get-direction($layout, $default) {
$direction: nil;
@if $layout == LTR or $layout == RTL {
$direction: direction-from-layout($layout);
} @else {
$direction: direction-from-layout($default);
}
@return $direction;
}
@function direction-from-layout($layout) {
$direction: nil;
@if $layout == LTR {
$direction: right;
} @else {
$direction: left;
}
@return $direction;
}
@function get-opposite-direction($direction) {
$opposite-direction: left;
@if $direction == left {
$opposite-direction: right;
}
@return $opposite-direction;
}
common/static/sass/neat/functions/_px-to-em.scss 0 → 100644
@function em($pxval, $base: 16) {
@return ($pxval / $base) * 1em;
}
common/static/sass/neat/grid/_fill-parent.scss 0 → 100644
@mixin fill-parent() {
width: 100%;
@if $border-box-sizing == false {
@include box-sizing(border-box);
}
}
common/static/sass/neat/grid/_grid.scss 0 → 100644
@if $border-box-sizing == true {
* {
@include box-sizing(border-box);
}
}
common/static/sass/neat/grid/_media.scss 0 → 100644
@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
@if length($query) == 1 {
@media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns;
@content;
$grid-columns: $default-grid-columns;
}
}
@else if length($query) == 2 {
@media screen and (nth($query, 1): nth($query, 2)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns;
@content;
$grid-columns: $default-grid-columns;
}
}
@else if length($query) == 3 {
@media screen and (nth($query, 1): nth($query, 2)) {
$default-grid-columns: $grid-columns;
$grid-columns: nth($query, 3);
@content;
$grid-columns: $default-grid-columns;
}
}
@else if length($query) == 4 {
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns;
@content;
$grid-columns: $default-grid-columns;
}
}
@else if length($query) == 5 {
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
$default-grid-columns: $grid-columns;
$grid-columns: nth($query, 5);
@content;
$grid-columns: $default-grid-columns;
}
}
@else {
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
}
}
common/static/sass/neat/grid/_omega.scss 0 → 100644
// Remove last element gutter
@mixin omega($query: block, $direction: default) {
$table: if(belongs-to(table, $query), true, false);
$auto: if(belongs-to(auto, $query), true, false);
@if $direction != default {
@warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
} @else {
$direction: get-direction($layout-direction, $default-layout-direction);
}
@if length($query) == 1 {
@if $auto {
&:last-child {
margin-#{$direction}: 0;
}
}
@else if contains-display-value($query) {
@if $table {
padding-#{$direction}: 0;
}
@else {
margin-#{$direction}: 0;
}
}
@else {
@include nth-child($query, $direction);
}
}
@else if length($query) == 2 {
@if $table {
@if $auto {
&:last-child {
padding-#{$direction}: 0;
}
}
@else {
&:nth-child(#{nth($query, 1)}) {
padding-#{$direction}: 0;
}
}
}
@else {
@if $auto {
&:last-child {
margin-#{$direction}: 0;
}
}
@else {
@include nth-child(nth($query, 1), $direction);
}
}
}
@else {
@warn "Too many arguments passed to the omega() mixin."
}
}
@mixin nth-child($query, $direction) {
$opposite-direction: get-opposite-direction($direction);
&:nth-child(#{$query}) {
margin-#{$direction}: 0;
}
@if type-of($query) == number {
&:nth-child(#{$query}+1) {
clear: $opposite-direction;
}
}
}
common/static/sass/neat/grid/_outer-container.scss 0 → 100644
@mixin outer-container {
@include clearfix;
max-width: $max-width;
margin: {
left: auto;
right: auto;
}
}
common/static/sass/neat/grid/_pad.scss 0 → 100644
@mixin pad($padding: flex-gutter()) {
$padding-list: null;
@each $value in $padding {
$value: if($value == 'default', flex-gutter(), $value);
$padding-list: join($padding-list, $value);
}
padding: $padding-list;
}
common/static/sass/neat/grid/_private.scss 0 → 100644
$parent-columns: $grid-columns !default;
$fg-column: $column;
$fg-gutter: $gutter;
$fg-max-columns: $grid-columns;
$container-display-table: false !default;
$layout-direction: nil !default;
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width);
}
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width);
}
@function grid-width($n) {
@return $n * $gw-column + ($n - 1) * $gw-gutter;
}
common/static/sass/neat/grid/_reset.scss 0 → 100644
@mixin reset-display {
$container-display-table: false;
}
@mixin reset-layout-direction {
$layout-direction: $default-layout-direction;
}
@mixin reset-all {
@include reset-display;
@include reset-layout-direction;
}
common/static/sass/neat/grid/_row.scss 0 → 100644
@mixin row($display: block, $direction: $default-layout-direction) {
@include clearfix;
$layout-direction: $direction;
@if $display == table {
display: table;
@include fill-parent;
table-layout: fixed;
$container-display-table: true;
}
@else {
display: block;
$container-display-table: false;
}
}
common/static/sass/neat/grid/_shift.scss 0 → 100644
@mixin shift($n-columns: 1) {
$direction: get-direction($layout-direction, $default-layout-direction);
$opposite-direction: get-opposite-direction($direction);
margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
// Reset nesting context
$parent-columns: $grid-columns;
}
common/static/sass/neat/grid/_span-columns.scss 0 → 100644
@mixin span-columns($span: $columns of $container-columns, $display: block) {
$columns: nth($span, 1);
$container-columns: container-span($span);
$display-table: false;
$direction: get-direction($layout-direction, $default-layout-direction);
$opposite-direction: get-opposite-direction($direction);
@if $container-columns != $grid-columns {
$parent-columns: $container-columns;
} @else {
$parent-columns: $grid-columns;
}
@if $container-display-table == true {
$display-table: true;
} @else if $display == table {
$display-table: true;
} @else {
$display-table: false;
}
@if $display-table {
display: table-cell;
padding-#{$direction}: flex-gutter($container-columns);
width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
&:last-child {
width: flex-grid($columns, $container-columns);
padding-#{$direction}: 0;
}
}
@else {
display: block;
float: #{$opposite-direction};
margin-#{$direction}: flex-gutter($container-columns);
width: flex-grid($columns, $container-columns);
&:last-child {
margin-#{$direction}: 0;
}
}
}
common/static/sass/neat/grid/_to-deprecate.scss 0 → 100644
@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
@warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.";
@if length($query) == 1 {
@media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns;
@content;
$grid-columns: $default-grid-columns;
}
}
@else if length($query) == 2 {
@media screen and (nth($query, 1): nth($query, 2)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns;
@content;
$grid-columns: $default-grid-columns;
}
}
@else if length($query) == 3 {
@media screen and (nth($query, 1): nth($query, 2)) {
$default-grid-columns: $grid-columns;
$grid-columns: nth($query, 3);
@content;
$grid-columns: $default-grid-columns;
}
}
@else if length($query) == 4 {
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns;
@content;
$grid-columns: $default-grid-columns;
}
}
@else if length($query) == 5 {
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
$default-grid-columns: $grid-columns;
$grid-columns: nth($query, 5);
@content;
$grid-columns: $default-grid-columns;
}
}
@else {
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
}
}
@mixin nth-omega($nth, $display: block, $direction: default) {
@warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
@include omega($nth $display, $direction);
}
common/static/sass/neat/grid/_visual-grid.scss 0 → 100644
@mixin grid-column-gradient($values...) {
background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
background-image: -webkit-linear-gradient(left, $values);
background-image: -moz-linear-gradient(left, $values);
background-image: -ms-linear-gradient(left, $values);
background-image: -o-linear-gradient(left, $values);
background-image: unquote("linear-gradient(left, #{$values})");
}
@if $visual-grid == true or $visual-grid == yes {
body:before {
content: '';
display: inline-block;
@include grid-column-gradient(gradient-stops($grid-columns));
height: 100%;
left: 0;
margin: 0 auto;
max-width: $max-width;
opacity: $visual-grid-opacity;
position: fixed;
right: 0;
width: 100%;
pointer-events: none;
@if $visual-grid-index == back {
z-index: -1;
}
@else if $visual-grid-index == front {
z-index: 9999;
}
@each $breakpoint in $visual-grid-breakpoints {
@if $breakpoint != nil {
@include media($breakpoint) {
@include grid-column-gradient(gradient-stops($grid-columns));
}
}
}
}
}
common/static/sass/neat/settings/_grid.scss 0 → 100644
$column: golden-ratio(1em, 3) !default; // Column width
$gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns
$grid-columns: 12 !default; // Total number of columns in the grid
$max-width: em(1088) !default; // Max-width of the outer container
$border-box-sizing: true !default; // Makes all elements have a border-box layout
$default-feature: min-width; // Default @media feature for the breakpoint() mixin
$default-layout-direction: LTR !default;
common/static/sass/neat/settings/_visual-grid.scss 0 → 100644
$visual-grid: false !default; // Display the base grid
$visual-grid-color: #EEE !default;
$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
$visual-grid-opacity: 0.4 !default;
$visual-grid-breakpoints: () !default;
lms/static/sass/_discussion.scss
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
body.discussion { body.discussion {
.new-post-form-errors { .new-post-form-errors {
display: none; display: none;
background: $error-red; background: $error-red;
...@@ -105,7 +105,7 @@ body.discussion { ...@@ -105,7 +105,7 @@ body.discussion {
color: #fff; color: #fff;
line-height: 1.6; line-height: 1.6;
border-radius: 3px; border-radius: 3px;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
li { li {
padding: 10px 20px 12px 45px; padding: 10px 20px 12px 45px;
...@@ -490,9 +490,9 @@ body.discussion { ...@@ -490,9 +490,9 @@ body.discussion {
section.user-profile { section.user-profile {
@extend .sidebar; @extend .sidebar;
display: table-cell; display: table-cell;
@include border-radius(3px 0 0 3px); border-radius: 3px 0 0 3px;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
@include box-shadow(none); box-shadow: none;
background-color: $sidebar-color; background-color: $sidebar-color;
.user-profile { .user-profile {
...@@ -548,7 +548,7 @@ body.discussion { ...@@ -548,7 +548,7 @@ body.discussion {
font-style: normal; font-style: normal;
font-size: 0.8em; font-size: 0.8em;
line-height: 1.6em; line-height: 1.6em;
@include border-radius(3px 3px 0 0); border-radius: 3px 3px 0 0;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: #888; color: #888;
...@@ -563,9 +563,9 @@ body.discussion { ...@@ -563,9 +563,9 @@ body.discussion {
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
border-top-width: 0; border-top-width: 0;
@include border-radius(0 0 3px 3px); border-radius: 0 0 3px 3px;
overflow: hidden; overflow: hidden;
@include transition(all, .2s, easeOut); @include transition(all .2s ease-out 0s);
&:before { &:before {
content: 'PREVIEW'; content: 'PREVIEW';
...@@ -591,7 +591,7 @@ body.discussion { ...@@ -591,7 +591,7 @@ body.discussion {
padding: 0px; padding: 0px;
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
@include transition(all, .2s, easeOut); @include transition(all .2s ease-out 0s);
} }
.wmd-spacer { .wmd-spacer {
...@@ -718,7 +718,7 @@ body.discussion { ...@@ -718,7 +718,7 @@ body.discussion {
height: 100%; height: 100%;
@include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
background-color: #dcdcdc; background-color: #dcdcdc;
@include transition(all .2s ease-out); @include transition(all .2s ease-out 0s);
&:hover { &:hover {
background-color: #e9e9e9; background-color: #e9e9e9;
...@@ -818,7 +818,7 @@ body.discussion { ...@@ -818,7 +818,7 @@ body.discussion {
color: #333; color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8); text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
opacity: 0.0; opacity: 0.0;
@include transition(opacity .2s); @include transition(opacity .2s linear 0s);
} }
} }
...@@ -847,7 +847,7 @@ body.discussion { ...@@ -847,7 +847,7 @@ body.discussion {
border: 1px solid #4b4b4b; border: 1px solid #4b4b4b;
border-left: none; border-left: none;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
@include box-shadow(1px 0 0 #4b4b4b inset); box-shadow: 1px 0 0 #4b4b4b inset;
.browse-topic-drop-menu { .browse-topic-drop-menu {
max-height: 400px; max-height: 400px;
...@@ -938,7 +938,7 @@ body.discussion { ...@@ -938,7 +938,7 @@ body.discussion {
max-width: 30px; max-width: 30px;
margin: auto; margin: auto;
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(all .2s); @include transition(all .2s linear 0s);
} }
.post-search-field { .post-search-field {
...@@ -959,13 +959,13 @@ body.discussion { ...@@ -959,13 +959,13 @@ body.discussion {
color: #333; color: #333;
cursor: pointer; cursor: pointer;
pointer-events: none; pointer-events: none;
@include transition(all .2s ease-out); @include transition(all .2s ease-out 0s);
&::-webkit-input-placeholder, &::-webkit-input-placeholder,
&:-moz-placeholder, &:-moz-placeholder,
&:-ms-input-placeholder { &:-ms-input-placeholder {
opacity: 0.0; opacity: 0.0;
@include transition(opacity .2s); @include transition(opacity .2s linear 0s);
} }
&:focus { &:focus {
...@@ -1071,7 +1071,7 @@ body.discussion { ...@@ -1071,7 +1071,7 @@ body.discussion {
a { a {
display: block; display: block;
position: relative; position: relative;
float: left; float: left;
clear: both; clear: both;
width: 100%; width: 100%;
...@@ -1278,8 +1278,8 @@ body.discussion { ...@@ -1278,8 +1278,8 @@ body.discussion {
.discussion-article { .discussion-article {
position: relative; position: relative;
padding: 40px; padding: 40px;
min-height: 468px; min-height: 468px;
a { a {
word-wrap: break-word; word-wrap: break-word;
} }
...@@ -1332,9 +1332,9 @@ body.discussion { ...@@ -1332,9 +1332,9 @@ body.discussion {
background-position: 0 0; background-position: 0 0;
} }
} }
} }
.discussion-post { .discussion-post {
...@@ -1379,7 +1379,7 @@ body.discussion { ...@@ -1379,7 +1379,7 @@ body.discussion {
margin-bottom: 20px; margin-bottom: 20px;
} }
.responses { .responses {
list-style: none; list-style: none;
...@@ -1609,8 +1609,8 @@ body.discussion { ...@@ -1609,8 +1609,8 @@ body.discussion {
background: #449944; background: #449944;
font-size: 9px; font-size: 9px;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
color: white; color: white;
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -1618,7 +1618,7 @@ body.discussion { ...@@ -1618,7 +1618,7 @@ body.discussion {
padding: 8px 20px; padding: 8px 20px;
.wmd-input { .wmd-input {
@include transition(all .2s); @include transition(all .2s linear 0s);
} }
.wmd-button { .wmd-button {
...@@ -1638,7 +1638,7 @@ body.discussion { ...@@ -1638,7 +1638,7 @@ body.discussion {
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
@include transition(border-color .1s); @include transition(border-color .1s linear 0s);
&:focus { &:focus {
border-color: #4697c1; border-color: #4697c1;
...@@ -1726,7 +1726,7 @@ body.discussion { ...@@ -1726,7 +1726,7 @@ body.discussion {
.discussion-reply-new { .discussion-reply-new {
padding: 20px; padding: 20px;
@include clearfix; @include clearfix;
@include transition(opacity .2s); @include transition(opacity .2s linear 0s);
h4 { h4 {
font-size: 16px; font-size: 16px;
...@@ -1837,7 +1837,7 @@ body.discussion { ...@@ -1837,7 +1837,7 @@ body.discussion {
/* Course content p has a default margin-bottom of 1.416em, this is just to reset that */ /* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
.discussion-thread { .discussion-thread {
padding: 0; padding: 0;
@include transition(all .25s); @include transition(all .25s linear 0s);
.dogear { .dogear {
display: none; display: none;
...@@ -1868,7 +1868,7 @@ body.discussion { ...@@ -1868,7 +1868,7 @@ body.discussion {
min-height: 0; min-height: 0;
padding: 10px 10px 15px 10px; padding: 10px 10px 15px 10px;
box-shadow: 0 1px 0 #ddd; box-shadow: 0 1px 0 #ddd;
@include transition(all .2s); @include transition(all .2s linear 0s);
.discussion-post { .discussion-post {
padding: 12px 20px 0 20px; padding: 12px 20px 0 20px;
...@@ -2206,7 +2206,7 @@ body.discussion { ...@@ -2206,7 +2206,7 @@ body.discussion {
font-style: normal; font-style: normal;
font-size: 0.8em; font-size: 0.8em;
line-height: 1.6em; line-height: 1.6em;
@include border-radius(3px 3px 0 0); border-radius: 3px 3px 0 0;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: #888; color: #888;
...@@ -2221,9 +2221,9 @@ body.discussion { ...@@ -2221,9 +2221,9 @@ body.discussion {
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
border-top-width: 0; border-top-width: 0;
@include border-radius(0 0 3px 3px); border-radius: 0 0 3px 3px;
overflow: hidden; overflow: hidden;
@include transition(all, .2s, easeOut); @include transition(all .2s ease-out 0s);
&:before { &:before {
content: 'PREVIEW'; content: 'PREVIEW';
...@@ -2249,7 +2249,7 @@ body.discussion { ...@@ -2249,7 +2249,7 @@ body.discussion {
padding: 0px; padding: 0px;
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
@include transition(all, .2s, easeOut); @include transition(all .2s ease-out 0s);
} }
.wmd-spacer { .wmd-spacer {
...@@ -2448,7 +2448,7 @@ body.discussion { ...@@ -2448,7 +2448,7 @@ body.discussion {
float:right; float:right;
padding-right: 5px; padding-right: 5px;
font-style: italic; font-style: italic;
cursor:pointer; cursor:pointer;
margin-right: 10px; margin-right: 10px;
opacity: 0.8; opacity: 0.8;
...@@ -2457,10 +2457,10 @@ body.discussion { ...@@ -2457,10 +2457,10 @@ body.discussion {
} }
&:hover { &:hover {
@include transition(opacity .2s); @include transition(opacity .2s linear 0s);
opacity: 1.0; opacity: 1.0;
} }
} }
.discussion-pin-inline { .discussion-pin-inline {
font-size: 12px; font-size: 12px;
...@@ -2472,39 +2472,39 @@ body.discussion { ...@@ -2472,39 +2472,39 @@ body.discussion {
margin-right:35px; margin-right:35px;
margin-top:13px; margin-top:13px;
opacity: 1.0; opacity: 1.0;
} }
.notpinned .icon { .notpinned .icon {
display: block; display: block;
float: left; float: left;
margin: 3px; margin: 3px;
width: 10px; width: 10px;
height: 14px; height: 14px;
padding-right: 3px; padding-right: 3px;
background: transparent url('../images/unpinned.png') no-repeat 0 0; background: transparent url('../images/unpinned.png') no-repeat 0 0;
} }
.pinned .icon { .pinned .icon {
display: block; display: block;
float: left; float: left;
margin: 3px; margin: 3px;
width: 10px; width: 10px;
height: 14px; height: 14px;
padding-right: 3px; padding-right: 3px;
background: transparent url('../images/pinned.png') no-repeat 0 0; background: transparent url('../images/pinned.png') no-repeat 0 0;
} }
.pinned span { .pinned span {
color: #B82066; color: #B82066;
font-style: italic; font-style: italic;
//cursor change is here since pins are read-only for inline discussions. //cursor change is here since pins are read-only for inline discussions.
cursor: default; cursor: default;
} }
.notpinned span { .notpinned span {
color: #888; color: #888;
font-style: italic; font-style: italic;
//cursor change is here since pins are read-only for inline discussions. //cursor change is here since pins are read-only for inline discussions.
cursor: default; cursor: default;
} }
...@@ -2522,32 +2522,32 @@ display:none; ...@@ -2522,32 +2522,32 @@ display:none;
opacity: 0.8; opacity: 0.8;
&:hover { &:hover {
@include transition(opacity .2s); @include transition(opacity .2s linear 0s);
opacity: 1.0; opacity: 1.0;
} }
} }
.notflagged .icon .notflagged .icon
{ {
display: block; display: block;
float: left; float: left;
margin: 3px; margin: 3px;
width: 10px; width: 10px;
height: 14px; height: 14px;
padding-right: 3px; padding-right: 3px;
background: transparent url('../images/notflagged.png') no-repeat 0 0; background: transparent url('../images/notflagged.png') no-repeat 0 0;
} }
.flagged .icon .flagged .icon
{ {
display: block; display: block;
float: left; float: left;
margin: 3px; margin: 3px;
width: 10px; width: 10px;
height: 14px; height: 14px;
padding-right: 3px; padding-right: 3px;
background: transparent url('../images/flagged.png') no-repeat 0 0; background: transparent url('../images/flagged.png') no-repeat 0 0;
} }
.flagged span { .flagged span {
...@@ -2558,4 +2558,4 @@ display:none; ...@@ -2558,4 +2558,4 @@ display:none;
.notflagged span { .notflagged span {
color: #888; color: #888;
font-style: italic; font-style: italic;
} }
\ No newline at end of file
lms/static/sass/base/_base.scss
...@@ -64,7 +64,7 @@ p { ...@@ -64,7 +64,7 @@ p {
color: $link-color; color: $link-color;
font: normal 1em/1em $serif; font: normal 1em/1em $serif;
text-decoration: none; text-decoration: none;
@include transition(all, 0.1s, linear); @include transition(all 0.1s linear 0s);
&:hover { &:hover {
color: $link-color; color: $link-color;
...@@ -77,7 +77,7 @@ a:link, a:visited { ...@@ -77,7 +77,7 @@ a:link, a:visited {
color: $link-color; color: $link-color;
font: normal 1em/1em $sans-serif; font: normal 1em/1em $sans-serif;
text-decoration: none; text-decoration: none;
@include transition(all, 0.1s, linear); @include transition(all 0.1s linear 0s);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
...@@ -204,7 +204,7 @@ mark { ...@@ -204,7 +204,7 @@ mark {
max-width: 1140px; max-width: 1140px;
min-width: 720px; min-width: 720px;
margin: auto; margin: auto;
@include border-radius(0 0 3px 3px); border-radius: 0 0 3px 3px;
background: #f4f4e0; background: #f4f4e0;
color: #3c3c3c; color: #3c3c3c;
padding: 5px 20px 8px; padding: 5px 20px 8px;
...@@ -232,7 +232,7 @@ mark { ...@@ -232,7 +232,7 @@ mark {
cursor: pointer; cursor: pointer;
border: 1px solid #ccc; border: 1px solid #ccc;
border-top-style: none; border-top-style: none;
@include border-radius(0px 0px 10px 10px); border-radius: 0px 0px 10px 10px;
background: transparentize(#fff, 0.25); background: transparentize(#fff, 0.25);
color: transparentize(#333, 0.25); color: transparentize(#333, 0.25);
font-weight: bold; font-weight: bold;
...@@ -261,12 +261,12 @@ mark { ...@@ -261,12 +261,12 @@ mark {
&#feedback_link_problem { &#feedback_link_problem {
border-bottom-style: none; border-bottom-style: none;
@include border-radius(10px 10px 0px 0px); border-radius: 10px 10px 0px 0px;
} }
&#feedback_link_question { &#feedback_link_question {
border-top-style: none; border-top-style: none;
@include border-radius(0px 0px 10px 10px); border-radius: 0px 0px 10px 10px;
} }
&:hover { &:hover {
......
lms/static/sass/course/_gradebook.scss
...@@ -2,7 +2,6 @@ $cell-border-color: #e1e1e1; ...@@ -2,7 +2,6 @@ $cell-border-color: #e1e1e1;
$table-border-color: #c8c8c8; $table-border-color: #c8c8c8;
div.gradebook-wrapper { div.gradebook-wrapper {
@extend .table-wrapper;
section.gradebook-content { section.gradebook-content {
@extend .content; @extend .content;
...@@ -24,9 +23,9 @@ div.gradebook-wrapper { ...@@ -24,9 +23,9 @@ div.gradebook-wrapper {
background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6; background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 11px; font-size: 11px;
@include box-shadow(0 1px 4px rgba(0, 0, 0, .12) inset); box-shadow: 0 1px 4px rgba(0, 0, 0, .12) inset;
outline: none; outline: none;
@include transition(border-color .15s); @include transition(border-color .15s linear 0s);
&::-webkit-input-placeholder, &::-webkit-input-placeholder,
&::-moz-input-placeholder { &::-moz-input-placeholder {
......
lms/static/sass/course/_info.scss
div.info-wrapper { div.info-wrapper {
@extend .table-wrapper;
section.updates { section.updates {
@extend .content; @extend .content;
...@@ -67,7 +66,7 @@ div.info-wrapper { ...@@ -67,7 +66,7 @@ div.info-wrapper {
> ol { > ol {
list-style: decimal outside none; list-style: decimal outside none;
padding: 0 0 0 1em; padding: 0 0 0 1em;
} }
li { li {
...@@ -80,9 +79,9 @@ div.info-wrapper { ...@@ -80,9 +79,9 @@ div.info-wrapper {
section.handouts { section.handouts {
@extend .sidebar; @extend .sidebar;
@include border-radius(0 4px 4px 0); border-radius: 0 4px 4px 0;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
@include box-shadow(none); box-shadow: none;
font-size: 14px; font-size: 14px;
&:after { &:after {
...@@ -114,7 +113,7 @@ div.info-wrapper { ...@@ -114,7 +113,7 @@ div.info-wrapper {
&.expandable, &.expandable,
&.collapsable { &.collapsable {
margin: 0 16px 14px 16px; margin: 0 16px 14px 16px;
@include transition(all .2s); @include transition(all .2s linear 0s);
h4 { h4 {
color: $link-color; color: $link-color;
...@@ -128,7 +127,7 @@ div.info-wrapper { ...@@ -128,7 +127,7 @@ div.info-wrapper {
background: #fff; background: #fff;
border-radius: 3px; border-radius: 3px;
padding: 14px 0; padding: 14px 0;
@include box-shadow(0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .25)); box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .25);
h4 { h4 {
margin-bottom: 16px; margin-bottom: 16px;
...@@ -199,7 +198,7 @@ div.info-wrapper { ...@@ -199,7 +198,7 @@ div.info-wrapper {
h3 { h3 {
border-bottom: 0; border-bottom: 0;
@include box-shadow(none); box-shadow: none;
color: #888; color: #888;
font-size: 1em; font-size: 1em;
margin-bottom: 0; margin-bottom: 0;
......
lms/static/sass/course/_profile.scss
div.profile-wrapper { div.profile-wrapper {
@extend .table-wrapper;
color: #000; color: #000;
section.user-info { section.user-info {
@extend .sidebar; @extend .sidebar;
border-left: 1px solid #d3d3d3; border-left: 1px solid #d3d3d3;
@include border-radius(0px 4px 4px 0); border-radius: 0px 4px 4px 0;
border-right: 0; border-right: 0;
&:after { &:after {
...@@ -31,13 +30,13 @@ div.profile-wrapper { ...@@ -31,13 +30,13 @@ div.profile-wrapper {
li { li {
border-bottom: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee); box-shadow: 0 1px 0 #eee;
color: lighten($text-color, 10%); color: lighten($text-color, 10%);
display: block; display: block;
padding: lh(.5) 0 lh(.5) lh(.5); padding: lh(.5) 0 lh(.5) lh(.5);
position: relative; position: relative;
text-decoration: none; text-decoration: none;
@include transition(); @include transition(none);
div#location_sub, div#language_sub { div#location_sub, div#language_sub {
font-weight: bold; font-weight: bold;
...@@ -100,7 +99,7 @@ div.profile-wrapper { ...@@ -100,7 +99,7 @@ div.profile-wrapper {
input#pwd_reset_button { input#pwd_reset_button {
background: none; background: none;
border: none; border: none;
@include box-shadow(none); box-shadow: none;
color: #999; color: #999;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
...@@ -120,7 +119,7 @@ div.profile-wrapper { ...@@ -120,7 +119,7 @@ div.profile-wrapper {
div#change_password_pop { div#change_password_pop {
border-bottom: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee); box-shadow: 0 1px 0 #eee;
color: #4D4D4D; color: #4D4D4D;
padding: 7px lh(); padding: 7px lh();
......
lms/static/sass/course/_textbook.scss
div.book-wrapper { div.book-wrapper {
@extend .table-wrapper;
display: table; display: table;
table-layout: fixed; table-layout: fixed;
padding: 1em 8em; padding: 1em 8em;
#open_close_accordion { #open_close_accordion {
...@@ -39,13 +38,13 @@ div.book-wrapper { ...@@ -39,13 +38,13 @@ div.book-wrapper {
text-align: right; text-align: right;
color: #9a9a9a; color: #9a9a9a;
opacity: 0.0; opacity: 0.0;
@include transition(opacity .15s); @include transition(opacity .15s linear 0s);
} }
li { li {
background: none; background: none;
border-bottom: 0; border-bottom: 0;
padding-left: lh(); padding-left: lh();
a { a {
padding: 0; padding: 0;
...@@ -62,7 +61,7 @@ div.book-wrapper { ...@@ -62,7 +61,7 @@ div.book-wrapper {
div.hitarea { div.hitarea {
background-image: url('../images/treeview-default.gif'); background-image: url('../images/treeview-default.gif');
position: relative; position: relative;
top: 4px; top: 4px;
...@@ -122,7 +121,7 @@ div.book-wrapper { ...@@ -122,7 +121,7 @@ div.book-wrapper {
opacity: 0.0; opacity: 0.0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
text-indent: -9999px; text-indent: -9999px;
@include transition; @include transition(none);
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
...@@ -175,10 +174,10 @@ div.book-wrapper { ...@@ -175,10 +174,10 @@ div.book-wrapper {
text-align: left; text-align: left;
line-height: 1.6em; line-height: 1.6em;
margin: 5px; margin: 5px;
.Paragraph, h2 { .Paragraph, h2 {
margin-top: 10px; margin-top: 10px;
} }
} }
} }
} }
......
lms/static/sass/course/base/_base.scss
...@@ -36,7 +36,7 @@ a { ...@@ -36,7 +36,7 @@ a {
border-radius: 3px; border-radius: 3px;
border: 1px solid $outer-border-color; border: 1px solid $outer-border-color;
background: $container-bg; background: $container-bg;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} }
} }
...@@ -59,8 +59,8 @@ input[type="email"], ...@@ -59,8 +59,8 @@ input[type="email"],
input[type="password"] { input[type="password"] {
background: $white; background: $white;
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
@include border-radius(0); border-radius: 0;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1);
@include box-sizing(border-box); @include box-sizing(border-box);
font: normal 1em $sans-serif; font: normal 1em $sans-serif;
height: 35px; height: 35px;
...@@ -74,7 +74,7 @@ input[type="password"] { ...@@ -74,7 +74,7 @@ input[type="password"] {
&:focus { &:focus {
border-color: lighten($link-color, 20%); border-color: lighten($link-color, 20%);
@include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15)); box-shadow: 0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15);
outline: none; outline: none;
} }
} }
...@@ -115,7 +115,7 @@ img { ...@@ -115,7 +115,7 @@ img {
color: #fff; color: #fff;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
@include transition(opacity .1s); @include transition(opacity .1s linear 0s);
&:after { &:after {
content: '▾'; content: '▾';
......
lms/static/sass/course/base/_extends.scss
...@@ -42,7 +42,7 @@ h1.top-header { ...@@ -42,7 +42,7 @@ h1.top-header {
width: flex-grid(9) + flex-gutter(); width: flex-grid(9) + flex-gutter();
@media print { @media print {
@include box-shadow(none); box-shadow: none;
} }
} }
...@@ -96,7 +96,7 @@ h1.top-header { ...@@ -96,7 +96,7 @@ h1.top-header {
a { a {
display: block; display: block;
text-decoration: none; text-decoration: none;
@include transition(); @include transition(none);
} }
&.active { &.active {
...@@ -143,7 +143,7 @@ h1.top-header { ...@@ -143,7 +143,7 @@ h1.top-header {
a { a {
background: #f6f6f6 url('../images/slide-left-icon.png') center center no-repeat; background: #f6f6f6 url('../images/slide-left-icon.png') center center no-repeat;
border: 1px solid #D3D3D3; border: 1px solid #D3D3D3;
@include border-radius(3px 0 0 3px); border-radius: 3px 0 0 3px;
height: 16px; height: 16px;
padding: 6px; padding: 6px;
position: absolute; position: absolute;
...@@ -185,6 +185,6 @@ h1.top-header { ...@@ -185,6 +185,6 @@ h1.top-header {
} }
.tran { .tran {
@include transition( all, .2s, $ease-in-out-quad); @include transition( all .2s $ease-in-out-quad 0s);
} }
lms/static/sass/course/courseware/_amplifier.scss
...@@ -4,7 +4,7 @@ section.tool-wrapper { ...@@ -4,7 +4,7 @@ section.tool-wrapper {
background: #073642; background: #073642;
border-bottom: 1px solid darken(#002b36, 10%); border-bottom: 1px solid darken(#002b36, 10%);
border-top: 1px solid darken(#002b36, 10%); border-top: 1px solid darken(#002b36, 10%);
@include box-shadow(inset 0 0 0 4px darken(#094959, 2%)); box-shadow: inset 0 0 0 4px darken(#094959, 2%);
color: #839496; color: #839496;
display: table; display: table;
margin: lh() (-(lh())) 0; margin: lh() (-(lh())) 0;
...@@ -20,7 +20,7 @@ section.tool-wrapper { ...@@ -20,7 +20,7 @@ section.tool-wrapper {
.ui-widget-content { .ui-widget-content {
background: none; background: none;
border: none; border: none;
@include border-radius(0); border-radius: 0;
} }
canvas { canvas {
...@@ -30,7 +30,7 @@ section.tool-wrapper { ...@@ -30,7 +30,7 @@ section.tool-wrapper {
ul.ui-tabs-nav { ul.ui-tabs-nav {
background: darken(#073642, 2%); background: darken(#073642, 2%);
border-bottom: 1px solid darken(#073642, 8%); border-bottom: 1px solid darken(#073642, 8%);
@include border-radius(0); border-radius: 0;
margin: (-(lh())) (-(lh())) 0; margin: (-(lh())) (-(lh())) 0;
padding: 0; padding: 0;
position: relative; position: relative;
...@@ -39,7 +39,7 @@ section.tool-wrapper { ...@@ -39,7 +39,7 @@ section.tool-wrapper {
li { li {
background: none; background: none;
border: none; border: none;
@include border-radius(0); border-radius: 0;
color: #fff; color: #fff;
margin-bottom: 0; margin-bottom: 0;
...@@ -76,7 +76,7 @@ section.tool-wrapper { ...@@ -76,7 +76,7 @@ section.tool-wrapper {
@extend .clearfix; @extend .clearfix;
background: darken(#073642, 2%); background: darken(#073642, 2%);
border-right: 1px solid darken(#002b36, 6%); border-right: 1px solid darken(#002b36, 6%);
@include box-shadow(1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%)); box-shadow: 1px 0 0 lighten(#002b36, 6%), inset 0 0 0 4px darken(#094959, 6%);
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
padding: lh(); padding: lh();
...@@ -88,7 +88,7 @@ section.tool-wrapper { ...@@ -88,7 +88,7 @@ section.tool-wrapper {
div.music-wrapper { div.music-wrapper {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%); border-bottom: 1px solid darken(#073642, 10%);
@include box-shadow(0 1px 0 lighten(#073642, 2%)); box-shadow: 0 1px 0 lighten(#073642, 2%);
margin-bottom: lh(); margin-bottom: lh();
padding: 0 0 lh(); padding: 0 0 lh();
...@@ -101,7 +101,7 @@ section.tool-wrapper { ...@@ -101,7 +101,7 @@ section.tool-wrapper {
margin-top: 19px; margin-top: 19px;
&:active { &:active {
@include box-shadow(none); box-shadow: none;
} }
&[value="Stop"] { &[value="Stop"] {
...@@ -109,7 +109,7 @@ section.tool-wrapper { ...@@ -109,7 +109,7 @@ section.tool-wrapper {
font: bold 14px $body-font-family; font: bold 14px $body-font-family;
&:active { &:active {
@include box-shadow(none); box-shadow: none;
} }
} }
} }
...@@ -118,7 +118,7 @@ section.tool-wrapper { ...@@ -118,7 +118,7 @@ section.tool-wrapper {
div.inputs-wrapper { div.inputs-wrapper {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%); border-bottom: 1px solid darken(#073642, 10%);
@include box-shadow(0 1px 0 lighten(#073642, 2%)); box-shadow: 0 1px 0 lighten(#073642, 2%);
@include clearfix; @include clearfix;
margin-bottom: lh(); margin-bottom: lh();
margin-bottom: lh(); margin-bottom: lh();
...@@ -159,7 +159,7 @@ section.tool-wrapper { ...@@ -159,7 +159,7 @@ section.tool-wrapper {
} }
label { label {
@include border-radius(2px); border-radius: 2px;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
padding: 3px; padding: 3px;
...@@ -193,7 +193,7 @@ section.tool-wrapper { ...@@ -193,7 +193,7 @@ section.tool-wrapper {
div.top-sliders { div.top-sliders {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid darken(#073642, 10%); border-bottom: 1px solid darken(#073642, 10%);
@include box-shadow(0 1px 0 lighten(#073642, 2%)); box-shadow: 0 1px 0 lighten(#073642, 2%);
margin-bottom: lh(); margin-bottom: lh();
padding: 0 0 lh(); padding: 0 0 lh();
...@@ -226,14 +226,14 @@ section.tool-wrapper { ...@@ -226,14 +226,14 @@ section.tool-wrapper {
&.ui-slider-horizontal { &.ui-slider-horizontal {
background: darken(#002b36, 2%); background: darken(#002b36, 2%);
border: 1px solid darken(#002b36, 8%); border: 1px solid darken(#002b36, 8%);
@include box-shadow(none); box-shadow: none;
height: 0.4em; height: 0.4em;
} }
.ui-slider-handle { .ui-slider-handle {
background: lighten( #586e75, 5% ) url('../images/amplifier-slider-handle.png') center no-repeat; background: lighten( #586e75, 5% ) url('../images/amplifier-slider-handle.png') center no-repeat;
border: 1px solid darken(#002b36, 8%); border: 1px solid darken(#002b36, 8%);
@include box-shadow(inset 0 1px 0 lighten( #586e75, 20% )); box-shadow: inset 0 1px 0 lighten( #586e75, 20% );
margin-top: -.3em; margin-top: -.3em;
&:hover, &:active { &:hover, &:active {
......
lms/static/sass/course/courseware/_courseware.scss
...@@ -4,7 +4,6 @@ html { ...@@ -4,7 +4,6 @@ html {
} }
div.course-wrapper { div.course-wrapper {
@extend .table-wrapper;
section.course-content { section.course-content {
@extend .content; @extend .content;
...@@ -47,7 +46,6 @@ div.course-wrapper { ...@@ -47,7 +46,6 @@ div.course-wrapper {
> li { > li {
@extend .clearfix; @extend .clearfix;
@extend .problem-set;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 0 15px; padding: 0 0 15px;
...@@ -62,7 +60,7 @@ div.course-wrapper { ...@@ -62,7 +60,7 @@ div.course-wrapper {
header { header {
@extend h1.top-header; @extend h1.top-header;
@include border-radius(0 4px 0 0); border-radius: 0 4px 0 0;
margin-bottom: -16px; margin-bottom: -16px;
border-bottom: 0; border-bottom: 0;
...@@ -169,7 +167,7 @@ div.course-wrapper { ...@@ -169,7 +167,7 @@ div.course-wrapper {
div.ui-tabs { div.ui-tabs {
border: 0; border: 0;
@include border-radius(0); border-radius: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -180,7 +178,7 @@ div.course-wrapper { ...@@ -180,7 +178,7 @@ div.course-wrapper {
} }
.ui-tabs-panel { .ui-tabs-panel {
@include border-radius(0); border-radius: 0;
padding: 0; padding: 0;
} }
} }
......
lms/static/sass/course/courseware/_sidebar.scss
section.course-index { section.course-index {
@extend .sidebar; @extend .sidebar;
@extend .tran; @extend .tran;
@include border-radius(3px 0 0 3px); border-radius: 3px 0 0 3px;
border-right: 1px solid $border-color-2; border-right: 1px solid $border-color-2;
#open_close_accordion { #open_close_accordion {
...@@ -21,7 +21,7 @@ section.course-index { ...@@ -21,7 +21,7 @@ section.course-index {
font-size: 14px; font-size: 14px;
h3 { h3 {
@include border-radius(0); border-radius: 0;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
...@@ -44,8 +44,8 @@ section.course-index { ...@@ -44,8 +44,8 @@ section.course-index {
color: #000; color: #000;
a { a {
@include border-radius(0); border-radius: 0;
@include box-shadow(none); box-shadow: none;
padding-left: 19px; padding-left: 19px;
} }
...@@ -72,8 +72,8 @@ section.course-index { ...@@ -72,8 +72,8 @@ section.course-index {
padding: 11px 14px; padding: 11px 14px;
@include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom); @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
background-color: $sidebar-chapter-bg; background-color: $sidebar-chapter-bg;
@include box-shadow(0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset); box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset;
@include transition(background-color .1s); @include transition(background-color .1s linear 0s);
&.is-open { &.is-open {
background: #fff; background: #fff;
...@@ -85,7 +85,7 @@ section.course-index { ...@@ -85,7 +85,7 @@ section.course-index {
&:last-child { &:last-child {
border-radius: 0 0 0 3px; border-radius: 0 0 0 3px;
@include box-shadow(0 1px 0 #fff inset); box-shadow: 0 1px 0 #fff inset;
} }
&:hover { &:hover {
...@@ -96,7 +96,7 @@ section.course-index { ...@@ -96,7 +96,7 @@ section.course-index {
ul.ui-accordion-content { ul.ui-accordion-content {
background: transparent; background: transparent;
border: none; border: none;
@include border-radius(0); border-radius: 0;
margin: 0; margin: 0;
padding: 9px 0 9px 9px; padding: 9px 0 9px 9px;
overflow: auto; overflow: auto;
...@@ -104,12 +104,12 @@ section.course-index { ...@@ -104,12 +104,12 @@ section.course-index {
li { li {
border-bottom: 0; border-bottom: 0;
@include border-radius(0); border-radius: 0;
margin-bottom: 4px; margin-bottom: 4px;
a { a {
background: transparent; background: transparent;
@include border-radius(4px); border-radius: 4px;
display: block; display: block;
padding: 5px 36px 5px 10px; padding: 5px 36px 5px 10px;
position: relative; position: relative;
...@@ -143,7 +143,7 @@ section.course-index { ...@@ -143,7 +143,7 @@ section.course-index {
} }
&:active { &:active {
@include box-shadow(inset 0 1px 14px 0 rgba(0,0,0, 0.1)); box-shadow: inset 0 1px 14px 0 rgba(0,0,0, 0.1);
&:after { &:after {
opacity: 1.0; opacity: 1.0;
...@@ -165,12 +165,12 @@ section.course-index { ...@@ -165,12 +165,12 @@ section.course-index {
font-weight: normal; font-weight: normal;
color: #333; color: #333;
opacity: 0; opacity: 0;
@include transition(); @include transition(none);
} }
> a { > a {
border: 1px solid $border-color-1; border: 1px solid $border-color-1;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .35) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
background: $sidebar-active-image; background: $sidebar-active-image;
&:after { &:after {
......
lms/static/sass/course/instructor/_instructor.scss
.instructor-dashboard-wrapper { .instructor-dashboard-wrapper {
@extend .table-wrapper;
display: table; display: table;
section.instructor-dashboard-content { section.instructor-dashboard-content {
......
lms/static/sass/course/layout/_calculator.scss
...@@ -2,7 +2,7 @@ div.calc-main { ...@@ -2,7 +2,7 @@ div.calc-main {
bottom: -126px; bottom: -126px;
left: 0; left: 0;
position: fixed; position: fixed;
@include transition(bottom); @include transition(bottom 0.75s linear 0s);
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
z-index: 99; z-index: 99;
...@@ -14,7 +14,7 @@ div.calc-main { ...@@ -14,7 +14,7 @@ div.calc-main {
a.calc { a.calc {
background: url("../images/calc-icon.png") rgba(#111, .9) no-repeat center; background: url("../images/calc-icon.png") rgba(#111, .9) no-repeat center;
border-bottom: 0; border-bottom: 0;
@include border-radius(3px 3px 0 0); border-radius: 3px 3px 0 0;
color: #fff; color: #fff;
float: right; float: right;
height: 20px; height: 20px;
...@@ -51,8 +51,8 @@ div.calc-main { ...@@ -51,8 +51,8 @@ div.calc-main {
input#calculator_button { input#calculator_button {
background: #111; background: #111;
border: 1px solid #000; border: 1px solid #000;
@include border-radius(0); border-radius: 0;
@include box-shadow(none); box-shadow: none;
@include box-sizing(border-box); @include box-sizing(border-box);
color: #fff; color: #fff;
float: left; float: left;
...@@ -73,7 +73,7 @@ div.calc-main { ...@@ -73,7 +73,7 @@ div.calc-main {
input#calculator_output { input#calculator_output {
background: #111; background: #111;
border: 0; border: 0;
@include box-shadow(none); box-shadow: none;
@include box-sizing(border-box); @include box-sizing(border-box);
color: #fff; color: #fff;
float: left; float: left;
...@@ -94,7 +94,7 @@ div.calc-main { ...@@ -94,7 +94,7 @@ div.calc-main {
input#calculator_input { input#calculator_input {
border: none; border: none;
@include box-shadow(none); box-shadow: none;
@include box-sizing(border-box); @include box-sizing(border-box);
font-size: 16px; font-size: 16px;
padding: 10px; padding: 10px;
...@@ -121,8 +121,8 @@ div.calc-main { ...@@ -121,8 +121,8 @@ div.calc-main {
dl { dl {
background: #fff; background: #fff;
@include border-radius(3px); border-radius: 3px;
@include box-shadow(0 0 3px #999); box-shadow: 0 0 3px #999;
color: #333; color: #333;
display: none; display: none;
line-height: lh(); line-height: lh();
...@@ -131,7 +131,7 @@ div.calc-main { ...@@ -131,7 +131,7 @@ div.calc-main {
position: absolute; position: absolute;
right: -40px; right: -40px;
top: -122px; top: -122px;
@include transition(); @include transition(none);
width: 600px; width: 600px;
&.shown { &.shown {
......
lms/static/sass/course/layout/_courseware_header.scss
...@@ -43,7 +43,7 @@ nav.course-material { ...@@ -43,7 +43,7 @@ nav.course-material {
// background: rgba(0, 0, 0, .2); // background: rgba(0, 0, 0, .2);
@include linear-gradient(top, rgba(0, 0, 0, .4), rgba(0, 0, 0, .25)); @include linear-gradient(top, rgba(0, 0, 0, .4), rgba(0, 0, 0, .25));
background-color: transparent; background-color: transparent;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .3) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .3) inset;
color: #fff; color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .4); text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
} }
...@@ -61,7 +61,7 @@ nav.course-material { ...@@ -61,7 +61,7 @@ nav.course-material {
} }
header.global.slim { header.global.slim {
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
height: auto; height: auto;
padding: 5px 0 10px 0; padding: 5px 0 10px 0;
border-bottom: 1px solid $outer-border-color; border-bottom: 1px solid $outer-border-color;
...@@ -79,9 +79,9 @@ header.global.slim { ...@@ -79,9 +79,9 @@ header.global.slim {
@include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%)); @include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
border: 1px solid transparent; border: 1px solid transparent;
border-color: darken($link-color, 10%); border-color: darken($link-color, 10%);
@include border-radius(3px); border-radius: 3px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
color: #fff; color: #fff;
display: inline-block; display: inline-block;
font-family: $sans-serif; font-family: $sans-serif;
......
lms/static/sass/course/wiki/_create.scss
...@@ -35,7 +35,7 @@ form#wiki_revision { ...@@ -35,7 +35,7 @@ form#wiki_revision {
#submit_delete { #submit_delete {
background: none; background: none;
border: none; border: none;
@include box-shadow(none); box-shadow: none;
color: #999; color: #999;
float: right; float: right;
font-weight: normal; font-weight: normal;
......
lms/static/sass/course/wiki/_wiki.scss
...@@ -41,10 +41,10 @@ section.wiki { ...@@ -41,10 +41,10 @@ section.wiki {
a { a {
float: left; float: left;
display: block; display: block;
overflow: hidden; overflow: hidden;
height: 30px; height: 30px;
line-height: 31px; line-height: 31px;
max-width: 200px; max-width: 200px;
height: 100%; height: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -56,7 +56,7 @@ section.wiki { ...@@ -56,7 +56,7 @@ section.wiki {
display: inline; display: inline;
margin-left: 10px; margin-left: 10px;
color: $base-font-color; color: $base-font-color;
height: 30px; height: 30px;
line-height: 31px; line-height: 31px;
} }
} }
...@@ -106,7 +106,7 @@ section.wiki { ...@@ -106,7 +106,7 @@ section.wiki {
font-family: $sans-serif; font-family: $sans-serif;
font-size: 12px; font-size: 12px;
outline: none; outline: none;
@include transition(border-color .1s); @include transition(border-color .1s linear 0s);
&:-webkit-input-placholder { &:-webkit-input-placholder {
font-style: italic; font-style: italic;
...@@ -208,7 +208,7 @@ section.wiki { ...@@ -208,7 +208,7 @@ section.wiki {
background-color: $sidebar-color; background-color: $sidebar-color;
padding: 9px; padding: 9px;
margin: 10px 0; margin: 10px 0;
@include border-radius(5px); border-radius: 5px;
ul { ul {
margin: 0; margin: 0;
...@@ -234,7 +234,7 @@ section.wiki { ...@@ -234,7 +234,7 @@ section.wiki {
.timestamp{ .timestamp{
margin-top: 15px; margin-top: 15px;
padding: 15px 0 0 10px; padding: 15px 0 0 10px;
border-top: 1px solid $light-gray; border-top: 1px solid $light-gray;
.label { .label {
font-size: 0.7em; font-size: 0.7em;
...@@ -406,7 +406,7 @@ section.wiki { ...@@ -406,7 +406,7 @@ section.wiki {
.CodeMirror { .CodeMirror {
background: #fafafa; background: #fafafa;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
@include box-shadow(0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1)); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
} }
.CodeMirror-scroll { .CodeMirror-scroll {
...@@ -417,7 +417,7 @@ section.wiki { ...@@ -417,7 +417,7 @@ section.wiki {
position: relative; position: relative;
canvas { canvas {
@include box-shadow(0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .2)); box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .2);
} }
&:before { &:before {
...@@ -536,13 +536,13 @@ section.wiki { ...@@ -536,13 +536,13 @@ section.wiki {
.modal-header { .modal-header {
h1, p { h1, p {
color: #fff; color: #fff;
} }
h1 { h1 {
margin: 3px 12px 8px; margin: 3px 12px 8px;
font-size: 1.1em; font-size: 1.1em;
} }
p { p {
font-size: 0.9em; font-size: 0.9em;
...@@ -610,10 +610,10 @@ section.wiki { ...@@ -610,10 +610,10 @@ section.wiki {
border: 1px solid #ccc; border: 1px solid #ccc;
@include linear-gradient(top, #eee, #d2d2d2); @include linear-gradient(top, #eee, #d2d2d2);
font-size: 22px; font-size: 22px;
line-height: 28px; line-height: 28px;
color: #333; color: #333;
text-align: center; text-align: center;
@include box-shadow(0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2)); box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2);
} }
} }
...@@ -688,7 +688,7 @@ section.wiki { ...@@ -688,7 +688,7 @@ section.wiki {
overflow-x: scroll; overflow-x: scroll;
table { table {
min-width: 100%; min-width: 100%;
} }
th { th {
...@@ -798,7 +798,7 @@ section.wiki { ...@@ -798,7 +798,7 @@ section.wiki {
background-color: $sidebar-color; background-color: $sidebar-color;
padding: 9px; padding: 9px;
margin: 0 -9px 20px; margin: 0 -9px 20px;
@include border-radius(5px); border-radius: 5px;
.well-small { .well-small {
@include clearfix; @include clearfix;
...@@ -837,7 +837,7 @@ section.wiki { ...@@ -837,7 +837,7 @@ section.wiki {
padding: 8px; padding: 8px;
overflow: hidden; overflow: hidden;
} }
a.list-children { a.list-children {
margin-left: 3px; margin-left: 3px;
} }
...@@ -858,7 +858,7 @@ section.wiki { ...@@ -858,7 +858,7 @@ section.wiki {
.attachment-options { .attachment-options {
height: 40px; height: 40px;
margin: 40px 0 30px; margin: 40px 0 30px;
} }
.attachment-list { .attachment-list {
...@@ -871,7 +871,7 @@ section.wiki { ...@@ -871,7 +871,7 @@ section.wiki {
margin-bottom: 15px; margin-bottom: 15px;
border: 1px solid #DDD; border: 1px solid #DDD;
background: #F9F9F9; background: #F9F9F9;
@include border-radius(5px); border-radius: 5px;
} }
header, header,
...@@ -881,7 +881,7 @@ section.wiki { ...@@ -881,7 +881,7 @@ section.wiki {
.attachment-details { .attachment-details {
background: #eee; background: #eee;
@include border-radius(0 0 5px 5px); border-radius: 0 0 5px 5px;
} }
h3 { h3 {
...@@ -987,7 +987,7 @@ section.wiki { ...@@ -987,7 +987,7 @@ section.wiki {
overflow: hidden; overflow: hidden;
background: $pink; background: $pink;
padding: lh(); padding: lh();
@include box-shadow(inset 0 0 0 1px lighten($pink, 10%)); box-shadow: inset 0 0 0 1px lighten($pink, 10%);
border: 1px solid darken($pink, 15%); border: 1px solid darken($pink, 15%);
p { p {
...@@ -1002,7 +1002,7 @@ section.wiki { ...@@ -1002,7 +1002,7 @@ section.wiki {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
font-size: em(18); font-size: em(18);
@include transition; @include transition(none);
text-align: center; text-align: center;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
...@@ -1046,13 +1046,13 @@ section.wiki { ...@@ -1046,13 +1046,13 @@ section.wiki {
.modal-header { .modal-header {
h1, p { h1, p {
color: #fff; color: #fff;
} }
h1 { h1 {
margin: 3px 12px 8px; margin: 3px 12px 8px;
font-size: 1.1em; font-size: 1.1em;
} }
p { p {
font-size: 0.9em; font-size: 0.9em;
...@@ -1086,7 +1086,7 @@ section.wiki { ...@@ -1086,7 +1086,7 @@ section.wiki {
@include button; @include button;
font-size: 0.8em; font-size: 0.8em;
} }
margin-right: 10px; margin-right: 10px;
} }
} }
lms/static/sass/ie.scss
...@@ -65,7 +65,7 @@ header.global { ...@@ -65,7 +65,7 @@ header.global {
} }
.home .university-partners .partners { .home .university-partners .partners {
width: 660px; width: 660px;
li.partner { li.partner {
...@@ -118,7 +118,7 @@ header.global { ...@@ -118,7 +118,7 @@ header.global {
&:hover { &:hover {
background: rgb(245,245,245); background: rgb(245,245,245);
border-color: rgb(170,170,170); border-color: rgb(170,170,170);
@include box-shadow(0 1px 16px 0 rgba($blue, 0.4)); box-shadow: 0 1px 16px 0 rgba($blue, 0.4);
.info { .info {
top: 0; top: 0;
......
lms/static/sass/multicourse/_about_pages.scss
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
letter-spacing: 1px; letter-spacing: 1px;
margin: 0px 15px; margin: 0px 15px;
padding: 20px 10px; padding: 20px 10px;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
text-transform: lowercase; text-transform: lowercase;
&:hover, &.active { &:hover, &.active {
......
lms/static/sass/multicourse/_account.scss
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
// specific examples - buttons // specific examples - buttons
.button-primary { .button-primary {
@include border-radius(0); border-radius: 0;
@include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%); @include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%);
display: inline-block; display: inline-block;
padding: $baseline/2 $baseline*2.5; padding: $baseline/2 $baseline*2.5;
...@@ -139,7 +139,7 @@ ...@@ -139,7 +139,7 @@
} }
a { a {
@include transition(color 0.15s ease-in-out, border 0.15s ease-in-out); @include transition(color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s);
&:link, &:visited, &:hover, &:active { &:link, &:visited, &:hover, &:active {
color: $link-color-d1; color: $link-color-d1;
...@@ -249,7 +249,7 @@ ...@@ -249,7 +249,7 @@
// elements // elements
label, input, textarea { label, input, textarea {
@include border-radius(0); border-radius: 0;
display: block; display: block;
height: auto; height: auto;
font-family: $sans-serif; font-family: $sans-serif;
...@@ -259,13 +259,13 @@ ...@@ -259,13 +259,13 @@
} }
label { label {
@include transition(color 0.15s ease-in-out); @include transition(color 0.15s ease-in-out 0s);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
color: tint($black, 20%); color: tint($black, 20%);
} }
.tip { .tip {
@include transition(color 0.15s ease-in-out); @include transition(color 0.15s ease-in-out 0s);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -447,7 +447,7 @@ ...@@ -447,7 +447,7 @@
} }
.submission-error, .system-error { .submission-error, .system-error {
@include box-shadow(inset 0 -1px 2px 0 tint($red, 85%)); box-shadow: inset 0 -1px 2px 0 tint($red, 85%);
border-bottom: 3px solid shade($red, 10%); border-bottom: 3px solid shade($red, 10%);
background: tint($red,95%); background: tint($red,95%);
...@@ -539,11 +539,11 @@ ...@@ -539,11 +539,11 @@
// modal password reset form // modal password reset form
#forgot-password-modal { #forgot-password-modal {
@include border-radius(2px); border-radius: 2px;
.inner-wrapper { .inner-wrapper {
@include border-radius(2px); border-radius: 2px;
background: $body-bg; background: $body-bg;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
...@@ -579,8 +579,8 @@ ...@@ -579,8 +579,8 @@
} }
form { form {
@include border-radius(0); border-radius: 0;
@include box-shadow(none); box-shadow: none;
margin: 0; margin: 0;
border: none; border: none;
padding: 0; padding: 0;
...@@ -610,7 +610,7 @@ ...@@ -610,7 +610,7 @@
.modal-form-error { .modal-form-error {
@extend .body-text; @extend .body-text;
@include box-shadow(inset 0 -1px 2px 0 tint($red, 85%)); box-shadow: inset 0 -1px 2px 0 tint($red, 85%);
@include box-sizing(border-box); @include box-sizing(border-box);
margin: $baseline 0 ($baseline/2) 0 !important; margin: $baseline 0 ($baseline/2) 0 !important;
padding: $baseline; padding: $baseline;
......
lms/static/sass/multicourse/_course_about.scss
...@@ -7,9 +7,9 @@ ...@@ -7,9 +7,9 @@
background: $course-profile-bg; background: $course-profile-bg;
@include background-image(url($homepage-bg-image)); @include background-image(url($homepage-bg-image));
background-size: cover; background-size: cover;
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5)); box-shadow: 0 1px 80px 0 rgba(0,0,0, 0.5);
border-bottom: 1px solid $border-color-3; border-bottom: 1px solid $border-color-3;
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); box-shadow: inset 0 1px 5px 0 rgba(0,0,0, 0.1);
height: 280px; height: 280px;
margin-top: $header_image_margin; margin-top: $header_image_margin;
padding-top: 150px; padding-top: 150px;
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.intro-inner-wrapper { .intro-inner-wrapper {
background: $course-header-bg; background: $course-header-bg;
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
margin: 0 auto; margin: 0 auto;
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
> hgroup { > hgroup {
border-bottom: 1px solid $border-color-2; border-bottom: 1px solid $border-color-2;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 20px; padding-bottom: 20px;
width: 100%; width: 100%;
...@@ -95,13 +95,13 @@ ...@@ -95,13 +95,13 @@
@include clearfix; @include clearfix;
float: left; float: left;
margin-right: flex-gutter(); margin-right: flex-gutter();
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
width: flex-grid(12); width: flex-grid(12);
> a.find-courses, a.register { > a.find-courses, a.register {
@include button(shiny, $button-color); @include button(shiny, $button-color);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); border-radius: 3px;
display: block; display: block;
font: normal 1.2rem/1.6rem $sans-serif; font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
...@@ -124,7 +124,7 @@ ...@@ -124,7 +124,7 @@
strong { strong {
@include button(shiny, $button-color); @include button(shiny, $button-color);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); border-radius: 3px;
display: block; display: block;
float: left; float: left;
font: normal 1.2rem/1.6rem $sans-serif; font: normal 1.2rem/1.6rem $sans-serif;
...@@ -151,7 +151,7 @@ ...@@ -151,7 +151,7 @@
text-align: center; text-align: center;
float: left; float: left;
margin: 1px flex-gutter(8) 0 0; margin: 1px flex-gutter(8) 0 0;
@include transition(); @include transition(none);
width: flex-grid(5, 8); width: flex-grid(5, 8);
} }
...@@ -183,8 +183,8 @@ ...@@ -183,8 +183,8 @@
.play-intro { .play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
@include border-radius(4px); border-radius: 4px;
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4)); box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.4);
border: 2px solid rgba(255,255,255, 0.8); border: 2px solid rgba(255,255,255, 0.8);
height: 80px; height: 80px;
left: 50%; left: 50%;
...@@ -219,7 +219,7 @@ ...@@ -219,7 +219,7 @@
.play-intro { .play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8))); @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.5)); box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
border-color: rgba(255,255,255, 0.9); border-color: rgba(255,255,255, 0.9);
&::after { &::after {
...@@ -350,7 +350,7 @@ ...@@ -350,7 +350,7 @@
width: flex-grid(4); width: flex-grid(4);
> section { > section {
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15)); box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
&.course-summary { &.course-summary {
...@@ -438,8 +438,8 @@ ...@@ -438,8 +438,8 @@
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%, @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
rgba(0,0,0, 0.7) 100%)); rgba(0,0,0, 0.7) 100%));
border: 1px solid rgba(0,0,0, 0.5); border: 1px solid rgba(0,0,0, 0.5);
@include border-radius(4px); border-radius: 4px;
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
@include box-sizing(border-box); @include box-sizing(border-box);
color: rgb(255,255,255); color: rgb(255,255,255);
float: right; float: right;
...@@ -452,7 +452,7 @@ ...@@ -452,7 +452,7 @@
padding: 6px 10px; padding: 6px 10px;
position: absolute; position: absolute;
text-align: center; text-align: center;
@include transition(all, 0.15s, ease-out); @include transition(all 0.15s ease-out 0s);
top: 65px; top: 65px;
width: 220px; width: 220px;
...@@ -466,7 +466,7 @@ ...@@ -466,7 +466,7 @@
@include inline-block; @include inline-block;
margin-right: 10px; margin-right: 10px;
opacity: 0.5; opacity: 0.5;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
width: 44px; width: 44px;
&:hover { &:hover {
...@@ -530,7 +530,7 @@ ...@@ -530,7 +530,7 @@
height: 19px; height: 19px;
margin: 2px 10px 0 0; margin: 2px 10px 0 0;
opacity: 0.6; opacity: 0.6;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
width: 19px; width: 19px;
&.start { &.start {
......
lms/static/sass/multicourse/_courses.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
@include background-image(url($homepage-bg-image)); @include background-image(url($homepage-bg-image));
background-position: center top !important; background-position: center top !important;
border-bottom: 1px solid $border-color-3; 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)); 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; height: 430px;
margin-top: $header_image_margin; margin-top: $header_image_margin;
width: 100%; width: 100%;
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
background: #FFF; background: #FFF;
background: $course-header-bg; background: $course-header-bg;
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
padding: 20px 30px; padding: 20px 30px;
position: relative; position: relative;
z-index: 2; z-index: 2;
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.dashboard-banner { .dashboard-banner {
background: $yellow; background: $yellow;
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
padding: 10px; padding: 10px;
margin-bottom: 30px; margin-bottom: 30px;
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
@include background-image($dashboard-profile-header-image); @include background-image($dashboard-profile-header-image);
background-color: $dashboard-profile-header-color; background-color: $dashboard-profile-header-color;
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
@include border-radius(4px); border-radius: 4px;
@include box-sizing(border-box); @include box-sizing(border-box);
width: flex-grid(12); width: flex-grid(12);
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
border-top: none; border-top: none;
//@include border-bottom-radius(4px); //@include border-bottom-radius(4px);
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15)); box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
@include clearfix; @include clearfix;
margin: 0px; margin: 0px;
padding: 20px 10px 10px; padding: 20px 10px 10px;
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
height: 19px; height: 19px;
margin: 0 6px 0 0; margin: 0 6px 0 0;
opacity: 0.6; opacity: 0.6;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
width: 19px; width: 19px;
&.email-icon { &.email-icon {
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
margin: 30px 10px 0; margin: 30px 10px 0;
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
background: $dashboard-profile-color; background: $dashboard-profile-color;
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15)); box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
* { * {
font-family: $sans-serif; font-family: $sans-serif;
...@@ -250,8 +250,8 @@ ...@@ -250,8 +250,8 @@
@include background-image($button-bg-image); @include background-image($button-bg-image);
background-color: $button-bg-color; background-color: $button-bg-color;
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
@include border-radius(4px); border-radius: 4px;
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1)); box-shadow: 0 1px 8px 0 rgba(0,0,0, 0.1);
@include box-sizing(border-box); @include box-sizing(border-box);
color: $base-font-color; color: $base-font-color;
font-family: $sans-serif; font-family: $sans-serif;
...@@ -278,13 +278,13 @@ ...@@ -278,13 +278,13 @@
position: relative; position: relative;
width: flex-grid(12); width: flex-grid(12);
z-index: 20; z-index: 20;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
&:last-child { &:last-child {
margin-bottom: none; margin-bottom: none;
} }
.cover { .cover {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; float: left;
height: 100%; height: 100%;
...@@ -292,7 +292,7 @@ ...@@ -292,7 +292,7 @@
margin: 0px; margin: 0px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
width: 200px; width: 200px;
height: 120px; height: 120px;
...@@ -346,7 +346,7 @@ ...@@ -346,7 +346,7 @@
.course-status { .course-status {
background: $yellow; background: $yellow;
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-top: 17px; margin-top: 17px;
margin-right: flex-gutter(); margin-right: flex-gutter();
padding: 5px; padding: 5px;
...@@ -378,7 +378,7 @@ ...@@ -378,7 +378,7 @@
.enter-course { .enter-course {
@include button(simple, $button-color); @include button(simple, $button-color);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); border-radius: 3px;
display: block; display: block;
float: left; float: left;
font: normal 15px/1.6rem $sans-serif; font: normal 15px/1.6rem $sans-serif;
...@@ -406,7 +406,7 @@ ...@@ -406,7 +406,7 @@
.message-status { .message-status {
@include clearfix; @include clearfix;
@include border-radius(3px); border-radius: 3px;
display: none; display: none;
z-index: 10; z-index: 10;
margin: 20px 0 10px; margin: 20px 0 10px;
...@@ -431,7 +431,7 @@ ...@@ -431,7 +431,7 @@
strong { strong {
font-weight: 700; font-weight: 700;
a { a {
font-weight: 700; font-weight: 700;
} }
...@@ -454,7 +454,7 @@ ...@@ -454,7 +454,7 @@
.btn { .btn {
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); border-radius: 3px;
float: left; float: left;
font: normal 0.8rem/1.2rem $sans-serif; font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
......
lms/static/sass/multicourse/_edge.scss
...@@ -13,8 +13,8 @@ $paleYellow: #fffcf1; ...@@ -13,8 +13,8 @@ $paleYellow: #fffcf1;
font-weight: 700; font-weight: 700;
text-transform: none; text-transform: none;
letter-spacing: 0; letter-spacing: 0;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
@include transition(background-color .15s, box-shadow .15s); @include transition(background-color .15s linear 0s, box-shadow .15s linear 0s);
&.disabled { &.disabled {
border: 1px solid $lightGrey !important; border: 1px solid $lightGrey !important;
...@@ -29,7 +29,7 @@ $paleYellow: #fffcf1; ...@@ -29,7 +29,7 @@ $paleYellow: #fffcf1;
} }
&:hover { &:hover {
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15)); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
text-decoration: none; text-decoration: none;
} }
} }
...@@ -54,7 +54,7 @@ $paleYellow: #fffcf1; ...@@ -54,7 +54,7 @@ $paleYellow: #fffcf1;
border-radius: 3px; border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: #d1dae3; background-color: #d1dae3;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
color: #6d788b; color: #6d788b;
&:hover { &:hover {
...@@ -63,7 +63,7 @@ $paleYellow: #fffcf1; ...@@ -63,7 +63,7 @@ $paleYellow: #fffcf1;
} }
} }
.edge-landing { .edge-landing {
border-top: 5px solid $blue; border-top: 5px solid $blue;
header { header {
...@@ -85,7 +85,7 @@ $paleYellow: #fffcf1; ...@@ -85,7 +85,7 @@ $paleYellow: #fffcf1;
background: #fff; background: #fff;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 3px; border-radius: 3px;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
@include clearfix; @include clearfix;
} }
...@@ -257,4 +257,4 @@ $paleYellow: #fffcf1; ...@@ -257,4 +257,4 @@ $paleYellow: #fffcf1;
color: #fff; color: #fff;
} }
} }
} }
\ No newline at end of file
lms/static/sass/multicourse/_home.scss
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
@include background-image(url($homepage-bg-image)); @include background-image(url($homepage-bg-image));
background-size: cover; background-size: cover;
border-bottom: 1px solid $border-color-3; border-bottom: 1px solid $border-color-3;
@include box-shadow(0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 rgba(0,0,0, 0.1)); box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 rgba(0,0,0, 0.1);
@include clearfix; @include clearfix;
height: 460px; height: 460px;
overflow: hidden; overflow: hidden;
...@@ -33,14 +33,14 @@ ...@@ -33,14 +33,14 @@
background: #FFF; background: #FFF;
background: $course-header-bg; background: $course-header-bg;
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
@include box-sizing(border-box); @include box-sizing(border-box);
min-height: 120px; min-height: 120px;
margin-left: grid-width(2) + $gw-gutter; margin-left: grid-width(2) + $gw-gutter;
width: flex-grid(6); width: flex-grid(6);
float: left; float: left;
position: relative; position: relative;
@include transition(all, 0.2s, linear); @include transition(all 0.2s linear 0s);
vertical-align: top; vertical-align: top;
&:hover { &:hover {
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
opacity: 1.0; opacity: 1.0;
padding: 20px 30px; padding: 20px 30px;
top: 0px; top: 0px;
@include transition(all, 0.2s, linear); @include transition(all 0.2s linear 0s);
text-align: left; text-align: left;
h1 { h1 {
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
border-left: 0; border-left: 0;
@include box-sizing(border-box); @include box-sizing(border-box);
// @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); // box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
height: 120px; height: 120px;
float: left; float: left;
padding: 4px; padding: 4px;
...@@ -102,12 +102,12 @@ ...@@ -102,12 +102,12 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: url($video-thumb-url) center no-repeat; background: url($video-thumb-url) center no-repeat;
@include background-size(cover); background-size: cover;
.play-intro { .play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
@include border-radius(4px); border-radius: 4px;
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4)); box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.4);
@include box-sizing(border-box); @include box-sizing(border-box);
border: 2px solid rgba(255,255,255, 0.8); border: 2px solid rgba(255,255,255, 0.8);
height: 60px; height: 60px;
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
margin-left: -30px; margin-left: -30px;
position: absolute; position: absolute;
top: 50%; top: 50%;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
width: 60px; width: 60px;
&::after { &::after {
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
&:hover { &:hover {
.play-intro { .play-intro {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8))); @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.5)); box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
border-color: rgba(255,255,255, 0.9); border-color: rgba(255,255,255, 0.9);
&::after { &::after {
...@@ -165,9 +165,9 @@ ...@@ -165,9 +165,9 @@
> h2 { > h2 {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230))); @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
@include border-radius(4px); border-radius: 4px;
border-top-color: $border-color-1; border-top-color: $border-color-1;
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2)); box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2);
color: $lighter-base-font-color; color: $lighter-base-font-color;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 0px; margin-bottom: 0px;
...@@ -262,7 +262,7 @@ ...@@ -262,7 +262,7 @@
} }
a { a {
@include transition(all, 0.25s, ease-in-out); @include transition(all 0.25s ease-in-out 0s);
&::before { &::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%)); @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
...@@ -275,7 +275,7 @@ ...@@ -275,7 +275,7 @@
opacity: 0; opacity: 0;
width: 200px; width: 200px;
position: absolute; position: absolute;
@include transition(all, 0.25s, ease-in-out); @include transition(all 0.25s ease-in-out 0s);
top: 50%; top: 50%;
z-index: 1; z-index: 1;
} }
...@@ -285,7 +285,7 @@ ...@@ -285,7 +285,7 @@
left: 0px; left: 0px;
position: absolute; position: absolute;
text-align: center; text-align: center;
@include transition(all, 0.25s, ease-in-out); @include transition(all 0.25s ease-in-out 0s);
width: 100%; width: 100%;
z-index: 2; z-index: 2;
...@@ -293,7 +293,7 @@ ...@@ -293,7 +293,7 @@
color: $base-font-color; color: $base-font-color;
font: 800 italic 1.4em/1.4em $sans-serif; font: 800 italic 1.4em/1.4em $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(all, 0.15s, ease-in-out); @include transition(all 0.15s ease-in-out 0s);
&:hover { &:hover {
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -303,7 +303,7 @@ ...@@ -303,7 +303,7 @@
img { img {
position: relative; position: relative;
@include transition(all, 0.25s, ease-in-out); @include transition(all 0.25s ease-in-out 0s);
vertical-align: middle; vertical-align: middle;
z-index: 2; z-index: 2;
} }
...@@ -410,7 +410,7 @@ ...@@ -410,7 +410,7 @@
.news { .news {
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15)); box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
padding: 20px; padding: 20px;
width: flex-grid(12); width: flex-grid(12);
...@@ -428,13 +428,13 @@ ...@@ -428,13 +428,13 @@
float: left; float: left;
margin-right: flex-gutter(); margin-right: flex-gutter();
padding: 10px; padding: 10px;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
width: flex-grid(4); width: flex-grid(4);
&:hover { &:hover {
background: $body-bg; background: $body-bg;
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.1)); box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.1);
} }
&:last-child { &:last-child {
......
lms/static/sass/multicourse/_media-kit.scss
...@@ -9,9 +9,9 @@ $white: rgb(255,255,255); ...@@ -9,9 +9,9 @@ $white: rgb(255,255,255);
width: 980px; width: 980px;
.wrapper-mediakit { .wrapper-mediakit {
@include border-radius(4px); border-radius: 4px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.1)); box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.1);
margin: ($baseline*3) 0 0 0; margin: ($baseline*3) 0 0 0;
border: 1px solid $border-color; border: 1px solid $border-color;
padding: ($baseline*2) ($baseline*3); padding: ($baseline*2) ($baseline*3);
...@@ -24,7 +24,7 @@ $white: rgb(255,255,255); ...@@ -24,7 +24,7 @@ $white: rgb(255,255,255);
} }
header { header {
} }
} }
} }
...@@ -58,7 +58,7 @@ $white: rgb(255,255,255); ...@@ -58,7 +58,7 @@ $white: rgb(255,255,255);
color: $blue; color: $blue;
font-family: $sans-serif; font-family: $sans-serif;
text-decoration: none; text-decoration: none;
@include transition(all, 0.1s, linear); @include transition(all 0.1s linear 0s);
.note { .note {
position: relative; position: relative;
...@@ -66,7 +66,7 @@ $white: rgb(255,255,255); ...@@ -66,7 +66,7 @@ $white: rgb(255,255,255);
font-family: $sans-serif; font-family: $sans-serif;
font-size: 13px; font-size: 13px;
text-decoration: none; text-decoration: none;
@include transition(all, 0.1s, linear); @include transition(all 0.1s linear 0s);
&:before { &:before {
position: relative; position: relative;
...@@ -113,9 +113,9 @@ $white: rgb(255,255,255); ...@@ -113,9 +113,9 @@ $white: rgb(255,255,255);
} }
aside { aside {
@include border-radius(2px); border-radius: 2px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2)); box-shadow: 0 1px 4px 0 rgba(0,0,0, 0.2);
width: 330px; width: 330px;
float: left; float: left;
border: 3px solid tint(rgb(96, 155, 216), 35%); border: 3px solid tint(rgb(96, 155, 216), 35%);
...@@ -142,7 +142,7 @@ $white: rgb(255,255,255); ...@@ -142,7 +142,7 @@ $white: rgb(255,255,255);
.note { .note {
width: 100%; width: 100%;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
} }
} }
...@@ -171,9 +171,9 @@ $white: rgb(255,255,255); ...@@ -171,9 +171,9 @@ $white: rgb(255,255,255);
// library section // library section
.library { .library {
@include border-radius(2px); border-radius: 2px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2)); box-shadow: 0 1px 4px 0 rgba(0,0,0, 0.2);
border: 3px solid tint($light-gray,50%); border: 3px solid tint($light-gray,50%);
padding: 0; padding: 0;
background: tint($light-gray,50%); background: tint($light-gray,50%);
...@@ -220,9 +220,9 @@ $white: rgb(255,255,255); ...@@ -220,9 +220,9 @@ $white: rgb(255,255,255);
figure { figure {
a { a {
@include border-radius(2px); border-radius: 2px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.1)); box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.1);
display: block; display: block;
min-height: 380px; min-height: 380px;
border: 2px solid tint($light-gray,75%); border: 2px solid tint($light-gray,75%);
...@@ -257,4 +257,4 @@ $white: rgb(255,255,255); ...@@ -257,4 +257,4 @@ $white: rgb(255,255,255);
.share { .share {
} }
} }
\ No newline at end of file
lms/static/sass/multicourse/_password_reset.scss
.password-reset { .password-reset {
background: rgb(245,245,245); background: rgb(245,245,245);
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
@include border-radius(4px); border-radius: 4px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 5px 50px 0 rgba(0,0,0, 0.3)); box-shadow: 0 5px 50px 0 rgba(0,0,0, 0.3);
margin: 120px auto 0; margin: 120px auto 0;
padding: 0px 40px 40px; padding: 0px 40px 40px;
width: flex-grid(5); width: flex-grid(5);
......
lms/static/sass/multicourse/_press_release.scss
...@@ -35,9 +35,9 @@ ...@@ -35,9 +35,9 @@
> article { > article {
border: 1px solid rgb(220,220,220); border: 1px solid rgb(220,220,220);
@include border-radius(10px); border-radius: 10px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 2px 16px 0 rgba(0,0,0, 0.1)); box-shadow: 0 2px 16px 0 rgba(0,0,0, 0.1);
margin: 0 auto; margin: 0 auto;
padding: 80px 80px 40px 80px; padding: 80px 80px 40px 80px;
width: flex-grid(10); width: flex-grid(10);
......
lms/static/sass/multicourse/_testcenter-register.scss
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
.introduction { .introduction {
header { header {
h2 { h2 {
margin: 0; margin: 0;
font-family: $sans-serif; font-family: $sans-serif;
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
font-family: $sans-serif; font-family: $sans-serif;
font-size: 34px; font-size: 34px;
text-align: left; text-align: left;
} }
} }
} }
...@@ -63,13 +63,13 @@ ...@@ -63,13 +63,13 @@
// form // form
.form-fields-primary, .form-fields-secondary { .form-fields-primary, .form-fields-secondary {
border-bottom: 1px solid rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25);
@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.1)); box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.1);
} }
form { form {
border: 1px solid rgb(216, 223, 230); border: 1px solid rgb(216, 223, 230);
@include border-radius(3px); border-radius: 3px;
@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.2)); box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.2);
.instructions, .note { .instructions, .note {
margin: 0; margin: 0;
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
display: block; display: block;
@include button(simple, $blue); @include button(simple, $blue);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); border-radius: 3px;
font: bold 15px/1.6rem $sans-serif; font: bold 15px/1.6rem $sans-serif;
letter-spacing: 0; letter-spacing: 0;
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
...@@ -181,7 +181,7 @@ ...@@ -181,7 +181,7 @@
} }
.value { .value {
@include border-radius(3px); border-radius: 3px;
border: 1px solid #C8C8C8; border: 1px solid #C8C8C8;
padding: $baseline ($baseline*0.75); padding: $baseline ($baseline*0.75);
background: #FAFAFA; background: #FAFAFA;
...@@ -219,7 +219,7 @@ ...@@ -219,7 +219,7 @@
label { label {
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
@include transition(color, 0.15s, ease-in-out); @include transition(color 0.15s ease-in-out 0s);
&.is-focused { &.is-focused {
color: $blue; color: $blue;
...@@ -229,7 +229,7 @@ ...@@ -229,7 +229,7 @@
input, textarea { input, textarea {
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: ($baseline/2); padding: ($baseline/2);
&.long { &.long {
width: 100%; width: 100%;
...@@ -336,7 +336,7 @@ ...@@ -336,7 +336,7 @@
padding-left: $baseline; padding-left: $baseline;
.message-status { .message-status {
@include border-radius(3px); border-radius: 3px;
margin: 0 0 ($baseline*2) 0; margin: 0 0 ($baseline*2) 0;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 0; padding: 0;
...@@ -406,13 +406,13 @@ ...@@ -406,13 +406,13 @@
} }
.details, .item, .instructions { .details, .item, .instructions {
@include transition(opacity, 0.10s, ease-in-out); @include transition(opacity 0.10s ease-in-out 0s);
font-size: 13px; font-size: 13px;
opacity: 0.65; opacity: 0.65;
} }
&:before { &:before {
@include border-radius($baseline); border-radius: $baseline;
position: relative; position: relative;
top: 3px; top: 3px;
display: block; display: block;
...@@ -512,7 +512,7 @@ ...@@ -512,7 +512,7 @@
} }
.actions { .actions {
@include box-shadow(inset 0 1px 1px 0px rgba(0,0,0,0.2)); box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.2);
border-top: 1px solid tint(rgb(0,0,0), 90%); border-top: 1px solid tint(rgb(0,0,0), 90%);
padding-top: ($baseline*0.75); padding-top: ($baseline*0.75);
background: tint($yellow,70%); background: tint($yellow,70%);
...@@ -523,7 +523,7 @@ ...@@ -523,7 +523,7 @@
} }
.label, .value { .label, .value {
display: inline-block; display: inline-block;
} }
.label { .label {
...@@ -559,7 +559,7 @@ ...@@ -559,7 +559,7 @@
letter-spacing: 0; letter-spacing: 0;
} }
} }
.registration-processed { .registration-processed {
...@@ -627,7 +627,7 @@ ...@@ -627,7 +627,7 @@
// status messages // status messages
.message { .message {
@include border-radius(3px); border-radius: 3px;
display: none; display: none;
margin: $baseline 0; margin: $baseline 0;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
...@@ -642,7 +642,7 @@ ...@@ -642,7 +642,7 @@
// registration status // registration status
&.message-flash { &.message-flash {
@include border-radius(3px); border-radius: 3px;
position: relative; position: relative;
margin: 0 0 ($baseline*2) 0; margin: 0 0 ($baseline*2) 0;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -787,4 +787,4 @@ ...@@ -787,4 +787,4 @@
.is-hidden { .is-hidden {
display: none; display: none;
} }
} }
\ No newline at end of file
lms/static/sass/shared/_activation_messages.scss
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
.message { .message {
background: rgb(252,252,252); background: rgb(252,252,252);
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
@include box-shadow(0 3px 20px 0 rgba(0,0,0, 0.2)); box-shadow: 0 3px 20px 0 rgba(0,0,0, 0.2);
@include border-radius(4px); border-radius: 4px;
margin: 0 auto; margin: 0 auto;
padding: 40px; padding: 40px;
width: flex-grid(6); width: flex-grid(6);
......
lms/static/sass/shared/_course_filter.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
nav { nav {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230))); @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), inset 0 0 0 -1px rgba(255,255,255, 0.4)); box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.4), inset 0 0 0 -1px rgba(255,255,255, 0.4);
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid rgb(190,190,190); border: 1px solid rgb(190,190,190);
border-bottom-color: rgb(200,200,200); border-bottom-color: rgb(200,200,200);
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
z-index: 9; z-index: 9;
&.fixed-top { &.fixed-top {
@include box-shadow(0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4)); box-shadow: 0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4);
max-width: 1200px; max-width: 1200px;
position: fixed; position: fixed;
top: 0px; top: 0px;
...@@ -30,9 +30,9 @@ ...@@ -30,9 +30,9 @@
.filter-heading { .filter-heading {
@include background-image(linear-gradient(-90deg, rgb(250,250,250) 0%, rgb(245,245,245) 50%, rgb(235,235,235) 50%, rgb(230,230,230) 100%)); @include background-image(linear-gradient(-90deg, rgb(250,250,250) 0%, rgb(245,245,245) 50%, rgb(235,235,235) 50%, rgb(230,230,230) 100%));
@include border-radius(4px); border-radius: 4px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6);
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
color: $base-font-color; color: $base-font-color;
cursor: pointer; cursor: pointer;
...@@ -47,9 +47,9 @@ ...@@ -47,9 +47,9 @@
ul { ul {
background: rgb(255,255,255); background: rgb(255,255,255);
@include border-radius(0px 4px 4px 4px); border-radius: 0px 4px 4px 4px;
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
@include box-shadow(0 2px 15px 0 rgba(0,0,0, 0.2)); box-shadow: 0 2px 15px 0 rgba(0,0,0, 0.2);
padding: 20px 0px 5px 20px; padding: 20px 0px 5px 20px;
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
...@@ -66,9 +66,9 @@ ...@@ -66,9 +66,9 @@
.filter-heading { .filter-heading {
background: rgb(255,255,255); background: rgb(255,255,255);
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255))); @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255)));
@include border-radius(4px 4px 0px 0px); border-radius: 4px 4px 0px 0px;
border-bottom: 1px dotted rgb(200,200,200); border-bottom: 1px dotted rgb(200,200,200);
@include box-shadow(0 2px 0 -1px rgb(255,255,255)); box-shadow: 0 2px 0 -1px rgb(255,255,255);
color: $base-font-color; color: $base-font-color;
height: 40px; height: 40px;
} }
...@@ -83,14 +83,14 @@ ...@@ -83,14 +83,14 @@
float: right; float: right;
input[type="text"] { input[type="text"] {
@include border-radius(3px 0px 0px 3px); border-radius: 3px 0px 0px 3px;
float: left; float: left;
height: 36px; height: 36px;
width: 200px; width: 200px;
} }
input[type="submit"] { input[type="submit"] {
@include border-radius(0px 3px 3px 0px); border-radius: 0px 3px 3px 0px;
float: left; float: left;
height: 36px; height: 36px;
padding: 2px 20px; padding: 2px 20px;
......
lms/static/sass/shared/_course_object.scss
...@@ -33,13 +33,13 @@ ...@@ -33,13 +33,13 @@
.course { .course {
background: $body-bg; background: $body-bg;
border: 1px solid $border-color-1; border: 1px solid $border-color-1;
@include border-radius(2px); border-radius: 2px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9)); box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9);
margin-bottom: 30px; margin-bottom: 30px;
position: relative; position: relative;
width: 100%; width: 100%;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
.status { .status {
background: $link-color; background: $link-color;
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
font-size: 10px; font-size: 10px;
left: 10px; left: 10px;
padding: 2px 10px; padding: 2px 10px;
@include border-radius(2px); border-radius: 2px;
position: absolute; position: absolute;
text-transform: uppercase; text-transform: uppercase;
top: -6px; top: -6px;
...@@ -80,11 +80,11 @@ ...@@ -80,11 +80,11 @@
bottom: 6px; bottom: 6px;
border: 1px solid rgba(0,0,0, 0.5); border: 1px solid rgba(0,0,0, 0.5);
@include border-right-radius(2px); @include border-right-radius(2px);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15)); box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.15);
@include clearfix; @include clearfix;
position: absolute; position: absolute;
right: -4px; right: -4px;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
p { p {
color: rgb(255,255,255); color: rgb(255,255,255);
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
// > a { // > a {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85))); @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85)));
@include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2)); box-shadow: inset 0 -1px 0 0 rgba(255,255,255, 0.2);
border-bottom: 1px solid rgba(150,150,150, 0.7); border-bottom: 1px solid rgba(150,150,150, 0.7);
display: block; display: block;
height: 50px; height: 50px;
...@@ -186,7 +186,7 @@ ...@@ -186,7 +186,7 @@
left: 0px; left: 0px;
position: absolute; position: absolute;
top: 0px; top: 0px;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
...@@ -247,7 +247,7 @@ ...@@ -247,7 +247,7 @@
&:hover { &:hover {
background: $course-profile-bg; background: $course-profile-bg;
border-color: $border-color-1; border-color: $border-color-1;
@include box-shadow(0 1px 16px 0 rgba($shadow-color, 0.4)); box-shadow: 0 1px 16px 0 rgba($shadow-color, 0.4);
.info { .info {
top: -150px; top: -150px;
......
lms/static/sass/shared/_footer.scss
.wrapper-footer { .wrapper-footer {
@include box-shadow(0 -1px 5px 0 rgba(0,0,0, 0.1)); box-shadow: 0 -1px 5px 0 rgba(0,0,0, 0.1);
border-top: 1px solid tint($m-gray,50%); border-top: 1px solid tint($m-gray,50%);
padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2); padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
background: $footer-bg; background: $footer-bg;
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
} }
a { a {
@include transition(link-color 0.15s ease-in-out, border 0.15s ease-in-out); @include transition(link-color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s);
&:link, &:visited, &:hover, &:active { &:link, &:visited, &:hover, &:active {
border-bottom: none; border-bottom: none;
......
lms/static/sass/shared/_forms.scss
...@@ -17,8 +17,8 @@ input[type="password"], ...@@ -17,8 +17,8 @@ input[type="password"],
input[type="tel"] { input[type="tel"] {
background: $form-bg-color; background: $form-bg-color;
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
@include border-radius(3px); border-radius: 3px;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1);
@include box-sizing(border-box); @include box-sizing(border-box);
font: italic 300 1rem/1.6rem $serif; font: italic 300 1rem/1.6rem $serif;
height: 35px; height: 35px;
...@@ -32,7 +32,7 @@ input[type="tel"] { ...@@ -32,7 +32,7 @@ input[type="tel"] {
&:focus { &:focus {
border-color: darken($button-archive-color, 50%); border-color: darken($button-archive-color, 50%);
@include box-shadow(0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0,0,0, 0.15)); box-shadow: 0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0,0,0, 0.15);
outline: none; outline: none;
} }
} }
...@@ -45,7 +45,7 @@ input[type="submit"], ...@@ -45,7 +45,7 @@ input[type="submit"],
input[type="button"], input[type="button"],
button, button,
.button { .button {
@include border-radius(3px); border-radius: 3px;
@include button(shiny, $button-color); @include button(shiny, $button-color);
font: normal 1.2rem/1.6rem $sans-serif; font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
......
lms/static/sass/shared/_header.scss
header.global { header.global {
border-bottom: 1px solid $m-gray; border-bottom: 1px solid $m-gray;
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1);
background: $header-bg; background: $header-bg;
height: 76px; height: 76px;
position: relative; position: relative;
...@@ -79,9 +79,9 @@ header.global { ...@@ -79,9 +79,9 @@ header.global {
@include background-image($button-bg-image); @include background-image($button-bg-image);
background-color: $button-bg-color; background-color: $button-bg-color;
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
@include border-radius(3px); border-radius: 3px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
color: $base-font-color; color: $base-font-color;
display: inline-block; display: inline-block;
font-family: $sans-serif; font-family: $sans-serif;
...@@ -120,7 +120,7 @@ header.global { ...@@ -120,7 +120,7 @@ header.global {
&:last-child { &:last-child {
> a { > a {
@include border-radius(0 4px 4px 0); border-radius: 0 4px 4px 0;
border-left: none; border-left: none;
padding: 5px 8px 7px 8px; padding: 5px 8px 7px 8px;
} }
...@@ -145,7 +145,7 @@ header.global { ...@@ -145,7 +145,7 @@ header.global {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 4px; top: 4px;
@include transition(all, 0.15s, linear); @include transition(all 0.15s linear 0s);
width: 26px; width: 26px;
} }
...@@ -158,8 +158,8 @@ header.global { ...@@ -158,8 +158,8 @@ header.global {
ul.dropdown-menu { ul.dropdown-menu {
background: $border-color-4; background: $border-color-4;
@include border-radius(4px); border-radius: 4px;
@include box-shadow(0 2px 24px 0 rgba(0,0,0, 0.3)); box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
border: 1px solid $border-color-3; border: 1px solid $border-color-3;
display: none; display: none;
padding: 5px 10px; padding: 5px 10px;
...@@ -181,7 +181,7 @@ header.global { ...@@ -181,7 +181,7 @@ header.global {
bottom: 6px solid transparent; bottom: 6px solid transparent;
left: 6px solid transparent; left: 6px solid transparent;
} }
@include box-shadow(1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3); box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3;
content: ""; content: "";
display: block; display: block;
height: 0px; height: 0px;
...@@ -195,16 +195,16 @@ header.global { ...@@ -195,16 +195,16 @@ header.global {
li { li {
display: block; display: block;
border-top: 1px dotted $border-color-2; border-top: 1px dotted $border-color-2;
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05)); box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
&:first-child { &:first-child {
border: none; border: none;
@include box-shadow(none); box-shadow: none;
} }
> a { > a {
border: 1px solid transparent; border: 1px solid transparent;
@include border-radius(3px); border-radius: 3px;
@include box-sizing(border-box); @include box-sizing(border-box);
color: $link-color; color: $link-color;
cursor: pointer; cursor: pointer;
...@@ -213,7 +213,7 @@ header.global { ...@@ -213,7 +213,7 @@ header.global {
overflow: hidden; overflow: hidden;
padding: 3px 5px 4px; padding: 3px 5px 4px;
text-overflow: ellipsis; text-overflow: ellipsis;
@include transition(padding, 0.15s, linear); @include transition(padding 0.15s linear 0s);
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
...@@ -279,7 +279,7 @@ header.global { ...@@ -279,7 +279,7 @@ header.global {
display: inline-block; display: inline-block;
a { a {
@include border-radius(0); border-radius: 0;
@include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%); @include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%);
display: inline-block; display: inline-block;
padding: $baseline/2 $baseline*2.5; padding: $baseline/2 $baseline*2.5;
......
lms/static/sass/shared/_modal.scss
...@@ -13,8 +13,8 @@ ...@@ -13,8 +13,8 @@
.modal { .modal {
background: rgba(0,0,0, 0.6); background: rgba(0,0,0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(0, 0, 0, 0.9);
@include border-radius(0px); border-radius: 0px;
@include box-shadow(0 15px 80px 15px rgba(0,0,0, 0.5)); box-shadow: 0 15px 80px 15px rgba(0,0,0, 0.5);
color: #fff; color: #fff;
display: none; display: none;
left: 50%; left: 50%;
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
.inner-wrapper { .inner-wrapper {
background: #000; background: #000;
@include box-shadow(none); box-shadow: none;
height: 315px; height: 315px;
padding: 10px; padding: 10px;
width: 560px; width: 560px;
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
.inner-wrapper { .inner-wrapper {
background: #000; background: #000;
@include box-shadow(none); box-shadow: none;
height: 360px; height: 360px;
padding: 10px; padding: 10px;
width: 640px; width: 640px;
...@@ -53,9 +53,9 @@ ...@@ -53,9 +53,9 @@
.inner-wrapper { .inner-wrapper {
background: $modal-bg-color; background: $modal-bg-color;
@include border-radius(0px); border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(0, 0, 0, 0.9);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7)); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
overflow: hidden; overflow: hidden;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
.input-group { .input-group {
@include clearfix; @include clearfix;
border-bottom: 1px solid rgb(210,210,210); border-bottom: 1px solid rgb(210,210,210);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-bottom: 30px; margin-bottom: 30px;
padding-bottom: 10px; padding-bottom: 10px;
} }
...@@ -189,8 +189,8 @@ ...@@ -189,8 +189,8 @@
label.honor-code { label.honor-code {
background: rgb(233,233,233); background: rgb(233,233,233);
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
@include border-radius(3px); border-radius: 3px;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
display: block; display: block;
margin-bottom: 20px; margin-bottom: 20px;
padding: 8px 10px; padding: 8px 10px;
...@@ -274,7 +274,7 @@ ...@@ -274,7 +274,7 @@
} }
.close-modal { .close-modal {
@include border-radius(2px); border-radius: 2px;
cursor: pointer; cursor: pointer;
@include inline-block; @include inline-block;
padding: 10px; padding: 10px;
...@@ -289,7 +289,7 @@ ...@@ -289,7 +289,7 @@
font: normal 1.2rem/1.2rem $sans-serif; font: normal 1.2rem/1.2rem $sans-serif;
text-align: center; text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8); text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all, 0.15s, ease-out); @include transition(all 0.15s ease-out 0s);
} }
} }
......
rakelib/assets.rake
...@@ -43,7 +43,6 @@ def sass_cmd(watch=false, debug=false) ...@@ -43,7 +43,6 @@ def sass_cmd(watch=false, debug=false)
"sass #{debug ? '--debug-info' : '--style compressed'} " + "sass #{debug ? '--debug-info' : '--style compressed'} " +
"--load-path #{sass_load_paths.join(' ')} " + "--load-path #{sass_load_paths.join(' ')} " +
"--require ./common/static/sass/bourbon/lib/bourbon.rb " +
"#{watch ? '--watch' : '--update'} -E utf-8 #{sass_watch_paths.join(' ')}" "#{watch ? '--watch' : '--update'} -E utf-8 #{sass_watch_paths.join(' ')}"
end end
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment