Subscribed unsubscribe Subscribe Subscribe

Material Design LiteのNAVIGATION LAYOUTSのCSSをみてみる

www.getmdl.io

mdl-layout

  • Defines container as an MDL component
  • Required on outer div element
.mdl-layout {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch
}

※display: flexでdirection: columnなので、flexアイテムは縦に並んでいきます

mdl-js-layout

  • Assigns basic MDL behavior to layout
  • Required on outer div element
    ※js用のクラスです

mdl-layout__header

  • Defines container as an MDL component
  • Required on header element
.mdl-layout__header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    min-height: 64px;
    max-height: 1000px;
    z-index: 3;
    background-color: rgb(33,150,243);
    color: rgb(255,255,255);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: max-height,box-shadow;
    transition-property: max-height,box-shadow
}

※display: flexでdirection: columnなので、flexアイテムは縦に並んでいきます

※高さは64px~1000px

rgb(33,150,243)→#2196f3(Vivid blue)
rgb(255,255,255)→#ffffff(white)
Color Hex - ColorHexa.com

※box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
CSS3 box-shadow property

※transition-duration → Specifies how many seconds or milliseconds a transition effect takes to complete
※transition-timing-function → Specifies the speed curve of the transition effect
※transition-property → Specifies the name of the CSS property the transition effect is for

mdl-layout-icon

  • Used for adding an application icon. Gets concealed by menu icon if both are visible.
  • Goes on optional icon element
.mdl-layout__header>.mdl-layout-icon {
    position: absolute;
    left: 40px;
    top: 16px;
    height: 32px;
    width: 32px;
    overflow: hidden;
    z-index: 3;
    display: block
}

mdl-layout__header-row

  • Defines container as MDL header row
  • Required on header content div
.mdl-layout__header-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 64px;
    margin: 0;
    padding: 0 40px 0 80px
}

flex-direction: row;とalign-items: center;とalign-self: stretch;がメイン
※align-self: stretch; (default): stretch to fill the container (still respect min-width/max-width)
※padding: top right bottom left;

mdl-layout-title

  • Defines layout title text
  • Required on layout title span
.mdl-layout-title {
    display: block;
    position: relative;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .02em;
    font-weight: 400;
    box-sizing: border-box
}

※左上のサービス名

mdl-layout-spacer

  • Used to align elements inside a header or drawer, by growing to fill remaining space. Commonly used for aligning elements to the right.
  • Goes on optional div following layout title
.mdl-layout-spacer {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

flex-grow⇔flex-shrink
flex-grow: number|initial|inherit;
※The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.
CSS flex-grow propertyflexボックス内で相対的に1つのflexアイテムの大きさと指定しています

mdl-navigation

  • Defines container as MDL navigation group
  • Required on nav element
.mdl-navigation {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    box-sizing: border-box
}

mdl-navigation__link

  • Defines anchor as MDL navigation link
  • Required on header and/or drawer anchor elements
.mdl-navigation__link {
    color: #424242;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    margin: 0
}

※#424242: Very dark gray

mdl-layout__drawer

  • Defines container as MDL layout drawer
  • Required on drawer div element
.mdl-layout__drawer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 240px;
    height: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    box-sizing: border-box;
    border-right: 1px solid #e0e0e0;
    background: #fafafa;
    -webkit-transform: translateX(-250px);
    -ms-transform: translateX(-250px);
    transform: translateX(-250px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    color: #424242;
    overflow: visible;
    overflow-y: auto;
    z-index: 5
}

mdl-layout__content

  • Defines container as MDL layout content
  • Required on main element
.mdl-layout__content {
    -ms-flex: 0 1 auto;
    display: inline-block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    z-index: 1;
    -webkit-overflow-scrolling: touch
}

mdl-layout__header--scroll

  • Makes the header scroll with the content
  • Optional; goes on header element
.mdl-layout__header--scroll .mdl-layout__header-row {
    width: 100%
}

.mdl-layout__header--seamed,.mdl-layout__header--scroll {
    box-shadow: none
}

mdl-layout--large-screen-only

  • Hides an element on smaller screens
  • Optional; goes on any descendant of mdl-layout
.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
    display: none
}
this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH),
this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this)),

L.prototype.screenSizeHandler_ = function() {
    this.screenSizeMediaQuery_.matches ? this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN) : (this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN),
    this.drawer_ && this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN))
}

mdl-layout--small-screen-only

  • Hides an element on larger screens
  • Optional; goes on any descendant of mdl-layout
.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
    display: none
}

mdl-layout__header--waterfall

  • Allows a "waterfall" effect with multiple header lines
  • Optional; goes on header element
