{"version":3,"sources":["webpack:///./app/react/courses/course/components/StyledHtmlContent.js"],"names":["StyledHtmlContent","styled","div","props","theme","colors","blue700","black","radii","rounded","space","media","sm","gray200","gray100","fontSizes","md","shadows","gray700","letterSpacings","condensed","lineHeights","heading","narrow","body","wide","white","lg"],"mappings":"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","file":"1.020db8a11e6987dae5db.chunk.js","sourcesContent":["import { media } from '@redriverpress/system'\nimport styled from 'styled-components'\n\nconst StyledHtmlContent = styled.div`\n  /* Hide empty paragraphs */\n  p:empty,\n  p:blank {\n    display: none;\n  }\n\n  /* define bold */\n  strong,\n  b {\n    font-weight: 700;\n  }\n\n  /* on the off chance the post contains a link */\n  a {\n    background-image: linear-gradient(\n      transparent 50%,\n      ${props => props.theme.colors.blue700} 50%\n    );\n    background-position: 0 95%;\n    background-repeat: repeat-x;\n    background-size: 2px 2px;\n    color: ${props => props.theme.colors.black};\n    cursor: pointer;\n    text-decoration: none;\n    transition: color 0.15s ease-out;\n    -webkit-tap-highlight-color: transparent;\n  }\n  a:hover {\n    color: ${props => props.theme.colors.blue700};\n  }\n\n  /* Make videos responsive (requires use of videoWrapper div) */\n  .videoWrapper {\n    position: relative;\n    padding-bottom: 56.25%;\n    height: 0;\n    overflow: hidden;\n    border-radius: ${props => props.theme.radii.rounded};\n    iframe,\n    object,\n    embed {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  /* Tweet Embeds importants because they do inline styles :( */\n  .twitter-tweet {\n    margin-top: 0 !important;\n    margin-bottom: ${props => props.theme.space[3]} !important;\n    ${media.sm`\n      margin-bottom: ${props => props.theme.space[4]} !important;\n    `}\n  }\n\n  p .twitter-tweet {\n    margin: 0 auto !important;\n  }\n\n  /* Horizontal Rule */\n  hr {\n    border: none;\n    width: 100%;\n    height: 2px;\n    color: ${props => props.theme.colors.gray200};\n    background-color: ${props => props.theme.colors.gray200};\n    text-align: center;\n    margin-top: 0;\n  }\n\n  /* Blockquote */\n  blockquote {\n    background-color: ${props => props.theme.colors.gray100};\n    padding: ${props => props.theme.space[3]} 1.5rem;\n    border-radius: ${props => props.theme.radii.rounded};\n    margin-top: 0;\n    display: inline-block;\n    margin-left: 0;\n    margin-right: 0;\n    font-size: ${props => props.theme.fontSizes[0]};\n    ${media.md`\n      padding: ${props => props.theme.space[4]};\n    `}\n    p {\n      font-size: ${props => props.theme.fontSizes[2]};\n      margin-bottom: ${props => props.theme.space[3]};\n      margin-top: 0;\n      text-align: left;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      ${media.md`\n        font-size: ${props => props.theme.fontSizes[3]};\n      `}\n    }\n    p.attribution {\n      font-size: ${props => props.theme.fontSizes[0]};\n      margin: 0;\n      max-width: 100%;\n    }\n  }\n\n  /* Make images responsive */\n  img {\n    max-width: 100%;\n    display: block;\n    border-radius: ${props => props.theme.radii.rounded};\n    height: auto !important; /* !important because ckeditor always assigns a height to an image and our writers may not remove it */\n  }\n  img.contrast {\n    box-shadow: ${props => props.theme.shadows[1]};\n  }\n  p.caption {\n    margin-top: calc(\n      -${props => props.theme.space[3]} - ${props => props.theme.space[2]}\n    ); /* butt this up against the previous element (typically image) */\n    font-size: ${props => props.theme.fontSizes[0]};\n    color: ${props => props.theme.colors.gray700};\n    a {\n      color: ${props => props.theme.colors.gray700};\n      background-image: linear-gradient(\n        transparent 50%,\n        ${props => props.theme.colors.gray700} 50%\n      );\n      &:hover {\n        color: ${props => props.theme.colors.black};\n        background-image: linear-gradient(\n          transparent 50%,\n          ${props => props.theme.colors.black} 50%\n        );\n      }\n    }\n  }\n\n  /* Headings */\n  /* These are defined as a step down from default, with customizations as per blog */\n  h1 {\n    font-weight: 600;\n    font-size: ${props => props.theme.fontSizes[4]};\n    letter-spacing: ${props => props.theme.letterSpacings.condensed};\n    line-height: ${props => props.theme.lineHeights.heading};\n    margin-top: 0;\n    text-rendering: optimizeLegibility;\n    text-transform: none;\n    ${media.md`\n      font-size: ${props => props.theme.fontSizes[5]};\n    `}\n  }\n  h2 {\n    font-weight: 600;\n    font-size: ${props => props.theme.fontSizes[3]};\n    line-height: ${props => props.theme.lineHeights.heading};\n    margin-top: 0;\n    text-rendering: optimizeLegibility;\n    text-transform: none;\n    ${media.md`\n      font-size: ${props => props.theme.fontSizes[4]};\n      letter-spacing: ${props => props.theme.letterSpacings.narrow};\n    `}\n  }\n  h3 {\n    font-weight: 600;\n    font-size: ${props => props.theme.fontSizes[2]};\n    letter-spacing: normal;\n    line-height: ${props => props.theme.lineHeights.heading};\n    margin-top: 0;\n    text-rendering: optimizeLegibility;\n    text-transform: none;\n    ${media.md`\n      font-size: ${props => props.theme.fontSizes[3]};\n    `}\n  }\n  h4,\n  h5,\n  h6 {\n    font-weight: 600;\n    font-size: ${props => props.theme.fontSizes[1]};\n    letter-spacing: normal;\n    line-height: ${props => props.theme.lineHeights.body};\n    margin-top: 0;\n    text-rendering: optimizeLegibility;\n    text-transform: none;\n  }\n  h4 {\n    font-weight: 700;\n  }\n  h6 {\n    font-size: 0.7rem; /* fs-smallCapsOnly */\n    text-transform: uppercase;\n    letter-spacing: ${props => props.theme.letterSpacings.wide};\n  }\n\n  /* Reset text colors in case of span overrides... */\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  p:not(.caption),\n  li,\n  span,\n  div {\n    background: transparent;\n    color: ${props => props.theme.colors.black};\n  }\n\n  /* In case someone links a heading */\n  h1 a,\n  h2 a,\n  h3 a,\n  h4 a,\n  h5 a,\n  h6 a {\n    background-image: linear-gradient(\n      transparent 50%,\n      ${props => props.theme.colors.black} 50%\n    );\n  }\n\n  /* Element Spacing */\n  p,\n  ul,\n  ol,\n  blockquote,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  hr,\n  iframe,\n  .whiteBox,\n  .videoWrapper,\n  address,\n  div:not([class]),\n  table {\n    margin-bottom: ${props => props.theme.space[3]};\n    ${media.sm`\n      margin-bottom: ${props => props.theme.space[4]};\n    `}\n  }\n  .videoWrapper p iframe,\n  p iframe,\n  p > img,\n  table-container table {\n    margin-bottom: 0;\n  }\n\n  /* Straight-up iframes */\n  iframe {\n    max-width: 100%;\n    display: block;\n    border-radius: ${props => props.theme.radii.rounded};\n  }\n\n  /* Lists */\n  ul {\n    margin-top: 0;\n    list-style-position: outside;\n    padding-left: ${props => props.theme.space[3]};\n    margin-left: ${props => props.theme.space[1]};\n  }\n  ol {\n    margin-top: 0;\n    padding-left: calc(\n      ${props => props.theme.space[4]} - ${props => props.theme.space[2]}\n    );\n  }\n  li {\n    margin-bottom: ${props => props.theme.space[3]};\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  li {\n    ol,\n    ul {\n      margin-top: ${props => props.theme.space[3]};\n    }\n  }\n  /* safety first: space all lists but if we want overrides, we use this class */\n  .squishedList {\n    li {\n      margin-bottom: 0;\n    }\n  }\n\n  /* Special Lists */\n  ul.resources {\n    list-style-type: none;\n    margin-left: ${props => props.theme.space[3]};\n    li {\n      text-indent: calc(\n        -${props => props.theme.space[4]} - ${props => props.theme.space[1]}\n      );\n      max-width: 100%;\n      margin-left: 0;\n      margin-right: 0;\n      &:before {\n        display: inline-block;\n        text-align: center;\n        width: ${props => props.theme.space[4]};\n        margin-right: ${props => props.theme.space[1]};\n        font-family: 'Font Awesome 5 Pro';\n        font-weight: 300;\n        text-indent: 0;\n      }\n      &.lesson:before {\n        content: '\\f15c';\n      }\n      &.flashcards:before {\n        content: '\\f0e7';\n      }\n      &.podcast:before {\n        content: '\\f130';\n      }\n      &.youtube-video:before,\n      &.video:before {\n        content: '\\f03d';\n      }\n      &.digital:before {\n        content: '\\f108';\n      }\n      &.blog-post:before {\n        content: '\\f040';\n      }\n      &.collection:before,\n      &.course:before {\n        content: '\\f49c';\n      }\n      &.resources:before,\n      &.resource:before {\n        content: '\\f0ad';\n      }\n      &.calendar:before {\n        content: '\\f073';\n      }\n      &.external-article:before,\n      &.external-link:before {\n        content: '\\f08e';\n      }\n      &.correct:before {\n        content: '\\f00c';\n      }\n      &.positive:before {\n        content: '\\f067';\n      }\n      &.incorrect:before {\n        content: '\\f00d';\n      }\n      &.negative:before {\n        content: '\\f068';\n      }\n      &.question:before {\n        content: '\\f128';\n      }\n    }\n  }\n\n  .ckeditor-html5-audio {\n    margin-bottom: ${props => props.theme.space[4]};\n    text-align: left !important;\n    audio {\n      max-width: 100%;\n    }\n  }\n\n  .whiteBox,\n  .noteBox {\n    background-color: ${props => props.theme.colors.gray100};\n    border-radius: ${props => props.theme.radii.rounded};\n    padding: ${props => props.theme.space[3]} 1.5rem;\n    ${media.md`\n      padding: ${props => props.theme.space[4]};\n    `}\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    p,\n    ul,\n    ol {\n      margin-bottom: ${props => props.theme.space[3]};\n    }\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-weight: 700;\n    }\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  /* Tables : in case of emergency */\n  table {\n    text-align: left;\n    background-color: ${props => props.theme.colors.white};\n    box-shadow: ${props => props.theme.shadows[1]};\n    border-radius: ${props => props.theme.radii.rounded};\n    overflow: hidden;\n    border-spacing: 0;\n    border-collapse: separate;\n\n    tr {\n      td,\n      th {\n        border-bottom: 2px solid ${props => props.theme.colors.gray100};\n        padding: ${props => props.theme.space[2]};\n        ${media.sm`\n          padding: ${props => props.theme.space[2]} ${props =>\n          props.theme.space[3]};\n        `}\n      }\n    }\n\n    tbody:last-child tr:last-child {\n      th,\n      td {\n        border-width: 0;\n      }\n    }\n\n    th,\n    td {\n      vertical-align: top;\n      font-size: 0.75rem; /* just for default :( */\n      ${media.sm`\n        font-size: ${props => props.theme.fontSizes[0]};\n      `}\n      ${media.lg`\n        font-size: ${props => props.theme.fontSizes[1]};\n      `}\n    }\n\n    thead {\n      th {\n        font-weight: 700;\n      }\n    }\n\n    tbody {\n      th {\n        font-weight: 600;\n      }\n      td {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          font-size: ${props => props.theme.fontSizes[1]};\n          line-height: ${props => props.theme.lineHeights.body};\n          font-weight: 700;\n          letter-spacing: normal;\n          text-transform: none;\n        }\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6,\n        p,\n        ol,\n        ul {\n          font-size: inherit;\n          margin-bottom: ${props => props.theme.space[2]};\n          margin-top: 0;\n        }\n        ul,\n        ol {\n          padding-left: ${props => props.theme.space[3]};\n          margin-left: ${props => props.theme.space[1]};\n        }\n        p,\n        li {\n          max-width: auto;\n          margin-left: 0;\n          margin-right: 0;\n        }\n        & > *:last-child {\n          margin-bottom: 0;\n        }\n        li {\n          margin-bottom: ${props => props.theme.space[2]};\n          &:last-child {\n            margin-bottom: 0;\n          }\n        }\n      }\n    }\n  }\n  table.dialogue {\n    tbody {\n      td:not(:last-child),\n      th {\n        padding-right: 0;\n      }\n    }\n  }\n`\n\nexport default StyledHtmlContent\n"],"sourceRoot":""}