/*------------------------------------*\ #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 * BASE......................Reset & Base elements * COMPONENTS................Components * UTILITIES.................Helper classes * VENDOR....................Styles out of PL control */ /*------------------------------------*\ #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 * { -webkit-box-sizing: border-box; box-sizing: border-box; } /*------------------------------------*\ #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-body { margin: 0; padding: 0; background: #ddd; -webkit-text-size-adjust: 100%; } /*------------------------------------*\ #COMPONENTS \*------------------------------------*/ /** * Pattern Lab Header */ /*------------------------------------*\ #HEADER \*------------------------------------*/ /** * 1) Pattern Lab's header is fixed across the top of the viewport and * contains the primary pattern navigation, viewport resizing items, * and tools. * 2) Display nav and controls horizontally */ .pl-c-header { position: fixed; top: 0; left: 0; z-index: 4; display: -webkit-box; display: -ms-flexbox; display: flex; /* 2 */ width: 100%; background: #000; color: #808080; font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif; font-size: 0.85rem; } /** * Nav toggle button * 1) Styles for the general nav toggle button, which * only appears on small screens */ .pl-c-header__nav-toggle { background: #000; color: #808080; text-decoration: none; line-height: 1; padding: 0.7rem 0.5rem; border: 0; text-align: left; -webkit-transition: background 0.1s ease-out, color 0.1s ease-out; transition: background 0.1s ease-out, color 0.1s ease-out; /** * Header link styles inside light theme */ /** * Header link styles inside cozy theme */ /** * Header link styles inside comfortable theme */ border: 0; } .pl-c-header__nav-toggle:hover { color: #fff; background: #222; } .pl-c-header__nav-toggle:focus, .pl-c-header__nav-toggle.active { color: #fff; background: #222; outline: 1px dotted #808080; outline-offset: -1px; } .pl-c-body--theme-light .pl-c-header__nav-toggle { background: #fff; color: #4d4c4c; } .pl-c-body--theme-density-cozy .pl-c-header__nav-toggle { font-size: 0.85rem; padding: 1.2rem 0.8rem; } .pl-c-body--theme-density-comfortable .pl-c-header__nav-toggle { font-size: 0.85rem; padding: 1.5rem 1rem; } @media all and (min-width: 42em) { .pl-c-header__nav-toggle { display: none; } } /*------------------------------------*\ #LOGO \*------------------------------------*/ /** * 1) An optional logo that lives in PL's header. * 2) Displayed as a link */ .pl-c-logo { max-width: 2rem; margin: 0 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pl-c-logo:focus { outline: 1px dotted #808080; outline-offset: -1px; } .pl-c-logo__img { display: block; max-width: 100%; height: auto; } /*------------------------------------*\ #NAVIGATION \*------------------------------------*/ /** * Navigation container * 1) Collapse height on small screens. Menu trigger button * activates nav */ @media all and (max-width: 42em) { .pl-c-nav { position: absolute; top: 100%; width: 100%; overflow: hidden; max-height: 0; /* 1 */ background: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: max-height 0.1s ease-out; transition: max-height 0.1s ease-out; /** * 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(100vh - 1rem); /* 2 */ overflow: auto; -ms-overflow-style: -ms-autohiding-scrollbar; } .pl-c-nav.pl-is-active::-webkit-scrollbar { width: 0 !important; } } @media all and (min-width: 42em) { .pl-c-nav { display: -webkit-box; display: -ms-flexbox; display: flex; } } /** * 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; } @media all and (max-width: 42em) { .pl-c-nav__list { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; /* 3 */ } } @media all and (min-width: 42em) { .pl-c-nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; /* 2 */ -ms-flex-negative: 0; flex-shrink: 0; } } /** * Nav list item */ .pl-c-nav__item { cursor: pointer; position: relative; } /** * Last sublist item */ @media all and (min-width: 42em) { .pl-c-nav__sublist > .pl-c-nav__item:last-child { overflow: hidden; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } } /** * Nav link */ .pl-c-nav__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #000; color: #808080; text-decoration: none; line-height: 1; padding: 0.7rem 0.5rem; border: 0; text-align: left; -webkit-transition: background 0.1s ease-out, color 0.1s ease-out; transition: background 0.1s ease-out, color 0.1s ease-out; /** * Header link styles inside light theme */ /** * Header link styles inside cozy theme */ /** * Header link styles inside comfortable theme */ } .pl-c-nav__link:hover { color: #fff; background: #222; } .pl-c-nav__link:focus, .pl-c-nav__link.active { color: #fff; background: #222; outline: 1px dotted #808080; outline-offset: -1px; } .pl-c-body--theme-light .pl-c-nav__link { background: #fff; color: #4d4c4c; } .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; } /** * Nav sublink * 1) Visually differentiate sub-item links from * the other links. Creates better hierarchy. */ .pl-c-nav__link--sublink { text-transform: none; padding-left: 1rem; } /** * Nav link */ .pl-c-nav__link--dropdown { /** * Dropdown caret after accordion handle */ /** * Active dropdown */ } .pl-c-nav__link--dropdown:after { content: '\25bc'; color: rgba(255, 255, 255, 0.25); display: inline-block; font-size: 7px; position: relative; top: 1px; right: -2px; -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .pl-c-nav__link--dropdown:hover:after, .pl-c-nav__link--dropdown:focus:after { color: #808080; } .pl-c-nav__link--dropdown.pl-is-active { color: #fff; background: #222; /** * Caret rotation and positioning in active dropdown */ } .pl-c-nav__link--dropdown.pl-is-active:after { color: #808080; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /** * Nav sublist * 1) On larger screens, display as dropdowns that * hang over the header */ .pl-c-nav__sublist { list-style: none; margin: 0; padding: 0; } @media all and (min-width: 42em) { .pl-c-nav__sublist { position: absolute; top: 100%; /* 1 */ left: 0; min-width: 10rem; overflow: hidden; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } } /** * Dropdown sublist */ .pl-c-nav__sublist--dropdown, .pl-c-nav__subsublist--dropdown { list-style: none; margin: 0; padding: 0; overflow: hidden; max-height: 0; -webkit-transition: max-height 0.1s ease-out; transition: max-height 0.1s ease-out; /** * Active is when accordion panel is open */ } .pl-c-nav__sublist--dropdown.pl-is-active, .pl-c-nav__subsublist--dropdown.pl-is-active { max-height: none; overflow: auto; -ms-overflow-style: -ms-autohiding-scrollbar; } .pl-c-nav__sublist--dropdown.pl-is-active::-webkit-scrollbar, .pl-c-nav__subsublist--dropdown.pl-is-active::-webkit-scrollbar { width: 0 !important; } @media all and (min-width: 42em) { .pl-c-nav__sublist--dropdown.pl-is-active, .pl-c-nav__subsublist--dropdown.pl-is-active { max-height: calc(100vh - 3rem); } } /** * Dropdown sublist * 1) Set the height to the viewport height minus the height of the header */ /** * Sub-navigation * 1) Third-level links are stylistically different * than first and second nav links. */ .pl-c-nav__subsublist { list-style: none; margin: 0; padding: 0; } /*------------------------------------*\ #ISH SIZING \*------------------------------------*/ /** * Viewport size form * 1) This is the form for the form that houses the current * viewport size in px and em */ .pl-c-viewport-size { margin: 0; border: 0; padding: 0.3rem 0.5rem 0.4rem; line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /** * Size input fields */ .pl-c-viewport-size__input { padding: 0.1rem; margin: 0; border: 0; border-radius: 3px; background: transparent; font-size: inherit; color: #808080; width: 3em; text-align: right; -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .pl-c-viewport-size__input::-moz-focus-inner { padding: 0; border: 0; } .pl-c-viewport-size__input:hover { color: #fff; background: #222; } .pl-c-viewport-size__input:active, .pl-c-viewport-size__input:focus { color: #fff; background: #222; outline: 1px dotted #808080; outline-offset: -1px; } /** * Size input labels */ .pl-c-viewport-size__label { display: block; margin: 0; padding: 0; } /** * Size options * 1) This holds the S, M, L, Rand, Disco links * 2) Depending on the config, these number of options may be * larger or smaller. */ .pl-c-size-list { display: none; list-style: none; margin: 0; padding: 0; } @media all and (min-width: 53em) { .pl-c-size-list { display: block; display: -webkit-box; display: -ms-flexbox; display: flex; } } /** * Size actions * 1) These are the buttons that control the viewport resizing */ .pl-c-size-list__action { background: #000; color: #808080; text-decoration: none; line-height: 1; padding: 0.7rem 0.5rem; border: 0; text-align: left; -webkit-transition: background 0.1s ease-out, color 0.1s ease-out; transition: background 0.1s ease-out, color 0.1s ease-out; /** * Header link styles inside light theme */ /** * Header link styles inside cozy theme */ /** * Header link styles inside comfortable theme */ } .pl-c-size-list__action:hover { color: #fff; background: #222; } .pl-c-size-list__action:focus, .pl-c-size-list__action.active { color: #fff; background: #222; outline: 1px dotted #808080; outline-offset: -1px; } .pl-c-body--theme-light .pl-c-size-list__action { background: #fff; color: #4d4c4c; } .pl-c-body--theme-density-cozy .pl-c-size-list__action { font-size: 0.85rem; padding: 1.2rem 0.8rem; } .pl-c-body--theme-density-comfortable .pl-c-size-list__action { font-size: 0.85rem; padding: 1.5rem 1rem; } /*------------------------------------*\ #CONTROLS \*------------------------------------*/ /** * 1) Controls contains viewport resizer and tools dropdown * 2) Right-align inside of header */ .pl-c-controls { margin-left: auto; /* 2 */ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } /** * Control list */ .pl-c-controls__list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } /*------------------------------------*\ #TOOLS \*------------------------------------*/ /** * The tools dropdown contains more utilities such as show/hide * pattern info and pattern search, and also links to open in a * new window and view the documentation */ .pl-c-tools { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } /** * Tools menu button * 1) This is the button that contains the toggle and * triggers the tools dropdown list */ .pl-c-tools__toggle { background: #000; color: #808080; text-decoration: none; line-height: 1; padding: 0.7rem 0.5rem; border: 0; text-align: left; -webkit-transition: background 0.1s ease-out, color 0.1s ease-out; transition: background 0.1s ease-out, color 0.1s ease-out; /** * Header link styles inside light theme */ /** * Header link styles inside cozy theme */ /** * Header link styles inside comfortable theme */ margin: 0; padding-top: 0.6rem; padding-bottom: 0.5rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; min-width: 30px; } .pl-c-tools__toggle:hover { color: #fff; background: #222; } .pl-c-tools__toggle:focus, .pl-c-tools__toggle.active { color: #fff; background: #222; outline: 1px dotted #808080; outline-offset: -1px; } .pl-c-body--theme-light .pl-c-tools__toggle { background: #fff; color: #4d4c4c; } .pl-c-body--theme-density-cozy .pl-c-tools__toggle { font-size: 0.85rem; padding: 1.2rem 0.8rem; } .pl-c-body--theme-density-comfortable .pl-c-tools__toggle { font-size: 0.85rem; padding: 1.5rem 1rem; } /** * Tools Toggle SVG icon * 1) Cog icon * 2) Set the width and height of the icon to be the same height of font */ .pl-c-tools__toggle-icon { position: absolute; } /** * Tools dropdown list */ .pl-c-tools__list { list-style: none; margin: 0; padding: 0; overflow: hidden; max-height: 0; -webkit-transition: max-height 0.1s ease-out; transition: max-height 0.1s ease-out; /** * Active is when accordion panel is open */ position: absolute; top: 100%; right: 0; z-index: 1; width: 10rem; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .pl-c-tools__list.pl-is-active { max-height: none; overflow: auto; -ms-overflow-style: -ms-autohiding-scrollbar; } .pl-c-tools__list.pl-is-active::-webkit-scrollbar { width: 0 !important; } @media all and (min-width: 42em) { .pl-c-tools__list.pl-is-active { max-height: calc(100vh - 3rem); } } /** * Tools dropdown actions * 1) Links and buttons inside of the tools dropdown */ .pl-c-tools__action { background: #000; color: #808080; text-decoration: none; line-height: 1; padding: 0.7rem 0.5rem; border: 0; text-align: left; -webkit-transition: background 0.1s ease-out, color 0.1s ease-out; transition: background 0.1s ease-out, color 0.1s ease-out; /** * Header link styles inside light theme */ /** * Header link styles inside cozy theme */ /** * Header link styles inside comfortable theme */ display: block; width: 100%; margin: 0; } .pl-c-tools__action:hover { color: #fff; background: #222; } .pl-c-tools__action:focus, .pl-c-tools__action.active { color: #fff; background: #222; outline: 1px dotted #808080; outline-offset: -1px; } .pl-c-body--theme-light .pl-c-tools__action { background: #fff; color: #4d4c4c; } .pl-c-body--theme-density-cozy .pl-c-tools__action { font-size: 0.85rem; padding: 1.2rem 0.8rem; } .pl-c-body--theme-density-comfortable .pl-c-tools__action { font-size: 0.85rem; padding: 1.5rem 1rem; } /** * Viewport */ /*------------------------------------*\ #VIEWPORT \*------------------------------------*/ /** * To keep user code and PL code separate, and to make * resizing the viewport possible, PL contains an iframe * that houses all user code. */ /** * Viewport * 1) This wrapper div occupies all remaining viewport space after PL's header */ .pl-c-viewport { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: calc(100vh - 2rem); width: 100%; position: relative; top: 2rem; bottom: 0; left: 0; right: 0; z-index: 0; overflow: hidden; } /** * Cover * 1) This is an invisible div that sits above the iframe and is * used in JS for manual viewport resizing purposes. */ .pl-c-viewport__cover { width: 100%; height: 100%; display: none; position: absolute; z-index: 20; cursor: move; } /** * Viewport iframe wrapper * 1) This is the container that houses the * iframe and the manual resize handle */ .pl-c-viewport__iframe-wrapper { height: 100%; position: relative; margin: 0 auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; width: 100%; } .pl-c-viewport__iframe-wrapper.hay-mode { -webkit-transition: all 40s linear; transition: all 40s linear; } /** * Viewport iframe * 1) this is the actual