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

Revert and bring InstIcons into Canvas 

closes: CNVS-32953

This commit re-introduces Instructure Icons into Canvas.
Due to the range in aesthetic impact of including both line
and solid icons, the change is expansive and will be refined
in subsequent commits. The purpose of this commit is to:

- Make InstIcons available in Canvas allowing the use of the
  react components

- Replace the current icon font with the new InstIcons font

- Allow for use of both 'Line' and 'Solid' icon variants

- Update the styleguide to reference the InstIcons github
  documentation for examples

- Remove font custom from Canvas

Icons changed to line versions in Canvas:
- icon-compose (view on Dashboard card)
- icon-info (view on global notification)

- Updated icons to be larger for better visibility
  (our old font was using a small font size)

- Updated font-size is now relative vs fixed, so better a11y

Test Plan:

- On compiling, icons in Canvas should now be changed to the
  corresponding Instructure Icons as can be seen here
  http://instructure.github.io/instructure-icons/

- The icon default displaying in Canvas should be solid icons.
  If the variant "icon-Line" is added to an icon's css class,
  it should display as line. For example, in the case of
  <i class="icon-edit"></i>, adding
  <i class="icon-edit icon-Line"></i> would result in a line
  version of the edit icon displaying

- As a developer, you should be able to use InstUI react icons

- The rake task `bundle exec rake icons:compile` should no
  longer exist

- The styleguide should no longer display example icons, but
  should now include a link to the Instructure Icons github
  documentation

Change-Id: I9780332de9fdf937b35caabadc2b2ee615892a43
Reviewed-on: https://gerrit.instructure.com/94175
Reviewed-by: Pam Hiett <phiett@instructure.com>
QA-Review: Dan Sasaki
Tested-by: Jenkins
Product-Review: Kyle Follett <kfollett@instructure.com>
This commit is contained in:
Colleen Palmer 2016-11-01 14:04:45 -06:00
parent eed3fda02d
commit e84bd4dd80
17 changed files with 112 additions and 1749 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

800
.fontcustom-manifest.json
View File