.mdl-layout__header--waterfall {
    box-shadow: none;
    overflow: hidden
}

※waterfallの場合は親から継承してきたものを上書いています

this.tabBar_ && this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW)) : a === this.Mode_.WATERFALL && (this.content_.addEventListener("scroll", this.contentScrollHandler_.bind(this)),
this.contentScrollHandler_()));

L.prototype.contentScrollHandler_ = function() {
    this.header_.classList.contains(this.CssClasses_.IS_ANIMATING) || (this.content_.scrollTop > 0 && !this.header_.classList.contains(this.CssClasses_.IS_COMPACT) ? (this.header_.classList.add(this.CssClasses_.CASTING_SHADOW),
    this.header_.classList.add(this.CssClasses_.IS_COMPACT),
    this.header_.classList.add(this.CssClasses_.IS_ANIMATING)) : this.content_.scrollTop <= 0 && this.header_.classList.contains(this.CssClasses_.IS_COMPACT) && (this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW),
    this.header_.classList.remove(this.CssClasses_.IS_COMPACT),
    this.header_.classList.add(this.CssClasses_.IS_ANIMATING)))
}

mdl-layout__header--transparent

  • Makes header transparent (draws on top of layout background)
  • Optional; goes on header element
.mdl-layout__header--transparent.mdl-layout__header--transparent {
    background-color: transparent;
    box-shadow: none
}

※これで親要素で指定された背景にすることができます。結果として、画像の上に文字を置くことができます

mdl-layout__tab-bar

  • Defines container as an MDL tab bar
  • Required on div element inside header (tabbed layout)
.mdl-layout__tab-bar {
    height: 96px;
    margin: 0;
    width: calc(100% - 112px);
    padding: 0 0 0 56px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: rgb(33,150,243);
    overflow-y: hidden;
    overflow-x: scroll
}

mdl-layout__tab

  • Defines anchor as MDL tab link
  • Required on tab bar anchor elements
.mdl-layout__tab {
    margin: 0;
    border: none;
    padding: 0 24px;
    float: left;
    position: relative;
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    text-decoration: none;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    overflow: hidden
}

is-active

  • Defines tab as default active tab
  • Optional; goes on tab bar anchor element and associated tab section element
.mdl-layout__tab-bar-button.is-active {
    color: rgb(255,255,255)
}

.mdl-layout.is-upgraded .mdl-layout__tab.is-active {
    color: rgb(255,255,255)
}

.mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {
    height: 2px;
    width: 100%;
    display: block;
    content: " ";
    bottom: 0;
    left: 0;
    position: absolute;
    background: rgb(83,109,254);
    -webkit-animation: border-expand .2s cubic-bezier(.4,0,.4,1).01s alternate forwards;
    animation: border-expand .2s cubic-bezier(.4,0,.4,1).01s alternate forwards;
    -webkit-transition: all 1s cubic-bezier(.4,0,1,1);
    transition: all 1s cubic-bezier(.4,0,1,1)
}

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
    color: rgba(0,0,0,.87)
}

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    height: 2px;
    width: 100%;
    display: block;
    content: " ";
    bottom: 0;
    left: 0;
    position: absolute;
    background: rgb(33,150,243);
    -webkit-animation: border-expand .2s cubic-bezier(.4,0,.4,1).01s alternate forwards;
    animation: border-expand .2s cubic-bezier(.4,0,.4,1).01s alternate forwards;
    -webkit-transition: all 1s cubic-bezier(.4,0,1,1);
    transition: all 1s cubic-bezier(.4,0,1,1)
}

.mdl-tooltip.is-active {
    -webkit-animation: pulse 200ms cubic-bezier(0,0,.2,1)forwards;
    animation: pulse 200ms cubic-bezier(0,0,.2,1)forwards
}

mdl-layout__tab-panel

  • Defines container as tab content panel
  • Required on tab section elements
.mdl-layout__tab-panel {
    display: block
}

.mdl-layout.is-upgraded .mdl-layout__tab-panel {
    display: none
}

.mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active {
    display: block
}

mdl-layout--fixed-tabs

  • Uses fixed tabs instead of the default scrollable tabs
  • Optional; goes on outer div element (not div inside header)
.mdl-layout--fixed-tabs .mdl-layout__tab-bar {
    padding: 0;
    overflow: hidden;
    width: 100%
}

.mdl-layout--fixed-tabs .mdl-layout__tab-bar-button {
    display: none
}

.mdl-layout--fixed-tabs .mdl-layout__tab {
    float: none;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0
}