Skip to content

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

Studio: abstracts and formalizes set animation/transition Sass variables

parent d046fdf7
Showing with 67 additions and 57 deletions
cms/static/sass/_base.scss
......@@ -19,7 +19,7 @@ body, input, button {
}
a {
@include transition(color 0.15s ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0);
text-decoration: none;
color: $blue;
......@@ -642,7 +642,7 @@ hr.divide {
// system notifications
.toast-notification {
@include transition(all 0.2s linear 0);
@include transition(all $tmg-f2 linear 0);
display: none;
position: fixed;
top: 20px;
......@@ -794,7 +794,7 @@ hr.divide {
.tooltip {
@include font-size(12);
@include transition(opacity 0.1s ease-out 0);
@include transition(opacity $tmg-f3 ease-out 0);
position: absolute;
top: 0;
left: 0;
......@@ -867,7 +867,7 @@ body.js {
background: $white;
.action-modal-close {
@include transition(top 0.15s ease-in-out 0);
@include transition(top $tmg-f3 ease-in-out 0);
@include border-bottom-radius(3px);
position: absolute;
top: -3px;
......
cms/static/sass/_variables.scss
......@@ -161,6 +161,17 @@ $shadow-d2: rgba($black, 0.6);
// ====================
// timing - used for animation/transition 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
$notification-height: ($baseline*10);
......
cms/static/sass/assets/_anims.scss
......@@ -18,7 +18,7 @@
// canned animation - use if you want out of the box/non-customized anim
.anim-fadeIn {
@include animation(fadeIn 0.25s linear 1);
@include animation(fadeIn $tmg-f2 linear 1);
}
......@@ -39,7 +39,7 @@
// canned animation - use if you want out of the box/non-customized anim
.anim-fadeOut {
@include animation(fadeOut 0.25s linear 1);
@include animation(fadeOut $tmg-f2 linear 1);
}
......@@ -63,7 +63,7 @@
// canned animation - use if you want out of the box/non-customized anim
.anim-rotateUp {
@include animation(rotateUp 0.25s ease-in-out 1);
@include animation(rotateUp $tmg-f2 ease-in-out 1);
}
......@@ -84,7 +84,7 @@
// canned animation - use if you want out of the box/non-customized anim
.anim-rotateDown {
@include animation(rotateDown 0.25s ease-in-out 1);
@include animation(rotateDown $tmg-f2 ease-in-out 1);
}
......@@ -105,7 +105,7 @@
// canned animation - use if you want out of the box/non-customized anim
.anim-rotateCW {
@include animation(rotateCW 1.0s linear infinite);
@include animation(rotateCW $tmg-s1 linear infinite);
}
......@@ -126,7 +126,7 @@
// canned animation - use if you want out of the box/non-customized anim
.anim-rotateCCW {
@include animation(rotateCCW 1.0s linear infinite);
@include animation(rotateCCW $tmg-s1 linear infinite);
}
......@@ -186,7 +186,7 @@
// canned animation - use if you want out of the box/non-customized anim
.anim-bounceIn {
@include animation(bounceIn 0.5s ease-in-out 1);
@include animation(bounceIn $tmg-f1 ease-in-out 1);
}
......@@ -209,5 +209,5 @@
// canned animation - use if you want out of the box/non-customized anim
.anim-bounceOut {
@include animation(bounceOut 0.5s ease-in-out 1);
@include animation(bounceOut $tmg-f1 ease-in-out 1);
}
cms/static/sass/elements/_footer.scss
......@@ -49,7 +49,7 @@
background: transparent;
[class^="icon-"] {
@include transition(top 0.25s ease-in-out 0.25s);
@include transition(top $tmg-f2 ease-in-out 0.25s);
@include font-size(15);
display: inline-block;
vertical-align: middle;
......
cms/static/sass/elements/_header.scss
......@@ -77,7 +77,7 @@
.title {
@extend .t-action2;
@extend .btn-dd-nav-primary;
@include transition(all 0.25s ease-in-out 0);
@include transition(all $tmg-f2 ease-in-out 0);
.label, .icon-caret-down {
......@@ -160,7 +160,7 @@
// entire link
.course-link {
@include transition(color 0.25s ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0);
display: block;
color: $gray-d1;
......
cms/static/sass/elements/_navigation.scss
......@@ -33,7 +33,7 @@ nav {
}
.ui-toggle-dd {
@include transition(all 0.25s ease-in-out 0);
@include transition(all $tmg-f2 ease-in-out 0);
margin-left: ($baseline/10);
display: inline-block;
vertical-align: middle;
......@@ -58,7 +58,7 @@ nav {
}
.wrapper-nav-sub {
@include transition (opacity 0.25s ease-in-out 0s);
@include transition(opacity $tmg-f2 ease-in-out 0s);
position: absolute;
top: ($baseline*2.5);
opacity: 0.0;
......
cms/static/sass/elements/_system-feedback.scss
......@@ -145,7 +145,7 @@
// prompts
.wrapper-prompt {
@extend .depth5;
@include transition(all 0.05s ease-in-out 0);
@include transition(all $tmg-f3 ease-in-out 0);
position: fixed;
top: 0;
background: $black-t0;
......@@ -437,7 +437,7 @@
&.saving {
[class^="icon"] {
@include animation(rotateCW 3.0s linear infinite);
@include animation(rotateCW $tmg-s3 linear infinite);
width: 25px;
margin: -4px 10px 0 0;
@include transform-origin(52% 60%);
......@@ -644,7 +644,7 @@
pointer-events: auto;
.prompt {
@include animation(bounceIn 0.5s ease-in-out 1);
@include animation(bounceIn $tmg-f1 ease-in-out 1);
}
}
}
......@@ -660,7 +660,7 @@
.wrapper-prompt {
.prompt {
@include animation(bounceOut 0.5s ease-in-out 1);
@include animation(bounceOut $tmg-f1 ease-in-out 1);
}
}
}
......@@ -680,12 +680,12 @@
// varying animations
&.is-shown {
@include animation(notificationSlideUp 1.0s ease-in-out 1);
@include animation(notificationSlideUp $tmg-s1 ease-in-out 1);
@include animation-fill-mode(forwards);
}
&.is-hiding {
@include animation(notificationSlideDown 1.0s ease-in-out 1);
@include animation(notificationSlideDown $tmg-s1 ease-in-out 1);
@include animation-fill-mode(forwards);
}
}
......
cms/static/sass/elements/_system-help.scss
......@@ -14,7 +14,7 @@
.copy {
@extend .t-copy-sub1;
@include transition(opacity 0.25s ease-in-out 0);
@include transition(opacity $tmg-f2 ease-in-out 0);
opacity: 0.75;
}
......
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 0.15s linear 0);
@include transition(all $tmg-f3 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 0);
@include transition(color $tmg-f3 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 0);
@include transition(color $tmg-f3 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 2.0s ease-in-out .25s);
@include transition(width $tmg-s2 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 0.15s ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0);
width: flex-grid(6, 9);
margin: 0 flex-gutter() 0 0;
float: left;
.ui-toggle-expansion {
@include transition(all 0.15s ease-in-out 0);
@include transition(all $tmg-f2 ease-in-out 0);
@include font-size(21);
display: inline-block;
vertical-align: middle;
......@@ -118,7 +118,7 @@ body.course.checklists {
// checklist actions
.course-checklist-actions {
@include clearfix();
@include transition(border 0.15s ease-in-out .25s);
@include transition(border $tmg-f2 ease-in-out .25s);
box-shadow: inset 0 1px 1px $shadow-l1;
border-top: 1px solid $gray-l2;
padding: $baseline ($baseline*1.5);
......@@ -208,8 +208,7 @@ body.course.checklists {
overflow: hidden;
.task {
@include transition(background 0.15s ease-in-out 0);
@include transition(border 0.15s ease-in-out 0);
@include transition(background $tmg-f2 ease-in-out 0, border $tmg-f3 ease-in-out 0);
@include clearfix();
position: relative;
border-top: 1px solid $white;
......@@ -239,7 +238,7 @@ body.course.checklists {
font-weight: 500;
.task-name {
@include transition(color 0.15s ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0);
vertical-align: baseline;
cursor: pointer;
margin-bottom: 0;
......@@ -247,20 +246,20 @@ body.course.checklists {
.task-description {
@extend .t-copy-sub1;
@include transition(color 0.15s ease-in-out 0);
@include transition(color $tmg-f2 ease-in-out 0);
color: $gray-l2;
}
.task-support {
@extend .t-copy-sub2;
@include transition(opacity 0.15s ease-in-out 0);
@include transition(opacity $tmg-f2 ease-in-out 0);
opacity: 0.0;
pointer-events: none;
}
}
.task-actions {
@include transition(opacity 0.15s ease-in-out 0.25s);
@include transition(opacity $tmg-f2 ease-in-out 0.25s);
@include clearfix();
display: inline-block;
vertical-align: middle;
......
cms/static/sass/views/_index.scss
......@@ -151,7 +151,7 @@ body.index {
background: $white;
.action-zoom {
@include transition(bottom 0.25s ease-in-out 0);
@include transition(bottom $tmg-f2 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(all 0.25s ease-in-out 0);
@include transition(all $tmg-f2 ease-in-out 0);
border-radius: ($baseline/4);
position: relative;
top: 0;
......
cms/static/sass/views/_outline.scss
......@@ -64,7 +64,7 @@ body.course.outline {
.menu {
@include font-size(12);
@include transition(opacity 0.15s linear 0);
@include transition(opacity $tmg-f2 linear 0);
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 0.15s linear 0);
@include transition(color $tmg-f2 linear 0);
cursor: pointer;
&:hover {
......@@ -342,7 +342,7 @@ body.course.outline {
.menu {
@include font-size(12);
@include transition(opacity 0.15s linear 0, display 0.15s linear 0);
@include transition(opacity $tmg-f2 linear 0, display $tmg-f2 linear 0);
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 0.15s linear 0);
@include transition(color $tmg-f2 linear 0);
cursor: pointer;
&:hover {
......
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 0);
@include transition(color $tmg-f2 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 0);
@include transition(color $tmg-f2 ease-in-out 0);
margin: 0 0 ($baseline/4) 0;
font-weight: 400;
......@@ -713,7 +713,7 @@ body.course.settings {
}
.tip {
@include transition(opacity 0.5s ease-in-out 0s);
@include transition(opacity $tmg-f1 ease-in-out 0s);
opacity: 0.0;
position: absolute;
bottom: ($baseline*1.25);
......
cms/static/sass/views/_static-pages.scss
......@@ -137,7 +137,7 @@ body.course.static-pages {
}
.xmodule_display {
@include transition(background-color 3.0s linear 0);
@include transition(background-color $tmg-s3 linear 0);
padding: 20px 20px 22px;
font-size: 24px;
font-weight: 300;
......
cms/static/sass/views/_subsection.scss
......@@ -335,7 +335,7 @@ body.course.subsection {
}
.menu {
@include transition(opacity 0.15s linear 0);
@include transition(opacity $tmg-f2 linear 0);
z-index: 1;
position: absolute;
top: -12px;
......
cms/static/sass/views/_unit.scss
......@@ -256,7 +256,7 @@ body.course.unit {
color: #3c3c3c;
&:hover {
@include transition(background-color 0.15s linear 0);
@include transition(background-color $tmg-f2 linear 0);
background: tint($green,30%);
color: #fff;
}
......@@ -291,7 +291,7 @@ body.course.unit {
float: left;
[class^="icon-"] {
@include transition(opacity 0.15s linear 0);
@include transition(opacity $tmg-f2 linear 0);
display: inline-block;
top: 1px;
margin-right: 5px;
......@@ -303,7 +303,7 @@ body.course.unit {
}
.editor-indicator {
@include transition(opacity 0.15s linear 0);
@include transition(opacity $tmg-f2 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.5s ease-in-out 0);
@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 +587,7 @@ body.course.unit {
}
&:hover {
@include transition(opacity 0.25s ease-in-out);
@include transition(opacity $tmg-f2 ease-in-out);
opacity: 1.0;
}
......@@ -612,7 +612,7 @@ body.course.unit {
label.setting-label {
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
@include transition(color $tmg-f2 ease-in-out 0s);
font-weight: 400;
vertical-align: middle;
display: inline-block;
......@@ -673,7 +673,7 @@ body.course.unit {
&:focus {
box-shadow: 0 0 1px $shadow;
@include transition(opacity 0.25s ease-in-out);
@include transition(opacity $tmg-f2 ease-in-out 0);
background-color: $yellow;
}
......@@ -698,7 +698,7 @@ body.course.unit {
&:hover {
box-shadow: 0 1px 1px $shadow;
@include transition(opacity 0.15s ease-in-out);
@include transition(opacity $tmg-f2 ease-in-out 0);
background-color: $blue-s3;
border: 1px solid $blue-s3;
color: $white;
......@@ -956,7 +956,7 @@ body.unit {
&:hover {
@include transition(opacity 0.25s ease-in-out);
@include transition(opacity $tmg-f2 ease-in-out 0);
opacity: 1.0s;
}
}
......
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