创建一个HTMl5 Material设计模板(3)
下面是内容区域部分的CSS定义
/*Content area {Start}*/div[role='main']{
width:70%;
flex:1
1
auto
;background:
white
;box-shadow:
inset
00
1
px
#ADADAD;}
.secondary-search-area{
background:#F6F6F6;
height:45
px
;visibility:
hidden
;opacity:0;
}
/*Content area {End}*/
div[role='main']
这是页面内容部分,当是移动尺寸时,放置搜索条目
@media screen and (max-width:900px)
这是移动模型下,当屏幕宽度小于900px时,改变了一些属性,main 改变了,调整了 .header中flex方向到 column , 移动 header .search-area 到 .secondary-search-area, 隐藏了main navigation 和显示 menu-icon,这样激活侧栏显示
下面是材料设计的按钮CSS:
/*Material Icons*/.material-icons {
font-family:
'Material Icons';
font-weight:
normal
;font-style:
normal
;font-size:
24
px
;/* Preferred icon size */
display:
inline-block
;width:
1
em
;height:
1
em
;line-height:
1;
text-transform:
none
;letter-spacing:
normal
;word-wrap:
normal
;white-space:
nowrap
;direction:
ltr
;/* Support for all WebKit browsers. */
-webkit-font-smoothing:
antialiased
;/* Support for Safari and Chrome. */
text-rendering:
optimizeLegibility
;/* Support for Firefox. */
-moz-osx-font-smoothing:
grayscale
;/* Support for IE. */
font-feature-settings:
'liga';
}
Action-button
/*Action buttons*/.action-wrapper{
z-index:2;
}
.action-wrapper :hover > .sub-button-wrapper{
visibility:
visible
;opacity:1;
transform:
scale(1);
}
.sub-button-wrapper{
position:
absolute
;bottom:60
px
;right:5%;
margin:
0
7.5
px
;display:
flex
;flex-direction:
column
;transition:
all
0.3s ease
;transform:
scale(0.7);
visibility:
hidden
;opacity:0;
}
.primary-button{
position:
absolute
;bottom:10
px
;right:5%;
height:50
px
;width:50
px
;background:
#d23f31
url(http://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/btw_ic_speeddial_white_24dp.png)
center center no-repeat
;}
.secondary-button{
height:35
px
;width:35
px
;background:#03A9F4;/*#00BCD4;#448AFF;#ffc107;*/
margin:5
px
0;color:
white
;display:
flex
;justify-content:
center
;align-items:
center
;}
.action-button{
border-radius:50%;
border:
none
;outline:
none
;box-shadow:
0
0
4
px
rgba(0,
0,
0,
.14),
04
px
8px
rgba(0,
0,
0,
.28);}
.overlay{
position:
fixed
;top:0;
left:
-
100%;background:rgba(0
,
0,
0,
0.68);;width:100%;
height:100%;
z-index:1;
visbility:
hidden
;opacity:0;
transition:
visibility
0.1s linear
;}
.visible{
left:0;
visbility:
visible
;opacity:1;
}
action-wrapper
这是和action-button所有相关元素的包装。.它的目标是确保内部每个元素位于屏幕其他内容顶部(与侧栏不是同一边,屏幕的右下角)
.action-button
基本样式,圆形和阴影
.primary-button
这个类包含action-button风格, 像 "+" 是一个图片(取自google的 inbox ;D ) , 颜色和较宽宽度和高度,和这个类有关按钮绝对定位在页面上。
.secondary-button
类似 .primary-button 类, 主要区别是小一些, 不同的颜色以及不是绝对定位的。
.sub-button-wrapper
这是所有secondary-button 插入的地方.
它设置位置为绝对,有margin: 0 7.5px;. 这意味着顶部和底部没有margin, 左右两边是7.5px. 为什么是7.5px,因为我们已经设置 .secondary-buttons宽度和高度是35px. 如果 35 + 7.5 + 7.5 = 50px, 这是 .primary-button大小. 意味着所有的 .secondary-button将在中央。
然后我们有visibility:hidden; 和 opacity:0; . 第一个很重要,因为这使得元素不可见,不会触发任何事件但是还占据空间。.opacity 设置为 0 也使得元素不可见,但是当切换发生时这很有用,能够有一个平滑的切换动画效果。
最后我们有一个传输transform: scale(0.7); 和切换transition:all 0.3s ease;, 这是切换动画效果
.action-wrapper:hover > .sub-button-wrapper
这是我们的目标.action-wrapper, 包含所有当鼠标滑过的元素状态,这样它显示 .secondary-button. 现在有一些有趣的事情,, 如果你看代码你会发现wrapper包装器中所有都和action-button有关,, 它没有 position:absolute . 这样它遵循我们为内容定义的flex flow , 也就是 flex-direction:column.