Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
feat(top-app-bar): Add prominent style (#2349)
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamernest
williamernest authored Mar 12, 2018
1 parent e648123 commit f59b109
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 39 deletions.
63 changes: 43 additions & 20 deletions demos/top-app-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@
<header id="demo-top-app-bar" class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">San Francisco, CA</span>
</section>
<section id="iconSection" class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
<a id="right-item" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<a href="#" id="right-item" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
</section>
</div>
</header>
Expand Down Expand Up @@ -157,28 +157,43 @@
</div>
</main>

<div class="demo-controls-container">
<h3>Demo Controls</h3>
<div>
<input type="checkbox" id="rtl-checkbox"/>
<label for="rtl-checkbox">RTL</label>
</div>
<div>
<input type="checkbox" id="no-action-item-checkbox"/>
<label for="no-action-item-checkbox">No Action Item</label>
</div>
<div>
<input type="checkbox" id="short-checkbox"/>
<label for="short-checkbox">Short</label>
</div>
<div>
<input type="checkbox" id="always-collapsed-checkbox" disabled/>
<label for="always-collapsed-checkbox">Always Collapsed (Short Only)&#x200E;</label>
<div class="demo-controls-container" dir="ltr">
<h3 class="mdc-typography--title">Demo Controls</h3>
<div class="demo-row">
<div class="demo-col">
<h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Common Options</h4>
<div>
<input type="checkbox" id="rtl-checkbox"/>
<label for="rtl-checkbox">RTL</label>
</div>
<div>
<input type="checkbox" id="no-action-item-checkbox"/>
<label for="no-action-item-checkbox">No Action Item</label>
</div>
</div>
<div class="demo-col">
<h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Top App Bar Specific Options</h4>
<div>
<input type="checkbox" id="prominent-checkbox"/>
<label for="prominent-checkbox">Prominent</label>
</div>
</div>
<div class="demo-col">
<h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Short Top App Bar Specific Options</h4>
<div>
<input type="checkbox" id="short-checkbox"/>
<label for="short-checkbox">Short</label>
</div>
<div>
<input type="checkbox" id="always-collapsed-checkbox" disabled/>
<label for="always-collapsed-checkbox">Always Collapsed (Short Only)&#x200E;</label>
</div>
</div>
</div>
</div>

<script src="/assets/common.js" async></script>
<script src="/assets/material-components-web.js" async></script>
<script src="/assets/common.js" async></script>
<script type="text/javascript">
demoReady(function() {
var appBarEl = document.getElementById('demo-top-app-bar');
Expand All @@ -193,6 +208,7 @@ <h3>Demo Controls</h3>
var noActionItemCheckbox = document.getElementById('no-action-item-checkbox');
var shortCheckbox = document.getElementById('short-checkbox');
var alwaysCollapsedCheckbox = document.getElementById('always-collapsed-checkbox');
var prominentCheckbox = document.getElementById('prominent-checkbox');

appBarEl.addEventListener('MDCTopAppBar:nav', function() {
drawer.open = true;
Expand Down Expand Up @@ -230,6 +246,7 @@ <h3>Demo Controls</h3>
}

alwaysCollapsedCheckbox.disabled = !this.checked;
prominentCheckbox.disabled = this.checked;
});

alwaysCollapsedCheckbox.addEventListener('change', function() {
Expand All @@ -238,6 +255,12 @@ <h3>Demo Controls</h3>
appBar.destroy();
appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
});

prominentCheckbox.addEventListener('change', function() {
appBarEl.classList[this.checked ? 'add' : 'remove']('mdc-top-app-bar--prominent');

shortCheckbox.disabled = this.checked;
});
});
</script>
</body>
Expand Down
14 changes: 14 additions & 0 deletions demos/top-app-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
@import "../packages/mdc-top-app-bar/mdc-top-app-bar";
@import "../packages/mdc-drawer/mdc-drawer";
@import "../packages/mdc-list/mdc-list";
@import "../packages/mdc-typography/mdc-typography";

