/*------------------------------------*\ #PATTERN LAB STYLES \*------------------------------------*/ /** * NOTES: * 1) These styles are specific to Pattern Lab and should not be modified. * All project styles should be modified in /source/css/ * * 2) Any !important declarations are to prevent brand styles from overriding * pattern lab-specific styles */ /*------------------------------------*\ #TABLE OF CONTENTS \*------------------------------------*/ /** * ABSTRACTS.................Variables and mixins * BASE......................Reset & Base elements * VENDOR....................Styles out of PL control * COMPONENTS................Components * THEMES....................Theming variations * UTILITIES.................Helper classes */ /*------------------------------------*\ #ABSTRACTS \*------------------------------------*/ /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * These variables are specific to the Pattern Lab shell and exist * indepenedently of any project-specific styles */ /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * List Reset */ /** * Hide scrollbar * 1) This hides scrollbars on Windows devices */ /** * Header Link Style */ /** * Accordion panel */ /*------------------------------------*\ #BASE \*------------------------------------*/ /*------------------------------------*\ #RESET \*------------------------------------*/ /** * Apply border-box to all elements * * 1) This is a broadly-applied style that affects every * element on the screen. This can bleed into user's styles * but since it's been a best practice for years now we're * going to default to this. */ .pl-c-body * { box-sizing: border-box; } button { font-size: inherit; background-color: transparent; } /*------------------------------------*\ #PATTERN LAB BODY \*------------------------------------*/ /** * The HTML and body elements for the Pattern Lab shell. * 1) These exist indepenedent of any project-specific styles * 2) Styled as IDs to avoid collisions with user tag */ .pl-c-html { min-height: 100%; display: flex; height: 100%; } .pl-c-body { margin: 0; padding: 0; width: 100%; -webkit-text-size-adjust: 100%; display: flex; } .pl-c-body--theme-dark, :root { --theme-bg: #161b3c; --theme-primary: #31355e; --theme-secondary: #161f50; --theme-text: white; --theme-text-rgb: 255,255,255; --theme-border: rgba(255, 255, 255, 0.2); } .pl-c-body--theme-light { --theme-bg: white; --theme-secondary: white; --theme-text: #262829; --theme-text-rgb: 38, 40, 41; --theme-primary: white; --theme-border: #ddd; } /*------------------------------------*\ #VENDOR \*------------------------------------*/ /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+handlebars+php+php-extras+twig&plugins=line-numbers+autolinker */ /** * prism.js default theme for JavaScript, CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou */ .pl-c-tabs__panel { /* Code blocks */ /* Inline code */ } .pl-c-tabs__panel pre[class*='language-'] { background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)), linear-gradient(to left, #fff, rgba(255, 255, 255, 0)), linear-gradient(to right, #eaf0f6, rgba(238, 238, 238, 0)), linear-gradient(to left, #eaf0f6, rgba(238, 238, 238, 0)), linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)), linear-gradient(to top, #fff, rgba(255, 255, 255, 0)), linear-gradient(to bottom, #eaf0f6, rgba(238, 238, 238, 0)), linear-gradient(to top, #eaf0f6, rgba(238, 238, 238, 0)); background-color: #fff; background-attachment: local, local, scroll, scroll, local, local, scroll, scroll; background-position: 0 0, 100% 0, 0 0, 100% 0, 0 0, 0 100%, 0 0, 0 100%; background-size: 4em 100%, 4em 100%, 1em 100%, 1em 100%, 100% 4em, 100% 4em, 100% 1em, 100% 1em; background-repeat: no-repeat; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; overflow: auto; max-height: 100%; } .pl-c-tabs__panel code[class*='language-'], .pl-c-tabs__panel pre[class*='language-'] { color: black; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; word-wrap: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; hyphens: none; } .pl-c-tabs__panel pre[class*='language-']::-moz-selection, .pl-c-tabs__panel pre[class*='language-'] ::-moz-selection, .pl-c-tabs__panel code[class*='language-']::-moz-selection, .pl-c-tabs__panel code[class*='language-'] ::-moz-selection { text-shadow: none; background-color: #b3d4fc; } .pl-c-tabs__panel pre[class*='language-']::-moz-selection, .pl-c-tabs__panel pre[class*='language-'] ::-moz-selection, .pl-c-tabs__panel code[class*='language-']::-moz-selection, .pl-c-tabs__panel code[class*='language-'] ::-moz-selection { text-shadow: none; background-color: #b3d4fc; } .pl-c-tabs__panel pre[class*='language-']::selection, .pl-c-tabs__panel pre[class*='language-'] ::selection, .pl-c-tabs__panel code[class*='language-']::selection, .pl-c-tabs__panel code[class*='language-'] ::selection { text-shadow: none; background-color: #b3d4fc; } @media print { .pl-c-tabs__panel code[class*='language-'], .pl-c-tabs__panel pre[class*='language-'] { text-shadow: none; } } .pl-c-tabs__panel pre[class*='language-'] { padding: 1em; margin: 0.5em 0; overflow: scroll; } .pl-c-tabs__panel :not(pre) > code[class*='language-'], .pl-c-tabs__panel pre[class*='language-'] { background-color: #f5f2f0; } .pl-c-tabs__panel :not(pre) > code[class*='language-'] { padding: 0.1em; border-radius: 0.3em; } .pl-c-tabs__panel .token.comment, .pl-c-tabs__panel .token.prolog, .pl-c-tabs__panel .token.doctype, .pl-c-tabs__panel .token.cdata { color: slategray; } .pl-c-tabs__panel .token.punctuation { color: #999; } .pl-c-tabs__panel .namespace { opacity: 0.7; } .pl-c-tabs__panel .token.property, .pl-c-tabs__panel .token.tag, .pl-c-tabs__panel .token.boolean, .pl-c-tabs__panel .token.number, .pl-c-tabs__panel .token.constant, .pl-c-tabs__panel .token.symbol, .pl-c-tabs__panel .token.deleted { color: #905; } .pl-c-tabs__panel .token.selector, .pl-c-tabs__panel .token.attr-name, .pl-c-tabs__panel .token.string, .pl-c-tabs__panel .token.char, .pl-c-tabs__panel .token.builtin, .pl-c-tabs__panel .token.inserted { color: #690; } .pl-c-tabs__panel .token.operator, .pl-c-tabs__panel .token.entity, .pl-c-tabs__panel .token.url, .pl-c-tabs__panel .language-css .token.string, .pl-c-tabs__panel .style .token.string { color: #a67f59; background-color: rgba(255, 255, 255, 0.5); } .pl-c-tabs__panel .token.atrule, .pl-c-tabs__panel .token.attr-value, .pl-c-tabs__panel .token.keyword { color: #07a; } .pl-c-tabs__panel .token.function { color: #dd4a68; } .pl-c-tabs__panel .token.regex, .pl-c-tabs__panel .token.important, .pl-c-tabs__panel .token.variable { color: #e90; } .pl-c-tabs__panel .token.important, .pl-c-tabs__panel .token.bold { font-weight: bold; } .pl-c-tabs__panel .token.italic { font-style: italic; } .pl-c-tabs__panel .token.entity { cursor: help; } .pl-c-tabs__panel pre.line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; } .pl-c-tabs__panel pre.line-numbers > code { position: relative; } .pl-c-tabs__panel .line-numbers .line-numbers-rows { position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.8em; width: 3em; /* works for line-numbers below 1000 lines */ letter-spacing: -1px; border-right: 1px solid #999; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pl-c-tabs__panel .line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; } .pl-c-tabs__panel .line-numbers-rows > span:before { content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; } .pl-c-tabs__panel .token a { color: inherit; } /*------------------------------------*\ #COMPONENTS \*------------------------------------*/ /*------------------------------------*\ #NAVIGATION \*------------------------------------*/ /*------------------------------------*\ #NAVIGATION \*------------------------------------*/ pl-nav { background-color: inherit; display: block; flex-grow: 1; align-items: center; } @media all and (min-width: 42em) { pl-nav { padding: 0; display: flex; } } .pl-c-body--theme-sidebar pl-nav { display: block; max-height: 100%; overflow-y: scroll; } /** * Navigation container * 1) Collapse height on small screens. Menu trigger button * activates nav */ .pl-c-nav { overflow: hidden; max-height: 0; transition: all 0.1s ease-out; /** * Active styles for when the accordion panel is open * 1. WIP -- part of broader UI refactor */ background-color: inherit; position: absolute; left: 0; top: 100%; width: 100%; display: flex; flex-direction: column; transition: max-height 0.1s ease-out; flex-shrink: 1; visibility: hidden; transition: transform 0.2s ease-out, opacity 0 0.2s ease-out; margin-right: auto; /** * Active navigaiton * 1) Slide * 2) Set the height to the vierport height minus the height * of the header */ } .pl-c-nav.pl-is-active { max-height: calc(95vh - 2rem - 1rem); max-height: calc( var(--pl-viewport-height, calc(95vh - 2rem)) - 1rem); /* [1] */ overflow: auto; -webkit-overflow-scrolling: touch; } @media all and (max-width: 42em) { .pl-c-nav { position: fixed; top: 44px; bottom: 0; height: auto; z-index: -1; } } .pl-c-nav.pl-is-active { visibility: visible; opacity: 1; } .pl-c-body--theme-sidebar .pl-c-nav { display: block; display: flex; overflow: hidden; visibility: visible; flex-shrink: 0; } @media all and (min-height: 500px) { .pl-c-body--theme-sidebar .pl-c-nav { flex-shrink: 1; } } @media all and (max-width: 42em) { .pl-c-body--theme-sidebar .pl-c-nav { max-width: 240px; position: fixed; top: 44px; bottom: 0; height: auto; max-height: calc(100% - 2rem); overflow: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: all 0.3s ease; opacity: 0; box-shadow: 0 3px 6px rgba(21, 22, 25, 0.16), 0 3px 6px rgba(21, 22, 25, 0.23); visibility: visible; } .pl-c-body--theme-sidebar .pl-c-nav.pl-is-active { transform: translateX(0); opacity: 1; transition: transform 0.2s ease-out; } } @media all and (max-width: 42em) { .pl-c-nav.is-open { padding-top: 1rem; padding-bottom: 1rem; } } @media all and (min-width: 42em) { .pl-c-nav { overflow: visible; max-height: none; visibility: visible; } .pl-c-nav.is-open { overflow: visible; } } @media all and (max-width: 41em) { .pl-c-nav.is-open { box-shadow: 0 2px 4px #000; } .pl-c-body--theme-light .pl-c-nav.is-open { box-shadow: 0 2px 4px #a6a6a6; } } @media all and (min-width: 42em) { .pl-c-nav.is-open { max-height: none; } } @media all and (min-width: 42em) { .pl-c-nav { flex-direction: row; position: relative; top: auto; width: auto; box-shadow: none; } } /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * These variables are specific to the Pattern Lab shell and exist * indepenedently of any project-specific styles */ /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * List Reset */ /** * Hide scrollbar * 1) This hides scrollbars on Windows devices */ /** * Header Link Style */ /** * Accordion panel */ /** * Nav link */ .pl-c-nav__link { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ /* IE 10+ */ user-select: none; /* Likely future */ color: inherit; text-decoration: none; line-height: 1; padding: 0.7rem 0.5rem; border: 0; text-align: left; transition: background-color 0.1s ease-out, color 0.1s ease-out; cursor: pointer; /** * Header link styles inside light theme */ /** * Header link styles inside cozy theme */ /** * Header link styles inside comfortable theme */ border: 0; text-align: left; text-decoration: none; cursor: pointer; outline: 0; color: inherit; display: flex; align-items: center; margin: 0; color: inherit; flex-grow: 1; flex-shrink: 1; padding: 0.6rem 0.6rem; position: relative; flex-basis: calc(100% - 2.5rem); } .pl-c-nav__link:hover, .pl-c-nav__link.pl-is-active:hover { background-color: rgba(0, 0, 0, 0.1); } .pl-c-body--theme-density-cozy .pl-c-nav__link { font-size: 0.85rem; padding: 1.2rem 0.8rem; } .pl-c-body--theme-density-comfortable .pl-c-nav__link { font-size: 0.85rem; padding: 1.5rem 1rem; } .pl-c-nav__link:after { content: ''; pointer-events: none; opacity: 0; background-color: currentColor; transition: opacity 0.1s ease-out; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; } .pl-c-nav__link.is-open[role='tab'].is-active:after, .pl-c-nav__link.is-open:not(.is-active):after, .pl-c-nav__link.is-open + .pl-c-nav__link--icon-only:after { opacity: 0.1; } .pl-c-nav__link.is-open.pl-c-nav__link--title:after { opacity: 0.05; } .pl-c-nav__link:hover:after { opacity: 0.1; } .pl-c-nav__link:focus:after { opacity: 0.2; } .pl-c-nav__link:focus:active:after { opacity: 0.25; } .pl-c-nav__link:focus { outline-offset: -1px; outline: 1px dotted; } .pl-c-nav__link--level-0 { font-size: 0.8rem; } .pl-c-body--theme-sidebar .pl-c-nav__link--level-0 { padding-left: 1.65rem; } @media all and (max-width: 42em) { .pl-c-nav__link--level-0 { padding-left: 1.65rem; } } .pl-c-nav__link--level-1 { padding-left: 1.5rem; font-size: 0.8rem; line-height: 1.4; } .pl-c-nav__link--level-2 { font-size: 0.75rem; padding-left: 2.25rem; line-height: 1.2; } .pl-c-nav__link--title { font-size: 0.8rem; color: #ccc; color: var(--theme-text, #ccc); max-width: 100%; text-overflow: ellipsis; white-space: nowrap; } .pl-c-nav__link--title > .pl-c-nav__link-icon { font-size: inherit; } .pl-c-body--theme-light .pl-c-nav__link--title { color: #000; color: var(--theme-text); } .pl-c-nav__link.is-active:not(.pl-c-nav__link--title) { box-shadow: inset 4px 0 0 #6c79d9; } @media all and (min-width: 42em) { .pl-c-body--theme-horizontal .pl-c-nav__link.is-active:not(.pl-c-nav__link--title).pl-c-nav__link--level-0 { box-shadow: inset 0 -4px 0 #6c79d9; } } .pl-c-body--theme-light .pl-c-nav__link.is-open[role='tab'].is-active:after, .pl-c-body--theme-light .pl-c-nav__link.is-open:not(.is-active):after, .pl-c-body--theme-light .pl-c-nav__link.is-open + .pl-c-nav__link--icon-only:after { opacity: 0.1; } .pl-c-body--theme-light .pl-c-nav__link.is-open.pl-c-nav__link--title:after { opacity: 0.025; } .pl-c-body--theme-light .pl-c-nav__link:hover:after { opacity: 0.05; } .pl-c-body--theme-light .pl-c-nav__link:focus:after { opacity: 0.1; } .pl-c-body--theme-light .pl-c-nav__link:focus:active:after { opacity: 0.125; } .pl-c-nav__link-text { flex-grow: 1; pointer-events: none; display: flex; align-items: center; } .pl-c-nav__link-icon { margin-top: -0.5rem; margin-bottom: -0.5rem; pointer-events: none; color: currentColor; display: inline; transition: all 0.1s ease-out; transform: rotate(-90deg); flex-grow: 0; line-height: 0; font-size: 1.3rem; } .pl-c-nav__link-icon:first-child { margin-left: -0.2rem; margin-right: 0.2rem; } .pl-c-nav__link.is-open > .pl-c-nav__link-icon, .pl-c-nav__link.is-open ~ .pl-c-nav__link > .pl-c-nav__link-icon { transform: rotate(0); } .pl-c-nav__link:first-child:not(.is-open) ~ .pl-c-nav__list--panel .pl-c-nav__link { visibility: hidden; } .is-open ~ .pl-c-nav__list--panel .pl-c-nav__link { visibility: visible; } .pl-c-nav__link--icon-only { position: relative; width: 2.5rem !important; height: auto; flex-grow: 1; padding: 0 !important; display: inline-flex; justify-content: center; font-size: 0; right: 0; justify-content: center; align-items: center; color: currentColor; max-width: 2.5rem; } .pl-c-nav__link--icon-only:after { opacity: 0; width: 2.5rem; left: 50%; transform: translateY(-50%) translateX(-50%); } .pl-c-nav__link--icon-only:after { height: 100%; transition: opacity 0.1s ease-out; content: ''; display: block; position: absolute; top: 50%; background-color: currentColor; } .pl-c-nav__link--icon-only:hover:after, .pl-c-nav__link--icon-only:hover:focus:after { opacity: 0.1; } .pl-c-nav__link--icon-only:focus { outline-offset: -1px; outline: 1px dotted; } /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * These variables are specific to the Pattern Lab shell and exist * indepenedently of any project-specific styles */ /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * List Reset */ /** * Hide scrollbar * 1) This hides scrollbars on Windows devices */ /** * Header Link Style */ /** * Accordion panel */ /** * Nav list * 1) appears as an

* 2) display as a horizontal list on larger screens * 3) On small screens, move the nav list after the typeahead form field */ .pl-c-nav__list { z-index: 1; margin: 0; padding: 0; list-style: none; flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; order: 2; background-color: inherit; } @media all and (min-width: 42em) { .pl-c-nav__list { display: flex; /* 2 */ order: 1; } } /** * Nav list item */ .pl-c-nav__list-item { background-color: inherit; position: relative; display: flex; flex-direction: column; flex-flow: row wrap; flex-grow: 1; width: 100%; } .pl-c-nav__list-item--hidden { display: none; } /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * These variables are specific to the Pattern Lab shell and exist * indepenedently of any project-specific styles */ /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * List Reset */ /** * Hide scrollbar * 1) This hides scrollbars on Windows devices */ /** * Header Link Style */ /** * Accordion panel */ /** * Nav Dropdown * 1) On larger screens, display as dropdowns that * hangs over the header */ .pl-c-nav__dropdown { overflow: auto; } @media all and (min-width: 42em) { .pl-c-nav__dropdown { position: absolute; top: 100%; /* 1 */ left: 0; min-width: 13rem; border-radius: 6px; border-style: solid; border-width: 0; box-shadow: 0 0 1px black; transition: all .2s ease; transform: translateY(-12px); z-index: 1; transition: all 0.1s ease-out; } .pl-c-body--theme-sidebar .pl-c-nav__dropdown { position: relative; } } .pl-c-body--theme-light .pl-c-nav__dropdown { border-color: rgba(0, 0, 0, 0.2); } .pl-c-body--theme-dark .pl-c-nav__dropdown { border-color: rgba(255, 255, 255, 0.2); } .pl-c-body--theme-sidebar .pl-c-nav__dropdown { border-width: 0; transform: none; box-shadow: none; border-radius: 0; } /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * These variables are specific to the Pattern Lab shell and exist * indepenedently of any project-specific styles */ /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * List Reset */ /** * Hide scrollbar * 1) This hides scrollbars on Windows devices */ /** * Header Link Style */ /** * Accordion panel */ .pl-c-nav__accordion { background-color: inherit; list-style: none; margin: 0; padding: 0; overflow: hidden; max-height: 0; transition: all 0.1s ease-out; /** * Active styles for when the accordion panel is open * 1. WIP -- part of broader UI refactor */ display: flex; flex-flow: row wrap; opacity: 0; visibility: hidden; } .pl-c-nav__accordion.pl-is-active { max-height: calc(95vh - 2rem - 1rem); max-height: calc( var(--pl-viewport-height, calc(95vh - 2rem)) - 1rem); /* [1] */ overflow: auto; -webkit-overflow-scrolling: touch; } .pl-c-nav__accordion.pl-c-nav__dropdown { overflow: auto; } .is-open ~ .pl-c-nav__accordion { visibility: visible; transform: translateY(0); opacity: 1; max-height: none; } .is-open ~ .pl-c-nav__accordion:not(.pl-c-nav__dropdown) { overflow: hidden; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4); } @media all and (min-width: 42em) { .pl-c-body--theme-horizontal .is-open ~ .pl-c-nav__accordion.pl-c-nav__dropdown { max-height: calc(100vh - 3rem); } } @media all and (min-width: 42em) { .is-open ~ .pl-c-nav__accordion { height: auto; } } .is-open ~ .pl-c-nav__accordion > * { background-color: rgba(255, 255, 255, 0.05); } .pl-c-body--theme-light .is-open ~ .pl-c-nav__accordion > * { background-color: rgba(0, 0, 0, 0.05); } /*------------------------------------*\ #TWITTER TYPEAHEAD \*------------------------------------*/ /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * These variables are specific to the Pattern Lab shell and exist * indepenedently of any project-specific styles */ /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * List Reset */ /** * Hide scrollbar * 1) This hides scrollbars on Windows devices */ /** * Header Link Style */ /** * Accordion panel */ /** * Using Twitter Typeahead to autocomplete pattern * searches. https://twitter.github.io/typeahead.js/ */ pl-search { background-color: inherit; top: 0; flex-shrink: 0; padding: 0.4rem 0.5rem; display: inline-block; align-self: stretch; transition: all 0.2s ease; } @media screen and (min-width: 42em) { pl-search { flex-direction: row; flex-shrink: 1; order: 2; align-self: center; } pl-search:focus-within { flex-shrink: .5; } .pl-c-body--theme-sidebar pl-search { flex-direction: column; margin-left: 0; width: 100%; margin-bottom: 0.5rem; } } /** * Typeahead wrapper * 1) This is the JS-generated wrapper around the input */ .pl-c-typeahead { width: 100%; background-color: inherit; order: 2; display: flex !important; z-index: 10; text-transform: capitalize; flex-direction: column; color: #fafafa; position: relative; } .pl-c-body--theme-light .pl-c-typeahead { color: #222; } @media screen and (min-width: 42em) { .pl-c-typeahead { flex-direction: row; } .pl-c-body--theme-sidebar .pl-c-typeahead { flex-direction: column; } } .pl-c-typeahead__hint { top: 0; left: 0; right: 0; width: 100%; } .pl-c-typeahead__hint, .pl-c-typeahead__input { text-transform: capitalize; background-color: #222; color: #fff; background-color: rgba(var(--theme-text-rgb), 0.05); color: rgba(var(--theme-text-rgb), 0.67); border-color: rgba(0, 0, 0, 0.1); border-color: rgba(var(--theme-text-rgb), 0.17); text-overflow: ellipsis; border-width: 1px; border-style: solid; transition: all 0.1s ease; max-width: 100%; padding: 0.4rem 0.5rem; font-size: 16px; width: 100%; outline-offset: -3px; outline-width: 2px; border-radius: 3px; -webkit-appearance: none; } @media all and (min-width: 900px) { .pl-c-typeahead__hint, .pl-c-typeahead__input { font-size: inherit; } } .pl-c-typeahead__hint::-ms-clear, .pl-c-typeahead__input::-ms-clear { display: none; } .pl-c-body--theme-sidebar .pl-c-typeahead__hint, .pl-c-body--theme-sidebar .pl-c-typeahead__input { border-radius: 0; } .pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__hint, .pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__input { padding-right: 1.7rem; } @media all and (min-width: 42em) { .pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__hint, .pl-c-typeahead__input-wrapper--with-clear-button .pl-c-typeahead__input { padding-right: 1.4rem; } } @media all and (min-width: 42em) { .pl-c-body--theme-sidebar .pl-c-typeahead__hint, .pl-c-body--theme-sidebar .pl-c-typeahead__input { max-width: none; } } .pl-c-body--theme-light .pl-c-typeahead__hint, .pl-c-body--theme-light .pl-c-typeahead__input { background-color: #eee; background-color: rgba(var(--theme-text-rgb), 0.05); color: #4d4c4c; color: rgba(var(--theme-text-rgb), 0.67); } .pl-c-body--theme-light .pl-c-typeahead__hint::-webkit-input-placeholder, .pl-c-body--theme-light .pl-c-typeahead__input::-webkit-input-placeholder { color: black !important; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .pl-c-body--theme-light .pl-c-typeahead__hint::-moz-input-placeholder, .pl-c-body--theme-light .pl-c-typeahead__input::-moz-input-placeholder { color: black !important; -moz-transition: all 0.1s ease; transition: all 0.1s ease; } .pl-c-typeahead__hint::-webkit-input-placeholder, .pl-c-typeahead__input::-webkit-input-placeholder { color: #fff !important; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .pl-c-typeahead__hint::-moz-input-placeholder, .pl-c-typeahead__input::-moz-input-placeholder { color: #fff !important; -moz-transition: all 0.1s ease; transition: all 0.1s ease; } .pl-c-typeahead__hint:hover, .pl-c-typeahead__hint:focus, .pl-c-typeahead__input:hover, .pl-c-typeahead__input:focus { color: #fff; } .pl-c-body--theme-light .pl-c-typeahead__hint:hover, .pl-c-body--theme-light .pl-c-typeahead__hint:focus, .pl-c-body--theme-light .pl-c-typeahead__input:hover, .pl-c-body--theme-light .pl-c-typeahead__input:focus { color: #222 !important; } .pl-c-typeahead__hint:hover::-moz-input-placeholder, .pl-c-typeahead__hint:hover::-webkit-input-placeholder, .pl-c-typeahead__hint:focus::-moz-input-placeholder, .pl-c-typeahead__hint:focus::-webkit-input-placeholder, .pl-c-typeahead__input:hover::-moz-input-placeholder, .pl-c-typeahead__input:hover::-webkit-input-placeholder, .pl-c-typeahead__input:focus::-moz-input-placeholder, .pl-c-typeahead__input:focus::-webkit-input-placeholder { color: #fff !important; } .pl-c-body--theme-light .pl-c-typeahead__hint:hover::-moz-input-placeholder, .pl-c-body--theme-light .pl-c-typeahead__hint:hover::-webkit-input-placeholder, .pl-c-body--theme-light .pl-c-typeahead__hint:focus::-moz-input-placeholder, .pl-c-body--theme-light .pl-c-typeahead__hint:focus::-webkit-input-placeholder, .pl-c-body--theme-light .pl-c-typeahead__input:hover::-moz-input-placeholder, .pl-c-body--theme-light .pl-c-typeahead__input:hover::-webkit-input-placeholder, .pl-c-body--theme-light .pl-c-typeahead__input:focus::-moz-input-placeholder, .pl-c-body--theme-light .pl-c-typeahead__input:focus::-webkit-input-placeholder { color: #222 !important; } .pl-c-typeahead__menu { overflow: hidden; max-height: 0; transition: all 0.1s ease-out; /** * Active styles for when the accordion panel is open * 1. WIP -- part of broader UI refactor */ background-color: #222; background-color: var(--theme-primary); color: var(--theme-text); text-transform: capitalize; position: absolute; min-width: 100%; width: 100%; overflow: hidden; top: 100%; right: 0; max-height: 0; display: block !important; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 0; } .pl-c-typeahead__menu.pl-is-active { max-height: calc(95vh - 2rem - 1rem); max-height: calc( var(--pl-viewport-height, calc(95vh - 2rem)) - 1rem); /* [1] */ overflow: auto; -webkit-overflow-scrolling: touch; } @media all and (min-width: 42em) { .pl-c-typeahead__menu { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } } .pl-c-body--theme-light .pl-c-typeahead__menu { background-color: #fafafa; } .pl-c-typeahead__menu.pl-is-open { max-height: 90vh; overflow: auto; opacity: 1; } @media all and (min-width: 42em) { .pl-c-body--theme-sidebar .pl-c-typeahead__menu { position: relative !important; border-radius: 0; } } @media all and (max-width: 41em) { .pl-c-typeahead__menu { position: relative !important; } } .pl-c-typeahead__results { list-style: none; margin: 0; padding: 0; background-color: inherit; border-color: transparent; border-width: 1px; border-style: solid; overflow: hidden; border-color: #151515; } @media all and (min-width: 42em) { .pl-c-typeahead__results { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } } .pl-c-typeahead__results:empty { border-width: 0; max-height: 0; } .pl-c-body--theme-light .pl-c-typeahead__results { border-color: #ccc; } @media all and (min-width: 42em) { .pl-c-body--theme-sidebar .pl-c-typeahead__results { border-radius: 0; } } .pl-c-typeahead__result { transition: all 0.3s ease; background-color: inherit; padding: 0.5rem 0.75rem; cursor: pointer; overflow: hidden; font-size: 0.8rem; color: inherit; } .pl-c-typeahead__result:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } @media all and (max-width: 41em) { .pl-c-typeahead__result:last-child { border-radius: 0; } } .pl-c-body--theme-sidebar .pl-c-typeahead__result:last-child { border-radius: 0; } .pl-c-typeahead__result:hover { background-color: rgba(255, 255, 255, 0.15); } .pl-c-body--theme-light .pl-c-typeahead__result:hover { background-color: #eee; } .pl-c-typeahead__result:active, .pl-c-typeahead__result:focus { background-color: rgba(255, 255, 255, 0.18); } .pl-c-body--theme-light .pl-c-typeahead__result:active, .pl-c-body--theme-light .pl-c-typeahead__result:focus { background-color: #ddd; } .pl-c-typeahead__result.pl-has-cursor { color: #fff; background-color: rgba(255, 255, 255, 0.25); } .pl-c-body--theme-light .pl-c-typeahead__result.pl-has-cursor { color: #000; background-color: #ddd; } .pl-c-typeahead__input-wrapper { position: relative; flex-shrink: 1; } .pl-c-typeahead__clear-button { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ /* IE 10+ */ user-select: none; /* Likely future */ color: inherit; text-decoration: none; line-height: 1; padding: 0.7rem 0.5rem; border: 0; text-align: left; transition: background-color 0.1s ease-out, color 0.1s ease-out; cursor: pointer; /** * Header link styles inside light theme */ /** * Header link styles inside cozy theme */ /** * Header link styles inside comfortable theme */ height: 1.7rem; width: 1.7rem; background-color: transparent; border-radius: 20rem; overflow: hidden; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; border: 0; transition: opacity 0.1s ease; opacity: 0; visibility: hidden; } .pl-c-typeahead__clear-button:hover, .pl-c-typeahead__clear-button.pl-is-active:hover { background-color: rgba(0, 0, 0, 0.1); } .pl-c-body--theme-density-cozy .pl-c-typeahead__clear-button { font-size: 0.85rem; padding: 1.2rem 0.8rem; } .pl-c-body--theme-density-comfortable .pl-c-typeahead__clear-button { font-size: 0.85rem; padding: 1.5rem 1rem; } .pl-c-typeahead__clear-button:hover, .pl-c-typeahead__clear-button:active { background-color: transparent; } @media all and (min-width: 42em) { .pl-c-typeahead__clear-button { height: 1.4rem; width: 1.4rem; } } .pl-c-body--theme-light .pl-c-typeahead__clear-button { background-color: transparent; } .pl-c-body--theme-light .pl-c-typeahead__clear-button:hover, .pl-c-body--theme-light .pl-c-typeahead__clear-button:active { background-color: transparent; } .pl-c-typeahead__clear-button.pl-is-visible { opacity: 1; visibility: visible; } .pl-c-typeahead__clear-button-icon { fill: currentColor; line-height: 0; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * These variables are specific to the Pattern Lab shell and exist * indepenedently of any project-specific styles */ /*------------------------------------*\ #VARIABLES \*------------------------------------*/ /** * List Reset */ /** * Hide scrollbar * 1) This hides scrollbars on Windows devices */ /** * Header Link Style */ /** * Accordion panel */ .tooltip-container { color: #222; } /*------------------------------------*\ #ANNOTATIONS \*------------------------------------*/ /** * Annotated elements styles * 1) Annotation styles that appear inside the iframe * 2) For elements in the DOM that have an annotation, we want to * provide styles that help the user understand that annotations are available. * We do this with some cursor helpers and a */ .pl-has-annotation { cursor: help !important; outline: 1px dotted #808080; outline-offset: -4px; transition: box-shadow 0.1s ease; } .pl-has-annotation a, .pl-has-annotation input { cursor: help !important; } .pl-has-annotation:hover { box-shadow: 0 0 3px #808080; } .pl-has-annotation.active { box-shadow: inset 0 0 6px #4d4c4c; outline: 1px dotted #808080; outline-offset: -1px; } /** * Annotation tooltip * 1) Appears inside the iframe over any element that has an * anootation attached to it. * 2) Annotation tip gets dynamically set to `display: none` via * JavaScript */ .pl-c-annotation-tip { display: flex; /* 2 */ align-items: center; justify-content: center; width: 24px !important; height: 24px !important; margin-top: 6px !important; margin-left: 6px !important; border-radius: 50% !important; background-color: #222 !important; color: #fff !important; font-size: 16px !important; position: absolute; z-index: 100; } /*------------------------------------*\ #ANNOTATIONS INSIDE MODAL \*------------------------------------*/ /** * Annotations area * 1) Appears inside of modal */ .pl-c-annotations { margin: 1rem 0; } /** * Annotations Title * Says the word "Annotations" */ .pl-c-annotations__title { font-size: 1.2rem !important; margin: 0 0 0.5rem; } /** * Annotations list * 1) Ordered list of annotations * 2) Presented with parent selector to force styles * over pl-c-text-passage */ .pl-c-annotations .pl-c-annotations__list { counter-reset: the-count; padding: 0; margin: 0; list-style: none; } /** * Annotations list item * 1) Displays each item as a number */ .pl-c-annotations__item { position: relative; padding-left: 1.5rem; margin-bottom: 1rem; border-radius: 6px; transition: background-color 0.1s ease; } .pl-c-annotations__item:before { content: counter(the-count); counter-increment: the-count; font-size: 85%; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; padding: 2px; text-align: center; background-color: #808080; color: #fff; position: absolute; top: 4px; left: 0; } .pl-c-annotations__item.pl-is-active { outline: 1px dotted #808080; outline-offset: -1px; } .pl-c-annotations .pl-c-annotations__item-title { margin-bottom: 0; } /*------------------------------------*\ #BREADCRUMBS \*------------------------------------*/ /** * 1) Breadcrumbs display a pattern's path inside the modal */ .pl-c-breadcrumb { list-style: none; margin: 0; padding: 0; margin-bottom: 0.5rem; display: flex; font-size: 0.9rem; color: inherit; text-transform: capitalize; } /** * Breadcrumb Item */ .pl-c-breadcrumb__item { color: inherit; } .pl-c-breadcrumb__item:after { content: '\25b6'; opacity: 0.4; font-size: 6px; display: inline-block; margin: 0 0.2rem; position: relative; top: -1px; } /*------------------------------------*\ #PATTERN CATEGORY \*------------------------------------*/ /** * Pattern Category * 1) This appears in the index page and delineates a major section, * such as "global", "blocks", "etc". * 2) The category contains a title and optional description */ .pl-c-category { margin-top: 6rem; font: "Open Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif !important; } .pl-c-category:first-of-type { margin-top: 2rem; } /** * Pattern Category Title */ .pl-c-category__title { font-size: 1.4rem !important; color: #222 !important; margin: 0 0 0.2rem; text-transform: capitalize; } /** * Pattern Category Link */ .pl-c-category__title-link { transition: color 0.1s ease-out; } /** * Pattern Category Description * 1) This is an optional description that sits below the category title. * 2) Hide the pattern category description is it's empty */ .pl-c-category__description { font-size: 0.85rem; line-height: 1.5; max-width: 30rem; } .pl-c-category__description:empty { display: none; /* 2 */ } /*------------------------------------*\ #PATTERN INFO \*------------------------------------*/ /** * 1) Pattern info contains two side-by-side panels that * house a pattern's information, such as title, lineage, * code, annotations, and more. */ .pl-c-pattern-info { flex-grow: 1; display: flex; flex-direction: column; /** * Pattern info inside the "view all" template */ /** * Pattern info inside modal */ } .pl-c-pattern .pl-c-pattern-info { overflow: scroll; display: block; -webkit-overflow-scrolling: touch; } @media all and (min-width: 53em) { .pl-c-pattern .pl-c-pattern-info { max-height: none; display: flex; flex-direction: row; overflow: visible; } } .pl-c-drawer .pl-c-pattern-info { overflow: auto; -webkit-overflow-scrolling: touch; flex-grow: 1; } @media all and (min-width: 53em) { .pl-c-drawer .pl-c-pattern-info { position: static; flex-direction: row; } } /** * Pattern Info Panel * 1) Individual panel. Left side contains pattern info * Right side contains pattern code */ .pl-c-pattern-info__panel { padding: .5rem; flex-shrink: 0; display: flex; flex-direction: column; } pl-drawer .pl-c-pattern-info__panel { padding: 1rem; } @media all and (min-width: 53em) { .pl-c-pattern-info__panel { flex-basis: 50%; flex-grow: 1; padding: 1.5rem; } } /** * Pattern Info Panel * 1) Left panel that contains pattern title, lineage, description, annotations */ @media all and (min-width: 53em) { .pl-c-pattern-info__panel--info { overflow: auto; -webkit-overflow-scrolling: touch; } } @media all and (min-width: 62em) { .pl-c-pattern-info__panel--info { min-width: 50%; } } /** * Pattern Code Panel * 1) Right panel that displays the pattern's code (found in _tabs.scss) * 2) Using a sibling selector because the pattern info isn't always present. * The sibling selector allows the code panel to occupy the full width of * the modal * 1) Cap the height of the code panel in the modal */ .pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code, .pl-c-pattern-info__panel--code:first-child { flex-grow: 1; flex-shrink: 0; min-width: 50%; } @media all and (max-width: 53em) { .pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code { padding-top: 0; } } /** * Pattern Header inside modal */ .pl-c-pattern-info__header { padding-bottom: 0.5rem; margin-bottom: 0.5rem; position: relative; } .pl-c-pattern-info__header:after { display: block; height: 1px; content: ''; width: 100%; background-color: currentColor; opacity: 0.1; position: absolute; left: 0; bottom: 0; right: 0; } /** * Pattern Title inside modal */ .pl-c-pattern-info__title { font-size: 1.4rem !important; font-weight: bold; margin-top: 0; margin-bottom: 0; color: inherit; text-transform: capitalize; display: inline-flex; align-items: center; } /** * Pattern Description inside modal */ .pl-c-pattern-info__description { border-bottom-color: #808080; } /** * Pattern Annotations inside modal */ .pl-c-annotations { border-top-color: #808080; } /*------------------------------------*\ #PATTERN LINEAGE \*------------------------------------*/ /** * Pattern Lineage info */ .pl-c-lineage { font-size: 1rem; line-height: 1.7; margin-top: 0; } /** * Lineage link */ .pl-c-lineage__link { font-style: italic; color: inherit; text-decoration: underline; display: inline; align-items: center; transition: opacity 0.1s ease; } .pl-c-lineage__link:hover, .pl-c-lineage__link:focus { opacity: 0.8; } /*------------------------------------*\ #PATTERN STATES \*------------------------------------*/ /** * Pattern states add color-coded dots next to patterns * in the dropdown navigation. */ .pl-c-pattern-state { width: 0.5em; height: 0.5em; margin-left: 0.5em; border-radius: 50%; display: inline-block; background-color: #02a4d5; } .pl-c-pattern-state--complete { background-color: #03790f; } .pl-c-pattern-state--inprogress { background-color: #e90; } .pl-c-pattern-state--inreview { background-color: #c7a118; } .pl-c-pattern-state--deprecated { background-color: #b00b02; } /** * Complete state */ .complete:before { color: #03790f !important; } /*------------------------------------*\ #PATTERN \*------------------------------------*/ /** * Pattern * 1) This is an individual pattern that appears in the "view all" template. * It contains pattern title and toggle to view more information, such as * description, lineage, code, etc. * 2) Prevents absolutely-positioned elements from floating to the top * 3) Prevents floated patterns from floating wraps */ .pl-c-pattern { margin-bottom: 2rem; position: relative; /* 2 */ clear: both; /* 3 */ } /** * Pattern Header */ .pl-c-pattern__header { position: relative; padding: 0.5rem 0 0; line-height: 1.3; font-size: 90%; color: #808080; } .pl-c-pattern__header:empty { padding: 0; } /** * Pattern Title */ .pl-c-pattern__title { font-family: "Open Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif !important; font-size: 0.85rem !important; line-height: 1 !important; font-weight: normal !important; margin: 0 !important; padding: 0 !important; text-transform: capitalize !important; } /** * Pattern Title Link * 1) Vertically align pattern label and pattern state badge */ .pl-c-pattern__title-link { display: inline-flex; /* 1 */ align-items: center; /* 1 */ padding: 1rem 0 0.3rem; color: #808080 !important; text-decoration: none; cursor: pointer; } .pl-c-pattern__title-link:hover, .pl-c-pattern__title-link:focus { color: #000 !important; } /** * Pattern Extra Toggle Button * 1) This is the button that twirls down extra pattern info */ .pl-c-pattern__extra-toggle { font-size: 0.8rem; position: absolute; bottom: -1px; right: 0; z-index: 1; padding: 0.4rem 0.5rem; color: #808080; background-color: transparent; cursor: pointer; font-weight: normal; transition: all 0.1s ease-out; font-family: "Open Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif; border-color: #ddd; border-width: 1px; border-style: solid; display: flex; align-items: center; } .pl-c-pattern__extra-toggle:hover, .pl-c-pattern__extra-toggle:focus, .pl-c-pattern__extra-toggle.pl-is-active { background-color: #fafafa; color: #000; } .pl-c-pattern__extra-toggle:focus { outline: 1px dotted #4d4c4c; outline-offset: -1px; } .pl-c-pattern__extra-toggle.pl-is-active { border-bottom-color: #fafafa; } .pl-c-pattern__toggle-icon-wrapper { position: relative; height: 1rem; width: 1rem; } .pl-c-pattern__toggle-icon { height: 0.9rem; width: 0.9rem; display: inline-block; vertical-align: middle; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); transition: transform .1s linear, opacity .1s linear; } .pl-c-pattern__toggle-icon--expand { z-index: 1; } .pl-is-active .pl-c-pattern__toggle-icon--expand { opacity: 0; } .pl-c-pattern__toggle-icon--collapse { opacity: 0; z-index: 2; height: 1rem; width: 1rem; } .pl-is-active .pl-c-pattern__toggle-icon--collapse { opacity: 1; } .pl-c-pattern__extra-toggle-text ~ .pl-c-pattern__toggle-icon-wrapper { margin-left: 0.25rem; } .pl-c-pattern__extra-toggle-text--collapse { display: none; } .pl-is-active .pl-c-pattern__extra-toggle-text--collapse { display: inline-block; } .pl-c-pattern__extra-toggle-text--expand { display: inline-block; } .pl-is-active .pl-c-pattern__extra-toggle-text--expand { display: none; } /** * Pattern Extra * 1) This is the info panel that contains extra pattern info * like pattern description, lineage, code, and more */ .pl-c-pattern__extra { background-color: #fafafa; border-top: 1px solid #ddd; margin-bottom: 1rem; overflow: hidden; max-height: 1px; position: relative; transition: all 0.1s ease-out; } .pl-c-pattern__extra.pl-is-active { border: 1px solid #ddd; border-radius: 6px; border-top-right-radius: 0; max-height: 9999px; } /*------------------------------------*\ #TABS \*------------------------------------*/ /** * 1) Tabs contain a set of horizontally-arranged tabs * with accompanying panels. When a tab link is clicked * the corresponding panel becomes visible */ .pl-c-tabs { padding: 0 0.5rem 0.5rem; background-color: #fff; border: 1px solid #ddd; border-radius: 6px; font-family: "Open Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif; position: relative; display: flex; flex-direction: column; max-height: 100%; flex-grow: 1; } /** * Tab List * 1) A unordered list that contains the tab links */ .pl-c-tabs__list { display: flex; width: 100%; list-style: none; margin: 0; padding: 0.5rem 0; background-color: #fff; } /** * Tab Link */ .pl-c-tabs__link { display: block; line-height: 1; padding: 0.2rem 0.4rem; border: 1px solid transparent; border-radius: 6px; color: #808080; background-color: #fff; cursor: pointer; text-decoration: none; text-transform: lowercase; transition: all 0.1s ease-out; /** * Active Tab * 1) Note: the active tab color corresponds with the Prism code block * background color, which is why it doesn't use a Sass variable */ } .pl-c-tabs__link:hover { color: #222; } .pl-c-tabs__link.pl-is-active-tab { color: #222; background-color: #eee; border: 1px solid #ddd; } .pl-c-tabs__header { position: sticky; z-index: 1; top: 0px; border-top: 1px solid #ddd; margin-left: calc(-0.5rem - 1px); margin-right: calc(-0.5rem - 1px); padding-left: 0.5rem; padding-right: 0.5rem; border: 1px solid #ddd; margin-bottom: .5rem; margin-top: -1px; background-color: inherit; border-top-left-radius: 5px; border-top-right-radius: 5px; } /** * Tab Content * 1) Tab content contains the tab panels */ .pl-c-tabs__content { flex-grow: 1; flex-shrink: 1; display: flex; flex-basis: auto; -webkit-overflow-scrolling: touch; overflow-y: auto; /** * Tab content inside modal */ } .pl-c-drawer .pl-c-tabs__content { border: 0; } /** * Tab panel * 1) Note: the active tab color corresponds with the Prism code block * background color, which is why it doesn't use a Sass variable */ .pl-c-tabs__panel { display: none; width: 100%; max-height: 100%; /** * Tab code * 1) Targeting pre tag in here as Prism is being used for the majority of the styles */ } .pl-c-tabs__panel.pl-is-active-tab { display: block; } .pl-c-tabs__panel pre[class*='language-'], .pl-c-tabs__panel :not(pre) > code[class*='language-'], .pl-c-tabs__panel pre[class*='language-'] { background-color: transparent; margin: 0; padding: 0; border: 0; display: block; width: 100%; min-height: 100%; } .pl-c-tabs__panel code[class*='language-'] { background-color: transparent; margin: 0; } /*------------------------------------*\ #TEXT PASSAGE \*------------------------------------*/ /** * 1) A passage of text which includes free-form tags (ul, blockquote, p, h2, etc) * generated by markdown */ .pl-c-text-passage { font-size: 0.85rem; line-height: 1.7; /** * Link within the text passage */ /** * Code */ /** * Blockquote within text passage */ /** * Horizontal rule */ /** * First-level heading within text passage */ /** * Second-level heading within text passage */ /** * Third-level heading within text passage */ /** * Fourth-level heading within text passage */ /** * Fifth-level heading within text passage */ /** * Sixth-level heading within text passage */ /** * Unordered list within text passage */ /** * Ordered list within text passage */ } .pl-c-text-passage p { margin-top: 0; margin-bottom: 1rem; } .pl-c-text-passage p:last-child { margin-bottom: 0; } .pl-c-text-passage a { color: inherit; text-decoration: underline; transition: opacity 0.1s ease; } .pl-c-text-passage a:hover, .pl-c-text-passage a:focus { opacity: 0.8; } .pl-c-text-passage code[class*='language-'], .pl-c-text-passage pre[class*='language-'] { color: inherit; } .pl-c-text-passage blockquote { padding-left: 0.8rem; border-left: 3px solid inherit; } .pl-c-text-passage hr { height: 1px; background-color: #808080; margin: 2rem 0; border: 0; } .pl-c-text-passage h1 { margin-bottom: 1rem; font-weight: normal; } .pl-c-text-passage h2 { margin: 1rem 0 1rem; font-weight: normal; } .pl-c-text-passage h3 { margin: 1rem 0 1rem; font-weight: normal; } .pl-c-text-passage h4 { margin: 1rem 0 1rem; font-weight: normal; } .pl-c-text-passage h5 { margin: 1rem 0 1rem; font-weight: normal; } .pl-c-text-passage h6 { margin: 1rem 0 1rem; font-weight: normal; } .pl-c-text-passage ul { list-style: square; margin-left: 0; margin-top: 0; margin-bottom: 1rem; padding-left: 1rem; } .pl-c-text-passage ul li:last-child { margin-bottom: 0; } .pl-c-text-passage ol { list-style: decimal; margin-left: 0; margin-top: 0; margin-bottom: 1rem; padding-left: 1rem; } .pl-c-text-passage ol li:last-child { margin-bottom: 0; } .pl-c-text-passage li { margin-bottom: 0.5rem; } .pl-c-code-copy-btn { display: inline-block; position: absolute; top: 0.4rem; right: 0.5rem; padding: 0.2rem 0.4rem; background-color: #eee; color: #222; border: 1px solid #ddd; border-radius: 6px; font-family: "Open Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif; font-size: 1rem; text-transform: lowercase; line-height: 1; cursor: pointer; z-index: 2; transition: background-color 0.1s ease-out; } .pl-c-code-copy-btn:hover, .pl-c-code-copy-btn:focus { background-color: #ccc; } .pl-c-code-copy-btn__icon { height: 1em; width: 1em; } .pl-c-code-copy-btn__icon--paste { display: none; } .is-copied .pl-c-code-copy-btn__icon--paste { display: inline-block; } .pl-c-code-copy-btn__icon--copy { display: inline-block; } .is-copied .pl-c-code-copy-btn__icon--copy { display: none; } .pl-c-body { overflow: hidden; } .pl-c-main { overflow-x: hidden; max-width: 100vw; padding-left: 1rem; padding-right: 1rem; } /*------------------------------------*\ #THEMES \*------------------------------------*/ /*------------------------------------*\ #LIGHT THEME \*------------------------------------*/ /** * A light-color theme for Pattern Lab, where the * PL header and modal are light instead of dark */ .pl-c-body--theme-light { /** * Header */ /** * Tools dropdown */ /** * Nav link dropdown */ /** * Size input */ /** * Typeahead container */ /** * Typeahead input */ /** * Modal close button * 1) Closes the modal popup */ } .pl-c-body--theme-light .pl-c-header { background-color: #fff; border-bottom: 1px solid #ccc; } @media all and (max-width: 41em) { .pl-c-body--theme-light .pl-c-tools__list.pl-is-active { border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; } } .pl-c-body--theme-light:not(.pl-c-body--theme-sidebar) .pl-c-tools__list.pl-is-active { border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; } .pl-c-body--theme-light .pl-c-nav__link--dropdown { color: inherit; } .pl-c-body--theme-light .pl-c-nav__link--dropdown:after { color: inherit; } .pl-c-body--theme-light .pl-c-viewport-size__input { color: #4d4c4c; } .pl-c-body--theme-light .pl-c-viewport-size__input:hover, .pl-c-body--theme-light .pl-c-viewport-size__input:focus { background-color: #ddd; } .pl-c-body--theme-light .typeahead { background-color: #ddd !important; } .pl-c-body--theme-light .tt-input { background-color: #eee !important; color: #4d4c4c !important; } .pl-c-body--theme-light .tt-input:hover { color: #222; background-color: #ddd !important; } .pl-c-body--theme-light .tt-input:hover::-webkit-input-placeholder { color: #222; } .pl-c-body--theme-light .tt-input:hover::-moz-input-placeholder { color: #222; } .pl-c-body--theme-light .pl-c-drawer__close-btn, .pl-c-body--theme-light .pl-c-tools__action { background-color: #fff; } .pl-c-body--theme-light .pl-c-drawer__close-btn:hover, .pl-c-body--theme-light .pl-c-drawer__close-btn:focus, .pl-c-body--theme-light .pl-c-tools__action:hover, .pl-c-body--theme-light .pl-c-tools__action:focus { background-color: #eee; color: #4d4c4c; } /*------------------------------------*\ #DENSITY THEME \*------------------------------------*/ /** * A theme that adjusts the density of the PL UI. * Options are compact (default), cozy, and comfortable */ .pl-c-body--theme-density-cozy { /** * Header */ /** * Size input fields */ /** * Typeahead */ /** * Ish sizing controls * 1) Hide on smaller screens */ /** * Viewport sizing inputs * 1) Hide these controls on */ /** * Tools menu button * 1) This is the button that contains the toggle and * triggers the tools dropdown list */ /** * Viewport * 1) Offset the viewport to account for the adjusted * PL header height */ } .pl-c-body--theme-density-cozy .pl-c-header { font-size: 0.85rem; } .pl-c-body--theme-density-cozy .pl-c-viewport-size__input { width: 44px; } .pl-c-body--theme-density-cozy .pl-c-typeahead { padding: 0.9rem 0.8rem; } @media all and (max-width: 78em) { .pl-c-body--theme-density-cozy .pl-c-size-list { display: none; } } @media all and (max-width: 78em) { .pl-c-body--theme-density-cozy .pl-c-viewport-size { display: none; /* 1 */ } } .pl-c-body--theme-density-cozy .pl-c-tools__toggle { min-width: 44px; } .pl-c-body--theme-density-cozy .pl-c-viewport { top: 3.28rem; } /*------------------------------------*\ #COMFORTABLE DENSITY \*------------------------------------*/ /** * Biggest */ .pl-c-body--theme-density-comfortable { /** * Header * 1) Change the font size of everything in the header */ /** * Logo */ /** * Typeahead dropdown list suggestion */ /** * Size input fields */ /** * Typeahead */ /** * Ish sizing controls * 1) Hide on smaller screens */ /** * Viewport sizing inputs */ /** * Tools menu button * 1) This is the button that contains the toggle and * triggers the tools dropdown list */ /** * Viewport * 1) Offset the viewport to account for the adjusted * PL header height */ } .pl-c-body--theme-density-comfortable .pl-c-header { font-size: 0.85rem; } .pl-c-body--theme-density-comfortable .pl-c-logo { max-width: 4rem; } .pl-c-body--theme-density-comfortable .pl-c-header .tt-suggestion { padding: 1.5rem 1rem; } .pl-c-body--theme-density-comfortable .pl-c-viewport-size__input { width: 44px; } .pl-c-body--theme-density-comfortable .pl-c-typeahead { padding: 0.9rem 1rem; } @media all and (max-width: 78em) { .pl-c-body--theme-density-comfortable .pl-c-size-list { display: none; /* 1 */ } } @media all and (max-width: 78em) { .pl-c-body--theme-density-comfortable .pl-c-viewport-size { display: none; /* 1 */ } } .pl-c-body--theme-density-comfortable .pl-c-tools__toggle { min-width: 44px; } .pl-c-body--theme-density-comfortable .pl-c-viewport { top: 3.8rem; /* 1 */ } /*------------------------------------*\ #SIDEBAR THEME \*------------------------------------*/ @media all and (min-width: 42em) { /** * A theme that places displays the header as a sidebar */ .pl-c-body--theme-sidebar { /** * Header * 1) Set width to sidebar width defined above * 2) Make header 100% of the viewport height * 3) Stack header items on top of each other * 4) void bottom border for light theme */ /** * Nav sub sub list */ /** * Nav list * 1) Stack main categories on top of each other * 2) Put typeahead search above nav list */ /** * Nav sublist */ /** * Nav sublist inside the light theme */ /** * All Nav links inside of subnav dropdown */ /** * Last sublist item * 1) Undo bottom border radius when in sidebar */ /** * Nav controls * 1) Push off of navigation in flex container so * they appear at the bottom */ /** * Tools toggle button */ /** * Tools list */ /** * Modal * 1) Position modal (that contains all the content) * so it fits in remaining available space * TODO: revisit to find ways to resize */ } .pl-c-body--theme-sidebar .pl-c-header { width: 16rem; /* 1 */ height: 100vh; /* 2 */ padding-top: 0.5rem; padding-bottom: 0.5rem; flex-direction: column; /* 3 */ border-bottom: 0; /* 4 */ justify-content: space-between; } .pl-c-body--theme-sidebar .pl-c-nav { flex-grow: 1; flex-direction: column; flex-flow: column-reverse; } .pl-c-body--theme-sidebar .pl-c-nav__list { flex-direction: column; /* 1 */ order: 2; /* 2 */ display: block; } .pl-c-body--theme-sidebar .pl-c-nav__sublist { position: relative; border-radius: 0; } .pl-c-body--theme-sidebar.pl-c-body--theme-light .pl-c-nav__subsublist { border-left-color: #eee; } .pl-c-body--theme-sidebar .pl-c-nav__sublist .pl-c-nav__link { border-left: 0; border-right: 0; } } @media all and (min-width: 42em) and (min-width: 42em) { .pl-c-body--theme-sidebar .pl-c-nav__sublist > .pl-c-nav__item:last-child .pl-c-nav__link { border-bottom-left-radius: 0; /* 1 */ border-bottom-right-radius: 0; /* 1 */ border-bottom: 0; /* 1 */ } } @media all and (min-width: 42em) { .pl-c-body--theme-sidebar .pl-c-controls { display: block; justify-self: flex-end; margin-left: 0; } .pl-c-body--theme-sidebar .pl-c-tools__toggle { display: none; } .pl-c-body--theme-sidebar .pl-c-tools__list { max-height: none; overflow: visible; position: relative; border-radius: 0; display: flex; flex-direction: column; width: 100%; } .pl-c-body--theme-sidebar .pl-c-drawer { right: 0; /* 1 */ width: auto; } } /*------------------------------------*\ #UTILITIES \*------------------------------------*/ /*------------------------------------*\ #VISIBILITY \*------------------------------------*/ /** * Visibly hidden but still accessible to screen readers */ .is-vishidden { position: absolute !important; overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(1px, 1px, 1px, 1px); }