@ -1,800 +0,0 @@
{
"checksum": {
"previous": "4f0cf3c2827fbe1bdbcab00867f03e5a64fd404def0c4dfc4bd2d9234bcf84a6",
"current": "4f0cf3c2827fbe1bdbcab00867f03e5a64fd404def0c4dfc4bd2d9234bcf84a6"
},
"fonts": [
"public/fonts/canvas/canvas-icons.ttf",
"public/fonts/canvas/canvas-icons.svg",
"public/fonts/canvas/canvas-icons.woff",
"public/fonts/canvas/canvas-icons.eot"
],
"glyphs": {
"add": {
"codepoint": 61696,
"source": "public/fonts/icons/add.svg"
},
"address-book": {
"codepoint": 61697,
"source": "public/fonts/icons/address-book.svg"
},
"analytics": {
"codepoint": 61698,
"source": "public/fonts/icons/analytics.svg"
},
"android": {
"codepoint": 61699,
"source": "public/fonts/icons/android.svg"
},
"announcement": {
"codepoint": 61700,
"source": "public/fonts/icons/announcement.svg"
},
"apple": {
"codepoint": 61701,
"source": "public/fonts/icons/apple.svg"
},
"arrow-down": {
"codepoint": 61702,
"source": "public/fonts/icons/arrow-down.svg"
},
"arrow-left": {
"codepoint": 61703,
"source": "public/fonts/icons/arrow-left.svg"
},
"arrow-open-left": {
"codepoint": 61704,
"source": "public/fonts/icons/arrow-open-left.svg"
},
"arrow-open-right": {
"codepoint": 61705,
"source": "public/fonts/icons/arrow-open-right.svg"
},
"arrow-right": {
"codepoint": 61706,
"source": "public/fonts/icons/arrow-right.svg"
},
"arrow-up": {
"codepoint": 61707,
"source": "public/fonts/icons/arrow-up.svg"
},
"assignment": {
"codepoint": 61708,
"source": "public/fonts/icons/assignment.svg"
},
"audio": {
"codepoint": 61709,
"source": "public/fonts/icons/audio.svg"
},
"bookmark": {
"codepoint": 61710,
"source": "public/fonts/icons/bookmark.svg"
},
"calendar-day": {
"codepoint": 61711,
"source": "public/fonts/icons/calendar-day.svg"
},
"calendar-days": {
"codepoint": 61712,
"source": "public/fonts/icons/calendar-days.svg"
},
"calendar-month": {
"codepoint": 61713,
"source": "public/fonts/icons/calendar-month.svg"
},
"check": {
"codepoint": 61714,
"source": "public/fonts/icons/check.svg"
},
"check-dark": {
"codepoint": 61715,
"source": "public/fonts/icons/check-dark.svg"
},
"check-mark": {
"codepoint": 61716,
"source": "public/fonts/icons/check-mark.svg"
},
"check-plus": {
"codepoint": 61717,
"source": "public/fonts/icons/check-plus.svg"
},
"clock": {
"codepoint": 61718,
"source": "public/fonts/icons/clock.svg"
},
"cloud-lock": {
"codepoint": 61719,
"source": "public/fonts/icons/cloud-lock.svg"
},
"collapse": {
"codepoint": 61720,
"source": "public/fonts/icons/collapse.svg"
},
"collection": {
"codepoint": 61721,
"source": "public/fonts/icons/collection.svg"
},
"collection-save": {
"codepoint": 61722,
"source": "public/fonts/icons/collection-save.svg"
},
"commons": {
"codepoint": 61879,
"source": "public/fonts/icons/commons.svg"
},
"complete": {
"codepoint": 61723,
"source": "public/fonts/icons/complete.svg"
},
"compose": {
"codepoint": 61724,
"source": "public/fonts/icons/compose.svg"
},
"copy-course": {
"codepoint": 61725,
"source": "public/fonts/icons/copy-course.svg"
},
"discussion": {
"codepoint": 61726,
"source": "public/fonts/icons/discussion.svg"
},
"discussion-check": {
"codepoint": 61727,
"source": "public/fonts/icons/discussion-check.svg"
},
"discussion-new": {
"codepoint": 61728,
"source": "public/fonts/icons/discussion-new.svg"
},
"discussion-reply": {
"codepoint": 61729,
"source": "public/fonts/icons/discussion-reply.svg"
},
"discussion-reply-2": {
"codepoint": 61730,
"source": "public/fonts/icons/discussion-reply-2.svg"
},
"discussion-reply-dark": {
"codepoint": 61731,
"source": "public/fonts/icons/discussion-reply-dark.svg"
},
"discussion-search": {
"codepoint": 61732,
"source": "public/fonts/icons/discussion-search.svg"
},
"discussion-x": {
"codepoint": 61733,
"source": "public/fonts/icons/discussion-x.svg"
},
"document": {
"codepoint": 61734,
"source": "public/fonts/icons/document.svg"
},
"download": {
"codepoint": 61735,
"source": "public/fonts/icons/download.svg"
},
"drag-handle": {
"codepoint": 61736,
"source": "public/fonts/icons/drag-handle.svg"
},
"drop-down": {
"codepoint": 61737,
"source": "public/fonts/icons/drop-down.svg"
},
"edit": {
"codepoint": 61738,
"source": "public/fonts/icons/edit.svg"
},
"educators": {
"codepoint": 61739,
"source": "public/fonts/icons/educators.svg"
},
"email": {
"codepoint": 61740,
"source": "public/fonts/icons/email.svg"
},
"empty": {
"codepoint": 61741,
"source": "public/fonts/icons/empty.svg"
},
"end": {
"codepoint": 61742,
"source": "public/fonts/icons/end.svg"
},
"equation": {
"codepoint": 61877,
"source": "public/fonts/icons/equation.svg"
},
"equella": {
"codepoint": 61878,
"source": "public/fonts/icons/equella.svg"
},
"expand": {
"codepoint": 61743,
"source": "public/fonts/icons/expand.svg"
},
"expand-items": {
"codepoint": 61744,
"source": "public/fonts/icons/expand-items.svg"
},
"export": {
"codepoint": 61875,
"source": "public/fonts/icons/export.svg"
},
"export-content": {
"codepoint": 61745,
"source": "public/fonts/icons/export-content.svg"
},
"eye": {
"codepoint": 61746,
"source": "public/fonts/icons/eye.svg"
},
"facebook": {
"codepoint": 61747,
"source": "public/fonts/icons/facebook.svg"
},
"facebook-boxed": {
"codepoint": 61748,
"source": "public/fonts/icons/facebook-boxed.svg"
},
"files-copyright": {
"codepoint": 61749,
"source": "public/fonts/icons/files-copyright.svg"
},
"files-creative-commons": {
"codepoint": 61750,
"source": "public/fonts/icons/files-creative-commons.svg"
},
"files-fair-use": {
"codepoint": 61751,
"source": "public/fonts/icons/files-fair-use.svg"
},
"files-obtained-permission": {
"codepoint": 61752,
"source": "public/fonts/icons/files-obtained-permission.svg"
},
"files-public-domain": {
"codepoint": 61753,
"source": "public/fonts/icons/files-public-domain.svg"
},
"filmstrip": {
"codepoint": 61754,
"source": "public/fonts/icons/filmstrip.svg"
},
"flag": {
"codepoint": 61755,
"source": "public/fonts/icons/flag.svg"
},
"folder": {
"codepoint": 61756,
"source": "public/fonts/icons/folder.svg"
},
"folder-locked": {
"codepoint": 61884,
"source": "public/fonts/icons/folder-locked.svg"
},
"forward": {
"codepoint": 61757,
"source": "public/fonts/icons/forward.svg"
},
"github": {
"codepoint": 61758,
"source": "public/fonts/icons/github.svg"
},
"gradebook": {
"codepoint": 61759,
"source": "public/fonts/icons/gradebook.svg"
},
"gradebook-export": {
"codepoint": 61760,
"source": "public/fonts/icons/gradebook-export.svg"
},
"gradebook-import": {
"codepoint": 61761,
"source": "public/fonts/icons/gradebook-import.svg"
},
"group": {
"codepoint": 61762,
"source": "public/fonts/icons/group.svg"
},
"group-new": {
"codepoint": 61763,
"source": "public/fonts/icons/group-new.svg"
},
"group-new-dark": {
"codepoint": 61764,
"source": "public/fonts/icons/group-new-dark.svg"
},
"hamburger": {
"codepoint": 61765,
"source": "public/fonts/icons/hamburger.svg"
},
"heart": {
"codepoint": 61766,
"source": "public/fonts/icons/heart.svg"
},
"home": {
"codepoint": 61767,
"source": "public/fonts/icons/home.svg"
},
"hour-glass": {
"codepoint": 61768,
"source": "public/fonts/icons/hour-glass.svg"
},
"image": {
"codepoint": 61769,
"source": "public/fonts/icons/image.svg"
},
"import": {
"codepoint": 61876,
"source": "public/fonts/icons/import.svg"
},
"import-content": {
"codepoint": 61770,
"source": "public/fonts/icons/import-content.svg"
},
"indent": {
"codepoint": 61771,
"source": "public/fonts/icons/indent.svg"
},
"indent2": {
"codepoint": 61772,
"source": "public/fonts/icons/indent2.svg"
},
"info": {
"codepoint": 61773,
"source": "public/fonts/icons/info.svg"
},
"instructure": {
"codepoint": 61774,
"source": "public/fonts/icons/instructure.svg"
},
"invitation": {
"codepoint": 61775,
"source": "public/fonts/icons/invitation.svg"
},
"keyboard-shortcuts": {
"codepoint": 61885,
"source": "public/fonts/icons/keyboard-shortcuts.svg"
},
"like": {
"codepoint": 61776,
"source": "public/fonts/icons/like.svg"
},
"link": {
"codepoint": 61777,
"source": "public/fonts/icons/link.svg"
},
"linkedin": {
"codepoint": 61778,
"source": "public/fonts/icons/linkedin.svg"
},
"lock": {
"codepoint": 61779,
"source": "public/fonts/icons/lock.svg"
},
"lti": {
"codepoint": 61780,
"source": "public/fonts/icons/lti.svg"
},
"mark-as-read": {
"codepoint": 61781,
"source": "public/fonts/icons/mark-as-read.svg"
},
"masquerade": {
"codepoint": 61881,
"source": "public/fonts/icons/masquerade.svg"
},
"mastery-path": {
"codepoint": 61886,
"source": "public/fonts/icons/mastery-path.svg"
},
"materials-required": {
"codepoint": 61782,
"source": "public/fonts/icons/materials-required.svg"
},
"materials-required-light": {
"codepoint": 61783,
"source": "public/fonts/icons/materials-required-light.svg"
},
"mature": {
"codepoint": 61784,
"source": "public/fonts/icons/mature.svg"
},
"mature-light": {
"codepoint": 61785,
"source": "public/fonts/icons/mature-light.svg"
},
"media": {
"codepoint": 61786,
"source": "public/fonts/icons/media.svg"
},
"message": {
"codepoint": 61787,
"source": "public/fonts/icons/message.svg"
},
"mini-arrow-down": {
"codepoint": 61788,
"source": "public/fonts/icons/mini-arrow-down.svg"
},
"mini-arrow-left": {
"codepoint": 61789,
"source": "public/fonts/icons/mini-arrow-left.svg"
},
"mini-arrow-right": {
"codepoint": 61790,
"source": "public/fonts/icons/mini-arrow-right.svg"
},
"mini-arrow-up": {
"codepoint": 61791,
"source": "public/fonts/icons/mini-arrow-up.svg"
},
"minimize": {
"codepoint": 61792,
"source": "public/fonts/icons/minimize.svg"
},
"module": {
"codepoint": 61793,
"source": "public/fonts/icons/module.svg"
},
"more": {
"codepoint": 61794,
"source": "public/fonts/icons/more.svg"
},
"ms-excel": {
"codepoint": 61795,
"source": "public/fonts/icons/ms-excel.svg"
},
"ms-ppt": {
"codepoint": 61796,
"source": "public/fonts/icons/ms-ppt.svg"
},
"ms-word": {
"codepoint": 61797,
"source": "public/fonts/icons/ms-word.svg"
},
"muted": {
"codepoint": 61798,
"source": "public/fonts/icons/muted.svg"
},
"next-unread": {
"codepoint": 61799,
"source": "public/fonts/icons/next-unread.svg"
},
"not-graded": {
"codepoint": 61800,
"source": "public/fonts/icons/not-graded.svg"
},
"note-dark": {
"codepoint": 61801,
"source": "public/fonts/icons/note-dark.svg"
},
"note-light": {
"codepoint": 61802,
"source": "public/fonts/icons/note-light.svg"
},
"off": {
"codepoint": 61803,
"source": "public/fonts/icons/off.svg"
},
"outdent": {
"codepoint": 61804,
"source": "public/fonts/icons/outdent.svg"
},
"outdent2": {
"codepoint": 61805,
"source": "public/fonts/icons/outdent2.svg"
},
"paperclip": {
"codepoint": 61806,
"source": "public/fonts/icons/paperclip.svg"
},
"partial": {
"codepoint": 61807,
"source": "public/fonts/icons/partial.svg"
},
"pdf": {
"codepoint": 61808,
"source": "public/fonts/icons/pdf.svg"
},
"peer-graded": {
"codepoint": 61809,
"source": "public/fonts/icons/peer-graded.svg"
},
"peer-review": {
"codepoint": 61810,
"source": "public/fonts/icons/peer-review.svg"
},
"pin": {
"codepoint": 61811,
"source": "public/fonts/icons/pin.svg"
},
"pinterest": {
"codepoint": 61812,
"source": "public/fonts/icons/pinterest.svg"
},
"plus": {
"codepoint": 61813,
"source": "public/fonts/icons/plus.svg"
},
"post-to-sis": {
"codepoint": 61880,
"source": "public/fonts/icons/post-to-sis.svg"
},
"prerequisite": {
"codepoint": 61814,
"source": "public/fonts/icons/prerequisite.svg"
},
"printer": {
"codepoint": 61815,
"source": "public/fonts/icons/printer.svg"
},
"publish": {
"codepoint": 61816,
"source": "public/fonts/icons/publish.svg"
},
"question": {
"codepoint": 61817,
"source": "public/fonts/icons/question.svg"
},
"quiz": {
"codepoint": 61818,
"source": "public/fonts/icons/quiz.svg"
},
"quiz-stats-avg": {
"codepoint": 61819,
"source": "public/fonts/icons/quiz-stats-avg.svg"
},
"quiz-stats-deviation": {
"codepoint": 61820,
"source": "public/fonts/icons/quiz-stats-deviation.svg"
},
"quiz-stats-high": {
"codepoint": 61821,
"source": "public/fonts/icons/quiz-stats-high.svg"
},
"quiz-stats-low": {
"codepoint": 61822,
"source": "public/fonts/icons/quiz-stats-low.svg"
},
"quiz-stats-time": {
"codepoint": 61823,
"source": "public/fonts/icons/quiz-stats-time.svg"
},
"refresh": {
"codepoint": 61824,
"source": "public/fonts/icons/refresh.svg"
},
"remove-from-collection": {
"codepoint": 61825,
"source": "public/fonts/icons/remove-from-collection.svg"
},
"replied": {
"codepoint": 61826,
"source": "public/fonts/icons/replied.svg"
},
"reply-2": {
"codepoint": 61827,
"source": "public/fonts/icons/reply-2.svg"
},
"reply-all-2": {
"codepoint": 61828,
"source": "public/fonts/icons/reply-all-2.svg"
},
"reset": {
"codepoint": 61829,
"source": "public/fonts/icons/reset.svg"
},
"rss": {
"codepoint": 61830,
"source": "public/fonts/icons/rss.svg"
},
"rss-add": {
"codepoint": 61831,
"source": "public/fonts/icons/rss-add.svg"
},
"rubric": {
"codepoint": 61832,
"source": "public/fonts/icons/rubric.svg"
},
"rubric-dark": {
"codepoint": 61833,
"source": "public/fonts/icons/rubric-dark.svg"
},
"search": {
"codepoint": 61834,
"source": "public/fonts/icons/search.svg"
},
"search-address-book": {
"codepoint": 61835,
"source": "public/fonts/icons/search-address-book.svg"
},
"settings": {
"codepoint": 61836,
"source": "public/fonts/icons/settings.svg"
},
"settings-2": {
"codepoint": 61837,
"source": "public/fonts/icons/settings-2.svg"
},
"skype": {
"codepoint": 61838,
"source": "public/fonts/icons/skype.svg"
},
"speed-grader": {
"codepoint": 61839,
"source": "public/fonts/icons/speed-grader.svg"
},
"standards": {
"codepoint": 61840,
"source": "public/fonts/icons/standards.svg"
},
"star": {
"codepoint": 61841,
"source": "public/fonts/icons/star.svg"
},
"star-light": {
"codepoint": 61883,
"source": "public/fonts/icons/star-light.svg"
},
"stats": {
"codepoint": 61842,
"source": "public/fonts/icons/stats.svg"
},
"student-view": {
"codepoint": 61843,
"source": "public/fonts/icons/student-view.svg"
},
"syllabus": {
"codepoint": 61844,
"source": "public/fonts/icons/syllabus.svg"
},
"table": {
"codepoint": 61882,
"source": "public/fonts/icons/table.svg"
},
"tag": {
"codepoint": 61845,
"source": "public/fonts/icons/tag.svg"
},
"target": {
"codepoint": 61846,
"source": "public/fonts/icons/target.svg"
},
"text": {
"codepoint": 61847,
"source": "public/fonts/icons/text.svg"
},
"text-center": {
"codepoint": 61848,
"source": "public/fonts/icons/text-center.svg"
},
"text-left": {
"codepoint": 61849,
"source": "public/fonts/icons/text-left.svg"
},
"text-right": {
"codepoint": 61850,
"source": "public/fonts/icons/text-right.svg"
},
"timer": {
"codepoint": 61851,
"source": "public/fonts/icons/timer.svg"
},
"toggle-left": {
"codepoint": 61852,
"source": "public/fonts/icons/toggle-left.svg"
},
"toggle-right": {
"codepoint": 61853,
"source": "public/fonts/icons/toggle-right.svg"
},
"trash": {
"codepoint": 61856,
"source": "public/fonts/icons/trash.svg"
},
"trouble": {
"codepoint": 61857,
"source": "public/fonts/icons/trouble.svg"
},
"twitter": {
"codepoint": 61858,
"source": "public/fonts/icons/twitter.svg"
},
"twitter-boxed": {
"codepoint": 61859,
"source": "public/fonts/icons/twitter-boxed.svg"
},
"unknown2": {
"codepoint": 61860,
"source": "public/fonts/icons/unknown2.svg"
},
"unlock": {
"codepoint": 61861,
"source": "public/fonts/icons/unlock.svg"
},
"unmuted": {
"codepoint": 61862,
"source": "public/fonts/icons/unmuted.svg"
},
"unpublish": {
"codepoint": 61863,
"source": "public/fonts/icons/unpublish.svg"
},
"unpublished": {
"codepoint": 61864,
"source": "public/fonts/icons/unpublished.svg"
},
"updown": {
"codepoint": 61865,
"source": "public/fonts/icons/updown.svg"
},
"upload": {
"codepoint": 61866,
"source": "public/fonts/icons/upload.svg"
},
"user": {
"codepoint": 61867,
"source": "public/fonts/icons/user.svg"
},
"user-add": {
"codepoint": 61868,
"source": "public/fonts/icons/user-add.svg"
},
"video": {
"codepoint": 61869,
"source": "public/fonts/icons/video.svg"
},
"warning": {
"codepoint": 61870,
"source": "public/fonts/icons/warning.svg"
},
"windows": {
"codepoint": 61871,
"source": "public/fonts/icons/windows.svg"
},
"wordpress": {
"codepoint": 61872,
"source": "public/fonts/icons/wordpress.svg"
},
"x": {
"codepoint": 61873,
"source": "public/fonts/icons/x.svg"
},
"zipped": {
"codepoint": 61874,
"source": "public/fonts/icons/zipped.svg"
}
},
"options": {
"autowidth": false,
"config": "config/fontcustom.yml",
"css_selector": ".icon-{{glyph}}",
"debug": false,
"font_ascent": 448,
"font_descent": 64,
"font_design_size": 16,
"font_em": 512,
"font_name": "canvas-icons",
"force": true,
"input": {
"templates": "public/fonts/icons",
"vectors": "public/fonts/icons"
},
"no_hash": true,
"output": {
"css": "app/stylesheets/components",
"fonts": "public/fonts/canvas",
"preview": "public/fonts/canvas"
},
"preprocessor_path": false,
"quiet": false,
"templates": [
"_canvas-icons.scss"
]
},
"templates": [
"app/stylesheets/components/_canvas-icons.scss"
]
}

