diff --git a/src/pivotal-ui/components/header/header.scss b/src/pivotal-ui/components/header/header.scss index d388bd3a0..ba4addf43 100644 --- a/src/pivotal-ui/components/header/header.scss +++ b/src/pivotal-ui/components/header/header.scss @@ -95,6 +95,7 @@ header { font-size: 16px; padding: 0.875em 20px 0.0625em; border-bottom: 1px solid #d3d3d3; + max-height: $header-height-max-sm; background: $header-color; color: $header-text-color; display: flex; @@ -102,6 +103,14 @@ header { justify-content: space-between; align-items: center; } +header.hero-transparent { + background: transparent; + border-bottom: 0; +} +header.hero-transparent + .pane { + margin-top: $header-height-max-sm; + padding-top: -($header-height-max-sm); +} header > .header-item { flex: 1 auto; } @@ -271,6 +280,7 @@ header a:hover { @media (min-width: $desktopMinWidth) { header { + max-height: $header-height-max-lg; flex-direction: row; flex-wrap: wrap-reverse; padding: 0 20px; @@ -316,10 +326,6 @@ header a:hover { header > .header-nav-menu-container .nav-menu-container { max-width: 550px; } - header.hero-transparent { - background: transparent; - border-bottom: 0; - } header.hero-transparent + .pane { margin-top: -6em; padding-top: 6em; diff --git a/src/pivotal-ui/components/header/package.json b/src/pivotal-ui/components/header/package.json index b1fc6478b..3105a210b 100644 --- a/src/pivotal-ui/components/header/package.json +++ b/src/pivotal-ui/components/header/package.json @@ -4,5 +4,5 @@ "@npmcorp/pui-css-drop-down-menu": "^1.3.0", "pui-css-typography": "^2.0.0" }, - "version": "1.7.0" + "version": "2.0.0" } \ No newline at end of file diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss index bb77a9be4..0b5ac7476 100644 --- a/src/pivotal-ui/components/pui-variables.scss +++ b/src/pivotal-ui/components/pui-variables.scss @@ -1326,4 +1326,7 @@ $header-subtle-text-color: rgba(255,255,255,0.8); $header-nav-highlight-bg: #a42b2b; $desktopMinWidth: $screen-sm; $greigh: rgba(195,195,195,1); // median greigh -$greigh3: rgba(black, 0.6); \ No newline at end of file +$greigh3: rgba(black, 0.6); + +$header-height-max-sm: 7.478125em; +$header-height-max-lg: 8.315625em; \ No newline at end of file diff --git a/src/pivotal-ui/components/viewport-panes/README.md b/src/pivotal-ui/components/viewport-panes/README.md new file mode 100644 index 000000000..a316f015b --- /dev/null +++ b/src/pivotal-ui/components/viewport-panes/README.md @@ -0,0 +1,8 @@ +```html +
+
+

This is a viewport pane

+
+
+ +``` diff --git a/src/pivotal-ui/components/viewport-panes/package.json b/src/pivotal-ui/components/viewport-panes/package.json new file mode 100644 index 000000000..6ac753e5d --- /dev/null +++ b/src/pivotal-ui/components/viewport-panes/package.json @@ -0,0 +1,9 @@ +{ + "homepage": "http://styleguide.pivotal.io/layout.html#pane", + "dependencies": { + "@npmcorp/pui-css-bootstrap": "2.0.0", + "@npmcorp/pui-css-panes": "2.0.0", + "@npmcorp/pui-css-header": "2.0.0" + }, + "version": "1.0.0" +} \ No newline at end of file diff --git a/src/pivotal-ui/components/viewport-panes/viewport-panes.scss b/src/pivotal-ui/components/viewport-panes/viewport-panes.scss new file mode 100644 index 000000000..682a655db --- /dev/null +++ b/src/pivotal-ui/components/viewport-panes/viewport-panes.scss @@ -0,0 +1,63 @@ +@import "../pui-variables"; + +/*doc +--- +title: Viewport Pane +name: viewport_pane +categories: + - css_utilities_panes + - css_all +--- + + + +npm install @npmcorp/pui-css-viewport-panes --save + + + +Viewport panes are type of [pane](/pane.html) that have a height that is based upon +the height of your viewport. + +You can add the `.viewport-pane` class to the top pane of a layout. + +```html_example +
+

This is the header

+
+
+
+

This is a pane

+
+
+ +``` + +When following a transparent header, the viewport-pane class will allow the pane's color +to come through + +``` +
+

This is the header, you can see the pane below me, through this

+
+
+
+

This is a pane

+
+
+``` + +*/ + +.viewport-pane { + height: calc(100vh - $header-height-max-sm); +} + +.hero-transparent + .viewport-pane { + box-sizing: content-box; +} + +@media (min-width: $screen-sm-min) { + .viewport-pane { + height: calc(80vh - $header-height-max-lg); + } +}