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

Convert some sass vars that darken/lighten to css 

closes: CNVS-38396, CNVS-38397, CNVS-38405, CNVS-38404, CNVS-38394

refs: CNVS-38400, CNVS-38403

Test plan:

* the places that use these css variables should still look like they
  Did before.
* especially check in ie11

- the only place that appears to still be using the original
  accordion styles is within the right sidebar for pages,
  assignments editing, etc...
- example view: https://screencast.com/t/DrwOKmQkmCtu

Change-Id: I3e6329912e7c2bdd69bce8628ac466d4b7247725
Reviewed-on: https://gerrit.instructure.com/120775
Tested-by: Jenkins
QA-Review: Tucker McKnight <tmcknight@instructure.com>
Reviewed-by: Simon Williams <simon@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
This commit is contained in:
Ryan Shaw 2017-07-27 15:35:02 -06:00
parent c6fe8f7526
commit af074d2c77
8 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/stylesheets/bundles/gradebook_uploads.scss
View File

@ -78,7 +78,7 @@
}
.slick-cell.editable, .slick-cell.active {
box-shadow: 0 0 5px lighten($ic-brand-primary, 10);
box-shadow: 0 0 5px var(--ic-brand-primary-lightened-10);
border: 1px solid var(--ic-brand-primary);
}

8
app/stylesheets/components/_accordion.scss
View File

@ -124,12 +124,12 @@ Simply add the **.ui-accordion--mini** class to the parent **.accordion** elemen
&.ui-state-active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: darken($ic-brand-primary, 5%);
border-bottom: 1px solid darken($ic-brand-primary, 5%);
border-color: var(--ic-brand-primary-darkened-5);
border-bottom: 1px solid var(--ic-brand-primary-darkened-5);
background: var(--ic-brand-primary);
&.ui-state-focus {
border-color: darken($ic-brand-primary, 10%);
border-bottom: 1px solid darken($ic-brand-primary, 10%);
border-color: var(--ic-brand-primary-darkened-10);
border-bottom: 1px solid var(--ic-brand-primary-darkened-10);
a { @include button-focus-dark; }
}
}

3
app/stylesheets/components/_ic-range-input.scss
View File

@ -18,9 +18,8 @@
.RangeInput {
$range-input-handle-color: $ic-brand-primary;
$range-input-handle-color-hover: darken($ic-brand-primary, 10%);
$range-input-handle-color-hover: var(--ic-brand-primary-darkened-10);
$range-input-handle-border-color-focused: darken($ic-brand-primary, 50%);
$range-input-handle-size: 20px;
$range-input-handle-shadow: 0 3px 6px rgba(black, 0.3);

2
app/stylesheets/components/_ic-typography.scss
View File

@ -120,7 +120,7 @@ a.text-warning:hover { color: darken($ic-color-alert, 10%); }
a.text-error:hover { color: darken($ic-color-danger, 10%); }
.text-info { color: var(--ic-brand-primary); }
a.text-info:hover { color: darken($ic-brand-primary, 10%); }
a.text-info:hover { color: var(--ic-brand-primary-darkened-10); }
.text-success { color: $ic-color-success; }
a.text-success:hover { color: darken($ic-color-success, 10%); }

2
app/stylesheets/pages/conversations/_conversations_new.scss
View File

@ -331,7 +331,7 @@ h2.subject {
&.read {
background: var(--ic-brand-primary);
border: 1px solid darken($ic-brand-primary, 10);
border: 1px solid var(--ic-brand-primary-darkened-10);
@if $use_high_contrast {
background: $ic-color-light;
border: 1px solid $ic-color-dark;

2
app/stylesheets/pages/quizzes/_quizzes.scss
View File

@ -1135,7 +1135,7 @@ ul#question_list {
margin-right: 4px;
}
&.answered a {
color: darken($ic-brand-primary, 15);
color: var(--ic-brand-primary-darkened-15);
}
&.answered.current_question a {
color: #396eb2;

4
app/stylesheets/pages/react_files/_FilePreview.scss
View File

@ -142,7 +142,7 @@ $preview-html-background: whitesmoke;
&:hover, &:focus {
background: rgba(white, 0.1);
border-bottom-color: lighten($ic-brand-primary, 15%);
border-bottom-color: var(--ic-brand-primary-lightened-15);
}
&.ef-file-preview-button--active {
@ -201,7 +201,7 @@ a.ef-file-preview-button, button.ef-file-preview-button div {
padding: 20px 10px 24px;
text-align: center;
&:hover, &:focus {
border-color: lighten($ic-brand-primary, 15%);
border-color: var(--ic-brand-primary-lightened-15);
background: transparent;
}
i {

2
app/stylesheets/vendor/jqueryui/_jquery.ui.datepicker.scss vendored
View File

@ -148,7 +148,7 @@
&.ui-state-default.ui-state-active {
background: var(--ic-brand-primary);
color: $ic-color-light;
border-color: darken($ic-brand-primary, 10%);
border-color: var(--ic-brand-primary-darkened-10);
text-shadow: none;
}
}