ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Resolve CSS TODOs: _ic-super-toggle.scss 

Fixes: CNVS-38646

test plan:
- as an admin navigate to the account theme editor
- select *any* of the default themes
- within the preview pane of theme editor - scroll down to
  "switch-style checkbox"
- the focus state has been updated - example of new look:
  https://screencast.com/t/IM2oRSLdEpO

Change-Id: Ifaa47fa3b5dae931b4587b654853a4f6e0347bfc
Reviewed-on: https://gerrit.instructure.com/122498
Tested-by: Jenkins
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
QA-Review: Dan Sasaki <dsasaki@instructure.com>
This commit is contained in:
Pam Hiett 2017-08-11 14:15:36 -06:00 committed by Pam Hiett
parent 9165c0a0ff
commit b01e7e7c55
1 changed files with 17 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/stylesheets/components/_ic-super-toggle.scss
View File

@ -67,6 +67,19 @@ See Forms section.
background-color: $toggle-color-switch;
width: $toggle-width/2; height: $toggle-width/2;
}
&::before { // focus outline ring
content: "";
position: absolute;
top: -0.375rem;
left: -0.375rem;
width: calc(100% + 0.75rem);
height: calc(100% + 0.75rem);
box-sizing: border-box;
border: 1px solid var(--ic-brand-primary);
border-radius: $toggle-width/2;
opacity: 0;
}
}
.ic-Super-toggle__option--LEFT {
@ -106,34 +119,14 @@ See Forms section.
}
@include super-toggle-state ('focus') {
.ic-Super-toggle__switch::after { // handle
@if $use_high_contrast {
box-shadow:
inset 0 0 0 3px $ic-link-color,
0 0 0 2px $toggle-color-switch,
0 3px 6px rgba(black, 0.3);
}
@else {
box-shadow:
0 0 0 6px rgba($ic-link-color, 0.4),
0 3px 6px rgba(black, 0.3);
}
.ic-Super-toggle__switch::before { // handle
opacity: 1;
}
}
@include super-toggle-state ('focus:checked') {
.ic-Super-toggle__switch::after { // handle
@if $use_high_contrast {
box-shadow:
inset 0 0 0 3px $ic-link-color,
0 0 0 2px $toggle-color-switch,
0 3px 6px rgba(black, 0.3);
}
@else {
box-shadow:
0 0 0 6px rgba($ic-link-color, 0.4),
0 3px 6px rgba(black, 0.3);
}
.ic-Super-toggle__switch::before { // handle
opacity: 1;
}
}