首先,我使用neo64:Bootstrap和自定义主题运行Meteor。
在我的css中进行任意更改后,我有一个按钮显示这样的内容并且它会使新代码热销:
然后在页面重新加载后,按钮看起来像这样:
两次镀铬都将此显示为计算值:
-webkit-box-shadow: rgba(0, 0, 0, 0.227451) 0px 6px 10px 0px, rgba(0, 0, 0, 0.188235) 0px 10px 30px 0px;
-webkit-font-smoothing: antialiased;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
background-color: rgb(255, 152, 0);
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
bottom: -28px;
box-shadow: rgba(0, 0, 0, 0.227451) 0px 6px 10px 0px, rgba(0, 0, 0, 0.188235) 0px 10px 30px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-family: FontAwesome;
font-size: 32px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 56px;
line-height: 32px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
position: relative;
text-align: center;
text-rendering: auto;
transform: matrix(1, 0, 0, 1, 0, 0);
width: 41.140625px;
这是构成按钮的代码:
// BUTTONS
.fab {
margin: 0;
padding: 15px;
width: 56px;
height: 56px;
border-radius: 100%;
cursor: pointer;
transform: none;
& {
.shadow-z-3();
}
&:hover {
.shadow-z-4();
background-color: lighten(@brand-primary, 40%);
}
&:active {
.shadow-z-5();
}
&.fab-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
&.fab-bottom {
position: relative;
bottom: -28px;
}
&.inverse {
background-color: @brand-primary;
color: @white;
&:hover {
background-color: lighten(@brand-primary, 10%);
}
}
i {
position: relative;
top: -5px;
}
}
加号是Font Awesome fa-plus。
这些是我按钮的类(在Jade中):
i.fa.fa-fw.fa-2x.fa-plus.fab.inverse.fab-bottom(data-toggle="modal"
data-target="#createModal" data-backdrop="static" data-keyboard="false")
添加了页面的Jade:
.row
.col-sm-6
.panel.panel-default
.panel-heading
h2.panel-title {{_ "dataA"}}
.list-group
.list-group-item
+each availableShifts
+availableShiftCard
.col-sm-6
.panel.panel-default
.panel-heading
h2.panel-title {{_ "dataB"}}
.list-group
.list-group-item
+each ownShifts
+ownShiftCard
.text-center
i.fa.fa-fw.fa-2x.fa-plus.fab.inverse.fab-bottom(data-toggle="modal"
data-target="#createModal" data-backdrop="static" data-keyboard="false")
我做错了什么?