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

Add rem units instead of px units to /stylesheets/base 

fixes CNVS-25991

This converts our px unit font-sizing in the all the stylesheets in
/base/ to use our mixin that converts them to rem units.

Test Plan:
- CSS should compile without errors
- In Chrome, change the default size of your font from Medium to Large or
Very Large; the global navigation in Canvas should now respect that
change
Screenshot of things that are changing sizes:
http://cl.ly/3H2P1g1i3z33

Note:
- This is a direct conversion from px to rem, so nothing in the
interface visually changes, just the unit type we're using
- We did start using the global variables set aside for consistent font
sizing where they were matching, ie 12px = $ic-font-size--xsmall, etc
- The Primary nav is the easiest example to see these changes in affect.
There are other similar tweaks that happen globally, but if one is working
and css is compiling we're good, since this is a 1 to 1 conversion

Change-Id: Ie71ad22a495516e21317e302a0a488c31f4ae6a7
Reviewed-on: https://gerrit.instructure.com/69141
Tested-by: Jenkins
Reviewed-by: Jennifer Stern <jstern@instructure.com>
QA-Review: Myller de Araujo <myller@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
This commit is contained in:
Colleen Palmer 2015-12-17 11:23:42 -07:00
parent d458b6dc08
commit 64c4d4a930
10 changed files with 52 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/stylesheets/base/_#header.scss
View File

@ -88,7 +88,7 @@ $masquerade-link-color: $ic-color-alert;
float: right;
font-size: 12px;
@include fontSize($ic-font-size--xsmall);
margin-right: $right_side_margin;
// make room for the drop shadow
margin-bottom: 4px;
@ -178,7 +178,7 @@ $masquerade-link-color: $ic-color-alert;
padding: 6px 17px 5px;
height: 29px;
color: #fff;
font-size: 15px;
@include fontSize(15px);
}
}
.menu-item-no-drop, .menu-item-title {
@ -204,7 +204,7 @@ $masquerade-link-color: $ic-color-alert;
}
.menu-item-drop {
font-size: 13px;
@include fontSize(13px);
// hide off screen, dont do display:none, so screenreaders can see it
overflow: hidden;
position: absolute;
@ -216,7 +216,7 @@ $masquerade-link-color: $ic-color-alert;
z-index: 99;
.menu-item-view-all {
border-bottom: none;
font-size: 12px;
@include fontSize($ic-font-size--xsmall);
text-align: right;
white-space: nowrap;
&:hover {
@ -268,7 +268,7 @@ $masquerade-link-color: $ic-color-alert;
@if $use_high_contrast {
color: $course-dropdown-text-color;
}
font-size: 12px;
@include fontSize($ic-font-size--xsmall);
}
.menu-item-drop-float-right {
float: right;
@ -288,11 +288,11 @@ $masquerade-link-color: $ic-color-alert;
.secondary-right {
float: right;
white-space: nowrap;
font-size: 11px;
@include fontSize(11px);
}
.name {
display: block;
font-size: 14px;
@include fontSize($ic-font-size--small);
}
}
}
@ -370,7 +370,7 @@ $masquerade-link-color: $ic-color-alert;
}
}
.customListOpen {
font-size: 11px;
@include fontSize(11px);
color: $ic-link-color;
}
}

18
app/stylesheets/base/_#right-side.scss
View File

