Skip to content
Snippets Groups Projects
Commit a0962cc3 authored by Frances Botsford's avatar Frances Botsford Committed by David Baumgold
Browse files

updated sass transitions to use newer bourbon syntax

parent 3748cae7
No related merge requests found
Showing
with 85 additions and 86 deletions
......@@ -19,7 +19,7 @@ body, input, button {
}
a {
@include transition(color $tmg-f2 ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0s);
text-decoration: none;
color: $blue;
......@@ -642,7 +642,7 @@ hr.divide {
// system notifications
.toast-notification {
@include transition(all $tmg-f2 linear 0);
@include transition(all $tmg-f2 linear 0s);
display: none;
position: fixed;
top: 20px;
......@@ -794,7 +794,7 @@ hr.divide {
.tooltip {
@include font-size(12);
@include transition(opacity $tmg-f3 ease-out 0);
@include transition(opacity $tmg-f3 ease-out 0s);
position: absolute;
top: 0;
left: 0;
......@@ -867,7 +867,7 @@ body.js {
background: $white;
.action-modal-close {
@include transition(top $tmg-f3 ease-in-out 0);
@include transition(top $tmg-f3 ease-in-out 0s);
@include border-bottom-radius(3px);
position: absolute;
top: -3px;
......
......@@ -77,7 +77,7 @@
.title {
@extend .t-action2;
@extend .btn-dd-nav-primary;
@include transition(all $tmg-f2 ease-in-out 0);
@include transition(all $tmg-f2 ease-in-out 0s);
.label, .icon-caret-down {
......@@ -160,7 +160,7 @@
// entire link
.course-link {
@include transition(color $tmg-f2 ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0s);
display: block;
color: $gray-d1;
......
......@@ -33,7 +33,7 @@ nav {
}
.ui-toggle-dd {
@include transition(all $tmg-f2 ease-in-out 0);
@include transition(all $tmg-f2 ease-in-out 0s);
margin-left: ($baseline/10);
display: inline-block;
vertical-align: middle;
......
......@@ -145,7 +145,7 @@
// prompts
.wrapper-prompt {
@extend .depth5;
@include transition(all $tmg-f3 ease-in-out 0);
@include transition(all $tmg-f3 ease-in-out 0s);
position: fixed;
top: 0;
background: $black-t0;
......@@ -364,7 +364,7 @@
}
[class^="icon"] {
@include transition (color 0.50s ease-in-out 0);
@include transition (color 0.50s ease-in-out 0s);
@include font-size(22);
width: flex-grid(1, 12);
height: ($baseline*1.25);
......@@ -531,7 +531,7 @@
}
[class^="icon"] {
@include transition (color 0.50s ease-in-out 0);
@include transition (color 0.50s ease-in-out 0s);
@include font-size(22);
width: flex-grid(1, 12);
margin: ($baseline/4) flex-gutter() 0 0;
......
......@@ -14,7 +14,7 @@
.copy {
@extend .t-copy-sub1;
@include transition(opacity $tmg-f2 ease-in-out 0);
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.75;
}
......
......@@ -70,7 +70,7 @@ body.signup, body.signin {
.action-primary {
@include blue-button;
@extend .t-action2;
@include transition(all $tmg-f3 linear 0);
@include transition(all $tmg-f3 linear 0s);
display: block;
width: 100%;
padding: ($baseline*0.75) ($baseline/2);
......@@ -109,7 +109,7 @@ body.signup, body.signin {
label {
@extend .t-copy-sub1;
@include transition(color $tmg-f3 ease-in-out 0);
@include transition(color $tmg-f3 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0;
&.is-focused {
......@@ -172,7 +172,7 @@ body.signup, body.signin {
.tip {
@extend .t-copy-sub2;
@include transition(color $tmg-f3 ease-in-out 0);
@include transition(color $tmg-f3 ease-in-out 0s);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
......
......@@ -55,13 +55,13 @@ body.course.checklists {
padding: $baseline ($baseline*1.5);
.checklist-title {
@include transition(color $tmg-f2 ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0s);
width: flex-grid(6, 9);
margin: 0 flex-gutter() 0 0;
float: left;
.ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0);
@include transition(all $tmg-f2 ease-in-out 0s);
@include font-size(21);
display: inline-block;
vertical-align: middle;
......@@ -208,7 +208,7 @@ body.course.checklists {
overflow: hidden;
.task {
@include transition(background $tmg-f2 ease-in-out 0, border $tmg-f3 ease-in-out 0);
@include transition(background $tmg-f2 ease-in-out 0s, border $tmg-f3 ease-in-out 0s);
@include clearfix();
position: relative;
border-top: 1px solid $white;
......@@ -238,7 +238,7 @@ body.course.checklists {
font-weight: 500;
.task-name {
@include transition(color $tmg-f2 ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0s);
vertical-align: baseline;
cursor: pointer;
margin-bottom: 0;
......@@ -246,13 +246,13 @@ body.course.checklists {
.task-description {
@extend .t-copy-sub1;
@include transition(color $tmg-f2 ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0s);
color: $gray-l2;
}
.task-support {
@extend .t-copy-sub2;
@include transition(opacity $tmg-f2 ease-in-out 0);
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.0;
pointer-events: none;
}
......
......@@ -151,7 +151,7 @@ body.index {
background: $white;
.action-zoom {
@include transition(bottom $tmg-f2 ease-in-out 0);
@include transition(bottom $tmg-f2 ease-in-out 0s);
position: absolute;
bottom: -30px;
right: ($baseline/2);
......@@ -214,7 +214,7 @@ body.index {
.proofpoint {
@include box-sizing(border-box);
@include transition(all $tmg-f2 ease-in-out 0);
@include transition(all $tmg-f2 ease-in-out 0s);
border-radius: ($baseline/4);
position: relative;
top: 0;
......
......@@ -64,7 +64,7 @@ body.course.outline {
.menu {
@include font-size(12);
@include transition(opacity $tmg-f2 linear 0);
@include transition(opacity $tmg-f2 linear 0s);
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
z-index: 1;
......@@ -246,7 +246,7 @@ body.course.outline {
}
.section-name-span {
@include transition(color $tmg-f2 linear 0);
@include transition(color $tmg-f2 linear 0s);
cursor: pointer;
&:hover {
......@@ -342,7 +342,7 @@ body.course.outline {
.menu {
@include font-size(12);
@include transition(opacity $tmg-f2 linear 0, display $tmg-f2 linear 0);
@include transition(opacity $tmg-f2 linear 0s, display $tmg-f2 linear 0s);
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
z-index: 1;
......@@ -452,7 +452,7 @@ body.course.outline {
}
.section-name-span {
@include transition(color $tmg-f2 linear 0);
@include transition(color $tmg-f2 linear 0s);
cursor: pointer;
&:hover {
......
......@@ -98,7 +98,7 @@ body.course.settings {
.tip {
@extend .t-copy-sub2;
@include transition(color $tmg-f2 ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0s);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
......@@ -155,7 +155,7 @@ body.course.settings {
label {
@extend .t-copy-sub1;
@include transition(color $tmg-f2 ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0s);
margin: 0 0 ($baseline/4) 0;
font-weight: 400;
......
......@@ -137,7 +137,7 @@ body.course.static-pages {
}
.xmodule_display {
@include transition(background-color $tmg-s3 linear 0);
@include transition(background-color $tmg-s3 linear 0s);
padding: 20px 20px 22px;
font-size: 24px;
font-weight: 300;
......
......@@ -335,7 +335,7 @@ body.course.subsection {
}
.menu {
@include transition(opacity $tmg-f2 linear 0);
@include transition(opacity $tmg-f2 linear 0s);
z-index: 1;
position: absolute;
top: -12px;
......
......@@ -256,7 +256,7 @@ body.course.unit {
color: #3c3c3c;
&:hover {
@include transition(background-color $tmg-f2 linear 0);
@include transition(background-color $tmg-f2 linear 0s);
background: tint($green,30%);
color: #fff;
}
......@@ -291,7 +291,7 @@ body.course.unit {
float: left;
[class^="icon-"] {
@include transition(opacity $tmg-f2 linear 0);
@include transition(opacity $tmg-f2 linear 0s);
display: inline-block;
top: 1px;
margin-right: 5px;
......@@ -303,7 +303,7 @@ body.course.unit {
}
.editor-indicator {
@include transition(opacity $tmg-f2 linear 0);
@include transition(opacity $tmg-f2 linear 0s);
float: right;
position: relative;
top: 3px;
......@@ -507,7 +507,6 @@ body.course.unit {
@include blue-button;
&.is-set {
@include transition(box-shadow $tmg-f1 ease-in-out 0);
@include linear-gradient($blue, $blue);
color: $blue-d1;
box-shadow: inset 0 1px 2px 1px $shadow-l1;
......@@ -587,7 +586,7 @@ body.course.unit {
}
&:hover {
@include transition(opacity $tmg-f2 ease-in-out);
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 1.0;
}
......@@ -673,7 +672,7 @@ body.course.unit {
&:focus {
box-shadow: 0 0 1px $shadow;
@include transition(opacity $tmg-f2 ease-in-out 0);
@include transition(opacity $tmg-f2 ease-in-out 0s);
background-color: $yellow;
}
......@@ -698,7 +697,7 @@ body.course.unit {
&:hover {
box-shadow: 0 1px 1px $shadow;
@include transition(opacity $tmg-f2 ease-in-out 0);
@include transition(opacity $tmg-f2 ease-in-out 0s);
background-color: $blue-s3;
border: 1px solid $blue-s3;
color: $white;
......@@ -956,7 +955,7 @@ body.unit {
&:hover {
@include transition(opacity $tmg-f2 ease-in-out 0);
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 1.0s;
}
}
......
......@@ -16,7 +16,7 @@
color: $darkGrey !important;
pointer-events: none;
cursor: none;
&:hover {
box-shadow: 0 0 0 0 !important;
}
......@@ -48,7 +48,7 @@
@include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
background-color: #fff;
overflow: hidden;
@include transition(width .3s);
@include transition(width .3s linear 0s);
&.shown {
width: 300px;
......
......@@ -48,7 +48,7 @@
@include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
background-color: #fff;
overflow: hidden;
@include transition(width .3s);
@include transition(width .3s linear 0s);
&.shown {
width: 300px;
......
......@@ -104,7 +104,7 @@ nav.sequence-nav {
display: block;
padding: 0;
position: relative;
@include transition();
@include transition(none);
outline: 0;
&:focus {
......@@ -208,7 +208,7 @@ nav.sequence-nav {
position: absolute;
top: 48px;
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;
z-index: 99;
......@@ -273,7 +273,7 @@ nav.sequence-nav {
height: 34px;
width: 40px;
text-indent: -9999px;
@include transition(all, .2s, $ease-in-out-quad);
@include transition(all .2s $ease-in-out-quad 0s);
outline: 0;
&:focus {
......@@ -349,7 +349,7 @@ nav.sequence-bottom {
display: block;
padding: lh(.5) 4px;
text-indent: -9999px;
@include transition(all, .2s, $ease-in-out-quad);
@include transition(all .2s $ease-in-out-quad 0s);
outline: 0;
&:hover {
......
......@@ -55,7 +55,7 @@ div.video {
height: 7px;
margin-left: -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 {
background: #777;
......@@ -72,7 +72,7 @@ div.video {
height: 15px;
margin-left: -7px;
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;
&:focus, &:hover {
......@@ -101,7 +101,7 @@ div.video {
line-height: 46px;
padding: 0 lh(.75);
text-indent: -9999px;
@include transition(background-color, opacity);
@include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
width: 14px;
background: url('../images/vcr.png') 15px 15px no-repeat;
outline: 0;
......@@ -176,7 +176,7 @@ div.video {
margin-right: 0;
padding-left: 15px;
position: relative;
@include transition();
@include transition(none);
-webkit-font-smoothing: antialiased;
width: 116px;
outline: 0;
......@@ -214,7 +214,7 @@ div.video {
// fix for now
ol.video_speeds {
box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
@include transition();
@include transition(none);
background-color: #444;
border: 1px solid #000;
bottom: 46px;
......@@ -284,7 +284,7 @@ div.video {
margin-right: 0;
padding-left: 15px;
position: relative;
@include transition();
@include transition(none);
-webkit-font-smoothing: antialiased;
width: 30px;
......@@ -295,7 +295,7 @@ div.video {
.volume-slider-container {
box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
@include transition();
@include transition(none);
background-color: #444;
border: 1px solid #000;
bottom: 46px;
......@@ -325,7 +325,7 @@ div.video {
cursor: pointer;
height: 15px;
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;
}
......@@ -347,7 +347,7 @@ div.video {
margin-left: 0;
padding: 0 lh(.5);
text-indent: -9999px;
@include transition();
@include transition(none);
width: 30px;
&:hover {
......@@ -368,7 +368,7 @@ div.video {
margin-left: 0;
padding: 0 lh(.5);
text-indent: -9999px;
@include transition();
@include transition(none);
width: 30px;
&:hover {
......@@ -397,7 +397,7 @@ div.video {
padding: 0 lh(.5);
position: relative;
text-indent: -9999px;
@include transition();
@include transition(none);
-webkit-font-smoothing: antialiased;
width: 30px;
......@@ -542,7 +542,7 @@ div.video {
position: fixed;
right: 0;
top: 0;
@include transition();
@include transition(none);
li {
color: #aaa;
......
......@@ -55,7 +55,7 @@ div.video {
height: 7px;
margin-left: -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 {
background: #777;
......@@ -72,7 +72,7 @@ div.video {
height: 15px;
margin-left: -7px;
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;
&:focus, &:hover {
......@@ -101,7 +101,7 @@ div.video {
line-height: 46px;
padding: 0 lh(.75);
text-indent: -9999px;
@include transition(background-color, opacity);
@include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
width: 14px;
background: url('../images/vcr.png') 15px 15px no-repeat;
outline: 0;
......@@ -176,7 +176,7 @@ div.video {
margin-right: 0;
padding-left: 15px;
position: relative;
@include transition();
@include transition(none);
-webkit-font-smoothing: antialiased;
width: 116px;
outline: 0;
......@@ -214,7 +214,7 @@ div.video {
// fix for now
ol.video_speeds {
box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
@include transition();
@include transition(none);
background-color: #444;
border: 1px solid #000;
bottom: 46px;
......@@ -284,7 +284,7 @@ div.video {
margin-right: 0;
padding-left: 15px;
position: relative;
@include transition();
@include transition(none);
-webkit-font-smoothing: antialiased;
width: 30px;
......@@ -295,7 +295,7 @@ div.video {
.volume-slider-container {
box-shadow: inset 1px 0 0 #555, 0 3px 0 #444;
@include transition();
@include transition(none);
background-color: #444;
border: 1px solid #000;
bottom: 46px;
......@@ -325,7 +325,7 @@ div.video {
cursor: pointer;
height: 15px;
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;
}
......@@ -347,7 +347,7 @@ div.video {
margin-left: 0;
padding: 0 lh(.5);
text-indent: -9999px;
@include transition();
@include transition(none);
width: 30px;
&:hover {
......@@ -368,7 +368,7 @@ div.video {
margin-left: 0;
padding: 0 lh(.5);
text-indent: -9999px;
@include transition();
@include transition(none);
width: 30px;
&:hover {
......@@ -397,7 +397,7 @@ div.video {
padding: 0 lh(.5);
position: relative;
text-indent: -9999px;
@include transition();
@include transition(none);
-webkit-font-smoothing: antialiased;
width: 30px;
......@@ -542,7 +542,7 @@ div.video {
position: fixed;
right: 0;
top: 0;
@include transition();
@include transition(none);
li {
color: #aaa;
......
......@@ -117,7 +117,7 @@
// extends - buttons
.btn {
@include box-sizing(border-box);
@include transition(color 0.25s ease-in-out 0, border-color 0.25s ease-in-out 0, background 0.25s ease-in-out 0, box-shadow 0.25s ease-in-out 0);
@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;
cursor: pointer;
......
......@@ -565,7 +565,7 @@ body.discussion {
border-top-width: 0;
border-radius: 0 0 3px 3px;
overflow: hidden;
@include transition(all, .2s, easeOut);
@include transition(all .2s ease-out 0s);
&:before {
content: 'PREVIEW';
......@@ -591,7 +591,7 @@ body.discussion {
padding: 0px;
height: 20px;
overflow: hidden;
@include transition(all, .2s, easeOut);
@include transition(all .2s ease-out 0s);
}
.wmd-spacer {
......@@ -718,7 +718,7 @@ body.discussion {
height: 100%;
@include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
background-color: #dcdcdc;
@include transition(all .2s ease-out);
@include transition(all .2s ease-out 0s);
&:hover {
background-color: #e9e9e9;
......@@ -818,7 +818,7 @@ body.discussion {
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
opacity: 0.0;
@include transition(opacity .2s);
@include transition(opacity .2s linear 0s);
}
}
......@@ -938,7 +938,7 @@ body.discussion {
max-width: 30px;
margin: auto;
@include box-sizing(border-box);
@include transition(all .2s);
@include transition(all .2s linear 0s);
}
.post-search-field {
......@@ -959,13 +959,13 @@ body.discussion {
color: #333;
cursor: pointer;
pointer-events: none;
@include transition(all .2s ease-out);
@include transition(all .2s ease-out 0s);
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
opacity: 0.0;
@include transition(opacity .2s);
@include transition(opacity .2s linear 0s);
}
&:focus {
......@@ -1618,7 +1618,7 @@ body.discussion {
padding: 8px 20px;
.wmd-input {
@include transition(all .2s);
@include transition(all .2s linear 0s);
}
.wmd-button {
......@@ -1638,7 +1638,7 @@ body.discussion {
border: 1px solid #b2b2b2;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
@include transition(border-color .1s);
@include transition(border-color .1s linear 0s);
&:focus {
border-color: #4697c1;
......@@ -1726,7 +1726,7 @@ body.discussion {
.discussion-reply-new {
padding: 20px;
@include clearfix;
@include transition(opacity .2s);
@include transition(opacity .2s linear 0s);
h4 {
font-size: 16px;
......@@ -1837,7 +1837,7 @@ body.discussion {
/* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
.discussion-thread {
padding: 0;
@include transition(all .25s);
@include transition(all .25s linear 0s);
.dogear {
display: none;
......@@ -1868,7 +1868,7 @@ body.discussion {
min-height: 0;
padding: 10px 10px 15px 10px;
box-shadow: 0 1px 0 #ddd;
@include transition(all .2s);
@include transition(all .2s linear 0s);
.discussion-post {
padding: 12px 20px 0 20px;
......@@ -2223,7 +2223,7 @@ body.discussion {
border-top-width: 0;
border-radius: 0 0 3px 3px;
overflow: hidden;
@include transition(all, .2s, easeOut);
@include transition(all .2s ease-out 0s);
&:before {
content: 'PREVIEW';
......@@ -2249,7 +2249,7 @@ body.discussion {
padding: 0px;
height: 20px;
overflow: hidden;
@include transition(all, .2s, easeOut);
@include transition(all .2s ease-out 0s);
}
.wmd-spacer {
......@@ -2457,7 +2457,7 @@ body.discussion {
}
&:hover {
@include transition(opacity .2s);
@include transition(opacity .2s linear 0s);
opacity: 1.0;
}
}
......@@ -2522,7 +2522,7 @@ display:none;
opacity: 0.8;
&:hover {
@include transition(opacity .2s);
@include transition(opacity .2s linear 0s);
opacity: 1.0;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment