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

Audit and move vendor/bootstrap/mixins 

Fixes: CNVS-39278

This commit:
- Moves the mixins we want to keep from `/bootstrap/mixins` to
  a new Canvas mixins stylesheet, `base/ic_mixins`

- Removes `/bootstrap/mixins` from `base/environment`, so it is
  no longer loaded on every page

- Removes Bootstrap mixins from non-Bootstrap CSS:
  The only stylesheets that are now using `/bootstrap/mixins`
  are old Bootstrap components. Once they are deleted, we can
  remove `/bootstrap/mixins`.

- Deletes any unused Bootstrap mixins, so they will not be used
  in the future

Test plan:
- Canvas CSS should compile without errors
- Canvas should look exactly the same as before

Change-Id: I01a9ad90f354ca45c9528d860e20ceb4caaceaad
Reviewed-on: https://gerrit.instructure.com/126149
Tested-by: Jenkins
Reviewed-by: Ryan Shaw <ryan@instructure.com>
QA-Review: Dan Sasaki <dsasaki@instructure.com>
Product-Review: Pam Hiett <phiett@instructure.com>
This commit is contained in:
Chris Hart 2017-09-14 14:36:09 -04:00
parent c6bfb7b7bf
commit 4140da636d
25 changed files with 219 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/stylesheets/base/_custom_bootstrap.scss
View File

@ -19,6 +19,8 @@
//add variable modifications to the global _variables.scss
//they will override bootstrap styles
@import "deprecated/bootstrap/mixins";
// Grid system and page structure
@import "vendor/bootstrap/grid";
@import "vendor/bootstrap/layouts";

2
app/stylesheets/base/_environment.scss
View File

@ -25,6 +25,6 @@
// Mixins
//==================
@import "vendor/bootstrap/mixins";
@import "base/ic_mixins";
@import "base/mixins/compile_mixins";
@import "base/mixins/typography";

162
app/stylesheets/base/_ic_mixins.scss Normal file
View File

@ -0,0 +1,162 @@
/*
* Copyright (C) 2017 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
//add variable modifications to the global _variables.scss
//they will override bootstrap styles
// Clearfix - Use to clear floats
@mixin clearfix {
&:before,
&:after {
display: table;
content: "";
line-height: 0;
}
&:after {
clear: both;
}
}
// Accessibility prompts - visible through KO focus
// If the prompt is not a clickable link, set $is-link: false
@mixin accessibility-prompt($is-link: true) {
padding: 4px 8px;
background: var(--ic-link-color);
background-clip: border-box;
text-align: center;
color: $ic-color-light;
text-decoration: none;
border-radius: 4px;
border: 1px dashed rgba($ic-color-light, 0.8);
&:focus {
color: #fff;
}
@if $is-link {
&:focus { text-decoration: underline; }
}
}
// :focus style mixins
@mixin ic-focus-base {
outline-width: 1px;
outline-color: transparent;
outline-style: solid;
}
@mixin ic-focus-variant($color: var(--ic-link-color), $offset: -1px) {
outline-offset: $offset;
outline-color: $color;
}
@mixin button-focus-light {
@if $use_high_contrast { box-shadow: inset 0 0 0 2px var(--ic-link-color); }
@else { box-shadow: inset 0 0 0 1px var(--ic-link-color); }
}
@mixin button-focus-dark {
@if $use_high_contrast { box-shadow: inset 0 0 0 2px $ic-color-light; }
@else { box-shadow: inset 0 0 0 1px $ic-color-light; }
}
// Bootstrap button background - DEPRECATED - DO NOT USE
@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
@include gradientBar($startColor, $endColor, $textColor, $textShadow);
// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] {
color: $textColor;
background-color: $endColor;
}
&:focus {
color: $textColor;
background: $endColor;
text-decoration: none;
}
}
// Button styles for all non-InstUI buttons
@mixin canvas-button(
$button-color,
$text-color,
$button-background-is-lighter-than-text:false,
$button-color-darkened-5:darken($button-color, 5),
$button-color-darkened-15:darken($button-color, 15)
) {
background: $button-color;
color: $text-color;
border: 1px solid;
&:focus { color: $text-color; }
&:hover {
@if $use_high_contrast {
background: darken($ic-color-dark, 20%);
color: $ic-color-light;
}
@else {
background: $button-color-darkened-5;
color: $text-color;
}
// handle jquery UI ui-button conflicts
&.ui-state-hover {
@if $use_high_contrast {
background: darken($ic-color-dark, 20%);
color: $ic-color-light;
}
@else {
background: $button-color-darkened-5;
color: $text-color;
border-color: $button-color-darkened-15;
}
}
}
@if $button-background-is-lighter-than-text {
border-color: $ic-border-color;
&.active, &.Button--active, &:active { box-shadow: none; }
&.active, &.Button--active {
background: darken($button-color, 55%);
border-color: darken($button-color, 65%);
color: $ic-color-light;
}
&:focus { @include button-focus-light; }
// handle jquery UI ui-button states
&.ui-state-focus.ui-state-active {
&:focus { @include button-focus-dark; }
}
&:active { background: darken($button-color, 8%); }
}
@else {
border-color: $button-color-darkened-15;
&:focus { @include button-focus-dark; }
&.active, &.Button--active, &:active {
background: $button-color-darkened-5;
box-shadow: none;
}
}
}

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

@ -87,7 +87,7 @@ thead th {
/* Column striping */
.notification-table-wrapper {
@include transition(margin 0.3s ease);
transition: margin 0.3s ease;
}
@media screen and (max-width: 1300px) {

8
app/stylesheets/bundles/registration.scss
View File

@ -96,8 +96,7 @@ a {
height: 100px;
position: absolute;
content: " ";
@include gradient-vertical(#ffffff, rgba(255, 255, 255, 0));
background-color: transparent;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0.5;
}
@ -180,8 +179,7 @@ a {
font-weight: bold;
text-align: center;
margin-bottom: 1em;
background-image: none;
@include gradient-vertical(#0abcfe, #0090d7);
background: linear-gradient(to bottom, #0abcfe 0%, #0090d7 100%);
border-width: 1px;
border-style: solid;
border-color: #0abcfe #238fe4 #1974c9 #238fe4;
@ -190,7 +188,7 @@ a {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
&:hover, &:focus {
@include gradient-vertical(#09aae5, #0080c0);
background: linear-gradient(to bottom, #09aae5 0%, #0080c0 100%);
outline: none;
}
}

5
app/stylesheets/components/_buttons.scss
View File

@ -224,7 +224,7 @@ listen to the "click" and "keyclick" events and add `tabindex="0"` and `role="bu
width: 100%;
padding-left: 0;
padding-right: 0;
@include box-sizing(border-box);
box-sizing: border-box;
}
// Vertically space out stacked block buttons
@ -286,9 +286,6 @@ input[type="button"] {
}
}
// Inverse appears as dark gray <-- deprecated- do not use
.btn-inverse { @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); }
// Link buttons
// --------------------------------------------------

3
app/stylesheets/components/_g_assignments.scss
View File

@ -244,7 +244,8 @@ $listViewHeaderBackgroundLight: $ic-bg-light-neutral;
padding-left: 25px;
color: #666666;
margin-bottom: 0px;
@include border-top-radius(3px);
border-top-right-radius: 3px;
border-top-left-radius: 3px;
.group_name {
font-size: 1.5em;
font-weight: bold;

3
app/stylesheets/components/_g_instructure.scss
View File

@ -175,7 +175,8 @@
padding: 0px 10px;
border-bottom: 1px solid #aaa;
font-size: 1.2em;
@include border-top-radius(4px);
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.body {
width: auto;

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

@ -259,7 +259,9 @@ dd {
width: $horizontalComponentOffset - 20;
clear: left;
text-align: right;
@include text-overflow();
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
dd {
margin-left: $horizontalComponentOffset;
@ -466,7 +468,9 @@ blockquote {
border-left: 5px solid $ic-border-color;
p {
margin-bottom: 0;
@include font-shorthand(16px,300, 25px);
@include fontSize(16px);
font-weight: 300;
line-height: 25px;
}
small {
display: block;

3
app/stylesheets/components/deprecated/_chevron_crumbs.scss
View File

@ -55,7 +55,8 @@ $crumb_border_radius: 5px;
padding-left: 20px;
padding-right: 10px;
&.first {
@include border-left-radius($crumb_border_radius);
border-top-left-radius: $crumb_border_radius;
border-bottom-left-radius: $crumb_border_radius;
margin-left: 0;
}
}

15
app/stylesheets/components/deprecated/_ui_listview.scss
View File

@ -23,11 +23,20 @@
min-width: 300px;
border-radius: 0.6em;
li:first-child { @include border-top-radius(0.6em); }
li:last-child { @include border-bottom-radius(0.6em); }
li:first-child {
border-top-right-radius: 0.6em;
border-top-left-radius: 0.6em;
}
li:last-child {
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
&.ui-listview-no-rounded-bottom {
&, li:last-child { @include border-bottom-radius(0); }
&, li:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
/* &, li:first-child, li:last-child {

235
app/stylesheets/vendor/bootstrap/_mixins.scss → app/stylesheets/deprecated/bootstrap/_mixins.scss
View File

@ -1,3 +1,5 @@
@import "base/ic_mixins"; // so Bootstrap mixins that need clearfix can still use it
//
// Mixins
// --------------------------------------------------
@ -6,23 +8,6 @@
// UTILITY MIXINS
// --------------------------------------------------
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
@mixin clearfix {
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
// Webkit-style focus
// ------------------
@mixin tab-focus() {
@ -34,24 +19,6 @@
text-decoration: none;
}
// Center-align a block level element
// ----------------------------------
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
// -------------------------
@mixin size($height, $width) {
width: $width;
height: $height;
}
@mixin square($size) {
@include size($size, $size);
}
// Placeholder text
// -------------------------
@mixin placeholder($color: $placeholderText) {
@ -66,15 +33,6 @@
}
}
// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
@mixin text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// CSS image replacement
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
@ -88,34 +46,11 @@
// FONTS
// --------------------------------------------------
@mixin font-family-serif() {
font-family: $serifFontFamily;
}
@mixin font-family-sans-serif() {
font-family: $sansFontFamily;
}
@mixin font-family-monospace() {
font-family: $monoFontFamily;
}
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
@include fontSize($size);
font-weight: $weight;
line-height: $lineHeight;
}
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
@include font-family-serif();
@include font-shorthand($size, $weight, $lineHeight);
}
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
@include font-family-sans-serif();
@include font-shorthand($size, $weight, $lineHeight);
}
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
@include font-family-monospace();
@include font-shorthand($size, $weight, $lineHeight);
}
// FORMS
// --------------------------------------------------
@ -176,21 +111,11 @@
@mixin border-radius($radius) {
border-radius: $radius;
}
// Single Side Border Radius
@mixin border-top-radius($radius) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
@ -216,25 +141,6 @@
box-sizing: $boxmodel;
}
// User select
// For selecting text on the page
@mixin user-select($select) {
user-select: $select;
}
// Resize anything
@mixin resizable($direction) {
resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// Opacity
@mixin opacity($opacity) {
opacity: $opacity / 100;
}
// BACKGROUNDS
// --------------------------------------------------
@ -276,131 +182,6 @@
border-bottom: 1px solid $bottom;
}
// Accessibility prompts (visible through keyboard navigation focus)
// If the prompt is not a clickable link, set $is-link to false when including the mixin
@mixin accessibility-prompt($is-link: true) {
padding: 4px 8px;
background: var(--ic-link-color);
background-clip: border-box;
text-align: center;
color: $ic-color-light;
text-decoration: none;
border-radius: 4px;
border: 1px dashed rgba($ic-color-light, 0.8);
&:focus {
color: #fff;
}
@if $is-link {
&:focus { text-decoration: underline; }
}
}
@mixin ic-focus-base {
outline-width: 1px;
outline-color: transparent;
outline-style: solid;
}
@mixin ic-focus-variant($color: var(--ic-link-color), $offset: -1px) {
outline-offset: $offset;
outline-color: $color;
}
@mixin button-focus-light {
@if $use_high_contrast { box-shadow: inset 0 0 0 2px var(--ic-link-color); }
@else { box-shadow: inset 0 0 0 1px var(--ic-link-color); }
}
@mixin button-focus-dark {
@if $use_high_contrast { box-shadow: inset 0 0 0 2px $ic-color-light; }
@else { box-shadow: inset 0 0 0 1px $ic-color-light; }
}
// Button backgrounds
// ------------------
@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
@include gradientBar($startColor, $endColor, $textColor, $textShadow);
// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] {
color: $textColor;
background-color: $endColor;
}
&:focus {
color: $textColor;
background: $endColor;
text-decoration: none;
}
}
// Updated replacement mixin for buttonBackground ^^
@mixin canvas-button(
$button-color,
$text-color,
$button-background-is-lighter-than-text:false,
$button-color-darkened-5:darken($button-color, 5),
$button-color-darkened-15:darken($button-color, 15)
) {
background: $button-color;
color: $text-color;
border: 1px solid;
&:focus { color: $text-color; }
&:hover {
@if $use_high_contrast {
background: darken($ic-color-dark, 20%);
color: $ic-color-light;
}
@else {
background: $button-color-darkened-5;
color: $text-color;
}
// handle jquery UI ui-button conflicts
&.ui-state-hover {
@if $use_high_contrast {
background: darken($ic-color-dark, 20%);
color: $ic-color-light;
}
@else {
background: $button-color-darkened-5;
color: $text-color;
border-color: $button-color-darkened-15;
}
}
}
@if $button-background-is-lighter-than-text {
border-color: $ic-border-color;
&.active, &.Button--active, &:active { box-shadow: none; }
&.active, &.Button--active {
background: darken($button-color, 55%);
border-color: darken($button-color, 65%);
color: $ic-color-light;
}
&:focus { @include button-focus-light; }
// handle jquery UI ui-button states
&.ui-state-focus.ui-state-active {
&:focus { @include button-focus-dark; }
}
&:active { background: darken($button-color, 8%); }
}
@else {
border-color: $button-color-darkened-15;
&:focus { @include button-focus-dark; }
&.active, &.Button--active, &:active {
background: $button-color-darkened-5;
box-shadow: none;
}
}
}
// Grid System
// -----------
@ -418,18 +199,6 @@
margin-left: 0; // undo default grid column styles
}
// Make a Grid
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
@mixin makeRow() {
margin-left: $gridGutterWidth * -1;
@include clearfix();
}
@mixin makeColumn($columns: 1, $offset: 0) {
float: left;
margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}
// The Grid
@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
.row {

6
app/stylesheets/jst/TreeBrowser.scss
View File

@ -31,7 +31,10 @@
&.active { background-color: $activeBG; }
}
li[aria-selected="true"] > a {
@include tab-focus();
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
text-decoration: none;
}
.preview-thumbnail-holder {
display: inline-block;
@ -54,4 +57,3 @@
.icon-mini-arrow-right { transition: transform 0.2s }
.expanded .icon-mini-arrow-right { transform: rotate(90deg) }
}

8
app/stylesheets/jst/calendar/calendarApp.scss
View File

@ -152,7 +152,7 @@
}
.calendar .fc-button {
@include user-select(none);
user-select: none;
padding: $buttonPadding;
//these are just ui-state-default colors
@include fontSize(12px);
@ -181,10 +181,12 @@
text-shadow: white 0 1px 1px;
}
&.fc-corner-left {
@include border-left-radius(4px);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&.fc-corner-right {
@include border-right-radius(4px);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}

5
app/stylesheets/our_custom_tiny_mce_stuff/_tiny_like_ck_with_external_tools.scss
View File

@ -23,7 +23,10 @@ $menu-item-keyboard-shortcut-color: $ic-font-color-dark;
// puts the blue glow around each little color sqare in the tinyMCE text/bg color picker
.mce-container .mce-grid td.mce-grid-cell div:focus{
@include tab-focus();
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
text-decoration: none;
}
.mce-container .mce-primary {

1
app/stylesheets/pages/calendar/_calendarHeader.scss
View File

@ -17,6 +17,7 @@
*/
@import 'base/environment';
@import "deprecated/bootstrap/mixins";
@import 'vendor/bootstrap/button-groups';
#calendar_header {

2
app/stylesheets/pages/calendar/_mini_calendar.scss
View File

@ -35,7 +35,7 @@ $kyle-blue: #0081e3;
border-bottom: 1px solid #6e6e70;
color: white;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
@include user-select(none);
user-select: none;
h2, .h2 {
// override styles from default fullcalendar.css
@include fontSize($ic-font-size--small);

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

@ -16,6 +16,7 @@
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@import "deprecated/bootstrap/mixins";
@import "vendor/bootstrap/button-groups";
@import "components/autocomplete";

2
app/stylesheets/pages/gradebook/_gradebook.scss
View File

@ -550,7 +550,7 @@ $gradebook_cell_padding_top: 8px;
background: transparent;
}
.outof {
@include user-select(none);
user-select: none;
text-align: left;
// if high contrast, no color value (default to regular dark text color)
@if $use_high_contrast == false { color: #888888; }

2
app/stylesheets/pages/gradezilla/_gradebook.scss
View File

@ -540,7 +540,7 @@ $gradebook_cell_padding_top: 8px;
background: transparent;
}
.outof {
@include user-select(none);
user-select: none;
text-align: left;
// if high contrast, no color value (default to regular dark text color)
@if $use_high_contrast == false { color: #888888; }

2
app/stylesheets/pages/screenreader_gradebook/_screenreader_gradebook.scss
View File

@ -19,7 +19,7 @@
@import "base/variables";
@import "base/mixins/typography";
@import "vendor/bootstrap/variables";
@import "vendor/bootstrap/mixins";
@import "deprecated/bootstrap/mixins";
@import "vendor/bootstrap/grid";
@import "vendor/bootstrap/forms";
@import "vendor/bootstrap/tables";

1
app/stylesheets/pages/shared/_feature_flags.scss
View File

@ -17,6 +17,7 @@
*/
@import 'base/environment';
@import "deprecated/bootstrap/mixins";
@import 'vendor/bootstrap/button-groups';
$border-dark: #c1c7cf;

2
app/stylesheets/vendor/bootstrap/_button-groups.scss vendored
View File

@ -32,7 +32,7 @@
// Float them, remove border radius, then re-add to first and last elements
.btn-group > .btn {
position: relative;
@include border-radius(0);
border-radius: 0;
}
.btn-group > .btn + .btn {
margin-left: -1px;

2
app/stylesheets/vendor/bootstrap/_dropdowns.scss vendored
View File

@ -54,7 +54,7 @@
border: 1px solid $dropdownBorder;
*border-right-width: 2px;
*border-bottom-width: 2px;
@include border-radius(6px);
border-radius: 6px;
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;

5
client_apps/canvas_quizzes/apps/statistics/css/ext/qtip.scss
View File

@ -16,14 +16,12 @@
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@import "vendor/bootstrap/mixins";
/* Default tooltip style */
.qtip-default {
border-width: 1px;
border-style: solid;
border-color: $tooltipArrowColor;
@include border-radius($baseBorderRadius);
border-radius: $baseBorderRadius;
background-color: $tooltipBackground;
color: $tooltipColor;
@ -52,4 +50,3 @@
color: #777;
}
}