3
.selinimumignore
View File

@ -16,10 +16,11 @@
*.eot
*.sh
*.rubocop.yml
/.dockerignore
/.fontcustom-manifest.json
/.selinimumignore
/.stylelintrc
/app/stylesheets/brandable_variables.json

3
Gemfile.d/assets.rb
View File

@ -5,5 +5,4 @@ group :assets do
gem 'pygments.rb', '0.6.3', require: false
gem 'posix-spawn', '0.3.11', require: false
gem 'yajl-ruby', '1.2.1', require: false
gem 'fontcustom', '~> 1.3.3', require: false
end
end

2
app/jsx/course_settings/components/CourseImageSelector.jsx
View File

@ -79,7 +79,7 @@ define([
<li role="presentation">
<a href="#"
onClick={() => this.changeImage()}
className="icon-compose"
className="icon-compose icon-Line"
id="courseImage-editDropdown-2"
tabIndex="-1"
ref="changeImage"

2
app/jsx/dashboard_card/DashboardCard.jsx
View File

@ -253,7 +253,7 @@ define([
className="Button Button--icon-action-rev ic-DashboardCard__header-button"
onClick={this.settingsClick}
ref="settingsToggle">
<i className="icon-compose" aria-hidden="true" />
<i className="icon-compose icon-Line" aria-hidden="true" />
<span className="screenreader-only">
{ I18n.t("Choose a color or course nickname for %{course}", { course: this.state.nicknameInfo.nickname}) }
</span>

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

@ -258,10 +258,10 @@ body:not(.course-menu-expanded) {
.ic-app-course-nav-toggle {
transform: translateY(1px);
margin-right: $ic-sp*1.5;
margin-right: $ic-sp;
padding: 0;
width: $ic-sp*3; height: ($ic-sp*3) - ($ic-sp/2);
@include overwrite-default-icon-size(22px);
@include overwrite-default-icon-size(1.5rem);
i[class*=icon-], i[class^=icon-] { margin-right: 0; }
}

2
app/stylesheets/base/mixins/_misc.scss
View File

@ -19,7 +19,7 @@
// for hover states where the background color of the parent changes
@mixin firefox-white-space-bug-fix-gradient($fade-out-color) {
background: linear-gradient(to right, rgba(255,255,255,0) 0%,$fade-out-color 75%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,$fade-out-color 75%);
}
@mixin firefox-white-space-bug-fix($gradient-color: $ic-color-light, $gradient-color-hover: null) {

596
app/stylesheets/components/_canvas-icons.scss
View File

@ -1,31 +1,42 @@
///
/// How to update Icons
//
// TL;DR
// The Instructure Icons repo is available at
// https://github.com/instructure/instructure-icons
//
// Add your new svg(s) to "public/fonts/icons/"
// Add your new icon markup to this template public/fonts/icons/_canvas-icons.scss
// Rebuild icon font with `bundle exec rake icons:compile`
// - Add your new icon to the repo and release
// - Update the instructure-icons version in package.json
//
// Details
//
// Help! I cant see my icon in "/styleguide"!
// make sure you updated the template above
//
// I can see my entry in "/styleguide", but it looks like an unsupported unicode character (an empty rectangle or a square with hex in it)
// Try doing a clean, rebuild, then restart your server
// `bundle exec rake brand_configs:clean canvas:compile_assets`
//
// I can see my entry in "/styleguide", but it is completely empty where the icon should be
// Your stylesheet isn't being loaded properly.
// make sure your svg should 512x512
// clear your browser cache
//
// More info can be found at <https://gollum.instructure.com/frontend-basics/canvas-icon-font>
///
/* @styleguide Icons
Canvas uses <a href="https://github.com/instructure/instructure-icons">Instructure Icons</a> for its icon library. There are various ways that you can bring icons into Canvas, including as a React component, or from our the icon font.
## Comprehensive Icon Listing
For a complete list of Instructure Icons go to <a href="http://instructure.github.io/instructure-icons/">http://instructure.github.io/instructure-icons</a>
## Light vs Solid
There are two weights to our icons: line or solid. Canvas defaults to solid, however, if you want to use the same icon as a line varient you can add the `icon-Line` utility class.
```html
<a class="icon-add icon-Line" href="whatever">Add Stuff</a>
```
## Using as a React Component
```javascript
import { IconAddLine } from 'instructure-icons'
function MyComponent () {
return <IconAddLine />
}
```
## Using the Icon Font
### Icons in links
```html
@ -45,294 +56,52 @@
Either use `<a>` with icon desired icon class added or insert `<i>` inside `<button>` and set to desired icon class
### All icons
<div class="row-fluid">
<span class="span3"><i class="icon-stats"></i> icon-stats</span>
<span class="span3"><i class="icon-paperclip"></i> icon-paperclip</span>
<span class="span3"><i class="icon-media"></i> icon-media</span>
<span class="span3"><i class="icon-address-book"></i> icon-address-book</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-reset"></i> icon-reset</span>
<span class="span3"><i class="icon-announcement"></i> icon-announcement</span>
<span class="span3"><i class="icon-analytics"></i> icon-analytics</span>
<span class="span3"><i class="icon-student-view"></i> icon-student-view</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-calendar-day"></i> icon-calendar-day</span>
<span class="span3"><i class="icon-trash"></i> icon-trash</span>
<span class="span3"><i class="icon-speed-grader"></i> icon-speed-grader</span>
<span class="span3"><i class="icon-copy-course"></i> icon-copy-course</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-export-content"></i> icon-export-content</span>
<span class="span3"><i class="icon-import-content"></i> icon-import-content</span>
<span class="span3"><i class="icon-discussion"></i> icon-discussion</span>
<span class="span3"><i class="icon-discussion-reply"></i> icon-discussion-reply</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-peer-review"></i> icon-peer-review</span>
<span class="span3"><i class="icon-discussion-new"></i> icon-discussion-new</span>
<span class="span3"><i class="icon-edit"></i> icon-edit</span>
<span class="span3"><i class="icon-home"></i> icon-home</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-settings"></i> icon-settings</span>
<span class="span3"><i class="icon-compose"></i> icon-compose</span>
<span class="span3"><i class="icon-flag"></i> icon-flag</span>
<span class="span3"><i class="icon-video"></i> icon-video</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-audio"></i> icon-audio</span>
<span class="span3"><i class="icon-outdent"></i> icon-outdent</span>
<span class="span3"><i class="icon-indent"></i> icon-indent</span>
<span class="span3"><i class="icon-outdent2"></i> icon-outdent2</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-indent2"></i> icon-indent2</span>
<span class="span3"><i class="icon-forward"></i> icon-forward</span>
<span class="span3"><i class="icon-warning"></i> icon-warning</span>
<span class="span3"><i class="icon-filmstrip"></i> icon-filmstrip</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-rubric"></i> icon-rubric</span>
<span class="span3"><i class="icon-rubric-dark"></i> icon-rubric-dark</span>
<span class="span3"><i class="icon-check-plus"></i> icon-check-plus</span>
<span class="span3"><i class="icon-rss"></i> icon-rss</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-rss-add"></i> icon-rss-add</span>
<span class="span3"><i class="icon-quiz"></i> icon-quiz</span>
<span class="span3"><i class="icon-question"></i> icon-question</span>
<span class="span3"><i class="icon-drop-down"></i> icon-drop-down</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-minimize"></i> icon-minimize</span>
<span class="span3"><i class="icon-end"></i> icon-end</span>
<span class="span3"><i class="icon-add"></i> icon-add</span>
<span class="span3"><i class="icon-info"></i> icon-info</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-check"></i> icon-check</span>
<span class="span3"><i class="icon-clock"></i> icon-clock</span>
<span class="span3"><i class="icon-calendar-month"></i> icon-calendar-month</span>
<span class="span3"><i class="icon-x"></i> icon-x</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-refresh"></i> icon-refresh</span>
<span class="span3"><i class="icon-off"></i> icon-off</span>
<span class="span3"><i class="icon-updown"></i> icon-updown</span>
<span class="span3"><i class="icon-user-add"></i> icon-user-add</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-group"></i> icon-group</span>
<span class="span3"><i class="icon-star"></i> icon-star</span>
<span class="span3"><i class="icon-star-light"></i> icon-star-light</span>
<span class="span3"><i class="icon-replied"></i> icon-replied</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-hour-glass"></i> icon-hour-glass</span>
<span class="span3"><i class="icon-assignment"></i> icon-assignment</span>
<span class="span3"><i class="icon-message"></i> icon-message</span>
<span class="span3"><i class="icon-note-dark"></i> icon-note-dark</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-note-light"></i> icon-note-light</span>
<span class="span3"><i class="icon-tag"></i> icon-tag</span>
<span class="span3"><i class="icon-next-unread"></i> icon-next-unread</span>
<span class="span3"><i class="icon-search"></i> icon-search</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-lock"></i> icon-lock</span>
<span class="span3"><i class="icon-unlock"></i> icon-unlock</span>
<span class="span3"><i class="icon-folder"></i> icon-folder</span>
<span class="span3"><i class="icon-toggle-right"></i> icon-toggle-right</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-toggle-left"></i> icon-toggle-left</span>
<span class="span3"><i class="icon-link"></i> icon-link</span>
<span class="span3"><i class="icon-lti"></i> icon-lti</span>
<span class="span3"><i class="icon-text"></i> icon-text</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-timer"></i> icon-timer</span>
<span class="span3"><i class="icon-pin"></i> icon-pin</span>
<span class="span3"><i class="icon-like"></i> icon-like</span>
<span class="span3"><i class="icon-collection-save"></i> icon-collection-save</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-collection"></i> icon-collection</span>
<span class="span3"><i class="icon-group-new"></i> icon-group-new</span>
<span class="span3"><i class="icon-group-new-dark"></i> icon-group-new-dark</span>
<span class="span3"><i class="icon-user"></i> icon-user</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-standards"></i> icon-standards</span>
<span class="span3"><i class="icon-search-address-book"></i> icon-search-address-book</span>
<span class="span3"><i class="icon-facebook"></i> icon-facebook</span>
<span class="span3"><i class="icon-facebook-boxed"></i> icon-facebook-boxed</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-linkedin"></i> icon-linkedin</span>
<span class="span3"><i class="icon-twitter"></i> icon-twitter</span>
<span class="span3"><i class="icon-twitter-boxed"></i> icon-twitter-boxed</span>
<span class="span3"><i class="icon-github"></i> icon-github</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-skype"></i> icon-skype</span>
<span class="span3"><i class="icon-wordpress"></i> icon-wordpress</span>
<span class="span3"><i class="icon-pinterest"></i> icon-pinterest</span>
<span class="span3"><i class="icon-gradebook"></i> icon-gradebook</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-document"></i> icon-document</span>
<span class="span3"><i class="icon-module"></i> icon-module</span>
<span class="span3"><i class="icon-mini-arrow-up"></i> icon-mini-arrow-up</span>
<span class="span3"><i class="icon-mini-arrow-down"></i> icon-mini-arrow-down</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-mini-arrow-left"></i> icon-mini-arrow-left</span>
<span class="span3"><i class="icon-mini-arrow-right"></i> icon-mini-arrow-right</span>
<span class="span3"><i class="icon-arrow-up"></i> icon-arrow-up</span>
<span class="span3"><i class="icon-arrow-down"></i> icon-arrow-down</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-arrow-left"></i> icon-arrow-left</span>
<span class="span3"><i class="icon-arrow-right"></i> icon-arrow-right</span>
<span class="span3"><i class="icon-email"></i> icon-email</span>
<span class="span3"><i class="icon-instructure"></i> icon-instructure</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-ms-word"></i> icon-ms-word</span>
<span class="span3"><i class="icon-ms-excel"></i> icon-ms-excel</span>
<span class="span3"><i class="icon-ms-ppt"></i> icon-ms-ppt</span>
<span class="span3"><i class="icon-pdf"></i> icon-pdf</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-apple"></i> icon-apple</span>
<span class="span3"><i class="icon-windows"></i> icon-windows</span>
<span class="span3"><i class="icon-android"></i> icon-android</span>
<span class="span3"><i class="icon-heart"></i> icon-heart</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-upload"></i> icon-upload</span>
<span class="span3"><i class="icon-download"></i> icon-download</span>
<span class="span3"><i class="icon-text-left"></i> icon-text-left</span>
<span class="span3"><i class="icon-text-center"></i> icon-text-center</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-text-right"></i> icon-text-right</span>
<span class="span3"><i class="icon-mature"></i> icon-mature</span>
<span class="span3"><i class="icon-prerequisite"></i> icon-prerequisite</span>
<span class="span3"><i class="icon-educators"></i> icon-educators</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-calendar-days"></i> icon-calendar-days</span>
<span class="span3"><i class="icon-materials-required"></i> icon-materials-required</span>
<span class="span3"><i class="icon-not-graded"></i> icon-not-graded</span>
<span class="span3"><i class="icon-peer-graded"></i> icon-peer-graded</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-bookmark"></i> icon-bookmark</span>
<span class="span3"><i class="icon-printer"></i> icon-printer</span>
<span class="span3"><i class="icon-image"></i> icon-image</span>
<span class="span3"><i class="icon-expand"></i> icon-expand</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-collapse"></i> icon-collapse</span>
<span class="span3"><i class="icon-invitation"></i> icon-invitation</span>
<span class="span3"><i class="icon-muted"></i> icon-muted</span>
<span class="span3"><i class="icon-unmuted"></i> icon-unmuted</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-plus"></i> icon-plus</span>
<span class="span3"><i class="icon-zipped"></i> icon-zipped</span>
<span class="span3"><i class="icon-publish"></i> icon-publish</span>
<span class="span3"><i class="icon-unpublish"></i> icon-unpublish</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-unpublished"></i> icon-unpublished</span>
<span class="span3"><i class="icon-discussion-check"></i> icon-discussion-check</span>
<span class="span3"><i class="icon-discussion-reply-2"></i> icon-discussion-reply-2</span>
<span class="span3"><i class="icon-discussion-search"></i> icon-discussion-search</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-discussion-x"></i> icon-discussion-x</span>
<span class="span3"><i class="icon-mark-as-read"></i> icon-mark-as-read</span>
<span class="span3"><i class="icon-more"></i> icon-more</span>
<span class="span3"><i class="icon-syllabus"></i> icon-syllabus</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-settings-2"></i> icon-settings-2</span>
<span class="span3"><i class="icon-reply-2"></i> icon-reply-2</span>
<span class="span3"><i class="icon-reply-all-2"></i> icon-reply-all-2</span>
<span class="span3"><i class="icon-drag-handle"></i> icon-drag-handle</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-remove-from-collection"></i> icon-remove-from-collection</span>
<span class="span3"><i class="icon-arrow-open-right"></i> icon-arrow-open-right</span>
<span class="span3"><i class="icon-arrow-open-left"></i> icon-arrow-open-left</span>
<span class="span3"><i class="icon-hamburger"></i> icon-hamburger</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-expand-items"></i> icon-expand-items</span>
<span class="span3"><i class="icon-forward"></i> icon-forward</span>
<span class="span3"><i class="icon-target"></i> icon-target</span>
<span class="span3"><i class="icon-quiz-stats-avg"></i> icon-quiz-stats-avg</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-quiz-stats-low"></i> icon-quiz-stats-low</span>
<span class="span3"><i class="icon-quiz-stats-high"></i> icon-quiz-stats-high</span>
<span class="span3"><i class="icon-quiz-stats-deviation"></i> icon-quiz-stats-deviation</span>
<span class="span3"><i class="icon-quiz-stats-time"></i> icon-quiz-stats-time</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-cloud-lock"></i> icon-cloud-lock</span>
<span class="span3"><i class="icon-eye"></i> icon-eye</span>
<span class="span3"><i class="icon-files-copyright"></i> icon-files-copyright</span>
<span class="span3"><i class="icon-files-creative-commons"></i> icon-files-creative-commons</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-files-fair-use"></i> icon-files-fair-use</span>
<span class="span3"><i class="icon-files-obtained-permission"></i>icon-files-obtained-permission</span>
<span class="span3"><i class="icon-files-public-domain"></i> icon-files-public-domain</span>
<span class="span3"><i class="icon-folder-locked"></i> icon-folder-locked</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-import"></i> icon-import</span>
<span class="span3"><i class="icon-export"></i> icon-export</span>
<span class="span3"><i class="icon-equella"></i> icon-equella</span>
<span class="span3"><i class="icon-equation"></i> icon-equation</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-commons"></i> icon-commons</span>
<span class="span3"><i class="icon-post-to-sis"></i> icon-post-to-sis</span>
<span class="span3"><i class="icon-masquerade"></i> icon-masquerade</span>
<span class="span3"><i class="icon-table"></i> icon-table</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-keyboard-shortcuts"></i> icon-keyboard-shortcuts</span>
<span class="span3"><i class="icon-mastery-path"></i> icon-mastery-path</span>
</div>
*/
@import "../../../node_modules/instructure-icons/fonts/Line/InstructureIcons-Line_icon-map.scss";
@import "../../../node_modules/instructure-icons/fonts/Solid/InstructureIcons-Solid_icon-map.scss";
@font-face {
font-family: "canvas-icons";
src: url('/fonts/canvas/canvas-icons.eot');
src: url('/fonts/canvas/canvas-icons.eot?#iefix') format('embedded-opentype'),
url('/fonts/canvas/canvas-icons.woff') format('woff'),
url('/fonts/canvas/canvas-icons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
$icon_default: "Solid";
// this could be refactored if/when sass allows for variable interpolation
$icon_index: (
"Line": $icons-Line,
"Solid": $icons-Solid
);
@mixin InstIconFontFace($variant) {
@font-face {
font-family: "InstructureIcons-#{$variant}";
src: url('/fonts/instructure_icons/#{$variant}/InstructureIcons-#{$variant}.eot');
src: url('/fonts/instructure_icons/#{$variant}/InstructureIcons-#{$variant}.eot?#iefix') format('eot'),
url('/fonts/instructure_icons/#{$variant}/InstructureIcons-#{$variant}.woff') format('woff'),
url('/fonts/instructure_icons/#{$variant}/InstructureIcons-#{$variant}.ttf') format('truetype'),
url('/fonts/instructure_icons/#{$variant}/InstructureIcons-#{$variant}.svg#InstructureIcons-#{$variant}') format('svg');
font-weight: normal;
font-style: normal;
}
}
@each $variant, $icon_map in $icon_index {
@include InstIconFontFace($variant);
i[class*=icon-], i[class^=icon-], a[class*=icon-], a[class^=icon-]{
i[class*=icon-].icon-#{$variant},
i[class^=icon-].icon-#{$variant},
a[class*=icon-].icon-#{$variant},
a[class^=icon-].icon-#{$variant} {
&:before {
font-family: "InstructureIcons-#{$variant}";
}
}
}
i[class*=icon-],
i[class^=icon-],
a[class*=icon-],
a[class^=icon-] {
font-size: 16px;
&:before {
font-family: "canvas-icons";
font-family: "InstructureIcons-#{$icon_default}";
display: inline-block;
vertical-align: middle;
line-height: 1;
@ -342,7 +111,7 @@ i[class*=icon-], i[class^=icon-], a[class*=icon-], a[class^=icon-]{
// the specific reason for this being in the :before and not part of the <i> was to get
// .input-appends to work with .btns that had an <i> icon in them.
font-size: 16px;
font-size: 1rem;
// override any properties in the cascade that might make the font display incorrectly
text-transform: none !important;
@ -355,21 +124,27 @@ i[class*=icon-], i[class^=icon-], a[class*=icon-], a[class^=icon-]{
i[class*=icon-], i[class^=icon-] {
display: inline-block;
font-style: normal !important;
width: 16px; height: 16px; line-height: 16px;
width: 1rem;
height: 1rem;
line-height: 1;
// adjust icon sizes to look good with our large-size button class
.btn-large &,
.Button--large & {
width: 18px; height: 18px; line-height: 18px;
&:before{ font-size: 18px }
width: 1.125rem;
height: 1.125rem;
line-height: 1;
&:before{ font-size: 1.125rem; }
}
// most icons do not look good this small, so use sparingly.
// this should only be used for things like: icon-settings and icon-mini-arrow-down
.btn-mini &,
.Button--mini {
width: 12px; height: 12px; line-height: 12px;
&:before{ font-size: 12px }
width: 0.75rem;
height: 0.75rem;
line-height: 1;
&:before{ font-size: 0.75rem; }
}
}
@ -400,199 +175,20 @@ h1, h2, h3, h4, .h1, .h2, .h3, .h4, p {
}
.icon-add:before { content: "\f100"; }
.icon-address-book:before { content: "\f101"; }
.icon-analytics:before { content: "\f102"; }
.icon-android:before { content: "\f103"; }
.icon-announcement:before { content: "\f104"; }
.icon-apple:before { content: "\f105"; }
.icon-arrow-down:before { content: "\f106"; }
.icon-arrow-left:before { content: "\f107"; }
.icon-arrow-open-left:before { content: "\f108"; }
.icon-arrow-open-right:before { content: "\f109"; }
.icon-arrow-right:before { content: "\f10a"; }
.icon-arrow-up:before { content: "\f10b"; }
.icon-assignment:before { content: "\f10c"; }
.icon-audio:before { content: "\f10d"; }
.icon-bookmark:before { content: "\f10e"; }
.icon-calendar-day:before { content: "\f10f"; }
.icon-calendar-days:before { content: "\f110"; }
.icon-calendar-month:before { content: "\f111"; }
.icon-check:before { content: "\f112"; }
.icon-check-dark:before { content: "\f113"; }
.icon-check-mark:before { content: "\f114"; }
.icon-check-plus:before { content: "\f115"; }
.icon-clock:before { content: "\f116"; }
.icon-cloud-lock:before { content: "\f117"; }
.icon-collapse:before { content: "\f118"; }
.icon-collection:before { content: "\f119"; }
.icon-collection-save:before { content: "\f11a"; }
.icon-commons:before { content: "\f1b7"; }
.icon-complete:before { content: "\f11b"; }
.icon-compose:before { content: "\f11c"; }
.icon-copy-course:before { content: "\f11d"; }
.icon-discussion:before { content: "\f11e"; }
.icon-discussion-check:before { content: "\f11f"; }
.icon-discussion-new:before { content: "\f120"; }
.icon-discussion-reply:before { content: "\f121"; }
.icon-discussion-reply-2:before { content: "\f122"; }
.icon-discussion-reply-dark:before { content: "\f123"; }
.icon-discussion-search:before { content: "\f124"; }
.icon-discussion-x:before { content: "\f125"; }
.icon-document:before { content: "\f126"; }
.icon-download:before { content: "\f127"; }
.icon-drag-handle:before { content: "\f128"; }
.icon-drop-down:before { content: "\f129"; }
.icon-edit:before { content: "\f12a"; }
.icon-educators:before { content: "\f12b"; }
.icon-email:before { content: "\f12c"; }
.icon-empty:before { content: "\f12d"; }
.icon-end:before { content: "\f12e"; }
.icon-equation:before { content: "\f1b5"; }
.icon-equella:before { content: "\f1b6"; }
.icon-expand:before { content: "\f12f"; }
.icon-expand-items:before { content: "\f130"; }
.icon-export:before { content: "\f1b3"; }
.icon-export-content:before { content: "\f131"; }
.icon-eye:before { content: "\f132"; }
.icon-facebook:before { content: "\f133"; }
.icon-facebook-boxed:before { content: "\f134"; }
.icon-files-copyright:before { content: "\f135"; }
.icon-files-creative-commons:before { content: "\f136"; }
.icon-files-fair-use:before { content: "\f137"; }
.icon-files-obtained-permission:before { content: "\f138"; }
.icon-files-public-domain:before { content: "\f139"; }
.icon-filmstrip:before { content: "\f13a"; }
.icon-flag:before { content: "\f13b"; }
.icon-folder:before { content: "\f13c"; }
.icon-folder-locked:before { content: "\f1bc"; }
.icon-forward:before { content: "\f13d"; }
.icon-github:before { content: "\f13e"; }
.icon-gradebook:before { content: "\f13f"; }
.icon-gradebook-export:before { content: "\f140"; }
.icon-gradebook-import:before { content: "\f141"; }
.icon-group:before { content: "\f142"; }
.icon-group-new:before { content: "\f143"; }
.icon-group-new-dark:before { content: "\f144"; }
.icon-hamburger:before { content: "\f145"; }
.icon-heart:before { content: "\f146"; }
.icon-home:before { content: "\f147"; }
.icon-hour-glass:before { content: "\f148"; }
.icon-image:before { content: "\f149"; }
.icon-import:before { content: "\f1b4"; }
.icon-import-content:before { content: "\f14a"; }
.icon-indent:before { content: "\f14b"; }
.icon-indent2:before { content: "\f14c"; }
.icon-info:before { content: "\f14d"; }
.icon-instructure:before { content: "\f14e"; }
.icon-invitation:before { content: "\f14f"; }
.icon-keyboard-shortcuts:before { content: "\f1bd"; }
.icon-like:before { content: "\f150"; }
.icon-link:before { content: "\f151"; }
.icon-linkedin:before { content: "\f152"; }
.icon-lock:before { content: "\f153"; }
.icon-lti:before { content: "\f154"; }
.icon-mark-as-read:before { content: "\f155"; }
.icon-masquerade:before { content: "\f1b9"; }
.icon-mastery-path:before { content: "\f1be"; }
.icon-materials-required:before { content: "\f156"; }
.icon-materials-required-light:before { content: "\f157"; }
.icon-mature:before { content: "\f158"; }
.icon-mature-light:before { content: "\f159"; }
.icon-media:before { content: "\f15a"; }
.icon-message:before { content: "\f15b"; }
.icon-mini-arrow-down:before { content: "\f15c"; }
.icon-mini-arrow-left:before { content: "\f15d"; }
.icon-mini-arrow-right:before { content: "\f15e"; }
.icon-mini-arrow-up:before { content: "\f15f"; }
.icon-minimize:before { content: "\f160"; }
.icon-module:before { content: "\f161"; }
.icon-more:before { content: "\f162"; }
.icon-ms-excel:before { content: "\f163"; }
.icon-ms-ppt:before { content: "\f164"; }
.icon-ms-word:before { content: "\f165"; }
.icon-muted:before { content: "\f166"; }
.icon-next-unread:before { content: "\f167"; }
.icon-not-graded:before { content: "\f168"; }
.icon-note-dark:before { content: "\f169"; }
.icon-note-light:before { content: "\f16a"; }
.icon-off:before { content: "\f16b"; }
.icon-outdent:before { content: "\f16c"; }
.icon-outdent2:before { content: "\f16d"; }
.icon-paperclip:before { content: "\f16e"; }
.icon-partial:before { content: "\f16f"; }
.icon-pdf:before { content: "\f170"; }
.icon-peer-graded:before { content: "\f171"; }
.icon-peer-review:before { content: "\f172"; }
.icon-pin:before { content: "\f173"; }
.icon-pinterest:before { content: "\f174"; }
.icon-plus:before { content: "\f175"; }
.icon-post-to-sis:before { content: "\f1b8"; }
.icon-prerequisite:before { content: "\f176"; }
.icon-printer:before { content: "\f177"; }
.icon-publish:before { content: "\f178"; }
.icon-question:before { content: "\f179"; }
.icon-quiz:before { content: "\f17a"; }
.icon-quiz-stats-avg:before { content: "\f17b"; }
.icon-quiz-stats-deviation:before { content: "\f17c"; }
.icon-quiz-stats-high:before { content: "\f17d"; }
.icon-quiz-stats-low:before { content: "\f17e"; }
.icon-quiz-stats-time:before { content: "\f17f"; }
.icon-refresh:before { content: "\f180"; }
.icon-remove-from-collection:before { content: "\f181"; }
.icon-replied:before { content: "\f182"; }
.icon-reply-2:before { content: "\f183"; }
.icon-reply-all-2:before { content: "\f184"; }
.icon-reset:before { content: "\f185"; }
.icon-rss:before { content: "\f186"; }
.icon-rss-add:before { content: "\f187"; }
.icon-rubric:before { content: "\f188"; }
.icon-rubric-dark:before { content: "\f189"; }
.icon-search:before { content: "\f18a"; }
.icon-search-address-book:before { content: "\f18b"; }
.icon-settings:before { content: "\f18c"; }
.icon-settings-2:before { content: "\f18d"; }
.icon-skype:before { content: "\f18e"; }
.icon-speed-grader:before { content: "\f18f"; }
.icon-standards:before { content: "\f190"; }
.icon-star:before { content: "\f191"; }
.icon-star-light:before { content: "\f1bb"; }
.icon-stats:before { content: "\f192"; }
.icon-student-view:before { content: "\f193"; }
.icon-syllabus:before { content: "\f194"; }
.icon-table:before { content: "\f1ba"; }
.icon-tag:before { content: "\f195"; }
.icon-target:before { content: "\f196"; }
.icon-text:before { content: "\f197"; }
.icon-text-center:before { content: "\f198"; }
.icon-text-left:before { content: "\f199"; }
.icon-text-right:before { content: "\f19a"; }
.icon-timer:before { content: "\f19b"; }
.icon-toggle-left:before { content: "\f19c"; }
.icon-toggle-right:before { content: "\f19d"; }
.icon-trash:before { content: "\f1a0"; }
.icon-trouble:before { content: "\f1a1"; }
.icon-twitter:before { content: "\f1a2"; }
.icon-twitter-boxed:before { content: "\f1a3"; }
.icon-unknown2:before { content: "\f1a4"; }
.icon-unlock:before { content: "\f1a5"; }
.icon-unmuted:before { content: "\f1a6"; }
.icon-unpublish:before { content: "\f1a7"; }
.icon-unpublished:before { content: "\f1a8"; }
.icon-updown:before { content: "\f1a9"; }
.icon-upload:before { content: "\f1aa"; }
.icon-user:before { content: "\f1ab"; }
.icon-user-add:before { content: "\f1ac"; }
.icon-video:before { content: "\f1ad"; }
.icon-warning:before { content: "\f1ae"; }
.icon-windows:before { content: "\f1af"; }
.icon-wordpress:before { content: "\f1b0"; }
.icon-x:before { content: "\f1b1"; }
.icon-zipped:before { content: "\f1b2"; }
@each $variant, $icon_map in $icon_index {
// conversations_new uses bootstrap-select to show a dropdown picker of which
// course to show messages for, bootstrap-select adds the markup <i class="icon-ok...>
// to designate which item in the menu is selected. we want that to use our .icon-check
// icon, but since we don't control the markup it adds, we can't tell it to use .icon-check
// instead, we just have .icon-ok copy .icon-check's styles here
.icon-ok {@extend .icon-check}
@if ($variant == $icon_default) {
@each $icon_name, $unicode in $icon_map {
.icon-#{$icon_name}:before {
content: $unicode;
}
}
}
@else {
@each $icon_name, $unicode in $icon_map {
.icon-#{$icon_name}.icon-#{$variant}:before {
content: $unicode;
}
}
}
}

4
app/stylesheets/components/_item-groups.scss
View File

@ -338,7 +338,9 @@
align-items: center;
background-color: $ic-font-color--subdued;
color: $ic-color-light;
&::before {
font-size: 1rem;
}
.ig-published:not(.student-view) & {
background-color: $ic-color-success;
}

2
app/views/conversations/index_new.html.erb
View File

@ -47,7 +47,7 @@
title="<%= t(:compose_new_message, "Compose a new message") %>"
data-tooltip>
<span class="screenreader-only"><%= t(:compose_new_message, "Compose a new message") %></span>
<i class="icon-compose"></i>
<i class="icon-compose icon-Line"></i>
</button>
<div class="btn-group">

15
config/fontcustom.yml
View File

@ -1,15 +0,0 @@
font_name: canvas-icons
preprocessor_path: false
autowidth: false
no_hash: true
force: false
debug: false
quiet: false
input:
vectors: public/fonts/icons
templates: public/fonts/icons
output:
fonts: public/fonts/canvas
css: app/stylesheets/components
templates:
- _canvas-icons.scss

1
lib/canvas/require_js.rb
View File

@ -43,6 +43,7 @@ module Canvas
'react-addons-pure-render-mixin' => 'react-addons-pure-render-mixin_requireJS',
'react-addons-test-utils' => 'react-addons-test-utils_requireJS',
'react-addons-update' => 'react-addons-update_requireJS',
:instructureicons => 'instructure-icons/'
}.update(cache_busting ? cache_busting_paths : {}).
update(plugin_paths).
update(Canvas::RequireJs::PluginExtension.paths).

14
lib/tasks/icons.rake
View File

@ -1,14 +0,0 @@
# lib/icons.rake
require 'lib/brandable_css'
namespace :icons do
task :compile do
puts "Compiling icons..."
puts %x(bundle exec fontcustom compile --force)
puts "Compiling stylesheets..."
BrandableCSS.compile_all!
puts "Compiling styleguide..."
puts %x(bundle exec rake css:styleguide)
end
end

1
package.json
View File

@ -10,6 +10,7 @@
"brandable_css": "0.0.67",
"fullcalendar": "https://github.com/ryankshaw/fullcalendar.git#aa686b36d10cee1e1e3ec7c7784145e46667d47d",
"instructure-ui": "0.17.3",
"instructure-icons": "~0.0.14",
"tinymce": "4.1.9"
},
"devDependencies": "the first group is all the things our build tooling needs",

410
public/fonts/icons/_canvas-icons.scss
View File

@ -1,410 +0,0 @@
///
/// How to update Icons
//
// TL;DR
//
// Add your new svg(s) to "public/fonts/icons/"
// Add your new icon markup to this template public/fonts/icons/_canvas-icons.scss
// Rebuild icon font with `bundle exec rake icons:compile`
//
// Details
//
// Help! I cant see my icon in "/styleguide"!
// make sure you updated the template above
//
// I can see my entry in "/styleguide", but it looks like an unsupported unicode character (an empty rectangle or a square with hex in it)
// Try doing a clean, rebuild, then restart your server
// `bundle exec rake brand_configs:clean canvas:compile_assets`
//
// I can see my entry in "/styleguide", but it is completely empty where the icon should be
// Your stylesheet isn't being loaded properly.
// make sure your svg should 512x512
// clear your browser cache
//
// More info can be found at <https://gollum.instructure.com/frontend-basics/canvas-icon-font>
///
/* @styleguide Icons
### Icons in links
```html
<a class="icon-add" href="whatever">Add Stuff</a>
```
### Icons in buttons links
```html
<p>
<a class="icon-edit btn btn-primary">Edit</a>
</p>
<p>
<button class="btn"><i class="icon-trash"></i>Delete</button>
</p>
```
Either use `<a>` with icon desired icon class added or insert `<i>` inside `<button>` and set to desired icon class
### All icons
<div class="row-fluid">
<span class="span3"><i class="icon-stats"></i> icon-stats</span>
<span class="span3"><i class="icon-paperclip"></i> icon-paperclip</span>
<span class="span3"><i class="icon-media"></i> icon-media</span>
<span class="span3"><i class="icon-address-book"></i> icon-address-book</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-reset"></i> icon-reset</span>
<span class="span3"><i class="icon-announcement"></i> icon-announcement</span>
<span class="span3"><i class="icon-analytics"></i> icon-analytics</span>
<span class="span3"><i class="icon-student-view"></i> icon-student-view</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-calendar-day"></i> icon-calendar-day</span>
<span class="span3"><i class="icon-trash"></i> icon-trash</span>
<span class="span3"><i class="icon-speed-grader"></i> icon-speed-grader</span>
<span class="span3"><i class="icon-copy-course"></i> icon-copy-course</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-export-content"></i> icon-export-content</span>
<span class="span3"><i class="icon-import-content"></i> icon-import-content</span>
<span class="span3"><i class="icon-discussion"></i> icon-discussion</span>
<span class="span3"><i class="icon-discussion-reply"></i> icon-discussion-reply</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-peer-review"></i> icon-peer-review</span>
<span class="span3"><i class="icon-discussion-new"></i> icon-discussion-new</span>
<span class="span3"><i class="icon-edit"></i> icon-edit</span>
<span class="span3"><i class="icon-home"></i> icon-home</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-settings"></i> icon-settings</span>
<span class="span3"><i class="icon-compose"></i> icon-compose</span>
<span class="span3"><i class="icon-flag"></i> icon-flag</span>
<span class="span3"><i class="icon-video"></i> icon-video</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-audio"></i> icon-audio</span>
<span class="span3"><i class="icon-outdent"></i> icon-outdent</span>
<span class="span3"><i class="icon-indent"></i> icon-indent</span>
<span class="span3"><i class="icon-outdent2"></i> icon-outdent2</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-indent2"></i> icon-indent2</span>
<span class="span3"><i class="icon-forward"></i> icon-forward</span>
<span class="span3"><i class="icon-warning"></i> icon-warning</span>
<span class="span3"><i class="icon-filmstrip"></i> icon-filmstrip</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-rubric"></i> icon-rubric</span>
<span class="span3"><i class="icon-rubric-dark"></i> icon-rubric-dark</span>
<span class="span3"><i class="icon-check-plus"></i> icon-check-plus</span>
<span class="span3"><i class="icon-rss"></i> icon-rss</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-rss-add"></i> icon-rss-add</span>
<span class="span3"><i class="icon-quiz"></i> icon-quiz</span>
<span class="span3"><i class="icon-question"></i> icon-question</span>
<span class="span3"><i class="icon-drop-down"></i> icon-drop-down</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-minimize"></i> icon-minimize</span>
<span class="span3"><i class="icon-end"></i> icon-end</span>
<span class="span3"><i class="icon-add"></i> icon-add</span>
<span class="span3"><i class="icon-info"></i> icon-info</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-check"></i> icon-check</span>
<span class="span3"><i class="icon-clock"></i> icon-clock</span>
<span class="span3"><i class="icon-calendar-month"></i> icon-calendar-month</span>
<span class="span3"><i class="icon-x"></i> icon-x</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-refresh"></i> icon-refresh</span>
<span class="span3"><i class="icon-off"></i> icon-off</span>
<span class="span3"><i class="icon-updown"></i> icon-updown</span>
<span class="span3"><i class="icon-user-add"></i> icon-user-add</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-group"></i> icon-group</span>
<span class="span3"><i class="icon-star"></i> icon-star</span>
<span class="span3"><i class="icon-star-light"></i> icon-star-light</span>
<span class="span3"><i class="icon-replied"></i> icon-replied</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-hour-glass"></i> icon-hour-glass</span>
<span class="span3"><i class="icon-assignment"></i> icon-assignment</span>
<span class="span3"><i class="icon-message"></i> icon-message</span>
<span class="span3"><i class="icon-note-dark"></i> icon-note-dark</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-note-light"></i> icon-note-light</span>
<span class="span3"><i class="icon-tag"></i> icon-tag</span>
<span class="span3"><i class="icon-next-unread"></i> icon-next-unread</span>
<span class="span3"><i class="icon-search"></i> icon-search</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-lock"></i> icon-lock</span>
<span class="span3"><i class="icon-unlock"></i> icon-unlock</span>
<span class="span3"><i class="icon-folder"></i> icon-folder</span>
<span class="span3"><i class="icon-toggle-right"></i> icon-toggle-right</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-toggle-left"></i> icon-toggle-left</span>
<span class="span3"><i class="icon-link"></i> icon-link</span>
<span class="span3"><i class="icon-lti"></i> icon-lti</span>
<span class="span3"><i class="icon-text"></i> icon-text</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-timer"></i> icon-timer</span>
<span class="span3"><i class="icon-pin"></i> icon-pin</span>
<span class="span3"><i class="icon-like"></i> icon-like</span>
<span class="span3"><i class="icon-collection-save"></i> icon-collection-save</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-collection"></i> icon-collection</span>
<span class="span3"><i class="icon-group-new"></i> icon-group-new</span>
<span class="span3"><i class="icon-group-new-dark"></i> icon-group-new-dark</span>
<span class="span3"><i class="icon-user"></i> icon-user</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-standards"></i> icon-standards</span>
<span class="span3"><i class="icon-search-address-book"></i> icon-search-address-book</span>
<span class="span3"><i class="icon-facebook"></i> icon-facebook</span>
<span class="span3"><i class="icon-facebook-boxed"></i> icon-facebook-boxed</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-linkedin"></i> icon-linkedin</span>
<span class="span3"><i class="icon-twitter"></i> icon-twitter</span>
<span class="span3"><i class="icon-twitter-boxed"></i> icon-twitter-boxed</span>
<span class="span3"><i class="icon-github"></i> icon-github</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-skype"></i> icon-skype</span>
<span class="span3"><i class="icon-wordpress"></i> icon-wordpress</span>
<span class="span3"><i class="icon-pinterest"></i> icon-pinterest</span>
<span class="span3"><i class="icon-gradebook"></i> icon-gradebook</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-document"></i> icon-document</span>
<span class="span3"><i class="icon-module"></i> icon-module</span>
<span class="span3"><i class="icon-mini-arrow-up"></i> icon-mini-arrow-up</span>
<span class="span3"><i class="icon-mini-arrow-down"></i> icon-mini-arrow-down</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-mini-arrow-left"></i> icon-mini-arrow-left</span>
<span class="span3"><i class="icon-mini-arrow-right"></i> icon-mini-arrow-right</span>
<span class="span3"><i class="icon-arrow-up"></i> icon-arrow-up</span>
<span class="span3"><i class="icon-arrow-down"></i> icon-arrow-down</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-arrow-left"></i> icon-arrow-left</span>
<span class="span3"><i class="icon-arrow-right"></i> icon-arrow-right</span>
<span class="span3"><i class="icon-email"></i> icon-email</span>
<span class="span3"><i class="icon-instructure"></i> icon-instructure</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-ms-word"></i> icon-ms-word</span>
<span class="span3"><i class="icon-ms-excel"></i> icon-ms-excel</span>
<span class="span3"><i class="icon-ms-ppt"></i> icon-ms-ppt</span>
<span class="span3"><i class="icon-pdf"></i> icon-pdf</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-apple"></i> icon-apple</span>
<span class="span3"><i class="icon-windows"></i> icon-windows</span>
<span class="span3"><i class="icon-android"></i> icon-android</span>
<span class="span3"><i class="icon-heart"></i> icon-heart</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-upload"></i> icon-upload</span>
<span class="span3"><i class="icon-download"></i> icon-download</span>
<span class="span3"><i class="icon-text-left"></i> icon-text-left</span>
<span class="span3"><i class="icon-text-center"></i> icon-text-center</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-text-right"></i> icon-text-right</span>
<span class="span3"><i class="icon-mature"></i> icon-mature</span>
<span class="span3"><i class="icon-prerequisite"></i> icon-prerequisite</span>
<span class="span3"><i class="icon-educators"></i> icon-educators</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-calendar-days"></i> icon-calendar-days</span>
<span class="span3"><i class="icon-materials-required"></i> icon-materials-required</span>
<span class="span3"><i class="icon-not-graded"></i> icon-not-graded</span>
<span class="span3"><i class="icon-peer-graded"></i> icon-peer-graded</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-bookmark"></i> icon-bookmark</span>
<span class="span3"><i class="icon-printer"></i> icon-printer</span>
<span class="span3"><i class="icon-image"></i> icon-image</span>
<span class="span3"><i class="icon-expand"></i> icon-expand</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-collapse"></i> icon-collapse</span>
<span class="span3"><i class="icon-invitation"></i> icon-invitation</span>
<span class="span3"><i class="icon-muted"></i> icon-muted</span>
<span class="span3"><i class="icon-unmuted"></i> icon-unmuted</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-plus"></i> icon-plus</span>
<span class="span3"><i class="icon-zipped"></i> icon-zipped</span>
<span class="span3"><i class="icon-publish"></i> icon-publish</span>
<span class="span3"><i class="icon-unpublish"></i> icon-unpublish</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-unpublished"></i> icon-unpublished</span>
<span class="span3"><i class="icon-discussion-check"></i> icon-discussion-check</span>
<span class="span3"><i class="icon-discussion-reply-2"></i> icon-discussion-reply-2</span>
<span class="span3"><i class="icon-discussion-search"></i> icon-discussion-search</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-discussion-x"></i> icon-discussion-x</span>
<span class="span3"><i class="icon-mark-as-read"></i> icon-mark-as-read</span>
<span class="span3"><i class="icon-more"></i> icon-more</span>
<span class="span3"><i class="icon-syllabus"></i> icon-syllabus</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-settings-2"></i> icon-settings-2</span>
<span class="span3"><i class="icon-reply-2"></i> icon-reply-2</span>
<span class="span3"><i class="icon-reply-all-2"></i> icon-reply-all-2</span>
<span class="span3"><i class="icon-drag-handle"></i> icon-drag-handle</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-remove-from-collection"></i> icon-remove-from-collection</span>
<span class="span3"><i class="icon-arrow-open-right"></i> icon-arrow-open-right</span>
<span class="span3"><i class="icon-arrow-open-left"></i> icon-arrow-open-left</span>
<span class="span3"><i class="icon-hamburger"></i> icon-hamburger</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-expand-items"></i> icon-expand-items</span>
<span class="span3"><i class="icon-forward"></i> icon-forward</span>
<span class="span3"><i class="icon-target"></i> icon-target</span>
<span class="span3"><i class="icon-quiz-stats-avg"></i> icon-quiz-stats-avg</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-quiz-stats-low"></i> icon-quiz-stats-low</span>
<span class="span3"><i class="icon-quiz-stats-high"></i> icon-quiz-stats-high</span>
<span class="span3"><i class="icon-quiz-stats-deviation"></i> icon-quiz-stats-deviation</span>
<span class="span3"><i class="icon-quiz-stats-time"></i> icon-quiz-stats-time</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-cloud-lock"></i> icon-cloud-lock</span>
<span class="span3"><i class="icon-eye"></i> icon-eye</span>
<span class="span3"><i class="icon-files-copyright"></i> icon-files-copyright</span>
<span class="span3"><i class="icon-files-creative-commons"></i> icon-files-creative-commons</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-files-fair-use"></i> icon-files-fair-use</span>
<span class="span3"><i class="icon-files-obtained-permission"></i>icon-files-obtained-permission</span>
<span class="span3"><i class="icon-files-public-domain"></i> icon-files-public-domain</span>
<span class="span3"><i class="icon-folder-locked"></i> icon-folder-locked</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-import"></i> icon-import</span>
<span class="span3"><i class="icon-export"></i> icon-export</span>
<span class="span3"><i class="icon-equella"></i> icon-equella</span>
<span class="span3"><i class="icon-equation"></i> icon-equation</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-commons"></i> icon-commons</span>
<span class="span3"><i class="icon-post-to-sis"></i> icon-post-to-sis</span>
<span class="span3"><i class="icon-masquerade"></i> icon-masquerade</span>
<span class="span3"><i class="icon-table"></i> icon-table</span>
</div>
<div class="row-fluid">
<span class="span3"><i class="icon-keyboard-shortcuts"></i> icon-keyboard-shortcuts</span>
<span class="span3"><i class="icon-mastery-path"></i> icon-mastery-path</span>
</div>
*/
@font-face {
font-family: "canvas-icons";
src: url('/fonts/canvas/canvas-icons.eot');
src: url('/fonts/canvas/canvas-icons.eot?#iefix') format('embedded-opentype'),
url('/fonts/canvas/canvas-icons.woff') format('woff'),
url('/fonts/canvas/canvas-icons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
i[class*=icon-], i[class^=icon-], a[class*=icon-], a[class^=icon-]{
&:before {
font-family: "canvas-icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
position: relative;
top: -1px;
text-rendering: optimizeLegibility;
// the specific reason for this being in the :before and not part of the <i> was to get
// .input-appends to work with .btns that had an <i> icon in them.
font-size: 16px;
// override any properties in the cascade that might make the font display incorrectly
text-transform: none !important;
font-weight: normal !important;
font-style: normal !important;
}
}
i[class*=icon-], i[class^=icon-] {
display: inline-block;
font-style: normal !important;
width: 16px; height: 16px; line-height: 16px;
// adjust icon sizes to look good with our large-size button class
.btn-large &,
.Button--large & {
width: 18px; height: 18px; line-height: 18px;
&:before{ font-size: 18px }
}
// most icons do not look good this small, so use sparingly.
// this should only be used for things like: icon-settings and icon-mini-arrow-down
.btn-mini &,
.Button--mini {
width: 12px; height: 12px; line-height: 12px;
&:before{ font-size: 12px }
}
}
// when an icon is applied directly to a link, add a little left margin to make
// things look nicer
a[class*=icon-], a[class^=icon-] {
&:before { margin-right: 4px; }
}
.standalone-icon {
// use to make standalone icons within links display as dark gray, not default link blue
&:before {
@if $use_high_contrast {
color: #444;
} @else {
color: #555;
}
}
}
// change vertical alignment of icons used with common typographic elements to line them up better
h1, h2, h3, h4, .h1, .h2, .h3, .h4, p {
i[class*=icon-]:before, i[class^=icon-]:before {
vertical-align: baseline;
}
}
<%= glyphs %>
// conversations_new uses bootstrap-select to show a dropdown picker of which
// course to show messages for, bootstrap-select adds the markup <i class="icon-ok...>
// to designate which item in the menu is selected. we want that to use our .icon-check
// icon, but since we don't control the markup it adds, we can't tell it to use .icon-check
// instead, we just have .icon-ok copy .icon-check's styles here
.icon-ok {@extend .icon-check}

1
public/fonts/instructure_icons Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/instructure-icons/fonts/

1
public/javascripts/instructure-icons Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/instructure-icons/react