重新加载后按钮会改变形状

时间:2015-02-19 21:39:55

标签: css3 less pug

首先,我使用neo64:Bootstrap和自定义主题运行Meteor。

在我的css中进行任意更改后,我有一个按钮显示这样的内容并且它会使新代码热销:

[Imgur]

然后在页面重新加载后,按钮看起来像这样:

enter image description here

两次镀铬都将此显示为计算值:

-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")

我做错了什么?

0 个答案:

没有答案