78ef8db40a
AC-727 began changing colors in course content, files and uploads, and when creating a course finished fixing contrast issues on files and uploads page fixed advanced settings and issue with hovering in files and uploads fixed color issues in studio home page and when hovering fixed contrast in updates, pages, textbooks, and group configurations fixed issues when configuring a section of a course in course outline fixed hovering colors to make contrast more visible fixed colors on the green button AC-727
518 lines
10 KiB
SCSS
518 lines
10 KiB
SCSS
// studio - elements - UI controls
|
|
// ====================
|
|
|
|
// Table of Contents
|
|
// * +General Action - Extend
|
|
// * +General Type and Size - Extend
|
|
// * +Primary Button - Extends
|
|
// * +Secondary Button - Extends
|
|
// * +Button
|
|
// * +UI Dropdown Button - Extend
|
|
// * +UI Nav Dropdown Button - Extend
|
|
// * +UI Actions List - Extend
|
|
// * +UI Expand/Collapse - Extend
|
|
// * +Drag and Drop
|
|
|
|
|
|
|
|
// +General Action - Extend
|
|
// ====================
|
|
%action {
|
|
@extend %ui-fake-link;
|
|
|
|
&.is-disabled {
|
|
@extend %ui-disabled;
|
|
-webkit-filter: grayscale(65%);
|
|
opacity: 0.65;
|
|
}
|
|
}
|
|
|
|
// +General Type and Size - Extend
|
|
// ====================
|
|
%sizing {
|
|
@extend %t-action4;
|
|
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
|
|
}
|
|
|
|
|
|
// +Primary Button - Extends
|
|
// ====================
|
|
// gray primary button
|
|
%btn-primary-gray {
|
|
@extend %ui-btn-primary;
|
|
background: $gray-l1;
|
|
border-color: $gray-l2;
|
|
color: $white;
|
|
|
|
&:hover, &:active {
|
|
border-color: $gray-l1;
|
|
background: $gray;
|
|
}
|
|
|
|
&.current, &.active {
|
|
background: $gray-d1;
|
|
color: $gray-l1;
|
|
|
|
&:hover, &:active {
|
|
background: $gray-d1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// blue primary button
|
|
%btn-primary-blue {
|
|
@extend %ui-btn-primary;
|
|
background: $uxpl-blue-base;
|
|
border-color: $uxpl-blue-base;
|
|
color: $white;
|
|
|
|
&:hover, &:active {
|
|
background: $uxpl-blue-hover-active;
|
|
border-color: $uxpl-blue-hover-active;
|
|
}
|
|
|
|
&.current, &.active {
|
|
background: $uxpl-blue-hover-active;
|
|
border-color: $uxpl-blue-hover-active;
|
|
color: $blue-l4;
|
|
|
|
&:hover, &:active {
|
|
background: $uxpl-blue-hover-active;
|
|
}
|
|
}
|
|
}
|
|
|
|
// green primary button
|
|
%btn-primary-green {
|
|
@extend %ui-btn-primary;
|
|
background: $uxpl-green-base;
|
|
border-color: $uxpl-green-base;
|
|
color: $white;
|
|
|
|
&:hover, &:active {
|
|
background: $uxpl-green-dark-hover-active;
|
|
border-color: $uxpl-green-dark-hover-active;
|
|
}
|
|
|
|
&.current, &.active {
|
|
background: $uxpl-green-dark-hover-active;
|
|
color: $white;
|
|
border-color: $uxpl-green-dark-hover-active;
|
|
|
|
&:hover, &:active {
|
|
background: $uxpl-green-dark-hover-active;
|
|
}
|
|
}
|
|
}
|
|
|
|
// +Secondary Button - Extends
|
|
// ====================
|
|
// gray secondary button
|
|
%btn-secondary-gray {
|
|
@extend %ui-btn-secondary;
|
|
border-color: $gray-l3;
|
|
color: $gray-d1;
|
|
|
|
&:hover, &:active {
|
|
background: $gray-l3;
|
|
color: $gray-d2;
|
|
}
|
|
|
|
&.current, &.active {
|
|
background: $gray-d2;
|
|
color: $gray-l5;
|
|
|
|
&:hover, &:active {
|
|
background: $gray-d2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// blue secondary button
|
|
%btn-secondary-blue {
|
|
@extend %ui-btn-secondary;
|
|
border-color: $blue-l3;
|
|
color: $uxpl-blue-base;
|
|
|
|
&:hover, &:active {
|
|
background: $blue-l4;
|
|
color: $uxpl-blue-hover-active;
|
|
}
|
|
|
|
&.current, &.active {
|
|
border-color: $blue-l3;
|
|
background: $blue-l3;
|
|
color: $uxpl-blue-base;
|
|
}
|
|
}
|
|
|
|
// white secondary button
|
|
%btn-secondary-white {
|
|
@extend %ui-btn-secondary;
|
|
border-color: $white-t2;
|
|
color: $white-t3;
|
|
|
|
&:hover, &:active {
|
|
border-color: $white;
|
|
color: $white;
|
|
}
|
|
|
|
&.current, &.active {
|
|
background: $gray-d2;
|
|
color: $gray-l5;
|
|
|
|
&:hover, &:active {
|
|
background: $gray-d2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// green secondary button
|
|
%btn-secondary-green {
|
|
@extend %ui-btn-secondary;
|
|
border-color: $green-l4;
|
|
color: $green-l2;
|
|
|
|
&:hover, &:active {
|
|
background: $green-l4;
|
|
color: $green-s1;
|
|
}
|
|
|
|
&.current, &.active {
|
|
background: $green-s1;
|
|
color: $green-l4;
|
|
|
|
&:hover, &:active {
|
|
background: $green-s1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// LMS-style CAPA button for consistency with LMS buttons
|
|
%btn-lms-style {
|
|
border: 1px solid $btn-lms-border;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 1px 0 0 $white;
|
|
color: $gray-d3;
|
|
display: inline-block;
|
|
font-size: inherit;
|
|
font-weight: bold;
|
|
background-color: $btn-lms-background;
|
|
background-image: -webkit-linear-gradient($btn-lms-background,$btn-lms-gradient);
|
|
background-image: linear-gradient($btn-lms-background,$btn-lms-gradient);
|
|
padding: 7px 18px;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px 0 $btn-lms-shadow;
|
|
background-clip: padding-box;
|
|
font-size: 0.8125em;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
box-shadow: inset 0 1px 0 0 $btn-lms-shadow-hover;
|
|
cursor: pointer;
|
|
background-color: $btn-lms-background-hover;
|
|
background-image: -webkit-linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
|
|
background-image: linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
|
|
}
|
|
|
|
&:active {
|
|
border: 1px solid $btn-lms-border;
|
|
box-shadow: inset 0 0 8px 4px $btn-lms-shadow-active,inset 0 0 8px 4px $btn-lms-shadow-active;
|
|
}
|
|
}
|
|
|
|
// +Button Element
|
|
// ====================
|
|
.button {
|
|
|
|
.icon {
|
|
@include margin-right($baseline/4);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
// +UI Dropdown Button - Extend
|
|
// ====================
|
|
%ui-btn-dd {
|
|
@extend %ui-btn;
|
|
@extend %ui-btn-pill;
|
|
padding:($baseline/4) ($baseline/2);
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
text-align: center;
|
|
|
|
&:hover, &:active {
|
|
@extend %ui-fake-link;
|
|
border-color: $gray-l3;
|
|
}
|
|
|
|
&.current, &.active, &.is-selected {
|
|
box-shadow: inset 0 1px 2px 1px $shadow-l1;
|
|
border-color: $gray-l3;
|
|
}
|
|
}
|
|
|
|
// +UI Nav Dropdown Button - Extend
|
|
// ====================
|
|
%ui-btn-dd-nav-primary {
|
|
@extend %ui-btn-dd;
|
|
background: $white;
|
|
border-color: $white;
|
|
color: $gray-d1;
|
|
|
|
&:hover, &:active {
|
|
background: $white;
|
|
color: $uxpl-blue-hover-active;
|
|
}
|
|
|
|
&.current, &.active {
|
|
background: $white;
|
|
color: $gray-d4;
|
|
|
|
&:hover, &:active {
|
|
color: $uxpl-blue-hover-active;
|
|
}
|
|
}
|
|
}
|
|
|
|
// +UI Actions List - Extend
|
|
// ====================
|
|
%actions-list {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
|
|
.action-item {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: ($baseline/10) 0 ($baseline/10) ($baseline/10);
|
|
|
|
.action-button {
|
|
@include transition(all $tmg-f3 linear 0s);
|
|
display: block;
|
|
border-radius: 3px;
|
|
padding: 3px ($baseline/2);
|
|
color: $gray-d1;
|
|
|
|
&:hover {
|
|
background-color: $uxpl-blue-base;
|
|
color: $gray-l6;
|
|
}
|
|
|
|
.action-button-text {
|
|
padding-left: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&.delete-button:hover {
|
|
background-color: $gray-l1;
|
|
}
|
|
|
|
.icon {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.drag-handle {
|
|
display: block;
|
|
float: none;
|
|
height: ($baseline*1.2);
|
|
width: ($baseline);
|
|
margin: 0;
|
|
|
|
// CASE: right to left layout
|
|
@include rtl {
|
|
background: transparent url("#{$static-path}/images/drag-handles.png") no-repeat left center;
|
|
}
|
|
|
|
// CASE: left to right layout
|
|
@include ltr {
|
|
background: transparent url("#{$static-path}/images/drag-handles.png") no-repeat right center;
|
|
}
|
|
}
|
|
|
|
&.toggle-action {
|
|
// TODO: generalize and move checkbox styling in from static-pages and assets sass
|
|
}
|
|
|
|
.btn-default.delete-button {
|
|
border: none;
|
|
}
|
|
|
|
.btn-default.edit-button {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.stack-move-icon {
|
|
font-size: 0.52em;
|
|
|
|
@include rtl {
|
|
.fa-file-o {
|
|
@include transform(rotateY(180deg));
|
|
}
|
|
|
|
.fa-arrow-right {
|
|
@include transform(rotate(180deg));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// +UI Expand/Collapse - Extend
|
|
// ====================
|
|
// TODO: this should be transitioned away from in favor of %ui-expand-collapse
|
|
%expand-collapse {
|
|
@include transition(all $tmg-f2 linear 0s);
|
|
display: inline-block;
|
|
color: $gray-l2;
|
|
vertical-align: top;
|
|
|
|
&:hover {
|
|
color: $uxpl-blue-base;
|
|
}
|
|
|
|
.ui-toggle-expansion {
|
|
@include transition(all $tmg-f2 ease-in-out 0s);
|
|
@include margin-right($baseline/4);
|
|
@extend %t-action1;
|
|
display: inline-block;
|
|
color: $gray-l3;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&.expand .ui-toggle-expansion {
|
|
@include transform(rotate(-90deg));
|
|
@include transform-origin(50% 50%);
|
|
}
|
|
}
|
|
|
|
// +UI Expand/Collapse - Extend
|
|
// ====================
|
|
// will replace %expand-collapse
|
|
%ui-expand-collapse {
|
|
@include transition(all $tmg-f2 linear 0s);
|
|
|
|
|
|
// CASE: default (is expanded)
|
|
.ui-toggle-expansion {
|
|
@include transition(all $tmg-f2 ease-in-out 0s);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
.icon {
|
|
@include transition(all $tmg-f2 ease-in-out 0s);
|
|
}
|
|
|
|
// STATE: hover/active
|
|
&:hover, &:active {
|
|
@extend %ui-fake-link;
|
|
color: $uxpl-blue-base;
|
|
}
|
|
}
|
|
|
|
// CASE: is collapsed
|
|
&.is-collapsed {
|
|
|
|
.ui-toggle-expansion {
|
|
|
|
.icon {
|
|
@include transform(rotate(-90deg));
|
|
@include transform-origin(50% 50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// +Drag and Drop Styling
|
|
// ====================
|
|
|
|
// UI: drag handle
|
|
.drag-handle {
|
|
|
|
&:hover, &:focus {
|
|
cursor: move;
|
|
}
|
|
}
|
|
|
|
// UI: is draggable
|
|
.is-draggable {
|
|
@include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0, margin $tmg-f2 ease-in-out 0);
|
|
position: relative;
|
|
|
|
.draggable-drop-indicator {
|
|
@extend %ui-depth3;
|
|
@include transition(opacity $tmg-f2 linear 0s);
|
|
@include size(100%, auto);
|
|
position: absolute;
|
|
border-top: 1px solid $blue-l1;
|
|
opacity: 0.0;
|
|
|
|
.fa-caret-right {
|
|
@extend %t-icon5;
|
|
position: absolute;
|
|
top: -12px;
|
|
left: -($baseline/4);
|
|
color: $blue-d1;
|
|
}
|
|
}
|
|
|
|
.draggable-drop-indicator-before {
|
|
top: -($baseline/2);
|
|
}
|
|
|
|
.draggable-drop-indicator-after {
|
|
bottom: -($baseline/2);
|
|
}
|
|
}
|
|
|
|
// UI: is dragging - drag state
|
|
.is-dragging {
|
|
@extend %ui-depth4;
|
|
left: -($baseline/4);
|
|
box-shadow: 0 1px 2px 0 $shadow-d1;
|
|
cursor: move;
|
|
opacity: 0.65;
|
|
border: 1px solid $gray-d3;
|
|
|
|
// UI: condition - valid drop
|
|
&.valid-drop {
|
|
border-color: $ui-action-primary-color-focus;
|
|
box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
|
|
}
|
|
}
|
|
|
|
// UI: drag state - was dragging
|
|
.was-dragging {
|
|
@include transition(transform $tmg-f2 ease-in-out 0);
|
|
}
|
|
|
|
// UI: drag target
|
|
.drop-target {
|
|
|
|
&.drop-target-before {
|
|
margin-top: ($baseline*1.5);
|
|
|
|
> .draggable-drop-indicator-before {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
&.drop-target-after {
|
|
margin-bottom: ($baseline*1.5);
|
|
|
|
> .draggable-drop-indicator-after {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// UI: drop state - was dropped
|
|
.was-dropped {
|
|
@include animation(was-dropped $tmg-avg ease-in-out 1);
|
|
border-color: $ui-action-primary-color-focus;
|
|
box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
|
|
}
|