.demo-paragraph {
margin: 0;
Expand Down Expand Up @@ -55,3 +56,16 @@
input[type="checkbox"]:disabled + label {
opacity: .4;
}

.demo-col {
display: flex;
flex: 1 1 auto;
flex-direction: column;
margin: 10px;
}

.demo-row {
display: flex;
flex: 1 1 auto;
flex-direction: row;
}
28 changes: 14 additions & 14 deletions packages/mdc-top-app-bar/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,26 +51,20 @@

@mixin mdc-top-app-bar-mobile-breakpoint_($mobile-breakpoint: $mdc-top-app-bar-mobile-breakpoint) {
@media (max-width: $mobile-breakpoint) {
.mdc-top-app-bar {
.mdc-top-app-bar__row {
min-height: $mdc-top-app-bar-mobile-row-height;
}
.mdc-top-app-bar__row {
height: $mdc-top-app-bar-mobile-row-height;
}

.mdc-top-app-bar__section {
padding: $mdc-top-app-bar-mobile-section-padding;
}
.mdc-top-app-bar__section {
padding: $mdc-top-app-bar-mobile-section-padding;
}

.mdc-top-app-bar__title {
@include mdc-rtl-reflexive-box(padding, left, $mdc-top-app-bar-mobile-title-left-padding);
}
.mdc-top-app-bar__title {
@include mdc-rtl-reflexive-box(padding, left, $mdc-top-app-bar-mobile-title-left-padding);
}

.mdc-top-app-bar--short {
transition: width 200ms $mdc-animation-standard-curve-timing-function;

.mdc-top-app-bar__row {
min-height: $mdc-top-app-bar-mobile-row-height;
}
}

.mdc-top-app-bar--short-collapsed {
Expand All @@ -80,6 +74,12 @@
@include mdc-rtl-reflexive-box(padding, right, $mdc-top-app-bar-short-collapsed-right-icon-padding);
}
}

.mdc-top-app-bar--prominent {
.mdc-top-app-bar__title {
padding-bottom: $mdc-top-app-bar-prominent-mobile-title-bottom-padding;
}
}
}
}

Expand Down
13 changes: 11 additions & 2 deletions packages/mdc-top-app-bar/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,30 @@
// limitations under the License.
//

// Default styles
$mdc-top-app-bar-row-height: 64px;
$mdc-top-app-bar-title-left-padding: 10px;
$mdc-top-app-bar-section-vertical-padding: 8px;
$mdc-top-app-bar-section-horizontal-padding: 12px;

$mdc-top-app-bar-icon-padding: 12px;
$mdc-top-app-bar-icon-size: 24px;

$mdc-top-app-bar-mobile-breakpoint: 599px !default;

// Default mobile styles
$mdc-top-app-bar-mobile-row-height: 56px;
$mdc-top-app-bar-mobile-title-left-padding: 12px;
$mdc-top-app-bar-mobile-section-padding: 4px;

$mdc-top-app-bar-icon-size: 24px;

// Short top app bar
$mdc-top-app-bar-short-collapsed-border-radius: 10px;
$mdc-top-app-bar-short-collapsed-width: 56px;
$mdc-top-app-bar-short-collapsed-right-icon-padding: 12px;

// Prominent styles
$mdc-top-app-bar-prominent-row-height: 128px;
$mdc-top-app-bar-prominent-title-bottom-padding: 2px;

// Prominent mobile styles
$mdc-top-app-bar-prominent-mobile-title-bottom-padding: 6px;
21 changes: 18 additions & 3 deletions packages/mdc-top-app-bar/mdc-top-app-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,7 @@
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
min-height: $mdc-top-app-bar-row-height;
height: $mdc-top-app-bar-row-height;
}

&__section {
Expand Down Expand Up @@ -92,7 +91,7 @@
}

.mdc-top-app-bar__row {
min-height: $mdc-top-app-bar-mobile-row-height;
height: $mdc-top-app-bar-mobile-row-height;
}

.mdc-top-app-bar__section {
Expand Down Expand Up @@ -130,5 +129,21 @@
}
}

.mdc-top-app-bar--prominent {
.mdc-top-app-bar__row {
height: $mdc-top-app-bar-prominent-row-height;
}

.mdc-top-app-bar__title {
align-self: flex-end;
padding-bottom: $mdc-top-app-bar-prominent-title-bottom-padding;
}

.mdc-top-app-bar__action-item,
.mdc-top-app-bar__navigation-icon {
align-self: flex-start;
}
}

// Mobile Styles
@include mdc-top-app-bar-mobile-breakpoint_;

0 comments on commit f59b109

Please sign in to comment.