/* ======================================================================= *
UA Layout - Music v1
For use with Music v1 only and no legacy styles
* ======================================================================= */
/*
Visually connect the footer to the bottom of the viewport on short pages:
*/
/* line 14, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/main.scss */
html {
background-color: #f5f5f5;
}
/* line 15, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/main.scss */
body {
background-color: #fff;
}
/*
Base styles
Non-code-outputting stylesheets required in every SCSS partial
*/
/*
Color Palette
This section is the only place where color codes should live;
All other stylesheets should reference the color variables below.
If you need to use a new color in the v1 namespace, submit it as
an addition to v1.
*/
/*
Color-related Functions
*/
/*
Generate Colors
For the purpose of generating tinted and shaded versions of base colors.
Tint & Shade from Compass:
*/
/*
tint: Mix a color with white.
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
shade: Mix a color with black
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
Improved versions of tint & shade:
*/
/*
Slightly lighten a color - more accurate version of tint()
Example: tint("#a20101", 90) --> #C12828
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage by which to tint the given color.
@return {Color}
*/
/*
Slightly darken a color - more accurate version of shade()
Example: shade("#a20101", 10) --> #830000
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage by which to shade the given color.
@return {Color}
*/
/*
Length functions
*/
/*
Relative pixels: express pixel-level measurements, automatically converted to rems.
Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
Generated style will read: `border-width: 0.3125rem`.
*/
/*
Abstract colors
These colors are building blocks, assigned to more
semantically-named color variables.
NOTE: Sass likes to be loosey-goosey and not require you to
quote strings. This never ends well; quote them anyway.
*/
/* ------- NO COLOR LITERALS beyond this point! ------ */
/* Deprecated */
/* Neutrals */
/* Colloquial grey aliases */
/* use instead of black generally */
/*
Interface palette
Specific color roles, used throughout components. Components may
also name their own color variables, based on role or usage but
they should all be aliases of colors in this file.
*/
/* Text colors */
/* Graphical element colors */
/* State and status colors */
/* Links */
/* Focus */
/* Shadows */
/* Calculate a transparent black from an opacity value: */
/* Animation shadows */
/* ======================================================================= *
Units & Measures
$mod is the basic unit of measurement for most things.
Define measures using the mod() function and a multiplier.
Examples:
margin-right: mod(0.5);
padding-bottom: mod(4);
...but evangelize the use of a small number of standard measures
* Variables, placeholders and mixins only
* Always favor @include [mixin] over @extend [class or placeholder].
* The basic unit of measure, the mod (module), is based on 1rem, which
is almost universally defined in browsers as 16px.
* ======================================================================= */
/*
Mod: return a multiple of the base unit $mod
*/
/*
Relative pixels: express pixel-level measurements, automatically converted to rems.
Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
Generated style will read: `border-width: 0.3125rem`.
*/
/* stylelint-disable unit-disallowed-list */
/* Use pixels for media queries. */
/* stylelint-enable unit-disallowed-list */
/* ======================================================================= *
Typography
* ======================================================================= */
/*
Font-size scale: although the `$font-size-x` variables (below) cannot be generated from
a list with Sass, this scale IS used to generate type utility classes.
*/
/*
Font-size variables
Number is pixel equivalent (assume `html {font-size: 16px}`)
*/
/* TODO: line-height should be set on body as (14 / 22) unitless.
There are some feature styles that are using this 22px variable... */
/*
List decoration styles:
*/
/*
Layers
Defines a named, fixed vocabulary of z-index values. Use `z` function to access.
Usage: `.bingo:focus { z-index: z(focus); }`
NOTE: only use a z-index if you absolutely need to!
*/
/* ======================================================================= *
Effects
* ======================================================================= */
/* =======================================================================
Functions: Media Queries
viewport-min() and viewport-max(). Use viewport-min() unless max is necessary.
* ======================================================================= */
/**
* viewport-min generates a media query applying to the given named breakpoint and all lower breakpoints.
*
* For example, `viewport-min(sm)` would apply to viewports 500px wide (the small breakpoint) and up.
*
* Usage:
* @include viewport-min('md') {
* -- styles for the medium breakpoint go here --
* }
*
* @param {String} $bp-name The two-letter t-shirt size abbreviation of the breakpoint
* @param {Map} $breakpoint-set: The set of breakpoints to use (default is the standard set
defined in _units.scss)
* @return {Sass} The media query, with the enclosed block of Sass included
*/
/**
* viewport-max generates a media query applying to the given named breakpoint and all higher breakpoints.
*
* For example, `viewport-max(md)` would apply to viewports 700px wide (the medium breakpoint) and down.
*
* IMPORTANT: It is advised to take a "mobile-first" approach, and therefore to
* define styles at the minimum width first, then work your way up the breakpoints.
* Prefer **viewport-min()** over viewport-max(), unless it is absolutely needed.
*
* Usage:
* @include viewport-max('sm') {
* -- styles for the small breakpoint go here --
* }
*
* @param {String} $bp-name The two-letter t-shirt size abbreviation of the breakpoint
* @param {Map} $breakpoint-set: The set of breakpoints to use (default is the standard set
defined in _units.scss)
* @return {Sass} The media query, with the enclosed block of Sass included
*/
/*
Color-related Functions
*/
/*
Generate Colors
For the purpose of generating tinted and shaded versions of base colors.
Tint & Shade from Compass:
*/
/*
tint: Mix a color with white.
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
shade: Mix a color with black
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
Improved versions of tint & shade:
*/
/*
Slightly lighten a color - more accurate version of tint()
Example: tint("#a20101", 90) --> #C12828
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage by which to tint the given color.
@return {Color}
*/
/*
Slightly darken a color - more accurate version of shade()
Example: shade("#a20101", 10) --> #830000
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage by which to shade the given color.
@return {Color}
*/
/*
Length functions
*/
/*
Relative pixels: express pixel-level measurements, automatically converted to rems.
Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
Generated style will read: `border-width: 0.3125rem`.
*/
/*
Layer functions
*/
/**
* Given a layer name, return the corresponding z-index value.
*
* Usage: `.bingo:focus { z-index: z(focus); }`
*
* @param {String} $layer A named z-layer on which to place an element.
* @return {String} A z-index value (numeric or 'auto').
*/
/* ---- Supply several property values based on icon size ---- */
/* ---- Legacy icon object: DEPRECATED ---- */
/* ---- Base icon object (embedded svg style) ---- */
/* =======================================================================
Objects: Groups
* ======================================================================= */
/* Deprecated: use line-layout() instead. */
/* =======================================================================
Objects: Lists
* ======================================================================= */
/*
List-specific defaults:
*/
/*
List-specific mixins:
plain-list: Lists without bullets or left-padding.
Indenting is added back for nested lists.
*/
/*
bullet-list: Remove browser bullet style, add back via
generated content. Allows for easy coloring/restyling of bullets,
and flexible spacing of bullets and text.
Note: offsets are relative to the left edge of the parent's content box.
*/
/* stylelint-disable no-empty-source */
/* =======================================================================
Objects: Plain Button
* ======================================================================= */
/*
Between the default element styles and this mixin, all visual decoration
is removed from the button, so you can use it to wrap arbitrary objects
without affecting their appearance.
*/
/* =======================================================================
Objects: Shapes
* ======================================================================= */
/*
Circle
*/
/*
Square
*/
/* ========================================================== *
Tools: Properties
Mixins that lend characteristics to objects and components.
* ========================================================== */
/*
Standard block spacing
*/
/*
fluid-img() - Responsive image sizing
Applies to an image, svg, or other element with inherent height & width.
The element will scale to the full width of its parent (unless the inherent
size of the element is smaller than that). Height will automatically scale to
maintain the inherent aspect ratio of the image.
*/
/*
Make an element horizontally flush with its container.
Applied to a child element to overcomes its parent's
horizontal padding.
Standard padding is usually 16px. Specify a length to
override the default.
*/
/*
Extend an item's left & right edges a given amount out into
its parent via negative marging, while adding an equal amount
of padding to offset the difference.
*/
/*
Make content invisible to the eye, but accessible by
screen readers and other assistive tech.
Uses several methods to make sure this happens in a
performant way (i.e., don't create huge render areas, etc.)
`!important` because it's used primarily as a utility class.
*/
/* stylelint-disable declaration-no-important */
/*
Disable clickable things.
*/
/*
Focus
*/
/*
Apply `appearance` vendor prefixes
Not a standard CSS property, so Autoprefixer doesn't apply.
*/
/*
Theme Mixins
-prepend-selector-chain - abstract base for "namespace"-type mixins.
Breaks out of the current selector chain and prepends a selector.
Don't use directly in component stylesheets; instead, use a special-purpose wrapper
like `theme()`, below.
@private
@param $selector {String} - the selector to prepend onto the current selector chain.
Usage:
$selector is almost always a single class. This can be used to further qualify the selector chain by adding a class
to the _beginning_ of the chain. By default it will be bound to the current first item in the chain.
*/
/*doc
---
title: theme-mixin
name: theme-mixin
category: Mixins
---
Prepends a selector to the current selector chain. Any feature
namespace, other body classes, or media queries will be preserved.
Helps keep a single source of truth for a key selector by
allowing theme styles to be nested _in context_ in the same block
as the base compoent or modifier.
Example, without the mixin:
To add a themed variant in this example, we have to break out of the nesting,
then manually assert the theme class, feature namespace, component class,
and pseudoclass, essentially duplicating the whole selector chain by hand,
which is prone to error.
```
.ns-flashcards { // topmost selector; could be on body or some page section.
...
.c-gallery__image {
border: rpx(4) solid $gray-e;
&:hover {
border-color: $gray-d;
}
}
@at-root {
.t-high-contrast.ns-flashcards .c-gallery__image:hover { // Ew.
border-color: $dark-blue;
}
}
...
}
```
Now WITH the theme() mixin, we don't have to repeat selectors, and all the styles for
.c-gallery__image are in one block (single source of truth). It's easier to understand
the code, and the specificity is still as low as possible:
```
.ns-flashcards {
...
.c-gallery__image {
border: rpx(4) solid $gray-e;
&:hover {
border-color: $gray-d;
@include theme('high-contrast') {
border-color: $dark-blue;
}
}
}
...
}
Resulting selector chain:
.t-high-contrast.ns-flashcards .c-gallery-image:hover {...}
```
Note that the theme class is chained to the previously first element
in the chain, indicating that those two classes MUST be on the same element in order
for the styles to apply.
Use to include styles for a given theme class (e.g., 'vol', 'supersites', 'high-contrast').
The `.t-` prefix is added automatically.
This works only if we follow the convention of repeating the theme class on any library or
feature namespace element inside the body.
Usage example:
```
.ns-flashcards {
.c-card {
display: inline-block;
@include theme('supersites-jr') {
background-color: $gray-9;
}
}
}
```
This code will be compiled to:
```
.ns-flashcards .c-card { display: inline-block; }
.t-supersites-jr.ns-flashcards .c-card { background-color: #999; }
```
And thus only affect the feature class when the selector chain is qualified by the theme class. The
benefit is that in the source file, all styles related to a component can be kept _with_ the component,
usually within a single block.
*/
/*doc
---
title: theme-opt-in
name: theme-opt-in-mixin
categerory: Mixins
---
Use for opting in a page fragment to a theme (rather than the entire page).
The theme-opt-in mixin is subtly different in that it puts a space between the theme
class and the rest of the selector:
```
.ns-open-ended-questions {
.c-textarea {
font-size: 1rem;
@include theme-opt-in('supersites-jr') {
font-size: var(--font-7);
}
}
}
```
This example generates the following CSS selector:
```
.t-supersites-jr .ns-open-ended-questions .c-textarea {...}
^ this space is the difference.
```
Now the theme class can stay on the body. This allows us to opt-in a subset
of the page without repeating the theme class.
*/
/* ======================================================================= *
UA Headings - Music v1
For use with Music v1 only and no legacy styles
* ======================================================================= */
/* line 11, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_headings.scss */
.ns-ua .c-heading-1--ua {
color: #333;
font-size: 1.25rem;
font-weight: normal;
margin-bottom: 1.5rem;
padding-top: 10px;
}
/* line 19, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_headings.scss */
.ns-ua .c-heading-2--ua {
color: #333;
font-size: 1rem;
font-weight: normal;
margin-bottom: 0;
padding-top: 10px;
}
/* line 27, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_headings.scss */
.ns-ua .c-heading-3--ua {
font-size: 0.875rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
/* line 33, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_headings.scss */
.ns-ua .c-heading--label {
font-size: 0.875rem;
color: #666;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: normal;
margin-bottom: 0.5rem;
}
/* ======================================================================= *
UA Layout - Music v1
For use with Music v1 only and no legacy styles
* ======================================================================= */
/* line 10, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_layout.scss */
.ns-ua .c-footer {
background-color: #f5f5f5;
padding: 1em 0;
margin-top: 4rem;
}
/*
Prevent margin collapse from exposing html element at top of pages with no masthead:
*/
/* line 22, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_layout.scss */
body.ns-ua {
border-top: 1px solid #000;
}
/*
Base styles
Non-code-outputting stylesheets required in every SCSS partial
*/
/*
Color Palette
This section is the only place where color codes should live;
All other stylesheets should reference the color variables below.
If you need to use a new color in the v1 namespace, submit it as
an addition to v1.
*/
/*
Color-related Functions
*/
/*
Generate Colors
For the purpose of generating tinted and shaded versions of base colors.
Tint & Shade from Compass:
*/
/*
tint: Mix a color with white.
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
shade: Mix a color with black
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
Improved versions of tint & shade:
*/
/*
Slightly lighten a color - more accurate version of tint()
Example: tint("#a20101", 90) --> #C12828
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage by which to tint the given color.
@return {Color}
*/
/*
Slightly darken a color - more accurate version of shade()
Example: shade("#a20101", 10) --> #830000
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage by which to shade the given color.
@return {Color}
*/
/*
Length functions
*/
/*
Relative pixels: express pixel-level measurements, automatically converted to rems.
Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
Generated style will read: `border-width: 0.3125rem`.
*/
/*
Abstract colors
These colors are building blocks, assigned to more
semantically-named color variables.
NOTE: Sass likes to be loosey-goosey and not require you to
quote strings. This never ends well; quote them anyway.
*/
/* ------- NO COLOR LITERALS beyond this point! ------ */
/* Deprecated */
/* Neutrals */
/* Colloquial grey aliases */
/* use instead of black generally */
/*
Interface palette
Specific color roles, used throughout components. Components may
also name their own color variables, based on role or usage but
they should all be aliases of colors in this file.
*/
/* Text colors */
/* Graphical element colors */
/* State and status colors */
/* Links */
/* Focus */
/* Shadows */
/* Calculate a transparent black from an opacity value: */
/* Animation shadows */
/* ======================================================================= *
Units & Measures
$mod is the basic unit of measurement for most things.
Define measures using the mod() function and a multiplier.
Examples:
margin-right: mod(0.5);
padding-bottom: mod(4);
...but evangelize the use of a small number of standard measures
* Variables, placeholders and mixins only
* Always favor @include [mixin] over @extend [class or placeholder].
* The basic unit of measure, the mod (module), is based on 1rem, which
is almost universally defined in browsers as 16px.
* ======================================================================= */
/*
Mod: return a multiple of the base unit $mod
*/
/*
Relative pixels: express pixel-level measurements, automatically converted to rems.
Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
Generated style will read: `border-width: 0.3125rem`.
*/
/* stylelint-disable unit-disallowed-list */
/* Use pixels for media queries. */
/* stylelint-enable unit-disallowed-list */
/* ======================================================================= *
Typography
* ======================================================================= */
/*
Font-size scale: although the `$font-size-x` variables (below) cannot be generated from
a list with Sass, this scale IS used to generate type utility classes.
*/
/*
Font-size variables
Number is pixel equivalent (assume `html {font-size: 16px}`)
*/
/* TODO: line-height should be set on body as (14 / 22) unitless.
There are some feature styles that are using this 22px variable... */
/*
List decoration styles:
*/
/*
Layers
Defines a named, fixed vocabulary of z-index values. Use `z` function to access.
Usage: `.bingo:focus { z-index: z(focus); }`
NOTE: only use a z-index if you absolutely need to!
*/
/* ======================================================================= *
Effects
* ======================================================================= */
/* =======================================================================
Functions: Media Queries
viewport-min() and viewport-max(). Use viewport-min() unless max is necessary.
* ======================================================================= */
/**
* viewport-min generates a media query applying to the given named breakpoint and all lower breakpoints.
*
* For example, `viewport-min(sm)` would apply to viewports 500px wide (the small breakpoint) and up.
*
* Usage:
* @include viewport-min('md') {
* -- styles for the medium breakpoint go here --
* }
*
* @param {String} $bp-name The two-letter t-shirt size abbreviation of the breakpoint
* @param {Map} $breakpoint-set: The set of breakpoints to use (default is the standard set
defined in _units.scss)
* @return {Sass} The media query, with the enclosed block of Sass included
*/
/**
* viewport-max generates a media query applying to the given named breakpoint and all higher breakpoints.
*
* For example, `viewport-max(md)` would apply to viewports 700px wide (the medium breakpoint) and down.
*
* IMPORTANT: It is advised to take a "mobile-first" approach, and therefore to
* define styles at the minimum width first, then work your way up the breakpoints.
* Prefer **viewport-min()** over viewport-max(), unless it is absolutely needed.
*
* Usage:
* @include viewport-max('sm') {
* -- styles for the small breakpoint go here --
* }
*
* @param {String} $bp-name The two-letter t-shirt size abbreviation of the breakpoint
* @param {Map} $breakpoint-set: The set of breakpoints to use (default is the standard set
defined in _units.scss)
* @return {Sass} The media query, with the enclosed block of Sass included
*/
/*
Color-related Functions
*/
/*
Generate Colors
For the purpose of generating tinted and shaded versions of base colors.
Tint & Shade from Compass:
*/
/*
tint: Mix a color with white.
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
shade: Mix a color with black
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
Improved versions of tint & shade:
*/
/*
Slightly lighten a color - more accurate version of tint()
Example: tint("#a20101", 90) --> #C12828
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage by which to tint the given color.
@return {Color}
*/
/*
Slightly darken a color - more accurate version of shade()
Example: shade("#a20101", 10) --> #830000
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage by which to shade the given color.
@return {Color}
*/
/*
Length functions
*/
/*
Relative pixels: express pixel-level measurements, automatically converted to rems.
Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
Generated style will read: `border-width: 0.3125rem`.
*/
/*
Layer functions
*/
/**
* Given a layer name, return the corresponding z-index value.
*
* Usage: `.bingo:focus { z-index: z(focus); }`
*
* @param {String} $layer A named z-layer on which to place an element.
* @return {String} A z-index value (numeric or 'auto').
*/
/* ---- Supply several property values based on icon size ---- */
/* ---- Legacy icon object: DEPRECATED ---- */
/* ---- Base icon object (embedded svg style) ---- */
/* =======================================================================
Objects: Groups
* ======================================================================= */
/* Deprecated: use line-layout() instead. */
/* =======================================================================
Objects: Lists
* ======================================================================= */
/*
List-specific defaults:
*/
/*
List-specific mixins:
plain-list: Lists without bullets or left-padding.
Indenting is added back for nested lists.
*/
/*
bullet-list: Remove browser bullet style, add back via
generated content. Allows for easy coloring/restyling of bullets,
and flexible spacing of bullets and text.
Note: offsets are relative to the left edge of the parent's content box.
*/
/* stylelint-disable no-empty-source */
/* =======================================================================
Objects: Plain Button
* ======================================================================= */
/*
Between the default element styles and this mixin, all visual decoration
is removed from the button, so you can use it to wrap arbitrary objects
without affecting their appearance.
*/
/* =======================================================================
Objects: Shapes
* ======================================================================= */
/*
Circle
*/
/*
Square
*/
/* ========================================================== *
Tools: Properties
Mixins that lend characteristics to objects and components.
* ========================================================== */
/*
Standard block spacing
*/
/*
fluid-img() - Responsive image sizing
Applies to an image, svg, or other element with inherent height & width.
The element will scale to the full width of its parent (unless the inherent
size of the element is smaller than that). Height will automatically scale to
maintain the inherent aspect ratio of the image.
*/
/*
Make an element horizontally flush with its container.
Applied to a child element to overcomes its parent's
horizontal padding.
Standard padding is usually 16px. Specify a length to
override the default.
*/
/*
Extend an item's left & right edges a given amount out into
its parent via negative marging, while adding an equal amount
of padding to offset the difference.
*/
/*
Make content invisible to the eye, but accessible by
screen readers and other assistive tech.
Uses several methods to make sure this happens in a
performant way (i.e., don't create huge render areas, etc.)
`!important` because it's used primarily as a utility class.
*/
/* stylelint-disable declaration-no-important */
/*
Disable clickable things.
*/
/*
Focus
*/
/*
Apply `appearance` vendor prefixes
Not a standard CSS property, so Autoprefixer doesn't apply.
*/
/*
Theme Mixins
-prepend-selector-chain - abstract base for "namespace"-type mixins.
Breaks out of the current selector chain and prepends a selector.
Don't use directly in component stylesheets; instead, use a special-purpose wrapper
like `theme()`, below.
@private
@param $selector {String} - the selector to prepend onto the current selector chain.
Usage:
$selector is almost always a single class. This can be used to further qualify the selector chain by adding a class
to the _beginning_ of the chain. By default it will be bound to the current first item in the chain.
*/
/*doc
---
title: theme-mixin
name: theme-mixin
category: Mixins
---
Prepends a selector to the current selector chain. Any feature
namespace, other body classes, or media queries will be preserved.
Helps keep a single source of truth for a key selector by
allowing theme styles to be nested _in context_ in the same block
as the base compoent or modifier.
Example, without the mixin:
To add a themed variant in this example, we have to break out of the nesting,
then manually assert the theme class, feature namespace, component class,
and pseudoclass, essentially duplicating the whole selector chain by hand,
which is prone to error.
```
.ns-flashcards { // topmost selector; could be on body or some page section.
...
.c-gallery__image {
border: rpx(4) solid $gray-e;
&:hover {
border-color: $gray-d;
}
}
@at-root {
.t-high-contrast.ns-flashcards .c-gallery__image:hover { // Ew.
border-color: $dark-blue;
}
}
...
}
```
Now WITH the theme() mixin, we don't have to repeat selectors, and all the styles for
.c-gallery__image are in one block (single source of truth). It's easier to understand
the code, and the specificity is still as low as possible:
```
.ns-flashcards {
...
.c-gallery__image {
border: rpx(4) solid $gray-e;
&:hover {
border-color: $gray-d;
@include theme('high-contrast') {
border-color: $dark-blue;
}
}
}
...
}
Resulting selector chain:
.t-high-contrast.ns-flashcards .c-gallery-image:hover {...}
```
Note that the theme class is chained to the previously first element
in the chain, indicating that those two classes MUST be on the same element in order
for the styles to apply.
Use to include styles for a given theme class (e.g., 'vol', 'supersites', 'high-contrast').
The `.t-` prefix is added automatically.
This works only if we follow the convention of repeating the theme class on any library or
feature namespace element inside the body.
Usage example:
```
.ns-flashcards {
.c-card {
display: inline-block;
@include theme('supersites-jr') {
background-color: $gray-9;
}
}
}
```
This code will be compiled to:
```
.ns-flashcards .c-card { display: inline-block; }
.t-supersites-jr.ns-flashcards .c-card { background-color: #999; }
```
And thus only affect the feature class when the selector chain is qualified by the theme class. The
benefit is that in the source file, all styles related to a component can be kept _with_ the component,
usually within a single block.
*/
/*doc
---
title: theme-opt-in
name: theme-opt-in-mixin
categerory: Mixins
---
Use for opting in a page fragment to a theme (rather than the entire page).
The theme-opt-in mixin is subtly different in that it puts a space between the theme
class and the rest of the selector:
```
.ns-open-ended-questions {
.c-textarea {
font-size: 1rem;
@include theme-opt-in('supersites-jr') {
font-size: var(--font-7);
}
}
}
```
This example generates the following CSS selector:
```
.t-supersites-jr .ns-open-ended-questions .c-textarea {...}
^ this space is the difference.
```
Now the theme class can stay on the body. This allows us to opt-in a subset
of the page without repeating the theme class.
*/
/* ======================================================================= *
Modal dialogs
* ======================================================================= */
/* line 10, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_info_modal.scss */
.ns-music-v1 {
/*doc
---
title: Modal Dialog
name: Modal
category: Containers
---
`.c-modal` - BLOCK - extends `div`.
```html_example
This could be very dangerous. Press the button to confirm.
```
.c-modal
.c-modal__body
.c-modal__heading
.c-modal__actions
*/
}
/* line 48, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_info_modal.scss */
.ns-music-v1 .c-modal {
position: fixed;
z-index: 200;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
/* line 62, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_info_modal.scss */
.ns-music-v1 .c-modal__box {
position: relative;
max-width: 40rem;
margin-bottom: 2rem;
padding: 2rem;
padding-right: 3rem;
font-size: 1rem;
background-color: #fff;
box-shadow: 0.0625rem 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.18);
}
/* line 75, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_info_modal.scss */
.ns-music-v1 .c-modal__close-button {
font-size: 1.5rem;
font-weight: bold;
line-height: 0.5;
padding: 0.5rem;
color: #999;
position: absolute;
top: 1rem;
right: 1rem;
}
/* line 85, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_info_modal.scss */
.ns-music-v1 .c-modal__close-button:hover {
color: #52abe2;
}
/* line 90, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_info_modal.scss */
.ns-music-v1 .c-heading--modal {
font-size: 1.25rem;
}
/* end ns-music-v1 */
/* =======================================================================
Layout: Media object
UA feature version -- can be deleted when v1 media object releases.
* ======================================================================= */
/*doc
---
title: Media Object
name: media-object
category: Layout
---
Layout class. Places a block of otherwise full-width content next to a media
item such as an image. Content does not wrap the media, but columns are
created. The media column is as wide as needs to be.
```html_example_table
This page only shows courses and sections that you have already created within VHLcentral.
Create the courses and sections you need within your VHL program before initiating this process again.
This page only shows courses and sections that you have already created within VHLcentral.
Create the courses and sections you need within your VHL program before initiating this process again.
```
*/
/* line 46, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_media_objects.scss */
.ns-ua .l-media {
display: flex;
align-items: flex-start;
}
/* line 51, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_media_objects.scss */
.ns-ua .l-media__img {
margin-right: 1rem;
}
/* line 55, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_media_objects.scss */
.ns-ua .l-media__body {
flex: 1;
}
/* line 59, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_media_objects.scss */
.ns-ua .l-media--rev > .l-media__img {
order: 1;
margin: 0 0 0 1rem;
}
/* =================================================== *
Error Messages
Copied from Gradebook
TODO: Should be refactored into library styles later.
These are on page errors, not flash banners, and
are used in form validation. Use what DOM elements
make sense for specific error message. It does not
have to be an h2 for the heading, for example.
html structure (with body):
3 errors prohibited this report from being saved
Data columns is required
html structure (heading only):
This report has
defaulted to "All Categories"
given that the saved Category does not
exists in this course section.
* =================================================== */
/* line 40, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_errors.scss */
.c-message {
padding: 1rem;
font-size: 0.875rem;
}
/* line 48, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_errors.scss */
.c-message .c-message__heading {
display: block;
font-size: 1rem;
font-weight: normal;
background-repeat: no-repeat;
background-size: 1rem;
background-position-y: 5px;
padding-left: 2rem;
}
/* line 57, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_errors.scss */
.c-message .c-message__heading:only-child {
margin-bottom: 0;
}
/* line 62, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_errors.scss */
.c-message .c-message__body {
margin-left: 3rem;
margin-bottom: 0;
}
/* line 68, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_errors.scss */
.c-message--error {
background-color: #f9d5cd;
}
/* line 71, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_errors.scss */
.c-message--error .c-message__heading {
background-image: url(/assets/music/icons/flash-banners/icon-error-304f0c07786b538e45dd3d89df396a10ac9bad722df8514abe8f8c523507d2cb.svg);
}
/* line 76, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_errors.scss */
.c-message--warning {
background-color: #ffebcb;
}
/* line 79, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_errors.scss */
.c-message--warning .c-message__heading {
background-image: url(/assets/music/icons/flash-banners/icon-warning-6cd7c5709fb353b98480327987f57dd2f335e848fdfb5066b9ecbad15870b8f7.svg);
}
/* ======================================================================= *
Form Input -- UA only
* ======================================================================= */
/* line 6, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_inputs.scss */
.ns-ua {
/*
This will be sorted out in library styles in an upcoming story. For now,
this standardized bottom-spacing on form inputs just for UA.
*/
}
/* line 12, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_inputs.scss */
.ns-ua .c-form-item {
margin-bottom: 1rem;
}
/*
Home Page styles
*/
/* line 7, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home {
--cover-image--width: 10.8125rem;
/* over-riding #page_container & app_styles to match Music V1 styles */
/*
Cover Wrapper
[1]: Shrinks-wraps the cover image.
[2]: Provides positioning context for demo banner.
[3]: Centers cover image at smaller viewport sizes.
*/
}
/* line 10, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home p, .ns-home h4, .ns-home dt {
line-height: normal;
font-size: 0.875rem;
}
/* line 15, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-my-programs__divider {
height: 0.0625rem;
background-color: #666;
margin-bottom: 0.3125rem;
border: none;
}
/* line 22, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program {
position: relative;
}
/* line 25, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program .c-program__cover {
display: flex;
flex-wrap: wrap;
padding: 1rem;
}
/* line 30, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program .c-program__cover:hover, .ns-home .c-program .c-program__cover:focus {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
transition: box-shadow 0.3s ease-in-out;
}
/* line 36, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program .c-program__cover .c-program__cover__link {
text-decoration: none;
color: inherit;
}
/* line 40, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program .c-program__cover .c-program__cover__link:hover .c-program-listing__link {
text-decoration: underline;
}
/* line 45, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program .c-program__cover .course_date {
margin-top: 0.3125rem;
font-style: italic;
}
/* line 51, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program .c-program-listing__divider {
height: 0.0625rem;
background-color: #ddd;
margin: 0.5625rem 0;
border: none;
width: 90%;
}
/* line 59, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program .c-course-section-name {
font-size: 0.875rem;
line-height: normal;
font-weight: bold;
}
/* line 66, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program-listing {
margin-bottom: 0.12rem;
}
/* line 70, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program-listing--active {
margin-bottom: 0.5rem;
}
/* line 74, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program-listing--closed,
.ns-home .c-program-listing--dropped {
color: #666;
}
/* line 78, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program-listing--closed h4,
.ns-home .c-program-listing--dropped h4 {
color: #666;
}
/* line 83, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program__cover-image {
width: var(--cover-image--width, 10.8125rem);
}
/* line 94, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program__cover-wrapper {
display: table;
/* [1] */
position: relative;
/* [2] */
}
@media (max-width: 699px) {
/* line 100, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program__cover-wrapper {
margin-left: auto;
/* [3] */
margin-right: auto;
/* [3] */
}
}
/* line 106, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-demo-banner {
background-color: #fff;
color: #333;
font-weight: bold;
padding: 0.625rem;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%;
opacity: 0.8;
filter: alpha(opacity=80);
}
/* line 120, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-demo-banner__num-days {
color: #CE0C24;
padding: 0;
}
/* line 125, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-demo-banner__extend {
color: #006bae;
}
/* line 129, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-program-list li {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 0.375rem;
}
/* line 135, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-home-content-item {
margin-bottom: 3rem;
}
/* line 139, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-button--cur-rw {
display: inline-block;
padding-left: 1.2rem;
padding-right: 1.2rem;
width: 12.5rem;
}
@media (min-width: 700px) {
/* line 139, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_home.scss */
.ns-home .c-button--cur-rw {
margin-left: -0.875rem;
}
}
/* end .ns-ua */
/* =================================================== *
Copied from gradebook
* =================================================== */
/*
"Late" tag
*/
/* line 14, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tags.scss */
.c-tag {
font-size: 0.75rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.0625rem;
border: 0.0625rem solid;
border-radius: 0.1875rem;
padding: 0.0625rem 0.3125rem;
vertical-align: 0.125rem;
}
/* line 25, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tags.scss */
.c-tag--late {
color: #CE0C24;
}
/* line 29, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tags.scss */
.c-tag--trend-up {
color: #1D873E;
}
/* line 33, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tags.scss */
.c-tag--trend-down {
color: #CE0C24;
}
/* line 37, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tags.scss */
.c-tag--trend-default {
color: #000;
}
/* Styles the markup generated by will_paginate helper. */
/* line 3, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_pagination.scss */
.pagination * {
padding: 0.5rem;
}
/* line 6, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_pagination.scss */
.pagination *.current {
border-bottom: 0.125rem solid #FF6028;
font-style: normal;
font-weight: bold;
}
/* line 12, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_pagination.scss */
.pagination *.next_page, .pagination *.previous_page {
color: #006bae;
}
/* line 16, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_pagination.scss */
.pagination *.next_page *, .pagination *.previous_page * {
padding: 0;
}
/* line 20, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_pagination.scss */
.pagination *.next_page svg, .pagination *.previous_page svg {
fill: #006bae;
}
/* line 24, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_pagination.scss */
.pagination *.previous_page svg {
transform: rotate(-180deg);
}
/* line 28, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_pagination.scss */
.pagination *.disabled {
color: #ccc;
}
/* line 31, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_pagination.scss */
.pagination *.disabled svg {
fill: #ccc;
}
/* line 38, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_pagination.scss */
.pagination > a:not(.previous_page):not(.next_page):hover {
background-color: #ffefea;
text-decoration: none;
}
/* ======================================================================= *
UA - Home Page - Responsive styles
* ======================================================================= */
@media (max-width: 699px) {
/* line 9, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_responsive.scss */
.ns-ua .c-programs-column {
width: 100%;
text-align: center;
margin-bottom: 4rem;
}
/* line 15, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_responsive.scss */
.ns-ua .c-news-column {
flex-shrink: 0;
margin-bottom: 4rem;
}
}
/*
Base styles
Non-code-outputting stylesheets required in every SCSS partial
*/
/*
Color Palette
This section is the only place where color codes should live;
All other stylesheets should reference the color variables below.
If you need to use a new color in the v1 namespace, submit it as
an addition to v1.
*/
/*
Color-related Functions
*/
/*
Generate Colors
For the purpose of generating tinted and shaded versions of base colors.
Tint & Shade from Compass:
*/
/*
tint: Mix a color with white.
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
shade: Mix a color with black
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
Improved versions of tint & shade:
*/
/*
Slightly lighten a color - more accurate version of tint()
Example: tint("#a20101", 90) --> #C12828
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage by which to tint the given color.
@return {Color}
*/
/*
Slightly darken a color - more accurate version of shade()
Example: shade("#a20101", 10) --> #830000
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage by which to shade the given color.
@return {Color}
*/
/*
Length functions
*/
/*
Relative pixels: express pixel-level measurements, automatically converted to rems.
Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
Generated style will read: `border-width: 0.3125rem`.
*/
/*
Abstract colors
These colors are building blocks, assigned to more
semantically-named color variables.
NOTE: Sass likes to be loosey-goosey and not require you to
quote strings. This never ends well; quote them anyway.
*/
/* ------- NO COLOR LITERALS beyond this point! ------ */
/* Deprecated */
/* Neutrals */
/* Colloquial grey aliases */
/* use instead of black generally */
/*
Interface palette
Specific color roles, used throughout components. Components may
also name their own color variables, based on role or usage but
they should all be aliases of colors in this file.
*/
/* Text colors */
/* Graphical element colors */
/* State and status colors */
/* Links */
/* Focus */
/* Shadows */
/* Calculate a transparent black from an opacity value: */
/* Animation shadows */
/* ======================================================================= *
Units & Measures
$mod is the basic unit of measurement for most things.
Define measures using the mod() function and a multiplier.
Examples:
margin-right: mod(0.5);
padding-bottom: mod(4);
...but evangelize the use of a small number of standard measures
* Variables, placeholders and mixins only
* Always favor @include [mixin] over @extend [class or placeholder].
* The basic unit of measure, the mod (module), is based on 1rem, which
is almost universally defined in browsers as 16px.
* ======================================================================= */
/*
Mod: return a multiple of the base unit $mod
*/
/*
Relative pixels: express pixel-level measurements, automatically converted to rems.
Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
Generated style will read: `border-width: 0.3125rem`.
*/
/* stylelint-disable unit-disallowed-list */
/* Use pixels for media queries. */
/* stylelint-enable unit-disallowed-list */
/* ======================================================================= *
Typography
* ======================================================================= */
/*
Font-size scale: although the `$font-size-x` variables (below) cannot be generated from
a list with Sass, this scale IS used to generate type utility classes.
*/
/*
Font-size variables
Number is pixel equivalent (assume `html {font-size: 16px}`)
*/
/* TODO: line-height should be set on body as (14 / 22) unitless.
There are some feature styles that are using this 22px variable... */
/*
List decoration styles:
*/
/*
Layers
Defines a named, fixed vocabulary of z-index values. Use `z` function to access.
Usage: `.bingo:focus { z-index: z(focus); }`
NOTE: only use a z-index if you absolutely need to!
*/
/* ======================================================================= *
Effects
* ======================================================================= */
/* =======================================================================
Functions: Media Queries
viewport-min() and viewport-max(). Use viewport-min() unless max is necessary.
* ======================================================================= */
/**
* viewport-min generates a media query applying to the given named breakpoint and all lower breakpoints.
*
* For example, `viewport-min(sm)` would apply to viewports 500px wide (the small breakpoint) and up.
*
* Usage:
* @include viewport-min('md') {
* -- styles for the medium breakpoint go here --
* }
*
* @param {String} $bp-name The two-letter t-shirt size abbreviation of the breakpoint
* @param {Map} $breakpoint-set: The set of breakpoints to use (default is the standard set
defined in _units.scss)
* @return {Sass} The media query, with the enclosed block of Sass included
*/
/**
* viewport-max generates a media query applying to the given named breakpoint and all higher breakpoints.
*
* For example, `viewport-max(md)` would apply to viewports 700px wide (the medium breakpoint) and down.
*
* IMPORTANT: It is advised to take a "mobile-first" approach, and therefore to
* define styles at the minimum width first, then work your way up the breakpoints.
* Prefer **viewport-min()** over viewport-max(), unless it is absolutely needed.
*
* Usage:
* @include viewport-max('sm') {
* -- styles for the small breakpoint go here --
* }
*
* @param {String} $bp-name The two-letter t-shirt size abbreviation of the breakpoint
* @param {Map} $breakpoint-set: The set of breakpoints to use (default is the standard set
defined in _units.scss)
* @return {Sass} The media query, with the enclosed block of Sass included
*/
/*
Color-related Functions
*/
/*
Generate Colors
For the purpose of generating tinted and shaded versions of base colors.
Tint & Shade from Compass:
*/
/*
tint: Mix a color with white.
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
shade: Mix a color with black
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
*/
/*
Improved versions of tint & shade:
*/
/*
Slightly lighten a color - more accurate version of tint()
Example: tint("#a20101", 90) --> #C12828
@access public
@param {Color} $color - color to tint
@param {Number} $percentage - percentage by which to tint the given color.
@return {Color}
*/
/*
Slightly darken a color - more accurate version of shade()
Example: shade("#a20101", 10) --> #830000
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage by which to shade the given color.
@return {Color}
*/
/*
Length functions
*/
/*
Relative pixels: express pixel-level measurements, automatically converted to rems.
Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
Generated style will read: `border-width: 0.3125rem`.
*/
/*
Layer functions
*/
/**
* Given a layer name, return the corresponding z-index value.
*
* Usage: `.bingo:focus { z-index: z(focus); }`
*
* @param {String} $layer A named z-layer on which to place an element.
* @return {String} A z-index value (numeric or 'auto').
*/
/* ---- Supply several property values based on icon size ---- */
/* ---- Legacy icon object: DEPRECATED ---- */
/* ---- Base icon object (embedded svg style) ---- */
/* =======================================================================
Objects: Groups
* ======================================================================= */
/* Deprecated: use line-layout() instead. */
/* =======================================================================
Objects: Lists
* ======================================================================= */
/*
List-specific defaults:
*/
/*
List-specific mixins:
plain-list: Lists without bullets or left-padding.
Indenting is added back for nested lists.
*/
/*
bullet-list: Remove browser bullet style, add back via
generated content. Allows for easy coloring/restyling of bullets,
and flexible spacing of bullets and text.
Note: offsets are relative to the left edge of the parent's content box.
*/
/* stylelint-disable no-empty-source */
/* =======================================================================
Objects: Plain Button
* ======================================================================= */
/*
Between the default element styles and this mixin, all visual decoration
is removed from the button, so you can use it to wrap arbitrary objects
without affecting their appearance.
*/
/* =======================================================================
Objects: Shapes
* ======================================================================= */
/*
Circle
*/
/*
Square
*/
/* ========================================================== *
Tools: Properties
Mixins that lend characteristics to objects and components.
* ========================================================== */
/*
Standard block spacing
*/
/*
fluid-img() - Responsive image sizing
Applies to an image, svg, or other element with inherent height & width.
The element will scale to the full width of its parent (unless the inherent
size of the element is smaller than that). Height will automatically scale to
maintain the inherent aspect ratio of the image.
*/
/*
Make an element horizontally flush with its container.
Applied to a child element to overcomes its parent's
horizontal padding.
Standard padding is usually 16px. Specify a length to
override the default.
*/
/*
Extend an item's left & right edges a given amount out into
its parent via negative marging, while adding an equal amount
of padding to offset the difference.
*/
/*
Make content invisible to the eye, but accessible by
screen readers and other assistive tech.
Uses several methods to make sure this happens in a
performant way (i.e., don't create huge render areas, etc.)
`!important` because it's used primarily as a utility class.
*/
/* stylelint-disable declaration-no-important */
/*
Disable clickable things.
*/
/*
Focus
*/
/*
Apply `appearance` vendor prefixes
Not a standard CSS property, so Autoprefixer doesn't apply.
*/
/*
Theme Mixins
-prepend-selector-chain - abstract base for "namespace"-type mixins.
Breaks out of the current selector chain and prepends a selector.
Don't use directly in component stylesheets; instead, use a special-purpose wrapper
like `theme()`, below.
@private
@param $selector {String} - the selector to prepend onto the current selector chain.
Usage:
$selector is almost always a single class. This can be used to further qualify the selector chain by adding a class
to the _beginning_ of the chain. By default it will be bound to the current first item in the chain.
*/
/*doc
---
title: theme-mixin
name: theme-mixin
category: Mixins
---
Prepends a selector to the current selector chain. Any feature
namespace, other body classes, or media queries will be preserved.
Helps keep a single source of truth for a key selector by
allowing theme styles to be nested _in context_ in the same block
as the base compoent or modifier.
Example, without the mixin:
To add a themed variant in this example, we have to break out of the nesting,
then manually assert the theme class, feature namespace, component class,
and pseudoclass, essentially duplicating the whole selector chain by hand,
which is prone to error.
```
.ns-flashcards { // topmost selector; could be on body or some page section.
...
.c-gallery__image {
border: rpx(4) solid $gray-e;
&:hover {
border-color: $gray-d;
}
}
@at-root {
.t-high-contrast.ns-flashcards .c-gallery__image:hover { // Ew.
border-color: $dark-blue;
}
}
...
}
```
Now WITH the theme() mixin, we don't have to repeat selectors, and all the styles for
.c-gallery__image are in one block (single source of truth). It's easier to understand
the code, and the specificity is still as low as possible:
```
.ns-flashcards {
...
.c-gallery__image {
border: rpx(4) solid $gray-e;
&:hover {
border-color: $gray-d;
@include theme('high-contrast') {
border-color: $dark-blue;
}
}
}
...
}
Resulting selector chain:
.t-high-contrast.ns-flashcards .c-gallery-image:hover {...}
```
Note that the theme class is chained to the previously first element
in the chain, indicating that those two classes MUST be on the same element in order
for the styles to apply.
Use to include styles for a given theme class (e.g., 'vol', 'supersites', 'high-contrast').
The `.t-` prefix is added automatically.
This works only if we follow the convention of repeating the theme class on any library or
feature namespace element inside the body.
Usage example:
```
.ns-flashcards {
.c-card {
display: inline-block;
@include theme('supersites-jr') {
background-color: $gray-9;
}
}
}
```
This code will be compiled to:
```
.ns-flashcards .c-card { display: inline-block; }
.t-supersites-jr.ns-flashcards .c-card { background-color: #999; }
```
And thus only affect the feature class when the selector chain is qualified by the theme class. The
benefit is that in the source file, all styles related to a component can be kept _with_ the component,
usually within a single block.
*/
/*doc
---
title: theme-opt-in
name: theme-opt-in-mixin
categerory: Mixins
---
Use for opting in a page fragment to a theme (rather than the entire page).
The theme-opt-in mixin is subtly different in that it puts a space between the theme
class and the rest of the selector:
```
.ns-open-ended-questions {
.c-textarea {
font-size: 1rem;
@include theme-opt-in('supersites-jr') {
font-size: var(--font-7);
}
}
}
```
This example generates the following CSS selector:
```
.t-supersites-jr .ns-open-ended-questions .c-textarea {...}
^ this space is the difference.
```
Now the theme class can stay on the body. This allows us to opt-in a subset
of the page without repeating the theme class.
*/
/* ======================================================================= *
Headings
* ======================================================================= */
/* line 21, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 {
/*doc
---
title: Headings
name: headings
category: Typography
---
* Use appropriate heading element level `h1`-`h6` for correct document semantics.
* Optionally, add one of these heading classes for appearance.
```html_example_table
Heading (xl)
Heading (lg)
Heading (md)
Heading (sm)
Heading (xs)
Generic Heading
Page Title
Modal Heading
All-caps Heading
```
*/
/* Define basic set of headings: */
/*
Semantic, artisanal heading classes for particular roles
*/
/* Generic heading */
}
/* line 60, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading--xs {
font-size: 0.875rem;
color: #333;
}
/* line 60, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading--sm {
font-size: 1rem;
color: #333;
}
/* line 60, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading--md {
font-size: 1.25rem;
color: #333;
}
/* line 60, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading--lg {
font-size: 2rem;
color: #333;
}
/* line 60, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading--xl {
font-size: 3rem;
color: #333;
}
/* line 77, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading {
color: #333;
font-size: 1rem;
}
/* line 82, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading--page-title, .ns-music-v1 .ns-registration .c-terms-title, .ns-registration .ns-music-v1 .c-terms-title {
color: #666;
font-size: 1.25rem;
font-weight: normal;
}
/* line 88, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading--modal {
font-size: 2rem;
font-weight: normal;
}
/* line 93, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading--caps {
font-size: 0.875rem;
color: #666;
letter-spacing: 0.0625rem;
text-transform: uppercase;
}
/* line 100, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/library/v1/components/_headings.scss */
.ns-music-v1 .c-heading--reference {
color: #666;
font-size: 1rem;
}
/* end .ns-music-v1 scope */
/* ======================================================================= *
Pulser
Animated elements shown during network operations, etc.
* ======================================================================= */
/* line 27, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
min-width: 2rem;
}
/* line 34, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser--inline {
display: inline-flex;
margin-bottom: 0;
}
/* line 39, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser--round {
border-radius: 50%;
}
/* line 43, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser__element {
border-radius: 50%;
width: 28%;
padding-top: 28%;
background-color: #aaa;
opacity: 0;
transform: scale(0.1);
animation: pulse 0.6s infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
/* line 57, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser__element:nth-child(1) {
animation-delay: 0.19998s;
}
/* line 57, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser__element:nth-child(2) {
animation-delay: 0.39996s;
}
/* line 57, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser__element:nth-child(3) {
animation-delay: 0.59994s;
}
/* line 61, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser--sm {
width: 2rem;
}
/* line 65, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser--md {
width: 4rem;
}
/* line 69, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-pulser--lg {
width: 8rem;
}
@keyframes pulse {
100% {
opacity: 1;
transform: scale(1);
}
}
/* line 81, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/chat/components/_pulsers.scss */
.c-rec-loading {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/*
Registration Page styles
[1]: Restricts the separator line on account summary page to not take full grid width.
[2]: Handles the long strings like links etc. overflowing outside the container.
*/
/* [1] */
/* line 13, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration {
/* School Selection page styles*/
/* End of School Selection page styles*/
/**
* Override user-agent styles
*/
/* Account Summary styles */
/* End of Account Summary styles */
/* TOS modal styles */
/* Media Queries */
/* Enroll Course Page styles */
/* Enroll Course Page styles End */
}
/* line 14, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-form-item__input--registration,
.ns-registration .c-select--registration {
min-width: 17rem;
max-width: 27rem;
width: 100%;
}
/* line 22, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-school-list {
border: 0.0625rem solid #ccc;
max-width: 27rem;
padding: 0.125rem;
}
/* line 28, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-school-list__school-result {
padding: 0.25rem 0.5rem;
}
/* line 31, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-school-list__school-result:hover, .ns-registration .c-school-list__school-result[aria-selected="true"] {
background-color: #f5f5f5;
}
/* line 40, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration fieldset {
padding: 0 0 1rem;
}
/* line 45, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-separator--account-summary {
border-bottom: 0.0625rem solid #aaa;
margin-top: 0.3125rem;
max-width: 31.875rem;
}
/* line 51, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-form-item__label--account-summary {
margin-top: 1rem;
font-weight: bold;
}
/* line 58, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-modal--tos {
display: flex;
flex-direction: column;
padding: 2.5%;
height: 80%;
max-width: 40rem;
}
/* line 66, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-modal__content--tos {
display: flex;
overflow: auto;
height: 100%;
}
/* line 72, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-terms-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
/* line 83, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-terms-scroll {
overflow-y: scroll;
}
/* line 87, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-modal__close-button--tos {
top: 0.8rem;
}
@media (min-width: 900px) {
/* line 93, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-modal--tos {
width: 60%;
}
/* line 97, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-modal__close-button--tos {
top: 1.8rem;
}
}
@media (max-width: 899px) {
/* line 103, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-modal--tos {
width: 80%;
}
}
@media (max-width: 499px) {
/* line 109, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-modal--tos {
width: 90%;
min-width: auto;
word-wrap: break-word;
/* [2] */
overflow-wrap: break-word;
/* [2] */
height: 90%;
}
}
/* line 120, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-row--course > * {
border-bottom: none;
}
/* line 124, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-row--course:nth-child(2n) {
background: #f8f8f8;
}
/* line 129, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-header-row__instructor {
padding-left: 2.5rem;
}
/* line 133, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-card--course {
background: inherit;
border: 0.0625rem solid #CE0C24;
}
/* line 138, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-enroll-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
border-top: 0.0625rem solid #ddd;
border-bottom: 0.0625rem solid #ddd;
padding: 0.5rem;
background-color: white;
}
/* line 149, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-program-title,
.ns-registration .c-program-image {
cursor: pointer;
}
@media (max-width: 699px) {
/* line 155, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-program-image {
display: none;
}
/* line 159, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-table--course tr,
.ns-registration .c-table--course td {
display: block;
width: 100%;
}
/* line 165, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-header-row--course {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 0.0625rem !important;
margin: -0.0625rem !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 0.0625rem !important;
}
/* line 169, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-row--course {
border-bottom: 0.0625rem solid #eee;
}
/* line 173, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_registration.scss */
.ns-registration .c-course,
.ns-registration .c-section,
.ns-registration .c-additional-info {
padding-left: 2.5rem;
}
}
/*
includes
Non-code-outputting stylesheets required in every SCSS partial
*/
/* Variables */
/*
Color Palette
This section is the only place where color codes should live;
All other stylesheets should reference the color variables below.
*/
/* Brand colors ------------------- */
/* VOL colors */
/* Supersites colors */
/* Deprecated names for VOL colors: */
/* Shared colors ------------------- */
/* Neutrals */
/* Absolute neutral greys */
/* Semantic color names */
/*
TODO: remove $scratch & just use $reverse-text.
Only other instance is in _base.css.
*/
/*
From Hitomi's 1.0/beta button styles:
*/
/* Colors */
/* Shadows */
/* --- No hard-coded colors past this point --------------------- */
/*
Specific color roles, each of which is an aspect of a component element.
Most variables for specific components belong at the top of that
component's file; however, more reuseable ones, such as text colors,
belong below.
*/
/* Text colors */
/* ======================================================================= *
Measures
$mod is the basic unit of measurement for most things.
Define measures using the mod() function and a multiplier.
Examples:
margin-right: mod(0.5);
padding-bottom: mod(4);
...but evangelize the use of a small number of standard measures
Variables, placeholders and mixins only
Always favor @include [mixin] over @extend [class or placeholder].
The basic unit of measure, the mod (module), is based on 1rem, which
is almost universally defined in browsers as 16px.
* ======================================================================= */
/*
Standard block spacing
*/
/* Deprecated: replace with $border-width-lg in styles. */
/*
Font-size scale
Pixel equivalents given assume html {font-size: 16px}
*/
/*
Component-specific variables
Put component-specific variables at the top of their
respective component or object stylesheets.
Tying them to generic variables (above) creates
a consistent style across components.
*/
/*
Misc. Variables
*/
/* Mark a ridiculously high z-index: */
/* Mixins & Functions */
/* ========================================================================= *
Mixins and Placeholders
* ========================================================================= */
/*
Mixins & Functions
Includes SASS @mixins, %placeholders and .classes
Sass mixins should be used sparingly, and only when the mixin
has arguments. Otherwise use %placeholders.
No sandboxing needed for non-code-producing SASS.
IMPORTANT:
Don't mess with these unless you know what you're doing.
Other classes extend these.
*/
/*
Placeholder classes for @extend-ing
* These should be un-sandboxed (?)
* They don't need prefixes, b/c they won't show up in the final code.
* Keep these to a minimum, or you might end up with bloat in the resulting code for the extending classes.
*/
/*
Use the more sensible box model:
width stays the same even if padding, border changes.
*/
/*
Focus
Styles for highlighting focused/hovered elements
*/
/*
Clearfix
*/
/*
Shadows
*/
/* ======================================================================= *
Mixins: Objects
Mixins for tangible patterns.
* ======================================================================= */
/*
Flexible List Bullets
Extends
. TODO: add param for bullet color.
@param {length} $text-offset - offset of li text from left edge of li.
@param {length} $bullet-offset - offset of bullet from left edge of li.
*/
/* ======================================================================= *
Mixins: Properties
Mixins for shared, abstract patterns.
* ======================================================================= */
/* Center on both axes */
/* Make more styles of focus, specify via argument: */
/* ======================================================================= *
UA Tables
* ======================================================================= */
/* line 13, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tables.scss */
.ns-newcsslib {
/*doc
---
title: UA Table
name: ua-table
parent: table
---
```html_example
DC Superheros
Name
Alias
City
Clark Kent
Superman
Metropolis
Bruce Waine
Batman
Gotham City
```
TODO: Rename this skin since it is now used on m3 as well.
*/
/* table which is also used on M3 */
}
/* line 57, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tables.scss */
.ns-newcsslib .c-table--ua {
box-sizing: border-box;
width: 100%;
border: none;
margin: 1rem 0;
}
/* line 64, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tables.scss */
.ns-newcsslib .c-table--ua thead:first-child th {
padding: 0.5rem 1rem;
background-color: #ebeae7;
}
/* line 69, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tables.scss */
.ns-newcsslib .c-table--ua .c-table__heading-1 {
display: inline;
font-size: 1rem;
margin: 0.25rem 0;
font-weight: normal;
line-height: 1.5;
}
/* line 78, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tables.scss */
.ns-newcsslib .c-table--ua .c-table-row--category > th, .ns-newcsslib .c-table--ua .c-table-row--category td {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
/* line 84, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tables.scss */
.ns-newcsslib .c-table--ua th,
.ns-newcsslib .c-table--ua td {
padding: 0.5rem 1rem;
vertical-align: baseline;
border-bottom: 1px solid #cccccc;
}
/* line 91, ../../../../usr/share/rvm/gems/ruby-3.3.8@ua/bundler/gems/music-c8c0015300a7/app/assets/stylesheets/music/features/ua/_tables.scss */
.ns-newcsslib .c-table--ua th {
color: #333;
font-weight: bold;
}