Make Lato the default Canvas font
Fixes: CNVS-30278 The product design team wants to standardize on Lato across all Instructure products. See JIRA for more information. With this change, we no longer have to use font-weight: 300 etc to make the right weight of Helvetica show up. We can go back to simply using bold and normal, etc.; so those rules have been updated in this commit. Test plan: to accurately test this you need to set up your canvas to use a CDN. there is a dev CDN that ops has set up for us. you put the settings in config/canvas_cdn.yml. slack ryan if you need help setting that up or need to know what the values are to use. you also need to edit your config/environments/development.rb file so it look like this: config.action_controller.perform_caching = true ENV['USE_OPTIMIZED_JS'] = 'true' and then when you make any changes you need to run: bundle exec rake canvas:compile_assets bundle exec rake canvas:cdn:upload_to_s3 touch tmp/restart.txt for the changes to be seen - This change applies only to new UI. Legacy should be unchanged. - Clear cache and cookies first. - Go to Canvas. On the first page load only you should see a slight shifting of the text as Canvas loads the Lato font and falls back on the Helvetica system font. - From that point on, Lato should be cached in the browser and load instantly when you move between views: http://screencast.com/t/hZhUZOhH - Canvas should still work in all supported languages and browsers. Not yet converted: - TinyMCE textarea fiekd - Mobile login Change-Id: I861e609c01824f60ac38d3fc15e5b960a06e44de Reviewed-on: https://gerrit.instructure.com/85737 Tested-by: Jenkins Reviewed-by: Ryan Shaw <ryan@instructure.com> QA-Review: Dan Sasaki Product-Review: Kyle Follett <kfollett@instructure.com>
This commit is contained in:
Chris Hart
parent
7cc6e1be95
commit
6ea6cf4d2e
|
|
@ -1783,10 +1783,6 @@ class ApplicationController < ActionController::Base
|
|||
end
|
||||
helper_method :css_bundle
|
||||
|
||||
alias_method :jammit_css, :css_bundle
|
||||
deprecate :jammit_css
|
||||
helper_method :jammit_css
|
||||
|
||||
def js_bundles; @js_bundles ||= []; end
|
||||
helper_method :js_bundles
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
border-bottom: 1px solid $ic-border-light;
|
||||
padding-bottom: $ic-sp;
|
||||
margin: 0 0 $ic-sp;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -134,16 +134,19 @@ $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;
|
||||
|
||||
$ic-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$ic-font-weight: 500; // instead of "bold"
|
||||
$ic-font-family: "LatoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
$ic-font-family-fallback: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
$ic-font-weight: bold; // we can phase this var out now we're on Lato
|
||||
|
||||
$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;
|
||||
$ic-font-size--xlarge: $ic-font-size + 14;
|
||||
$ic-font-size--large: $ic-font-size + 9;
|
||||
$ic-font-size--medium: $ic-font-size + 2;
|
||||
$ic-font-size--small: $ic-font-size;
|
||||
$ic-font-size--xsmall: $ic-font-size - 2;
|
||||
|
||||
/* Legacy variables. Discontinue to use these: */
|
||||
$h1-font-size: 23px;
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
}
|
||||
|
||||
.courses-user-list-header {
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,11 +11,13 @@
|
|||
|
||||
.element_toggler {
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
@include fontSize(14px);
|
||||
line-height: 1.3;
|
||||
font-weight: bold;
|
||||
|
||||
i { vertical-align: middle; }
|
||||
i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -300,10 +302,11 @@ span.agendaView--no-assignments {
|
|||
label {
|
||||
display: inline;
|
||||
@include fontSize(13px);
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
.checked label {
|
||||
font-weight: 500;
|
||||
@include fontSize(13px);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -57,9 +57,9 @@
|
|||
border-bottom: solid 1px $ic-border-light;
|
||||
h3 {
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
line-height: inherit;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
|
|
@ -87,9 +87,9 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
background-color: $btnBackground;
|
||||
border-bottom: solid 1px $ic-border-light;
|
||||
font-weight: 500;
|
||||
margin-left: -1px;
|
||||
a { color: $ic-link-color; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,7 +108,6 @@ $ic-wizard-color-dark-neutral: $ic-color-dark;
|
|||
border-left: 4px solid transparent;
|
||||
background: url("/images/wizard-todo-unchecked.svg") no-repeat $ic-sp 50%;
|
||||
background-size: 18px 18px;
|
||||
font-weight: 300;
|
||||
|
||||
@if $use_high_contrast {
|
||||
color: $ic-color-light;
|
||||
|
|
@ -163,7 +162,7 @@ $ic-wizard-color-dark-neutral: $ic-color-dark;
|
|||
@include fontSize(36px);
|
||||
text-align: center;
|
||||
color: $ic-color-light;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
@include breakpoint(mini-tablet) {
|
||||
@include fontSize(48px);
|
||||
|
|
@ -284,7 +283,6 @@ $ic-wizard-color-dark-neutral: $ic-color-dark;
|
|||
}
|
||||
|
||||
.ic-wizard-box__message-text {
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include breakpoint(desktop) {
|
||||
|
|
@ -296,4 +294,3 @@ $ic-wizard-color-dark-neutral: $ic-color-dark;
|
|||
|
||||
// Styles for specific React Components
|
||||
@import "pages/course_wizard/CourseWizard";
|
||||
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ $ic-DashboardCard-toggle-size: 60px;
|
|||
margin: 0;
|
||||
line-height: 1.3;
|
||||
font-size: $baseFontSize;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ic-DashboardCard__header-subtitle {
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ $announcements_disscussion-summary-color: $ic-font-color-dark;
|
|||
@include fontSize(14px);
|
||||
line-height: 1;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
.discussion-column {
|
||||
&.image-block {
|
||||
|
|
@ -152,7 +152,6 @@ $announcements_disscussion-summary-color: $ic-font-color-dark;
|
|||
color: #686868;
|
||||
@include fontSize(11px);
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.collectionViewItems {
|
||||
|
|
@ -310,8 +309,7 @@ $announcements_disscussion-summary-color: $ic-font-color-dark;
|
|||
.title {
|
||||
display: block;
|
||||
@include fontSize(14px);
|
||||
@if $use_high_contrast { font-weight: bold; }
|
||||
@else { font-weight: 500; }
|
||||
font-weight: bold;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,10 @@
|
|||
.account > .header {
|
||||
padding: $ic-sp/3 $ic-sp;
|
||||
box-sizing: border-box;
|
||||
.name { font-weight: 500; }
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.account.editing_account > .header .edit_account {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
> a {
|
||||
@include fontSize(13px); // need to overwrite default tiny-text style here
|
||||
margin-right: $ic-sp/2;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -221,7 +221,6 @@ $te-footer-height: 72px;
|
|||
color: $ic-font-color-dark;
|
||||
|
||||
.Theme__editor-upload-overrides_header {
|
||||
font-weight: 300;
|
||||
padding: 10px;
|
||||
border-top: 1px solid $ic-border-light;
|
||||
}
|
||||
|
|
@ -303,7 +302,6 @@ $te-footer-height: 72px;
|
|||
.ui-accordion-header {
|
||||
border: none;
|
||||
background: $te-bgd;
|
||||
font-weight: 300;
|
||||
border-radius: 0;
|
||||
color: $ic-font-color-dark;
|
||||
&:not(:first-child) {
|
||||
|
|
@ -333,7 +331,7 @@ $te-footer-height: 72px;
|
|||
border-radius: 0;
|
||||
transition: padding 0.2s;
|
||||
padding: $ic-sp/2 0;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
@include fontSize(14px);
|
||||
&:hover {
|
||||
color: $ic-color-light;
|
||||
|
|
@ -611,7 +609,7 @@ $te-footer-height: 72px;
|
|||
flex: 0 0 36%;
|
||||
padding-right: $ic-sp*2;
|
||||
font-size: $baseFontSize;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.Theme-editor-progress-list-item__bar {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
padding: 0;
|
||||
}
|
||||
.login_details td:first-child {
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
.login_details:last-child {
|
||||
& td {
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@
|
|||
|
||||
.ic-flash__headline {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ic-flash__text {
|
||||
|
|
@ -260,7 +260,7 @@ body.is-masquerading-or-student-view {
|
|||
}
|
||||
}
|
||||
&.ic-alert-masquerade-student-view-module--header {
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.ic-alert-masquerade-student-view-module--description {
|
||||
font-style: italic;
|
||||
|
|
@ -330,7 +330,7 @@ $ic-notification-border-thickness: 2px;
|
|||
margin-right: $ic-sp/3;
|
||||
@include fontSize($ic-font-size--small);
|
||||
display: inline;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ic-notification__content {
|
||||
|
|
@ -362,7 +362,6 @@ $ic-notification-border-thickness: 2px;
|
|||
|
||||
.notification_account_content_text {
|
||||
font-size: 0.8em;
|
||||
font-weight: 300;
|
||||
padding-left: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,7 +147,6 @@ listen to the "click" and "keyclick" events and add `tabindex="0"` and `role="bu
|
|||
overflow: hidden;
|
||||
text-shadow: none;
|
||||
user-select: none;
|
||||
@if not $use_high_contrast { font-weight: 300; }
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ $ic-brand-course-nav-link--active: $ic-brand-primary;
|
|||
// oldskool compat
|
||||
#section-tabs-header {
|
||||
@include fontSize($ic-font-size--small);
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
margin: 0 0 $ic-sp/2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -46,7 +46,6 @@ $ic-brand-course-nav-link--active: $ic-brand-primary;
|
|||
display: block;
|
||||
text-decoration: none;
|
||||
color: $ic-font-color-dark;
|
||||
font-weight: 300;
|
||||
border-radius: $baseBorderRadius;
|
||||
padding: $ic-sp/2 $ic-sp;
|
||||
|
||||
|
|
@ -76,7 +75,7 @@ $ic-brand-course-nav-link--active: $ic-brand-primary;
|
|||
|
||||
a.active {
|
||||
background-color: $ic-brand-course-nav-link--active;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
color: $ic-color-light;
|
||||
&:hover, &:focus { background-color: $ic-brand-primary; }
|
||||
.nav-badge {
|
||||
|
|
@ -107,7 +106,7 @@ $ic-brand-course-nav-link--active: $ic-brand-primary;
|
|||
display: block;
|
||||
padding: 8px 0;
|
||||
color: $ic-font-color-dark;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $ic-border-light;
|
||||
|
||||
&:hover, &:focus {
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@
|
|||
td, tbody th {
|
||||
background-color: $lightBackground;
|
||||
}
|
||||
tbody th { font-weight: 500; }
|
||||
tbody th { font-weight: bold; }
|
||||
}
|
||||
table.notifications {
|
||||
border-top: 2px solid #999;
|
||||
|
|
@ -318,7 +318,7 @@ table.summary {
|
|||
padding: $ic-sp/2;
|
||||
}
|
||||
thead th, caption {
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $ic-border-dark;
|
||||
}
|
||||
td, tbody th {
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@
|
|||
.mini-cal-header {
|
||||
text-align: center;
|
||||
padding: $ic-sp $ic-sp/2;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
border: 1px solid $ic-border-light;
|
||||
color: $ic-font-color--subdued;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
width: 100%;
|
||||
border: 1px solid $ic-border-light;
|
||||
border-top: none;
|
||||
|
||||
.day {
|
||||
padding: 0;
|
||||
height: 21px;
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ $revision-button-hover-color: $ic-brand-primary;
|
|||
}
|
||||
th {
|
||||
vertical-align: middle;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.table tbody {
|
||||
|
|
@ -216,7 +216,7 @@ $revision-button-hover-color: $ic-brand-primary;
|
|||
.wiki-page-link {
|
||||
@include fontSize(13px);
|
||||
color: $darkened-text-color;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
.wiki-page-link.published {
|
||||
color: $published-text-color;
|
||||
|
|
@ -403,8 +403,9 @@ $revision-button-hover-color: $ic-brand-primary;
|
|||
}
|
||||
|
||||
.revision-history {
|
||||
@include fontSize($ic-font-size--small);
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
margin-bottom: $ic-sp;
|
||||
@include fontSize($ic-font-size--small);
|
||||
}
|
||||
|
|
@ -484,7 +485,7 @@ $revision-button-hover-color: $ic-brand-primary;
|
|||
a {
|
||||
user-select: none;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -15,12 +15,13 @@
|
|||
display: block;
|
||||
padding: $ic-sp;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
|
||||
.subtext {
|
||||
display: block;
|
||||
@include fontSize(12px);
|
||||
color: $ic-font-color--subdued;
|
||||
font-weight: 300;
|
||||
font-weight: normal;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// TO-DO: Change CSS animation to ReactTransitionGroup once
|
||||
// TO-DO: Change CSS animation to ReactTransitionGroup once
|
||||
// we upgrade to React 0.13
|
||||
|
||||
@keyframes color-picker-enter {
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
margin: 0 0 $ic-sp; padding: 0;
|
||||
line-height: 1.1;
|
||||
@include fontSize($ic-font-size--small);
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ColorPicker__Container {
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
|
||||
.middle > .ColorPicker__Container {
|
||||
&:after, &:before { top: 50%; }
|
||||
&:after, &:before { top: 50%; }
|
||||
}
|
||||
|
||||
.ColorPicker__ColorContainer {
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
text-align: center;
|
||||
color: $ic-color-light;
|
||||
&:hover { box-shadow: 0 1px 2px rgba(black, 0.25); }
|
||||
&:focus {
|
||||
&:focus {
|
||||
box-shadow: 0 1px 2px rgba(black, 0.25), inset 0 0 0 1px $ic-color-light;
|
||||
@if $use_high_contrast == false { outline: none; }
|
||||
}
|
||||
|
|
@ -118,9 +118,9 @@
|
|||
|
||||
.ColorPicker__ColorPreview {
|
||||
width: $ic-sp*3;
|
||||
i[class*=icon-], i[class^=icon-] {
|
||||
i[class*=icon-], i[class^=icon-] {
|
||||
margin: 0 auto;
|
||||
color: $ic-color-alert;
|
||||
color: $ic-color-alert;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
text-align: right;
|
||||
body.chrome & {
|
||||
// fixes weird Chrome bug, where left border of first button gets cut off
|
||||
.Button:first-of-type { margin-left: 1px; }
|
||||
.Button:first-of-type { margin-left: 1px; }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1587,7 +1587,7 @@ form.ic-Form-group { margin: 0; }
|
|||
margin: 0 0 $ic-sp/2;
|
||||
display: block;
|
||||
line-height: $ic-label-line-height;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
@include fontSize($ic-font-size--small);
|
||||
}
|
||||
|
||||
|
|
@ -1615,7 +1615,7 @@ form.ic-Form-group { margin: 0; }
|
|||
|
||||
.ic-Legend {
|
||||
margin-bottom: $ic-sp/2;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
@include fontSize($ic-font-size--small);
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
|
|
@ -1649,7 +1649,7 @@ form.ic-Form-group { margin: 0; }
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
padding: $ic-sp/3 0 $ic-sp/3 $ic-radio-checkbox-left-offset;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
|
|
@ -1788,7 +1788,7 @@ form.ic-Form-group { margin: 0; }
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
padding: $ic-sp/3 0 $ic-sp/3 $ic-radio-checkbox-left-offset;
|
||||
font-weight: 400;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
|
|
|
|||
|
|
@ -11,11 +11,55 @@
|
|||
/// Global Settings
|
||||
///////==============
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'LatoWeb';
|
||||
src: url('/fonts/lato/latin/LatoLatin-Regular.woff2') format('woff2'),
|
||||
url('/fonts/lato/latin/LatoLatin-Regular.woff') format('woff'),
|
||||
url('/fonts/lato/latin/LatoLatin-Regular.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'LatoWeb';
|
||||
src: url('/fonts/lato/latin/LatoLatin-Italic.woff2') format('woff2'),
|
||||
url('/fonts/lato/latin/LatoLatin-Italic.woff') format('woff'),
|
||||
url('/fonts/lato/latin/LatoLatin-Italic.ttf') format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'LatoWeb';
|
||||
src: url('/fonts/lato/latin/LatoLatin-Bold.woff2') format('woff2'),
|
||||
url('/fonts/lato/latin/LatoLatin-Bold.woff') format('woff'),
|
||||
url('/fonts/lato/latin/LatoLatin-Bold.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'LatoWeb';
|
||||
src: url('/fonts/lato/latin/LatoLatin-Light.woff2') format('woff2'),
|
||||
url('/fonts/lato/latin/LatoLatin-Light.woff') format('woff'),
|
||||
url('/fonts/lato/latin/LatoLatin-Light.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: $ic-font-family-fallback;
|
||||
&.lato-font-loaded {
|
||||
font-family: $ic-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@include fontSize($ic-font-size);
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
line-height: $ic-line-height;
|
||||
@include fontSize($ic-font-size);
|
||||
font-family: $ic-font-family;
|
||||
color: $ic-font-color-dark;
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +141,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
|||
}
|
||||
h1, h2, .h1, .h2 {
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
line-height: $ic-line-height;
|
||||
}
|
||||
h3, .h3 {
|
||||
|
|
|
|||
|
|
@ -353,11 +353,11 @@
|
|||
.ig-title {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
padding-right: $ic-sp;
|
||||
line-height: $ic-label-line-height;
|
||||
margin-bottom: $ic-sp/4;
|
||||
min-width: 1px; // firefox flex breaks the parent container
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ig-details {
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
|
||||
.ic-tokeninput-header{
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ic-tokeninput-header:focus {
|
||||
|
|
@ -228,4 +228,3 @@ $ic-token-padding: 3px 15px;
|
|||
.token_input.active {
|
||||
box-shadow: 0 0 3px 2px #68B4DF;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ $assign-border-color: #ccc;
|
|||
width: 100%;
|
||||
}
|
||||
.Date__label{
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ContainerDueDate {
|
||||
margin: 20px 0; // matches legacy margins
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
background-color: #f6f7f9;
|
||||
line-height: 35px;
|
||||
color: $ic-font-color--subdued;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td {
|
||||
border-color: $ic-border-light;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
min-width: 250px;
|
||||
padding: 18px 12px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
color: #4f5f6e;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding-right: $ic-sp;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.announcement-details-roles {
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ $mini-cal-highlight-border: #fa0;
|
|||
|
||||
.fc-content-skeleton .fc-state-highlight {
|
||||
color: $ic-color-light;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fc-basic-view td.fc-day-number {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ $kyle-blue: #0081e3;
|
|||
box-shadow: none;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fc-button {
|
||||
padding: 0px 10px;
|
||||
|
|
|
|||
|
|
@ -273,7 +273,7 @@ ul.user_list div.enrollment_type.pending {
|
|||
line-height: inherit;
|
||||
margin: 0;
|
||||
@include fontSize(13px);
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,9 +19,6 @@
|
|||
border-bottom: 1px solid #ddd;
|
||||
.title {
|
||||
font-weight: normal;
|
||||
@if not $use_high_contrast {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.links {
|
||||
@include fontSize(11px);
|
||||
|
|
@ -142,7 +139,7 @@ $ignore-col-width: 50px;
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
@include fontSize($ic-font-size--xsmall);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,6 @@ input + .hint-text {
|
|||
.assignments-to-post-count {
|
||||
padding: 0 10px;
|
||||
color: #000;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.assignment_correction_input{
|
||||
|
|
@ -96,4 +95,4 @@ input + .hint-text {
|
|||
.assignment_correction_ignore{
|
||||
top: 38px;
|
||||
right: -83px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@ $page-dark: #ebeff2;
|
|||
|
||||
.slick-column-name {
|
||||
color: $header-font-color;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.ui-state-default {
|
||||
|
|
@ -260,7 +260,7 @@ $page-dark: #ebeff2;
|
|||
background: transparent;
|
||||
border: none;
|
||||
@include fontSize(15px);
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
line-height: 39px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
|
@ -321,7 +321,7 @@ $page-dark: #ebeff2;
|
|||
}
|
||||
|
||||
.outcome-score {
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.outcome-result {
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@ body.ic-Login-Body { // apply the background to the body element so that you don
|
|||
//////////
|
||||
.ic-Login__forgot-text {
|
||||
color: $ic-brand-Login-Content-password-text-color;
|
||||
font-weight: 300;
|
||||
@include fontSize($ic-font-size--small);
|
||||
padding: 0 0 $ic-sp*2 0;
|
||||
margin: 0;
|
||||
|
|
@ -226,10 +225,10 @@ body.ic-Login-Body #footer.ic-Login-footer {
|
|||
.ic-Login__register-banner {
|
||||
|
||||
.ic-Login__banner-title {
|
||||
font-weight: 300;
|
||||
font-weight: normal;
|
||||
}
|
||||
.ic-Login__banner-subtitle {
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
//////////
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ li.quiz {
|
|||
overflow: hidden;
|
||||
h1, h2 {
|
||||
margin-top: 0;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
|
||||
.Collaboration-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.Collaboration-description {
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ $preview-html-background: whitesmoke;
|
|||
.ef-file-preview-header {
|
||||
height: $preview-header-height;
|
||||
color: $preview-font-color;
|
||||
font-weight: 300;
|
||||
font-weight: normal;
|
||||
flex: 0 0 $preview-header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -258,4 +258,4 @@ a.ef-file-preview-button, button.ef-file-preview-button div {
|
|||
// so previews of unstyled HTML will not feature black-on-black text
|
||||
.ef-file-preview-frame-html {
|
||||
background-color: $preview-html-background;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ $switch-text: rgba($ic-color-light, 0.6);
|
|||
border-radius: 20px;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
&.ui-corner-left {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,6 @@ html.Sg-only {
|
|||
padding: 0;
|
||||
line-height: normal;
|
||||
font-family: $sg-font;
|
||||
font-weight: 300;
|
||||
}
|
||||
body.Sg-only {
|
||||
margin: 0;
|
||||
|
|
@ -109,7 +108,7 @@ body.Sg-only {
|
|||
&:focus {
|
||||
@include fontSize(13px);
|
||||
padding: 8px 10px;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
color: $sg-header-subnavigation-item;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ input,
|
|||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
||||
font-family: $ic-font-family;
|
||||
}
|
||||
|
||||
// Identify controls by their labels
|
||||
|
|
|
|||
|
|
@ -36,6 +36,11 @@
|
|||
))
|
||||
end
|
||||
%>
|
||||
<%=
|
||||
# Load the fontface observer for lato async and as fast as possible so it doesn't flicker with fallback font.
|
||||
# That's why we don't load it in a 'require' at the bottom of the page
|
||||
javascript_include_tag("#{js_base_url}/vendor/lato-fontfaceobserver.js", async: true)
|
||||
%>
|
||||
<%= yield :meta_tags %>
|
||||
<%= include_custom_meta_tags %>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ h1 {
|
|||
padding: 1em 0 0.5em 0;
|
||||
border-bottom: 1px solid #333;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
font-weight: normal;
|
||||
}
|
||||
h2 {
|
||||
padding: 0 0 3px;
|
||||
|
|
@ -134,7 +134,7 @@ h3.beta {
|
|||
#sidebar h2 {
|
||||
padding: 14px 10px 14px 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
border-left: 3px solid #0073ac;
|
||||
|
||||
margin: 0;
|
||||
|
|
@ -178,7 +178,7 @@ table {
|
|||
table th {
|
||||
background-color: #0073ac;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
|
|
@ -289,7 +289,7 @@ div.warning-message {
|
|||
|
||||
code.enum {
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
padding: 0 4px;
|
||||
background-color: #2A404D;
|
||||
border: 1px solid #2A404D;
|
||||
|
|
@ -297,8 +297,8 @@ code.enum {
|
|||
}
|
||||
.param-values .allowed {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom:13px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.param-values {
|
||||
background: #efefef;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ const STUFF_TO_REV = [
|
|||
'public/javascripts/vendor/require.js',
|
||||
'public/optimized/vendor/require.js',
|
||||
'public/javascripts/vendor/ie11-polyfill.js',
|
||||
'public/javascripts/vendor/lato-fontfaceobserver.js',
|
||||
'public/optimized/vendor/lato-fontfaceobserver.js',
|
||||
|
||||
// But for all other javascript, we only load stuff using js_bundle.
|
||||
// Meaning that we only include stuff in the "bundles" dir from rails.
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@
|
|||
"classnames": "~2.1.2",
|
||||
"color-slicer": "0.8.0",
|
||||
"d3": "3.4.1",
|
||||
"fontfaceobserver": "^2.0.4",
|
||||
"handlebars": "1.3.0",
|
||||
"ic-ajax": "~2.0.1",
|
||||
"ic-tabs": "0.1.3",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,17 @@
|
|||
(function(){function l(a,b){document.addEventListener?a.addEventListener("scroll",b,!1):a.attachEvent("scroll",b)}function m(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function c(){document.removeEventListener("DOMContentLoaded",c);a()}):document.attachEvent("onreadystatechange",function k(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",k),a()})};function r(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.h=document.createElement("span");this.f=document.createElement("span");this.g=-1;this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";
|
||||
this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.b.appendChild(this.h);this.c.appendChild(this.f);this.a.appendChild(this.b);this.a.appendChild(this.c)}
|
||||
function x(a,b){a.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;left:-999px;white-space:nowrap;font:"+b+";"}function y(a){var b=a.a.offsetWidth,c=b+100;a.f.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.g!==b?(a.g=b,!0):!1}function z(a,b){function c(){var a=k;y(a)&&null!==a.a.parentNode&&b(a.g)}var k=a;l(a.b,c);l(a.c,c);y(a)};function A(a,b){var c=b||{};this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal"}var B=null,D=null,E=null;function H(){if(null===D){var a=document.createElement("div");try{a.style.font="condensed 100px sans-serif"}catch(b){}D=""!==a.style.font}return D}function I(a,b){return[a.style,a.weight,H()?a.stretch:"","100px",b].join(" ")}
|
||||
A.prototype.load=function(a,b){var c=this,k=a||"BESbswy",q=0,C=b||3E3,F=(new Date).getTime();return new Promise(function(a,b){null===E&&(E=!!document.fonts);if(E){var J=new Promise(function(a,b){function e(){(new Date).getTime()-F>=C?b():document.fonts.load(I(c,'"'+c.family+'"'),k).then(function(c){1<=c.length?a():setTimeout(e,25)},function(){b()})}e()}),K=new Promise(function(a,c){q=setTimeout(c,C)});Promise.race([K,J]).then(function(){clearTimeout(q);a(c)},function(){b(c)})}else m(function(){function t(){var b;
|
||||
if(b=-1!=f&&-1!=g||-1!=f&&-1!=h||-1!=g&&-1!=h)(b=f!=g&&f!=h&&g!=h)||(null===B&&(b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),B=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))),b=B&&(f==u&&g==u&&h==u||f==v&&g==v&&h==v||f==w&&g==w&&h==w)),b=!b;b&&(null!==d.parentNode&&d.parentNode.removeChild(d),clearTimeout(q),a(c))}function G(){if((new Date).getTime()-F>=C)null!==d.parentNode&&d.parentNode.removeChild(d),b(c);else{var a=document.hidden;if(!0===
|
||||
a||void 0===a)f=e.a.offsetWidth,g=n.a.offsetWidth,h=p.a.offsetWidth,t();q=setTimeout(G,50)}}var e=new r(k),n=new r(k),p=new r(k),f=-1,g=-1,h=-1,u=-1,v=-1,w=-1,d=document.createElement("div");d.dir="ltr";x(e,I(c,"sans-serif"));x(n,I(c,"serif"));x(p,I(c,"monospace"));d.appendChild(e.a);d.appendChild(n.a);d.appendChild(p.a);document.body.appendChild(d);u=e.a.offsetWidth;v=n.a.offsetWidth;w=p.a.offsetWidth;G();z(e,function(a){f=a;t()});x(e,I(c,'"'+c.family+'",sans-serif'));z(n,function(a){g=a;t()});x(n,
|
||||
I(c,'"'+c.family+'",serif'));z(p,function(a){h=a;t()});x(p,I(c,'"'+c.family+'",monospace'))})})};"undefined"!==typeof module?module.exports=A:(window.FontFaceObserver=A,window.FontFaceObserver.prototype.load=A.prototype.load);}());
|
||||
|
||||
new FontFaceObserver('LatoWeb').load().then(function () {
|
||||
document.documentElement.classList.add('lato-font-loaded');
|
||||
}, console.log.bind(console, 'Failed to load Lato font'));
|
||||
|
||||
// this file was autogenerated by script/make-lato-fontface-observer.sh.
|
||||
// edit that file, not the generated one. Run this again
|
||||
// if you npm install a new version of fontfaceobserver
|
||||
// or make any changes.
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
# this shell script is to copy the fontfaceobserver
|
||||
# (standalone, which doesn't include a promise polyfill)
|
||||
# and combine it with the actual code to observe when
|
||||
# lato is loaded so that it can be loaded as one script
|
||||
# in a <script async ...> tag at the top of the page, instead of
|
||||
# loading it at the bottom and having to wait for all of our other
|
||||
# js to load.
|
||||
|
||||
OUTPUT_FILE=public/javascripts/vendor/lato-fontfaceobserver.js
|
||||
cp node_modules/fontfaceobserver/fontfaceobserver.standalone.js $OUTPUT_FILE
|
||||
|
||||
cat >> $OUTPUT_FILE <<-JAVASCRIPT
|
||||
|
||||
new FontFaceObserver('LatoWeb').load().then(function () {
|
||||
document.documentElement.classList.add('lato-font-loaded');
|
||||
}, console.log.bind(console, 'Failed to load Lato font'));
|
||||
|
||||
// this file was autogenerated by $0.
|
||||
// edit that file, not the generated one. Run this again
|
||||
// if you npm install a new version of fontfaceobserver
|
||||
// or make any changes.
|
||||
|
||||
JAVASCRIPT
|
||||
|
|
@ -38,8 +38,8 @@ module RubricsCommon
|
|||
|
||||
driver.execute_script <<-JS
|
||||
var $rating = $('.rubric .criterion:visible .rating:eq(#{idx})');
|
||||
$rating.addClass('add_column add_right');
|
||||
$rating.prev().addClass('add_left');
|
||||
$rating.addClass('add_column add_left');
|
||||
$rating.prev().addClass('add_right');
|
||||
$rating.click();
|
||||
JS
|
||||
end
|
||||
|
|
|
|||
Loading…
Reference in New Issue