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 {
}
a {
@include transition(color 0.15s ease-in-out 0);
text-decoration: none;
color: $blue;
@include transition(color 0.25s ease-in-out);
&:hover {
color: $orange-d1;
......@@ -642,6 +642,7 @@ hr.divide {
// system notifications
.toast-notification {
@include transition(all 0.2s linear 0);
display: none;
position: fixed;
top: 20px;
......@@ -657,7 +658,6 @@ hr.divide {
font-size: 13px;
text-align: center;
color: #fff;
@include transition(all .2s);
p, span {
color: #fff;
......@@ -794,7 +794,7 @@ hr.divide {
.tooltip {
@include font-size(12);
@include transition(opacity 0.1s ease-out);
@include transition(opacity 0.1s ease-out 0);
position: absolute;
top: 0;
left: 0;
......@@ -867,7 +867,7 @@ body.js {
background: $white;
.action-modal-close {
@include transition(top .25s ease-in-out);
@include transition(top 0.15s ease-in-out 0);
@include border-bottom-radius(3px);
position: absolute;
top: -3px;
......
cms/static/sass/_mixins-inherited.scss
......@@ -120,8 +120,8 @@
// mixins - grandfathered
@mixin button {
@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);
@include transition(background-color .15s, box-shadow .15s);
display: inline-block;
padding: ($baseline/5) $baseline ($baseline/4);
font-weight: 700;
......
cms/static/sass/assets/_graphics.scss
.expand-collapse-icon {
@include transition(none);
position: relative;
display: inline-block;
width: 9px;
height: 11px;
margin-right: 10px;
background: url(../img/expand-collapse-icons.png) no-repeat;
@include transition(none);
&.expand {
top: 1px;
......@@ -101,7 +101,7 @@
background: url(../img/edit-icon.png) no-repeat;
&.white {
background: url(../img/edit-icon-white.png) no-repeat;
background: url(../img/edit-icon-white.png) no-repeat;
}
}
......@@ -132,7 +132,7 @@
background: url(../img/delete-icon.png) no-repeat;
&.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 @@
background: transparent;
[class^="icon-"] {
@include transition(top .25s ease-in-out .25s);
@include transition(top 0.25s ease-in-out 0.25s);
@include font-size(15);
display: inline-block;
vertical-align: middle;
......
cms/static/sass/elements/_header.scss
......@@ -160,7 +160,7 @@
// entire link
.course-link {
@include transition(color 0.25s ease-in-out);
@include transition(color 0.25s ease-in-out 0);
display: block;
color: $gray-d1;
......@@ -310,7 +310,6 @@
.action-signup {
@include blue-button;
@include transition(all .15s);
@include font-size(14);
padding: ($baseline/4) ($baseline/2);
text-transform: uppercase;
......@@ -319,7 +318,6 @@
.action-signin {
@include white-button;
@include transition(all .15s);
@include font-size(14);
padding: ($baseline/4) ($baseline/2);
text-transform: uppercase;
......
cms/static/sass/elements/_system-feedback.scss
......@@ -145,7 +145,7 @@
// prompts
.wrapper-prompt {
@extend .depth5;
@include transition(all 0.05s ease-in-out);
@include transition(all 0.05s ease-in-out 0);
position: fixed;
top: 0;
background: $black-t0;
......@@ -364,7 +364,7 @@
}
[class^="icon"] {
@include transition (color 0.5s ease-in-out);
@include transition (color 0.50s ease-in-out 0);
@include font-size(22);
width: flex-grid(1, 12);
height: ($baseline*1.25);
......@@ -531,7 +531,7 @@
}
[class^="icon"] {
@include transition (color 0.5s ease-in-out);
@include transition (color 0.50s ease-in-out 0);
@include font-size(22);
width: flex-grid(1, 12);
margin: ($baseline/4) flex-gutter() 0 0;
......
cms/static/sass/views/_account.scss
......@@ -70,7 +70,7 @@ body.signup, body.signin {
.action-primary {
@include blue-button;
@extend .t-action2;
@include transition(all .15s);
@include transition(all 0.15s linear 0);
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, 0.15s, ease-in-out);
@include transition(color 0.15s ease-in-out 0);
margin: 0 0 ($baseline/4) 0;
&.is-focused {
......@@ -172,7 +172,7 @@ body.signup, body.signin {
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
@include transition(color 0.15s ease-in-out 0);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
......
cms/static/sass/views/_checklists.scss
......@@ -31,7 +31,7 @@ body.course.checklists {
background: $gray-l4;
.viz-checklist-status-value {
@include transition(width 2s ease-in-out .25s);
@include transition(width 2.0s ease-in-out .25s);
position: absolute;
top: 0;
left: 0;
......@@ -55,13 +55,13 @@ body.course.checklists {
padding: $baseline ($baseline*1.5);
.checklist-title {
@include transition(color .15s .25s ease-in-out);
@include transition(color 0.15s ease-in-out 0);
width: flex-grid(6, 9);
margin: 0 flex-gutter() 0 0;
float: left;
.ui-toggle-expansion {
@include transition(rotate .15s ease-in-out .25s);
@include transition(all 0.15s ease-in-out 0);
@include font-size(21);
display: inline-block;
vertical-align: middle;
......@@ -118,8 +118,8 @@ body.course.checklists {
// checklist actions
.course-checklist-actions {
@include clearfix();
@include transition(border 0.15s ease-in-out .25s);
box-shadow: inset 0 1px 1px $shadow-l1;
@include transition(border .15s ease-in-out .25s);
border-top: 1px solid $gray-l2;
padding: $baseline ($baseline*1.5);
background: $gray-l4;
......@@ -208,8 +208,8 @@ body.course.checklists {
overflow: hidden;
.task {
@include transition(background .15s ease-in-out .25s);
@include transition(border .15s ease-in-out .25s);
@include transition(background 0.15s ease-in-out 0);
@include transition(border 0.15s ease-in-out 0);
@include clearfix();
position: relative;
border-top: 1px solid $white;
......@@ -239,7 +239,7 @@ body.course.checklists {
font-weight: 500;
.task-name {
@include transition(color .15s .25s ease-in-out);
@include transition(color 0.15s ease-in-out 0);
vertical-align: baseline;
cursor: pointer;
margin-bottom: 0;
......@@ -247,20 +247,20 @@ body.course.checklists {
.task-description {
@extend .t-copy-sub1;
@include transition(color .15s .25s ease-in-out);
@include transition(color 0.15s ease-in-out 0);
color: $gray-l2;
}
.task-support {
@extend .t-copy-sub2;
@include transition(opacity .15s .25s ease-in-out);
@include transition(opacity 0.15s ease-in-out 0);
opacity: 0.0;
pointer-events: none;
}
}
.task-actions {
@include transition(opacity .15s .25s ease-in-out);
@include transition(opacity 0.15s ease-in-out 0.25s);
@include clearfix();
display: inline-block;
vertical-align: middle;
......@@ -274,7 +274,6 @@ body.course.checklists {
.action-primary {
@include blue-button;
@extend .t-action4;
@include transition(all .15s);
font-weight: 600;
text-align: center;
}
......
cms/static/sass/views/_index.scss
......@@ -151,7 +151,7 @@ body.index {
background: $white;
.action-zoom {
@include transition(bottom .50s ease-in-out);
@include transition(bottom 0.25s ease-in-out 0);
position: absolute;
bottom: -30px;
right: ($baseline/2);
......@@ -214,7 +214,7 @@ body.index {
.proofpoint {
@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);
position: relative;
top: 0;
......@@ -233,6 +233,7 @@ body.index {
}
&:hover {
@extend .fake-link;
box-shadow: 0 1px ($baseline/10) $shadow-l1;
background: $blue-l5;
top: -($baseline/5);
......@@ -319,7 +320,6 @@ body.index {
&.action-primary {
@extend .t-action1;
@include blue-button;
@include transition(all .15s);
padding: ($baseline*0.75) ($baseline/2);
font-weight: 600;
text-align: center;
......
cms/static/sass/views/_outline.scss
......@@ -64,9 +64,9 @@ body.course.outline {
.menu {
@include font-size(12);
@include transition(opacity 0.15s linear 0);
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
@include transition(opacity .15s);
z-index: 1;
display: none;
opacity: 0.0;
......@@ -246,8 +246,8 @@ body.course.outline {
}
.section-name-span {
@include transition(color 0.15s linear 0);
cursor: pointer;
@include transition(color .15s);
&:hover {
color: $orange;
......@@ -342,10 +342,9 @@ body.course.outline {
.menu {
@include font-size(12);
@include transition(opacity 0.15s linear 0, display 0.15s linear 0);
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
@include transition(opacity .15s);
@include transition(display .15s);
z-index: 1;
display: none;
opacity: 0.0;
......@@ -428,9 +427,9 @@ body.course.outline {
}
.expand-collapse-icon {
@include transition(none);
float: left;
margin: 25px 6px 16px 16px;
@include transition(none);
&.expand {
background-position: 0 0;
......@@ -453,8 +452,8 @@ body.course.outline {
}
.section-name-span {
@include transition(color 0.15s linear 0);
cursor: pointer;
@include transition(color .15s);
&:hover {
color: $orange;
......
cms/static/sass/views/_settings.scss
......@@ -98,7 +98,7 @@ body.course.settings {
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
@include transition(color 0.15s ease-in-out 0);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
......@@ -155,7 +155,7 @@ body.course.settings {
label {
@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;
font-weight: 400;
......@@ -714,7 +714,7 @@ body.course.settings {
}
.tip {
@include transition (opacity 0.5s ease-in-out 0s);
@include transition(opacity 0.5s ease-in-out 0s);
opacity: 0.0;
position: absolute;
bottom: ($baseline*1.25);
......
cms/static/sass/views/_static-pages.scss
......@@ -137,11 +137,11 @@ body.course.static-pages {
}
.xmodule_display {
@include transition(background-color 3.0s linear 0);
padding: 20px 20px 22px;
font-size: 24px;
font-weight: 300;
background: #fff;
@include transition(background-color 3s);
}
.static-page-item {
......@@ -186,12 +186,12 @@ body.course.static-pages {
.page-contents {
@include box-sizing(border-box);
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
width: 100%;
height: 360px;
padding: 15px;
border: 1px solid #b0b6c2;
border-radius: 2px;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
background-color: #edf1f5;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
font-family: Monaco, monospace;
......
cms/static/sass/views/_subsection.scss
......@@ -335,6 +335,7 @@ body.course.subsection {
}
.menu {
@include transition(opacity 0.15s linear 0);
z-index: 1;
position: absolute;
top: -12px;
......@@ -349,7 +350,6 @@ body.course.subsection {
font-size: 12px;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
@include transition(opacity .15s);
li {
......
cms/static/sass/views/_unit.scss
......@@ -250,15 +250,15 @@ body.course.unit {
.new-component-template {
a {
@include transition(none);
background: #fff;
border: 0px;
color: #3c3c3c;
@include transition (none);
&:hover {
@include transition(background-color 0.15s linear 0);
background: tint($green,30%);
color: #fff;
@include transition(background-color .15s);
}
}
......@@ -291,7 +291,7 @@ body.course.unit {
float: left;
[class^="icon-"] {
@include transition(opacity .15s);
@include transition(opacity 0.15s linear 0);
display: inline-block;
top: 1px;
margin-right: 5px;
......@@ -303,7 +303,7 @@ body.course.unit {
}
.editor-indicator {
@include transition(opacity .15s);
@include transition(opacity 0.15s linear 0);
float: right;
position: relative;
top: 3px;
......@@ -507,7 +507,7 @@ body.course.unit {
@include blue-button;
&.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);
color: $blue-d1;
box-shadow: inset 0 1px 2px 1px $shadow-l1;
......
common/static/sass/_mixins.scss
......@@ -117,7 +117,7 @@
// extends - buttons
.btn {
@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;
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