Skip to content

Commit

Permalink
Update top app bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@PatelUtkarsh
PatelUtkarsh committed Aug 9, 2022
1 parent 6378d08 commit 10320a0
Showing 1 changed file with 59 additions and 75 deletions.
134 changes: 59 additions & 75 deletions theme/assets/css/src/material/top-app-bar.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/*
*
* Copyright 2022 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
Expand All @@ -13,14 +12,10 @@
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*
*/
.mdc-top-app-bar {
background-color: #6200ee;
/* @alternate */
background-color: var(--mdc-theme-primary, #6200ee);
color: white;
background-color: var(--md-sys-color-primary, #6200ee);
color: var(--md-sys-color-on-primary, #fff);
display: flex;
position: fixed;
flex-direction: column;
Expand All @@ -29,49 +24,56 @@
width: 100%;
z-index: 4;
}

.mdc-top-app-bar .mdc-top-app-bar__action-item,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon {
color: #fff;
/* @alternate */
color: var(--mdc-theme-on-primary, #fff);
color: var(--md-sys-color-on-primary, #fff);
}
.mdc-top-app-bar .mdc-top-app-bar__action-item::before, .mdc-top-app-bar .mdc-top-app-bar__action-item::after,

.mdc-top-app-bar .mdc-top-app-bar__action-item::before,
.mdc-top-app-bar .mdc-top-app-bar__action-item::after,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon::before,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon::after {
background-color: #fff;
/* @alternate */
background-color: var(--mdc-theme-on-primary, #fff);
background-color: var(--md-sys-color-on-primary, #fff);
}

.mdc-top-app-bar .mdc-top-app-bar__action-item:hover::before,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:hover::before {
opacity: 0.08;
}
.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded--background-focused::before, .mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):focus::before,

.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded--background-focused::before,
.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):focus::before,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--background-focused::before,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):focus::before {
transition-duration: 75ms;
opacity: 0.24;
}

.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded)::after,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded)::after {
transition: opacity 150ms linear;
}

.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):active::after,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):active::after {
transition-duration: 75ms;
opacity: 0.24;
}

.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded {
--mdc-ripple-fg-opacity: 0.24;
}

.mdc-top-app-bar__row {
display: flex;
position: relative;
box-sizing: border-box;
width: 100%;
height: 64px;
}

.mdc-top-app-bar__section {
display: inline-flex;
flex: 1 1 auto;
Expand All @@ -80,145 +82,130 @@
padding: 8px 12px;
z-index: 1;
}

.mdc-top-app-bar__section--align-start {
justify-content: flex-start;
order: -1;
}

.mdc-top-app-bar__section--align-end {
justify-content: flex-end;
order: 1;
}

@mixin selector-typography .mdc-top-app-bar__title, title-large, 1.25, 2, 500;

