Add support for interactive content (#54)

* Add support for interactive content (see pressbooks/pressbooks#1071)
* Add EPUB background size variant
* Restructure, add images

styles/buckram.scss → assets/styles/buckram.scss

@@ -1,5 +1,5 @@
 /*
  * Name: Buckram
- * Version: 0.6.3
+ * Version: 0.7.0
  * Description: Opinionated SCSS components for books (web, EPUB and PDF).
  */

styles/components/_media.scss → assets/styles/components/_media.scss

@@ -4,4 +4,5 @@
 
 @import 'media/audio';
 @import 'media/images';
+@import 'media/interactive-content';
 @import 'media/video';

assets/styles/components/media/_audio.scss

@@ -0,0 +1,11 @@
+////
+/// @group media
+////
+
+@import '../utilities';
+
+.interactive-content--audio {
+ .interactive-content__icon {
+ background-image: url(if-map-get($audio-icon-url, $type));
+ }
+}

assets/styles/components/media/_interactive-content.scss

@@ -0,0 +1,27 @@
+////
+/// @group media
+////
+
+@import '../utilities';
+
+.interactive-content {
+ &__icon {
+ display: $interactive-icon-display;
+ float: $interactive-icon-float;
+ width: if-map-get($interactive-icon-width, $type);
+ height: if-map-get($interactive-icon-height, $type);
+ margin:
+ if-map-get($interactive-icon-margin-top, $type)
+ if-map-get($interactive-icon-margin-right, $type)
+ if-map-get($interactive-icon-margin-bottom, $type)
+ if-map-get($interactive-icon-margin-left, $type);
+ background-image: url(if-map-get($interactive-icon-url, $type));
+ background-repeat: no-repeat;
+ background-size: if-map-get($interactive-icon-background-size, $type);
+ }
+
+ p {
+ margin-bottom: 0;
+ text-align: left;
+ }
+}

assets/styles/components/media/_video.scss

@@ -0,0 +1,11 @@
+////
+/// @group media
+////
+
+@import '../utilities';
+
+.interactive-content--video {
+ .interactive-content__icon {
+ background-image: url(if-map-get($video-icon-url, $type));
+ }
+}

assets/styles/variables/_media.scss

@@ -0,0 +1,131 @@
+////
+/// @group media
+////
+
+/// Bottom padding for image captions.
+/// @type String
+$image-caption-padding-bottom: 0.5em !default;
+
+/// Font stack for image captions.
+/// @type String
+$image-caption-font-family: $font-1 !default;
+
+/// Font size for image captions.
+/// @type String
+$image-caption-font-size: 0.8em !default;
+
+/// Font style for image captions.
+/// @type String
+$image-caption-font-style: normal !default;
+
+/// Font weight for image captions.
+/// @type String
+$image-caption-font-weight: normal !default;
+
+/// Line height for image captions.
+/// @type String
+$image-caption-line-height: 1.2em !default;
+
+/// Text alignment for image captions.
+/// @type String
+$image-caption-text-align: left !default;
+
+/// Text transform for image captions.
+/// @type String
+$image-caption-text-transform: none !default;
+
+/// Top margin for image wrappers.
+/// @type String
+$image-wrapper-margin-top: 0.5em !default;
+
+/// Bottom margin for image wrappers.
+/// @type String
+$image-wrapper-margin-bottom: 0.5em !default;
+
+/// Right margin for left-aligned images.
+/// @type String
+$image-alignleft-margin-right: 1em !default;
+
+/// Left margin for right-aligned images.
+/// @type String
+$image-alignright-margin-left: 1em !default;
+
+/// Image resolution for PrinceXML PDF outputs.
+/// @type String
+$prince-image-resolution: auto,normal !default;
+
+/// Icon image URL for generic interactive content
+/// @type String | Map
+/// @since 0.7.0
+$interactive-icon-url: (
+ prince: "pressbooks-book/assets/book/images/icon-interactive.svg",
+ epub: "pressbooks-book/assets/book/images/icon-interactive.png",
+ web: "pressbooks-book/assets/book/images/icon-interactive.svg"
+) !default;
+
+/// Icon image URL for audio content
+/// @type String | Map
+/// @since 0.7.0
+$audio-icon-url: (
+ prince: "pressbooks-book/assets/book/images/icon-audio.svg",
+ epub: "pressbooks-book/assets/book/images/icon-audio.png",
+ web: "pressbooks-book/assets/book/images/icon-audio.svg"
+) !default;
+
+/// Icon image URL for video content
+/// @type String | Map
+/// @since 0.7.0
+$video-icon-url: (
+ prince: "pressbooks-book/assets/book/images/icon-video.svg",
+ epub: "pressbooks-book/assets/book/images/icon-video.png",
+ web: "pressbooks-book/assets/book/images/icon-video.svg"
+) !default;
+
+/// Display property for interactive content icon
+/// @type String
+/// @since 0.7.0
+$interactive-icon-display: block !default;
+
+/// Float property for interactive content icon
+/// @type String
+/// @since 0.7.0
+$interactive-icon-float: left !default;
+
+/// Width for interactive content icon
+/// @type String | Map
+/// @since 0.7.0
+$interactive-icon-width: 3em !default;
+
+/// Height for interactive content icon
+/// @type String | Map
+/// @since 0.7.0
+$interactive-icon-height: 3em !default;
+
+/// Top margin for interactive content icon
+/// @type String | Map
+/// @since 0.7.0
+$interactive-icon-margin-top: 0 !default;
+
+/// Right margin for interactive content icon
+/// @type String | Map
+/// @since 0.7.0
+$interactive-icon-margin-right: 0.5em !default;
+
+/// Bottom margin for interactive content icon
+/// @type String | Map
+/// @since 0.7.0
+$interactive-icon-margin-bottom: 0 !default;
+
+/// Left margin for interactive content icon
+/// @type String | Map
+/// @since 0.7.0
+$interactive-icon-margin-left: 0 !default;
+
+/// Background size property for interactive content icon
+/// @type String | Map
+/// @since 0.7.0
+$interactive-icon-background-size: (
+ prince: cover,
+ epub: $interactive-icon-width $interactive-icon-height,
+ web: cover
+) !default;

package.json

@@ -1,13 +1,13 @@
 {
  "name": "buckram",
- "version": "0.6.3",
+ "version": "0.7.0",
  "description": "Opinionated SCSS components for books (web, EPUB and PDF).",
  "scripts": {
  "test": "npm run lint && npm run build",
  "build": "cross-env webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "lint": "npm run lint:styles",
- "lint:styles": "node_modules/stylelint/bin/stylelint.js '**/*.scss'",
- "docs": "node_modules/sassdoc/bin/sassdoc styles --config sassdoc.json"
+ "lint:styles": "node_modules/stylelint/bin/stylelint.js 'assets/styles/**/*.scss'",
+ "docs": "node_modules/sassdoc/bin/sassdoc assets/styles --config sassdoc.json"
  },
  "repository": {
  "type": "git",

tests/epub.scss

@@ -3,12 +3,12 @@ $type: 'epub';
 @import 'partials/fonts';
 @import 'partials/variables';
 
-@import '../styles/components/accessibility';
-@import '../styles/components/colors';
-@import '../styles/components/elements';
-@import '../styles/components/specials';
-@import '../styles/components/media';
-@import '../styles/components/pages';
-@import '../styles/components/section-titles';
-@import '../styles/components/toc/center';
-@import '../styles/components/toc/left';
+@import '../assets/styles/components/accessibility';
+@import '../assets/styles/components/colors';
+@import '../assets/styles/components/elements';
+@import '../assets/styles/components/specials';
+@import '../assets/styles/components/media';
+@import '../assets/styles/components/pages';
+@import '../assets/styles/components/section-titles';
+@import '../assets/styles/components/toc/center';
+@import '../assets/styles/components/toc/left';

tests/partials/_variables.scss

@@ -1,11 +1,11 @@
 $part: 'Part';
 
-@import "../../styles/variables/accessibility";
-@import "../../styles/variables/colors";
-@import "../../styles/variables/elements";
-@import "../../styles/variables/specials";
-@import "../../styles/variables/media";
-@import "../../styles/variables/pages";
-@import "../../styles/variables/section-titles";
-@import "../../styles/variables/structure";
-@import "../../styles/variables/toc";
+@import "../../assets/styles/variables/accessibility";
+@import "../../assets/styles/variables/colors";
+@import "../../assets/styles/variables/elements";
+@import "../../assets/styles/variables/specials";
+@import "../../assets/styles/variables/media";
+@import "../../assets/styles/variables/pages";
+@import "../../assets/styles/variables/section-titles";
+@import "../../assets/styles/variables/structure";
+@import "../../assets/styles/variables/toc";

tests/prince.scss

@@ -3,13 +3,13 @@ $type: 'prince';
 @import 'partials/fonts';
 @import 'partials/variables';
 
-@import '../styles/components/accessibility';
-@import '../styles/components/colors';
-@import '../styles/components/elements';
-@import '../styles/components/specials';
-@import '../styles/components/media';
-@import '../styles/components/pages';
-@import '../styles/components/section-titles';
-@import '../styles/components/structure';
-@import '../styles/components/toc/center';
-@import '../styles/components/toc/left';
+@import '../assets/styles/components/accessibility';
+@import '../assets/styles/components/colors';
+@import '../assets/styles/components/elements';
+@import '../assets/styles/components/specials';
+@import '../assets/styles/components/media';
+@import '../assets/styles/components/pages';
+@import '../assets/styles/components/section-titles';
+@import '../assets/styles/components/structure';
+@import '../assets/styles/components/toc/center';
+@import '../assets/styles/components/toc/left';

tests/web.scss

@@ -3,12 +3,12 @@ $type: 'web';
 @import 'partials/fonts';
 @import 'partials/variables';
 
-@import '../styles/components/accessibility';
-@import '../styles/components/colors';
-@import '../styles/components/elements';
-@import '../styles/components/specials';
-@import '../styles/components/media';
-@import '../styles/components/pages';
-@import '../styles/components/section-titles';
-@import '../styles/components/toc/center';
-@import '../styles/components/toc/left';
+@import '../assets/styles/components/accessibility';
+@import '../assets/styles/components/colors';
+@import '../assets/styles/components/elements';
+@import '../assets/styles/components/specials';
+@import '../assets/styles/components/media';
+@import '../assets/styles/components/pages';
+@import '../assets/styles/components/section-titles';
+@import '../assets/styles/components/toc/center';
+@import '../assets/styles/components/toc/left';