Skip to content

Commit

Permalink
Merge 9a4decf into b79d1ca
Browse files Browse the repository at this point in the history
  • Loading branch information
sghoweri authored Oct 9, 2018
2 parents b79d1ca + 9a4decf commit bc6151f
Show file tree
Hide file tree
Showing 20 changed files with 148 additions and 60 deletions.
4 changes: 2 additions & 2 deletions apps/pattern-lab/src/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import 'core-js/modules/es6.string.starts-with';
import 'iframe-resizer/js/iframeResizer.contentWindow.min.js';

// automatically remove the min-height default set to the body element when viewing PL pages from inside an iframe on the docs site.
// automatically remove the min-height default set to the body element when viewing PL pages from inside an iframe on the docs site, but via a utility class
window.iFrameResizer = {
readyCallback() {
document.body.setAttribute('style', 'min-height: 0;');
document.body.classList.add('u-bolt-min-height-none');
},
};

Expand Down
1 change: 0 additions & 1 deletion packages/global/styles/04-elements/_elements-page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ body {

// help ensure short pages (those not using `.c-bolt-site`) are tall enough. Super important when dealing with components with
// click event handlers on the body (and the body isn't automatically tall enough based on the content contained inside
min-height: 100vh;
width: 100%;
margin: 0;
color: bolt-color(indigo, xdark);
Expand Down
1 change: 1 addition & 0 deletions packages/uikit-workshop/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
"access": "public"
},
"dependencies": {
"iframe-resizer": "^3.6.2",
"@reach/visually-hidden": "^0.1.1",
"@skatejs/renderer-preact": "^0.3.3",
"@webcomponents/custom-elements": "^1.2.1",
Expand Down
5 changes: 2 additions & 3 deletions packages/uikit-workshop/src/html/index.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<!DOCTYPE html>
<html>
<html class="pl-c-html">

<head>
<title id="title">Pattern Lab</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<meta name='viewport' content='initial-scale=1, width=device-width, viewport-fit=cover'>
<meta name="theme-color" content="#ababab" />

<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />

</head>
Expand Down
4 changes: 3 additions & 1 deletion packages/uikit-workshop/src/html/partials/modal.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<div class="pl-c-modal pl-js-modal">
<div class="pl-c-modal__toolbar">
<div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
</div>
<div class="pl-c-modal__content-wrapper">
<div class="pl-c-modal__toolbar-controls">
<button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
Expand All @@ -11,6 +13,6 @@
</button>
<pl-toggle-layout></pl-toggle-layout>
</div>
<div class="pl-c-modal__content pl-js-modal-content"></div>
</div>
<div class="pl-c-modal__content pl-js-modal-content"></div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,8 @@
*/
&.pl-is-active {
max-height: calc(100vh - #{$offset-top} - 1rem);
max-height: var(
calc(--pl-viewport-height - 1rem),
calc(100vh - #{$offset-top} - 1rem)
max-height: calc(
var(--pl-viewport-height, calc(100vh - #{$offset-top})) - 1rem
); /* [1] */
overflow: auto;
-webkit-overflow-scrolling: touch;
Expand Down
8 changes: 5 additions & 3 deletions packages/uikit-workshop/src/sass/scss/02-base/_body.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@
* 1) These exist indepenedent of any project-specific styles
* 2) Styled as IDs to avoid collisions with user <body> tag
*/
.pl-c-html {
min-height: 100%;
}

.pl-c-body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
display: flex;
flex-direction: column;
height: 100vh;
display: flex; // Required for IE 11 to display overall PL layout correctly
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@
color: $pl-color-gray-50;
font-family: $pl-font;
font-size: $pl-font-size-sm;

@supports(padding: max(0px)) {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
}

/**
Expand Down
30 changes: 27 additions & 3 deletions packages/uikit-workshop/src/sass/scss/04-components/_modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
#MODAL
\*------------------------------------*/

$pl-resizer-height: 14px;

pl-modal {
display: flex;
flex-direction: column;
position: relative;
position: sticky;
z-index: 20;
max-height: 100vh;
box-shadow: 0 0 2px 0 $pl-color-gray-70;
Expand All @@ -23,10 +26,11 @@ pl-modal {
font-family: $pl-font;
background-color: $pl-color-gray-87;
color: $pl-color-gray-20;
position: relative;
position: sticky;
top: auto;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
width: 100%;
height: 0;
Expand All @@ -36,6 +40,7 @@ pl-modal {
will-change: height, transform;
overflow: hidden;
max-width: 100vw;
box-shadow: 0 -1px 2px rgba($pl-color-gray-70, 0.1);

.pl-c-body--theme-sidebar & {
@media all and (min-width: $pl-bp-med) {
Expand All @@ -48,7 +53,7 @@ pl-modal {
*/
&.pl-is-active {
transform: translate3d(0, 0, 0);
height: 50vh; // default height unless manually resized
height: 40vh; // default height unless manually resized
transition: transform 0.3s ease;
pointer-events: auto;
}
Expand All @@ -62,11 +67,28 @@ pl-modal {
height: 100%;
}

.pl-c-modal__content {
flex-grow: 1;
display: flex;
}

.pl-c-modal__toolbar {
display: flex;
flex-shrink: 0; // so that the resizer height doesn't change unexpectedly
}

.pl-c-modal__content-wrapper {
display: flex;
flex-direction: row-reverse;
flex-grow: 1;

@supports (padding: env(safe-area-inset-top)){
padding-right: calc(env(safe-area-inset-right) - 0.9rem);
}
}

.pl-c-modal__toolbar-controls {
margin-top: $pl-resizer-height * -1;
display: flex;
flex-direction: column;
position: relative;
Expand All @@ -79,6 +101,8 @@ pl-modal {
*/
.pl-c-modal__close-btn {
@include linkStyle;
margin: 0;
-webkit-appearance: none;

@media all and (max-width: $pl-bp-med - 1) {
border-radius: 20rem;
Expand Down Expand Up @@ -117,7 +141,7 @@ pl-modal {
align-items: center;
justify-content: center;
left: 0;
height: 14px;
height: $pl-resizer-height;
width: 100%;
background-color: inherit;
z-index: 2;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
*/
.pl-c-nav {
@include accordionPanel;
background-color: inherit;
background-color: inherit; // allows the nav's children inherit from the parent header
position: absolute;
left: 0; // IE 11 layout broken
top: 100%;
width: 100%;
display: flex;
Expand All @@ -37,7 +38,9 @@
}

.pl-c-body--theme-sidebar & {
box-shadow: none;
@media all and (min-width: $pl-bp-med) {
box-shadow: none;
}
}

// if nav was opened on smaller screen and screen is resized, it'll be cut off otherwise
Expand Down Expand Up @@ -69,6 +72,7 @@
list-style: none;
flex-shrink: 0; // helps prevent top-level nav items from occasionally wrapping to multiple lines
order: 2;
background-color: inherit; // allows the nav's children inherit from the parent header

@media all and (min-width: $pl-bp-med) {
display: flex; /* 2 */
Expand All @@ -85,11 +89,17 @@
* Nav list item
*/
.pl-c-nav__item {
background-color: inherit; // allows the nav's children inherit from the parent header
transform: translateZ(0); // helps with more consistent rendering in Safari
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
justify-content: center; // vertically align nav items

.pl-c-body--theme-sidebar & {
display: block;
}
}

/**
Expand All @@ -107,9 +117,15 @@
* Nav link
*/
.pl-c-nav__link {
@include linkStyle;
display: flex;
align-items: center;
@include linkStyle();
margin: 0; // remove default button margin in Safari

// makes link layout / size more consistent in the sidebar layout, especially when display: flex styles are removed for more consistent IE 11 rendering
.pl-c-body--theme-sidebar & {
width: 100%;
}
}

/**
Expand All @@ -126,6 +142,7 @@
* Nav link
*/
.pl-c-nav__link--dropdown {
-webkit-appearance: none; // remove default button styling
flex-grow: 1; // fill up extra space in parent nav item, if available
/**
* Dropdown caret after accordion handle
Expand Down Expand Up @@ -171,6 +188,7 @@
* hang over the header
*/
.pl-c-nav__sublist {
background-color: inherit; // allows the nav's children inherit from the parent header
@include listReset();

@media all and (min-width: $pl-bp-med) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
* code, annotations, and more.
*/
.pl-c-pattern-info {
flex-grow: 1; // fills space available when placed in the parent flex container

@media all and (min-width: $pl-bp-large) {
display: flex;
}
Expand All @@ -19,6 +21,7 @@
max-height: 20rem;
overflow: scroll;
@include hideScrollBar();
-webkit-overflow-scrolling: touch;

@media all and (min-width: $pl-bp-large) {
max-height: none;
Expand All @@ -38,6 +41,8 @@
left: 0;
overflow: scroll;
@include hideScrollBar();
-webkit-overflow-scrolling: touch;
flex-grow: 1;

@media all and (min-width: $pl-bp-large) {
position: static;
Expand Down Expand Up @@ -66,13 +71,16 @@
left: 0;
right: 1.3rem;
padding-right: 0;

@supports (padding: env(safe-area-inset-right)){
right: calc(env(safe-area-inset-right) + 1.3rem);
}
}

.pl-c-modal & {
@media all and (min-width: $pl-bp-xl) {
right: 0;
padding-left: 2rem;
padding-right: 2.5rem;
padding-left: 1rem;
padding-right: 0;
}
}
}
Expand All @@ -87,8 +95,9 @@
@media all and (min-width: $pl-bp-large) {
left: 0;
right: 50%;
overflow: scroll;
overflow: auto;
@include hideScrollBar();
-webkit-overflow-scrolling: touch;
}

@media all and (min-width: $pl-bp-xl) {
Expand Down
11 changes: 6 additions & 5 deletions packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,24 @@
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 1;

/**
* Tabs inside a code panel
*/

.pl-c-pattern-info__panel--code & {
@media all and (min-width: $pl-bp-large) {
// @media all and (min-width: $pl-bp-large) {
position: absolute;
top: 1rem;
bottom: 1rem;
left: 1rem;
right: 1rem;
}
// }
}

.pl-c-modal & {
@media all and (min-width: $pl-bp-xl) {
right: 2.5rem;
left: 2rem;
}
}
Expand Down Expand Up @@ -91,8 +92,8 @@
.pl-c-tabs__content {
flex: 1 0 auto;
overflow: scroll;
@include hideScrollBar();
height: 100%;
-webkit-overflow-scrolling: touch;
max-height: 90%;
padding-top: 0.5rem;

/**
Expand Down
Loading

0 comments on commit bc6151f

Please sign in to comment.