Skip to content

E
edx-platform
Commit 41d9fa37 by Brian Talbot Committed by David Baumgold
Options

Studio: syncs up syntax, ordering, and timing for all Sass transition mixins

parent ed93fcb8
Showing with 46 additions and 50 deletions
cms/static/sass/_base.scss
...@@ -19,9 +19,9 @@ body, input, button { ...@@ -19,9 +19,9 @@ body, input, button {
} }
a { a {
@include transition(color 0.15s ease-in-out 0);
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;
...@@ -642,6 +642,7 @@ hr.divide { ...@@ -642,6 +642,7 @@ hr.divide {
// system notifications // system notifications
.toast-notification { .toast-notification {
@include transition(all 0.2s linear 0);
display: none; display: none;
position: fixed; position: fixed;
top: 20px; top: 20px;
...@@ -657,7 +658,6 @@ hr.divide { ...@@ -657,7 +658,6 @@ hr.divide {
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 0.1s ease-out 0);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -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 0.15s ease-in-out 0);
@include border-bottom-radius(3px); @include border-bottom-radius(3px);
position: absolute; position: absolute;
top: -3px; top: -3px;
......
cms/static/sass/_mixins-inherited.scss
...@@ -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 transition(background-color 0.15s, box-shadow 0.15s);
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);
display: inline-block; display: inline-block;
padding: ($baseline/5) $baseline ($baseline/4); padding: ($baseline/5) $baseline ($baseline/4);
font-weight: 700; font-weight: 700;
......
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/_footer.scss
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
background: transparent; background: transparent;
[class^="icon-"] { [class^="icon-"] {
@include transition(top .25s ease-in-out .25s); @include transition(top 0.25s 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/_header.scss
...@@ -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 0.25s ease-in-out 0);
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/_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 0.05s ease-in-out 0);
position: fixed; position: fixed;
top: 0; top: 0;
background: $black-t0; background: $black-t0;
...@@ -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 0);
@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);
...@@ -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 0);
@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;
......
cms/static/sass/views/_account.scss
...@@ -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 0.15s linear 0);
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 0.15s ease-in-out 0);
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 0.15s ease-in-out 0);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: $gray-l3; color: $gray-l3;
......
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 2.0s ease-in-out .25s);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -55,13 +55,13 @@ body.course.checklists { ...@@ -55,13 +55,13 @@ body.course.checklists {
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 0.15s ease-in-out 0);
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 0.15s ease-in-out 0);
@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 transition(border 0.15s ease-in-out .25s);
box-shadow: inset 0 1px 1px $shadow-l1; box-shadow: inset 0 1px 1px $shadow-l1;
@include transition(border .15s ease-in-out .25s);
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;
...@@ -208,8 +208,8 @@ body.course.checklists { ...@@ -208,8 +208,8 @@ body.course.checklists {
overflow: hidden; overflow: hidden;
.task { .task {
@include transition(background .15s ease-in-out .25s); @include transition(background 0.15s ease-in-out 0);
@include transition(border .15s ease-in-out .25s); @include transition(border 0.15s ease-in-out 0);
@include clearfix(); @include clearfix();
position: relative; position: relative;
border-top: 1px solid $white; border-top: 1px solid $white;
...@@ -239,7 +239,7 @@ body.course.checklists { ...@@ -239,7 +239,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 0.15s ease-in-out 0);
vertical-align: baseline; vertical-align: baseline;
cursor: pointer; cursor: pointer;
margin-bottom: 0; margin-bottom: 0;
...@@ -247,20 +247,20 @@ body.course.checklists { ...@@ -247,20 +247,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 0.15s ease-in-out 0);
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 0.15s ease-in-out 0);
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 0.15s ease-in-out 0.25s);
@include clearfix(); @include clearfix();
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -274,7 +274,6 @@ body.course.checklists { ...@@ -274,7 +274,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/_index.scss
...@@ -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 0.25s ease-in-out 0);
position: absolute; position: absolute;
bottom: -30px; bottom: -30px;
right: ($baseline/2); right: ($baseline/2);
...@@ -214,7 +214,7 @@ body.index { ...@@ -214,7 +214,7 @@ body.index {
.proofpoint { .proofpoint {
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(color .50s ease-in-out); @include transition(all 0.25s ease-in-out 0);
border-radius: ($baseline/4); border-radius: ($baseline/4);
position: relative; position: relative;
top: 0; top: 0;
...@@ -233,6 +233,7 @@ body.index { ...@@ -233,6 +233,7 @@ body.index {
} }
&:hover { &:hover {
@extend .fake-link;
box-shadow: 0 1px ($baseline/10) $shadow-l1; 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
...@@ -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 transition(opacity 0.15s linear 0);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
@include transition(opacity .15s);
z-index: 1; z-index: 1;
display: none; display: none;
opacity: 0.0; opacity: 0.0;
...@@ -246,8 +246,8 @@ body.course.outline { ...@@ -246,8 +246,8 @@ body.course.outline {
} }
.section-name-span { .section-name-span {
@include transition(color 0.15s linear 0);
cursor: pointer; cursor: pointer;
@include transition(color .15s);
&:hover { &:hover {
color: $orange; color: $orange;
...@@ -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 transition(opacity 0.15s linear 0, display 0.15s linear 0);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
@include transition(opacity .15s);
@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 0.15s linear 0);
cursor: pointer; cursor: pointer;
@include transition(color .15s);
&:hover { &:hover {
color: $orange; color: $orange;
......
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 0.15s ease-in-out 0);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: $gray-l3; color: $gray-l3;
...@@ -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 0.15s ease-in-out 0);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
font-weight: 400; font-weight: 400;
...@@ -714,7 +714,7 @@ body.course.settings { ...@@ -714,7 +714,7 @@ body.course.settings {
} }
.tip { .tip {
@include transition (opacity 0.5s ease-in-out 0s); @include transition(opacity 0.5s ease-in-out 0s);
opacity: 0.0; opacity: 0.0;
position: absolute; position: absolute;
bottom: ($baseline*1.25); bottom: ($baseline*1.25);
......
cms/static/sass/views/_static-pages.scss
...@@ -137,11 +137,11 @@ body.course.static-pages { ...@@ -137,11 +137,11 @@ body.course.static-pages {
} }
.xmodule_display { .xmodule_display {
@include transition(background-color 3.0s linear 0);
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 {
...@@ -186,12 +186,12 @@ body.course.static-pages { ...@@ -186,12 +186,12 @@ 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;
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;
......
cms/static/sass/views/_subsection.scss
...@@ -335,6 +335,7 @@ body.course.subsection { ...@@ -335,6 +335,7 @@ body.course.subsection {
} }
.menu { .menu {
@include transition(opacity 0.15s linear 0);
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: -12px; top: -12px;
...@@ -349,7 +350,6 @@ body.course.subsection { ...@@ -349,7 +350,6 @@ body.course.subsection {
font-size: 12px; font-size: 12px;
border-radius: 4px; border-radius: 4px;
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/_unit.scss
...@@ -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 0.15s linear 0);
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 0.15s linear 0);
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 0.15s linear 0);
float: right; float: right;
position: relative; position: relative;
top: 3px; top: 3px;
...@@ -507,7 +507,7 @@ body.course.unit { ...@@ -507,7 +507,7 @@ body.course.unit {
@include blue-button; @include blue-button;
&.is-set { &.is-set {
@include transition(box-shadow 0.5 ease-in-out); @include transition(box-shadow 0.5s ease-in-out 0);
@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;
......
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 0, border-color 0.25s ease-in-out 0, background 0.25s ease-in-out 0, box-shadow 0.25s ease-in-out 0);
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
......
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