Added figcaption styling

Added figure caption element styling, so that captions can now be added. Updated both flavors accordingly.
This commit is contained in:
Angelos Chalaris 2017-03-30 20:56:15 +03:00
parent 874c57f802
commit d433af473b
8 changed files with 29 additions and 4 deletions

View file

@ -165,6 +165,10 @@ a {
a:hover, a:focus, a:active { a:hover, a:focus, a:active {
opacity: 0.75; } opacity: 0.75; }
figcaption {
font-size: 80%;
color: #424242; }
/* /*
Definitions for the grid system. Definitions for the grid system.
*/ */

File diff suppressed because one or more lines are too long

View file

@ -168,6 +168,10 @@ a {
a:hover, a:focus, a:active { a:hover, a:focus, a:active {
opacity: 0.75; } opacity: 0.75; }
figcaption {
font-size: 80%;
color: #424242; }
/* /*
Definitions for the grid system. Definitions for the grid system.
*/ */

File diff suppressed because one or more lines are too long

View file

@ -910,3 +910,4 @@
- Flavor cleanup for `progress` module's updates. - Flavor cleanup for `progress` module's updates.
- Updated `utility` module, added proper **hidden flags** to `$include-breadcrumbs` and `$include-close-icon` to make it easier to disable those components. - Updated `utility` module, added proper **hidden flags** to `$include-breadcrumbs` and `$include-close-icon` to make it easier to disable those components.
- Cleanup in both flavor files is now complete, added maintainers to the `mini-sucroa` file to meake it easier for people to reach the team behind it. - Cleanup in both flavor files is now complete, added maintainers to the `mini-sucroa` file to meake it easier for people to reach the team behind it.
- Added simple styling for `figcaption` element in `core`, updated both flavors with the required variables to make it usable.

View file

@ -96,6 +96,8 @@ $link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10] $apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11] $apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused //$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
$figcaption-font-size: 80%; // Font size of <figcaption> elements
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
// Notes: // Notes:
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root // [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
// element's font sizing. // element's font sizing.

View file

@ -99,6 +99,8 @@ $link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10] $apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11] $apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused //$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
$figcaption-font-size: 80%; // Font size of <figcaption> elements
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
// Notes: // Notes:
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root // [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
// element's font sizing. // element's font sizing.

View file

@ -58,9 +58,10 @@ summary {
display: list-item; display: list-item;
} }
// Abbreviations
abbr[title] { abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-. border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline; // Opinionated style-fix for all browsers. text-decoration: underline; // Opinionated style-fix for all browsers.
} }
// Correct display for older versions of IE. // Correct display for older versions of IE.
@ -387,6 +388,7 @@ $style-samp-element: false !default;
} }
} }
// Link styling
a{ a{
color: $link-fore-color; color: $link-fore-color;
@if $apply-link-underline { @if $apply-link-underline {
@ -417,3 +419,13 @@ a{
} }
} }
} }
// Captions for figures
figcaption {
@if $figcaption-font-size != 100% {
font-size: $figcaption-font-size;
}
@if $figcaption-fore-color != $fore-color {
color: $figcaption-fore-color;
}
}