diff --git a/CHANGELOG.md b/CHANGELOG.md index b8d9ee49..5c1a3ffd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 2.0.1 + +* Adds support for BU Hub Indicator within Course Feeds. + ## 2.0.0 * Support for typography mixins diff --git a/css-dev/burf-base/_config.scss b/css-dev/burf-base/_config.scss index 76f02ed5..f0b7a06d 100644 --- a/css-dev/burf-base/_config.scss +++ b/css-dev/burf-base/_config.scss @@ -588,6 +588,14 @@ $color-grayscale-f5: tint-gray( #f5f5f5 ); $color-grayscale-f: tint-gray( #fff ); +/// A grayscale variable for hover state of the BU Hub webfont. Not intended for editing. +/// @group 01-config +/// @type color +/// @access public +/// @since 2.0.0 + +$color-hub: #767676; + // ----------------------------------------------------------------- // ----------------------------------------------------------------- // ----------------------------------------------------------------- diff --git a/css-dev/burf-base/_fonts.scss b/css-dev/burf-base/_fonts.scss index f571f7f6..f2d109c2 100644 --- a/css-dev/burf-base/_fonts.scss +++ b/css-dev/burf-base/_fonts.scss @@ -83,3 +83,18 @@ font-style: italic; font-weight: 700; } + +// BU Default Icons +// ----------------------------------------------------------------- + +@font-face { + font-family: 'BU-Default-Icons'; + src: url( '//www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.eot' ); + src: url( '//www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.eot?#iefix' ) format( 'embedded-opentype' ), + url( '//www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.woff' ) format( 'woff' ), + url( '//www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.ttf' ) format( 'truetype' ), + url( '//www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.svg#bu-default-icons' ) format( 'svg' ); + font-style: normal; + font-weight: 400; + // unicode-range:U+??????; /* Include all Unicode possiblities */ +} diff --git a/css-dev/burf-base/icons/_supported.scss b/css-dev/burf-base/icons/_supported.scss index f031fd68..049d05fc 100644 --- a/css-dev/burf-base/icons/_supported.scss +++ b/css-dev/burf-base/icons/_supported.scss @@ -261,6 +261,11 @@ $icons-responsive: ( checkbox-filled: "\ED53", radio-empty: "\ED54", radio-filled: "\ED55", + + // BU Hub Indicator + + buhub: '\F700', + questionmark: '\2753', ); // Merges custom icons and overrides with the default supported icons map. diff --git a/css-dev/burf-base/icons/_ui.scss b/css-dev/burf-base/icons/_ui.scss index 5422d041..7ad1e490 100644 --- a/css-dev/burf-base/icons/_ui.scss +++ b/css-dev/burf-base/icons/_ui.scss @@ -49,7 +49,7 @@ /// The radio - empty icon. /// @example scss - Add the radio - empty icon to a menu item /// .menu-item { -/// @extend %icon-radio-empty; +/// @extend %icon-checkbox-filled; /// } /// @group icons /// @access public @@ -62,7 +62,7 @@ /// The radio - filled icon. /// @example scss - Add the radio - filled icon to a menu item /// .menu-item { -/// @extend %icon-radio-filled; +/// @extend %icon-radio-empty; /// } /// @group icons /// @access public @@ -71,3 +71,29 @@ %icon-radio-filled { @include icon( "radio-filled" ); } + +/// BU Hub Wordmark Logo +/// @example scss - Add the radio - filled icon to a menu item +/// .menu-item { +/// @extend %icon-buhub; +/// } +/// @group icons +/// @access public +/// @since 2.0.0 + +%icon-buhub { + @include icon( 'buhub' ); +} + +/// BU Hub Question Mark Icon +/// @example scss - Add the radio - filled icon to a menu item +/// .menu-item { +/// @extend %icon-questionmark; +/// } +/// @group icons +/// @access public +/// @since 2.0.0 + +%icon-questionmark { + @include icon( 'questionmark' ); +} diff --git a/css-dev/burf-theme/content/_courses.scss b/css-dev/burf-theme/content/_courses.scss index 70d3522a..dcd53196 100644 --- a/css-dev/burf-theme/content/_courses.scss +++ b/css-dev/burf-theme/content/_courses.scss @@ -7,7 +7,7 @@ /// @access public /// @since 2.0.0 -$border-coursefeed: $border !default; +$border-coursefeed: $border !default; // ================================================================= // Course Feed Styles @@ -20,6 +20,7 @@ $border-coursefeed: $border !default; .cf-course { border-top: $border-coursefeed; + clear: right; margin-top: $margin; padding-top: $padding; @@ -116,3 +117,93 @@ $border-coursefeed: $border !default; content: "Prerequisites: "; } } + +// ================================================================= +// BU Hub Indicator Styles +// ================================================================= + + +/// BU Hub Indicator Wrapper +/// @group 09-content +/// @access public +/// @since 2.0.1 + +.cf-hub-ind { + display: block; + float: unset; + margin: 0 0 20px 20px; + max-width: 305px; + width: 100%; + + .cf-course-card & { + // This breakpoint is explicit and shouldn’t be altered. + @include breakpoint( 525px ) { + float: right; + } + } +} + +/// BU Hub Indicator Title +/// @group 09-content +/// @access public +/// @since 2.0.1 + +.cf-hub-head { + text-decoration: none; +} + +/// BU Hub Indicator Title Iconstyles +/// @group 09-content +/// @access public +/// @since 2.0.1 + +.bu-hub-iconstyles { + display: inline-block; + height: 25px; + margin: 5px 0; + overflow: hidden; + + &::before { + color: $color-grayscale-5; + display: block; + font-size: 65px; + height: 25px; + line-height: 16px; + overflow: hidden; + width: 90px; + + a:hover & { + color: $color-hub; + } + } + + &.icon-buhub::before { + margin-right: 0; + width: 70px; + } + + &.icon-questionmark::before { + font-size: 16px; + line-height: 17px; + } +} + +/// BU Hub Indicator Area