@ -1,9 +1,9 @@
#right-side-wrapper {
display: none;
position: relative;
position: relative;
@if $use_new_styles == false {
width: 0;
right: 0;
right: 0;
}
}
@ -23,7 +23,7 @@
margin: 17px 0 20px;
}
h2, .h2 {
font-size: 14px;
@include fontSize($ic-font-size--small);
overflow: hidden;
line-height: 1.2em;
@if $use_new_styles {
@ -36,8 +36,8 @@
color: $gray;
font-weight: bold;
border-bottom: solid 1px #bbb;
margin: $right_side_margin 0;
padding-bottom: 6px;
margin: $right_side_margin 0;
padding-bottom: 6px;
}
}
}
@ -66,7 +66,7 @@
@else { margin: 10px 0; }
li {
a {
font-size: 12px;
@include fontSize($ic-font-size--xsmall);
padding-top: 4px;
padding-bottom: 4px;
display: block;
@ -99,12 +99,12 @@
display: block;
@if $use_new_styles {
font-style: italic;
font-size: 13px;
@include fontSize(13px);
}
@else {
padding: 3px 0 0px 31px;
color: #666;
font-size: 1em;
font-size: 1em;
}
}
b, em {
@ -208,7 +208,7 @@
// NOTE: they used to get applied to body but were moved to #right side to not force a repaint
// of the entire page and be less jumpy going in and out display modes.
.with-scrolling-right-side {
@if $use_new_styles {
#right-side {
@include breakpoint(desktop) {

4
app/stylesheets/base/_bootstrap_overrides.scss
View File

@ -2,7 +2,7 @@
@import "base/environment";
body {
font-size: 13px;
@include fontSize(13px);
}
//*********** BEGIN HEADER OVERRIDES **************
@ -229,7 +229,7 @@ Here's an accessible way to do it for popovers without a header.
.ui-widget.ui-tooltip.popover {
padding: 1px;
font-size: 14px;
@include fontSize($ic-font-size--small);
max-width: 236px;
width: 236px;
color: $gray;

6
app/stylesheets/base/_custom_mediaelementplayer.scss
View File

@ -2,7 +2,7 @@
/* make subtitle text bigger when it's in fullscreen */
.mejs-container-fullscreen .mejs-captions-layer {
font-size: 28px;
@include fontSize($ic-font-size--xlarge);
}
/* wider and more opaque source chooser */
@ -30,7 +30,7 @@ div.mejs-speed-button {
.mejs-controls .mejs-button.mejs-speed-button button {
background: transparent;
width: 36px;
font-size: 11px;
@include fontSize(11px);
line-height: normal;
color: #ffffff;
}
@ -90,7 +90,7 @@ div.mejs-speed-button {
padding: 4px 0 0 0;
line-height: 15px;
font-family: helvetica, arial;
font-size: 11.5px;
@include fontSize(11.5px);
color: white;
margin-left: 5px;
cursor: pointer;

9
app/stylesheets/base/_ic_app_header.scss
View File

@ -194,7 +194,7 @@
box-sizing: border-box;
color: $ic-brand-global-nav-menu-item__text-color;
line-height: 1.1;
font-size: ($baseFontSize - 2);
@include fontSize($ic-font-size--xsmall);
}
.menu-item__badge {
@ -294,8 +294,7 @@
.ReactTray__link-list {
@include reset-list;
font-size: 14px;
@include fontSize($ic-font-size--small);
.ReactTray-list-item {
line-height: 1.3;
margin-bottom: $ic-sp;
@ -313,7 +312,7 @@
color: $ic-dim-helper-text;
text-transform: uppercase;
letter-spacing: 2px;
font-size: $baseFontSize;
@include fontSize($ic-font-size);
box-sizing: border-box;
padding: $ic-sp*4 0;
}
@ -344,7 +343,7 @@
.ReactTray-list-item__helper-text {
color: $ic-hint-text;
font-size: $baseFontSize - 2;
@include fontSize(12px);
text-transform: uppercase;
margin-top: $ic-sp/6;
}

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

@ -165,7 +165,7 @@ $ic-left-side-width: $ic-sp*15;
a {
color: $ic-font-color--subdued;
margin-right: $ic-sp;
font-size: 12px;
@include fontSize($ic-font-size--xsmall);
}
@include breakpoint(desktop) {
justify-content: flex-end;

4
app/stylesheets/base/_layout.scss
View File

@ -66,7 +66,7 @@ body {
}
h2, .h2 {
@include ui-widget-header-bg-and-text;
font-size: 14px;
@include fontSize($ic-font-size--small);
font-weight: bold;
margin: (-0.95em) -0.95em 1em;
padding: 0.4em 1em;
@ -217,7 +217,7 @@ body {
#footer {
@if $use_new_styles == false {
color: #5c5c5c;
font-size: 11px;
@include fontSize(11px);
margin: 0 15px 34px;
}

28
app/stylesheets/base/_variables.scss
View File

@ -101,10 +101,22 @@ $contentBoxPadding: 8px;
// Once all of those have been adjusted to use the new variable we can get rid of this
$ic-line-height: 1.5;
@if not $use_new_styles {$ic-line-height: 20px;}
$ic-font-size: 13px;
$ic-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$ic-font-weight: 500; // instead of "bold"
$ic-font-size: 14px;
$ic-font-size--xlarge: 28px;
$ic-font-size--large: 23px;
$ic-font-size--medium: 16px;
$ic-font-size--small: 14px;
$ic-font-size--xsmall: 12px;
/* Legacy variables. Discontinue to use these: */
$h1-font-size: 23px;
$h2-font-size: 14px;
$h3-font-size: 19px;
//============================
// Layout Functional Variables
//============================
@ -247,20 +259,6 @@ $iconWhiteSpritePath: $iconSpritePath !default;
$activeBG: #d6ecfc;
}
//====================
// Font Size Variables
//====================
$ic-font-size--xlarge: 28px;
$ic-font-size--large: 23px;
$ic-font-size--medium: 16px;
$ic-font-size--small: 14px;
$ic-font-size--xsmall: 12px;
/* Legacy variables. Discontinue to use these: */
$h1-font-size: 23px;
$h2-font-size: 14px;
$h3-font-size: 19px;
//=====================
// Transition Variables
//=====================

11
app/stylesheets/base/mixins/_typography.scss
View File

@ -14,15 +14,8 @@
// Mixin that will include the fall back px declaration as well as the calculated rem value.
@mixin fontSize($size) {
@if $use_new_styles {
font-size: $size;
font-size: calculateRem($size);
}
@else {
font-family: $baseFontFamily;
font-size: $baseFontSize;
color: $textColor;
}
font-size: $size;
font-size: calculateRem($size);
}

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

@ -12,13 +12,18 @@
///////==============
/// Global Settings
///////==============
html {
@if $use_new_styles {
font-size: 16px;
}
}
body {
margin: 0;
font-family: $ic-font-family;
@include fontSize($ic-font-size);
color: $ic-color-dark;
line-height: $ic-line-height;
@include fontSize($ic-font-size);
font-family: $ic-font-family;
color: $ic-color-dark;
}
p {