.mdc-top-app-bar__title {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
/* @alternate */
font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1.25rem;
/* @alternate */
font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
line-height: 2rem;
/* @alternate */
line-height: var(--mdc-typography-headline6-line-height, 2rem);
font-weight: 500;
/* @alternate */
font-weight: var(--mdc-typography-headline6-font-weight, 500);
letter-spacing: 0.0125em;
/* @alternate */
letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
text-decoration: inherit;
/* @alternate */
-webkit-text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
text-transform: inherit;
/* @alternate */
text-transform: var(--mdc-typography-headline6-text-transform, inherit);
/* @noflip */
padding-left: 20px;
/* @noflip */
padding-right: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
z-index: 1;
}
[dir=rtl] .mdc-top-app-bar__title, .mdc-top-app-bar__title[dir=rtl] {
/* @noflip */

[dir="rtl"] .mdc-top-app-bar__title,
.mdc-top-app-bar__title[dir="rtl"] {
padding-left: 0;
/* @noflip */
padding-right: 20px;
}

.mdc-top-app-bar--short-collapsed {
/* @noflip */
border-radius: 0 0 24px 0;
}
[dir=rtl] .mdc-top-app-bar--short-collapsed, .mdc-top-app-bar--short-collapsed[dir=rtl] {
/* @noflip */

[dir="rtl"] .mdc-top-app-bar--short-collapsed,
.mdc-top-app-bar--short-collapsed[dir="rtl"] {
border-radius: 0 0 0 24px;
}

.mdc-top-app-bar--short {
top: 0;
/* @noflip */
right: auto;
/* @noflip */
left: 0;
width: 100%;
transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
[dir=rtl] .mdc-top-app-bar--short, .mdc-top-app-bar--short[dir=rtl] {
/* @noflip */

[dir="rtl"] .mdc-top-app-bar--short,
.mdc-top-app-bar--short[dir="rtl"] {
right: 0;
/* @noflip */
left: auto;
}

.mdc-top-app-bar--short .mdc-top-app-bar__row {
height: 56px;
}

.mdc-top-app-bar--short .mdc-top-app-bar__section {
padding: 4px;
}

.mdc-top-app-bar--short .mdc-top-app-bar__title {
transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
}

.mdc-top-app-bar--short-collapsed {
/* @alternate */
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
width: 56px;
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__title {
display: none;
}

.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__action-item {
transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item {
width: 112px;
}

.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end {
/* @noflip */
padding-left: 0;
/* @noflip */
padding-right: 12px;
}
[dir=rtl] .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end, .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end[dir=rtl] {
/* @noflip */

[dir="rtl"] .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end,
.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end[dir="rtl"] {
padding-left: 12px;
/* @noflip */
padding-right: 0;
}

.mdc-top-app-bar--dense .mdc-top-app-bar__row {
height: 48px;
}

.mdc-top-app-bar--dense .mdc-top-app-bar__section {
padding: 0 4px;
}

.mdc-top-app-bar--dense .mdc-top-app-bar__title {
/* @noflip */
padding-left: 12px;
/* @noflip */
padding-right: 0;
}
[dir=rtl] .mdc-top-app-bar--dense .mdc-top-app-bar__title, .mdc-top-app-bar--dense .mdc-top-app-bar__title[dir=rtl] {
/* @noflip */

[dir="rtl"] .mdc-top-app-bar--dense .mdc-top-app-bar__title,
.mdc-top-app-bar--dense .mdc-top-app-bar__title[dir="rtl"] {
padding-left: 0;
/* @noflip */
padding-right: 12px;
}

.mdc-top-app-bar--prominent .mdc-top-app-bar__row {
height: 128px;
}

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

.mdc-top-app-bar--prominent .mdc-top-app-bar__action-item,
.mdc-top-app-bar--prominent .mdc-top-app-bar__navigation-icon {
align-self: flex-start;
Expand All @@ -229,28 +216,27 @@
}

.mdc-top-app-bar--fixed-scrolled {
/* @alternate */
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
transition: box-shadow 200ms linear;
}

.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__row {
height: 96px;
}

.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__section {
padding: 0 12px;
}

.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title {
/* @noflip */
padding-left: 20px;
/* @noflip */
padding-right: 0;
padding-bottom: 9px;
}
[dir=rtl] .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title, .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title[dir=rtl] {
/* @noflip */

[dir="rtl"] .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title,
.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title[dir="rtl"] {
padding-left: 0;
/* @noflip */
padding-right: 20px;
}

Expand All @@ -275,6 +261,7 @@
}

@media (max-width: 599px) {

.mdc-top-app-bar__row {
height: 56px;
}
Expand All @@ -290,16 +277,15 @@
.mdc-top-app-bar--short-collapsed {
transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end {
/* @noflip */
padding-left: 0;
/* @noflip */
padding-right: 12px;
}
[dir=rtl] .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end, .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end[dir=rtl] {
/* @noflip */

[dir="rtl"] .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end,
.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end[dir="rtl"] {
padding-left: 12px;
/* @noflip */
padding-right: 0;
}

Expand All @@ -311,5 +297,3 @@
padding-top: 56px;
}
}

/*# sourceMappingURL=mdc.top-app-bar.css.map*/

0 comments on commit 10320a0

Please sign in to comment.